/* ============ MATH ATTACK! ============ */

:root {
  --bg-deep:   #0a0a2a;
  --bg-mid:    #171a4a;
  --panel:     #1e2260;
  --panel-lt:  #2b3080;
  --ink:       #f4f7ff;
  --dim:       #9aa4e0;
  --neon:      #37f5c8;
  --neon-dk:   #0fae8b;
  --hot:       #ff4d7d;
  --hot-dk:    #c41f4d;
  --sun:       #ffd23f;
  --sun-dk:    #d79b00;
  --violet:    #b06bff;
  --font: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 12%, rgba(176,107,255,.28), transparent 45%),
    radial-gradient(circle at 82% 8%,  rgba(55,245,200,.20), transparent 42%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 100%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

body::before {  /* starfield */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78% 12%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 33% 62%, #cfe4ff, transparent),
    radial-gradient(1.2px 1.2px at 63% 38%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 72%, #ffe9a8, transparent),
    radial-gradient(1.3px 1.3px at 46% 8%,  #fff, transparent),
    radial-gradient(1.7px 1.7px at 8% 82%,  #d7c7ff, transparent),
    radial-gradient(1.2px 1.2px at 70% 88%, #fff, transparent);
  opacity: .55;
  animation: twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .32 } to { opacity: .72 } }

.screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 48px;
  max-width: 1060px;
  margin: 0 auto;
}
.hidden { display: none !important; }

/* ---------- Announcement banner ---------- */
/* Full-width strip above every non-gameplay screen. Uses --sun so it
   picks up each game's theme like everything else. */
.announce-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--sun);
  color: var(--bg-deep);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.announce-text {
  flex: 1;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.announce-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
  color: inherit;
  font: 800 20px/1 var(--font);
  cursor: pointer;
}
.announce-close:hover { background: rgba(0,0,0,.24); }

/* ---------- Title ---------- */
/* Mark and wordmark sit side by side as one lockup. It wraps to stacked on
   a narrow phone rather than shrinking the badger into a smudge. */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.2vw, 24px);
  flex-wrap: wrap;
}
.brand-mark {
  flex: none;
  width: clamp(76px, 14vw, 152px);
  height: auto;
  /* matches the wordmark's own hard offset shadow rather than a soft blur */
  filter: drop-shadow(5px 6px 0 rgba(0,0,0,.35));
}
.brand .logo { margin: 0; text-align: left; }

