:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;color:#241f1a;background:#10130f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.03) 1px,transparent 1px),#10130f;background-size:24px 24px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.shell{width:min(100%,760px);min-height:100vh;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}.home-shell{display:flex;flex-direction:column;gap:18px;justify-content:center}.app-shell{display:flex;flex-direction:column;gap:14px}.hero-band,.room-header,.join-panel,.play-panel{border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#f5f0e6;box-shadow:0 18px 44px #00000038}.hero-band{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;min-height:176px;padding:22px;color:#f8f6ef;background:linear-gradient(135deg,#10130fe0,#241f1ad1),url("data:image/svg+xml,%3Csvg width='180' height='120' viewBox='0 0 180 120' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='20' y='20' width='42' height='60' rx='6' fill='%23f5f0e6'/%3E%3Ccircle cx='42' cy='50' r='5' fill='%23241f1a'/%3E%3Crect x='78' y='34' width='54' height='54' rx='10' fill='%23f97316'/%3E%3Ccircle cx='96' cy='52' r='5' fill='%23fff7ed'/%3E%3Ccircle cx='114' cy='70' r='5' fill='%23fff7ed'/%3E%3Cpath d='M140 24h18l8 14-9 15h-18l-8-15z' fill='%2322c55e'/%3E%3Cpath d='M36 90h108' stroke='%23facc15' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");background-position:center;background-size:cover}.brand-mark,.panel-icon{display:inline-grid;width:44px;height:44px;place-items:center;border-radius:8px;color:#10130f;background:#facc15}.eyebrow{margin:0 0 4px;color:inherit;font-size:12px;font-weight:800;letter-spacing:0;opacity:.72}h1,h2,p{margin-top:0}h1{margin-bottom:8px;font-size:clamp(34px,9vw,58px);line-height:.98}h2{margin-bottom:4px;font-size:23px;line-height:1.1}.hero-copy{max-width:17rem;margin:0;color:#ede7d9;line-height:1.6}.join-panel{display:grid;gap:14px;padding:16px}label{display:grid;gap:7px;color:#5a5043;font-size:13px;font-weight:800}input,select{width:100%;min-height:48px;border:1px solid #d9cdbb;border-radius:8px;padding:0 13px;color:#241f1a;background:#fffaf1;outline:none}input:focus,select:focus{border-color:#f97316;box-shadow:0 0 0 3px #f9731629}.join-row,.dice-controls,.note-row,.action-row,.header-actions{display:flex;gap:10px;align-items:center}.join-row input{flex:1 1 auto;text-transform:uppercase}.primary-btn,.ghost-btn,.icon-btn{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;font-weight:900;white-space:nowrap}.primary-btn{width:100%;padding:0 16px;color:#11140f;background:#f97316}.primary-btn:disabled,.ghost-btn:disabled,.icon-btn:disabled{cursor:not-allowed;opacity:.52}.ghost-btn,.icon-btn{padding:0 14px;color:#241f1a;border:1px solid #d9cdbb;background:#fffaf1}.icon-btn{width:46px;padding:0}.wide{width:auto;padding:0 14px}.error-text{margin:0;color:#b91c1c;font-size:14px}.name-hint{color:#766a5b;font-size:12px;font-weight:700}.market-strip,.player-rail,.game-selector{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.market-strip::-webkit-scrollbar,.player-rail::-webkit-scrollbar,.game-selector::-webkit-scrollbar{display:none}.game-chip,.player-pill,.selector-card{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:40px;border-radius:8px;color:#f8f6ef;border:1px solid rgba(255,255,255,.13);background:#ffffff14;padding:0 12px;font-weight:850}.room-header{display:flex;justify-content:space-between;align-items:center;padding:14px}.room-header h1{margin:0;color:#241f1a;font-size:34px}.self-name{margin:2px 0 0;color:#6c5d4c;font-size:13px;font-weight:850}.player-pill{color:#241f1a;background:#f5f0e6;border-color:#e2d5c3}.player-pill.offline{opacity:.56}.player-pill.self{border-color:#f97316;box-shadow:inset 0 0 0 2px #f9731629}.admin-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;color:#11140f;background:#facc15;font-size:11px;font-weight:950}.admin-hint,.admin-panel{border-radius:8px;padding:12px;color:#f8f6efd1;background:#ffffff12}.admin-hint{margin:0;line-height:1.55;font-size:13px}.admin-panel{display:grid;gap:10px;border:1px solid rgba(255,255,255,.13)}.admin-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.admin-head span,.admin-head strong{font-size:13px;font-weight:900}.admin-head strong{color:#facc15}.admin-panel p{margin:0;color:#f8f6efb8;line-height:1.5;font-size:12px}.join-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.switch-track{position:relative;width:42px;height:24px;flex-shrink:0;border-radius:999px;border:none;padding:0;cursor:pointer;background:#ffffff38;transition:background .2s ease}.switch-track.on{background:#f59e0b}.switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0006;transition:transform .2s ease}.switch-track.on .switch-thumb{transform:translate(18px)}.switch-track:focus-visible{outline:2px solid #f59e0b;outline-offset:2px}.switch-text{font-size:13px;font-weight:700;color:#f8f6efeb}.member-actions{display:grid;gap:8px}.member-action{display:grid;gap:8px;border-radius:8px;padding:9px;background:#ffffff0f}.member-action>div{display:flex;flex-wrap:wrap;gap:8px}.rename-input{width:100%;min-height:32px;padding:0 10px;border:1px solid #d9cdbb;border-radius:8px;background:#fffaf1;color:#241f1a;font-size:14px;font-weight:700;box-sizing:border-box}.mini-btn{min-height:32px;border:1px solid #d9cdbb;border-radius:8px;padding:0 10px;color:#241f1a;background:#fffaf1;font-weight:850}.mini-btn.danger{color:#fff7ed;border-color:#b91c1c;background:#b91c1c}.avatar-dot{width:12px;height:12px;border-radius:999px}.selector-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;min-width:112px;min-height:66px;padding:9px 11px;text-align:left}.selector-card svg{grid-row:span 2}.selector-card small{color:#f8f6efa8;font-weight:800}.selector-card.active{color:#11140f;border-color:#facc15;background:#facc15}.selector-card.active small{color:#11140fb3}.selector-card:disabled:not(.active){opacity:.72}.room-body,.room-side,.room-main{display:flex;flex-direction:column;gap:14px}.scroll-rail{position:relative}.scroll-rail:before,.scroll-rail:after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:26px;pointer-events:none;opacity:0;transition:opacity .18s ease}.scroll-rail:before{left:0;background:linear-gradient(to right,#10130f,#10130f00)}.scroll-rail:after{right:0;background:linear-gradient(to left,#10130f,#10130f00)}.scroll-rail.fade-left:before,.scroll-rail.fade-right:after{opacity:1}.play-panel{padding:16px}.undercover-scene{border-top:6px solid #38bdf8}.werewolf-scene{border-top:6px solid #818cf8}.dice-scene{border-top:6px solid #22c55e}.kings-scene{border-top:6px solid #f43f5e}.memory-scene{border-top:6px solid #facc15}.turtle-scene{border-top:6px solid #14b8a6}.draw-scene{border-top:6px solid #0ea5e9}.truth-scene{border-top:6px solid #e879f9}.never-scene{border-top:6px solid #a3e635}.forbidden-scene{border-top:6px solid #ef4444}.reaction-scene{border-top:6px solid #f59e0b}.panel-title{display:flex;gap:12px;align-items:center;margin-bottom:16px}.panel-title>div:nth-child(2){min-width:0;flex:1 1 auto}.panel-title p{margin:0;color:#766a5b;line-height:1.5}.title-meta{flex:0 0 auto;border-radius:999px;padding:6px 10px;color:#11140f;background:#facc15;font-size:12px;font-weight:900}.secret-card,.soup-box,.answer-band,.prompt-box,.draw-status{border-radius:8px;padding:16px;background:#fffaf1;border:1px solid #e2d5c3}.secret-card{display:grid;gap:8px;min-height:136px;align-content:center;text-align:center}.secret-card span,.soup-box p,.remaining,.microcopy,.prompt-box span,.draw-status span{margin:0;color:#766a5b;font-size:13px;font-weight:850}.secret-card strong{font-size:clamp(34px,12vw,64px);line-height:1}.role-card strong{color:#3b2f87}.word-card strong{color:#075985}.forbidden-card strong{color:#991b1b}.prompt-box,.draw-status{display:grid;gap:8px;margin-bottom:14px}.performer-banner{display:grid;gap:6px;margin-bottom:14px;padding:14px 16px;border:1px solid #241f1a;border-radius:8px;background:#facc15;color:#241f1a}.performer-banner span{font-size:12px;font-weight:900}.performer-banner strong{font-size:21px;line-height:1.28}.prompt-box strong,.draw-status strong{color:#241f1a;font-size:21px;line-height:1.42}.draw-canvas{display:block;width:100%;aspect-ratio:64 / 42;border:2px solid #241f1a;border-radius:8px;background:#fffaf1;touch-action:none}.draw-canvas.can-draw{cursor:crosshair}.action-row{flex-wrap:wrap;margin-top:14px}.action-row .primary-btn{flex:1 1 150px}.answer-band{display:grid;gap:8px;margin-top:14px;color:#166534;font-weight:900;background:#ecfdf5;border-color:#bbf7d0}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid #e2d5c3;border-radius:8px;background:#fffaf1}.setting-row>div:first-child{display:grid;gap:3px;min-width:0}.setting-row span,.setting-row small{color:#766a5b;font-size:12px;font-weight:850}.setting-row strong{color:#241f1a;font-size:28px;line-height:1}.stepper{display:flex;flex:0 0 auto;gap:8px}.microcopy{margin-top:12px;line-height:1.6}.role-grid{display:flex;flex-wrap:wrap;gap:8px}.role-grid span{padding:8px 10px;border-radius:8px;color:#312e81;background:#eef2ff;font-weight:850}.word-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:14px}.word-grid span{border-radius:8px;padding:10px 12px;color:#7f1d1d;background:#fee2e2;font-weight:900}.whoami-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0 6px}.whoami-card{border-radius:10px;padding:10px 12px;background:#6366f114;border:1px solid rgba(99,102,241,.18);display:flex;flex-direction:column;gap:4px}.whoami-card .avatar-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.whoami-card strong{font-size:13px;color:#312e81}.whoami-card em{font-style:normal;font-weight:800;color:#4338ca}.input-row{display:flex;gap:8px;align-items:stretch}.input-row input{flex:1;min-width:0}.dice-controls{align-items:end;flex-wrap:wrap}.dice-controls label{flex:1 1 84px}.dice-controls .primary-btn{flex:1 1 124px}.dice-board{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:18px 0 8px}.die{display:grid;width:58px;height:58px;place-items:center;border-radius:8px;color:#10341d;background:#dcfce7;border:2px solid #22c55e;font-size:24px;font-weight:950}.score-line{margin:4px 0 0;text-align:center;color:#166534;font-weight:900}.card-stage{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}.playing-card,.card-back{display:grid;width:96px;height:132px;place-items:center;border-radius:8px;background:#fffaf1;border:2px solid #241f1a;color:#241f1a}.playing-card span{align-self:end;font-size:13px;font-weight:900}.playing-card strong{align-self:start;font-size:42px;line-height:1}.playing-card.red{color:#be123c;border-color:#be123c}.card-back{color:#f8f6ef;background:linear-gradient(45deg,transparent 46%,rgba(255,255,255,.22) 47%,rgba(255,255,255,.22) 53%,transparent 54%),#241f1a;font-size:44px;font-weight:950}.card-stage strong{display:block;color:#241f1a;font-size:20px;line-height:1.35}.history-list{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}.history-list li{border-radius:8px;padding:10px 12px;color:#4b4035;background:#fffaf1;border:1px solid #e2d5c3;line-height:1.45}.soup-box{display:grid;gap:10px}.soup-box strong{color:#134e4a;font-size:20px;line-height:1.45}.note-row{align-items:stretch;margin-top:14px}.note-row select{width:92px}.toast{position:fixed;z-index:20;left:50%;top:18px;transform:translate(-50%);max-width:min(88vw,420px);border-radius:8px;padding:10px 14px;color:#11140f;background:#facc15;box-shadow:0 12px 36px #00000040;font-weight:900}.toast.error{color:#fff7ed;background:#b91c1c}.conn-banner{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;border-radius:8px;padding:9px 14px;color:#2a1a00;background:#fbbf24;font-weight:800;font-size:14px;box-shadow:0 8px 24px #00000038}.conn-banner svg{flex:none;animation:conn-spin 1.1s linear infinite}@keyframes conn-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.conn-banner svg{animation:none}}.ad-slot{display:grid;gap:2px;min-height:52px;align-content:center;border:1px dashed rgba(255,255,255,.24);border-radius:8px;padding:10px 14px;color:#f8f6efc2;background:#ffffff0f}.ad-slot span{font-size:12px;font-weight:850}.ad-slot strong{font-size:14px;font-weight:850}.home-intro{margin-top:32px;padding:22px 24px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#ffffff0a;color:#e2e8f0;line-height:1.7}.home-intro h2{margin:0 0 12px;font-size:19px;color:#f8fafc}.home-intro>p{margin:0 0 16px;font-size:14px;color:#cbd5e1}.home-intro .intro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:0 0 16px;padding:0;list-style:none}.home-intro .intro-grid li{font-size:13px;color:#cbd5e1;padding:10px 12px;border-radius:8px;background:#ffffff0d;line-height:1.55}.home-intro .intro-grid strong{display:inline-block;margin-right:6px;color:#f1f5f9;font-weight:700}.home-intro .intro-tip{margin:0;font-size:12px;color:#94a3b8}.home-intro a{color:#60a5fa}.home-intro .backup-note{margin:14px 0 0;padding:10px 12px;font-size:12px;line-height:1.6;color:#cbd5e1;background:#60a5fa14;border:1px solid rgba(96,165,250,.25);border-radius:8px}.home-intro .backup-note a{color:#93c5fd;word-break:break-all}.site-footer{margin-top:28px;padding:18px 18px 26px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#94a3b8;font-size:13px}.site-footer-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:0 0 8px}.site-footer-row a{color:#cbd5e1;text-decoration:none}.site-footer-row a:hover{color:#f8fafc;text-decoration:underline}.site-footer-row span{color:#cbd5e1}.site-footer-copy{margin:6px 0 0;font-size:12px;color:#64748b}.invite-card{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:12px 14px;color:#f8f6ef;background:#fffaf114}.invite-card span{color:#facc15;font-size:12px;font-weight:900}.invite-card strong{display:block;margin-top:4px;font-size:18px}.invite-card p{margin:6px 0 0;color:#f8f6efb8;line-height:1.45;font-size:12px}.invite-card img,.qr-placeholder{width:96px;height:96px;border-radius:8px;background:#fffaf1}.qr-placeholder{display:grid;place-items:center;color:#241f1a;font-weight:900}.rules-card{display:grid;gap:8px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:12px 14px;color:#f8f6ef;background:#fffaf114}.rules-card span{color:#facc15;font-size:12px;font-weight:900}.rules-card ul{display:grid;gap:6px;margin:0;padding-left:18px}.rules-card li{color:#f8f6efd1;line-height:1.55;font-size:13px}@media(max-width:480px){.shell{padding-left:12px;padding-right:12px}.hero-band{grid-template-columns:1fr;min-height:200px}.join-row,.note-row,.invite-card{flex-wrap:wrap}.invite-card{grid-template-columns:1fr}.note-row select,.note-row input,.note-row .wide{flex:1 1 100%;width:100%}.card-stage{grid-template-columns:84px 1fr}.playing-card,.card-back{width:84px;height:116px}.room-header h1{font-size:30px}}@media(min-width:960px){.shell.app-shell{width:min(100%,1160px)}.room-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}.room-side{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.room-side .player-rail,.room-side .game-selector{flex-direction:column;overflow:visible}.room-side .scroll-rail:before,.room-side .scroll-rail:after{display:none}.room-side .selector-card{width:100%;min-width:0}.room-side .player-pill{width:100%}.room-main .draw-canvas{max-width:620px;margin-inline:auto}}