:root{font-family:ui-rounded,'SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#283048;background:#f8f9fc;font-synthesis:none;-webkit-font-smoothing:antialiased;--coral:#f27770;--blue:#729bec;--gold:#efc568;--mint:#70bea2;--ink:#283048;--muted:#9499ac;--accent:#7770d9}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 26%,#eeedf780,transparent 65%);min-height:100svh}button,input,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7770d980;outline-offset:4px}button:disabled{cursor:default;opacity:.55}button svg{width:22px;height:22px}button{color:inherit}a{color:inherit;text-decoration:none}#app{max-width:510px;margin:0 auto;padding:30px 28px max(28px,env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:43px}.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:750;letter-spacing:-.6px}.brand-caption{display:block;font-size:10px;font-weight:500;letter-spacing:.4px;color:#9297aa;margin-top:4px}.brand-mark{display:grid;grid-template-columns:repeat(2,9px);gap:3px;rotate:-8deg}.brand-mark .dot{width:9px;height:9px;box-shadow:none}.top-actions{display:flex;gap:7px}.icon-button{display:grid;place-items:center;width:38px;height:38px;background:transparent;border:1px solid #e5e6ef;border-radius:13px;color:#878b9d;transition:background .15s,transform .15s}.icon-button:hover{background:#eeedf6;color:var(--ink)}.icon-button:active{transform:scale(.92)}.level-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:25px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2px;color:#9294aa}.level-tag{font-size:11px;font-weight:650;padding:6px 11px;border-radius:20px;color:#8276b0;background:#eeebf6}.hud{display:flex;justify-content:space-between;align-items:center}.stat-label{font-size:9px;letter-spacing:1.8px;font-weight:650;color:var(--muted)}.clock{display:flex;align-items:baseline;font-size:43px;letter-spacing:-2px;line-height:1.25;font-weight:720;font-variant-numeric:tabular-nums}.unit{font-size:18px;color:#afb2c2;margin-left:4px;font-weight:500}.score-stat{text-align:right}.score-stat #score{font-size:31px;font-weight:700;letter-spacing:-1.3px;line-height:1.65;font-variant-numeric:tabular-nums}.timer-track{height:5px;border-radius:10px;background:#e9e9f2;margin-top:13px;overflow:hidden}#timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#aaa3e5,#7770d9);border-radius:inherit;transition:width .1s linear}.urgent{color:#d75f66!important}#timer-fill.urgent{background:#e9898a}.objective{text-align:center;margin:32px 0 28px}h1{font-size:29px;font-weight:760;letter-spacing:-1.2px;margin:0 0 10px}p{margin:0}.objective p{font-size:12px;color:#8b8fa4;line-height:1.6}.board{container-type:inline-size;display:grid;gap:9px;padding:5px 0;user-select:none}.board-row{--tile-gap:6px;--tile-size:calc((100cqw - (var(--columns) - 1) * var(--tile-gap)) / var(--columns));display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:var(--tile-gap)}.token{grid-column:span var(--span);position:relative;display:flex;align-items:center;justify-content:space-around;gap:0;height:var(--tile-size);padding:0 5px;border:1px solid #e5e6ee;border-radius:13px;background:#fff;box-shadow:0 3px 0 #e4e5ee,0 5px 10px #33355806;transition:border-color .15s,background .15s,transform .15s;min-width:0}.token:hover{border-color:#bdb6e0;background:#fdfcff}.token:active{transform:translateY(2px);box-shadow:0 1px 0 #e4e5ee}.dot{display:inline-block;flex-shrink:0;width:21px;height:21px;border-radius:50%;background:var(--color);box-shadow:inset 0 2px 1px #ffffff30,inset 0 -2px 0 #0000000c;position:relative}.coral{--color:var(--coral);background-color:var(--coral)}.blue{--color:var(--blue);background-color:var(--blue)}.gold{--color:var(--gold);background-color:var(--gold)}.mint{--color:var(--mint);background-color:var(--mint)}.hint-first,.hint-second{border-color:#c4b9ec;background:#faf8ff;box-shadow:0 3px 0 #d9d1eb,0 0 0 2px #e5ddf680}.hint-first{animation:invite 1.8s ease-in-out infinite}.tap-indicator{position:absolute;bottom:-9px;width:7px;height:7px;background:#9280c1;border:2px solid #fff;border-radius:50%;z-index:2}.joining{background:#ece9fc!important;border-color:#b6a8e6!important;transform:scale(.93);box-shadow:0 1px 0 #c4b9df}.born{animation:pop .45s cubic-bezier(.22,.9,.3,1.4)}.wrong{animation:shake .36s}.feedback{height:42px;display:grid;place-items:center;margin-top:13px;font-size:12px;font-weight:550;color:#a0a1b2;letter-spacing:.1px}.feedback.hit{color:#639d88}.feedback.miss{color:#d4777b}.round-track{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0 18px}#rounds{display:flex;gap:7px}.round-pip{display:grid;place-items:center;width:20px;height:20px;border:1px solid #dcdeea;background:#f1f2f7;border-radius:8px}.round-pip.done{background:#a19ad9;border-color:#a19ad9}.round-pip svg{width:13px;height:13px;color:white}#round-label{font-size:10px;letter-spacing:.5px;color:#a1a3b3}.rule-shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:32px}.learned-rule{display:flex;align-items:center;gap:4px;background:#efeff6;border-radius:8px;padding:4px;animation:pop .3s}.mini-token{display:inline-flex;gap:3px;align-items:center;justify-content:center;padding:5px;border-radius:5px;background:#fff;min-height:21px}.mini-token .dot{width:9px;height:9px;box-shadow:none}.rule-join{font-size:10px;color:#acaabd}.play-footer{display:flex;justify-content:space-between;gap:15px;margin-top:27px;color:#afb0bd;font-size:9px;line-height:1.5}.connection-label{white-space:nowrap}.spark{pointer-events:none;position:fixed;width:4px;height:4px;z-index:10;border-radius:2px;animation:spark .42s ease-out forwards}.score-pop{animation:score .3s}.results{text-align:center}.result-badge{margin:0 auto 21px;display:grid;place-items:center;width:54px;height:54px;background:#e5f1ec;color:#69a58c;border-radius:20px;rotate:-8deg;box-shadow:0 5px 0 #d5e7df}.result-badge svg{width:28px;height:28px;rotate:8deg}.result-badge.timeout{background:#efebf7;color:#9981be;box-shadow:0 5px 0 #e2dced}.results>.eyebrow{display:block;margin-bottom:13px}.results h1{font-size:29px}.result-subtitle{font-size:12px;color:#969aac;line-height:1.6}.result-score{font-size:66px;letter-spacing:-4px;font-weight:760;line-height:1.1;margin:27px 0 23px;font-variant-numeric:tabular-nums}.result-score>span{display:block;font-size:9px;color:#a3a5b5;letter-spacing:2.7px;font-weight:650;margin-top:8px}.score-breakdown{display:flex;justify-content:center;gap:26px;color:#979aad;font-size:11px}.score-breakdown b{color:#636b82;font-weight:650}.result-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0 39px}.primary{display:flex;justify-content:center;align-items:center;gap:36px;background:#7770cf;border:1px solid #7068c7;border-radius:16px;color:white;min-height:51px;padding:0 25px;font-size:14px;font-weight:650;box-shadow:0 4px 0 #5d56b1,0 8px 18px #7770cf1f;transition:transform .15s,background .15s}.primary:hover{background:#837bdd}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #5d56b1}.primary svg{width:18px;height:18px}.retry-button{height:50px;width:50px;border-radius:16px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left}.section-heading h2{font-size:14px;letter-spacing:-.3px;font-weight:650;margin:0}.section-heading>span{font-size:10px;color:#a3a5b5}.tree-forest{margin-top:18px;padding:10px 12px;border:1px solid #e6e7ef;background:#fff;border-radius:20px}.tree-row{position:relative;padding:8px 12px 8px 17px}.tree-row+.tree-row{border-top:1px solid #f0f0f6}.tree-row-label{position:absolute;left:0;top:22px;color:#c1c2ce;font-size:8px;letter-spacing:.7px}.tree{width:100%;height:auto;display:block;max-height:230px}.tree-edges{fill:none;stroke:#d9d9e8;stroke-width:1.5}.tree-nodes rect{fill:#f6f6fa;stroke:#e2e2ec;stroke-width:1}.fill-coral{fill:var(--coral)}.fill-blue{fill:var(--blue)}.fill-gold{fill:var(--gold)}.fill-mint{fill:var(--mint)}#score-form{text-align:left;margin-top:28px}#score-form>label{font-size:12px;font-weight:650}.name-row{display:flex;gap:9px;margin-top:10px}input{min-width:0;flex:1;border:1px solid #dedfec;background:#fff;border-radius:12px;padding:12px;color:var(--ink);font-size:13px}.secondary{border:1px solid #dcd9ed;color:#7b73af;background:#efedf7;padding:0 15px;font-weight:650;font-size:12px;border-radius:12px}#publish-note{font-size:10px;line-height:1.7;color:#a0a2b4;margin-top:9px}.text-button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:#8d89a9;font-size:11px;margin-top:22px;padding:8px}.text-button svg{width:15px;height:15px}dialog{width:min(calc(100% - 32px),420px);max-height:85svh;border:1px solid #ececf4;border-radius:26px;padding:28px;background:#fbfbfe;color:var(--ink);box-shadow:0 30px 100px #24243c25}dialog::backdrop{background:#29273940;backdrop-filter:blur(6px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:25px;letter-spacing:-1px;margin:7px 0 0}.board-filter{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:12px;color:#9a9aaf}.board-filter select{border:1px solid #dedfec;border-radius:10px;padding:7px 12px;background:white;color:#77728e}.leader-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid #e9e9f1;font-size:13px}.leader-row strong{margin-left:auto;font-size:14px}.leader-row .rank{font-size:10px;color:#adaabd}.leader-row:first-child .rank{color:#c2a057}.leader-note{font-size:10px;color:#a2a2b4;line-height:1.7;margin-top:18px}.empty-scores{text-align:center;padding:30px 0;font-size:15px;color:#9290aa;line-height:1.7}.empty-scores span{font-size:11px;color:#aaa8bc}.loading{text-align:center;color:#9290aa;padding:100px 0;font-size:15px}.loading span{display:block;letter-spacing:12px;margin-top:25px;color:#b6a7d9;animation:invite 1s infinite}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes invite{50%{transform:translateY(-2px);box-shadow:0 5px 0 #d9d1eb,0 0 0 3px #e5ddf680}}@keyframes pop{0%{transform:scale(.86);background:#e8e3f9}55%{transform:scale(1.045)}100%{transform:scale(1)}}@keyframes shake{20%,60%{transform:translateX(-3px);background:#ffe9e8;border-color:#e8a2a3}40%,80%{transform:translateX(3px);background:#ffe9e8;border-color:#e8a2a3}}@keyframes spark{to{transform:translate(var(--dx),var(--dy)) rotate(var(--spin));opacity:0}}@keyframes score{50%{transform:scale(1.09);color:#7770cf}}
@media(min-width:700px){#app{padding-top:40px}.topbar{margin-bottom:54px}.board-row{--tile-gap:7px}.objective{margin-top:36px}.results{padding:0 10px}}
@media(max-width:390px){#app{padding:23px 19px}.topbar{margin-bottom:30px}.brand{font-size:15px;gap:9px}.brand-caption{font-size:9px}.top-actions{gap:3px}.icon-button{width:34px;height:34px}.board-row{--tile-gap:4px}.token{border-radius:11px;padding:0 3px}.token .dot{width:18px;height:18px}.objective{margin:27px 0 23px}.hud .clock{font-size:38px}.feedback{font-size:11px}.score-breakdown{gap:18px}.play-footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.wrong{background:#ffe9e8;border-color:#e8a2a3}.joining{transform:none}}

/* Keep play focused on the board and its two counters. */
.play-screen .board { margin-top: 38px; }
.results .result-score { font-size: 31px; font-weight: 700; letter-spacing: -1.3px; line-height: 1.65; margin: 0; }
.results .tree-section { margin-top: 32px; }
.results .tree-forest { padding: 0; border: 0; background: transparent; border-radius: 0; }
.results .tree-row { padding: 12px 0; border: 0; }
.results .tree { max-height: none; }
.results .result-actions { margin: 28px 0; }
.results .primary { min-width: 62px; padding: 0 20px; }
#score-form { max-width: 270px; margin: 28px auto 0; }
.secondary svg { width: 18px; height: 18px; }

.final-tree { margin: 0 auto; }
.tree-junction { fill: #b6b4cc; }

.results .tree-forest { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 28px 20px; }
.results .token-derivation { max-width: 100%; height: auto; flex-shrink: 0; }

.tree-nodes rect.missing-merge { fill: #edf8f1; stroke: #69a58c; stroke-width: 2; stroke-dasharray: 4 2; }
.mistake-review { display: grid; gap: 12px; margin: 24px 0; }
.mistake-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.review-pair { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border: 1px solid; border-radius: 10px; }
.review-pair.incorrect { color: #cd7474; background: #fff0ef; border-color: #e4aaaa; }
.review-pair.correct { color: #69a58c; background: #edf8f1; border-color: #a5cbb7; }
.review-pair svg, .review-arrow svg { width: 14px; height: 14px; }
.review-arrow { color: #aaa8bc; }
.review-pair .mini-token { flex-wrap: wrap; }

.skip-tutorial { display: flex; margin: 26px auto 0; min-height: 44px; padding: 10px 16px; }

.finish-fireworks { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.finish-spark { position: absolute; left: 50%; top: 40%; width: 7px; height: 10px; border-radius: 2px; opacity: 0; animation: finish-confetti 1.4s ease-out forwards; }
.finish-spark:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes finish-confetti {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  10% { opacity: 1; }
  55% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + var(--fall))) rotate(calc(var(--spin) + 180deg)) scale(.8); }
}

.merge-countdown { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 12px; margin-top: 25px; }
.remaining-dot { width: 8px; height: 8px; border-radius: 50%; background: #9991d4; transition: transform .25s ease, opacity .25s ease; }
.remaining-dot.spent { transform: scale(.25); opacity: 0; }

.result-time-bar { width: 110px; height: 5px; background: #e9e9f2; border-radius: 10px; margin-top: 18px; overflow: hidden; }
.result-time-bar > div { height: 100%; background: #9991d4; border-radius: inherit; }
.level-failed .board { animation: level-fail .6s ease-in-out both; }
.level-failed .token { background: #fff0ef; border-color: #e4aaaa; box-shadow: 0 3px 0 #ecc6c6; }
.level-failed .remaining-dot { background: #d78585; }
.failure-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin: 26px auto 0; background: #fbe8e7; color: #cb7777; }
.failure-mark svg { width: 25px; height: 25px; }
.failed-result .result-time-bar { background: #f0d6d6; }
@keyframes level-fail { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }

.tutorial-intro { text-align: center; font-size: 15px; line-height: 1.7; color: #636b82; margin: 0 0 24px; }
.tutorial-intro a { color: #7770cf; text-decoration: underline; text-underline-offset: 3px; }

.home-button { padding: 8px; border: 0; background: transparent; border-radius: 10px; }
.home-screen { padding: 24px 8px 30px; text-align: center; }
.home-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; }
.home-screen h1 { font-size: 32px; margin-bottom: 28px; }
.mode-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 260px; margin: auto; }
.mode-choice { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 20px 16px; border: 1px solid #dfddeb; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 #e4e2ef; text-align: left; font-size: 18px; font-weight: 650; }
.mode-choice:hover { background: #f0edf9; border-color: #b8aedb; }
.mode-choice:active { transform: translateY(2px); box-shadow: 0 1px 0 #e4e2ef; }
.mode-choice small { display: block; font-size: 11px; font-weight: 450; color: #9690a9; margin-top: 4px; }
.mode-choice svg { width: 20px; color: #9c92c5; }
.leader-mode { display: block; font-size: 11px; color: #9690a9; margin-top: 7px; }

.grid-preview { display: grid; grid-template-columns: repeat(4, 10px); gap: 9px; pointer-events: none; }

.grid-preview .dot { width: 10px; height: 10px; box-shadow: none; }