@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
  color-scheme: light;
  --bg: #edf3ef;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-soft: rgba(250, 252, 249, 0.72);
  --ink: #18211e;
  --muted: #6d7771;
  --line: rgba(208, 220, 212, 0.9);
  --line-strong: #b9c9be;
  --cell: rgba(255, 255, 255, 0.88);
  --cell-alt: rgba(239, 244, 240, 0.92);
  --accent: #67c7a1;
  --accent-ink: #103f36;
  --accent-soft: rgba(46, 132, 102, 0.1);
  --accent-line: rgba(46, 132, 102, 0.24);
  --accent-focus: rgba(46, 132, 102, 0.16);
  --accent-glow: rgba(103, 199, 161, 0.2);
  --accent-highlight: rgba(103, 199, 161, 0.74);
  --accent-highlight-soft: rgba(103, 199, 161, 0.16);
  --accent-shadow-soft: rgba(30, 79, 64, 0.12);
  --accent-shadow: rgba(30, 79, 64, 0.18);
  --accent-preview: rgba(46, 132, 102, 0.16);
  --accent-preview-line: rgba(46, 132, 102, 0.28);
  --accent-intro-fill: rgba(46, 132, 102, 0.2);
  --accent-intro-glow: rgba(46, 132, 102, 0.22);
  --accent-sample-line: rgba(46, 132, 102, 0.1);
  --accent-sample-glow: rgba(103, 199, 161, 0.22);
  --invalid: #c77b67;
  --shadow: 0 30px 70px rgba(21, 33, 29, 0.14);
  --radius: 22px;
  --radius-sm: 16px;
  --radius-xs: 12px;
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
}

.dev-complete-toggle {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 250, 247, 0.62)),
    color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.74));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(190, 213, 202, 0.82));
  border-radius: 999px;
  bottom: 14px;
  box-shadow: 0 10px 24px rgba(33, 58, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: var(--ink);
  cursor: pointer;
  font: 800 0.68rem/1 "Sora", "Space Grotesk", sans-serif;
  left: 14px;
  letter-spacing: 0.03em;
  padding: 9px 12px;
  position: fixed;
  z-index: 90;
}

.dev-complete-toggle[aria-pressed="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent),
    linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #166348));
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, 0.5));
  color: #07140f;
}

.dev-complete-toggle:hover,
.dev-complete-toggle:focus-visible {
  transform: translateY(-1px);
}

body[data-theme="dusk"] {
  color-scheme: dark;
  --bg: #111715;
  --panel: #1a211f;
  --panel-soft: #151c1a;
  --ink: #eef5f1;
  --muted: #a9b7b1;
  --line: #293733;
  --line-strong: #41544e;
  --cell: #1e2925;
  --cell-alt: #18231f;
  --accent: #8bd7bd;
  --accent-ink: #d8fff0;
  --accent-soft: rgba(139, 215, 189, 0.12);
  --accent-line: rgba(139, 215, 189, 0.32);
  --accent-focus: rgba(139, 215, 189, 0.22);
  --accent-glow: rgba(139, 215, 189, 0.18);
  --accent-highlight: rgba(139, 215, 189, 0.62);
  --accent-highlight-soft: rgba(139, 215, 189, 0.16);
  --accent-shadow-soft: rgba(139, 215, 189, 0.12);
  --accent-shadow: rgba(139, 215, 189, 0.16);
  --accent-preview: rgba(139, 215, 189, 0.18);
  --accent-preview-line: rgba(139, 215, 189, 0.36);
  --accent-intro-fill: rgba(139, 215, 189, 0.18);
  --accent-intro-glow: rgba(139, 215, 189, 0.22);
  --accent-sample-line: rgba(139, 215, 189, 0.12);
  --accent-sample-glow: rgba(139, 215, 189, 0.24);
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.3);
}

body[data-theme="classicWood"] {
  --bg: #251108;
  --panel: #8d4a24;
  --panel-soft: #70361c;
  --ink: #f8dfb5;
  --muted: #e2b176;
  --line: #5f2c17;
  --line-strong: #3f1b10;
  --cell: #5b2519;
  --cell-alt: #71301d;
  --accent: #f3d98f;
  --accent-ink: #fff1bd;
  --accent-soft: rgba(243, 217, 143, 0.16);
  --accent-line: rgba(255, 224, 151, 0.42);
  --accent-focus: rgba(243, 217, 143, 0.22);
  --accent-glow: rgba(243, 217, 143, 0.16);
  --accent-highlight: rgba(255, 224, 151, 0.42);
  --accent-highlight-soft: rgba(255, 224, 151, 0.14);
  --accent-shadow-soft: rgba(28, 12, 5, 0.18);
  --accent-shadow: rgba(28, 12, 5, 0.26);
  --accent-preview: rgba(243, 217, 143, 0.18);
  --accent-preview-line: rgba(255, 224, 151, 0.34);
  --accent-intro-fill: rgba(243, 217, 143, 0.18);
  --accent-intro-glow: rgba(255, 224, 151, 0.22);
  --accent-sample-line: rgba(222, 143, 68, 0.24);
  --accent-sample-glow: rgba(243, 217, 143, 0.2);
  --shadow: 0 22px 54px rgba(28, 12, 5, 0.44);
}

body[data-theme="retro"] {
  --bg: #090b12;
  --panel: rgba(17, 22, 36, 0.92);
  --panel-soft: rgba(11, 16, 28, 0.94);
  --ink: #f7fbff;
  --muted: #a7b4ca;
  --line: rgba(69, 84, 123, 0.72);
  --line-strong: #536488;
  --cell: #101525;
  --cell-alt: #0c111e;
  --accent: #00d8ff;
  --accent-ink: #d9faff;
  --accent-soft: rgba(0, 216, 255, 0.14);
  --accent-line: rgba(0, 216, 255, 0.42);
  --accent-focus: rgba(0, 216, 255, 0.24);
  --accent-glow: rgba(0, 216, 255, 0.18);
  --accent-highlight: rgba(0, 216, 255, 0.42);
  --accent-highlight-soft: rgba(0, 216, 255, 0.16);
  --accent-shadow-soft: rgba(0, 216, 255, 0.1);
  --accent-shadow: rgba(0, 216, 255, 0.16);
  --accent-preview: rgba(0, 216, 255, 0.18);
  --accent-preview-line: rgba(0, 216, 255, 0.36);
  --accent-intro-fill: rgba(0, 216, 255, 0.18);
  --accent-intro-glow: rgba(0, 216, 255, 0.22);
  --accent-sample-line: rgba(0, 216, 255, 0.14);
  --accent-sample-glow: rgba(0, 216, 255, 0.2);
  --shadow: 0 22px 54px rgba(0, 0, 0, 0.46);
}

body[data-theme="classicWood"] {
  background:
    radial-gradient(ellipse at 42% 8%, rgba(182, 96, 42, 0.22), transparent 34%),
    linear-gradient(90deg, rgba(7, 3, 1, 0.48) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 3px, transparent 3px 148px),
    repeating-linear-gradient(90deg, rgba(224, 141, 70, 0.05) 0 2px, transparent 2px 72px),
    linear-gradient(115deg, rgba(139, 66, 27, 0.22), transparent 35%, rgba(0, 0, 0, 0.22) 74%),
    var(--bg);
  background-size: auto, 100% 100%, 100% 148px, 72px 100%, auto, auto;
}

body[data-theme="retro"] {
  background:
    radial-gradient(circle at 18% 16%, rgba(0, 216, 255, 0.15), transparent 25%),
    radial-gradient(circle at 82% 20%, rgba(255, 49, 88, 0.16), transparent 24%),
    radial-gradient(circle at 68% 82%, rgba(211, 60, 255, 0.12), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 50%, rgba(255, 255, 255, 0.025) 50% 75%, transparent 75%),
    var(--bg);
  background-size: auto, auto, auto, 28px 28px, auto;
}

body[data-theme="retro"]::after {
  content: "";
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

body[data-theme="retro"]::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 42px);
  inset: 0;
  opacity: 0.35;
}

.interactive-background {
  --interactive-blocks-image: url("puzzle_background.png");
  --interactive-image-offset-x: 0px;
  --interactive-image-offset-y: 0px;
  --interactive-rendered-width: 100vw;
  --interactive-rendered-height: 100vh;
  --interactive-grid-size: 64px;
  --interactive-grid-line-width: 1px;
  --interactive-grid-line: rgba(199, 211, 204, 0);
  --interactive-grid-highlight: var(--accent-highlight);
  --interactive-line-opacity: 0;
  --interactive-highlight-opacity: 0.52;
  --interactive-glow-radius: 190px;
  --interactive-glow-falloff: 62%;
  --interactive-pointer-x: 50vw;
  --interactive-pointer-y: 42vh;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.interactive-background__image,
.interactive-background__grid,
.interactive-background__highlight,
.interactive-background__blocks {
  inset: 0;
  position: absolute;
}

.interactive-background__image {
  background:
    linear-gradient(rgba(246, 247, 245, 0.2), rgba(246, 247, 245, 0.2)),
    var(--bg);
}

.interactive-background__grid,
.interactive-background__highlight,
.interactive-background__blocks {
  height: var(--interactive-rendered-height);
  left: var(--interactive-image-offset-x);
  top: var(--interactive-image-offset-y);
  transform: translateZ(0);
  width: var(--interactive-rendered-width);
}

.interactive-background__grid,
.interactive-background__highlight {
  background-image:
    repeating-linear-gradient(
      to right,
      var(--interactive-grid-line) 0 var(--interactive-grid-line-width),
      transparent var(--interactive-grid-line-width) var(--interactive-grid-size)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--interactive-grid-line) 0 var(--interactive-grid-line-width),
      transparent var(--interactive-grid-line-width) var(--interactive-grid-size)
    );
  opacity: var(--interactive-line-opacity);
  will-change: opacity;
}

.interactive-background__highlight {
  --interactive-mask-x: calc(var(--interactive-pointer-x) - var(--interactive-image-offset-x));
  --interactive-mask-y: calc(var(--interactive-pointer-y) - var(--interactive-image-offset-y));
  background-image:
    repeating-linear-gradient(
      to right,
      var(--interactive-grid-highlight) 0 var(--interactive-grid-line-width),
      transparent var(--interactive-grid-line-width) var(--interactive-grid-size)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--interactive-grid-highlight) 0 var(--interactive-grid-line-width),
      transparent var(--interactive-grid-line-width) var(--interactive-grid-size)
    );
  -webkit-mask-image:
    radial-gradient(
      circle var(--interactive-glow-radius) at var(--interactive-mask-x) var(--interactive-mask-y),
      rgba(0, 0, 0, 0.95) 0,
      rgba(0, 0, 0, 0.58) var(--interactive-glow-falloff),
      transparent 100%
    );
  mask-image:
    radial-gradient(
      circle var(--interactive-glow-radius) at var(--interactive-mask-x) var(--interactive-mask-y),
      rgba(0, 0, 0, 0.95) 0,
      rgba(0, 0, 0, 0.58) var(--interactive-glow-falloff),
      transparent 100%
    );
  opacity: 0;
  transition: opacity 220ms ease;
  will-change: opacity, mask-image, -webkit-mask-image;
}

body[data-theme="dusk"] .interactive-background {
  --interactive-grid-highlight: var(--accent-highlight);
  --interactive-highlight-opacity: 0.48;
}

body[data-theme="dusk"] .interactive-background__image {
  background:
    linear-gradient(rgba(17, 23, 21, 0.64), rgba(17, 23, 21, 0.64)),
    var(--bg);
}

body[data-theme="classicWood"] .interactive-background {
  --interactive-blocks-image: url("puzzle_background_classic_wood.png");
  --interactive-grid-highlight: rgba(255, 224, 151, 0.34);
  --interactive-highlight-opacity: 0.3;
}

body[data-theme="classicWood"] .interactive-background__image {
  background:
    radial-gradient(ellipse at 42% 8%, rgba(182, 96, 42, 0.2), transparent 34%),
    linear-gradient(90deg, rgba(7, 3, 1, 0.48) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 3px, transparent 3px 148px),
    repeating-linear-gradient(90deg, rgba(224, 141, 70, 0.05) 0 2px, transparent 2px 72px),
    linear-gradient(115deg, rgba(139, 66, 27, 0.2), transparent 35%, rgba(0, 0, 0, 0.24) 74%),
    var(--bg);
  background-size: auto, 100% 100%, 100% 148px, 72px 100%, auto, auto;
}

body[data-theme="classicWood"] .interactive-background__blocks::before {
  background-image: url("puzzle_background_classic_wood.png");
  filter: drop-shadow(0 13px 18px rgba(28, 12, 5, 0.3));
  opacity: 0.78;
}

body[data-theme="classicWood"] .interactive-background__blocks::after {
  display: none;
}

body[data-theme="retro"] .interactive-background {
  --interactive-blocks-image: url("puzzle_background_retro.png");
  --interactive-grid-highlight: rgba(0, 216, 255, 0.42);
  --interactive-highlight-opacity: 0.3;
}

body[data-theme="retro"] .interactive-background__image {
  background: transparent;
}

body[data-theme="retro"] .interactive-background__blocks::before {
  background-image: url("puzzle_background_retro.png");
  filter: drop-shadow(0 0 12px rgba(0, 216, 255, 0.18));
}

body[data-theme="retro"] .interactive-background__blocks::after {
  display: none;
}

.interactive-background__blocks {
  overflow: hidden;
}

.interactive-background__blocks::before {
  background-image: var(--interactive-blocks-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  filter:
    hue-rotate(var(--accent-block-hue-shift, 0deg))
    saturate(var(--accent-block-saturation, 1))
    contrast(var(--accent-block-contrast, 1))
    brightness(var(--accent-block-brightness, 1));
  inset: 0;
  position: absolute;
  transition: filter 160ms ease;
}

.interactive-background__blocks::after {
  background-color: var(--accent-block-tint, transparent);
  content: "";
  inset: 0;
  opacity: var(--accent-block-tint-opacity, 0);
  pointer-events: none;
  position: absolute;
  -webkit-mask-image: var(--interactive-blocks-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--interactive-blocks-image);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  transition: background-color 180ms ease, opacity 180ms ease;
}

.interactive-background.is-active .interactive-background__highlight {
  opacity: var(--interactive-highlight-opacity);
}

.interactive-background.is-touch .interactive-background__highlight {
  --interactive-highlight-opacity: 0.1;
  opacity: var(--interactive-highlight-opacity);
}

.interactive-background.is-reduced-motion .interactive-background__highlight,
.interactive-background.is-disabled .interactive-background__highlight {
  opacity: 0;
  transition: none;
}

body.transitioning {
  pointer-events: none;
}

button {
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button:hover {
  transform: translateY(-1px);
}

button:focus-visible {
  outline: 3px solid var(--accent-focus);
  outline-offset: 3px;
}

.hidden { display: none !important; }

.sr-only {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.screen {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: min(100vw, 1440px);
  min-height: 100dvh;
  padding: clamp(16px, 2.2vw, 28px);
  position: relative;
  width: 100%;
  z-index: 1;
}

.menu-screen {
  display: grid;
  align-items: stretch;
  --showcase-accent-a: rgba(103, 199, 161, 0.2);
  --showcase-accent-b: rgba(255, 255, 255, 0.74);
  --showcase-accent-c: rgba(103, 199, 161, 0.12);
  --showcase-grid-line: rgba(187, 208, 197, 0.82);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.82), #67c7a1);
  --showcase-piece-shadow: rgba(25, 69, 56, 0.18);
  --showcase-before-left: 12%;
  --showcase-before-top: 18%;
  --showcase-before-width: 24%;
  --showcase-before-height: 20%;
  --showcase-after-right: 12%;
  --showcase-after-top: 42%;
  --showcase-after-width: 14%;
  --showcase-after-height: 32%;
}

.menu-screen[data-spotlight="daily"] {
  --showcase-accent-a: rgba(103, 199, 161, 0.24);
  --showcase-accent-b: rgba(255, 255, 255, 0.78);
  --showcase-accent-c: rgba(103, 199, 161, 0.14);
  --showcase-grid-line: rgba(190, 211, 199, 0.84);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.84), #67c7a1);
  --showcase-piece-shadow: rgba(26, 88, 68, 0.18);
}

.menu-screen[data-spotlight="story"] {
  --showcase-accent-a: rgba(107, 146, 255, 0.2);
  --showcase-accent-b: rgba(255, 255, 255, 0.72);
  --showcase-accent-c: rgba(111, 98, 255, 0.14);
  --showcase-grid-line: rgba(189, 198, 226, 0.84);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.84), #7a8cff);
  --showcase-piece-shadow: rgba(51, 65, 134, 0.22);
  --showcase-before-left: 16%;
  --showcase-before-top: 22%;
  --showcase-before-width: 18%;
  --showcase-before-height: 28%;
  --showcase-after-right: 16%;
  --showcase-after-top: 36%;
  --showcase-after-width: 22%;
  --showcase-after-height: 22%;
}

.menu-screen[data-spotlight="classic"] {
  --showcase-accent-a: rgba(255, 193, 92, 0.18);
  --showcase-accent-b: rgba(255, 255, 255, 0.7);
  --showcase-accent-c: rgba(255, 214, 134, 0.12);
  --showcase-grid-line: rgba(210, 203, 174, 0.82);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.84), #efc66e);
  --showcase-piece-shadow: rgba(113, 81, 20, 0.18);
}

.menu-screen[data-spotlight="countdown"] {
  --showcase-accent-a: rgba(255, 138, 92, 0.2);
  --showcase-accent-b: rgba(255, 255, 255, 0.72);
  --showcase-accent-c: rgba(255, 138, 92, 0.14);
  --showcase-grid-line: rgba(221, 197, 187, 0.82);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.84), #ff8a5c);
  --showcase-piece-shadow: rgba(147, 67, 41, 0.22);
  --showcase-before-left: 10%;
  --showcase-before-top: 16%;
  --showcase-before-width: 28%;
  --showcase-before-height: 18%;
}

.menu-screen[data-spotlight="bomb"] {
  --showcase-accent-a: rgba(255, 112, 88, 0.18);
  --showcase-accent-b: rgba(255, 244, 228, 0.62);
  --showcase-accent-c: rgba(92, 17, 5, 0.12);
  --showcase-grid-line: rgba(215, 189, 180, 0.8);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 233, 210, 0.9), #ff8558);
  --showcase-piece-shadow: rgba(111, 35, 15, 0.24);
  --showcase-after-right: 11%;
  --showcase-after-top: 30%;
  --showcase-after-width: 18%;
  --showcase-after-height: 18%;
}

.menu-screen[data-spotlight="ice"] {
  --showcase-accent-a: rgba(109, 208, 225, 0.18);
  --showcase-accent-b: rgba(255, 255, 255, 0.74);
  --showcase-accent-c: rgba(109, 208, 225, 0.12);
  --showcase-grid-line: rgba(186, 211, 220, 0.82);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.88), #80d6df);
  --showcase-piece-shadow: rgba(46, 111, 118, 0.18);
  --showcase-before-left: 18%;
  --showcase-before-top: 14%;
  --showcase-before-width: 20%;
  --showcase-before-height: 22%;
  --showcase-after-top: 50%;
}

.menu-screen[data-spotlight="lightning"] {
  --showcase-accent-a: rgba(255, 217, 81, 0.18);
  --showcase-accent-b: rgba(255, 255, 255, 0.72);
  --showcase-accent-c: rgba(255, 217, 81, 0.14);
  --showcase-grid-line: rgba(216, 210, 181, 0.82);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.88), #ffe05f);
  --showcase-piece-shadow: rgba(130, 112, 24, 0.2);
  --showcase-before-left: 14%;
  --showcase-before-top: 20%;
  --showcase-before-width: 14%;
  --showcase-before-height: 34%;
  --showcase-after-right: 18%;
  --showcase-after-top: 22%;
  --showcase-after-width: 26%;
  --showcase-after-height: 16%;
}

.menu-screen[data-spotlight="workbench"] {
  --showcase-accent-a: rgba(188, 134, 255, 0.18);
  --showcase-accent-b: rgba(255, 255, 255, 0.74);
  --showcase-accent-c: rgba(188, 134, 255, 0.12);
  --showcase-grid-line: rgba(206, 193, 228, 0.82);
  --showcase-piece-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.88), #bf8cff);
  --showcase-piece-shadow: rgba(87, 58, 128, 0.2);
  --showcase-before-left: 11%;
  --showcase-before-top: 18%;
  --showcase-before-width: 22%;
  --showcase-before-height: 22%;
  --showcase-after-right: 14%;
  --showcase-after-top: 46%;
  --showcase-after-width: 24%;
  --showcase-after-height: 14%;
}

.menu-decor {
  display: none;
  filter: drop-shadow(0 12px 14px var(--accent-shadow));
  gap: 2px;
  grid-template-columns: repeat(3, 52px);
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.menu-decor i {
  aspect-ratio: 1;
  background: rgba(99, 183, 168, 0.22);
  border: 1px solid var(--accent-soft);
  display: block;
}

.decor-a { right: 28%; top: -8px; transform: rotate(-24deg); }
.decor-a i:nth-child(1),
.decor-a i:nth-child(3),
.decor-b i:nth-child(2),
.decor-c i:nth-child(2),
.decor-d i:nth-child(1),
.decor-d i:nth-child(3) { opacity: 0; }
.decor-b { right: 12%; top: 120px; transform: rotate(12deg); }
.decor-c { bottom: 120px; left: 10%; transform: rotate(-5deg); }
.decor-d { bottom: 150px; right: 8%; transform: rotate(0deg); opacity: 0.55; }

.menu-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 20;
}

body.in-game #themeAccentControl {
  display: none;
}

.volume-control {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  min-height: 42px;
  position: relative;
}

.icon-toggle {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(32, 37, 34, 0.08);
  color: var(--accent);
  display: inline-flex;
  font-size: 1rem;
  height: 42px;
  justify-content: center;
  min-height: 42px;
  padding: 0;
  position: relative;
  width: 42px;
}

.volume-popover {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(32, 37, 34, 0.12);
  display: flex;
  height: 42px;
  justify-content: center;
  opacity: 0;
  padding: 0 12px;
  pointer-events: none;
  position: absolute;
  right: 50px;
  top: 0;
  transform: translateX(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  width: 172px;
}

.volume-control:hover .volume-popover,
.volume-control:focus-within .volume-popover,
.volume-control.volume-open .volume-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.volume-popover input[type="range"] {
  accent-color: var(--accent);
  cursor: pointer;
  height: 16px;
  width: 138px;
}

body:not([data-theme="mint"]):not([data-theme="dusk"]) .theme-accent-control .volume-popover {
  display: none;
}

.volume-popover input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.hue-popover input[type="range"] {
  appearance: none;
  background:
    linear-gradient(
      90deg,
      hsl(0 100% 50%) 0%,
      hsl(0 100% 50%) 4%,
      hsl(35 92% 56%),
      hsl(60 88% 56%),
      hsl(115 72% 54%),
      hsl(175 78% 50%),
      hsl(220 88% 60%),
      hsl(275 82% 62%),
      hsl(320 86% 60%),
      hsl(360 100% 50%) 96%,
      hsl(360 100% 50%) 100%
    );
  border: 1px solid rgba(32, 37, 34, 0.14);
  border-radius: 999px;
  height: 16px;
  width: 138px;
}

.hue-popover input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(32, 37, 34, 0.22);
  height: 22px;
  width: 22px;
}

.hue-popover input[type="range"]::-moz-range-thumb {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(32, 37, 34, 0.22);
  height: 18px;
  width: 18px;
}

.hue-popover input[type="range"]::-moz-range-track {
  background: transparent;
  border: 0;
}

.icon-toggle.off {
  color: var(--muted);
}

.icon-toggle.off::after {
  background: currentColor;
  content: "";
  height: 2px;
  left: 10px;
  position: absolute;
  top: 20px;
  transform: rotate(-34deg);
  width: 22px;
}

.eyebrow {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }

.menu-screen {
  align-items: center;
  display: grid;
  justify-items: center;
  min-height: 100dvh;
  padding: clamp(10px, 2dvh, 18px);
}

.home-shell {
  align-content: start;
  background:
    radial-gradient(circle at 50% 12%, var(--accent-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 250, 247, 0.46));
  border: 1px solid rgba(209, 225, 216, 0.9);
  border-radius: 34px;
  box-shadow: 0 28px 72px rgba(28, 54, 45, 0.16);
  display: grid;
  gap: clamp(10px, 1.4dvh, 14px);
  height: calc(100dvh - clamp(20px, 4dvh, 36px));
  max-height: 920px;
  max-width: 460px;
  overflow: hidden;
  padding: clamp(14px, 2dvh, 20px);
  position: relative;
  width: min(100%, 460px);
}

.home-shell::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.9), transparent 16%),
    radial-gradient(circle at 84% 14%, var(--accent-glow), transparent 20%),
    linear-gradient(135deg, transparent 34%, rgba(255, 255, 255, 0.28), transparent 70%);
  content: "";
  inset: 0;
  opacity: 0.92;
  pointer-events: none;
  position: absolute;
}

