:root {
  --bg: #070b1f;
  --bg-2: #0e1538;
  --cyan: #2ee6ff;
  --cyan-dim: #1a7f99;
  --pink: #ff3d8b;
  --gold: #ffd23f;
  --text: #e8f1ff;
  --text-dim: #9fb0d8;
  --panel: rgba(14, 21, 56, 0.96);
  --pixel: 'Press Start 2P', 'Courier New', monospace;
  --body: 'Nunito', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--bg-2) 0%, var(--bg) 70%);
  color: var(--text);
  font-family: var(--body);
  overflow: hidden;
}

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.screen {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  padding: 1rem;
  text-align: center;
}

/* ---------- Logo ---------- */
.logo { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.shield {
  width: 84px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px var(--cyan));
}
.shield-outline { fill: rgba(46, 230, 255, 0.12); stroke: var(--cyan); stroke-width: 5; }
.lock-body { fill: var(--gold); }
.lock-shackle { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; }
.lock-hole { fill: var(--bg); }

h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--pixel);
  line-height: 1.1;
}
.title-small {
  font-size: clamp(1.4rem, 5vw, 3rem);
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan), 4px 4px 0 var(--pink);
  letter-spacing: 0.08em;
}
.title-of {
  font-family: var(--body);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--text-dim);
  margin: 0.4rem 0;
}
.title-big {
  font-size: clamp(2.6rem, 10vw, 6rem);
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 210, 63, 0.7), 6px 6px 0 var(--pink);
  letter-spacing: 0.12em;
}

.tagline {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------- Buttons ---------- */
.menu { display: flex; flex-direction: column; gap: 0.9rem; width: min(360px, 90vw); }

.btn {
  font-family: var(--pixel);
  font-size: 0.85rem;
  padding: 1rem 1.2rem;
  color: var(--text);
  background: rgba(14, 21, 56, 0.85);
  border: 3px solid var(--cyan-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.btn:hover, .btn:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(46, 230, 255, 0.55);
  transform: translateY(-2px);
  outline: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  font-size: 1.1rem;
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 5px 0 #b38a00;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: #ffe066;
  border-color: #fff;
  box-shadow: 0 5px 0 #b38a00, 0 0 22px rgba(255, 210, 63, 0.7);
}

.hint { margin: 0; font-size: 0.9rem; color: var(--text-dim); }
/* Touch screens (no mouse) get the "tap" hint instead of the mouse and keyboard one */
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: block; }
}
kbd {
  font-family: var(--body);
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--cyan-dim);
  border-radius: 4px;
  background: var(--bg-2);
}

/* ---------- Dialog panels ---------- */
.panel {
  width: min(560px, 92vw);
  max-height: 88vh;
  padding: 1.8rem 2rem;
  color: var(--text);
  background: var(--panel);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(46, 230, 255, 0.35);
  font-size: 1.05rem;
  line-height: 1.55;
}
.panel::backdrop { background: rgba(3, 5, 15, 0.75); backdrop-filter: blur(3px); }
.panel h2 {
  margin-top: 0;
  font-family: var(--pixel);
  font-size: 1.1rem;
  color: var(--gold);
  text-align: center;
}
.panel[open] { animation: pop 0.2s ease-out; }

.steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1rem; }
.steps li { display: flex; gap: 0.9rem; align-items: flex-start; }
.steps .icon { font-size: 1.6rem; line-height: 1; }

.facts { padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.facts strong { color: var(--cyan); }

.close-btn, .step-back { display: block; margin: 1.2rem auto 0; }

/* ---------- Mode select ---------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .modes { grid-template-columns: 1fr; } }

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.2rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-dim);
  text-align: center;
  text-decoration: none;
  background: rgba(7, 11, 31, 0.8);
  border: 3px solid var(--cyan-dim);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.mode-card strong { font-family: var(--pixel); font-size: 0.85rem; color: var(--gold); }
.mode-card:hover, .mode-card:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(46, 230, 255, 0.55);
  transform: translateY(-3px);
  outline: none;
}
.mode-card:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; border-color: var(--cyan-dim); }
.mode-emoji { font-size: 2.6rem; line-height: 1; }
.soon {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 20px);
  opacity: 0;
  visibility: hidden;
  padding: 0.9rem 1.4rem;
  font-weight: 700;
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: 8px;
  transition: transform 0.25s ease-out, opacity 0.25s, visibility 0.25s;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Animations ---------- */
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .shield, .panel[open] { animation: none; }
  .btn, #toast { transition: none; }
}

@media (max-height: 640px) {
  .screen { gap: 1.2rem; }
  .shield { width: 56px; }
}

/* ---------- Your coder (avatar.js) ---------- */
.avatar-svg { display: block; width: 100%; height: 100%; }

