/* Layout: big printed map on the left, a ledger-style sidebar on the right; stacks on phones.
   Single theme: the mint of the printed board with ink-green linework and a brass accent. */
:root{
  --mint:#bfe0cf; --board:#eef0ef; --paper:#f3f6f1; --mapink:#0b1a15; --ink:#1d332b; --muted:#56706a; --line:#9fc3b1;
  --brass:#a87a22; --accent:#1f6f8b; --warn:#b4471f; --ok:#2b7a4b;
  --display:"Old Standard TT", "Times New Roman", serif;
  --body:"Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column}
#app{flex:1;min-height:0;overflow:auto}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.4}
button{font:inherit;cursor:pointer;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:6px;padding:6px 12px;font-weight:500}
button:hover:not(:disabled){background:var(--mint)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--ink);color:#fff}
button.primary:hover:not(:disabled){background:#2f5246}
button.small{padding:3px 8px;font-size:13px}
button.ghost{border-color:transparent;background:transparent;text-decoration:underline}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
input,select{font:inherit;border:1.5px solid var(--ink);border-radius:6px;padding:5px 8px;background:#fff;color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
header{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:2px solid var(--ink);background:var(--mint);flex-wrap:wrap}
header h1{font-size:24px;letter-spacing:.2px}
header .sub{color:var(--muted);font-size:14px}
header .grow{flex:1}
.conn{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;background:#aab;display:inline-block}
.dot.on{background:#2fa84f}
main{display:grid;grid-template-columns:1fr 380px;height:100%;min-height:0}
#mapcol{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--board)}
#mapwrap{flex:1;overflow:auto;min-height:0}
#map{display:block;width:100%;height:auto}
.maptools{display:flex;gap:8px;align-items:center;padding:6px 12px;border-bottom:1.5px solid var(--line);background:var(--paper);flex-wrap:wrap}
.maptools button{padding:1px 11px;font-size:18px;line-height:1.3}
.maptools .hl{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:6px}
.maptools .ring{width:14px;height:14px;border-radius:50%;border:3px solid var(--brass);display:inline-block}
.maptools .ring.no{border-style:dashed;border-color:#8a9590}
#side{overflow:auto;border-left:2px solid var(--ink);background:var(--paper);padding:14px;display:flex;flex-direction:column;gap:14px;min-height:0}
section.card{background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:12px}
section.card>h2{font-size:17px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
section.card>h2 small{font-family:var(--body);font-weight:500;font-size:12px;color:var(--muted)}
#status{border:2px solid var(--ink);background:var(--mint);border-radius:8px;padding:10px 12px;font-weight:600}
#status.mine{background:#ffe9a8;border-color:var(--brass)}
#status.over{background:#ffd8c2}
#status .why{font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:8px}
.muted{color:var(--muted)}
.err{color:var(--warn);font-size:13px;min-height:1em}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.share{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--ink);border-radius:5px;padding:2px 7px 2px 3px;font-size:12.5px;font-weight:600;background:#fff}
.share .cube{width:14px;height:14px;border-radius:2px;border:1px solid #0006}
.share.charter{background:#fff7e0;border-color:var(--brass)}
.share .div{font-weight:500;color:var(--muted)}
.player{display:grid;grid-template-columns:30px 1fr auto;gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid #e3ece7}
.player:first-of-type{border-top:0}
.player.active{background:linear-gradient(90deg,#ffe9a855,transparent)}
.badge{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.player .name{font-weight:600;display:flex;gap:6px;align-items:center;min-width:0}
.player .name span.n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .money{text-align:right;font-weight:600}
.player .money small{display:block;font-weight:500;color:var(--muted)}
.player .chips{grid-column:2/4}
.tag{font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px;background:#e7efe9;color:var(--muted)}
.tag.you{background:var(--ink);color:#fff}
.tag.turn{background:#ffe9a8;color:#6b4d0b}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:4px 5px;border-top:1px solid #e3ece7;vertical-align:middle}
th{font-weight:600;color:var(--muted);border-top:0;font-size:12px}
td.code{font-weight:700;white-space:nowrap}
tr.hidden td{color:#9aa9a3}
.supply{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;text-align:center;font-size:12px}
.supply .bar{height:46px;border:1.5px solid var(--ink);border-radius:4px;position:relative;background:#f4f4f2;overflow:hidden}
.supply .fill{position:absolute;bottom:0;left:0;right:0}
.supply b{display:block;font-size:14px}
.track{display:flex;gap:6px;margin-top:10px}
.track div{flex:1;text-align:center;border:1.5px solid var(--line);border-radius:6px;padding:4px;font-weight:700;font-size:13px;letter-spacing:.5px}
.track div.on{border-color:var(--ink);background:var(--ink);color:#fff}
.track div small{display:block;font-weight:500;font-size:10.5px;letter-spacing:0}
#log{max-height:260px;overflow:auto;font-size:13px;display:flex;flex-direction:column;gap:4px}
#log div{border-left:3px solid var(--line);padding-left:7px}
.bidbox{display:flex;gap:6px;align-items:center}
.bidbox input{width:80px;text-align:center;font-weight:700;font-size:18px}
.opt{display:flex;gap:8px;align-items:center;justify-content:space-between;border:1.5px solid var(--line);border-radius:6px;padding:6px 8px}
.opt.sel{border-color:var(--ink);background:var(--mint)}
.opt .why{font-size:12px;color:var(--warn)}
.colorbtn{display:inline-flex;align-items:center;gap:6px}
.colorbtn .cube{width:16px;height:16px;border:1px solid #0007;border-radius:3px}
.actgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:6px}
.actgrid button{padding:6px 4px;font-weight:700}
details summary{cursor:pointer;font-weight:600}
details .rules{font-size:13.5px;max-width:65ch}
details .rules li{margin:3px 0}
/* lobby */
#lobby{max-width:980px;margin:0 auto;padding:22px 16px;display:flex;flex-direction:column;gap:18px}
#lobby .hero{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start}
.gamelist{display:flex;flex-direction:column;gap:8px}
.gameitem{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff}
.gameitem h3{font-size:17px}
.seatgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.seat{border:1.5px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;background:#fff}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:8px;font-size:14px;z-index:10;max-width:90vw}
@media (max-width:900px){
  main{grid-template-columns:1fr;height:auto}
  #app{overflow:auto}
  #mapcol{height:62vh}
  #side{border-left:0;border-top:2px solid var(--ink)}
  #lobby .hero{grid-template-columns:1fr}
}

/* ---- hub ---- */
a.brand{color:inherit;text-decoration:none}
nav a{color:var(--ink);font-weight:600;text-decoration:none;padding:4px 8px;border-radius:6px}
nav a:hover,nav a.on{background:#ffffff99}
.pad{padding:20px}
.page{max-width:1040px;margin:0 auto;padding:22px 16px;display:flex;flex-direction:column;gap:18px}
.authwrap{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.authcard{width:min(380px,100%);background:#fff;border:2px solid var(--ink);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:6px 6px 0 var(--mint)}
.authcard h2{font-size:24px}
.authcard label{font-weight:600;font-size:14px}
.authcard input{width:100%}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.gamecard{display:flex;flex-direction:column;gap:8px}
.gamecard .meta{font-size:13px;color:var(--muted)}
.tabs{display:flex;gap:6px}
.tabs button{border-radius:999px;padding:3px 12px;font-size:13px}
.tabs button.on{background:var(--ink);color:#fff}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;font-weight:700;background:#fff7e0;border:1.5px dashed var(--brass);border-radius:6px;padding:8px 12px;letter-spacing:1px}
.notice{background:#fff7e0;border:1.5px solid var(--brass);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px}
td .row{gap:6px}
tr.off td{color:#9aa9a3}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:auto}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form2 .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-weight:600;font-size:13.5px}
@media (max-width:900px){ .cols,.form2{grid-template-columns:1fr} }

.liblist{display:flex;flex-direction:column;gap:6px}
.libitem{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-align:left;background:#fff;border-color:var(--line);padding:9px 12px}
.libitem b{font-family:var(--display);font-size:16px}
.libitem span{font-size:12.5px;white-space:nowrap}
.libitem.on{background:var(--mint);border-color:var(--ink)}
/* undo / replay bar above a game */
.gamewrap{display:flex;flex-direction:column;height:100%;min-height:0}
#gameRoot{flex:1;min-height:0}
.histbar{display:flex;align-items:center;gap:8px;padding:5px 12px;border-bottom:1.5px solid var(--line);background:var(--paper);font-size:13.5px;flex-wrap:wrap}
.histbar .grow{flex:1}
.histbar.replay{background:#fff6dc;border-bottom-color:var(--brass)}
.histbar .hmove{min-width:0;flex:1 1 320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){ .gamewrap{height:auto} .histbar .hmove{white-space:normal} }