:root {
  --bg: #1b1f3b;
  --bg2: #262b52;
  --panel: #2f3566;
  --edge: #0e1024;
  --text: #f4f1e6;
  --muted: #b9bbd6;
  /* Roversa brand colors (Brand Guidelines, May 2026; yellow is sampled from the logo).
     Buttons use slightly deeper shades so white text stays readable. */
  --brand-purple: #8e43c6;
  --brand-blue: #124eaf;
  --brand-orange: #f56a00;
  --brand-yellow: #fbbd27;
  --brand-red: #ff3638;
  --brand-green: #37c563;
  --brand-gray: #999797;
  --green: #12a256;
  --blue: var(--brand-blue);
  --red: #e2302d;
  --yellow: var(--brand-yellow);
  --gray: #707693;
  /* Brand fonts: Bevan for headings, Open Sans for body, Space Mono for captions.
     The pixel font stays on buttons and the title for the 8-bit look. */
  --heading: 'Bevan', Georgia, serif;
  --body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --pixel: 'Press Start 2P', ui-monospace, monospace;
  --piece: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.04) 0 2px, transparent 3px) 0 0 / 24px 24px,
    var(--bg);
  overscroll-behavior: none;
}

a { color: #9fc3ff; }

button { font: inherit; color: inherit; cursor: pointer; }

.screen { display: none; min-height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* Buttons: chunky 8-bit blocks with a hard shadow */
.btn {
  border: 3px solid var(--edge);
  border-radius: 6px;
  padding: 12px 16px;
  min-height: 52px;
  min-width: 52px;
  font-family: var(--pixel);
  font-size: 14px;
  background: var(--gray);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.3), inset 4px 4px 0 rgba(255,255,255,0.25), 0 4px 0 var(--edge);
  transition: transform 0.05s;
  touch-action: manipulation;
  user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset -4px -4px 0 rgba(0,0,0,0.3), inset 4px 4px 0 rgba(255,255,255,0.25), 0 1px 0 var(--edge); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.big { font-size: 16px; padding: 16px 22px; min-height: 64px; }
.btn.green { background: var(--green); }
.btn.blue { background: var(--blue); }
.btn.red { background: var(--red); }
.btn.gray { background: var(--gray); }
.btn.purple { background: var(--brand-purple); }
.ai-btn { margin: 0 auto; }
.choices.ai-levels { flex-direction: column; }
.btn.ai-level { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 220px; }
.ai-level-name { font-size: 14px; }
.ai-level-desc { font-family: var(--body, system-ui, sans-serif); font-size: 13px; text-transform: none; opacity: 0.9; }
.btn-icon { font-family: system-ui, sans-serif; font-size: 1.3em; vertical-align: -0.1em; margin-right: 6px; }
.btn:focus-visible, .icon-btn:focus-visible, .piece:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.icon-btn {
  width: 48px; height: 48px;
  border: 3px solid var(--edge);
  border-radius: 6px;
  background: var(--panel);
  font-size: 20px;
  box-shadow: 0 3px 0 var(--edge);
  touch-action: manipulation;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon-btn.off { opacity: 0.45; text-decoration: line-through; }

/* Title screen */
#screen-title { position: relative; }
#screen-title .title-wrap { padding-top: 68px; }
.corner-tools { position: absolute; top: 10px; right: 16px; display: flex; gap: 12px; z-index: 1; }
.title-wrap {
  margin: auto;
  padding: 24px 16px;
  text-align: center;
  max-width: 560px;
}
#title-robot {
  width: 128px; height: 128px; margin-top: 8px;
  image-rendering: pixelated;
  animation: bob 1.2s steps(2) infinite;
}
@keyframes bob { 50% { transform: translateY(-6px); } }
h1 {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-family: var(--pixel);
  font-size: clamp(16px, 4.6vw, 24px);
  line-height: 1.3;
  margin: 8px 0 20px;
}
h1 .logo { width: min(420px, 86vw); height: auto; }
h1 span { color: var(--yellow); text-shadow: 3px 3px 0 var(--edge); }
.tagline { font-size: 18px; color: var(--muted); line-height: 1.5; }
.menu { display: flex; flex-direction: column; gap: 16px; margin: 28px auto; max-width: 320px; }
.menu.row { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: none; }
.explore { font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 34em; margin: 16px auto 6px; }
/* Bright and bold: the one link on this screen that leaves the game. */
.explore a { padding: 10px 0; color: #ffda86; /* brand Soft Sunflower */ font-weight: 700; }
/* Smaller than the Explore sentence, as agreed in issue #100. */
.license { font-size: 11px; color: var(--muted); margin: 0 0 8px; }
.license a { padding: 10px 0; color: inherit; }
/* Quiet on purpose: it is for grown-ups running a demo, not a big game button. */
.btn.fresh-btn { min-height: 44px; margin: 18px auto 10px; padding: 8px 14px; font-size: 10px; color: var(--muted); background: var(--bg2); }

/* Installing the app and updates (js/pwa.js) */
.update-banner, .install-btn, .ios-install { margin-left: auto; margin-right: auto; }
.update-banner[hidden], .install-btn[hidden], .ios-install[hidden] { display: none; }
.update-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: min(420px, 100%); min-height: 48px; padding: 10px 14px; margin-bottom: 12px;
  border: 3px solid var(--edge); border-radius: 6px;
  background: var(--yellow); color: var(--edge);
  font-family: var(--pixel); font-size: 12px; line-height: 1.5;
  box-shadow: 0 4px 0 var(--edge);
  cursor: pointer; touch-action: manipulation;
}
.install-btn { display: block; background: var(--brand-purple); margin-bottom: 8px; font-size: 12px; }
.ios-install {
  display: flex; align-items: center; gap: 10px;
  max-width: 420px; padding: 8px 8px 8px 14px; margin-top: 4px;
  background: var(--bg2); border: 3px solid var(--edge); border-radius: 6px;
  text-align: left; font-size: 14px; line-height: 1.5;
}
.ios-install p { margin: 0; flex: 1; }
.ios-install .icon-btn { flex: none; width: 40px; height: 40px; font-size: 16px; }
.update-banner > span:first-child { font-family: system-ui, sans-serif; font-size: 18px; }
.share-icon { vertical-align: -3px; margin: 0 2px; color: var(--yellow); }

/* Top bar */
.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bg2);
  border-bottom: 3px solid var(--edge);
}
.bar h2 { flex: 1; margin: 0; font-family: var(--heading); font-weight: 400; font-size: clamp(17px, 4.6vw, 24px); text-align: center; line-height: 1.4; }

