/* Glutwell — one shaft, one action. Brutalist slabs: Anton for anything that counts, mono for anything that is read.
   The page has no top bar: identity and the wallet live on a spine down the left of the object. */
:root{
  --pit:#08060F;        /* the ground */
  --stone:#171326;      /* the shaft */
  --stone-lit:#241E3A;  /* its lit face */
  --cut:#2A1F55;        /* hairlines */
  --ink:#EDE9F7;
  --dim:#8F86B8;
  --draw:#7B61FF;       /* the one accent: what has been drawn */
  --draw-low:#4A37B5;
  --brim:#C9BEFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--pit);color:var(--ink);
  font:400 15px/1.5 "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---- the rig: spine on the left, object filling the rest ---- */
.gw-rig{min-height:100%;display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr auto auto}
.gw-spine{
  grid-row:1 / span 3;border-right:1px solid var(--cut);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:14px 0 12px;gap:12px;position:sticky;top:0;height:100vh;
}
.gw-word{
  font-family:Anton,Impact,sans-serif;font-size:19px;letter-spacing:.14em;text-transform:uppercase;
  writing-mode:vertical-rl;text-orientation:mixed;text-decoration:none;color:var(--ink);
}
.gw-spine-meta{
  writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.18em;color:var(--dim);
  text-transform:uppercase;flex:1;display:flex;align-items:center;
}
.gw-key{
  writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--cut);padding:9px 3px;
}
.gw-key[data-on]{color:var(--brim);border-color:var(--draw-low)}
.gw-body{padding:18px 16px 4px;min-width:0}

/* ---- the headline count ---- */
.gw-count{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.gw-tally{
  font-family:Anton,Impact,sans-serif;font-size:clamp(66px,23vw,128px);line-height:.82;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.gw-tally[data-over]{color:var(--draw)}
.gw-said{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);max-width:16ch}
.gw-said b{display:block;color:var(--ink);font-weight:700}
.gw-said code{text-transform:none;letter-spacing:.04em}
.gw-clock{margin:10px 0 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);display:flex;gap:14px;flex-wrap:wrap}
.gw-clock b{color:var(--ink);font-weight:700}

/* ---- the shaft ---- */
.gw-shaft{
  position:relative;height:min(46vh,340px);border:1px solid var(--cut);background:var(--stone);
  overflow:hidden;display:flex;flex-direction:column-reverse;
}
.gw-shaft::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.34),transparent 38%);pointer-events:none}
.gw-slab{
  position:relative;min-height:13px;background:var(--draw-low);border-top:1px solid var(--pit);
  display:flex;align-items:flex-start;justify-content:flex-end;padding:3px 7px 0 0;
  font-size:10px;letter-spacing:.08em;color:var(--brim);overflow:hidden;
  transition:height .45s cubic-bezier(.2,.8,.2,1);
}
.gw-slab[data-mine]{background:var(--draw)}
.gw-slab[data-spill]{background:var(--draw);color:var(--pit);font-weight:700;border-top-color:var(--brim)}
.gw-ghost{color:var(--pit);font-weight:700;background:repeating-linear-gradient(135deg,var(--draw) 0 5px,transparent 5px 10px);opacity:.85}
.gw-brim{
  position:absolute;left:0;right:0;height:0;border-top:2px solid var(--brim);
  transition:bottom .45s cubic-bezier(.2,.8,.2,1);z-index:3;
}
.gw-brim span{
  /* hangs off the LEFT under the rule: the slab hands are right-aligned, so a full well would bury it there */
  position:absolute;left:0;top:0;padding:2px 6px 3px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pit);background:var(--brim);font-weight:700;
}
.gw-shaft[data-spilling]{border-color:var(--draw)}
.gw-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-align:center;padding:0 24px;
}

