:root {
  --panel: rgba(7, 18, 24, .82);
  --border: rgba(255,255,255,.16);
  --text: #f5fbf7;
  --muted: #b7c9c2;
  --accent: #67e57f;
  --coral: #ff806f;
  --brush-color: #f0f1ed;
  --pad: clamp(12px, 2vw, 24px);
  --character-x: 66%;
  --character-y: 49%;
  --character-width: clamp(370px,39vw,570px);
  --character-rotation: 0deg;
  --character-tablet-x: 70%;
  --character-tablet-y: 44%;
  --character-tablet-width: min(76vw,390px);
  --character-compact-x: 72%;
  --character-compact-y: 43%;
  --character-compact-width: min(79vw,355px);
  --character-natural-width: 569;
  --character-natural-height: 1337;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: #06100f; color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid #72f29a; outline-offset: 3px; }
.is-hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.app-shell { position: relative; width: min(100%, 1480px); margin: auto; padding: 10px 16px 0; }
.app-header { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app-header h1 { min-width: 0; margin: 0; font-size: clamp(19px, 2.3vw, 31px); letter-spacing: -.035em; line-height: 1; }
.app-shell:has(.game-stage.is-title) .app-header h1 { opacity: 0; visibility: hidden; }
.header-actions { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; }
#languageSelect, .icon-button { border: 1px solid var(--border); background: rgba(255,255,255,.07); color: #fff; border-radius: 10px; }
#languageSelect { height: 36px; padding: 0 8px; }
#languageSelect option { color: #10201c; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--border); font-size: 23px; }
.icon-button.compact { width: 36px; height: 36px; font-weight: 900; }
#languageSelect:hover, .icon-button:hover { border-color: rgba(126,242,194,.55); background: rgba(103,229,127,.13); }
.fullscreen-button { display: grid; place-items: center; padding: 0; }
.fullscreen-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-icon-exit, .fullscreen-button.is-fullscreen .fullscreen-icon-enter { display: none; }
.fullscreen-button.is-fullscreen .fullscreen-icon-exit { display: block; }

.mobile-orientation-gate {
  position: absolute;
  z-index: 120;
  inset: 0;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 9, 8, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}
.mobile-orientation-card {
  width: min(342px, 100%);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  display: grid;
  justify-items: center;
  gap: 11px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(161,255,214,.22);
  border-radius: 20px;
  background: linear-gradient(155deg,rgba(8,27,26,.96),rgba(3,13,14,.94));
  box-shadow: 0 22px 55px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.08);
  text-align: center;
}
.phone-rotate-icon {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: rgba(103,229,127,.1);
  box-shadow: inset 0 0 0 1px rgba(103,229,127,.24), 0 0 28px rgba(103,229,127,.13);
}
.phone-rotate-icon::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 17px;
  width: 25px;
  height: 38px;
  border: 3px solid #dcfff0;
  border-radius: 7px;
  transform: rotate(90deg);
}
.phone-rotate-icon::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 13px;
  width: 47px;
  height: 47px;
  border: 2px solid transparent;
  border-top-color: #67e57f;
  border-right-color: #67e57f;
  border-radius: 50%;
  transform: rotate(20deg);
}
.mobile-orientation-card h2 {
  margin: 0;
  color: #effff5;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0;
}
.mobile-orientation-card p {
  margin: 0;
  color: #c1d8d0;
  font-size: 14px;
  line-height: 1.45;
}
.mobile-fullscreen-button {
  width: 100%;
  min-height: 48px;
  margin-top: 3px;
  border: 1px solid rgba(221,255,230,.42);
  border-radius: 12px;
  background: linear-gradient(180deg,#7ef58b,#2fc96a);
  color: #062111;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .06em;
  box-shadow: 0 12px 28px rgba(47,201,106,.23), inset 0 1px rgba(255,255,255,.42);
}
.mobile-orientation-fallback {
  max-width: 275px;
  color: #91aaa1 !important;
  font-size: 12px !important;
}
.mobile-orientation-required .game-stage,
.mobile-orientation-required .app-header,
.mobile-orientation-required .app-footer {
  pointer-events: none;
}
.mobile-orientation-required .mobile-orientation-gate { pointer-events: auto; }

.game-stage { position: relative; isolation: isolate; width: min(100%, calc((100vh - 70px) * 16 / 9)); height: auto; min-height: 0; aspect-ratio: 16 / 9; margin-inline: auto; overflow: hidden; border-radius: 22px; background: #063f3c; box-shadow: 0 24px 75px rgba(0,0,0,.44); }
.background-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.ambient-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.09), transparent 24%, transparent 76%, rgba(0,20,18,.18)); }
.title-layer { z-index: 90; display: block; overflow: hidden; padding: clamp(18px,3vw,34px); background: linear-gradient(to bottom,#3f4b46 0%,#313c37 46%,#24302b 100%); transition: opacity .28s ease, visibility 0s linear 0s; }
.title-layer::before,
.title-layer::after { content: ""; position: absolute; left: 50%; top: -70%; width: 235%; height: 126%; border-radius: 0 0 50% 50%; transform: translateX(-50%); pointer-events: none; }
.title-layer::before { z-index: 0; background: radial-gradient(ellipse at 50% 24%,#d7ff2b 0%,#a8f400 38%,#78df09 74%,#56c30a 100%); }
.title-layer::after { z-index: 1; border-bottom: 2px solid rgba(221,255,66,.68); }
.title-layer.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility 0s linear .28s; }
.game-stage:not(.is-title) .title-layer { display: none; }
.game-stage.is-title .background-canvas,
.game-stage.is-title .ambient-shine { opacity: 0; visibility: hidden; }
.game-stage.is-title .control-cluster,
.game-stage.is-title .chameleon-container,
.game-stage.is-title .result-effects,
.game-stage.is-title .placement-layer,
.game-stage.is-title .countdown-display,
.game-stage.is-title .spotlight-layer,
.game-stage.is-title .result-layer,
.game-stage.is-title .showcase-layer { opacity: 0; visibility: hidden; pointer-events: none; }
.title-stack { position: relative; z-index: 2; width: 100%; height: 100%; text-align: center; }
.title-brand { position: absolute; left: 50%; top: 30.5%; width: 76%; max-width: calc(100vw - 40px); margin: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: nowrap; white-space: nowrap; font-size: clamp(35px,7.75vw,114px); line-height: .95; font-weight: 950; letter-spacing: 0; transform: translate(-50%,-50%); }
.title-brand span:not(.title-space) {
  --c1: #62e869;
  --c2: #18c8ff;
  --c3: #fff06a;
  display: inline-block;
  position: relative;
  color: transparent;
  background:
    linear-gradient(142deg, var(--c1) 0 35%, var(--c2) 36% 66%, var(--c3) 67% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: clamp(.45px,.06vw,1px) rgba(255,255,246,.96);
  text-shadow: 0 1px 0 rgba(255,255,255,.16), 0 3px 5px rgba(0,39,13,.58), 0 7px 9px rgba(0,0,0,.22);
  filter: saturate(1.22) contrast(1.08);
  transform: translateY(var(--dy,0)) rotate(var(--rot,0deg));
}
.title-space { width: .28em; flex: 0 0 .28em; }
.title-brand span:nth-of-type(1) { --c1:#006cff; --c2:#00f0c6; --c3:#ffea00; --rot:-1.4deg; --dy:1px; }
.title-brand span:nth-of-type(2) { --c1:#ff149d; --c2:#ff6b00; --c3:#fff200; --rot:.9deg; --dy:-2px; }
.title-brand span:nth-of-type(3) { --c1:#00aaff; --c2:#00f56e; --c3:#ffe100; --rot:1.6deg; --dy:2px; }
.title-brand span:nth-of-type(4) { --c1:#ff1f2f; --c2:#ffad00; --c3:#00df4a; --rot:-.8deg; --dy:-1px; }
.title-brand span:nth-of-type(5) { --c1:#6732ff; --c2:#00c9ff; --c3:#ff26a8; --rot:1.1deg; --dy:1px; }
.title-brand span:nth-of-type(6) { --c1:#ff6900; --c2:#ffdf00; --c3:#11e650; --rot:-1.8deg; --dy:0; }
.title-brand span:nth-of-type(8) { --c1:#00de55; --c2:#009bff; --c3:#ff20b0; --rot:1.4deg; --dy:-2px; }
.title-brand span:nth-of-type(9) { --c1:#ff1828; --c2:#ff7e00; --c3:#fff000; --rot:-1deg; --dy:1px; }
.title-brand span:nth-of-type(10) { --c1:#009cff; --c2:#19ef48; --c3:#fff000; --rot:.7deg; --dy:-1px; }
.title-brand span:nth-of-type(11) { --c1:#ff19b8; --c2:#7530ff; --c3:#00bfff; --rot:-1.5deg; --dy:2px; }
.title-brand span:nth-of-type(12) { --c1:#ffbf00; --c2:#ff232d; --c3:#0ee34a; --rot:1.7deg; --dy:-2px; }
.title-brand span:nth-of-type(13) { --c1:#00e451; --c2:#009fff; --c3:#fff000; --rot:-.6deg; --dy:0; }
.title-brand span:nth-of-type(14) { --c1:#ff6b00; --c2:#ff20a0; --c3:#fff200; --rot:1.2deg; --dy:1px; }
.title-brand span:nth-of-type(15) { --c1:#00aaff; --c2:#4cff28; --c3:#ff2020; --rot:-1.1deg; --dy:-1px; }
.title-brand span:nth-of-type(16) { --c1:#ff1f5b; --c2:#ffcb00; --c3:#00df69; --rot:1.5deg; --dy:2px; }
.title-subtitle { position: absolute; left: 50%; top: 66%; margin: 0; color: rgba(231,255,239,.92); font-size: clamp(21px,3.1vw,43px); line-height: 1.1; font-weight: 850; letter-spacing: .08em; text-transform: none; text-shadow: 0 4px 20px rgba(0,0,0,.42); transform: translate(-50%,-50%); }
.title-play-button { position: absolute; left: 50%; top: 79%; width: clamp(70px,9vw,104px); height: clamp(70px,9vw,104px); display: grid; place-items: center; border: 2px solid rgba(255,255,255,.56); border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.45), transparent 30%), linear-gradient(145deg,#ff8a4d,#35e97d 58%,#16d0d8); box-shadow: 0 18px 46px rgba(0,0,0,.38), 0 0 34px rgba(53,233,125,.32), 0 0 0 9px rgba(255,138,77,.12), inset 0 2px rgba(255,255,255,.34); transform: translate(-50%,-50%); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.title-play-button:hover { transform: translate(-50%,-50%) scale(1.06); border-color: rgba(255,255,255,.82); box-shadow: 0 20px 52px rgba(0,0,0,.42), 0 0 42px rgba(53,233,125,.42), 0 0 0 10px rgba(22,208,216,.14), inset 0 2px rgba(255,255,255,.4); }
.title-play-button:active { transform: translate(-50%,calc(-50% + 2px)) scale(.97); }
.title-play-button:disabled { opacity: .7; cursor: wait; }
.title-play-icon { width: 0; height: 0; margin-left: 8%; border-top: clamp(16px,2.3vw,26px) solid transparent; border-bottom: clamp(16px,2.3vw,26px) solid transparent; border-left: clamp(25px,3.4vw,39px) solid #f8fff9; filter: drop-shadow(0 2px 10px rgba(114,242,154,.35)); }
.level-select-layer { z-index: 88; display: grid; place-items: center; overflow-y: auto; padding: clamp(18px,3vw,34px); background: linear-gradient(180deg,rgba(2,12,13,.72),rgba(2,9,8,.88)); backdrop-filter: blur(5px); }
.game-stage.is-level-select .control-cluster,
.game-stage.is-level-select .chameleon-container,
.game-stage.is-level-select .result-effects,
.game-stage.is-level-select .placement-layer,
.game-stage.is-level-select .countdown-display,
.game-stage.is-level-select .spotlight-layer,
.game-stage.is-level-select .result-layer,
.game-stage.is-level-select .showcase-layer { opacity: 0; visibility: hidden; pointer-events: none; }
.level-select-panel { width: min(760px,100%); }
.level-select-panel h2 { margin: 0 0 clamp(13px,2.2vw,20px); color: #effff4; font-size: clamp(23px,3.2vw,40px); line-height: 1; font-weight: 950; letter-spacing: .08em; text-align: center; text-shadow: 0 3px 18px rgba(49,238,128,.24); }
.level-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(10px,1.6vw,16px); }
.level-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(180,255,220,.2); border-radius: 13px; background: linear-gradient(180deg,rgba(7,18,24,.92),rgba(4,15,18,.92)); color: #effff4; text-align: left; box-shadow: 0 14px 30px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.level-card:not(:disabled):hover { transform: translateY(-3px); border-color: rgba(103,229,127,.72); box-shadow: 0 18px 36px rgba(0,0,0,.38), 0 0 20px rgba(103,229,127,.12), inset 0 1px rgba(255,255,255,.07); }
.level-thumbnail { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #073f3c; background-position: center; background-size: cover; }
.level-thumb-procedural { overflow: hidden; background: #07514b; }
.level-thumb-procedural::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 69% 38%,#35c95a 0 22%,transparent 23%), radial-gradient(ellipse at 83% 78%,#a7d940 0 21%,transparent 22%), radial-gradient(ellipse at 35% 76%,#087069 0 23%,transparent 24%), radial-gradient(ellipse at 18% 22%,#03413f 0 18%,transparent 19%); opacity: .95; }
.level-thumb-procedural i { position: absolute; width: 46%; height: 37%; border-radius: 50%; border-top: 2px solid rgba(225,255,190,.25); transform: rotate(-18deg); }
.level-thumb-procedural i:nth-child(1) { left: 50%; top: 22%; background: #35c95a; }
.level-thumb-procedural i:nth-child(2) { left: 65%; top: 60%; background: #a7d940; transform: rotate(25deg); }
.level-thumb-procedural i:nth-child(3) { left: 16%; top: 58%; background: #087069; transform: rotate(-28deg); }
.level-thumb-procedural i:nth-child(4) { left: 5%; top: 10%; background: #03413f; transform: rotate(20deg); }
.level-thumb-coming-soon { display: grid; place-items: center; background: linear-gradient(145deg,#111820,#030607 62%,#1f2a23); }
.level-thumb-coming-soon::before { content: ""; width: 46px; height: 46px; border: 3px solid rgba(255,225,102,.78); border-radius: 10px; transform: rotate(45deg); box-shadow: 0 0 20px rgba(255,225,102,.13); }
.level-thumb-coming-soon i { position: absolute; width: 10px; height: 32px; border-radius: 99px; background: rgba(255,225,102,.78); }
.level-card-body { display: grid; gap: 4px; min-height: 76px; padding: 12px 13px 13px; }
.level-card-kicker { color: #94d8bd; font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.level-card strong { min-width: 0; overflow-wrap: anywhere; font-size: clamp(14px,1.7vw,19px); line-height: 1.1; font-weight: 950; }
.level-card small { color: #ffd980; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.level-card-disabled { cursor: not-allowed; filter: grayscale(.2); }
.level-back-button { display: block; width: min(230px,100%); margin: clamp(14px,2vw,20px) auto 0; }
.glass-panel { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 14px 38px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(16px); }
.eyebrow { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .14em; }

.control-cluster { position: absolute; z-index: 18; left: var(--pad); top: 50%; width: clamp(400px, 30vw, 430px); max-height: 74vh; transform: translateY(-46%); }
.control-cluster { transition: opacity .45s ease, visibility 0s linear 0s; }
.control-cluster.is-dock-right { left: auto; right: var(--pad); }
.game-stage.is-showcase .control-cluster { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s; }
.game-stage.is-placement .control-cluster { opacity: 0; visibility: hidden; pointer-events: none; }
.current-paint { position: relative; width: 66px; min-width: 0; display: grid; grid-template-rows: auto auto auto auto; align-content: start; gap: 6px; padding: 0; }
.paint-chip { width: 66px; height: 66px; border: 2px solid rgba(255,255,255,.72); border-radius: 13px; background: var(--brush-color); box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 6px 14px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.3); }
.hex-display, .eyedropper-button, .text-button, .brush-size-button, .secondary-button, .primary-button { border: 0; }
.hex-display { width: 66px; height: 29px; padding: 0 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(0,0,0,.24); font-size: 9px; font-weight: 900; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.eyedropper-button, .current-paint .fill-button { width: 66px; height: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.17); border-radius: 9px; background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.22); }
.eyedropper-button svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hex-display:hover, .eyedropper-button:hover, .current-paint .fill-button:not(:disabled):hover { border-color: rgba(126,242,194,.42); background-color: rgba(103,229,127,.1); }
.eyedropper-button.is-active { color: #07150e; background: var(--accent); box-shadow: 0 0 0 3px rgba(103,229,127,.24), 0 0 24px rgba(103,229,127,.35); }
.game-stage.is-sampling { cursor: crosshair; }
.game-stage.is-sampling .chameleon-container { pointer-events: none; }

.picker-panel { position: relative; max-height: 74vh; overflow: auto; padding: 10px; border-radius: 18px; background: linear-gradient(155deg,rgba(8,21,28,.96),rgba(3,12,17,.91)); border-color: rgba(127,240,197,.19); box-shadow: 0 14px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07); scrollbar-width: thin; }
.picker-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg,rgba(118,255,201,.055),transparent 42%); }
.picker-wrap { position: relative; display: grid; grid-template-columns: minmax(220px,240px) 46px 66px; gap: 9px; align-items: stretch; justify-content: space-between; padding: 2px 2px 9px; }
.wheel-shell { position: relative; width: min(100%, 230px); aspect-ratio: 1; justify-self: center; padding: 3px; border-radius: 50%; background: rgba(255,255,255,.055); box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 8px 20px rgba(0,0,0,.35); touch-action: none; }
#colorWheel { display: block; width: 100%; height: 100%; border-radius: 50%; cursor: crosshair; touch-action: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 0 22px rgba(62,224,160,.12); }
.wheel-cursor { position: absolute; width: 20px; height: 20px; pointer-events: none; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.66), 0 2px 8px rgba(0,0,0,.65); transform: translate(-50%,-50%); }
.channel-bar-group { display: flex; gap: 7px; align-items: stretch; justify-content: center; padding: 3px 0 0; }
.channel-bar-wrap { min-width: 17px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.channel-bar-wrap small { color: #dcece6; font-size: 9px; font-weight: 950; letter-spacing: .08em; line-height: 1; }
.channel-shell { position: relative; width: 14px; flex: 1; min-height: 176px; max-height: 220px; border: 1px solid rgba(255,255,255,.33); border-radius: 999px; cursor: ns-resize; touch-action: none; box-shadow: 0 0 0 2px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.12); }
.channel-handle { position: absolute; left: 50%; width: 25px; height: 7px; border: 2px solid rgba(255,255,255,.96); border-radius: 9px; background: rgba(7,17,21,.72); box-shadow: 0 0 0 1px rgba(0,0,0,.72), 0 2px 5px rgba(0,0,0,.65); transform: translate(-50%,-50%); pointer-events: none; }
.brush-section { position: relative; margin-top: 0; padding-top: 8px; border-top: 1px solid rgba(151,230,201,.14); }
.section-heading, .fine-tune-header, .help-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading { margin-bottom: 6px; color: #e8f4ef; font-size: 10px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.text-button { min-height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.055); color: #d9e9e3; font-size: 10px; font-weight: 850; letter-spacing: .035em; }
.text-button:hover { border-color: rgba(117,237,141,.4); background: rgba(103,229,127,.1); color: white; }
.section-heading .text-button { display: none; }
.brush-sizes { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.brush-size-button { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); color: #dceae5; font-size: 11px; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.brush-size-button:hover { border-color: rgba(117,237,141,.35); background: rgba(103,229,127,.09); }
.brush-size-button.is-active { border-color: rgba(117,237,141,.72); background: linear-gradient(180deg,rgba(103,229,127,.25),rgba(61,180,135,.14)); color: white; box-shadow: 0 0 15px rgba(91,228,153,.12), inset 0 1px rgba(255,255,255,.08); }
.brush-dot { display: inline-block; border: 1px solid white; border-radius: 50%; background: var(--brush-color); }
.brush-dot-small { width: 5px; height: 5px; } .brush-dot-medium { width: 9px; height: 9px; } .brush-dot-large { width: 15px; height: 15px; } .brush-dot-xlarge { width: 22px; height: 22px; }
.tool-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 6px; }
.secondary-button { min-height: 31px; padding: 0 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); color: #dbe8e3; font-size: 10px; font-weight: 850; }
.secondary-button:not(:disabled):hover { border-color: rgba(117,237,141,.34); background: rgba(103,229,127,.1); color: white; }
.current-paint .fill-button { margin-top: 8px; }
.fill-button { gap: 0; white-space: nowrap; }
.fill-button svg { width: 28px; height: 28px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.fill-color-dot { width: 6px; height: 6px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: var(--brush-color); box-shadow: 0 0 0 1px rgba(0,0,0,.28); }

.fine-tune, .fine-tune[hidden] { position: relative; display: block !important; left: auto; top: auto; width: auto; max-height: none; overflow: visible; padding: 8px 2px 8px; border: 0; border-top: 1px solid rgba(151,230,201,.14); border-radius: 0; background: transparent; box-shadow: none; }
.fine-tune-header { padding-bottom: 5px; border-bottom: 0; }
.fine-tune-header strong { font-size: 10px; letter-spacing: .06em; }
.fine-tune-header .icon-button { display: none; }
.precision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slider-group { margin-top: 0; }
.slider-group h2 { margin: 0 0 4px; color: #9eb7ad; font-size: 9px; letter-spacing: .13em; }
.slider-group label { display: grid; grid-template-columns: 11px minmax(50px,1fr) 38px; align-items: center; gap: 4px; margin: 4px 0; font-size: 9px; font-weight: 850; }
input[type=range] { width: 100%; height: 5px; margin: 0; border-radius: 999px; appearance: none; background: rgba(255,255,255,.15); accent-color: var(--accent); }
input[type=range]::-webkit-slider-thumb { width: 13px; height: 13px; border: 2px solid white; border-radius: 50%; appearance: none; background: #15221f; box-shadow: 0 1px 4px rgba(0,0,0,.7); }
#rSlider { background: linear-gradient(90deg,#170606,#f04b4b); }
#gSlider { background: linear-gradient(90deg,#061708,#44dc70); }
#bSlider { background: linear-gradient(90deg,#060b18,#4a83f1); }
#hSlider { background: linear-gradient(90deg,#f44,#ff0,#4f4,#0ff,#55f,#f4f,#f44); }
#sSlider { background: linear-gradient(90deg,rgba(255,255,255,.25),var(--brush-color)); }
#vSlider { background: linear-gradient(90deg,#000,var(--brush-color)); }
.number-box, .hex-input { border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.06); color: white; }
.number-box { width: 38px; height: 23px; padding: 0 3px; text-align: right; font-size: 9px; }
.hex-input-label { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 7px; margin-top: 6px; color: #9eb7ad; font-size: 9px; font-weight: 900; letter-spacing: .05em; }
.hex-input { width: 100%; height: 27px; margin: 0; padding: 0 7px; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.hex-input.is-invalid { border-color: var(--coral); }

.chameleon-container { position: absolute; z-index: 8; left: var(--character-x); top: var(--character-y); width: auto; height: var(--character-width); aspect-ratio: var(--character-natural-width) / var(--character-natural-height); transform: translate(-50%,-50%) rotate(var(--character-rotation)); }
.chameleon-container.is-top-left-position { transform: rotate(var(--character-rotation)); }
.game-stage.is-placement .chameleon-container { pointer-events: auto !important; cursor: grab; touch-action: none; user-select: none; }
.game-stage.is-placement .chameleon-container.is-dragging { cursor: grabbing; }
.game-stage.is-placement .paint-canvas { cursor: grab; }
.game-stage.is-placement .chameleon-container.is-dragging .paint-canvas { cursor: grabbing; }
.game-stage.is-placement .brush-cursor { display: none !important; }
.character-result-layer { position: absolute; inset: 0; transform-origin: 50% 82%; will-change: transform,filter; }
.character-visual-group { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 22px 30px rgba(0,20,12,.28)); }
.chameleon-base, .paint-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.chameleon-base { pointer-events: none; user-select: none; object-fit: fill; }
.paint-canvas { z-index: 2; cursor: none; touch-action: none; -webkit-mask: url("assets/character/mannequin-final-mask.png") 0 0/100% 100% no-repeat; mask: url("assets/character/mannequin-final-mask.png") 0 0/100% 100% no-repeat; }
.brush-cursor { position: absolute; z-index: 5; display: none; pointer-events: none; border: 1.5px solid white; border-radius: 50%; background: color-mix(in srgb, var(--brush-color) 28%, transparent); box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.18); transform: translate(-50%,-50%); }
.result-effects { position: absolute; inset: 0; z-index: 56; overflow: hidden; pointer-events: none; }
.target-rings { position: absolute; width: clamp(120px,14vw,210px); aspect-ratio: 1; border: 4px solid rgba(255,83,74,.78); border-radius: 50%; box-shadow: 0 0 0 13px rgba(255,83,74,.15), 0 0 25px rgba(255,76,67,.25); }
.target-rings::after { content: ""; position: absolute; inset: 20%; border: 3px solid rgba(255,147,80,.78); border-radius: 50%; }
.target-rings-partial { border-color: rgba(255,158,74,.7); box-shadow: 0 0 0 10px rgba(255,173,74,.1); }
.paint-projectile { position: absolute; width: 30px; height: 17px; border-radius: 999px; background: #ff5e9d; box-shadow: 18px 0 0 -5px rgba(255,121,178,.55), 34px 0 0 -8px rgba(255,148,194,.28), 0 0 14px rgba(255,73,146,.72); }
.paint-splash { position: absolute; width: 1px; height: 1px; }
.splash-core { position: absolute; left: 50%; top: 50%; width: 82px; height: 62px; border-radius: 55% 45% 62% 38% / 42% 58% 45% 55%; background: #ff5e9d; transform: translate(-50%,-50%) rotate(-9deg); box-shadow: 0 0 18px rgba(255,73,146,.35); }
.splash-drop { position: absolute; left: 50%; top: 50%; width: 13px; height: 9px; border-radius: 55% 45% 60% 40%; background: #ff79b1; animation: splash-drop .44s cubic-bezier(.18,.8,.28,1) var(--drop-delay) both; transform-origin: 0 0; }
.fill-splash-feedback { --fill-color: #75ed8d; position: absolute; width: 96px; height: 96px; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; opacity: 0; animation: fill-splash-pop .34s cubic-bezier(.18,.8,.28,1) both; }
.fill-splash-feedback::before { content: ""; position: absolute; inset: 18%; border: 3px solid color-mix(in srgb,var(--fill-color) 82%,white 18%); border-radius: 50%; background: color-mix(in srgb,var(--fill-color) 26%,transparent); box-shadow: 0 0 24px color-mix(in srgb,var(--fill-color) 35%,transparent); }
.fill-splash-feedback i { position: absolute; left: 50%; top: 50%; width: 8px; height: 6px; border-radius: 60% 40% 55% 45%; background: var(--fill-color); opacity: .82; transform: translate(-50%,-50%) translate(var(--drop-x),var(--drop-y)) rotate(var(--drop-rotate)); animation: fill-drop-fade .34s ease-out both; }
.success-ripples { position: absolute; width: clamp(150px,18vw,260px); aspect-ratio: 1; border: 4px solid rgba(103,235,148,.72); border-radius: 50%; box-shadow: 0 0 0 18px rgba(103,235,148,.12), 0 0 30px rgba(103,235,148,.16); }
.success-ripples::after { content: ""; position: absolute; inset: 22%; border: 3px solid rgba(155,255,191,.65); border-radius: 50%; }

.countdown-display { position: absolute; z-index: 20; right: var(--pad); bottom: var(--pad); width: 108px; height: 108px; display: grid; place-content: center; border: 2px solid rgba(220,255,246,.62); border-radius: 50%; background: rgba(4,20,23,.88); color: #dffdf2; text-align: center; box-shadow: 0 13px 30px rgba(0,0,0,.38), 0 0 20px rgba(68,220,178,.14), inset 0 1px rgba(255,255,255,.1); }
.countdown-display strong { display: block; min-width: 2.4ch; font-size: 46px; font-weight: 800; letter-spacing: -.055em; line-height: .9; font-variant-numeric: tabular-nums; }
.countdown-display small { margin-top: 7px; color: #8fc8b7; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.countdown-display.is-warning { border-color: rgba(255,225,130,.7); color: #ffe38c; box-shadow: 0 13px 30px rgba(0,0,0,.38), 0 0 20px rgba(255,205,86,.14), inset 0 1px rgba(255,255,255,.1); }
.countdown-display.is-urgent { border-color: rgba(255,130,106,.8); color: #ff8b73; animation: countdown-pulse 1s ease-in-out infinite; }
.countdown-display.is-dock-bottom-left { left: var(--pad); right: auto; }
.countdown-display.is-dock-top-right { top: var(--pad); bottom: auto; }
.countdown-display.is-dock-top-left { left: var(--pad); right: auto; top: var(--pad); bottom: auto; }

.overlay-layer { position: absolute; inset: 0; z-index: 50; }
.title-layer.overlay-layer { z-index: 90; }
.placement-layer { z-index: 19; pointer-events: none; }
.placement-hint {
  position: absolute;
  top: clamp(14px,3vh,30px);
  left: 50%;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid rgba(178,255,235,.3);
  border-radius: 999px;
  background: rgba(3,27,27,.68);
  color: #e4fff7;
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  font-size: clamp(11px,1.4vw,15px);
  font-weight: 900;
  letter-spacing: .14em;
  transform: translateX(-50%);
}
.placement-countdown {
  position: absolute;
  left: 50%;
  top: clamp(58px,9vh,86px);
  width: 74px;
  height: 74px;
  display: grid;
  place-content: center;
  border: 2px solid rgba(189,255,236,.66);
  border-radius: 50%;
  background: rgba(3,27,27,.76);
  color: #eafff8;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.26), 0 0 20px rgba(57,218,182,.14);
  transform: translateX(-50%);
}
.placement-countdown strong { font-size: 31px; line-height: .88; font-variant-numeric: tabular-nums; }
.placement-countdown small { margin-top: 7px; color: #9ed8c8; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.result-layer { z-index: 60; }
.intro-overlay, .help-layer, .result-layer { display: grid; place-items: center; padding: 18px; background: rgba(2,9,8,.45); backdrop-filter: blur(5px); }
.result-layer { justify-items: end; padding-left: clamp(185px,34vw,470px); padding-right: clamp(10px,6vw,80px); }
.intro-card, .help-card, .result-card { width: min(500px,100%); min-width: 0; padding: clamp(21px,4vw,32px); border-radius: 22px; text-align: center; }
.result-card { width: min(420px,calc(100vw - 205px)); max-width: 100%; }
.intro-card h2, .help-card h2, .result-card h2 { margin: 0 0 16px; font-size: clamp(27px,4vw,44px); line-height: 1; letter-spacing: -.04em; }
.intro-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 20px 0; }
.intro-steps span { padding: 9px 4px; border-radius: 9px; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 900; }
.primary-button { width: 100%; min-height: 49px; border-radius: 12px; background: linear-gradient(135deg,#75ed8d,#41d2b3); color: #062016; font-weight: 900; }
.intro-skip { margin-top: 11px; }
.help-card { text-align: left; }
.help-card h2 { margin: 0; font-size: 27px; }
.help-card p, .result-card p { color: #d1dfda; line-height: 1.5; }

.spotlight-layer { overflow: hidden; pointer-events: none; }
.scene-dimmer { position: absolute; inset: 0; background: rgba(1,8,10,.58); }
.spotlight-rig { position: absolute; left: 0; top: 0; width: 340px; height: 340px; will-change: transform; }
.spotlight-orb { position: absolute; right: 0; bottom: 0; width: clamp(260px,22vw,320px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(255,252,220,.94) 0,rgba(255,245,184,.65) 37%,rgba(255,235,151,.2) 68%,transparent 76%); filter: blur(2px); mix-blend-mode: screen; }
.spotlight-cone { position: absolute; right: 46%; bottom: 46%; width: 640px; height: 300px; transform-origin: right center; transform: rotate(25deg); clip-path: polygon(0 35%,100% 0,100% 100%,0 65%); background: linear-gradient(90deg,transparent,rgba(255,245,195,.08) 18%,rgba(255,245,195,.28) 100%); filter: blur(13px); mix-blend-mode: screen; }
.result-card.outcome-hidden { border-color: rgba(103,229,127,.62); box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 0 30px rgba(103,229,127,.12); }
.result-card.outcome-close { border-color: rgba(255,202,91,.65); box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 0 30px rgba(255,202,91,.12); }
.result-card.outcome-found { border-color: rgba(255,94,157,.68); box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 0 30px rgba(255,94,157,.14); }
.result-card.outcome-hidden .primary-button { background: linear-gradient(135deg,#75ed8d,#41d2b3); }
.result-card.outcome-close .primary-button { background: linear-gradient(135deg,#ffe174,#f2a84b); }
.result-card.outcome-found .primary-button { background: linear-gradient(135deg,#ff8aab,#ff637e); }
.result-card h2 { font-size: clamp(36px,6vw,58px); }

.showcase-layer { z-index: 58; pointer-events: none; }
.showcase-layer:not(.is-hidden) { pointer-events: auto; }
.showcase-title {
  position: absolute;
  top: clamp(14px,3vh,32px);
  left: 50%;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid rgba(172,255,199,.34);
  border-radius: 999px;
  background: rgba(3,24,18,.46);
  color: #dfffe8;
  box-shadow: 0 8px 28px rgba(0,0,0,.2), 0 0 22px rgba(103,229,127,.1);
  font-size: clamp(22px,3vw,38px);
  font-weight: 950;
  letter-spacing: .16em;
  line-height: 1;
  text-shadow: 0 2px 14px rgba(27,255,117,.28);
  transform: translateX(-50%);
}
.showcase-message {
  position: absolute;
  top: clamp(62px,9vh,92px);
  left: 50%;
  width: min(520px,calc(100% - 32px));
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(221,255,233,.16);
  border-radius: 10px;
  background: rgba(3,20,18,.58);
  color: #d9eee7;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-size: clamp(14px,1.5vw,18px);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.showcase-layer.outcome-hidden .showcase-title { border-color: rgba(117,237,141,.58); color: #e7ffed; }
.showcase-layer.outcome-close .showcase-title { border-color: rgba(255,218,116,.62); color: #fff1bd; }
.showcase-layer.outcome-found .showcase-title { border-color: rgba(255,121,159,.68); color: #ffe0e9; }
.showcase-action-panel {
  position: absolute;
  right: max(22px,env(safe-area-inset-right));
  bottom: max(22px,env(safe-area-inset-bottom));
  width: min(460px,calc(100% - 44px));
  padding: 14px;
  border: 1px solid rgba(163,220,194,.22);
  border-radius: 20px;
  background: linear-gradient(155deg,rgba(5,24,26,.78),rgba(3,14,17,.72));
  box-shadow: 0 18px 44px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.075);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}
.showcase-actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
}
.showcase-button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid rgba(221,255,233,.18);
  border-radius: 13px;
  background: rgba(5,25,27,.62);
  color: #effff4;
  box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.06);
  font-size: clamp(16px,1.25vw,18px);
  font-weight: 900;
  letter-spacing: .045em;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.showcase-button svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.showcase-button:hover {
  transform: translateY(-1px);
  border-color: rgba(158,238,205,.42);
  background: rgba(13,47,45,.72);
  box-shadow: 0 11px 22px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.08);
}
.showcase-button:active { transform: translateY(1px); }
.showcase-button-secondary { color: #e8f5ef; }
.showcase-button-retry {
  border-color: rgba(117,237,141,.48);
  background: linear-gradient(135deg,rgba(117,237,141,.9),rgba(65,210,179,.82));
  color: #062016;
  box-shadow: 0 12px 28px rgba(24,210,128,.18), inset 0 1px rgba(255,255,255,.28);
}
.showcase-layer.outcome-found .showcase-button-retry {
  border-color: rgba(255,121,159,.62);
  background: linear-gradient(135deg,rgba(255,128,111,.94),rgba(255,94,157,.84));
  color: #27070d;
}
.showcase-layer.outcome-close .showcase-button-retry {
  border-color: rgba(255,218,116,.62);
  background: linear-gradient(135deg,rgba(255,225,116,.94),rgba(242,168,75,.84));
  color: #241604;
}
.showcase-button-primary { border-color: rgba(117,237,141,.72); background: linear-gradient(135deg,rgba(117,237,141,.96),rgba(65,210,179,.96)); color: #062016; }
.showcase-level-select-button,
#showcaseLevelSelectButton {
  border-color: rgba(103,229,127,.5);
  background: rgba(4,32,30,.82);
  color: #d9fff0;
}
#showcaseLevelSelectButton:hover { border-color: rgba(126,242,194,.72); background: rgba(8,48,43,.92); }
.showcase-toast {
  position: absolute;
  left: 50%;
  bottom: max(calc(var(--pad) + 54px),calc(env(safe-area-inset-bottom) + 54px));
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(2,18,14,.9);
  color: #eafff0;
  font-size: 12px;
  font-weight: 800;
  transform: translateX(-50%);
}

.app-footer { padding: 7px 3px; color: #81968e; font-size: 10px; text-align: center; }
.app-footer p { margin: 0; }

.app-shell:fullscreen {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #061815;
}
.app-shell:fullscreen .app-header {
  position: absolute;
  z-index: 80;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  min-height: 0;
  pointer-events: none;
}
.app-shell:fullscreen .app-header h1 { display: none; }
.app-shell:fullscreen .header-actions { pointer-events: auto; }
.app-shell:fullscreen .game-stage {
  flex: 0 0 auto;
  width: min(100vw, calc(100dvh * 16 / 9), 1480px);
  height: auto;
  min-height: 0;
  max-height: 100vh;
  max-height: 100dvh;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.app-shell:fullscreen .app-footer { display: none; }
.app-shell:fullscreen .showcase-title { top: max(14px,env(safe-area-inset-top)); }

@media (min-width: 821px) {
  .control-cluster {
    top: 16px;
    bottom: 16px;
    max-height: none;
    transform: none;
  }
  .picker-panel {
    max-height: 100%;
    overflow-y: auto;
  }
}

@keyframes coral-pulse {
  0%,100% { filter: drop-shadow(0 22px 30px rgba(0,20,12,.28)); }
  45% { filter: drop-shadow(0 0 18px rgba(255,128,111,.95)) drop-shadow(0 22px 30px rgba(0,20,12,.28)); }
}
@keyframes splash-drop {
  from { opacity: 0; transform: rotate(var(--drop-angle)) translateX(10px) scale(.25); }
  60% { opacity: 1; }
  to { opacity: .9; transform: rotate(var(--drop-angle)) translateX(var(--drop-distance)) scale(1); }
}
@keyframes fill-splash-pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.42); }
  46% { opacity: .92; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.32); }
}
@keyframes fill-drop-fade {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); }
  35% { opacity: .86; }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--drop-x),var(--drop-y)) rotate(var(--drop-rotate)) scale(1); }
}
@keyframes countdown-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  :root {
    --pad: 8px;
    --character-tablet-x: 69%;
    --character-tablet-y: 48%;
    --character-tablet-width: min(52vh, 34vw);
    --character-compact-x: 69%;
    --character-compact-y: 48%;
    --character-compact-width: min(52vh, 34vw);
  }
  html, body { overflow: hidden; }
  .app-shell {
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #061815;
  }
  .app-header {
    position: absolute;
    z-index: 80;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    min-height: 0;
    gap: 8px;
    pointer-events: none;
  }
  .app-header h1 { display: none; }
  .header-actions { pointer-events: auto; }
  #languageSelect, .icon-button.compact { min-width: 38px; height: 38px; }
  .game-stage {
    flex: 0 0 auto;
    width: min(100vw, calc(100dvh * 16 / 9));
    height: auto;
    max-height: 100vh;
    max-height: 100dvh;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    box-shadow: none;
  }
  .app-footer { display: none; }
  .control-cluster {
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: clamp(154px, 23vw, 184px);
    max-height: none;
    transform: none;
  }
  .control-cluster.is-dock-right {
    left: auto;
    right: 8px;
  }
  .picker-panel {
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    border-radius: 14px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .picker-wrap {
    grid-template-columns: minmax(88px,1fr) 37px;
    gap: 6px;
    padding: 2px 2px 7px;
  }
  .wheel-shell { width: min(100%, 116px); }
  .channel-bar-group { gap: 4px; padding-top: 2px; }
  .channel-shell { width: 12px; min-height: 92px; max-height: 128px; touch-action: none; }
  .channel-handle { width: 22px; height: 7px; }
  .current-paint {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: 36px minmax(0,1fr) 38px;
    grid-template-rows: 32px 36px;
    align-items: center;
    gap: 5px;
    padding-top: 7px;
    border-top: 1px solid rgba(151,230,201,.14);
  }
  .paint-chip { width: 36px; height: 36px; border-radius: 9px; }
  .current-paint .paint-chip { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .current-paint .hex-display { grid-column: 2; grid-row: 1; width: 100%; height: 32px; font-size: 10px; }
  .current-paint .eyedropper-button { grid-column: 3; grid-row: 1; width: 38px; height: 32px; min-height: 32px; }
  .current-paint .fill-button { grid-column: 2 / 4; grid-row: 2; width: 100%; height: 31px; min-height: 31px; }
  .brush-section { margin-top: 7px; padding-top: 7px; }
  .section-heading > span { display: none; }
  .section-heading .text-button { display: inline-flex; align-items: center; min-height: 28px; padding: 0 7px; font-size: 9px; }
  .brush-sizes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  .brush-size-button { min-height: 34px; gap: 3px; }
  .secondary-button { min-height: 32px; font-size: 10px; }
  .fine-tune[hidden] { display: none !important; }
  .fine-tune:not([hidden]) {
    max-height: none;
    overflow: visible;
    padding: 8px 2px;
  }
  .precision-grid { grid-template-columns: 1fr; gap: 4px; }
  .slider-group label { grid-template-columns: 10px minmax(44px,1fr) 35px; gap: 4px; }
  .number-box { width: 35px; }
  .hex-input-label { grid-template-columns: 43px minmax(0,1fr); }
  .countdown-display {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: 68px;
    height: 68px;
  }
  .countdown-display strong { font-size: 29px; }
  .countdown-display small { margin-top: 3px; font-size: 7px; }
  .placement-hint { top: max(8px, env(safe-area-inset-top)); max-width: 44vw; }
  .placement-countdown { top: max(48px, calc(env(safe-area-inset-top) + 42px)); width: 58px; height: 58px; }
  .showcase-title { top: max(8px, env(safe-area-inset-top)); font-size: 20px; }
  .showcase-message { top: max(42px, calc(env(safe-area-inset-top) + 38px)); width: min(48vw, 390px); font-size: 11px; }
  .showcase-action-panel { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: min(292px, 44vw); }
}

@media (max-width: 820px) {
  :root { --pad: 10px; }
  .app-shell { padding: 8px 8px 0; }
  .app-header h1 { font-size: 19px; }
  .game-stage { min-height: 0; border-radius: 17px; }
  .title-layer { padding: 16px; }
  .title-brand { font-size: clamp(34px,10.9vw,66px); }
  .title-subtitle { font-size: clamp(18px,5.4vw,30px); letter-spacing: .06em; }
  .title-play-button { width: 72px; height: 72px; }
  .level-select-layer { place-items: start center; padding: 13px; }
  .level-select-panel { width: min(480px,100%); padding-top: 43px; }
  .level-select-panel h2 { margin-bottom: 10px; font-size: clamp(19px,4.7vw,27px); }
  .level-card-grid { gap: 8px; }
  .level-card { border-radius: 10px; }
  .level-card-body { min-height: 52px; padding: 8px 9px 9px; }
  .level-card-kicker, .level-card small { font-size: 8px; }
  .level-card strong { font-size: 13px; }
  .level-back-button { position: absolute; left: 10px; top: 10px; z-index: 2; width: auto; min-width: 76px; min-height: 39px; margin: 0; padding: 0 12px; }
  .control-cluster { left: 9px; top: auto; bottom: 68px; width: 184px; transform: none; }
  .picker-wrap { grid-template-columns: minmax(105px,1fr) 43px; gap: 7px; padding: 3px 3px 9px; }
  .wheel-shell { max-width: none; }
  .current-paint { grid-column: 1 / -1; width: 100%; grid-template-columns: 39px minmax(0,1fr) 42px; grid-template-rows: 35px 40px; align-items: center; gap: 5px 6px; padding-top: 7px; border-top: 1px solid rgba(151,230,201,.14); }
  .paint-chip { width: 39px; height: 39px; border-radius: 10px; }
  .current-paint .paint-chip { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .current-paint .hex-display { grid-column: 2; grid-row: 1; width: 100%; height: 35px; padding: 0 5px; font-size: 11px; }
  .current-paint .eyedropper-button { grid-column: 3; grid-row: 1; width: 42px; height: 35px; min-height: 35px; border-radius: 9px; }
  .current-paint .eyedropper-button svg { width: 28px; height: 28px; }
  .current-paint .fill-button { grid-column: 2 / 4; grid-row: 2; width: 100%; height: 32px; min-height: 32px; }
  .picker-panel { padding: 8px; border-radius: 15px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .channel-bar-group { gap: 4px; }
  .channel-bar-wrap { min-width: 18px; }
  .channel-shell { width: 13px; min-height: 82px; }
  .channel-handle { width: 25px; }
  .brush-section { margin-top: 8px; padding-top: 8px; }
  .section-heading > span { display: none; }
  .section-heading .text-button { display: inline-flex; align-items: center; min-height: 27px; padding: 0 7px; font-size: 9px; }
  .brush-size-button { min-height: 36px; gap: 3px; }
  .brush-sizes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .brush-dot-small { width: 4px; height: 4px; } .brush-dot-medium { width: 7px; height: 7px; } .brush-dot-large { width: 11px; height: 11px; } .brush-dot-xlarge { width: 16px; height: 16px; }
  .secondary-button { min-height: 34px; padding: 0 5px; font-size: 10px; }
  .fill-button { gap: 3px; }
  .fill-button svg { width: 28px; height: 28px; }
  .fill-color-dot { width: 5px; height: 5px; }
  .fine-tune[hidden] { display: none !important; }
  .fine-tune:not([hidden]) { position: fixed; z-index: 100; display: block !important; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: calc(100vh - 16px); overflow: auto; padding: 14px; border: 1px solid rgba(127,240,197,.2); border-radius: 16px; background: linear-gradient(155deg,rgba(8,21,28,.98),rgba(3,12,17,.97)); box-shadow: 0 18px 42px rgba(0,0,0,.5); }
  .fine-tune-header .icon-button { display: block; }
  .precision-grid { gap: 12px; }
  .slider-group label { grid-template-columns: 13px minmax(50px,1fr) 42px; gap: 5px; }
  .number-box { width: 42px; }
  .chameleon-container { left: var(--character-tablet-x); top: var(--character-tablet-y); width: auto; height: var(--character-tablet-width); }
  .chameleon-container.is-top-left-position { width: auto; height: var(--character-tablet-width); }
  .countdown-display { width: 76px; height: 76px; }
  .countdown-display strong { font-size: 32px; }
  .countdown-display small { margin-top: 4px; font-size: 7px; }
  .spotlight-rig { width: 220px; height: 220px; }
  .spotlight-orb { width: clamp(160px,44vw,210px); }
  .spotlight-cone { width: 430px; height: 200px; }
  .showcase-title { top: 10px; font-size: 21px; }
  .showcase-message { top: 48px; width: calc(100% - 20px); padding: 6px 10px; font-size: 12px; line-height: 1.25; }
  .showcase-action-panel { right: 10px; bottom: 10px; width: min(292px,calc(100% - 20px)); padding: 10px; border-radius: 17px; }
  .showcase-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .showcase-button { min-height: 52px; gap: 6px; padding: 0 8px; font-size: 12px; }
  .showcase-button svg { width: 18px; height: 18px; }
  .placement-countdown { top: 52px; width: 64px; height: 64px; }
  .placement-countdown strong { font-size: 27px; }
}

@media (max-width: 560px) {
  .app-header h1 { max-width: 220px; font-size: 17px; }
  #languageSelect { max-width: 70px; }
  .game-stage { min-height: 0; }
  .level-select-layer { padding: 10px; }
  .level-card-grid { gap: 7px; }
  .control-cluster { width: 166px; }
  .chameleon-container { left: var(--character-compact-x); top: var(--character-compact-y); width: auto; height: var(--character-compact-width); }
  .chameleon-container.is-top-left-position { width: auto; height: var(--character-compact-width); }
  .countdown-display { width: 68px; height: 68px; }
  .countdown-display strong { font-size: 29px; }
  .intro-steps { grid-template-columns: repeat(2,1fr); }
  .showcase-action-panel { width: min(260px,calc(100% - 16px)); right: 8px; bottom: 8px; }
}

@media (max-width: 380px) {
  .level-card-grid { grid-template-columns: 1fr; }
  .showcase-actions { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .header-actions { gap: 6px; }
  #languageSelect, .icon-button.compact { min-width: 42px; height: 42px; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .app-shell {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 0;
  }
  .app-header {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    pointer-events: none;
  }
  .header-actions { pointer-events: auto; }
  .game-stage {
    width: min(100vw, calc(100dvh * 16 / 9));
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .control-cluster {
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: clamp(154px, 23vw, 184px);
    max-height: none;
    transform: none;
  }
  .control-cluster.is-dock-right { left: auto; right: 8px; }
  .picker-panel {
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .picker-wrap { grid-template-columns: minmax(88px,1fr) 37px; }
  .wheel-shell { width: min(100%, 116px); }
  .channel-shell { min-height: 92px; max-height: 128px; }
  .current-paint {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: 36px minmax(0,1fr) 38px;
    grid-template-rows: 32px 36px;
  }
  .chameleon-container,
  .chameleon-container.is-top-left-position {
    width: auto;
    height: min(52vh, 34vw);
  }
}

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