.home-shell > * {
  position: relative;
  z-index: 1;
}

.home-topbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 48px;
  z-index: 40;
}

.home-brand {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.home-logo {
  display: block;
  flex: 0 0 auto;
  height: 44px;
  position: relative;
  width: 44px;
}

.home-logo::before,
.home-logo::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.home-logo::before {
  background-image: url("logo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: var(--home-logo-filter);
  transition: filter 160ms ease;
}

.home-logo::after {
  background: var(--home-logo-tint);
  opacity: var(--home-logo-tint-opacity);
  -webkit-mask-image: url("logo.png");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("logo.png");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.home-kicker {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 1px;
  text-transform: uppercase;
}

.home-brand h1 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.45rem, 4.8vw, 2rem);
  letter-spacing: -0.07em;
  line-height: 1;
  margin: 0;
}

.event-timer,
.mode-badge {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.44)),
    var(--panel);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent-ink);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 800;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

.home-hero {
  align-items: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.9), transparent 38%),
    radial-gradient(circle at 24% 78%, var(--accent-soft), transparent 26%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.5), rgba(232, 246, 239, 0.4));
  border: 1px solid rgba(206, 225, 215, 0.9);
  border-radius: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 20px 42px rgba(41, 86, 68, 0.12);
  display: grid;
  min-height: clamp(176px, 28dvh, 246px);
  overflow: hidden;
  place-items: center;
  position: relative;
}

.hero-board {
  aspect-ratio: 1;
  background: rgba(229, 239, 233, 0.86);
  border: 6px solid rgba(255, 255, 255, 0.84);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(166, 191, 177, 0.68),
    0 24px 46px rgba(47, 84, 69, 0.16);
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(9, 1fr);
  padding: 6px;
  position: relative;
  width: clamp(142px, 34dvh, 190px);
}

.hero-board span {
  aspect-ratio: 1;
  background: rgba(248, 252, 249, 0.9);
  border-radius: 4px;
}

.hero-board span.filled {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 5px 10px var(--accent-shadow-soft);
}

.floating-piece {
  display: grid;
  gap: 4px;
  position: absolute;
}

.floating-piece i {
  aspect-ratio: 1;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), var(--accent));
  border-radius: 9px;
  box-shadow: 0 10px 18px var(--accent-shadow-soft);
  width: 24px;
}

.floating-piece--a {
  animation: home-float 5.6s ease-in-out infinite;
  grid-template-columns: repeat(3, 1fr);
  left: 26px;
  top: 34px;
}

.floating-piece--b {
  animation: home-float 6.8s ease-in-out infinite -1.6s;
  grid-template-columns: repeat(2, 1fr);
  right: 30px;
  top: 48px;
}

.floating-piece--c {
  animation: home-float 6.2s ease-in-out infinite -3.2s;
  bottom: 30px;
  grid-template-columns: repeat(3, 1fr);
  right: 54px;
}

.hero-badge {
  align-items: center;
  animation: badge-pop 420ms cubic-bezier(0.2, 0.82, 0.24, 1) both;
  background: linear-gradient(145deg, #fff9d7, #fff2a7);
  border: 1px solid rgba(205, 167, 64, 0.35);
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(129, 104, 28, 0.16);
  display: grid;
  gap: 1px;
  left: 22px;
  padding: 9px 12px;
  position: absolute;
  top: 22px;
}

.hero-badge span {
  color: #8b6a11;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-badge strong {
  color: #2f2810;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.primary-play-button {
  align-items: center;
  animation: play-glow 2.8s ease-in-out infinite;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent),
    linear-gradient(145deg, var(--accent), var(--accent-ink));
  border: 0;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 18px 34px var(--accent-shadow),
    0 0 0 7px var(--accent-soft);
  color: white;
  cursor: pointer;
  display: inline-flex;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 4.8vw, 1.55rem);
  font-weight: 900;
  gap: 12px;
  justify-content: center;
  min-height: clamp(58px, 8dvh, 72px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
  width: 100%;
}

.primary-play-button:hover,
.primary-play-button:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 22px 42px var(--accent-shadow),
    0 0 0 8px var(--accent-soft);
  transform: translateY(-2px) scale(1.01);
}

.play-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.84rem;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.mode-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mode-grid .main-mode-card {
  align-items: center;
  aspect-ratio: 1 / 1.08;
  border-radius: 24px;
  gap: 5px;
  justify-content: center;
  min-height: 0;
  padding: 12px 8px;
  text-align: center;
}

.mode-grid .main-mode-card::before {
  opacity: 0.42;
}

.mode-grid .main-mode-card strong {
  font-size: clamp(0.94rem, 3vw, 1.08rem);
  letter-spacing: -0.04em;
}

.mode-grid .main-mode-card small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.1;
  margin: 0;
}

.mode-icon {
  align-items: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), var(--accent-soft));
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  color: var(--accent-ink);
  display: inline-flex;
  font-size: 1.12rem;
  height: 40px;
  justify-content: center;
  margin-bottom: 2px;
  width: 40px;
}

.mode-badge {
  font-size: 0.62rem;
  min-height: 22px;
  padding: 0 8px;
}

.special-mode-section {
  min-width: 0;
}

.section-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.section-head h2 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.04em;
  margin: 0;
}

.special-mode-grid {
  display: flex;
  gap: 10px;
  margin: 0 -4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 4px 8px;
  scrollbar-width: none;
}

.special-mode-grid::-webkit-scrollbar {
  display: none;
}

.special-mode-button {
  aspect-ratio: auto;
  border-radius: 22px;
  flex: 0 0 104px;
  gap: 7px;
  min-height: 78px;
  padding: 10px;
}

.special-mode-button svg {
  height: 25px;
  width: 25px;
}

.special-mode-button span {
  font-size: 0.72rem;
  font-weight: 800;
}

.bottom-nav {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(33, 58, 48, 0.12);
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 62px;
  padding: 6px;
}

.bottom-nav__item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 18px;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 2px;
  justify-items: center;
  min-height: 50px;
  padding: 5px 2px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.bottom-nav__item span {
  font-size: 1rem;
  line-height: 1;
}

.bottom-nav__item strong {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.bottom-nav__item.active,
.bottom-nav__item:hover,
.bottom-nav__item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-ink);
  transform: translateY(-1px);
}

.menu-toggles {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.6)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(33, 58, 48, 0.12);
  flex-direction: row;
  gap: 4px;
  padding: 5px;
  right: max(14px, calc((100vw - 460px) / 2 + 14px));
  top: max(12px, calc((100dvh - min(920px, 100dvh - clamp(20px, 4dvh, 36px))) / 2 + 12px));
}

.menu-toggles .volume-control {
  min-height: 36px;
}

.menu-toggles .icon-toggle {
  border-radius: 50%;
  box-shadow: none;
  height: 36px;
  min-height: 36px;
  width: 36px;
}

.menu-toggles .volume-popover {
  right: 0;
  top: 44px;
  transform: translateY(-6px);
}

.menu-toggles .volume-control:hover .volume-popover,
.menu-toggles .volume-control:focus-within .volume-popover,
.menu-toggles .volume-control.volume-open .volume-popover {
  transform: translateY(0);
}

.legacy-menu-status {
  display: none;
}

.menu-layout {
  display: grid;
  gap: clamp(14px, 1.7vw, 26px);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
  height: calc(100dvh - (2 * clamp(16px, 2.2vw, 28px)));
  min-height: 0;
}

.menu-primary {
  display: grid;
  gap: clamp(12px, 1.7dvh, 22px);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.menu-hero {
  display: grid;
  align-content: end;
  gap: 8px;
  max-width: 740px;
}

.menu-hero h1,
.topbar h1 {
  font-family: "Sora", "Space Grotesk", "Segoe UI", sans-serif;
  font-size: clamp(3rem, 8vw, 6.4rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.92;
  margin: 0;
}

.menu-hero .eyebrow {
  color: var(--accent-ink);
}

.topbar h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
}

.menu-lead {
  color: var(--muted);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.6;
  margin: 4px 0 0;
  max-width: 62ch;
}

.menu-stack {
  display: grid;
  align-content: end;
  gap: clamp(10px, 1.45dvh, 14px);
  grid-template-rows: minmax(124px, auto) repeat(2, minmax(82px, auto)) auto;
  min-height: 0;
  width: 100%;
}

.menu-showcase {
  display: grid;
  gap: 16px;
  min-height: 0;
}

.showcase-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.34)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: clamp(18px, 2vw, 24px);
  position: relative;
  transition:
    background 240ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.showcase-card--hero {
  align-content: start;
  display: grid;
  gap: 12px;
}

.showcase-card--hero .eyebrow {
  position: relative;
  z-index: 1;
}

.showcase-card--hero::before {
  background:
    radial-gradient(circle at 12% 16%, var(--showcase-accent-a), transparent 42%),
    linear-gradient(120deg, transparent 18%, var(--showcase-accent-c) 52%, transparent 82%);
  content: "";
  inset: 0;
  opacity: 0.92;
  pointer-events: none;
  position: absolute;
  transition: opacity 240ms ease, transform 240ms ease;
}

.showcase-card--hero h2 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 2.3vw, 2.2rem);
  letter-spacing: -0.05em;
  line-height: 1.04;
  margin: 0;
  position: relative;
  z-index: 1;
}

.showcase-card--hero p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  position: relative;
  z-index: 1;
}

.showcase-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.showcase-pills span {
  background: color-mix(in srgb, var(--showcase-accent-b) 74%, rgba(255, 255, 255, 0.4));
  border: 1px solid color-mix(in srgb, var(--showcase-accent-b) 80%, rgba(255, 255, 255, 0.5));
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  text-transform: uppercase;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.showcase-card--board {
  display: none;
  gap: 16px;
  grid-template-rows: 1fr auto;
  min-height: 320px;
}

.showcase-board-glow {
  background:
    radial-gradient(circle at 50% 20%, var(--showcase-accent-a), transparent 35%),
    radial-gradient(circle at 18% 82%, var(--showcase-accent-b), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(244, 248, 245, 0.38));
  border-radius: calc(var(--radius) + 2px);
  inset: 18px;
  opacity: 0.95;
  position: absolute;
  transition: background 240ms ease, opacity 240ms ease, transform 240ms ease;
}

.showcase-board-grid {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.46), transparent 24%),
    radial-gradient(circle at 20% 72%, var(--showcase-accent-c), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(90deg, var(--showcase-grid-line) 0 1px, transparent 1px 11.11%),
    repeating-linear-gradient(0deg, var(--showcase-grid-line) 0 1px, transparent 1px 11.11%);
  border: 1px solid color-mix(in srgb, var(--showcase-grid-line) 84%, rgba(255, 255, 255, 0.2));
  border-radius: calc(var(--radius) + 2px);
  min-height: 220px;
  overflow: hidden;
  position: relative;
  transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  z-index: 1;
}

.showcase-board-grid::before,
.showcase-board-grid::after {
  background: var(--showcase-piece-gradient);
  border-radius: 16px;
  box-shadow: 0 12px 30px var(--showcase-piece-shadow);
  content: "";
  position: absolute;
  transition: inset 240ms ease, width 240ms ease, height 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

.showcase-board-grid::before {
  height: var(--showcase-before-height);
  left: var(--showcase-before-left);
  top: var(--showcase-before-top);
  width: var(--showcase-before-width);
}

.showcase-board-grid::after {
  height: var(--showcase-after-height);
  right: var(--showcase-after-right);
  top: var(--showcase-after-top);
  width: var(--showcase-after-width);
}

.showcase-board-piece {
  background: var(--showcase-piece-gradient);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 10px 24px var(--showcase-piece-shadow);
  pointer-events: none;
  position: absolute;
  transition: background 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.showcase-board-piece--a,
.showcase-board-piece--b,
.showcase-board-piece--c,
.showcase-board-piece--d {
  animation: showcase-float 6.4s ease-in-out infinite;
}

.showcase-board-piece--a {
  height: 10%;
  left: 26%;
  top: 54%;
  width: 22%;
}

.showcase-board-piece--b {
  animation-delay: -1.2s;
  height: 12%;
  left: 58%;
  top: 18%;
  width: 12%;
}

.showcase-board-piece--c {
  animation-delay: -2.8s;
  height: 18%;
  left: 44%;
  top: 62%;
  width: 10%;
}

.showcase-board-piece--d {
  animation-delay: -4.1s;
  height: 10%;
  left: 14%;
  top: 72%;
  width: 10%;
}

.showcase-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  z-index: 1;
}

.showcase-stats div {
  background: color-mix(in srgb, var(--showcase-accent-b) 66%, rgba(255, 255, 255, 0.34));
  border: 1px solid color-mix(in srgb, var(--showcase-accent-b) 78%, rgba(255, 255, 255, 0.4));
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: 12px 14px;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.showcase-stats span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.showcase-stats strong {
  display: block;
  font-size: 1rem;
  line-height: 1.1;
}

.section-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-head h2 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  letter-spacing: -0.04em;
  margin: 0;
}

.mode-card,
.dialog-panel,
.topbar,
.hud,
.board-wrap,
.tray-section {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.mode-card {
  align-items: flex-start;
  backdrop-filter: blur(18px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1dvh, 10px);
  justify-content: center;
  min-height: clamp(88px, 11.6dvh, 108px);
  padding: clamp(16px, 2dvh, 22px) clamp(18px, 1.8vw, 24px);
  text-align: left;
}

.main-mode-card {
  align-items: flex-start;
  border-radius: calc(var(--radius) + 4px);
  isolation: isolate;
  min-height: clamp(82px, 10.8dvh, 112px);
  overflow: hidden;
  padding: clamp(17px, 2.05dvh, 22px) clamp(20px, 1.9vw, 24px);
  position: relative;
  text-align: left;
  border-color: var(--accent-line);
}

#dailyStartMain {
  min-height: clamp(126px, 18dvh, 170px);
}

.main-mode-card::before {
  background:
    radial-gradient(circle at 82% 50%, var(--accent-glow), transparent 34%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.28), transparent 36%, rgba(255, 255, 255, 0.1) 62%, transparent 100%);
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 220ms ease;
  z-index: 0;
}

.main-mode-card strong,
.main-mode-card small {
  position: relative;
  transform: none;
  width: auto;
  z-index: 1;
}

.main-mode-card strong {
  font-size: clamp(1.55rem, 2vw, 2.1rem);
  letter-spacing: -0.05em;
  margin: 0;
  transition: transform 220ms ease, color 180ms ease;
}

.main-mode-card small {
  font-size: 0.92rem;
  margin: 0;
  max-width: 60ch;
  transition: opacity 190ms ease, transform 210ms ease;
}

.mode-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.mode-card__chips span {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 9px;
  text-transform: uppercase;
}

.mode-card.main-mode-card:hover,
.mode-card.main-mode-card:focus-visible {
  border-color: var(--accent-preview-line);
  box-shadow: 0 28px 56px var(--accent-shadow), 0 0 0 1px var(--accent-highlight-soft);
  transform: translateY(-2px);
}

.mode-card.main-mode-card:hover::before,
.mode-card.main-mode-card:focus-visible::before {
  opacity: 1;
}

.mode-card.main-mode-card:hover strong {
  color: var(--accent-ink);
  transform: translateX(4px);
}

.mode-card.main-mode-card:focus-visible strong {
  color: var(--accent-ink);
  transform: translateX(4px);
}

.mode-card.main-mode-card:hover small,
.mode-card.main-mode-card:focus-visible small {
  opacity: 0.86;
  transform: translateX(4px);
}

.mode-card:hover,
.special-mode-button:hover,
.draft-option:hover,
.icon-toggle:hover,
.story-actions button:hover,
.choice-row button:hover,
.dialog-actions button:hover,
.text-button:hover,
.icon-button:hover {
  background: var(--panel-soft);
  border-color: var(--accent-line);
  box-shadow: 0 20px 44px var(--accent-shadow-soft);
}

.mode-card strong {
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
}

.mode-card small,
.choice-row small {
  color: var(--muted);
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  margin-top: 6px;
}

.mode-card__kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 2px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.special-mode-section {
  margin-top: 0;
}

.special-mode-grid {
  display: grid;
  gap: clamp(8px, 1.15dvh, 12px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.special-mode-button {
  align-items: center;
  aspect-ratio: 1 / 1.04;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12)),
    var(--panel);
  border-radius: calc(var(--radius-sm) + 2px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.1dvh, 12px);
  justify-content: center;
  min-height: 0;
  padding: clamp(8px, 1.25dvh, 12px);
}

.special-mode-button svg {
  fill: none;
  height: clamp(24px, 3.4dvh, 32px);
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: clamp(24px, 3.4dvh, 32px);
}

.special-mode-button span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

.settings-copy {
  color: var(--muted);
  line-height: 1.55;
  margin: -2px 0 2px;
}

.dialog {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(237, 243, 239, 0.74);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 30;
}

.dialog-panel {
  backdrop-filter: blur(18px);
  border-radius: calc(var(--radius) + 2px);
  display: grid;
  gap: 14px;
  max-height: min(88dvh, 760px);
  max-width: 560px;
  overflow: auto;
  padding: 24px;
  position: relative;
  width: min(100%, 560px);
}

.special-dialog-panel h2 {
  margin-bottom: 8px;
}

.modal-stats {
  display: grid;
  gap: 10px;
}

.modal-stats--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modal-stats div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.94);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: 12px 14px;
}

.modal-stats span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.modal-stats strong {
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.04em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.special-short {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}

.special-dialog-panel p:not(.eyebrow):not(.special-short) {
  color: var(--muted);
  line-height: 1.45;
}

.difficulty-row {
  margin-top: 18px;
}

.difficulty-row button.difficulty-choice {
  align-content: start;
  display: grid;
  gap: 8px;
  min-height: 126px;
}

.difficulty-chip {
  align-self: start;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: var(--accent-ink);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  text-transform: uppercase;
}

.modal-back {
  margin-top: 14px;
}

.story-panel-head {
  display: grid;
  gap: 2px;
}

.story-back {
  background: transparent;
  border: 0;
  color: var(--accent-ink);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  justify-self: start;
  letter-spacing: -0.01em;
  margin: -2px 0 4px;
  min-height: 0;
  padding: 4px 8px 4px 0;
}

.story-back:hover,
.story-back:focus-visible {
  color: var(--accent);
}

.story-panel-head .eyebrow {
  margin-bottom: 4px;
}

.story-panel-head h2 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0;
}

.story-panel-head p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 4px 0 0;
}

.story-progress-card {
  background:
    radial-gradient(circle at 20% 10%, var(--accent-glow), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.04)),
    var(--panel-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: calc(var(--radius-sm) + 4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 16px 34px var(--accent-shadow-soft);
  display: grid;
  gap: 8px;
  overflow: hidden;
  padding: 10px 12px;
  position: relative;
}

.story-progress-card::after {
  background:
    linear-gradient(90deg, transparent, var(--accent-highlight-soft), transparent),
    repeating-linear-gradient(90deg, var(--accent-sample-line) 0 1px, transparent 1px 34px);
  content: "";
  inset: 0;
  opacity: 0.34;
  pointer-events: none;
  position: absolute;
}

.story-chapter-meta {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
  margin: 0;
  position: relative;
  z-index: 1;
}

.story-progress-card .modal-stats {
  position: relative;
  z-index: 1;
}

.settings-panel {
  max-width: 760px;
  width: min(100%, 760px);
}

.theme-row button {
  --theme-preview-image: url("puzzle_background.png");
  --theme-preview-position: center;
  --theme-preview-filter:
    hue-rotate(var(--theme-preview-block-hue-shift, 0deg))
    saturate(var(--theme-preview-block-saturation, 1))
    contrast(var(--theme-preview-block-contrast, 1))
    brightness(var(--theme-preview-block-brightness, 1));
  --theme-preview-overlay:
    linear-gradient(90deg, rgba(7, 19, 18, 0.2), transparent 28%, rgba(255, 255, 255, 0.12) 74%, rgba(7, 19, 18, 0.24));
  align-items: stretch;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.38));
  border-radius: 18px;
  display: flex;
  justify-content: center;
  min-height: 92px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.theme-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.theme-row .theme-button__label {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 0 24px;
  position: absolute;
  z-index: 2;
}

.theme-row button strong {
  color: var(--ink);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.32);
  z-index: 2;
}

.theme-row button::before {
  content: "";
  inset: 0;
  position: absolute;
  background-image: var(--theme-preview-image);
  background-position: var(--theme-preview-position);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: var(--theme-preview-filter);
  opacity: 0.96;
}

.theme-row button::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 34%, rgba(7, 19, 18, 0.14)),
    var(--theme-preview-overlay),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 46%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.theme-row button[data-theme-choice="mint"] {
  --theme-preview-image: url("puzzle_background.png");
  --theme-preview-filter:
    hue-rotate(var(--theme-preview-block-hue-shift, 0deg))
    saturate(var(--theme-preview-block-saturation, 1))
    contrast(var(--theme-preview-block-contrast, 1))
    brightness(var(--theme-preview-block-brightness, 1))
    drop-shadow(0 10px 16px rgba(27, 52, 47, 0.14));
  --theme-preview-overlay:
    linear-gradient(90deg, var(--theme-preview-sample-glow, rgba(115, 201, 167, 0.18)), transparent 46%, var(--theme-preview-highlight-soft, rgba(115, 201, 167, 0.1))),
    linear-gradient(90deg, rgba(246, 247, 245, 0.16), transparent 34%, rgba(246, 247, 245, 0.04) 62%, rgba(10, 32, 28, 0.12)),
    linear-gradient(90deg, var(--theme-preview-highlight-soft, rgba(115, 201, 167, 0.1)), transparent 60%);
}

.theme-row button[data-theme-choice="dusk"] {
  --theme-preview-image: url("puzzle_background.png");
  --theme-preview-filter:
    hue-rotate(var(--theme-preview-block-hue-shift, 0deg))
    saturate(var(--theme-preview-block-saturation, 1))
    contrast(calc(var(--theme-preview-block-contrast, 1) * 1.08))
    brightness(calc(var(--theme-preview-block-brightness, 1) * 0.62))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.32));
  --theme-preview-overlay:
    linear-gradient(90deg, var(--theme-preview-sample-glow, rgba(115, 201, 167, 0.18)), transparent 46%, var(--theme-preview-highlight-soft, rgba(115, 201, 167, 0.1))),
    linear-gradient(90deg, rgba(13, 18, 17, 0.64), rgba(13, 18, 17, 0.16) 42%, rgba(4, 7, 7, 0.44) 100%),
    linear-gradient(90deg, var(--theme-preview-highlight-soft, rgba(115, 201, 167, 0.1)), transparent 64%);
}

.theme-row button[data-theme-choice="classicWood"] {
  --theme-preview-image: url("puzzle_background_classic_wood.png");
  --theme-preview-position: center 54%;
  --theme-preview-filter: saturate(1.04) contrast(1.02) drop-shadow(0 12px 18px rgba(28, 12, 5, 0.26));
  --theme-preview-overlay:
    radial-gradient(ellipse at 42% 8%, rgba(182, 96, 42, 0.18), transparent 34%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 64px),
    repeating-linear-gradient(90deg, rgba(224, 141, 70, 0.05) 0 2px, transparent 2px 34px),
    linear-gradient(115deg, rgba(139, 66, 27, 0.12), transparent 35%, rgba(0, 0, 0, 0.2) 74%);
}

.theme-row button[data-theme-choice="retro"] {
  --theme-preview-image: url("puzzle_background_retro.png");
  --theme-preview-position: center 52%;
  --theme-preview-filter: saturate(1.08) contrast(1.06) drop-shadow(0 0 12px rgba(0, 216, 255, 0.2));
  --theme-preview-overlay:
    radial-gradient(circle at 24% 45%, rgba(0, 216, 255, 0.2), transparent 18%),
    radial-gradient(circle at 78% 38%, rgba(255, 49, 88, 0.2), transparent 18%),
    linear-gradient(90deg, rgba(8, 14, 22, 0.18), rgba(8, 14, 22, 0.02) 42%, rgba(8, 14, 22, 0.22) 100%);
}

.theme-row button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 14px 30px var(--accent-shadow);
}

.calendar-head {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 44px 1fr 44px;
}

.calendar-head h2 {
  margin: 0;
  text-align: center;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 600;
  margin: 18px 0 6px;
  text-align: center;
}

.calendar-day {
  aspect-ratio: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: var(--ink);
  font-size: 0.95rem;
  min-height: 0;
  padding: 0;
  position: relative;
}

.calendar-day.outside {
  color: #9fa7a2;
  opacity: 0.48;
}

.calendar-day.future {
  color: #b7bfba;
  cursor: not-allowed;
  opacity: 0.55;
}

.calendar-day.selected {
  background: var(--accent);
  color: white;
}

.calendar-day.completed::before {
  border: 2px solid var(--accent);
  border-radius: 50%;
  content: "";
  height: 78%;
  left: 11%;
  position: absolute;
  top: 11%;
  width: 78%;
}

