:root{font-family:Noto Sans TC,system-ui,sans-serif;color:#f5f5f3;background:#090b0c;--line:rgba(255,255,255,.11);--muted:#85898d;--gold:#d8b46a}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(circle at 50% 45%,#1a1d1d 0,#0d0f10 42%,#070809)}button{font:inherit}.topbar{height:72px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#08090ac2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:relative;z-index:10}.brand{display:flex;align-items:baseline;gap:12px}.brand span{font-weight:800;letter-spacing:.08em}.brand small{font-size:9px;color:#777;letter-spacing:.18em}.turn-status{font-size:12px;color:#b9b9b4;letter-spacing:.12em}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d8b46a;box-shadow:0 0 12px #d8b46a;margin-right:8px}.round{display:flex;align-items:baseline;gap:9px;color:#73777b;font-size:10px;letter-spacing:.16em}.round b{color:#ddd;font-size:13px}.game-layout{height:calc(100% - 190px);min-height:520px;display:grid;grid-template-columns:minmax(220px,290px) minmax(480px,1fr) minmax(220px,290px);gap:0}.score-panel{padding:24px 18px;border-right:1px solid var(--line);background:linear-gradient(90deg,rgba(255,255,255,.018),transparent)}.score-panel.right{border-left:1px solid var(--line);border-right:0}.player-head{display:flex;align-items:flex-end;justify-content:space-between;padding:0 5px 14px;border-bottom:1px solid var(--line);margin-bottom:7px}.player-head small{font-size:9px;letter-spacing:.18em;color:#777}.player-head h2{font-size:20px;margin:3px 0 0;letter-spacing:.08em}.player-head strong{font-size:25px;color:#eee}.score-list{display:flex;flex-direction:column;gap:1px}.score-row{display:grid;grid-template-columns:1fr 42px;align-items:center;min-height:28px;padding:0 7px;border-radius:5px;color:#999;font-size:11px;transition:.2s}.score-row .score-name{letter-spacing:.03em}.score-row .score-val{text-align:right;color:#c9c9c4;font-weight:600}.score-row.available{cursor:pointer}.score-row.available:hover{background:#d8b46a1f;color:#fff}.score-row.available:hover .score-val{color:#e6c97d}.score-row.used{opacity:.42}.score-row.preview{background:#ffffff12;color:#eee}.score-row.bonus{margin-top:2px;border-top:1px solid var(--line);padding-top:2px;color:#d6b66f}.score-row.bonus .score-val{color:#d6b66f}.arena-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.arena-title{position:absolute;top:18px;font-size:10px;letter-spacing:.3em;color:#64696b;z-index:4}.arena{width:min(62vw,700px);height:min(56vh,570px);min-height:430px;position:relative;touch-action:none}.arena canvas{width:100%;height:100%;display:block}.roll-btn{position:absolute;top:65px;z-index:5;width:90px;height:90px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:radial-gradient(circle at 35% 25%,#343737,#161818 62%,#0c0d0d);color:#fff;box-shadow:0 12px 40px #00000073,inset 0 1px #ffffff21;cursor:pointer;transition:.2s}.roll-btn:hover{transform:translateY(-2px);border-color:#d8b46a8c}.roll-btn:active{transform:scale(.96)}.roll-btn span{display:block;font-size:27px;font-weight:800;line-height:29px}.roll-btn small{font-size:8px;letter-spacing:.18em;color:#777}.power{position:absolute;bottom:52px;width:120px;height:2px;background:#252829;z-index:5;overflow:hidden}.power i{display:block;width:0;height:100%;background:#d8b46a;box-shadow:0 0 9px #d8b46a;transition:width .08s}.gesture-copy{position:absolute;bottom:32px;color:#555a5c;font-size:9px;letter-spacing:.08em}#handHint{position:absolute;left:50%;bottom:100px;transform:translate(-50%);font-size:28px;color:#d8b46a73;opacity:.65;animation:swipeHint 1.7s infinite;pointer-events:none;z-index:4}@keyframes swipeHint{0%,to{transform:translate(-50%,10px);opacity:.05}40%{opacity:.65}70%{transform:translate(-50%,-18px);opacity:.05}}.dice-tray{height:118px;border-top:1px solid var(--line);background:#08090ae6;display:flex;align-items:center;gap:22px;padding:0 34px;position:relative;z-index:8}.tray-label{width:145px;color:#b8b8b4;font-size:10px;letter-spacing:.14em}.tray-label small{display:block;margin-top:6px;color:#55595b;font-size:8px;letter-spacing:.06em}.dice-tray-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex:1}.die-card{width:72px;height:72px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,#252828,#101212);box-shadow:0 9px 22px #00000059,inset 0 1px #ffffff14;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:.18s}.die-card:hover{transform:translateY(-3px)}.die-card.hold{border-color:#d8b46a;box-shadow:0 0 0 1px #d8b46a33,0 9px 28px #0006,0 0 22px #d8b46a1a}.die-card:after{content:"HOLD";position:absolute;bottom:5px;font-size:7px;letter-spacing:.18em;color:#d8b46a;opacity:0}.die-card.hold:after{opacity:1}.die-mini{width:49px;height:49px;border-radius:9px;background:#ecebe6;box-shadow:inset 0 -4px 8px #00000021,0 5px 9px #0000004d;display:grid;place-items:center}.pips{width:35px;height:35px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px}.pip{width:6px;height:6px;border-radius:50%;background:#151616;align-self:center;justify-self:center}.die-num{position:absolute;top:4px;right:7px;font-size:9px;color:#555}.toast{position:fixed;left:50%;bottom:135px;transform:translate(-50%,10px);padding:9px 15px;border:1px solid rgba(255,255,255,.1);background:#0c0d0de0;border-radius:20px;color:#bbb;font-size:11px;opacity:0;transition:.25s;z-index:30}.toast.show{opacity:1;transform:translate(-50%)}.big-fx{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:50;background:#0000}.big-fx.show{animation:fx 1.35s ease-out}.fx-title{font-size:clamp(48px,9vw,120px);font-weight:900;letter-spacing:.12em;text-shadow:0 0 30px rgba(255,213,120,.55)}.fx-score{font-size:20px;letter-spacing:.22em;color:#d8b46a;margin-top:5px}@keyframes fx{0%{opacity:0;background:#0000}12%{opacity:1;background:#0000008c}55%{opacity:1;background:#00000040}to{opacity:0;background:#0000}}@media(max-width:900px){.game-layout{grid-template-columns:170px minmax(340px,1fr) 170px}.score-panel{padding:18px 10px}.score-row{font-size:9px;grid-template-columns:1fr 30px}.arena{width:100%;min-height:400px}.dice-tray{padding:0 12px;gap:8px}.tray-label{width:100px}.die-card{width:62px;height:62px}.die-mini{width:43px;height:43px}}@media(max-width:650px){.topbar{height:58px;padding:0 14px}.brand small{display:none}.brand span{font-size:14px}.turn-status{display:none}.round{font-size:8px}.game-layout{height:calc(100% - 162px);min-height:0;grid-template-columns:1fr;display:block;position:relative}.score-panel{position:absolute;top:8px;width:43%;padding:8px;background:#0506077a;border:0!important;z-index:6}.score-panel.left{left:0}.score-panel.right{right:0}.player-head{padding-bottom:5px;margin-bottom:2px}.player-head h2{font-size:12px}.player-head strong{font-size:15px}.score-list{display:none}.arena-wrap{height:100%;min-height:0}.arena{width:100%;height:100%;min-height:0}.arena-title{top:12px}.roll-btn{top:55px;width:74px;height:74px}.roll-btn span{font-size:22px}.dice-tray{height:104px;padding:0 8px;display:block}.tray-label{height:24px;width:auto;padding:5px 4px}.tray-label small{display:inline;margin-left:7px}.dice-tray-inner{gap:7px}.die-card{width:58px;height:62px}.die-mini{width:40px;height:40px}.gesture-copy{bottom:26px}}.turn-divider{color:#555;margin:0 7px}.turn-hud{position:absolute;top:112px;left:50%;transform:translate(-50%);z-index:5;text-align:center;pointer-events:none;white-space:nowrap}.turn-hud-player{font-size:11px;font-weight:800;letter-spacing:.24em;color:#e8e6df;text-shadow:0 0 16px rgba(216,180,106,.18)}.roll-meter{margin-top:7px;display:flex;align-items:baseline;justify-content:center;gap:8px}.roll-meter strong{font-size:20px;letter-spacing:.08em;color:#d8b46a}.roll-meter span{font-size:9px;color:#686d6e;letter-spacing:.08em}@media(max-width:650px){.turn-hud{top:104px}.turn-hud-player{font-size:9px}.roll-meter strong{font-size:17px}.roll-meter span{font-size:8px}.turn-divider{display:none}}.die-card.hold{border-color:#d8b46a!important;background:linear-gradient(145deg,#3a2c13,#17130b);box-shadow:0 0 0 1px #d8b46a47,0 0 26px #d8b46a2e,inset 0 1px #ffe6961f}.die-card.hold .die-mini{background:linear-gradient(145deg,#f2d889,#b98a2e);box-shadow:inset 0 -5px 9px #3c23002e,0 5px 12px #00000061}.die-card.hold .pip{background:#2b1e08}.fx-particle{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:2px;background:#d8b46a;box-shadow:0 0 12px #ffdc82cc;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0);animation:particleBurst 1.05s cubic-bezier(.15,.75,.25,1) var(--delay) forwards}#bigFx[data-hand=YATZY] .fx-particle{width:9px;height:9px;border-radius:50%;box-shadow:0 0 18px #fff0bef2}@keyframes particleBurst{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(.4)}12%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1)}}.die-card.rolling{cursor:default;opacity:.32;transform:none!important;border-color:#ffffff0f}.die-card.rolling .die-mini{background:linear-gradient(145deg,#252827,#121414);box-shadow:none}.rolling-mark{font-size:9px;letter-spacing:.14em;color:#777;opacity:.7}#onlineLobby{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,rgba(216,180,106,.09),transparent 32%),#040506d6;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:opacity .28s ease,visibility .28s ease}#onlineLobby.hidden{opacity:0;visibility:hidden;pointer-events:none}.lobby-card{width:min(440px,calc(100vw - 32px));padding:38px 34px 30px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(155deg,#1e2020f5,#0a0c0cf5);box-shadow:0 30px 90px #00000094,inset 0 1px #ffffff14;text-align:center}.lobby-kicker{font-size:9px;letter-spacing:.28em;color:#d8b46a;margin-bottom:10px}.lobby-card h1{margin:0;font-size:31px;letter-spacing:.12em}.lobby-sub{margin:8px 0 28px;color:#777b7d;font-size:11px;letter-spacing:.08em}.lobby-primary,.lobby-secondary,.ready-btn{width:100%;height:48px;border-radius:13px;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:.18s;font-weight:700;letter-spacing:.08em}.lobby-primary{background:linear-gradient(145deg,#d9b76b,#9d7730);color:#17130a;box-shadow:0 10px 30px #00000059}.lobby-primary:hover{transform:translateY(-2px);filter:brightness(1.06)}.lobby-primary:disabled{opacity:.55;cursor:wait;transform:none}.created-room{margin-top:14px;padding:15px;border:1px solid rgba(216,180,106,.22);border-radius:13px;background:#d8b46a0e}.created-room span{display:block;font-size:8px;letter-spacing:.22em;color:#777;margin-bottom:3px}.created-room strong{display:block;font-size:28px;letter-spacing:.16em;color:#e6c97d}.created-room small{display:block;margin-top:4px;font-size:9px;color:#777}.hidden{display:none!important}.lobby-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:#555}.lobby-divider:before,.lobby-divider:after{content:"";height:1px;background:#ffffff14;flex:1}.lobby-divider span{font-size:9px}.lobby-join{display:flex;gap:9px}.lobby-join input{min-width:0;flex:1;height:48px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:#0b0d0d;color:#eee;text-align:center;font:700 17px/1 system-ui;letter-spacing:.18em;outline:none}.lobby-join input:focus{border-color:#d8b46a8c;box-shadow:0 0 0 3px #d8b46a14}.lobby-secondary{width:138px;background:#202323;color:#eee}.lobby-secondary:hover{border-color:#d8b46a66;background:#282a29}.lobby-status{min-height:34px;padding-top:18px;color:#777;font-size:10px;letter-spacing:.06em}.ready-btn{margin-top:12px;background:#151717;color:#777;border-color:#ffffff14}.ready-btn:not(:disabled){color:#ddd}.ready-btn.active{background:#d8b46a24;border-color:#d8b46a80;color:#e6c97d}.ready-btn:disabled{opacity:.45;cursor:not-allowed}.online-badge{position:fixed;right:18px;top:84px;z-index:20;padding:6px 9px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#08090ab8;color:#686d6e;font-size:8px;letter-spacing:.14em}@media(max-width:650px){.lobby-card{padding:30px 22px 24px;border-radius:18px}.lobby-card h1{font-size:27px}.lobby-join{display:block}.lobby-secondary{width:100%;margin-top:8px}}.audio-toggle{position:fixed;top:14px;right:18px;z-index:100;font:700 10px/1 system-ui,sans-serif;letter-spacing:.08em;color:#d8b46a;background:#121414d6;border:1px solid rgba(216,180,106,.34);border-radius:999px;padding:8px 11px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;box-shadow:0 5px 18px #00000047}.audio-toggle:hover{border-color:#d8b46ab3;transform:translateY(-1px)}.audio-toggle.muted{color:#777;border-color:#ffffff1f}@media(max-width:650px){.audio-toggle{top:8px;right:8px;padding:7px 9px;font-size:9px}}