:root {
  --bg: #07070f;
  --panel: #0e0e1c;
  --panel-2: #13132a;
  --line: #2a2a4a;
  --text: #e8e8ff;
  --dim: #8a8ab0;
  --laya: #37f5c7;
  --laya-dim: #147a63;
  --jev: #ff5fd2;
  --jev-dim: #7e2c6a;
  --human: #ffd23f;
  --human-dim: #7d6717;
  --danger: #ff4b4b;
  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-term: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-term); font-size: 20px; }
button, input, select { font-family: inherit; }
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

/* CRT shell */
.crt { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(ellipse at center, #10102a 0%, #07070f 70%); }
.crt::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; }
.crt::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 51;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.65) 100%);
  animation: flicker 6s infinite; }
@keyframes flicker { 0%,100% { opacity: 1 } 92% { opacity: 1 } 93% { opacity: .92 } 94% { opacity: 1 } 97% { opacity: .96 } }

/* masthead */
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 24px; border-bottom: 2px solid var(--line);
  background: linear-gradient(180deg, #0e0e22, #07070f); }
.logo { font-family: var(--font-pixel); font-size: 18px; letter-spacing: 2px; display: flex; gap: 12px; align-items: baseline; }
.logo-sys { color: var(--text); text-shadow: 0 0 8px rgba(232,232,255,.6); }
.logo-arena { color: var(--human); text-shadow: 0 0 10px var(--human); font-size: 22px; }
.vs-line { font-family: var(--font-pixel); font-size: 14px; display: flex; gap: 14px; align-items: center; }
.tag { padding: 6px 10px; border: 2px solid; }
.tag.laya { color: var(--laya); border-color: var(--laya); text-shadow: 0 0 8px var(--laya); box-shadow: inset 0 0 12px rgba(55,245,199,.15); }
.tag.human { color: var(--human); border-color: var(--human); text-shadow: 0 0 8px var(--human); box-shadow: inset 0 0 12px rgba(255,210,63,.15); }
.tag.jev { color: var(--jev); border-color: var(--jev); text-shadow: 0 0 8px var(--jev); box-shadow: inset 0 0 12px rgba(255,95,210,.15); }
.vs { color: var(--danger); text-shadow: 0 0 8px var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .5 } }
.masthead-right { justify-self: end; display: flex; gap: 12px; align-items: center; }
.conn { font-family: var(--font-pixel); font-size: 10px; color: var(--danger); }
.conn.on { color: var(--laya); }