.logo {
  margin: 6px 0 2px;
  font-size: clamp(44px, 9vw, 88px);
  line-height: .95;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 900;
  color: var(--sun);
  text-shadow:
     0 0 12px rgba(255,210,63,.55),
     4px 4px 0 var(--hot-dk),
     8px 8px 0 rgba(0,0,0,.35);
  transform: rotate(-2deg);
}
.logo-bang {
  display: block;
  color: var(--neon);
  text-shadow:
     0 0 14px rgba(55,245,200,.6),
     4px 4px 0 #0b6a58,
     8px 8px 0 rgba(0,0,0,.35);
  transform: rotate(3deg) translateX(14px);
}
.game-title {
  margin: 14px 0 0;
  color: var(--neon, #37f5c8);
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

.tagline {
  margin: 20px 0 6px;
  color: var(--dim);
  font-size: clamp(11px, 2.4vw, 19px);
  text-align: center;
  white-space: nowrap;
}

.subtagline {
  margin: 0 0 9px;
  color: var(--neon, #37f5c8);
  font-size: clamp(10px, 2vw, 15px);
  font-weight: 700;
  text-align: center;
}

/* "Hi, HappyPuppy! You've played 13 games & solved 210 problems!" -- same
   pill family as the name and room bars, in the warm sun colour. */
.welcome-banner {
  max-width: 640px;
  margin: 10px auto 4px;
  padding: 10px 20px;
  font-size: clamp(14px, 2.2vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
  background: rgba(255,210,63,.10);
  border: 3px solid var(--sun);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,210,63,.2);
}
.welcome-banner b { color: var(--sun); font-weight: 900; }
@media (max-width: 520px) { .welcome-banner { border-radius: 18px; } }
/* A fixed cool lavender rather than a theme colour: the themes' --neon
   (the sub-tagline above) and --sun are both warm in Lava and Pies, so a
   theme colour here read as more of the same line. */
.game-credit {
  margin: 2px 0 0;
  color: #d9cbff;
  font-size: clamp(13px, 2.2vw, 16px);
  font-weight: 800;
  font-style: italic;
  text-align: center;
}
/* The warning line below always keeps its space (visibility, not display),
   so tuck it up under a credit instead of stacking both gaps. */
.game-credit:not(.hidden) + .warn { margin-top: 0; line-height: 1.2; }
/* The start screen's Start button sits closer under the credit and that
   reserved warning line -- 28px on top of them read as a big empty gap. */
#screen-start .action-row { margin-top: 10px; }

@media (hover: none), (max-width: 480px) {
  .tagline { font-size: 15px; white-space: normal; }
  .subtagline { font-size: 13px; }
}

/* ---------- Panels ---------- */
.panels {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
}
.panel {
  flex: 1 1 380px;
  background: linear-gradient(180deg, var(--panel) 0%, #171b52 100%);
  border: 3px solid var(--panel-lt);
  border-radius: 20px;
  padding: 16px 18px 20px;
  box-shadow: 0 8px 0 rgba(0,0,0,.30), inset 0 2px 0 rgba(255,255,255,.07);
}
.panel h2, .scores-box h2 {
  margin: 10px 0 10px;
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--neon);
}
/* Direct children only. The teacher-lockable controls are each wrapped in
   a div so they can be hidden with their heading, which would otherwise
   make every one of those headings a :first-child and collapse the
   panel's vertical rhythm. */
.panel > h2:first-child, .class-summary h2 { margin-top: 2px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  flex: 1 1 auto;
  min-width: 76px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: #303680;
  border: 3px solid #454ca8;
  border-radius: 13px;
  cursor: pointer;
  transition: transform .1s, background .15s, border-color .15s, box-shadow .15s;
}
.chip small { display: block; font-size: 11px; opacity: .7; font-weight: 600; }
.chip:hover { transform: translateY(-2px); background: #3b42a0; }
.chip.selected {
  background: linear-gradient(180deg, var(--neon) 0%, var(--neon-dk) 100%);
  border-color: #d7fff4;
  color: #05261f;
  box-shadow: 0 0 18px rgba(55,245,200,.55);
}

/* ---------- Operation checkboxes ---------- */
.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #303680;
  border: 3px solid #454ca8;
  border-radius: 13px;
  cursor: pointer;
  user-select: none;
  transition: transform .1s, background .15s, border-color .15s, box-shadow .15s;
}
.op:hover { transform: translateY(-2px); }
.op input { position: absolute; opacity: 0; pointer-events: none; }
.op-sym {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  border-radius: 9px;
  background: rgba(0,0,0,.28);
}
.op-name { font-size: 15px; font-weight: 700; }
.op.checked {
  background: linear-gradient(180deg, var(--sun) 0%, var(--sun-dk) 100%);
  border-color: #fff2c0;
  color: #3b2500;
  box-shadow: 0 0 18px rgba(255,210,63,.45);
}
.op.checked .op-sym { background: rgba(255,255,255,.4); }

/* ---------- Toggle switch ---------- */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 74px; height: 38px;
  border-radius: 999px;
  background: #303680;
  border: 3px solid #454ca8;
  position: relative;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.switch-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #cfd6ff;
  transition: transform .18s, background .18s;
}
.switch.on .switch-track {
  background: linear-gradient(180deg, var(--violet) 0%, #7a2fd6 100%);
  border-color: #e6d2ff;
  box-shadow: 0 0 18px rgba(176,107,255,.55);
}
.switch.on .switch-knob { transform: translateX(36px); background: #fff; }
.switch-label { font-size: 17px; font-weight: 700; color: var(--dim); }
.switch.on .switch-label { color: var(--violet); }

/* ---------- Buttons ---------- */
.big-btn {
  margin: 22px 0 6px;
  padding: 16px 46px;
  font-family: inherit;
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 900;
  letter-spacing: 2px;
  color: #3d0016;
  background: linear-gradient(180deg, #ff7ba3 0%, var(--hot) 45%, var(--hot-dk) 100%);
  border: 4px solid #ffd9e4;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 7px 0 #8c1236, 0 0 26px rgba(255,77,125,.5);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.big-btn:hover { filter: brightness(1.08); }
.big-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #8c1236, 0 0 20px rgba(255,77,125,.45); }
.big-btn.small { margin: 0; padding: 12px 26px; font-size: 19px; }
.big-btn.ghost {
  color: var(--ink);
  background: rgba(20,24,64,.7);
  border-color: var(--panel-lt);
  box-shadow: 0 7px 0 rgba(0,0,0,.30);
}
.big-btn.ghost:hover { filter: none; border-color: var(--neon); }
.big-btn.ghost:active { box-shadow: 0 2px 0 rgba(0,0,0,.30); }
/* A save/confirm button in the same spot as a destructive one shouldn't
   look identical to it -- this is the default pink big-btn in the neon
   palette instead, so "Save Controls" can't be mistaken for the
   "Delete Room" sitting right under it. Theme tokens, so Castle and Bug
   Spray reskin it for free. */
.big-btn.confirm {
  color: #05261f;
  background: linear-gradient(180deg, #7dfbdd 0%, var(--neon) 45%, var(--neon-dk) 100%);
  border-color: #d7fff4;
  box-shadow: 0 7px 0 #07614e, 0 0 26px rgba(55,245,200,.5);
}


.warn {
  margin: 7px 0 0;
  color: var(--hot);
  font-weight: 800;
  font-size: 16px;
  visibility: hidden;
}
.warn.show { visibility: visible; animation: shake .35s; }
@keyframes shake {
  0%,100% { transform: translateX(0) }
  25% { transform: translateX(-7px) }
  75% { transform: translateX(7px) }
}

/* ---------- Score list ---------- */
.scores-box {
  margin-top: 26px;
  width: 100%;
  max-width: 460px;
  background: rgba(10,12,45,.6);
  border: 3px solid var(--panel-lt);
  border-radius: 18px;
  padding: 12px 20px 16px;
  text-align: center;
}
/* ---------- Play header ----------
   Logo left; on the right the greeting and totals, then the room pill (or Join Room) and Log out.
   Same dark look as the games, but a bar like the site's own header. */
.play-header {
  position: sticky;   /* stays at the top while the page scrolls under it */
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px 24px;
  padding: 10px max(16px, calc((100% - 1160px) / 2));
  background: rgba(10,12,45,.95);
  border-bottom: 3px solid var(--panel-lt);
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.ph-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; border-radius: 14px; transition: transform .12s; }
.ph-brand:hover { transform: translateY(-1px); }
.ph-brand:focus-visible { outline: 3px solid var(--neon); outline-offset: 4px; }
.ph-mark { width: 50px; height: auto; flex: none; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.ph-logo {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
  color: var(--sun);
  text-shadow: 0 0 12px rgba(255,210,63,.45), 3px 3px 0 var(--hot-dk);
}
.ph-logo-bang {
  margin-left: .3em;
  color: var(--neon);
  text-shadow: 0 0 12px rgba(55,245,200,.5), 3px 3px 0 #0b6a58;
}
.ph-me { display: flex; align-items: center; gap: 8px 20px; flex: 1; min-width: 0; margin-left: 24px; }
.ph-hello { flex: 1; min-width: 0; margin: 0; font-size: clamp(14px, 1.5vw, 17px); font-weight: 700; line-height: 1.35; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-code { font-weight: 900; letter-spacing: 2px; color: var(--violet); }
.ph-hello b { color: var(--sun); font-weight: 900; }
.ph-actions { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }   /* far right */
.play-header .room-bar { margin: 0; padding: 6px 8px 6px 16px; gap: 10px; border-width: 2px; box-shadow: none; }
.play-header .room-bar-join { padding: 6px 16px; }
.play-header .room-bar-leave { margin-left: 0; }
.ph-home { text-decoration: none; }
/* mid widths: let the greeting wrap rather than get cut off, and drop the Join Room hint */
@media (max-width: 1099px) {
  .ph-hello { white-space: normal; }
  .play-header .room-bar-hint { display: none; }
}
@media (max-width: 699px) {
  .play-header { justify-content: center; flex-wrap: wrap; }
  .ph-me { flex-direction: column; align-items: center; width: 100%; margin-left: 0; }
  .ph-hello { text-align: center; white-space: normal; }
  .ph-actions { margin-left: 0; flex-wrap: wrap; justify-content: center; }
  .play-header .room-bar-hint { display: none; }
}

/* ---------- Brainy's Corner ----------
   A quarter circle hanging from the header's top-right corner, Brainy peeking out of it. --bc is the radius. */
.play-header { --bc: 176px; padding-right: max(calc(var(--bc) + 8px), calc((100% - 1160px) / 2)); }
.bc-corner { position: absolute; top: 0; right: 0; width: var(--bc); }
.bc-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bc-wedge {
  display: block;
  position: relative;
  width: var(--bc);
  height: var(--bc);
  border-radius: 0 0 0 100%;   /* only the bottom-left is rounded: a quarter pie around the corner */
  background: radial-gradient(circle at 100% 0, #ffe27a 0%, var(--sun) 38%, #f2a516 100%);
  box-shadow: inset 6px -6px 0 rgba(255,255,255,.18), -3px 4px 0 rgba(0,0,0,.35), 0 0 18px rgba(255,210,63,.4);
  overflow: hidden;
  transition: transform .12s, filter .12s;
  transform-origin: 100% 0;
}
.bc-btn:hover .bc-wedge { transform: scale(1.06); filter: brightness(1.08); }
.bc-btn:active .bc-wedge { transform: scale(.97); }
.bc-btn:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; border-radius: 0 0 0 100%; }
.bc-label {
  position: absolute;
  top: 7px;   /* the top band of the wedge, above Brainy's head */
  left: 0;
  right: 0;
  padding-left: 4%;
  text-align: center;
  color: var(--bg-deep);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
}
.bc-hint {
  position: absolute;
  top: calc(var(--bc) + 10px);
  right: 8px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--hot);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--hot-dk);
  animation: bc-hint 1.1s ease-in-out infinite;
}
.bc-hint::before {   /* little tail pointing up at the label */
  content: "";
  position: absolute;
  top: -6px;
  right: 22px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: var(--hot);
}
.bc-btn[aria-expanded="true"] .bc-hint { display: none; }
@keyframes bc-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.bc-face {
  position: absolute;
  top: 22%;
  right: 8%;
  width: 46%;
  height: auto;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.3));
  animation: bc-bob 3.2s ease-in-out infinite;
}
@keyframes bc-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(3px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .bc-face, .bc-hint { animation: none; } }
@media (max-width: 699px) {
  .play-header { --bc: 104px; }
  .bc-label { top: 5px; font-size: 12px; }
  .bc-hint { top: calc(var(--bc) + 8px); font-size: 12px; }
}

/* The pop-up: Brainy's den. A lumpy hand-cut sticker with a bubble-tab rail on the left and a dotted notebook
   page on the right whose curvy left edge swings round the tabs. */
.modal.bc-modal {
  display: flex;
  max-width: 1120px;
  height: min(640px, calc(100vh - 40px));
  padding: 0;
  text-align: left;
  border-color: var(--sun);
  border-width: 5px;
  border-radius: 70px 46px 78px 52px / 56px 74px 50px 80px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,77,125,.35) 0, transparent 150px),
    radial-gradient(circle at 0% 100%, rgba(55,245,200,.28) 0, transparent 170px),
    linear-gradient(180deg, #232873 0%, #14174a 100%);
  box-shadow: 0 12px 0 rgba(0,0,0,.35), 0 0 46px rgba(255,210,63,.35), inset 0 0 0 5px rgba(255,255,255,.07), inset 0 0 40px rgba(0,0,0,.25);
  animation: bc-pop .45s cubic-bezier(.2,1.3,.4,1);
}
@keyframes bc-pop { 0% { opacity: 0; transform: translateY(26px) scale(.88) rotate(-1.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes bc-swap { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
.bc-rail {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 112px;
  padding: 34px 0 18px 16px;
}
.bc-tab {
  --c: var(--sun); --on: var(--bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 80px;
  min-height: 82px;
  padding: 8px 4px 7px;
  font: inherit;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 20%, #10133f);
  border: 3px solid color-mix(in srgb, var(--c) 65%, transparent);
  border-radius: 38px 32px 36px 30px / 34px 38px 30px 36px;
  box-shadow: 0 5px 0 rgba(0,0,0,.3);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.3,1.6,.5,1), background .15s, width .2s, margin .2s, box-shadow .15s;
}
.bc-tab:nth-child(even) { border-radius: 32px 38px 30px 36px / 38px 30px 36px 34px; }
.bc-tab[data-panel="blog"]  { --c: var(--neon); }
.bc-tab[data-panel="send"]  { --c: var(--hot); --on: #fff; }
.bc-tab[data-panel="ideas"] { --c: var(--violet); --on: var(--bg-deep); }
.bc-tab:hover { transform: scale(1.08) rotate(-3deg); background: color-mix(in srgb, var(--c) 34%, #10133f); }
.bc-tab:active { transform: scale(.95); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.bc-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* the chosen tab bulges out over the page like a bookmark */
.bc-tab.selected {
  width: 106px;
  margin-right: -18px;
  padding-right: 22px;
  color: var(--on);
  background: var(--c);
  border-color: #fff;
  border-radius: 40px 18px 18px 40px / 40px 30px 30px 40px;
  box-shadow: 0 5px 0 rgba(0,0,0,.3), 0 0 22px color-mix(in srgb, var(--c) 60%, transparent);
}
.bc-tab.selected:hover { transform: none; background: var(--c); }
.bc-tab-icon { font-size: 32px; line-height: 1; }
.bc-tab-img { display: block; width: auto; height: 38px; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.35)); }
.bc-tab-name { font-size: 13px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.bc-paw { margin: auto 0 0 12px; width: 54px; height: 54px; color: var(--sun); opacity: .42; transform: rotate(-14deg); pointer-events: none; }
.bc-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  margin: 16px 16px 16px 0;
  padding: 26px 38px 30px 40px;
  overflow-y: auto;
  background:
    radial-gradient(rgba(255,255,255,.07) 2px, transparent 2.6px) 0 0 / 24px 24px,
    linear-gradient(160deg, #2c3290 0%, #232873 100%);
  border-radius: 84px 36px 44px 84px / 120px 40px 52px 120px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), inset 0 6px 22px rgba(0,0,0,.28);
}
/* chunky rounded scrollbar in the pop-up's own colors (Firefox gets the plain colored one) */
.bc-body::-webkit-scrollbar { width: 16px; }
.bc-body::-webkit-scrollbar-track { margin: 40px 0; background: rgba(10,12,45,.55); border-radius: 10px; }
.bc-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sun), var(--hot)); border: 3px solid rgba(10,12,45,.55); border-radius: 10px; }
.bc-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffe27a, #ff7aa0); }
@supports not selector(::-webkit-scrollbar) { .bc-body { scrollbar-color: var(--sun) rgba(10,12,45,.55); } }
.modal.bc-modal .modal-close {
  top: 16px; right: 20px;
  z-index: 3;
  width: 48px; height: 48px;
  font: 900 30px/1 var(--font);
  color: #fff;
  background: linear-gradient(180deg, #ff7ba3 0%, var(--hot) 55%, var(--hot-dk) 100%);
  border: 3px solid #ffd9e4;
  border-radius: 50% 46% 52% 48%;
  box-shadow: 0 4px 0 #8c1236;
  transition: transform .15s cubic-bezier(.3,1.6,.5,1), box-shadow .1s;
}
.modal.bc-modal .modal-close:hover { color: #fff; border-color: #fff; transform: rotate(90deg) scale(1.1); }
.modal.bc-modal .modal-close:active { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 #8c1236; }
.modal.bc-modal .modal-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.modal .bc-title {
  display: inline-block;
  position: relative;
  margin: 0 70px 20px 0;
  padding-bottom: 12px;
  font-size: 32px;
  letter-spacing: 1px;
  color: var(--sun);
  text-shadow: 3px 3px 0 var(--hot-dk);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}
.bc-title-icon { width: auto; height: 1.5em; margin: -.3em .35em -.15em 0; vertical-align: middle; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
/* hand-drawn wavy underlines (a mask so they take the text color) */
.modal .bc-title::after, .bc-panel h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 10px;
  background: var(--hot);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5Q10-1 20 5T40 5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 40px 10px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5Q10-1 20 5T40 5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 40px 10px repeat-x;
}
.bc-panel { animation: bc-swap .3s ease-out; }
.bc-panel h3 { position: relative; display: inline-block; margin: 0 0 18px; padding-bottom: 12px; font-size: 25px; }
.bc-panel h3::after { background: currentColor; opacity: .7; }
.bc-panel p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; }
.bc-panel .bc-lead { color: var(--ink); opacity: .8; }
.bc-empty {
  position: relative;
  padding: 36px 24px 30px;
  text-align: center;
  background: color-mix(in srgb, var(--neon) 10%, rgba(10,12,45,.5));
  border: 3px dashed color-mix(in srgb, var(--neon) 60%, transparent);
  border-radius: 56px 40px 60px 44px / 44px 58px 40px 56px;
  transform: rotate(-.8deg);
}
.bc-empty p { margin-bottom: 6px; }
.bc-empty-icon { display: block; margin-bottom: 8px; font-size: 52px; animation: bc-wiggle 2.6s ease-in-out infinite; }
@keyframes bc-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) translateY(-3px); } }
.bc-kinds { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.bc-panel .chip { flex: 0 1 auto; padding: 9px 24px; border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.bc-panel .chip:hover { transform: translateY(-2px) rotate(-2deg); }
.bc-panel .chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.bc-panel .chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bc-panel .modal-input {
  max-width: 540px;
  padding: 14px 22px;
  background: rgba(10,12,45,.7);
  border-color: color-mix(in srgb, var(--hot) 55%, var(--panel-lt));
  border-radius: 999px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.3);
  transition: border-color .15s, box-shadow .15s;
}
.bc-panel .modal-input:focus { border-color: var(--sun); box-shadow: inset 0 3px 8px rgba(0,0,0,.3), 0 0 0 4px rgba(255,210,63,.25); }
.bc-panel .contact-textarea { min-height: 130px; padding: 18px 24px; border-radius: 34px 34px 34px 12px; }
.bc-panel .contact-status { font-size: 15px; }
.bc-panel .contact-status.ok, .bc-panel .contact-status.err {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(10,12,45,.6);
  border: 2px solid currentColor;
}
.bc-panel .contact-sub.contact-idea { padding: 8px 16px; font-size: 14px; background: rgba(255,210,63,.12); border-radius: 22px 22px 22px 6px; }
.bc-ideas { margin: 0 0 22px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.bc-ideas li {
  --c: var(--sun);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 14px 14px;
  font-size: 15px;
  line-height: 1.4;
  background: color-mix(in srgb, var(--c) 14%, rgba(10,12,45,.55));
  border: 3px solid var(--c);
  border-radius: 46px 22px 40px 24px / 40px 26px 44px 24px;
  box-shadow: 0 5px 0 rgba(0,0,0,.28);
  transform: rotate(-.9deg);
  transition: transform .2s cubic-bezier(.3,1.6,.5,1);
}
.bc-ideas li:nth-child(even) { transform: rotate(.9deg); border-radius: 22px 46px 24px 40px / 26px 40px 24px 44px; }
.bc-ideas li:hover { transform: rotate(0) scale(1.03); }
.bc-ideas li:nth-child(6n+2) { --c: var(--neon); }
.bc-ideas li:nth-child(6n+3) { --c: var(--hot); }
.bc-ideas li:nth-child(6n+4) { --c: var(--violet); }
.bc-ideas li:nth-child(6n+5) { --c: #4cc2ff; }
.bc-ideas li:nth-child(6n)   { --c: #ff9f43; }
.bc-ideas .bc-idea-text > b { display: block; font-size: 17px; color: var(--c); }
.bc-idea-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  font-size: 30px;
  line-height: 1;
  background: color-mix(in srgb, var(--c) 28%, rgba(10,12,45,.6));
  border-radius: 50% 44% 52% 46%;
}
#bc-panel-about h3 { color: var(--sun); }
#bc-panel-blog h3 { color: var(--neon); }
#bc-panel-send h3 { color: var(--hot); }
#bc-panel-ideas h3 { color: var(--violet); }
#bc-editor h3 { color: var(--sun); }

/* ---- Blog posts, idea cards and the superadmin's editor ---- */
.bc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; }
.bc-loading { margin: 8px 0 0; font-weight: 700; opacity: .75; }
.bc-posts { display: grid; gap: 20px; margin-bottom: 8px; }
.bc-post {
  position: relative;
  padding: 18px 26px 18px;
  background: color-mix(in srgb, var(--neon) 10%, rgba(10,12,45,.5));
  border: 3px solid color-mix(in srgb, var(--neon) 65%, transparent);
  border-radius: 44px 28px 46px 30px / 32px 42px 30px 44px;
  box-shadow: 0 5px 0 rgba(0,0,0,.28);
}
.bc-post:nth-child(even) { border-radius: 28px 46px 30px 44px / 42px 30px 44px 32px; }
.bc-post h4 { margin: 0 0 2px; font-size: 23px; color: var(--neon); }
.bc-post time { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; opacity: .7; }
.bc-idea-text { flex: 1; min-width: 0; }
.bc-ideas li { flex-wrap: wrap; }
.bc-ideas .bc-rich p { margin: 2px 0 0; font-size: 15px; line-height: 1.4; }

/* the text a superadmin writes (and the editor's own text area) */
.bc-rich { overflow-wrap: anywhere; }
.bc-rich > :first-child { margin-top: 0; }
.bc-rich p { margin: 0 0 10px; }
.bc-rich ul, .bc-rich ol { margin: 0 0 10px; padding-left: 1.4em; line-height: 1.55; }
.bc-rich li { margin-bottom: 3px; }
.bc-rich a { color: var(--sun); text-decoration: underline; text-underline-offset: 3px; }
.bc-panel .bc-rich h3 { display: block; position: static; margin: 12px 0 6px; padding: 0; font-size: 19px; color: var(--sun); }
.bc-panel .bc-rich h3::after { display: none; }

/* superadmin-only buttons: small chunky pills */
.bc-item-tools { flex: 1 0 100%; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.bc-admin-btn {
  padding: 6px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .5px;
  color: var(--bg-deep);
  background: var(--sun);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .12s;
}
.bc-admin-btn:hover { transform: translateY(-2px) rotate(-2deg); }
.bc-admin-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.bc-admin-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bc-admin-btn.bc-new { background: var(--neon); padding: 8px 20px; font-size: 14px; }
.bc-admin-btn.bc-danger { background: var(--hot); color: #fff; }
.bc-admin-btn.armed { background: #ff2d5f; animation: bc-wiggle 0.5s ease-in-out infinite; }
.bc-admin-btn:disabled { opacity: .6; cursor: default; }

/* the editor */
.bc-field { display: block; margin-bottom: 14px; }
.bc-field > span { display: block; margin: 0 0 6px 10px; font-size: 13px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.bc-field .modal-input { margin-bottom: 0; }
.bc-field-icon .modal-input { max-width: 120px; text-align: center; font-size: 24px; }
.bc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(10,12,45,.6);
  border: 3px solid var(--panel-lt);
  border-radius: 999px;
}
.bc-toolbar button {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.bc-toolbar button:hover { background: rgba(255,255,255,.12); }
.bc-toolbar button.on { color: var(--bg-deep); background: var(--sun); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.bc-toolbar button:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.bc-tool-sep { width: 2px; height: 22px; margin: 0 4px; background: var(--panel-lt); border-radius: 2px; }
.bc-rte {
  min-height: 200px;
  max-height: 42vh;
  overflow-y: auto;
  padding: 16px 22px;
  font-size: 16.5px;
  line-height: 1.55;
  background: rgba(10,12,45,.85);
  border: 3px solid var(--violet);
  border-radius: 30px 30px 30px 12px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.3);
  outline: none;
}
.bc-rte:focus { border-color: var(--sun); box-shadow: inset 0 3px 8px rgba(0,0,0,.3), 0 0 0 4px rgba(255,210,63,.25); }
.bc-editor-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.bc-panel .big-btn { display: block; margin-top: 4px; border-radius: 999px; padding-left: 34px; padding-right: 34px; }
.bc-panel .big-btn:hover { transform: translateY(-2px) rotate(-1deg); }
.bc-panel .big-btn:active { transform: translateY(5px); }
@media (prefers-reduced-motion: reduce) {
  .modal.bc-modal, .bc-panel, .bc-empty-icon, .bc-admin-btn.armed { animation: none; }
  .bc-tab, .bc-ideas li, .modal.bc-modal .modal-close { transition: none; }
}
@media (max-height: 560px) { .bc-paw { display: none; } }
@media (max-width: 639px) {
  .modal.bc-modal { flex-direction: column; border-radius: 46px 36px 50px 38px / 38px 48px 36px 52px; }
  .bc-rail { flex-direction: row; align-items: flex-start; justify-content: center; gap: 8px; width: auto; padding: 12px 66px 0 12px; }
  .bc-tab { flex: 1; width: auto; min-height: 66px; padding: 6px 2px 5px; }
  .bc-tab.selected { width: auto; margin: 0 0 -10px; padding: 6px 2px 14px; border-radius: 30px 30px 18px 18px; }
  .bc-paw { display: none; }
  .bc-tab-icon { font-size: 26px; }
  .bc-tab-name { font-size: 11px; }
  .bc-body { margin: 0 12px 12px; padding: 22px 18px 24px; border-radius: 40px 40px 34px 34px / 44px 44px 36px 36px; }
  .bc-body::-webkit-scrollbar-track { margin: 18px 0; }
  .modal.bc-modal .modal-close { top: 10px; right: 12px; }
  .modal .bc-title { font-size: 25px; margin-right: 0; }
  .bc-ideas { grid-template-columns: 1fr; }
}

/* ---------- KPI banner (the /play picker, signed-in students) ---------- */
.kpi-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 4px auto 22px;
}
.kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 12px;
  background: linear-gradient(180deg, var(--panel) 0%, #171b52 100%);
  border: 3px solid var(--panel-lt);
  border-radius: 16px;
  box-shadow: 0 5px 0 rgba(0,0,0,.30), inset 0 2px 0 rgba(255,255,255,.07);
}
.kpi b { font-size: clamp(24px, 5vw, 38px); font-weight: 900; line-height: 1.1; color: var(--neon); font-variant-numeric: tabular-nums; }
.kpi span { font-size: clamp(11px, 2.2vw, 14px); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); text-align: center; }

/* ---------- Game strip + lobby (#screen-start, #screen-over) ----------
   One row under the header, straight on the page (no card): All Games, the game's art and title, and the start button
   (TRY AGAIN on the results screen). Below it on the detail screen:
   Phone: credit, leaderboard, then the control panels (.lobby-main is display:contents so its
   children can be re-ordered around the board).
   Wide screen: credit and control panels stack on the left, the leaderboard rides beside them. */
#screen-start, #screen-over { align-items: stretch; }
#screen-start { max-width: 1160px; }
#screen-over { max-width: 1160px; align-items: center; }

.game-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;   /* the middle takes whatever is left between the two buttons, and centres in it */
  align-items: center;
  gap: 12px 20px;
  width: 100%;
}
.game-strip > .big-btn { justify-self: start; }
.strip-go { justify-self: end; }
.strip-mid { display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; }
.strip-art {
  flex: none;
  width: 150px; height: auto; aspect-ratio: 300 / 168;
  border-radius: 12px;
  border: 3px solid var(--panel-lt);
  box-shadow: 0 4px 0 rgba(0,0,0,.30);
}
.game-strip .strip-title {
  min-width: 0;
  margin: 0;
  text-align: left;
  font-size: clamp(26px, 4.6vw, 46px);
  line-height: 1.05;
}
.game-strip .big-btn {
  margin: 0;
  height: 60px;
  padding: 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  font-size: clamp(18px, 2.6vw, 24px); letter-spacing: 1.5px;
}
/* flat, not the chunky 3D game button: solid fill, no stepped shadow, no glow, no press-down */
.game-strip .big-btn,
.game-strip .big-btn:active {
  background: #D6246E;
  color: #fff;
  border: 3px solid #ffb3d1;
  border-radius: 14px;
  box-shadow: none;
  transform: none;
}
.game-strip .big-btn:hover { background: #E8337F; filter: none; }
.game-strip > .big-btn.confirm,
.game-strip > .big-btn.confirm:active { background: #2c7be0; color: #fff; border: 3px solid #a8d0ff; box-shadow: none; }
.game-strip > .big-btn.confirm:hover { background: #3a8bf0; }
/* triangle arrows drawn with borders (a font glyph can turn into an emoji): left on All Games, right on START GAME / TRY AGAIN */
.game-strip .big-btn { gap: .5em; }
.game-strip > .big-btn.confirm::before,
.strip-go .big-btn::after {
  content: "";
  flex: none;
  width: 0; height: 0;
  border-top: .42em solid transparent;
  border-bottom: .42em solid transparent;
}
.game-strip > .big-btn.confirm::before { border-right: .62em solid currentColor; }
.strip-go .big-btn::after { border-left: .62em solid currentColor; }
/* "Pick at least one math type!" hangs just under the strip so it takes no room until it shows */
.game-strip .warn { position: absolute; right: 0; top: 100%; margin: 6px 0 0; font-size: 14px; line-height: 1.2; }
@media (max-width: 899px) {
  /* art + title on top, the two buttons side by side under them */
  .game-strip { grid-template-columns: 1fr 1fr; }
  .strip-mid { grid-column: 1 / -1; grid-row: 1; }
  .game-strip > .big-btn, .strip-go { grid-row: 2; }
  .strip-go { justify-self: stretch; }
  .game-strip > .big-btn { justify-self: stretch; }
  .game-strip .big-btn { width: 100%; padding: 0 12px; }
  .strip-art { width: 110px; }
}

.lobby { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; width: 100%; margin-top: 30px; }
.lobby-main { display: contents; }
.lobby-main .game-credit {
  order: 1;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  font-size: clamp(14px, 2.4vw, 18px);
  background: rgba(10,12,45,.45);
  border: 2px solid var(--panel-lt);
  border-radius: 14px;
}
.lobby-board { order: 2; min-width: 0; }
.lobby-main .panels { order: 3; margin-top: 0; }

.lobby-board .scores-box { margin-top: 0; max-width: none; }
/* the rank buttons at the top drive three stacked boards: My Scores, the room, Global */
.board-sec { margin-top: 14px; text-align: left; }
.board-sec-title {
  margin: 0 0 4px; padding-bottom: 4px;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sun);
  border-bottom: 2px solid var(--panel-lt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-sec .board-stats { text-align: center; }
.lobby-board .score-list li { padding-top: 3px; padding-bottom: 3px; font-size: 16px; }
.lobby-board .scores-box h2::before { content: "\1F3C6\00a0"; letter-spacing: 0; }
/* medals for the top three (rows the script writes as plain <li>s; the empty message is left alone) */
.lobby-board .score-list li:not(.empty):nth-child(-n+3)::before { font-size: 20px; line-height: 1.2; }
.lobby-board .score-list li:not(.empty):nth-child(1)::before { content: "\1F947"; }
.lobby-board .score-list li:not(.empty):nth-child(2)::before { content: "\1F948"; }
.lobby-board .score-list li:not(.empty):nth-child(3)::before { content: "\1F949"; }
.lobby-board .score-list li:not(.empty):nth-child(1) {
  background: linear-gradient(90deg, rgba(255,210,63,.20), transparent);
  border-radius: 10px; border-bottom-color: transparent; font-size: 19px;
}
.lobby-board .score-list li:not(.empty):nth-child(2) {
  background: linear-gradient(90deg, rgba(200,214,255,.14), transparent);
  border-radius: 10px; border-bottom-color: transparent;
}
.lobby-board .score-list li:not(.empty):nth-child(3) {
  background: linear-gradient(90deg, rgba(255,150,80,.14), transparent);
  border-radius: 10px; border-bottom-color: transparent;
}
@media (max-width: 959px) {
  .lobby-board .score-list li { padding: 3px 4px; font-size: 15px; }
}

/* results screen: the results stack down the left (at every width), the boards sit beside / below them */
.lobby-over { margin-top: 24px; }
.lobby-over .lobby-main { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.lobby-over .lobby-main > * { margin-top: 0; margin-bottom: 0; }

@media (min-width: 960px) {
  .lobby { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
  .lobby-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
  .lobby-main .panel { flex: 1 1 300px; }
}

/* ---------- rank badge ---------- */
.insane-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #2b0016;
  background: linear-gradient(180deg, #ff7ba3, var(--hot));
  border-radius: 999px;
  vertical-align: middle;
}
.hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--dim); }
.hint.centered { text-align: center; max-width: 520px; }

.speed-row { display: flex; align-items: center; gap: 14px; }
.speed-slider {
  flex: 1;
  accent-color: var(--neon);
  cursor: pointer;
}
.speed-value {
  flex: none;
  min-width: 46px;
  text-align: right;
  font-weight: 900;
  font-size: 18px;
  color: var(--neon);
}

.rank-badge {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border: 3px solid var(--neon);
  border-radius: 16px;
  background: rgba(55,245,200,.10);
  box-shadow: 0 0 20px rgba(55,245,200,.22) inset;
  transition: border-color .2s, background .2s;
}
.rank-name { font-size: 26px; font-weight: 900; letter-spacing: 2px; color: var(--neon); line-height: 1; }
.rank-why { font-size: 12px; color: var(--dim); }
.rank-badge.tier-pilot     { border-color: #63b3ff; background: rgba(99,179,255,.10); }
.rank-badge.tier-pilot     .rank-name { color: #63b3ff; }
.rank-badge.tier-ace       { border-color: var(--sun); background: rgba(255,210,63,.10); }
.rank-badge.tier-ace       .rank-name { color: var(--sun); }
.rank-badge.tier-elite     { border-color: var(--violet); background: rgba(176,107,255,.12); }
.rank-badge.tier-elite     .rank-name { color: var(--violet); }
.rank-badge.tier-legendary { border-color: var(--hot); background: rgba(255,77,125,.12); }
.rank-badge.tier-legendary .rank-name {
  color: var(--hot);
  text-shadow: 0 0 14px rgba(255,77,125,.7);
}

.source-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.source-tabs .source-tab {
  flex: 1;
  min-width: 0;
  padding: 9px 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--dim);
  background: #1b1f52;
  border: 2px solid var(--panel-lt);
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.source-tabs .source-tab:hover { color: var(--ink); }
.source-tabs .source-tab.selected {
  background: linear-gradient(180deg, var(--neon) 0%, var(--neon-dk) 100%);
  border-color: #d7fff4;
  color: #05261f;
  box-shadow: 0 0 14px rgba(55,245,200,.4);
}

.board-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.board-tabs .tab {
  flex: 1;
  min-width: 0;
  padding: 7px 2px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dim);
  background: #262b6e;
  border: 2px solid #3d44a0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.board-tabs .tab:hover { color: var(--ink); }
.board-tabs .tab.selected {
  background: linear-gradient(180deg, var(--violet) 0%, #7a2fd6 100%);
  border-color: #e6d2ff;
  color: #fff;
}

.score-list { list-style: none; margin: 0; padding: 0; text-align: left; counter-reset: rank; }
.score-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 4px;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px dashed rgba(154,164,224,.25);
}
.score-list li::before {
  counter-increment: rank;
  content: counter(rank) ".";
  color: var(--dim);
  width: 30px;
  flex: none;
}
.score-list li span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-list li span.date {
  flex: none;
  width: 74px;
  text-align: right;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.score-list li span:last-of-type { color: var(--sun); flex: none; text-align: right; }
.score-list li.fresh { color: var(--neon); animation: pop .5s; }
.score-list li.fresh span:last-of-type { color: var(--neon); }
@media (max-width: 480px) {
  .score-list li span.date { width: 58px; font-size: 11px; }
}
@keyframes pop { 0% { transform: scale(.85); opacity: 0 } 60% { transform: scale(1.06) } 100% { transform: scale(1) } }
.score-list li.empty { justify-content: center; color: var(--dim); font-weight: 600; border: none; }
.score-list li.empty::before { content: ""; width: 0; }
.fineprint { margin: 12px 0 0; font-size: 12px; color: var(--dim); opacity: .75; }

.board-stats {
  margin: 8px 0 0;
  font-size: 10.5px;
  letter-spacing: .3px;
  color: var(--dim);
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.board-stats:empty { display: none; }
.board-stats span { white-space: nowrap; }
.board-stats span + span::before { content: " \00b7 "; }

/* ---------- Note form pieces (used inside Brainy's Corner) ---------- */
.contact-sub { margin: 0 0 10px; font-size: 12px; color: var(--dim); opacity: .8; }
/* Kids are the ones sending ideas, so this one reads at full strength. */
.contact-sub.contact-idea { margin-top: -4px; color: var(--sun); opacity: 1; font-weight: 700; }
.contact-textarea {
  min-height: 60px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
}
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-status {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 700;
}
.contact-status.hidden { display: none; }
.contact-status.ok { color: var(--neon); }
.contact-status.err { color: var(--hot); }

.dedication {
  margin: 20px 0 6px;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--dim);
  opacity: .5;
  text-align: center;
}

.admin-link {
  display: inline-block;
  margin: 2px 0 0;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--dim);
  opacity: .3;
  text-decoration: none;
  cursor: pointer;
}
.admin-link:hover { opacity: .85; color: var(--neon); }

/* Real inbound links to the landing pages (see web/src/index.js, which
   fills the <ul> in on the way out) so search crawlers -- and curious
   humans -- have an actual path to them, not just a sitemap entry. Kept
   visually quiet since it's not aimed at the kid playing the game. */
.more-games {
  margin-top: 26px;
  width: 100%;
  max-width: 460px;
  text-align: center;
}
.more-games h2 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .7;
}
.more-games-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.more-games-list a {
  font-size: 12px;
  color: var(--dim);
  opacity: .8;
  text-decoration: none;
}
.more-games-list a:hover { color: var(--neon); opacity: 1; }

/* ============ GAME SCREEN ============ */
/* fills the viewport: HUD and answer bar are fixed height, the canvas takes the rest */
#screen-game {
  max-width: none;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 8px 10px 10px;
  gap: 8px;
}

.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  flex: none;
}
.hud-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.hud-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.hud-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px;
  background: rgba(10,12,45,.72);
  border: 3px solid var(--panel-lt);
  border-radius: 14px;
}
.hud-item.mute {
  flex: 0 0 auto;
  min-width: 74px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform .1s, border-color .15s;
}
.hud-item.mute:hover { transform: translateY(-2px); border-color: var(--neon); }
.hud-item.mute.off { opacity: .55; }

.hud-item.pause {
  flex: 0 0 auto;
  min-width: 74px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform .1s, border-color .15s, background .15s;
}
.hud-item.pause:hover { transform: translateY(-2px); border-color: var(--violet); }
.hud-item.pause.on {
  background: rgba(176,107,255,.22);
  border-color: var(--violet);
}
.hud-item.pause.exhausted { opacity: .45; cursor: not-allowed; }
.hud-item.pause.exhausted:hover { transform: none; border-color: var(--panel-lt); }

.hud-item.quit {
  flex: 0 0 auto;
  min-width: 74px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform .1s, border-color .15s, background .15s;
}
.hud-item.quit:hover { transform: translateY(-2px); border-color: #ff4d7d; }
.hud-item.quit:active { background: rgba(255,77,125,.32); }

.hud-item.restart {
  flex: 0 0 auto;
  min-width: 74px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform .1s, border-color .15s, background .15s;
}
.hud-item.restart:hover { transform: translateY(-2px); border-color: var(--sun); }
.hud-item.restart:active { background: rgba(255,210,63,.28); }

.hud-label { font-size: 11px; letter-spacing: 2px; color: var(--dim); }
.hud-value { font-size: clamp(20px, 4vw, 28px); font-weight: 900; line-height: 1.1; }
#hud-score { color: var(--sun); }
#hud-time  { color: var(--neon); }
#hud-time.warning { color: var(--hot); animation: blink .8s steps(2) infinite; }
#hud-speed { color: #63b3ff; }
#hud-combo { color: var(--violet); }
#hud-city  { color: var(--hot); }
.hud-value.bump { animation: bump .3s; }
@keyframes bump { 0% { transform: scale(1) } 45% { transform: scale(1.32) } 100% { transform: scale(1) } }
#hud-speed.low { color: var(--hot); animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35 } }

/* Mobile has no keyboard, so the desktop "Press Q to Quit" hint (see
   .key-hint) is invisible there. Rather than cram a quit button into the
   already-tight stats row (where it collided with pause), give mute/
   pause/quit their own row below the stats -- one clean line each,
   nothing overlapping. */
@media (hover: none), (max-width: 480px) {
  .hud { flex-direction: column; gap: 6px; }
  .hud-stats { flex-wrap: nowrap; gap: 4px; }
  .hud-actions { justify-content: center; }
  .hud-stats .hud-item { padding: 4px 2px; border-width: 2px; min-width: 0; }
  .hud-stats .hud-label { font-size: 8px; letter-spacing: .5px; }
  .hud-stats .hud-value { font-size: clamp(14px, 4.2vw, 18px); }
  .hud-actions .hud-item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    padding: 3px 2px;
    border-width: 2px;
  }
  .hud-actions .hud-label { font-size: 8px; letter-spacing: .5px; }
  .hud-actions .hud-value { font-size: 15px; }
}

/* every row of the game screen is free to shrink to the viewport */
#screen-game > * { width: 100%; max-width: 100%; min-width: 0; }

.stage {
  position: relative;     /* the canvas is absolutely placed inside this box... */
  flex: 1 1 auto;
  min-height: 0;          /* ...so its intrinsic size can never widen the layout */
  width: 100%;
}
#game-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 4px solid var(--panel-lt);
  border-radius: 16px;
  background: #060a24;
  box-shadow: 0 8px 0 rgba(0,0,0,.35);
  touch-action: manipulation;
}

/* A real HTML prompt with tappable buttons, laid over the canvas -- the
   canvas itself just dims behind it (see drawQuitConfirm in game.js).
   Keyboard Y/N/Esc still works too; this makes quitting reachable on a
   phone, which has no keyboard to answer a canvas-drawn "(Y)es or (N)o". */
.quit-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 6;
}
.quit-confirm-title {
  margin: 0;
  font-size: clamp(32px, 8vw, 52px);
  font-weight: 900;
  color: #ff4d7d;
  text-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.quit-confirm-actions { display: flex; gap: 16px; }
.quit-confirm-btn {
  min-width: 96px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.35);
}
.quit-confirm-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.quit-confirm-btn.yes { background: #ff4d7d; border: 3px solid #ff8fa8; }
.quit-confirm-btn.no { background: #303680; border: 3px solid #454ca8; }

.answer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: none;
}
.answer-label { font-size: clamp(9px, 2.4vw, 12px); letter-spacing: 2px; color: var(--dim); }
.answer-box {
  display: flex;
  align-items: center;
  min-width: clamp(140px, 45vw, 220px);
  height: clamp(40px, 11vh, 62px);
  padding: 0 clamp(10px, 3vw, 20px);
  font-size: clamp(22px, 7vw, 38px);
  font-weight: 900;
  letter-spacing: 3px;
  background: rgba(10,12,45,.8);
  border: 4px solid var(--panel-lt);
  border-radius: 14px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.answer-box.good {
  border-color: var(--neon);
  background: rgba(55,245,200,.22);
  box-shadow: 0 0 28px rgba(55,245,200,.6);
}

.caret {
  width: 4px; height: clamp(20px, 5.5vh, 34px);
  margin-left: 3px;
  background: var(--neon);
  animation: blink 1s steps(2) infinite;
}

.key-hint {
  margin: 0 100px 0 0;
  font-size: 14px;
  color: var(--dim);
  white-space: nowrap;
}
.key-hint b { color: var(--ink); }

.keypad {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 560px;
  flex: none;
}
.keypad button {
  padding: 12px 0;
  font-family: inherit;
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  background: #303680;
  border: 3px solid #454ca8;
  border-radius: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.keypad button:active { background: var(--neon); color: #05261f; }
.keypad button.alt { background: #46308a; border-color: #6a4fc0; }
@media (hover: none), (max-width: 720px) {
  .keypad { display: grid; gap: 4px; }
  .keypad button { padding: 8px 0; font-size: 18px; border-width: 2px; border-radius: 10px; }
  .key-hint { display: none; }
}

/* ============ GAME OVER ============ */
.over-title {
  margin: 12px 0 4px;
  font-size: clamp(38px, 8vw, 74px);
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  color: var(--hot);
  text-shadow: 0 0 16px rgba(255,77,125,.55), 4px 4px 0 rgba(0,0,0,.4);
  transform: rotate(-1.5deg);
}
.over-sub { margin: 4px 0 18px; color: var(--dim); font-size: 18px; text-align: center; }

.final-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 46px;
  background: linear-gradient(180deg, var(--panel) 0%, #171b52 100%);
  border: 4px solid var(--sun);
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(255,210,63,.35);
}
.final-label { font-size: 13px; letter-spacing: 3px; color: var(--dim); }
.final-value { font-size: clamp(48px, 11vw, 84px); font-weight: 900; color: var(--sun); line-height: 1.05; }

.stat-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.stat {
  min-width: 108px;
  padding: 9px 16px;
  text-align: center;
  background: rgba(10,12,45,.6);
  border: 3px solid var(--panel-lt);
  border-radius: 14px;
}
.stat b { display: block; font-size: 24px; }
.stat span { font-size: 11px; letter-spacing: 1.5px; color: var(--dim); }

.save-error { margin: 10px 0 0; color: var(--hot); font-weight: 700; font-size: 15px; }
.rank-line { margin: 12px 0 0; padding: 10px 16px; max-width: 560px; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; background: rgba(255,210,63,.12); border: 2px solid var(--sun); border-radius: 18px; }
.rank-line b { color: var(--sun); font-size: 18px; }
.rank-line .rank-board { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--dim); }

/* "What do you think of this game?" + Send, on one line */
.game-comment {
  display: flex; gap: 8px;
  width: 100%; max-width: 560px;
  margin: 20px auto 0;
}
.game-comment .modal-input { flex: 1; min-width: 0; margin: 0; padding: 11px 14px; }
.game-comment-send {
  flex: none;
  padding: 0 18px;
  font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .3px;
  color: #05261f;
  background: linear-gradient(180deg, #7dfbdd 0%, var(--neon) 45%, var(--neon-dk) 100%);
  border: 3px solid #d7fff4;
  border-radius: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.game-comment-send:hover { filter: brightness(1.08); }
.game-comment-send:disabled { opacity: .6; cursor: default; }
.game-comment-thanks { margin: 20px 0 0; color: var(--neon); font-weight: 800; font-size: 17px; }
@media (max-width: 480px) {
  .game-comment { flex-direction: column; }
  .game-comment-send { padding: 11px 18px; }
}

/* ---------- Start Mission + room actions, side by side ---------- */
.action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
  margin: 28px 0 0;
}
/* Fixed height so both sit flush together regardless of font metrics --
   .big-btn normally sizes itself from padding + its own font-size clamp,
   which doesn't reliably match a differently-styled sibling. */
.action-row .big-btn {
  margin: 0;
  height: 72px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.room-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  margin: 4px 0 18px;
  background: rgba(176,107,255,.16);
  border: 3px solid var(--violet);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(176,107,255,.35);
}
.room-bar-label { font-size: 12px; letter-spacing: 2px; font-weight: 800; color: var(--dim); }
.room-bar-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.room-bar-code {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--violet);
}
.room-bar-leave {
  margin-left: auto;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink);
  background: rgba(10,12,45,.5);
  border: 2px solid var(--panel-lt);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.room-bar-leave:hover { border-color: var(--hot); background: rgba(255,77,125,.15); }

/* "Playing as" and "Playing in" share a row, wrapping onto two lines
   when the window's too narrow for both. */
.identity-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
}
.identity-row .room-bar { margin: 0; }
.identity-row-bottom { margin: 22px 0 0; }        /* above For Teachers, after the tiles */
/* One fixed height for every pill in the row -- with a button inside or
   not, and whether they share a line or have wrapped onto two. Tall
   enough for the Change / Leave Room buttons. */
.identity-row > .room-bar,
.identity-row > .nickname-bar {
  height: 58px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Not in a room: the room pill turned into a button that opens Join Room. */
.room-bar-join {
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.room-bar-join:hover { background: rgba(176,107,255,.28); box-shadow: 0 0 24px rgba(176,107,255,.5); }
.room-bar-join .room-bar-label { color: var(--violet); font-size: 16px; }
.room-bar-join-icon { font-size: 20px; line-height: 1; }
.room-bar-hint { font-size: 14px; font-weight: 700; color: var(--dim); }
.identity-row:not(:has(> :not(.hidden))) { display: none; }   /* neither showing: no empty gap */

/* Same pill as the room bar, in the theme colour instead of violet,
   with Log out where the room bar has Leave Room. */
.nickname-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(55,245,200,.08);
  border: 3px solid var(--neon);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(55,245,200,.2);
}
.nickname-bar-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.nickname-bar .room-bar-leave { margin-left: 4px; }
.nickname-bar .room-bar-leave:hover { border-color: var(--neon); background: rgba(55,245,200,.15); }

/* ---------- Home screen: game picker ---------- */
/* Four across on a laptop: the screen's 1028px of content fits four 200px
   columns but never five, and narrower windows fall back to three, two
   and one on their own. */
.game-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;   /* every tile in a group the same height */
  gap: 18px;
  width: 100%;
  margin: 10px 0 4px;
}
.game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;          /* the art area and the text block fill the tile edge to edge */
  overflow: hidden;
  font-family: inherit;
  color: #102F67;
  text-align: center;
  background: #fff;    /* the text half; the art half is .game-tile-icon, dark */
  border: 4px solid var(--neon);
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 22px rgba(55,245,200,.3);
  transition: transform .1s, box-shadow .1s, filter .15s;
}
.game-tile:hover { filter: brightness(1.1); }

/* A diagonal "NEW" ribbon across the top-left corner (the premium diamond
   has the top-right). Add `has-new` and a <span class="tile-new"> to a
   tile; take them off once it's not new anymore. The tile clips the
   ribbon's ends so they tuck neatly under its border. */
.game-tile.has-new { position: relative; overflow: hidden; }
.tile-new {
  position: absolute;
  top: 18px;
  left: -32px;
  width: 120px;
  padding: 4px 0;
  transform: rotate(-45deg);
  background: linear-gradient(180deg, #ff6b93 0%, #e0335f 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  pointer-events: none;
}
.game-tile:active { transform: translateY(2px); box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 16px rgba(55,245,200,.25); }
/* Top half: the game's art on the dark game-tile navy. Bottom half: white, with the
   name and description. (Same look as the cards on the home page.) */
.game-tile-icon {
  display: block; width: 100%; font-size: 0; line-height: 0;
  background: linear-gradient(180deg, #2a2f76 0%, #1c2058 100%);
}
.game-tile-name { padding: 14px 16px 4px; font-size: 22px; font-weight: 900; letter-spacing: 1px; color: #102F67; }
.game-tile-desc { padding: 0 16px 18px; font-size: 13px; color: #4a5a7a; line-height: 1.4; }

/* Each tile previews its own game's palette (see the css/<game>.css sheets) so
   the picker itself hints at what's different before you even click. */

/* Painted tile icons (paintTileArt / paintFireTile in game.js) rather
   than emoji, like Kitty Castle's cat: each a little illustration of its
   own game on a transparent canvas, backed at 2x. */
.tile-art-wrap { font-size: 0; }
/* Static art (images/game-art/<key>.png): every file is the same 300x168 canvas
   (the source art, trimmed and centred -- see game-art-source/), shown at half
   size so it stays sharp on high-density screens. It fills the width of the tile's dark
   art area; the few scenes whose background is part of the picture (Lava Escape,
   Den Rescue, Maze Muncher) simply cover it edge to edge. */
.tile-art { display: block; width: 100%; height: auto; aspect-ratio: 300 / 168; object-fit: contain; object-position: center; }

/* Games grouped by type: a small letter-spaced label with a thin rule
   running out to the right, then that group's own .game-tiles grid. */
.game-cat { width: 100%; margin: 0 0 30px; }
.game-cat:last-of-type { margin-bottom: 4px; }
.game-cat-title {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 12px; padding: 0 2px;
  font-size: 15px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
  color: var(--dim);
}
.game-cat-title::after {
  content: ''; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(150,160,230,.4), rgba(150,160,230,0));
}
.game-cat .game-tiles { margin: 0; }
@media (max-width: 560px) {
  .game-cat { margin-bottom: 24px; }
  .game-cat-title { font-size: 13px; letter-spacing: 2px; }
}

/* "Got a game idea?" -- a full-width banner under the games rather than
   another tile among them. Dashed and quieter than a game, an invitation
   rather than another option. */
.ideas-banner {
  display: flex; align-items: center; gap: 16px;
  width: 100%;                                  /* the same width as the games grid above */
  margin: 18px 0 0;
  padding: 16px 22px;
  font-family: inherit; text-align: left;
  color: var(--ink);
  background: linear-gradient(90deg, #232861 0%, #2b2470 100%);
  border: 3px dashed var(--panel-lt);
  border-radius: 18px;
  box-shadow: 0 6px 0 rgba(0,0,0,.3);
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.ideas-banner:hover { border-color: var(--violet); }
.ideas-banner:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.ideas-banner-icon { font-size: 32px; line-height: 1; flex: none; }
.ideas-banner-text { flex: 1; font-size: 17px; line-height: 1.4; color: var(--dim); }
.ideas-banner-text b { color: var(--sun); font-size: 19px; margin-right: 4px; }
.ideas-banner-go { flex: none; font-size: 26px; font-weight: 900; color: var(--violet); }
@media (max-width: 560px) {
  .ideas-banner { padding: 14px 16px; gap: 12px; }
  .ideas-banner-text { font-size: 15px; }
  .ideas-banner-go { display: none; }
}

/* ---------- Brainy Badger movement sandbox ---------- */
.brand-link { cursor: pointer; border-radius: 18px; transition: transform .12s; }
.brand-link:hover { transform: translateY(-2px); }
.brand-link:focus-visible { outline: 3px solid var(--neon); outline-offset: 6px; }

.badger-screen {
  max-width: none;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 10px 14px 14px;
  gap: 6px;
}
.badger-screen > * { width: 100%; max-width: 100%; min-width: 0; }
.badger-sub { margin: 0 0 4px; text-align: center; }
.badger-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.badger-topbar .back-link { margin: 0; }
.badger-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.badger-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 3px solid var(--panel-lt);
  border-radius: 18px;
  overflow: hidden;
}
#badger-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Per-game screens: link back to the home/game-picker screen ---------- */
.back-link {
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--ink);
  background: rgba(154,164,224,.12);
  border: 2px solid rgba(154,164,224,.35);
  border-radius: 12px;
  cursor: pointer;
}
.back-link:hover {
  color: var(--neon);
  border-color: var(--neon);
  background: rgba(154,164,224,.2);
}

/* A back-link that is really a link (e.g. "Home" at the top of a page) */
a.back-link { display: inline-block; text-decoration: none; }

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6,7,26,.72);
  backdrop-filter: blur(3px);
}
.modal-overlay.hidden { display: none; }
.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 30px 28px 26px;
  text-align: center;
  background: linear-gradient(180deg, var(--panel) 0%, #171b52 100%);
  border: 4px solid var(--violet);
  border-radius: 22px;
  box-shadow: 0 14px 0 rgba(0,0,0,.35), 0 0 40px rgba(176,107,255,.4);
  animation: pop .3s;
}
/* The Manage Room panel carries the full classroom-controls block, which
   is far taller than the 420px one-question modals this shares styling
   with -- so it gets room to breathe and scrolls rather than overflowing
   off a laptop screen. */
.modal-wide {
  max-width: 820px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--violet);
}
.modal-sub { margin: 0 0 18px; color: var(--dim); font-size: 15px; }
.modal-note { margin: 16px 0 4px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 32px; height: 32px;
  font-size: 20px;
  line-height: 1;
  color: var(--dim);
  background: rgba(10,12,45,.6);
  border: 2px solid var(--panel-lt);
  border-radius: 50%;
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); border-color: var(--hot); }

.room-code-display {
  margin: 6px 0 18px;
  padding: 18px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 10px;
  color: var(--sun);
  background: rgba(10,12,45,.85);
  border: 3px solid var(--sun-dk);
  border-radius: 16px;
  text-shadow: 0 0 18px rgba(255,210,63,.55);
}

/* ---------- Manage Room panel ---------- */
.manage-info {
  margin: 4px 0 18px;
  padding: 4px 2px;
  text-align: left;
}
.manage-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--panel-lt);
  font-size: 15px;
}
.manage-row:last-child { border-bottom: none; }
.manage-label { color: var(--dim); font-weight: 700; letter-spacing: .5px; }

/* "Your Rooms": one row per room, details left, MANAGE right */
.manage-room-list { display: flex; flex-direction: column; text-align: left; }
.manage-room-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--panel-lt);
}
.manage-room-item:last-child { border-bottom: none; }
.manage-room-name { font-size: 17px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.manage-room-meta { margin-top: 2px; font-size: 13px; color: var(--dim); }
/* Room codes are what a teacher reads out to the class, so they get the
   same gold-on-dark look as the "Room Created!" code, just smaller. */
.manage-room-code {
  display: inline-block;
  margin: 6px 0 4px;
  padding: 3px 12px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 5px;
  color: var(--sun);
  background: rgba(10,12,45,.85);
  border: 2px solid var(--sun-dk);
  border-radius: 10px;
}
/* "ROOM CODE  NNWA6  Copy" on each Your Rooms line */
.manage-room-code-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.manage-room-code-label {
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--dim);
}
.manage-row.manage-row-code { align-items: center; }
#manage-room-code {
  padding: 2px 12px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--sun);
  background: rgba(10,12,45,.85);
  border: 2px solid var(--sun-dk);
  border-radius: 10px;
}
.manage-label small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.manage-code-wrap, .manage-name-view, .manage-name-edit {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.manage-row.manage-row-name { align-items: center; }
#manage-room-name { font-weight: 800; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
/* the edit form takes the rest of the row, and the box most of that
   (doubled class so it beats .rs-pin-input's 4-digit width) */
.manage-name-edit { flex: 1; min-width: 0; flex-wrap: nowrap; }
/* the grade pickers (Create a Room, and Manage Room's Grade row) */
.grade-select { cursor: pointer; }
.grade-select option { color: #111; background: #fff; }
select.modal-input:invalid { color: rgba(154,164,224,.6); }
.rs-pin-input.grade-select { width: auto; letter-spacing: .3px; margin-right: 4px; }
.manage-grade-none { color: var(--sun); font-weight: 800; }

.rs-pin-input.manage-name-input {
  flex: 1; min-width: 0; width: auto; max-width: 440px;
  padding: 6px 10px;
  font-size: 16px; letter-spacing: .3px;
}

/* the small Copy pill next to a room code */
.copy-code-mini {
  padding: 5px 14px;
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .5px;
  color: var(--ink);
  background: rgba(10,12,45,.5);
  border: 2px solid var(--sun-dk);
  border-radius: 999px;
  cursor: pointer;
}
.copy-code-mini:hover { border-color: var(--sun); }
.copy-code-mini.copied { border-color: var(--neon); color: var(--neon); }

/* Registered Students | Games Played | Equations Answered */
.manage-stats { display: flex; gap: 10px; margin-top: 10px; }
.manage-stats > div {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px;
  text-align: center;
  background: rgba(10,12,45,.5);
  border: 2px solid var(--panel-lt);
  border-radius: 14px;
}
.manage-stats b { font-size: 24px; font-weight: 900; color: var(--sun); }
.manage-stats span { font-size: 12px; font-weight: 700; color: var(--dim); line-height: 1.2; }

.manage-room-item .big-btn.small { flex: none; padding: 9px 18px; font-size: 15px; }
.manage-back { display: block; margin: 0 0 6px; padding: 6px 12px; font-size: 14px; }
.manage-row > span:last-child { font-weight: 800; color: var(--ink); text-align: right; }

.manage-actions, .manage-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.manage-confirm { margin-top: 6px; }
.manage-confirm p { color: var(--dim); margin: 0 0 12px; }
.manage-confirm.hidden { display: none; }

/* ---------- classroom controls (inside the Manage Room modal) ----------
   Reuses the start screen's own .chip / .op-grid / .switch components so
   a teacher is setting the same controls she'd see while playing, just
   housed in the modal. The modal gets .modal-wide to fit them. */
.class-controls {
  margin: 0 0 18px;
  padding: 16px 16px 14px;
  text-align: left;
  background: rgba(10,12,45,.5);
  border: 3px solid var(--panel-lt);
  border-radius: 16px;
}
.class-controls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.class-controls-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .5px;
  color: var(--ink);
}
.class-controls-body { margin-top: 14px; }
.class-controls-body.hidden { display: none; }
.class-controls-body h2 {
  margin: 16px 0 8px;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--neon);
  text-transform: uppercase;
}
.class-controls-body h2:first-child { margin-top: 0; }
/* Once there's width to spend, stop stacking heading-above-control down a
   narrow column -- put each heading in a label column beside its control so
   the whole block fits without the teacher scrolling the modal. */
@media (min-width: 760px) {
  .class-controls-body {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 150px minmax(0, 1fr);
    gap: 14px 18px;
    align-items: center;
  }
  .class-controls-body h2 { margin: 0; grid-column: 1; }
  .class-controls-body > p { grid-column: 1 / -1; margin: 0; }
  /* the two wide pickers each take the whole control span... */
  #cc-range-row, #cc-op-grid { grid-column: 2 / -1; }
  /* ...but a yes/no switch is narrow, so the last two share one row */
  .class-controls-body h2:nth-of-type(4) { grid-column: 3; }
  #cc-neg-switch { grid-column: 2; }
  #cc-terms-switch { grid-column: 4; }
}
/* All four math types on one row. Held back to the width where the modal
   has actually hit its 820px cap (it needs ~860px of viewport to get
   there) -- forcing four columns any earlier squeezes "Subtract" and
   "Multiply" past the edge of their buttons. */
@media (min-width: 880px) {
  #cc-op-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #cc-op-grid .op { gap: 8px; padding: 9px 10px; }
  #cc-op-grid .op-sym { width: 30px; height: 30px; }
}
.class-controls #cc-save { margin-top: 14px; width: 100%; }
.class-controls-saved {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--neon);
}
.class-controls-saved.hidden { display: none; }

/* Stands where the teacher-owned controls were. Styled like the rank
   badge rather than like a control, because it isn't one -- it's a
   read-out of a decision already made. */
.class-summary-text {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(176,107,255,.12);
  border: 3px solid var(--violet);
  border-radius: 16px;
}

.modal-input-big, .modal-input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  font-family: inherit;
  color: var(--ink);
  background: rgba(10,12,45,.85);
  border: 3px solid var(--violet);
  border-radius: 13px;
  outline: none;
}
.modal-input-big {
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 6px;
  text-transform: uppercase;
}
.modal-input-big::placeholder { color: rgba(154,164,224,.4); letter-spacing: 2px; }
.modal-input {
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  letter-spacing: .3px;
}
.modal-input::placeholder { color: rgba(154,164,224,.5); letter-spacing: .3px; }

.modal-error {
  margin: 0 0 12px;
  color: var(--hot);
  font-weight: 700;
  font-size: 14px;
}
.modal-error.hidden { display: none; }

/* ---------- Teacher / parent info ---------- */
/* The home screen's grown-up corner: one panel holding both teacher
   buttons. Sun-colored on purpose: it's the one part of a screen full of
   games that isn't aimed at the kid. */
.teacher-panel {
  width: 100%;
  max-width: 960px;               /* three pills across on a laptop */
  margin: 18px 0 4px;
  padding: 14px 18px 18px;
  background: linear-gradient(180deg, rgba(255,210,63,.12) 0%, rgba(255,210,63,.04) 100%);
  border: 2px dashed rgba(255,210,63,.5);
  border-radius: 18px;
  text-align: center;
}
.teacher-panel-head {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sun);
}
.teacher-panel-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
/* The same pill as "Playing as" / "Playing in" up top (height, border,
   rounding, tint and glow), in the teacher yellow. */
.teacher-btn {
  flex: 1 1 230px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 0 10px;
  font-family: inherit;
  text-align: left;
  color: var(--ink);
  background: rgba(255,210,63,.1);
  border: 3px solid var(--sun);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255,210,63,.22);
  transition: background .15s, box-shadow .15s, transform .1s;
}
.teacher-btn:hover { background: rgba(255,210,63,.2); box-shadow: 0 0 24px rgba(255,210,63,.4); }
.teacher-btn:active { transform: translateY(2px); }
.teacher-btn-icon {
  flex: none;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: rgba(255,210,63,.2);
  border-radius: 50%;
}
.teacher-btn-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.2;
}
.teacher-btn-text small { font-size: 12px; font-weight: 600; color: var(--dim); line-height: 1.25; }

