/* Twilight palette keeps labels legible over the illustrated pond. */
html[data-art-direction='twilight'] .home .dock .btn.door,
html[data-art-direction='twilight'] .screen .btn.navControl,
html[data-art-direction='twilight'] .screen .btn.mapNav {
  background: linear-gradient(160deg, #377da7f2, #1a527fe8);
  border: 1px solid #a8d8ecaa;
  color: #fff;
  box-shadow:
    inset 0 1px 0 #e2f7ff99,
    0 5px 16px #0a243d77;
  text-shadow: 0 1px 2px #09263c;
}
html[data-art-direction='twilight'] .home .btn.gold.playBtn {
  background: linear-gradient(160deg, #20896d, #096451);
  border: 1px solid #c1f4d3;
  color: #fff;
  box-shadow:
    inset 0 1px 0 #effff4a6,
    0 5px 18px #102c4388;
  text-shadow: 0 1px 3px #075446;
}
html[data-art-direction='twilight'] .home .tagline {
  background: #183a57d9;
}
/* Wardrobe: smoked glass catches the warm light without competing with the item labels. */
html[data-art-direction='twilight'] .screen.shop .tabs,
html[data-art-direction='twilight'] .shop .shopAction {
  background: linear-gradient(155deg, #c9e3d238, #182d2de3 32%, #0c2225e8);
  border: 1px solid #e4f4e552;
  box-shadow:
    inset 0 1px 0 #ffffff80,
    inset 0 -1px 0 #b9e1d02b,
    0 10px 24px #09191670;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
html[data-art-direction='twilight'] .screen.shop .tabs .tab.on {
  background: linear-gradient(150deg, #c9f9e672, #4ca58d80 55%, #24685e90);
  box-shadow:
    inset 0 1px 0 #f2fff2b0,
    inset 0 0 0 1px #d5f8e35c,
    0 4px 12px #071e1c55;
}
html[data-art-direction='twilight'] .shop .itemGrid .card {
  background: linear-gradient(150deg, #b5d5c345, #244b48c9 38%, #102d30e0);
  border: 1px solid #d3efe14d;
  box-shadow:
    inset 0 1px 0 #f0fff19c,
    inset 0 -1px 0 #b7ddce24,
    0 7px 18px #071c2060;
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  color: #f8fff9;
}
html[data-art-direction='twilight'] .shop .itemGrid .card.sel {
  border-color: #b9f5e5;
  box-shadow:
    inset 0 0 0 1px #b9f5e5,
    inset 0 1px 0 #fff,
    0 0 14px #8ee9cf70,
    0 7px 18px #071c2060;
}
html[data-art-direction='twilight'] .shop .itemGrid .card .th {
  background: radial-gradient(circle at 40% 25%, #94cbb75c, #1b4447b8 68%, #102e32db);
  box-shadow:
    inset 0 1px 2px #e4fff65c,
    inset 0 -4px 10px #0a212880;
}
html[data-art-direction='twilight'] .shop .screenNav .navBack {
  background: linear-gradient(160deg, #42684df5, #234538f5);
  border-color: #dfbf78aa;
}
html[data-art-direction='twilight'] .shop .card .lockp {
  display: block;
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  color: #e2f4e8;
  font-size: 0.75rem;
}
html[data-art-direction='twilight'] .shop .card .lockp .ic {
  vertical-align: -0.2em;
}
html[data-art-direction='twilight'] .shop .itemGrid {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 12px), transparent);
}
html[data-art-direction='twilight'] .logoShine::after {
  opacity: 0.35;
}
html[data-art-direction='twilight'] .home .boStage .bo::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -36%;
  right: -36%;
  top: 69%;
  height: 28%;
  border-radius: 50%;
  border: 1px solid #b4dcda55;
  box-shadow:
    0 0 0 6px #173f6420,
    0 0 0 7px #a2cccf30,
    0 8px 12px #102f4d55;
}
@media (min-width: 900px) and (min-height: 700px) {
  html[data-art-direction='twilight'] .home .logoImg {
    width: min(46vw, 600px);
  }
}
@media (min-aspect-ratio: 6/5) and (min-height: 561px) {
  html[data-art-direction='twilight'] body:has(.play) #toast {
    top: calc(var(--sat) + 180px);
  }
}
@media (min-aspect-ratio: 6/5) and (min-height: 561px) and (max-width: 900px) {
  html[data-art-direction='twilight'] body:has(.play) #toast {
    left: auto;
    right: 12px;
    width: min(240px, 30vw);
    transform: none;
  }
}
@media (max-aspect-ratio: 6/5) {
  html[data-art-direction='twilight'] .screen .screenNav .navBack {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 15px;
    background: linear-gradient(160deg, #42684df5, #234538f5);
    border-color: #dfbf78aa;
  }
  html[data-art-direction='twilight'] .screen .screenNav .navBack .navLabel {
    display: none;
  }
  html[data-art-direction='twilight'] .play .tool span.lbl,
  html[data-art-direction='twilight'] .play .rule {
    font-size: 0.75rem;
  }
  html[data-art-direction='twilight'] .home .dock .doorLabel {
    font-size: 0.75rem;
  }
  html[data-art-direction='twilight'] .shop .screenNav {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 6px;
  }
  html[data-art-direction='twilight'] .shop .screenNav .navBack {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 15px;
  }
  html[data-art-direction='twilight'] .shop .navBack .navLabel {
    display: none;
  }
  html[data-art-direction='twilight'] .shop .screenNav .ttl {
    white-space: nowrap;
    font-size: clamp(1rem, 5vw, 1.2rem);
    padding: 6px 4px;
    border-radius: 12px;
    color: #fff5d8;
    background: #193b30e8;
    text-shadow: 0 1px 2px #0a1d17;
  }
  html[data-art-direction='twilight'] .shopAction .actInfo .need {
    color: #ffd0d9;
    margin-top: 3px;
  }
  html[data-art-direction='twilight'] .shopAction .actInfo b {
    font-size: 1rem;
    line-height: 1.15;
  }
  html[data-art-direction='twilight'] .shopAction > .btn {
    flex: none;
    padding-inline: 0.8em;
  }
  html[data-art-direction='twilight'] .shop .bubble.below {
    margin-top: -25px;
  }
}
@media (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .play > .hintSheet {
    top: calc(var(--sat) + 64px) !important;
    padding: 8px 10px;
    gap: 4px;
  }
  .play > .hintSheet p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.2;
  }
  .play.hasSheet .side .buddy {
    display: none;
  }
}
@media (max-width: 360px) {
  html[data-art-direction='twilight'] .settings .setRow:has(select) {
    flex-direction: column;
    align-items: stretch;
  }
  html[data-art-direction='twilight'] .settings .setRow select {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-aspect-ratio: 6/5) and (max-height: 650px) {
  html[data-art-direction='twilight'] .daily > .dailyHero {
    order: 1;
    margin-top: 0;
  }
  html[data-art-direction='twilight'] .daily > :is(.dailyPlay, .dailyDone) {
    order: 2;
    margin-bottom: 0;
  }
  html[data-art-direction='twilight'] .daily > .cal {
    order: 3;
  }
  html[data-art-direction='twilight'] .daily > .dailyRankBtn {
    order: 4;
  }
}
@media (max-width: 600px) {
  html[data-art-direction='twilight'] .panel.confirm {
    padding-top: 54px;
  }
}
@media (max-width: 360px) and (max-aspect-ratio: 6/5) {
  html[data-art-direction='twilight'] .screen.home .dock {
    gap: 4px;
  }
  html[data-art-direction='twilight'] .screen.home .dock .btn.door {
    width: calc((100vw - 112px) / 4);
  }
  html[data-art-direction='twilight'] .screen.home .dock .btn.door:nth-child(3) {
    width: clamp(64px, 21vw, 70px);
  }
  html[data-art-direction='twilight'] .home .dock .doorLabel {
    max-width: 100%;
    font-size: 0.75rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }
  html[data-art-direction='twilight']:lang(nl) .home .dock .doorLabel,
  html[data-art-direction='twilight']:lang(de) .home .dock .doorLabel {
    font-size: 0.6rem;
    white-space: nowrap;
  }
}
@media (max-width: 360px) and (max-height: 650px) {
  html[data-art-direction='twilight'] body:has(.play) #toast {
    bottom: calc(var(--sab) + 92px);
  }
  html[data-art-direction='twilight'] body:has(.play) #toast .toast {
    font-size: 0.72rem;
    line-height: 1.15;
    padding: 5px 9px;
  }
}

/* Neutral smoked glass in the wardrobe, with enough dark tint behind small text. */
html[data-art-direction='twilight'] .screen.shop .tabs,
html[data-art-direction='twilight'] .screen.shop .shopAction {
  background: linear-gradient(155deg, #c9d1d226, #11191dcc 38%, #090d11d9);
  border-color: #edf3f14d;
  box-shadow:
    inset 0 1px 0 #ffffff85,
    inset 0 -1px 0 #ffffff1a,
    0 10px 24px #0008;
}
html[data-art-direction='twilight'] .screen.shop .tabs .tab.on {
  background: linear-gradient(150deg, #ffffff70, #bbc8cb45 45%, #59656872);
  box-shadow:
    inset 0 1px 0 #ffffffc0,
    inset 0 0 0 1px #ffffff60,
    0 4px 12px #0007;
}
html[data-art-direction='twilight'] .screen.shop .itemGrid .card {
  background: linear-gradient(150deg, #eef3f333, #182126b8 38%, #090e12d4);
  border-color: #e5eff04d;
  box-shadow:
    inset 0 1px 0 #ffffff90,
    inset 0 -1px 0 #ffffff1c,
    0 7px 18px #0007;
}
html[data-art-direction='twilight'] .screen.shop .itemGrid .card.sel {
  border-color: #f4f7e7;
  box-shadow:
    inset 0 0 0 1px #f4f7e7,
    inset 0 1px 0 #fff,
    0 0 14px #dce8d950,
    0 7px 18px #0007;
}
html[data-art-direction='twilight'] .screen.shop .itemGrid .card .th {
  background: radial-gradient(circle at 40% 25%, #becbd155, #273238b5 68%, #0c1418db);
  box-shadow:
    inset 0 1px 2px #ffffff70,
    inset 0 -4px 10px #0008;
}
html[data-art-direction='twilight'] .screen.shop .screenNav .navBack,
html[data-art-direction='twilight'] .screen.shop .screenNav .ttl {
  background: linear-gradient(155deg, #dce4e633, #121b20d9 45%, #080e12dc);
  border-color: #f0f4ef66;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
@media (min-aspect-ratio: 6/5) {
  html[data-art-direction='twilight'] .screen.shop .screenNav .ttl {
    flex: 0 1 auto;
    margin-inline: auto;
    padding: 7px 20px;
    border-radius: 14px;
    color: #fff5d8;
    text-shadow: 0 1px 3px #000;
  }
}
html[data-art-direction='twilight'] .screen.shop .shopAction .btn {
  background: linear-gradient(150deg, #dce5e257, #3c4e50bf 45%, #1d2b2dd9);
  border: 1px solid #e4efeb85;
  color: #fff;
  text-shadow: 0 1px 3px #000b;
  box-shadow:
    inset 0 1px 0 #ffffffa0,
    0 4px 12px #0007;
}

/* Secondary menus share the wardrobe's smoked glass while keeping the play surface unchanged. */
html[data-art-direction='twilight']
  :is(
    .dailyHero,
    .cal,
    .modeCard,
    .settings,
    .levelPanel,
    .worldTitle,
    .ach:not(.done):not(.claimed)
  ) {
  background: linear-gradient(155deg, #c9d1d226, #11191de8 38%, #090d11ed);
  box-shadow:
    inset 0 1px 0 #ffffff70,
    inset 0 0 0 1px #e5efee40,
    0 10px 24px #0008;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
html[data-art-direction='twilight'] .screen .screenNav .navBack {
  background: linear-gradient(155deg, #dce4e633, #121b20e0 45%, #080e12e3);
  border-color: #f0f4ef66;
}
html[data-art-direction='twilight'] :is(.daily, .modes) .screenNav::before {
  background: #101b1edc;
}

.hintSheet .hintView {
  display: none;
}
@media (max-aspect-ratio: 6/5) {
  .hintSheet .hintView {
    display: inline-flex;
  }
  .play > .hintSheet.collapsed {
    left: 50% !important;
    top: auto !important;
    bottom: calc(var(--sab) + 100px);
    transform: translateX(-50%);
    padding: 4px;
  }
  .hintSheet.collapsed p,
  .hintSheet.collapsed .row > .btn:not(.hintView),
  .hintSheet.collapsed::after {
    display: none;
  }
}
/* End of src/styles/twilight.css */

/* End of dist-static/assets/twilight-DjQjBzWw.css */