.coder-btn { display: flex; align-items: center; justify-content: center; gap: 0.7rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.coder-mini { width: 38px; height: 38px; flex: none; }

/* ---------- Coder Locker (locker.js): full screen, like a battle-royale locker ---------- */
.locker {
  --lk-font: 'Lilita One', 'Nunito', sans-serif;
  --lk-yellow: #ffe94d;
  width: 100%;   /* not 100vw, which counts the scrollbar and pokes off the right edge */
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: radial-gradient(ellipse at 72% 42%, #3f8bff 0%, #2152d6 30%, #12298a 62%, #0a1550 100%);
  overflow: hidden;
}
.locker[open] { display: flex; flex-direction: column; animation: lk-in 0.28s ease-out; }
.locker::backdrop { background: #0a1550; }
@keyframes lk-in { from { opacity: 0; transform: scale(1.04); } }
.locker.spooky { background: radial-gradient(ellipse at 72% 42%, #ff8a2a 0%, #b03c12 28%, #4a1452 62%, #1c0828 100%); }

/* Diagonal stripes and a soft vignette over the background */
.lk-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 26px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 20, 0.55) 100%);
}

/* Top bar */
.lk-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 0.6rem;
}
.lk-top h2 {
  margin: 0;
  font-family: var(--lk-font);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: skewX(-6deg);
  text-shadow: 0 4px 0 rgba(0, 0, 40, 0.45);
}
.lk-count { font-weight: 800; color: rgba(255, 255, 255, 0.7); align-self: flex-end; padding-bottom: 0.35rem; }
.lk-stars {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1rem 0.35rem 0.7rem;
  font-family: var(--lk-font);
  font-size: 1.5rem;
  background: rgba(0, 0, 30, 0.45);
  border-radius: 8px;
  transform: skewX(-6deg);
}
.lk-star { color: var(--lk-yellow); text-shadow: 0 0 10px rgba(255, 233, 77, 0.8); }
.lk-back, .lk-close {
  font-family: var(--lk-font);
  font-size: 1.3rem;
  color: #fff;
  background: rgba(0, 0, 30, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.lk-close { width: 2.6rem; height: 2.6rem; padding: 0; margin: 0; }
.lk-back:hover, .lk-close:hover, .lk-back:focus-visible, .lk-close:focus-visible { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); outline: none; }

/* Left: loadout or item grid. Right: your coder on a stage. */
.lk-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.4rem clamp(1rem, 3vw, 2.5rem) 1.2rem;
}
.lk-left { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0.5rem 0.5rem 1rem; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }
.lk-loadout, .lk-grid { display: grid; gap: 0.75rem; animation: lk-slide 0.25s ease-out; }
.lk-loadout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lk-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
@keyframes lk-slide { from { opacity: 0; transform: translateX(-16px); } }

/* Item tiles, colored by rarity */
.lk-tile {
  --r1: #b8c0cc;
  --r2: #5f6878;
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  font: inherit;
  color: #fff;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(circle at 50% 30%, var(--r1), var(--r2) 80%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 5px 0 rgba(0, 0, 30, 0.4);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.lk-tile.rare { --r1: #6ccbff; --r2: #1c5bc4; }
.lk-tile.epic { --r1: #dd8bff; --r2: #6424ad; }
.lk-tile.legendary { --r1: #ffc463; --r2: #c2541a; }
/* A shiny streak across every tile */
.lk-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 46%, transparent 54%);
  transform: translateX(-60%);
  transition: transform 0.45s;
  pointer-events: none;
}
.lk-tile:hover, .lk-tile:focus-visible {
  transform: translateY(-4px) scale(1.04);
  box-shadow: inset 0 0 0 3px #fff, 0 10px 20px rgba(0, 0, 30, 0.5);
  outline: none;
  z-index: 1;
}
.lk-tile:hover::after, .lk-tile:focus-visible::after { transform: translateX(60%); }
.lk-tile.selected {
  box-shadow: inset 0 0 0 4px var(--lk-yellow), 0 0 0 3px rgba(255, 233, 77, 0.45), 0 0 26px rgba(255, 233, 77, 0.55);
  z-index: 1;
}
.lk-art { position: absolute; inset: 6% 6% 20%; display: flex; align-items: center; justify-content: center; }
.lk-art .avatar-svg { filter: drop-shadow(0 4px 4px rgba(0, 0, 30, 0.35)); }
.lk-tile.locked .lk-art { filter: saturate(0.75) brightness(0.9); }
.lk-empty { font-size: 3rem; opacity: 0.55; }
.lk-emoji { font-size: clamp(2.4rem, 5vw, 3.6rem); filter: drop-shadow(0 4px 4px rgba(0, 0, 30, 0.35)); }
.lk-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 0.45rem 0.4rem;
  font-family: var(--lk-font);
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  line-height: 1.05;
  text-align: left;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgba(0, 0, 25, 0.8) 45%);
  border-bottom: 4px solid var(--r1);
}
.lk-label {
  position: absolute;
  top: 0.4rem;
  left: 0.5rem;
  font-family: var(--lk-font);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 30, 0.8);
}
.lk-price, .lk-check, .lk-event {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  font-family: var(--lk-font);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 5px;
}
.lk-price { color: var(--lk-yellow); background: rgba(0, 0, 25, 0.75); }
.lk-check { color: #0a2a10; background: #5ef08a; padding: 0.25rem 0.45rem; }
.lk-event { right: auto; left: 0.3rem; top: auto; bottom: 2.3rem; font-size: 1rem; padding: 0; }

/* The Halloween Shop tile on the loadout */
.lk-event-tile {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  text-align: left;
  background: linear-gradient(100deg, #ff9a2e, #d9480f 45%, #5a1670);
}
.lk-event-icon { font-size: 3.2rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); animation: lk-bob 2.4s ease-in-out infinite; }
.lk-event-text strong { display: block; font-family: var(--lk-font); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase; line-height: 1; }
.lk-event-text span { font-weight: 800; opacity: 0.9; }
.lk-event-until {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.55rem;
  font-family: var(--body);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 800;
  text-transform: none;
  vertical-align: middle;
  color: #2a1400;
  background: var(--lk-yellow);
  border-radius: 999px;
}
.lk-event-new {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  padding: 0.2rem 0.5rem;
  font-family: var(--lk-font);
  color: #3a1000;
  background: var(--lk-yellow);
  border-radius: 4px;
  transform: rotate(4deg);
}

/* Your coder on a glowing stage */
.lk-right { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lk-stage { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 3.6rem 0 1.4rem; }
.lk-rays {
  position: absolute;
  width: 150%;
  aspect-ratio: 1;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.09) 0 7deg, transparent 7deg 20deg);
  mask-image: radial-gradient(circle, #000 15%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 62%);
  animation: lk-spin 50s linear infinite;
  pointer-events: none;
}
@keyframes lk-spin { to { transform: rotate(360deg); } }
/* The whole coder stands on the podium, like your character on the side in Quizizz */
.lk-preview {
  --glow: rgba(120, 220, 255, 0.45);
  position: relative;
  z-index: 1;
  height: min(100%, 64vh);
  aspect-ratio: 120 / 208;
  filter: drop-shadow(0 0 18px var(--glow));
  animation: lk-bob 3.2s ease-in-out infinite;
  transition: filter 0.25s;
}
.lk-preview svg { display: block; width: 100%; height: 100%; }
.lk-preview.rare { --glow: rgba(108, 203, 255, 0.85); }
.lk-preview.epic { --glow: rgba(221, 139, 255, 0.85); }
.lk-preview.legendary { --glow: rgba(255, 196, 99, 0.95); }
.lk-preview.trying { filter: drop-shadow(0 0 4px var(--lk-yellow)) drop-shadow(0 0 22px var(--glow)); }
@keyframes lk-bob { 50% { transform: translateY(-6px); } }
.lk-podium {
  position: absolute;
  bottom: 0;
  width: min(80%, 30vh, 260px);
  height: 2.6rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(140, 230, 255, 0.85), rgba(60, 140, 255, 0.35) 55%, transparent 72%);
  filter: blur(2px);
}
.lk-stage.equip .lk-preview { animation: lk-equip 0.45s ease-out, lk-bob 3.2s ease-in-out 0.45s infinite; }
.lk-stage.bought .lk-preview { animation: lk-buy 0.7s ease-out, lk-bob 3.2s ease-in-out 0.7s infinite; }
.lk-stage.bought::after {
  content: '★ ★ ★';
  position: absolute;
  z-index: 2;
  font-family: var(--lk-font);
  font-size: 3rem;
  color: var(--lk-yellow);
  text-shadow: 0 0 20px rgba(255, 233, 77, 0.9);
  animation: lk-stars 1s ease-out forwards;
  pointer-events: none;
}
@keyframes lk-equip { 40% { transform: scale(1.06) rotate(-2deg); } }
@keyframes lk-buy { 30% { transform: scale(1.12) rotate(3deg); } 60% { transform: scale(0.97); } }
@keyframes lk-stars { from { opacity: 1; transform: scale(0.5); } to { opacity: 0; transform: scale(2.2) translateY(-30px); } }

