/* ============================================================================
   Side B — the console. Past the horizon there is only green.
   ============================================================================ */

.console{
  --p:#34ff6e;
  --p-mid:rgba(52,255,110,.55);
  --p-dim:rgba(52,255,110,.34);
  --p-faint:rgba(52,255,110,.13);
  position:relative;background:#000;min-height:100vh;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--p);padding:clamp(14px,3vw,34px) 12px 44px;
  animation:wake .6s ease-out both;
}
@keyframes wake{from{opacity:0}to{opacity:1}}

.crt{position:relative;z-index:1;width:100%;max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  text-shadow:0 0 6px rgba(52,255,110,.55),0 0 18px rgba(52,255,110,.25)}

/* ------------------------------- boot ------------------------------------ */
.boot{font-size:clamp(.62rem,2.1vw,.86rem);line-height:1.5;white-space:pre;
  margin-bottom:clamp(10px,2.5vw,24px);min-height:1.5em;letter-spacing:.02em;
  text-align:left}
/* Once the board is up the log stands down to one line, so the board gets
   the height instead of the transcript. */
.boot.done{font-size:clamp(.5rem,1.5vw,.66rem);color:var(--p-dim);
  margin-bottom:clamp(6px,1.4vw,12px);min-height:0;letter-spacing:.1em}

/* ------------------------------- board ----------------------------------- */
.c-wrap{width:100%;display:flex;flex-direction:column;align-items:center;
  animation:wake .5s ease-out both}

.c-board{
  width:min(96vw,860px,74vh); aspect-ratio:1; display:grid;
  grid-template-columns:1.45fr repeat(9,1fr) 1.45fr;
  grid-template-rows:1.45fr repeat(9,1fr) 1.45fr;
  border:1px solid var(--p-dim); padding:3px; gap:1px;
}

.c-tile{
  background:#000;border:1px solid var(--p-faint);color:var(--p-mid);
  font-family:inherit;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25em;padding:2px;line-height:1;
  transition:background .1s,color .1s;
  container-type:size;
}
.c-tile:hover{background:rgba(52,255,110,.1);color:var(--p)}
.c-tile:focus-visible{outline:1px solid var(--p);outline-offset:-2px}
.c-tile.here{background:rgba(52,255,110,.18);color:var(--p);
  border-color:var(--p);box-shadow:inset 0 0 10px rgba(52,255,110,.35)}

/* Console tiles are not rotated, so a line runs the tile's width — cqw, not
   cqmin. Scales with the board instead of the window. */
.c-band{font-size:11cqw;letter-spacing:-.06em;
  opacity:.75;white-space:nowrap;overflow:hidden}
.c-name{font-size:14cqw;text-transform:uppercase;
  letter-spacing:.02em;text-align:center;overflow-wrap:break-word;
  max-height:3.2em;overflow:hidden}

.c-corner .c-name{font-size:13cqw;font-weight:600}
.c-void{background:radial-gradient(circle,#000 30%,rgba(52,255,110,.14) 100%)}
.c-void .c-band{opacity:1;color:var(--p)}
.c-draw .c-name{font-size:20cqw;font-weight:600;color:var(--p)}
.c-blank{color:var(--p-faint)}
.c-blank .c-band{opacity:.35}

/* ------------------------------- centre ----------------------------------
   The wordmark is anchored, not laid out in flow. In a flex column it moved
   every time a square was read, because each message is a different height.
   Now the logo owns a fixed point and the readout owns its own fixed box
   underneath — text can be one line or eight and the mark does not budge. */
.c-centre{grid-row:2/11;grid-column:2/11;position:relative;
  padding:3%;overflow:hidden;text-align:center}
/* Block-letter ASCII holds together only at line-height 1 with zero tracking.
   It must also be left-aligned inside a shrink-wrapped box: the four lines are
   different lengths, so inheriting the centre alignment offsets each one by a
   different amount and the letterforms come apart. */
.c-logo{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);
  font-size:clamp(.3rem,1.15vw,.78rem);line-height:1;white-space:pre;
  color:var(--p);letter-spacing:0;font-weight:500;
  text-align:left;margin:0;
  text-shadow:0 0 8px rgba(52,255,110,.7)}
.c-tagline{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  font-size:clamp(.5rem,1.4vw,.8rem);color:var(--p-mid);margin:0;width:90%}

.c-readout{position:absolute;left:50%;top:47%;transform:translateX(-50%);
  width:min(46ch,94%);height:48%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  font-size:clamp(.46rem,1.4vw,.82rem);line-height:1.6}
.c-ro-head{color:var(--p);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.5em}
.c-ro-text{color:var(--p-mid)}
.c-ro-text.c-lost{color:var(--p-faint);letter-spacing:.18em;text-transform:uppercase}
.flick{animation:flick .18s steps(2) 1}
@keyframes flick{0%{opacity:.25}50%{opacity:.85}100%{opacity:1}}

/* -------------------------------- play ----------------------------------- */
.c-play{margin-top:clamp(14px,3vw,26px);display:flex;align-items:center;
  gap:16px;flex-wrap:wrap;justify-content:center}
.c-dice{font-size:clamp(.9rem,3vw,1.35rem);letter-spacing:.1em;color:var(--p)}
.c-btn{font-family:inherit;font-size:clamp(.72rem,2vw,.95rem);font-weight:600;
  letter-spacing:.14em;color:#000;background:var(--p);border:1px solid var(--p);
  padding:.55em 1.4em;cursor:pointer;text-shadow:none;
  box-shadow:0 0 14px rgba(52,255,110,.5)}
.c-btn:hover{background:#000;color:var(--p);text-shadow:0 0 8px rgba(52,255,110,.8)}
.c-btn[disabled]{opacity:.4;cursor:wait}
.c-hint{margin-top:12px;font-size:clamp(.56rem,1.6vw,.78rem);
  color:var(--p-faint);letter-spacing:.24em;text-transform:uppercase}

/* ------------------------------ scanlines -------------------------------- */
.scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.28) 3px, rgba(0,0,0,.28) 4px);
  animation:roll 9s linear infinite}
@keyframes roll{to{background-position:0 400px}}
.scanlines::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 50%,
    transparent 52%, rgba(0,0,0,.6) 100%)}

@media (max-width:620px){
  .c-tile:not(.c-corner):not(.c-draw) .c-name{display:none}
  .c-band{font-size:.34rem}
}
@media (prefers-reduced-motion:reduce){
  .console,.c-wrap,.scanlines,.flick{animation:none!important}
}