@import './shared/base.css';
:root{--paper:#f4f1e9;--ink:#233441;--muted:#647071;--line:#d6d9d3;--accent:#365e58;--board:#20323f;--disc-1:#ef9580;--disc-2:#f3be65;--disc-3:#b3cc86;--disc-4:#86c8bb;--disc-5:#92bcdc;--disc-6:#b3a4d2;--disc-7:#e8a7c2;background:var(--paper);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:radial-gradient(ellipse at 10% 10%,#fff8 0,transparent 65%),var(--paper);min-width:280px}
button,select,summary,a{-webkit-tap-highlight-color:transparent}button,select{border-radius:9px}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #477f74;outline-offset:4px}button:hover:not(:disabled){background:#e5e8df}button:disabled{opacity:.35}button span{margin-left:9px}button.primary{background:var(--ink);color:var(--paper)}button.primary:hover:not(:disabled){background:#365462}[hidden]{display:none!important}
.masthead{max-width:1040px;padding:25px 40px 17px;gap:18px}.wordmark{display:inline-flex;align-items:baseline;text-decoration:none;font-size:43px;line-height:1;font-weight:750;letter-spacing:-4px}.wordmark span{font-size:32px;letter-spacing:-3px}.wordmark i{width:7px;height:7px;border-radius:50%;background:#c77b63;margin-left:8px}.masthead-note{font-size:9px;letter-spacing:2.2px;font-weight:650;margin-left:8px;margin-right:auto;color:#727a78}.game-menu summary{font-size:12px;letter-spacing:.2px}.game-menu-list{width:180px}.game-shell{max-width:960px;margin:auto;padding:18px 0 24px}.title-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.title-row h1{font-size:35px;line-height:1.05;font-weight:550;letter-spacing:-1.5px}.title-row h1 span{color:#7b8580}.title-row>p{font-size:13px;color:var(--muted);line-height:1.5;text-align:right;margin:0}.play-layout{display:grid;grid-template-columns:minmax(0,560px) minmax(0,236px);column-gap:56px;row-gap:23px;justify-content:space-between;align-items:start;grid-template-areas:'board score' 'board mode' 'board rule' 'board actions'}.board-area{grid-area:board;min-width:0}.score-strip{grid-area:score;display:flex;gap:32px;align-items:end;border-bottom:1px solid var(--line);padding:14px 0 19px}.eyebrow{display:block;color:var(--muted);font-size:10px;letter-spacing:1.7px;font-weight:650;line-height:1.5;margin:0}.score-stat{flex:1}.score-stat strong{display:block;font-variant-numeric:tabular-nums;font-weight:500;font-size:38px;line-height:1.3;letter-spacing:-1.8px}.level-stat strong{display:block;font-size:28px;font-weight:400;line-height:1.55;letter-spacing:-1px}.mode-panel{grid-area:mode}.mode-panel select{width:100%;min-height:46px;margin-top:6px;padding:9px 12px;color:var(--ink);border:1px solid #bec8bf;background:var(--paper);font-weight:550;font-size:15px}.mode-panel p{font-size:12px;line-height:1.55;margin:10px 0 0}.mode-panel .small-note,.small-note{font-size:10px;color:var(--muted);line-height:1.5}.board-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 15px;min-height:57px;gap:18px}.incoming-group{display:flex;align-items:center;gap:14px}.incoming-disc{width:49px;height:49px;display:block;flex-shrink:0}.incoming-disc>.disc{position:relative;width:100%;height:100%;left:auto;top:auto;font-size:26px;box-shadow:0 4px 11px #20323f0b}.row-countdown{font-size:12px;color:var(--muted);text-align:right;min-width:160px}.row-countdown>span{display:block}.countdown-track{height:3px;width:100%;background:#dce1d9;border-radius:2px;margin-top:9px;overflow:hidden}.countdown-track>span{display:block;height:100%;background:#6b8f7d;border-radius:2px;transition:width .3s ease}.board-wrap{position:relative}.board{position:relative;aspect-ratio:1;width:100%;border:10px solid var(--board);border-radius:20px;background:var(--board);box-shadow:0 9px 30px #21313a15;overflow:hidden;touch-action:manipulation;isolation:isolate;cursor:crosshair}.board-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:0}.board-grid>span{border:1px solid #38505c29;border-radius:9px;margin:3px;background:#3146532b}.column-guide{position:absolute;top:0;bottom:0;left:calc(var(--column,3)*100%/7);width:calc(100%/7);background:linear-gradient(#a8c0bb17,#bfdace0a);border-radius:10px;transition:left .14s ease;pointer-events:none;z-index:0}.discs{position:absolute;inset:0;pointer-events:none}.disc{position:absolute;display:flex;align-items:center;justify-content:center;left:calc(var(--column)*100%/7 + 5px);top:calc((6 - var(--row))*100%/7 + 5px);width:calc(100%/7 - 10px);height:calc(100%/7 - 10px);border-radius:50%;font-size:clamp(20px,3vw,31px);font-weight:550;line-height:1;color:#253542;box-shadow:inset 0 -2px 0 #172a3c13,inset 0 1px 0 #ffffff35;transition:top .22s cubic-bezier(.3,.1,.4,1),left .15s ease,background .14s ease;z-index:2}.value-1{background:var(--disc-1)}.value-2{background:var(--disc-2)}.value-3{background:var(--disc-3)}.value-4{background:var(--disc-4)}.value-5{background:var(--disc-5)}.value-6{background:var(--disc-6)}.value-7{background:var(--disc-7)}.covered,.cracked{background:#8f9d9f;color:transparent;box-shadow:inset 0 0 0 2px #bac4c331,inset 0 -3px 0 #192e4226}.covered::before{content:'';position:absolute;width:27%;height:27%;border:1.5px solid #d4dddb7a;border-radius:50%}.cracked::before{content:'';position:absolute;inset:15%;background:#e6ebe8;clip-path:polygon(47% 0,60% 0,46% 37%,67% 44%,39% 100%,27% 100%,48% 52%,30% 44%);opacity:.75}.disc.clearing{animation:disc-clear .3s ease both;z-index:4}.disc.hit{animation:disc-hit .28s ease}.disc.entering{animation:disc-enter .28s ease}.disc.rising{animation:disc-rise .26s ease}.board-message{position:absolute;inset:0;display:grid;place-content:center;color:#d7e0dc;font-size:15px;text-align:center;pointer-events:none;padding:30px}.wave-label{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-size:14px;font-weight:600;color:#fff4d8;background:#21333ed9;padding:8px 14px;border:1px solid #c8d5cf35;border-radius:40px;white-space:nowrap;z-index:8;animation:score-rise .45s ease both}.column-controls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;padding:8px 10px 0}.column-controls button{min-width:0;min-height:42px;padding:0;border-color:transparent;font-size:23px;font-weight:300;color:#8c9992;border-radius:9px;line-height:1}.column-controls button[data-selected=true]{color:var(--ink);background:#e1e6dc}.column-controls button:hover:not(:disabled){background:#dce5d7;color:var(--ink)}.keyboard-help{font-size:11px;color:var(--muted);text-align:center;margin:10px 0 0;line-height:1.6}.keyboard-help span{display:block;font-size:10px;color:#78837c}.game-status{font-size:12px;min-height:20px;text-align:center;color:var(--muted);margin:10px 0 0}.game-error{font-size:12px;line-height:1.5;text-align:center;background:#efdcd2;color:#783f32;border-radius:8px;padding:10px;margin:7px 0}.rule-panel{grid-area:rule;padding-top:4px}.rule-panel>.eyebrow{font-size:9px;letter-spacing:1.3px}.rule-example{display:flex;gap:6px;align-items:center;margin:14px 0 13px;position:relative}.example-disc{position:relative;display:inline-grid;place-items:center;width:39px;height:39px;flex-shrink:0;border-radius:50%;color:#233441;font-size:19px;font-weight:550}.example-clear{outline:1px dashed #718a59;outline-offset:4px}.example-spark{font-size:29px;color:#7d9469;margin-left:8px}.rule-panel>p:not(.eyebrow){font-size:13px;line-height:1.5;margin:8px 0}.rule-panel .rule-detail{font-size:12px!important;color:var(--muted)}.game-help{margin-top:10px;font-size:12px}.game-help>summary{margin:0;padding:4px 0;justify-content:start;min-height:35px;font-size:12px}.game-help-content{padding:4px 0}.cover-example{display:flex;gap:9px;align-items:center;margin:15px 0}.game-actions{grid-area:actions;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:18px}.game-actions>#restart{text-align:left;font-size:12px;display:flex;justify-content:space-between;align-items:center}.game-actions>#restart span{font-size:20px;line-height:1}.preferences{display:flex;gap:8px;flex-wrap:wrap}.preferences>button{border:0;min-height:36px;font-size:10px;padding:6px 9px;color:var(--muted);background:#e8e9e1}.preferences>button[aria-pressed=true]{color:var(--ink);box-shadow:inset 0 0 0 1px #a3b6a7}.game-over{position:absolute;inset:0;z-index:9;border-radius:20px;background:#f4f1e9f0;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}.game-over h2{font-size:36px;line-height:1.1;letter-spacing:-1.3px;font-weight:500;margin:16px 0}.game-over>p:not(.eyebrow){font-size:14px;color:var(--muted);margin:0 0 22px}.game-over button{font-size:13px;min-width:156px}.game-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:19px 0 0;margin-top:34px;color:#7a847e;font-size:9px;letter-spacing:1.3px}.game-footer>span+span{letter-spacing:0;font-size:10px}.reduce-motion .disc,.reduce-motion .column-guide,.reduce-motion .countdown-track>span{transition:none}.reduce-motion .disc,.reduce-motion .wave-label{animation:none!important}
@keyframes disc-clear{0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.1);filter:brightness(1.3)}100%{transform:scale(.65);opacity:.15}}
@keyframes disc-hit{50%{transform:scale(.91);filter:brightness(1.35)}}
@keyframes disc-enter{from{transform:translateY(-20px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes disc-rise{from{transform:translateY(30%)}to{transform:translateY(0)}}
@keyframes score-rise{from{opacity:0;transform:translate(-50%,8px)}30%{opacity:1}to{opacity:1;transform:translate(-50%,-5px)}}
@media(min-width:1200px){.game-shell{padding-top:35px}.title-row{margin-bottom:30px}.masthead{padding-top:32px}}
@media(max-width:1020px){.game-shell{margin:0 36px}.play-layout{grid-template-columns:minmax(0,1fr) 215px;column-gap:36px}.masthead{padding-left:36px;padding-right:36px}.title-row h1{font-size:30px}}
@media(max-width:740px){.masthead{padding:16px 22px 6px}.wordmark{font-size:37px}.wordmark span{font-size:29px}.masthead-note{font-size:8px;letter-spacing:1.5px}.game-shell{margin:0 auto;padding:12px 20px 20px;max-width:530px}.title-row{margin:0 0 19px}.title-row h1{font-size:26px;letter-spacing:-1px}.title-row>p{font-size:11px}.play-layout{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:14px;grid-template-areas:'score mode' 'board board' 'rule rule' 'actions actions'}.score-strip{padding:4px 0 0;border:0;gap:18px;align-self:center}.score-stat strong{font-size:29px;letter-spacing:-1px}.level-stat strong{font-size:24px}.score-strip .eyebrow{font-size:8px;letter-spacing:1.3px}.mode-panel>.eyebrow{display:none}.mode-panel select{margin:0;min-height:43px;padding:7px 10px;font-size:13px}.mode-panel p{font-size:10px;line-height:1.3;margin-top:5px}.mode-panel .small-note{font-size:8px;margin-top:4px}.board-toolbar{margin:2px 0 10px;min-height:42px}.incoming-disc{width:40px;height:40px}.incoming-disc>.disc{font-size:23px}.incoming-group{gap:10px}.incoming-group .eyebrow{font-size:9px;letter-spacing:1.1px}.row-countdown{font-size:11px;min-width:145px}.board{border-width:7px;border-radius:15px}.board-grid>span{margin:2px;border-radius:6px}.disc{left:calc(var(--column)*100%/7 + 3px);top:calc((6 - var(--row))*100%/7 + 3px);width:calc(100%/7 - 6px);height:calc(100%/7 - 6px);font-size:24px}.column-controls{padding:6px 7px 0;gap:3px}.column-controls button{min-height:38px;font-size:22px}.keyboard-help{margin-top:5px;font-size:10px}.keyboard-help span{display:none}.game-status{font-size:11px;margin-top:5px;min-height:17px}.rule-panel{display:grid;grid-template-columns:135px 1fr;gap:0 18px;border-top:1px solid var(--line);padding-top:17px;margin-top:4px}.rule-panel>.eyebrow{grid-column:1/-1;font-size:8px;letter-spacing:1.3px;margin-bottom:9px}.rule-example{grid-column:1;grid-row:2/4;margin:2px 0;gap:5px;align-self:start}.example-disc{width:34px;height:34px;font-size:18px}.example-spark{display:none}.rule-panel>p:not(.eyebrow){grid-column:2;font-size:12px;margin:0 0 4px}.rule-panel .rule-detail{font-size:10px!important}.game-help{grid-column:1/-1;margin-top:3px}.game-help>summary{font-size:11px}.game-actions{border:0;padding-top:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.game-actions>#restart{font-size:11px}.preferences{gap:3px}.preferences>button{font-size:9px;padding:7px}.game-footer{margin-top:24px;padding-top:15px;font-size:8px;letter-spacing:1px}.game-footer>span+span{font-size:9px}.game-over{border-radius:15px}.game-over h2{font-size:30px}}
@media(max-width:360px){.masthead{padding-left:15px;padding-right:15px}.masthead-note{letter-spacing:1px;margin-left:4px}.game-shell{padding-left:13px;padding-right:13px}.title-row h1{font-size:24px}.title-row>p{font-size:10px}.play-layout{column-gap:13px}.score-strip{gap:12px}.score-stat strong{font-size:25px}.level-stat strong{font-size:21px}.disc{font-size:21px}.row-countdown{min-width:135px;font-size:10px}.incoming-group{gap:7px}.incoming-group .eyebrow{font-size:8px}.rule-panel{grid-template-columns:116px 1fr;gap:0 12px}.example-disc{width:31px;height:31px}.preferences{gap:0}.preferences>button{padding:6px;font-size:8px}.game-footer>span+span{max-width:135px;text-align:right}}
@media(forced-colors:active){.disc,.example-disc{border:2px solid CanvasText}.covered::before,.cracked::before{background:CanvasText}.board{border:2px solid CanvasText}.board-grid>span{border:1px solid CanvasText}.column-guide{outline:2px solid Highlight}.game-over{background:Canvas}}
/* Keep the final position visible for reflection and screen-reader inspection. */
.game-over{position:relative;inset:auto;margin-top:15px;backdrop-filter:none;background:#e8ebe2;border:1px solid #d1dbce;border-radius:12px;padding:24px}.game-over h2{font-size:25px;line-height:1.2;margin:10px 0;letter-spacing:-.8px}.game-over>p:not(.eyebrow){margin-bottom:14px}.game-over .eyebrow{font-size:9px}
/* The same offline UI respects notches and home indicators in native web views. */
body{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
/* Keep the complete play surface and drop controls in a laptop's first view. */
@media(min-width:741px) and (max-height:900px){
 body{--compact-board:min(520px,max(320px,calc(100dvh - 306px)))}
 .masthead{max-width:calc(var(--compact-board) + 360px);padding-top:10px;padding-bottom:4px}
 .game-shell{width:calc(100% - 72px);max-width:calc(var(--compact-board) + 280px);margin-inline:auto;padding-top:4px}
 .title-row{margin-bottom:12px}.title-row h1{font-size:30px;line-height:1.05}
 .play-layout{grid-template-columns:minmax(0,1fr) minmax(0,236px);column-gap:44px;row-gap:16px}
 .board-area{max-width:var(--compact-board)}.board-toolbar{min-height:43px;margin-bottom:10px}
 .incoming-disc{width:43px;height:43px}.incoming-disc>.disc{font-size:24px}
 .score-strip{padding-top:4px;padding-bottom:12px}.score-stat strong{font-size:34px}
 .mode-panel p{margin-top:7px}.rule-example{margin-top:11px;margin-bottom:10px}
 .game-actions{padding-top:13px;gap:10px}.game-footer{margin-top:23px}
 .keyboard-help{margin-top:6px}.game-status{margin-top:4px}
}
/* Landscape phones share one compact play surface across browser and native hosts. */
.help-close-label{display:none}
@media(max-height:500px) and (min-width:540px) and (orientation:landscape){
 body{--landscape-width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));--landscape-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));--landscape-board:min(calc(var(--landscape-height) - 68px),calc(var(--landscape-width) - 268px))}
 .masthead{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));width:calc(var(--landscape-width) - var(--landscape-board) - 52px);max-width:none;height:36px;margin:0;padding:0;gap:8px}
 .wordmark{font-size:30px;letter-spacing:-3px}.wordmark span{font-size:24px}.wordmark i{width:5px;height:5px;margin-left:6px}.masthead-note{display:none}
 .game-menu summary{min-height:36px;font-size:11px}.game-menu-list{top:38px}
 .game-shell{width:auto;max-width:none;margin:0;padding:12px 16px 16px}
 .title-row{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .play-layout{grid-template-columns:var(--landscape-board) minmax(0,1fr);grid-template-rows:92px 44px 84px max(0px,calc(var(--landscape-board) - 220px)) 44px;grid-template-areas:none;column-gap:20px;row-gap:0;align-items:start}
 .board-area{display:contents}.board-wrap{grid-column:1;grid-row:1/5;width:var(--landscape-board)}
 .board{border-width:6px;border-radius:14px}.board-grid>span{margin:2px;border-radius:5px}
 .disc{left:calc(var(--column)*100%/7 + 3px);top:calc((6 - var(--row))*100%/7 + 3px);width:calc(100%/7 - 6px);height:calc(100%/7 - 6px);font-size:21px}
 .board-toolbar{grid-column:2;grid-row:1;min-height:0;height:92px;margin:0;padding:38px 0 8px;gap:10px;align-items:center}
 .incoming-group{gap:7px}.incoming-group .eyebrow{max-width:36px;font-size:8px;letter-spacing:.8px}.incoming-disc{width:42px;height:42px}.incoming-disc>.disc{font-size:24px}
 .row-countdown{min-width:120px;font-size:10px;flex:1}.countdown-track{margin-top:7px}
 .score-strip{grid-column:2;grid-row:2;align-self:start;border:0;padding:0;gap:24px;width:100%}.score-strip .eyebrow{font-size:8px;letter-spacing:1px}.score-stat strong,.level-stat strong{font-size:25px;line-height:1.2;letter-spacing:-1px}
 .mode-panel{grid-column:2;grid-row:3;min-width:0}.mode-panel>.eyebrow{display:none}.mode-panel select{margin:0;min-height:38px;padding:7px 10px;font-size:12px}.mode-panel p{font-size:10px;line-height:1.3;margin:4px 0 0}.mode-panel .small-note{font-size:8px;line-height:1.2;margin-top:3px}
 .column-controls{grid-column:1;grid-row:5;align-self:end;padding:0;gap:0;height:44px}.column-controls button{min-height:44px;font-size:22px;border-radius:7px}
 .game-actions{grid-column:2;grid-row:4/6;display:flex;flex-direction:column;border:0;padding:0;gap:4px;align-self:end;align-items:stretch;width:100%}.game-actions>#restart{min-height:38px;font-size:11px;padding:6px 10px}.preferences{gap:6px;flex-wrap:nowrap}.preferences>button{min-height:32px;font-size:9px;padding:5px 8px}
 .keyboard-help,.game-status,.game-error,.rule-panel{grid-column:1/-1;grid-row:auto}
 .keyboard-help{margin-top:12px}.game-status{margin-top:3px}.rule-panel{display:grid;grid-template-columns:135px 1fr;column-gap:18px;padding-top:16px;margin-top:14px;border-top:1px solid var(--line)}
 .rule-panel>.eyebrow{grid-column:1/-1;margin-bottom:9px}.rule-example{grid-column:1;grid-row:2/4;margin:2px 0}.rule-panel>p:not(.eyebrow){grid-column:2;margin:0 0 4px}.game-footer{margin-top:24px}
 .game-help{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:calc(88px + env(safe-area-inset-right,0px));width:100px;max-width:none;margin:0;z-index:10}
 .game-help>summary{width:100%;min-height:36px;margin:0;padding:6px 9px;justify-content:space-between;border:1px solid var(--line);font-size:11px}
 .game-help[open]{position:fixed;inset:calc(8px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));width:auto;overflow:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid #b7c4b8;border-radius:10px;box-shadow:0 6px 24px #20323f26;z-index:30}
 .game-help[open]>summary{position:sticky;top:0;min-height:44px;padding:10px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--paper);font-size:13px;z-index:1}
 .game-help[open] .help-open-label{display:none}.game-help[open] .help-close-label{display:inline}
 .game-help[open]>.game-help-content{max-width:640px;margin:auto;padding:8px 20px 16px;font-size:13px}
 .game-over{position:absolute;top:44px;left:calc(100% + 20px);width:calc(var(--landscape-width) - var(--landscape-board) - 52px);margin:0;padding:18px 14px;background:var(--paper);box-shadow:0 4px 18px #20323f18}.game-over h2{font-size:23px}.game-over>p:not(.eyebrow){font-size:12px}.game-over button{min-height:44px;min-width:140px}
}