.calendar-day.completed::after {
  color: var(--accent);
  content: "♛";
  font-size: 0.68rem;
  line-height: 1;
  position: absolute;
  right: 7px;
  top: 5px;
}

.calendar-day.selected.completed::before {
  border-color: white;
}

.calendar-day.selected.completed::after {
  color: white;
}

.calendar-start {
  background: var(--accent);
  color: white;
  margin-top: 14px;
  width: 100%;
}

.result-progress {
  width: min(100%, 760px);
}

.story-actions {
  display: flex;
  justify-content: stretch;
  position: relative;
  z-index: 2;
}

.story-chapter-nav {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 44px 1fr 44px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.story-chapter-nav strong {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-align: center;
}

.story-actions button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #ffffff), var(--accent));
  border: 1px solid color-mix(in srgb, var(--accent) 70%, rgba(255, 255, 255, 0.52));
  border-radius: calc(var(--radius-sm) + 2px);
  box-shadow: 0 16px 34px var(--accent-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.48);
  color: color-mix(in srgb, var(--accent-ink) 88%, #000);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  min-height: 46px;
  padding: 0 18px;
  width: 100%;
}

.story-level-grid {
  background:
    radial-gradient(circle at 50% 38%, var(--accent-glow), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.06)),
    color-mix(in srgb, var(--panel-soft) 84%, var(--accent) 5%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: calc(var(--radius) + 2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 20px 48px var(--accent-shadow-soft);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  scrollbar-color: var(--accent-line) transparent;
  scrollbar-width: thin;
}

.story-path-map__canvas {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.story-path-map__canvas::before,
.story-path-map__canvas::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.story-path-map__canvas::before {
  background:
    radial-gradient(circle at 22% 20%, var(--accent-highlight-soft), transparent 18%),
    radial-gradient(circle at 76% 74%, var(--accent-preview), transparent 22%),
    repeating-linear-gradient(0deg, var(--accent-sample-line) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, var(--accent-sample-line) 0 1px, transparent 1px 42px);
  inset: 0;
  opacity: 0.48;
}

.story-path-map__canvas::after {
  background: linear-gradient(180deg, var(--panel) 0%, transparent 12%, transparent 88%, var(--panel) 100%);
  inset: 0;
  opacity: 0.58;
}

.story-path-map__glow {
  background: radial-gradient(circle, var(--accent-glow), transparent 58%);
  height: 48%;
  left: 50%;
  opacity: 0.78;
  position: absolute;
  top: 43%;
  transform: translate(-50%, -50%);
  width: 74%;
  z-index: 0;
}

.story-path-map__line {
  height: calc(100% - 48px);
  inset: 24px 18px;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: calc(100% - 36px);
  z-index: 1;
}

.story-path-map__line-base,
.story-path-map__line-active {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.story-path-map__line-base {
  opacity: 0.68;
  stroke: color-mix(in srgb, var(--accent) 18%, var(--line-strong));
  stroke-dasharray: 2 10;
  stroke-width: 7;
}

.story-path-map__line-active {
  filter: drop-shadow(0 8px 16px var(--accent-shadow-soft));
  opacity: 0.98;
  stroke: color-mix(in srgb, var(--accent) 72%, #ffffff);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--story-path-progress, 0));
  stroke-width: 8;
  transition: stroke-dashoffset 420ms ease;
}

.story-path-node {
  align-items: center;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 5px;
  left: var(--node-x);
  min-height: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  top: var(--node-y);
  transform: translate(-50%, -50%);
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
  width: 92px;
  z-index: 3;
}

.story-node__marker,
.story-node__card {
  position: relative;
  z-index: 1;
}

.story-node__marker {
  align-items: center;
  aspect-ratio: 1;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.16)),
    color-mix(in srgb, var(--panel-soft) 86%, var(--accent) 7%);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 22px rgba(24, 52, 42, 0.12);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 52px;
  overflow: hidden;
  text-align: center;
  width: 52px;
}

.story-node__marker::after {
  background: radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.72), transparent 34%);
  content: "";
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
}

.story-node__marker strong {
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 0.86rem;
  letter-spacing: -0.04em;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.story-node__marker small {
  display: none;
}

.story-node__card {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
  border-radius: 9px;
  box-shadow: 0 4px 10px rgba(20, 41, 35, 0.08);
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 4px 6px;
  width: 100%;
}

.story-node__card strong {
  color: var(--ink);
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-node__card small {
  color: var(--muted);
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.story-path-node:hover,
.story-path-node:focus-visible {
  filter: brightness(1.02);
  transform: translate(-50%, -50%) translateY(-2px);
}

.story-path-node.completed .story-node__marker,
.story-path-node.perfect .story-node__marker {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--accent) 62%, var(--panel) 38%);
  border-color: color-mix(in srgb, var(--accent) 58%, rgba(255, 255, 255, 0.3));
  color: var(--accent-ink);
}

.story-level-grid button.completed .story-node__card,
.story-level-grid button.perfect .story-node__card {
  border-color: var(--accent-line);
}

.story-path-node.perfect .story-node__marker {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 14px 32px var(--accent-shadow),
    0 0 0 5px var(--accent-highlight-soft);
}

.story-path-node.current {
  z-index: 4;
}

.story-path-node.current .story-node__marker {
  animation: story-node-breathe 2.6s ease-in-out infinite;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.1)),
    var(--accent);
  border-color: color-mix(in srgb, var(--accent) 72%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 38px var(--accent-shadow),
    0 0 0 7px var(--accent-highlight-soft);
  color: var(--accent-ink);
  transform: scale(1.08);
}

.story-path-node.current .story-node__card {
  border-color: var(--accent-preview-line);
  box-shadow: 0 18px 36px var(--accent-shadow-soft);
}

.story-path-node.locked {
  cursor: not-allowed;
  opacity: 0.54;
}

.story-path-node.locked .story-node__marker {
  filter: grayscale(0.45);
}

.choice-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-row button,
.dialog-actions button {
  background: var(--panel);
  border-radius: var(--radius-sm);
  color: var(--ink);
  min-height: 54px;
  padding: 12px 14px;
  text-align: left;
}

.choice-row.theme-row {
  grid-template-columns: 1fr;
}

.theme-row button {
  background: transparent;
  padding: 0;
}

.theme-row button[data-theme-choice="dusk"] .theme-button__label {
  background: none;
  border: 0;
}

.theme-row button[data-theme-choice="dusk"] strong {
  color: #eef7f3;
}

.theme-row button[data-theme-choice="classicWood"] .theme-button__label {
  background: none;
  border: 0;
}

.theme-row button[data-theme-choice="classicWood"] strong {
  color: #fff0dd;
}

.theme-row button[data-theme-choice="retro"] .theme-button__label {
  background: none;
  border: 0;
}

.theme-row button[data-theme-choice="retro"] strong {
  color: #effbff;
}

.dialog-actions button {
  text-align: center;
}

.text-button,
.icon-button {
  background: var(--panel);
  color: var(--ink);
}

.icon-button {
  align-items: center;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.close {
  position: absolute;
  right: 14px;
  top: 14px;
}

.text-button {
  padding: 0 14px;
}

.hint-icon {
  color: var(--accent-strong);
}

.hint-icon svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 21px;
}

.game-screen {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  justify-items: center;
  min-height: 100dvh;
  padding: clamp(10px, 2dvh, 18px);
}

.game-shell {
  align-content: start;
  background:
    radial-gradient(circle at 50% 12%, var(--accent-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 250, 247, 0.46));
  border: 1px solid rgba(209, 225, 216, 0.9);
  border-radius: 34px;
  box-shadow: 0 28px 72px rgba(28, 54, 45, 0.16);
  display: grid;
  gap: clamp(7px, 1.1dvh, 11px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: calc(100dvh - clamp(20px, 4dvh, 36px));
  max-height: 920px;
  max-width: 460px;
  overflow: hidden;
  padding: clamp(12px, 1.6dvh, 18px);
  position: relative;
  width: min(100%, 460px);
}

.game-shell::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.9), transparent 16%),
    radial-gradient(circle at 84% 14%, var(--accent-glow), transparent 20%),
    linear-gradient(135deg, transparent 34%, rgba(255, 255, 255, 0.28), transparent 70%);
  content: "";
  inset: 0;
  opacity: 0.92;
  pointer-events: none;
  position: absolute;
}

.game-shell > * {
  position: relative;
  z-index: 1;
}

.game-topbar {
  align-items: center;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 44px;
}

.game-topbar__title {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.game-topbar__title .eyebrow {
  color: var(--accent-ink);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  margin: 0;
}

.game-topbar__title h1 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 2.4dvh, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.game-topbar__actions {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-self: end;
}

.game-iconbutton {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 250, 247, 0.56)),
    var(--panel-soft);
  border: 1px solid rgba(212, 225, 218, 0.9);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(33, 58, 48, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  width: 40px;
}

.game-iconbutton:hover,
.game-iconbutton:focus-visible {
  border-color: var(--accent-line);
  outline: none;
  transform: translateY(-1px);
}

.game-iconbutton svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.game-status {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-height: 0;
}

.status-chip {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.92);
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(33, 58, 48, 0.06);
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 0;
  padding: clamp(6px, 1dvh, 10px) 10px;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.status-chip[hidden],
.status-chip.status-chip--hidden {
  display: none !important;
}

.status-chip span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.status-chip strong {
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(0.95rem, 2dvh, 1.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.status-chip--primary strong {
  font-size: clamp(1.15rem, 2.6dvh, 1.4rem);
  color: var(--accent-ink);
}

.status-chip.timer-low {
  border-color: rgba(199, 123, 103, 0.5);
  box-shadow: inset 0 0 0 1px rgba(199, 123, 103, 0.16);
}

.status-chip.timer-low strong {
  color: var(--invalid);
}

.game-stage {
  align-items: center;
  display: grid;
  justify-items: center;
  min-height: 0;
}

.game-shell .board-wrap {
  backdrop-filter: blur(14px);
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: calc(var(--radius) + 6px);
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  position: relative;
  width: min(100%, 60dvh);
}

.game-tray {
  border-radius: calc(var(--radius-sm) + 4px);
  display: grid;
  gap: 0;
  min-height: 0;
  padding: 0;
}

.game-shell .tray {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-shell .piece,
.game-shell .piece-slot {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: clamp(72px, 11dvh, 104px);
}

.game-shell .piece {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.92);
  border-radius: 18px;
  padding: clamp(6px, 1dvh, 10px);
  width: 100%;
}

.game-shell .piece-grid {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(var(--cols), clamp(12px, 1.7dvh, 16px));
  grid-template-rows: repeat(var(--rows), clamp(12px, 1.7dvh, 16px));
}

.game-shell .piece-cell {
  border-radius: 4px;
  height: clamp(12px, 1.7dvh, 16px);
  width: clamp(12px, 1.7dvh, 16px);
}

.combo-burst {
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 8;
}

.combo-burst__bubble {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)),
    var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  box-shadow: 0 18px 40px var(--accent-shadow);
  color: var(--accent-ink);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 8px 16px;
  white-space: nowrap;
  animation: combo-burst-pop 900ms ease forwards;
}

@keyframes combo-burst-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.92); }
  18% { opacity: 1; transform: translateY(0) scale(1.04); }
  60% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.96); }
}

.fade-out {
  animation: screen-out 180ms ease forwards;
}

.fade-in {
  animation: screen-in 220ms ease forwards;
}

.topbar {
  align-items: center;
  backdrop-filter: blur(18px);
  border-radius: calc(var(--radius) + 2px);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1fr) 52px;
  padding: clamp(10px, 1.55dvh, 16px) clamp(12px, 1.4vw, 18px);
}

.topbar > div:not(.topbar-menu-actions) {
  text-align: center;
}

.topbar-menu-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar-menu-actions .text-button {
  height: 42px;
  min-height: 0;
  min-width: 96px;
}

.hud {
  border-radius: calc(var(--radius) + 2px);
  display: grid;
  gap: 10px;
  grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr));
  padding: clamp(8px, 1.2dvh, 12px);
}

.hud > div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.92);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: clamp(8px, 1.25dvh, 12px) clamp(10px, 1.1vw, 14px);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.hud > div.timer-low {
  border-color: rgba(199, 123, 103, 0.5);
  box-shadow: inset 0 0 0 1px rgba(199, 123, 103, 0.12);
}

.hud > div.timer-low strong {
  color: var(--invalid);
}

.hud span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hud strong {
  display: block;
  font-size: clamp(1rem, 2.15dvh, 1.22rem);
  line-height: 1.05;
}

.hud-primary strong {
  font-size: clamp(1.35rem, 3dvh, 1.8rem);
}

.hud-density .density {
  background: rgba(224, 232, 226, 0.92);
  border-radius: 999px;
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
}

.hud-density .density i {
  background: var(--accent);
  display: block;
  height: 100%;
  transition: width 180ms ease, background 180ms ease;
  width: 0;
}

.stage {
  align-items: center;
  display: grid;
  gap: clamp(10px, 1.4dvh, 14px);
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 0;
}

.board-wrap {
  backdrop-filter: blur(18px);
  border-radius: calc(var(--radius) + 10px);
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(12px, 1.7vw, 18px);
  position: relative;
  width: min(100%, min(60dvh, 760px));
}

.board {
  aspect-ratio: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 6px);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(9, 1fr);
  isolation: isolate;
  overflow: hidden;
  position: relative;
  touch-action: none;
  transition: box-shadow 180ms ease, transform 180ms ease;
  width: 100%;
}

.board::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.32), transparent 56%),
    radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 68%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 180ms ease;
  z-index: 0;
}

.cell {
  aspect-ratio: 1;
  background: var(--cell);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  min-height: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.cell.alt { background: var(--cell-alt); }

.cell::after {
  border-radius: 7px;
  content: "";
  height: 74%;
  left: 13%;
  position: absolute;
  top: 13%;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease, opacity 140ms ease;
  width: 74%;
}

.cell:nth-child(3n):not(:nth-child(9n)) { box-shadow: inset -2px 0 0 #bfc8c0; }
.cell:nth-child(n + 19):nth-child(-n + 27),
.cell:nth-child(n + 46):nth-child(-n + 54) { box-shadow: inset 0 -2px 0 #bfc8c0; }
.cell:nth-child(3n):not(:nth-child(9n)):nth-child(n + 19):nth-child(-n + 27),
.cell:nth-child(3n):not(:nth-child(9n)):nth-child(n + 46):nth-child(-n + 54) {
  box-shadow: inset -2px 0 0 #bfc8c0, inset 0 -2px 0 #bfc8c0;
}

.cell.filled::after,
.piece-cell.filled {
  background: var(--piece-fill, var(--accent));
  border: 0;
  box-shadow: 0 3px 8px var(--accent-preview);
}

body[data-theme="classicWood"] .mode-card,
body[data-theme="classicWood"] .dialog-panel,
body[data-theme="classicWood"] .topbar,
body[data-theme="classicWood"] .hud,
body[data-theme="classicWood"] .side-panel,
body[data-theme="classicWood"] .board-wrap,
body[data-theme="classicWood"] .tray-section,
body[data-theme="classicWood"] .piece {
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 211, 139, 0.2), transparent 42%),
    linear-gradient(90deg, rgba(255, 229, 177, 0.16), transparent 28%, rgba(70, 28, 11, 0.16) 62%, transparent),
    repeating-linear-gradient(95deg, rgba(71, 31, 13, 0.12) 0 2px, transparent 2px 42px),
    var(--panel);
  border-color: rgba(83, 38, 17, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 223, 169, 0.22),
    0 18px 38px rgba(27, 11, 4, 0.32);
}

body[data-theme="classicWood"] .menu-screen,
body[data-theme="classicWood"] .game-screen {
  max-width: 980px;
}

body[data-theme="classicWood"] .game-screen {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(224, 145, 72, 0.16), transparent 38%),
    radial-gradient(ellipse at 30% 52%, rgba(71, 28, 12, 0.42), transparent 28%),
    linear-gradient(90deg, rgba(230, 160, 88, 0.08), transparent 18%, rgba(24, 8, 3, 0.2) 78%),
    repeating-linear-gradient(105deg, rgba(33, 13, 5, 0.18) 0 2px, transparent 2px 58px),
    rgba(96, 46, 21, 0.88);
  border: 1px solid rgba(69, 28, 12, 0.78);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 179, 0.24), 0 26px 60px rgba(22, 9, 4, 0.38);
  margin-bottom: 28px;
  margin-top: 28px;
  min-height: calc(100vh - 56px);
}

body[data-theme="classicWood"] .board-wrap {
  background:
    linear-gradient(135deg, rgba(255, 218, 151, 0.18), transparent 38%),
    #9a5529;
  padding: 12px;
}

body[data-theme="classicWood"] .board {
  background: #7b3b22;
  border-color: #4d2115;
  box-shadow:
    inset 0 0 0 2px rgba(64, 24, 12, 0.58),
    inset 0 0 34px rgba(31, 9, 5, 0.42);
}

body[data-theme="classicWood"] .cell {
  box-shadow: inset 0 0 0 1px rgba(147, 78, 42, 0.26);
}

body[data-theme="classicWood"] .cell:nth-child(3n):not(:nth-child(9n)) { box-shadow: inset -2px 0 0 #a56a39; }
body[data-theme="classicWood"] .cell:nth-child(n + 19):nth-child(-n + 27),
body[data-theme="classicWood"] .cell:nth-child(n + 46):nth-child(-n + 54) { box-shadow: inset 0 -2px 0 #a56a39; }
body[data-theme="classicWood"] .cell:nth-child(3n):not(:nth-child(9n)):nth-child(n + 19):nth-child(-n + 27),
body[data-theme="classicWood"] .cell:nth-child(3n):not(:nth-child(9n)):nth-child(n + 46):nth-child(-n + 54) {
  box-shadow: inset -2px 0 0 #a56a39, inset 0 -2px 0 #a56a39;
}

body[data-theme="classicWood"] .cell.filled::after,
body[data-theme="classicWood"] .piece-cell.filled {
  background:
    linear-gradient(135deg, rgba(255, 244, 188, 0.78), rgba(225, 166, 82, 0.84)),
    repeating-linear-gradient(90deg, rgba(121, 73, 30, 0.12) 0 1px, transparent 1px 9px);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 211, 0.5),
    inset 0 -2px 0 rgba(125, 72, 29, 0.22),
    0 4px 8px rgba(41, 15, 5, 0.34);
}

body[data-theme="classicWood"] .mode-card {
  min-height: 112px;
}

body[data-theme="classicWood"] .mode-card strong,
body[data-theme="classicWood"] .topbar h1,
body[data-theme="classicWood"] .menu-hero h1 {
  color: #fff0c8;
  text-shadow: 0 2px 0 rgba(70, 29, 12, 0.32);
}

body[data-theme="classicWood"] .hud > div,
body[data-theme="classicWood"] .story-actions button,
body[data-theme="classicWood"] .story-level-grid button,
body[data-theme="classicWood"] .calendar-day,
body[data-theme="classicWood"] .piece,
body[data-theme="classicWood"] .workbench-slot {
  background:
    linear-gradient(135deg, rgba(255, 231, 171, 0.18), transparent 42%),
    repeating-linear-gradient(90deg, rgba(91, 47, 19, 0.12) 0 2px, transparent 2px 36px),
    var(--panel-soft);
}

body[data-theme="classicWood"] .density div {
  background: #7f4322;
}

body[data-theme="classicWood"] .piece.selected {
  border-color: rgba(255, 232, 175, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 219, 0.34),
    0 0 0 3px rgba(243, 217, 143, 0.18),
    0 18px 36px rgba(32, 12, 5, 0.34);
}

body[data-theme="classicWood"] .result {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 223, 168, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(131, 66, 31, 0.94), rgba(102, 48, 23, 0.92));
  border-color: rgba(101, 43, 18, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 188, 0.24),
    0 28px 70px rgba(21, 8, 3, 0.38);
}

body[data-theme="classicWood"] .result::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 232, 182, 0.32), transparent 34%),
    repeating-linear-gradient(95deg, rgba(64, 27, 10, 0.12) 0 2px, transparent 2px 42px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%);
}

body[data-theme="classicWood"] .result.result-win::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(243, 217, 143, 0.22), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(255, 241, 189, 0.34), transparent 34%),
    repeating-linear-gradient(95deg, rgba(64, 27, 10, 0.12) 0 2px, transparent 2px 42px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%);
}

body[data-theme="classicWood"] .result.result-loss::before {
  background:
    radial-gradient(circle at 82% 16%, rgba(92, 33, 15, 0.2), transparent 26%),
    radial-gradient(circle at 50% 0%, rgba(255, 233, 180, 0.28), transparent 34%),
    repeating-linear-gradient(95deg, rgba(64, 27, 10, 0.12) 0 2px, transparent 2px 42px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 42%);
}

body[data-theme="classicWood"] .result p,
body[data-theme="classicWood"] .result-stats span {
  color: #f0c993;
}

body[data-theme="classicWood"] .result-progress span {
  color: #f0c993;
}

body[data-theme="classicWood"] .result h2,
body[data-theme="classicWood"] .result-stats strong,
body[data-theme="classicWood"] .result-progress strong {
  color: #fff0c8;
  text-shadow: 0 2px 0 rgba(70, 29, 12, 0.3);
}

body[data-theme="classicWood"] .result-stats div,
body[data-theme="classicWood"] .result-progress div {
  background:
    linear-gradient(135deg, rgba(255, 230, 175, 0.15), transparent 42%),
    repeating-linear-gradient(90deg, rgba(91, 47, 19, 0.12) 0 2px, transparent 2px 36px),
    rgba(104, 50, 24, 0.78);
  border-color: rgba(115, 52, 23, 0.74);
}

body[data-theme="retro"] .mode-card,
body[data-theme="retro"] .dialog-panel,
body[data-theme="retro"] .topbar,
body[data-theme="retro"] .hud,
body[data-theme="retro"] .side-panel,
body[data-theme="retro"] .board-wrap,
body[data-theme="retro"] .tray-section,
body[data-theme="retro"] .piece {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)),
    var(--panel);
  border-color: rgba(0, 216, 255, 0.24);
  box-shadow: 0 0 0 1px rgba(0, 216, 255, 0.1), 0 18px 44px rgba(0, 0, 0, 0.34);
}

body[data-theme="retro"] .board-wrap {
  box-shadow:
    0 0 0 1px rgba(0, 216, 255, 0.2),
    0 0 32px rgba(0, 216, 255, 0.1),
    0 22px 54px rgba(0, 0, 0, 0.44);
}

body[data-theme="retro"] .board {
  background: #293650;
  border-color: rgba(0, 216, 255, 0.32);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.32);
}

body[data-theme="retro"] .cell.filled::after,
body[data-theme="retro"] .piece-cell.filled {
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.32),
    inset 0 -4px 0 rgba(0, 0, 0, 0.25),
    0 0 11px color-mix(in srgb, var(--piece-fill, var(--accent)) 72%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.32);
}

body[data-theme="retro"] .cell::after,
body[data-theme="retro"] .piece-cell {
  border-radius: 3px;
}

body[data-theme="retro"] .piece.selected {
  border-color: rgba(0, 216, 255, 0.72);
  box-shadow:
    0 0 0 3px rgba(0, 216, 255, 0.14),
    0 0 24px rgba(0, 216, 255, 0.24),
    0 18px 40px rgba(0, 0, 0, 0.42);
}

body[data-theme="retro"] .result {
  background:
    linear-gradient(180deg, rgba(12, 18, 31, 0.96), rgba(9, 14, 24, 0.94)),
    var(--panel);
  border-color: rgba(0, 216, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 216, 255, 0.1),
    0 0 36px rgba(0, 216, 255, 0.08),
    0 28px 70px rgba(0, 0, 0, 0.46);
}

body[data-theme="retro"] .result::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 216, 255, 0.1), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(255, 49, 88, 0.1), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 42%);
}

body[data-theme="retro"] .result.result-win::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 216, 255, 0.18), transparent 24%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 42%);
}

body[data-theme="retro"] .result.result-loss::before {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 49, 88, 0.16), transparent 24%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 42%);
}

body[data-theme="retro"] .result p,
body[data-theme="retro"] .result-stats span {
  color: #9fb0c9;
}

body[data-theme="retro"] .result-progress span {
  color: #9fb0c9;
}

body[data-theme="retro"] .result h2,
body[data-theme="retro"] .result-stats strong,
body[data-theme="retro"] .result-progress strong {
  color: #eef7ff;
  text-shadow: 0 0 14px rgba(0, 216, 255, 0.14);
}