/* Level picker */
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 20px 16px;
  max-width: 860px; width: 100%;
  margin: 0 auto;
}
.level-card {
  border: 3px solid var(--edge);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 0 var(--edge);
}
.level-card canvas { width: 100%; image-rendering: pixelated; border-radius: 4px; display: block; }
.level-card .num { font-family: var(--mono); font-weight: 700; font-size: 14px; margin: 10px 0 6px; color: var(--yellow); }
.level-card .name { font-weight: 700; font-size: 15px; }
.level-world { grid-column: 1 / -1; margin: 6px 0 -4px; font-family: var(--heading); font-weight: 400; font-size: 20px; color: var(--yellow); }
.random-pic { position: relative; }
.random-pic canvas { filter: blur(2.5px) brightness(0.85); }
.random-q {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background: #fff; color: #1d1f3a; border: 3px solid #1d1f3a; border-radius: 9px;
  box-shadow: 3px 3px 0 #1d1f3a;
  font: 900 30px/38px system-ui, sans-serif; text-align: center;
  transform: rotate(-8deg);
}
.random-card.busy .random-q { animation: random-roll 0.5s linear infinite; }
@keyframes random-roll { to { transform: rotate(352deg); } }
.die-icon { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: middle; margin: -0.3em 0.3em -0.2em 0; flex: none; }
.random-heading .die-icon { width: 1.7em; height: 1.7em; }
.random-count .die-icon { width: 2em; height: 2em; }
.random-new { display: inline-flex; align-items: center; }
.random-new .die-icon { width: 46px; height: 46px; margin: -10px 10px -10px -4px; }
.random-solved { font-size: 14px; color: #b9bbd8; margin-top: 6px; }
.random-solved::first-letter { color: var(--yellow); }
.stars { font-size: 20px; letter-spacing: 2px; color: #555a80; margin-top: 4px; }
.stars .on { color: var(--yellow); }

/* Quest setup */
.setup { max-width: 600px; margin: 0 auto; padding: 20px 16px; font-size: 18px; line-height: 1.5; text-align: center; }
.setup .small { font-size: 15px; color: var(--muted); }
.setup h3 { font-family: var(--heading); font-weight: 400; font-size: 20px; margin-top: 28px; }
.setup .quest-tagline { font-family: var(--heading); font-size: clamp(18px, 4.6vw, 22px); color: var(--yellow); margin-bottom: 8px; }
.setup h4 { font-size: 17px; margin: 22px 0 8px; }
.special-pieces { list-style: none; padding: 0; margin: 0 auto; display: inline-flex; flex-direction: column; gap: 10px; text-align: left; }
.special-pieces li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.special-pieces .piece-pic { flex: none; width: 58px; height: 48px; }
.special-pieces .piece-pic svg { width: 100%; height: 100%; display: block; }

/* Game layout */
.game {
  display: flex; flex-direction: column; gap: 14px;
  padding: 12px 16px 24px;
  width: 100%; max-width: 1200px; margin: 0 auto;
}
@media (min-width: 900px) {
  .game { flex-direction: row; align-items: flex-start; }
  .board-col { flex: 1.25; position: sticky; top: 12px; }
  .controls-col { flex: 1; }
}
.board-frame {
  border: 4px solid var(--edge);
  border-radius: 6px;
  background: var(--edge);
  box-shadow: 0 6px 0 rgba(0,0,0,0.35);
  line-height: 0;
}
#board:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
#board {
  width: 100%; height: auto;
  image-rendering: pixelated;
  touch-action: manipulation;
}
.message {
  /* Room for two lines, so a longer message doesn't push the buttons down. */
  min-height: calc(2.8em + 26px);
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--bg2);
  border: 3px solid var(--edge);
  border-radius: 6px;
  font-size: 18px; font-weight: 600; line-height: 1.4;
}
.message.good { background: #1f6b3a; }
.message.bad { background: #7a2a2a; }
/* The hand's line in the tutorial. */
.message.guide { border-color: var(--yellow); }
.message-row { display: flex; gap: 8px; align-items: flex-start; }
.message-row .message { flex: 1; }
.new-piece-btn { flex: none; margin-top: 12px; font-family: var(--pixel); }

/* ---------- Guided tutorial ---------- */
.guide-dim { opacity: 0.3; filter: saturate(0.5); pointer-events: none; }
.guide-lock { pointer-events: none; }
.guide-focus, .guide-bad {
  outline: 4px solid var(--yellow); outline-offset: 3px; border-radius: 8px;
  box-shadow: 0 0 22px 6px rgba(255, 216, 74, 0.6);
  z-index: 3;
}
.btn.guide-focus { position: relative; }
.guide-bad { outline-color: #ff4b4b; box-shadow: 0 0 22px 6px rgba(255, 75, 75, 0.6); }
/* Numbered slots: one puzzle piece for each square. */
.slot.guide-num {
  border-color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  color: var(--yellow); font-family: var(--pixel); font-size: 14px;
}
.slot.guide-num::after { content: attr(data-n); }
/* The new puzzle piece pop-up. */
.new-piece { width: 120px; margin: 4px auto 0; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.45)); }
.new-piece svg { width: 100%; height: auto; display: block; }
.guide-hand {
  position: absolute; z-index: 40;
  width: 48px; height: 56px;
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.5));
  animation: guide-tap 1s ease-in-out infinite;
}
.guide-hand[hidden] { display: none; }
.guide-hand svg { width: 100%; height: 100%; display: block; }
@keyframes guide-tap { 50% { transform: translate(-3px, -9px); } }