/* Details box under your coder */
.lk-details {
  --r1: rgba(255, 255, 255, 0.5);
  width: min(100%, 440px);
  padding: 0.9rem 1.2rem 1rem;
  background: rgba(0, 0, 30, 0.5);
  border-left: 6px solid var(--r1);
  border-radius: 6px;
}
.lk-details.rare { --r1: #6ccbff; }
.lk-details.epic { --r1: #dd8bff; }
.lk-details.legendary { --r1: #ffc463; }
.lk-rarity { font-family: var(--lk-font); text-transform: uppercase; letter-spacing: 0.08em; color: var(--r1); }
.lk-item-name { margin: 0.1rem 0 0; font-family: var(--lk-font); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; text-transform: uppercase; }
.lk-item-type { margin: 0.3rem 0 0; font-weight: 800; color: rgba(255, 255, 255, 0.75); }
.lk-item-note { margin: 0.4rem 0 0; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
.lk-action {
  margin-top: 0.8rem;
  width: 100%;
  padding: 0.7rem 1rem;
  font-family: var(--lk-font);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: #1c1600;
  background: var(--lk-yellow);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 5px 0 #c9b00d;
  transform: skewX(-6deg);
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}
.lk-action:hover, .lk-action:focus-visible { filter: brightness(1.08); transform: skewX(-6deg) translateY(-2px); outline: 3px solid #fff; outline-offset: 3px; }
.lk-action:active { transform: skewX(-6deg) translateY(3px); box-shadow: 0 2px 0 #c9b00d; }
.lk-action.done { color: #0a2a10; background: #5ef08a; box-shadow: 0 5px 0 #2a9a4c; cursor: default; }
.lk-action.poor { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.15); box-shadow: none; cursor: not-allowed; }

/* Phones and small windows: coder on top, items underneath, whole thing scrolls */
@media (max-width: 760px) {
  .locker[open] { overflow-x: hidden; overflow-y: auto; }
  .lk-main { flex: none; display: flex; flex-direction: column-reverse; }
  .lk-right, .lk-stage { flex: none; }
  .lk-left { overflow: visible; }
  .lk-loadout { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .lk-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.5rem; }
  .lk-name { font-size: 0.72rem; }
  .lk-label { font-size: 0.62rem; }
  .lk-stage { min-height: 390px; }
  .lk-preview { height: 300px; }
  .lk-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .locker[open], .lk-rays, .lk-preview, .lk-event-icon, .lk-loadout, .lk-grid { animation: none; }
}

.modes.three { grid-template-columns: repeat(3, 1fr); }
.modes.four { grid-template-columns: repeat(4, 1fr); }
#dlg-mode:has(#mode-games:not([hidden])) { width: min(1000px, 94vw); }
@media (max-width: 720px) { .modes.three { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .modes.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .modes.four { grid-template-columns: 1fr; } }

/* ---------- You've been hacked! (hacked.js) ---------- */
.hacked {
  width: min(900px, 96vw);
  max-height: 94vh;
  padding: 1.4rem 1.6rem;
  overflow: auto;
  color: var(--text);
  background: #12030a;
  border: 3px solid #ff2050;
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(255, 32, 80, 0.6), inset 0 0 60px rgba(255, 32, 80, 0.15);
}
.hacked::backdrop { background: rgba(40, 0, 10, 0.85); }
.hacked[open] { animation: hack-in 0.5s steps(6); }
@keyframes hack-in {
  0% { opacity: 0; transform: translateX(-12px) skewX(10deg); }
  50% { opacity: 1; transform: translateX(10px) skewX(-6deg); }
}
.hack-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0 3px, rgba(255, 32, 80, 0.06) 3px 4px);
}

.hack-title {
  position: relative;
  margin: 0;
  font-family: var(--pixel);
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  text-align: center;
  color: #ff2050;
  text-shadow: 0 0 16px rgba(255, 32, 80, 0.9);
  animation: glitch 2.4s infinite;
}
.hack-title::before, .hack-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0.7;
}
.hack-title::before { color: var(--cyan); animation: glitch-a 1.6s infinite; }
.hack-title::after { color: var(--gold); animation: glitch-b 2s infinite; }
@keyframes glitch { 92% { transform: none; } 94% { transform: translateX(-4px) skewX(8deg); } 96% { transform: translateX(4px); } }
@keyframes glitch-a { 0%, 85%, 100% { clip-path: inset(0 0 100% 0); } 88% { clip-path: inset(10% 0 55% 0); transform: translateX(-5px); } 92% { clip-path: inset(60% 0 10% 0); transform: translateX(5px); } }
@keyframes glitch-b { 0%, 80%, 100% { clip-path: inset(0 0 100% 0); } 84% { clip-path: inset(40% 0 30% 0); transform: translateX(4px); } }
.hack-sub { margin: 0.6rem auto 1rem; max-width: 40rem; text-align: center; color: #ffb3c4; }

.hack-grid { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1rem; }
@media (max-width: 680px) { .hack-grid { grid-template-columns: 1fr; } }

.hack-screen {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem;
  background: #050208;
  border: 2px solid #4a0c1c;
  border-radius: 8px;
}
.hack-files { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.hack-file {
  padding: 0.4rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(46, 230, 255, 0.08);
  border: 1px solid var(--cyan-dim);
  border-radius: 6px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.hack-file.locked { color: #ff6b8a; background: rgba(255, 32, 80, 0.15); border-color: #ff2050; text-decoration: line-through; }
.hack-file.locked::after { content: ' 🔓 stolen'; text-decoration: none; display: inline-block; margin-left: 0.2rem; font-size: 0.72rem; }
.hack-log { min-height: 9.5rem; font-family: Consolas, 'Courier New', monospace; font-size: 0.8rem; color: #3dff7a; }
.hack-log p { margin: 0.15rem 0; animation: type-in 0.4s steps(12); white-space: nowrap; overflow: hidden; }
.hack-log p.good { color: var(--cyan); }
.hack-log p.bad { color: #ff2050; }
@keyframes type-in { from { max-width: 0; } to { max-width: 100%; } }

.hack-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 0.9rem; color: #ffb3c4; }
.hack-bar { height: 14px; background: #2a0812; border: 1px solid #ff2050; border-radius: 8px; overflow: hidden; }
.hack-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff7a3d, #ff2050); transition: width 0.1s linear; }
.hack-meter strong { font-family: var(--pixel); font-size: 0.9rem; color: #ff2050; min-width: 3ch; text-align: right; }
.hacked.panic .hack-meter strong { animation: panic 0.5s ease-in-out infinite; }
.hacked.panic { animation: panic-border 0.5s ease-in-out infinite; }
@keyframes panic { 50% { transform: scale(1.25); } }
@keyframes panic-border { 50% { box-shadow: 0 0 90px rgba(255, 32, 80, 0.95), inset 0 0 80px rgba(255, 32, 80, 0.3); } }

.hack-count { display: flex; justify-content: space-between; align-items: center; margin: 0.8rem 0 0; font-family: var(--pixel); font-size: 0.72rem; color: var(--gold); }
#hack-dots { display: flex; gap: 0.35rem; }
#hack-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cyan); }
#hack-dots span.on { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hacked .message { margin: 0.6rem 0; }
.hack-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.hack-feedback { min-height: 1.5em; margin: 0.5rem 0 0; font-weight: 800; text-align: center; }
.hack-feedback.good { color: #7cff6b; }
.hack-feedback.bad { color: #ff6b8a; }

.hack-end { text-align: center; padding-top: 1rem; }
.hack-end-title { margin: 0 0 0.5rem; font-family: var(--pixel); font-size: 1.1rem; }
.hacked.won { border-color: var(--cyan); box-shadow: 0 0 60px rgba(46, 230, 255, 0.5); }
.hacked.won .hack-end-title { color: var(--cyan); }
.hacked.lost .hack-end-title { color: #ff2050; }

@media (prefers-reduced-motion: reduce) {
  .hacked[open], .hack-title, .hack-title::before, .hack-title::after, .hacked.panic, .hacked.panic .hack-meter strong, .hack-log p { animation: none; }
}


/* ---------- How to Play videos (demo.js) ---------- */
.panel.demo {
  width: min(1000px, 96vw, calc((100dvh - 18rem) * 16 / 9));
  min-width: min(560px, 96vw);
  max-height: 98dvh;
  padding: 1rem 1.2rem 1.1rem;
}
.demo-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.demo-head h2 { margin: 0; font-size: clamp(0.75rem, 1.6vw, 1rem); text-align: left; flex: 1; }
.demo-live {
  padding: 0.25rem 0.5rem;
  font-family: var(--pixel);
  font-size: 0.55rem;
  color: #fff;
  background: #c8262c;
  border-radius: 4px;
  animation: demo-blink 1.6s ease-in-out infinite;
}
@keyframes demo-blink { 50% { opacity: 0.55; } }

/* The screen: the game is laid out at 1280x720 and scaled down to fit */
.demo-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  border: 3px solid var(--cyan-dim);
  background: var(--bg);
  box-shadow: 0 0 30px rgba(46, 230, 255, 0.2);
}
#demo-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;   /* it's a video: watch, don't touch */
}
.demo-cursor { position: absolute; top: 0; left: 0; z-index: 2; width: 26px; height: 26px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.demo-cursor svg { display: block; width: 100%; height: 100%; }
.demo-cursor::before {
  content: '';
  position: absolute;
  left: -14px;
  top: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  opacity: 0;
}
.demo-cursor.clicking::before { animation: demo-click 0.45s ease-out; }
@keyframes demo-click { from { opacity: 1; transform: scale(0.3); } to { opacity: 0; transform: scale(1.5); } }

/* The keyboard and mouse in the corner: an RGB gaming setup.
   --wave slowly turns, so every key's color (its own --h plus the wave) flows across the board. */
@property --wave { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes rgb-wave { to { --wave: 360; } }
.demo-input {
  position: absolute;
  right: 1.2%;
  bottom: 2%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 6px 7px 7px;
  width: 29%;
  /* A dark case with a rainbow edge */
  background:
    linear-gradient(160deg, #1b1f2e, #0b0d16) padding-box,
    conic-gradient(from calc(var(--wave) * 1deg), #ff3d6e, #ffb84d, #f4ff4d, #3dff7a, #2ee6ff, #6b7bff, #d94dff, #ff3d6e) border-box;
  border: 2px solid transparent;
  border-radius: 9px;
  box-shadow: 0 0 14px hsl(calc(var(--wave) * 1deg) 100% 60% / 0.45), 0 6px 14px rgba(0, 0, 0, 0.6);
  animation: rgb-wave 6s linear infinite;
  pointer-events: none;
}
.demo-keys { flex: 1; display: grid; gap: 2px; }
.demo-row { display: flex; gap: 2px; justify-content: center; }
.demo-key {
  --c: hsl(calc((var(--h) + var(--wave)) * 1deg) 100% 66%);
  flex: 1;
  min-width: 0;
  max-width: 9%;
  padding: 2px 0 3px;
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(5px, 0.75vw, 9px);
  line-height: 1.3;
  text-align: center;
  color: var(--c);
  text-shadow: 0 0 4px var(--c);
  background: linear-gradient(#2b3045, #191c2a);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 #07080e, 0 2px 4px -1px var(--c);
  transition: transform 0.06s, background 0.06s;
}
.demo-key.wide { max-width: 16%; flex: 1.6; }
.demo-key.space { max-width: 40%; flex: 5; }
/* A pressed key sinks and lights up in its color */
.demo-key.down {
  color: #fff;
  text-shadow: 0 0 3px #000;
  background: var(--c);
  box-shadow: 0 0 6px var(--c), 0 0 16px var(--c), 0 0 0 1px #fff;
  transform: translateY(2px) scale(1.08);
}
.demo-mouse {
  --c: hsl(calc(var(--wave) * 1deg + 180deg) 100% 62%);
  position: relative;
  flex: none;
  width: 11%;
  aspect-ratio: 3 / 4.6;
  display: flex;
  background: linear-gradient(160deg, #2b3045, #10121c);
  border: 2px solid var(--c);
  border-radius: 45% 45% 42% 42%;
  overflow: hidden;
  box-shadow: 0 0 8px var(--c), 0 4px 8px rgba(0, 0, 0, 0.6);
}
.demo-mouse span { flex: 1; height: 42%; border-bottom: 2px solid #07080e; transition: background 0.06s, box-shadow 0.06s; }
.demo-mouse-l { border-right: 2px solid #07080e; }
.demo-mouse.down .demo-mouse-l { background: var(--c); box-shadow: inset 0 0 6px #fff; }
@media (prefers-reduced-motion: reduce) { .demo-input { animation: none; } }

/* Loading, and the end of the video */
.demo-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem;
  text-align: center;
  background: rgba(7, 11, 31, 0.82);
  backdrop-filter: blur(2px);
}
.demo-end { width: 100%; margin: 0; font-family: var(--pixel); font-size: clamp(0.8rem, 2vw, 1.2rem); color: var(--gold); }
.demo-spinner {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.6rem;
  vertical-align: -0.2rem;
  border: 3px solid var(--cyan-dim);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: demo-spin 0.8s linear infinite;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }

/* Captions, like subtitles */
.demo-caption {
  min-height: 3.2em;
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.8rem;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
}
.panel.demo .end-buttons { margin-top: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .demo-live, .demo-spinner { animation: none; } }

/* ---------- Bonus star pop-up (avatar.js awardStars) ---------- */
.star-reward {
  position: fixed;
  inset: 1rem auto auto 50%;
  margin: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.1rem 0.6rem 0.8rem;
  color: #fff;
  background: linear-gradient(135deg, #3a2a05, #1a1440);
  border: 2px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(255, 210, 63, 0.45), 0 8px 20px rgba(0, 0, 0, 0.5);
  font-family: var(--body);
}
.star-reward:popover-open { animation: star-pop 0.45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes star-pop { from { transform: translateX(-50%) translateY(-20px) scale(0.6); opacity: 0; } }
.sr-star { font-size: 2.2rem; line-height: 1; color: var(--gold); text-shadow: 0 0 12px var(--gold); animation: star-spin 1s ease-out; }
@keyframes star-spin { from { transform: rotate(-200deg) scale(0.3); } }
.sr-text { display: grid; line-height: 1.25; }
.sr-text strong { font-family: var(--pixel); font-size: 0.8rem; color: var(--gold); margin-bottom: 0.2rem; }
.sr-text small { font-size: 0.85rem; font-weight: 700; }
.sr-text small + small { font-size: 0.72rem; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) { .star-reward:popover-open, .sr-star { animation: none; } }

/* ---------- Your coder's name (avatar.js) ---------- */
/* In the Locker: a nameplate above your coder, like Quizizz */
.lk-nameplate {
  position: absolute;
  z-index: 2;
  top: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem;
  background: rgba(7, 11, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 30, 0.4);
}
.lk-nameplate input {
  width: 16ch;
  field-sizing: content;   /* grows to fit your name */
  min-width: 6ch;
  max-width: 62vw;
  padding: 0.25rem 0.6rem;
  font-family: var(--lk-font);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: #fff;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  outline: none;
}
.lk-nameplate input:hover { background: rgba(255, 255, 255, 0.08); }
.lk-nameplate input:focus { background: rgba(255, 255, 255, 0.16); }
.lk-nameplate button {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.1rem;
  background: var(--lk-yellow);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
}
.lk-nameplate button:hover, .lk-nameplate button:focus-visible { transform: rotate(-20deg) scale(1.1); outline: 2px solid #fff; }
.lk-name-tip {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 80vw;
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: #2a1400;
  background: var(--lk-yellow);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.lk-nameplate:hover .lk-name-tip, .lk-nameplate:focus-within .lk-name-tip { opacity: 1; }

/* In the games: your name next to your coder in the top bar */
.hud-name {
  max-width: 11rem;
  overflow: hidden;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold);
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 700px) { .hud-name { display: none; } }

/* ---------- Save Code (savecode.js) ---------- */
.save-panel p { margin: 0 0 0.9rem; }
.save-label { display: block; margin: 0.4rem 0 0.35rem; font-weight: 800; color: var(--cyan); }
.save-box {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--text);
  word-break: break-all;
  resize: vertical;
  background: var(--bg);
  border: 2px solid var(--cyan-dim);
  border-radius: 6px;
}
.save-box:focus { border-color: var(--cyan); outline: none; }
.save-btn { display: block; width: 100%; margin: 0.6rem 0 1rem; font-size: 0.8rem; }
.save-message { padding: 0.6rem 0.8rem; font-weight: 800; border-radius: 6px; }
.save-message.good { color: #7cff6b; background: rgba(124, 255, 107, 0.1); }
.save-message.bad { color: var(--pink); background: rgba(255, 61, 139, 0.1); }
.save-tip { font-size: 0.9rem; color: var(--text-dim); }

/* ---------- Accessibility (access.js) ---------- */
.menu-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.menu-row .btn { padding: 0.85rem 0.3rem; font-size: 0.62rem; line-height: 1.5; }   /* longer Spanish labels wrap instead of spilling out */
.access-list { display: grid; gap: 0.7rem; margin: 1rem 0; }
.access-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  background: rgba(7, 11, 31, 0.8);
  border: 2px solid var(--cyan-dim);
  border-radius: 8px;
  cursor: pointer;
}
.access-option:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 12px rgba(46, 230, 255, 0.35); }
.access-option:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.access-emoji { font-size: 1.8rem; line-height: 1; }
.access-text { flex: 1; display: grid; line-height: 1.35; }
.access-text strong { color: var(--gold); }
.access-text span { font-size: 0.92rem; color: var(--text-dim); }
/* An on/off switch */
.access-switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 3.2rem;
  height: 1.8rem;
  margin: 0;
  background: #2a3360;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.access-switch::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.4rem;
  height: 1.4rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}
.access-switch:checked { background: var(--cyan); }
.access-switch:checked::after { transform: translateX(1.4rem); }
.access-switch:focus-visible { outline: none; }
.access-note { font-size: 0.92rem; color: var(--text-dim); }
.access-reload { font-size: 0.92rem; font-weight: 800; color: var(--gold); }

/* Easy-read font: the pixel font becomes a plain, wide font from the computer (Verdana, or the closest one it has).
   size-adjust makes it about as big as the pixel letters it replaces. */
@font-face {
  font-family: 'Easy Read';
  src: local('Verdana Bold'), local('Verdana-Bold'), local('Tahoma Bold'), local('Tahoma-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Arial Bold'), local('Arial-BoldMT'), local('DejaVu Sans Bold');
  size-adjust: 125%;
}
html.easy-font { --pixel: 'Easy Read', Verdana, var(--body); --lk-font: 'Easy Read', Verdana, var(--body); }
html.easy-font body { letter-spacing: 0.02em; line-height: 1.5; }

/* High contrast: solid backgrounds, bright text and borders, thick focus outlines */
html.contrast {
  --bg: #000;
  --bg-2: #000;
  --text: #fff;
  --text-dim: #f2f6ff;
  --cyan-dim: var(--cyan);
  --panel: #000;
}
html.contrast body { background: #000; }
html.contrast #bg { opacity: 0.25; }
html.contrast .panel, html.contrast dialog { background: #000; border-color: #fff; }
html.contrast .btn, html.contrast .choice, html.contrast .access-option, html.contrast input, html.contrast select { border-color: #fff !important; }
html.contrast a { text-decoration: underline; }
html.contrast :focus-visible { outline: 4px solid var(--gold) !important; outline-offset: 3px; }
html.contrast * { text-shadow: none !important; }

/* Read out by screen readers but not shown (like a page's main heading on the game screens) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bigger text: everything sized in rem grows */
html.big-text { font-size: 118%; }
/* Calm mode: no flashing, shaking or bouncing (like the computer's own "reduce motion" setting) */
html.calm *, html.calm *::before, html.calm *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

/* ---------- Why It Matters: sources and Real-Life Missions (missions.js) ---------- */
.source { margin-left: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.source:hover, .source:focus-visible { color: var(--cyan); }
.missions-title { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 1.4rem 0 0.2rem; font-family: var(--pixel); font-size: 0.85rem; color: var(--gold); }
.missions-count { font-family: var(--body); font-size: 0.85rem; font-weight: 800; color: var(--cyan); }
.missions-sub { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--text-dim); }
.missions { display: grid; gap: 0.45rem; }
.mission {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  line-height: 1.35;
  background: rgba(7, 11, 31, 0.8);
  border: 2px solid var(--cyan-dim);
  border-radius: 8px;
  cursor: pointer;
}
.mission input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: #7cff6b; cursor: pointer; }
.mission:has(input:checked) { border-color: #7cff6b; }
.mission:has(input:checked) .mission-text { color: var(--text-dim); text-decoration: line-through; }
.mission:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.mission-emoji { font-size: 1.3rem; }
.mission-text { flex: 1; }
.mission-star { flex: none; font-size: 0.8rem; font-weight: 800; color: var(--gold); }
.help-line { margin-top: 1rem; padding: 0.6rem 0.8rem; font-size: 0.92rem; background: rgba(255, 61, 139, 0.1); border-left: 4px solid var(--pink); border-radius: 4px; }
.help-line a { color: var(--cyan); }
.help-line p { margin: 0; }
.help-line ul { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.help-line li { margin-top: 0.2rem; }

/* ---------- Certified Data Defender (certificate.js) ---------- */
.cert-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.cert-btn-count { padding: 0.2rem 0.45rem; font-size: 0.65rem; color: var(--bg); background: var(--cyan); border-radius: 4px; }
.cert-btn.earned { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 210, 63, 0.5); }
.cert-btn.earned .cert-btn-count { background: var(--gold); }

.cert-panel { width: min(980px, 96vw); max-height: 94vh; overflow: auto; }
.cert-status { margin: 0 0 0.5rem; font-weight: 800; text-align: center; }
.cert-overall { height: 10px; margin-bottom: 1rem; background: #1a2350; border-radius: 999px; overflow: hidden; }
.cert-overall span, .cert-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); border-radius: inherit; }
.cert-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.cert-goal {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: rgba(7, 11, 31, 0.8);
  border: 2px solid var(--cyan-dim);
  border-radius: 8px;
}
.cert-goal.done { border-color: #7cff6b; }
.cert-goal-emoji { font-size: 1.6rem; line-height: 1; }
.cert-goal-text { flex: 1; display: grid; gap: 0.2rem; font-size: 0.88rem; line-height: 1.3; color: var(--text-dim); }
.cert-goal-text strong { color: var(--gold); font-size: 0.95rem; }
.cert-goal-text small { font-weight: 800; color: var(--text); }
.cert-bar { height: 7px; margin-top: 0.2rem; background: #1a2350; border-radius: 999px; overflow: hidden; }
.cert-goal.done .cert-bar span { background: #7cff6b; }
.cert-name-label { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 1.1rem 0 0.8rem; font-weight: 800; color: var(--cyan); }
.cert-name-label input {
  width: min(16rem, 60vw);
  padding: 0.35rem 0.6rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--cyan-dim);
  border-radius: 6px;
}
.cert-name-label input:focus { border-color: var(--cyan); outline: none; }

/* The certificate: cream paper, a double gold border, navy ink */
.cert-paper {
  --navy: #14205a;
  --goldink: #a8841c;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 11 / 8.5;
  padding: 2.2cqw;
  color: var(--navy);
  background: radial-gradient(ellipse at center, #fffdf6 40%, #f6ecd2 100%);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.cert-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2cqw 5cqw;
  text-align: center;
  border: 0.7cqw double #c9a227;
  outline: 0.25cqw solid var(--navy);
  outline-offset: 0.8cqw;
}
.cert-inner p { margin: 0; }
.cert-watermark { position: absolute; top: 50%; left: 50%; width: 34cqw; transform: translate(-50%, -50%); fill: var(--navy); opacity: 0.045; pointer-events: none; }
.cert-coder { position: absolute; top: 2.4cqw; right: 2.6cqw; width: 11cqw; aspect-ratio: 1; border: 0.5cqw solid #c9a227; border-radius: 50%; overflow: hidden; background: var(--navy); }
.cert-shield { width: 6.5cqw; margin-bottom: 0.6cqw; }
.cert-brand { font-family: 'Cinzel', serif; font-weight: 800; font-size: 1.6cqw; letter-spacing: 0.4em; color: var(--goldink); text-transform: uppercase; }
.cert-heading { margin: 0.6cqw 0 1.4cqw; font-family: 'Cinzel', serif; font-weight: 800; font-size: 4.6cqw; line-height: 1.1; color: var(--navy); }
.cert-line { font-family: Georgia, serif; font-style: italic; font-size: 1.8cqw; color: #4a5172; }
.cert-name {
  min-width: 50cqw;
  margin: 0.3cqw 0 0.8cqw !important;
  padding: 0 2cqw 0.4cqw;
  font-family: 'Great Vibes', cursive;
  font-size: 7cqw;
  line-height: 1.15;
  color: var(--navy);
  border-bottom: 0.2cqw solid #c9a227;
  overflow-wrap: anywhere;
}
.cert-rank {
  margin: 0.4cqw 0 1.2cqw !important;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 3.6cqw;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #e3bb3f, #a8841c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cert-body { max-width: 72cqw; font-family: Georgia, serif; font-size: 1.65cqw; line-height: 1.5; color: #3a4166; }
.cert-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 3cqw; width: 100%; margin-top: 2cqw; }
.cert-sign { display: flex; flex-direction: column; align-items: center; gap: 0.4cqw; }
.cert-sign-value, .cert-signature { width: 100%; padding-bottom: 0.3cqw; border-bottom: 0.18cqw solid var(--navy); }
.cert-sign-value { font-family: Georgia, serif; font-size: 2cqw; }
.cert-signature { font-family: 'Great Vibes', cursive; font-size: 4cqw; line-height: 1; color: #1b2a7a; }
.cert-sign-label { font-family: 'Cinzel', serif; font-weight: 600; font-size: 1.15cqw; letter-spacing: 0.05em; color: #4a5172; }
.cert-seal { width: 12cqw; filter: drop-shadow(0 0.4cqw 0.5cqw rgba(0, 0, 0, 0.25)); }
.cert-number { position: absolute; bottom: 1.2cqw; left: 0; right: 0; font-family: Georgia, serif; font-size: 1.05cqw; letter-spacing: 0.1em; color: #8a8fa8; }

/* Not earned yet: a faded preview with a stamp */
.cert-paper.locked .cert-inner { filter: grayscale(0.65); opacity: 0.6; }
.cert-lock { display: none; }
.cert-paper.locked .cert-lock {
  display: block;
  position: absolute;
  top: 64%;
  left: 50%;
  padding: 0.6cqw 3cqw;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 5cqw;
  letter-spacing: 0.1em;
  color: #c0392b;
  border: 0.6cqw solid #c0392b;
  border-radius: 1cqw;
  background: rgba(255, 250, 240, 0.75);
  transform: translate(-50%, -50%) rotate(-12deg);
}
.cert-panel .end-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1rem; }
.cert-panel .close-btn { margin: 0; }
#cert-print:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 700px) {
  .cert-goals { grid-template-columns: 1fr; }
  .cert-name-label { flex-direction: column; gap: 0.3rem; }
}

/* Printing: only the certificate, on one landscape page */
@media print {
  @page { size: landscape; margin: 0.35in; }
  html.printing-cert, html.printing-cert body { height: auto; background: #fff; overflow: visible; }
  html.printing-cert body > :not(#dlg-cert) { display: none !important; }
  html.printing-cert #dlg-cert { position: static; display: block; width: 100%; max-height: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
  html.printing-cert #dlg-cert::backdrop { display: none; }
  html.printing-cert #dlg-cert > :not(.cert-paper) { display: none !important; }
  html.printing-cert .cert-paper { box-shadow: none; border-radius: 0; }
}

/* Short screens (like small laptops): tighten the title screen so the whole menu fits */
#title-screen { overflow-y: auto; justify-content: safe center; }
@media (max-height: 760px) {
  #title-screen { gap: 1rem; }
  .logo { gap: 0.5rem; }
  .shield { width: 52px; }
  .title-small { font-size: clamp(1.2rem, 4.2vh, 2.4rem); }
  .title-big { font-size: clamp(2.2rem, 9vh, 4.6rem); }
  .title-of { margin: 0.2rem 0; }
  .tagline { font-size: 0.95rem; }
  .menu { gap: 0.55rem; }
  .menu .btn { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .menu .coder-btn { padding-top: 0.35rem; padding-bottom: 0.35rem; }
}

/* ---------- Video player controls (demo.js) ---------- */
.demo-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: rgba(7, 11, 31, 0.85);
  border: 1px solid rgba(46, 230, 255, 0.25);
  border-radius: 8px;
}
.demo-ctl {
  flex: none;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.45rem;
  font: 800 0.85rem var(--body);
  color: var(--text);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.demo-ctl:hover, .demo-ctl:focus-visible { background: rgba(46, 230, 255, 0.15); outline: none; }
.demo-ctl:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.demo-play { font-size: 1.1rem; }
.demo-time { flex: none; font: 800 0.85rem var(--body); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.demo-sound { display: flex; align-items: center; gap: 0.2rem; }

/* Sliders: the seek bar and volume, filled up to where they're set (--fill) */
.demo-seek, .demo-volume {
  --fill: 0%;
  appearance: none;
  height: 6px;
  margin: 0;
  background: linear-gradient(90deg, var(--pink), var(--gold)) 0 0 / var(--fill) 100% no-repeat, #2a3360;
  border-radius: 999px;
  cursor: pointer;
}
.demo-seek { flex: 1; min-width: 4rem; }
.demo-volume { width: 4.5rem; background: linear-gradient(var(--cyan), var(--cyan)) 0 0 / var(--fill) 100% no-repeat, #2a3360; }
.demo-seek::-webkit-slider-thumb, .demo-volume::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}
.demo-seek::-moz-range-thumb, .demo-volume::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 0; border-radius: 50%; }
.demo-seek:focus-visible, .demo-volume:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.demo-speed {
  flex: none;
  padding: 0.3rem 0.4rem;
  font: 800 0.8rem var(--body);
  color: var(--text);
  background: #1a2350;
  border: 1px solid var(--cyan-dim);
  border-radius: 6px;
  cursor: pointer;
}
.demo-speed:focus-visible { outline: 2px solid var(--gold); }

/* On the screen: a big ▶ while paused, a note while skipping, and a button when sound is blocked */
.demo-screen { cursor: pointer; }
.demo-big-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding-left: 0.3rem;
  font-size: 2rem;
  color: #fff;
  background: rgba(7, 11, 31, 0.75);
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.demo-skipping {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  z-index: 2;
  padding: 0.3rem 0.8rem;
  font: 800 0.9rem var(--body);
  color: var(--bg);
  background: var(--cyan);
  border-radius: 999px;
  transform: translateX(-50%);
  pointer-events: none;
}
.demo-unmute {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  padding: 0.45rem 0.9rem;
  font: 800 0.95rem var(--body);
  color: var(--bg);
  background: var(--gold);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  animation: demo-blink 1.2s ease-in-out infinite;
}
/* Paused: the keyboard's rainbow stops too */
.demo.paused .demo-input, .demo.paused .demo-live { animation-play-state: paused; }
@media (max-width: 640px) {
  .demo-controls { flex-wrap: wrap; }
  .demo-seek { order: -1; flex-basis: 100%; }
  .demo-volume { width: 3.5rem; }
}