:root{color-scheme:dark;--bg:#101e1d;--ink:#f0eddd;--mute:#b0bbad;--gold:#d7bb83;--line:#40524a;--serif:"Songti TC","Noto Serif TC","PMingLiU",Georgia,serif;--sans:"PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font:15px/1.65 var(--sans);background:radial-gradient(ellipse at 65% 17%,#1c3530 0,transparent 59%),var(--bg);min-height:100vh}button,input,select{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ecd291;outline-offset:4px}button{border:0}a{color:inherit}.top{border-bottom:1px solid #364940}.top-in,main,footer{width:min(1160px,calc(100% - 96px));margin:auto}.top-in{height:74px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font:700 22px var(--serif);letter-spacing:.16em}.brand-mark{color:var(--gold);font:30px/1 Georgia;display:grid;place-items:center;width:37px;height:37px;border:1px solid #9d946c;border-radius:50%;box-shadow:inset 0 0 0 3px #192b25,inset 0 0 0 4px #69694e}.top nav{display:flex;align-items:center;gap:20px}.nav-link,.account,.plain{background:transparent;color:var(--mute);font-size:14px}.account{color:var(--gold)}.nav-rule{height:14px;width:1px;background:var(--line)}main{min-height:calc(100vh - 145px)}footer{margin-top:48px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;color:#9da99d;padding:18px 0;font-size:12px;letter-spacing:.09em}.footer-rule{width:24px;height:1px;background:#6a795f}.footer-mark{color:var(--gold);font-size:18px}
h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif)}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:410px;gap:20px;position:relative}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.25em;display:flex;align-items:center;gap:10px}.eyebrow::before{content:"";height:1px;width:32px;background:var(--gold)}.hero h1{font-size:clamp(52px,6.3vw,92px);line-height:1.2;letter-spacing:.045em;font-weight:600;margin:18px 0 14px}.lede{font-size:16px;line-height:1.9;color:#bdc8bb;letter-spacing:.035em}.facts{display:flex;gap:23px;align-items:center;margin-top:27px;color:var(--mute);font-size:13px}.facts span+span{border-left:1px solid var(--line);padding-left:22px}.facts b{font:26px Georgia;color:var(--gold);margin-right:6px}.hero-art{display:grid;place-items:center;position:relative;background:radial-gradient(ellipse at 50% 52%,#3c524025,transparent 70%)}.hero-art canvas{width:min(100%,402px);aspect-ratio:1}.section-heading{margin-bottom:17px;display:flex;align-items:center;gap:20px}.section-heading h2{font-size:19px;letter-spacing:.1em;font-weight:500}.section-heading::after{content:"";height:1px;background:var(--line);flex:1}.modes{display:grid;grid-template-columns:1fr 1fr;gap:18px}.mode{display:flex;align-items:center;gap:20px;padding:27px 26px;background:linear-gradient(115deg,#283f35,#1e302a);border:1px solid #716f51;text-align:left;min-height:128px;border-radius:5px;transition:background .2s,transform .2s}.mode.multi{background:linear-gradient(115deg,#23332e,#1b2b27);border-color:#506257}.mode:hover,.mode:focus-visible{transform:translateY(-2px);border-color:var(--gold)}.mode .copy{flex:1}.mode strong{display:block;font:600 25px var(--serif);letter-spacing:.1em}.mode small{display:block;color:#b8c4b8;font-size:13px;margin-top:8px}.arrow{font:23px Georgia;color:var(--gold)}.mode-icon{position:relative;display:block;width:54px;height:55px;border:1px solid #586952;border-radius:4px;background:#162b24;flex:none}.pawn{position:absolute;width:13px;height:13px;background:var(--gold);border-radius:50%;left:20px;top:11px}.pawn::after{content:"";position:absolute;top:15px;left:-6px;width:25px;height:16px;background:var(--gold);border-radius:12px 12px 3px 3px}.pair-icon .pawn:first-child{transform:translate(-7px,2px) scale(.79);z-index:1}.pair-icon .pawn:nth-child(2){transform:translate(7px,-1px) scale(.79);opacity:.60}
dialog{background:#1c302a;border:1px solid #78816a;border-radius:7px;color:var(--ink);padding:0;width:min(500px,calc(100% - 32px));max-height:87vh;box-shadow:0 24px 100px #0007}dialog::backdrop{background:#06100fbe;backdrop-filter:blur(4px)}.dialog-inner{padding:32px;position:relative}.close{position:absolute;right:13px;top:10px;width:35px;height:35px;background:transparent;color:var(--mute);font-size:25px}.dialog-inner h2,.panel h2{font:600 27px var(--serif);margin-bottom:13px;letter-spacing:.06em}.dialog-inner p,.sub{color:var(--mute)}.dialog-inner p+p{margin-top:10px}.dialog-inner ul{padding-left:20px}.dialog-inner li{margin:7px 0}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.primary,.secondary{padding:10px 18px;border-radius:4px;min-height:43px;font-weight:600}.primary{background:var(--gold);color:#19251e}.primary:hover{background:#edd39e}.secondary{border:1px solid #586b5b;background:#23382e;color:var(--ink)}.secondary:hover{border-color:#bdab7d}.form-line{display:flex;gap:10px;align-items:stretch;margin-top:10px}.form-line input{min-width:0;flex:1;background:#0e201a;border:1px solid #647563;border-radius:4px;padding:10px;color:var(--ink);text-transform:uppercase;letter-spacing:.16em}.hr{height:1px;background:var(--line);margin:24px 0}.hint{color:var(--mute);font-size:13px}.room-top{display:flex;justify-content:space-between;align-items:center;margin:26px 0;gap:16px}.room-top h1{font-size:29px;letter-spacing:.08em}.room-meta{font-size:13px;color:var(--gold);letter-spacing:.1em}.room-top .plain{text-decoration:underline;text-underline-offset:4px}.panel{background:#1b2e27;border:1px solid var(--line);border-radius:5px;padding:24px}.lobby{max-width:690px;margin:50px auto}.roomcode{font:600 39px Georgia;letter-spacing:.17em;color:var(--gold)}.people{padding:0;list-style:none;margin:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.people li{border-bottom:1px solid var(--line);padding:9px 0}.people b{font:16px Georgia;color:var(--gold);margin-right:10px}.muted{color:var(--mute)}.game-layout{display:grid;grid-template-columns:minmax(340px,1.2fr) minmax(310px,1fr);gap:20px}.board-panel{background:radial-gradient(ellipse at center,#30483a,#182c25 70%);padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center}.board-panel .hint{text-align:center}.board{width:100%;max-width:470px;aspect-ratio:1;position:relative;isolation:isolate}.board canvas{position:absolute;inset:15%;width:70%;height:70%}.seat{position:absolute;transform:translate(-50%,-50%);text-align:center;max-width:25%;font-size:clamp(11px,1.2vw,14px);line-height:1.35;color:#c3d1c5;background:#1c3028;border:1px solid #425849;border-radius:5px;padding:4px 7px}.seat b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat small{color:#a6b6a7;font-size:10px;white-space:nowrap}.seat.now{border-color:var(--gold);color:#efd8a7;box-shadow:0 0 0 2px #d7bb831a}.seat.me small{color:var(--gold)}.control{min-height:315px}.turn-line{font-size:12px;color:var(--gold);letter-spacing:.12em;margin-bottom:8px}.wallet{display:flex;gap:24px;margin:14px 0;color:var(--mute);font-size:13px}.wallet b{font:23px Georgia;color:var(--gold)}.moves{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}.moves button,.pair-choices button{background:#283d31;border:1px solid #55674e;border-radius:4px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;text-align:left}.moves small{color:#c3b085;margin-left:4px}.moves button:hover,.pair-choices button:hover{border-color:var(--gold)}.pair-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}.pair-choices button{justify-content:center;color:var(--gold)}.log{margin-top:18px}.log h2{font-size:20px}.log ol{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto}.log li{padding:7px 0;border-top:1px solid #344a3c;font-size:14px}.log li span{color:var(--gold);margin-right:10px;font-size:12px}.shot-list{display:grid;grid-template-columns:1fr 1fr;list-style:none;padding:0;gap:6px}.shot-list li{font-size:13px;padding:5px;border-bottom:1px solid var(--line)}.shot-list .loss{color:#eea993}.shot-list .win{color:#ccdbb6}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#efe3be;color:#13231b;border-radius:4px;padding:9px 18px;display:none;z-index:5;max-width:90vw}.error{color:#f3b5a4;margin-top:10px}.draw-num{font:64px Georgia;color:var(--gold);line-height:1.2}.google-button{margin-top:20px}.choice-label{color:var(--gold);font-size:14px}
@media(min-width:1450px){.hero{min-height:480px}.hero-art canvas{width:448px}}
@media(max-width:800px){.top-in,main,footer{width:calc(100% - 40px)}.hero{min-height:332px;gap:0}.hero h1{font-size:55px}.lede{font-size:14px}.facts{gap:10px}.facts span+span{padding-left:10px}.mode{padding:18px;gap:12px}.mode strong{font-size:22px}.game-layout{grid-template-columns:1fr 1fr;gap:10px}.panel{padding:16px}.moves{grid-template-columns:1fr}.board-panel{padding:6px}}
@media(max-width:620px){.top-in{height:60px}.brand{font-size:18px}.top nav{gap:10px}.brand-mark{width:31px;height:31px;font-size:24px}.hero{grid-template-columns:1fr;gap:0;padding-top:28px}.hero h1{font-size:52px;margin:10px 0}.hero-art canvas{width:min(65vw,262px)}.hero-art{margin:0 0 7px}.facts{margin-top:13px}.facts b{font-size:22px}.modes{grid-template-columns:1fr;gap:10px}.mode{min-height:88px;padding:15px}.mode-icon{transform:scale(.85)}.section-heading{margin-bottom:10px}.game-layout{grid-template-columns:1fr}.board{max-width:370px}.board-panel .hint{margin-bottom:7px}.room-top{margin:15px 0}.room-top h1{font-size:23px}.room-meta{font-size:11px}.control{min-height:0}.moves{grid-template-columns:1fr 1fr}.panel h2{font-size:23px}.seat{font-size:12px}.dialog-inner{padding:25px}.lobby{margin:24px auto}.people{grid-template-columns:1fr}.top-in,main,footer{width:calc(100% - 30px)}footer{margin-top:30px}}