body[data-theme="retro"] .result-stats div,
body[data-theme="retro"] .result-progress div {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    rgba(13, 18, 31, 0.88);
  border-color: rgba(0, 216, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(0, 216, 255, 0.06);
}

.cell.special-cell::before {
  align-items: center;
  border-radius: 999px;
  content: attr(data-badge);
  display: flex;
  font-size: clamp(0.58rem, 1.5vw, 0.8rem);
  font-weight: 800;
  height: 42%;
  justify-content: center;
  left: 29%;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 29%;
  width: 42%;
  z-index: 2;
}

.cell.bomb::after {
  background: #f0a36f;
  box-shadow: inset 0 0 0 3px rgba(108, 54, 34, 0.16), 0 0 0 4px rgba(240, 163, 111, 0.14);
}

.cell.bomb::before {
  border: 1px solid rgba(118, 58, 38, 0.32);
  color: #69371f;
}

.cell.bomb.urgent::after {
  animation: bomb-pulse 900ms ease-in-out infinite;
}

.cell.lightning::after {
  background: #f2e7a8;
  box-shadow: 0 0 14px rgba(213, 185, 93, 0.34), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.cell.lightning::before {
  color: #8a6b20;
  content: attr(data-badge);
}

.cell.ice::after {
  background: #d9f1ef;
  box-shadow: inset 0 0 0 2px rgba(85, 169, 176, 0.32), 0 0 12px rgba(113, 195, 202, 0.22);
}

.cell.ice::before {
  color: #3d8f95;
  content: "✧";
}

.cell.ice.cracked::after {
  background: #eaf8f7;
}

.cell.ice.cracked::before {
  content: "◇";
}

.cell.preview::after {
  background: var(--accent-preview);
  box-shadow: inset 0 0 0 2px var(--accent-preview-line), 0 0 18px var(--accent-highlight-soft);
  transform: scale(1.03);
}

.cell.invalid::after {
  background: rgba(199, 123, 103, 0.18);
  box-shadow: inset 0 0 0 2px rgba(199, 123, 103, 0.42);
}

.cell.clear-hint::after {
  animation: clear-hint-shimmer 1050ms ease-in-out infinite;
  box-shadow:
    inset 0 0 0 2px var(--accent-preview-line),
    0 0 16px var(--accent-highlight-soft),
    0 0 26px var(--accent-glow);
}

.cell.clearing::after {
  animation: clear-pop 220ms ease-out;
  background: var(--accent);
}

.cell.placed::after {
  animation: placed-pop 260ms cubic-bezier(0.2, 0.82, 0.24, 1);
}

.cell.intro-ripple::after {
  animation: board-intro-ripple 300ms cubic-bezier(0.2, 0.72, 0.24, 1) var(--intro-delay, 0ms) both;
}

.board.board-feedback-place::before {
  animation: board-place-breathe 280ms ease-out;
}

.board.board-feedback-clear::before {
  animation: board-clear-surge 420ms cubic-bezier(0.18, 0.8, 0.24, 1);
}

.board[data-place-impact="1"] {
  box-shadow: 0 0 0 1px var(--accent-preview-line), 0 0 22px var(--accent-preview);
}

.board[data-place-impact="2"],
.board[data-place-impact="3"],
.board[data-clear-level="2"],
.board[data-clear-level="3"] {
  box-shadow: 0 0 0 1px var(--accent-preview-line), 0 0 28px var(--accent-glow);
}

.side-panel {
  align-self: stretch;
  backdrop-filter: blur(18px);
  border-radius: calc(var(--radius) + 2px);
  display: grid;
  align-content: start;
  gap: clamp(10px, 1.35dvh, 14px);
  min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 1.75dvh, 20px);
}

.side-panel h2 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.04em;
  margin: 0;
}

.side-panel p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.side-panel__eyebrow {
  margin-bottom: -4px;
}

.side-panel__stack {
  display: grid;
  gap: 12px;
}

.side-panel__meta {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.92);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
}

.side-panel__meta span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.side-panel__meta strong {
  display: block;
  font-size: 1rem;
  line-height: 1.2;
}

.density span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.density div {
  background: rgba(224, 232, 226, 0.92);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.density i {
  background: var(--accent);
  display: block;
  height: 100%;
  width: 0;
}

.tray-section {
  border-radius: calc(var(--radius) + 2px);
  display: grid;
  gap: clamp(8px, 1.1dvh, 12px);
  min-height: 0;
  padding: clamp(10px, 1.45dvh, 14px);
}

.tray-header {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.tray-header h2 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  margin: 0;
}

.tray-header p {
  color: var(--muted);
  margin: 0;
  max-width: 46ch;
  text-align: right;
}

.tray {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.piece,
.piece-slot {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: clamp(82px, 13dvh, 124px);
}

.piece-slot {
  min-width: 0;
}

.piece {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.92);
  border-radius: calc(var(--radius-sm) + 2px);
  padding: clamp(8px, 1.4dvh, 14px);
  touch-action: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  width: 100%;
}

.piece.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 18px 36px var(--accent-shadow-soft);
  transform: translateY(-2px);
}

.piece.dragging {
  opacity: 0.68;
  transform: scale(0.98);
}

.piece-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(var(--cols), clamp(14px, 1.9dvh, 18px));
  grid-template-rows: repeat(var(--rows), clamp(14px, 1.9dvh, 18px));
}

.piece-cell {
  border-radius: 4px;
  height: clamp(14px, 1.9dvh, 18px);
  width: clamp(14px, 1.9dvh, 18px);
}

.piece-cell.empty { opacity: 0; }

.workbench-slot {
  align-items: center;
  background: rgba(250, 251, 249, 0.88);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 126px;
  padding: 10px;
}

.workbench-slot strong {
  color: var(--accent);
  font-size: 0.78rem;
}

.workbench-empty {
  align-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-size: 0.78rem;
  justify-content: center;
  min-height: 48px;
  padding: 8px;
  width: 100%;
}

.workbench-actions {
  display: flex;
  gap: 6px;
  width: 100%;
}

.workbench-actions button {
  background: var(--panel);
  color: var(--ink);
  flex: 1;
  font-size: 0.72rem;
  min-height: 34px;
  padding: 0 8px;
}

.draft-slot {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
}

.draft-option {
  align-items: center;
  background: var(--panel);
  border-color: var(--accent-line);
  display: flex;
  justify-content: center;
  min-height: 90px;
  padding: 8px;
}

.drag-ghost {
  left: 0;
  opacity: 0.92;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translate(-50%, -50%) scale(1.14);
  z-index: 20;
}

.toast {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  left: 50%;
  padding: 9px 14px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.result {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82)),
    var(--panel);
  border: 1px solid rgba(226, 235, 228, 0.94);
  border-radius: calc(var(--radius) + 4px);
  bottom: 10px;
  box-shadow: 0 28px 70px rgba(18, 28, 25, 0.18);
  display: grid;
  gap: 14px;
  justify-items: center;
  left: 10px;
  overflow: hidden;
  padding: 28px 24px;
  position: absolute;
  right: 10px;
  text-align: center;
  top: 10px;
  z-index: 11;
}

.result::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.8), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 42%);
  content: "";
  inset: 0;
  opacity: 0.96;
  pointer-events: none;
  position: absolute;
}

.result.result-win::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.84), transparent 34%),
    radial-gradient(circle at 18% 18%, var(--accent-glow), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 42%);
}

.result.result-loss::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.78), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(199, 123, 103, 0.12), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%);
}

.result > * {
  position: relative;
  z-index: 1;
}

.result h2 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin: 0;
}

.result p {
  color: var(--muted);
  margin: 0;
}

.result-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 760px);
}

.result-stats div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.94);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: 12px 14px;
}

.result-stats span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.result-stats strong {
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1rem, 2vw, 1.28rem);
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.result-meta {
  max-width: 56ch;
}

.dialog-actions {
  display: flex;
  gap: 10px;
}

.feedback-flash {
  animation: feedback-flash 520ms ease;
}

.feedback-flash-strong {
  animation: feedback-flash-strong 520ms ease;
}

.feedback-flash-success {
  animation: feedback-flash-success 520ms ease;
}

@keyframes clear-pop {
  45% { opacity: 0.9; transform: scale(0.72); }
  100% { opacity: 0.25; transform: scale(1.04); }
}

@keyframes clear-hint-shimmer {
  0%, 100% {
    filter: brightness(1);
    opacity: 0.82;
    transform: scale(1);
  }
  45% {
    filter: brightness(1.18);
    opacity: 1;
    transform: scale(1.035);
  }
}

@keyframes board-intro-ripple {
  0% {
    background: transparent;
    box-shadow: none;
    opacity: 0;
    transform: scale(0.98);
  }
  42% {
    background: var(--accent-intro-fill, var(--accent-preview));
    box-shadow: 0 0 14px var(--accent-intro-glow, var(--accent-focus));
    opacity: 1;
    transform: scale(1.015);
  }
  100% {
    background: transparent;
    box-shadow: none;
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes placed-pop {
  0% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    opacity: 0.75;
    transform: scale(0.82);
  }
  58% {
    box-shadow: 0 0 18px var(--accent-glow);
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes board-place-breathe {
  0% {
    opacity: 0;
    transform: scale(0.995);
  }
  55% {
    opacity: 0.72;
    transform: scale(1.008);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes board-clear-surge {
  0% {
    opacity: 0;
    transform: scale(0.985);
  }
  36% {
    opacity: 0.95;
    transform: scale(1.014);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes bomb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.88); }
}

@keyframes main-title-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1.13); }
  50% { transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes showcase-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}

@keyframes story-node-breathe {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}

@keyframes feedback-flash {
  0%, 100% { transform: translateY(0); }
  45% {
    box-shadow: 0 18px 36px var(--accent-shadow-soft);
    transform: translateY(-2px);
  }
}

@keyframes feedback-flash-strong {
  0%, 100% { transform: translateY(0); }
  45% {
    border-color: var(--accent-preview-line);
    box-shadow: 0 22px 42px var(--accent-shadow), 0 0 0 1px var(--accent-highlight-soft);
    transform: translateY(-3px);
  }
}

@keyframes feedback-flash-success {
  0%, 100% { transform: translateY(0); }
  45% {
    border-color: var(--accent);
    box-shadow: 0 22px 42px var(--accent-shadow), 0 0 0 1px var(--accent-highlight);
    transform: translateY(-3px);
  }
}

@keyframes screen-out {
  to { opacity: 0; transform: translateY(8px); }
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }

  .mode-card.main-mode-card:hover strong {
    animation: none;
    transform: translateX(4px);
  }

  .mode-card.main-mode-card:hover small {
    filter: none;
  }

  .interactive-background__highlight {
    opacity: 0 !important;
  }
}

body[data-theme="classicWood"] .menu-screen,
body[data-theme="classicWood"] .game-screen {
  max-width: min(100vw, 1320px);
}

body[data-theme="classicWood"] .game-screen {
  margin-block: 0;
  height: calc(100dvh - (2 * clamp(16px, 2.2vw, 28px)));
  min-height: 0;
}

@media (max-width: 1220px) {
  .screen {
    padding: clamp(14px, 1.8vw, 22px);
  }

  .menu-layout {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
    height: calc(100dvh - (2 * clamp(14px, 1.8vw, 22px)));
  }

  .menu-hero h1 {
    font-size: clamp(2.7rem, 6vw, 5.1rem);
  }

  .main-mode-card {
    min-height: clamp(80px, 10.6dvh, 104px);
    padding: 20px 22px;
  }

  #dailyStartMain {
    min-height: clamp(116px, 16.8dvh, 152px);
  }

  .special-mode-grid {
    gap: 10px;
  }

  .special-mode-button {
    gap: 10px;
    padding: 10px;
  }

  .showcase-card--board {
    min-height: 260px;
  }

  .showcase-stats {
    grid-template-columns: 1fr;
  }

  .game-screen {
    gap: 12px;
  }

  .topbar {
    grid-template-columns: minmax(118px, 0.9fr) minmax(0, 1fr) 48px;
    padding: 14px 16px;
  }

  .hud {
    gap: 8px;
    grid-template-columns: 1.15fr repeat(5, minmax(0, 1fr));
    padding: 10px;
  }

  .hud > div {
    padding: 10px 12px;
  }

  .stage {
    grid-template-columns: 1fr;
  }

  .board-wrap {
    width: min(100%, min(58dvh, 620px));
  }

  .tray-section {
    padding: 12px;
  }

  .piece,
  .piece-slot {
    min-height: clamp(80px, 12.5dvh, 112px);
  }

  .piece-grid {
    grid-template-columns: repeat(var(--cols), 16px);
    grid-template-rows: repeat(var(--rows), 16px);
  }

  .piece-cell {
    height: 16px;
    width: 16px;
  }
}

@media (max-width: 1024px) {
  .menu-layout {
    grid-template-columns: 1fr;
  }

  .menu-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase-card--board {
    min-height: 220px;
  }

  .showcase-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stage {
    grid-template-columns: 1fr;
  }

  .board-wrap {
    grid-column: auto;
  }

  .board-wrap {
    justify-self: center;
    width: min(100%, min(52dvh, 560px));
  }

  .tray-header {
    align-items: start;
    flex-direction: column;
  }

  .tray-header p {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 820px) {
  .menu-showcase {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .showcase-card--board {
    min-height: 190px;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .stage {
    grid-template-columns: 1fr;
  }

  .topbar > div:not(.topbar-menu-actions) {
    grid-column: 1 / 2;
    grid-row: 1;
    text-align: left;
  }

  .topbar-menu-actions {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .hint-icon {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .board-wrap {
    width: min(100%, min(50dvh, 520px));
  }

  .modal-stats--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 821px) and (max-width: 1024px) and (max-height: 860px) {
  .menu-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.38fr);
  }

  .menu-showcase {
    grid-template-columns: 1fr;
  }

  .showcase-card--board {
    display: none;
  }

  .showcase-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .screen {
    padding: 12px;
  }

  .dialog {
    padding: 12px;
  }

  .dialog-panel {
    max-height: 92dvh;
    padding: 20px 16px;
  }

  .choice-row {
    grid-template-columns: 1fr;
  }

  .modal-stats--three {
    grid-template-columns: 1fr;
  }

  .menu-hero h1 {
    font-size: clamp(2.4rem, 13vw, 3.8rem);
  }

  .menu-lead {
    font-size: 0.94rem;
  }

  .main-mode-card {
    min-height: 82px;
  }

  #dailyStartMain {
    min-height: 112px;
  }

  .special-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .topbar-menu-actions {
    width: 100%;
  }

  .topbar-menu-actions .text-button {
    flex: 1;
    min-width: 0;
  }

  .hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result {
    padding: 22px 16px;
  }

  .result-stats {
    gap: 8px;
  }

  .result-progress {
    gap: 8px;
  }

  .dialog-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .dialog-actions button {
    min-width: 120px;
  }

  .board-wrap {
    width: min(100%, min(46dvh, 440px));
  }

  .piece {
    min-height: 86px;
    padding: 8px;
  }

  .piece-grid {
    grid-template-columns: repeat(var(--cols), 14px);
    grid-template-rows: repeat(var(--rows), 14px);
  }

  .piece-cell {
    height: 14px;
    width: 14px;
  }
}

@media (max-height: 860px) {
  .screen {
    padding: clamp(12px, 1.5vw, 18px);
  }

  .menu-layout {
    gap: 16px;
    height: calc(100dvh - (2 * clamp(12px, 1.5vw, 18px)));
  }

  .menu-hero {
    gap: 6px;
  }

  .menu-hero h1 {
    font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  }

  .menu-lead {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .main-mode-card {
    min-height: clamp(76px, 10.2dvh, 98px);
    padding: 16px 20px;
  }

  #dailyStartMain {
    min-height: clamp(108px, 15.8dvh, 140px);
  }

  .showcase-card {
    padding: 16px;
  }

  .showcase-card--board {
    min-height: 220px;
  }

  .special-mode-button {
    aspect-ratio: auto;
    min-height: clamp(68px, 10.8dvh, 92px);
  }

  .game-screen {
    gap: 10px;
    height: calc(100dvh - (2 * clamp(12px, 1.5vw, 18px)));
    min-height: 0;
  }

  .topbar {
    padding: 12px 14px;
  }

  .topbar h1 {
    font-size: clamp(1.45rem, 3vw, 2.1rem);
  }

  .hud {
    gap: 8px;
    padding: 10px;
  }

  .hud > div {
    padding: 10px 12px;
  }

  .board-wrap {
    padding: 10px;
    width: min(100%, min(52dvh, 540px));
  }

  .tray-section {
    gap: 10px;
    padding: 12px;
  }

  .piece,
  .piece-slot {
    min-height: clamp(78px, 12.4dvh, 102px);
  }

  .piece-grid {
    grid-template-columns: repeat(var(--cols), 16px);
    grid-template-rows: repeat(var(--rows), 16px);
  }

  .piece-cell {
    height: 16px;
    width: 16px;
  }

  body[data-theme="classicWood"] .game-screen {
    height: calc(100dvh - (2 * clamp(12px, 1.5vw, 18px)));
    min-height: 0;
  }
}

@media (max-height: 760px) {
  .menu-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.38fr);
    gap: 14px;
  }

  .menu-showcase {
    grid-template-columns: 1fr;
  }

  .showcase-card--board {
    display: none;
  }

  .menu-hero h1 {
    font-size: clamp(2.3rem, 4.8vw, 3.9rem);
  }

  .menu-lead {
    max-width: 54ch;
  }

  .main-mode-card small {
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .board-wrap {
    width: min(100%, min(46dvh, 460px));
  }

  .piece,
  .piece-slot {
    min-height: clamp(72px, 11.6dvh, 88px);
  }

  .piece-grid {
    grid-template-columns: repeat(var(--cols), 14px);
    grid-template-rows: repeat(var(--rows), 14px);
  }

  .piece-cell {
    height: 14px;
    width: 14px;
  }
}

@media (min-width: 900px) and (max-width: 1120px) and (max-height: 860px) {
  .game-screen {
    gap: 8px;
  }

  .topbar {
    gap: 12px;
    grid-template-columns: minmax(112px, 0.8fr) minmax(0, 1fr) 46px;
    padding: 10px 12px;
  }

  .topbar h1 {
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  }

  .topbar-menu-actions .text-button {
    height: 38px;
    min-width: 86px;
  }

  .hud {
    gap: 8px;
    grid-template-columns: 1.15fr repeat(5, minmax(0, 1fr));
    padding: 8px;
  }

  .hud > div {
    padding: 9px 10px;
  }

  .hud strong {
    font-size: 1.08rem;
  }

  .hud-primary strong {
    font-size: 1.5rem;
  }

  .stage {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .board-wrap {
    width: min(100%, min(45dvh, 440px));
  }

  .tray-section {
    gap: 8px;
    padding: 10px;
  }

  .tray-header {
    align-items: center;
    flex-direction: row;
    gap: 12px;
  }

  .tray-header p {
    font-size: 0.86rem;
    max-width: 32ch;
    text-align: right;
  }

  .tray {
    gap: 10px;
  }

  .piece,
  .piece-slot {
    min-height: 84px;
  }

  .piece {
    padding: 8px;
  }

  .piece-grid {
    grid-template-columns: repeat(var(--cols), 14px);
    grid-template-rows: repeat(var(--rows), 14px);
  }

  .piece-cell {
    height: 14px;
    width: 14px;
  }

  .result {
    gap: 12px;
    padding: 22px 18px;
  }

  .result-stats {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .stage {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .board-wrap {
    width: min(100%, min(54dvh, 560px));
  }

  .tray-header p {
    font-size: 0.88rem;
    max-width: 38ch;
  }

  .piece,
  .piece-slot {
    min-height: 92px;
  }

  .piece {
    padding: 10px;
  }

  .piece-grid {
    grid-template-columns: repeat(var(--cols), 15px);
    grid-template-rows: repeat(var(--rows), 15px);
  }

  .piece-cell {
    height: 15px;
    width: 15px;
  }
}

/* Mobile game hub overrides: keep the Home screen app-like on every viewport. */
.menu-screen {
  align-items: center;
  display: grid;
  justify-items: center;
  overflow: hidden;
}

.home-shell {
  align-content: start;
  display: grid;
  gap: clamp(9px, 1.35dvh, 14px);
  grid-template-rows: auto minmax(156px, 1fr) auto auto auto auto;
}

.menu-screen .section-head {
  align-items: center;
  margin-bottom: 8px;
}

.menu-screen .section-head h2 {
  font-size: 1rem;
}

.mode-grid .main-mode-card {
  aspect-ratio: 1 / 1.08;
  min-height: 0;
}

.mode-grid .main-mode-card:hover strong,
.mode-grid .main-mode-card:focus-visible strong,
.mode-grid .main-mode-card:hover small,
.mode-grid .main-mode-card:focus-visible small {
  transform: none;
}

.menu-screen .special-mode-section {
  margin-top: 0;
  min-width: 0;
}

.menu-screen .special-mode-grid {
  display: flex;
  gap: 10px;
  grid-template-columns: none;
  margin: 0 -4px;
  overflow-x: auto;
  padding: 2px 4px 8px;
  scrollbar-width: none;
}

.menu-screen .special-mode-grid::-webkit-scrollbar {
  display: none;
}

.menu-screen .special-mode-button {
  aspect-ratio: auto;
  border-radius: 22px;
  flex: 0 0 104px;
  gap: 7px;
  min-height: 78px;
  padding: 10px;
}

.menu-screen .special-mode-button svg {
  height: 25px;
  width: 25px;
}

.menu-screen .special-mode-button span {
  font-size: 0.72rem;
  font-weight: 800;
}

body.in-game .menu-toggles {
  display: none;
}

.home-topbar .menu-toggles {
  background: rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  box-shadow: none;
  flex: 0 0 auto;
  overflow: visible;
  padding: 3px;
  position: static;
  z-index: 45;
}

.home-topbar .menu-toggles .icon-toggle {
  height: 32px;
  min-height: 32px;
  width: 32px;
}

.home-topbar .menu-toggles .volume-control {
  min-height: 32px;
  position: relative;
  z-index: 45;
}

.home-topbar .menu-toggles .volume-popover {
  top: calc(100% + 6px);
}

@media (min-width: 760px) {
  .home-shell {
    width: min(460px, 100%);
  }
}

@media (max-width: 430px) {
  .home-shell {
    border-radius: 28px;
    padding: 12px;
  }

  .home-hero {
    min-height: clamp(156px, 26dvh, 214px);
  }

  .hero-board {
    width: clamp(128px, 32dvh, 170px);
  }

  .floating-piece i {
    width: 20px;
  }

  .mode-grid {
    gap: 8px;
  }

  .mode-grid .main-mode-card {
    border-radius: 20px;
    padding: 10px 6px;
  }

  .mode-icon {
    height: 34px;
    width: 34px;
  }

  .bottom-nav {
    border-radius: 22px;
    min-height: 58px;
  }

  .bottom-nav__item {
    min-height: 46px;
  }

}

@media (max-height: 760px) {
  .home-shell {
    gap: 8px;
    grid-template-rows: auto minmax(132px, 1fr) auto auto auto auto;
  }

  .home-topbar {
    min-height: 42px;
  }

  .home-hero {
    min-height: 144px;
  }

  .hero-board {
    width: clamp(116px, 28dvh, 152px);
  }

  .primary-play-button {
    min-height: 54px;
  }

  .mode-grid .main-mode-card {
    aspect-ratio: 1 / 0.98;
  }

  .menu-screen .special-mode-button {
    min-height: 68px;
  }

  .bottom-nav {
    min-height: 56px;
  }
}

/* Focused IA pass: one selected mode, one primary action, quieter premium finish. */
.home-shell {
  background:
    radial-gradient(circle at 50% 10%, rgba(100, 205, 164, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 249, 246, 0.66));
  box-shadow: 0 24px 58px rgba(28, 54, 45, 0.13);
  gap: clamp(9px, 1.25dvh, 13px);
}

.home-shell::before {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.38), transparent 42%, rgba(108, 205, 164, 0.06));
  opacity: 0.72;
}

.home-logo {
  filter: drop-shadow(0 6px 12px rgba(47, 110, 86, 0.12));
}

.home-kicker {
  color: rgba(36, 50, 45, 0.48);
}

.event-timer {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(192, 211, 201, 0.76);
  color: rgba(35, 49, 43, 0.68);
  font-size: 0.68rem;
  min-height: 28px;
  padding: 0 9px;
}

.home-hero {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.76), transparent 44%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.5), rgba(230, 243, 236, 0.42));
  border-color: rgba(200, 218, 209, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 16px 34px rgba(41, 86, 68, 0.1);
  min-height: clamp(160px, 25dvh, 218px);
}

.hero-board {
  background: rgba(232, 240, 235, 0.88);
  border-width: 5px;
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px rgba(159, 184, 170, 0.62),
    0 18px 36px rgba(47, 84, 69, 0.13);
  width: clamp(132px, 30dvh, 176px);
}

.hero-board span {
  background: rgba(249, 252, 250, 0.88);
  border-radius: 3px;
}

.hero-board span.filled {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 4px 8px rgba(53, 142, 105, 0.12);
}

.hero-badge {
  animation: none;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(192, 211, 201, 0.8);
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(33, 58, 48, 0.1);
  left: 18px;
  padding: 8px 11px;
  top: 18px;
}

.hero-badge span {
  color: rgba(36, 50, 45, 0.46);
  font-size: 0.58rem;
  letter-spacing: 0.11em;
}

