:root{color-scheme:dark;--bg:#121b22;--panel:#18232b;--border:#2c3840;--cream:#efe7d7;--muted:#9ba8ac;--gold:#cfaa71;--red:#bf5246;--green:#7dae91;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--cream);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 22% 30%,#1d2c33 0,transparent 60%);min-height:100vh}main{max-width:1220px;margin:auto;padding:38px 38px 20px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.brand{color:var(--cream);text-decoration:none;font-size:10px;letter-spacing:2.1px;font-weight:700}.brand span{color:var(--muted);font-weight:400}h1{font-family:Georgia,serif;font-weight:400;font-size:65px;letter-spacing:-3px;line-height:1;margin:20px 0 10px}.period{color:var(--gold)}.tagline{color:var(--muted);font-size:14px;margin:0}.edition{font-size:11px;letter-spacing:2px;color:var(--gold);text-align:right}.edition span{display:block;font-size:9px;letter-spacing:1.3px;color:var(--muted);margin-top:12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:42px;align-items:start}.table{min-width:0}.board-frame{padding:15px;background:linear-gradient(140deg,#8b6345,#503a2c 45%,#735039);border-radius:6px;box-shadow:0 20px 50px #0005,inset 0 1px 1px #e8b67c66;border:1px solid #9a735144}.board-edge{border:3px solid #36291f;box-shadow:0 0 0 1px #bd946155}#board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;background:#d4c3a5;isolation:isolate}.square{position:relative;border:0;border-radius:0;min-width:0;min-height:0;padding:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#dacbae;color:#88765a;touch-action:manipulation;box-shadow:none;cursor:default}.square.dark{background:linear-gradient(145deg,#716653,#5e5546);color:#c5b38e}.square:disabled{opacity:1}.square:focus-visible{outline:3px solid #fff;outline-offset:-4px;z-index:2}.square.last{box-shadow:inset 0 0 0 2px #e7c88088;background:linear-gradient(145deg,#8d8060,#796d51)}.square.selected{background:#a0874f;box-shadow:inset 0 0 0 3px #f8d79c}.square.legal{cursor:pointer}.square.legal:after{content:"";position:absolute;width:23%;height:23%;border-radius:50%;background:#f3d59b99;box-shadow:0 0 0 6px #f3d59b15}.square.legal:hover{background:#968153}.square.can-move{cursor:pointer}.square.can-move .piece{box-shadow:inset 0 2px 3px #fff5,inset 0 -4px 1px #0004,0 4px 4px #0005,0 0 0 2px #efcf8c66}.coordinate{position:absolute;left:4px;bottom:3px;font-size:9px;line-height:1;opacity:.7;pointer-events:none}.piece{width:76%;height:76%;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 3px #fff5,inset 0 -4px 1px #0004,0 4px 4px #0005;pointer-events:none;transition:transform .16s}.piece:before{content:"";position:absolute;inset:14%;border:2px solid #0002;border-radius:50%;box-shadow:0 1px 1px #fff3,inset 0 1px 2px #0002}.red{background:radial-gradient(ellipse at 35% 20%,#d9715f,#ad4439 70%,#84362f);color:#f9cf9b}.ivory{background:radial-gradient(ellipse at 35% 20%,#fff5dc,#dac9a4 70%,#bda87e);color:#67523b}.crown{font-family:Georgia,serif;font-size:clamp(18px,3vw,33px);z-index:1;text-shadow:0 1px 1px #fff4}.selected .piece{transform:translateY(-3px) scale(1.04)}.player{display:flex;align-items:center;gap:11px;padding:15px 3px;min-height:65px}.player strong{display:block;font-size:13px;font-weight:600}.player small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.coin{width:29px;height:29px;border-radius:50%;box-shadow:inset 0 1px 1px #fff6,0 2px 3px #0005}.player-note{margin-left:auto;color:var(--muted);font-size:11px}.player.active .player-note{color:var(--gold)}.board-caption{display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#8a989e;margin:18px 0}.board-caption span{color:var(--gold)}aside{display:flex;flex-direction:column;gap:16px;padding-top:4px}.panel{border:1px solid var(--border);background:linear-gradient(145deg,#1a272f,#18232b);padding:22px;border-radius:6px}.status-panel{border-top:2px solid var(--gold)}.eyebrow{font-size:9px;font-weight:600;letter-spacing:1.7px;color:var(--muted);display:block}.status-panel .eyebrow{display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:6px;height:6px;background:var(--muted);border-radius:50%}.dot.online{background:var(--green);box-shadow:0 0 10px #7dae9133}.dot.offline{background:var(--red)}h2{font-family:Georgia,serif;font-weight:400;font-size:32px;letter-spacing:-.6px;margin:20px 0 10px}.status-panel p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}.panel button{font:inherit;font-size:12px}button{border:1px solid #56616a;border-radius:4px;background:#293741;color:var(--cream);padding:11px 14px;cursor:pointer;transition:background .15s}button:hover{background:#384853}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.45;cursor:default}.primary{background:var(--gold);border-color:var(--gold);color:#1b242a;font-weight:650!important;width:100%;display:flex;align-items:center;justify-content:space-between}.primary:hover{background:#e1bd85}.primary span{font-size:17px}#create{margin-top:17px}.divider{position:relative;text-align:center;margin:22px 0;color:var(--muted);font-size:10px}.divider:before{content:"";height:1px;position:absolute;top:50%;left:0;right:0;background:var(--border)}.divider span{position:relative;background:var(--panel);padding:0 10px}.join-row,.invite-row{display:flex;gap:8px}input{min-width:0;width:100%;background:#111b22;border:1px solid #39464e;border-radius:4px;padding:11px 10px;color:var(--cream);font:inherit;font-size:12px}#code{text-transform:uppercase;letter-spacing:2px}#invite{font-size:11px}.room-heading{display:flex;align-items:center;justify-content:space-between;margin:14px 0}.room-heading strong{font-size:24px;letter-spacing:4px;color:var(--gold)}.text-button{border:0;background:transparent;color:var(--muted);padding:7px 0;text-decoration:underline;text-underline-offset:3px}.text-button:hover{background:transparent;color:var(--cream)}.muted{color:var(--muted);font-size:11px;line-height:1.6}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.actions .secondary{flex:1;white-space:nowrap;font-size:11px}.actions #leave{width:100%;font-size:10px;margin-top:5px}#message{font-size:12px;color:var(--gold);line-height:1.6;margin:0;min-height:0}#message:empty{display:none}#confirm,#draw-offer{font-size:12px;line-height:1.6;margin-top:16px;border-top:1px solid var(--border);padding-top:10px}#confirm-yes,#accept-draw{margin-right:12px}.rules summary{font-size:12px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.rules summary::-webkit-details-marker{display:none}.rules summary span{color:var(--gold)}.rules li{font-size:11px;line-height:1.7;margin:10px 0;color:var(--muted)}.rules ul{padding-left:16px;margin-bottom:15px}.rules a{font-size:10px;color:var(--gold)}.moves-panel{padding-bottom:14px}#moves{max-height:130px;overflow:auto;padding:0;list-style:none;margin:13px 0 0}#moves li{font-size:11px;display:flex;justify-content:space-between;border-bottom:1px solid #ffffff08;padding:8px 0;color:var(--muted);font-variant-numeric:tabular-nums}#moves li:last-child{border:0}#moves li span:last-child{color:var(--cream)}footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border);margin-top:35px;padding-top:20px;font-size:10px;color:var(--muted)}footer span:first-child{letter-spacing:2px;font-size:9px}[hidden]{display:none!important}
@media(min-width:1000px){.table{max-width:720px}}@media(max-width:850px){main{padding:25px 20px}.layout{grid-template-columns:minmax(0,1fr) 260px;gap:22px}.panel{padding:17px}.board-frame{padding:10px}.edition{display:none}h1{font-size:54px}.coordinate{font-size:7px}.player-note{font-size:10px}}@media(max-width:650px){main{padding:22px 14px}.layout{display:flex;flex-direction:column;gap:20px}.table{width:100%}header{margin-bottom:18px}h1{font-size:48px;margin-top:17px}.tagline{font-size:12px}.brand{font-size:9px}.player{padding:10px 2px;min-height:54px}.board-frame{padding:10px}.board-caption{margin:14px 0 0;font-size:7px}aside{width:100%;display:grid;grid-template-columns:1fr;gap:12px;padding:0}.panel{padding:18px}h2{font-size:28px;margin-top:14px}.status-panel{order:-2}.status-panel p{font-size:12px}.rules{order:3}.moves-panel{order:4}#message{order:2}footer{font-size:9px}.crown{font-size:27px}.square{touch-action:manipulation}.piece:before{border-width:1px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Piece dragging uses pointer events for both mouse and touch. */
#board{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.square.can-move{cursor:grab}.dragging,.dragging .square{cursor:grabbing}
.piece.drag-origin{opacity:0}
.piece.drag-piece{position:fixed;left:0;top:0;z-index:100;pointer-events:none;margin:0;transition:none;box-shadow:inset 0 2px 3px #fff5,inset 0 -4px 1px #0004,0 12px 16px #0007,0 0 0 2px #efcf8c99}
.square.drop-target{background:#ad9259;box-shadow:inset 0 0 0 3px #f8d79c}

/* Persistent navigation, outside lobby and game controls. */
.hub-navigation{box-sizing:border-box;display:block;position:static;margin:12px auto 0;text-align:left}
.hub-navigation .hub-return{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:8px 14px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font:600 12px/1.4 system-ui,sans-serif;letter-spacing:normal;text-decoration:none;white-space:nowrap}
.hub-navigation .hub-return:hover{background:rgba(128,128,128,.15)}
.hub-navigation .hub-return:focus-visible{outline:3px solid #d4ae5b;outline-offset:3px}
.hub-navigation{max-width:1220px;padding:0 38px}@media(max-width:800px){.hub-navigation{padding:0 20px}}@media(max-width:600px){.hub-navigation{padding:0 14px}}