:root{
  --paper:#e9e0c8; --ink:#1d232c; --panel:#f3ecd9; --rule:#c3b795;
  --blue:#2f5fa8; --red:#a83030; --brass:#a8823c; --fire:#8c3a24;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0e1620;color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
#app{display:flex;flex-direction:column;height:100%}
#bar{display:flex;align-items:center;gap:.7rem;padding:.45rem .8rem;background:#182432;color:#efe6cf;
  border-bottom:2px solid var(--brass);flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.95rem}
.chips{display:flex;gap:.35rem;flex-wrap:wrap;flex:1}
.chip{background:#22334a;border:1px solid #3d5776;border-radius:2px;
  padding:.16rem .5rem;font-size:.76rem;font-variant-numeric:tabular-nums}
.chip.blue{background:var(--blue);border-color:#7ea2d6}
.chip.red{background:var(--red);border-color:#d68585}
.acts{display:flex;gap:.4rem}
button{font:inherit;font-size:.82rem;padding:.3rem .6rem;border:1px solid var(--rule);
  background:var(--panel);color:var(--ink);border-radius:2px;cursor:pointer}
button:hover:not(:disabled){background:#fff8e6}
button:disabled{opacity:.45;cursor:default}
button.on{background:var(--brass);color:#fff;border-color:#7a5c25}
button.fire{background:var(--fire);color:#f7ecd8;border-color:#5d2415;font-weight:600}
button.ghost{background:transparent;color:#efe6cf;border-color:#4c637f}
button.wide{display:block;width:100%;margin:.45rem 0;padding:.5rem}
main{flex:1;display:flex;min-height:0}
#plate{flex:1;min-width:0;display:block;touch-action:none;cursor:grab}
#panel{width:330px;flex:none;background:var(--paper);border-left:2px solid var(--brass);
  overflow-y:auto;padding:.6rem}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:2px;padding:.55rem;margin-bottom:.55rem}
.card h3{margin:0 0 .35rem;font-size:.85rem;letter-spacing:.07em;text-transform:uppercase;color:#5a4a2a}
.card p{margin:.25rem 0;font-size:.82rem;line-height:1.35}
.muted{color:#6c6350;font-size:.78rem}
.fine{color:#6c6350;font-size:.72rem}
.odds{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;font-weight:600}
.row{display:flex;gap:.3rem;margin:.35rem 0}
.row.wrap{flex-wrap:wrap}
.units{display:flex;flex-direction:column;gap:.25rem;margin:.35rem 0}
.unit{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:.3rem .45rem;gap:.05rem}
.unit b{font-size:.8rem}
.unit .nums{font-family:ui-monospace,monospace;font-size:.7rem;color:#6c6350}
.unit.on{background:var(--brass);color:#fff}
.unit.on .nums{color:#f4e9cf}
.unit.red{border-left:4px solid var(--red)}
.unit.blue{border-left:4px solid var(--blue)}
.unit.spent{opacity:.5}
.buy{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}
.buy button{display:flex;flex-direction:column;align-items:center;padding:.25rem 0}
.buy .nums{font-family:ui-monospace,monospace;font-size:.68rem;color:#6c6350}
.crtgrid{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.66rem;margin:.3rem 0}
.crtrow{display:grid;grid-template-columns:2.4rem repeat(6,1fr);gap:1px}
.crtrow.head .cell{background:#dfd3b4;color:#5a4a2a}
.crtrow .lbl{background:#dfd3b4;color:#3b3222;text-align:center;padding:.12rem 0}
.crtrow .cell{background:#efe7d2;text-align:center;padding:.12rem 0;color:#3b3222}
.crtrow.live .lbl{background:var(--brass);color:#fff;font-weight:700}
.crtrow.live .cell{background:#fbf3dd;font-weight:700}
.cell.rAE,.cell.rAR{color:#8c2a1e}
.cell.rDE,.cell.rDR{color:#1f5a33}
.cell.stamp{background:var(--fire)!important;color:#fff!important;box-shadow:inset 0 0 0 2px #2b0f08}
.log{max-height:12rem;overflow-y:auto}
.line{font-size:.75rem;margin:.12rem 0;padding-left:.4rem;border-left:3px solid #cdbf9c}
.line.blue{border-left-color:var(--blue)}
.line.red{border-left-color:var(--red)}
#sheet{position:fixed;inset:0;background:rgba(10,16,24,.86);display:none;align-items:center;
  justify-content:center;padding:1rem;z-index:20}
#sheet.open{display:flex}
.sheetInner{position:relative;background:var(--paper);border:2px solid var(--brass);border-radius:3px;
  max-width:34rem;width:100%;max-height:92vh;overflow-y:auto;padding:1.2rem}
.sheetInner h1{margin:0 0 .2rem;font-size:1.8rem;letter-spacing:.2em;text-transform:uppercase}
.sheetInner h2{margin:.2rem 0 .6rem;font-size:1.1rem}
.sheetInner h3{margin:.9rem 0 .3rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#5a4a2a}
.sheetInner ul{margin:.4rem 0;padding-left:1.1rem}
.sheetInner li{font-size:.85rem;line-height:1.45;margin:.25rem 0}
.lede{font-size:.95rem;color:#4a4231;margin:.2rem 0 .8rem}
.close{position:absolute;top:.5rem;right:.6rem;background:transparent;border:none;font-size:1.3rem;line-height:1}
@media (max-width:820px){
  main{flex-direction:column}
  #plate{height:56vh;flex:none}
  #panel{width:auto;border-left:none;border-top:2px solid var(--brass);flex:1}
  .brand{font-size:.8rem}
}

/* hover card — what is standing on the hex under the pointer */
#tip{position:fixed;z-index:30;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .09s ease,transform .09s ease;
  max-width:20rem;background:#f6efdc;color:var(--ink);border:1px solid var(--brass);
  border-radius:2px;padding:.4rem .5rem;box-shadow:0 6px 18px rgba(8,12,18,.45);font-size:.78rem;line-height:1.32}
#tip.on{opacity:1;transform:translateY(0)}
#tip .ground{font-weight:700;letter-spacing:.03em}
#tip .note{color:#6c6350;font-size:.72rem}
#tip .u{display:flex;gap:.35rem;align-items:baseline;margin-top:.28rem;padding-left:.4rem;border-left:3px solid #cdbf9c}
#tip .u.blue{border-left-color:var(--blue)}
#tip .u.red{border-left-color:var(--red)}
#tip .u b{font-size:.78rem}
#tip .u span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;color:#6c6350}
#tip .flag{color:#8c3a24;font-size:.7rem}
@media (max-width:820px){#tip{display:none}}