/* ============================================================
   Mr. Miranti Dot Com — shared styles
   Palette: deep space void + arcade marquee gold + laser cyan
   ============================================================ */

/* Self-hosted so the site makes no outside requests. These are the same files
   Google serves; Orbitron, Press Start 2P and Inter are all SIL Open Font
   License, which permits this. Inter and Orbitron are variable fonts, so every
   weight below shares one file. A subset only downloads if a page actually
   uses characters in its range. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/orbitron-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/orbitron-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/orbitron-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/press-start-2p-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/press-start-2p-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --void: #0b0c1a;
  --void-soft: #12142a;
  --panel: #161a2e;
  --panel-border: #2a2f4c;
  --gold: #e8b923;
  --gold-dim: #a9861f;
  --cyan: #4cd3e0;
  --ink: #f2efe4;
  --muted: #8a8fa3;
  --danger: #e0524c;
  --done: #4ade80;      /* corrections ticked off */

  --font-display: 'Orbitron', sans-serif;
  --font-arcade: 'Press Start 2P', monospace;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Rapid clicking otherwise drags a text selection across whatever is nearby.
   Buttons exist to be clicked. */
button {
  -webkit-user-select: none;
  user-select: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------------- Nav ---------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 12, 26, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--panel-border);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.nav-brand {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: var(--gold);
}

.nav-brand span { color: var(--ink); }

.nav-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-links a:hover {
  color: var(--ink);
  text-decoration: none;
}

.nav-links a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------------- Nav groups (Classes / Tools) ---------------- */

.nav-group { position: relative; }

/* a <button> that has to pass for one of the nav links */
.nav-top {
  font-family: inherit;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0 4px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-top:hover { color: var(--ink); }
.nav-top.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-top::after { content: " \25BE"; font-size: 0.7em; opacity: 0.7; }

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 11rem;
  display: none;
  flex-direction: column;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: rgba(18, 20, 42, 0.98);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* open on hover, on keyboard focus, or when the button says so */
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-top[aria-expanded="true"] + .nav-menu { display: flex; }

.nav-menu a { white-space: nowrap; }

/* the gap between button and menu would otherwise drop the hover */
.nav-group::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px;
}

/* ---------------- Footer ---------------- */

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--panel-border);
  padding: 1.1rem 1.5rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.site-footer strong {
  color: var(--gold-dim);
  letter-spacing: 0.04em;
}

/* ---------------- Course page hero ---------------- */

.course-hero {
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
  border-bottom: 1px solid var(--panel-border);
  background:
    radial-gradient(ellipse at top, rgba(232, 185, 35, 0.08), transparent 60%);
}

.course-hero .eyebrow {
  font-family: var(--font-arcade);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}

.course-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  letter-spacing: 0.03em;
  margin: 0;
  color: var(--ink);
}

/* ---------------- Message board panels ---------------- */

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;   /* adjust to taste */
  margin: 0 auto;      /* centers it, adds space on left/right */
  padding: 0 1.5rem;   /* keeps it from touching the edge on smaller windows */
}


.board-panel {
  background: var(--panel);
  border: 1px dashed var(--panel-border);
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
}

.board-panel .panel-label {
  font-family: var(--font-arcade);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

.board-panel .panel-label::before { content: "[ "; color: var(--muted); }
.board-panel .panel-label::after { content: " ]"; color: var(--muted); }

.board-panel .placeholder-text {
  color: var(--muted);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0;
}

/* ---------------- Homepage hero ---------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}

#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(232, 185, 35, 0.35);
}

.hero .subtitle {
  font-family: var(--font-arcade);
  font-size: clamp(0.6rem, 1.6vw, 0.85rem);
  letter-spacing: 0.25em;
  color: var(--cyan);
  margin: 0.9rem 0 0;
  text-transform: uppercase;
}

.hero .tagline {
  color: var(--muted);
  max-width: 480px;
  margin: 1.2rem auto 0;
  font-size: 0.95rem;
}

/* ---------------- Arcade cabinet / game ---------------- */

.arcade {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: 1.4rem;
  background: var(--void-soft);
  border: 2px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(76, 211, 224, 0.06), 0 20px 60px rgba(0,0,0,0.5);
}

.arcade-marquee {
  font-family: var(--font-arcade);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--void);
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border-radius: 4px;
  padding: 0.55rem 0.8rem;
  text-align: center;
  margin-bottom: 1rem;
  animation: flicker 5s infinite;
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.85; }
  98% { opacity: 1; }
}

