:root{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:#edf2e8;background:#101a22;font-synthesis:none;--mint:#b4f5ce;--muted:#9db3bb;--line:#344a56;--view-h:100dvh}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}body{position:fixed;inset:0;background:radial-gradient(ellipse at 70% 32%,#24454055,transparent 65%),#101a22;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:1px solid var(--line);cursor:pointer;border-radius:12px;background:#1a2b35;touch-action:manipulation;-webkit-touch-callout:none}button:hover:not(:disabled){border-color:#a7c3c4}button:active:not(:disabled){transform:scale(.97)}button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}button:disabled{cursor:default;color:#80959f}button:disabled .item-icon{opacity:.42;filter:saturate(.3)}button:disabled b{color:#99aab1;background:#263640}.app{width:min(100%,560px);height:var(--view-h);height:min(100dvh,var(--view-h));margin:auto;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:grid;grid-template-rows:44px 66px 24px minmax(0,1fr) 34px 62px 64px 23px 16px;gap:7px}header,nav,.hud,footer,.next-row,.board-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}header{white-space:nowrap}.brand{position:relative;flex:1;font-size:21px;font-weight:850;letter-spacing:2px;padding-left:35px;line-height:1.1}.brand img{width:26px;height:30px;position:absolute;left:0;top:1px}.brand small{display:block;margin-top:5px;font-size:7px;font-weight:500;letter-spacing:1.4px;color:var(--muted)}nav{gap:6px}nav button,.home-button{width:40px;height:40px;padding:8px;border-radius:50%;background:transparent;color:#b8cdcf;font-size:20px;flex-shrink:0}header svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}.hud{border-bottom:1px solid var(--line);padding:0 2px 10px}.hud div{min-width:0}.hud small{display:block;font-size:9px;color:var(--muted);letter-spacing:.4px;margin-bottom:5px}.hud strong{display:block;font-size:22px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}.hud .score-stat{flex:1}.hud .score-stat strong{font-size:40px;color:#e8f8e9;letter-spacing:-1px}.hud div:not(:first-child){min-width:48px}.hud strong.long{font-size:12px;letter-spacing:-.5px}.board-meta{font-size:9px;color:var(--muted);white-space:nowrap;gap:4px}#stage.announcement{color:var(--mint);font-size:8px}#incoming-label{font-size:9px}.board-area{display:flex;justify-content:center;align-items:center;min-height:0;min-width:0}#board-wrap{position:relative;aspect-ratio:1;max-width:100%;max-height:100%;padding:8px;border:1px solid #39515c;border-radius:20px;background:linear-gradient(135deg,#263b45,#182b34);box-shadow:0 15px 40px #0004,inset 0 1px #abc5c51a;isolation:isolate;touch-action:none}#board-controls{height:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));gap:5px}.cell{border:1px solid #344e5759;border-radius:8px;min-height:0;min-width:0;padding:0;background:#142630a8;position:relative;display:grid;place-items:center;touch-action:none;box-shadow:inset 0 1px 4px #0002}.cell.filled{background:#1b333c}.gem{width:85%;height:85%;position:relative;display:grid;place-items:center;isolation:isolate;filter:drop-shadow(0 3px 3px #0005)}.gem:before,.gem:after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%);z-index:-1}.gem:before{background:conic-gradient(from 30deg at 50% 48%,#ffffff33 0deg 90deg,#10242c44 90deg 180deg,transparent 180deg 270deg,#ffffff66 270deg),var(--hue)}.gem:after{inset:14%;background:var(--hue);opacity:.55}.symbol{font-size:clamp(13px,4vw,26px);line-height:1;color:#254447;font-weight:600;text-shadow:0 1px #ffffff44}.number{position:absolute;bottom:14%;right:16%;font-size:8px;line-height:1;color:#233b42;opacity:.8}.cell.hazard:after{content:"";position:absolute;inset:3px;border:1px dashed var(--incoming);border-radius:6px;pointer-events:none;opacity:.7}.cell.preview{outline:2px solid var(--mint);outline-offset:-3px}.break-mode #board-wrap{border-color:#f3a6b3;box-shadow:0 0 0 2px #f3a6b322}.break-mode .cell.filled{outline:1px solid #f3a6b388;outline-offset:-2px}#board-effects{pointer-events:none;position:absolute;inset:8px;overflow:hidden;border-radius:10px}#feedback{text-align:center;font-size:11px;line-height:16px;display:flex;align-items:center;justify-content:center;color:#bbd1d3;gap:7px}#feedback:empty{visibility:hidden}#feedback b{color:var(--mint);font-size:10px;white-space:nowrap}.next-row{padding:6px 11px;background:#1a2d36;border:1px solid #38515b;border-radius:14px;justify-content:initial;gap:8px}.next-label,.upcoming-label{font-size:9px;display:flex;align-items:center;gap:8px}.next-label>span{font-size:10px;letter-spacing:1.5px;color:var(--mint);font-weight:700}.next-row small{display:block;font-size:8px;letter-spacing:0;font-weight:400;color:var(--muted);margin-top:4px}.upcoming-label{color:#b7c5c9}.prism{width:45px;height:45px;display:grid;place-items:center;position:relative}.prism .gem{width:100%;height:100%}.prism.mini{width:30px;height:30px}.mini .symbol{font-size:15px}.mini .number{font-size:7px}.queue-arrow{color:#63898b;font-size:23px}.tap-note{font-size:10px;margin-left:auto;color:#d0e4dd;text-align:right}.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.tools button{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 3px;background:linear-gradient(#243944,#182a34);box-shadow:inset 0 1px #a3bfc51a,0 3px 8px #0002;min-width:0}.item-icon{width:36px;height:36px;flex-shrink:0;filter:drop-shadow(0 2px 2px #0005)}.tools button>span{font-size:11px;font-weight:600;text-align:left}.tools small{display:block;font-weight:400;font-size:8px;color:#9ab2bc;margin-top:5px;white-space:nowrap}.tools b{position:absolute;right:4px;top:3px;min-width:17px;height:17px;display:grid;place-items:center;border-radius:6px;background:#b4f5ce;color:#193e33;font-size:10px;font-variant-numeric:tabular-nums}.tools button.active{border-color:#f3a6b3;background:#4b303d}.tools button.active small{color:#ffc2ce}#banner{font-size:9px;color:#92a6af;display:flex;gap:8px;align-items:center;justify-content:center;border:1px dashed #344a56;border-radius:5px}#banner span{font-size:8px;background:#263640;padding:1px 4px}footer{font-size:8px;color:#8ca3ac;white-space:nowrap}
/* Quiet, warm system cards sit outside the midnight play field. */
dialog{border:1px solid #fff8;padding:0;background:#f5f2eb;border-radius:22px;width:min(420px,calc(100% - 24px));max-height:calc(var(--view-h) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden;color:#414744;box-shadow:0 24px 90px #0007;color-scheme:light}dialog::backdrop{background:#07131cba;backdrop-filter:blur(8px)}body.home-screen dialog::backdrop{background:#ece9e2}#modal-content{padding:24px}dialog button{min-height:44px;background:#e6e2d8;border:1px solid #d4cfc3;color:#4b514e;border-radius:11px;font-size:12px}dialog button:disabled{color:#8c8a83;opacity:.65}dialog button:focus-visible{outline-color:#577b68}h1{font-size:25px;font-weight:700;letter-spacing:-.8px;margin:10px 0 14px}h2{font-size:14px;margin:14px 0 7px}p{font-size:13px;line-height:1.7;margin:12px 0}.eyebrow{font-size:9px;letter-spacing:2px;color:#777e73}.dialog-actions{display:flex;gap:8px;margin-top:18px}.dialog-actions button{flex:1;padding:10px 5px}.primary,dialog .primary{background:#426a59;color:#fff;border-color:#426a59;font-weight:700}.wide{display:block;width:100%;padding:10px;margin-top:8px;font-size:12px}.home-logo{display:flex;align-items:center;gap:12px;font-size:36px;font-weight:900;letter-spacing:1px}.home-logo img{background:#152b31;padding:8px;border-radius:14px;width:52px;height:52px}.home-subtitle{color:#777e73;font-size:12px;margin:14px 0 23px}.home-best{display:flex;justify-content:space-between;align-items:center;background:#e8e3d9;border-radius:12px;padding:14px;margin-bottom:18px;font-size:11px}.home-best strong{font-size:26px;font-variant-numeric:tabular-nums;color:#426a59}.home-links{display:flex;gap:8px;margin-top:14px}.home-links button{flex:1}.home-foot{text-align:center;font-size:9px;letter-spacing:1.5px;color:#8a8e85;margin:22px 0 0}.guide-progress{display:flex;gap:5px;margin:10px 0 18px}.guide-progress i{height:3px;flex:1;background:#ddd8cc;border-radius:3px}.guide-progress i.current{background:#426a59}.guide-diagram{display:flex;gap:13px;align-items:center;justify-content:center;background:#192e37;border-radius:15px;padding:16px;color:#edf2e8;min-height:126px}.mini-board{display:grid;grid-template-columns:repeat(3,30px);gap:4px}.mini-cell{width:30px;height:30px;background:#11232d;border:1px solid #39515b;border-radius:5px;display:grid;place-items:center}.mini-cell .symbol{font-size:15px}.mini-cell .number{display:none}.mini-cell.target{border:1px dashed #b4f5ce}.diagram-note{font-size:11px;line-height:1.8;color:#c1d7d5;max-width:150px}.diagram-note b{color:#b4f5ce}.diagram-arrow{font-size:26px;color:#b4f5ce}.guide-tip{background:#e8e3d9;border-radius:10px;padding:10px 12px;font-size:11px;line-height:1.6}.guide-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:10px;color:#7c8178}.guide-footer button{min-height:32px;border:0;background:none;padding:0 8px}.setting{display:flex;align-items:center;justify-content:space-between;min-height:46px;border-bottom:1px solid #ded9ce;font-size:12px}.setting input{accent-color:#426a59;width:22px;height:22px}.notice{background:#e8e3d9;border-radius:10px;padding:12px;font-size:12px}.achievement{font-size:11px;padding:4px 0}.muted{color:#777e73;font-size:11px}.settings-tabs{display:flex;gap:8px;margin-bottom:10px}.settings-tabs button{flex:1;font-size:11px;min-height:38px}.settings-tabs [aria-pressed=true]{background:#d3ded2;color:#345846}[hidden]{display:none!important}
@media(min-width:600px) and (min-height:750px){.app{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));gap:10px;grid-template-rows:52px 80px 26px minmax(0,1fr) 38px 74px 72px 26px 18px}.brand{font-size:26px}.hud .score-stat strong{font-size:48px}.item-icon{width:40px;height:40px}.tools button>span{font-size:13px}.tools small{font-size:10px}.board-meta,#incoming-label{font-size:11px}.next-row{gap:16px}.next-row small{font-size:10px}.next-label,.upcoming-label{font-size:12px}.prism{width:54px;height:54px}.prism.mini{width:36px;height:36px}#feedback{font-size:13px}}
@media(max-height:700px){.app{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));gap:4px;grid-template-rows:40px 48px 20px minmax(0,1fr) 32px 50px 58px 19px 13px}.hud{padding-bottom:6px}.hud .score-stat strong{font-size:30px}.hud strong{font-size:19px}.hud small{font-size:8px;margin-bottom:3px}.brand{font-size:18px}.brand small{font-size:6px}.home-button,nav button{width:36px;height:36px;padding:6px}.next-row{padding:3px 8px}.prism{width:38px;height:38px}.tap-note{font-size:9px}.tap-note small{font-size:7px}.next-label>span{font-size:9px}.tools{gap:5px}.tools button{gap:2px}.item-icon{width:34px;height:34px}.tools button>span{font-size:10px}.tools small{font-size:7px}.tools b{font-size:9px;height:15px;min-width:15px;right:3px;top:2px}#board-wrap{padding:6px;border-radius:15px}#board-controls{gap:4px}.cell{border-radius:6px}#modal-content{padding:20px}h1{font-size:22px;margin:8px 0 12px}.home-subtitle{margin:12px 0 16px}.home-foot{margin-top:16px}.guide-diagram{min-height:112px;padding:10px}p{font-size:12px;line-height:1.65}.guide-progress{margin-bottom:12px}.dialog-actions{margin-top:14px}}
@media(max-width:350px){.brand{padding-left:0}.brand img{display:none}.tools button>span{font-size:9px}.tools small{font-size:6.8px}.tap-note{display:none}.next-row{justify-content:space-between}.board-meta,#incoming-label{font-size:8px}#feedback{font-size:10px}.hud div:not(:first-child){min-width:43px}.symbol{font-size:15px}.number{font-size:7px}.home-logo{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.reduced *,body.reduced *:after{animation:none!important;transition:none!important}
@media(max-height:700px){.home-logo{margin:6px 0;font-size:30px}.home-logo img{width:44px;height:44px}.home-subtitle{margin:8px 0 12px;line-height:1.5}.home-best{padding:10px;margin-bottom:10px}.home-best strong{font-size:24px}.home-links{margin-top:10px}.home-foot{display:none}}
.home-best strong.long{font-size:14px;letter-spacing:-.5px}
.hud{display:grid;grid-template-columns:1.6fr 1.1fr 1fr .7fr}.hud strong{overflow:hidden;text-overflow:ellipsis}.hud div:not(:first-child){min-width:0}.board-meta #stage{min-width:0;overflow:hidden;text-overflow:ellipsis}#incoming-label{flex-shrink:0}

.cell:hover:not(:disabled){border-color:#344e5759}
/* v2.2: staged prism playback. All coordinates are measured cell rectangles. */
#board-effects{inset:0;z-index:3;overflow:hidden;border-radius:inherit;contain:layout paint;pointer-events:none}
#board-effects *{pointer-events:none}
.fx-ghost{position:absolute;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:#1b333c;isolation:isolate}
.fx-ghost .gem{filter:drop-shadow(0 2px 3px #0007)}
.fx-place{animation:fx-place 200ms cubic-bezier(.16,.8,.24,1) both}
.fx-place-halo{position:absolute;border:2px solid var(--hue);border-radius:35%;box-shadow:0 0 12px var(--hue),inset 0 0 8px var(--hue);animation:fx-seat 210ms ease-out both}
.fx-break{z-index:3;animation:fx-break 230ms cubic-bezier(.2,.7,.3,1) forwards}
.fx-break .gem{filter:drop-shadow(0 0 9px var(--hue)) brightness(1.65)}
.fx-break:before{content:"";position:absolute;inset:-12%;border:2px solid var(--hue);border-radius:50%;box-shadow:0 0 13px var(--hue),inset 0 0 9px var(--hue);animation:fx-ring 230ms ease-out both}
.fx-break:after{content:"";position:absolute;inset:12%;background:#fffbed;clip-path:polygon(48% 0,57% 39%,100% 24%,62% 51%,95% 88%,55% 64%,39% 100%,43% 58%,0 62%,38% 44%);filter:drop-shadow(0 0 5px white)}
.fx-shard{position:absolute;z-index:4;width:7px;height:13px;margin:-6px -3px;background:linear-gradient(120deg,#fff,var(--hue) 40%,var(--hue));clip-path:polygon(50% 0,100% 45%,20% 100%,0 30%);animation:fx-shard 360ms cubic-bezier(.12,.7,.3,1) both}
.fx-trail{position:absolute;z-index:5;height:4px;margin-top:-2px;transform-origin:0 50%;color:var(--hue);background:linear-gradient(90deg,transparent,currentColor 40%,#fff);border-radius:50%;box-shadow:0 0 8px 2px var(--hue);animation:fx-travel 170ms linear both}
.fx-trail:after{content:"";position:absolute;right:0;top:-2px;width:8px;height:8px;background:#fff;border:2px solid var(--hue);border-radius:50%;box-shadow:0 0 10px var(--hue)}
.fx-total{position:absolute;z-index:8;left:50%;white-space:nowrap;text-align:center;pointer-events:none;font-variant-numeric:tabular-nums}
.fx-total{top:38%;color:#effff5;font-size:clamp(30px,9vw,48px);font-weight:850;letter-spacing:-1px;text-shadow:0 2px 3px #10242c,0 0 18px #a5ffc8;animation:fx-earned 350ms ease-out both}
.fx-pulse{position:absolute;left:50%;top:50%;width:clamp(56px,23%,112px);aspect-ratio:1;z-index:1;transform:translate(-50%,-50%);animation:fx-pulse 260ms ease-out both}
.fx-pulse svg,.fx-rewind svg{width:100%;height:100%;fill:none;stroke:var(--hue,#c5baf8);stroke-width:1.2;filter:drop-shadow(0 0 3px var(--hue,#c5baf8))}
.fx-pulse circle:nth-child(2){stroke-width:.5;stroke-dasharray:2 8}
.fx-rewind{position:absolute;inset:24%;z-index:6;animation:fx-reverse 520ms ease-out both}
.fx-rewind svg{stroke-width:2;stroke-linecap:round}
.fx-swap{animation:fx-flip 320ms ease-in-out both}
.fx-score{animation:fx-score 300ms ease-out both;transform-origin:left center}
.fx-stage{animation:fx-stage 800ms ease-out both}
.fx-impact{animation:fx-impact 160ms linear}
.fx-static{position:absolute;border:3px solid var(--hue);border-radius:7px;background:color-mix(in srgb,var(--hue),transparent 75%)}
.fx-still{top:7%;transform:translateX(-50%);font-size:14px;letter-spacing:0;background:#10242c;padding:8px;border:1px solid #e5fff0;border-radius:10px;animation:none}
@keyframes fx-place{0%{transform:scale(.65,.8);filter:brightness(1.3)}55%{transform:scale(1.12,.94)}80%{transform:scale(.98,1.05)}100%{transform:scale(1)}}
@keyframes fx-seat{0%{opacity:.9;transform:scale(.65)}100%{opacity:0;transform:scale(1.4)}}
@keyframes fx-break{0%{opacity:1;transform:scale(1)}28%{opacity:1;transform:scale(1.18);filter:brightness(1.2)}65%{opacity:.85;transform:scale(.94)}100%{opacity:0;transform:scale(.4)}}
@keyframes fx-ring{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.55)}}
@keyframes fx-shard{0%{opacity:1;transform:translate(0,0) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.3)}}
@keyframes fx-travel{0%{opacity:0;clip-path:inset(-10px 95% -10px 0)}15%{opacity:1}70%{opacity:1;clip-path:inset(-10px 0 -10px 45%)}100%{opacity:0;clip-path:inset(-10px -10px -10px 100%)}}
@keyframes fx-earned{0%{opacity:0;transform:translate(-50%,8px) scale(.85)}25%{opacity:1;transform:translate(-50%,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px) scale(1.04)}}
@keyframes fx-pulse{0%{opacity:.95;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes fx-reverse{0%{opacity:0;transform:rotate(80deg) scale(.9)}25%{opacity:.8}100%{opacity:0;transform:rotate(-80deg) scale(1.05)}}
@keyframes fx-flip{0%{transform:perspective(200px) rotateY(-90deg) scale(.9)}65%{transform:perspective(200px) rotateY(12deg) scale(1.08)}100%{transform:rotateY(0)}}
@keyframes fx-score{35%{color:#b4ffd8;text-shadow:0 0 14px #a2ffd6;transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes fx-stage{25%,75%{color:#fff4bf;text-shadow:0 0 12px #ffd788}}
@keyframes fx-impact{25%{transform:translateX(1px)}75%{transform:translateX(-1px)}}
@media(max-width:350px){.fx-combo{padding:4px 9px;font-size:11px}.fx-milestone{font-size:10px}.fx-shard{width:5px;height:10px}}
/* Hide only the committed placement's paint while its transient prism seats. */
.cell.fx-seat-target>.gem{visibility:hidden}
/* Persistent residue is quiet and turn based; arrival keeps its dashed square. */
.charged>.gem,.preview-residue>.gem{border-radius:32%;outline:1px solid #ffe2a0;box-shadow:0 0 5px #ffd27688}
.residue-marker{position:absolute;top:0;right:0;z-index:2;border-radius:4px;background:#263530;color:#ffe2a0;padding:1px 2px;font-size:9px;line-height:11px;font-weight:700;pointer-events:none}
.preview-residue .residue-marker{background:#ffe2a0;color:#263530}
.mini-cell{position:relative}
.mini-cell .residue-marker{font-size:8px;line-height:9px}
/* Pressure candidate: uses only the existing board-meta slot. */
#heat-hud{flex:0 1 142px;min-width:112px;text-align:center;color:#c4efda;font-size:10px;line-height:13px;font-variant-numeric:tabular-nums}
#heat-hud[hidden]{display:none}
#heat-meter{position:relative;height:3px;overflow:hidden;border-radius:4px;background:#3b505b}
#heat-meter i{position:absolute;left:0;top:0;height:100%;border-radius:4px}
#heat-fill{background:linear-gradient(90deg,#9bdbbc,#e5bf77 70%,#f38e9f);transition:width 180ms ease-out}
#heat-projection{display:none;background:#f4d59b;border-right:2px solid #fff}
#heat-hud.forecast #heat-projection{display:block;opacity:.7}
#heat-hud.cooling #heat-projection{background:#b4f5ce;opacity:1}
#heat-hud.stable{color:#adbec4}#heat-hud.stable #heat-meter{background:#53636b}
#heat-hud.warning{color:#f7ce89;text-shadow:0 0 8px #e5b26366}
#heat-hud.critical{color:#ffacb5;text-shadow:0 0 8px #f1778866}
.heat-guide{display:grid;gap:8px;font-size:11px;color:#b9d3ce;text-align:center}.heat-guide strong{color:#f5c98d;font-size:18px}.heat-guide span{line-height:1.5;color:#b4f5ce}
@media(max-width:350px){#heat-hud{min-width:112px;font-size:9px;flex-basis:112px}.board-meta #stage{flex:1}}

/* Compact play surface: real controls only, no empty advertising placeholders. */
body.no-banner .app{grid-template-rows:44px 66px 24px minmax(0,1fr) 24px 62px 64px 16px}
#banner[hidden]{display:none!important}
.home-logo{margin-bottom:24px}
.guide-line{min-height:42px;text-align:center;line-height:1.6}
.guide-tools{text-align:center;font-size:12px;line-height:1.8}
.guide-tools small{font-size:11px;color:#6e776f}
.guide-footer{justify-content:flex-end}
.arrival-shape{position:absolute;inset:27%;opacity:.35;pointer-events:none}
.arrival-shape .gem{width:100%;height:100%}
.arrival-shape .number{display:none}
.cell.hazard:after{opacity:.95}
.result-stats{display:flex;justify-content:space-around;gap:10px;margin:22px 0;font-size:11px;color:#6b776f}
.result-stats strong{display:block;font-size:24px;color:#34594a;margin-bottom:6px}
.cell.fx-arrival-target>.gem{visibility:hidden}
.fx-arrive{animation:fx-arrive 220ms ease-out both}
.fx-charge{box-shadow:inset 0 0 15px #ffe3a077}
@keyframes fx-arrive{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@media(min-width:600px) and (min-height:750px){body.no-banner .app{grid-template-rows:52px 80px 26px minmax(0,1fr) 28px 74px 72px 18px}}
@media(max-height:700px){body.no-banner .app{grid-template-rows:40px 48px 20px minmax(0,1fr) 22px 50px 58px 13px}.home-logo{margin-bottom:18px}.guide-line{min-height:32px;font-size:12px}}

.hud strong{white-space:nowrap;text-overflow:clip}

/* 2.5.2: readable forecasts, deliberate placement and compact record feedback. */
body.no-banner .app{grid-template-rows:44px 66px 32px minmax(0,1fr) 24px 62px 64px 16px}
.board-meta{font-size:10px;gap:6px;align-items:center}
#stage{flex:1;font-size:10px;letter-spacing:-.2px}
#heat-hud{flex:0 1 116px;min-width:94px;font-size:11px;line-height:15px}
#heat-meter{height:4px;margin-top:3px}
#incoming-label{font-size:11px;font-weight:650;color:#d3e3e9;border:1px solid #48616b;padding:5px 7px;border-radius:8px;background:#1c3039}
#incoming-label.imminent{color:#ffe1ac;border-color:#ad8955;background:#453823}
.cell.hazard{background:linear-gradient(135deg,#29404b77,#20333d66)}
.cell.hazard:after,.cell.preview-incoming:after{content:"";position:absolute;inset:3px;border:1.5px dashed var(--incoming);border-radius:6px;pointer-events:none;opacity:1}
.arrival-shape{inset:23%;opacity:.72;filter:saturate(1.1)}
.arrival-shape>.gem{filter:none}
.arrival-shape .symbol{font-size:clamp(12px,3vw,18px);font-weight:800}
.cell.charged{background:linear-gradient(140deg,#695b393f,#1b333c);border-color:#d5b770}
.charged>.gem{outline:1.5px solid #ffe2a0;box-shadow:0 0 8px #ffd27666}
.residue-marker{font-size:10px;line-height:12px;min-width:12px;background:#ffe2a0;color:#3c3423;box-shadow:0 1px 2px #0005}
#board-wrap.danger{border-color:#c18e66;box-shadow:0 0 0 1px #d1956740,0 15px 40px #0004}
.next-row{gap:7px}
.next-label{padding-right:10px;border-right:1px solid #405862;gap:6px}
.next-label>span{font-size:12px;letter-spacing:0}
.next-label small{display:none}
.upcoming-label{gap:5px;font-size:11px}
.upcoming-label small{display:none}
.queue-arrow{display:none}
.preview-actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.preview-actions button{height:42px;min-width:68px;padding:6px 7px;font-size:11px;color:#dbebe5;border-color:#56766c;background:#28443d}
.preview-actions #preview-cancel{font-size:20px;min-width:28px;width:28px;padding:0;background:transparent;border-color:#52656e;color:#c4d7d8}
#preview-action[aria-pressed=true]{background:#b4f5ce;color:#163b2d;border-color:#b4f5ce;font-weight:750}
.previewing .cell{opacity:.68}
.previewing .cell.preview,.previewing .cell.preview-target,.previewing .cell.preview-incoming,.previewing .cell.preview-residue{opacity:1}
.cell.preview-target{outline:2px solid #f0fff4;outline-offset:-2px;background:#39584c}
.preview-placement{position:absolute;inset:5%;display:grid;place-items:center;pointer-events:none;opacity:.85}
.cell.preview{outline:2px solid #b4f5ce;outline-offset:-2px}
.cell.preview[data-preview-wave]:before{content:attr(data-preview-wave);position:absolute;left:1px;top:1px;width:13px;height:13px;display:grid;place-items:center;border-radius:4px;background:#c4f5d5;color:#153e2b;font-size:9px;font-weight:800;z-index:5;pointer-events:none}
.projected-arrival{inset:20%;z-index:4}
.cell.preview .projected-arrival{inset:auto 1px 1px auto;width:40%;height:40%;opacity:1;background:#172d36;border-radius:4px}
.cell.preview .projected-arrival .symbol{font-size:10px}
.record-set small{color:#ffe0a1}
.fx-record{animation:record-glow 650ms ease-out}
@keyframes record-glow{40%{color:#ffe0a1;text-shadow:0 0 15px #ffda84}100%{text-shadow:none}}
.fx-total{font-size:clamp(23px,7vw,36px);text-shadow:0 2px 3px #10242c,0 0 10px #a5ffc8}
.fx-pulse-small{opacity:.8}
.fx-pulse-small svg{stroke-width:1.6}
.result-record{font-size:13px;font-weight:650;margin:4px 0 0;color:#67756e}
.result-record.best,.result-record.first{color:#426a59}
.result-score{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.recent-runs{display:flex;align-items:center;gap:16px;padding:10px 12px;border-radius:10px;background:#e8e4da;font-size:11px;color:#657269;margin-top:14px}
.run-bars{display:flex;align-items:flex-end;gap:6px;flex:1;height:30px}
.run-bars i{height:var(--run-height);min-height:2px;flex:1;border-radius:3px 3px 0 0;background:#b8c4b5}
.run-bars i.current{background:#426a59}
@media(max-height:700px){body.no-banner .app{grid-template-rows:40px 48px 28px minmax(0,1fr) 22px 50px 58px 13px}.preview-actions button{height:36px}.next-label{padding-right:6px}.next-label>span{font-size:11px}.result-stats{margin:16px 0}.result-stats strong{font-size:21px}.recent-runs{margin-top:10px;padding:8px 10px}.run-bars{height:24px}}
@media(max-width:350px){.board-meta{gap:4px}#stage{font-size:9px}#heat-hud{min-width:82px;flex-basis:94px;font-size:10px}#incoming-label{font-size:10px;padding:4px 5px}.next-row{gap:5px}.next-label{gap:4px;padding-right:6px}.upcoming-label{gap:3px;font-size:10px}.preview-actions button{min-width:65px;padding:4px;font-size:10px}.preview-actions{gap:3px}.preview-actions #preview-cancel{min-width:24px;width:24px}.prism.mini{width:26px;height:26px}}
@media(min-width:600px) and (min-height:750px){body.no-banner .app{grid-template-rows:52px 80px 34px minmax(0,1fr) 28px 74px 72px 18px}#stage,#incoming-label{font-size:12px}#heat-hud{font-size:12px;flex-basis:145px}.preview-actions button{height:46px;font-size:13px;min-width:88px}}

/* Visual first-three-placement hints, no extra overlays or forced tutorial mode. */
.cell.guide-target{border-color:#b4f5ce;box-shadow:inset 0 0 0 2px #b4f5ce77,0 0 12px #b4f5ce33}
.cell.guide-target:before{content:"";position:absolute;inset:-3px;border-radius:9px;border:2px solid #b4f5ce;opacity:.85;pointer-events:none;animation:guide-pulse 1300ms ease-in-out infinite}
.guide-ghost{position:absolute;inset:13%;display:grid;place-items:center;opacity:.68;pointer-events:none}
.guide-ghost .gem{width:100%;height:100%}
@keyframes guide-pulse{0%,100%{opacity:.3;transform:scale(.94)}50%{opacity:1;transform:scale(1.03)}}
.guide-compare{display:flex;gap:9px;align-items:center;justify-content:center;width:100%}
.guide-compare .mini-board{grid-template-columns:repeat(3,26px);gap:3px;flex-shrink:0}
.guide-compare .mini-cell{width:26px;height:26px}
.guide-compare .mini-cell .gem{width:85%;height:85%}
.guide-compare .mini-cell .symbol{font-size:13px}
.guide-arrow{font-size:22px;color:#b4f5ce;flex-shrink:0}
@media(max-width:350px){.guide-compare{gap:5px}.guide-compare .mini-board{grid-template-columns:repeat(3,24px);gap:2px}.guide-compare .mini-cell{width:24px;height:24px}.guide-diagram{padding:9px}}
@media(prefers-reduced-motion:reduce){.cell.guide-target:before{animation:none!important;opacity:1}}
body.reduced .cell.guide-target:before{animation:none!important;opacity:1}

/* 2.7: hands-on, paused cause-and-effect lessons; no full-screen text overlays. */
.lesson-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lesson-top button{width:32px;height:32px;padding:0;border-radius:50%;font-size:23px;line-height:1}
.lesson-title{font-size:22px!important;line-height:1.3;margin:9px 0 10px!important}
.lesson-progress{display:flex;gap:5px;margin-bottom:12px}.lesson-progress i{height:3px;background:#c6c9c1;flex:1}.lesson-progress .current{background:#426d5e}
.lesson-board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:9px;width:min(100%,280px);aspect-ratio:1;margin:0 auto;background:#172e38;border-radius:16px;box-sizing:border-box}
.lesson-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:5px!important;border:1px solid #425660;border-radius:7px;background:#203640!important;color:#e9fbef;opacity:1!important}
.lesson-cell:disabled{cursor:default}.lesson-cell .gem{width:100%;height:100%;display:grid;place-items:center}.lesson-cell .symbol{font-size:20px}.lesson-cell .number{display:none}
.lesson-cell.lesson-focus{border-color:#f5ce88;box-shadow:inset 0 0 0 2px #f5ce8855}.lesson-cell.lesson-target{border:2px solid #a5e9c5;box-shadow:0 0 10px #a5e9c544;cursor:pointer}
.lesson-ghost{display:grid;place-items:center;opacity:.7;width:100%;height:100%}.lesson-star-mark{position:absolute;right:-2px;top:-4px;color:#172e38;background:#f5ce88;border-radius:50%;width:18px;height:18px;font-size:15px;line-height:18px;z-index:3}
.lesson-hit-count{position:absolute;left:0;bottom:0;background:#f7ecd2;color:#243d35;border-radius:4px;padding:0 3px;line-height:16px;font-size:10px;font-weight:800;z-index:4}
.lesson-arrows{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);pointer-events:none;overflow:visible;z-index:5}
.lesson-arrows>path{fill:none;stroke:#f5ce88;stroke-width:1.3;marker-end:url(#lesson-arrow);stroke-linecap:round;filter:drop-shadow(0 0 1px #172e38)}.lesson-arrows marker path{fill:#f5ce88}
.lesson-caption{font-size:14px;line-height:1.5;min-height:44px;margin:12px 0;text-align:center;color:#304b43;word-break:keep-all}
.record-list{display:grid;gap:8px;margin:14px 0}.record-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:12px;background:#e5e3d9;padding:10px 12px;text-align:left}
.record-row strong{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.15}.record-row strong small{font-size:12px;margin-left:3px}.record-row span{display:block;font-size:11px;margin-top:5px;color:#58645b}
.record-row time{font-size:12px;white-space:nowrap;color:#536359}.record-row time small{display:block;font-size:10px;margin-top:4px}.record-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:8px 0}.record-pages button{padding:6px 14px}
.empty-records{text-align:center;color:#657168;padding:25px 0}.record-question{font-size:24px!important;line-height:1.3}.result-score{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.1}.result-score small{font-size:16px;margin-left:5px}#record-error:empty{display:none}#record-error{color:#9e2c35;font-size:12px;margin:12px 0 0}
@media(max-height:670px){.lesson-title{font-size:19px!important}.lesson-board{width:min(100%,220px);gap:4px;padding:8px}.lesson-arrows{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}.lesson-caption{font-size:12px;min-height:36px;margin:9px 0}.lesson-progress{margin-bottom:8px}.record-row{padding:7px 10px}.record-list{gap:5px;margin:9px 0}.record-row strong{font-size:19px}}

.record-row>div{min-width:0}.record-row strong{overflow-wrap:anywhere}

/* Rules 6: real pointy hexagons, staggered centers and clipped pointer hit areas. */
:root{--hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hex-mode #board-wrap{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.hex-mode #board-controls{position:absolute;inset:0;display:block;height:100%}
.hex-mode .cell{position:absolute;display:grid;place-items:center;border:0;border-radius:0;padding:0;clip-path:var(--hex);background:#48616b;box-shadow:none;isolation:isolate;overflow:hidden;transform:none}
.hex-mode .cell:before{content:"";position:absolute;inset:1.3px;clip-path:var(--hex);border:0;border-radius:0;background:#192e38;z-index:-1;animation:none;opacity:1;transform:none}
.hex-mode .cell:after{display:none}
.hex-mode .cell.filled{background:color-mix(in srgb,var(--hue),white 24%)}
.hex-mode .cell.filled:before{background:linear-gradient(135deg,#ffffff35,#00000013),var(--hue)}
.hex-mode .cell>.gem{width:100%;height:100%;filter:none}
.hex-mode .cell>.gem:before,.hex-mode .cell>.gem:after{display:none}
.hex-mode .cell .number{display:none}
.hex-mode .cell>.gem .symbol{font-size:clamp(13px,4vw,25px);color:#294846;text-shadow:0 1px #ffffff66}
.hex-mode .cell.hazard{background:var(--incoming)}
.hex-mode .cell.hazard:before{background:linear-gradient(140deg,#243d48,#182c35);inset:1.5px}
.hex-mode .arrival-shape{inset:22%;opacity:.65}
.hex-mode .cell.hazard:after{content:"";display:block;position:absolute;inset:10%;clip-path:var(--hex);background:repeating-conic-gradient(from 30deg,transparent 0 48deg,var(--incoming) 48deg 60deg);opacity:.35;border:0;border-radius:0;pointer-events:none;z-index:-1}
.hex-mode .cell.guide-target,.hex-mode .cell.preview-target{background:#e8fff0;box-shadow:none;outline:none}
.hex-mode .cell.guide-target:before,.hex-mode .cell.preview-target:before{inset:2px;background:#38594e}
.hex-mode .cell.preview{background:#e0ffe9;outline:none}
.hex-mode .cell.preview:before{content:"";inset:2px;width:auto;height:auto;background:linear-gradient(135deg,#ffffff55,#00000008),var(--hue);font-size:0}
.hex-mode .cell.preview-target:before{background:#38594e}
.hex-mode .cell.preview-incoming{background:var(--incoming)}
.hex-mode .cell.preview-incoming:after{display:none}
.hex-mode .cell:focus-visible{background:#fff;outline:none;filter:brightness(1.12)}
.hex-mode .cell:focus-visible:before{inset:2.5px}
.hex-mode #board-effects{border-radius:0}
.hex-mode .fx-ghost,.hex-mode .fx-static,.hex-mode .fx-place-halo{clip-path:var(--hex);border-radius:0;background:var(--hue);border:0}
.hex-mode .fx-ghost>.gem{width:100%;height:100%;filter:none}
.hex-mode .fx-ghost>.gem:before,.hex-mode .fx-ghost>.gem:after{display:none}
.hex-mode .fx-ghost .number{display:none}
.hex-mode .fx-place-halo{background:color-mix(in srgb,var(--hue),transparent 65%)}
.hex-mode #board-wrap.danger{border:0;box-shadow:none}
.hex-mode #board-wrap.danger .cell:not(.filled){background:#a37a55}
.hex-mode.break-mode .cell.filled{background:#ffe3e8}
.hex-mode.break-mode .cell.filled:before{inset:3px}
.hex-demo{position:relative;aspect-ratio:1;width:min(100%,260px);margin:8px auto;background:#172e38;border-radius:16px}
.hex-demo-cell{position:absolute;min-height:0!important;border:0!important;border-radius:0;clip-path:var(--hex);padding:0!important;display:grid;place-items:center;background:#4c626a!important;isolation:isolate;opacity:1!important;transform:none!important}
.hex-demo-cell:before{content:"";position:absolute;inset:1px;clip-path:var(--hex);background:#213943;z-index:-1}
.hex-demo-cell.filled:before{background:linear-gradient(135deg,#ffffff35,#00000013),var(--hue)}
.hex-demo-cell>.gem{width:100%;height:100%;filter:none}
.hex-demo-cell>.gem:before,.hex-demo-cell>.gem:after{display:none}
.hex-demo-cell .number{display:none}
.hex-demo-cell .symbol{font-size:26px}
.hex-demo-cell.lesson-target{background:#dcffea!important;cursor:pointer}
.hex-demo-cell.lesson-target:before{inset:2px;background:#34594b}
.hex-demo-cell .lesson-ghost{width:72%;height:72%}
@media(max-height:670px){.hex-demo{width:min(100%,200px)}.hex-demo-cell .symbol{font-size:22px}}
/* Forecasts retain the tile symbol; no leftover square wave-number overlay. */
.hex-mode .cell.preview[data-preview-wave]:before{content:"";inset:2px;width:auto;height:auto;z-index:-1;border-radius:0;display:block;font-size:0}
.hex-mode .cell.hazard:after{display:none}
dialog:focus{outline:none}

/* 2.8.1: local hex impact. No screen shake, chain labels, gameplay delays or idle flashing. */
.hex-fx-tile{will-change:transform,opacity;transform-origin:center}
.hex-mode .hex-fx-tile>.gem{width:100%;height:100%}
.hex-fx-seat{animation:hex-seat 170ms cubic-bezier(.16,.8,.26,1) both}
.hex-fx-arrive{animation:hex-arrive 170ms ease-out both}
.hex-fx-pop{animation:hex-pop 380ms cubic-bezier(.18,.75,.3,1) forwards;z-index:4}
.hex-fx-pop>.gem{filter:brightness(1.12)!important}
.hex-fx-glint{position:absolute;clip-path:var(--hex);background:linear-gradient(125deg,#fff4dfb0 0%,#fff4df50 33%,transparent 65%);z-index:5;animation:hex-glint 350ms ease-out both}
.hex-fx-rim{position:absolute;color:var(--hue);pointer-events:none;transform-origin:center;z-index:3}
.hex-fx-rim svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.hex-fx-seat-rim{animation:hex-seat-ring 300ms ease-out both;opacity:.65}
.hex-fx-ring{animation:hex-ring 520ms ease-out both;animation-delay:var(--ring-delay,0ms)}
.hex-fx-ring[data-tier="3"]{color:#ffe3b2}
.hex-fx-ring[data-tier="3"] svg{stroke-width:1.8}
.hex-fx-bloom{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,var(--hue) 0%,color-mix(in srgb,var(--hue),transparent 75%) 28%,transparent 66%);animation:hex-bloom 520ms ease-out both;z-index:1}
.hex-fx-fragment{position:absolute;z-index:6;pointer-events:none;background:linear-gradient(130deg,#fff9e4,var(--hue) 45%);clip-path:polygon(50% 0,100% 40%,65% 100%,0 65%);animation:hex-fragment 520ms cubic-bezier(.1,.65,.2,1) both;will-change:transform,opacity}
.hex-fx-dust{clip-path:none;border-radius:50%;background:var(--hue);box-shadow:0 0 4px color-mix(in srgb,var(--hue),transparent 30%)}
.fx-total.hex-fx-earned{font-size:clamp(23px,6.5vw,34px);letter-spacing:-.7px;line-height:1.1;color:#e8fff0;text-shadow:0 2px 3px #10242c,0 0 8px #224b39;animation:hex-earned 760ms cubic-bezier(.15,.65,.25,1) both}
.fx-total.hex-fx-earned[data-tier="2"]{font-size:clamp(28px,8vw,42px);font-weight:850}
.fx-total.hex-fx-earned[data-tier="3"]{font-size:clamp(33px,9vw,48px);color:#ffe6b3;text-shadow:0 2px 4px #18242c,0 0 12px #846a3644;font-weight:900}
.hex-fx-score{animation:hex-score 380ms ease-out both;transform-origin:left center}
.hex-fx-score-large{animation:hex-score-large 480ms ease-out both;transform-origin:left center}
.hex-fx-next{animation:hex-next 650ms ease-out both}
@keyframes hex-seat{0%{opacity:.45;transform:translateY(-7px) scale(.78)}55%{opacity:1;transform:translateY(1px) scale(1.055,.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hex-arrive{0%{opacity:0;transform:scale(.7)}75%{opacity:1;transform:scale(1.025)}100%{opacity:1;transform:scale(1)}}
@keyframes hex-pop{0%{opacity:1;transform:scale(1)}22%{opacity:1;transform:scale(var(--impact-scale,1.14))}48%{opacity:.75;transform:scale(1.03)}100%{opacity:0;transform:scale(.22)}}
@keyframes hex-glint{0%{opacity:0;transform:scale(.94)}25%{opacity:.68;transform:scale(1.05)}100%{opacity:0;transform:scale(.65)}}
@keyframes hex-seat-ring{0%{opacity:.65;transform:scale(.85)}100%{opacity:0;transform:scale(1.28)}}
@keyframes hex-ring{0%{opacity:.52;transform:scale(.65)}30%{opacity:.4}100%{opacity:0;transform:scale(1.25)}}
@keyframes hex-bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}30%{opacity:var(--bloom-opacity,.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)}}
@keyframes hex-fragment{0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(0deg)}14%{opacity:.9}100%{opacity:0;transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(.1) rotate(var(--spin))}}
@keyframes hex-earned{0%{opacity:0;transform:translate(-50%,8px) scale(.82)}17%{opacity:1;transform:translate(-50%,-3px) scale(1.035)}35%{opacity:1;transform:translate(-50%,-7px) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-36px) scale(.98)}}
@keyframes hex-score{30%{color:#c5f8d6;transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes hex-score-large{30%{color:#ffe2ad;transform:scale(1.055);text-shadow:0 0 9px #b58e4c44}100%{transform:scale(1);text-shadow:none}}
@keyframes hex-next{30%{filter:brightness(1.25);transform:scale(1.05)}100%{filter:none;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hex-fx-fragment,.hex-fx-bloom,.hex-fx-rim,.hex-fx-glint{display:none!important}}
body.reduced .hex-fx-fragment,body.reduced .hex-fx-bloom,body.reduced .hex-fx-rim,body.reduced .hex-fx-glint{display:none!important}

/* 2.9: one raised ceramic material across placed, queued, preview and effect tiles.
   Paint is inset; real six-sided hit polygons, coordinates and controls are unchanged. */
.hex-mode .cell.filled{background:#0a2029;box-shadow:none}
.hex-mode .cell.filled:before{inset:1px;background:linear-gradient(#102b35,#0c222c)}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem),
.hex-demo-cell.filled>.gem,.hex-demo-cell .lesson-ghost>.gem{
 display:grid;place-items:center;position:relative;isolation:isolate;width:96%;height:97%;
 clip-path:var(--hex);background:color-mix(in srgb,var(--hue) 42%,#06202a);
 filter:none;border:0;border-radius:0;outline:0;box-shadow:none;
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem):before,
.hex-demo-cell.filled>.gem:before,.hex-demo-cell .lesson-ghost>.gem:before{
 content:"";display:block;position:absolute;inset:0 0 8%;z-index:-1;clip-path:var(--hex);opacity:1;
 background:linear-gradient(125deg,#ffffff30,transparent 48%,#00131e14),
 conic-gradient(from 0deg at 50% 50%,color-mix(in srgb,var(--hue) 76%,white) 0deg 60deg,
 var(--hue) 60deg 120deg,color-mix(in srgb,var(--hue) 62%,#173344) 120deg 180deg,
 color-mix(in srgb,var(--hue) 75%,#173344) 180deg 240deg,
 color-mix(in srgb,var(--hue) 88%,white) 240deg 300deg,color-mix(in srgb,var(--hue) 48%,white) 300deg 360deg);
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem):after,
.hex-demo-cell.filled>.gem:after,.hex-demo-cell .lesson-ghost>.gem:after{
 content:"";display:block;position:absolute;inset:12% 12% 20%;z-index:-1;clip-path:var(--hex);opacity:1;
 background:radial-gradient(ellipse at 24% 16%,#ffffff42,transparent 67%),
 linear-gradient(145deg,color-mix(in srgb,var(--hue) 88%,white),var(--hue) 48%,color-mix(in srgb,var(--hue) 87%,#26404d));
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem) .symbol,
.hex-demo-cell .symbol{position:relative;z-index:1;transform:translateY(-5%);color:#183c45;font-weight:700;text-shadow:0 1px #ffffff70,0 -1px #17364220}
.hex-mode .fx-ghost{background:transparent}
.hex-mode .cell.preview.filled{background:#ddffeb}
.hex-mode .cell.preview.filled>.gem{width:88%;height:89%}
.hex-mode.break-mode .cell.filled{background:#ffe3e8}
.hex-mode.break-mode .cell.filled>.gem{width:87%;height:88%}
.hex-mode .cell:focus-visible.filled{background:#fff}
.hex-mode .cell:focus-visible.filled>.gem{width:88%;height:89%}
.hex-mode .arrival-shape{opacity:.60}
.hex-mode .cell .number,.hex-mode .fx-ghost .number{display:none}
.score-examples{display:flex;justify-content:center;gap:7px;margin:8px 0 2px;color:#59685d;font-size:11px;line-height:1.5}
.score-examples span{padding:5px 10px;border:1px solid #d5d9cc;background:#e8ebdf;border-radius:8px}
.score-examples b{font-size:15px;color:#345b49;margin-left:4px;font-variant-numeric:tabular-nums}
@media(max-height:670px){.score-examples{margin:5px 0 0;gap:5px}.score-examples span{padding:3px 8px}.score-examples b{font-size:13px}.hex-demo{width:min(100%,185px)}}

/* 2.9.1: three evenly spaced statistics; board, controls, no metadata/footer row. */
.app,body.no-banner .app{grid-template-rows:44px 66px minmax(0,1fr) 24px 62px 64px}
.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center;text-align:center;padding:0 0 10px}
.hud>div,.hud>div:not(:first-child){display:grid;grid-template-rows:14px 38px;align-items:center;min-width:0}
.hud small{font-size:10px;line-height:14px;letter-spacing:.3px;margin:0}
.hud strong,.hud .score-stat strong,.hud strong.long{font-size:32px;font-weight:650;line-height:38px;letter-spacing:-.6px;white-space:nowrap;min-width:0;text-align:center;font-variant-numeric:tabular-nums}
.hud .score-stat strong{color:#e8f8e9}
.board-area{position:relative}
/* Preserve the genuinely gameplay-relevant meter only when resuming old pressure rules. */
.board-area>#heat-hud{position:absolute;top:0;left:50%;transform:translateX(-50%);width:160px;max-width:70%;z-index:4;pointer-events:none}
#save-warning{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);max-width:calc(100% - 24px);padding:10px 14px;border-radius:10px;color:#ffe0dc;background:#602d33;border:1px solid #a45b60;font-size:12px;line-height:1.5;text-align:center;z-index:20;pointer-events:none}
@media(max-height:700px){.app,body.no-banner .app{grid-template-rows:40px 54px minmax(0,1fr) 22px 50px 58px}.hud{gap:10px;padding-bottom:6px}.hud>div,.hud>div:not(:first-child){grid-template-rows:12px 32px}.hud small{font-size:9px;line-height:12px}.hud strong,.hud .score-stat strong,.hud strong.long{font-size:27px;line-height:32px}}
@media(min-width:600px) and (min-height:750px){.app,body.no-banner .app{grid-template-rows:52px 80px minmax(0,1fr) 28px 74px 72px}.hud{gap:18px;padding-bottom:12px}.hud>div,.hud>div:not(:first-child){grid-template-rows:16px 44px}.hud small{font-size:12px;line-height:16px}.hud strong,.hud .score-stat strong,.hud strong.long{font-size:38px;line-height:44px}}

/* 3.0.4: MORONG POP candy-garden daylight skin.
   Appearance only; board positions, tile hit polygons, motion and save keys unchanged. */
:root{
  color:#39495c;
  background:#fff9f5;
  --mint:#408f7f;
  --muted:#708094;
  --line:#d7d8e8;
}
html,body{
  color:#39495c;
  background:
    radial-gradient(ellipse at 87% 13%,#ffe3e8 0,transparent 48%),
    radial-gradient(ellipse at 15% 79%,#dff8ee 0,transparent 52%),
    linear-gradient(160deg,#fff9f7 2%,#f9f5ff 63%,#fff8eb 100%);
}
header{color:#324f61}
.brand{color:#304e62;text-shadow:0 1px #ffffffa8}
.brand small{color:#807d98}
nav button,.home-button{
  color:#526278;border-color:#dad7e7;
  background:linear-gradient(155deg,#fffffff2,#f5eefbeb);
  box-shadow:0 2px 7px #969bc220;
}
nav button:hover:not(:disabled),.home-button:hover:not(:disabled){
  border-color:#c69acc;background:#fff2fc;
}
.hud{border-bottom:1px solid #dad8e6}
.hud small{color:#6c7c8e}
.hud strong,.hud strong.long{color:#49556d}
.hud .score-stat strong{color:#b75982;text-shadow:0 1px #ffffff90}
#feedback{color:#5f7581}
#feedback b{color:#b85885}
.board-area{
  background:radial-gradient(ellipse at 50% 53%,#ffffff93,transparent 73%);
}
.hex-mode .cell{background:#c2bdd7;box-shadow:0 1px 1px #b0b9d11a}
.hex-mode .cell:before{background:linear-gradient(150deg,#fffeff,#f5f2fd 70%)}
.hex-mode .cell.filled{background:#aeb6d6}
.hex-mode .cell.filled:before{background:linear-gradient(#fffaff,#f2ecfb)}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem),
.hex-demo-cell.filled>.gem,.hex-demo-cell .lesson-ghost>.gem{
 background:color-mix(in srgb,var(--hue) 83%,#fffcf7);
 filter:drop-shadow(0 1px 1px #667d8916);
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem):before,
.hex-demo-cell.filled>.gem:before,.hex-demo-cell .lesson-ghost>.gem:before{
 background:
   linear-gradient(132deg,#ffffff96 0%,transparent 50%,#69779821 100%),
   conic-gradient(from 0deg at 50% 50%,
     color-mix(in srgb,var(--hue) 64%,white) 0deg 60deg,
     color-mix(in srgb,var(--hue) 88%,white) 60deg 120deg,
     color-mix(in srgb,var(--hue) 76%,#6f88ac) 120deg 180deg,
     color-mix(in srgb,var(--hue) 77%,#7899af) 180deg 240deg,
     color-mix(in srgb,var(--hue) 70%,white) 240deg 300deg,
     color-mix(in srgb,var(--hue) 51%,white) 300deg 360deg);
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem):after,
.hex-demo-cell.filled>.gem:after,.hex-demo-cell .lesson-ghost>.gem:after{
 background:radial-gradient(ellipse at 18% 12%,#ffffffe0,transparent 72%),
   linear-gradient(145deg,color-mix(in srgb,var(--hue) 75%,white),var(--hue) 50%,color-mix(in srgb,var(--hue) 82%,#b7bcde));
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem) .symbol,
.hex-demo-cell .symbol{
 color:#304b67;text-shadow:0 1px #ffffffba,0 -1px #3a4c5726;
}
.hex-mode .cell.hazard{background:#eaaaba}
.hex-mode .cell.hazard:before{background:#fff1f2}
.hex-mode .cell.guide-target,.hex-mode .cell.preview-target{
 background:#71bba7;
}
.hex-mode .cell.guide-target:before,.hex-mode .cell.preview-target:before{
 background:#e8fff3;
}
.hex-mode .cell.preview{background:#66b6a8}
.hex-mode .cell.preview:before{background:linear-gradient(145deg,#ffffff72,transparent),#def8e9}
.hex-mode .cell.preview.filled{background:#6ca992}
.hex-mode .cell.preview.filled>.gem{filter:saturate(1.16)}
.hex-mode .cell.preview-incoming{background:var(--incoming)}
.hex-mode .cell:focus-visible{background:#8f6ab2}
.hex-mode.break-mode .cell.filled{background:#f7b9cc}
.hex-mode .cell.preview .projected-arrival{background:#fff5e8}
.next-row{
  background:linear-gradient(155deg,#ffffffed,#f9f1ffdf);
  border-color:#dfd6e8;box-shadow:0 3px 12px #a597bd1f;
}
.next-label{border-right-color:#d9cde2}
.next-label>span{color:#3e927f}
.upcoming-label{color:#64708c}
.preview-actions button{
  color:#325968;background:#d9f5ec;border-color:#addfcd;
  box-shadow:inset 0 1px #ffffffbb;
}
.preview-actions #preview-cancel{color:#647691;border-color:#d2cce0}
#preview-action[aria-pressed=true]{background:#4b9684;color:white;border-color:#4b9684}
.tools button{
  color:#44576d;border-color:#e2d6e5;
  background:linear-gradient(153deg,#fff7f9,#f9e4ef);
  box-shadow:inset 0 1px #ffffffed,0 3px 9px #c2aabb26;
}
.tools button:nth-child(2){background:linear-gradient(155deg,#f9f5ff,#ece6ff)}
.tools button:nth-child(3){background:linear-gradient(155deg,#fffbee,#ffeccf)}
.tools button>span{color:#415269}
.tools small{color:#738297}
.tools b{color:#574264;background:#ffe39c;border-radius:7px}
.tools button:disabled{opacity:.67}
.tools button.active{border-color:#ce8eaa;background:#fddde9}
.tools button.active small{color:#9c5681}
.record-set small{color:#9d6088}
.fx-total.hex-fx-earned{
 color:#a85385;text-shadow:0 1px 0 #fff,0 0 10px #ffc7dd;
}
.fx-total.hex-fx-earned[data-tier="3"]{
 color:#c08746;text-shadow:0 1px 0 white,0 0 12px #ffe0a3;
}
dialog{
 background:#fffdfa;color:#394b5b;
 border-color:#f7e6f3;box-shadow:0 20px 62px #a69ab046;
}
dialog::backdrop{background:#677e9778}
body.home-screen dialog::backdrop{
 background:linear-gradient(145deg,#fff5f6,#f7f0ff 54%,#eaf9f3);
}
#modal-content{color:#394b5b}
dialog h1,.home-logo,.lesson-title{color:#344e60}
.home-logo img{background:#294a51;box-shadow:0 3px 11px #b0c8c534}
.home-best{
 background:linear-gradient(105deg,#fff2f6,#f2eaff);
 color:#526177;
}
.home-best strong{color:#a25b9b}
dialog button{
 background:#f5f0fb;color:#4b576c;border-color:#e4d9ea;
}
dialog button:hover:not(:disabled){border-color:#c8a6db;background:#fff2fd}
.primary,dialog .primary{
 background:#a74b78;color:#fff;border-color:#a74b78;
}
dialog .wide:not(.primary){background:#f7f3fc}
dialog button.primary:hover:not(:disabled){background:#99416c;border-color:#99416c}
.settings-tabs [aria-pressed=true]{background:#e6f8ee;color:#316c59}
.setting{border-bottom-color:#ebdfec;color:#485b6f}
.setting input{accent-color:#ad5780}
.hex-demo{background:#f3effe;box-shadow:inset 0 1px #ffffffdd}
.hex-demo-cell{background:#bbb5d1!important}
.hex-demo-cell:before{background:#fdfaff}
.hex-demo-cell.lesson-target{background:#61ad9b!important}
.hex-demo-cell.lesson-target:before{background:#e4fff1}
.lesson-caption{color:#56707d}
.lesson-top .eyebrow{color:#807b98}
.lesson-top button{background:#f2e9f8;color:#5e6176}
.record-row{background:#f7f0fa}
.record-row strong{color:#455770}
.empty-records{color:#77869a}
#save-warning{color:#fff4ef;background:#a64d65;border-color:#a64d65}
/* Crisp marks and item silhouettes on the new pale background. */
.brand img{filter:brightness(.64) saturate(1.35) drop-shadow(0 1px 1px #58728c27)}
.tools .item-icon{filter:saturate(1.18) contrast(1.10) drop-shadow(0 2px 1px #a598aa43)}

/* 3.0.6 MORONG POP — interactive candy-garden UI, paired with garden/icon/wordmark artwork.
   Visual-only: 49 hit targets, model state, timestamps, audio and save keys are unchanged. */
:root{--view-h:100dvh;--mint:#64bfa6;--muted:#8b788a;--line:#f0dfd7;
  font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Apple SD Gothic Neo",system-ui,sans-serif;
  color:#745d63;background:#fff5eb;}
body{
 background:linear-gradient(180deg,#e7f8ff,#fff9ee 64%,#fbefe1);
}
body::before{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
 background:url("./assets/garden.svg") center center/cover no-repeat;
 opacity:.78;
}
body::after{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
 background:linear-gradient(90deg,#fff9efaa 0%,#fffdf0a6 24%,#fffbf4ad 50%,#fffdf0a6 76%,#fff9efaa 100%);
 opacity:.28;
}
.app,body.no-banner .app{
 position:relative;z-index:1;max-width:680px;
 grid-template-rows:52px 74px minmax(0,1fr) 19px 70px;
 gap:8px;padding: max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
 filter:drop-shadow(0 1px 1px #8971860d);
}
header{position:relative;z-index:2;gap:7px}
.brand{flex:1;min-width:0;padding-left:33px;color:#925277;
 font-size:23px;letter-spacing:-1.2px;font-weight:950;text-shadow:0 2px #fff6ee}
.brand img{width:30px;height:30px;object-fit:cover;left:0;top:2px;border-radius:9px;border:2px solid #fff8ed;filter:none;box-shadow:0 3px 8px #b6878640}
.brand-korean{display:inline-flex;gap:0;white-space:nowrap}
.brand-korean>span:nth-child(1){color:#e27d9c}.brand-korean>span:nth-child(2){color:#8d75c4}.brand-korean>span:nth-child(3){color:#5dbaaa}
.brand small{font-size:8px;letter-spacing:1.05px;color:#8d6d7b;margin-top:3px;font-weight:750}
nav button,.home-button{height:43px;width:43px;padding:8px;color:#a16e7e;
 border:2px solid #fff8ee;background:linear-gradient(#fffdf7,#ffecdc);
 box-shadow:0 4px 0 #edcabc,0 6px 12px #c9957d39}
nav button:active:not(:disabled),.home-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #ebcbba}
header svg{stroke-width:2.3}
.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:0;border:0;align-items:stretch}
.hud>div,.hud>div:not(:first-child){min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:linear-gradient(172deg,#fffdf8,#fff0e5);border:2px solid #fffdf3;border-bottom-color:#e8b7a9;
 border-radius:20px;box-shadow:0 4px 0 #e7c3b8,0 8px 12px #b9889a24;
 padding:4px 2px;grid-template-rows:none;}
.hud small{color:#987b72;letter-spacing:.3px;font-size:10px;line-height:14px;margin:0 0 2px}
.hud strong,.hud .score-stat strong,.hud strong.long{font-size:27px!important;line-height:31px;font-weight:900;color:#8f6d7f;letter-spacing:-.5px}
.hud .score-stat strong{color:#e47794;text-shadow:0 1px 0 #fff}
.hud>div:nth-child(2) strong{color:#7ca5b9}
.hud>div:nth-child(3) strong{color:#8ab65f}
.play-main{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:9px;align-items:center;justify-content:center;min-width:0;min-height:0;position:relative}
.play-main .board-area{min-width:0;min-height:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:transparent}
.hex-mode #board-wrap{
 position:relative;padding:0;border:0;border-radius:0;background:transparent;
 box-shadow:none;max-width:100%;max-height:100%;filter:drop-shadow(0 4px 3px #be8d8f42);
}
.hex-mode #board-wrap::before{
 content:"";position:absolute;inset:-10px;z-index:-2;pointer-events:none;
 border:4px solid #fff9ed;border-radius:25px;
 background:linear-gradient(135deg,#fffef5ec,#fff4eced);
 box-shadow:0 8px 0 #e8d2c2,0 15px 21px #a97d8340,inset 0 0 0 2px #e8d3d6;
}
.hex-mode #board-controls{border-radius:6px}
.hex-mode .cell{background:#f5cebf;filter:drop-shadow(0 1px 1px #cbaebc42)}
.hex-mode .cell::before{inset:2px;background:linear-gradient(147deg,#fffefa,#fbeee4 67%,#f9e2d5);border:0}
.hex-mode .cell.filled{background:color-mix(in srgb,var(--hue) 78%,white 22%);filter:drop-shadow(0 2px 2px #946d855c)}
.hex-mode .cell.filled::before{inset:1px;background:#fff9eb}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem),
.hex-demo-cell.filled>.gem,.hex-demo-cell .lesson-ghost>.gem{
 width:97%;height:97%;background:color-mix(in srgb,var(--hue) 87%,white 13%);
 filter:drop-shadow(0 2px 1px #96678975);transform:translateY(-1%);
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem):before,
.hex-demo-cell.filled>.gem:before,.hex-demo-cell .lesson-ghost>.gem:before{
 inset:0 0 8%;background:
 linear-gradient(130deg,#fffdf6aa 0%,transparent 33%,#ffffff18 51%,#543e6b25 100%),
 conic-gradient(from 0deg at 50% 50%,
 color-mix(in srgb,var(--hue) 62%,white) 0deg 60deg,
 color-mix(in srgb,var(--hue) 91%,white) 60deg 120deg,
 color-mix(in srgb,var(--hue) 77%,#7a9ad0) 120deg 180deg,
 color-mix(in srgb,var(--hue) 78%,#a276ad) 180deg 240deg,
 color-mix(in srgb,var(--hue) 74%,white) 240deg 300deg,
 color-mix(in srgb,var(--hue) 48%,white) 300deg 360deg);
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem):after,
.hex-demo-cell.filled>.gem:after,.hex-demo-cell .lesson-ghost>.gem:after{
 inset:11% 12% 21%;background:
 radial-gradient(ellipse at 23% 16%,#ffffffe8,transparent 55%),
 linear-gradient(154deg,color-mix(in srgb,var(--hue) 64%,white),var(--hue) 57%,color-mix(in srgb,var(--hue) 81%,#8b679f));
}
.hex-mode :is(.cell.filled>.gem,.fx-ghost>.gem,.prism>.gem,.preview-placement>.gem,.guide-ghost>.gem,.arrival-shape>.gem) .symbol,.hex-demo-cell .symbol{
 color:#5c4a6f;text-shadow:0 1px #ffffffe0,0 -1px #a76f9733;font-weight:900
}
.hex-mode .cell.hazard{background:#f7b1c5}
.hex-mode .cell.hazard::before{background:#fff1e8}
.hex-mode .cell.guide-target,.hex-mode .cell.preview-target{background:#60cbb9}
.hex-mode .cell.guide-target:before,.hex-mode .cell.preview-target:before{background:#e1fff1}
.hex-mode .cell.preview{background:#72c2ac}
.hex-mode .cell.preview:before{background:#effff2}
.hex-mode .cell.filled:focus-visible{background:#fff;filter:brightness(1.04)}
.hex-mode .cell .symbol{font-size:clamp(13px,3.7vw,24px)}
.hex-mode #board-effects{overflow:visible}
.hex-mode .fx-ghost{background:transparent}
.hex-mode .hex-fx-glint{background:linear-gradient(125deg,#fffdfaee,#ffffff68 38%,transparent 72%)}
.hex-mode .hex-fx-bloom{filter:saturate(1.12) brightness(1.08)}
.play-main .tools{align-self:center;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,auto);gap:11px;width:64px;min-height:0}
.play-main .tools button{
 min-height:80px;width:64px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:8px 4px 5px;gap:2px;overflow:visible;border-radius:21px;
 color:#856c87;border:3px solid #fffdfa;box-shadow:0 5px 0 #e8cbb8,0 9px 13px #c19cb251;
 background:linear-gradient(150deg,#fff9ff,#ffe1eb);
}
.play-main .tools button:nth-child(2){background:linear-gradient(148deg,#fcf6ff,#e9ddfd)}
.play-main .tools button:nth-child(3){background:linear-gradient(148deg,#fffef0,#fff0cb)}
.play-main .tools .item-icon{width:39px;height:40px;filter:drop-shadow(0 2px 1px #b48b8055) saturate(1.17)}
.play-main .tools button>span{font-size:10px;line-height:12px;font-weight:900;color:#735f82;text-align:center;white-space:nowrap}
.play-main .tools small{display:none}
.play-main .tools b{
 top:-8px;right:-5px;min-width:23px;height:23px;padding:0 3px;border:2px solid #fff;
 border-radius:50%;background:#ac82e4;color:white;font-weight:900;font-size:12px;
 box-shadow:0 2px 5px #bd83af6a;
}
.play-main .tools button.active{outline:3px solid #ff94bd;outline-offset:2px}
.play-main .tools button:disabled{opacity:.6}
#feedback{font-size:12px;font-weight:800;line-height:19px;color:#9a6486;text-shadow:0 1px 0 #fff}
.next-row{border:3px solid #fffefa;border-radius:22px;background:linear-gradient(165deg,#fffdf8,#ffeef5);
 box-shadow:0 4px 0 #e5c7c6,0 9px 12px #af8c973d;padding:7px 10px;min-width:0}
.next-label{border-right-color:#f2ccce;padding-right:10px}
.next-label>span{color:#bf7796;font-size:11px}
.upcoming-label{color:#8a6b87;font-size:11px}
.prism{width:49px;height:49px}
.prism.mini{width:34px;height:34px}
.preview-actions button{height:46px;min-width:76px;border-radius:14px;
 background:linear-gradient(#cdf8dc,#8bdcb9);border:2px solid #fffbe9;color:#497764;font-weight:900;
 box-shadow:0 3px 0 #a7cba9}
#preview-action[aria-pressed=true]{background:#59c7a9;color:#fff;border-color:#fff5e2}
.preview-actions #preview-cancel{color:#955c8b;border-color:#fff;background:#f9e3f1}
#save-warning{border-radius:16px}
dialog{
 width:min(440px,calc(100% - 22px));border:4px solid #fffef7;border-radius:32px;
 background:linear-gradient(157deg,#fffdfa,#fff6e9);
 box-shadow:0 15px 0 #efc5b9,0 25px 75px #9977855e;color:#795a67
}
dialog::backdrop,body.home-screen dialog::backdrop{
 background:linear-gradient(155deg,#e2f6ffcc,#ffe6e8d5 48%,#e1f4e4da);
 backdrop-filter:blur(5px);
}
#modal-content{padding:22px}
.home-screen #modal-content{padding:15px 20px 22px}
.home-hero{position:relative;display:grid;justify-items:center;gap:0;overflow:hidden;
 border-radius:23px;background:linear-gradient(168deg,#d3f5ff,#fff7db);
 box-shadow:inset 0 1px #fff,0 3px 9px #cca99d30;margin-bottom:13px;padding:4px 8px 12px}
.home-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:url("./assets/garden.svg") center 30%/cover no-repeat;opacity:.6}
.home-hero>*{position:relative;z-index:1}
.home-hero .hero-mascot{
 display:block;width:min(42%,140px);max-height:140px;aspect-ratio:1;object-fit:cover;
 border-radius:31px;box-shadow:0 5px 0 #f2d8ba,0 10px 18px #a89c9565;
 border:3px solid #fffef8;margin:6px 0 3px
}
.home-hero .hero-wordmark{display:block;width:min(84%,280px);height:74px;object-fit:contain;filter:drop-shadow(0 3px 3px #ba909957)}
.home-hero .home-logo{margin:0;font-size:17px;font-weight:900;letter-spacing:.5px;color:#a36c85;line-height:1.2;justify-content:center}
.home-best{border-radius:17px;background:linear-gradient(100deg,#fff0ea,#ffecf8);border:2px solid #fff;
 box-shadow:0 2px 5px #e0c9d230;margin-bottom:12px;padding:11px 14px}
.home-best span{font-weight:800;color:#94788a;font-size:11px}
.home-best strong{color:#b87395;font-size:27px;font-weight:950}
dialog button{border:2px solid #fffdf2;border-bottom-color:#ddc6d2;border-radius:16px;
 background:linear-gradient(#fffbfd,#f8eafa);color:#84647b;
 font-weight:800;box-shadow:0 3px 0 #ecd5da}
dialog button.primary,.primary{background:linear-gradient(180deg,#ffaec8,#ed7ea7);
 border-color:#fff9ed;color:#fff;text-shadow:0 1px #a35c7e;box-shadow:0 4px 0 #dc8a9e}
dialog button.primary:hover:not(:disabled){background:linear-gradient(#ffbed6,#e879a3)}
dialog button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #ddbdd1}
.dialog-actions button{border-radius:17px}
.home-links button{background:linear-gradient(#e8f9f0,#d1eddd);color:#59826d}
.home-screen .wide{margin-top:8px;min-height:46px}
.record-row,.guide-tip{border:2px solid #fff9ee;border-radius:15px;background:#fff3e7}
.record-row strong,.result-score{color:#b86c92}
.result-record{color:#917186}
.lesson-board,.hex-demo{background:#fff5e5;border:3px solid #fffbef}
.lesson-cell{background:#fff4e8!important;border-color:#efcfd6;color:#704e78}
.hex-demo-cell{background:#f0c6c9!important}
.hex-demo-cell:before{background:#fff8ed}
.lesson-progress i{background:#f8dce3}
.lesson-progress i.current{background:#f295b8}
.lesson-title{color:#9b5882}
.lesson-caption{color:#87667e}
.lesson-top button{background:#fff0eb;color:#946d7e}
.lesson-hit-count{background:#ffe29c;color:#785e49}
.lesson-cell.lesson-target,.hex-demo-cell.lesson-target{border-color:#6bcfae}
.lesson-cell.lesson-focus{border-color:#f0ba88}
.recent-runs,.notice,.record-row{background:#fff5e9}
.setting{border-color:#efd3d6}
.setting input{accent-color:#e986ae}
.settings-tabs [aria-pressed=true]{background:#e0f4e6;color:#5b9b7a}
@media(max-height:700px){
 .app,body.no-banner .app{grid-template-rows:42px 60px minmax(0,1fr) 15px 53px;gap:5px;padding-top:max(5px,env(safe-area-inset-top))}
 .brand{font-size:20px}.brand img{height:26px;width:26px}.hud>div{border-radius:16px}.hud strong,.hud .score-stat strong,.hud strong.long{font-size:22px!important;line-height:25px}.hud small{font-size:9px}
 .play-main{grid-template-columns:minmax(0,1fr) 55px;gap:6px}
 .play-main .tools{width:55px;gap:7px}.play-main .tools button{min-height:66px;width:55px;border-radius:16px;padding:4px 2px}.play-main .tools .item-icon{height:30px;width:32px}.play-main .tools button>span{font-size:9px}
 .next-row{border-radius:17px;padding:3px 7px}.prism{height:38px;width:38px}.prism.mini{height:29px;width:29px}.preview-actions button{height:34px;min-width:64px;font-size:10px}
 .home-hero{padding:1px 6px 6px;margin-bottom:8px}.home-hero .hero-mascot{width:min(35%,96px);margin:2px}.home-hero .hero-wordmark{height:48px}.home-hero .home-logo{font-size:13px}
 .home-best{padding:8px 11px;margin-bottom:7px}.home-screen .wide{min-height:38px;margin-top:6px}#modal-content{padding:14px}.home-screen #modal-content{padding:12px 16px 16px}
 .home-links{margin-top:7px}.home-links button{min-height:34px}
}
@media(max-width:350px){
 .app,body.no-banner .app{grid-template-rows:40px 58px minmax(0,1fr) 16px 53px 55px;gap:5px}
 .brand{padding-left:29px;font-size:19px}.brand img{display:block;width:25px;height:25px}.brand small{font-size:6px}
 nav button,.home-button{height:33px;width:33px;padding:5px}
 .hud strong,.hud .score-stat strong,.hud strong.long{font-size:21px!important}
 .play-main{display:contents}
 .play-main .board-area{grid-row:3}
 .play-main .tools{grid-row:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;width:100%;height:55px;gap:6px;align-self:stretch}
 .play-main .tools button{min-height:50px;height:52px;width:auto;display:flex;flex-direction:row;gap:3px;border-radius:15px;padding:5px 3px}
 .play-main .tools .item-icon{width:27px;height:30px}
 .play-main .tools button>span{font-size:9px}
 .play-main .tools b{height:18px;min-width:18px;font-size:9px;right:0;top:-4px}
 .next-row{grid-row:5}.next-label{padding-right:5px}.prism{width:35px;height:35px}.upcoming-label{gap:2px}
 .next-label>span,.upcoming-label{font-size:9px}.preview-actions button{min-width:56px;padding:2px 3px}
}
@media(prefers-reduced-motion:reduce){.hex-mode .cell,.play-main .tools button{transition:none!important}}

/* Preserve an uninterrupted readable/app-accessible name while coloring the wordmark. */
.brand-korean{display:inline;background:linear-gradient(100deg,#f283ac,#af92dd 53%,#56c9a6);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none}


/* MORONG POP: reserve the card and button drop shadows inside the safe area.
   Older garden builds left only 7px, cropping the bottom 9px + 12px shadow.
   Keep 24px clear *outside* the control including the iPhone home indicator. */
.app,body.no-banner .app{
  padding-bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 22px));
}
@media(max-height:700px){
  .app,body.no-banner .app{
    padding-bottom:max(26px,calc(env(safe-area-inset-bottom,0px) + 20px));
  }
}

/* 3.0.8 actual auto-arrival countdown inside the ghost tile.
   Ghost hue stays visible and numeric ink stays fully opaque, even at 320px. */
.hex-mode .arrival-shape{opacity:1}
.hex-mode .arrival-shape>.gem{opacity:.55}
.hex-mode .arrival-shape>.arrival-countdown{
 position:absolute;z-index:5;inset:auto;left:50%;top:50%;
 transform:translate(-50%,-50%);display:grid;place-items:center;
 width:clamp(15px,5.1vw,23px);height:clamp(15px,5.1vw,23px);
 border-radius:50%;border:1px solid #fffdf4;
 background:#fffaf0f2;color:#895881;
 box-shadow:0 2px 5px #76566e4d,inset 0 1px 1px #fff;
 font-size:clamp(10px,3.2vw,14px);font-weight:950;line-height:1;
 font-variant-numeric:tabular-nums;text-shadow:none;pointer-events:none;
}
.hex-mode .projected-arrival>.arrival-countdown{background:#fffaf0f2}


/* 3.0.9 MORONG POP: vivid color in scheduled ghost tiles, no queue indices.
   Actual hue fills the ghost, while remaining turns stay in a small corner pill. */
.next-row .prism .number{display:none!important}
.hex-mode .cell.hazard{background:color-mix(in srgb,var(--incoming) 55%,#fff8ec)!important}
.hex-mode .cell.hazard::before{background:linear-gradient(145deg,#fff8e9b5,#ffffff65),color-mix(in srgb,var(--incoming) 52%,#fff4e8)!important}
.hex-mode .cell.hazard>.arrival-shape{inset:14%;opacity:1;filter:saturate(1.25)}
.hex-mode .cell.hazard>.arrival-shape>.gem{opacity:.78;filter:drop-shadow(0 2px 2px #78637b54)}
.hex-mode .cell.hazard>.arrival-shape>.gem .symbol{opacity:.95}
.hex-mode .arrival-shape>.arrival-countdown{
 inset:auto;top:auto;left:auto;right:-4px;bottom:-4px;transform:none;
 width:clamp(14px,4.3vw,20px);height:clamp(14px,4.3vw,20px);
 color:#fff;background:#8a4f78;border:1px solid #fff;
 box-shadow:0 2px 3px #6e527c62;line-height:1;
 font-size:clamp(10px,2.8vw,13px);font-weight:900;
}
.hex-mode .projected-arrival>.arrival-countdown{background:#8a4f78}


/* MORONG POP 3.0.10 enlarged board, bottom item rack.
   Presentation only. Preserve 49 hex cells and full-screen, non-scrolling play. */
.app,body.no-banner .app{
 grid-template-rows:52px 74px minmax(0,1fr) 20px 70px 72px;
 gap:7px;
}
.play-main{
 display:flex;align-items:center;justify-content:center;
 min-width:0;min-height:0;
 padding:11px 12px 12px;
}
.play-main .board-area{width:100%;height:100%;min-width:0;min-height:0;flex:1}
.app>.tools{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);
 gap:8px;width:100%;height:100%;min-height:0;align-self:stretch;
}
.app>.tools button{
 position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;
 gap:5px;width:100%;min-width:0;height:100%;min-height:0;
 padding:5px 6px;border:3px solid #fffdfa;border-radius:19px;
 box-shadow:0 5px 0 #e8cbb8,0 8px 12px #c19cb251;
 background:linear-gradient(150deg,#fff9ff,#ffe1eb);
}
.app>.tools button:nth-child(2){background:linear-gradient(148deg,#fcf6ff,#e9ddfd)}
.app>.tools button:nth-child(3){background:linear-gradient(148deg,#fffef0,#fff0cb)}
.app>.tools .item-icon{
 width:37px;height:39px;flex-shrink:0;
 filter:drop-shadow(0 2px 1px #b48b8055) saturate(1.17)
}
.app>.tools button>span{
 min-width:0;color:#735f82;font-size:12px;font-weight:900;line-height:1.1;
 text-align:center;white-space:nowrap;
}
.app>.tools small{display:none}
.app>.tools b{
 position:absolute;top:-6px;right:-3px;min-width:22px;height:22px;
 padding:0 3px;border:2px solid #fff;border-radius:50%;
 background:#ac82e4;color:#fff;font-size:12px;font-weight:900;
 box-shadow:0 2px 5px #bd83af6a;
}
.app>.tools button.active{outline:3px solid #ff94bd;outline-offset:1px}
.app>.tools button:disabled{opacity:.64}
.next-row{min-width:0}
@media(min-width:600px) and (min-height:750px){
 .app,body.no-banner .app{grid-template-rows:52px 78px minmax(0,1fr) 24px 72px 80px;gap:9px}
 .play-main{padding:13px 14px 14px}
 .app>.tools button>span{font-size:14px}
 .app>.tools .item-icon{width:43px;height:45px}
}
@media(max-height:700px){
 .app,body.no-banner .app{grid-template-rows:40px 55px minmax(0,1fr) 16px 53px 57px;gap:5px}
 .play-main{padding:10px 11px}
 .app>.tools{gap:6px}
 .app>.tools button{padding:3px 3px;border-radius:15px;gap:3px}
 .app>.tools .item-icon{width:29px;height:31px}
 .app>.tools button>span{font-size:10px}
 .app>.tools b{min-width:18px;height:18px;font-size:10px;right:0;top:-5px}
 .next-row{padding:3px 7px}
}
@media(max-width:350px){
 .app,body.no-banner .app{grid-template-rows:39px 53px minmax(0,1fr) 14px 52px 56px;gap:4px}
 .play-main{display:flex;min-height:0;padding:10px 11px}
 .play-main .board-area{grid-row:auto}
 .app>.tools{grid-row:auto;width:100%;height:100%;gap:5px}
 .app>.tools button{width:100%;height:100%;min-height:0;padding:2px 3px}
 .app>.tools .item-icon{width:26px;height:28px}
 .app>.tools button>span{font-size:9px}
 .next-row{grid-row:auto}
}