/* One layout (console, eval bar and board, status and orders) in two looks: Night and Terminal. */

:root {
  --slide-ms: 220ms;
  --top-h: 46px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */

.top {
  position: relative;
  z-index: 30;
  flex: none;
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
}
.brand { display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.brand img { width: 28px; height: 28px; }
/* The look, the language and who you are: in the header, or in its menu on a phone. */
.prefs { display: contents; }
.menu-button { display: none; }
.menu-button svg { display: block; width: 20px; height: 20px; }
/* The ladder or the workshop; a dot on the workshop until it's opened once. */
.screens { display: inline-flex; gap: 2px; }
.screens button { position: relative; background: none; border: 0; padding: 4px 6px; }
.screens button.new::after { content: ""; position: absolute; top: 1px; right: -1px; width: 6px; height: 6px; border-radius: 50%; background: #9bc700; }
.how-menu { display: none; }
.looks, .langs { display: inline-flex; gap: 2px; }
.looks button, .langs button, .link, .menu-button { background: none; border: 0; padding: 4px 6px; }
.who { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.discord { text-decoration: none; }

.desk {
  --left-w: 300px;
  --right-w: 330px;
  --gap: 0px;
  --pad: 0px;
  --eval-w: 18px;
  --chrome-h: calc(var(--top-h) + 128px);
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
  gap: var(--gap);
  padding: var(--pad);
  position: relative;
}

.left { min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.ladder-panel { flex: none; }
.ladder { position: relative; }
.rung {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  display: grid;
  grid-template-columns: 26px 1fr auto 44px;
  align-items: center;
  gap: 6px;
  transition: transform 0.45s ease;
}
.rung .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rung .rating { font-variant-numeric: tabular-nums; }
.rung .tag { text-align: right; }
/* Any bot but yours can be clicked for a test game against it: on hover its tag says so. */
.ladder.picking .rung:not(.you) { cursor: pointer; }
.ladder.picking .rung:not(.you):hover .tag { font-size: 0; }
.ladder.picking .rung:not(.you):hover .tag::after { content: attr(data-test); }
.pick-hint { margin: 0; }

.console { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tabs { flex: none; display: flex; }
.tabs button { background: none; border: 0; }
.console-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.game-line, .climb-line {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
}
/* A batch of the arena's games drops into the list, line after line. */
.game-line.fresh { animation: line-in 0.35s ease-out backwards; }
@keyframes line-in {
  from { opacity: 0; transform: translateY(6px); }
}
/* The arena, under the games: shut until the test games are played; its progress while the bot plays. */
.arena-panel { flex: none; }
.arena-go { position: relative; width: 100%; overflow: hidden; }
.arena-go .label, .arena-go small { position: relative; display: block; }
.arena-go.opened { animation: pulse 1.6s ease-in-out 2; }
.arena-bar { position: absolute; inset: 0; pointer-events: none; }
.arena-bar span { position: absolute; top: 0; bottom: 0; left: 0; }
.arena-bar .coming { transform-origin: left; animation: arena-load linear both; }
@keyframes arena-load {
  from { transform: scaleX(0); }
}
.arena-lock { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; }
.pips { display: inline-flex; gap: 5px; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes term-spin {
  0% { content: "|"; }
  25% { content: "/"; }
  50% { content: "-"; }
  75% { content: "\\"; }
}

.center {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
}
.game-head { min-height: 22px; max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage { display: flex; align-items: stretch; justify-content: center; gap: 10px; width: 100%; }
.eval { flex: none; width: var(--eval-w); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eval-label { font-size: 11px; line-height: 14px; height: 14px; }
.eval-track { position: relative; flex: 1; width: 100%; overflow: hidden; }
.eval-fill { position: absolute; left: 0; right: 0; bottom: 0; transition: height 0.45s ease; }
.board-frame {
  position: relative;
  flex: none;
  width: min(calc(100% - var(--eval-w) - 10px), calc(100vh - var(--chrome-h)));
  aspect-ratio: 1;
  container-type: inline-size;
}
.board {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  user-select: none;
}
.sq { position: relative; }
.sq::before, .sq::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pieces { position: absolute; inset: 0; pointer-events: none; }
.pc {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5%;
  height: 12.5%;
  transition: transform var(--slide-ms) ease;
  will-change: transform;
}
.pc img { width: 100%; height: 100%; display: block; }
.pc.gone { opacity: 0; transition: opacity 0.25s ease; }
.arrows, .badges { position: absolute; inset: 0; pointer-events: none; }
.arrows { width: 100%; height: 100%; overflow: visible; }
.arrow .shaft { fill: none; stroke-width: 15; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tour-draw 0.3s ease-out forwards; }
.arrow .head { opacity: 0; animation: tour-show 0.12s 0.24s ease-out forwards; }
.arrow { transition: opacity 0.25s ease; }
.arrow.going { opacity: 0; }
.arrows [data-kind="legal"] .shaft { stroke-width: 10; }
/* A move's sign sits over the top right corner of the square it landed on, the way chess sites mark moves. */
.badge {
  position: absolute;
  width: 5.4%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(var(--dx, -68%), var(--dy, -32%));
  animation: badge-pop 0.34s ease-out backwards;
}
.badge span { font-size: 3cqw; line-height: 1; }
.badge img { width: 84%; height: 84%; display: block; }
.badge.hop { animation: badge-hop 0.16s ease-out; }
@keyframes badge-pop {
  from { transform: translate(var(--dx, -68%), var(--dy, -32%)) scale(0); }
  65% { transform: translate(var(--dx, -68%), var(--dy, -32%)) scale(1.22); }
}
@keyframes badge-hop {
  from { transform: translate(var(--dx, -68%), var(--dy, -32%)) scale(0.8); }
}
/* Moves come out one by one: each dot or ring pops as it's added. */
.sq.maybe::after, .sq.ring::after, .sq.think::after, .sq.take::after { animation: mark-in 0.2s ease-out; }
@keyframes mark-in {
  from { transform: scale(0.2); opacity: 0; }
}
.files, .ranks { position: absolute; display: flex; pointer-events: none; font-size: 1.9cqw; line-height: 1; }
.files { left: 0; right: 0; bottom: 0; }
.files span { flex: 1; text-align: right; padding: 0 3px 3px 0; }
.ranks { top: 0; bottom: 0; left: 0; flex-direction: column; }
.ranks span { flex: 1; padding: 3px 0 0 3px; }
.controls { display: flex; align-items: center; gap: 6px; }
.controls.off { visibility: hidden; }
.controls > button { border: 0; background: none; padding: 4px 10px; line-height: 1; }
.speed { display: inline-flex; gap: 2px; margin-left: 14px; }
.speed button { font-size: 12px; padding: 3px 8px; border: 0; background: none; }
.ply { margin-left: 12px; font-variant-numeric: tabular-nums; font-size: 13px; min-width: 70px; }

.right {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.slots { list-style: none; margin: 0; padding: 0; }
.slot { display: grid; grid-template-columns: 22px 1fr auto; align-items: baseline; gap: 8px; transition: transform 0.16s ease; }
.slot.grab { cursor: grab; touch-action: none; user-select: none; }
.slot.dragging { position: relative; z-index: 2; cursor: grabbing; transition: none; }
.slot.rising { position: relative; z-index: 1; }
/* The order the bot is reading, in the lessons: a mark that slides down the list. */
.orders-panel { position: relative; }
.order-cursor { position: absolute; top: 0; z-index: 3; opacity: 0; pointer-events: none; transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.2s ease; }
.order-cursor.on { opacity: 1; }
/* An added order flies up from its button; its slot waits empty, then lights up as it lands. */
.ghost { position: fixed; z-index: 35; display: flex; align-items: center; white-space: nowrap; pointer-events: none; }
.slot.landing > * { opacity: 0; }
.slot.landed { animation: slot-land 0.5s ease-out; }
@keyframes slot-land {
  from { transform: scale(0.96); background-color: var(--land); }
}
.name .tag { margin-left: 8px; }
.label { min-width: 0; }
.name, .desc { display: block; }
.tools { display: inline-flex; gap: 2px; align-self: center; }
.tools button { background: none; border: 0; padding: 2px 5px; line-height: 1; }
.tools button:disabled { opacity: 0.25; }
.pool-orders { display: flex; flex-wrap: wrap; gap: 6px; }
.actions { display: flex; flex-direction: column; gap: 8px; }
.actions:empty { display: none; }
.join { display: flex; flex-direction: column; gap: 8px; }
.join-row { display: flex; gap: 8px; }
.join input { flex: 1; min-width: 0; }
.spark svg { width: 100%; height: auto; display: block; overflow: visible; }
.spark .you, .spark line { fill: none; }
.locked-league { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credit { margin-top: auto; }

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 40;
}
.card { width: min(480px, 92vw); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

@keyframes pulse {
  50% { box-shadow: inset 0 0 0 1px var(--pulse, #9bc700), 0 0 12px var(--pulse, #9bc700); }
}

/* ---------- The workshop: your orders, the free board in the middle, every order ---------- */

.shop {
  --mine-w: 370px;
  --catalog-w: 420px;
  --eval-w: 0px;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--mine-w) minmax(0, 1fr) var(--catalog-w);
  position: relative;
}
.shop-mine, .shop-catalog { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.shop-center {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
}
.shop .board-frame { width: min(100%, calc(100vh - var(--top-h) - 270px), 600px); margin-top: auto; }
.shop .slot:not(.empty) { grid-template-columns: 22px 26px minmax(0, 1fr) auto; cursor: pointer; }
.shop .slot.grab { cursor: grab; }
.shop .slot .sign { align-self: center; text-align: center; font-size: 18px; line-height: 1; }
/* A result too long for the name's line goes under it, whole. */
.shop .slot .name .tag { display: inline-block; }
.shop .slot .sign img, .order-card .sign img { width: 24px; height: 24px; display: block; margin: 0 auto; }
.shop-verdict { min-height: 22px; margin-top: 12px; }
/* Two lines kept for the line under the board, whatever it says: what's under it doesn't jump. */
.shop-note { min-height: 2.9em; min-height: 2lh; max-width: 600px; text-align: center; }
.shop-tools { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 600px); }
.shop-tools .primary { min-width: 240px; }
.shop-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tray { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: auto; }
.spares { display: grid; grid-template-columns: repeat(10, 36px); gap: 3px; }
.spare { width: 36px; height: 36px; padding: 2px; border: 0; background: none; touch-action: none; cursor: grab; }
.spare img { width: 100%; height: 100%; display: block; pointer-events: none; }
.spare-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; }
.tray-hint { text-align: center; }
/* A piece in the hand: above the others, the arrows out of the way. */
.board.grabbable { touch-action: none; }
.pc.lifted { z-index: 5; transition: none; }
.pc.lifted img { transform: scale(1.12); }
.board.lifting .arrows, .board.lifting .badges { opacity: 0; transition: opacity 0.15s ease; }
.catalog { display: flex; flex-direction: column; gap: 16px; }
.family { display: flex; flex-direction: column; gap: 2px; }
.order-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
.order-main { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
.order-main .name, .order-main .desc { display: block; }
.order-card .count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-tools { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.card-tools .in, .card-tools .lock { text-align: center; white-space: nowrap; }

/* ---------- The tour: the page dark but for what a step lights, a bubble, wires ---------- */

.tour { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.tour-shade, .tour-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tour-ring { position: absolute; left: 0; top: 0; }
.tour-bubble { position: absolute; left: 0; top: 0; width: 300px; pointer-events: auto; }
.tour-arrow { position: absolute; width: 14px; height: 14px; transform: rotate(45deg); }
.tour-body { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tour-buttons { display: flex; justify-content: flex-end; margin-top: 4px; }
.tour-next:disabled { opacity: 0.45; }
.tour-bubble.nudge { animation: tour-nudge 0.42s ease; }
.tour-bubble .join { gap: 6px; margin-top: 2px; }
.wire { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tour-draw 0.5s ease-out forwards; }
.wire-head { opacity: 0; animation: tour-show 0.2s 0.4s ease-out forwards; }
@keyframes tour-draw { to { stroke-dashoffset: 0; } }
@keyframes tour-show { to { opacity: 1; } }
@keyframes tour-nudge {
  20% { margin-left: -7px; }
  40% { margin-left: 6px; }
  60% { margin-left: -4px; }
  80% { margin-left: 2px; }
}
@keyframes tour-ring {
  from { box-shadow: 0 0 0 2px #9bc700, 0 0 0 2px rgba(155, 199, 0, 0.6); }
  to { box-shadow: 0 0 0 2px #9bc700, 0 0 0 16px rgba(155, 199, 0, 0); }
}
@keyframes blink {
  50% { opacity: 0; }
}

/* =====================================================================
   Night: your browser version, lichess dark
   ===================================================================== */

[data-look="night"] { color-scheme: dark; }
[data-look="night"] body {
  background: #161512;
  color: #bababa;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
[data-look="night"] .top { background: #050505; border-bottom: 1px solid #1c1b19; }
[data-look="night"] .brand { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; }
[data-look="night"] .link, [data-look="night"] .looks button, [data-look="night"] .langs button { color: #8f8f8f; font-size: 13.5px; }
[data-look="night"] .link:hover, [data-look="night"] .looks button:hover, [data-look="night"] .langs button:hover { color: #fff; }
[data-look="night"] .link:disabled { opacity: 0.4; }
[data-look="night"] .looks button[aria-pressed="true"], [data-look="night"] .langs button[aria-pressed="true"] { color: #fff; box-shadow: inset 0 -2px #9bc700; }
[data-look="night"] .langs button { font-size: 12px; letter-spacing: 0.04em; }
[data-look="night"] .player { color: #8f8f8f; font-size: 13.5px; }
[data-look="night"] .discord { background: #5865f2; color: #fff; border-radius: 3px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
[data-look="night"] .discord.locked { background: #262421; color: #8f8f8f; font-weight: 400; }

[data-look="night"] .left, [data-look="night"] .right { background: #050505; }
[data-look="night"] .title { color: #fff; font-size: 22px; font-weight: 600; }
[data-look="night"] .ladder-panel { padding: 20px 22px 14px; border-bottom: 1px solid #161616; }
[data-look="night"] .hint { color: #6d6d6d; font-size: 12.5px; margin: 4px 0 10px; }
[data-look="night"] .rung { padding: 0 6px; font-size: 13.5px; border-radius: 2px; }
[data-look="night"] .rung .rank { color: #5e5e5e; font-size: 12px; font-variant-numeric: tabular-nums; }
[data-look="night"] .rung .name { color: #d0d0d0; }
[data-look="night"] .rung .rating { color: #8f8f8f; }
[data-look="night"] .rung .tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
[data-look="night"] .rung.boss .name, [data-look="night"] .rung.boss .tag { color: #e8b04b; }
[data-look="night"] .rung.you { background: rgba(155, 199, 0, 0.13); }
[data-look="night"] .rung.you .name { color: #fff; font-weight: 600; }
[data-look="night"] .rung.you .tag { color: #9bc700; }
[data-look="night"] .ladder.picking .rung:not(.you):hover { background: rgba(255, 255, 255, 0.07); }
[data-look="night"] .ladder.picking .rung:not(.you):hover .tag::after { font-size: 11px; color: #9bc700; }
[data-look="night"] .rung.vs { box-shadow: inset 2px 0 0 #bababa; }
[data-look="night"] .rung.vs .name { color: #fff; }

[data-look="night"] .tabs { gap: 18px; padding: 18px 22px 8px; }
[data-look="night"] .tabs button { padding: 0; font-size: 20px; font-weight: 600; color: #4a4a4a; }
[data-look="night"] .tabs button:hover { color: #8f8f8f; }
[data-look="night"] .tabs button[aria-selected="true"] { color: #fff; }
[data-look="night"] .console-body { padding: 4px 16px 22px; scrollbar-color: #333 transparent; }
[data-look="night"] .note { color: #6d6d6d; padding: 4px 6px; }
[data-look="night"] .entry {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 6px;
  align-items: baseline;
  padding: 4px 6px;
  border-bottom: 1px solid #141414;
}
[data-look="night"] .entry .no { color: #5e5e5e; font-size: 12px; font-variant-numeric: tabular-nums; }
[data-look="night"] .entry .san { color: #ececec; font-weight: 600; }
[data-look="night"] .entry.theirs .san { color: #8f8f8f; font-weight: 400; }
[data-look="night"] .entry .why { grid-column: 2; color: #94b84a; font-size: 12.5px; }
[data-look="night"] .entry .why b { color: #c8e07a; }
[data-look="night"] .entry .why small { color: #5f7531; font-size: 12px; }
[data-look="night"] .entry .why .none { color: #6d6d6d; }
[data-look="night"] .entry.current { background: rgba(155, 199, 0, 0.1); }
[data-look="night"] .lesson-head { color: #5e5e5e; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 6px 4px; }
[data-look="night"] .entry.try { display: block; padding: 6px; }
[data-look="night"] .entry.try p { font-size: 13px; }
[data-look="night"] .entry.try .legal { color: #8f8f8f; }
[data-look="night"] .entry.try .step { color: #8f8f8f; }
[data-look="night"] .entry.try .step b { color: #d0d0d0; font-weight: 600; }
[data-look="night"] .entry.try .step.fired { color: #94b84a; }
[data-look="night"] .entry.try .step.fired b { color: #c8e07a; }
[data-look="night"] .entry.try .step.skipped, [data-look="night"] .entry.try .step.skipped b { color: #5e5e5e; }
[data-look="night"] .entry.try .play { color: #ececec; font-size: 15px; margin-top: 2px; }
[data-look="night"] .entry.try .play small { color: #6d6d6d; font-size: 12px; }
[data-look="night"] .entry.try .mate { color: #9bc700; font-weight: 600; font-size: 13px; }
[data-look="night"] .feed-head { color: #6d6d6d; font-size: 12.5px; padding: 2px 6px 8px; }
[data-look="night"] .feed-head b { color: #bababa; font-weight: 500; }
[data-look="night"] .game-line {
  display: grid;
  grid-template-columns: 28px 16px 1fr auto;
  gap: 6px;
  align-items: baseline;
  padding: 4px 6px;
  border-bottom: 1px solid #141414;
  font-size: 13.5px;
}
[data-look="night"] .game-line:hover, [data-look="night"] .climb-line:hover { background: #161512; }
[data-look="night"] .game-line .n { color: #5e5e5e; font-size: 12px; font-variant-numeric: tabular-nums; }
[data-look="night"] .game-line .mark { font-weight: 700; }
[data-look="night"] .game-line.win .mark, [data-look="night"] .delta.up { color: #9bc700; }
[data-look="night"] .game-line.loss .mark, [data-look="night"] .delta.down { color: #d5604f; }
[data-look="night"] .game-line.draw .mark { color: #8f8f8f; }
[data-look="night"] .game-line .what { color: #d0d0d0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-look="night"] .game-line small { color: #6d6d6d; font-size: 12px; }
[data-look="night"] .delta { font-variant-numeric: tabular-nums; font-size: 12.5px; }
[data-look="night"] .game-line.test .n { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
[data-look="night"] .game-line .moves { color: #6d6d6d; font-size: 12px; font-variant-numeric: tabular-nums; }
[data-look="night"] .feed-loading { display: flex; align-items: center; gap: 9px; color: #8f8f8f; font-size: 12.5px; padding: 9px 6px; }
[data-look="night"] .feed-loading::before { content: ""; width: 9px; height: 9px; border: 2px solid #3a3835; border-top-color: #9bc700; border-radius: 50%; animation: spin 0.8s linear infinite; }
[data-look="night"] .arena-panel { padding: 14px 22px 18px; border-top: 1px solid #161616; }
[data-look="night"] .arena-go { background: #262421; color: #fff; border: 1px solid #629924; border-radius: 3px; padding: 9px 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
[data-look="night"] .arena-go small { margin-top: 3px; color: #8f8f8f; font-size: 11.5px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
[data-look="night"] .arena-go:hover:not(:disabled) { background: #2d3a1d; }
[data-look="night"] .arena-go:disabled:not(.running) { border-color: #262421; color: #6d6d6d; cursor: not-allowed; }
[data-look="night"] .arena-go.running { border-color: #3a3835; cursor: progress; }
[data-look="night"] .arena-bar .done { background: rgba(98, 153, 36, 0.5); }
[data-look="night"] .arena-bar .coming { background: rgba(98, 153, 36, 0.25); }
[data-look="night"] .arena-lock { color: #6d6d6d; font-size: 12px; }
[data-look="night"] .pips span { width: 7px; height: 7px; border-radius: 50%; background: #333; }
[data-look="night"] .pips span.on { background: #9bc700; }
[data-look="night"] .climb-line {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 8px;
  padding: 6px;
  border-bottom: 1px solid #141414;
  font-size: 13px;
}
[data-look="night"] .climb-line .league { color: #8f8f8f; }
[data-look="night"] .climb-line .orders { color: #d0d0d0; }
[data-look="night"] .climb-line .rating { color: #8f8f8f; font-variant-numeric: tabular-nums; }
[data-look="night"] .climb-line .rating.up { color: #9bc700; }

[data-look="night"] .game-head { color: #8f8f8f; font-size: 13.5px; }
[data-look="night"] .game-head small { color: #6d6d6d; }
[data-look="night"] .game-head .result { margin-left: 10px; font-weight: 600; }
[data-look="night"] .result.win { color: #9bc700; }
[data-look="night"] .result.loss { color: #d5604f; }
[data-look="night"] .result.draw { color: #bababa; }
[data-look="night"] .sq.light { background: #f0d9b5; }
[data-look="night"] .sq.dark { background: #b58863; }
[data-look="night"] .sq.from::before, [data-look="night"] .sq.to::before { background: rgba(155, 199, 0, 0.41); }
[data-look="night"] .sq.check::before { background: radial-gradient(ellipse at center, #ff0000 0%, #e70000 25%, rgba(169, 0, 0, 0) 89%); }
[data-look="night"] .sq.think::after { background: radial-gradient(rgba(20, 85, 30, 0.5) 19%, rgba(0, 0, 0, 0) 20%); }
[data-look="night"] .sq.take::after { background: radial-gradient(transparent 0%, transparent 79%, rgba(20, 85, 0, 0.35) 80%); }
[data-look="night"] .sq.maybe::after { background: radial-gradient(rgba(20, 85, 30, 0.24) 12%, rgba(0, 0, 0, 0) 13%); }
[data-look="night"] .sq.ring::after { background: radial-gradient(transparent 0%, transparent 82%, rgba(20, 85, 0, 0.16) 83%); }
[data-look="night"] .sq.scan::before { background: rgba(20, 85, 30, 0.5); }
/* Lichess's arrow colours: blue for the moves there are, green for the ones kept, red for a miss. */
[data-look="night"] .arrows [data-kind="legal"] { opacity: 0.62; }
[data-look="night"] .arrows [data-kind="legal"] .shaft { stroke: #003088; }
[data-look="night"] .arrows [data-kind="legal"] .head { fill: #003088; }
[data-look="night"] .arrows [data-kind="keep"] { opacity: 0.8; }
[data-look="night"] .arrows [data-kind="keep"] .shaft { stroke: #15781b; }
[data-look="night"] .arrows [data-kind="keep"] .head { fill: #15781b; }
[data-look="night"] .arrows [data-kind="miss"] { opacity: 0.8; }
[data-look="night"] .arrows [data-kind="miss"] .shaft { stroke: #c33; }
[data-look="night"] .arrows [data-kind="miss"] .head { fill: #c33; }
[data-look="night"] .badge { background: #fffaf2; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 0 1.5px rgba(0, 0, 0, 0.18); }
[data-look="night"] .files, [data-look="night"] .ranks { font-weight: 700; }
[data-look="night"] .files span:nth-child(odd), [data-look="night"] .ranks span:nth-child(even) { color: #f0d9b5; }
[data-look="night"] .files span:nth-child(even), [data-look="night"] .ranks span:nth-child(odd) { color: #b58863; }
[data-look="night"] .eval-label { color: #fff; font-size: 12px; }
[data-look="night"] .eval-track { background: #f5f5f5; outline: 1px solid #1e1e1e; }
[data-look="night"] .eval-track:has(.w) { background: #1a1a1a; }
[data-look="night"] .eval-fill.b { background: #1a1a1a; }
[data-look="night"] .eval-fill.w { background: #f5f5f5; }
[data-look="night"] .controls > button { color: #8f8f8f; font-size: 22px; }
[data-look="night"] .controls > button:hover { color: #fff; }
[data-look="night"] .speed button { background: #262421; color: #8f8f8f; border-radius: 3px; }
[data-look="night"] .speed button.on { background: #3a3835; color: #fff; }
[data-look="night"] .ply { color: #6d6d6d; }

[data-look="night"] .right { padding: 20px 22px 14px; }
[data-look="night"] .card .kicker { color: #6d6d6d; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
[data-look="night"] .join input { background: #fffaf2; border: 1px solid #b58863; border-radius: 3px; padding: 9px 10px; color: #161512; }
[data-look="night"] .join input::placeholder { color: #b39a7c; }
[data-look="night"] .join input:focus { outline: none; border-color: #629924; box-shadow: 0 0 0 2px rgba(98, 153, 36, 0.3); }
[data-look="night"] .join .primary { padding: 11px 14px; }
[data-look="night"] .join-row { flex-direction: column; }
[data-look="night"] .tour-bubble .error { color: #a3321f; }

[data-look="night"] .tour-dim { fill: rgba(0, 0, 0, 0.66); }
[data-look="night"] .tour-ring { border-radius: 6px; animation: tour-ring 1.5s ease-out infinite; }
[data-look="night"] .tour-bubble {
  background: #f0d9b5;
  color: #2b2015;
  border-radius: 6px;
  padding: 13px 15px 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.6);
  font-size: 14.5px;
  line-height: 1.45;
}
[data-look="night"] .tour-arrow { background: #f0d9b5; }
[data-look="night"] .tour-bubble b { color: #000; font-weight: 700; }
[data-look="night"] .tour-kicker { color: #8b6a44; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
[data-look="night"] .tour-action { color: #3f6f0e; font-weight: 600; }
[data-look="night"] .tour-next, [data-look="night"] .tour-bubble .join .primary {
  background: #629924;
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
[data-look="night"] .tour-next:hover:not(:disabled), [data-look="night"] .tour-bubble .join .primary:hover:not(:disabled) { background: #6eaa28; }
[data-look="night"] .wire.link { stroke: #9bc700; stroke-width: 2.5; }
[data-look="night"] .wire-head.link { fill: #9bc700; }

[data-look="night"] .status-block { display: flex; flex-direction: column; gap: 4px; }
[data-look="night"] .status-block .rating { color: #fff; font-size: 42px; font-weight: 300; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
[data-look="night"] .status-block .rating small { color: #6d6d6d; font-size: 14px; font-weight: 400; }
[data-look="night"] .status-block .rating.empty { color: #6d6d6d; font-size: 15px; font-weight: 400; margin: 6px 0 2px; }
[data-look="night"] .spark { margin: 4px 0 6px; }
[data-look="night"] .climb-chart .caption { color: #6d6d6d; font-size: 12px; margin-top: 6px; }
[data-look="night"] .spark text { fill: #e8b04b; font-size: 10px; }
[data-look="night"] .spark line.boss { stroke: #e8b04b; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.8; }
[data-look="night"] .spark .you { stroke: #9bc700; stroke-width: 2; stroke-linejoin: round; }
[data-look="night"] .spark .now { fill: #fff; }
[data-look="night"] .status-block .line { color: #bababa; }
[data-look="night"] .status-block .line b { color: #fff; font-weight: 600; }
[data-look="night"] .status-block small { color: #6d6d6d; }
[data-look="night"] .status-block .game { color: #fff; font-size: 18px; margin-top: 6px; }
[data-look="night"] .status-block .record { color: #8f8f8f; font-size: 14px; }
[data-look="night"] .verdict { color: #bababa; font-size: 14px; margin-top: 6px; }
[data-look="night"] .verdict.up { color: #9bc700; font-weight: 600; }

[data-look="night"] .orders-panel .title { font-size: 20px; margin-bottom: 8px; }
[data-look="night"] .slots { display: flex; flex-direction: column; gap: 2px; }
[data-look="night"] .slot { padding: 7px 8px 7px 10px; background: #121110; border-left: 3px solid transparent; }
[data-look="night"] .slot .num { color: #5e5e5e; }
[data-look="night"] .slot .name { color: #e6e6e6; font-size: 15px; }
[data-look="night"] .slot .desc { color: #6d6d6d; font-size: 12px; }
[data-look="night"] .slot .tag { color: #9bc700; font-size: 12px; white-space: nowrap; }
[data-look="night"] .slot .tools button { color: #6d6d6d; font-size: 13px; }
[data-look="night"] .slot .tools button:hover:not(:disabled) { color: #fff; }
[data-look="night"] .slot.fired { border-left-color: #9bc700; background: rgba(155, 199, 0, 0.08); }
[data-look="night"] .slot.fired .name { color: #fff; }
[data-look="night"] .slot.skipped .name { color: #6a6a6a; }
[data-look="night"] .slot.empty { background: none; border: 1px dashed #262421; border-left-width: 1px; }
[data-look="night"] .slot.empty .label { color: #4a4a4a; font-size: 13px; }
[data-look="night"] .slot.dragging { background: #262421; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6); }
[data-look="night"] .slots { --land: rgba(155, 199, 0, 0.35); }
[data-look="night"] .order-cursor { left: -17px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #9bc700; filter: drop-shadow(0 0 4px rgba(155, 199, 0, 0.6)); }
[data-look="night"] .ghost { background: #3a3835; color: #fff; border-radius: 3px; padding: 0 10px; font-size: 13px; box-shadow: inset 0 0 0 1px #9bc700, 0 8px 22px rgba(0, 0, 0, 0.6); }
[data-look="night"] .pool-title { color: #6d6d6d; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; margin: 16px 0 6px; }
[data-look="night"] .add { background: #262421; border: 0; border-radius: 3px; padding: 5px 10px; color: #bababa; font-size: 13px; }
[data-look="night"] .add:hover:not(:disabled) { background: #3a3835; color: #fff; }
[data-look="night"] .add:disabled { opacity: 0.35; }
[data-look="night"] .add.suggested { color: #fff; animation: pulse 1.6s ease-in-out infinite; box-shadow: inset 0 0 0 1px #9bc700; }
[data-look="night"] .pool-note { color: #6d6d6d; font-size: 12px; margin-top: 6px; }
[data-look="night"] .locked { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
[data-look="night"] .locked-league { color: #4f4f4f; font-size: 12px; }

[data-look="night"] .actions .primary, [data-look="night"] .join .primary, [data-look="night"] .card .primary {
  background: #629924;
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
[data-look="night"] .primary:hover:not(:disabled) { background: #6eaa28; }
[data-look="night"] .primary:disabled { opacity: 0.5; }
[data-look="night"] button:focus-visible, [data-look="night"] a:focus-visible { outline: 2px solid #9bc700; outline-offset: 2px; }
[data-look="night"] .actions .secondary { background: #262421; color: #bababa; border: 0; border-radius: 3px; padding: 9px; font-size: 13px; }
[data-look="night"] .actions .secondary:hover:not(:disabled) { background: #3a3835; color: #fff; }
[data-look="night"] .actions .secondary:disabled { opacity: 0.5; }

[data-look="night"] .screens button { color: #8f8f8f; font-size: 13.5px; }
[data-look="night"] .screens button:hover { color: #fff; }
[data-look="night"] .screens button[aria-pressed="true"] { color: #fff; box-shadow: inset 0 -2px #9bc700; }
[data-look="night"] .to-shop { color: #9bc700; font-size: 13px; padding: 0; margin-top: 14px; text-align: left; }
[data-look="night"] .to-shop:hover { color: #c8e07a; }
[data-look="night"] .shop-mine, [data-look="night"] .shop-catalog { background: #050505; padding: 20px 22px 18px; }
[data-look="night"] .shop .slot { padding: 9px 10px 9px 10px; }
[data-look="night"] .shop .slot .name { font-size: 16px; }
[data-look="night"] .shop .slot .desc { font-size: 12.5px; }
[data-look="night"] .shop .slot.all .name, [data-look="night"] .shop .slot.all .tag { color: #bababa; }
[data-look="night"] .shop .slot.all .tag, [data-look="night"] .shop .slot.skipped .tag, [data-look="night"] .shop .slot.unread .tag { color: #6d6d6d; }
[data-look="night"] .shop .slot.unread .name { color: #4f4f4f; }
[data-look="night"] .shop .slot.unread .desc { color: #3f3f3f; }
[data-look="night"] .shop .slot:hover, [data-look="night"] .order-main:hover { background-color: #1c1b19; }
[data-look="night"] .shop .slot.focus, [data-look="night"] .order-card.focus { box-shadow: inset 0 0 0 1px #9bc700; }
[data-look="night"] .shop-verdict { color: #8f8f8f; font-size: 14px; }
[data-look="night"] .shop-verdict b { color: #fff; font-size: 16px; }
[data-look="night"] .shop-verdict small { color: #6d6d6d; font-size: 12px; margin-left: 4px; }
[data-look="night"] .shop-head { color: #bababa; font-size: 14px; }
[data-look="night"] .shop-note { color: #8f8f8f; font-size: 13px; }
[data-look="night"] .shop-note.warn { color: #e8b04b; }
[data-look="night"] .shop-note.win { color: #9bc700; font-weight: 600; }
[data-look="night"] .shop-note.end { color: #fff; font-weight: 600; }
[data-look="night"] .shop-note.focus { color: #c8e07a; }
[data-look="night"] .shop-tools .primary {
  background: #629924;
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
[data-look="night"] .shop-tools .secondary { background: #262421; color: #bababa; border: 0; border-radius: 3px; padding: 7px 11px; font-size: 13px; }
[data-look="night"] .shop-tools .secondary:hover:not(:disabled) { background: #3a3835; color: #fff; }
[data-look="night"] .shop-tools .secondary:disabled { opacity: 0.4; }
[data-look="night"] .spare { border-radius: 4px; }
[data-look="night"] .spare:hover { background: #262421; }
[data-look="night"] .spare.picked { background: #3a3835; box-shadow: inset 0 0 0 2px #9bc700; }
[data-look="night"] .spare-ghost { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
[data-look="night"] .tray-hint { color: #5e5e5e; font-size: 12px; }
[data-look="night"] .pc.lifted img { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
[data-look="night"] .sq.picked::before { background: rgba(20, 85, 30, 0.5); }
[data-look="night"] .catalog-title, [data-look="night"] .shop-catalog .title { font-size: 20px; }
[data-look="night"] .shop-catalog .hint { margin-bottom: 14px; }
[data-look="night"] .family h3 { color: #6d6d6d; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
[data-look="night"] .order-card { background: #121110; padding: 6px 8px 6px 6px; border-radius: 2px; }
[data-look="night"] .order-main { padding: 3px 4px; border-radius: 2px; color: inherit; }
[data-look="night"] .order-main .sign { text-align: center; font-size: 18px; line-height: 1; }
[data-look="night"] .order-main .name { color: #e6e6e6; font-size: 14.5px; }
[data-look="night"] .order-main .desc { color: #6d6d6d; font-size: 12px; }
[data-look="night"] .order-card .count { color: #9bc700; font-size: 13px; }
[data-look="night"] .order-card.idle .count, [data-look="night"] .order-card.idle .name { color: #5e5e5e; }
[data-look="night"] .order-card.idle .sign { opacity: 0.45; }
[data-look="night"] .order-card.shut .name { color: #8f8f8f; }
[data-look="night"] .card-tools .in { color: #9bc700; font-size: 12px; }
[data-look="night"] .card-tools .lock { color: #6d6d6d; font-size: 12px; }
[data-look="night"] .card-tools .add { padding: 4px 10px; font-size: 12.5px; }
[data-look="night"] .example { background: none; border: 0; color: #6d6d6d; font-size: 12px; padding: 2px 6px; }
[data-look="night"] .example:hover { color: #fff; }
[data-look="night"] .pick-hint { color: #6d6d6d; font-size: 12px; text-align: center; }
[data-look="night"] .error { color: #e06c5f; font-size: 13px; }
[data-look="night"] .error:empty { display: none; }
[data-look="night"] .credit { color: #3f3f3f; font-size: 11px; }

[data-look="night"] .overlay { background: rgba(0, 0, 0, 0.72); }
[data-look="night"] .card { background: #161512; border: 1px solid #2b2a27; border-radius: 4px; padding: 26px 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
[data-look="night"] .card .kicker { color: #9bc700; }
[data-look="night"] .card h2 { color: #fff; font-size: 30px; font-weight: 600; }
[data-look="night"] .card h3 { color: #6d6d6d; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
[data-look="night"] .card p { color: #bababa; }
[data-look="night"] .card .unlocked { display: flex; flex-direction: column; gap: 4px; }
[data-look="night"] .card .unlocked p { font-size: 13px; color: #8f8f8f; }
[data-look="night"] .card .unlocked b { color: #fff; font-weight: 600; }
[data-look="night"] .card .invite { color: #c8e07a; }
[data-look="night"] .card a { color: #9bc700; }

/* =====================================================================
   Terminal: the bot as a program
   ===================================================================== */

[data-look="terminal"] { color-scheme: dark; }
[data-look="terminal"] body {
  background: #020502;
  color: #39ff6a;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Monaco, monospace;
}
[data-look="terminal"] .top { border-bottom: 1px solid #1b5a2a; text-shadow: 0 0 5px rgba(57, 255, 106, 0.35); }
[data-look="terminal"] .brand img { display: none; }
[data-look="terminal"] .brand { color: #c6ffd2; }
[data-look="terminal"] .brand span::before { content: "~/"; color: #1f8f3a; }
[data-look="terminal"] .link, [data-look="terminal"] .looks button, [data-look="terminal"] .langs button { color: #1f8f3a; padding: 2px 4px; }
[data-look="terminal"] .link:hover, [data-look="terminal"] .looks button:hover, [data-look="terminal"] .langs button:hover,
[data-look="terminal"] .looks button[aria-pressed="true"], [data-look="terminal"] .langs button[aria-pressed="true"] { color: #39ff6a; }
[data-look="terminal"] .player { color: #c6ffd2; }
[data-look="terminal"] .discord { color: #39ff6a; }
[data-look="terminal"] .discord.locked { color: #1f8f3a; }

[data-look="terminal"] .shop {
  --mine-w: 380px;
  --catalog-w: 440px;
  text-shadow: 0 0 5px rgba(57, 255, 106, 0.35);
  background: radial-gradient(ellipse at 50% 45%, #061409 0%, #020502 75%);
}
[data-look="terminal"] .shop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.5));
}
[data-look="terminal"] .desk {
  --left-w: 340px;
  --right-w: 350px;
  --gap: 16px;
  --pad: 14px 16px 16px;
  --eval-w: 10px;
  --chrome-h: calc(var(--top-h) + 140px);
  text-shadow: 0 0 5px rgba(57, 255, 106, 0.35);
  background: radial-gradient(ellipse at 50% 45%, #061409 0%, #020502 75%);
}
[data-look="terminal"] .desk::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.5));
}
[data-look="terminal"] .panel, [data-look="terminal"] .status-block {
  border: 1px solid #1b5a2a;
  background: rgba(8, 26, 12, 0.45);
}
[data-look="terminal"] .cmd, [data-look="terminal"] .dim { color: #1f8f3a; }
[data-look="terminal"] .me { color: #c6ffd2; }
[data-look="terminal"] .keep { background: #39ff6a; color: #021004; text-shadow: none; padding: 0 2px; }
[data-look="terminal"] .cursor { animation: blink 1.05s steps(1) infinite; }
[data-look="terminal"] .title { font-size: 12px; font-weight: 400; color: #1f8f3a; }
[data-look="terminal"] .ladder-panel { padding: 8px 10px 10px; }
[data-look="terminal"] .hint { color: #1f8f3a; font-size: 12px; margin: 2px 0 8px; }
[data-look="terminal"] .rung { height: 20px; grid-template-columns: 22px 1fr auto 60px; gap: 8px; font-size: 12.5px; padding: 0 4px; }
[data-look="terminal"] .rung .rank { color: #1f8f3a; }
[data-look="terminal"] .rung.boss { color: #ffb000; text-shadow: 0 0 5px rgba(255, 176, 0, 0.35); }
[data-look="terminal"] .rung.you { background: #39ff6a; color: #021004; text-shadow: none; }
[data-look="terminal"] .rung.you .rank { color: #021004; }
[data-look="terminal"] .ladder.picking .rung:not(.you):hover { background: rgba(57, 255, 106, 0.12); }
[data-look="terminal"] .ladder.picking .rung:not(.you):hover .tag::after { font-size: 12.5px; color: #39ff6a; }
[data-look="terminal"] .rung.vs { outline: 1px dashed #39ff6a; outline-offset: -1px; }
[data-look="terminal"] .ladder .rung { height: 20px; }

[data-look="terminal"] .tabs { gap: 2px; padding: 4px 6px; border-bottom: 1px solid #1b5a2a; font-size: 12px; }
[data-look="terminal"] .tabs button { color: #1f8f3a; padding: 2px 6px; }
[data-look="terminal"] .tabs button:hover { color: #39ff6a; }
[data-look="terminal"] .tabs button[aria-selected="true"] { color: #c6ffd2; }
[data-look="terminal"] .console-body { padding: 8px 10px; white-space: pre-wrap; font-size: 12px; scrollbar-color: #1b5a2a transparent; }
[data-look="terminal"] .note { color: #1f8f3a; }
[data-look="terminal"] .entry { margin-bottom: 6px; }
[data-look="terminal"] .entry.theirs { color: #ffb000; text-shadow: 0 0 5px rgba(255, 176, 0, 0.35); }
[data-look="terminal"] .opp { color: #a87400; }
[data-look="terminal"] .entry.current { background: rgba(57, 255, 106, 0.07); }
[data-look="terminal"] .lesson-head { color: #1f8f3a; margin: 10px 0 4px; }
[data-look="terminal"] .feed-head { margin-bottom: 6px; }
[data-look="terminal"] .game-line, [data-look="terminal"] .climb-line { white-space: pre; padding: 0 2px; color: #39ff6a; text-shadow: inherit; font-size: 12px; }
[data-look="terminal"] .game-line:hover, [data-look="terminal"] .climb-line:hover { background: rgba(57, 255, 106, 0.1); }
[data-look="terminal"] .game-line.loss .mark, [data-look="terminal"] .delta.down { color: #ffb000; }
[data-look="terminal"] .game-line.draw .mark { color: #1f8f3a; }
[data-look="terminal"] .game-line.win .mark, [data-look="terminal"] .delta.up { color: #c6ffd2; }
[data-look="terminal"] .feed-loading { color: #39ff6a; font-size: 12px; margin: 2px 0 0 2px; }
[data-look="terminal"] .feed-loading::before { content: "|"; display: inline-block; width: 2ch; animation: term-spin 0.6s steps(1) infinite; }
[data-look="terminal"] .arena-panel { padding: 8px 10px; }
[data-look="terminal"] .arena-go { background: transparent; border: 1px solid #39ff6a; color: #39ff6a; padding: 7px 10px; text-align: left; white-space: pre; text-shadow: 0 0 5px rgba(57, 255, 106, 0.35); }
[data-look="terminal"] .arena-go:hover:not(:disabled) { background: #39ff6a; color: #021004; text-shadow: none; }
[data-look="terminal"] .arena-go:disabled:not(.running) { border-color: #1b5a2a; color: #1f8f3a; cursor: not-allowed; }
[data-look="terminal"] .arena-go.running { cursor: progress; }
[data-look="terminal"] .arena-go.opened { --pulse: #39ff6a; }
[data-look="terminal"] .arena-lock { justify-content: flex-start; color: #1f8f3a; font-size: 12px; }
[data-look="terminal"] .pips { gap: 0; }
[data-look="terminal"] .pips span.on { color: #39ff6a; }

[data-look="terminal"] .game-head { color: #1f8f3a; font-size: 12.5px; }
[data-look="terminal"] .result.win { color: #c6ffd2; }
[data-look="terminal"] .result.loss { color: #ffb000; }
[data-look="terminal"] .board { outline: 1px solid #1b5a2a; }
[data-look="terminal"] .sq.light { background: #0c2413; }
[data-look="terminal"] .sq.dark { background: #051009; }
[data-look="terminal"] .sq { box-shadow: inset 0 0 0 0.5px rgba(57, 255, 106, 0.1); }
[data-look="terminal"] .pc.w img { filter: drop-shadow(0 0 3px rgba(120, 255, 150, 0.55)); }
[data-look="terminal"] .pc.b img { filter: drop-shadow(0 0 1px rgba(150, 255, 170, 0.95)) drop-shadow(0 0 4px rgba(57, 255, 106, 0.6)); }
[data-look="terminal"] .sq.from::before, [data-look="terminal"] .sq.to::before { outline: 1px dashed #39ff6a; outline-offset: -4px; }
[data-look="terminal"] .sq.check::before { background: rgba(255, 40, 40, 0.3); outline: 1px solid #ff4040; outline-offset: -4px; }
[data-look="terminal"] .sq.think::after { inset: 40%; border: 1px solid #39ff6a; box-shadow: 0 0 6px #39ff6a; }
[data-look="terminal"] .sq.take::after { inset: 5%; border: 1px solid #39ff6a; box-shadow: 0 0 6px #39ff6a, inset 0 0 6px rgba(57, 255, 106, 0.6); }
[data-look="terminal"] .sq.maybe::after { inset: 43%; border: 1px solid rgba(57, 255, 106, 0.45); }
[data-look="terminal"] .sq.ring::after { inset: 6%; border: 1px solid rgba(57, 255, 106, 0.35); }
[data-look="terminal"] .sq.scan::before { background: rgba(57, 255, 106, 0.22); outline: 1px solid #39ff6a; outline-offset: -2px; box-shadow: inset 0 0 10px rgba(57, 255, 106, 0.55); }
[data-look="terminal"] .arrow .shaft { stroke-width: 9; }
[data-look="terminal"] .arrows [data-kind="legal"] .shaft { stroke-width: 6; }
[data-look="terminal"] .arrows [data-kind="legal"] { opacity: 0.38; }
[data-look="terminal"] .arrows [data-kind="legal"] .shaft { stroke: #39ff6a; }
[data-look="terminal"] .arrows [data-kind="legal"] .head { fill: #39ff6a; }
[data-look="terminal"] .arrows [data-kind="keep"] { opacity: 0.75; filter: drop-shadow(0 0 4px rgba(57, 255, 106, 0.7)); }
[data-look="terminal"] .arrows [data-kind="keep"] .shaft { stroke: #39ff6a; }
[data-look="terminal"] .arrows [data-kind="keep"] .head { fill: #39ff6a; }
[data-look="terminal"] .arrows [data-kind="miss"] { opacity: 0.75; }
[data-look="terminal"] .arrows [data-kind="miss"] .shaft { stroke: #ffb000; }
[data-look="terminal"] .arrows [data-kind="miss"] .head { fill: #ffb000; }
[data-look="terminal"] .badge { background: #020502; border: 1px solid #39ff6a; box-shadow: 0 0 8px rgba(57, 255, 106, 0.6); }
[data-look="terminal"] .badge span { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(6) brightness(1.1); }
[data-look="terminal"] .badge img { filter: drop-shadow(0 0 2px rgba(57, 255, 106, 0.8)); }
[data-look="terminal"] .files, [data-look="terminal"] .ranks { color: #1f8f3a; font-size: 1.7cqw; }
[data-look="terminal"] .eval-label { color: #1f8f3a; font-size: 10px; }
[data-look="terminal"] .eval-track { border: 1px solid #1b5a2a; background: #d8ffe0; }
[data-look="terminal"] .eval-track:has(.w) { background: #ffb000; }
[data-look="terminal"] .eval-fill.b { background: #ffb000; }
[data-look="terminal"] .eval-fill.w { background: #d8ffe0; }
[data-look="terminal"] .controls > button { color: #39ff6a; border: 1px solid #1b5a2a; font-size: 14px; padding: 3px 10px; text-shadow: inherit; }
[data-look="terminal"] .controls > button:hover { background: rgba(57, 255, 106, 0.12); }
[data-look="terminal"] .speed button { color: #1f8f3a; }
[data-look="terminal"] .speed button.on { background: #39ff6a; color: #021004; text-shadow: none; }
[data-look="terminal"] .ply { color: #1f8f3a; }

[data-look="terminal"] .right { gap: 14px; }
[data-look="terminal"] .center { padding: 12px 8px; }
[data-look="terminal"] .join input { background: transparent; border: 1px solid #1b5a2a; color: #c6ffd2; padding: 6px 8px; caret-color: #39ff6a; text-shadow: inherit; }
[data-look="terminal"] .join input:focus { outline: none; border-color: #39ff6a; }
[data-look="terminal"] .join input::placeholder { color: #1f8f3a; }

[data-look="terminal"] .tour-dim { fill: rgba(0, 4, 1, 0.76); }
[data-look="terminal"] .tour-ring { outline: 1px solid #39ff6a; box-shadow: 0 0 14px rgba(57, 255, 106, 0.55); animation: blink 1.05s steps(1) infinite; }
[data-look="terminal"] .tour-bubble {
  width: 330px;
  background: #020502;
  border: 1px solid #39ff6a;
  color: #39ff6a;
  padding: 9px 12px 10px;
  box-shadow: 0 0 24px rgba(57, 255, 106, 0.22);
  text-shadow: 0 0 5px rgba(57, 255, 106, 0.35);
  font-size: 12.5px;
  line-height: 1.5;
}
[data-look="terminal"] .tour-arrow { background: #020502; border: 0 solid #39ff6a; }
[data-look="terminal"] .tour-arrow[data-side="left"] { border-width: 1px 1px 0 0; }
[data-look="terminal"] .tour-arrow[data-side="right"] { border-width: 0 0 1px 1px; }
[data-look="terminal"] .tour-arrow[data-side="below"] { border-width: 1px 0 0 1px; }
[data-look="terminal"] .tour-arrow[data-side="above"] { border-width: 0 1px 1px 0; }
[data-look="terminal"] .tour-kicker { color: #1f8f3a; }
[data-look="terminal"] .tour-bubble b { color: #c6ffd2; font-weight: 400; }
[data-look="terminal"] .tour-action { color: #ffb000; }
[data-look="terminal"] .tour-next { background: none; border: 1px solid #39ff6a; color: #39ff6a; padding: 2px 10px; text-shadow: inherit; }
[data-look="terminal"] .tour-next:hover:not(:disabled) { background: #39ff6a; color: #021004; text-shadow: none; }
[data-look="terminal"] .wire.link { stroke: #39ff6a; stroke-width: 1.5; filter: drop-shadow(0 0 3px rgba(57, 255, 106, 0.8)); }
[data-look="terminal"] .wire-head.link { fill: #39ff6a; }

[data-look="terminal"] .status-block { padding: 8px 10px; white-space: pre-wrap; }
[data-look="terminal"] .status-block .key { color: #1f8f3a; }

[data-look="terminal"] .orders-panel { padding: 0 2px; }
[data-look="terminal"] .orders-panel .title { margin-bottom: 4px; }
[data-look="terminal"] .slot { gap: 8px; padding: 2px 0; background: #020502; }
[data-look="terminal"] .slot .num { color: #1f8f3a; white-space: pre; }
[data-look="terminal"] .slot .desc { color: #1f8f3a; font-size: 11.5px; }
[data-look="terminal"] .slot .tag { color: #ffb000; text-shadow: 0 0 5px rgba(255, 176, 0, 0.35); white-space: nowrap; }
[data-look="terminal"] .slot.fired .name { color: #c6ffd2; }
[data-look="terminal"] .slot.skipped .name { color: #1f8f3a; }
[data-look="terminal"] .slot.empty .label { color: #1f8f3a; }
[data-look="terminal"] .slot.dragging { background: #031a08; outline: 1px dashed #39ff6a; }
[data-look="terminal"] .slots { --land: rgba(57, 255, 106, 0.25); }
[data-look="terminal"] .order-cursor { left: 2px; color: #c6ffd2; line-height: 1; text-shadow: 0 0 6px #39ff6a; }
[data-look="terminal"] .order-cursor::before { content: ">"; }
[data-look="terminal"] .ghost { background: #020502; color: #c6ffd2; border: 1px solid #39ff6a; padding: 0 4px; font-size: 12.5px; text-shadow: 0 0 5px rgba(57, 255, 106, 0.6); box-shadow: 0 0 14px rgba(57, 255, 106, 0.5); }
[data-look="terminal"] .slot .tools button { color: #1f8f3a; padding: 0 1px; text-shadow: inherit; }
[data-look="terminal"] .slot .tools button:hover:not(:disabled) { color: #39ff6a; }
[data-look="terminal"] .pool-title { color: #1f8f3a; margin: 10px 0 2px; }
[data-look="terminal"] .pool-orders { gap: 2px 10px; }
[data-look="terminal"] .add { background: none; border: 0; padding: 0 2px; color: #39ff6a; text-shadow: inherit; }
[data-look="terminal"] .add:hover:not(:disabled) { background: #39ff6a; color: #021004; text-shadow: none; }
[data-look="terminal"] .add:disabled { color: #1f8f3a; opacity: 0.6; }
[data-look="terminal"] .add.suggested { --pulse: #39ff6a; animation: pulse 1.6s ease-in-out infinite; }
[data-look="terminal"] .pool-note, [data-look="terminal"] .locked-league { color: #1f8f3a; font-size: 12px; }
[data-look="terminal"] .locked { margin-top: 8px; }

[data-look="terminal"] .actions .primary, [data-look="terminal"] .join .primary, [data-look="terminal"] .card .primary {
  background: transparent;
  border: 1px solid #39ff6a;
  color: #39ff6a;
  padding: 7px 10px;
  text-align: left;
  text-shadow: inherit;
}
[data-look="terminal"] .primary:hover:not(:disabled) { background: #39ff6a; color: #021004; text-shadow: none; }
[data-look="terminal"] .primary:disabled { border-color: #1b5a2a; color: #1f8f3a; }
[data-look="terminal"] .actions .secondary { background: transparent; border: 1px solid #1b5a2a; color: #1f8f3a; padding: 6px 10px; text-align: left; text-shadow: inherit; }
[data-look="terminal"] .actions .secondary:hover:not(:disabled) { color: #39ff6a; border-color: #39ff6a; }
[data-look="terminal"] .pick-hint { color: #1f8f3a; font-size: 12px; }
[data-look="terminal"] .error { color: #ff5a4a; }
[data-look="terminal"] .error:empty { display: none; }
[data-look="terminal"] .spark .blocks { display: inline; color: #1f8f3a; }
[data-look="terminal"] .climb-chart .caption { color: #1f8f3a; }
[data-look="terminal"] .spark .blocks .above { color: #c6ffd2; }
[data-look="terminal"] button:focus-visible, [data-look="terminal"] a:focus-visible { outline: 1px dashed #c6ffd2; outline-offset: 2px; }
[data-look="terminal"] .credit { color: #1f8f3a; font-size: 11px; opacity: 0.7; }

[data-look="terminal"] .overlay { background: rgba(0, 0, 0, 0.78); }
[data-look="terminal"] .card {
  width: min(600px, 92vw);
  background: #020502;
  border: 1px solid #39ff6a;
  box-shadow: 0 0 24px rgba(57, 255, 106, 0.25);
  padding: 16px 18px;
  gap: 6px;
  text-shadow: 0 0 5px rgba(57, 255, 106, 0.35);
  white-space: pre-wrap;
}
[data-look="terminal"] .card h2 { font-size: 15px; font-weight: 400; color: #c6ffd2; }
[data-look="terminal"] .card a { color: #c6ffd2; }

[data-look="terminal"] .screens button { color: #1f8f3a; padding: 2px 4px; }
[data-look="terminal"] .screens button:hover, [data-look="terminal"] .screens button[aria-pressed="true"] { color: #39ff6a; }
[data-look="terminal"] .screens button.new::after { background: #39ff6a; box-shadow: 0 0 6px #39ff6a; border-radius: 0; }
[data-look="terminal"] .to-shop { color: #39ff6a; padding: 0 2px; margin-top: 10px; text-align: left; text-shadow: inherit; }
[data-look="terminal"] .to-shop:hover { background: #39ff6a; color: #021004; text-shadow: none; }
[data-look="terminal"] .shop-mine, [data-look="terminal"] .shop-catalog { padding: 14px 16px; }
[data-look="terminal"] .shop-mine .orders-panel { border: 1px solid #1b5a2a; background: rgba(8, 26, 12, 0.45); padding: 8px 10px 10px 18px; }
[data-look="terminal"] .shop .slot .sign { display: none; }
[data-look="terminal"] .shop .slot:not(.empty) { grid-template-columns: 22px minmax(0, 1fr) auto; }
[data-look="terminal"] .shop .slot { background: transparent; }
[data-look="terminal"] .shop .slot:hover, [data-look="terminal"] .order-main:hover { background: rgba(57, 255, 106, 0.08); }
[data-look="terminal"] .shop .slot.focus, [data-look="terminal"] .order-card.focus { outline: 1px dashed #39ff6a; outline-offset: -1px; }
[data-look="terminal"] .shop .slot.all .tag, [data-look="terminal"] .shop .slot.skipped .tag, [data-look="terminal"] .shop .slot.unread .tag { color: #1f8f3a; text-shadow: none; }
[data-look="terminal"] .shop .slot.unread .name { color: #1f8f3a; opacity: 0.6; }
[data-look="terminal"] .shop-verdict { color: #c6ffd2; }
[data-look="terminal"] .shop-head { color: #1f8f3a; }
[data-look="terminal"] .shop-note { color: #1f8f3a; font-size: 12px; }
[data-look="terminal"] .shop-note.warn { color: #ffb000; text-shadow: 0 0 5px rgba(255, 176, 0, 0.35); }
[data-look="terminal"] .shop-note.win, [data-look="terminal"] .shop-note.end, [data-look="terminal"] .shop-note.focus { color: #c6ffd2; }
[data-look="terminal"] .shop-tools .primary { background: transparent; border: 1px solid #39ff6a; color: #39ff6a; padding: 7px 14px; text-shadow: inherit; }
[data-look="terminal"] .shop-tools .secondary { background: transparent; border: 1px solid #1b5a2a; color: #1f8f3a; padding: 3px 8px; text-shadow: inherit; }
[data-look="terminal"] .shop-tools .secondary:hover:not(:disabled) { color: #39ff6a; border-color: #39ff6a; }
[data-look="terminal"] .shop-tools .secondary:disabled { opacity: 0.45; }
[data-look="terminal"] .spare { outline: 1px solid transparent; }
[data-look="terminal"] .spare:hover { outline-color: #1b5a2a; }
[data-look="terminal"] .spare.picked { outline: 1px solid #39ff6a; box-shadow: 0 0 8px rgba(57, 255, 106, 0.5); }
[data-look="terminal"] .spare img[src*="/w"] { filter: drop-shadow(0 0 3px rgba(120, 255, 150, 0.55)); }
[data-look="terminal"] .spare img[src*="/b"] { filter: drop-shadow(0 0 1px rgba(150, 255, 170, 0.95)) drop-shadow(0 0 4px rgba(57, 255, 106, 0.6)); }
[data-look="terminal"] .tray-hint { color: #1f8f3a; font-size: 11.5px; }
[data-look="terminal"] .sq.picked::before { outline: 1px solid #39ff6a; outline-offset: -3px; background: rgba(57, 255, 106, 0.18); }
[data-look="terminal"] .shop-catalog .hint { margin-bottom: 10px; }
[data-look="terminal"] .family h3 { color: #1f8f3a; font-size: 12px; font-weight: 400; margin: 2px 0; }
[data-look="terminal"] .order-card { padding: 1px 0; }
[data-look="terminal"] .order-main { gap: 8px; grid-template-columns: minmax(0, 1fr) auto; color: inherit; text-shadow: inherit; }
[data-look="terminal"] .order-main .sign { display: none; }
[data-look="terminal"] .order-main .name { color: #c6ffd2; }
[data-look="terminal"] .order-main .desc { color: #1f8f3a; font-size: 11.5px; }
[data-look="terminal"] .order-card .count { color: #39ff6a; font-size: 12px; }
[data-look="terminal"] .order-card.idle .name, [data-look="terminal"] .order-card.idle .count { color: #1f8f3a; }
[data-look="terminal"] .order-card.shut .name { color: #1f8f3a; }
[data-look="terminal"] .card-tools { flex-direction: row; gap: 4px; }
[data-look="terminal"] .card-tools .in { color: #c6ffd2; font-size: 12px; }
[data-look="terminal"] .card-tools .lock { color: #1f8f3a; font-size: 12px; }
[data-look="terminal"] .example { background: none; border: 0; color: #1f8f3a; padding: 0 2px; text-shadow: inherit; }
[data-look="terminal"] .example:hover { background: #39ff6a; color: #021004; text-shadow: none; }

/* ---------- Invites: the invite-only screen, and the admin's invite card ---------- */

/* Behind the invite-only screen there's no tutorial; the header stays above it, for the look and the language. */
.top.gated #how, .top.gated #how-menu { display: none; }
.overlay.under-top { z-index: 25; }
body.gated .desk, body.gated .shop { visibility: hidden; }
.card.invites { position: relative; }
.card.invites .close { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.new-link { display: flex; flex-direction: column; gap: 8px; }
.new-link[hidden] { display: none; }
.link-box { width: 100%; min-width: 0; font: inherit; font-size: 13px; }
.invite-send { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.invite-list { display: flex; flex-direction: column; }
.invite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 0; }
.invite-row .invitee { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-row .what { text-align: right; font-size: 12.5px; }
.invite-row .invite-send { grid-column: 1 / -1; }
.invite-button { white-space: nowrap; }

[data-look="night"] .card.invites .close { color: #8f8f8f; }
[data-look="night"] .card.invites .close:hover { color: #fff; }
[data-look="night"] .card.invites .secondary { background: #262421; color: #bababa; border: 0; border-radius: 3px; padding: 7px 11px; font-size: 13px; }
[data-look="night"] .card.invites .secondary:hover:not(:disabled) { background: #302e2b; color: #fff; }
[data-look="night"] .card.invites .dim { color: #6d6d6d; }
[data-look="night"] .link-box { background: #0f0e0c; border: 1px solid #3a3835; border-radius: 3px; padding: 8px 10px; color: #c8e07a; }
[data-look="night"] .invite-row { border-top: 1px solid #262421; }
[data-look="night"] .invite-row .invitee { color: #fff; font-weight: 600; }
[data-look="night"] .invite-row .what { color: #8f8f8f; }
[data-look="night"] .invite-row.used .what { color: #9bc700; }
[data-look="night"] .invite-row.expired { opacity: 0.55; }
[data-look="night"] .invite-button { color: #9bc700; }
[data-look="night"] .invite-button:hover { color: #c8e07a; }

[data-look="terminal"] .card.invites .close { color: #39ff6a; font-size: 13px; text-shadow: inherit; }
[data-look="terminal"] .card.invites .secondary { background: transparent; color: #39ff6a; border: 1px solid #1b5a2a; padding: 2px 6px; text-shadow: inherit; }
[data-look="terminal"] .card.invites .secondary:hover:not(:disabled) { background: #39ff6a; color: #021004; text-shadow: none; }
[data-look="terminal"] .card.invites .dim { color: #1f8f3a; }
[data-look="terminal"] .card.invites h3 { color: #1f8f3a; font-size: 13px; font-weight: 400; margin-top: 6px; }
[data-look="terminal"] .link-box { background: transparent; border: 1px solid #1b5a2a; color: #c6ffd2; padding: 4px 6px; }
[data-look="terminal"] .invite-row { border-top: 1px dashed #1b5a2a; padding: 5px 0; }
[data-look="terminal"] .invite-row .invitee { color: #c6ffd2; }
[data-look="terminal"] .invite-row .what { color: #1f8f3a; }
[data-look="terminal"] .invite-row.used .what { color: #39ff6a; }
[data-look="terminal"] .invite-row.expired { opacity: 0.5; }
[data-look="terminal"] .invite-button { color: #39ff6a; }

/* ---------- Narrow screens and phones: one column, the board on top and its buttons under it ---------- */

@media (max-width: 1080px) {
  html, body { height: auto; }
  body { min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .top { position: sticky; top: 0; gap: 6px; padding: 0 6px 0 12px; }
  .brand { margin-right: auto; }
  .menu-button { display: block; padding: 8px 10px; }
  .prefs {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px 18px;
  }
  .top.open .prefs { display: flex; }
  .who { margin-left: 0; flex-wrap: wrap; }
  /* Every panel straight in one column, in the order a phone wants them. */
  .desk { display: flex; flex-direction: column; width: 100%; max-width: 680px; margin: 0 auto; gap: 0; padding: 0 0 18px; }
  .left, .center, .right { display: contents; }
  .game-head { order: 1; }
  .stage { order: 2; }
  .controls { order: 3; }
  .actions { order: 4; }
  .error { order: 5; }
  .arena-panel { order: 6; }
  .status-block { order: 7; }
  .orders-panel { order: 8; }
  .ladder-panel { order: 9; }
  .console { order: 10; }
  .credit { order: 11; }
  .game-head { padding: 12px 12px 8px; scroll-margin-top: var(--top-h); }
  .stage { gap: 6px; padding: 0 8px; }
  .eval-label { display: none; }
  .rung { height: 34px; }
  .board-frame { width: min(calc(100% - var(--eval-w) - 6px), 640px); }
  .controls { justify-content: center; flex-wrap: wrap; row-gap: 2px; padding: 6px 4px 0; }
  .controls.off { display: none; }
  .controls > button { padding: 6px 8px; }
  .speed { margin-left: 6px; }
  .ply { margin-left: 6px; min-width: 0; }
  .actions { padding: 12px 12px 0; }
  .error { padding: 8px 12px 0; }
  .console { flex: none; min-height: 0; }
  .console-body { max-height: 70vh; }
  .credit { padding: 16px 16px 0; }
  .card { max-height: 86vh; }
}

/* A finger: bigger targets, and orders drag by their number, so the page still scrolls over them. */
@media (pointer: coarse) {
  .slot.grab { touch-action: pan-y; }
  .slot.grab .num { touch-action: none; cursor: grab; padding: 6px 0; margin: -6px 0; }
  .tools button { padding: 8px 9px; }
  .ladder.picking .rung:not(.you) .tag:empty::after { content: "▶"; opacity: 0.45; }
}

@media (max-width: 1080px) {
  [data-look="night"] .prefs { background: #050505; border-bottom: 1px solid #1c1b19; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55); }
  [data-look="night"] .menu-button { color: #bababa; }
  [data-look="night"] .top.open .menu-button { color: #fff; }
  [data-look="night"] .status-block, [data-look="night"] .orders-panel, [data-look="night"] .ladder-panel, [data-look="night"] .console {
    background: #050505;
    margin-top: 10px;
  }
  [data-look="night"] .status-block, [data-look="night"] .orders-panel { padding: 18px 16px 16px; }
  [data-look="night"] .ladder-panel { padding: 18px 16px 14px; border-bottom: 0; }
  [data-look="night"] .tabs { padding: 16px 16px 8px; }
  [data-look="night"] .console-body { padding: 4px 10px 16px; }
  [data-look="night"] .arena-panel { padding: 10px 12px 4px; border-top: 0; }
  [data-look="night"] .order-cursor { left: -13px; }
  [data-look="night"] .orders-panel { padding-left: 20px; }

  [data-look="terminal"] .prefs { background: #020502; border-bottom: 1px solid #1b5a2a; }
  [data-look="terminal"] .menu-button { color: #39ff6a; padding: 6px 8px; }
  [data-look="terminal"] .desk { padding: 0 0 16px; }
  [data-look="terminal"] .game-head { padding: 10px 10px 6px; }
  [data-look="terminal"] .ladder .rung { height: 30px; }
  [data-look="terminal"] .panel, [data-look="terminal"] .status-block { margin: 10px 8px 0; }
  [data-look="terminal"] .orders-panel { margin: 14px 8px 0; padding: 0 2px 0 4px; }
  [data-look="terminal"] .arena-panel { margin-top: 10px; }
  [data-look="terminal"] .actions { padding: 12px 8px 0; }
}

@media (max-width: 1080px) {
  /* A member's header: the screens in place of the name, How to play in the menu. */
  .top.member #how { display: none; }
  .top.member .how-menu { display: block; }
  .top.member .brand span { display: none; }
  [data-look="terminal"] .top.member .brand span { display: inline; font-size: 0; }
  [data-look="terminal"] .top.member .brand span::before { font-size: 13px; }
  .shop { display: flex; flex-direction: column; width: 100%; max-width: 680px; margin: 0 auto; padding-bottom: 18px; }
  .shop-mine, .shop-catalog, .shop-center { overflow: visible; }
  .shop-center { padding: 10px 8px 4px; gap: 8px; }
  /* Over the board on a phone: the same height, one move's line or two. */
  .shop-verdict { min-height: 2.9em; min-height: 2lh; }
  .shop .game-head { order: 0; padding: 4px 8px 0; scroll-margin-top: var(--top-h); }
  .shop .board-frame { width: min(100%, 54vh, 440px); margin-top: 0; }
  .shop-tools .primary { min-width: 0; width: min(100%, 440px); }
  .spares { grid-template-columns: repeat(10, minmax(0, 34px)); gap: 2px; }
  .spare { width: auto; height: auto; aspect-ratio: 1; }
  .tray { margin-bottom: 0; width: min(100%, 440px); }
  [data-look="night"] .shop-mine { padding: 16px 16px 14px 22px; }
  [data-look="night"] .shop-catalog { margin-top: 10px; padding: 18px 12px 16px; }
  [data-look="night"] .shop-orders { background: none; margin-top: 0; padding: 0; }
  [data-look="terminal"] .shop-mine, [data-look="terminal"] .shop-catalog { padding: 10px 8px 0; }
  [data-look="terminal"] .shop-mine .orders-panel { margin: 0; }
}

@media (max-width: 1080px) and (pointer: coarse) {
  [data-look="night"] .add { padding: 8px 12px; }
  [data-look="terminal"] .add { padding: 4px 4px; }
}