/* ══════════════════════════════════════════════════════════════════════════
   onyx-simkit.css — the visual language for the DOM simulation games.
   Companion to assets/lib/onyx-simkit.js. 2026-09-25.

   Every selector is `ok-` prefixed. Ten of the eleven games this serves still
   share one inline stylesheet with each other, so a bare class name here would
   leak across all of them (§8.5 — a shared-shell change is a blast-radius
   change). Nothing in this file styles an element it does not own.

   Theming is per game through four custom properties set on the mount node:
     --ok-accent   the game's own hue
     --ok-deep     its darkest surface
     --ok-lift     its raised surface
     --ok-ink      its body text
   Defaults below are neutral, so a game that sets nothing still looks
   deliberate rather than broken.
   ══════════════════════════════════════════════════════════════════════════ */

.ok-mount{
  --ok-accent:#c9a256; --ok-deep:#0b1020; --ok-lift:#191233; --ok-ink:#e8e2f5;
  --ok-dim:#8a7fae; --ok-line:rgba(255,255,255,.09);
  position:relative; border-radius:10px; overflow:hidden; color:var(--ok-ink);
  background:
    radial-gradient(120% 80% at 50% 116%, color-mix(in srgb, var(--ok-accent) 18%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--ok-deep) 0%, color-mix(in srgb, var(--ok-deep) 70%, #000) 100%);
  border:1px solid color-mix(in srgb, var(--ok-accent) 24%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ok-mount{ background:linear-gradient(180deg,#0b1020,#070a16); border-color:rgba(201,162,86,.24); }
}

/* ── shared: stat pills ─────────────────────────────────────────────────── */
.ok-stats{ display:flex; flex-wrap:wrap; gap:5px; padding:8px 8px 2px; }
.ok-stat{ display:inline-flex; align-items:baseline; gap:5px; padding:3px 9px; border-radius:999px;
  background:rgba(255,255,255,.045); border:1px solid var(--ok-line); font:600 .58rem/1.4 'Inter',sans-serif; }
.ok-stat i{ font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--ok-dim); }
.ok-stat b{ font-variant-numeric:tabular-nums; color:var(--ok-ink); font-size:.72rem; }
.ok-stat.is-good b{ color:#4ec97a; } .ok-stat.is-warn b{ color:#ffb020; } .ok-stat.is-bad b{ color:#ff5c5c; }

/* ── shared: empty state ────────────────────────────────────────────────── */
.ok-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:150px; padding:20px; text-align:center; }
.ok-empty b{ font:800 .8rem/1 'Inter',sans-serif; letter-spacing:.16em; color:var(--ok-accent); }
.ok-empty span{ font:500 .68rem/1.5 'Inter',sans-serif; color:var(--ok-dim); max-width:26ch; }

/* ── register 1: isoMap ─────────────────────────────────────────────────── */
.ok-iso-wrap{ position:relative; }
.ok-iso{ display:grid; grid-template-columns:repeat(var(--ok-cols,4),1fr); gap:2px 0;
  padding:12px 8px 14px; place-items:end center; }
.ok-tile{ all:unset; position:relative; display:flex; flex-direction:column; align-items:center;
  width:100%; cursor:pointer; padding-bottom:13px; transition:transform .16s ease, filter .16s ease; }
.ok-tile svg{ width:100%; max-width:72px; height:auto; overflow:visible; display:block; }
.ok-tile:hover{ transform:translateY(-3px); }
.ok-tile:focus-visible{ outline:2px solid var(--ok-accent); outline-offset:3px; border-radius:6px; }
.ok-tile:not(.is-own) .ok-mass{ filter:grayscale(.7) brightness(.62); }
.ok-tile.is-foe .ok-mass{ filter:hue-rotate(-38deg) saturate(1.3); }
.ok-tile-l{ position:absolute; bottom:1px; font:700 .46rem/1 'Inter',sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ok-dim); white-space:nowrap; }
.ok-tile.is-own .ok-tile-l{ color:var(--ok-accent); }
.ok-tile-n{ position:absolute; top:0; right:6px; font:700 .46rem/1 'Inter',sans-serif; color:#ff9f4a; }
@keyframes okGlow{ 0%,100%{opacity:.85} 50%{opacity:.4} }
.ok-win{ animation:okGlow 4.5s ease-in-out infinite; }
.ok-tile:nth-child(3n) .ok-win{ animation-delay:-1.5s; }
.ok-tile:nth-child(3n+1) .ok-win{ animation-delay:-3s; }

/* ── register 2: schematic ──────────────────────────────────────────────── */
.ok-sch{ display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:6px; padding:12px 10px; }
.ok-sch-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px;
  border-radius:8px; background:rgba(255,255,255,.035); border:1px solid var(--ok-line); }
.ok-sch-cell svg{ width:100%; max-width:62px; height:auto; }
.ok-arc{ transition:stroke-dasharray .55s ease; }
.ok-sch-v{ fill:var(--ok-ink); font:800 15px 'Inter',sans-serif; font-variant-numeric:tabular-nums; }
.ok-sch-l{ font:700 .48rem/1 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ok-dim); }
.ok-sch-cell.is-warn{ border-color:rgba(255,176,32,.42); }
.ok-sch-cell.is-fail{ border-color:rgba(255,92,92,.55); background:rgba(255,92,92,.07); }
.ok-bus{ height:3px; margin:0 10px 10px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.ok-bus i{ display:block; height:100%; background:linear-gradient(90deg,var(--ok-accent),#f2e2b8); transition:width .6s ease; }

/* ── register 3: standings ──────────────────────────────────────────────── */
.ok-table-wrap{ padding:8px; overflow-x:auto; }
.ok-table{ width:100%; border-collapse:collapse; font:600 .62rem/1.5 'Inter',sans-serif; }
.ok-table th{ font:700 .5rem/1 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ok-dim); text-align:right; padding:0 6px 6px; white-space:nowrap; }
.ok-table td{ padding:5px 6px; border-top:1px solid var(--ok-line); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ok-table tr.is-you td{ background:color-mix(in srgb, var(--ok-accent) 12%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)){ .ok-table tr.is-you td{ background:rgba(201,162,86,.12); } }
.ok-rank{ width:1.6rem; color:var(--ok-dim); font-weight:800; }
.ok-name{ text-align:left !important; color:var(--ok-ink); font-weight:700; }
.ok-form{ letter-spacing:1px; }
.ok-form i{ font-style:normal; display:inline-block; width:11px; height:11px; line-height:11px;
  border-radius:3px; font-size:.44rem; font-weight:800; text-align:center; margin-left:1px; color:#07050a; }
.ok-f-w{ background:#4ec97a; } .ok-f-l{ background:#ff5c5c; } .ok-f-d{ background:#8a7fae; }
.ok-sp{ width:112px; }
.ok-spark{ width:108px; height:26px; display:block; }

/* ── register 4: clash ──────────────────────────────────────────────────── */
.ok-clash{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; padding:14px 10px; }
.ok-side{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.ok-side.ok-r{ align-items:flex-end; }
.ok-side-n{ font:800 .6rem/1 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ok-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.ok-units{ display:flex; gap:2px; flex-wrap:wrap; }
.ok-side.ok-r .ok-units{ justify-content:flex-end; }
.ok-unit{ width:26px; height:26px; }
.ok-hp{ width:100%; height:4px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.ok-hp i{ display:block; height:100%; transition:width .5s ease; }
.ok-side-p{ font:800 .8rem/1 'Inter',sans-serif; font-variant-numeric:tabular-nums; color:var(--ok-accent); }
.ok-vs{ font:800 .62rem/1 'Inter',sans-serif; letter-spacing:.14em; color:var(--ok-dim);
  padding:5px 8px; border-radius:999px; border:1px solid var(--ok-line); white-space:nowrap; }
@keyframes okHit{ 0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)} }
.ok-vs.is-hit{ animation:okHit .4s ease-out; color:var(--ok-accent); border-color:var(--ok-accent); }

/* ── register 5: creature ───────────────────────────────────────────────── */
.ok-creature{ width:100%; max-width:92px; height:auto; display:block; }
@keyframes okBreathe{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-2px) scale(1.025)} }
.ok-org{ animation:okBreathe 3.6s ease-in-out infinite; transform-origin:50% 70%; }
.ok-pen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:7px; padding:12px 10px; }
.ok-pet{ all:unset; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px;
  border-radius:9px; background:rgba(255,255,255,.035); border:1px solid var(--ok-line); cursor:pointer;
  transition:transform .16s ease, border-color .16s ease; }
.ok-pet:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--ok-accent) 45%, transparent); }
.ok-pet:focus-visible{ outline:2px solid var(--ok-accent); outline-offset:2px; }
.ok-pet.is-sel{ border-color:var(--ok-accent); background:color-mix(in srgb, var(--ok-accent) 12%, transparent); }
.ok-pet-n{ font:700 .52rem/1.2 'Inter',sans-serif; color:var(--ok-ink); text-align:center; }
.ok-pet-s{ font:600 .46rem/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ok-dim); }

@media (prefers-reduced-motion:reduce){
  .ok-win,.ok-org{ animation:none; }
  .ok-vs.is-hit{ animation:none; }
}
@media (max-width:380px){
  /* HONOUR --ok-cols, do not hardcode 3.
     The first cut forced 3 columns here. Every isoMap game has a FIXED board
     geometry — CryptoCommander is a 6x6 grid where adjacency is a game rule,
     GangstaCraft is 5 districts that read as one street — so collapsing the
     grid lied about the board, and all three games had to override this on
     their own element. A default that every caller overrides is a wrong
     default. Narrow phones now get smaller tiles instead of a reshaped board. */
  .ok-iso{ grid-template-columns:repeat(var(--ok-cols,3),1fr); gap:1px 0; }
  .ok-tile svg{ max-width:58px; }
  .ok-clash{ grid-template-columns:1fr auto 1fr; gap:3px; padding:10px 6px; }
  .ok-unit{ width:21px; height:21px; }
}

/* ══ REGISTER 6 — narrative ════════════════════════════════════════════════
   Added 2026-09-26. A scene wants weight and its choices want shape; this is
   deliberately quiet so the writing carries the screen. */
.ok-scene{border:1px solid var(--ok-lift);border-radius:14px;background:
  linear-gradient(170deg,var(--ok-deep),color-mix(in srgb,var(--ok-deep) 88%,#000));
  padding:18px 18px 16px;max-width:720px;margin:0 auto}
.ok-scene-h{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.ok-sigil{width:46px;height:46px;flex:0 0 46px;color:var(--ok-accent);
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--ok-accent) 45%,transparent))}
.ok-scene-t{min-width:0}
.ok-scene-n{display:block;font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ok-ink) 52%,transparent)}
.ok-scene-t b{font-size:19px;letter-spacing:.01em;color:var(--ok-ink)}
.ok-scene-b{margin:0 0 14px;font-size:14.5px;line-height:1.62;
  color:color-mix(in srgb,var(--ok-ink) 84%,transparent)}