/* The quiet link at the foot of each teacher page, over to the other one. */
.teacher-text-btn {
  display: block;
  margin: 14px auto 0;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--sun);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.teacher-text-btn:hover { color: #fff; }

.teacher-screen { padding-bottom: 60px; }
.teacher-topbar { width: 100%; }
.teacher-topbar .back-link { margin: 0 0 4px; }

/* A reading column, not a dashboard: capped well under the screen's
   1060px so the prose stays at a comfortable line length. */
.teacher-doc {
  width: 100%;
  max-width: 720px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.teacher-card {
  background: rgba(10,12,45,.45);
  border: 2px solid var(--panel-lt);
  border-radius: 16px;
  padding: 18px 22px 20px;
}
.teacher-card h2 {
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: .6px;
  color: var(--neon);
}
.teacher-card h3 {
  margin: 18px 0 8px;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sun);
}
.teacher-card p {
  margin: 0 0 11px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  opacity: .92;
}
.teacher-card p:last-child { margin-bottom: 0; }
.teacher-card b { color: var(--ink); opacity: 1; }

.teacher-list, .teacher-steps {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: .92;
}
.teacher-list { list-style: none; padding-left: 0; }
.teacher-list > li { position: relative; padding-left: 20px; }
.teacher-list > li::before {
  content: "\25B8";                /* small right triangle */
  position: absolute;
  left: 2px;
  color: var(--neon);
}
.teacher-steps > li::marker { color: var(--neon); font-weight: 800; }
.teacher-list b, .teacher-steps b { color: var(--neon); }

/* Names a control the reader has to find on another screen. */
.teacher-ui {
  padding: 1px 7px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--sun);
  background: rgba(255,210,63,.12);
  border: 1px solid rgba(255,210,63,.35);
  border-radius: 7px;
}

