:root{
  --linen:#e7dfcd; --linen2:#f2ecdd; --ink:#2b241c; --ink2:#544835;
  --rule:#a4977c; --warm:#b8492e; --cool:#2f6f96; --gold:#c9a227; --green:#4f8b46;
  --panel:#efe7d5; --shadow:rgba(40,32,20,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#191510;color:var(--ink);
  font:14px/1.45 Georgia,'Iowan Old Style',serif;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
#app{display:flex;flex-direction:column;height:100%}

#mast{display:flex;align-items:center;gap:10px;padding:6px 10px;background:#241d15;
  color:var(--linen);border-bottom:2px solid #0f0c08;flex-wrap:wrap}
#mast h1{font-size:15px;margin:0;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.readout.warm{border-color:#b8862c;color:#f0d79a}
#ver{font:11px ui-monospace,Menlo,Consolas,monospace;color:#9c8b6d;letter-spacing:.04em;
  margin-left:-4px;align-self:center;white-space:nowrap}
#mast .sep{flex:1}
.readout{font:12px/1 ui-monospace,Menlo,Consolas,monospace;background:#1a150f;border:1px solid #453a2a;
  padding:5px 8px;border-radius:2px;white-space:nowrap}
.readout b{color:var(--gold);font-weight:400}
button{background:var(--linen);border:1px solid #6d6047;padding:5px 10px;border-radius:2px;cursor:pointer;
  color:var(--ink);box-shadow:0 1px 0 var(--shadow)}
button:hover{background:#fff8e6}
button:disabled{opacity:.45;cursor:default}

button.primary{background:var(--gold);border-color:#8a6f16}
button.chip{padding:3px 8px;font-size:12px}
button.chip.on{background:var(--cool);color:#fff;border-color:#1c4a63}

main{flex:1;display:flex;min-height:0}
#glasswrap{flex:1;position:relative;min-width:0;background:#1d1913}
/* ONE CURSOR AT A TIME. When the weave is being walked from the keyboard the
   system pointer is still sitting wherever it was left, and the player sees
   two marks: the ring the game moved and the arrow it did not. While the
   keyboard has the cursor the pointer is hidden; the first mouse movement
   brings it back. */
#glasswrap.keyed, #glasswrap.keyed canvas{cursor:none}
/* the cloth sits between two columns: what is TRUE on the left, what you may
   DO on the right */
#info{width:300px;flex:none;background:var(--linen2);border-right:2px solid #0f0c08;
  display:flex;flex-direction:column;overflow:hidden}
#infobody{flex:1;overflow:auto;padding:8px 10px}
#infobody .rows{margin-bottom:6px}
#infobody h3{margin-top:10px}
#chronroll{font-size:11px;line-height:1.5}
#chronroll div{padding:2px 0;border-bottom:1px dotted var(--rule)}
#glass{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}

#ledger{width:372px;flex:none;background:var(--linen);border-left:2px solid #0f0c08;
  display:flex;flex-direction:column;min-height:0}
#legend{display:flex;flex-wrap:wrap;gap:5px 10px;padding:7px 9px;border-bottom:1px solid var(--rule);
  font:11px/1.2 ui-monospace,Menlo,monospace}
#legend span{display:flex;align-items:center;gap:4px}
#legend i{width:10px;height:10px;display:inline-block;border:1px solid #2b241c}
#legend .rule{width:100%;height:1px;background:var(--rule);margin:1px 0}
#tabs{display:flex;border-bottom:1px solid var(--rule);background:#ded5c0}
#tabs button{flex:1;border:0;border-right:1px solid var(--rule);border-radius:0;background:transparent;
  font-size:11px;letter-spacing:.02em;text-transform:uppercase;padding:7px 1px;box-shadow:none;
  min-width:0;white-space:nowrap}
