:root{--theme-color:#333;--theme-light:#555;--bg-color:#f5f6fa;--text-main:#2c3e50;--text-sub:#59666d;--white:#ffffff;--danger:#e74c3c;--success:#008b6e;--card-radius:24px;--btn-radius:14px;--brand-color:#3276a8}
*{box-sizing:border-box}
div.card p:lang(zh),.article-body p:lang(zh){text-indent:2em}
img,canvas,svg{max-width:100%;height:auto;display:inline-block}
html{overscroll-behavior-y:none}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;margin:0;padding:0;background:var(--bg-color);color:var(--text-main);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;touch-action:manipulation}
html.locale-transition-ready body{transition:opacity .18s ease}html.locale-entering body,html.locale-leaving body{opacity:0}@media(prefers-reduced-motion:reduce){html.locale-transition-ready body{transition:none}}
.app-header{background:var(--white);padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));height:calc(60px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:sticky;top:0;z-index:2000}
.brand-area{display:flex;align-items:center;gap:10px;font-weight:bold;color:var(--theme-color);font-size:18px;cursor:pointer}
.nav-links{display:flex;gap:15px}
.nav-item{text-decoration:none;color:var(--text-sub);font-size:14px;transition:color 0.2s}
.nav-item:hover{color:var(--theme-color)}
.app-footer{background:var(--white);padding:20px;text-align:center;margin-top:auto;border-top:1px solid rgba(0,0,0,0.05)}
.app-footer-content{display:flex;align-items:center;justify-content:center;gap:24px 48px;flex-wrap:wrap;max-width:960px;margin:0 auto}
.app-footer-notice{font-size:12px;line-height:1.8;color:#7f8c8d;text-align:left}
.app-footer-details{min-width:0;max-width:100%}
.app-footer-notice + .app-footer-details{margin-left:auto;text-align:right}
.app-footer-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.app-footer-links a{color:#7f8c8d;text-decoration:none;font-size:13px}
.app-footer-copy{font-size:12px;color:#bdc3c7}
.app-footer-notice + .app-footer-details .app-footer-links{justify-content:flex-end}
.wb-panel{display:none;margin:10px 0;border:1px solid var(--color-border,#e0e0e0);border-radius:12px;overflow:hidden;background:var(--color-bg-card,#fff)}
.wb-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--color-bg-secondary,#f7f8fa);cursor:pointer;user-select:none}
.wb-header:hover,.wb-item:hover{background:var(--color-bg-hover,#f0f2f5)}
.wb-title{font-size:13px;font-weight:600;color:var(--color-text,#333)}
.wb-toggle{font-size:12px;color:var(--color-accent,#4a90d9);white-space:nowrap}
.wb-list{display:none;padding:6px 10px}
.wb-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s}
.wb-cb{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:11px;background:#d0d5dd;flex-shrink:0;position:relative;transition:background .25s ease;cursor:pointer}
.wb-cb::before{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.wb-cb:checked{background:var(--color-accent,#4a90d9)}
.wb-cb:checked::before{transform:translateX(18px)}
.wb-cb-vip:checked{background:#f5a623}
.wb-label{font-size:13px;color:var(--color-text,#333);flex:1}
.wb-label-vip{color:#e6a817}
.wb-tag-free,.wb-tag-vip{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:500}
.wb-tag-free{background:#e8f5e9;color:#2e7d32}
.wb-tag-vip{background:#fff3e0;color:#e65100}
.support-coffee{padding:0;border:0;background:none;color:#7f8c8d;font:inherit;font-size:15px;line-height:1;cursor:pointer}.support-coffee:hover{filter:brightness(1.15)}.support-coffee:focus-visible{outline:2px solid var(--theme-color,#4a90d9);outline-offset:3px;border-radius:3px}
.ad-banner{background:#eee;color:#aaa;padding:15px;border-radius:8px;font-size:12px;margin-bottom:10px}
.copyright{font-size:12px;color:var(--text-sub)}
.main-container{width:100%;max-width:500px;margin:20px auto;padding:0 20px;flex:1;position:relative}
.common-card{background:var(--white);border-radius:var(--card-radius);padding:25px;box-shadow:0 12px 40px rgba(0,0,0,0.06);margin-bottom:20px;text-align:center;border:1px solid rgba(255,255,255,0.5);width:100%;word-break:break-word}
.common-input{width:100%;padding:16px;margin:10px 0;border:2px solid #edf2f7;border-radius:var(--btn-radius);font-size:16px;outline:none;background:#f8fafc;transition:border-color 0.2s;box-sizing:border-box}
.common-input:focus{border-color:var(--theme-color)}
.common-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #f8fafc inset!important;-webkit-text-fill-color:#2c3e50!important;transition:background-color 9999s ease-out 0s}
.common-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #f8fafc inset!important;border-color:var(--theme-color)}
.common-btn{width:100%;padding:16px;background:var(--theme-color);color:white;border:none;border-radius:var(--btn-radius);font-size:16px;font-weight:bold;margin-top:12px;cursor:pointer;transition:transform 0.1s,opacity 0.2s;box-shadow:0 6px 20px rgba(0,0,0,0.15)}
.common-btn:active{transform:scale(0.98)}
.common-btn.secondary{background:#dfe6e9;color:#636e72;box-shadow:none}
.common-btn.outline{background:transparent;border:2px solid var(--theme-color);color:var(--theme-color);box-shadow:none}
.common-btn.danger{background:var(--danger)}
.shared-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:rgba(45,52,54,0.95);color:white;padding:12px 24px;border-radius:30px;font-size:14px;z-index:3000;opacity:0;transition:opacity 0.3s;pointer-events:none}
.shared-toast.show{opacity:1}
.screen-section{display:none}
.screen-section.active{display:block;animation:fadeUp 0.4s ease-out}
.u-hidden{display:none !important}
.u-flex{display:flex !important}
.u-block{display:block !important}
.mt-0{margin-top:0 !important}
.mt-10{margin-top:10px}
.mt-20{margin-top:20px}
.text-center{text-align:center}
#toggle-btn.sidebar-toggle{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:calc(27px + env(safe-area-inset-bottom));width:44px;height:44px;background:rgba(20,20,30,.82);color:#fff;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:9998;cursor:pointer;backdrop-filter:blur(4px);font-size:20px;transition:transform .15s}
body:has(#sidebar.open) #toggle-btn.sidebar-toggle{display:none!important}
#toggle-btn.sidebar-toggle:hover{transform:translateY(-1px)}
#toggle-btn.sidebar-toggle:active{transform:scale(.94)}
.sidebar-toggle.left-side{right:auto;left:20px;bottom:auto;top:20px;background:#fff;color:var(--theme-color);box-shadow:0 4px 10px rgba(0,0,0,0.15);z-index:2000;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;position:fixed}
.vote-badge{position:absolute;top:-8px;right:-8px;background:#ff4757;color:white;min-width:20px;height:20px;padding:2px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;border:2px solid white;box-shadow:0 2px 5px rgba(0,0,0,0.2);z-index:10}
.common-btn.success{background-color:#2ecc71}
.text-white-op9{color:rgba(255,255,255,0.9)}
.text-highlight{color:#fff;font-weight:bold}
.text-sub{color:#666}
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:translateY(0)}
}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:3000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-content{background:white;width:85%;max-width:400px;border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,0.2);transform:scale(0.9);transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);max-height:80vh;display:flex;flex-direction:column}
.modal-overlay.show .modal-content{transform:scale(1)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:1px solid #eee;padding-bottom:10px}
.modal-header h3{margin:0;color:var(--theme-color)}
.close-icon{font-size:28px;color:#999;cursor:pointer;line-height:1}
.modal-body{overflow-y:auto;flex:1;font-size:14px;color:#555;line-height:1.6}
.modal-body h4{margin:15px 0 8px 0;color:#2c3e50}
.modal-body ul,.modal-body ol{padding-left:20px;margin:0}
.modal-body li{margin-bottom:5px}
.modal-footer{margin-top:20px;text-align:center}
.logo-box{width:52px;height:52px;background:linear-gradient(135deg,var(--brand-color),#a29bfe);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -5px rgba(9,132,227,0.4);position:relative;overflow:hidden}
.logo-svg{width:32px;height:32px;fill:white;animation:logoFloat 6s ease-in-out infinite}
.logo-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.logo-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgba(255,255,255,0.4) 0%,transparent 60%);transform:rotate(45deg)}

.header-right{display:flex;align-items:center;gap:12px}
.user-area{display:flex;align-items:center;position:relative}
.user-info{display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 10px;border-radius:10px;background:#f0f2f5;transition:background .2s}
.user-info:hover{background:#e4e7eb}
.user-name{font-size:14px;font-weight:600;color:var(--text-main)}
.vip-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:bold;color:#fff;background:linear-gradient(135deg,#f39c12,#e67e22);margin-left:4px}
.vip-badge-gray{background:linear-gradient(135deg,#b2bec3,#636e72);cursor:pointer}
.user-dropdown{position:absolute;top:100%;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.12);min-width:140px;display:none;overflow:hidden;z-index:3000}
.user-dropdown.show{display:block}
.user-dropdown-item{padding:12px 16px;font-size:14px;cursor:pointer;transition:background .2s}
.user-dropdown-item:hover{background:#f8f9fa}
.auth-btn{padding:8px 20px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:transform .1s,opacity .2s}
.login-btn{background:var(--theme-color);color:#fff}
.login-btn:active{transform:scale(0.97)}
.auth-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);background:rgba(45,52,54,0.95);color:#fff;padding:12px 28px;border-radius:30px;font-size:14px;z-index:4000;opacity:0;transition:all .3s}
.auth-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.grid-toggle{width:44px;height:44px;border:none;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.grid-toggle:hover{background:rgba(0,0,0,0.06)}
.grid-toggle:active{background:rgba(0,0,0,0.12)}
.grid-toggle svg{width:24px;height:24px;fill:var(--text-sub)}
.grid-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2900;opacity:0;pointer-events:none;transition:opacity .2s}
.grid-menu-overlay.show{opacity:1;pointer-events:auto}
.grid-menu{position:fixed;top:70px;right:20px;background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,0.18);padding:16px;z-index:3000;opacity:0;transform:translateY(-8px) scale(0.96);pointer-events:none;transition:all .2s cubic-bezier(0.175,0.885,0.32,1.275)}
.grid-menu.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.grid-menu-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;min-width:240px}
.grid-game{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border-radius:14px;text-decoration:none;color:var(--text-sub);transition:background .2s;cursor:pointer}
.grid-game:hover{background:#f5f6fa}
.grid-game-icon{font-size:28px;margin-bottom:6px;line-height:1}
.grid-game-name{font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
@media (max-width:600px){.grid-menu{right:10px;left:10px;min-width:auto}.grid-menu-inner{grid-template-columns:repeat(4,1fr);gap:4px;min-width:auto}.grid-game-name{font-size:11px}}

@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media screen and (max-width:400px){.main-container{padding:0 10px}
.common-card{padding:15px}
.app-header{padding:0 15px}
}

.related-articles{max-width:1000px;margin:30px auto 10px;padding:0 20px;box-sizing:border-box}
.ra-title{font-size:16px;font-weight:700;color:var(--text-main);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ra-item{display:block;background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:12px 16px;margin-bottom:8px;color:var(--text-main);text-decoration:none;font-size:14px;transition:border-color .2s,transform .2s}
.ra-item:hover{border-color:var(--theme-color);transform:translateX(4px)}
.ra-more{display:inline-block;margin-top:8px;color:var(--theme-color);font-size:13px;text-decoration:none;font-weight:600}
.ra-more:hover{text-decoration:underline}




.game-subtitle{color:#59666d;font-size:13px;margin:0 0 14px 0;text-align:center}
.room-title{margin:0;color:var(--theme-color);font-size:18px}
.room-subtitle{min-height:18px;margin:4px 0;color:#95a5a6;font-size:13px}
.room-qr{display:flex;flex-direction:column;align-items:center;margin:14px 0;background:#fff;padding:10px;border-radius:16px}
.room-qr canvas{display:block}
.room-qr-hint{font-size:12px;color:#95a5a6;margin-top:5px}
.room-members{margin-top:16px;border-top:1px solid #f1f2f6;padding-top:12px}
.room-members-title{font-size:12px;color:#95a5a6;margin-bottom:8px}
.status-offline{color:#e74c3c;font-weight:bold}


.player-avatar-frame{position:relative;display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin:0 .08em;vertical-align:-.24em;line-height:1;isolation:isolate}
.player-avatar-emoji{position:relative;z-index:2;line-height:1}
.player-avatar-frame.is-vip{width:1.45em;height:1.45em;margin:0 .24em;border:1.5px solid #f5d58b;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff8df 0,#5b3417 58%,#1e130d 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 7px rgba(214,145,47,.55);animation:vip-frame-glow 1.8s ease-in-out infinite alternate}
.vip-avatar-fire{position:absolute;z-index:1;inset:-.43em;width:calc(100% + .86em);height:calc(100% + .86em);overflow:visible;pointer-events:none;filter:drop-shadow(0 0 2px rgba(255,171,48,.85));animation:vip-flame-orbit 5s linear infinite}
.vip-avatar-fire path{fill:#d99531;stroke:#ffe0a0;stroke-width:.65}
.vip-avatar-fire path:nth-child(even){fill:#f3be5d}
.vip-avatar-fire circle{fill:none;stroke:#f0bd63;stroke-width:2.2;stroke-dasharray:3 2}
.vip-avatar-gem{position:absolute;z-index:3;right:-.34em;bottom:-.28em;width:.72em;height:.72em;padding:.08em;overflow:visible;border-radius:50%;background:#5a3216;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.vip-avatar-gem path:first-child{fill:#fff0ba;stroke:#c88528;stroke-width:.8}
.vip-avatar-gem path:last-child{fill:none;stroke:#b77622;stroke-width:.75}
@keyframes vip-flame-orbit{to{transform:rotate(360deg)}}
@keyframes vip-frame-glow{from{box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 0 5px rgba(197,119,29,.45)}to{box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 0 11px rgba(255,184,70,.8)}}


#sidebar{position:fixed;top:0;right:0;width:280px;height:100%;background:white;z-index:2500;transform:translateX(100%);transition:transform 0.3s;padding:20px;box-shadow:-5px 0 30px rgba(0,0,0,0.1);display:flex;flex-direction:column;box-sizing:border-box}
#sidebar.open{transform:translateX(0)}
.sidebar-list-content{overflow-y:auto;flex:1}
.shared-player-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:13px}
.shared-player-row.is-self{cursor:pointer;touch-action:manipulation}
.shared-player-row.is-self:focus{outline:2px solid var(--theme-color);outline-offset:3px;border-radius:6px}
.shared-player-row>span:last-child{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;color:#7f8c8d}
.shared-transfer-host{min-width:44px;min-height:36px;padding:6px 8px;border:1px solid var(--theme-color);border-radius:8px;background:transparent;color:var(--theme-color);cursor:pointer}


.room-code-display{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:68px;margin:10px 0 14px;padding:8px 16px;border:2px solid var(--theme-color);border-radius:14px;background:rgba(0,0,0,.04);color:var(--theme-color);font-size:30px;font-weight:800;letter-spacing:.12em;line-height:1.1;cursor:pointer;user-select:all}
.room-code-display::before{content:'房间号';font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.2;opacity:.7}
.locale-select{min-width:0;min-height:34px;padding:6px 28px 6px 10px;border:1px solid rgba(127,140,141,.3);border-radius:8px;background:var(--white,#fff);color:var(--text-main,#2d3436);font:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:border-color .15s,box-shadow .15s}.locale-select:hover,.locale-select:focus{border-color:var(--theme-color,#4a90d9);box-shadow:0 0 0 3px rgba(74,144,217,.16);outline:0}
.footer-locale-switch{display:inline-flex;align-items:center;gap:3px;margin:2px 0 12px;padding:4px;border:1px solid rgba(127,140,141,.18);border-radius:11px;background:rgba(127,140,141,.08);color:var(--text-sub,#636e72);vertical-align:middle}.footer-locale-switch>span{padding:0 5px;font-size:14px}.footer-locale-switch button{min-height:30px;padding:5px 10px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}.footer-locale-switch button:hover{color:var(--theme-color,#4a90d9)}.footer-locale-switch button.active{background:var(--white,#fff);color:var(--theme-color,#4a90d9);box-shadow:0 1px 4px rgba(0,0,0,.12)}.footer-locale-switch button:focus-visible{outline:2px solid var(--theme-color,#4a90d9);outline-offset:1px}
.shared-confirm-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,18,28,.56);backdrop-filter:blur(3px)}.shared-confirm-box{width:min(100%,340px);padding:22px;border-radius:18px;background:var(--white,#fff);color:var(--text-main,#2d3436);box-shadow:0 18px 48px rgba(0,0,0,.25);text-align:center}.shared-confirm-box h3{margin:0 0 8px;font-size:18px}.shared-confirm-box p{margin:0 0 20px;color:var(--text-sub,#636e72);font-size:14px;line-height:1.5}.shared-confirm-box>div{display:flex;gap:10px}.shared-confirm-box button{flex:1;min-height:38px;border:0;border-radius:10px;font:inherit;font-weight:700;cursor:pointer}.shared-confirm-box .secondary{background:#eef1f4;color:#56606a}.shared-confirm-box .primary{background:var(--theme-color,#4a90d9);color:#fff}
.shared-support-box{position:relative;box-sizing:border-box}.shared-support-box .shared-support-close{position:absolute;top:8px;right:8px;min-width:38px;padding:0;background:transparent;color:var(--text-sub,#636e72);font-size:24px;font-weight:400}.shared-support-content{min-height:160px}
.shared-rename-box{box-sizing:border-box;width:min(100%,420px)}.shared-rename-box .common-input{box-sizing:border-box;width:100%;margin:0 0 16px}.shared-rename-box .shared-avatar-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:7px;max-height:174px;margin:0 0 16px;padding:3px;overflow-y:auto}.shared-rename-box .shared-avatar-option{min-width:42px;min-height:42px;padding:4px;border:2px solid transparent;background:rgba(127,140,141,.1);font-size:23px;line-height:1}.shared-rename-box .shared-avatar-option:hover,.shared-rename-box .shared-avatar-option:focus-visible{border-color:var(--theme-color,#4a90d9);outline:0}.shared-rename-box .shared-avatar-option.selected{border-color:var(--theme-color,#4a90d9);background:rgba(74,144,217,.16)}.shared-rename-box .shared-rename-actions{display:flex;gap:10px}.shared-rename-box .common-btn{border-radius:var(--btn-radius)}
.content-locale-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:9px 0;font-size:13px;font-weight:700}
html[lang="en"] .room-code-display::before{content:'Room code'}
.qr-code{width:120px;display:block;margin:0 auto}


.member-label{font-size:12px;color:#ffffff;margin-bottom:10px;opacity:0.8}


.waiting-item{padding:10px;background:#f8fafc;border-radius:10px;margin-bottom:5px;display:flex;justify-content:space-between;align-items:center}


.host-transfer-btn{font-size:11px;min-width:44px;min-height:44px;padding:8px;border-radius:8px;background:#fff;color:var(--theme-color);border:1px solid var(--theme-color);cursor:pointer;margin-left:6px}
.host-transfer-btn:active{transform:scale(0.95)}


.control-grid{display:flex;flex-direction:column;gap:10px;margin:15px 0}
.control-row{display:flex;justify-content:space-between;align-items:center;background:#f8fafc;padding:12px 15px;border-radius:14px;border:1px solid #edf2f7}
.stepper{display:flex;align-items:center;gap:10px}
.stepper-btn{width:44px;height:44px;border-radius:8px;background:white;color:var(--theme-color);border:1px solid #ddd;display:flex;align-items:center;justify-content:center;cursor:pointer}
.stepper-val{font-weight:bold;min-width:45px;text-align:center}


#utility-menu{margin-top:12px;padding-top:8px;border-top:1px solid rgba(0,0,0,.08)}
#utility-menu-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.utility-menu-item{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:6px;border:0;border-radius:10px;background:rgba(0,0,0,.05);color:var(--text-main,#2d3436);font:inherit;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}.utility-menu-item:hover,.utility-menu-item:focus-visible{background:rgba(0,0,0,.1);outline:2px solid var(--theme-color);outline-offset:1px}.utility-menu-icon{font-size:21px;line-height:1}.utility-menu-state{position:absolute;top:3px;right:3px;min-width:18px;padding:1px 3px;border-radius:999px;background:var(--success,#008b6e);color:#fff;font-size:9px;font-weight:800;line-height:1.35;text-align:center}.utility-menu-item.is-off .utility-menu-state{background:var(--danger,#e74c3c);color:#fff}
.terms-gate{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,10,20,.78);backdrop-filter:blur(6px)}
.terms-gate-card{width:min(100%,480px);max-height:90vh;overflow:auto;padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:#fff;color:#273044;box-shadow:0 22px 70px rgba(0,0,0,.38)}
.terms-gate-card h2{margin:0 0 10px;color:#273044;font-size:22px}.terms-gate-card>p{margin:0 0 14px;color:#626a7c;line-height:1.6}
.terms-gate-summary{padding:13px 15px;border-left:4px solid #e6a917;border-radius:10px;background:#fff7dc}.terms-gate-summary ul{margin:8px 0 0;padding-left:20px}.terms-gate-summary li{margin:5px 0;line-height:1.5}
.terms-gate-check{display:flex;align-items:flex-start;gap:9px;margin:18px 0;font-size:14px;line-height:1.55}.terms-gate-check input{width:18px;height:18px;flex:0 0 18px;margin-top:2px}.terms-gate-check a{color:#5d49d3;font-weight:700}
.terms-gate-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.terms-gate-actions button{min-height:46px;border:0;border-radius:12px;background:#e9ebf2;color:#424a5f;font:inherit;font-weight:800}.terms-gate-actions .primary{background:var(--theme-color,#7357ff);color:#fff}.terms-gate-actions button:disabled{opacity:.42}
#connection-status{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-140%);z-index:10000;padding:10px 16px;border-radius:999px;color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.25);transition:transform .2s;pointer-events:none}
#connection-status.is-waiting{transform:translate(-50%,0);background:#d35400}
#connection-status.is-ok{transform:translate(-50%,0);background:#008b6e}
.context-guide{position:fixed;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:calc(72px + env(safe-area-inset-bottom));z-index:9997;max-width:520px;margin:auto;padding:13px 14px;background:rgba(20,20,30,.96);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:14px;display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.context-guide span{flex:1}.context-guide button{min-width:72px;min-height:44px;border:0;border-radius:10px;background:#dfe6e9;color:#2d3436;font-weight:700}


.game-meta-strip{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:8px 0 16px;color:var(--text-sub);font-size:12px}
.game-meta-strip span{padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.06)}
.single-player-btn{background:linear-gradient(135deg,#6c5ce7,#0984e3)!important;color:#fff!important;margin-top:8px}
.start-condition{font-size:12px;line-height:1.5;color:var(--text-sub);margin:7px 0 10px;text-align:center}
.shared-home{display:block;box-sizing:border-box;text-decoration:none;text-align:center}
.shared-end-actions{display:grid;gap:8px;margin-top:8px}.shared-end-actions .common-btn{max-width:none}
@media(prefers-color-scheme:dark){.game-meta-strip span{background:rgba(255,255,255,.07)}}

@media(prefers-color-scheme:dark){
  :root{color-scheme:dark;--text-main:#f1f2f6;--text-sub:#b2bec3;--white:#1d1e2b}
  .common-card,.scoreboard,#sidebar{background:#1d1e2b;color:#f1f2f6;border-color:rgba(255,255,255,.12)}
  .common-input,.control-row,.waiting-item{background:#292a3b;color:#f1f2f6;border-color:#3a3b50}
  .member-row{background:#292a3b;color:#f1f2f6;border-color:#3a3b50}
  .game-subtitle,.text-sub{color:#b2bec3}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}