:root{font-family:Segoe UI,Arial,sans-serif;color:#e6eff1;background:#101f29;--line:#3b5260;--gold:#edc787;--mint:#b7e0ce}*{box-sizing:border-box}body{margin:0}header,main{max-width:1100px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--line)}a{color:inherit}header a{text-decoration:none}.brand{font:600 1.1rem Georgia,serif;letter-spacing:.1em;color:var(--gold)}h1{font:500 clamp(2rem,5vw,3.8rem) Georgia,serif;margin:12px 0}h2{font:500 1.5rem Georgia,serif}p{line-height:1.6}.muted{color:#a6bfca}.eyebrow{color:var(--gold);font-size:.75rem;letter-spacing:.15em}button,input,select{font:inherit;min-height:44px;border-radius:9px;border:1px solid #627780;padding:10px 13px;color:inherit;background:#1c3442}button{cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--gold)}button:disabled{opacity:.45;cursor:default}.primary{background:var(--mint);color:#152e2b;border-color:var(--mint);font-weight:600}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffe1a0;outline-offset:3px}input{min-width:0}input[type=checkbox]{min-height:20px;width:20px;vertical-align:middle}label{display:block;margin:14px 0}.panel{background:#172e3c;border:1px solid var(--line);border-radius:15px;padding:22px;margin:20px 0}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hub-layout{display:grid;grid-template-columns:1fr 310px;gap:24px}.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.game-choice{text-align:left;min-height:90px}.game-choice small{display:block;margin-top:8px;color:#a8c4c6}.game-choice.active{background:#365548;border-color:var(--gold)}.room-list{display:grid;gap:10px}.room-option{text-align:left}.seats{display:grid;grid-template-columns:repeat(var(--seats,2),1fr);gap:10px;margin:20px 0}.seat{border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0;background:#172e3c;overflow-wrap:anywhere}.seat.current{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.seat.you{background:#284539}.seat strong,.seat small{display:block}.seat small{color:#a9c5ca;margin-top:6px}.seat .avatar{font-size:1.6rem;float:right;color:var(--gold)}.code{font:600 1.4rem monospace;letter-spacing:.15em;color:var(--gold)}.room-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.room-heading h1{font-size:2.4rem}.clock{font-variant-numeric:tabular-nums;font-weight:600;color:var(--gold)}.status{border-left:3px solid var(--mint);padding:8px 14px;background:#183b3a;margin:14px 0;min-height:45px}.table{background:radial-gradient(ellipse at center,#2e6058,#143c38);border:5px solid #92764e;border-radius:24px;min-height:200px;padding:24px;box-shadow:0 16px 32px #0003}.hand,.tile-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.card,.tile{position:relative;min-width:54px;min-height:76px;padding:8px;border-radius:8px;border:1px solid #c8c5b9;background:#f6f1df;color:#142637;box-shadow:0 3px 0 #0004;font-size:1.15rem;font-weight:600}.card.red{color:#ad2935}.card.selected,.tile.selected{transform:translateY(-9px);outline:3px solid var(--gold)}.card.back{background:repeating-linear-gradient(45deg,#334f75 0 5px,#405f87 5px 10px);color:#f4e4c5}.card.uno-red{background:#b5273c;color:white}.card.uno-yellow{background:#f1ce5c;color:#1e2a35}.card.uno-green{background:#25775a;color:white}.card.uno-blue{background:#23538e;color:white}.card.uno-wild{background:conic-gradient(#ba3349,#2761ac,#31896b,#f1ce5c,#ba3349);color:white;text-shadow:0 1px 3px #000}.tile{min-height:55px;min-width:45px}.meld-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0;padding:10px;border:1px solid #71978870;border-radius:10px}.board-wrap{width:min(100%,560px);margin:20px auto}.board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));border:9px solid #937047;border-radius:6px;background:#d5b482}.square{position:relative;border:0;border-radius:0;min-height:0;padding:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:#152634;background:#eddfc2;font-size:clamp(20px,4.8vw,43px)}.square.dark{background:#886947}.square.target:after{content:'';position:absolute;width:19%;height:19%;border-radius:50%;background:#15946e8c}.square.selected{box-shadow:inset 0 0 0 4px #faad3c}.square.last{box-shadow:inset 0 0 0 3px #e49b4e}.square .white-piece{color:#fff5d5;text-shadow:0 1px 2px #211709,1px 0 1px #211709,-1px 0 1px #211709;font-family:Georgia,serif}.square .black-piece{color:#171b22;text-shadow:0 1px 1px #edcf90;font-family:Georgia,serif}.board.stones .square{background-color:#d5b482;background-image:linear-gradient(90deg,transparent 48%,#77552c 49%,#77552c 51%,transparent 52%),linear-gradient(0deg,transparent 48%,#77552c 49%,#77552c 51%,transparent 52%)}.stone{width:78%;height:78%;border-radius:50%;display:block;box-shadow:1px 2px 2px #0006;pointer-events:none}.stone.side1{background:radial-gradient(circle at 35% 25%,#656c77,#121622 70%)}.stone.side2{background:radial-gradient(circle at 35% 25%,#fff,#d4d1c6 80%)}.stone.dead{opacity:.35}.stone.king:after{content:'♛';font-size:.65em;color:#edc787}.board.reversi .square{background:#28644e;border:1px solid #163c32}.board.connect .square{background:#1c4772;border:2px solid #2b5b8a}.connect .stone.side1{background:#d94c3e}.connect .stone.side2{background:#f4ce60}.board.xiangqi .square{background:#dbbd88;border:1px solid #a78450;font-size:clamp(16px,4vw,30px)}.xiangqi-piece{width:86%;height:86%;border-radius:50%;background:#f4e1b4;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 1px #4a2c21}.xiangqi-piece.red{color:#a82f32}.dice-tray{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:20px}.die{font-size:2.5rem;background:#f6f0df;color:#18222d;min-width:65px;min-height:65px}.die.held{outline:4px solid #f1c75f;transform:translateY(-7px)}.score-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.score-sheet button{text-align:left}.draft-note{border:1px dashed var(--gold);padding:12px;color:#f3dbaf}.log{font-size:.8rem;color:#aac1c9}.result{border-color:var(--gold);background:#2d413b}.error{color:#ffd0b9}#notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90vw;background:#f6dfac;color:#172d32;padding:12px 20px;border-radius:12px;display:none;z-index:20}#notice.show{display:block}.ladders-board{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}.ladder-cell{aspect-ratio:1;border:1px solid #688880;padding:3px;font-size:.7rem}.ladder-cell b{display:block;color:#ffe49b;font-size:1rem}.room-history{display:flex;gap:8px;flex-wrap:wrap}.rules{max-width:70ch}.turn-board-note{text-align:center;color:#b5c7c2;font-size:.85rem}.card.disabled{opacity:.55}@media(max-width:760px){header,main{padding:14px}.hub-layout{display:block}.games{grid-template-columns:repeat(2,1fr)}.panel{padding:16px}.brand{font-size:.8rem}.seats{gap:6px}.seat{padding:8px;font-size:.85rem}.seat .avatar{float:none;font-size:1.1rem}.seat small{font-size:.7rem}.table{padding:13px;border-width:3px}.card{min-width:46px;min-height:66px;font-size:1rem}.hand{gap:6px}.score-sheet{grid-template-columns:repeat(2,1fr)}.board{border-width:5px}.board-wrap{margin:12px auto}.square{font-size:clamp(22px,7vw,43px)}.toolbar button{flex-grow:1}.clock{font-size:.9rem}.room-heading h1{font-size:1.9rem}}@media(prefers-reduced-motion:no-preference){.card,.tile{transition:transform .15s}.stone{animation:appear .18s ease-out}@keyframes appear{from{transform:scale(.8)}to{transform:scale(1)}}}

/* Keep the position and private hand readable while another player moves. */
.square:disabled,.card:disabled,.tile:disabled,.die:disabled{opacity:1;cursor:default}.square .white-piece,.square .black-piece{font-size:1.25em}

.existing-online-game{display:block;text-decoration:none;border:1px solid #b99861;border-radius:9px;padding:10px 13px;background:#2c3c39;color:#f3d59f}.existing-online-game:hover{border-color:#f5d591;background:#365548}.existing-online-game small{font-weight:400}

.room-invite{border:1px solid #6f7f89;border-radius:12px;margin:12px 0;padding:12px;background:#21323d}.room-invite summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}.invite-body{display:flex;gap:24px;align-items:flex-start;padding:14px 0;flex-wrap:wrap}.invite-body canvas{width:180px;height:180px;max-width:100%;image-rendering:pixelated;border:6px solid white;border-radius:6px}.invite-body>div{flex:1;min-width:220px}.invite-body h3{margin:0}.invite-body label{display:grid;gap:5px;margin:14px 0}.invite-body input{width:100%;box-sizing:border-box;color:#eaf0ef;background:#16252f;padding:10px;border:1px solid #85949c;border-radius:7px;min-height:44px}.invite-body .muted{font-size:13px}

.invite-code{display:block;font:700 28px/1.5 ui-monospace,monospace;letter-spacing:.12em}