.hero-badge strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.primary-play-button {
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 15px 30px rgba(35, 137, 95, 0.22);
  font-size: clamp(1.18rem, 4.3vw, 1.46rem);
  min-height: clamp(54px, 7.2dvh, 64px);
}

.primary-play-button:hover,
.primary-play-button:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 18px 34px rgba(35, 137, 95, 0.26);
  transform: translateY(-1px);
}

.play-icon {
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
  height: 30px;
  width: 30px;
}

.mode-grid {
  gap: 9px;
}

.mode-grid .main-mode-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.46)),
    rgba(247, 251, 248, 0.82);
  border-color: rgba(196, 215, 205, 0.74);
  box-shadow: 0 12px 24px rgba(33, 58, 48, 0.08);
  color: var(--ink);
  gap: 5px;
}

.mode-grid .main-mode-card::before {
  opacity: 0;
}

.mode-grid .main-mode-card[aria-pressed="true"],
.mode-grid .main-mode-card.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(233, 248, 240, 0.72)),
    rgba(242, 251, 246, 0.92);
  border-color: rgba(98, 196, 153, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(103, 206, 163, 0.12),
    0 15px 30px rgba(35, 137, 95, 0.14);
}

.mode-grid .main-mode-card[aria-pressed="true"] .mode-icon,
.mode-grid .main-mode-card.active .mode-icon {
  background: rgba(109, 206, 166, 0.18);
  border-color: rgba(98, 196, 153, 0.58);
  color: var(--accent-ink);
}

.mode-grid .main-mode-card[aria-pressed="true"] strong,
.mode-grid .main-mode-card.active strong {
  color: var(--accent-ink);
}

.mode-icon {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(192, 211, 201, 0.82);
  box-shadow: none;
  height: 36px;
  width: 36px;
}

.mode-grid .main-mode-card:hover,
.mode-grid .main-mode-card:focus-visible {
  border-color: rgba(98, 196, 153, 0.68);
  box-shadow: 0 16px 30px rgba(35, 137, 95, 0.14);
  transform: translateY(-1px);
}

.mode-grid .main-mode-card:hover strong,
.mode-grid .main-mode-card:focus-visible strong,
.mode-grid .main-mode-card:hover small,
.mode-grid .main-mode-card:focus-visible small {
  transform: none;
}

.section-head {
  margin-bottom: 6px;
}

.section-head h2 {
  color: rgba(25, 35, 31, 0.84);
  font-size: 0.95rem;
}

.event-timer {
  background: transparent;
}

.menu-screen .special-mode-grid {
  gap: 8px;
  padding-bottom: 6px;
}

.menu-screen .special-mode-button {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(196, 215, 205, 0.68);
  border-radius: 18px;
  box-shadow: none;
  flex-basis: 94px;
  min-height: 66px;
  padding: 9px;
}

.menu-screen .special-mode-button svg {
  height: 22px;
  stroke: rgba(49, 143, 106, 0.72);
  width: 22px;
}

.menu-screen .special-mode-button span {
  color: rgba(35, 49, 43, 0.66);
  font-size: 0.68rem;
  font-weight: 700;
}

.bottom-nav {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(196, 215, 205, 0.72);
  box-shadow: 0 12px 26px rgba(33, 58, 48, 0.1);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 58px;
}

.bottom-nav__item {
  border-radius: 16px;
  min-height: 46px;
}

.bottom-nav__item span {
  color: rgba(35, 49, 43, 0.58);
}

.bottom-nav__item.active,
.bottom-nav__item:hover,
.bottom-nav__item:focus-visible {
  background: rgba(109, 206, 166, 0.16);
  color: var(--accent-ink);
  transform: none;
}

.bottom-nav__item.active span,
.bottom-nav__item:hover span,
.bottom-nav__item:focus-visible span {
  color: var(--accent-ink);
}

.home-topbar .menu-toggles {
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(196, 215, 205, 0.64);
}

@media (max-width: 430px) {
  .home-hero {
    min-height: clamp(150px, 25dvh, 198px);
  }

  .hero-board {
    width: clamp(122px, 30dvh, 158px);
  }

  .mode-icon {
    height: 32px;
    width: 32px;
  }

  .menu-screen .special-mode-button {
    flex-basis: 88px;
  }
}

@media (max-height: 760px) {
  .home-shell {
    gap: 8px;
  }

  .home-hero {
    min-height: 136px;
  }

  .hero-board {
    width: clamp(112px, 26dvh, 146px);
  }

  .hero-badge {
    left: 14px;
    padding: 7px 10px;
    top: 14px;
  }

  .primary-play-button {
    min-height: 52px;
  }

  .mode-grid .main-mode-card {
    aspect-ratio: 1 / 0.94;
  }

  .menu-screen .special-mode-button {
    min-height: 60px;
  }

  .bottom-nav {
    min-height: 54px;
  }
}

/* Theme-aware Home Hub: keep the IA consistent while each skin has its own finish. */
body {
  --home-frame-bg:
    radial-gradient(circle at 50% 10%, rgba(100, 205, 164, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 249, 246, 0.66));
  --home-frame-border: rgba(209, 225, 216, 0.9);
  --home-frame-shadow: 0 24px 58px rgba(28, 54, 45, 0.13);
  --home-frame-sheen: linear-gradient(150deg, rgba(255, 255, 255, 0.38), transparent 42%, rgba(108, 205, 164, 0.06));
  --home-subtle-text: rgba(36, 50, 45, 0.5);
  --home-chip-bg: rgba(255, 255, 255, 0.68);
  --home-chip-border: rgba(192, 211, 201, 0.76);
  --home-chip-text: rgba(35, 49, 43, 0.68);
  --home-hero-bg:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.76), transparent 44%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.5), rgba(230, 243, 236, 0.42));
  --home-hero-border: rgba(200, 218, 209, 0.82);
  --home-hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 16px 34px rgba(41, 86, 68, 0.1);
  --home-board-bg: rgba(232, 240, 235, 0.88);
  --home-board-border: rgba(255, 255, 255, 0.84);
  --home-board-line: rgba(159, 184, 170, 0.62);
  --home-board-shadow: 0 18px 36px rgba(47, 84, 69, 0.13);
  --home-cell-bg: rgba(249, 252, 250, 0.88);
  --home-filled-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.86), var(--accent));
  --home-filled-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 4px 8px rgba(53, 142, 105, 0.12);
  --home-logo-filter:
    hue-rotate(var(--accent-block-hue-shift, 0deg))
    saturate(var(--accent-block-saturation, 1))
    contrast(var(--accent-block-contrast, 1))
    brightness(var(--accent-block-brightness, 1));
  --home-logo-tint: var(--accent-block-tint, transparent);
  --home-logo-tint-opacity: var(--accent-block-tint-opacity, 0);
  --home-badge-bg: rgba(255, 255, 255, 0.76);
  --home-badge-border: rgba(192, 211, 201, 0.8);
  --home-badge-shadow: 0 10px 22px rgba(33, 58, 48, 0.1);
  --home-primary-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent),
    linear-gradient(145deg, var(--accent), #2f8f69);
  --home-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 15px 30px rgba(35, 137, 95, 0.22);
  --home-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 18px 34px rgba(35, 137, 95, 0.26);
  --home-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.46)),
    rgba(247, 251, 248, 0.82);
  --home-card-border: rgba(196, 215, 205, 0.74);
  --home-card-shadow: 0 12px 24px rgba(33, 58, 48, 0.08);
  --home-card-hover-border: rgba(98, 196, 153, 0.68);
  --home-card-hover-shadow: 0 16px 30px rgba(35, 137, 95, 0.14);
  --home-selected-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(233, 248, 240, 0.72)),
    rgba(242, 251, 246, 0.92);
  --home-selected-border: rgba(98, 196, 153, 0.74);
  --home-selected-shadow: inset 0 0 0 1px rgba(103, 206, 163, 0.12), 0 15px 30px rgba(35, 137, 95, 0.14);
  --home-selected-ink: var(--accent-ink);
  --home-icon-bg: rgba(255, 255, 255, 0.58);
  --home-icon-border: rgba(192, 211, 201, 0.82);
  --home-icon-selected-bg: rgba(109, 206, 166, 0.18);
  --home-icon-selected-border: rgba(98, 196, 153, 0.58);
  --home-event-bg: rgba(255, 255, 255, 0.58);
  --home-event-border: rgba(196, 215, 205, 0.68);
  --home-event-icon: rgba(49, 143, 106, 0.72);
  --home-nav-bg: rgba(255, 255, 255, 0.72);
  --home-nav-border: rgba(196, 215, 205, 0.72);
  --home-nav-shadow: 0 12px 26px rgba(33, 58, 48, 0.1);
  --home-nav-active-bg: rgba(109, 206, 166, 0.16);
  --home-toggle-bg: rgba(255, 255, 255, 0.54);
}

body[data-theme="dusk"] {
  --home-frame-bg:
    radial-gradient(circle at 52% 6%, rgba(139, 215, 189, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(31, 42, 38, 0.94), rgba(18, 25, 23, 0.9));
  --home-frame-border: rgba(75, 96, 88, 0.78);
  --home-frame-shadow: 0 26px 64px rgba(0, 0, 0, 0.34);
  --home-frame-sheen: linear-gradient(150deg, rgba(255, 255, 255, 0.07), transparent 44%, rgba(139, 215, 189, 0.06));
  --home-subtle-text: rgba(225, 239, 232, 0.54);
  --home-chip-bg: rgba(34, 47, 42, 0.76);
  --home-chip-border: rgba(108, 135, 125, 0.56);
  --home-chip-text: rgba(215, 232, 224, 0.74);
  --home-hero-bg:
    radial-gradient(circle at 50% 40%, rgba(139, 215, 189, 0.1), transparent 42%),
    linear-gradient(155deg, rgba(37, 50, 46, 0.82), rgba(22, 31, 28, 0.74));
  --home-hero-border: rgba(77, 101, 92, 0.72);
  --home-hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 38px rgba(0, 0, 0, 0.22);
  --home-board-bg: rgba(21, 31, 28, 0.9);
  --home-board-border: rgba(52, 72, 65, 0.9);
  --home-board-line: rgba(104, 132, 122, 0.5);
  --home-board-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
  --home-cell-bg: rgba(32, 43, 39, 0.92);
  --home-filled-bg: linear-gradient(145deg, rgba(196, 241, 225, 0.92), rgba(93, 183, 151, 0.86));
  --home-filled-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 5px 10px rgba(139, 215, 189, 0.14);
  --home-badge-bg: rgba(28, 39, 35, 0.82);
  --home-badge-border: rgba(104, 132, 122, 0.58);
  --home-badge-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
  --home-primary-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent),
    linear-gradient(145deg, #8bd7bd, #3d9b7d);
  --home-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 30px rgba(55, 164, 128, 0.18);
  --home-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 20px 36px rgba(55, 164, 128, 0.22);
  --home-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(25, 35, 32, 0.88);
  --home-card-border: rgba(75, 99, 90, 0.68);
  --home-card-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  --home-card-hover-border: rgba(139, 215, 189, 0.46);
  --home-card-hover-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  --home-selected-bg:
    linear-gradient(180deg, rgba(139, 215, 189, 0.13), rgba(139, 215, 189, 0.055)),
    rgba(28, 41, 36, 0.94);
  --home-selected-border: rgba(139, 215, 189, 0.58);
  --home-selected-shadow: inset 0 0 0 1px rgba(139, 215, 189, 0.08), 0 16px 30px rgba(0, 0, 0, 0.22);
  --home-icon-bg: rgba(255, 255, 255, 0.055);
  --home-icon-border: rgba(104, 132, 122, 0.52);
  --home-icon-selected-bg: rgba(139, 215, 189, 0.14);
  --home-icon-selected-border: rgba(139, 215, 189, 0.46);
  --home-event-bg: rgba(25, 35, 32, 0.78);
  --home-event-border: rgba(75, 99, 90, 0.58);
  --home-event-icon: rgba(139, 215, 189, 0.74);
  --home-nav-bg: rgba(24, 34, 31, 0.82);
  --home-nav-border: rgba(75, 99, 90, 0.62);
  --home-nav-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  --home-nav-active-bg: rgba(139, 215, 189, 0.13);
  --home-toggle-bg: rgba(24, 34, 31, 0.74);
}

body[data-theme="classicWood"] {
  --home-frame-bg:
    radial-gradient(ellipse at 50% 0%, rgba(255, 218, 151, 0.14), transparent 34%),
    repeating-linear-gradient(96deg, rgba(58, 23, 10, 0.1) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, rgba(128, 67, 32, 0.94), rgba(88, 40, 19, 0.9));
  --home-frame-border: rgba(79, 34, 16, 0.78);
  --home-frame-shadow: 0 28px 64px rgba(28, 12, 5, 0.38);
  --home-frame-sheen:
    linear-gradient(150deg, rgba(255, 228, 175, 0.16), transparent 42%, rgba(42, 16, 7, 0.12));
  --home-subtle-text: rgba(255, 224, 174, 0.62);
  --home-chip-bg: rgba(105, 50, 24, 0.72);
  --home-chip-border: rgba(210, 142, 76, 0.42);
  --home-chip-text: rgba(255, 229, 184, 0.8);
  --home-hero-bg:
    radial-gradient(ellipse at 50% 36%, rgba(255, 229, 177, 0.16), transparent 45%),
    repeating-linear-gradient(96deg, rgba(55, 23, 9, 0.09) 0 2px, transparent 2px 42px),
    linear-gradient(155deg, rgba(126, 64, 30, 0.78), rgba(83, 36, 17, 0.72));
  --home-hero-border: rgba(93, 42, 20, 0.72);
  --home-hero-shadow: inset 0 1px 0 rgba(255, 231, 187, 0.18), 0 18px 38px rgba(31, 12, 5, 0.24);
  --home-board-bg: rgba(92, 42, 22, 0.88);
  --home-board-border: rgba(151, 83, 40, 0.82);
  --home-board-line: rgba(63, 25, 12, 0.62);
  --home-board-shadow: 0 18px 36px rgba(30, 11, 4, 0.26);
  --home-cell-bg: rgba(119, 58, 31, 0.9);
  --home-filled-bg:
    linear-gradient(145deg, rgba(255, 246, 206, 0.92), rgba(224, 161, 76, 0.9)),
    repeating-linear-gradient(90deg, rgba(109, 62, 28, 0.14) 0 1px, transparent 1px 8px);
  --home-filled-shadow: inset 0 1px 0 rgba(255, 249, 220, 0.44), 0 4px 9px rgba(45, 16, 5, 0.24);
  --home-logo-filter: none;
  --home-logo-tint-opacity: 0;
  --home-badge-bg: rgba(109, 54, 27, 0.8);
  --home-badge-border: rgba(216, 148, 82, 0.42);
  --home-badge-shadow: 0 12px 24px rgba(30, 12, 5, 0.24);
  --home-primary-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(145deg, #f3d98f, #c07935);
  --home-primary-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.32), 0 16px 30px rgba(51, 19, 6, 0.28);
  --home-primary-shadow-hover: inset 0 1px 0 rgba(255, 248, 220, 0.38), 0 20px 36px rgba(51, 19, 6, 0.32);
  --home-card-bg:
    radial-gradient(ellipse at 28% 18%, rgba(255, 222, 160, 0.12), transparent 42%),
    repeating-linear-gradient(95deg, rgba(61, 25, 10, 0.09) 0 2px, transparent 2px 34px),
    rgba(104, 50, 24, 0.82);
  --home-card-border: rgba(132, 68, 33, 0.72);
  --home-card-shadow: 0 12px 24px rgba(31, 12, 5, 0.2);
  --home-card-hover-border: rgba(241, 198, 128, 0.54);
  --home-card-hover-shadow: 0 16px 30px rgba(31, 12, 5, 0.24);
  --home-selected-bg:
    radial-gradient(ellipse at 28% 18%, rgba(255, 230, 174, 0.18), transparent 42%),
    repeating-linear-gradient(95deg, rgba(61, 25, 10, 0.08) 0 2px, transparent 2px 34px),
    rgba(123, 61, 30, 0.92);
  --home-selected-border: rgba(255, 224, 151, 0.58);
  --home-selected-shadow: inset 0 0 0 1px rgba(255, 224, 151, 0.1), 0 16px 30px rgba(31, 12, 5, 0.26);
  --home-selected-ink: #fff0c8;
  --home-icon-bg: rgba(255, 224, 151, 0.1);
  --home-icon-border: rgba(216, 148, 82, 0.42);
  --home-icon-selected-bg: rgba(255, 224, 151, 0.16);
  --home-icon-selected-border: rgba(255, 224, 151, 0.5);
  --home-event-bg: rgba(103, 50, 25, 0.72);
  --home-event-border: rgba(132, 68, 33, 0.64);
  --home-event-icon: rgba(255, 224, 151, 0.72);
  --home-nav-bg: rgba(91, 42, 20, 0.78);
  --home-nav-border: rgba(132, 68, 33, 0.64);
  --home-nav-shadow: 0 14px 28px rgba(31, 12, 5, 0.24);
  --home-nav-active-bg: rgba(255, 224, 151, 0.14);
  --home-toggle-bg: rgba(91, 42, 20, 0.68);
}

body[data-theme="retro"] {
  --home-frame-bg:
    radial-gradient(circle at 28% 0%, rgba(0, 216, 255, 0.11), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(255, 49, 88, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(19, 25, 42, 0.94), rgba(9, 13, 23, 0.92));
  --home-frame-border: rgba(0, 216, 255, 0.22);
  --home-frame-shadow: 0 28px 66px rgba(0, 0, 0, 0.46);
  --home-frame-sheen: linear-gradient(150deg, rgba(255, 255, 255, 0.055), transparent 44%, rgba(0, 216, 255, 0.045));
  --home-subtle-text: rgba(195, 216, 232, 0.56);
  --home-chip-bg: rgba(17, 23, 38, 0.78);
  --home-chip-border: rgba(0, 216, 255, 0.22);
  --home-chip-text: rgba(214, 236, 246, 0.76);
  --home-hero-bg:
    radial-gradient(circle at 48% 34%, rgba(0, 216, 255, 0.085), transparent 42%),
    linear-gradient(155deg, rgba(20, 27, 44, 0.84), rgba(11, 16, 28, 0.78));
  --home-hero-border: rgba(0, 216, 255, 0.2);
  --home-hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 38px rgba(0, 0, 0, 0.32);
  --home-board-bg: rgba(13, 19, 33, 0.92);
  --home-board-border: rgba(40, 54, 84, 0.9);
  --home-board-line: rgba(0, 216, 255, 0.18);
  --home-board-shadow: 0 0 0 1px rgba(0, 216, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.32);
  --home-cell-bg: rgba(24, 32, 52, 0.9);
  --home-filled-bg: linear-gradient(145deg, rgba(227, 252, 255, 0.94), rgba(0, 216, 255, 0.82));
  --home-filled-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 0 10px rgba(0, 216, 255, 0.18);
  --home-logo-filter: none;
  --home-logo-tint-opacity: 0;
  --home-badge-bg: rgba(15, 21, 35, 0.84);
  --home-badge-border: rgba(0, 216, 255, 0.22);
  --home-badge-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  --home-primary-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent),
    linear-gradient(145deg, #00d8ff, #3278ff);
  --home-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 216, 255, 0.16), 0 16px 30px rgba(0, 0, 0, 0.28);
  --home-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 1px rgba(0, 216, 255, 0.2), 0 20px 36px rgba(0, 0, 0, 0.32);
  --home-card-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.015)),
    rgba(17, 23, 38, 0.86);
  --home-card-border: rgba(69, 84, 123, 0.62);
  --home-card-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
  --home-card-hover-border: rgba(0, 216, 255, 0.42);
  --home-card-hover-shadow: 0 16px 30px rgba(0, 0, 0, 0.3);
  --home-selected-bg:
    linear-gradient(135deg, rgba(0, 216, 255, 0.11), rgba(255, 255, 255, 0.02)),
    rgba(17, 24, 41, 0.94);
  --home-selected-border: rgba(0, 216, 255, 0.48);
  --home-selected-shadow: inset 0 0 0 1px rgba(0, 216, 255, 0.08), 0 16px 30px rgba(0, 0, 0, 0.32);
  --home-icon-bg: rgba(255, 255, 255, 0.05);
  --home-icon-border: rgba(69, 84, 123, 0.6);
  --home-icon-selected-bg: rgba(0, 216, 255, 0.12);
  --home-icon-selected-border: rgba(0, 216, 255, 0.42);
  --home-event-bg: rgba(17, 23, 38, 0.78);
  --home-event-border: rgba(69, 84, 123, 0.58);
  --home-event-icon: rgba(0, 216, 255, 0.76);
  --home-nav-bg: rgba(13, 19, 33, 0.84);
  --home-nav-border: rgba(69, 84, 123, 0.58);
  --home-nav-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
  --home-nav-active-bg: rgba(0, 216, 255, 0.12);
  --home-toggle-bg: rgba(13, 19, 33, 0.76);
}

.home-shell {
  background: var(--home-frame-bg);
  border-color: var(--home-frame-border);
  box-shadow: var(--home-frame-shadow);
}

.home-shell::before {
  background: var(--home-frame-sheen);
}

.home-kicker,
.hero-badge span {
  color: var(--home-subtle-text);
}

.event-timer {
  background: var(--home-chip-bg);
  border-color: var(--home-chip-border);
  color: var(--home-chip-text);
}

.home-hero {
  background: var(--home-hero-bg);
  border-color: var(--home-hero-border);
  box-shadow: var(--home-hero-shadow);
}

.hero-board {
  background: var(--home-board-bg);
  border-color: var(--home-board-border);
  box-shadow: inset 0 0 0 1px var(--home-board-line), var(--home-board-shadow);
}

.hero-board span {
  background: var(--home-cell-bg);
}

.hero-board span.filled {
  background: var(--home-filled-bg);
  box-shadow: var(--home-filled-shadow);
}

.hero-badge {
  background: var(--home-badge-bg);
  border-color: var(--home-badge-border);
  box-shadow: var(--home-badge-shadow);
}

.primary-play-button {
  background: var(--home-primary-bg);
  box-shadow: var(--home-primary-shadow);
}

.primary-play-button:hover,
.primary-play-button:focus-visible {
  box-shadow: var(--home-primary-shadow-hover);
}

.mode-grid .main-mode-card {
  background: var(--home-card-bg);
  border-color: var(--home-card-border);
  box-shadow: var(--home-card-shadow);
}

.mode-grid .main-mode-card[aria-pressed="true"],
.mode-grid .main-mode-card.active {
  background: var(--home-selected-bg);
  border-color: var(--home-selected-border);
  box-shadow: var(--home-selected-shadow);
}

.mode-grid .main-mode-card[aria-pressed="true"] strong,
.mode-grid .main-mode-card.active strong,
.mode-grid .main-mode-card[aria-pressed="true"] .mode-icon,
.mode-grid .main-mode-card.active .mode-icon {
  color: var(--home-selected-ink);
}

.mode-icon {
  background: var(--home-icon-bg);
  border-color: var(--home-icon-border);
}

.mode-grid .main-mode-card[aria-pressed="true"] .mode-icon,
.mode-grid .main-mode-card.active .mode-icon {
  background: var(--home-icon-selected-bg);
  border-color: var(--home-icon-selected-border);
}

.mode-grid .main-mode-card:hover,
.mode-grid .main-mode-card:focus-visible {
  border-color: var(--home-card-hover-border);
  box-shadow: var(--home-card-hover-shadow);
}

.section-head h2 {
  color: var(--ink);
}

.menu-screen .special-mode-button {
  background: var(--home-event-bg);
  border-color: var(--home-event-border);
}

.menu-screen .special-mode-button svg {
  stroke: var(--home-event-icon);
}

.menu-screen .special-mode-button span,
.bottom-nav__item span {
  color: var(--home-chip-text);
}

.bottom-nav {
  background: var(--home-nav-bg);
  border-color: var(--home-nav-border);
  box-shadow: var(--home-nav-shadow);
}

.bottom-nav__item.active,
.bottom-nav__item:hover,
.bottom-nav__item:focus-visible {
  background: var(--home-nav-active-bg);
}

.home-topbar .menu-toggles {
  background: var(--home-toggle-bg);
  border: 1px solid var(--home-chip-border);
}

body[data-theme="dusk"] .primary-play-button,
body[data-theme="classicWood"] .primary-play-button,
body[data-theme="retro"] .primary-play-button {
  color: #08110e;
  text-shadow: none;
}

body[data-theme="classicWood"] .primary-play-button {
  color: #3b1808;
}

body[data-theme="classicWood"] .home-brand h1,
body[data-theme="classicWood"] .mode-grid .main-mode-card strong,
body[data-theme="classicWood"] .hero-badge strong,
body[data-theme="classicWood"] .section-head h2 {
  color: #fff0c8;
  text-shadow: 0 1px 0 rgba(70, 29, 12, 0.32);
}

body[data-theme="classicWood"] .mode-grid .main-mode-card small,
body[data-theme="classicWood"] .menu-screen .special-mode-button span {
  color: rgba(255, 224, 174, 0.72);
}

