/* GALAXY - a mainframe console: phosphor on dark glass, fanfold paper for the
   printout. Everything is monospace because everything in 1971 was. */
:root{
  --paper:#04120c;
  --ink:#5bff9a;
  --dim:#1f6b45;
  --warm:#ffc65b;
  --hot:#ff7a6b;
  --panel:#07190f;
  --edge:#164a30;
  --sheet:#0a2015;
  --text:#bdf3d4;
  --mono:"DejaVu Sans Mono","Liberation Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}
#app{display:flex;flex-direction:column;height:100%}

#masthead{
  display:flex;align-items:center;gap:12px;
  padding:7px 12px;
  border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg,#0b2416,#061a10);
  flex:0 0 auto;flex-wrap:wrap;
}
#masthead .brand{
  font-weight:700;letter-spacing:.34em;color:var(--ink);
  text-shadow:0 0 9px rgba(91,255,154,.55);
}
#mast-turn{color:var(--warm)}
#mast-score{color:#8fd8b2;font-size:12px}
.grow{flex:1 1 auto}

.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  background:#0d2c1c;color:var(--text);
  border:1px solid var(--edge);border-radius:2px;
  padding:5px 9px;cursor:pointer;
}
.chip:hover{border-color:var(--ink);color:#fff}
.chip.on{background:#14472c;border-color:var(--ink);color:#eaffe8}
.chip.go{background:#17532f;border-color:#3fd888;color:#e9fff0;font-weight:700}
.mini{
  font-family:var(--mono);font-size:11px;background:#0d2c1c;color:var(--text);
  border:1px solid var(--edge);border-radius:2px;padding:3px 8px;cursor:pointer;margin-right:5px;
}
.mini.on{background:#14472c;border-color:var(--ink);color:#fff}

#body{display:flex;flex:1 1 auto;min-height:0}
#board{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;background:var(--paper)}
#chart{position:absolute;left:0;top:0;display:block;touch-action:none;cursor:crosshair}
#card{
  position:absolute;display:none;pointer-events:none;
  background:rgba(4,20,12,.94);border:1px solid var(--ink);
  padding:7px 9px;font-size:11px;line-height:1.5;max-width:250px;
  box-shadow:0 0 16px rgba(0,0,0,.7);z-index:5;
}
#card .ct{color:var(--ink);font-weight:700;letter-spacing:.11em}
#card .ct2{color:var(--warm);margin-top:3px}

#console{
  flex:0 0 428px;max-width:52%;
  display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--edge);background:var(--panel);
}
#key{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  padding:7px 10px;border-bottom:1px solid var(--edge);font-size:10px;
}
#key .sw{display:inline-flex;align-items:center;gap:4px;letter-spacing:.06em}
#key .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
#key .sep{width:1px;height:13px;background:var(--edge);margin:0 3px}

#modes{display:flex;gap:6px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.note{font-size:10px;color:#5f9d7d}

#tabs{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border-bottom:1px solid var(--edge)}
.tab{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  background:transparent;color:#79bb96;border:1px solid transparent;
  padding:4px 7px;cursor:pointer;border-radius:2px;
}
.tab:hover{color:#fff}
.tab.on{background:#12402a;border-color:var(--edge);color:#eaffe8}

#pane{flex:1 1 auto;overflow:auto;padding:9px 11px;min-height:0}
.sheet{
  margin:0 0 9px;white-space:pre;font-family:var(--mono);font-size:11.5px;line-height:1.55;
  color:#cdf6de;
  background:repeating-linear-gradient(180deg,var(--sheet),var(--sheet) 18px,#0c2718 18px,#0c2718 36px);
  border:1px solid var(--edge);padding:8px 10px;overflow-x:auto;
}
.rowbar{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.alloc{border:1px solid var(--edge);padding:8px 10px;background:#08200f}
.alloc .hd{color:var(--ink);letter-spacing:.14em;font-size:10.5px;margin-bottom:6px}
.slider{display:grid;grid-template-columns:78px 1fr 42px;align-items:center;gap:7px;margin-bottom:5px}
.slider .lab{font-size:10.5px;letter-spacing:.07em;color:#9fdcbb}
.slider .val{font-size:10.5px;text-align:right;color:var(--warm)}
.slider .note{grid-column:1/-1;margin-top:-3px}
.rng{width:100%;accent-color:#3fd888;height:16px}

#msg{
  padding:6px 11px;font-size:11px;color:var(--warm);
  border-top:1px solid var(--edge);min-height:26px;
}
#orderbar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid var(--edge)}
#orderbar .prompt{color:var(--ink);font-weight:700}
#order{
  flex:1 1 auto;min-width:0;background:#03150c;color:#dcffe9;
  border:1px solid var(--edge);padding:7px 8px;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;
}
#order:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px rgba(91,255,154,.28)}

#setup,#endsheet{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(2,10,6,.9);z-index:20;padding:18px;overflow:auto;
}
#setup[hidden],#endsheet[hidden]{display:none}
.sheetbox{
  width:min(620px,100%);background:var(--panel);border:1px solid var(--ink);
  padding:22px;box-shadow:0 0 44px rgba(0,0,0,.8);
}
.sheetbox h1{
  margin:0 0 6px;font-size:23px;letter-spacing:.4em;color:var(--ink);
  text-shadow:0 0 13px rgba(91,255,154,.4);
}
.sheetbox .sub{margin:0 0 15px;font-size:12px;line-height:1.6;color:#93c9ac}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;letter-spacing:.1em;color:#8fcbaa}
.opts select,.opts input{
  background:#03150c;color:#dcffe9;border:1px solid var(--edge);
  padding:6px 7px;font-family:var(--mono);font-size:12px;
}
.warn{color:var(--warm);font-size:11px;min-height:15px;margin:11px 0 0}
.btns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
#end-body{
  white-space:pre;font-family:var(--mono);font-size:12px;line-height:1.6;
  background:var(--sheet);border:1px solid var(--edge);padding:11px;overflow-x:auto;
}

@media (max-width:900px){
  #body{flex-direction:column}
  #console{flex:1 1 auto;max-width:none;border-left:none;border-top:1px solid var(--edge)}
  #board{flex:0 0 46%}
  .opts{grid-template-columns:1fr}
}