:root{--color-paper: oklch(95.5% .022 85);--color-paper-2: oklch(92.5% .03 82);--color-paper-3: oklch(88% .04 80);--color-ink: oklch(28% .03 55);--color-ink-2: oklch(42% .03 55);--color-ink-3: oklch(58% .03 60);--color-accent: oklch(68% .15 55);--color-accent-strong: oklch(60% .16 50);--color-accent-soft: oklch(85% .07 65);--color-board: oklch(81% .065 78);--color-board-edge: oklch(66% .075 65);--color-line: oklch(45% .05 60);--color-stone-black: oklch(26% .012 260);--color-stone-white: oklch(97% .008 95);--color-good: oklch(62% .13 145);--color-bad: oklch(58% .16 25);--color-card: oklch(98% .012 90);--color-overlay: oklch(25% .03 55 / .55);--font-display: "Yuanti SC", "YouYuan", "幼圆", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;--font-body: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--text-sm: 13px;--text-md: 15px;--text-lg: 18px;--text-xl: 24px;--text-display: clamp(30px, 4.5vw, 44px);--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-pill: 999px;--shadow-card: 0 2px 6px oklch(30% .04 60 / .1), 0 8px 24px oklch(30% .04 60 / .08);--shadow-pop: 0 4px 12px oklch(30% .04 60 / .16), 0 16px 40px oklch(30% .04 60 / .12);--shadow-inset: inset 0 -3px 0 oklch(0% 0 0 / .08);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-fast: .12s;--dur-base: .22s;--dur-slow: .42s}[data-theme=night]{--color-paper: oklch(22% .015 70);--color-paper-2: oklch(26% .018 70);--color-paper-3: oklch(31% .02 70);--color-ink: oklch(90% .015 85);--color-ink-2: oklch(74% .02 80);--color-ink-3: oklch(58% .02 80);--color-accent: oklch(72% .14 60);--color-accent-strong: oklch(78% .13 65);--color-accent-soft: oklch(38% .06 60);--color-board: oklch(34% .04 60);--color-board-edge: oklch(24% .03 55);--color-line: oklch(72% .04 75);--color-stone-black: oklch(16% .01 260);--color-stone-white: oklch(92% .01 90);--color-good: oklch(70% .12 150);--color-bad: oklch(66% .15 25);--color-card: oklch(27% .018 70);--color-overlay: oklch(10% .01 60 / .65);--shadow-card: 0 2px 6px oklch(0% 0 0 / .35), 0 8px 24px oklch(0% 0 0 / .3);--shadow-pop: 0 4px 12px oklch(0% 0 0 / .45), 0 16px 40px oklch(0% 0 0 / .4)}*{box-sizing:border-box}html,body{margin:0;padding:0;overflow-x:clip}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-body);font-size:var(--text-md);color:var(--color-ink);background:radial-gradient(1200px 500px at 85% -10%,var(--color-accent-soft) 0%,transparent 60%),var(--color-paper);min-height:100dvh;overscroll-behavior-y:none}#root{min-height:100dvh;display:flex;flex-direction:column}h1,h2,h3{font-family:var(--font-display);font-style:normal;margin:0;overflow-wrap:anywhere;min-width:0}button{font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}input{font-family:inherit}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:44px;padding:10px 22px;border:none;border-radius:var(--radius-pill);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-ink);background:var(--color-card);box-shadow:var(--shadow-card),var(--shadow-inset);cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);-webkit-user-select:none;user-select:none}.btn:hover{background:var(--color-paper-2);transform:translateY(-1px)}.btn:active{transform:translateY(1px);box-shadow:var(--shadow-inset)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:var(--color-accent);color:#211208}[data-theme=night] .btn-primary{color:#180f09}.btn-primary:hover{background:var(--color-accent-strong)}.btn-ghost{background:transparent;box-shadow:none}.btn-ghost:hover{background:var(--color-paper-2)}.btn-danger{color:var(--color-bad)}.btn-lg{min-height:56px;font-size:var(--text-xl);padding:12px 30px}.btn-sm{min-height:36px;font-size:var(--text-sm);padding:6px 14px}.card{background:var(--color-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-md)}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-md)}.field label{font-size:var(--text-sm);color:var(--color-ink-2);font-weight:600}.field input{min-height:48px;padding:10px 14px;border:2px solid var(--color-paper-3);border-radius:var(--radius-sm);background:var(--color-card);color:var(--color-ink);font-size:var(--text-md);transition:border-color var(--dur-fast) var(--ease-out)}.field input:focus{border-color:var(--color-accent);outline:none}.form-error{color:var(--color-bad);font-size:var(--text-sm);min-height:20px;margin:0 0 var(--space-sm)}.page{width:100%;max-width:1080px;margin:0 auto;padding:var(--space-lg) var(--space-md) calc(var(--space-xl) + env(safe-area-inset-bottom));flex:1}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) var(--space-md);padding-top:calc(var(--space-sm) + env(safe-area-inset-top));max-width:1080px;width:100%;margin:0 auto}.userchip{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:var(--radius-pill);background:var(--color-card);box-shadow:var(--shadow-card);font-weight:700;font-family:var(--font-display);cursor:pointer;border:none;color:var(--color-ink);min-height:44px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay);display:grid;place-items:center;z-index:60;padding:var(--space-md);animation:fade-in var(--dur-base) var(--ease-out)}.modal{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:var(--space-lg);max-width:min(480px,92vw);width:100%;max-height:86dvh;overflow:auto;animation:pop-in var(--dur-base) var(--ease-out)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}@keyframes stone-drop{0%{transform:scale(1.5);opacity:.4}60%{transform:scale(.94);opacity:1}to{transform:scale(1)}}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 var(--color-accent-soft)}70%{box-shadow:0 0 0 10px transparent}to{box-shadow:0 0 0 0 transparent}}.thinking-dots span{display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--color-accent);animation:dot-bounce 1s infinite var(--ease-in-out)}.thinking-dots span:nth-child(2){animation-delay:.15s}.thinking-dots span:nth-child(3){animation-delay:.3s}@keyframes dot-bounce{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}.toasts{position:fixed;top:calc(env(safe-area-inset-top) + 12px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:90;width:min(420px,92vw)}.toast{background:var(--color-ink);color:var(--color-paper);padding:12px 18px;border-radius:var(--radius-md);box-shadow:var(--shadow-pop);font-size:var(--text-sm);animation:toast-in var(--dur-base) var(--ease-out);text-align:center}.toast-error{background:var(--color-bad);color:#fbf8f1}.toast-success{background:var(--color-good);color:#fbf8f1}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.player-card{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius-lg);background:var(--color-card);box-shadow:var(--shadow-card);transition:box-shadow var(--dur-base) var(--ease-out),outline-color var(--dur-base);outline:3px solid transparent;min-width:0}.player-card.active{outline-color:var(--color-accent);animation:pulse-ring 1.6s infinite var(--ease-out)}.player-card .p-info{display:flex;flex-direction:column;min-width:0}.player-card .p-name{font-family:var(--font-display);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-card .p-sub{font-size:var(--text-sm);color:var(--color-ink-3);white-space:nowrap}.stone-badge{width:22px;height:22px;border-radius:50%;margin-left:auto;flex:none;box-shadow:inset 0 -2px 4px #00000040,0 1px 3px #0000004d}.stone-badge.black{background:radial-gradient(circle at 32% 28%,#555,var(--color-stone-black) 65%)}.stone-badge.white{background:radial-gradient(circle at 32% 28%,#fff,#d9d4c8 70%)}.row{display:flex;align-items:center;gap:var(--space-md);min-width:0}.grow{flex:1;min-width:0}.center{display:grid;place-items:center}.muted{color:var(--color-ink-3);font-size:var(--text-sm)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}html[data-anim=off] *{animation:none!important;transition:none!important}.home{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding-top:var(--space-lg)}.home-logo{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);animation:pop-in var(--dur-slow) var(--ease-out)}.home-logo .slogan{color:var(--color-ink-3);font-size:var(--text-sm);letter-spacing:.35em;text-indent:.35em}.home-menu{display:flex;flex-direction:column;gap:14px;width:min(360px,100%)}.menu-btn{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 22px;border:none;border-radius:var(--radius-lg);background:var(--color-card);box-shadow:var(--shadow-card),var(--shadow-inset);cursor:pointer;font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--color-ink);text-decoration:none;transition:transform var(--dur-fast) var(--ease-out)}.menu-btn:hover{transform:translateY(-2px) rotate(-.4deg)}.menu-btn:active{transform:translateY(1px)}.menu-btn .m-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--color-accent-soft);font-size:22px}.menu-btn.primary{background:var(--color-accent)}.menu-btn.primary .m-icon{background:#ffffff59}.menu-btn .m-hint{margin-left:auto;font-size:var(--text-sm);font-weight:400;color:var(--color-ink-3)}.auth-page{display:grid;place-items:center;min-height:100dvh;padding:var(--space-md)}.auth-card{width:min(400px,100%);display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-xl) var(--space-lg)}.auth-card form{width:100%}.auth-switch{font-size:var(--text-sm);color:var(--color-ink-3)}.auth-switch button{background:none;border:none;color:var(--color-accent-strong);font-weight:700;cursor:pointer;font-size:inherit;padding:4px}.stage{display:flex;flex-direction:column;gap:var(--space-sm);width:min(920px,100%);margin:0 auto;padding:0 var(--space-sm) calc(72px + env(safe-area-inset-bottom))}.stage-side{display:flex;justify-content:center}.stage .board-wrap{display:grid;place-items:center;width:100%;min-height:0}.board-frame{position:relative;width:min(92vw,640px,calc(100dvh - 300px));aspect-ratio:1;border-radius:18px;box-shadow:var(--shadow-pop);background:var(--color-board)}.board-frame canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:manipulation;border-radius:18px}.confirm-fab{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:5}.stage-toolbar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--color-paper) 30%);z-index:20}@media(min-width:1024px){.stage{display:grid;grid-template-columns:240px minmax(0,1fr) 240px;align-items:center;gap:var(--space-lg);width:min(1200px,100%);padding-bottom:var(--space-lg)}.stage-side-top{grid-area:1 / 1}.stage-side-bottom{grid-area:1 / 3}.stage .board-wrap{grid-area:1 / 2}.board-frame{width:min(100%,calc(100dvh - 190px),680px)}.stage-toolbar{position:static;grid-area:1 / 3;align-self:end;justify-content:flex-start;flex-wrap:wrap;background:none;padding:0}.stage .status-line{grid-area:2 / 1 / 3 / 4;text-align:center}}.room-lobby{max-width:520px;margin:var(--space-lg) auto;display:flex;flex-direction:column;gap:var(--space-md)}.room-code-box{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-size:clamp(30px,8vw,46px);letter-spacing:.22em;text-indent:.22em;font-weight:800;padding:var(--space-md);background:var(--color-paper-2);border-radius:var(--radius-md);-webkit-user-select:all;user-select:all}.join-form{display:flex;gap:10px}.join-form input{flex:1;min-height:52px;text-align:center;font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:.3em;text-transform:uppercase;border:2px solid var(--color-paper-3);border-radius:var(--radius-sm);background:var(--color-card);color:var(--color-ink);width:0}.room-players{display:grid;gap:var(--space-sm)}.ready-mark{font-size:var(--text-sm);font-weight:700;color:var(--color-good)}.profile{display:flex;flex-direction:column;gap:var(--space-lg);max-width:640px;margin:0 auto}.stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;text-align:center}.stat-cell{background:var(--color-paper-2);border-radius:var(--radius-sm);padding:10px 4px}.stat-cell b{display:block;font-family:var(--font-display);font-size:var(--text-xl)}.stat-cell span{font-size:var(--text-xs, 12px);color:var(--color-ink-3)}.avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.avatar-cell{border:3px solid transparent;border-radius:var(--radius-md);background:var(--color-paper-2);padding:6px;cursor:pointer;display:grid;place-items:center;min-height:44px}.avatar-cell.selected{border-color:var(--color-accent);background:var(--color-accent-soft)}.game-list{display:flex;flex-direction:column;gap:8px}.game-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--color-paper-2);font-size:var(--text-sm);min-width:0}.result-tag{font-weight:800;font-family:var(--font-display)}.result-tag.win{color:var(--color-good)}.result-tag.loss{color:var(--color-bad)}.result-tag.draw{color:var(--color-ink-3)}.rules{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-md)}.rules li{margin:6px 0}.settings{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-md)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:56px;padding:0 var(--space-md);background:var(--color-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}.switch{position:relative;width:52px;height:30px;flex:none;border-radius:var(--radius-pill);border:none;background:var(--color-paper-3);cursor:pointer;transition:background var(--dur-base) var(--ease-out)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--color-card);box-shadow:0 1px 4px #0000004d;transition:transform var(--dur-base) var(--ease-out)}.switch.on{background:var(--color-accent)}.switch.on:after{transform:translate(22px)}.theme-dots{display:flex;gap:8px}.theme-dot{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer}.theme-dot.wood{background:linear-gradient(135deg,#d8bc92,#ae6f42)}.theme-dot.night{background:linear-gradient(135deg,#473322,#1b150f)}.theme-dot.selected{border-color:var(--color-accent)}.review-bar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.move-no{font-family:var(--font-display);font-weight:800;min-width:72px;text-align:center}.result-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);text-align:center}.result-title{font-family:var(--font-display);font-size:var(--text-display);font-weight:800}.result-title.win{color:var(--color-good)}.result-title.loss{color:var(--color-bad)}.mtab{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;background:var(--color-card);box-shadow:0 -2px 12px #3d29191f;padding-bottom:env(safe-area-inset-bottom)}.mtab-item{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;color:var(--color-ink-3);font-family:var(--font-display);font-size:11px;cursor:pointer;-webkit-tap-highlight-color:transparent}.mtab-item.active{color:var(--color-accent-strong);font-weight:800}.mtab-icon{font-size:22px;line-height:1;transition:transform var(--dur-fast) var(--ease-out)}.mtab-item:active .mtab-icon{transform:scale(.88)}.sheet-overlay{align-items:flex-end;grid-auto-rows:min-content;display:grid;place-items:end center}.sheet{width:100%;max-width:560px;background:var(--color-card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-pop);padding:8px 20px calc(20px + env(safe-area-inset-bottom));animation:sheet-up var(--dur-base) var(--ease-out);max-height:82dvh;overflow:auto}@keyframes sheet-up{0%{transform:translateY(60%);opacity:.6}to{transform:none;opacity:1}}.sheet-handle{width:40px;height:5px;border-radius:999px;background:var(--color-paper-3);margin:4px auto 12px}.sheet-title{font-family:var(--font-display);font-size:var(--text-lg);text-align:center;margin:0 0 var(--space-md)}.m-page{width:100%;max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(72px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;flex:1}.m-pagetitle{font-size:var(--text-xl);text-align:center;margin:4px 0}.m-userbanner{display:flex;align-items:center;gap:12px;width:100%;min-width:0;min-height:64px;padding:10px 16px;border:none;border-radius:var(--radius-md);background:var(--color-card);box-shadow:var(--shadow-card);font-family:var(--font-display);color:var(--color-ink);cursor:pointer;text-align:left}.m-userbanner-name{font-size:var(--text-lg);font-weight:800;display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m-userbanner-name small{font-size:11px;color:var(--color-ink-3);font-weight:400}.m-userbanner-arrow{margin-left:auto;font-size:22px;color:var(--color-ink-3)}.m-winrate-pill{margin-left:auto;padding:6px 12px;border-radius:999px;background:var(--color-accent-soft);color:var(--color-accent-strong);font-size:var(--text-sm);font-weight:800;white-space:nowrap}.m-home-brand{display:flex;align-items:center;gap:14px;padding:4px 4px 0}.m-home-title{font-size:28px;letter-spacing:.12em}.m-home-slogan{font-size:12px;color:var(--color-ink-3);letter-spacing:.28em}.m-cards{display:flex;flex-direction:column;gap:12px}.m-card{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 18px;border:none;border-radius:var(--radius-md);background:var(--color-card);box-shadow:var(--shadow-card);font-family:var(--font-display);color:var(--color-ink);cursor:pointer;text-align:left;transition:transform var(--dur-fast) var(--ease-out)}.m-card:active{transform:scale(.98)}.m-card.primary{background:var(--color-accent)}.m-card-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--color-accent-soft);font-size:21px}.m-card.primary .m-card-icon{background:#ffffff59}.m-card-text{display:flex;flex-direction:column;gap:2px;min-width:0}.m-card-text b{font-size:var(--text-lg)}.m-card-text small{font-size:12px;color:var(--color-ink-3)}.m-card.primary .m-card-text small{color:#382315bf}.m-card-arrow{margin-left:auto;font-size:20px;color:var(--color-ink-3)}.m-stage{display:flex;flex-direction:column;height:100dvh;max-width:560px;margin:0 auto;width:100%;padding:calc(env(safe-area-inset-top) + 6px) 12px calc(env(safe-area-inset-bottom) + 8px);gap:8px}.m-topbar{display:flex;align-items:center;gap:8px;min-height:48px}.m-topbar-title{font-size:var(--text-lg);margin:0 auto}.m-back{width:44px;height:44px;flex:none;border:none;border-radius:50%;background:var(--color-card);box-shadow:var(--shadow-card);font-size:24px;line-height:1;color:var(--color-ink);cursor:pointer}.m-topbar-side{display:flex;min-width:0}.m-side{display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:44px;padding:6px 12px;border-radius:var(--radius-md);background:var(--color-card);box-shadow:var(--shadow-card)}.m-side.thinking{outline:2px solid var(--color-accent)}.m-side-avatar{flex:none;display:grid;place-items:center}.m-side-info{display:flex;flex-direction:column;min-width:0;flex:1}.m-side-name{font-family:var(--font-display);font-weight:800;font-size:var(--text-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-side-sub{font-size:11px;color:var(--color-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-board{flex:1;min-height:0;display:grid;place-items:center}.m-board .board-frame{width:min(100%,calc(100dvh - 320px));min-width:240px}.m-me{display:flex}.m-status{text-align:center;font-size:12px;color:var(--color-ink-3);min-height:18px}.m-actions{display:flex;gap:10px;padding-bottom:env(safe-area-inset-bottom)}.m-action-btn{flex:1;min-height:48px;font-size:var(--text-md)}.m-action-btn:not([disabled]):active{transform:scale(.97)}.m-stage-setup{gap:12px}.m-setup-list{display:flex;flex-direction:column;gap:10px}.m-setup-cell{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 16px;border:2px solid transparent;border-radius:var(--radius-md);background:var(--color-card);box-shadow:var(--shadow-card);font-family:var(--font-display);color:var(--color-ink);cursor:pointer;text-align:left}.m-setup-cell.selected{border-color:var(--color-accent);background:var(--color-accent-soft)}.m-setup-text{display:flex;flex-direction:column;gap:2px;min-width:0}.m-setup-text b{font-size:var(--text-lg)}.m-setup-text small{font-size:12px;color:var(--color-ink-3)}.m-setup-check{margin-left:auto;color:var(--color-accent-strong);font-size:20px;font-weight:800}.m-setup-color{display:flex;gap:10px}.m-color-btn{flex:1;min-height:48px;border:2px solid var(--color-paper-3);border-radius:var(--radius-md);background:var(--color-card);font-family:var(--font-display);font-size:var(--text-md);font-weight:700;color:var(--color-ink);cursor:pointer}.m-color-btn.selected{border-color:var(--color-accent);background:var(--color-accent-soft)}.m-start{width:100%}.m-roomlobby{gap:14px}.m-roomcode-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px;background:var(--color-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}.m-roomcode{font-family:var(--font-display);font-size:clamp(34px,11vw,48px);font-weight:800;letter-spacing:.2em;text-indent:.2em;-webkit-user-select:all;user-select:all}.m-roomcode-actions{display:flex;gap:10px;width:100%}.m-roomplayers{display:flex;flex-direction:column;gap:10px}.m-joincard{display:flex;flex-direction:column;gap:12px;padding:18px 16px;background:var(--color-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}.m-joincard-title{font-family:var(--font-display);font-size:var(--text-lg)}.m-joininput{min-height:56px;text-align:center;font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;border:2px solid var(--color-paper-3);border-radius:var(--radius-sm);background:var(--color-paper-2);color:var(--color-ink);width:100%}.m-joininput:focus{border-color:var(--color-accent);outline:none}.m-section{display:flex;flex-direction:column;gap:10px}.m-section-title{font-size:var(--text-md);font-family:var(--font-display)}.m-avatar-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px;scrollbar-width:none}.m-avatar-strip::-webkit-scrollbar{display:none}.m-avatar-chip{flex:none;width:58px;height:58px;border:3px solid transparent;border-radius:var(--radius-md);background:var(--color-card);box-shadow:var(--shadow-card);display:grid;place-items:center;cursor:pointer}.m-avatar-chip.selected{border-color:var(--color-accent);background:var(--color-accent-soft)}.m-statrow{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:8px}.m-statcard{background:var(--color-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);padding:10px 4px;text-align:center;display:flex;flex-direction:column;gap:2px}.m-statcard.big{background:var(--color-accent-soft)}.m-statcard b{font-family:var(--font-display);font-size:var(--text-lg)}.m-statcard.big b{font-size:22px;color:var(--color-accent-strong)}.m-statcard span{font-size:11px;color:var(--color-ink-3)}.m-gamelist{display:flex;flex-direction:column;gap:8px}.m-gamerow{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--color-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);font-size:var(--text-sm);min-width:0}.m-gamerow small{color:var(--color-ink-3)}.m-empty{text-align:center;color:var(--color-ink-3);font-size:var(--text-sm);padding:16px 0;margin:0}.m-logout{color:var(--color-bad)}.m-result{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.m-result-actions{display:flex;gap:10px;width:100%;margin-top:6px}.m-sheet-actions{display:flex;flex-direction:column;gap:4px}.m-sheet-action{min-height:52px;border:none;background:none;border-radius:var(--radius-sm);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-ink);cursor:pointer}.m-sheet-action:active{background:var(--color-paper-2)}.m-sheet-action.danger{color:var(--color-bad)}.m-board-mini .board-frame{width:min(100%,320px);margin:0 auto 12px}.m-netbanner{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translate(-50%);z-index:80;background:var(--color-bad);color:#fbf8f1;font-size:var(--text-sm);padding:8px 16px;border-radius:999px;white-space:nowrap}@media(orientation:landscape)and (max-height:520px){.m-stage{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"top top top" "me board status" "me board ." "me board ." "actions actions actions";align-items:center;gap:8px;height:100dvh}.m-topbar{grid-area:top}.m-me{grid-area:me}.m-board{grid-area:board}.m-board .board-frame{width:min(100%,calc(100dvh - 190px))}.m-status{grid-area:status;align-self:start;padding-top:8px}.m-actions{grid-area:actions}}@media(max-width:340px){.m-card-text b{font-size:var(--text-md)}.m-statrow{grid-template-columns:repeat(3,1fr)}.m-statcard.big{grid-column:1 / -1}}