#gameCanvas {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  background: #05060f;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  image-rendering: pixelated;
}

.arcade-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.arcade-controls button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--void);
  background: var(--cyan);
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.arcade-controls button:hover { filter: brightness(1.08); }

/* ---------------- High score marquee (signature element) ---------------- */

.highscore {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 1.8rem auto 3rem;
  padding: 1.2rem 1.4rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}

.highscore h2 {
  font-family: var(--font-arcade);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-align: center;
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}

.highscore-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-arcade);
  font-size: 0.68rem;
}

.highscore-table th,
.highscore-table td {
  padding: 0.5rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
  color: var(--ink);
}

.highscore-table th {
  color: var(--muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6rem;
}

.highscore-table .rank { color: var(--cyan); width: 2.5rem; }
.highscore-table .you-row td { color: var(--gold); }

.highscore-note {
  margin-top: 0.8rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 600px) {
  .nav-inner { flex-direction: column; align-items: stretch; }
  /* Push the three nav items to the right edge, and drop BOTH menus from the
     nav bar's own right margin rather than from their button. Anchoring to the
     button is not enough: at 320px the Classes button ends at x=145 and an
     11rem menu still runs 31px off-screen. Anchored to the bar, the menus sit
     inside the page margin at any width. */
  .nav-links { gap: 1rem; justify-content: flex-end; }
  .nav-group { position: static; }
  .nav-group::after { content: none; }        /* hover bridge, pointless on touch */
  .nav-menu { left: auto; right: 1.5rem; top: 100%; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-marquee { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- Homework board (course pages) ---------------- */

.hw-board {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.hw-tonight-label {
  font-family: var(--font-arcade);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: left;
  margin: 0 0 0.7rem;
}

.hw-tonight-card {
  background: var(--panel);
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin: 0 0 1.8rem;
  box-shadow: 0 0 0 1px rgba(232, 185, 35, 0.08), 0 16px 40px rgba(0, 0, 0, 0.4);
}

.hw-tonight-date {
  font-family: var(--font-arcade);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.7rem;
}

.hw-tonight-text { font-size: 1.05rem; color: var(--ink); }

.hw-empty { color: var(--muted); font-style: italic; margin: 0; }

.hw-links { margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

.hw-links a {
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--void-soft);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  color: var(--cyan);
}

.hw-links a:hover { text-decoration: none; border-color: var(--cyan); }

/* toggle */
.hw-toggle {
  display: inline-flex;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 1.4rem;
}

.hw-toggle-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--void-soft);
  border: none;
  padding: 0.5rem 1.3rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.hw-toggle-btn + .hw-toggle-btn { border-left: 1px solid var(--panel-border); }
.hw-toggle-btn.is-active { background: var(--gold); color: var(--void); }

/* the inactive view must stay hidden — an explicit display: on these
   elements would otherwise override the [hidden] attribute */
.hw-agenda[hidden],
.hw-calendar[hidden] { display: none !important; }

/* agenda / list view */
.hw-agenda { display: flex; flex-direction: column; gap: 0.9rem; }

.hw-item {
  display: flex;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
}

.hw-item.is-today { border-color: var(--gold); }

.hw-item-date {
  flex: 0 0 5.5rem;
  font-family: var(--font-arcade);
  font-size: 0.55rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.15rem;
}

.hw-item-text { color: var(--ink); }

/* calendar view */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.cal-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-size: 1.1rem;
}

.cal-nav {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--cyan);
  background: var(--void-soft);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.cal-nav:hover { border-color: var(--cyan); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-dow-cell {
  text-align: center;
  font-family: var(--font-arcade);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.3rem 0;
}

.cal-cell {
  min-height: 4.5rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 0.35rem;
  overflow: hidden;
}

.cal-cell.is-blank { background: transparent; border-color: transparent; }
.cal-cell.is-today { border-color: var(--gold); }
.cal-cell.has-hw { background: var(--void-soft); }

.cal-day {
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.7rem;
  margin-bottom: 0.2rem;
}

.cal-cell.is-today .cal-day { color: var(--gold); }

.cal-item { color: var(--ink); font-size: 0.7rem; line-height: 1.35; margin-top: 0.2rem; }
.cal-item .hw-links { margin-top: 0.25rem; gap: 0.3rem; }
.cal-item .hw-links a { padding: 0.08rem 0.4rem; font-size: 0.66rem; }

@media (max-width: 620px) {
  .hw-calendar { overflow-x: auto; }
  .cal-grid { min-width: 460px; }
}

/* ---------------- Arcade page (three cabinets) ---------------- */

.arcade-hall {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1rem;
}

.arcade-cabinet + .arcade-cabinet {
  margin-top: 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--panel-border);
}

/* The homepage cabinet keeps its own #gameCanvas rule; this covers every
   screen on the arcade page, whatever its native size. */
.arcade-screen {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  background: #05060f;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  image-rendering: pixelated;
  touch-action: none;   /* swipes drive the game, not the page */
}

.arcade-screen.is-tall { max-width: 440px; }

.highscore-more {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.78rem;
}

/* ---------------- On-screen controls (touch devices) ---------------- */

/* Hidden on anything with a real pointer — keyboard is better there, and an
   empty row of arrows under every game just adds clutter. */
.touchpad { display: none; }

.touchpad-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.touchpad-btn {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--cyan);
  background: var(--void-soft);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  min-width: 4rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.touchpad-btn:active {
  background: var(--cyan);
  color: var(--void);
}

@media (hover: none) and (pointer: coarse) {
  .touchpad {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
  }
  .touchpad-dpad {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* Bolfol and Snek only take keyboard input while their own canvas is focused
   (that's how three cabinets share one page without fighting over the arrow
   keys). So the focus ring isn't decoration — it's the only thing telling a
   player which machine they're driving. Keep it visible. */
.arcade-screen:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- curriculum board: lessons, files, tools ---------- */
/* Restrained on purpose: every file chip reads the same, and only HOMEWORK
   and the tool links get an accent, because those are the two things a
   student is actually hunting for. */
.hw-lesson + .hw-lesson { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--panel-border); }
.hw-lesson-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.hw-unit {
  font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--void); background: var(--muted);
  padding: 0.1rem 0.4rem; border-radius: 3px; white-space: nowrap;
}
.hw-lesson-title { color: var(--ink); font-weight: 600; }

.hw-files { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.hw-file {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.22rem 0.6rem; border: 1px solid var(--panel-border);
  border-radius: 4px; background: var(--void-soft); color: var(--cyan);
  font-size: 0.78rem; text-decoration: none; line-height: 1.3;
}
.hw-file:hover { border-color: var(--cyan); }
.hw-file .f-name { color: var(--muted); font-size: 0.72rem; }
.hw-file.t-homework { color: var(--gold); border-color: var(--gold-dim); }
.hw-file.t-homework:hover { border-color: var(--gold); }
.hw-file.is-unposted { color: var(--muted); border-style: dashed; cursor: default; }

.hw-tool, .hw-khan {
  display: inline-flex; align-items: center; padding: 0.22rem 0.6rem;
  border-radius: 4px; font-size: 0.72rem; text-decoration: none;
  font-family: var(--font-display); letter-spacing: 0.04em;
}
.hw-tool { background: var(--gold); color: var(--void); }
.hw-tool:hover { background: var(--ink); }
.hw-khan { border: 1px dashed var(--panel-border); color: var(--muted); }
.hw-khan:hover { color: var(--cyan); border-color: var(--cyan); }

/* calendar cells: same data, compacted */
.cal-cell { overflow: hidden; }
.cal-lesson + .cal-lesson { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--panel-border); }
.cal-lesson-title {
  display: block; color: var(--ink); font-size: 0.68rem; line-height: 1.25;
  margin-bottom: 0.2rem; font-weight: 600;
}
.cal-chips { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.cal-chip {
  padding: 0.05rem 0.3rem; border: 1px solid var(--panel-border); border-radius: 3px;
  background: var(--void); color: var(--cyan); font-size: 0.6rem;
  text-decoration: none; line-height: 1.4; white-space: nowrap;
}
.cal-chip:hover { border-color: var(--cyan); }
.cal-chip .f-name { display: none; }        /* titles live in the list view */
.cal-chip.t-homework { color: var(--gold); border-color: var(--gold-dim); }
.cal-chip.is-unposted { color: var(--muted); border-style: dashed; }
.cal-chips .hw-tool, .cal-chips .hw-khan { padding: 0.05rem 0.3rem; font-size: 0.58rem; }

@media (max-width: 700px) {
  .cal-lesson-title { font-size: 0.6rem; }
  .cal-chip { font-size: 0.54rem; }
}
.cal-chip.show-name { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.cal-chip.show-name .f-name { display: block; color: var(--muted); font-size: 0.55rem; }
/* assessment markers: a date reference, never a link */
.hw-file.is-marker, .cal-chip.is-marker {
  color: var(--danger); border-color: var(--danger); background: transparent;
  cursor: default; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.68rem;
}
.cal-chip.is-marker { font-size: 0.55rem; }

/* Quiz corrections: the quiz, struck through and ticked off — the same
   annotation he makes on the paper. Deliberately not a link; there is no
   handout, the day itself is the record. */
.hw-file.is-corrections, .cal-chip.is-corrections {
  color: var(--done); border-color: var(--done); background: transparent;
  cursor: default; text-decoration: line-through;
}
.hw-file.is-corrections::after, .cal-chip.is-corrections::after {
  content: '\2713'; margin-left: 0.4em;
  display: inline-block;          /* keeps the tick out of the strikethrough */
  text-decoration: none;
}

/* A chip forced to show its filename can be long; let it wrap inside the cell
   rather than run under the next day. .cal-cell is overflow:hidden, so without
   this the name is silently clipped mid-word. */
.cal-chip.show-name { white-space: normal; max-width: 100%; }
.cal-chip.show-name .f-name { white-space: normal; overflow-wrap: anywhere; }

/* Placeholder for work that happened but is not posted. Muted and dashed so it
   reads as "nothing to click here", never as a broken link. */
.hw-file.is-unavailable, .cal-chip.is-unavailable {
  color: var(--muted); border-style: dashed; border-color: var(--panel-border);
  background: transparent; cursor: default; font-style: italic;
}

/* "not available" note on recorded-but-unposted material */
.hw-file.is-unposted, .cal-chip.is-unposted {
  color: var(--muted); border-color: var(--panel-border);
  border-style: dashed; cursor: default; font-style: italic;
}
.f-note { margin-left: 0.4em; font-size: 0.85em; opacity: 0.8; }
.cal-chip.is-unposted { display: inline-flex; flex-direction: column; align-items: flex-start; }
.cal-chip .f-note { margin-left: 0; font-size: 0.9em; }

/* Eyeguy (eyeguy.html) plays over the starfield: see-through cabinet, clear canvas. */
.hero .arcade.arcade-clear { background: rgba(18, 20, 42, 0.55); }
#eyeguyCanvas { background: transparent; }