:root{color-scheme:light;--green:#163f36;--paper:#fbf5e9;--ink:#28352f;--line:#dfd5c3;--red:#b8422d;font-family:system-ui,"Noto Sans TC",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}main{max-width:960px;margin:auto;padding:28px 24px 60px}header{margin-bottom:24px}h1{font-size:2.4rem;margin:4px 0 12px}h2{font-size:1.25rem;margin:0 0 20px}p{line-height:1.65}a{color:var(--green)}.back{display:inline-flex;align-items:center;min-height:44px}.eyebrow{letter-spacing:.12em;font-size:.8rem;margin:20px 0 0}.notice{display:inline-block;color:#6a4b24;background:#efe1c4;border-radius:8px;padding:8px 12px;margin:0;font-size:.9rem}
.forms{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{border:1px solid var(--line);background:#fffcf6;border-radius:20px;padding:24px;min-width:0}form{display:grid;gap:17px}label{display:grid;gap:7px;font-weight:600;font-size:.95rem}input{width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid #bdb9ab;background:white;color:var(--ink);border-radius:8px;font:inherit;font-weight:400}.check{display:flex;align-items:center;gap:10px;min-height:44px}.check input{width:22px;height:22px;min-height:22px;accent-color:var(--green)}button{border:1px solid transparent;background:var(--green);color:white;border-radius:9px;min-height:46px;padding:11px 16px;font:inherit;font-weight:650;cursor:pointer}button:hover{filter:brightness(.93)}button:disabled{opacity:.5;cursor:default}.secondary{background:transparent;color:var(--green);border-color:#9aaca1}.quiet{background:transparent;color:var(--green);padding:10px}.danger{color:var(--red)}:focus-visible{outline:3px solid #bf7c29;outline-offset:3px}[hidden]{display:none!important}
#message{margin:0 0 16px;overflow-wrap:anywhere}#message:empty{display:none}#message.error{color:#a72d20;border-left:3px solid;padding:8px 12px;background:#fff0ea}.board{margin-top:32px}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.heading h2{margin:0}.room-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.room-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:16px;background:#fffcf6;min-width:0}.room-card h3{font-size:1.05rem;margin:0 0 6px;overflow-wrap:anywhere}.room-card p{font-size:.85rem;margin:0;color:#62675e}.room-card button{flex-shrink:0}.badge{font-size:.82rem;border:1px solid var(--line);border-radius:20px;padding:5px 10px}.code-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.code-line strong{letter-spacing:.2em;font-size:1.5rem}.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}.seat{border-radius:12px;border:1px solid #cfd9cc;background:#f0f4ea;padding:20px 12px;text-align:center;min-width:0}.seat.empty{background:transparent;border-style:dashed;color:#787e71}.seat b{display:block;overflow-wrap:anywhere;font-size:1.1rem}.seat p{margin:7px 0 0;font-size:.85rem}.seat .seat-mark{display:block;font-size:1.5rem;margin-bottom:10px;color:var(--green)}.small{font-size:.85rem;color:#6e7167}.actions{display:flex;gap:12px;flex-wrap:wrap}#host-tools{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.heading h2{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){main{padding:16px 16px 40px}h1{font-size:2rem}.forms,.room-list{grid-template-columns:1fr}.panel{padding:20px}.seats{grid-template-columns:1fr 1fr;gap:10px}.seat{padding:16px 10px}.notice{font-size:.8rem}.code-line{gap:8px}}

#public-rooms{margin:0 0 24px;padding:20px;border:2px solid #b99d56;border-radius:16px;background:#fffdf7}.lobby-nav{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:20px}.lobby-nav a{display:inline-flex;align-items:center;min-height:44px}#custom-room,#friend-room,#account-panel{scroll-margin-top:16px}

#board-join{width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #b99d56;border-radius:16px;padding:24px;background:#fffcf6;color:var(--ink)}#board-join::backdrop{background:#0007}#board-join h2{overflow-wrap:anywhere}#board-join-error:empty{display:none}#board-join-error{color:#a72d20}

/* 與牌桌共用深綠、暖金的入口視覺；表單仍維持淺底方便閱讀。 */
main>header{padding:26px 30px;border:1px solid #ab8d4b;border-radius:18px;color:#fff2d2;background:radial-gradient(circle at 85% 10%,#245646 0,#0b3329 46%,#08251f 100%);box-shadow:0 12px 24px #142e251c}
main>header .back{color:#f6e2a6;text-decoration:none;font-weight:700}
main>header .back:hover{text-decoration:underline}
main>header .eyebrow{color:#e9c877;font-weight:800}
main>header h1{color:#fff0be;font-family:"BiauKai","DFKai-SB","KaiTi","Noto Serif TC",serif}
main>header .notice{color:#193c31;background:#f1d79e}
@media(max-width:600px){main>header{padding:20px 18px}}
#host-tools .room-speed-setting{display:grid;gap:4px;min-width:190px;font-size:.9rem}#room-game-speed{min-height:44px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#fff;color:#193c31;font:inherit}