#tabs button:last-child{border-right:0}
#tabs button.on{background:var(--linen2);font-weight:700;box-shadow:inset 0 -3px 0 var(--warm)}
#pane{flex:1;overflow:auto;padding:10px}
.card.court{border-left:3px solid var(--rule)}
.card.court.truce{border-left-color:#5b7ea6}
.card.court.pact{border-left-color:#3f7a52}
.card.court.war{border-left-color:#9a3b2c}
button.chip.warn{border-color:#9a3b2c;color:#7d2f22}
h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;font-weight:400;
  border-bottom:1px solid var(--rule);padding-bottom:3px}
h3{font-size:12px;margin:12px 0 4px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.mono{font:12px/1.4 ui-monospace,Menlo,monospace}
.rows{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font:12px/1.5 ui-monospace,Menlo,monospace}
.rows b{font-weight:700}
.note{color:#6a5c46;font-size:12px}
.card.warn{border-color:#a8762c;background:#fbf3df}
.card{border:1px solid var(--rule);background:var(--linen2);padding:7px 8px;margin-bottom:7px;border-radius:2px}
.card.pick{cursor:pointer}
.card.pick:hover{background:#fff8e6}
.card.sel{outline:2px solid var(--warm)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:5px 0}
.bar{height:8px;background:#d3c8ae;border:1px solid var(--rule);position:relative;flex:1;min-width:60px}
.bar i{display:block;height:100%;background:var(--cool)}
#loomcv{width:100%;height:190px;display:block;border:1px solid var(--rule);background:var(--panel)}
input[type=range]{width:100%}
.slot{display:flex;align-items:center;gap:7px;margin:3px 0}
.slot label{width:52px;font:11px ui-monospace,Menlo,monospace;letter-spacing:.06em}
ul.tight{margin:4px 0;padding-left:18px}
ul.tight li{margin:2px 0}

/* ---- sheets ---- */
.sheet{position:fixed;inset:0;background:rgba(20,16,11,.86);display:flex;align-items:center;
  justify-content:center;z-index:20;padding:14px;overflow:auto}
.sheet[hidden]{display:none}
.sheetbox{background:var(--linen);border:2px solid #0f0c08;max-width:940px;width:100%;
  max-height:96vh;overflow:auto;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.sheetbox h1{font-size:22px;margin:0 0 2px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.sheetbox .sub{color:#6a5c46;margin:0 0 12px;font-style:italic}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{border:1px solid var(--rule);background:var(--linen2);padding:6px 8px;cursor:pointer;border-radius:2px}
.opt.on{outline:2px solid var(--warm);background:#fff8e6}
.opt b{display:block}
.bookrow{display:flex;align-items:center;gap:8px;margin:4px 0}
.bookrow .nm{width:66px;font:12px ui-monospace,Menlo,monospace}
.pips{display:flex;gap:3px}
.pips i{width:14px;height:16px;border:1px solid #6d6047;background:#ddd2b8;display:inline-block;cursor:pointer}
.pips i.on{background:var(--warm)}
.budget{font:13px ui-monospace,Menlo,monospace;padding:6px 8px;border:1px solid var(--rule);background:#fff8e6}
.bad{color:#9b2f1f}

/* ---- battle ---- */
#field .sheetbox{max-width:1180px}
#fieldcv{width:100%;height:auto;aspect-ratio:16/9;border:1px solid #0f0c08;background:#ded4bd;display:block;cursor:pointer}
#fieldside{display:grid;grid-template-columns:1fr 300px;gap:12px}
#fieldlog{height:150px;overflow:auto;border:1px solid var(--rule);background:var(--linen2);padding:6px;
  font:12px/1.4 ui-monospace,Menlo,monospace}

@media (max-width:900px){
  main{flex-direction:column}
  #ledger{width:auto;height:40%;border-left:0;border-top:2px solid #0f0c08}
  #info{width:auto;height:24%;border-right:0;border-bottom:2px solid #0f0c08;order:3}
  #glasswrap{height:36%}
  #fieldside{grid-template-columns:1fr}
  .cols,.cols3{grid-template-columns:1fr}
  #mast h1{font-size:12px}
  #ver{font-size:10px}
  /* six tabs must fit the narrowest window without the last one falling off
     the edge — the row is the control, not a scrolling strip */
  #tabs button{font-size:10px;letter-spacing:0;padding:6px 0}
}