/* ---- the staves: the one action ---- */
.gw-staves{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:14px 0 0}
.gw-stave{
  border:1px solid var(--cut);background:var(--stone);padding:11px 0 9px;
  font-family:Anton,Impact,sans-serif;font-size:25px;line-height:1;text-align:center;color:var(--dim);
  transition:background .14s,color .14s,border-color .14s;
}
.gw-stave:hover{border-color:var(--draw-low);color:var(--ink)}
.gw-stave[aria-pressed="true"]{background:var(--draw);border-color:var(--draw);color:var(--pit)}
.gw-stave small{display:block;font-family:"Space Mono",monospace;font-size:8.5px;letter-spacing:.1em;margin-top:4px;opacity:.75}
.gw-note{margin-top:9px;font-size:12px;color:var(--dim);min-height:2.6em}
.gw-note b{color:var(--ink)}
.gw-note[data-warn]{color:var(--brim)}
.gw-go{
  width:100%;margin-top:10px;padding:16px;border:1px solid var(--draw);background:var(--draw);color:var(--pit);
  font-family:Anton,Impact,sans-serif;font-size:19px;letter-spacing:.08em;text-transform:uppercase;
}
.gw-go[disabled]{background:transparent;color:var(--dim);border-color:var(--cut);cursor:not-allowed}
.gw-bell{width:100%;margin-top:10px;padding:14px;border:1px solid var(--brim);color:var(--brim);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase}

/* ---- the seat ledger ---- */
.gw-seats{margin-top:20px;border-top:1px solid var(--cut)}
.gw-seat{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--cut);font-size:12.5px;
}
.gw-seat em{font-style:normal;font-family:Anton,Impact,sans-serif;font-size:19px;color:var(--draw);min-width:1.2em}
.gw-seat code{color:var(--dim);font-size:11.5px;overflow-wrap:anywhere}
.gw-seat i{font-style:normal;color:var(--dim);font-size:11px;letter-spacing:.08em;white-space:nowrap}
.gw-seat[data-mine]{background:linear-gradient(90deg,rgba(123,97,255,.14),transparent 60%)}

/* ---- headings, prose, tables shared by the other four views ---- */
.gw-head{font-family:Anton,Impact,sans-serif;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:22px 0 9px}
.gw-prose p{margin:0 0 13px;max-width:62ch;color:var(--ink)}
.gw-prose p b{color:var(--brim)}
.gw-rule{border:0;border-top:1px solid var(--cut);margin:18px 0}
.gw-list{list-style:none}
.gw-row{
  /* two lines at phone width: the count and the verdict read first, the particulars sit under them */
  display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--cut);text-decoration:none;
}
.gw-row i{grid-column:1 / -1}
.gw-row em{font-style:normal;font-family:Anton,Impact,sans-serif;font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.gw-row i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.gw-row b[data-held]{color:var(--brim)}
.gw-row b[data-dry]{color:var(--draw)}
.gw-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;background:var(--cut);border:1px solid var(--cut);margin:12px 0}
.gw-fig{background:var(--pit);padding:12px 11px}
.gw-fig span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.gw-fig b{font-family:Anton,Impact,sans-serif;font-size:26px;font-weight:400;font-variant-numeric:tabular-nums}

/* ---- ways + plate ---- */
.gw-ways{display:flex;gap:2px;padding:0 16px;margin-top:22px}
.gw-ways a{
  flex:1;text-align:center;padding:13px 4px;border:1px solid var(--cut);border-bottom:0;text-decoration:none;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.gw-ways a[aria-current]{color:var(--pit);background:var(--brim);border-color:var(--brim)}
.gw-plate{padding:14px 16px 26px;border-top:1px solid var(--cut);font-size:11px;color:var(--dim);line-height:1.9}
.gw-plate a{color:var(--brim)}
.gw-plate code{overflow-wrap:anywhere}
.gw-plate span{display:block}
.gw-buy{
  display:block;text-align:center;padding:14px;margin-bottom:12px;text-decoration:none;
  border:1px solid var(--brim);color:var(--brim);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
.gw-say{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;max-width:min(92vw,420px);
  background:var(--stone-lit);border:1px solid var(--draw-low);color:var(--ink);
  padding:12px 15px;font-size:12.5px;line-height:1.45;
}
.gw-say[data-bad]{border-color:var(--brim);color:var(--brim)}

@media (min-width:760px){
  .gw-rig{grid-template-columns:56px minmax(0,640px)}
  .gw-body{padding:26px 26px 6px}
  .gw-shaft{height:min(52vh,420px)}
  .gw-ways,.gw-plate{padding-left:26px;padding-right:26px}
}