body[data-theme="dusk"] .home-brand h1,
body[data-theme="dusk"] .hero-badge strong,
body[data-theme="retro"] .home-brand h1,
body[data-theme="retro"] .hero-badge strong {
  color: var(--ink);
}

body[data-theme="retro"] .mode-grid .main-mode-card[aria-pressed="true"] strong,
body[data-theme="retro"] .mode-grid .main-mode-card.active strong {
  text-shadow: 0 0 12px rgba(0, 216, 255, 0.14);
}

/* Home tab restructure: Daily hero on Home, Specials and Options as dedicated tabs. */
body {
  --home-preview-image: url("puzzle_background.png");
  --home-preview-filter:
    hue-rotate(var(--accent-block-hue-shift, 0deg))
    saturate(var(--accent-block-saturation, 1))
    contrast(var(--accent-block-contrast, 1))
    brightness(var(--accent-block-brightness, 1));
  --home-preview-tint: var(--accent-block-tint, transparent);
  --home-preview-tint-opacity: var(--accent-block-tint-opacity, 0);
  --home-preview-overlay:
    linear-gradient(180deg, rgba(246, 250, 247, 0.34), rgba(246, 250, 247, 0.48)),
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.42), transparent 38%);
}

body[data-theme="dusk"] {
  --home-preview-image: url("puzzle_background.png");
  --home-preview-overlay:
    linear-gradient(rgba(17, 23, 21, 0.7), rgba(17, 23, 21, 0.72)),
    radial-gradient(circle at 50% 48%, rgba(139, 215, 189, 0.12), transparent 38%);
}

body[data-theme="classicWood"] {
  --home-preview-image: url("puzzle_background_classic_wood.png");
  --home-preview-filter: saturate(1.04) contrast(1.02);
  --home-preview-tint-opacity: 0;
  --home-preview-overlay:
    linear-gradient(rgba(56, 22, 9, 0.2), rgba(56, 22, 9, 0.34)),
    radial-gradient(ellipse at 50% 42%, rgba(255, 225, 169, 0.16), transparent 42%);
}

body[data-theme="retro"] {
  --home-preview-image: url("puzzle_background_retro.png");
  --home-preview-filter: saturate(1.08) contrast(1.06);
  --home-preview-tint-opacity: 0;
  --home-preview-overlay:
    linear-gradient(rgba(7, 10, 18, 0.42), rgba(7, 10, 18, 0.58)),
    radial-gradient(circle at 50% 46%, rgba(0, 216, 255, 0.12), transparent 40%);
}

.home-shell {
  --home-shell-current-pad-y: clamp(14px, 2dvh, 20px);
  --home-shell-current-row-gap: clamp(9px, 1.25dvh, 13px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.home-tab-view {
  min-height: 0;
}

.home-tab-view--home {
  align-content: stretch;
  display: grid;
  gap: clamp(8px, 1.1dvh, 12px);
  grid-template-rows: auto auto minmax(min-content, 1fr);
  padding-bottom: 0;
  padding-top: calc(var(--home-shell-current-pad-y) - var(--home-shell-current-row-gap));
}

.home-tab-view--home .home-hero,
.home-tab-view--home .primary-play-button {
  align-self: start;
}

.home-tab-view--home .mode-grid {
  align-self: center;
  transform: translateY(clamp(3px, 0.55dvh, 6px));
}

.home-tab-view--special,
.home-tab-view--archive,
.home-tab-view--options,
.home-tab-view--story {
  align-content: start;
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.home-tab-view--story {
  align-content: stretch;
  gap: clamp(8px, 1.4dvh, 12px);
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.home-hero {
  aspect-ratio: 2816 / 1536;
  background: var(--home-preview-overlay), var(--home-hero-bg);
  isolation: isolate;
  min-height: 0;
  width: 100%;
}

.home-hero::before,
.home-hero::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.home-hero::before {
  background-image: var(--home-preview-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: var(--home-preview-filter);
  opacity: 0.82;
}

.home-hero::after {
  background: var(--home-preview-tint);
  opacity: var(--home-preview-tint-opacity);
  -webkit-mask-image: var(--home-preview-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--home-preview-image);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.home-hero > * {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: none;
}

.hero-board {
  backdrop-filter: blur(4px);
}

.mode-grid .main-mode-card {
  aspect-ratio: 1 / 1.16;
  min-height: clamp(96px, 14dvh, 132px);
}

.mode-grid .main-mode-card[aria-pressed="true"],
.mode-grid .main-mode-card.active {
  background: var(--home-card-bg);
  border-color: var(--home-card-border);
  box-shadow: var(--home-card-shadow);
}

.home-tab-view--archive {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.home-tab-view--archive .calendar-head {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.home-tab-view--archive .calendar-head h2 {
  font-size: clamp(1.22rem, 5vw, 1.58rem);
  margin: 0;
  text-align: center;
}

.home-tab-view--archive .calendar-weekdays {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
}

.home-tab-view--archive .calendar-weekdays span {
  color: var(--home-chip-text);
  font-size: 0.66rem;
  font-weight: 800;
  text-align: center;
}

.home-tab-view--archive .calendar-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  min-height: 0;
}

.home-tab-view--archive .calendar-day {
  align-items: center;
  aspect-ratio: auto;
  border-radius: 12px;
  display: inline-flex;
  font-size: clamp(0.76rem, 2.4dvh, 0.92rem);
  height: 100%;
  justify-content: center;
  min-height: 0;
  padding: 0;
}

.home-tab-view--archive .calendar-start {
  margin-top: 0;
  min-height: clamp(50px, 7dvh, 58px);
}

.home-tab-view--special .section-head {
  margin-bottom: 0;
}

.home-tab-view--special .special-mode-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: visible;
  padding: 0;
}

.home-tab-view--special .special-mode-button {
  aspect-ratio: 1 / 0.92;
  border-radius: 22px;
  flex: initial;
  min-height: clamp(112px, 18dvh, 154px);
}

.home-tab-view--special .special-mode-button svg {
  height: 30px;
  width: 30px;
}

.home-tab-view--special .special-mode-button span {
  font-size: 0.78rem;
}

.home-tab-view--options {
  gap: 10px;
  grid-template-rows: 64px 64px 64px 64px minmax(0, 1fr) 64px;
}

.option-action,
.option-control {
  align-items: center;
  background: var(--home-card-bg);
  border: 1px solid var(--home-card-border);
  border-radius: 20px;
  box-shadow: var(--home-card-shadow);
  color: var(--ink);
  display: grid;
  gap: 6px;
  min-height: 62px;
  padding: 12px 14px;
  text-align: center;
}

.option-action {
  cursor: pointer;
  justify-items: center;
}

.option-action span,
.option-control span {
  color: var(--home-chip-text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.option-action strong {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1.02rem;
  text-align: center;
}

.option-control {
  grid-template-columns: 72px minmax(0, 1fr);
  justify-items: center;
}

.option-control input[type="range"] {
  accent-color: var(--accent);
  cursor: pointer;
  width: 100%;
}

.option-control--audio input[type="range"] {
  --range-fill: 0%;
  appearance: none;
  accent-color: var(--accent);
  background: transparent;
  height: 22px;
}

.option-control--audio input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--accent) 0 var(--range-fill), rgba(255, 255, 255, 0.78) var(--range-fill) 100%);
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  height: 8px;
}

.option-control--audio input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 4px 12px var(--accent-shadow-soft);
  height: 20px;
  margin-top: -7px;
  width: 20px;
}

.option-control--audio input[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  height: 8px;
}

.option-control--audio input[type="range"]::-moz-range-thumb {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 4px 12px var(--accent-shadow-soft);
  height: 16px;
  width: 16px;
}

.option-control--audio input[type="range"]::-moz-range-progress {
  background: var(--accent);
  border-radius: 999px;
  height: 8px;
}

.option-control--hue input[type="range"] {
  appearance: none;
  background:
    linear-gradient(
      90deg,
      hsl(0 100% 50%) 0%,
      hsl(60 100% 50%) 16.6%,
      hsl(120 100% 45%) 33.3%,
      hsl(180 100% 45%) 50%,
      hsl(240 100% 56%) 66.6%,
      hsl(300 100% 55%) 83.3%,
      hsl(360 100% 50%) 100%
    );
  border-radius: 999px;
  height: 16px;
}

.option-control--hue input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 2px 8px var(--accent-shadow);
  height: 20px;
  width: 20px;
}

.option-control--hue input[type="range"]::-moz-range-thumb {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 2px 8px var(--accent-shadow);
  height: 18px;
  width: 18px;
}

.option-toggle {
  background: var(--home-icon-bg);
  border-color: var(--home-icon-border);
  border-radius: 999px;
  color: var(--ink);
  justify-self: center;
  min-height: 38px;
  text-align: center;
}

.option-toggle.off {
  opacity: 0.54;
}

.option-action--secondary {
  grid-row: 6;
}

.option-control--hue.accent-disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.home-topbar .menu-toggles .volume-popover {
  background: color-mix(in srgb, var(--home-toggle-bg) 76%, rgba(255, 255, 255, 0.62));
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(33, 58, 48, 0.12);
  left: 50%;
  min-height: 144px;
  padding: 6px 0;
  right: auto;
  top: calc(100% + 6px);
  transform: translate(-50%, -4px);
  width: 24px;
  z-index: 80;
}

.home-topbar .menu-toggles .volume-popover input[type="range"] {
  appearance: none;
  background: transparent;
  direction: rtl;
  height: 132px;
  margin: 0 auto;
  width: 18px;
  writing-mode: vertical-lr;
}

.home-topbar .menu-toggles .volume-popover input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.72);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  height: 100%;
  width: 6px;
}

.home-topbar .menu-toggles .volume-popover input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--accent);
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  box-shadow: 0 4px 10px var(--accent-shadow-soft);
  height: 18px;
  margin-left: -6px;
  width: 18px;
}

.home-topbar .menu-toggles .volume-popover input[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.72);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  width: 6px;
}

.home-topbar .menu-toggles .volume-popover input[type="range"]::-moz-range-thumb {
  background: var(--accent);
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  box-shadow: 0 4px 10px var(--accent-shadow-soft);
  height: 14px;
  width: 14px;
}

.home-topbar .menu-toggles .volume-control:hover .volume-popover,
.home-topbar .menu-toggles .volume-control:focus-within .volume-popover,
.home-topbar .menu-toggles .volume-control.volume-open .volume-popover {
  transform: translate(-50%, 0);
}

@media (max-width: 430px) {
  .home-shell {
    --home-shell-current-pad-y: 12px;
  }

  .home-tab-view--home {
    grid-template-rows: auto auto minmax(min-content, 1fr);
  }

  .mode-grid .main-mode-card {
    min-height: clamp(90px, 13dvh, 116px);
  }

  .home-tab-view--special .special-mode-button {
    min-height: 106px;
  }

  .home-tab-view--archive .calendar-grid {
    gap: 5px;
  }
}

@media (max-height: 760px) {
  .home-shell {
    --home-shell-current-row-gap: 8px;
  }

  .home-tab-view--home {
    gap: 8px;
    grid-template-rows: auto auto minmax(min-content, 1fr);
  }

  .home-tab-view--home .mode-grid {
    transform: translateY(3px);
  }

  .home-hero {
    min-height: 0;
  }

  .mode-grid .main-mode-card {
    aspect-ratio: 1 / 0.98;
    min-height: 78px;
  }

  .home-tab-view--special .special-mode-button {
    min-height: 92px;
  }

  .home-tab-view--archive {
    gap: 8px;
  }

  .home-tab-view--archive .calendar-grid {
    gap: 5px;
  }

  .home-tab-view--archive .calendar-start {
    min-height: 48px;
  }

  .home-tab-view--options {
    grid-template-rows: 54px 54px 54px 54px minmax(0, 1fr) 54px;
  }

  .option-action,
  .option-control {
    min-height: 54px;
    padding-block: 9px;
  }
}

/* Premium polish pass: refine the existing Home hierarchy without adding new UI. */
body {
  --premium-background: #eef6f1;
  --premium-surface: rgba(248, 252, 249, 0.82);
  --premium-surface-elevated: rgba(255, 255, 255, 0.88);
  --premium-surface-glass: rgba(255, 255, 255, 0.58);
  --premium-border-soft: rgba(188, 213, 201, 0.72);
  --premium-border-strong: rgba(119, 181, 154, 0.42);
  --premium-text-primary: #17251f;
  --premium-text-secondary: rgba(33, 49, 42, 0.62);
  --premium-accent: var(--accent);
  --premium-accent-dark: color-mix(in srgb, var(--accent) 62%, #0f4f3d);
  --premium-accent-light: color-mix(in srgb, var(--accent) 30%, white);
  --premium-shadow-soft: 0 18px 44px rgba(33, 58, 48, 0.12);
  --premium-shadow-elevated: 0 22px 56px rgba(33, 58, 48, 0.16);
  --premium-glow-soft: 0 0 0 8px color-mix(in srgb, var(--accent) 13%, transparent);
  --premium-ease: cubic-bezier(0.2, 0.78, 0.2, 1);
  --home-frame-bg:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.96), transparent 28%),
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(242, 249, 245, 0.7));
  --home-frame-border: rgba(198, 222, 211, 0.86);
  --home-frame-shadow:
    0 36px 78px rgba(26, 48, 40, 0.14),
    0 10px 24px rgba(26, 48, 40, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --home-frame-sheen:
    linear-gradient(150deg, rgba(255, 255, 255, 0.52), transparent 40%, color-mix(in srgb, var(--accent) 7%, transparent));
  --home-hero-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -18px 38px rgba(43, 100, 76, 0.055),
    0 18px 42px rgba(36, 74, 58, 0.13);
  --home-board-shadow:
    inset 0 0 0 1px rgba(124, 166, 146, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 22px 42px rgba(38, 76, 60, 0.18);
  --home-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 13px 28px rgba(33, 58, 48, 0.1);
  --home-card-hover-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 18px 36px rgba(35, 137, 95, 0.16);
  --home-nav-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 18px 40px rgba(33, 58, 48, 0.13);
  --home-primary-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.05) 42%, rgba(0, 0, 0, 0.08)),
    radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.36), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent) 76%, #166348));
  --home-primary-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -2px 0 rgba(16, 68, 49, 0.18),
    0 18px 34px color-mix(in srgb, var(--accent) 23%, transparent),
    var(--premium-glow-soft);
  --home-primary-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -2px 0 rgba(16, 68, 49, 0.14),
    0 22px 42px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 0 9px color-mix(in srgb, var(--accent) 15%, transparent);
}

body[data-theme="dusk"] {
  --premium-surface: rgba(25, 35, 32, 0.84);
  --premium-surface-elevated: rgba(31, 43, 39, 0.9);
  --premium-surface-glass: rgba(28, 39, 35, 0.64);
  --premium-border-soft: rgba(84, 113, 102, 0.62);
  --premium-border-strong: rgba(139, 215, 189, 0.42);
  --premium-text-primary: #eef7f3;
  --premium-text-secondary: rgba(225, 239, 232, 0.62);
  --premium-shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.24);
  --premium-shadow-elevated: 0 24px 58px rgba(0, 0, 0, 0.32);
  --premium-glow-soft: 0 0 0 8px color-mix(in srgb, var(--accent) 13%, transparent);
  --home-frame-shadow:
    0 32px 74px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --home-primary-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 44%, rgba(0, 0, 0, 0.12)),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent) 68%, #124b3a));
}

body[data-theme="classicWood"],
body[data-theme="retro"] {
  --premium-shadow-soft: var(--home-card-shadow);
  --premium-shadow-elevated: var(--home-card-hover-shadow);
}

body:not([data-theme="classicWood"]):not([data-theme="retro"]) .interactive-background__blocks::before {
  opacity: 0.76;
}

.menu-decor {
  opacity: 0.42;
  filter: blur(0.2px);
}

.home-shell {
  backdrop-filter: blur(18px) saturate(1.05);
  border-width: 1px;
  transform-origin: center 58%;
  animation: premium-shell-enter 420ms var(--premium-ease) both;
}

.home-topbar {
  padding-inline: 1px;
}

.home-logo {
  filter: drop-shadow(0 10px 16px rgba(38, 94, 73, 0.14));
}

.home-brand {
  gap: 11px;
}

.home-kicker {
  color: var(--premium-text-secondary);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
}

.home-brand h1 {
  color: var(--premium-text-primary);
  font-size: clamp(1.42rem, 4.4vw, 1.88rem);
  font-weight: 850;
  letter-spacing: -0.06em;
}

.icon-toggle {
  color: var(--accent);
  transition: background 180ms var(--premium-ease), color 180ms var(--premium-ease), transform 180ms var(--premium-ease), box-shadow 180ms var(--premium-ease);
}

.icon-toggle svg,
.mode-icon svg,
.bottom-nav__item svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}

.icon-toggle svg {
  height: 18px;
  width: 18px;
}

.icon-toggle:hover,
.icon-toggle:focus-visible {
  background: color-mix(in srgb, var(--accent) 11%, var(--panel));
  box-shadow: 0 8px 18px rgba(33, 58, 48, 0.1);
  transform: translateY(-1px);
}

.home-hero {
  border-radius: 28px;
  box-shadow: var(--home-hero-shadow);
}

.home-hero::before {
  opacity: 0.74;
  transform: scale(0.992);
}

.hero-board {
  border-width: 5px;
  border-radius: 22px;
  gap: 2.5px;
  padding: 7px;
  transform: translateZ(0);
  animation: premium-board-float 7.5s ease-in-out infinite;
}

.hero-board::before {
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 42%);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.hero-board span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18)),
    var(--home-cell-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(88, 124, 108, 0.08);
  position: relative;
  z-index: 1;
}

.hero-board span.filled {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.54), transparent 34%),
    var(--home-filled-bg);
  animation: premium-cell-breathe 6.2s ease-in-out infinite;
}

.primary-play-button {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  letter-spacing: -0.045em;
  transform-origin: center;
  transition: transform 170ms var(--premium-ease), box-shadow 170ms var(--premium-ease), filter 170ms var(--premium-ease);
  animation: premium-play-breathe 4.8s ease-in-out infinite;
}

.primary-play-button::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  content: "";
  inset: 0 auto 0 -38%;
  pointer-events: none;
  position: absolute;
  transform: skewX(-16deg);
  width: 34%;
  z-index: 0;
}

.primary-play-button:hover::before,
.primary-play-button:focus-visible::before {
  animation: premium-button-shine 820ms var(--premium-ease);
}

.primary-play-button:hover,
.primary-play-button:focus-visible {
  filter: saturate(1.03);
  transform: translateY(-2px) scale(1.006);
}

.primary-play-button:active {
  transform: translateY(1px) scale(0.99);
}

.primary-play-button > * {
  position: relative;
  z-index: 1;
}

.play-icon {
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.42), transparent 38%),
    rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  color: currentColor;
}

.play-icon svg {
  fill: currentColor;
  height: 17px;
  transform: translateX(1px);
  width: 17px;
}

.mode-grid {
  gap: 11px;
}

.mode-grid .main-mode-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.48), transparent 58%),
    var(--home-card-bg);
  overflow: hidden;
  position: relative;
  transition: transform 170ms var(--premium-ease), border-color 170ms var(--premium-ease), box-shadow 170ms var(--premium-ease), background 170ms var(--premium-ease);
}

.mode-grid .main-mode-card::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent);
  content: "";
  height: 42%;
  inset: 0 0 auto;
  opacity: 0.48;
  pointer-events: none;
  position: absolute;
}

.mode-grid .main-mode-card:hover,
.mode-grid .main-mode-card:focus-visible {
  transform: translateY(-2px);
}

.mode-grid .main-mode-card:active {
  transform: translateY(1px) scale(0.99);
}

.mode-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
  color: var(--accent);
  height: 38px;
  width: 38px;
}

.mode-icon svg {
  height: 22px;
  width: 22px;
}

.mode-grid .main-mode-card strong {
  color: var(--premium-text-primary);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.mode-grid .main-mode-card small {
  color: var(--premium-text-secondary);
  font-size: 0.72rem;
  font-weight: 650;
}

.bottom-nav {
  backdrop-filter: blur(16px) saturate(1.06);
  border-radius: 25px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 64px;
  padding: 6px;
}

.bottom-nav__item {
  border-radius: 18px;
  gap: 3px;
  position: relative;
}

.bottom-nav__item span {
  display: grid;
  height: 22px;
  place-items: center;
  transition: color 180ms var(--premium-ease), transform 180ms var(--premium-ease);
  width: 22px;
}

.bottom-nav__item svg {
  height: 21px;
  width: 21px;
}

.bottom-nav__item strong {
  color: inherit;
  font-size: 0.61rem;
  font-weight: 780;
  letter-spacing: 0.01em;
}

.bottom-nav__item.active,
.bottom-nav__item:hover,
.bottom-nav__item:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
  transform: none;
}

.bottom-nav__item.active span,
.bottom-nav__item:hover span,
.bottom-nav__item:focus-visible span {
  color: var(--accent);
  transform: translateY(-1px);
}

@keyframes premium-shell-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes premium-play-breathe {
  0%, 100% {
    box-shadow: var(--home-primary-shadow);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 0 rgba(16, 68, 49, 0.12),
      0 20px 38px color-mix(in srgb, var(--accent) 27%, transparent),
      0 0 0 9px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

@keyframes premium-button-shine {
  from {
    left: -38%;
  }
  to {
    left: 110%;
  }
}

@keyframes premium-board-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes premium-cell-breathe {
  0%, 100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.05) brightness(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-shell,
  .hero-board,
  .hero-board span.filled,
  .primary-play-button {
    animation: none;
  }

  .primary-play-button:hover::before,
  .primary-play-button:focus-visible::before {
    animation: none;
  }
}

/* Archive premium pass: richer Daily states without changing the tab structure. */
body {
  --archive-surface:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.58), transparent 58%),
    rgba(255, 255, 255, 0.56);
  --archive-day-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 251, 248, 0.54)),
    rgba(247, 252, 249, 0.78);
  --archive-day-border: rgba(190, 213, 202, 0.78);
  --archive-day-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 8px 18px rgba(33, 58, 48, 0.07);
  --archive-day-muted: rgba(45, 62, 54, 0.42);
  --archive-selected-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, white), color-mix(in srgb, var(--accent) 92%, #17664c));
  --archive-selected-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 14px 26px color-mix(in srgb, var(--accent) 26%, transparent),
    0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent);
  --archive-complete-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, white), rgba(246, 252, 249, 0.78));
  --archive-locked-bg: rgba(237, 242, 239, 0.48);
}

body[data-theme="dusk"] {
  --archive-day-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(27, 39, 35, 0.78);
  --archive-day-border: rgba(88, 117, 106, 0.58);
  --archive-day-muted: rgba(226, 240, 233, 0.38);
  --archive-locked-bg: rgba(18, 27, 24, 0.5);
}

body[data-theme="classicWood"],
body[data-theme="retro"] {
  --archive-day-bg: var(--home-card-bg);
  --archive-day-border: var(--home-card-border);
  --archive-day-shadow: var(--home-card-shadow);
  --archive-selected-bg: var(--home-primary-bg);
  --archive-selected-shadow: var(--home-primary-shadow);
}

.home-tab-view--archive {
  gap: clamp(8px, 1.15dvh, 12px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.home-tab-view--archive .calendar-head {
  background: var(--archive-surface);
  border: 1px solid var(--premium-border-soft);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 12px 26px rgba(33, 58, 48, 0.08);
  padding: 7px;
}

.home-tab-view--archive .calendar-head h2 {
  color: var(--premium-text-primary);
  font-weight: 840;
  letter-spacing: -0.055em;
}

.home-tab-view--archive .calendar-head .icon-button {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--premium-border-soft);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
  color: var(--accent);
  transition: background 170ms var(--premium-ease), box-shadow 170ms var(--premium-ease), transform 170ms var(--premium-ease), opacity 170ms var(--premium-ease);
}

.home-tab-view--archive .calendar-head .icon-button:hover,
.home-tab-view--archive .calendar-head .icon-button:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, white);
  box-shadow: 0 10px 20px rgba(33, 58, 48, 0.1);
  transform: translateY(-1px);
}

.home-tab-view--archive .calendar-head .icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

.archive-summary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34)),
    color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid var(--premium-border-soft);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
  display: grid;
  gap: 7px;
  padding: 10px 12px;
}

.archive-summary > div:first-child {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.archive-summary span {
  color: var(--premium-text-secondary);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-summary strong {
  color: var(--premium-text-primary);
  font-size: 0.76rem;
  font-weight: 820;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-progress {
  background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.58));
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.archive-progress span {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, white), var(--accent));
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 8px;
  transition: width 260ms var(--premium-ease);
}

.home-tab-view--archive .calendar-weekdays {
  padding-inline: 3px;
}