.teacher-note {
  margin-top: 14px !important;
  padding: 10px 14px;
  font-size: 13.5px !important;
  border-left: 3px solid var(--violet);
  background: rgba(176,107,255,.09);
  border-radius: 0 10px 10px 0;
  opacity: .85 !important;
}

.teacher-card .big-btn { display: block; margin: 14px auto 0; }   /* centred in its card */

@media (max-width: 480px) {
  .teacher-card { padding: 15px 16px 17px; }
  .teacher-card h2 { font-size: 15.5px; }
  .teacher-card p, .teacher-list, .teacher-steps { font-size: 13.5px; }
}

/* ---------- Premium games ----------
   A premium game (GAME_FLAVOR[game].premium in game.js) is only playable
   inside a classroom room. Its tile gets .premium from markPremiumTiles():
   a static rainbow "holographic" border and a gem. The border is
   a conic gradient painted under the tile's own background, which needs a
   transparent border colour -- !important because each tile sets its own
   border-color by id (#tile-lava etc), which a class can't otherwise beat. */
.game-tile.premium {
  position: relative;
  border-color: transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 0deg, #ff4d7d, #ffd23f, #37f5c8, #4da6ff, #b06bff, #ff4d7d) border-box;
}
.game-tile.premium::after {
  content: '\1F48E'; position: absolute; top: 10px; right: 12px; font-size: 20px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
/* Not in a room: dimmed a little, still clearly clickable (it opens the
   "ask your teacher" popup), and it brightens a touch on hover in place
   of the base tile's hover brightness, which this filter replaces. */
.game-tile.premium-locked { filter: grayscale(.4) brightness(.93); }
.game-tile.premium-locked:hover { filter: grayscale(.25) brightness(1.02); }

/* the "ask your teacher" popup */
.premium-gem {
  font-size: 54px; line-height: 1; margin: 0 0 6px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.premium-later {
  display: block; margin: 12px auto 0; padding: 4px 8px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--dim); background: none; border: 0; cursor: pointer;
  text-decoration: underline;
}
.premium-later:hover { color: var(--ink); }

/* ---------- student sign-in / new player ---------- */
.auth-badger {
  display: block; width: 84px; height: auto; margin: 0 auto 8px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
#modal-auth-choice .big-btn { width: 100%; padding-left: 12px; padding-right: 12px; }
#modal-auth-choice .big-btn + .big-btn { margin-top: 12px; }

/* The padlock: four boxes that fill as numbers are typed, with the real
   input stretched invisibly over them so a tap (or a click) focuses it
   and phones bring up the number pad. The lock pops open at 4 numbers. */
.pin-pad {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 14px;
  cursor: text;
}
.pin-lock::before { content: "\1F512"; font-size: 34px; line-height: 1; }
.pin-pad.full .pin-lock::before { content: "\1F513"; }
.pin-boxes { display: flex; gap: 8px; }
.pin-boxes i {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 56px;
  font-style: normal;
  background: rgba(10,12,45,.85);
  border: 3px solid var(--violet);
  border-radius: 12px;
  transition: border-color .12s, transform .12s;
}
.pin-boxes i.on { border-color: var(--sun); transform: scale(1.04); }
.pin-boxes i.on::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sun);
}
.pin-pad:focus-within .pin-boxes i:not(.on) { border-color: var(--neon); }
.pin-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  font-size: 16px;   /* keeps iOS from zooming in on focus */
  caret-color: transparent;
  cursor: text;
}

