/* Presentation only. Shared by the center and room; no game-state changes. */
:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#dde3e8;background:#090c0e;--line:#35434a;--muted:#98a9b4;--blue:#43a9d0;--green:#73a779;--panel:#0d1319;--wood:#e6bd7c;--wood-line:#85704e}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(#394148 0.65px,transparent .8px) 0 0/8px 8px;font-size:16px;line-height:1.6}a{color:#aed6e9}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #76c9ed;outline-offset:3px}[hidden]{display:none!important}.edge{position:fixed;top:0;bottom:0;width:66px;overflow:hidden;writing-mode:vertical-rl;white-space:nowrap;font-size:28px;font-weight:800;letter-spacing:3px;color:#42494b;opacity:.65;pointer-events:none;z-index:-0}.edge span{font-size:18px;color:#518951}.edgeLeft{left:12px;transform:rotate(180deg)}.edgeRight{right:12px}.centerPage{position:relative;width:min(1220px,calc(100% - 180px));margin:0 auto;padding:0 0 32px}.centerCard{background:#05080bed;border:1px solid #4d555c;min-height:690px}.hero{position:relative;isolation:isolate;overflow:hidden;min-height:205px;padding:30px 34px;border-bottom:3px double #4d5b65;background:repeating-linear-gradient(0deg,#0004 0 1px,transparent 1px 4px),linear-gradient(115deg,#07121e,#113650 56%,#09131d)}.eyebrow{color:var(--muted);font-size:11px;letter-spacing:2px;font-weight:650;margin:0 0 8px}.centerTitle{position:relative;margin:0;font-size:34px;letter-spacing:3px;text-shadow:0 2px 4px #000}.centerTitle span{font-size:23px;font-weight:500;letter-spacing:1px}.heroCopy{position:relative;text-align:right;margin:32px 0 0;font-size:19px;font-weight:600;letter-spacing:2px}.heroGrid{position:absolute;z-index:-1;inset:-110px -60px -100px 35%;transform:rotate(-16deg);background:repeating-linear-gradient(0deg,transparent 0 62px,#3b63804d 63px 65px),repeating-linear-gradient(90deg,transparent 0 62px,#3b63804d 63px 65px);opacity:.55}.heroGrid span{position:absolute;display:grid;place-items:center;width:82px;height:94px;border:1px solid #6d998a;background:#17342ee0;color:#94b6a1;font-size:44px;clip-path:polygon(50% 0,86% 15%,100% 100%,0 100%,14% 15%)}.heroGrid span:nth-child(1){top:110px;left:40%}.heroGrid span:nth-child(2){top:225px;left:16%}.heroGrid span:nth-child(3){top:260px;left:66%}.centerContent{padding:22px 28px 38px}.intro{margin:0 0 30px;color:#bdc8d0}.sectionTitle,.roomSection h2{margin:0 0 16px;padding:7px 14px;border-left:4px solid var(--blue);background:linear-gradient(90deg,#122331,#0a111800);font-size:19px}.sectionTitle small,.roomSection h2 small{font-size:12px;letter-spacing:2px;color:var(--muted);margin-left:8px}.statusGrid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 20px;margin:0;font-size:14px}.statusGrid dt{color:var(--muted)}.statusGrid dd{margin:0;overflow-wrap:anywhere}.notice{margin:18px 0 0;padding:10px 14px;border-left:2px solid #597482;background:#111b23;font-size:14px}.notice[data-state="ok"]{border-color:var(--green);background:#102019;color:#bfd4c1}.notice[data-state="ng"]{border-color:#c37b65;background:#271a17;color:#e8b5a6}.roomSection{margin-top:30px}.roomList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;color:#c2cbd0;padding:4px 0 12px}.roomButton{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 20px;border:1px solid #3d515c;border-left:3px solid var(--green);background:linear-gradient(115deg,#14242b,#0c141b);color:#ecf2f5;text-decoration:none;overflow-wrap:anywhere;font-weight:600}.roomButton::after{content:'›';font-size:24px;color:var(--green)}.roomButton:hover{border-color:#7aa49a;background:#1b3138}footer{text-align:center;margin-top:22px;border-top:1px solid #2e373d;padding:14px;font-size:12px;color:#a6afb4}footer span{color:#77868f;margin-left:10px}
.roomPage{position:relative;width:min(1430px,calc(100% - 160px));margin:0 auto;padding:12px 0 28px}.roomCard{border:1px solid #48525b;background:#080d12f5;min-height:700px}.roomHeader{display:flex;align-items:center;gap:24px;padding:12px 18px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 4px),linear-gradient(100deg,#142b3c,#0b1219)}.roomHeader .eyebrow{margin:0 0 0 auto}.roomTitle{font-size:21px;margin:0}.backLink{text-decoration:none;white-space:nowrap}.roomLayout{display:grid;grid-template-columns:172px minmax(0,1fr)}.roomSidebar{border-right:1px solid var(--line);padding:18px 12px;background:#0c1218}.sideBrand{font-weight:700;font-size:21px;margin-bottom:28px}.sideBrand span{display:block;font-size:10px;letter-spacing:2px;color:var(--green)}.roomSidebar .sectionTitle{font-size:14px;padding:5px 8px}.roomSidebar .statusGrid{grid-template-columns:1fr;gap:2px;font-size:12px}.roomSidebar .statusGrid dd{margin-bottom:10px;color:#edf1f4}.roomSidebar .notice{font-size:12px;padding:8px}.matchContent{min-width:0;padding:12px}.gameArea{margin:0;position:relative}.gameToolbar{display:flex;justify-content:space-between;align-items:center;padding:0 0 10px;border-bottom:1px solid var(--line);margin-bottom:12px;font-weight:700}.gameToolbar small{font-size:11px;color:var(--muted);letter-spacing:2px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}.actions button,.actions a,.gameToolbar button{display:inline-block;padding:8px 18px;border:1px solid #526573;border-radius:0;background:linear-gradient(#1b2c38,#111c25);color:#e3ebef;text-decoration:none}.actions button:hover,.actions a:hover,.gameToolbar button:not(:disabled):hover{border-color:#83bed0;background:#243d4a}.gameToolbar button:disabled{opacity:.4}.boardLayout{display:grid;grid-template-columns:54px minmax(0,1fr) 54px 210px;gap:8px;align-items:start}.boardFrame{padding:8px;border:1px solid #758582;background:linear-gradient(135deg,#34514e,#1b2c32);box-shadow:inset 0 0 0 3px #101d22}.board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px;background:var(--wood-line);border:2px solid #725b3a;touch-action:manipulation;user-select:none}.square{border:0;border-radius:0;padding:0;aspect-ratio:1;min-width:0;background:var(--wood)}.square:nth-child(even){background:#eac589}.square img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.square.target{background:#b5ca88}.square.selected,.handPiece.selected{background:#f5ae55;box-shadow:inset 0 0 0 3px #a44b16}.flip{transform:rotate(180deg)}.handRail{border:1px solid #3d5151;background:linear-gradient(90deg,#172c2a,#12211f);padding:4px;min-width:0}.railLabel{display:block;color:#aebfb7;font-size:9px;text-align:center;white-space:nowrap;margin:2px 0 5px}.hand{display:flex;flex-direction:column;gap:4px;min-width:0}.handPiece{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;min-width:0;min-height:46px;padding:1px;border:1px solid #536358;background:#d2bf92;color:#241f17;font-size:12px;font-weight:700;border-radius:0}.handPiece img{width:30px;height:30px;object-fit:contain;pointer-events:none}.handPiece span{padding:0 2px}.handPiece:disabled{opacity:.55}.ownHand{align-self:end}.gameInfo{display:grid;gap:9px;min-width:0}.playerBar{min-width:0;padding:13px 12px;border:1px solid #3b4c5a;border-left:3px solid #4887ab;background:linear-gradient(115deg,#162735,#0c151e)}.playerBar.self{border-left-color:var(--green);background:linear-gradient(115deg,#1b2b25,#101a18)}.playerBar>span{display:block;overflow-wrap:anywhere}.playerBar>span:not(.eyebrow){font-weight:700;font-size:17px}.timeLine{display:flex;gap:7px;align-items:baseline;color:#aebbc3;font-size:12px;margin-top:5px}.clock{font-size:34px;line-height:1.3;color:#f0f4f5;font-variant-numeric:tabular-nums}.clock.lowTime{color:#ff6464}.gameMessage{min-height:130px;border:1px solid #405058;background:#101a20;padding:14px 12px;font-size:14px}.gameMessage p{margin:0}.gameMessage p+p:not(:empty){margin-top:12px;color:#efba8b}.promotion{position:absolute;z-index:2;top:64px;left:62px;right:226px;padding:18px;border:2px solid #b8a779;background:#101b24;box-shadow:0 12px 32px #000b}.promotion p{margin:0}.statePanel{padding:24px;border:1px solid #344752;background:linear-gradient(110deg,#11212c,#090f14);margin-bottom:12px;overflow-wrap:anywhere}.statePanel h2{font-size:26px;margin:0 0 12px}.resultPanel{margin-top:16px;border-left:3px solid #79a891}.resultPanel p{margin:8px 0}
@media(min-width:1600px){.boardLayout{grid-template-columns:64px minmax(0,1fr) 64px 240px}.handPiece{min-height:52px}.handPiece img{width:36px;height:36px}}
@media(max-width:1200px){.edge{display:none}.roomPage{width:calc(100% - 24px)}.roomLayout{grid-template-columns:145px minmax(0,1fr)}.boardLayout{grid-template-columns:46px minmax(0,1fr) 46px 180px;gap:6px}.handRail{padding:2px}.handPiece{min-height:39px}.handPiece img{width:26px;height:26px}.railLabel{font-size:8px}.gameInfo .playerBar{padding:10px 8px}.timeLine{gap:5px}.promotion{left:52px;right:190px}}
@media(max-width:900px){.roomLayout{display:flex;flex-direction:column}.roomSidebar{order:2;border-right:0;border-top:1px solid var(--line)}.sideBrand{display:none}.roomSidebar .statusGrid{grid-template-columns:120px minmax(0,1fr);gap:4px 12px}.roomSidebar .statusGrid dd{margin:0}.roomSidebar .sectionTitle{margin-bottom:12px}.centerPage{width:calc(100% - 28px)}.edge{display:none}.roomHeader .eyebrow{display:none}}
@media(max-width:600px){body{font-size:14px}.roomPage{width:100%;padding:0}.roomCard{border-left:0;border-right:0;min-height:100vh}.roomHeader{padding:8px 10px;gap:18px}.roomTitle{font-size:17px}.matchContent{padding:6px}.gameToolbar{padding-bottom:6px;margin-bottom:6px}.gameToolbar button{padding:5px 20px}.boardLayout{grid-template-columns:minmax(0,1fr);gap:5px}.opponentHand{grid-row:1}.boardFrame{grid-row:2;padding:5px}.ownHand{grid-row:3}.handRail{display:flex;align-items:center;padding:4px;gap:5px}.railLabel{writing-mode:vertical-rl;font-size:9px;margin:0;letter-spacing:1px}.hand{flex:1;flex-direction:row;gap:3px}.handPiece{flex:1;min-height:37px;flex-wrap:nowrap;font-size:11px}.handPiece img{width:min(6vw,32px);height:min(6vw,32px)}.handPiece span{padding:0 1px}.gameInfo{grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.gameInfo .playerBar{padding:8px}.playerBar>span:not(.eyebrow){font-size:14px}.playerBar .eyebrow{font-size:9px;margin:0}.clock{font-size:27px}.timeLine{margin-top:2px;font-size:10px}.gameMessage{grid-column:1/-1;min-height:85px;padding:12px}.promotion{position:fixed;top:30%;left:12px;right:12px;padding:16px}.promotion .actions{gap:6px}.promotion .actions button{padding:10px 12px}.statePanel{padding:18px}.centerPage{width:calc(100% - 16px)}.hero{min-height:185px;padding:24px 18px}.centerTitle{font-size:26px;letter-spacing:1px}.centerTitle span{display:block;font-size:17px;margin-top:4px}.heroCopy{font-size:14px;margin-top:24px}.heroGrid{left:10%}.centerContent{padding:18px 14px 28px}.intro{font-size:14px;margin-bottom:24px}.roomList{grid-template-columns:1fr}.statusGrid{grid-template-columns:115px minmax(0,1fr);gap:8px 12px;font-size:13px}.sectionTitle,.roomSection h2{font-size:17px}}
/* Revision: fit the complete game to the available viewport. */
.square{display:block;line-height:0;overflow:hidden;appearance:none}
.square.selected,.handPiece.selected{box-shadow:none;background:#f5ae55}
.square:focus:not(:focus-visible),.handPiece:focus:not(:focus-visible){outline:none}
.roomLayout{display:grid;grid-template-columns:145px minmax(0,1fr)}
.roomSidebar{order:0;border-right:1px solid var(--line);border-top:0}
.matchContent{justify-self:center;min-width:0;transform-origin:top center}
.hasGame .boardLayout{grid-template-columns:62px 560px 62px minmax(0,1fr);gap:8px}
.hasGame .boardFrame{padding:8px;grid-row:auto}
.hasGame .handRail{padding:0;display:flex;flex-direction:column;align-items:stretch;grid-row:auto}
.hasGame .railLabel{writing-mode:horizontal-tb;font-size:10px;margin:2px 0}
.hasGame .hand{display:flex;flex-direction:column;gap:2px}
.hasGame .opponentHand .hand{flex-direction:column-reverse}
.hasGame .handPiece{position:relative;display:block;flex:none;width:59.11px;height:59.11px;min-height:0;padding:0;border:0;line-height:0;overflow:hidden}
.hasGame .handPiece img{display:block;width:100%;height:100%}
.hasGame .handPiece span{position:absolute;right:0;bottom:0;padding:1px 3px;background:#17211be8;color:#fff;font-size:13px;line-height:1.2}
.hasGame .opponentHand .handPiece span{right:auto;bottom:auto;left:0;top:0}
.hasGame .gameInfo{grid-row:auto;grid-template-columns:1fr;gap:8px}
.hasGame .gameMessage{grid-column:auto}
.hasGame .ownHand{align-self:end}
.tallLayout .roomLayout{display:flex;flex-direction:column}
.tallLayout .roomSidebar{order:2;border-right:0;border-top:1px solid var(--line);width:100%}
.tallLayout .matchContent{align-self:center}
.tallLayout.hasGame .boardLayout{grid-template-columns:minmax(0,1fr);gap:5px}
.tallLayout.hasGame .opponentHand{grid-row:1}
.tallLayout.hasGame .boardFrame{grid-row:2;padding:5px}
.tallLayout.hasGame .ownHand{grid-row:3}
.tallLayout.hasGame .handRail{flex-direction:row;align-items:center;gap:4px;padding:2px}
.tallLayout.hasGame .railLabel{writing-mode:vertical-rl;font-size:9px;margin:0}
.tallLayout.hasGame .hand{flex:1;flex-direction:row;gap:2px}
.tallLayout.hasGame .opponentHand .hand{flex-direction:row-reverse}
.tallLayout.hasGame .handPiece{width:45.11px;height:45.11px}
.tallLayout.hasGame .gameInfo{grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.tallLayout.hasGame .gameMessage{grid-column:1/-1;min-height:48px;padding:8px}
.hasGame .gameToolbar{margin-bottom:6px;padding-bottom:6px}
.hasGame .statePanel{padding:12px;margin:8px 0 0}
.hasGame .statePanel h2{font-size:20px;margin:0}
.hasGame .statePanel .eyebrow{display:none}
.hasGame .statePanel p{margin:4px 0}
.hasGame .statePanel .actions{margin-top:8px}
.promotion{position:fixed;top:0;left:0;right:auto;width:max-content;max-width:calc(100vw - 12px);padding:12px;z-index:10;box-sizing:border-box}
.promotion .actions{gap:6px;margin-top:8px}.promotion .actions button{padding:8px 10px}
.leaveDialog{max-width:min(440px,calc(100% - 24px));border:1px solid #75979f;background:#101c25;color:#eef3f5;padding:22px}
.leaveDialog::backdrop{background:#0009}.leaveDialog h2{margin:0;font-size:22px}

.hasGame .handPiece,.tallLayout.hasGame .handPiece{width:var(--cellPx);height:var(--cellPx)}
/* Qinoa reference colors; all tunable values come from RoomConfig.boardStyle. */
.hasGame .boardFrame,.tallLayout.hasGame .boardFrame{padding:12px;background:var(--board-base);border:0;border-radius:4px;box-shadow:none}
.board{position:relative;gap:0;border:var(--board-outerPx) solid var(--board-strong);background:var(--board-base)}
.square,.square:nth-child(even){position:relative;background:var(--board-base);box-shadow:inset -1px -1px var(--board-grid)}
.square::after,.handPiece.selected::after{content:'';position:absolute;inset:0;pointer-events:none;border:var(--board-markPx) solid transparent}
.square.lastOwn{background:var(--board-lastOwn)}
.square.lastOther{background:var(--board-lastOther)}
.square.lastOwn::after,.square.lastOther::after{border-color:var(--board-lastBorder)}
.square.target{background:var(--board-target)}
.square.target::after{border-color:var(--board-targetBorder)}
.square.selected,.handPiece.selected{background:var(--board-selected);box-shadow:none}
.square.selected::after,.handPiece.selected::after{border-color:var(--board-selectionBorder)}
/* Overlay preserves equal square and piece sizes while strengthening the 3x3 grid. */
.board::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:
 radial-gradient(circle at 33.333333% 33.333333%,var(--board-strong) 0 var(--board-dotPx),transparent calc(var(--board-dotPx) + .5px)),
 radial-gradient(circle at 66.666667% 33.333333%,var(--board-strong) 0 var(--board-dotPx),transparent calc(var(--board-dotPx) + .5px)),
 radial-gradient(circle at 33.333333% 66.666667%,var(--board-strong) 0 var(--board-dotPx),transparent calc(var(--board-dotPx) + .5px)),
 radial-gradient(circle at 66.666667% 66.666667%,var(--board-strong) 0 var(--board-dotPx),transparent calc(var(--board-dotPx) + .5px)),
 linear-gradient(90deg,transparent calc(33.333333% - var(--board-majorPx)),var(--board-strong) 0 33.333333%,transparent 0 calc(66.666667% - var(--board-majorPx)),var(--board-strong) 0 66.666667%,transparent 0),
 linear-gradient(180deg,transparent calc(33.333333% - var(--board-majorPx)),var(--board-strong) 0 33.333333%,transparent 0 calc(66.666667% - var(--board-majorPx)),var(--board-strong) 0 66.666667%,transparent 0)}
.handPiece:disabled{opacity:1}
.handPiece.emptyHand{opacity:var(--board-emptyOpacity)}
.handPiece.emptyHand span{display:none}
/* Compact center information and larger in-hand counts. */
.hasGame .handPiece span{font-size:var(--board-countFontPx);padding:var(--board-countPadY) var(--board-countPadX);line-height:1.2;font-weight:700;letter-spacing:-1px}
.centerView .centerCard{min-height:0}
.centerContent .intro{margin-bottom:14px}
.centerContent .roomSection{margin:0 0 20px}
.centerContent .sectionTitle,.centerContent .roomSection h2{padding:2px 10px;margin:0 0 8px;font-size:16px;line-height:1.5}
.accountGrid{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;font-size:13px;line-height:1.5}
.accountGrid>div{display:flex;align-items:baseline;gap:8px;min-width:0;max-width:100%}
.accountGrid dt{color:var(--muted);white-space:nowrap}.accountGrid dd{margin:0;overflow-wrap:anywhere;min-width:0}
.centerView .notice{margin-top:10px;padding:6px 10px}
.centerView .roomList{display:block;padding:0;overflow-x:auto}
.roomTable{border-collapse:collapse;width:100%;font-size:14px;text-align:left}
.roomTable th{padding:5px 10px;color:var(--muted);font-size:12px;font-weight:500;border-bottom:1px solid var(--line)}
.roomTable td{padding:10px;border-bottom:1px solid #27383f;overflow-wrap:anywhere}
.roomTable a{font-weight:600;text-decoration:none}.roomTable a:hover{text-decoration:underline}
.roomTable .roomRules{font-size:12px;color:#b4c9d3;white-space:normal}
.queueClock{width:128px;height:128px;margin:12px auto;overflow:visible}
.queueClock circle{stroke:#73b3c4;stroke-width:2.5;stroke-linecap:round}
.queueClock circle:nth-child(2){stroke:#83aa88}.queueClock circle:nth-child(3){stroke:#b5c9c8}
@media(max-width:600px){.accountGrid{gap:4px 16px}.roomTable{font-size:13px}.roomTable th,.roomTable td{padding:6px 4px}.roomTable th:first-child{width:38%}.roomTable .roomRules{font-size:11px}.centerContent .roomSection{margin-bottom:16px}}
.roomTable .roomEntry{display:inline-block;padding:4px 10px;border:1px solid #47616a;background:#13262c;color:#e3edf0;text-decoration:none}
.roomTable .roomEntry:hover{border-color:#83b2a0;background:#1d393c;text-decoration:none}

/* Center cards and staggered matchmaking dial. */
.centerConnections{text-align:right;color:var(--muted);margin:0 0 10px;font-size:13px}
.roomCards{display:grid;gap:8px}.centerRoomCard{display:grid;grid-template-columns:minmax(110px,1fr) 70px minmax(0,3fr);gap:16px;align-items:center;padding:16px;border:1px solid #344950;background:#102027;color:#dce8ed;text-decoration:none}
.centerRoomCard:hover,.centerRoomCard:focus-visible{background:#1b333a;border-color:#83b2a0;text-decoration:none}.roomCount{color:#b4c9d3}.centerRoomCard .roomRules{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;flex-wrap:wrap}.ruleSeparator{color:#52636b}.roomRules>span:not(.ruleSeparator){white-space:nowrap}
.queueDial{position:relative;width:min(300px,100%);aspect-ratio:1;margin:12px auto}.queueClock{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:visible}.queueClock circle{stroke-width:6;stroke-linecap:butt}.queueRules{position:absolute;inset:24%;display:flex;flex-direction:column;justify-content:center;gap:6px;font-size:clamp(10px,2.8vw,14px);text-align:center;line-height:1.5}
.playing .roomSidebar .statusGrid,.playing .roomSidebar .sectionTitle{display:none}
@media(max-width:600px){.centerRoomCard{grid-template-columns:1fr auto;gap:10px;padding:12px}.centerRoomCard .roomRules{grid-column:1/-1;justify-content:flex-start;gap:8px;font-size:12px}}

/* Portrait room cards and centered waiting card. */
.roomHeader{display:grid;grid-template-columns:minmax(72px,1fr) minmax(0,auto) minmax(72px,1fr);gap:12px}.roomHeader .backLink{justify-self:start;font-size:13px;letter-spacing:1px}.roomHeader .roomTitle{text-align:center}.roomHeader .eyebrow{justify-self:end;margin:0}
body:not(.hasGame) .roomLayout{display:flex;flex-direction:column}body:not(.hasGame) .matchContent{width:100%;align-self:center}body:not(.hasGame) .roomSidebar{order:2;border-right:0;border-top:1px solid var(--line)}
#queuePanel{width:min(340px,100%);margin:24px auto 36px;padding:24px;text-align:center;border:0;border-radius:12px;background:linear-gradient(145deg,#1b303b,#0d171f 65%);box-shadow:0 12px 36px #0005,inset 0 1px #bad3df28}
#queuePanel h2{font-size:25px}.queueDial{width:min(260px,100%);margin:20px auto}.queueRules{position:static;display:grid;gap:0;font-size:14px;line-height:1.6;text-align:center}.queueRules>div{padding:7px 0;border-bottom:1px solid #88a8bb20}.queueRules>div:last-child{border-bottom:0}#queueMessage{font-size:13px;color:var(--muted);margin:20px 0 0}#endMessage:empty{display:none}
.roomCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),260px));justify-content:center;gap:22px;padding:12px 0}
.centerRoomCard{display:flex;flex-direction:column;gap:0;min-height:390px;padding:20px;border:1px solid #50646c;border-radius:12px;background:linear-gradient(145deg,#1d333f,#0c171e 65%);box-shadow:0 8px 20px #0005;text-align:center;overflow-wrap:anywhere}
.centerRoomCard>strong{font-size:19px}.roomCardArt{display:grid;place-items:center;width:100%;height:130px;margin:14px 0;background:radial-gradient(ellipse,#37676250,transparent 70%),repeating-linear-gradient(0deg,transparent 0 25px,#8abac110 25px 26px),repeating-linear-gradient(90deg,transparent 0 25px,#8abac110 25px 26px);color:#a6c5b7;font-size:66px;font-family:serif}
.centerRoomCard .roomRules{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;font-size:14px}.centerRoomCard .roomRules>span{white-space:normal;padding:6px 0;border-bottom:1px solid #88a8bb20}.roomCount{font-size:12px;margin:12px 0}.roomCardAction{display:block;width:100%;margin-top:auto;padding:9px 4px;border-top:1px solid #6b938955;color:#b7d5ce;font-size:13px;letter-spacing:1px}.centerRoomCard:hover,.centerRoomCard:focus-visible{background:linear-gradient(145deg,#294754,#14242b 65%);border-color:#9bc4b6}
.hasGame .matchContent{overflow-anchor:none}
@media(max-width:600px){.roomHeader{gap:6px;padding:10px}.roomHeader .roomTitle{font-size:18px}#queuePanel{margin-top:18px;padding:20px}.roomCards{gap:16px}.centerRoomCard{padding:18px}}

/* Quiet navigation and reference-style hand count badges. */
.roomHeader .backLink{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border:1px solid #72909d55;border-radius:4px;background:#b9d0dc08;color:#a9c4d0;font-size:12px;letter-spacing:1px;text-decoration:none}
.roomHeader .backLink::before{content:'‹';font-size:21px;line-height:1;color:#91adba}
.roomHeader .backLink:hover{color:#e1edf1;border-color:#8baab488;background:#b9d0dc12}.roomHeader .backLink:focus-visible{outline:2px solid #76a8ba;outline-offset:2px}
.hasGame .roomLayout{display:grid;grid-template-columns:minmax(0,1fr)}.hasGame .roomSidebar{display:none}.gameToolbar{justify-content:flex-end}
.hasGame .handPiece span{background:var(--board-countBg);color:var(--board-countInk);border:0;border-radius:var(--board-countRadiusPx);padding:var(--board-countPadY) var(--board-countPadX);font-size:min(var(--board-countFontPx),calc(var(--cellPx) * var(--board-countFontScale)));line-height:1.1;letter-spacing:-1px;font-weight:600;box-shadow:none}

/* Compact cards: approximately 35–40% of the previous area. */
#queuePanel{width:min(220px,100%);padding:14px;margin:16px auto 22px;border-radius:8px}#queuePanel h2{font-size:19px;margin-bottom:6px}#queuePanel .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:4px}.queueDial{width:130px;margin:12px auto}.queueElapsed{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:#d2e0e7;font-variant-numeric:tabular-nums;pointer-events:none}.queueRules{font-size:12px;line-height:1.5}.queueRules>div{padding:3px 0}#queueMessage{font-size:11px;margin:10px 0 0}
.roomCards{grid-template-columns:repeat(auto-fill,minmax(min(165px,100%),170px));gap:12px;padding:8px 0}.centerRoomCard{padding:12px;min-height:0;border-radius:8px}.centerRoomCard>strong{font-size:15px}.roomCardArt{height:58px;margin:7px 0;font-size:38px}.centerRoomCard .roomRules{font-size:12px;line-height:1.5}.centerRoomCard .roomRules>span{padding:3px 0}.roomCount{font-size:11px;margin:7px 0}.roomCardAction{font-size:11px;padding:5px 0;letter-spacing:0}

/* Reduce card area through spacing, without changing text sizes. */
#queuePanel{width:min(200px,100%);padding:10px;margin:12px auto 18px}#queuePanel h2{margin-bottom:4px}.queueDial{margin:6px auto}.queueRules>div{padding:2px 0}#queueMessage{margin-top:6px}
.roomCards{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),156px));gap:10px}.centerRoomCard{padding:8px}.roomCardArt{height:48px;margin:4px 0}.centerRoomCard .roomRules>span{padding:2px 0}.roomCount{margin:4px 0}.roomCardAction{padding:3px 0}

/* Interaction feedback and accidental text-selection prevention. */
.centerRoomCard .roomRules>span{border-bottom:0}
.centerRoomCard,.roomHeader,.gameArea,.statePanel{user-select:none;-webkit-user-select:none}
@media(hover:hover){body:not(.choosingPromotion) .square.hoverable:hover,body:not(.choosingPromotion) .handPiece:not(:disabled):hover{background:var(--board-hover);opacity:var(--board-hoverOpacity)}}

/* Revision 11: room lifetime, rectangular cells, unmodified piece proportions. */
.roomCards{justify-content:start}
.roomLifetime{font-size:11px;line-height:1.5;color:#78be89;margin-top:5px}
.roomLifetime.closingSoon{color:#ff7770}
.centerRoomCard.roomClosed{cursor:default;border-color:#344950}
.centerRoomCard.roomClosed:hover{background:linear-gradient(145deg,#1d333f,#0c171e 65%)}
.square{aspect-ratio:1 / var(--cellRatio);overflow:visible}
.hasGame .handPiece,.tallLayout.hasGame .handPiece{height:calc(var(--cellPx) * var(--cellRatio));overflow:visible}
.square .pieceVisual,.hasGame .handPiece .pieceVisual{position:absolute;top:0;left:50%;height:100%;width:100%;transform:translateX(-50%);pointer-events:none}
.square .pieceVisual.flip,.hasGame .handPiece .pieceVisual.flip{transform:translateX(-50%) rotate(180deg)}
.square .pieceVisual img,.hasGame .handPiece .pieceVisual img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transform-origin:center}
.square::after,.handPiece.selected::after{z-index:1}
.hasGame .handPiece>span{z-index:2;pointer-events:none}
.gameMessage #gameRules{font-size:12px;line-height:1.5;color:var(--muted)}

/* Wide view: player information follows turn order, regardless of local side. */
body:not(.tallLayout) .gameInfo .playerBar[data-side="0"]{order:0}
body:not(.tallLayout) .gameInfo .playerBar[data-side="1"]{order:1}
body:not(.tallLayout) .gameInfo .gameMessage{order:2}

/* Account statistics: compact rows; existing room cards retain their layout. */
.accountStats { margin-top:12px; }
.accountStats table { width:100%; max-width:620px; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.accountStats caption { text-align:left; font-weight:700; padding:0 0 6px; }
.accountStats th,.accountStats td { padding:5px 8px; text-align:right; border-bottom:1px solid #263941; }
.accountStats th:first-child { text-align:left; white-space:nowrap; }
.accountStats thead th { color:#9fb9c7; font-size:12px; font-weight:400; }
.accountStats tbody th { font-size:13px; font-weight:400; }
.accountStats tbody td { font-size:14px; }
.accountStats p { color:#9fb9c7; margin:0; }
@media(max-width:480px) {
  .accountStats th,.accountStats td { padding:5px 3px; }
  .accountStats thead th { font-size:11px; }
}

/* Native top-layer result panel never changes the board's layout or scale. */
.resultDialog { box-sizing:border-box; width:440px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; margin:auto; padding:24px; background:#0c1b25; color:#e9f0f4; border:1px solid #476779; }
.resultDialog::backdrop { background:rgba(0,8,14,.72); }
.resultDialog h2 { margin:8px 0 12px; font-size:28px; }
.resultDialog p { margin:10px 0; }
.resultDialog .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.resultDialog .actions>* { padding:9px 12px; }
.rankUp { color:#e6c985; font-weight:700; }
#resultSave { color:#a5c1ce; font-size:13px; }
@media(max-width:480px) { .accountStats { overflow-x:auto; } .accountStats th:last-child,.accountStats td:last-child { white-space:nowrap; } }

/* Player identity and clocks remain legible without English headings. */
.playerBar>span:not(.eyebrow){font-size:21px}
.playerBar .timeLine{font-size:14px}
.playerBar .clock{font-size:40px}

/* Formation editor / saved own-side positions. */
.formationEditor{max-width:540px;margin:20px auto;text-align:center}
.formationBoard{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));background:#d9b77a;padding:6px;border:1px solid #8a7151;user-select:none;touch-action:manipulation;gap:0}
.formSquare{display:flex;position:relative;align-items:center;justify-content:center;min-width:0;aspect-ratio:1 / 1.1;padding:0;margin:0;border:0;border-right:1px solid #8f795b;border-bottom:1px solid #8f795b;border-radius:0;background:#e5bd7d;box-shadow:none;color:#182019}
.formSquare:nth-child(9n+1){border-left:1px solid #8f795b}.formSquare:nth-child(-n+9){border-top:1px solid #8f795b}
.formSquare img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.formSquare.selected{background:#80b7dd;box-shadow:inset 0 0 0 3px #27698c}.formSquare.target{background:#a2c592;box-shadow:inset 0 0 0 2px #478156}
.formSquare:hover{filter:brightness(1.06)}
.formationSlots{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:20px 0}
.formationSlot,.formationChoice{width:250px;max-width:100%;padding:12px;background:#101f29;border:1px solid #36505d;text-align:center}
.formationSlot h3{margin:0 0 8px}.formationSlot button{margin-top:12px}.formPreview:not(.formationBoard){padding:30px 0;color:#9ab0bc}
.formationChoice{display:block;cursor:pointer}.formationChoice strong{display:block;margin-bottom:12px}.formationChoice:hover{border-color:#83b9cf}
#formationPanel,#formationPick{padding:12px}#formationNotice{min-height:1.5em}#formationCount{font-variant-numeric:tabular-nums}
#formationOpen,#formationBack,.formationSlot button{font:inherit;padding:8px 12px;background:#172a36;color:#e2ebef;border:1px solid #4c6978;cursor:pointer}
#formationOpen:hover,#formationBack:hover,.formationSlot button:hover{background:#213b4b}.formationSlot button:disabled{opacity:.4;cursor:default}
#formationBack{font-size:14px;padding:5px 9px}

/* Center presentation: proportions, palette and corner details follow Orb Ship Front. */
body.centerView{padding:8px;background-color:#111;color:#ccc;background-image:radial-gradient(#333 1px,transparent 1px);background-size:8px 8px;font-family:"Segoe UI","Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.4}
.centerView .centerPage{width:100%;max-width:980px;margin:0 auto;padding:0 0 24px;z-index:1}
.centerView .centerCard{position:relative;min-height:0;padding:2px 6px;background:rgba(0,0,0,.85);border:1px solid #333;box-shadow:0 0 15px #3388ff26,inset 0 0 20px #000}
.centerView .centerCard::before,.centerView .centerCard::after{content:"";position:absolute;width:30px;height:30px;border:2px solid #555;pointer-events:none;z-index:3}
.centerView .centerCard::before{top:0;left:0;border-right:0;border-bottom:0}
.centerView .centerCard::after{bottom:0;right:0;border-left:0;border-top:0}
.centerView .hero{position:relative;min-height:0;padding:0;margin:0 0 4px;border:1px solid #333;background:#000;isolation:isolate}
.centerView .heroImage{display:block;width:100%;height:auto;filter:brightness(.8)}
.centerView .hero::before,.centerView .hero::after{content:"";position:absolute;inset:0;pointer-events:none}
.centerView .hero::before{background:radial-gradient(ellipse at center,transparent 50%,#000c 100%);z-index:1}
.centerView .hero::after{background:linear-gradient(to bottom,transparent 50%,#0006 51%) 0 0/100% 4px;animation:center-scan 4s linear infinite;z-index:2}
@keyframes center-scan{to{background-position:0 40px}}
.centerView .centerTitle{position:absolute;top:0;left:0;width:100%;margin:0;padding:2px 6px;color:#fff;font-size:25.6px;letter-spacing:2px;text-align:center;text-shadow:0 2px 4px #000e,0 0 10px #000;z-index:3}
.centerView .heroCopy{position:absolute;top:64px;right:8px;margin:8px 4px;padding:4px;color:#ddd;font-size:16px;letter-spacing:0;z-index:3;text-shadow:0 2px 4px #000e}
.centerView .centerContent{padding:6px 6px 18px;border-top:1px solid #333}
.centerView .sectionTitle,.centerView .roomSection h2,.centerView #formationTitle{font-size:19px;color:#eee;border-left:5px solid #0066aa;padding:5px 12px;margin:16px 0 8px;background:linear-gradient(90deg,#2050b433,transparent)}
.centerView .centerConnections{color:#aaa;margin:2px 0 6px}
.centerView a{color:#acf;text-decoration:none}
.centerView a:hover{color:#aaf;text-decoration:underline}
.centerView button:not(.formSquare){background:#141414cc;color:#ddd;border:1px solid #555;border-radius:2px;padding:6px 14px;box-shadow:inset 0 0 5px #0008}
.centerView button:not(.formSquare):hover:not(:disabled){background:#3388ff33;border-color:#38f}
.centerView button:not(.formSquare):disabled{color:#888;border-color:#333}
.centerView .roomCards{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;gap:10px;padding:4px 0 8px}
.centerView .centerRoomCard{position:relative;flex:0 1 156px;width:156px;max-width:100%;min-width:0;min-height:0;padding:8px;border:1px solid #555;border-radius:2px;background:#0a0a0ab3;box-shadow:inset 0 0 10px #000c;color:#ddd;text-align:center;transition:background-color .2s,border-color .2s,box-shadow .2s}
.centerView .centerRoomCard::before,.centerView .centerRoomCard::after{content:"";position:absolute;width:20px;height:20px;pointer-events:none;border-color:#888;border-style:solid;transition:border-color .2s}
.centerView .centerRoomCard::before{top:0;left:0;border-width:2px 0 0 2px}
.centerView .centerRoomCard::after{bottom:0;right:0;border-width:0 2px 2px 0}
.centerView .centerRoomCard>strong{width:100%;color:#fff;font-size:15px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px dashed #555}
.centerView .roomCardArt{height:48px;margin:4px 0;color:#738778;background:radial-gradient(ellipse,#55aa6617,transparent 70%);font-size:38px}
.centerView .centerRoomCard .roomRules{color:#5a6;font-size:12px;line-height:1.5}
.centerView .centerRoomCard .roomRules>span{padding:2px 0;border:0}
.centerView .roomCount{color:#5a6}
.centerView a.centerRoomCard:not(.roomClosed):hover,.centerView a.centerRoomCard:not(.roomClosed):focus-visible{background:#c8640026;border-color:#c70;color:#ddd;text-decoration:none;box-shadow:0 0 15px #f802,inset 0 0 10px #000c}
.centerView a.centerRoomCard:not(.roomClosed):hover::before,.centerView a.centerRoomCard:not(.roomClosed):hover::after,.centerView a.centerRoomCard:not(.roomClosed):focus-visible::before,.centerView a.centerRoomCard:not(.roomClosed):focus-visible::after{border-color:#c70}
.centerView .centerRoomCard.roomClosed,.centerView .centerRoomCard.roomClosed:hover{background:#0a0a0ab3;border-color:#555;filter:grayscale(1);box-shadow:inset 0 0 10px #000c}
.centerView .accountGrid{color:#ddd}.centerView .accountGrid dt{color:#aaa}
.centerView .formationSlot{background:#0a0a0a;border-color:#555;border-radius:2px}
.centerView footer{margin:30px auto 0;padding:6px 0 0;border-top:1px solid #333;color:#ccc;font-size:13px}
#centerMarquees{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.centerMarqueeTrack{position:absolute;top:0;height:100%;overflow:hidden}
.centerMarqueeContent{writing-mode:vertical-rl;text-orientation:sideways;white-space:nowrap;font-weight:bold;line-height:1;will-change:transform}
.centerMarqueeContent>span{display:inline-block}
@media(max-width:600px){
 .centerView .centerTitle{font-size:17px;letter-spacing:0;top:6px}
 .centerView .heroImage{min-height:112px;object-fit:cover}
 .centerView .heroCopy{top:auto;bottom:8px;font-size:13px}
 .centerView .centerContent{padding:4px 4px 14px}
}
@media(prefers-reduced-motion:reduce){.centerView .hero::after{animation:none}}

/* Current center layout: compact header, centered cards and account groups. */
.centerView .centerPage{width:min(100%,calc(50% + 392px));max-width:none}
.centerView .hero{min-height:100px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 12px;gap:12px}
.centerView .heroImage{position:absolute;inset:0;width:100%;height:100%;min-height:0;background:url("/img/top-header.png") center/cover no-repeat;z-index:0}
.centerView .centerTitle{position:relative;inset:auto;width:100%;padding:0;font-size:20px;line-height:1.4;letter-spacing:1px;overflow-wrap:anywhere}
.centerView .heroCopy{position:relative;inset:auto;margin:0;padding:0;font-size:13px;line-height:1.5;align-self:flex-end;text-align:right;overflow-wrap:anywhere}
.centerView .roomCards{justify-content:center}
.centerView .centerRoomCard>strong{font-size:25px;line-height:1.3;overflow-wrap:anywhere}
.centerView .roomCardArt{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;background:#000;color:#eee;font-family:serif;font-size:20px;line-height:1.5;letter-spacing:2px;min-height:48px;padding:2px 4px}
.centerView #formationOpen{display:flex;flex:0 1 156px;width:156px;padding:8px;font:inherit;background:#0a0a0ab3;border:1px solid #555;color:#ddd;border-radius:2px}
.centerView #formationOpen:hover,.centerView #formationOpen:focus-visible{background:#c8640026;border-color:#c70;box-shadow:0 0 15px #f802,inset 0 0 10px #000c}
.centerView #formationOpen:hover::before,.centerView #formationOpen:hover::after{border-color:#c70}
.centerView .accountGrid{justify-content:center}
.centerView .accountStats{max-width:620px;margin:12px auto 0}
.centerView .accountStats table{margin:0 auto}
.centerView #roomEmpty,.centerView #formationNotice{text-align:center}
.centerView .roomSection{margin-top:12px}
.centerView .formationSlot{position:relative;border-radius:2px}
.centerView #formationBack,.centerView .formationSlot button{background:#141414cc;border-color:#555;border-radius:2px;color:#ddd}
.centerView #formationBack:hover,.centerView .formationSlot button:hover:not(:disabled){background:#c8640026;border-color:#c70}
.centerView .formationSlot::before,.centerView .formationSlot::after{content:"";position:absolute;width:20px;height:20px;border:2px solid #888;pointer-events:none}
.centerView .formationSlot::before{top:0;left:0;border-right:0;border-bottom:0}
.centerView .formationSlot::after{bottom:0;right:0;border-left:0;border-top:0}
@media(max-width:600px){.centerView .centerTitle{font-size:17px}.centerView .hero{padding:6px 8px;min-height:90px}.centerView .heroCopy{font-size:12px}}

/* Compact account details and centered formation entry. */
.centerView .heroCopy{font-size:12px;color:#b5b5b5}
.centerView #formationOpen{justify-content:center;align-items:center}
.centerView #formationOpen .roomCardArt{justify-content:center;align-items:center;text-align:center;letter-spacing:0;background:transparent;min-height:0;height:auto;margin:0 0 4px}
.centerView .formationIcon{display:block;font-size:32px;line-height:1.2;filter:grayscale(.8);margin:2px auto 6px}
.centerView .accountGrid{font-size:20px;text-align:center;gap:8px 24px}
.centerView .accountGrid>div{flex-wrap:wrap;justify-content:center}
.centerView .accountGrid dt{font-size:15px}
.centerView .accountLinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin:10px 0;text-align:center;font-size:14px;overflow-wrap:anywhere}
.centerView .accountLinks[hidden]{display:none}
.centerView #authNotice{padding:0;margin:8px 0 4px;background:none;border:0;color:#aaa;text-align:center}
.centerView #guestLinks{font-size:16px;margin:4px 0 12px}
.centerView .accountStats{max-width:760px;container-type:inline-size;overflow:visible;margin:12px auto 0}
.centerView .accountStats table{max-width:none;table-layout:auto}
.centerView .accountStats caption{text-align:center;font-size:18px}
.centerView .accountStats th,.centerView .accountStats td{padding:7px 6px;text-align:center;white-space:normal;overflow-wrap:anywhere}
.centerView .accountStats thead th{font-size:15px}
.centerView .accountStats tbody th{font-size:17px}
.centerView .accountStats tbody td{font-size:20px}
.centerView .rankIcon{display:inline-block;width:26px;height:26px;object-fit:contain;margin-right:5px;vertical-align:middle}
.centerView .rankLabel{display:inline-block;vertical-align:middle}
@container(max-width:600px){.centerView .accountStats .statsDetail{display:none}}
@container(max-width:400px){.centerView .accountStats th,.centerView .accountStats td{padding:6px 3px}.centerView .accountStats tbody td{font-size:18px}.centerView .accountStats tbody th{font-size:16px}}
@media(max-width:600px){.centerView .heroCopy{font-size:11px}}

@media(prefers-reduced-motion:reduce){#centerMarquees{display:none}}

.centerView #memberLinks{flex-direction:column;align-items:center}

.centerView .accountLinks{flex-direction:column;align-items:center;gap:8px}
.centerView .accountLinks a{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:100%;box-sizing:border-box;padding:9px 14px;border:1px solid #455a63;border-radius:3px;background:#102029;color:#d5e4e9;text-decoration:none;text-align:left;line-height:1.5}
.centerView .accountLinks a::after{content:"\2192";flex-shrink:0;color:#91b5bf}
.centerView .accountLinks a:hover,.centerView .accountLinks a:focus-visible{background:#1a303b;border-color:#82aab9;color:#fff}

.centerView .postedCard{justify-content:flex-start;cursor:default;align-self:flex-start}
.centerView a.postedCard{cursor:pointer}
.centerView .postedCard>strong{font-size:15px;margin-top:6px}
.centerView .postedCard p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6;margin:4px 0;text-align:left}
.centerView .postedCard img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.postComposer{margin:16px auto;max-width:540px;border:1px solid #455a63;padding:10px 14px;background:#10191f}
.postComposer summary{cursor:pointer;color:#c5dce4}
.postComposer form{display:grid;gap:10px;padding-top:14px}
.postComposer label{display:grid;gap:5px}
.postComposer label[hidden]{display:none}
.postComposer input,.postComposer textarea,.postComposer select{box-sizing:border-box;max-width:100%;width:100%;background:#080f13;color:#eee;border:1px solid #52616b;padding:8px;font:inherit}
.postComposer p{margin:0;font-size:13px;color:#b9c6ca}
.postComposer button,#stockRefresh{background:#102029;border:1px solid #455a63;color:#d5e4e9;padding:7px 12px;cursor:pointer}
.postComposer button:disabled{opacity:.5;cursor:wait}
#stockRefresh{font-size:12px;padding:3px 8px}

/* Account-sized headings, compact identities and the short-lived center chat. */
.accountStats{margin-top:20px}
.stockGameNote,.chatTerms{font-size:13px;color:var(--muted)}
#roomEntryNotice:empty,#chatNotice:empty{display:none}
.roomNoStock{opacity:.55;cursor:default}
.identityLine{display:block;width:100%;min-width:0;overflow:hidden;white-space:nowrap;line-height:1.5}
.identityLine>span{display:inline-block;white-space:nowrap}
.postedCard small{color:var(--muted)}
#chatPanel{margin-top:24px}
#chatMessages{display:grid;gap:8px;max-height:360px;overflow:auto;overflow-anchor:auto}
.chatMessage{padding:8px 12px;border-left:2px solid #49646b;background:#0c141b;min-width:0}
.chatMessage small{color:var(--muted)}
.chatMessage p{margin:4px 0 0;overflow-wrap:anywhere;white-space:pre-wrap}
#chatForm{margin-top:12px;font-size:14px}
.chatInput{display:flex;gap:8px}
.chatInput input{min-width:0;flex:1;background:#101a22;color:#e3ebef;border:1px solid #526573;padding:8px;font:inherit}
.chatInput button{border:1px solid #526573;background:#172832;color:#e3ebef;padding:6px 16px}
.centerView:has(#formationPanel:not([hidden])) #statsPanel,.centerView:has(#formationPanel:not([hidden])) #chatPanel{display:none}

/* Full-width section heading, compact chat author and sponsored rooms. */
#statsPanel{margin-top:20px}
.chatAuthor{display:flex;align-items:baseline;gap:10px;min-width:0}
.chatAuthor .identityLine{width:auto;max-width:50%;flex:0 1 auto}
.classicLink{display:inline-block;font-size:13px;color:#a7bbc6;margin:4px 0}
.sponsorBadge{display:block;white-space:pre-line;overflow-wrap:anywhere;color:#fff0ae;background:#3c351b;padding:6px;font-size:12px;line-height:1.5}
.sponsorBadge[hidden]{display:none}
.centerRoomCard.sponsoredRoom{border-color:#b9a465}
.centerView:has(#formationPanel:not([hidden])) #sponsorComposer{display:none}

/* Orb Ship Front surface language. Geometry and board interaction stay unchanged. */
:root{--hud-edge:#555;--hud-ink:#eee;--hud-accent:#ff8800;--hud-surface:linear-gradient(180deg,#ffffff20,transparent 48%,#00000040),#292929;--hud-hover:linear-gradient(180deg,#ffffff20,transparent 48%,#00000040),#443323}

.centerView button:not(.formSquare):not(#formationOpen),.centerView .accountLinks a{
 background:var(--hud-surface);border-color:var(--hud-edge);color:var(--hud-ink);
 box-shadow:inset 0 1px #ffffff35,inset 0 -1px #0009,inset 0 0 0 3px #0002;
 text-shadow:0 1px 2px #000;transition:background-color .2s,border-color .2s,box-shadow .2s;
}
.centerView button:not(.formSquare):not(#formationOpen):not(:disabled):hover,.centerView .accountLinks a:hover{
 background:var(--hud-hover);border-color:#c70;box-shadow:inset 0 1px #ffffff35,0 0 8px #ff880020;
}
.centerView button:not(.formSquare):not(#formationOpen):disabled{background:#202020;color:#888;box-shadow:none}
.centerView .accountLinks a::after{color:var(--hud-accent);text-shadow:0 1px #000}
.centerView .postComposer{position:relative;background:linear-gradient(135deg,#ffffff05,transparent 55%),#101010;border-color:#555;box-shadow:inset 0 0 12px #0008}
.centerView .postComposer::before,.centerView .postComposer::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none;border:2px solid #777}
.centerView .postComposer::before{top:0;left:0;border-right:0;border-bottom:0}
.centerView .postComposer::after{bottom:0;right:0;border-left:0;border-top:0}
.centerView .postComposer summary{color:#ddd}.centerView .postComposer summary::marker{color:#c70}
.centerView .postComposer input,.centerView .postComposer textarea,.centerView .postComposer select,.centerView .chatInput input{background:#090b0b;border-color:#555;box-shadow:inset 0 2px 5px #0008}
.centerView :is(input,textarea,select):focus-visible{outline:2px solid #c70;outline-offset:2px}
.centerView .chatMessage{background:linear-gradient(110deg,#ffffff05,transparent),#101313;border-left-color:#57735e}
.centerView .chatAuthor strong{color:#eee}.centerView .chatMessage small{color:#96a798}
.centerView .formationSlot{background:linear-gradient(135deg,#ffffff07,transparent 60%),#101010;box-shadow:inset 0 0 10px #0008}
.centerView .accountStats thead{background:linear-gradient(#ffffff09,transparent),#161a1a}
.centerView .accountStats tbody td{font-variant-numeric:tabular-nums}
.centerView .sponsorBadge{border-left:2px solid #c99540;background:linear-gradient(110deg,#4a3a18,#211d14);color:#ffe4a0}
@media(prefers-reduced-motion:reduce){.centerView button,.centerView a,.centerView .centerRoomCard{transition:none}}

/* Wider cards, bounded previews, and a readable full-message dialog. */
.centerView .centerRoomCard,.centerView #formationOpen{flex-basis:188px;width:188px}
.centerView .postedCard .postRead{margin-top:auto;font-size:13px}
.centerView .postedCard p{max-height:10em;overflow:hidden}
.postDialog{width:560px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:24px;background:#171c1b;color:#eee;border:1px solid #888;box-shadow:0 8px 30px #0008}
.postDialog::backdrop{background:#0006}.postDialog h2{margin:0 0 12px;border-left:4px solid #c70;padding-left:12px;font-size:22px}
#postFullAuthor{color:#a8bbaa;overflow-wrap:anywhere}#postFullText{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.centerView .roomCredits{margin-top:24px;font-size:14px;color:#bdc8c0;border-top:1px solid #333;padding:12px}
.centerView .roomCredits h2{font-size:18px;border-left:5px solid #0066aa;padding:5px 12px;background:linear-gradient(90deg,#2050b433,transparent)}

/* Keep the full-text action outside the bounded preview. */
.centerView .postedCard{display:flex;flex-direction:column}
.centerView .postedCard .postRead{flex-shrink:0;min-height:32px;margin-top:10px;white-space:normal}
.centerView .postedCard p{flex-shrink:0;max-height:none}

.adminMessage{white-space:pre-wrap;overflow-wrap:anywhere;padding:6px 8px;margin:0 0 6px;font-size:14px;border:1px solid #589779;background:#143d2b;color:#eefbf4}.adminMessage[data-kind="a"]{border-color:#bf6868;background:#4b2228;color:#fff0ef}

.roomSummary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:6px 0}.roomSummary .stockGameNote{margin:0;min-width:0}.centerView .roomSummary .centerConnections{margin:0 0 0 auto;white-space:nowrap}