@font-face{font-family:local-ui;src:local("Microsoft YaHei")}
:root{color-scheme:dark;font-family:local-ui,"PingFang SC",system-ui,sans-serif;background:#081322;color:#f4f5f7;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #f1cc8c;outline-offset:3px}button:disabled{cursor:wait}button svg{pointer-events:none}button:active{transform:translateY(1px)}[hidden]{display:none!important}
#game{position:fixed;inset:0;width:100%;height:100%;border:0;visibility:hidden;pointer-events:none;background:#17151d}body.in-game #game{visibility:visible;pointer-events:auto}body.in-game #lobby{visibility:hidden;pointer-events:none}body.in-game #design-dialog{display:none}
#lobby{position:fixed;inset:0;display:grid;grid-template-rows:62px minmax(0,1fr) 64px 36px;isolation:isolate;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px,env(safe-area-inset-left));--accent:#e5ba77;--ink:#f4f5f7;--muted:#a6aebd;--line:#c2d2ee22;color:var(--ink)}
.backdrop,.ambient{position:absolute;inset:0;pointer-events:none;z-index:-2}.backdrop{background:#071322 url('/home-design/assets/club.png') center 58%/cover no-repeat}.ambient{z-index:-1;background:linear-gradient(180deg,#040e1ddd,transparent 34%,#06132222 61%,#050e1bea 100%)}
.topbar{display:flex;align-items:center;justify-content:space-between;position:relative;gap:14px}.player{display:flex;align-items:center;gap:9px;min-width:140px}.player b{font-size:13px;font-weight:600}.player small{display:block;font-size:9px;color:var(--muted);margin-top:3px;letter-spacing:1px}.avatar{width:36px;height:36px;display:grid;place-items:center;background:radial-gradient(circle at 32% 24%,#f9f4df 0 6%,#e2dbbd 8% 37%,#101b2e 39% 56%,#000 85%);font-size:17px;font-weight:800;color:#111522;border:1px solid #d1b37a8a;box-shadow:0 2px 10px #0007;border-radius:50%;text-indent:-1px;padding-bottom:7px}
.wordmark{display:flex;align-items:center;gap:9px;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:650;font-size:23px;letter-spacing:3px}.wordmark small{display:block;font-size:8px;font-weight:400;letter-spacing:5px;text-align:center;margin-top:3px;color:var(--accent)}.mark{font-size:27px;color:var(--accent)}.top-tools{display:flex;gap:8px}.icon-button{display:grid;place-items:center;width:44px;height:44px;background:#ffffff08;border:1px solid var(--line);border-radius:50%;color:var(--ink)}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
#modes{min-height:0;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.scene-copy{align-self:start;padding:23px 0 0 8px;pointer-events:none}.scene-copy .overline{font-size:9px;letter-spacing:4px;color:#c7a572}.scene-copy h1{font-size:33px;font-weight:550;letter-spacing:6px;line-height:1.25;margin:8px 0}.scene-copy p{font-size:11px;letter-spacing:2px;color:#bcc5d3;margin:0}.scene-copy .serial{display:block;font-size:9px;color:#9aabba;letter-spacing:3px;margin-top:12px}
.mode-panel{display:flex;flex-direction:column;gap:10px;align-self:center;padding:18px 20px 16px;background:linear-gradient(120deg,#18293ae8,#101c2be3);border:1px solid #b1c6db2d;border-radius:5px;box-shadow:0 18px 38px #0003;position:relative;max-width:410px;justify-self:end;width:100%}.mode-panel:before{content:"";position:absolute;left:-1px;top:12%;height:28%;width:2px;background:var(--accent);box-shadow:0 0 14px #d8b37866}.section-label{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:3px;color:#a4b3c6}.section-label span{font-size:8px;color:#718397;letter-spacing:2px}.primary-mode{display:flex;align-items:center;gap:12px}.primary-mode h2{font-size:26px;letter-spacing:3px;font-weight:650;margin:0}.primary-mode p{font-size:10px;color:#a6b6c8;margin:6px 0 0}.mode-emblem{width:45px;height:45px;display:grid;place-items:center;border:1px solid #d8b37840;border-radius:50%;color:var(--accent);background:#d8b3780a}.start-button{height:50px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:16px;background:linear-gradient(100deg,#f1d39a,#c99652);color:#302119;border-radius:4px;box-shadow:inset 0 1px #fff6,0 4px 0 #78562f80;font-size:17px;font-weight:750;letter-spacing:3px}.start-button .arrow{font-size:24px;font-weight:400}.minor-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.minor-modes button{height:55px;display:flex;align-items:center;justify-content:center;gap:10px;color:#dce5ee;background:#263849aa;border:1px solid #899daf30;border-radius:4px;text-align:left}.minor-modes b{display:block;font-size:13px;font-weight:600;letter-spacing:1px}.minor-modes small{display:block;font-size:9px;color:#8fa0b3;margin-top:4px}.minor-modes svg{width:24px;height:24px;color:#a1b9d2}.resume-button{color:var(--accent);border:0;background:transparent;font-size:11px;text-align:left;min-height:26px;padding:4px 0}.resume-button span{margin-left:10px;color:#b0becf;font-size:10px}.resume-button[hidden]{display:none}
.utility-nav{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:12px;border-top:1px solid var(--line)}.utility-nav button{height:50px;display:flex;align-items:center;justify-content:center;gap:12px;background:transparent;color:#e0e6ef;text-align:left;border-right:1px solid var(--line)}.utility-nav button:last-child{border-right:0}.utility-nav svg{width:25px;height:25px;color:var(--accent)}.utility-nav span{font-size:13px;font-weight:550;letter-spacing:1px}.utility-nav small{display:block;font-size:9px;letter-spacing:0;color:#8c9cad;font-weight:400;margin-top:5px}
.design-bar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff0c;gap:8px;color:#8795a6;font-size:9px}.design-bar>div{display:flex;gap:4px}.design-bar button{color:#94a4b8;background:transparent;border:1px solid transparent;border-radius:4px;min-width:75px;height:29px;font-size:10px}.design-bar button[aria-pressed=true]{color:#edd3a0;background:#dfb97315;border-color:#d6bb7a50}.design-bar>button{min-width:58px;color:#8d9eb2}.design-bar>span{min-width:90px}.design-bar button:hover{background:#ffffff0b}#notice{position:absolute;top:62px;left:50%;transform:translateX(-50%);max-width:80%;background:#071322ed;border:1px solid #c8a96d55;padding:7px 12px;font-size:11px;color:#e8cf9c;border-radius:6px;z-index:4;margin:0;pointer-events:none}#notice:empty{display:none}
/* B: mode cards lead. Strong silhouettes, directional lines and saturated accents. */
[data-theme=arena]{--accent:#71efff;--line:#7891ed38;background:#0e1743}.arena .unused{display:none}[data-theme=arena] .backdrop{background-image:linear-gradient(#071440b8,#101642eb),url('/home-design/assets/arena.png');background-position:center;background-size:cover}[data-theme=arena] .ambient{background:radial-gradient(ellipse at 25% 0,#294df34a,transparent 65%)}[data-theme=arena] .wordmark{font-style:italic;font-size:24px}[data-theme=arena] .wordmark small{color:#93aeff}[data-theme=arena] .topbar{border-bottom:1px solid #8ba1f52b}[data-theme=arena] .icon-button{border-radius:10px}[data-theme=arena] #modes{display:flex;align-items:stretch;gap:12px;padding:14px 0}.arena-mode{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;overflow:hidden;min-width:0;color:white;isolation:isolate;border-radius:9px;text-align:left;padding:18px 19px;border:1px solid #91b9ff65;box-shadow:0 12px 25px #02082855;flex:1;background:#304bba}.arena-mode:after{content:"";position:absolute;right:-25px;top:-40%;width:50px;height:180%;background:#ffffff12;transform:rotate(28deg);z-index:-1}.arena-mode .card-top{font-size:9px;letter-spacing:2px;opacity:.8}.arena-mode h2{font-style:italic;font-size:25px;letter-spacing:1px;margin:5px 0}.arena-mode p{font-size:10px;color:#d8e5ff;margin:0;line-height:1.5}.arena-mode .card-go{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:650;width:100%;height:39px;border-top:1px solid #ffffff30;padding-top:5px}.arena-mode .card-go span{font-size:22px}.arena-mode.primary-arena{flex:1.48;background:#2247cb url('/home-design/assets/arena.png') center/cover}.primary-arena:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#031754d9,transparent 44%,#081a5cbb);z-index:-1}.arena-mode.challenge-arena{background:linear-gradient(140deg,#325cca,#27358f)}.arena-mode.snake-arena{background:linear-gradient(140deg,#df745e,#b44a55);border-color:#ffc6a777}.arena-art{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%) rotate(-12deg);width:90px;height:90px;color:#ffffff66;z-index:-1}.arena-art svg{width:100%;height:100%;stroke-width:1}.arena-mode:hover{filter:brightness(1.08)}.arena-resume{position:absolute;bottom:19px;left:12px;background:#09183bea;color:#b5fbff;padding:7px 12px;border:1px solid #60bfff77;border-radius:5px;font-size:10px;z-index:2}[data-theme=arena] .utility-nav svg{color:#9bcaff}[data-theme=arena] .design-bar button[aria-pressed=true]{color:#b4f4ff;background:#3470de40;border-color:#6fb0ff66}
/* C: the quiet, tactile daylight club. Art and a light command panel share the room. */
[data-theme=daylight]{--accent:#436857;--ink:#23382f;--muted:#798478;--line:#4d645328;color-scheme:light;background:#f0e7d7}[data-theme=daylight] .backdrop{background-image:url('/home-design/assets/daylight.png');background-position:center 58%}[data-theme=daylight] .ambient{background:linear-gradient(180deg,#f4ecddce,transparent 35%,#f5eedb22 60%,#eee7d8fa 100%)}[data-theme=daylight] .avatar{box-shadow:0 2px 8px #6e503e33}[data-theme=daylight] .wordmark{font-family:"Noto Serif SC","Songti SC","STSong",serif;font-size:25px;font-weight:700;letter-spacing:4px}[data-theme=daylight] .wordmark small{font-family:system-ui;font-size:7px;letter-spacing:5px}[data-theme=daylight] .icon-button{color:#496757;background:#faf5ec88;border-color:#8f9e843b}[data-theme=daylight] #modes{grid-template-columns:1fr 1fr;gap:24px}.daylight-copy{align-self:start;padding:20px 0 0 6px}.daylight-copy .overline{font-size:9px;letter-spacing:4px;color:#58735e}.daylight-copy h1{font-family:"Songti SC","STSong",serif;font-size:33px;letter-spacing:5px;font-weight:500;line-height:1.2;margin:8px 0;color:#304b3c}.daylight-copy p{font-size:10px;color:#6c7969;letter-spacing:2px;margin:0}.daylight-panel{background:#f9f6edc9;border:1px solid #ffffffc9;border-radius:17px;padding:17px;align-self:center;box-shadow:0 10px 35px #7461431c;backdrop-filter:blur(14px)}.daylight-panel .intro{font-size:9px;letter-spacing:3px;color:#74836e}.daylight-panel h2{font-size:23px;letter-spacing:2px;margin:7px 0 4px;font-weight:650}.daylight-panel p{font-size:10px;color:#8c9182;margin:0 0 12px}.daylight-panel .start-button{background:#355b49;color:#fff8e8;border-radius:10px;box-shadow:0 4px 8px #1c432c20;font-size:16px;letter-spacing:2px;width:100%;height:46px}.daylight-panel .minor-modes{margin-top:10px;gap:8px}.daylight-panel .minor-modes button{background:#ffffff83;border:1px solid #b5c0aa66;border-radius:9px;color:#365342;height:53px}.daylight-panel .minor-modes svg{color:#6f8771}.daylight-panel .minor-modes small{color:#7d8b79}.daylight-panel .resume-button span{color:#70816c}[data-theme=daylight] .utility-nav button{color:#3a5141}[data-theme=daylight] .utility-nav small{color:#89907e}[data-theme=daylight] .design-bar{color:#87907f;border-color:#5d755c17}[data-theme=daylight] .design-bar button{color:#7d8a77}[data-theme=daylight] .design-bar button[aria-pressed=true]{background:#4d715215;color:#355b49;border-color:#56785a55}[data-theme=daylight] #notice{background:#fff9edee;color:#42644f;border-color:#9fbc9b77}
#design-dialog{position:fixed;inset:0;z-index:10;background:#030b18b8;display:grid;place-items:center;padding:18px;backdrop-filter:blur(8px)}.design-sheet{position:relative;max-width:540px;max-height:100%;overflow:auto;background:#122031;border:1px solid #d2c29d44;padding:25px 28px;border-radius:16px;box-shadow:0 25px 80px #0008;color:#eff2f7}.design-sheet .overline{color:#ddbe82;font-size:10px;letter-spacing:3px}.design-sheet h2{font-size:26px;margin:10px 0}.design-sheet p{font-size:13px;line-height:1.8;color:#aab7c8}.design-sheet .principle{display:flex;align-items:baseline;gap:12px;margin:10px 0;font-size:12px;color:#c8d4e3}.principle b{color:#ddbe82;font-size:10px;letter-spacing:2px}#close-info{position:absolute;right:10px;top:8px;color:#c8d4e3;background:transparent;font-size:28px;width:44px;height:44px}.design-sheet .prototype-note{font-size:10px;border-top:1px solid #ffffff18;padding-top:12px}
@media(max-width:740px){#lobby{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));grid-template-rows:54px minmax(0,1fr) 59px 34px}.wordmark{font-size:20px;letter-spacing:2px}.mark{font-size:23px}.wordmark small{font-size:7px;letter-spacing:4px}.player{min-width:110px;gap:7px}.player b{font-size:11px}.player small{font-size:8px;letter-spacing:0}.avatar{width:32px;height:32px;font-size:15px}.top-tools{gap:4px}.icon-button{width:40px;height:40px}.icon-button svg{width:21px;height:21px}#modes{gap:18px;grid-template-columns:1fr 1.08fr}.scene-copy{padding-top:24px}.scene-copy h1{font-size:25px;letter-spacing:5px}.scene-copy p{font-size:9px;letter-spacing:1px}.scene-copy .serial{font-size:8px;margin-top:8px}.mode-panel{padding:13px 14px;gap:9px}.primary-mode h2{font-size:23px}.primary-mode p{font-size:9px}.mode-emblem{width:36px;height:36px}.start-button{height:47px;font-size:15px}.minor-modes button{height:50px;gap:7px}.minor-modes b{font-size:12px}.minor-modes small{font-size:8px}.minor-modes svg{width:21px;height:21px}.utility-nav{gap:5px}.utility-nav button{gap:8px;height:48px}.utility-nav span{font-size:12px}.utility-nav small{font-size:8px;letter-spacing:0}.utility-nav svg{width:22px;height:22px}.design-bar>span{min-width:70px;font-size:8px}.design-bar button{min-width:68px;font-size:9px}.design-bar>button{min-width:50px;font-size:9px}#notice{top:54px;font-size:10px}[data-theme=arena] #modes{padding:12px 0;gap:8px}.arena-mode{padding:14px 13px}.arena-mode h2{font-size:21px}.arena-mode p{font-size:9px}.arena-mode .card-top{font-size:8px;letter-spacing:1px}.arena-mode .card-go{font-size:11px}.arena-art{width:72px;height:72px}[data-theme=daylight] #modes{gap:12px;grid-template-columns:1fr 1.07fr}[data-theme=daylight] .wordmark{font-size:22px}.daylight-copy h1{font-size:27px;letter-spacing:4px}.daylight-copy p{font-size:9px;letter-spacing:1px}.daylight-panel{padding:13px;border-radius:14px}.daylight-panel h2{font-size:21px}.daylight-panel p{font-size:9px;margin-bottom:10px}.daylight-panel .minor-modes{margin-top:8px}.daylight-panel .minor-modes button{height:48px}.daylight-panel .start-button{font-size:14px}}
@media(max-height:345px) and (orientation:landscape){#lobby{grid-template-rows:48px minmax(0,1fr) 48px 32px}.scene-copy h1,.daylight-copy h1{font-size:24px}.mode-panel{padding:10px 14px;gap:7px}.section-label,.scene-copy .serial,.daylight-panel .intro{display:none}.start-button{height:44px}.minor-modes button{height:44px}.utility-nav small{display:none}.daylight-panel{padding:11px}.daylight-panel h2{margin-top:0}.daylight-panel .minor-modes button{height:44px}.arena-mode{padding:10px 12px}.arena-mode h2{font-size:21px}.arena-mode .card-top{display:none}.resume-button{min-height:22px;font-size:10px;padding:0}.daylight-copy{padding-top:10px}}
@media(orientation:portrait){#lobby{grid-template-rows:68px minmax(0,1fr) 80px 48px;padding-left:14px;padding-right:14px}.player{display:none}.wordmark{position:static;transform:none}.topbar{gap:0}.backdrop{background-position:30% 35%}.ambient{background:linear-gradient(#04101b99,transparent,#061322e8)}#modes,[data-theme=daylight] #modes{grid-template-columns:1fr;align-content:end;padding-bottom:20px;gap:20px}.scene-copy,.daylight-copy{align-self:start}.mode-panel{max-width:none}.utility-nav{gap:0}.utility-nav button{flex-direction:column;text-align:center;gap:5px;height:64px}.utility-nav small{display:none}.utility-nav span{font-size:11px}.design-bar>span{display:none}.design-bar{justify-content:center}.design-bar button{min-width:66px}.design-bar>button{min-width:53px}[data-theme=arena] #modes{flex-direction:column;padding:12px 0}.arena-mode{min-height:110px;padding:12px 17px}.arena-mode .card-go{width:80px;position:absolute;right:15px;bottom:12px}.arena-art{left:65%;width:60px;height:60px}.arena-mode.primary-arena{background-position:center 54%;flex:1.6}.daylight-copy{padding-top:10px}[data-theme=daylight] .backdrop{background-position:30% 28%}}
@media(prefers-reduced-motion:no-preference){button{transition:background .16s,filter .16s,transform .12s}.mode-panel,.daylight-panel,.arena-mode{animation:reveal .35s ease-out both}.arena-mode:nth-child(2){animation-delay:.045s}.arena-mode:nth-child(3){animation-delay:.09s}@keyframes reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}}
/* Keep the art below the headline and readable at phone size. */
#lobby[data-theme=club] .backdrop{background-size:auto calc(100% - 76px);background-position:left top 68px}
#lobby[data-theme=daylight]{--accent:#436857;--ink:#23382f;--muted:#798478;--line:#4d645328}
#lobby[data-theme=arena]{--accent:#71efff;--line:#7891ed38}
#lobby[data-theme=daylight] .backdrop{background-color:#eee5d6;background-size:auto calc(100% - 84px);background-position:left top 76px}
.scene-copy,.daylight-copy{padding-top:4px}
.scene-copy h1,.daylight-copy h1{font-size:28px;letter-spacing:3px;margin:6px 0}
.scene-copy .overline,.daylight-copy .overline{font-size:8px;letter-spacing:2.5px}
.scene-copy .serial{display:none}
@media(max-width:740px){.scene-copy h1,.daylight-copy h1{font-size:24px;letter-spacing:2px}.icon-button{width:44px;height:44px}}
@media(orientation:portrait){#lobby:after{content:'横屏，进入你的球房';position:absolute;top:80px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:9px 14px;background:#122031e8;border:1px solid #d2bd8c66;border-radius:8px;font-size:12px;color:#f1d39a}.scene-copy,.daylight-copy{padding-top:0}}
#lobby[data-theme=club] .backdrop,#lobby[data-theme=daylight] .backdrop{mask-image:linear-gradient(to bottom,transparent 45px,#000 125px,#000 65%,transparent 100%)}
#modes>.resume-button{position:absolute;left:8px;bottom:8px;min-height:44px;padding:8px 13px;max-width:45%;border:1px solid #c8ac7944;border-radius:7px;background:#0c192ae8;box-shadow:0 4px 15px #0003;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme=daylight] #modes>.resume-button{background:#fbf8efe8;border-color:#6b886f44;box-shadow:0 4px 15px #68564015}
[data-theme=daylight] #modes>.resume-button span{color:#687b64}
.arena-resume{bottom:59px;min-height:44px;max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Selected production direction; comparison is an explicit review-only URL. */
body:not(.design-comparison) #lobby{grid-template-rows:62px minmax(0,1fr) 64px}
body:not(.design-comparison) .design-bar{display:none}
@media(max-width:740px){body:not(.design-comparison) #lobby{grid-template-rows:54px minmax(0,1fr) 59px}}
@media(max-height:345px) and (orientation:landscape){body:not(.design-comparison) #lobby{grid-template-rows:48px minmax(0,1fr) 48px}}
@media(orientation:portrait){body:not(.design-comparison) #lobby{grid-template-rows:68px minmax(0,1fr) 80px}}
/* A, restructured home (2026-11): 练走位 leads with a gold edge; 打一局 and 专项课程 beside it; resume and settings top right. */
#lobby[data-theme=club] .player{display:none}
#lobby[data-theme=club] .wordmark{position:static;transform:none;font-size:19px;letter-spacing:2px}
#lobby[data-theme=club] .wordmark small{text-align:left}
#lobby[data-theme=club] .top-tools{align-items:center;min-width:0;gap:8px}
#resume-slot{display:contents}
#lobby[data-theme=club] .resume-button{height:44px;max-width:min(46vw,360px);padding:0 14px;display:flex;align-items:center;gap:6px;border-radius:10px;background:#20354ae8;border:1px solid var(--accent);color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden}
#lobby[data-theme=club] .resume-button span{margin:0;color:var(--ink);font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis}
#lobby[data-theme=club] .icon-button{border-radius:10px;background:#132335e8;border-color:#35495d}
#lobby[data-theme=club] #modes{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:'p g' 'p c';gap:8px;align-items:stretch;padding:2px 0 8px}
.position-card,.play-card,.course-card{min-width:0;min-height:0;box-sizing:border-box;border-radius:16px;background:#132335eb;border:1px solid #35495d;color:var(--ink);text-align:left}
.position-card{grid-area:p;padding:14px;display:flex;flex-direction:column;gap:8px;border-color:var(--accent)}
.card-head{display:flex;align-items:center;gap:10px;min-width:0}
.card-head h2{margin:0;font-size:22px;font-weight:700;letter-spacing:2px;white-space:nowrap}
.tag{padding:3px 8px;border-radius:9px;background:#302119;color:var(--accent);font-size:12px;white-space:nowrap}
.position-card p,.play-card p{margin:0;font-size:13px;line-height:19px;color:var(--muted)}
.games{margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.games button{height:56px;min-width:0;padding:0 10px;display:flex;align-items:center;gap:8px;border-radius:12px;background:#20354a;border:1px solid #35495d;color:var(--ink);text-align:left}
.games button>span:last-child{min-width:0}
.games b{display:block;font-size:15px;font-weight:600}
.games small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ball{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;box-sizing:border-box}
.ball-9{background:linear-gradient(#f4efe2 0 24%,#f2b632 24% 76%,#f4efe2 76%);color:#111}
.ball-8{background:#16181b;border:1px solid #4d6377;color:#fff}
.snake-dots{display:flex;gap:2px;flex:0 0 auto}
.snake-dots i{width:8px;height:8px;border-radius:50%;background:#f2b632}
.snake-dots i:nth-child(2){background:#2a56c6}
.snake-dots i:nth-child(3){background:#d23b33}
.play-card{grid-area:g;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.play-card h2{margin:0;font-size:18px;font-weight:700;letter-spacing:1px}
.play-card .start-button{margin-top:auto;height:44px;font-size:15px;border-radius:10px}
/* 打一局: one player or two, side by side. */
.play-card .play-buttons{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}.play-card .play-buttons .start-button{margin-top:0;letter-spacing:1px;padding:0 6px}.play-card .start-button.second{background:#20354a;color:var(--ink);box-shadow:inset 0 0 0 1px #e5ba7799}
.course-card{grid-area:c;padding:12px 14px;display:flex;align-items:center;gap:10px}
.course-card svg{flex:0 0 auto;color:var(--accent)}
.course-card>span:nth-child(2){flex:1 1 auto;min-width:0}
.course-card b{display:block;font-size:16px;font-weight:700}
.course-card small{display:block;margin-top:4px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-card .chev{color:var(--accent);font-size:24px}
#lobby[data-theme=club] [data-entry]:disabled{opacity:.45}
#lobby[data-theme=club] .utility-nav button{border-right:0;border-radius:12px;background:#0e1b2bd9;border:1px solid #2a3c4e;margin:6px 0}
#lobby[data-theme=club] .utility-nav{gap:8px;border-top:0}
@media(max-width:740px){#lobby[data-theme=club] .resume-button{max-width:40vw;font-size:12px}
#lobby[data-theme=club] #modes{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.ball{width:22px;height:22px;font-size:11px}
.snake-dots i{width:6px;height:6px}
.games button{height:50px;padding:0 8px;gap:6px}
.games b{font-size:14px}
.games small{font-size:11px}
.position-card p{font-size:12px;line-height:17px}
}
@media(max-height:345px) and (orientation:landscape){.position-card{padding:10px 12px;gap:6px}
.position-card p{font-size:12px;line-height:17px}
.games button{height:46px}
.play-card{padding:10px 12px}
.play-card p{display:none}
.course-card{padding:10px 12px}
#lobby[data-theme=club] .utility-nav button{margin:2px 0;height:44px}
}
@media(min-height:520px) and (orientation:landscape){#lobby[data-theme=club] #modes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:'p p' 'g c'}
.card-head h2{font-size:28px}
.position-card p{font-size:14px;line-height:21px}
.games button{height:96px;padding:0 16px;gap:12px}
.games b{font-size:18px}
.games small{font-size:13px}
.ball{width:34px;height:34px;font-size:15px}
.play-card h2{font-size:22px}
.course-card b{font-size:20px}
}