.np-name {
  margin: 4px 0 14px;
  padding: 14px 10px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: .5px;
  color: var(--sun);
  background: rgba(10,12,45,.85);
  border: 3px solid var(--sun-dk);
  border-radius: 16px;
  text-shadow: 0 0 18px rgba(255,210,63,.45);
  overflow-wrap: anywhere;
  transition: opacity .15s;
}
.np-name.spinning { opacity: .35; }
#np-spin-btn { margin-bottom: 4px; }

.np-card {
  display: flex; gap: 10px; margin: 6px 0 18px;
}
.np-card > div {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 8px;
  background: rgba(10,12,45,.85);
  border: 3px solid var(--sun-dk);
  border-radius: 14px;
}
.np-card span { color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.np-card b { color: var(--sun); font-size: 22px; font-weight: 900; overflow-wrap: anywhere; }

/* ---------- Manage Room: Students / Classroom Controls tabs ---------- */
.manage-tabs .source-tab { padding: 11px 6px; font-size: 15px; }
.manage-tabs .source-tab span { opacity: .75; }

.room-students {
  margin: 0 0 18px;
  padding: 10px 14px;
  text-align: left;
  background: rgba(10,12,45,.5);
  border: 3px solid var(--panel-lt);
  border-radius: 16px;
}
/* scrolls sideways on a narrow phone rather than squashing the columns */
.room-students-list { max-height: 340px; overflow: auto; }
.room-students-list .modal-note { margin: 4px 0; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rs-table th, .rs-table td {
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;            /* each column is as wide as its contents */
  border-bottom: 1px solid var(--panel-lt);
}
.rs-table tr:last-child td { border-bottom: none; }
.rs-table th {
  position: sticky; top: 0;
  color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  background: #151a4d;
}
.rs-table .rs-num { text-align: right; }
.rs-name { font-weight: 800; width: 100%; }   /* the name column takes the slack */
.rs-pin b { color: var(--sun); font-size: 16px; letter-spacing: 2px; margin-right: 8px; }
.rs-first { margin-top: 2px; white-space: nowrap; font-weight: 600; color: var(--dim); }
.rs-first b { font-weight: 700; color: var(--ink); margin-right: 8px; }
/* doubled class so it beats .rs-pin-input's 4-digit width */
.rs-pin-input.rs-first-input { width: 120px; letter-spacing: .3px; margin-right: 4px; }
.rs-pin-change, .rs-pin-save {
  padding: 3px 10px;
  font-family: inherit; font-size: 12px; font-weight: 800;
  color: var(--ink);
  background: rgba(10,12,45,.5);
  border: 2px solid var(--panel-lt);
  border-radius: 999px;
  cursor: pointer;
}
.rs-pin-change:hover, .rs-pin-save:hover { border-color: var(--neon); }
.rs-pin-input {
  width: 64px; padding: 3px 6px;
  font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: 2px;
  color: var(--ink);
  background: rgba(10,12,45,.85);
  border: 2px solid var(--violet);
  border-radius: 8px;
  outline: none;
}
@media (max-width: 520px) {
  .manage-stats { gap: 6px; flex-wrap: wrap; }
  .manage-stats > div { flex: 1 1 40%; }        /* two by two */
  .manage-stats b { font-size: 20px; }
}

/* Countdown above the game tiles until a new game drops. */
.launch-banner {
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 14px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(180deg, #7b4be0, #4f2aa8);
  border: 3px solid var(--sun);
  border-radius: 14px;
  box-shadow: 0 5px 0 #321a73, 0 0 18px rgba(176,107,255,.45);
}
.launch-banner b { color: var(--sun); font-variant-numeric: tabular-nums; }

/* ---- Voting on game ideas ---- */
.bc-vote-call { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 18px; font-size: 16px; line-height: 1.4; background: color-mix(in srgb, var(--violet) 22%, rgba(10,12,45,.5)); border: 3px dashed var(--violet); border-radius: 40px 24px 36px 22px / 26px 34px 24px 32px; }
.bc-vote-call b { color: var(--sun); }
.bc-vote-call-arrow { flex: none; display: grid; place-items: center; width: 40px; height: 40px; font-size: 20px; color: var(--bg-deep); background: var(--sun); border-radius: 50% 44% 52% 46%; animation: bc-nudge 1.2s ease-in-out infinite; }
@keyframes bc-nudge { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
.bc-vote {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0;
  align-self: center;
  min-width: 58px;
  padding: 7px 10px 6px;
  font: inherit;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, rgba(10,12,45,.6));
  border: 3px solid var(--c);
  border-radius: 26px 20px 28px 18px / 20px 26px 18px 28px;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
  cursor: pointer;
  transition: transform .15s cubic-bezier(.3,1.6,.5,1);
}
.bc-vote:hover { transform: translateY(-3px) rotate(-3deg); }
.bc-vote:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.bc-vote:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bc-vote:disabled { opacity: .7; cursor: default; }
.bc-vote-arrow { font-size: 20px; line-height: 1; }
.bc-vote-count { font-size: 18px; font-weight: 900; line-height: 1.1; }
.bc-vote.voted { color: var(--bg-deep); background: var(--c); border-color: #fff; }
.bc-vote.bump { animation: bc-bump .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes bc-bump { 0% { transform: scale(.8); } 60% { transform: scale(1.18) rotate(-4deg); } 100% { transform: scale(1); } }
.bc-tab-flag { margin-top: 1px; padding: 1px 8px; font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #fff; background: var(--hot); border-radius: 999px; box-shadow: 0 2px 0 rgba(0,0,0,.35); animation: bc-nudge 1.2s ease-in-out infinite; }
.bc-tab.selected .bc-tab-flag { display: none; }
@media (prefers-reduced-motion: reduce) { .bc-vote-call-arrow, .bc-tab-flag, .bc-vote.bump { animation: none; } }
@media (max-width: 639px) { .bc-tab-flag { display: none; } }

/* ---- Reviewing kids' ideas (superadmin) ---- */
.bc-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bc-admin-select {
  padding: 8px 34px 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  color: var(--bg-deep);
  background: var(--sun);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  cursor: pointer;
}
.bc-admin-select:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bc-admin-btn.bc-ok { background: var(--neon); }
.bc-admin-btn.bc-built { background: var(--violet); }
.bc-status { display: inline-block; margin-left: 8px; padding: 1px 10px; font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; vertical-align: middle; color: var(--bg-deep); background: var(--sun); border-radius: 999px; }
.bc-status.s-new { background: var(--hot); color: #fff; }
.bc-status.s-approved { background: var(--neon); }
.bc-status.s-rejected { background: #8d94c8; }
.bc-status.s-implemented { background: var(--violet); }
.bc-ideas li.bc-s-rejected { opacity: .62; }
.bc-from { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; opacity: .7; }
.bc-original { margin: 0 0 14px; padding: 10px 18px; background: color-mix(in srgb, var(--hot) 14%, rgba(10,12,45,.55)); border: 3px dashed var(--hot); border-radius: 26px 18px 24px 16px / 18px 24px 16px 26px; }
.bc-original > span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--hot); }
.bc-original p { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bc-field-status .modal-input { max-width: 320px; }
.bc-vote-static { cursor: default; }
.bc-vote-static:hover, .bc-vote-static:active { transform: none; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.bc-ideas .bc-idea-text { padding-left: 6px; }