.app{max-width:1280px;margin:0 auto;padding:1.25rem 1.25rem 3rem}.top{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;display:flex}.brand{font-family:var(--font-display);letter-spacing:-.03em;color:var(--ink);margin:0;font-size:2rem;font-weight:600}.tagline{color:var(--muted);max-width:36rem;margin:.25rem 0 0;font-size:.95rem}.top-actions{flex-shrink:0;gap:.5rem;display:flex}.btn{font:inherit;cursor:pointer;border:1px solid #0000;border-radius:999px;padding:.65rem 1.2rem;transition:transform .16s,background .16s,color .16s}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn.primary{background:var(--accent);color:#1a1208;font-weight:600}.btn.primary:not(:disabled):hover{background:var(--accent-hot)}.btn.ghost{border-color:var(--line);color:var(--ink);background:0 0}.btn.ghost:hover{background:var(--lift)}.hero-screen{grid-template-columns:1.2fr .8fr;align-items:center;gap:2rem;min-height:min(70vh,640px);padding:1rem 0 2rem;display:grid}.hero-copy h1{font-family:var(--font-display);letter-spacing:-.03em;margin:0 0 1rem;font-size:clamp(2rem,4vw,3.1rem);font-weight:600;line-height:1.1}.hero-copy p{color:var(--muted);max-width:38rem;margin:0 0 1rem;line-height:1.55}.hero-meta{font-size:.95rem}.hero-visual{background:radial-gradient(circle at 30% 40%,#e0a53b59,#0000 45%),radial-gradient(circle at 70% 60%,#4a8c7859,#0000 50%),linear-gradient(160deg,#1c2430,#0d1117 70%);border-radius:1.5rem;height:320px;position:relative;overflow:hidden}.orb{filter:blur(2px);border-radius:50%;animation:7s ease-in-out infinite float;position:absolute}.orb-a{background:#e0a53b8c;width:140px;height:140px;top:28%;left:18%}.orb-b{background:#5aa08c80;width:90px;height:90px;animation-delay:-2.5s;bottom:24%;right:22%}.orb-ring{border:1px solid #ffffff2e;border-radius:50%;animation:5s ease-in-out infinite pulse;position:absolute;inset:18%}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}@keyframes pulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.04)}}.gate{max-width:40rem;padding:1rem 0 2rem}.gate h1{font-family:var(--font-display);margin:0 0 .75rem;font-size:2.2rem}.gate p{color:var(--muted);margin:0 0 1rem}.q-input{width:100%;font:inherit;border:1px solid var(--line);background:var(--lift);color:var(--ink);resize:vertical;border-radius:1rem;margin-bottom:1rem;padding:1rem 1.1rem}.q-input:focus{outline:2px solid var(--accent);outline-offset:2px}.learn{background:var(--lift);border:1px solid var(--line);border-radius:1.25rem;margin-bottom:1.5rem;padding:1.25rem;animation:.28s rise}.learn h2{font-family:var(--font-display);margin:0 0 1rem;font-size:1.4rem}.learn-grid{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.learn article h3{color:var(--accent-hot);margin:0 0 .4rem;font-size:1rem}.learn article p{color:var(--muted);margin:0;font-size:.92rem;line-height:1.45}.play{grid-template-columns:1.45fr .9fr;align-items:start;gap:1.25rem;display:grid}.board-shell{background:var(--lift);border:1px solid var(--line);border-radius:1.25rem;padding:.85rem}.board-legend{flex-wrap:wrap;gap:.4rem .75rem;margin-bottom:.65rem;padding:0 .2rem;display:flex}.board-legend-item{color:var(--muted);padding-left:.7rem;font-size:.72rem;position:relative}.board-legend-item:before{content:"";background:var(--c);border-radius:50%;width:.45rem;height:.45rem;position:absolute;top:.35em;left:0}.board{flex-direction:column;gap:4px;display:flex}.board-row{grid-template-columns:repeat(9,1fr);gap:4px;display:grid}.cell{aspect-ratio:1;border:1px solid color-mix(in srgb, var(--chakra) 35%, transparent);background:color-mix(in srgb, var(--soft) 88%, white);cursor:pointer;text-align:left;min-height:0;font:inherit;color:#1c1915;border-radius:8px;padding:4px;transition:transform .14s,border-color .14s;position:relative;overflow:hidden}.cell:hover{border-color:var(--chakra);z-index:1;transform:translateY(-1px)}.cell--here{outline:2px solid var(--accent);outline-offset:1px;z-index:2}.cell--sel{border-color:#1c1915}.cell--goal{background:linear-gradient(145deg,#f3e2b5,#e8c86a);border-color:#b8860b}.cell--shadow{background:color-mix(in srgb, var(--soft) 70%, #d8c4b8)}.cell--light{background:color-mix(in srgb, var(--soft) 75%, #fff)}.cell-num{opacity:.7;font-size:.62rem;font-weight:700;line-height:1;display:block}.cell-name{margin-top:2px;font-size:clamp(.48rem,.85vw,.68rem);font-weight:600;line-height:1.15;display:block}.cell-mark{font-size:.55rem;font-weight:700;position:absolute;bottom:2px;right:3px}.cell-mark--up{color:#1f6b45}.cell-mark--down{color:#8b2e1f}.token{background:var(--accent);border-radius:50%;width:10px;height:10px;animation:1.8s ease-in-out infinite pulse;position:absolute;top:4px;right:4px;box-shadow:0 0 0 2px #1a120840}.board-hint{color:var(--muted);text-align:center;margin:.55rem 0 0;font-size:.78rem}.play-side{flex-direction:column;gap:.85rem;display:flex}.status-card,.panel,.log{background:var(--lift);border:1px solid var(--line);border-radius:1.15rem;padding:1rem 1.05rem}.status-q{font-family:var(--font-display);margin:0 0 .4rem;font-size:1.15rem;line-height:1.25}.status-pos{color:var(--muted);margin:0 0 .85rem;font-size:.92rem}.dice-wrap{flex-direction:column;align-items:center;gap:.5rem;display:flex}.dice{border:1px solid var(--line);cursor:pointer;background:#f7f3ea;border-radius:16px;width:76px;height:76px;padding:10px;transition:transform .16s}.dice:not(:disabled):hover{transform:scale(1.04)}.dice--spin{animation:.52s tumble}.dice-face{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:4px;width:100%;height:100%;display:grid}.pip{background:0 0;border-radius:50%}.pip--on{background:#1c1915}.dice-label{color:var(--muted);text-align:center;margin:0;font-size:.85rem}@keyframes tumble{0%{transform:rotate(0)scale(1)}40%{transform:rotate(18deg)scale(1.08)}to{transform:rotate(0)scale(1)}}.win-badge{text-align:center;padding:.5rem 0}.win-badge p{font-family:var(--font-display);margin:0 0 .75rem;font-size:1.25rem}.panel-kicker{letter-spacing:.04em;text-transform:uppercase;margin-bottom:.35rem;font-size:.78rem;font-weight:650}.panel-title{font-family:var(--font-display);margin:0 0 .55rem;font-size:1.35rem;line-height:1.2}.panel-id{opacity:.45;margin-right:.25rem}.panel-chakra-focus,.panel-meaning,.panel-reflect,.panel-muted,.panel-q{color:var(--muted);margin:0 0 .65rem;font-size:.92rem;line-height:1.45}.panel-reflect strong{color:var(--ink)}.panel-link{margin:0 0 .4rem;font-size:.88rem;font-weight:600}.panel-link--up{color:#1f6b45}.panel-link--down{color:#8b2e1f}.voices{flex-direction:column;gap:.55rem;margin-top:.75rem;display:flex}.voice{border-radius:.85rem;margin:0;padding:.7rem .8rem;font-size:.9rem;line-height:1.4;animation:.32s rise}.voice--guide{background:#4a8c7824;border-left:3px solid #4a8c78}.voice--judge{background:#a8543a1f;border-left:3px solid #a8543a}.log h3{margin:0 0 .5rem;font-size:.95rem}.log ul{max-height:180px;margin:0;padding:0;list-style:none;overflow:auto}.log li{color:var(--muted);border-bottom:1px solid var(--line);padding:.28rem 0;font-size:.82rem}.log-snake{color:#8b2e1f}.log-arrow{color:#1f6b45}.log-win{color:var(--accent-hot);font-weight:600}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=980px){.hero-screen,.play,.learn-grid{grid-template-columns:1fr}.hero-visual{order:-1;height:200px}.cell-name{font-size:.5rem}.top{flex-direction:column}}@media (width<=640px){.app{padding:.85rem .7rem 2.5rem}.board-shell{padding:.45rem;overflow-x:auto}.board{min-width:560px}}:root{--font-display:"Fraunces", "Times New Roman", serif;--font-body:"Manrope", "Segoe UI", sans-serif;--ink:#f3efe6;--muted:#b7b0a3;--line:#f3efe61f;--lift:#ffffff0a;--accent:#e0a53b;--accent-hot:#f0b84d;--bg0:#0c1016;--bg1:#151b24;color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%, #e0a53b1f, transparent 55%), radial-gradient(900px 500px at 100% 0%, #4a8c781a, transparent 50%), linear-gradient(180deg, var(--bg1), var(--bg0));font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:450;line-height:1.45}*{box-sizing:border-box}html,body,#root{min-height:100%}body{min-width:320px;margin:0}button,textarea{font:inherit}::selection{background:#e0a53b59}