.panel {
  background: var(--panel);
  border: 3px solid var(--edge);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
}
.panel-label { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

.program, .pool {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 0;
  min-height: calc(var(--piece) * 0.83 + 8px);
}
.program {
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 4px 4px 4px 10px;
}
.program.drop-target { outline: 3px dashed var(--yellow); outline-offset: 2px; }
.pool { gap: 10px 6px; }

/* Gamepieces: puzzle pieces drawn in SVG; the tab on the right fits the notch on the left */
.piece {
  position: relative;
  width: var(--piece);
  height: calc(var(--piece) * 0.83);
  flex: 0 0 auto;
  margin-left: calc(var(--piece) * -0.17);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  background: none; border: 0; padding: 0;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.45));
}
.piece svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.pool .piece, .program .piece:first-child, .choices .piece { margin-left: 0; }
.piece .count {
  position: absolute; right: -2px; top: -6px;
  min-width: 24px; height: 24px; padding: 0 4px;
  border-radius: 12px;
  background: var(--yellow); color: #222;
  border: 2px solid var(--edge);
  font-family: var(--pixel); font-size: 10px; line-height: 20px; text-align: center;
}
.piece.empty { opacity: 0.3; cursor: default; }
.piece.ghost-src { opacity: 0.25; }
.piece.running { animation: pulse 0.4s ease-in-out infinite alternate; z-index: 2; }
@keyframes pulse { to { transform: translateY(-6px) scale(1.12); filter: drop-shadow(0 0 8px #fff7a8); } }
.piece.done { opacity: 0.55; }
/* Every empty slot is the same size and sits exactly where the body of a
   puzzle piece will go, so nothing moves as pieces go in. The first puzzle
   piece's left tab has nothing to fit into, so the first slot leaves room
   for it instead of growing wider. */
.slot {
  width: calc(var(--piece) * 0.83 - 6px);
  height: calc(var(--piece) * 0.7);
  margin: 0 3px;
  border: 3px dashed rgba(255,255,255,0.18);
  border-radius: 8px;
  flex: 0 0 auto;
}
.program .slot:first-child { margin-left: calc(var(--piece) * 0.17 + 3px); }
.caret {
  width: 6px; height: calc(var(--piece) * 0.8);
  background: var(--yellow);
  border-radius: 3px;
  margin: 0 4px;
  flex: 0 0 auto;
}
.drag-ghost {
  position: fixed; z-index: 50; pointer-events: none;
  transform: translate(-50%, -50%) scale(1.15);
  filter: drop-shadow(0 8px 6px rgba(0,0,0,0.5));
  margin: 0;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .go { flex: 2 1 55%; font-size: 22px; }
.actions .step { flex: 1 1 25%; }
.actions .labeled {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 6px; min-height: 64px;
}
.btn-sym { font-family: system-ui, sans-serif; font-size: 22px; line-height: 1; }
.lang-picker { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.lang-icon { font-family: system-ui, sans-serif; font-size: 22px; }
.btn.lang { min-height: 44px; padding: 8px 14px; font-size: 11px; color: var(--muted); background: var(--bg2); }
.btn.lang[aria-pressed="true"] { color: #fff; background: var(--blue); }
.btn-label { font-size: 9px; line-height: 1.2; white-space: nowrap; }
.actions .red, .actions .gray { flex: 1 1 40%; }
.roll { width: 100%; margin-top: 10px; }

/* Dice Quest: roll first, then arrange, so "Your roll" sits above the program.
   The Roll button and the rolled pieces share one row of the same height, so
   nothing below moves when one replaces the other. */
.controls-col { display: flex; flex-direction: column; }
.quest-mode .pool-panel { order: -1; }
.quest-mode .pool { min-height: 64px; }
.quest-mode .pool:empty { display: none; }
.quest-mode .pool:empty + .roll { margin-top: 0; }
.tip { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Find the Square: the algorithm is locked and the player only picks a square */
.guess-mode #btn-step, .guess-mode #btn-reset, .guess-mode #btn-clear, .guess-mode .controls-col > .tip, .guess-mode #btn-go[hidden] { display: none; }
.guess-mode .program .piece { cursor: default; }
.guess-mode .program .piece::after {
  content: '\1F512'; position: absolute; right: -3px; bottom: -3px;
  font-size: 12px; line-height: 1; padding: 2px; border-radius: 6px; background: var(--edge);
}
.piece .step-num {
  position: absolute; left: -4px; top: -8px; z-index: 1;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: #fff; color: #0e1024; border: 2px solid #0e1024;
  font: bold 12px/16px var(--body); text-align: center;
}
.guess-mode #board { cursor: pointer; }
.guess-card { width: 100%; }
.guess-card p { margin: 8px 0 0; line-height: 1.4; }
.guess-ask { font-weight: 700; font-size: 17px; }
.guess-note { color: var(--muted); font-size: 14px; }
.guess-count { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--bg2); font-size: 14px; }
.guess-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Quest scoreboard */
.scoreboard { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.scoreboard[hidden] { display: none; }
.score {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg2);
  border: 3px solid var(--edge);
  border-radius: 6px;
  font-weight: 700;
}
.score.turn { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.score canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.ai-badge {
  padding: 3px 6px; text-align: center;
  font-family: var(--pixel); font-size: 8px; line-height: 1.4; font-weight: 400;
  color: #fff; background: var(--brand-purple); border-radius: 4px;
}
.score canvas.flag { width: 21px; height: 28.5px; margin: 0 -4px 0 -6px; }
/* Dice Quest: each card is the color of its robot's flag and wheels. The turn
   ring gets a dark gap so it still shows on the yellow card. */
.score.team { border-color: var(--team); background: color-mix(in srgb, var(--team) 35%, var(--bg2)); }
.score.team.turn { border-color: var(--team); box-shadow: 0 0 0 3px var(--edge), 0 0 0 6px var(--yellow); }
.score.team .goal-icons canvas { opacity: 0.4; }
.score.team .goal-icons canvas.got { opacity: 1; }
.score .goal-icons { display: flex; gap: 4px; margin-left: auto; }
.score .goal-icons canvas { width: 26px; height: 26px; opacity: 0.25; filter: grayscale(1); }
.score .goal-icons canvas.got { opacity: 1; filter: none; }

/* Pop-ups */
.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 10, 25, 0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal-box {
  background: var(--panel);
  border: 4px solid var(--edge);
  border-radius: 10px;
  box-shadow: 0 8px 0 var(--edge);
  padding: 22px 18px;
  max-width: 440px; width: 100%;
  text-align: center;
  font-size: 18px; line-height: 1.5;
}
.modal-box h3 { font-family: var(--heading); font-weight: 400; font-size: 24px; color: var(--yellow); margin: 0 0 14px; line-height: 1.4; }
.modal-box .big-stars { font-size: 46px; letter-spacing: 6px; color: #555a80; }
.modal-box .big-stars .on { color: var(--yellow); text-shadow: 0 3px 0 #a07a10; }
.modal-box .choices { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.modal-box .choices .piece { margin: 0; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetto { position: absolute; top: -12px; width: 10px; height: 10px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (max-width: 420px) {
  :root { --piece: 54px; }
  .btn.big { font-size: 14px; padding: 14px 16px; }
  .message { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #title-robot, .piece.running, .guide-hand, .random-card.busy .random-q { animation: none; }
}

/* Costume row on the Adventures screen */
.costume-bar {
  display: flex; align-items: center; gap: 12px;
  max-width: 828px; width: calc(100% - 32px);
  margin: 16px auto 0; padding: 8px 12px;
  background: var(--panel);
  border: 3px solid var(--edge); border-radius: 8px;
  font-weight: 700;
}
.costume-bar canvas.look { width: 48px; height: 48px; image-rendering: pixelated; }
.costume-bar canvas.flag { width: 14px; height: 19px; margin-right: 6px; vertical-align: -3px; }
.costume-bar .who { flex: 1; min-width: 0; white-space: nowrap; }
.costume-bar .btn { font-size: 11px; padding: 8px 10px; line-height: 1.5; max-width: 50%; }

/* Costume picker */
.character[aria-pressed="true"] { border-color: var(--team); box-shadow: 0 0 0 3px var(--team); }
.choices.characters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.character {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  border: 3px solid var(--edge); border-radius: 8px;
  background: var(--bg2);
  font-weight: 700; font-size: 14px;
  touch-action: manipulation;
}
.character canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.character canvas.flag { width: 14px; height: 19px; margin-right: 5px; vertical-align: -3px; }
.character:hover:not(:disabled), .character:focus-visible { border-color: var(--team); box-shadow: 0 0 0 3px var(--team); outline: none; }
.character:disabled { opacity: 0.3; }
.modal-box canvas.winner { width: 96px; height: 96px; image-rendering: pixelated; }

/* ---------- Dice Quest on several devices ---------- */
.net-btn { margin: 0 auto; }
#net-menu[hidden] { display: none; }
.pic-code { display: flex; justify-content: center; gap: 10px; margin: 10px 0 6px; }
.pic {
  width: 68px; height: 76px; padding: 0;
  background: var(--bg2);
  border: 3px solid var(--edge); border-radius: 8px;
  box-shadow: 0 3px 0 var(--edge);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  touch-action: manipulation;
}
.pic img { width: 44px; height: 44px; image-rendering: pixelated; }
.pic small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.pic.empty { border-style: dashed; border-color: #59609a; box-shadow: none; background: transparent; }
.pic-code.bad .pic { border-color: #ff4b4b; box-shadow: 0 0 0 3px #ff4b4b; }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 8px; }
.keypad .pic { width: auto; height: 80px; }
button.pic:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lobby { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.lobby li {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px;
  background: var(--panel); border: 3px solid var(--edge); border-radius: 8px;
  font-weight: 700; text-align: left;
}
.lobby li canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.lobby li .st { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); text-align: right; }
.lobby li .st.ok { color: var(--brand-green); }
.lobby li .st.warn { color: var(--brand-yellow); }
.lobby li.waiting { border-style: dashed; color: var(--muted); font-weight: 400; }
.you-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  background: var(--brand-yellow); color: #1b1f3b; border-radius: 4px; padding: 1px 5px;
}
.net-setup .btn.big { width: 100%; }
.net-setup .note { font-size: 14px; color: var(--muted); }
.invite { margin-top: 18px; padding-top: 12px; border-top: 2px dashed var(--edge); }
.invite .menu.row { gap: 8px; }
.invite-text {
  width: 100%; margin-top: 8px; padding: 8px; font-family: var(--mono); font-size: 12px;
  background: var(--panel); color: inherit; border: 3px solid var(--edge); border-radius: 8px; resize: none;
}
.message.wait { border-color: var(--brand-yellow); }
.modal-box .choices.col { flex-direction: column; align-items: stretch; }
.modal-box .big-icon { font-size: 54px; line-height: 1; margin-bottom: 6px; }
.modal-box .timer { font-family: var(--pixel); color: var(--yellow); font-size: 18px; margin: 8px 0; }
.modal-box .note { font-size: 14px; color: var(--muted); }
.net-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: #b8860b; color: #1b1f3b; border-bottom: 3px solid var(--edge);
  font-weight: 700; text-align: center; padding: 10px 12px; font-size: 16px;
}
.net-banner[hidden] { display: none; }
/* Someone else's turn: their pieces show, but this player's buttons rest. */
.controls-col.watching .actions .btn { opacity: 0.35; }
/* Three or four players: a compact 2x2 scoreboard. */
.score { position: relative; }
.score .you-tag { position: absolute; top: -7px; left: -5px; font-size: 8px; padding: 0 3px; z-index: 1; }
.score.away { opacity: 0.55; }
.score .net-note { font-family: var(--mono); font-size: 11px; color: var(--brand-yellow); white-space: nowrap; }
/* One or two players in Dice Quest: the costume on the left, the name above
   the treasures, and a small AI tag for the AI Opponent. Short enough to keep
   two cards side by side on a phone. */
.scoreboard:not(.many) .score.team {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "face name tag" "face gems gems";
  column-gap: 8px; row-gap: 2px; align-items: center; align-content: center;
}
.scoreboard:not(.many) .score.team > canvas:first-child { grid-area: face; width: 40px; height: 40px; }
.scoreboard:not(.many) .score.team .name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard:not(.many) .score.team .goal-icons { grid-area: gems; margin-left: 0; gap: 3px; }
.scoreboard:not(.many) .score.team .goal-icons canvas { width: 24px; height: 24px; }
.scoreboard:not(.many) .score.team .ai-badge { grid-area: tag; padding: 3px 5px; }
.scoreboard:not(.many) .score.team .net-note { grid-area: gems; }
.scoreboard:not(.many) .score.team.away .goal-icons { display: none; }
/* A single player has the whole width, so everything fits on one line. */
.scoreboard:not(.many) .score.team:only-child { grid-template-areas: "face name gems"; }
.scoreboard.many { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scoreboard.many .score { padding: 4px 6px; gap: 4px; font-size: 13px; min-width: 0; }
.scoreboard.many .score canvas { width: 28px; height: 28px; }
.scoreboard.many .score canvas.flag { display: none; }
.scoreboard.many .score > span:not(.you-tag):not(.net-note) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scoreboard.many .score .goal-icons canvas { width: 18px; height: 18px; }
.scoreboard.many .score.away .goal-icons { display: none; }
.actions .labeled[hidden] { display: none; }