.home-tab-view--archive .calendar-weekdays span {
  color: var(--premium-text-secondary);
  font-size: 0.64rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-tab-view--archive .calendar-grid {
  gap: clamp(5px, 0.9dvh, 7px);
}

.home-tab-view--archive .calendar-day {
  background: var(--archive-day-bg);
  border: 1px solid var(--archive-day-border);
  box-shadow: var(--archive-day-shadow);
  color: var(--premium-text-primary);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-weight: 760;
  isolation: isolate;
  overflow: hidden;
  transition: background 170ms var(--premium-ease), border-color 170ms var(--premium-ease), box-shadow 170ms var(--premium-ease), color 170ms var(--premium-ease), opacity 170ms var(--premium-ease), transform 170ms var(--premium-ease);
}

.calendar-day__number {
  position: relative;
  z-index: 2;
}

.home-tab-view--archive .calendar-day::before,
.home-tab-view--archive .calendar-day::after {
  background: none;
  border: 0;
  border-radius: 0;
  content: "";
  height: auto;
  inset: auto;
  left: auto;
  pointer-events: none;
  position: absolute;
  right: auto;
  top: auto;
  width: auto;
  z-index: 1;
}

.home-tab-view--archive .calendar-day.playable:hover,
.home-tab-view--archive .calendar-day.playable:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--archive-day-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 24px rgba(33, 58, 48, 0.11);
  transform: translateY(-1px);
}

.home-tab-view--archive .calendar-day.today {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--archive-day-border));
  box-shadow:
    var(--archive-day-shadow),
    0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent);
}

.home-tab-view--archive .calendar-day.today::before {
  border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  border-radius: inherit;
  inset: 3px;
}

.home-tab-view--archive .calendar-day.completed {
  background: var(--archive-complete-bg);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--archive-day-border));
}

.home-tab-view--archive .calendar-day.completed::after {
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  height: 7px;
  right: 8px;
  top: 7px;
  transform: rotate(45deg);
  width: 4px;
}

.home-tab-view--archive .calendar-day.streak:not(.selected) {
  box-shadow:
    var(--archive-day-shadow),
    inset 0 -3px 0 color-mix(in srgb, var(--accent) 34%, transparent);
}

.home-tab-view--archive .calendar-day.selected {
  background: var(--archive-selected-bg);
  border-color: color-mix(in srgb, var(--accent) 62%, white);
  box-shadow: var(--archive-selected-shadow);
  color: white;
  transform: translateY(-1px);
}

.home-tab-view--archive .calendar-day.selected::before {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.34), transparent 38%);
  inset: 0;
}

.home-tab-view--archive .calendar-day.selected.completed::after {
  border-color: white;
}

.home-tab-view--archive .calendar-day.outside {
  color: var(--archive-day-muted);
  opacity: 0.58;
}

.home-tab-view--archive .calendar-day.future {
  background: var(--archive-locked-bg);
  color: var(--archive-day-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.home-tab-view--archive .calendar-day.future::before {
  background: linear-gradient(135deg, transparent 45%, rgba(100, 117, 109, 0.18) 46% 54%, transparent 55%);
  inset: 0;
}

.home-tab-view--archive .calendar-start {
  background: var(--home-primary-bg);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--home-primary-shadow);
  color: white;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1rem, 3.6vw, 1.18rem);
  font-weight: 850;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: transform 170ms var(--premium-ease), box-shadow 170ms var(--premium-ease), filter 170ms var(--premium-ease);
}

.home-tab-view--archive .calendar-start:hover,
.home-tab-view--archive .calendar-start:focus-visible {
  box-shadow: var(--home-primary-shadow-hover);
  filter: saturate(1.03);
  transform: translateY(-1px);
}

.home-tab-view--archive .calendar-start:active {
  transform: translateY(1px) scale(0.99);
}

body[data-theme="classicWood"] .home-tab-view--archive .calendar-start,
body[data-theme="retro"] .home-tab-view--archive .calendar-start,
body[data-theme="dusk"] .home-tab-view--archive .calendar-start {
  color: #08110e;
  text-shadow: none;
}

@media (max-height: 760px) {
  .archive-summary {
    gap: 5px;
    padding: 8px 10px;
  }

  .archive-progress {
    height: 6px;
  }

  .home-tab-view--archive .calendar-day.completed::after {
    right: 6px;
    top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-progress span,
  .home-tab-view--archive .calendar-day,
  .home-tab-view--archive .calendar-start,
  .home-tab-view--archive .calendar-head .icon-button {
    transition: none;
  }
}

/* Special hub polish: six-card mode hub with two planned placeholders. */
body {
  --special-hub-surface:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.64), transparent 58%),
    rgba(255, 255, 255, 0.54);
  --special-card-bg:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--special-card-accent, var(--accent)) 12%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(247, 252, 249, 0.52)),
    rgba(247, 252, 249, 0.78);
  --special-card-border: rgba(190, 213, 202, 0.78);
  --special-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 12px 24px rgba(33, 58, 48, 0.09);
  --special-card-hover-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 32px rgba(33, 58, 48, 0.13),
    0 0 0 5px color-mix(in srgb, var(--special-card-accent, var(--accent)) 10%, transparent);
  --special-card-muted: rgba(38, 55, 47, 0.58);
}

body[data-theme="dusk"] {
  --special-hub-surface: rgba(27, 39, 35, 0.68);
  --special-card-bg:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--special-card-accent, var(--accent)) 12%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(27, 39, 35, 0.78);
  --special-card-border: rgba(88, 117, 106, 0.58);
  --special-card-muted: rgba(226, 240, 233, 0.6);
}

body[data-theme="classicWood"],
body[data-theme="retro"] {
  --special-hub-surface: var(--home-card-bg);
  --special-card-bg: var(--home-card-bg);
  --special-card-border: var(--home-card-border);
  --special-card-shadow: var(--home-card-shadow);
  --special-card-hover-shadow: var(--home-card-hover-shadow);
  --special-card-muted: var(--home-chip-text);
}

.home-tab-view--special {
  gap: clamp(10px, 1.3dvh, 14px);
  grid-template-rows: auto minmax(0, 1fr);
}

.section-head--special {
  align-items: center;
  background: var(--special-hub-surface);
  border: 1px solid var(--premium-border-soft);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 12px 26px rgba(33, 58, 48, 0.08);
  margin-bottom: 0;
  padding: 10px 12px;
}

.section-head--special > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.section-head--special h2 {
  color: var(--premium-text-primary);
  font-size: clamp(1.1rem, 4.2vw, 1.38rem);
  font-weight: 850;
  letter-spacing: -0.055em;
}

.section-head--special p {
  color: var(--premium-text-secondary);
  font-size: 0.7rem;
  font-weight: 720;
  margin: 0;
}

.section-head--special .event-timer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36)),
    color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--premium-border-soft);
  color: var(--premium-text-secondary);
  font-size: 0.65rem;
  min-height: 28px;
  padding-inline: 10px;
}

.home-tab-view--special .special-mode-grid {
  display: grid;
  gap: clamp(8px, 1.05dvh, 11px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  margin: 0;
  min-height: 0;
  overflow: visible;
  padding: 0;
}

.home-tab-view--special .special-mode-button {
  align-content: center;
  animation: special-card-enter 360ms var(--premium-ease) both;
  animation-delay: calc(var(--special-card-index, 0) * 34ms);
  aspect-ratio: auto;
  background: var(--special-card-bg);
  border: 1px solid var(--special-card-border);
  border-radius: 21px;
  box-shadow: var(--special-card-shadow);
  color: var(--premium-text-primary);
  cursor: pointer;
  display: grid;
  gap: 5px;
  grid-template-rows: auto auto auto;
  isolation: isolate;
  justify-items: start;
  min-height: 0;
  overflow: hidden;
  padding: clamp(10px, 1.5dvh, 14px);
  position: relative;
  text-align: left;
  transition: background 170ms var(--premium-ease), border-color 170ms var(--premium-ease), box-shadow 170ms var(--premium-ease), filter 170ms var(--premium-ease), opacity 170ms var(--premium-ease), transform 170ms var(--premium-ease);
}

.home-tab-view--special .special-mode-button::before,
.home-tab-view--special .special-mode-button::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.home-tab-view--special .special-mode-button::before {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--special-card-accent, var(--accent)) 22%, transparent), transparent 34%);
  inset: 0;
  opacity: 0.72;
}

.home-tab-view--special .special-mode-button::after {
  background: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.32), transparent 64%);
  height: 100%;
  left: -70%;
  top: 0;
  transform: skewX(-18deg);
  width: 42%;
}

.home-tab-view--special .special-mode-button:not(:disabled):hover,
.home-tab-view--special .special-mode-button:not(:disabled):focus-visible {
  border-color: color-mix(in srgb, var(--special-card-accent, var(--accent)) 48%, var(--special-card-border));
  box-shadow: var(--special-card-hover-shadow);
  transform: translateY(-2px);
}

.home-tab-view--special .special-mode-button:not(:disabled):hover::after,
.home-tab-view--special .special-mode-button:not(:disabled):focus-visible::after {
  animation: special-card-shine 760ms var(--premium-ease);
}

.home-tab-view--special .special-mode-button:active {
  transform: translateY(1px) scale(0.99);
}

.home-tab-view--special .special-mode-button.active {
  border-color: color-mix(in srgb, var(--special-card-accent, var(--accent)) 62%, white);
  box-shadow:
    var(--special-card-hover-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--special-card-accent, var(--accent)) 22%, transparent);
}

.special-mode-button__badge {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28)),
    color-mix(in srgb, var(--special-card-accent, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--special-card-accent, var(--accent)) 24%, var(--special-card-border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--special-card-accent, var(--accent)) 58%, var(--premium-text-primary));
  font-size: 0.56rem;
  font-weight: 840;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.special-mode-button__icon {
  align-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.54), transparent 38%),
    color-mix(in srgb, var(--special-card-accent, var(--accent)) 16%, rgba(255, 255, 255, 0.58));
  border: 1px solid color-mix(in srgb, var(--special-card-accent, var(--accent)) 24%, var(--special-card-border));
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
  color: var(--special-card-accent, var(--accent));
  display: inline-grid;
  height: clamp(34px, 5.2dvh, 42px);
  place-items: center;
  width: clamp(34px, 5.2dvh, 42px);
}

.home-tab-view--special .special-mode-button svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  width: 22px;
}

.home-tab-view--special .special-mode-button strong {
  color: var(--premium-text-primary);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(0.86rem, 2.8dvh, 1.02rem);
  font-weight: 820;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.home-tab-view--special .special-mode-button small {
  color: var(--special-card-muted);
  font-size: clamp(0.64rem, 1.9dvh, 0.72rem);
  font-weight: 690;
  line-height: 1.15;
}

.home-tab-view--special .special-mode-button[data-special-state="soon"],
.home-tab-view--special .special-mode-button[data-special-state="locked"] {
  cursor: not-allowed;
  filter: saturate(0.76);
  opacity: 0.72;
}

.home-tab-view--special .special-mode-button[data-special-state="soon"] .special-mode-button__icon,
.home-tab-view--special .special-mode-button[data-special-state="locked"] .special-mode-button__icon {
  color: var(--premium-text-secondary);
}

.home-tab-view--special .special-mode-button[data-special-state="locked"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(239, 245, 242, 0.42)),
    rgba(238, 244, 241, 0.58);
}

body[data-theme="classicWood"] .home-tab-view--special .special-mode-button strong {
  color: #fff0c8;
}

body[data-theme="retro"] .home-tab-view--special .special-mode-button strong,
body[data-theme="dusk"] .home-tab-view--special .special-mode-button strong {
  color: var(--ink);
}

@keyframes special-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes special-card-shine {
  from {
    left: -70%;
  }
  to {
    left: 118%;
  }
}

@media (max-height: 760px) {
  .home-tab-view--special {
    gap: 8px;
  }

  .section-head--special {
    padding: 8px 10px;
  }

  .section-head--special p {
    display: none;
  }

  .home-tab-view--special .special-mode-button {
    border-radius: 18px;
    gap: 4px;
    padding: 9px;
  }

  .special-mode-button__badge {
    padding: 4px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-tab-view--special .special-mode-button {
    animation: none;
    transition: none;
  }

  .home-tab-view--special .special-mode-button:not(:disabled):hover::after,
  .home-tab-view--special .special-mode-button:not(:disabled):focus-visible::after {
    animation: none;
  }
}

/* Achievements tab: compact trophy collection with data-backed progress. */
.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bottom-nav__item strong {
  font-size: 0.56rem;
}

.home-tab-view--achievements {
  align-content: start;
  display: grid;
  gap: clamp(8px, 1.1dvh, 12px);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.section-head--achievements {
  align-items: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.62), transparent 58%),
    rgba(255, 255, 255, 0.54);
  border: 1px solid var(--premium-border-soft);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 12px 26px rgba(33, 58, 48, 0.08);
  margin-bottom: 0;
  padding: 10px 12px;
}

.section-head--achievements > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.section-head--achievements h2 {
  color: var(--premium-text-primary);
  font-size: clamp(1.1rem, 4.2vw, 1.38rem);
  font-weight: 850;
  letter-spacing: -0.055em;
}

.section-head--achievements p {
  color: var(--premium-text-secondary);
  font-size: 0.7rem;
  font-weight: 720;
  margin: 0;
}

.achievement-summary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.34)),
    color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid var(--premium-border-soft);
  border-radius: 19px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: grid;
  gap: 7px;
  padding: 10px 12px;
}

.achievement-summary > div:first-child {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.achievement-summary span {
  color: var(--premium-text-secondary);
  font-size: 0.68rem;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-summary strong {
  color: var(--premium-text-primary);
  font-size: 0.76rem;
  font-weight: 820;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-progress,
.achievement-card__bar {
  background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.58));
  border-radius: 999px;
  overflow: hidden;
}

.achievement-progress {
  height: 7px;
}

.achievement-progress span,
.achievement-card__bar span {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, white), var(--accent));
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 260ms var(--premium-ease);
  width: var(--achievement-progress, 0%);
}

.achievement-filter-row {
  display: flex;
  gap: 7px;
  margin-inline: -2px;
  overflow-x: auto;
  padding: 1px 2px 5px;
  scrollbar-width: none;
}

.achievement-filter-row::-webkit-scrollbar {
  display: none;
}

.achievement-filter {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.34)),
    rgba(255, 255, 255, 0.48);
  border: 1px solid var(--premium-border-soft);
  border-radius: 999px;
  color: var(--premium-text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 780;
  min-height: 30px;
  padding: 0 11px;
  transition: background 170ms var(--premium-ease), border-color 170ms var(--premium-ease), color 170ms var(--premium-ease), transform 170ms var(--premium-ease);
}

.achievement-filter[aria-pressed="true"],
.achievement-filter:hover,
.achievement-filter:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, white);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--premium-border-soft));
  color: var(--premium-text-primary);
  transform: translateY(-1px);
}

.achievement-grid {
  display: grid;
  gap: clamp(8px, 1.05dvh, 11px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow-y: auto;
  padding: 1px 2px 8px;
  scrollbar-width: none;
}

.achievement-grid::-webkit-scrollbar {
  display: none;
}

.achievement-card {
  --achievement-tier: var(--accent);
  animation: achievement-card-enter 320ms var(--premium-ease) both;
  animation-delay: calc(var(--achievement-index, 0) * 24ms);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--achievement-tier) 14%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(247, 252, 249, 0.52)),
    rgba(247, 252, 249, 0.78);
  border: 1px solid rgba(190, 213, 202, 0.78);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 12px 24px rgba(33, 58, 48, 0.08);
  display: grid;
  gap: 7px;
  min-height: clamp(118px, 18dvh, 142px);
  overflow: hidden;
  padding: 11px;
  position: relative;
  transition: border-color 170ms var(--premium-ease), box-shadow 170ms var(--premium-ease), transform 170ms var(--premium-ease), opacity 170ms var(--premium-ease);
}

.achievement-card:hover {
  border-color: color-mix(in srgb, var(--achievement-tier) 42%, rgba(190, 213, 202, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 16px 32px rgba(33, 58, 48, 0.12);
  transform: translateY(-1px);
}

.achievement-card__icon {
  align-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.54), transparent 38%),
    color-mix(in srgb, var(--achievement-tier) 16%, rgba(255, 255, 255, 0.58));
  border: 1px solid color-mix(in srgb, var(--achievement-tier) 24%, rgba(190, 213, 202, 0.78));
  border-radius: 15px;
  color: var(--achievement-tier);
  display: inline-grid;
  height: 38px;
  place-items: center;
  width: 38px;
}

.achievement-card__icon svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  width: 21px;
}

.achievement-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.achievement-card__tier {
  color: color-mix(in srgb, var(--achievement-tier) 58%, var(--premium-text-primary));
  font-size: 0.56rem;
  font-weight: 840;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievement-card strong {
  color: var(--premium-text-primary);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(0.84rem, 2.55dvh, 0.98rem);
  font-weight: 820;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.achievement-card small {
  color: var(--premium-text-secondary);
  font-size: 0.66rem;
  font-weight: 680;
  line-height: 1.15;
}

.achievement-card__bar {
  height: 6px;
}

.achievement-card--bronze {
  --achievement-tier: #c58a58;
}

.achievement-card--silver {
  --achievement-tier: #96aaa4;
}

.achievement-card--gold {
  --achievement-tier: #d6b75a;
}

.achievement-card--unlocked {
  border-color: color-mix(in srgb, var(--achievement-tier) 46%, rgba(190, 213, 202, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 28px color-mix(in srgb, var(--achievement-tier) 13%, transparent),
    0 0 0 5px color-mix(in srgb, var(--achievement-tier) 9%, transparent);
}

.achievement-card--unlocked::after {
  border: solid var(--achievement-tier);
  border-width: 0 2px 2px 0;
  content: "";
  height: 8px;
  position: absolute;
  right: 12px;
  top: 13px;
  transform: rotate(45deg);
  width: 5px;
}

.achievement-card--locked {
  filter: saturate(0.78);
  opacity: 0.68;
}

.achievement-card--locked .achievement-card__icon {
  color: var(--premium-text-secondary);
}

body[data-theme="dusk"] .achievement-card,
body[data-theme="dusk"] .section-head--achievements,
body[data-theme="dusk"] .achievement-summary {
  background: rgba(27, 39, 35, 0.72);
  border-color: rgba(88, 117, 106, 0.58);
}

body[data-theme="classicWood"] .achievement-card strong,
body[data-theme="retro"] .achievement-card strong,
body[data-theme="dusk"] .achievement-card strong {
  color: var(--ink);
}

@keyframes achievement-card-enter {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-height: 760px) {
  .section-head--achievements p {
    display: none;
  }

  .achievement-summary {
    gap: 5px;
    padding: 8px 10px;
  }

  .achievement-filter {
    min-height: 28px;
  }

  .achievement-card {
    border-radius: 17px;
    min-height: 104px;
    padding: 9px;
  }

  .achievement-card__icon {
    height: 34px;
    width: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-card {
    animation: none;
    transition: none;
  }

  .achievement-progress span,
  .achievement-card__bar span,
  .achievement-filter {
    transition: none;
  }
}

/* Achievements trophy cabinet pass: Daily/Story carousels and Meisterschaft medals. */
.home-tab-view--achievements {
  gap: clamp(8px, 1.1dvh, 12px);
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.section-head--achievements {
  background: var(--special-hub-surface);
  border: 1px solid var(--premium-border-soft);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 12px 26px rgba(33, 58, 48, 0.08);
  margin-bottom: 0;
  padding: 10px 12px;
}

.section-head--achievements > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.section-head--achievements h2 {
  color: var(--premium-text-primary);
  font-size: clamp(1.1rem, 4.2vw, 1.38rem);
  font-weight: 850;
  letter-spacing: -0.055em;
}

.section-head--achievements p {
  color: var(--premium-text-secondary);
  font-size: 0.7rem;
  font-weight: 720;
  margin: 0;
}

.section-head--achievements .event-timer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36)),
    color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--premium-border-soft);
  color: var(--premium-text-secondary);
  font-size: 0.65rem;
  min-height: 28px;
  padding-inline: 10px;
}

.achievement-summary {
  border-radius: 18px;
  gap: 7px;
  padding: 9px 11px;
}

.achievement-filter-row {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  margin-inline: 0;
  padding: 1px 0 3px;
  width: 100%;
}

.achievement-filter {
  display: grid;
  flex: initial;
  min-height: 31px;
  min-width: 0;
  padding-inline: 6px;
  place-items: center;
  text-align: center;
  width: 100%;
}

.achievement-content {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 1px 0 2px;
}

.achievement-content--daily,
.achievement-content--story {
  align-content: stretch;
}

.trophy-carousel {
  --trophy-metal: color-mix(in srgb, var(--accent) 58%, #eaf7f0);
  --trophy-deep: color-mix(in srgb, var(--accent) 70%, #2f7e62);
  --trophy-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  align-content: start;
  display: grid;
  gap: clamp(7px, 1dvh, 10px);
  grid-template-rows: auto auto;
  height: 100%;
  min-height: 0;
}

.achievement-content--daily .trophy-carousel,
.achievement-content--story .trophy-carousel {
  grid-template-rows: minmax(0, 1fr) auto;
}

.trophy-carousel--daily {
  --trophy-metal: color-mix(in srgb, var(--accent) 58%, #eaf7f0);
  --trophy-deep: color-mix(in srgb, var(--accent) 70%, #2f7e62);
  --trophy-glow: color-mix(in srgb, var(--accent) 18%, transparent);
}

.trophy-carousel--story {
  --trophy-metal: color-mix(in srgb, #d5b56a 44%, var(--accent));
  --trophy-deep: color-mix(in srgb, #8f6d2a 46%, var(--accent));
  --trophy-glow: rgba(213, 181, 106, 0.16);
}

.trophy-stage {
  background:
    radial-gradient(ellipse at 50% 64%, var(--trophy-glow), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)),
    rgba(248, 252, 249, 0.46);
  border: 1px solid var(--premium-border-soft);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 16px 32px rgba(33, 58, 48, 0.09);
  cursor: grab;
  min-height: clamp(208px, 31dvh, 268px);
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  user-select: none;
}

.trophy-stage--daily,
.trophy-stage--story {
  background:
    radial-gradient(ellipse at 50% 47%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    radial-gradient(ellipse at 50% 68%, rgba(33, 58, 48, 0.07), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18)),
    rgba(248, 252, 249, 0.42);
  min-height: clamp(330px, 50dvh, 470px);
}

.trophy-stage--daily::after,
.trophy-stage--story::after {
  background:
    linear-gradient(90deg, rgba(248, 252, 249, 0.88), transparent 20%, transparent 80%, rgba(248, 252, 249, 0.88));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 140;
}

.trophy-stage.dragging {
  cursor: grabbing;
}

.trophy-stage.dragging .trophy-item {
  transition: none;
}

.trophy-stage::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(ellipse at 50% 100%, rgba(33, 58, 48, 0.1), transparent 48%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.trophy-item {
  align-items: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--trophy-metal) 30%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 252, 249, 0.54)),
    rgba(247, 252, 249, 0.72);
  border: 1px solid color-mix(in srgb, var(--trophy-metal) 28%, var(--premium-border-soft));
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 18px 32px rgba(33, 58, 48, 0.11);
  color: var(--premium-text-primary);
  display: grid;
  gap: 6px;
  justify-items: center;
  left: 50%;
  min-height: clamp(152px, 23dvh, 188px);
  opacity: var(--trophy-opacity);
  padding: 11px 10px 12px;
  position: absolute;
  text-align: center;
  top: 50%;
  filter: blur(var(--trophy-blur, 0));
  transform: translate(-50%, -50%) perspective(720px) translateX(var(--trophy-x)) rotateY(var(--trophy-rotate, 0deg)) scale(var(--trophy-scale));
  transition:
    transform 320ms var(--premium-ease),
    opacity 320ms var(--premium-ease),
    filter 320ms var(--premium-ease),
    box-shadow 220ms var(--premium-ease),
    border-color 220ms var(--premium-ease);
  width: clamp(116px, 33vw, 152px);
  z-index: var(--trophy-z);
}

.trophy-item--image {
  background: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  min-height: clamp(220px, 35dvh, 340px);
  overflow: visible;
  padding: 0;
  width: clamp(190px, 58vw, 292px);
}

.trophy-item--image[aria-selected="true"] {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.trophy-image-wrap {
  align-items: center;
  display: grid;
  height: 100%;
  justify-items: center;
  overflow: visible;
  pointer-events: none;
  position: relative;
  width: 100%;
}

.trophy-image-wrap::before {
  content: none;
}

.trophy-item--shine .trophy-image-wrap::after {
  content: none;
}

.trophy-image {
  display: block;
  filter:
    drop-shadow(0 22px 24px color-mix(in srgb, var(--trophy-deep) 16%, transparent))
    drop-shadow(0 5px 8px rgba(33, 58, 48, 0.1));
  height: min(100%, clamp(240px, 40dvh, 370px));
  max-width: 100%;
  object-fit: contain;
  transform: translateZ(0);
  user-select: none;
  width: auto;
}

.trophy-item--image[aria-selected="true"] .trophy-image {
  filter:
    drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 18%, transparent))
    drop-shadow(0 30px 32px color-mix(in srgb, var(--trophy-deep) 22%, transparent))
    drop-shadow(0 8px 14px rgba(33, 58, 48, 0.12));
}

.trophy-item--shine .trophy-image {
  animation: trophy-image-shine 820ms var(--premium-ease) both;
}

@keyframes trophy-image-shine {
  from {
    filter:
      drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 10%, transparent))
      drop-shadow(0 24px 28px color-mix(in srgb, var(--trophy-deep) 16%, transparent))
      drop-shadow(0 5px 8px rgba(33, 58, 48, 0.1));
    transform: translateZ(0) scale(0.992);
  }

  38% {
    filter:
      drop-shadow(0 0 34px color-mix(in srgb, var(--accent) 26%, transparent))
      drop-shadow(0 30px 34px color-mix(in srgb, var(--trophy-deep) 22%, transparent))
      drop-shadow(0 8px 14px rgba(33, 58, 48, 0.12));
    transform: translateZ(0) scale(1.012);
  }

  to {
    filter:
      drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 18%, transparent))
      drop-shadow(0 30px 32px color-mix(in srgb, var(--trophy-deep) 22%, transparent))
      drop-shadow(0 8px 14px rgba(33, 58, 48, 0.12));
    transform: translateZ(0) scale(1);
  }
}