.ok-outcome{margin:0 0 14px;padding:10px 12px;border-left:3px solid var(--ok-accent);
  border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--ok-accent) 9%,transparent);
  font-size:13.5px;line-height:1.55;color:var(--ok-ink)}
.ok-choices{display:grid;gap:8px}
.ok-choice{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;
  text-align:left;padding:11px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--ok-lift);background:color-mix(in srgb,var(--ok-ink) 4%,transparent);
  color:var(--ok-ink);font:inherit;font-size:14px;transition:border-color .15s,background .15s,transform .12s}
.ok-choice:hover{border-color:var(--ok-accent);transform:translateX(3px);
  background:color-mix(in srgb,var(--ok-accent) 11%,transparent)}
.ok-choice:focus-visible{outline:2px solid var(--ok-accent);outline-offset:2px}
.ok-choice-i{font:700 10px/1 ui-monospace,monospace;letter-spacing:.08em;
  color:var(--ok-accent);padding-top:2px}
.ok-choice-h{grid-column:2;font-size:11.5px;font-style:normal;
  color:color-mix(in srgb,var(--ok-ink) 50%,transparent)}
.ok-choice.is-good:hover{border-color:#4ade80;background:color-mix(in srgb,#4ade80 11%,transparent)}
.ok-choice.is-good .ok-choice-i{color:#4ade80}
.ok-choice.is-bad:hover{border-color:#f87171;background:color-mix(in srgb,#f87171 11%,transparent)}
.ok-choice.is-bad .ok-choice-i{color:#f87171}

/* ══ REGISTER 7 — grid ═════════════════════════════════════════════════════
   One lattice, two dialects. Maze draws edges as walls; gem fills cells with
   the procedural shard from the kit. */
.ok-grid{display:grid;grid-template-columns:repeat(var(--ok-gcols,8),1fr);
  gap:var(--ok-ggap,4px);max-width:min(100%,520px);margin:0 auto}
.ok-cell{aspect-ratio:1;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--ok-lift);border-radius:7px;color:var(--ok-ink);
  background:color-mix(in srgb,var(--ok-ink) 5%,transparent);
  font:inherit;transition:background .14s,border-color .14s,transform .1s,opacity .2s}
.ok-cell:hover{border-color:var(--ok-accent)}
.ok-cell:focus-visible{outline:2px solid var(--ok-accent);outline-offset:1px}
.ok-cell-g{font-size:clamp(11px,3.4vw,17px);line-height:1}
.ok-cell.is-sel{border-color:var(--ok-accent);transform:scale(.9);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ok-accent) 55%,transparent)}
.ok-cell.is-match{animation:ok-pop .26s ease-out}
.ok-cell.is-gone{opacity:0;pointer-events:none;transform:scale(.4)}
@keyframes ok-pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.ok-gem{width:78%;height:78%;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
/* maze dialect: no gaps, walls are real edges */
.ok-grid.is-maze{--ok-ggap:0;gap:0}
.ok-grid.is-maze .ok-cell{border-radius:0;border:0;
  background:color-mix(in srgb,var(--ok-ink) 4%,transparent);cursor:default}
.ok-grid.is-maze .ok-cell.w-n{box-shadow:inset 0 2px 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-e{box-shadow:inset -2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-s{box-shadow:inset 0 -2px 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-w{box-shadow:inset 2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-n.w-e{box-shadow:inset 0 2px 0 0 var(--ok-accent),inset -2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-n.w-w{box-shadow:inset 0 2px 0 0 var(--ok-accent),inset 2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-s.w-e{box-shadow:inset 0 -2px 0 0 var(--ok-accent),inset -2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-s.w-w{box-shadow:inset 0 -2px 0 0 var(--ok-accent),inset 2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-n.w-e.w-s{box-shadow:inset 0 2px 0 0 var(--ok-accent),inset -2px 0 0 0 var(--ok-accent),inset 0 -2px 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-n.w-e.w-w{box-shadow:inset 0 2px 0 0 var(--ok-accent),inset -2px 0 0 0 var(--ok-accent),inset 2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-n.w-s.w-w{box-shadow:inset 0 2px 0 0 var(--ok-accent),inset 0 -2px 0 0 var(--ok-accent),inset 2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-e.w-s.w-w{box-shadow:inset -2px 0 0 0 var(--ok-accent),inset 0 -2px 0 0 var(--ok-accent),inset 2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.w-n.w-e.w-s.w-w{box-shadow:inset 0 2px 0 0 var(--ok-accent),inset -2px 0 0 0 var(--ok-accent),inset 0 -2px 0 0 var(--ok-accent),inset 2px 0 0 0 var(--ok-accent)}
.ok-grid.is-maze .ok-cell.is-here{background:color-mix(in srgb,var(--ok-accent) 34%,transparent)}
.ok-grid.is-maze .ok-cell.is-goal{background:color-mix(in srgb,#4ade80 28%,transparent)}
.ok-grid.is-maze .ok-cell.is-wall{background:color-mix(in srgb,var(--ok-ink) 22%,transparent)}
@media (prefers-reduced-motion:reduce){
  .ok-choice,.ok-cell{transition:none}
  .ok-cell.is-match{animation:none}
}