/* buttons */
.btn { font-family: var(--font-pixel); font-size: 14px; padding: 14px 22px; background: var(--panel-2); color: var(--text);
  border: 3px solid var(--text); box-shadow: 4px 4px 0 #000; cursor: pointer; text-transform: uppercase; }
.btn:hover { background: #1c1c3c; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #000; }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; }
.btn.tiny { font-size: 9px; padding: 8px 10px; border-width: 2px; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.ghost { border-color: var(--dim); color: var(--dim); }
.btn.start { font-size: 18px; border-color: var(--human); color: var(--human); text-shadow: 0 0 10px var(--human);
  animation: blink 1.4s steps(2) infinite; margin-top: 8px; align-self: center; }
.btn.start:disabled { animation: none; opacity: .4; cursor: not-allowed; }
@keyframes blink { 50% { color: #fff; text-shadow: 0 0 16px var(--human); } }

/* menu */
.screen { flex: 1; display: flex; flex-direction: column; }
.menu { align-items: center; gap: 18px; padding: 10px 20px 30px; }
.marquee { width: 100%; overflow: hidden; white-space: nowrap; border-bottom: 1px dashed var(--line); padding: 8px 0; color: var(--dim);
  font-family: var(--font-pixel); font-size: 10px; }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
.cabinet { width: min(980px, 100%); background: var(--panel); border: 3px solid var(--line); padding: 22px 26px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 0 0 4px #000, 0 0 40px rgba(55,245,199,.08); }
.menu-row { display: flex; flex-direction: column; gap: 10px; }
.menu-row.players { flex-direction: row; gap: 26px; }
.player-pick { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.menu-label { font-family: var(--font-pixel); font-size: 10px; color: var(--dim); letter-spacing: 1px; }
.choices { display: flex; gap: 12px; }
.choice { flex: 1; font-family: var(--font-pixel); font-size: 12px; padding: 14px 10px; background: #0a0a18; color: var(--dim);
  border: 3px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.choice small { font-family: var(--font-term); font-size: 15px; color: var(--dim); line-height: 1; }
.choice-icon { font-size: 22px; line-height: 1; }
.choice:hover { border-color: var(--dim); color: var(--text); }
.choice.on { color: var(--text); border-color: var(--human); box-shadow: 0 0 14px rgba(255,210,63,.25), inset 0 0 14px rgba(255,210,63,.1); }
.choice { position: relative; }
.choice.on::before { content: "▶"; color: var(--human); position: absolute; left: 10px; top: 10px; font-size: 10px; }
.choice.laya.on { border-color: var(--laya); color: var(--laya); box-shadow: 0 0 14px rgba(55,245,199,.3); }
.choice.jev.on { border-color: var(--jev); color: var(--jev); box-shadow: 0 0 14px rgba(255,95,210,.3); }
.choice.human.on { border-color: var(--human); color: var(--human); }
.choice:disabled { opacity: .35; cursor: not-allowed; }
/* Unavailable, but still clickable so it can explain itself. */
.choice.unavailable { opacity: .45; }
.choice.unavailable:hover { opacity: .75; border-color: var(--human); }
.menu-row.options { flex-direction: row; gap: 28px; align-items: center; font-family: var(--font-pixel); font-size: 10px; color: var(--dim); }
.menu-row.options label { display: flex; gap: 10px; align-items: center; }
input, select { background: #0a0a18; color: var(--text); border: 2px solid var(--line); padding: 6px 8px; font-size: 18px; font-family: var(--font-term); width: 140px; }
.menu-note { font-family: var(--font-term); color: var(--danger); text-align: center; min-height: 22px; }
.howto { color: var(--dim); font-size: 18px; text-align: center; line-height: 1.6; }
.howto b { color: var(--human); font-family: var(--font-pixel); font-size: 10px; margin-right: 8px; }

/* arena chrome */
.arena { padding: 10px 18px 16px; gap: 12px; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-family: var(--font-pixel); font-size: 11px; color: var(--dim);
  border: 2px solid var(--line); background: var(--panel); padding: 8px 14px; }
.topbar-mid { color: var(--human); text-shadow: 0 0 8px var(--human); font-size: 13px; }
.topbar-right { justify-self: end; display: flex; gap: 8px; }

.lane-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-pixel); border-bottom: 2px solid var(--line); padding-bottom: 8px; }
.lane-name { font-size: 16px; }
.lane-model { font-family: var(--font-term); font-size: 15px; color: var(--dim); text-align: right; }
.lane.laya .lane-name, .card.laya .lane-name { color: var(--laya); text-shadow: 0 0 10px var(--laya); }
.lane.jev .lane-name, .card.jev .lane-name { color: var(--jev); text-shadow: 0 0 10px var(--jev); }
.lane.human .lane-name, .card.human .lane-name { color: var(--human); text-shadow: 0 0 10px var(--human); }

/* tetris */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; flex: 1; }
.lane { background: var(--panel); border: 3px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.lane.laya { border-color: var(--laya-dim); } .lane.jev { border-color: var(--jev-dim); } .lane.human { border-color: var(--human-dim); }
.lane-body { display: flex; gap: 12px; justify-content: center; }
.side { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 72px; }
.mini-label { font-family: var(--font-pixel); font-size: 8px; color: var(--dim); }
canvas.next { background: #05050c; border: 2px solid var(--line); image-rendering: pixelated; }
.garbage-meter { width: 14px; height: 120px; border: 2px solid var(--line); background: #05050c; display: flex; align-items: flex-end; }
.garbage-fill { width: 100%; height: 0; background: var(--danger); box-shadow: 0 0 8px var(--danger); transition: height .2s; }
.board-wrap { position: relative; }
canvas.board { background: #05050c; border: 3px solid var(--line); box-shadow: 0 0 0 2px #000, 0 0 24px rgba(0,0,0,.6); image-rendering: pixelated; display: block; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none;
  font-family: var(--font-pixel); font-size: 14px; color: var(--danger); text-shadow: 0 0 10px var(--danger); background: rgba(0,0,0,0); line-height: 1.8; }
.overlay.dead { background: rgba(0,0,0,.6); }
.overlay.win { color: var(--human); text-shadow: 0 0 10px var(--human); background: rgba(0,0,0,.35); }
.think { font-family: var(--font-pixel); font-size: 8px; color: var(--dim); position: absolute; top: 6px; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity .1s; }
.think.on { opacity: 1; }
.think.on span { animation: pulse .6s infinite; }
.card .think { position: static; text-align: left; min-height: 12px; }
.lane.laya .think.on span { color: var(--laya); } .lane.jev .think.on span { color: var(--jev); }
.scoreboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.scoreboard div { background: #0a0a18; border: 2px solid var(--line); padding: 6px; text-align: center; }
.scoreboard small { display: block; font-family: var(--font-pixel); font-size: 7px; color: var(--dim); margin-bottom: 4px; }
.scoreboard b { font-family: var(--font-pixel); font-size: 13px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 10px; font-size: 17px; }
.stats div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line); }
.stats span:first-child { color: var(--dim); }
.stats span:last-child { color: var(--text); }

.decision { background: #05050c; border: 2px solid var(--line); padding: 8px 10px; min-height: 150px; font-size: 16px; line-height: 1.25; }
.decision .q-state { color: var(--dim); margin-bottom: 4px; }
.decision .q-instr { color: var(--text); margin-bottom: 6px; }
.decision .opt { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; padding: 2px 0; }
.decision .bar { height: 12px; background: #15152c; position: relative; }
.decision .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dim); }
.decision .opt.chosen .bar i { background: var(--human); box-shadow: 0 0 8px var(--human); }
.lane.laya .decision .opt.chosen .bar i, .card.laya .decision .opt.chosen .bar i { background: var(--laya); box-shadow: 0 0 8px var(--laya); }
.lane.jev .decision .opt.chosen .bar i, .card.jev .decision .opt.chosen .bar i { background: var(--jev); box-shadow: 0 0 8px var(--jev); }
.decision .opt .lbl { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.decision .opt.chosen .lbl { color: var(--text); }
.decision .opt.best .lbl::before { content: "★ "; color: var(--human); }
.decision .meta { margin-top: 6px; font-family: var(--font-pixel); font-size: 8px; color: var(--dim); display: flex; gap: 14px; }
.decision .meta .agree { color: var(--laya); } .decision .meta .disagree { color: var(--danger); }
.decision .empty { color: var(--dim); font-style: italic; }

/* chess */
.chess-layout { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; flex: 1; align-items: start; }
.card { background: var(--panel); border: 3px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.card.laya { border-color: var(--laya-dim); } .card.jev { border-color: var(--jev-dim); } .card.human { border-color: var(--human-dim); }
.card .stats { grid-template-columns: repeat(2, 1fr); }
.card .lane-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.card .lane-name { font-size: 13px; white-space: nowrap; }
.card .lane-model { text-align: left; }
.board-column { display: flex; flex-direction: column; gap: 10px; align-items: center; }
#chessboard { border: 4px solid var(--line); box-shadow: 0 0 0 3px #000, 0 0 30px rgba(0,0,0,.7); image-rendering: pixelated; cursor: pointer; }
.movelist { width: 520px; max-height: 120px; overflow-y: auto; background: #05050c; border: 2px solid var(--line); padding: 6px 10px; font-size: 17px; color: var(--dim);
  display: flex; flex-wrap: wrap; gap: 4px 12px; }
.movelist b { color: var(--text); }

/* result modal */
/* Scroll the backdrop, not the box. Centring with overflow:visible puts the
   top of a tall dialog above the fold with no way to reach it, which is what
   a short landscape phone gets every time. */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 60;
  overflow-y: auto; overscroll-behavior: contain; padding: 20px; -webkit-overflow-scrolling: touch; }
.modal-box { background: var(--panel); border: 4px solid var(--human); box-shadow: 0 0 0 4px #000, 0 0 40px rgba(255,210,63,.3); padding: 28px 34px;
  width: min(520px, 100%); margin: auto;
  display: flex; flex-direction: column; gap: 16px; align-items: center; }
.modal-title { font-family: var(--font-pixel); font-size: 26px; color: var(--human); text-shadow: 0 0 14px var(--human); animation: blink 1s steps(2) infinite; }
.modal-sub { font-family: var(--font-pixel); font-size: 11px; color: var(--dim); text-align: center; line-height: 1.8; }
.result-table { border-collapse: collapse; width: 100%; font-size: 18px; }
.result-table th { font-family: var(--font-pixel); font-size: 9px; color: var(--dim); text-align: right; padding: 6px 10px; border-bottom: 2px solid var(--line); }
.result-table th:first-child { text-align: left; }
.result-table td { text-align: right; padding: 5px 10px; border-bottom: 1px dotted var(--line); }
.result-table td:first-child { text-align: left; color: var(--dim); }
.result-table .laya { color: var(--laya); } .result-table .jev { color: var(--jev); } .result-table .human { color: var(--human); }
.modal-actions { display: flex; gap: 14px; }

/* ticker */
.ticker { border-top: 2px solid var(--line); background: #05050c; padding: 6px 18px; font-size: 17px; color: var(--laya);
  display: flex; gap: 16px; align-items: baseline; }
/* The log takes whatever room is left and truncates; the byline never does. */
#log { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#log::before { content: "> "; color: var(--dim); }
.byline { flex-shrink: 0; color: var(--dim); text-decoration: none; font-size: 15px; }
.byline:hover, .byline:focus-visible { color: var(--text); }

@media (max-width: 1100px) {
  /* Both players stay beside the board all the way down to phones, because
     the race is the point and a stacked layout puts one side below the fold.
     Everything shrinks instead. Board clicks are scaled from the rendered
     size, so a smaller chessboard stays playable. */
  .menu-row.players { flex-direction: column; }

  .chess-layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .board-column { width: min(520px, 46vw); }
  #chessboard { width: 100%; height: auto; }
  .movelist { width: 100%; font-size: 15px; }
  .card { padding: 10px; gap: 8px; }
  .card .lane-name { font-size: 11px; }
  .card .lane-model { font-size: 13px; }
  .card .stats { grid-template-columns: 1fr; font-size: 15px; }
  .card .decision { font-size: 14px; }
  .card .decision .opt { grid-template-columns: 32px 1fr; gap: 6px; }

  .lanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .lane { padding: 10px; }
  .lane-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .lane-model { text-align: left; font-size: 13px; }
  .board-wrap { flex: 0 1 240px; min-width: 0; }
  canvas.board { width: 100%; height: auto; }
  .scoreboard { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); font-size: 15px; }
  .decision { font-size: 14px; }
  .decision .opt { grid-template-columns: 40px 1fr; }
}

/* touch controls */
.touch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(5,5,12,.94); border-top: 2px solid var(--line); touch-action: none; }
.touch button { font-family: var(--font-pixel); font-size: 16px; padding: 18px 0; background: var(--panel-2); color: var(--text);
  border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; user-select: none; -webkit-user-select: none; touch-action: none; }
.touch button:active { background: #1c1c3c; transform: translate(2px,2px); box-shadow: 0 0 0 #000; border-color: var(--human); }
.touch button.drop { font-size: 10px; border-color: var(--human); color: var(--human); }
body.touch-on { padding-bottom: 96px; }

/* phones */
@media (max-width: 760px) {
  html, body { font-size: 17px; }
  .masthead { grid-template-columns: 1fr auto; padding: 10px 12px; gap: 8px; }
  .vs-line { display: none; }
  .logo { font-size: 11px; gap: 8px; white-space: nowrap; } .logo-arena { font-size: 13px; }
  .marquee { display: none; }
  .menu { padding: 10px 10px 24px; gap: 12px; }
  .cabinet { padding: 14px 12px; gap: 12px; }
  .choices { flex-wrap: wrap; }
  .choice { font-size: 10px; padding: 12px 6px; gap: 6px; min-width: 30%; }
  .choice small { font-size: 13px; }
  .choice-icon { font-size: 18px; }
  .menu-row.players { flex-direction: column; gap: 12px; }
  .menu-row.options { flex-wrap: wrap; gap: 12px; }
  input, select { width: 110px; font-size: 16px; }
  .btn.start { font-size: 13px; padding: 14px 16px; width: 100%; }
  .howto { font-size: 15px; }

  .arena { padding: 8px 8px 12px; gap: 8px; }
  .topbar { font-size: 8px; padding: 6px 8px; grid-template-columns: auto 1fr auto; gap: 6px; }
  .topbar-mid { font-size: 9px; text-align: center; }
  .btn.tiny { font-size: 7px; padding: 6px 6px; }

  .lanes { grid-template-columns: 1fr 1fr; gap: 6px; }
  .lane { padding: 6px; gap: 6px; border-width: 2px; }
  .lane-head { flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 4px; }
  .lane-name { font-size: 11px; }
  .lane-model { display: none; }
  .lane-body { gap: 4px; }
  .side { width: 38px; gap: 3px; }
  .side canvas.next { width: 34px; height: 94px; }
  .garbage-meter { height: 60px; width: 10px; }
  .mini-label { font-size: 6px; }
  canvas.board { width: 100%; max-width: 150px; height: auto; border-width: 2px; }
  .board-wrap { flex: 1; min-width: 0; }
  .overlay { font-size: 9px; }
  .think { font-size: 6px; }
  .scoreboard { grid-template-columns: repeat(2, 1fr); gap: 3px; }
  .scoreboard div { padding: 3px; } .scoreboard small { font-size: 6px; margin-bottom: 2px; } .scoreboard b { font-size: 10px; }
  .stats { grid-template-columns: repeat(2, 1fr); font-size: 13px; gap: 2px 6px; }
  .decision { font-size: 12px; min-height: 0; padding: 6px; line-height: 1.2; }
  .decision .opt { grid-template-columns: 32px 1fr; gap: 5px; }
  .decision .bar { height: 8px; }
  .decision .meta { font-size: 6px; gap: 8px; }

  .chess-layout { grid-template-columns: 1fr; gap: 8px; }
  .board-column { order: -1; width: 100%; }
  #chessboard { width: min(100%, 92vw); height: auto; border-width: 3px; }
  .movelist { width: 100%; max-height: 64px; font-size: 14px; }
  .card { padding: 8px; gap: 6px; }
  .card .stats { grid-template-columns: repeat(2, 1fr); font-size: 13px; }

  .modal-box { min-width: 0; width: 92vw; padding: 18px 14px; }
  .modal-title { font-size: 18px; }
  .modal-sub { font-size: 8px; }
  .result-table { font-size: 14px; } .result-table th { font-size: 7px; }
  .modal-actions { flex-wrap: wrap; justify-content: center; }
  .ticker { font-size: 14px; padding: 4px 10px; }
}

/* queue */
.queue-position { font-family: var(--font-pixel); text-align: center; color: var(--human); }
.queue-position span { display: block; font-size: 52px; text-shadow: 0 0 18px var(--human); animation: pulse 1.4s infinite; }
.queue-position small { display: block; font-size: 9px; color: var(--dim); margin-top: 8px; }
.downgraded .lane-name::after, .downgraded .lane-name::after { content: " (LAYA)"; color: var(--laya); font-size: 9px; }

/* identity */
.whoami { font-family: var(--font-pixel); font-size: 9px; color: var(--laya); display: flex; align-items: center; gap: 6px; }
.whoami img { width: 20px; height: 20px; border: 1px solid var(--laya); }
.btn.x-login { border-color: var(--text); }

/* daily duel banner */
.daily { width: min(980px, 100%); background: #05050c; border: 3px solid var(--line); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.daily-head { display: flex; justify-content: space-between; font-family: var(--font-pixel); font-size: 10px; color: var(--dim); }
.daily-head b { color: var(--human); }
.daily-bars { display: flex; flex-direction: column; gap: 5px; font-size: 16px; }
.daily-row { display: grid; grid-template-columns: 54px 1fr 74px 96px; gap: 10px; align-items: center; }
.daily-row .n { font-family: var(--font-pixel); font-size: 10px; }
.daily-row.laya .n { color: var(--laya); } .daily-row.jev .n { color: var(--jev); } .daily-row.you .n { color: var(--human); }
.daily-row .b { height: 14px; background: #15152c; position: relative; }
.daily-row .b i { position: absolute; inset: 0 auto 0 0; }
.daily-row.laya .b i { background: var(--laya); box-shadow: 0 0 8px var(--laya); }
.daily-row.jev .b i { background: var(--jev); box-shadow: 0 0 8px var(--jev); }
.daily-row.you .b i { background: var(--human); box-shadow: 0 0 8px var(--human); }
.daily-row .v { text-align: right; font-family: var(--font-pixel); font-size: 11px; }
.daily-row .m { color: var(--dim); font-size: 15px; }
.daily-row.you .n { font-size: 8px; }
.daily-counts { color: var(--dim); font-size: 16px; border-top: 1px dotted var(--line); padding-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.daily-counts b { color: var(--text); font-family: var(--font-pixel); font-size: 11px; }
.daily-counts small { color: var(--dim); font-size: 14px; }
.daily-counts .laya b { color: var(--laya); } .daily-counts .jev b { color: var(--jev); }

/* share block: the artifact, as text */
.modal-box.wide { width: min(640px, 100%); }
.share-block { width: 100%; margin: 0; padding: 14px 16px; background: #05050c; border: 2px solid var(--laya-dim);
  color: var(--text); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.5;
  white-space: pre; overflow-x: auto; text-align: left; }
.share-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; }
/* Side by side, equal weight to the eye but copy stays the loud one by colour. */
.share-actions .btn { flex: 1 1 220px; font-size: 12px; padding: 14px 12px; }
.btn.primary { border-color: var(--laya); color: var(--laya); text-shadow: 0 0 10px var(--laya); }
.btn.primary.done { border-color: var(--human); color: var(--human); }
.share-hint { font-size: 15px; color: var(--dim); text-align: center; }
.r-why { font-size: 19px; line-height: 1.35; text-align: center; color: var(--text); max-width: 520px; }
.r-duel { width: min(420px, 100%); display: flex; flex-direction: column; }
.rd-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dotted var(--line); }
.rd-row > span:first-child { color: var(--dim); font-size: 16px; }
.rd-row b, .rd-head span:not(:first-child) { text-align: right; font-family: var(--font-pixel); font-size: 12px; color: var(--dim); }
.rd-row b.win { color: var(--text); }
.rd-head span:not(:first-child) { font-size: 10px; }
.rd-head .laya { color: var(--laya); } .rd-head .jev { color: var(--jev); } .rd-head .human { color: var(--human); }
.rd-head .win::before { content: "★ "; color: var(--human); }
.result-detail { width: 100%; font-size: 15px; color: var(--dim); }
.result-detail summary { cursor: pointer; font-family: var(--font-pixel); font-size: 9px; padding: 6px 0; }

@media (max-width: 760px) {
  .daily { padding: 10px; }
  .daily-row { grid-template-columns: 42px 1fr 60px; }
  .daily-row .m { display: none; }
  .share-block { font-size: 10px; padding: 10px; }
  .whoami span { display: none; }
}

/* ---- your line, and the sign-in ask ------------------------------------- */
/* Status, never currency. What it counts is friends who arrived and played,
   which is an ordinary referral and nothing X's rules object to. */
.recruits { width: min(980px, 100%); background: #05050c; border: 3px solid var(--line); padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.recruits-head { display: flex; justify-content: space-between; font-family: var(--font-pixel); font-size: 10px; color: var(--laya); }
.recruits-streak { color: var(--human); }
.recruits-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.rc-stat { display: flex; flex-direction: column; gap: 4px; }
.rc-stat b { font-family: var(--font-pixel); font-size: 18px; color: var(--text); }
.rc-stat span { font-size: 11px; color: var(--dim); letter-spacing: .04em; }
.recruits-line { display: flex; flex-wrap: wrap; gap: 6px; }
.recruits-line img { width: 24px; height: 24px; border: 1px solid var(--laya-dim); }
.recruits-empty { font-size: 11px; color: var(--dim); line-height: 1.7; }

.gate-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 9px; font-size: 12px; color: var(--dim); line-height: 1.6; }
.gate-list b { color: var(--text); }
.gate-fine { font-size: 9px !important; opacity: .7; margin-top: 2px; }

@media (max-width: 720px) {
  .recruits-stats { gap: 18px; }
  .rc-stat b { font-size: 15px; }
}

/* ---- the wall ----------------------------------------------------------- */
/* Everyone who took the models on today. Joining puts your face on something. */
/* Lives inside the daily panel now: a label and a row of faces. */
.wall { display: flex; align-items: center; gap: 14px; border-top: 1px dotted var(--line); padding-top: 8px; }
.wall-label { font-family: var(--font-pixel); font-size: 9px; color: var(--dim); white-space: nowrap; }
.wall-label b { color: var(--human); }
.wall-grid { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; align-items: center; flex: 1; }
.wall-face { position: relative; width: 34px; height: 34px; border: 2px solid var(--line); background: var(--panel-2); display: block; }
.wall-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-face.beat { border-color: var(--human); box-shadow: 0 0 10px rgba(255,210,63,.5); }
.wall-face .wf-rank { position: absolute; bottom: -2px; right: -2px; background: #000; color: var(--dim); font-size: 8px; padding: 0 2px; line-height: 1.3; }
.wall-face.beat .wf-rank { color: var(--human); }
.wall-empty { font-size: 11px; color: var(--dim); line-height: 1.7; }
.wall-you { border-color: var(--laya); box-shadow: 0 0 10px rgba(55,245,199,.5); }

/* ---- welcome ------------------------------------------------------------ */
.welcome-lead { font-size: 13px; color: var(--dim); text-align: center; line-height: 1.7; }
.welcome-lead b { color: var(--text); }
.welcome-vs { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 4px 0; flex-wrap: wrap; }
.wv { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 18px; border: 2px solid var(--line); min-width: 150px; }
.wv.laya { border-color: var(--laya-dim); }
.wv.jev { border-color: var(--jev-dim); }
.wv-name { font-family: var(--font-pixel); font-size: 13px; }
.wv.laya .wv-name { color: var(--laya); }
.wv.jev .wv-name { color: var(--jev); }
.wv-ms { font-family: var(--font-pixel); font-size: 20px; color: var(--text); }
.wv-note { font-size: 10px; color: var(--dim); text-align: center; }
.wv-mid { font-family: var(--font-pixel); font-size: 11px; color: var(--danger); }
.welcome-point { font-size: 12px; color: var(--dim); text-align: center; line-height: 1.8; max-width: 52ch; }
.welcome-point b { color: var(--human); }
.welcome-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 11px; color: var(--dim); line-height: 1.6; }
.welcome-steps b { color: var(--text); }

@media (max-width: 720px) {
  .welcome-vs { gap: 10px; }
  .wv { min-width: 116px; padding: 8px 10px; }
  .wv-ms { font-size: 16px; }
  .wall-face { width: 30px; height: 30px; }
}

/* ---- welcome wizard ------------------------------------------------------ */
.wiz-dots { display: flex; gap: 8px; justify-content: center; }
.wd { width: 8px; height: 8px; background: var(--line); border: 1px solid var(--line); }
.wd.on { background: var(--human); border-color: var(--human); box-shadow: 0 0 8px var(--human); }
.wiz-step { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wiz-step.hidden { display: none; }

/* The demo question: the whole "what is a System One model" argument in one look. */
.wiz-demo { width: 100%; max-width: 54ch; border: 2px solid var(--line); background: #05050c; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wd-label { font-size: 10px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.wiz-q { margin: 0; font-family: var(--font-term); font-size: 15px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.wiz-q b { color: var(--laya); }
.wd-answer { font-size: 12px; color: var(--dim); border-top: 1px solid var(--line); padding-top: 8px; }
.wd-answer b { color: var(--laya); font-size: 14px; }
.wd-ms { color: var(--human); }

@media (max-width: 720px) {
  .wiz-q { font-size: 13px; }
  .wiz-step { gap: 12px; }
}

/* ---- modals on a phone: bottom sheets ------------------------------------ */
/* A centred dialog is a desktop idiom. On a phone the thumb is at the bottom,
   the address bar eats the top, and a short landscape viewport cannot fit a
   centred box at all. These become sheets that rise from the bottom edge,
   scroll internally, and keep their action buttons within thumb reach. */
@media (max-width: 760px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-box,
  .modal-box.wide {
    width: 100%;
    margin: auto 0 0;               /* beat the base margin:auto, sit on the edge */
    max-height: 92vh;
    max-height: 92svh;              /* svh, so the address bar cannot clip it */
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-width: 3px 0 0;          /* only the top edge reads as an edge now */
    box-shadow: 0 -4px 0 #000, 0 -10px 40px rgba(255,210,63,.25);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 14px;
    animation: sheet-up .22s ease-out;
  }
  .modal-title { font-size: 18px; text-align: center; }
  .modal-sub { font-size: 10px; }
  .modal-actions { width: 100%; flex-direction: column-reverse; gap: 10px; }
  .modal-actions .btn { width: 100%; }
  /* A grab handle: the affordance that says "this thing moves". */
  .modal-box::before {
    content: ""; width: 40px; height: 4px; background: var(--line);
    border-radius: 2px; margin: -6px auto 2px; flex: none;
  }
}
@keyframes sheet-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Landscape phones are short, not narrow: the sheet is the wrong shape there,
   but a centred box still needs to scroll rather than overflow off-screen. */
@media (max-height: 460px) and (orientation: landscape) {
  .modal { align-items: flex-start; padding: 8px; }
  .modal-box, .modal-box.wide { max-height: none; margin: auto; width: min(760px, 100%); padding: 14px 18px; gap: 8px; }
  .modal-box::before { display: none; }
  .modal-title { font-size: 15px; animation: none; }
  .modal-sub, .gate-fine { font-size: 9px !important; }
  .welcome-lead, .welcome-point { font-size: 11px; line-height: 1.5; max-width: none; }
  .welcome-vs { gap: 10px; }
  .wv { padding: 5px 12px; min-width: 120px; }
  .wv-ms { font-size: 15px; }
  .wv-note { font-size: 9px; }
  .welcome-steps { font-size: 10px; gap: 4px; }
  .wiz-q { font-size: 12px; line-height: 1.4; }
  .wiz-demo { padding: 8px 10px; gap: 5px; }
  .modal-actions { flex-direction: row; width: auto; }
  .modal-actions .btn { width: auto; }
  .gate-list { font-size: 10px; gap: 5px; }
  /* Use the width instead of stacking: the prose and the demo sit side by side,
     which is the whole reason a landscape phone has room at all. */
  .wiz-step[data-step="1"] { display: grid; grid-template-areas: "t t" "l d" "p p" "a a"; grid-template-columns: 1fr 1fr; gap: 8px 16px; align-items: center; }
  .wiz-step[data-step="1"] .modal-title { grid-area: t; }
  .wiz-step[data-step="1"] .welcome-lead { grid-area: l; }
  .wiz-step[data-step="1"] .wiz-demo { grid-area: d; }
  .wiz-step[data-step="1"] .welcome-point { grid-area: p; }
  .wiz-step[data-step="1"] .modal-actions { grid-area: a; justify-self: center; }
}

@media (max-width: 760px) {
  /* The wall and your line read as rows of faces, not a grid that wraps oddly. */
  .recruits { padding: 10px 12px; }
  .wall { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wall-grid { gap: 6px; }
  .welcome-steps { padding-left: 16px; font-size: 10px; }
  .gate-list { font-size: 11px; }
  .wiz-demo { padding: 10px; }
}

/* ---- phone header and panels --------------------------------------------- */
@media (max-width: 760px) {
  /* The masthead was squeezing SIGN IN WITH X to 43px, wrapping it over four
     lines. Let the controls wrap onto their own row instead of compressing. */
  .masthead { grid-template-columns: 1fr; gap: 6px; }
  .masthead-right { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  /* .btn.tiny sets its own padding, so match its specificity to reach the
     44px touch minimum rather than losing the cascade to it. */
  .masthead-right .btn.tiny { white-space: nowrap; padding: 10px 12px; min-height: 44px; }
  .daily-head { gap: 10px; flex-wrap: wrap; }
  /* Touch targets: 44px is the smallest reliably hittable square. */
  .choice { min-height: 44px; }
  #start, #w-start, #w-next, #w-back, #gate-login, #r-copy, #r-post { min-height: 48px; }
}

/* Wall faces are links to the X account now, so kill the anchor defaults and
   give them a hover state that says "this goes somewhere". */
a.wall-face { text-decoration: none; transition: transform .1s, border-color .1s; }
a.wall-face:hover, a.wall-face:focus-visible { transform: translateY(-2px); border-color: var(--text); outline: none; }
.recruits-line a { display: block; line-height: 0; text-decoration: none; }
.recruits-line a:hover img { border-color: var(--laya); }

/* Body lock while a modal is open. iOS Safari ignores overflow:hidden on the
   body, so the page has to be taken out of flow with position:fixed; the
   inline top offset preserves the scroll position and is restored on close. */
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ---- account menu -------------------------------------------------------- */
/* Signed in, the header was a row of buttons that wrapped to a second line on
   a phone and pushed the arcade below the fold. It collapses to one avatar. */
.account { position: relative; }
.avatar { width: 40px; height: 40px; padding: 0; background: var(--panel-2); border: 2px solid var(--laya);
  box-shadow: 0 0 10px rgba(55,245,199,.35); cursor: pointer; display: block; line-height: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar:hover, .avatar[aria-expanded="true"] { border-color: var(--human); box-shadow: 0 0 12px var(--human); }

.account .menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; min-width: 190px;
  background: var(--panel); border: 3px solid var(--line); box-shadow: 4px 4px 0 #000, 0 0 24px rgba(0,0,0,.6);
  display: flex; flex-direction: column; }
.account .menu.hidden { display: none; }
.menu-who { font-family: var(--font-pixel); font-size: 9px; color: var(--laya); padding: 12px 14px;
  border-bottom: 2px solid var(--line); white-space: nowrap; }
.menu-item { font-family: var(--font-pixel); font-size: 9px; text-align: left; padding: 14px;
  background: none; border: 0; color: var(--text); cursor: pointer; min-height: 44px; }
.menu-item:hover { background: var(--panel-2); color: var(--human); }
.menu-item.danger:hover { color: var(--danger); }

@media (max-width: 760px) {
  /* Sit beside the title rather than under it: two rows of chrome is most of
     the fold on a phone. */
  .masthead { grid-template-columns: 1fr auto; align-items: center; }
  .masthead-right { flex-wrap: nowrap; gap: 8px; }
  .avatar { width: 44px; height: 44px; }
  .conn { display: none; }            /* the socket state is not worth a row */
  .account .menu { min-width: 200px; }
}

/* Invite lives in YOUR LINE so the loop can start before a game is finished. */
.invite-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.invite-actions .btn { flex: 1 1 200px; min-height: 44px; font-size: 11px; }
.invite-actions .btn.done { border-color: var(--human); color: var(--human); }
@media (max-width: 760px) {
  .invite-actions { flex-direction: column; }
  .invite-actions .btn { width: 100%; }
}