:root{--bg: #f4efe6;--surface: #fffdf8;--border: #e3d9c8;--text: #2b2420;--muted: #7a6e63;--accent: #b8452e;--accent-ink: #fff;--board: #f4e8cd;--board-edge: #e6d2a8;--board-ink: #3b2a1a;--board-muted: #8a7458;--frame: #b4552f;--frame-dark: #8a3c1f;--frame-line: #f3dfb8;--seat-card: #fffaf0;--seat-ink: #2b2420;--turn: #e0a12b;--gold: #d9a520;--good: #2f8a57;--bad: #c0392b;--shadow: 0 1px 2px rgba(60, 40, 20, .08), 0 4px 14px rgba(60, 40, 20, .06);color-scheme:light}@media (prefers-color-scheme: dark){:root{--bg: #171412;--surface: #221e1b;--border: #3a332d;--text: #efe7dc;--muted: #a3978a;--accent: #e0674c;--board: #2c3040;--board-edge: #232634;--board-ink: #efe7dc;--board-muted: #a9a2b5;--frame: #8a3f22;--frame-dark: #5e2914;--frame-line: #d9b88a;--seat-card: #2b2622;--seat-ink: #efe7dc;--shadow: 0 1px 2px rgba(0, 0, 0, .4);color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Noto Sans TC,sans-serif}a{color:inherit}button{font:inherit}.app{max-width:960px;margin:0 auto;padding:0 16px 48px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{font-weight:700;font-size:18px;text-decoration:none}.brand-zh{color:var(--muted);font-weight:500;font-size:14px;margin-left:4px}.topbar-right{display:flex;gap:14px;align-items:center}.link{color:var(--muted);font-size:14px}.conn{font-size:12px;padding:2px 8px;border-radius:99px;border:1px solid var(--border)}.conn.on{color:var(--good)}.conn.off{color:var(--bad)}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px}.muted{color:var(--muted)}.small{font-size:13px}.row{display:flex;gap:10px;align-items:center}.row.end{justify-content:flex-end;margin-top:16px}.row.wrap{flex-wrap:wrap}.grow{flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;font-weight:600;transition:transform .08s,background .15s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}.btn.ghost{background:transparent}.btn.small{padding:4px 10px;font-size:13px}.btn.wide{width:100%}input{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);width:100%}.field{display:grid;gap:6px;margin:16px 0}.field span{font-size:13px;color:var(--muted)}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:50;background:var(--bad);color:#fff;padding:10px 16px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow);max-width:calc(100% - 32px)}.home,.lobby{display:grid;gap:0;max-width:520px;margin:0 auto}.hero h1{margin:0 0 4px;font-size:32px}.or{text-align:center;color:var(--muted);font-size:13px;margin:16px 0 10px}.join-row{display:flex;gap:10px}.code-input{text-transform:uppercase;letter-spacing:.3em;font-weight:700;text-align:center}.lobby-head{display:flex;justify-content:space-between;align-items:flex-start}.room-code{font-size:40px;font-weight:800;letter-spacing:.15em}.member-list{list-style:none;padding:0;margin:12px 0 18px;display:grid;gap:8px}.member-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-weight:700}.tag{font-size:11px;padding:1px 7px;border-radius:99px;background:var(--bg);color:var(--muted);margin-left:8px;border:1px solid var(--border)}.tag.warn{color:var(--bad)}.rules summary,details>summary{cursor:pointer;font-weight:700}.rules ol,.rules ul{padding-left:20px}.rules li{margin:4px 0}.rules h4{margin:14px 0 6px}.dice-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}.legend-row{display:flex;gap:10px;align-items:center}.die3d{--s: 56px;position:relative;flex:none;width:var(--s);height:var(--s);perspective:calc(var(--s) * 9);background:none;border:none;padding:0;margin:0;color:inherit;-webkit-user-select:none;user-select:none}.die3d:after{content:"";position:absolute;left:8%;right:8%;bottom:-14%;height:18%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);z-index:-1}.cube{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transform:var(--pose);transition:transform .35s ease}.cube-face,.cube-core{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border-radius:16%;backface-visibility:hidden}.cube-face{background:radial-gradient(120% 120% at 30% 25%,rgba(255,255,255,.28),transparent 55%),var(--die-bg);color:var(--die-ink);box-shadow:inset 0 0 0 calc(var(--s) * .03) #0000001f,inset 0 calc(var(--s) * -.06) calc(var(--s) * .1) #00000038;font-weight:800;line-height:1;font-size:calc(var(--s) * .52)}.cube-face.flag,.cube-face.minotaur,.cube-face.griffin,.cube-face.mermaid{font-size:calc(var(--s) * .46)}.cube-face span{text-shadow:0 1px 0 rgba(0,0,0,.18)}.cube-face.front{transform:translateZ(calc(var(--s) / 2))}.cube-face.right{transform:rotateY(90deg) translateZ(calc(var(--s) / 2));filter:brightness(.82)}.cube-face.top{transform:rotateX(90deg) translateZ(calc(var(--s) / 2));filter:brightness(1.12)}.cube-face.back{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}.cube-face.left{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2));filter:brightness(.82)}.cube-face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2));filter:brightness(.7)}.cube-core{top:6%;right:6%;bottom:6%;left:6%;background:var(--die-bg);filter:brightness(.6);backface-visibility:visible;border-radius:6%}.die3d.clickable{cursor:pointer;transition:transform .15s}.die3d.clickable:hover:not(.disabled){transform:translateY(-6px)}.die3d.clickable:hover:not(.disabled) .cube{transform:rotateX(-30deg) rotateY(-48deg)}.die3d.clickable:focus-visible{outline:3px solid var(--gold);outline-offset:6px;border-radius:12px}.die3d.disabled{opacity:.32;filter:grayscale(.7);cursor:not-allowed}.die3d.highlight .cube-face.front{box-shadow:inset 0 0 0 calc(var(--s) * .07) var(--gold)}.die3d.highlight:before{content:"";position:absolute;top:-22%;right:-22%;bottom:-22%;left:-22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,210,80,.55),transparent);z-index:-1;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.4}}.die3d.rolling{animation:toss .9s cubic-bezier(.25,.9,.4,1) both}.die3d.rolling .cube{animation:tumble .9s cubic-bezier(.2,.7,.3,1) both}@keyframes toss{0%{transform:translateY(-70%) scale(1.25);opacity:0}15%{opacity:1}55%{transform:translateY(6%) scale(1)}72%{transform:translateY(-12%)}88%{transform:translateY(0)}to{transform:none}}@keyframes tumble{0%{transform:var(--pose) rotateX(var(--spin-x)) rotateY(var(--spin-y))}to{transform:var(--pose)}}body.in-game .app{max-width:1120px}.game{display:flex;flex-direction:column;gap:10px}.game-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}.game-bar-info{display:flex;gap:10px;align-items:center}.game-bar-actions{display:flex;gap:6px;flex-wrap:wrap}.pill{padding:2px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-weight:700;letter-spacing:.08em}.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--border))}.table-area{--table-die: clamp(30px, 7cqw, 62px);--avatar: clamp(38px, 7.5cqw, 64px);container-type:inline-size;position:relative;width:min(100%,calc((100dvh - 300px)*1.75));aspect-ratio:1.75;margin:34px auto 54px}.board-frame{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:7%/12%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 21H21V3H6V15H15V9H10' fill='none' stroke='%23f3dfb8' stroke-width='2.2' stroke-opacity='.55'/%3E%3C/svg%3E") 0 0 / clamp(14px,2.2cqw,24px) repeat,linear-gradient(160deg,var(--frame),var(--frame-dark));box-shadow:0 18px 40px #3c1e0a40,inset 0 2px #ffffff2e,inset 0 -4px 10px #00000040;padding:clamp(12px,2.6cqw,26px)}.board{position:relative;width:100%;height:100%;border-radius:5%/9%;background:radial-gradient(ellipse at 50% 45%,var(--board) 55%,var(--board-edge) 100%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--frame-line) 60%,transparent),inset 0 2px 12px #3c1e0a2e;overflow:hidden;color:var(--board-ink)}.board-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50%;aspect-ratio:1;color:var(--frame);opacity:.11;pointer-events:none}.center-info{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;text-align:center;color:var(--board-ink);width:40%}.center-round{font-size:clamp(10px,1.6cqw,13px);text-transform:uppercase;letter-spacing:.12em;color:var(--board-muted);font-weight:700}.center-status{font-weight:800;font-size:clamp(14px,2.6cqw,22px);line-height:1.2}.center-status.mine{color:var(--accent)}.center-bonus{color:var(--accent);font-weight:800;animation:pulse .9s ease-in-out infinite}.led{font-size:clamp(10px,1.5cqw,12px);padding:3px 10px;border-radius:99px;background:var(--chip);color:#fff;font-weight:700;box-shadow:0 2px 5px #3c1e0a40}.info-btn{width:20px;height:20px;margin-left:8px;vertical-align:1px;padding:0;border-radius:50%;border:1px solid var(--board-muted);background:transparent;color:var(--board-ink);font:italic 700 12px/1 Georgia,serif;cursor:pointer}.info-btn:hover{background:color-mix(in srgb,var(--board-muted) 20%,transparent)}.played{position:absolute;z-index:2;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;transition:left .6s cubic-bezier(.5,0,.3,1),top .6s cubic-bezier(.5,0,.3,1),opacity .6s ease .25s}.played.collected{opacity:0}.seat{position:absolute;z-index:4;transform:translate(-50%,-38%);display:grid;justify-items:center;gap:0;width:clamp(80px,15cqw,130px)}.seat-avatar{position:relative;width:var(--avatar);height:var(--avatar);border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:calc(var(--avatar) * .42);background:linear-gradient(145deg,#5f7c8a,#3f5866);color:#fff;border:3px solid var(--seat-card);box-shadow:0 3px 8px #3c1e0a4d;transition:box-shadow .25s,border-color .25s}.seat.me .seat-avatar{background:linear-gradient(145deg,#c2553c,#8e3a22)}.seat.turn .seat-avatar{border-color:var(--turn);box-shadow:0 0 0 4px color-mix(in srgb,var(--turn) 35%,transparent),0 3px 8px #3c1e0a4d;animation:turnglow 1.4s ease-in-out infinite}.seat.winner .seat-avatar{border-color:var(--turn);box-shadow:0 0 0 6px color-mix(in srgb,var(--turn) 45%,transparent)}.seat.offline{opacity:.55}@keyframes turnglow{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--turn) 12%,transparent),0 3px 8px #3c1e0a4d}}.lead-mark{position:absolute;right:-6px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--frame);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;border:2px solid var(--seat-card)}.nameplate{margin-top:-8px;padding:6px 10px 4px;min-width:100%;text-align:center;background:var(--seat-card);color:var(--seat-ink);border:1px solid var(--border);border-radius:10px;box-shadow:0 3px 8px #3c1e0a2e}.seat.turn .nameplate{border-color:var(--turn)}.np-name{font-size:clamp(11px,1.6cqw,14px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-score{font-size:clamp(11px,1.5cqw,13px);color:var(--accent);font-weight:800}.seat-stats{display:flex;gap:5px;align-items:center;margin-top:4px;min-height:20px}.bid-badge{font-size:11px;font-weight:800;padding:1px 8px;border-radius:6px;background:var(--seat-card);color:var(--seat-ink);border:1px solid var(--border)}.bid-badge.made{background:var(--good);color:#fff;border-color:transparent}.bid-badge.over{background:var(--bad);color:#fff;border-color:transparent}.bonus-badge{font-size:11px;font-weight:800;color:#3a2a00;background:#f2c94c;padding:1px 6px;border-radius:6px}.hidden-dice{display:flex;gap:2px}.hidden-dice i{width:9px;height:9px;border-radius:2px;background:linear-gradient(135deg,#fffaf0,#cdbf9f);box-shadow:0 1px 2px #3c1e0a66}.bubble{position:absolute;bottom:100%;margin-bottom:4px;white-space:nowrap;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--seat-card);color:var(--seat-ink);border:1px solid var(--border);box-shadow:0 2px 6px #3c1e0a2e}.bubble.ready{background:var(--good);color:#fff;border-color:transparent}.action-bar{position:sticky;bottom:0;z-index:10;display:grid;justify-items:center;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);border-bottom:none;border-radius:16px 16px 0 0;box-shadow:0 -4px 18px #3c1e0a14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.action-bar.active{border-color:var(--turn);box-shadow:0 -4px 22px color-mix(in srgb,var(--turn) 25%,transparent)}.action-label{font-weight:700;text-align:center}.action-bar.active .action-label{color:var(--accent)}.tray{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding:6px 4px 10px}.tray.empty{padding:10px;color:var(--muted)}.bid-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.btn.bid{width:48px;height:48px;padding:0;border-radius:12px;font-size:20px;font-weight:800;background:var(--seat-card);color:var(--seat-ink);border:2px solid var(--border);box-shadow:0 3px 0 var(--border)}.btn.bid:hover{border-color:var(--accent);color:var(--accent)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;z-index:40;padding:16px}.modal{width:min(720px,100%);max-height:calc(100dvh - 32px);overflow:auto;margin:0;color:var(--text)}.modal h2{margin-top:0}.modal .rules{border:none;box-shadow:none;padding:0;margin:0}.winner{font-size:18px;font-weight:700}.ranks{width:min(380px,100%)}.ranks h3{margin:0 0 10px}.monster-cycle{margin:4px 0 6px}.mc-row{display:flex;align-items:center;justify-content:center;gap:4px}.mc-tile{flex:1 1 0;max-width:104px;display:grid;justify-items:center;gap:4px;padding:10px 4px 8px;border-radius:14px;background:var(--tile);color:#fff;box-shadow:inset 0 -4px #0003,0 3px 8px #0000002e}.mc-icon{font-size:40px;line-height:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}.mc-name{font-size:15px;font-weight:800;white-space:nowrap}.mc-arrow{display:grid;justify-items:center;line-height:1;color:var(--text);flex:none}.mc-arrow span{font-size:34px;font-weight:900}.mc-arrow small{font-size:11px;font-weight:700;color:var(--muted)}.mc-loop{position:relative;margin:6px 12% 0;padding-top:14px;text-align:center}.mc-loop-line{position:absolute;left:0;right:0;top:0;height:14px;border:3px solid var(--muted);border-top:none;border-radius:0 0 14px 14px}.mc-loop-line:before{content:"";position:absolute;left:-9px;top:-8px;border:7.5px solid transparent;border-bottom:9px solid var(--muted);border-top:none}.mc-loop-label{display:inline-block;margin-top:6px;font-size:14px;font-weight:700}.ranks-note{font-size:13px;color:var(--muted);text-align:center;margin:6px 0 14px}.ranks-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.ranks-list li{display:flex;align-items:center;gap:12px}.ranks-faces{font-size:13px;color:var(--muted)}.scroll-x{overflow-x:auto}.scoreboard{border-collapse:collapse;width:100%;font-size:14px}.scoreboard th,.scoreboard td{padding:6px 8px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap}.scoreboard th.me{color:var(--accent)}.scoreboard td.made .cell-main{color:var(--good);font-weight:700}.scoreboard td.missed .cell-main{color:var(--bad);font-weight:700}.cell-sub{font-size:11px;color:var(--muted)}.scoreboard td.left{text-align:left;white-space:normal}.chip{display:inline-block;font-size:12px;padding:1px 8px;margin:2px;border-radius:99px;border:1px solid var(--border)}.chip.gold{border-color:var(--gold);color:var(--gold);font-weight:700}@media (max-width: 640px){.room-code{font-size:32px}.app{padding:0 10px}.table-area{--table-die: clamp(30px, 10cqw, 48px);--avatar: clamp(36px, 11cqw, 48px);aspect-ratio:.72;width:min(100%,calc((100dvh - 330px)*.78));margin:30px auto 50px}.seat{width:clamp(70px,26cqw,96px)}.np-name{font-size:11px}.center-info{width:56%}.board-frame{border-radius:12%/8%}.board{border-radius:9%/6%}.played-name{display:none}.tray{gap:14px}}@media (prefers-reduced-motion: reduce){.die3d.rolling,.die3d.rolling .cube,.seat.turn .seat-avatar,.center-bonus,.die3d.highlight:before{animation:none}.played{transition:none}}.modal.narrow{width:min(400px,100%)}.played-name{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;max-width:90px;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--board-ink) 70%,transparent);color:var(--board);padding:1px 8px;border-radius:99px}.die3d.rolled .cube-face:not(.result) span{opacity:.18}.die3d.rolled .cube-face:not(.result){filter:brightness(.62)}.die3d.rolled .cube-face.result{filter:none;box-shadow:inset 0 0 0 calc(var(--s) * .05) #ffffffd9,inset 0 calc(var(--s) * -.06) calc(var(--s) * .1) #00000038;font-size:calc(var(--s) * .6)}.die3d.rolled .cube-face.result.flag,.die3d.rolled .cube-face.result.minotaur,.die3d.rolled .cube-face.result.griffin,.die3d.rolled .cube-face.result.mermaid{font-size:calc(var(--s) * .54)}.die3d.rolled .cube-face.result span{text-shadow:0 2px 0 rgba(0,0,0,.25)}.die3d.rolling .cube-face span{transition:opacity .2s .75s}.die3d:not(.rolled) .cube-face.top span{opacity:.55}.die3d{perspective:calc(var(--s) * 14)}.lang-toggle{display:inline-flex;border:1px solid var(--border);border-radius:99px;overflow:hidden}.lang-toggle button{border:none;background:transparent;color:var(--muted);font-size:12px;font-weight:700;padding:3px 10px;cursor:pointer}.lang-toggle button.on{background:var(--accent);color:#fff}.hero-zh{font-size:.55em;color:var(--muted);font-weight:600}.settings-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}.settings-head h3{margin:0}.bag-total{font-size:13px;color:var(--muted);font-weight:600}.bag-total.bad{color:var(--bad)}.count-list{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 18px}.count-list li{display:flex;align-items:center;gap:12px;padding:4px 0}.stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:10px;overflow:hidden}.stepper button{width:34px;height:32px;border:none;background:var(--bg);color:var(--text);font-size:18px;font-weight:700;cursor:pointer}.stepper button:disabled{opacity:.35;cursor:not-allowed}.stepper b{min-width:30px;text-align:center}.stepper b.changed{color:var(--accent)}