.trophy-item[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--trophy-metal) 54%, white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 20px 42px color-mix(in srgb, var(--trophy-deep) 15%, transparent),
    0 0 0 5px color-mix(in srgb, var(--trophy-metal) 10%, transparent);
}

.trophy-card__label {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.36)),
    color-mix(in srgb, var(--trophy-metal) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--trophy-metal) 28%, var(--premium-border-soft));
  border-radius: 999px;
  color: color-mix(in srgb, var(--trophy-deep) 68%, var(--premium-text-primary));
  font-size: 0.54rem;
  font-weight: 840;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.trophy-shape {
  display: grid;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--trophy-deep) 18%, transparent));
  justify-items: center;
  margin-block: 1px 2px;
  transform: scale(calc(0.94 + var(--trophy-power, 0.5) * 0.08));
  transform-origin: 50% 100%;
}

.trophy-shape__cup {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(150deg, color-mix(in srgb, var(--trophy-metal) 82%, white), var(--trophy-deep));
  border: 1px solid color-mix(in srgb, var(--trophy-deep) 28%, white);
  border-radius: 16px 16px 13px 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -10px 18px rgba(0, 0, 0, 0.08);
  height: 54px;
  position: relative;
  width: 62px;
}

.trophy-shape__cup::before,
.trophy-shape__cup::after {
  border: 5px solid color-mix(in srgb, var(--trophy-metal) 70%, white);
  border-radius: 999px;
  content: "";
  height: 24px;
  position: absolute;
  top: 8px;
  width: 24px;
  z-index: -1;
}

.trophy-shape__cup::before {
  left: -17px;
}

.trophy-shape__cup::after {
  right: -17px;
}

.trophy-shape__stem {
  background: linear-gradient(180deg, var(--trophy-metal), var(--trophy-deep));
  border-radius: 999px;
  height: 20px;
  margin-top: -1px;
  width: 14px;
}

.trophy-shape__base {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--trophy-metal) 76%, white), var(--trophy-deep));
  border: 1px solid color-mix(in srgb, var(--trophy-deep) 30%, white);
  border-radius: 9px 9px 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  height: 16px;
  margin-top: -1px;
  width: 60px;
}

.trophy-item strong {
  color: var(--premium-text-primary);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(0.9rem, 2.55dvh, 1rem);
  font-weight: 840;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.trophy-item small,
.trophy-carousel__meta small,
.medal-card small {
  color: var(--premium-text-secondary);
  font-size: 0.65rem;
  font-weight: 690;
  line-height: 1.18;
}

.trophy-carousel__meta {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.28)),
    rgba(247, 252, 249, 0.46);
  border: 1px solid var(--premium-border-soft);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px 10px;
  text-align: center;
}

.trophy-carousel__meta span {
  color: color-mix(in srgb, var(--accent) 58%, var(--premium-text-secondary));
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trophy-carousel__meta strong {
  color: var(--premium-text-primary);
  font-size: 0.86rem;
  font-weight: 830;
  letter-spacing: -0.04em;
}

.trophy-empty {
  align-content: center;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%),
    rgba(248, 252, 249, 0.5);
  border: 1px solid var(--premium-border-soft);
  border-radius: 24px;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: clamp(230px, 36dvh, 312px);
  padding: 18px;
  text-align: center;
}

.trophy-empty__icon {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 14%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--premium-border-soft));
  border-radius: 18px;
  color: var(--accent);
  display: grid;
  height: 48px;
  place-items: center;
  width: 48px;
}

.trophy-empty__icon svg,
.medal-card__icon svg {
  fill: none;
  height: 23px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  width: 23px;
}

.trophy-empty strong {
  color: var(--premium-text-primary);
  font-size: 0.96rem;
  font-weight: 830;
  letter-spacing: -0.04em;
}

.trophy-empty small {
  color: var(--premium-text-secondary);
  font-size: 0.7rem;
  font-weight: 690;
}

.medal-grid {
  display: grid;
  gap: clamp(9px, 1.15dvh, 12px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow-y: auto;
  padding: 1px 2px 8px;
  scrollbar-width: none;
}

.medal-grid::-webkit-scrollbar {
  display: none;
}

.medal-card {
  --medal-bronze: #bd8555;
  --medal-silver: #94aaa5;
  --medal-gold: #d2b355;
  --medal-platinum: #cfd9e6;
  --medal-accent: var(--accent);
  --medal-slot-size: clamp(74px, 18vw, 88px);
  --medal-header-height: 114px;
  --medal-tier-height: 44px;
  --medal-title-height: 2.58rem;
  --medal-status-height: 0.8rem;
  --medal-detail-height: 2.48rem;
  --medal-text-gap: 5px;
  --medal-progress-gap: 11px;
  --medal-tier-gap: 10px;
  animation: achievement-card-enter 320ms var(--premium-ease) both;
  animation-delay: calc(var(--medal-index, 0) * 28ms);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--medal-accent) 13%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(247, 252, 249, 0.5)),
    rgba(247, 252, 249, 0.74);
  border: 1px solid color-mix(in srgb, var(--medal-accent) 16%, var(--premium-border-soft));
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 12px 24px rgba(33, 58, 48, 0.08);
  display: grid;
  grid-template-rows: var(--medal-header-height) var(--medal-progress-gap) 7px var(--medal-tier-gap) var(--medal-tier-height);
  min-height: calc(var(--medal-header-height) + var(--medal-progress-gap) + 7px + var(--medal-tier-gap) + var(--medal-tier-height) + 24px);
  padding: 12px;
  transition: border-color 170ms var(--premium-ease), box-shadow 170ms var(--premium-ease), transform 170ms var(--premium-ease), opacity 170ms var(--premium-ease);
}

.medal-card:hover,
.medal-card:focus-within {
  border-color: color-mix(in srgb, var(--medal-accent) 36%, var(--premium-border-soft));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 16px 30px rgba(33, 58, 48, 0.11);
  transform: translateY(-1px);
}

.medal-card--bronze {
  --medal-accent: #bd8555;
}

.medal-card--silver {
  --medal-accent: #94aaa5;
}

.medal-card--gold {
  --medal-accent: #d2b355;
}

.medal-card--platinum {
  --medal-accent: #cfd9e6;
}

.medal-card--platinum-focus {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.46), transparent 48%),
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--medal-platinum) 24%, transparent), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(245, 250, 249, 0.56)),
    rgba(247, 252, 249, 0.78);
  border-color: color-mix(in srgb, var(--medal-platinum) 42%, var(--premium-border-soft));
}

.medal-card--locked {
  filter: saturate(0.9);
  opacity: 0.82;
}

.medal-card--complete {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 16px 32px color-mix(in srgb, var(--medal-gold) 16%, transparent);
}

.medal-card__hero {
  align-items: start;
  display: grid;
  gap: 9px;
  grid-template-columns: var(--medal-slot-size) minmax(0, 1fr);
  grid-row: 1;
  height: var(--medal-header-height);
  min-width: 0;
}

.medal-card__icon {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--medal-accent);
  display: grid;
  height: var(--medal-slot-size);
  margin-top: 4px;
  place-items: center;
  position: relative;
  width: var(--medal-slot-size);
}

.medal-card__icon img {
  display: block;
  filter:
    drop-shadow(0 12px 14px color-mix(in srgb, var(--medal-accent) 22%, transparent))
    drop-shadow(0 3px 5px rgba(33, 58, 48, 0.1));
  max-height: calc(var(--medal-slot-size) - 4px);
  max-width: calc(var(--medal-slot-size) - 4px);
  object-fit: contain;
}

.medal-card__icon--empty {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.7), transparent 58%),
    color-mix(in srgb, var(--accent) 6%, rgba(255, 255, 255, 0.46));
  border: 1px dashed color-mix(in srgb, var(--accent) 26%, var(--premium-border-soft));
  border-radius: 20px;
}

.medal-card__placeholder {
  align-items: center;
  color: color-mix(in srgb, var(--accent) 54%, var(--premium-text-secondary));
  display: grid;
  opacity: 0.58;
  place-items: center;
}

.medal-card__placeholder svg {
  height: calc(var(--medal-slot-size) * 0.48);
  width: calc(var(--medal-slot-size) * 0.48);
}

.medal-card__body {
  align-content: start;
  display: flex;
  flex-direction: column;
  gap: var(--medal-text-gap);
  height: var(--medal-header-height);
  min-width: 0;
  overflow: hidden;
  padding-top: 2px;
}

.medal-card strong {
  color: var(--premium-text-primary);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(0.8rem, 2.16dvh, 0.92rem);
  font-weight: 820;
  letter-spacing: -0.04em;
  line-height: 1.24;
}

.medal-card__body > strong {
  display: -webkit-box;
  max-height: var(--medal-title-height);
  min-height: var(--medal-title-height);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
}

.medal-card__body span {
  color: color-mix(in srgb, var(--medal-accent) 72%, var(--premium-text-primary));
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: var(--medal-status-height);
  max-height: var(--medal-status-height);
  min-height: var(--medal-status-height);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medal-card__body small {
  color: var(--premium-text-secondary);
  display: -webkit-box;
  font-size: 0.58rem;
  font-weight: 690;
  line-height: 0.78rem;
  max-height: var(--medal-detail-height);
  min-height: var(--medal-detail-height);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.medal-tier-row {
  align-items: stretch;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-row: 5;
  height: var(--medal-tier-height);
}

.medal-tier-row--platinum {
  grid-template-columns: 1fr;
}

.medal-tier {
  align-items: center;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--premium-border-soft);
  border-radius: 999px;
  color: var(--premium-text-secondary);
  display: inline-flex;
  flex: 1;
  font-size: 0.48rem;
  font-weight: 850;
  gap: 3px;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.06em;
  min-height: 0;
  padding: 3px 2px;
  text-align: center;
  text-transform: uppercase;
}

.medal-tier strong,
.medal-tier small {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.medal-tier small {
  display: none;
  font-size: 0.48rem;
  font-weight: 760;
  letter-spacing: 0.01em;
  text-transform: none;
}

.medal-tier img {
  display: block;
  height: 14px;
  object-fit: contain;
  width: 14px;
}

.medal-tier--bronze.achieved {
  background: rgba(189, 133, 85, 0.16);
  border-color: rgba(189, 133, 85, 0.42);
  color: #9b663d;
}

.medal-tier--silver.achieved {
  background: rgba(148, 170, 165, 0.18);
  border-color: rgba(148, 170, 165, 0.46);
  color: #6e817d;
}

.medal-tier--gold.achieved {
  background: rgba(210, 179, 85, 0.18);
  border-color: rgba(210, 179, 85, 0.48);
  color: #9d7a20;
}

.medal-tier--platinum {
  flex-direction: column;
  gap: 2px;
  border-radius: 16px;
  font-size: 0.58rem;
  min-height: 0;
  padding-block: 4px;
}

.medal-tier--platinum small {
  display: block;
}

.medal-tier--platinum.achieved {
  background: rgba(207, 217, 230, 0.2);
  border-color: rgba(207, 217, 230, 0.58);
  color: #637386;
}

.medal-tier--platinum img {
  height: 20px;
  width: 20px;
}

.medal-tier.next {
  background: color-mix(in srgb, var(--medal-accent) 13%, white);
  border-color: color-mix(in srgb, var(--medal-accent) 42%, var(--premium-border-soft));
  color: color-mix(in srgb, var(--medal-accent) 72%, var(--premium-text-primary));
}

.medal-progress {
  align-self: center;
  background: color-mix(in srgb, var(--medal-accent) 9%, rgba(255, 255, 255, 0.56));
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(33, 58, 48, 0.08);
  grid-row: 3;
  height: 7px;
  overflow: hidden;
}

.medal-progress span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--medal-accent) 58%, white), var(--medal-accent));
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 260ms var(--premium-ease);
  width: var(--medal-progress, 0%);
}

body[data-theme="dusk"] .trophy-stage,
body[data-theme="dusk"] .trophy-item,
body[data-theme="dusk"] .trophy-carousel__meta,
body[data-theme="dusk"] .trophy-empty,
body[data-theme="dusk"] .medal-card,
body[data-theme="dusk"] .achievement-summary {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 54%),
    rgba(27, 39, 35, 0.72);
  border-color: rgba(88, 117, 106, 0.58);
}

body[data-theme="dusk"] .trophy-item--image,
body[data-theme="classicWood"] .trophy-item--image,
body[data-theme="retro"] .trophy-item--image,
.trophy-item--image {
  background: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: 0;
}

body[data-theme="classicWood"] .trophy-item strong,
body[data-theme="classicWood"] .trophy-carousel__meta strong,
body[data-theme="classicWood"] .trophy-empty strong,
body[data-theme="classicWood"] .medal-card strong,
body[data-theme="retro"] .trophy-item strong,
body[data-theme="retro"] .trophy-carousel__meta strong,
body[data-theme="retro"] .trophy-empty strong,
body[data-theme="retro"] .medal-card strong,
body[data-theme="dusk"] .trophy-item strong,
body[data-theme="dusk"] .trophy-carousel__meta strong,
body[data-theme="dusk"] .trophy-empty strong,
body[data-theme="dusk"] .medal-card strong {
  color: var(--ink);
}

@media (max-height: 760px) {
  .section-head--achievements {
    padding: 8px 10px;
  }

  .section-head--achievements p {
    display: none;
  }

  .trophy-stage {
    min-height: 190px;
  }

  .trophy-stage--story {
    min-height: 248px;
  }

  .trophy-item {
    min-height: 138px;
    width: clamp(106px, 31vw, 136px);
  }

  .trophy-item--image {
    min-height: 210px;
    width: clamp(168px, 52vw, 244px);
  }

  .trophy-image {
    height: min(100%, clamp(188px, 31dvh, 250px));
  }

  .trophy-shape__cup {
    height: 46px;
    width: 54px;
  }

  .trophy-shape__base {
    width: 52px;
  }

  .medal-card {
    --medal-slot-size: 62px;
    --medal-header-height: 100px;
    --medal-tier-height: 38px;
    --medal-title-height: 2.22rem;
    --medal-status-height: 0.72rem;
    --medal-detail-height: 2.1rem;
    --medal-text-gap: 3px;
    --medal-progress-gap: 8px;
    --medal-tier-gap: 8px;
    min-height: 171px;
    padding: 10px;
  }

  .medal-card__body > strong {
    max-height: var(--medal-title-height);
    min-height: var(--medal-title-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trophy-item,
  .medal-card,
  .medal-progress span {
    animation: none;
    transition: none;
  }
}

/*
 * --------------------------------------------------------------------------
 * Gridflow Game Shell — Mobile App Embed
 * Ensures the in-game view always renders inside the same centered shell
 * as the home view, regardless of legacy desktop media queries above.
 * --------------------------------------------------------------------------
 */
.game-screen {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  height: 100dvh !important;
  justify-items: center !important;
  margin: 0 auto !important;
  max-width: min(100vw, 1440px) !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  padding: clamp(10px, 2dvh, 18px) !important;
  width: 100% !important;
}

.game-shell {
  align-content: stretch;
  background:
    radial-gradient(circle at 50% 12%, var(--accent-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 249, 246, 0.66));
  border: 1px solid rgba(209, 225, 216, 0.9);
  border-radius: 34px;
  box-shadow: 0 24px 58px rgba(28, 54, 45, 0.13);
  display: grid;
  gap: clamp(7px, 1.1dvh, 11px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: calc(100dvh - clamp(20px, 4dvh, 36px));
  max-height: 920px;
  max-width: 460px;
  overflow: hidden;
  padding: clamp(12px, 1.6dvh, 18px);
  position: relative;
  width: min(100%, 460px);
}

/*
 * Shared global app top-bar — appears at the top of both .home-shell and .game-shell.
 * Carries logo, brand wordmark and the music/sound toggles, so the global header
 * is persistent when the user is in a game.
 */
.app-topbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 44px;
  position: relative;
  z-index: 40;
}

.app-topbar .home-brand {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.app-topbar__brand {
  color: var(--ink);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.1rem, 2.6dvh, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

.app-topbar .menu-toggles {
  align-items: center;
  background: rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  box-shadow: none;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  gap: 4px;
  overflow: visible;
  padding: 3px;
  position: static;
  right: auto;
  top: auto;
  z-index: 45;
}

.app-topbar .menu-toggles .icon-toggle {
  background: transparent;
  border: 0;
  box-shadow: none;
  height: 32px;
  min-height: 32px;
  width: 32px;
}

.app-topbar .menu-toggles .icon-toggle:hover,
.app-topbar .menu-toggles .icon-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.62);
  outline: none;
}

.app-topbar .menu-toggles .volume-control {
  min-height: 32px;
  position: relative;
  z-index: 45;
}

.app-topbar .menu-toggles .volume-popover {
  top: calc(100% + 6px);
}

body[data-theme="dusk"] .app-topbar .menu-toggles {
  background: rgba(34, 44, 41, 0.6);
}

body[data-theme="classicWood"] .app-topbar .menu-toggles {
  background: rgba(64, 28, 12, 0.42);
}

body[data-theme="retro"] .app-topbar .menu-toggles {
  background: rgba(11, 16, 28, 0.62);
}

.game-subheader {
  border-top: 1px solid rgba(207, 221, 213, 0.55);
  padding-top: clamp(6px, 1dvh, 9px);
}

body[data-theme="dusk"] .game-subheader { border-top-color: rgba(76, 102, 92, 0.45); }
body[data-theme="classicWood"] .game-subheader { border-top-color: rgba(115, 52, 23, 0.5); }
body[data-theme="retro"] .game-subheader { border-top-color: rgba(0, 216, 255, 0.22); }

.game-topbar__mode {
  color: var(--ink);
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1rem, 2.2dvh, 1.18rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.game-shell::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.9), transparent 16%),
    radial-gradient(circle at 84% 14%, var(--accent-glow), transparent 20%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.36), transparent 42%, rgba(108, 205, 164, 0.06));
  content: "";
  inset: 0;
  opacity: 0.78;
  pointer-events: none;
  position: absolute;
}

.game-shell > * { position: relative; z-index: 1; }

.game-topbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 44px;
}

.game-topbar__title {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.game-topbar__title .eyebrow {
  color: var(--accent-ink);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin: 0;
}

.game-topbar__title h1 {
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 2.4dvh, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.game-topbar__actions {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-self: end;
}

.game-iconbutton {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 250, 247, 0.56)),
    var(--panel-soft);
  border: 1px solid rgba(212, 225, 218, 0.9);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(33, 58, 48, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  width: 40px;
}

.game-iconbutton:hover,
.game-iconbutton:focus-visible {
  border-color: var(--accent-line);
  outline: none;
  transform: translateY(-1px);
}

.game-iconbutton svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.game-status {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-height: 0;
}

.status-chip {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.92);
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(33, 58, 48, 0.06);
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 0;
  padding: clamp(6px, 1dvh, 10px) 10px;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.status-chip[hidden],
.status-chip.status-chip--hidden { display: none !important; }

.status-chip span {
  color: var(--muted);
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.status-chip strong {
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(0.95rem, 2dvh, 1.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.status-chip--primary strong {
  font-size: clamp(1.15rem, 2.6dvh, 1.4rem);
  color: var(--accent-ink);
}

.status-chip.timer-low {
  border-color: rgba(199, 123, 103, 0.5);
  box-shadow: inset 0 0 0 1px rgba(199, 123, 103, 0.16);
}

.status-chip.timer-low strong { color: var(--invalid); }

.game-stage {
  align-items: center;
  display: grid;
  justify-items: center;
  min-height: 0;
  width: 100%;
}

.game-shell .board-wrap {
  background: transparent !important;
  border: 0 !important;
  border-radius: calc(var(--radius) + 6px) !important;
  box-shadow: none !important;
  display: grid !important;
  min-height: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  position: relative !important;
  width: min(100%, 60dvh, 420px) !important;
}

.game-tray {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: grid !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.game-shell .tray {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-shell .piece,
.game-shell .piece-slot {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: clamp(72px, 11dvh, 104px);
}

.game-shell .piece {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  border: 1px solid rgba(226, 235, 228, 0.92);
  border-radius: 18px;
  padding: clamp(6px, 1dvh, 10px);
  width: 100%;
}

.game-shell .piece-grid {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(var(--cols), clamp(11px, 1.6dvh, 15px));
  grid-template-rows: repeat(var(--rows), clamp(11px, 1.6dvh, 15px));
}

.game-shell .piece-cell {
  border-radius: 4px;
  height: clamp(11px, 1.6dvh, 15px);
  width: clamp(11px, 1.6dvh, 15px);
}

.combo-burst {
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 8;
}

.combo-burst__bubble {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)),
    var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  box-shadow: 0 18px 40px var(--accent-shadow);
  color: var(--accent-ink);
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 7px 14px;
  white-space: nowrap;
  animation: combo-burst-pop 900ms ease forwards;
}

@keyframes combo-burst-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.92); }
  18% { opacity: 1; transform: translateY(0) scale(1.04); }
  60% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.96); }
}
@media (max-width: 430px) {
  .game-shell {
    border-radius: 28px;
    padding: 12px;
  }
  .game-shell .board-wrap {
    width: min(100%, 56dvh) !important;
  }
}

@media (max-height: 760px) {
  .game-shell {
    gap: 6px;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }
  .game-shell .piece,
  .game-shell .piece-slot {
    min-height: clamp(60px, 9.5dvh, 84px);
  }
  .app-topbar { min-height: 38px; }
  .app-topbar__brand { font-size: clamp(0.98rem, 2.4dvh, 1.18rem); }
}

/* Hide the global menu-decor from the game so the shell looks clean */
body.in-game .menu-decor { display: none; }

/* Dark theme keeps the same compact shell layout. */
body[data-theme="dusk"] .game-shell {
  background:
    radial-gradient(circle at 50% 12%, rgba(139, 215, 189, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(28, 36, 33, 0.92), rgba(20, 27, 25, 0.9));
  border-color: rgba(76, 102, 92, 0.7);
}

body[data-theme="dusk"] .status-chip,
body[data-theme="dusk"] .game-iconbutton,
body[data-theme="dusk"] .game-shell .piece {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    rgba(36, 46, 42, 0.85);
  border-color: rgba(76, 102, 92, 0.7);
  color: var(--ink);
}

body[data-theme="classicWood"] .game-shell {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(224, 145, 72, 0.16), transparent 38%),
    radial-gradient(ellipse at 30% 52%, rgba(71, 28, 12, 0.42), transparent 28%),
    linear-gradient(115deg, rgba(139, 66, 27, 0.32), rgba(82, 38, 16, 0.62));
  border: 1px solid rgba(69, 28, 12, 0.78);
}

body[data-theme="classicWood"] .status-chip,
body[data-theme="classicWood"] .game-iconbutton,
body[data-theme="classicWood"] .game-shell .piece {
  background:
    linear-gradient(135deg, rgba(255, 230, 175, 0.15), transparent 42%),
    repeating-linear-gradient(90deg, rgba(91, 47, 19, 0.12) 0 2px, transparent 2px 36px),
    rgba(104, 50, 24, 0.78);
  border-color: rgba(115, 52, 23, 0.74);
  color: var(--ink);
}

body[data-theme="retro"] .game-shell {
  background:
    radial-gradient(circle at 18% 16%, rgba(0, 216, 255, 0.18), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255, 49, 88, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(11, 16, 28, 0.94), rgba(7, 11, 22, 0.96));
  border-color: rgba(0, 216, 255, 0.32);
}

body[data-theme="retro"] .status-chip,
body[data-theme="retro"] .game-iconbutton,
body[data-theme="retro"] .game-shell .piece {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)),
    rgba(17, 22, 36, 0.92);
  border-color: rgba(0, 216, 255, 0.32);
}