.login-screen{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,460px);align-items:center;gap:24px;padding:calc(24px + var(--safe-top)) calc(32px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(32px + var(--safe-left))}.login-hero{position:absolute;inset:0;overflow:hidden}.login-hero canvas{display:block;width:100%!important;height:100%!important}.login-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#06080a00 30%,#06080abf 72%),radial-gradient(transparent 55%,#0000008c);pointer-events:none}.login-card{position:relative;grid-column:2;width:100%;display:flex;flex-direction:column;gap:16px;padding:26px}.login-title{display:flex;align-items:center;gap:14px}.login-title img{width:52px;height:52px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}.login-title h1{font-size:34px;letter-spacing:.14em;line-height:1.1}.login-title p{margin:4px 0 0;font-size:13.5px}.invite-banner{padding:10px 12px;border-radius:10px;border:1px solid rgba(111,214,232,.35);background:#6fd6e814;color:#cfeff6;font-size:13.5px}.recent-names{display:flex;flex-direction:column;gap:8px}.recent-chip{padding:0;overflow:hidden}.recent-chip button{min-height:40px;padding:0 12px;border:0;background:transparent;cursor:pointer;color:var(--text)}.recent-chip .forget{padding:0 10px;color:var(--text-dim);border-left:1px solid var(--gold-line)}@media(max-width:860px){.login-screen{grid-template-columns:minmax(0,1fr);align-items:end;padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left))}.login-card{grid-column:1;margin-top:34vh;padding:20px}.login-hero-shade{background:linear-gradient(180deg,#06080a00 18%,#06080ad9 52%)}}.lobby-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;padding:0;overflow:hidden;margin-bottom:16px}.lobby-hero-stage{position:relative;min-height:300px;background:radial-gradient(circle at 50% 70%,rgba(20,90,67,.45),transparent 70%)}.lobby-hero-skin{position:absolute;left:16px;bottom:14px;display:flex;align-items:center;gap:8px;font-family:var(--font-serif);font-size:18px}.lobby-hero-info{padding:22px 22px 22px 4px;display:flex;flex-direction:column;gap:14px;justify-content:center}.lobby-hero-info .hello h1{font-size:30px}.lobby-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lobby-stats .value small{font-size:14px;color:var(--text-dim);margin-left:2px}.goal-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--gold-line);background:#d4b06a0d}.active-round-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;border-color:#6fd6e866}.lobby-actions{margin-bottom:16px}.action-card{display:flex;flex-direction:column;gap:10px}.action-card h2{margin-bottom:0}.action-card p{margin:0}.recent-room{cursor:pointer;justify-content:space-between;color:var(--text);font:inherit;text-align:left;min-height:44px}.recent-room:disabled{opacity:.5;cursor:default}.rules-card ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--text-2)}@media(max-width:760px){.lobby-hero{grid-template-columns:minmax(0,1fr)}.lobby-hero-stage{min-height:230px}.lobby-hero-info{padding:0 16px 18px}.lobby-stats .value{font-size:19px}}:root{--bg: #06080a;--bg-2: #0b0f12;--obsidian: #111518;--felt: #0c3d30;--felt-deep: #072a21;--gold: #d4b06a;--gold-bright: #f4dda6;--gold-deep: #9c7a3c;--gold-line: rgba(212, 176, 106, .34);--gold-line-strong: rgba(212, 176, 106, .62);--panel: rgba(14, 18, 20, .82);--panel-solid: #101417;--panel-raise: rgba(24, 30, 33, .92);--text: #f2ede2;--text-2: #c9c1b1;--text-dim: #8f897e;--win: #f1c75b;--lose: #9aa5ae;--danger: #e66a5c;--ok: #5fd3a0;--cyan: #6fd6e8;--radius: 14px;--radius-sm: 10px;--shadow: 0 18px 48px rgba(0, 0, 0, .55);--font-sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;--font-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;--font-num: "DIN Alternate", "Bahnschrift", "Roboto Condensed", "Helvetica Neue", var(--font-sans);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--gutter: 16px;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;background:radial-gradient(1200px 700px at 50% -10%,rgba(30,90,70,.28),transparent 60%),radial-gradient(900px 600px at 100% 100%,rgba(120,80,30,.12),transparent 60%),var(--bg);color:var(--text);font-family:var(--font-sans);font-size:15px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}a{color:var(--gold-bright);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{font-family:var(--font-serif);font-weight:700;letter-spacing:.04em;margin:0}button{font:inherit;color:inherit}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}.gold-text{background:linear-gradient(180deg,#fff3cf,#e7c27a 45%,#b38a43);-webkit-background-clip:text;background-clip:text;color:transparent}.dim{color:var(--text-dim)}.page{width:100%;max-width:1120px;margin:0 auto;padding:calc(16px + var(--safe-top)) calc(var(--gutter) + var(--safe-right)) calc(32px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left))}.topnav{display:flex;align-items:center;gap:12px;min-height:52px;margin-bottom:18px;flex-wrap:wrap}.topnav .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:20px;font-weight:800;letter-spacing:.08em;color:var(--text);text-decoration:none}.topnav .brand img{width:30px;height:30px}.topnav .spacer{flex:1}.topnav nav{display:flex;gap:4px;flex-wrap:wrap}.topnav nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--text-2);text-decoration:none}.topnav nav a.active,.topnav nav a:hover{color:var(--gold-bright);background:#d4b06a14}.grid{display:grid;gap:16px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:760px){.grid.cols-2,.grid.cols-3{grid-template-columns:minmax(0,1fr)}}.row{display:flex;align-items:center;gap:10px}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:12px}.panel{position:relative;background:linear-gradient(180deg,#1a1f22db,#0c0f11e6);border:1px solid var(--gold-line);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px #fff0d20f;padding:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.panel.tight{padding:12px}.panel h2{font-size:18px;margin-bottom:12px}.panel h3{font-size:15px;margin-bottom:8px}.panel:before{content:"";position:absolute;inset:4px;border-radius:calc(var(--radius) - 4px);border:1px solid rgba(212,176,106,.08);pointer-events:none}.divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent);margin:14px 0}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 18px;border-radius:12px;border:1px solid var(--gold-line-strong);background:linear-gradient(180deg,#282e31e6,#14181af2);color:var(--text);font-weight:600;letter-spacing:.04em;cursor:pointer;user-select:none;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease;touch-action:manipulation;white-space:nowrap}.btn:hover{box-shadow:0 0 0 1px #f4dda640,0 8px 24px #0006}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}.btn.gold{border-color:#ffecbeb3;background:linear-gradient(180deg,#f6e2ae,#d9b46b 46%,#a77f38);color:#23170a;text-shadow:0 1px 0 rgba(255,245,220,.5);box-shadow:0 6px 22px #d4b06a47,inset 0 1px #fff9}.btn.gold:hover{box-shadow:0 8px 30px #e6be6e73,inset 0 1px #fff9}.btn.ghost{background:transparent;border-color:var(--gold-line)}.btn.danger{border-color:#e66a5c8c;color:#ffd6cf}.btn.big{min-height:54px;font-size:17px;padding:0 26px;border-radius:14px}.btn.small{min-height:36px;padding:0 12px;font-size:13px}.btn.block{width:100%}.btn.icon{padding:0;width:44px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:13px;color:var(--text-2)}.input{width:100%;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid rgba(212,176,106,.28);background:#050809b3;color:var(--text);font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #d4b06a2e}.input::placeholder{color:#6f6a62}.hint{font-size:12.5px;color:var(--text-dim)}.error-text{color:var(--danger);font-size:13.5px}.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--gold-line);background:#d4b06a0f;color:var(--text-2);font-size:13px;white-space:nowrap}.chip.button{cursor:pointer;min-height:40px}.chip.gold{color:#2a1d0b;background:linear-gradient(180deg,#f2d99f,#c99f55);border-color:transparent}.chip.ok{color:var(--ok);border-color:#5fd3a066}.chip.warn{color:#ffc98a;border-color:#ffb46459}.stat-tile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:#ffffff06;border:1px solid rgba(212,176,106,.14);min-width:0}.stat-tile .label{font-size:12.5px;color:var(--text-dim)}.stat-tile .value{font-size:22px;font-weight:700}.stat-tile .sub{font-size:12px;color:var(--text-dim)}.progress{position:relative;height:8px;border-radius:999px;background:#ffffff0f;overflow:hidden}.progress>i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,#a77f38,#f2d99f);box-shadow:0 0 12px #f2d99f80}.list{display:flex;flex-direction:column;gap:8px}.list-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#ffffff06;border:1px solid rgba(212,176,106,.12);min-width:0}.list-item:hover{border-color:#d4b06a4d}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.tabs::-webkit-scrollbar{display:none}.tabs button{min-height:42px;padding:0 14px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;white-space:nowrap}.tabs button.active{border-color:var(--gold-line-strong);color:var(--gold-bright);background:#d4b06a14}.modal-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));background:#020405a8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .2s ease}.modal{width:100%;max-width:560px;max-height:100%;overflow:auto;overscroll-behavior:contain}.modal.wide{max-width:960px}.toast-host{position:fixed;left:50%;top:calc(14px + var(--safe-top));transform:translate(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;width:min(92vw,460px);pointer-events:none}.toast{pointer-events:auto;padding:12px 16px;border-radius:12px;background:#101416f5;border:1px solid var(--gold-line-strong);box-shadow:var(--shadow);animation:slideDown .25s ease;font-size:14px}.toast.error{border-color:#e66a5c99}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes pulseGold{0%,to{box-shadow:0 0 #f4dda673}50%{box-shadow:0 0 0 8px #f4dda600}}.center-screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root.reduce-motion *,:root.reduce-motion *:before,:root.reduce-motion *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.die-img{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}.die-img img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));user-select:none}.die-img .die-ph{width:78%;height:78%;border-radius:22%;display:flex;align-items:center;justify-content:center;background:#ffffff14;color:var(--text-dim);font-size:12px}.die-img.hl-combo:after,.die-img.hl-rest:after{content:"";position:absolute;left:10%;right:10%;bottom:2%;height:16%;border-radius:50%;border:2px solid rgba(255,213,107,.95);box-shadow:0 0 10px #ffd56b99;pointer-events:none}.die-img.hl-rest:after{border-color:#a8d8ffe6;box-shadow:0 0 10px #a8d8ff80}.dice-row{display:inline-flex;gap:3px;align-items:center}.niu-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:8px;font-family:var(--font-serif);font-weight:800;letter-spacing:.06em;border:1px solid rgba(212,176,106,.35);background:#ffffff0a;color:#e2dacb;white-space:nowrap}.niu-tag.lv0{color:#8f897e;border-color:#ffffff1f}.niu-tag.lv7,.niu-tag.lv8,.niu-tag.lv9{color:#f3c37a}.niu-tag.lv10{color:#2a1a05;background:linear-gradient(180deg,#ffe7a6,#e2b35a);border-color:#fff0c8;box-shadow:0 0 14px #ffd26e73}.win{color:var(--win)}.lose{color:var(--lose)}.modal-head{margin-bottom:12px}.modal-head h2{margin:0}.loading-die{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#fbf3e2,#cdbb95);box-shadow:inset 0 -4px #00000026,0 10px 22px #00000073;position:relative;animation:loadSpin 1.1s ease-in-out infinite}.loading-die:before,.loading-die:after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#b3261e;top:9px;left:9px;box-shadow:19px 19px #b3261e}.loading-die:after{left:28px;box-shadow:-19px 19px #b3261e}@keyframes loadSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.9)}to{transform:rotate(360deg) scale(1)}}.gl-lost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;color:var(--text-2);z-index:3}.image-preview{max-height:64vh;overflow:auto;border-radius:12px;border:1px solid var(--gold-line);background:#050607;-webkit-overflow-scrolling:touch}.image-preview img{display:block;width:100%;height:auto;-webkit-touch-callout:default}.image-preview.portrait img{max-width:520px;margin:0 auto}.pair-scroll{overflow-x:auto}.pair-table{border-collapse:collapse;width:100%;min-width:420px;font-size:13.5px}.pair-table th,.pair-table td{border:1px solid rgba(212,176,106,.16);padding:7px 8px;text-align:center;white-space:nowrap;max-width:120px}.pair-table th{color:var(--text-2);font-weight:600}.pair-table tbody th{text-align:left}.pair-table tbody th .niu-tag{margin-left:6px;min-height:20px;font-size:12px}.pair-table td.self{color:var(--text-dim);background:#ffffff05}.pair-table td.tie{color:var(--text-dim)}.setting-row{min-height:44px;gap:12px}.setting-row input[type=checkbox]{width:24px;height:24px;accent-color:var(--gold)}.setting-row input[type=range]{width:55%;accent-color:var(--gold)}.skin-row.on{border-color:var(--gold-line-strong);background:#d4b06a12}.small-chip{min-height:24px;font-size:12px;margin-left:6px}@media(max-width:640px){.hide-sm{display:none!important}}.unlock-celebrate{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.unlock-stage{position:relative;width:100%;height:230px;border-radius:14px;overflow:hidden;border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center}.unlock-name{font-size:30px;letter-spacing:.12em}.confetti{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,215,120,.9) 1.5px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1.5px);background-size:46px 46px,31px 31px;animation:confettiFall 2.6s linear infinite;opacity:.55}@keyframes confettiFall{0%{background-position:0 -46px,12px -31px}to{background-position:0 230px,12px 230px}}