:root{--bg: #1a1208;--bg-2: #2a1a0c;--panel: rgba(58, 36, 16, .78);--panel-solid: #3a2410;--line: rgba(242, 201, 76, .22);--sun: #f2c94c;--sun-line: rgba(242, 201, 76, .55);--sun-tint: rgba(242, 201, 76, .14);--sun-glow: rgba(242, 201, 76, .45);--ember: #e2573d;--ember-tint: rgba(226, 87, 61, .18);--leaf: #3fb7a3;--leaf-tint: rgba(63, 183, 163, .16);--text: #fbefd6;--text-dim: rgba(251, 239, 214, .62);--font-display: "Rubik Mono One", "Outfit", system-ui, sans-serif;--font-body: "Outfit", system-ui, -apple-system, sans-serif;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(1200px 500px at 50% -10%,rgba(242,201,76,.16),transparent 60%),radial-gradient(800px 400px at 50% 110%,rgba(226,87,61,.14),transparent 60%),linear-gradient(var(--bg-2),var(--bg));color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font-family:inherit;cursor:pointer}#app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:14px 14px 28px;gap:12px}.enter{animation:rise .5s var(--ease) both}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.hero-title{font-family:var(--font-display);font-size:clamp(30px,8vw,46px);line-height:1;margin:0;letter-spacing:.01em;color:var(--text);text-align:center}.hero-title span{color:var(--sun)}.hero-sub{text-align:center;color:var(--text-dim);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-top:8px}.btn{border:0;border-radius:999px;padding:14px 22px;font-weight:700;font-size:16px;transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s}.btn:active{transform:scale(.97)}.btn--sun{background:var(--sun);color:#2a1a0c;box-shadow:0 8px 28px var(--sun-glow)}.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line)}.btn--ember{background:var(--ember-tint);color:var(--ember);border:1px solid rgba(226,87,61,.4)}.btn[disabled]{opacity:.45;box-shadow:none;cursor:default}.btn--big{font-size:20px;padding:18px 28px;width:100%}.card{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;backdrop-filter:blur(6px)}.card h2{font-family:var(--font-display);font-size:20px;margin:0 0 12px;letter-spacing:.01em}.stack{display:flex;flex-direction:column;gap:10px}.row{display:flex;gap:10px;align-items:center}.muted{color:var(--text-dim);font-size:13px}.center{text-align:center}.menu{width:min(460px,100%);display:flex;flex-direction:column;gap:14px}.menu-top{display:flex;justify-content:space-between;align-items:center}.player-chip,.ghost-btn,.icon-btn{background:var(--panel);border:1px solid var(--line);border-radius:999px;color:var(--text);display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;font-size:13px}.ghost-btn,.icon-btn{width:40px;height:40px;justify-content:center;padding:0;font-size:18px}.ghost-group{display:flex;gap:8px}.chip-avatar{width:28px;height:28px;border-radius:50%;background:var(--sun);color:#2a1a0c;display:grid;place-items:center;font-weight:800}.chip-lvl{color:var(--sun);font-size:11px;letter-spacing:.08em}.hero{position:relative;display:grid;place-items:center;padding:8px 0 0}.hero-art{filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}.hero-glow{position:absolute;inset:10% 20%;background:radial-gradient(closest-side,var(--sun-tint),transparent)}.hero-token{animation:bob 2.4s ease-in-out infinite;transform-origin:center}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.mode-rail{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-tile{background:linear-gradient(180deg,#ffffff0d,#ffffff03),var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px 14px;display:flex;flex-direction:column;gap:8px}.mode-tile--wide{grid-column:1 / -1}.mode-tile__title{font-family:var(--font-display);font-size:17px}.mode-tile__sub{color:var(--text-dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.mode-tile .btn{margin-top:4px}.footer-note{color:var(--text-dim);font-size:13px;text-align:center;line-height:1.5}.link-btn{background:none;border:0;color:var(--sun);font:inherit;font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px}.code-box{font-family:var(--font-display);font-size:clamp(34px,11vw,52px);letter-spacing:.18em;text-align:center;padding:14px 0 10px 8px;color:var(--sun);background:#00000040;border-radius:16px;border:1px dashed var(--sun-line)}.seat-list{display:flex;flex-direction:column;gap:8px}.seat-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#0003;border:1px solid transparent;animation:rise .35s var(--ease) both}.seat-row.is-you{border-color:var(--sun-line)}.seat-row.is-empty{opacity:.45;border-style:dashed;border-color:var(--line)}.seat-row.is-off{opacity:.4;text-decoration:line-through}.seat-dot{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset -3px -3px 6px #00000059,0 0 0 2px #0000004d}.seat-name{font-weight:600;flex:1}.seat-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.seat-tag.host{color:var(--sun)}.seat-tag.live{color:var(--leaf)}.seat-tag.away{color:var(--ember)}.size-pick{display:flex;gap:8px;justify-content:center}.size-pick button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:700;font-size:16px}.size-pick button.is-on{background:var(--sun);color:#2a1a0c;border-color:var(--sun)}.code-input{width:100%;font-family:var(--font-display);font-size:28px;letter-spacing:.2em;text-align:center;text-transform:uppercase;padding:12px;border-radius:14px;border:1px solid var(--line);background:#00000040;color:var(--text)}.game{width:min(520px,100%);display:flex;flex-direction:column;gap:10px}.app-header{display:flex;justify-content:space-between;align-items:center;width:100%}.app-title{font-family:var(--font-display);font-size:18px}.app-title span{color:var(--sun)}.app-title .sub{font-family:var(--font-body);color:var(--text-dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.controls-row{display:flex;gap:8px}.controls-row .pill{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px}.board-wrap{width:100%;aspect-ratio:1;position:relative}.board-wrap canvas{width:100%;height:100%;display:block;border-radius:20px}.float-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.float-text{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:26px;color:var(--sun);text-shadow:0 4px 16px rgba(0,0,0,.6);animation:floatUp 1.5s var(--ease) both}.float-text.hazard{color:var(--ember)}.float-text.boost{color:var(--leaf)}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-110%) scale(1)}}.table{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}.table .seat-row{padding:6px 10px;font-size:13px;gap:8px}.table .seat-row.is-turn{border-color:var(--sun-line);box-shadow:0 0 0 1px var(--sun-tint),0 6px 20px var(--sun-glow)}.table .seat-stop{font-family:var(--font-display);font-size:15px;color:var(--sun)}.hud{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:12px 14px;display:flex;align-items:center;gap:12px}.hud .turn-text{flex:1;font-weight:600}.hud .turn-text small{display:block;color:var(--text-dim);font-weight:400;font-size:12px}.clock{position:relative;width:44px;height:44px;flex:none}.clock svg{transform:rotate(-90deg)}.clock circle{fill:none;stroke-width:4}.clock .track{stroke:#ffffff1f}.clock .arc{stroke:var(--sun);stroke-linecap:round;transition:stroke-dashoffset .25s linear}.clock.is-hot .arc{stroke:var(--ember)}.clock .num{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:14px}.roll-btn{min-width:118px;font-size:18px;padding:14px 20px}.roll-btn.is-live{animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 8px 28px var(--sun-glow)}50%{box-shadow:0 8px 40px var(--sun)}}.die3d{--die: 44px;width:var(--die);height:var(--die);flex:none;perspective:260px}.die3d--big{--die: 96px;perspective:520px}.die3d__cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0) rotateY(0)}.die3d:after{content:"";position:absolute;left:10%;right:10%;bottom:-18%;height:22%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);transition:transform .3s ease,opacity .3s ease}.die3d{position:relative}.die3d.is-rolling:after{transform:scale(1.5);opacity:.6}.die3d__face{position:absolute;inset:0;border-radius:calc(var(--die) * .2);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.9),transparent 55%),linear-gradient(160deg,#fff7e0,#e7d3a6);border:1px solid rgba(90,60,20,.35);box-shadow:inset 0 0 calc(var(--die) * .12) #78501e40}.die3d__pip{position:absolute;width:19%;height:19%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,#4a2c12,#1d1006);box-shadow:inset 0 1px 1px #ffffff40}.die3d__face--1{transform:rotateY(0) translateZ(calc(var(--die) / 2))}.die3d__face--2{transform:rotateY(90deg) translateZ(calc(var(--die) / 2))}.die3d__face--3{transform:rotateY(180deg) translateZ(calc(var(--die) / 2))}.die3d__face--4{transform:rotateY(-90deg) translateZ(calc(var(--die) / 2))}.die3d__face--5{transform:rotateX(90deg) translateZ(calc(var(--die) / 2))}.die3d__face--6{transform:rotateX(-90deg) translateZ(calc(var(--die) / 2))}.roll-stage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s ease}.roll-stage.is-on{opacity:1}.roll-stage__pad{display:grid;place-items:center;gap:10px;padding:22px 26px;border-radius:26px;background:#140c048c;backdrop-filter:blur(4px);border:1px solid var(--sun-line);box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff0d inset;transform:scale(.9);transition:transform .25s var(--ease)}.roll-stage.is-on .roll-stage__pad{transform:scale(1)}.roll-stage__who{font-family:var(--font-display);font-size:15px;color:var(--sun);letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.6)}@media (prefers-reduced-motion: reduce){.die3d__cube{transition:none!important}}.banner{text-align:center;font-size:13px;color:var(--text-dim);padding:8px 12px;border-radius:12px;background:#0003;min-height:34px}.banner:empty{display:none}.banner.line{color:var(--text);font-style:italic}.banner.line small{display:block;color:var(--text-dim);font-style:normal}.chat-dock{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:6px}.chat-log{min-height:24px;max-height:52px;overflow:hidden;font-size:12px;color:var(--text-dim)}.chat-log .flash{animation:flashIn .7s var(--ease);color:var(--text)}@keyframes flashIn{0%{background:var(--sun-tint)}to{background:transparent}}.chat-quick,.chat-emoji{display:flex;gap:6px;flex-wrap:wrap}.chat-quick button,.chat-emoji button{background:#ffffff0d;border:1px solid var(--line);color:var(--text);border-radius:999px;padding:4px 10px;font-size:12px}.chat-row{display:flex;gap:6px}.chat-row input{flex:1;background:#0000004d;border:1px solid var(--line);border-radius:999px;color:var(--text);padding:8px 12px;font:inherit;font-size:13px}.chat-row button{background:var(--sun);color:#2a1a0c;border:0;border-radius:999px;padding:8px 14px;font-weight:700}.overlay,.settings-sheet{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#0a0602b3;backdrop-filter:blur(8px);animation:fadeIn .3s ease both}.overlay.is-win{background:radial-gradient(circle at 50% 40%,#f2c94c4d,#0a0602d9 60%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.card--result{text-align:center}.result-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sun)}.card--result h2{font-size:26px;margin:6px 0 14px}.result-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;text-align:left}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.settings-row{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.settings-row input[type=range]{width:120px;accent-color:var(--sun)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--panel-solid);border:1px solid var(--line);border-radius:999px;padding:10px 16px;z-index:30;font-size:13px}.spinner{width:34px;height:34px;margin:4px auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--sun);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width: 720px){.game{width:min(600px,100%)}}
