/* ============================================================
   PROGENY ONLINE — pixel-perfect retro stylesheet
   Authentic palette: cream background, deep blue, red, yellow.
   Designed to evoke the classic 1988-1999 Prodigy Online UI.
   ============================================================ */

/* ---------- CSS Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }

/* ---------- Webfonts (self-hosted; no CDN load) ----------
   Path A old-browser support: dropped the Google Fonts @import, all
   four families now served from /static/fonts/.  Result: zero
   outbound HTTPS to fonts.googleapis.com / fonts.gstatic.com on
   page load, which (a) lets TenFourFox / older browsers that can't
   handshake gstatic's modern TLS still see the right typeface, and
   (b) lets the global CSP drop those host allowlists.
   Rockwell isn't a free-license font; Roboto Slab is the substitute
   already used as the masthead face. */
@font-face {
  font-family: 'VT323';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/VT323-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/IBMPlexMono-Bold.woff2') format('woff2');
}
/* Roboto + Roboto Slab are variable-font woff2 files (Google Fonts v51
   onward); the same physical file serves every weight, so both
   @font-face declarations point at the single .woff2 with their
   weight axis position set in `font-weight`.  Older browsers that
   don't support variable fonts fall back to faux-bold rendering. */
@font-face {
  font-family: 'Roboto';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/Roboto.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/Roboto.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/RobotoSlab.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/RobotoSlab.woff2') format('woff2');
}

/* ---------- Palette (CSS custom props) ----------
   Research-confirmed classic Prodigy palette: EGA-era deep blue #0033A0,
   bright red #CC0000, cream "paper" background #E8E4D4. */
:root {
  --p-bg:            #E8E4D4;  /* cream paper (EGA light gray) */
  --p-bg-content:    #F0EEE4;  /* slightly lighter content bg */
  --p-bg-alt:        #D8D2B8;
  --p-blue:          #0033A0;  /* Prodigy deep royal blue */
  --p-blue-dark:     #001F6B;
  --p-blue-light:    #2555C4;
  --p-red:           #CC0000;  /* Prodigy star red */
  --p-red-dark:      #990000;
  --p-yellow:        #FDFC4F;
  --p-yellow-bg:     #FEFDAB;
  --p-orange:        #FF6600;
  --p-green:         #00AA00;
  --p-ink:           #000000;
  --p-muted:         #666;
  --p-gray-rule:     #808080;
  --p-rule:          #0033A0;
  --p-nav-bg:        #0033A0;
  --p-nav-fg:        #FFFFFF;
  --p-nav-active:    #FFD835;
  --p-ad-bg:         #FFFFFF;
  --p-ad-border:     #0033A0;
  --p-ok:            #00AA00;
  --p-err:           #CC0000;
  --p-shadow:        rgba(0,0,0,0.25);

  --p-font-serif:    'Roboto Slab', 'Rockwell', 'Serifa', 'Cambria', Georgia, 'Times New Roman', serif;
  --p-font-wordmark: 'Roboto Slab', 'Rockwell', 'Serifa', 'Cambria', Georgia, 'Times New Roman', serif;
  --p-font-sans:     'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --p-font-mono:     'IBM Plex Mono', 'VT323', 'Courier New', Menlo, Monaco, monospace;
  --p-font-screen:   'VT323', 'IBM Plex Mono', 'Courier New', monospace;
}

body {
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--p-font-sans);
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  image-rendering: pixelated;
}

/* ---------- Layout frame ---------- */
.p-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 960px;  /* evokes a 640->scaled display */
  margin: 0 auto;
  flex: 1 0 auto;
  background: var(--p-bg);
  border-left: 2px solid var(--p-blue);
  border-right: 2px solid var(--p-blue);
  min-height: 100vh;
}

/* ---------- Top banner / logo strip ---------- */
.p-header {
  background: var(--prodigy-yellow);
  border-bottom: 2px solid #000;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #000;
}
.p-logo-star {
  display: inline-block;
  width: 36px;
  height: 36px;
  color: var(--prodigy-star-red);
  flex-shrink: 0;
}
.p-logo-star img {
  width: 100%;
  height: 100%;
  display: block;
}
.p-logo-img {
  display: block;
  height: 44px;
  width: auto;
  max-height: 44px;
}
.p-logo .word {
  font-family: 'Roboto Slab', 'Rockwell', 'Serifa', Georgia, serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 2px;
  color: #000;
}
.p-logo .v { color: var(--prodigy-star-red); font-size: 11px; margin-left: 2px; }
.p-header .p-spacer { flex: 1; }
.p-header .p-welcome {
  font-family: var(--p-font-serif);
  color: #000;
  font-size: 13px;
}
.p-header .p-welcome b { color: var(--prodigy-star-red); text-transform: uppercase; }

/* ---------- Navigation bar (MENU | JUMP | etc) ---------- */
.p-nav {
  display: flex;
  align-items: stretch;
  background: var(--p-nav-bg);
  color: var(--p-nav-fg);
  border-top: 1px solid var(--p-blue-dark);
  border-bottom: 1px solid var(--p-blue-dark);
  font-family: var(--p-font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.p-nav a, .p-nav button, .p-nav .p-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  color: var(--p-nav-fg);
  text-decoration: none;
  border-right: 1px solid var(--p-blue-dark);
  background: var(--p-nav-bg);
  font-weight: 700;
  cursor: pointer;
}
.p-nav a:hover { background: var(--p-blue-light); }
.p-nav a.active { background: var(--p-nav-active); color: var(--p-blue); }
.p-nav .p-spacer { flex: 1; }
.p-nav a.nav-sysop {
  background: #CC0000;
  color: #FFFFFF;
}
.p-nav a.nav-sysop:hover { background: #990000; color: #FFFFFF; }
.p-nav a.nav-exit {
  background: #7A0000;
  color: #FFFFFF;
}
.p-nav a.nav-exit:hover { background: #4a0000; color: #FFFFFF; }

/* JUMP input in the navbar */
.p-jumpbox {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border-left: 1px solid var(--p-blue-dark);
  border-right: 1px solid var(--p-blue-dark);
  margin-left: auto;
}
.p-jumpbox label {
  background: var(--p-yellow);
  color: var(--p-blue-dark);
  font-weight: 900;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}
.p-jumpbox input {
  border: none;
  background: #FFFFFF;
  padding: 4px 8px;
  font-family: var(--p-font-mono);
  font-size: 12px;
  color: var(--p-ink);
  outline: none;
  min-width: 200px;
}
.p-jumpbox button {
  border: none;
  background: var(--p-red);
  color: #FFFFFF;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
}
.p-jumpbox button:hover { background: var(--p-red-dark); }

/* ---------- Content area ---------- */
.p-main {
  flex: 1 0 auto;
  padding: 14px 16px 24px;  /* ad bar removed 2026-04-16; reduced bottom pad */
  min-height: 400px;
  position: relative;
}

/* ---------- Page titles ---------- */
.p-title {
  font-family: var(--p-font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--p-red);
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--p-blue);
  padding-bottom: 4px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.p-title .p-jumpword {
  font-size: 12px;
  color: var(--p-blue);
  font-family: var(--p-font-mono);
  letter-spacing: 1px;
}
.p-subtitle {
  font-family: var(--p-font-serif);
  color: var(--p-blue);
  font-size: 18px;
  font-weight: 700;
  margin: 12px 0 6px;
  border-bottom: 1px dotted var(--p-blue);
  padding-bottom: 2px;
}
.p-section {
  margin-bottom: 18px;
}
.p-rule {
  border: none;
  border-top: 2px solid var(--p-blue);
  margin: 12px 0;
}

/* ---------- Cards, inset boxes (NAPLPS feel) ---------- */
.p-card {
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  box-shadow: 2px 2px 0 var(--p-shadow);
  padding: 12px;
  margin-bottom: 12px;
}
.p-card h3 {
  color: var(--p-red);
  font-family: var(--p-font-serif);
  font-size: 16px;
  border-bottom: 1px solid var(--p-blue);
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.p-card.highlight { background: var(--p-yellow-bg); }
.p-card.blue      { background: #E8EEFB; }
.p-card.green     { background: #E8F4E3; }

/* Clickable stat cards on the sysop dashboard */
a.stat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
a.stat-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--p-shadow);
  outline: 2px solid var(--p-blue);
  outline-offset: -2px;
}
a.stat-card:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--p-shadow);
}
.stat-num {
  font-size: 32px;
  font-family: var(--p-font-serif);
  color: var(--p-red);
  margin: 4px 0;
  line-height: 1;
}

/* ---------- Classic colored-tile grid (main menu) ----------
   Replicates the "WHAT IS THE PRODIGY SERVICE?" screen:
   a navy header strip with page title + subprompt, followed by a
   4x3 grid of numbered tiles with distinct colored borders. */
.p-mainbanner {
  background: var(--p-blue);
  color: #FFFFFF;
  padding: 8px 14px;
  margin: -14px -16px 14px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-bottom: 3px solid var(--prodigy-yellow);
}
.p-mainbanner-title {
  font-family: var(--p-font-serif);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 3px;
  color: var(--prodigy-yellow);
  text-transform: uppercase;
}
.p-mainbanner-prompt {
  font-family: var(--p-font-serif);
  font-size: 14px;
  color: #FFFFFF;
  font-style: italic;
}

.p-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}
/* Path A old-browser fallback: any browser without CSS Grid (iCab,
   Classilla, IE Mac 5, Camino 1.x) drops to flexbox-row-with-wrap.
   The `> *` rule sets a hard 23%-of-row width so 4 tiles per row
   come close to the grid layout.  Tiles already have
   display:flex internally; this only changes the OUTER container. */
@supports not (display: grid) {
  .p-tile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .p-tile-grid > * { flex: 1 1 23%; min-width: 140px; }
}
.p-tile2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--p-bg-content);
  color: #000;
  text-decoration: none;
  padding: 10px 8px 8px;
  border: 4px solid #000;
  min-height: 130px;
  position: relative;
  transition: transform 0.05s;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  cursor: pointer;
}
.p-tile2:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.35); }
.p-tile2:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.2); }

.p-tile2-num {
  position: absolute;
  top: 3px;
  left: 5px;
  font-family: var(--p-font-serif);
  font-weight: 900;
  font-size: 14px;
  color: #000;
  background: #FFF;
  padding: 0 5px;
  border: 2px solid #000;
  line-height: 1;
  min-width: 16px;
  text-align: center;
}
.p-tile2-icon {
  font-size: 38px;
  margin-top: 16px;
  line-height: 1;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.25));
}
.p-tile2-title {
  font-family: var(--p-font-serif);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1px;
  color: #000;
  margin-top: 8px;
  text-transform: uppercase;
}
.p-tile2-sub {
  font-family: var(--p-font-sans);
  font-size: 10px;
  color: #333;
  margin-top: 2px;
  text-align: center;
  line-height: 1.2;
}

/* Colored tile variants — thick colored border band + matching header stripe */
.p-tile-red    { border-color: var(--prodigy-tile-red);    background: #FFF2F2; }
.p-tile-pink   { border-color: var(--prodigy-tile-pink);   background: #FFF2F9; }
.p-tile-green  { border-color: var(--prodigy-tile-green);  background: #F2FFF6; }
.p-tile-cyan   { border-color: var(--prodigy-tile-cyan);   background: #F2FCFF; }
.p-tile-yellow { border-color: var(--prodigy-tile-yellow); background: #FFFCEB; }
.p-tile-blue   { border-color: var(--prodigy-tile-blue);   background: #F2F5FF; }
.p-tile-orange { border-color: var(--prodigy-tile-orange); background: #FFF7EB; }
.p-tile-purple { border-color: var(--prodigy-tile-purple); background: #F8F2FF; }

/* legacy p-grid (still used elsewhere) */
.p-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 12px 0;
}
@supports not (display: grid) {
  .p-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .p-grid > * { flex: 1 1 0; min-width: 200px; }
  /* Most inline grid-template-columns overrides on .p-grid set
     2-3 column layouts with mixed fr/fixed widths.  Flexbox-wrap
     with min-width is a graceful degradation - columns just become
     a stacked flow on narrow viewports rather than overflowing. */
}
.p-tile {
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  box-shadow: 2px 2px 0 var(--p-shadow);
  padding: 10px 8px 8px;
  text-align: center;
  cursor: pointer;
  color: var(--p-ink);
  text-decoration: none;
  transition: transform 0.05s;
  position: relative;
}
.p-tile:hover { background: var(--p-yellow-bg); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--p-shadow); }
.p-tile:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--p-shadow); }
.p-tile .p-tile-title {
  font-family: var(--p-font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--p-red);
  letter-spacing: 1px;
}
.p-tile .p-tile-sub {
  font-size: 11px;
  color: var(--p-blue);
  margin-top: 4px;
  min-height: 26px;
}
.p-tile .p-tile-jump {
  font-family: var(--p-font-mono);
  font-size: 10px;
  color: var(--p-muted);
  margin-top: 4px;
  border-top: 1px dotted var(--p-blue);
  padding-top: 2px;
}

/* Colored tile category accents */
.p-tile.cat-red    .p-tile-title { color: var(--p-red); }
.p-tile.cat-blue   .p-tile-title { color: var(--p-blue); }
.p-tile.cat-green  .p-tile-title { color: var(--p-green); }

/* ---------- Tables ---------- */
.p-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  font-size: 13px;
}
.p-table th {
  background: var(--p-blue);
  color: #FFFFFF;
  padding: 5px 8px;
  text-align: left;
  font-family: var(--p-font-sans);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}
.p-table td {
  padding: 5px 8px;
  border-top: 1px solid var(--p-bg-alt);
}
.p-table tr:nth-child(even) td { background: #F7F3E3; }
.p-table tr:hover td { background: var(--p-yellow-bg); }
.p-table .num, .p-table .right { text-align: right; font-variant-numeric: tabular-nums; }
.p-table .pos { color: var(--p-green); font-weight: 700; }
.p-table .neg { color: var(--p-red); font-weight: 700; }
.p-table.compact th, .p-table.compact td { padding: 3px 6px; }

/* ---------- Buttons ---------- *
   Classic Prodigy button language:
   - Default = deep blue fill, white text
   - .red    = Prodigy red with white text (high contrast, no red-on-red)
   - .yellow = gold with deep blue text
   - .plain  = white pill with deep blue text
*/
.p-btn {
  display: inline-block;
  background: var(--p-blue);
  color: #FFFFFF;
  border: 2px solid var(--p-blue-dark);
  box-shadow: 2px 2px 0 var(--p-shadow);
  padding: 4px 12px;
  font-family: var(--p-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* Strong contrast, resistant to inherited colors */
  text-shadow: none;
}
.p-btn:visited { color: #FFFFFF; }
.p-btn:hover  { background: var(--p-blue-light); color: #FFFFFF; }
.p-btn:active { box-shadow: 1px 1px 0 var(--p-shadow); transform: translate(1px, 1px); }

.p-btn.red,
.p-btn.red:visited {
  background: #CC0000;
  border-color: #7A0000;
  color: #FFFFFF !important;
}
.p-btn.red:hover   { background: #990000; color: #FFFFFF !important; }
.p-btn.red:active  { background: #7A0000; }

.p-btn.yellow,
.p-btn.yellow:visited {
  background: #FFD835;
  color: #0033A0 !important;
  border-color: #C9A210;
}
.p-btn.yellow:hover { background: #F4C91B; color: #0033A0 !important; }

.p-btn.plain,
.p-btn.plain:visited {
  background: #FFFFFF;
  color: #0033A0 !important;
  border-color: #0033A0;
}
.p-btn.plain:hover { background: #E8EEFB; color: #0033A0 !important; }

.p-btn.small  { padding: 2px 8px; font-size: 10px; }
.p-btn.lg     { padding: 8px 24px; font-size: 14px; }

/* Dedicated green for APPROVE / success buttons */
.p-btn.green,
.p-btn.green:visited {
  background: #007A1F;
  color: #FFFFFF !important;
  border-color: #004A10;
}
.p-btn.green:hover { background: #005A17; color: #FFFFFF !important; }

/* ---------- Forms ---------- */
.p-form label {
  display: block;
  font-family: var(--p-font-serif);
  color: var(--p-blue);
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.p-form input[type="text"],
.p-form input[type="email"],
.p-form input[type="password"],
.p-form input[type="number"],
.p-form select,
.p-form textarea {
  width: 100%;
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  padding: 5px 7px;
  font-family: var(--p-font-mono);
  font-size: 13px;
  color: var(--p-ink);
}
.p-form textarea { min-height: 120px; font-family: var(--p-font-sans); }
.p-form .p-form-row { display: flex; gap: 10px; align-items: center; }
.p-form .p-form-row > * { flex: 1; }
.p-form .p-form-actions { margin-top: 14px; display: flex; gap: 8px; }

/* ---------- Flash messages ---------- */
.p-flash {
  border: 2px solid var(--p-blue);
  background: var(--p-yellow-bg);
  padding: 6px 10px;
  margin: 10px 0;
  font-weight: 700;
  font-family: var(--p-font-sans);
}
.p-flash.err { background: #FEE; border-color: var(--p-red); color: var(--p-red-dark); }
.p-flash.ok  { background: #EEFEE8; border-color: var(--p-green); color: var(--p-green); }
.p-flash.warn { background: var(--p-yellow-bg); border-color: #D2A622; color: #6b4f0f; }

/* ---------- Breadcrumbs ---------- */
.p-crumb {
  font-family: var(--p-font-mono);
  font-size: 11px;
  color: var(--p-blue);
  margin-bottom: 6px;
}
.p-crumb a { color: var(--p-blue); text-decoration: underline; }
.p-crumb .sep { color: var(--p-muted); padding: 0 3px; }

/* ---------- Lists ---------- */
.p-list {
  list-style: none;
  padding: 0;
}
.p-list li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--p-blue);
}
.p-list li a { color: var(--p-blue); text-decoration: none; font-weight: 700; }
.p-list li a:hover { text-decoration: underline; color: var(--p-red); }
.p-list li .meta { color: var(--p-muted); font-size: 11px; }

/* ---------- News article ---------- */
.p-article {
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  padding: 12px;
}
.p-article h1 { font-family: var(--p-font-serif); color: var(--p-red); font-size: 22px; margin-bottom: 4px; }
.p-article .byline { color: var(--p-muted); font-size: 12px; margin-bottom: 10px; font-style: italic; }
.p-article p { margin: 8px 0; }

/* ---------- BBS posts ---------- */
.p-post {
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  margin-bottom: 12px;
}
.p-post-head {
  background: var(--p-blue);
  color: #FFFFFF;
  padding: 4px 8px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--p-font-sans);
}
.p-post-head .author {
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: underline;
}
.p-post-head .author:hover  { color: var(--p-yellow); }
.p-post-head .author:visited { color: #FFFFFF; }
.p-post-head .red { color: var(--p-yellow); }   /* SYSOP badge — red -> yellow on blue */
.p-post-head .time { color: var(--p-yellow); }
.p-post-body { padding: 10px 12px; white-space: pre-wrap; font-size: 13px; }

/* ---------- Bottom ad banner (the famous Prodigy ad) ---------- */
.p-adbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--p-ad-bg);
  border-top: 3px double var(--p-ad-border);
  height: 95px;
  display: flex;
  align-items: stretch;
  z-index: 100;
  box-shadow: 0 -3px 6px rgba(0,0,0,0.15);
}
.p-adbar .p-adbar-inner {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: stretch;
}
.p-adbar .p-ad-left {
  background: var(--p-blue);
  color: #FFFFFF;
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  font-family: var(--p-font-serif);
  border-right: 2px solid var(--p-blue-dark);
  text-decoration: none;
}
.p-adbar .p-ad-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  flex: 1;
  padding: 10px 18px;
}
.p-adbar .p-ad-main:hover { text-decoration: underline; }
/* Close X button on the far right of the bar */
.p-ad-close {
  display: flex;
  align-items: stretch;
  margin: 0;
  background: transparent;
}
.p-ad-close button {
  background: rgba(0,0,0,0.08);
  color: inherit;
  border: none;
  border-left: 1px solid rgba(0,0,0,0.2);
  padding: 0 12px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.p-ad-close button:hover { background: rgba(0,0,0,0.22); }
/* The little tab shown when the ad bar is closed */
.adbar-reopen {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 99;
}
.adbar-reopen button {
  background: var(--p-yellow);
  color: var(--p-blue-dark);
  border: 2px solid var(--p-blue-dark);
  border-right: none;
  border-bottom: none;
  padding: 5px 14px;
  font-family: var(--p-font-sans);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  border-top-left-radius: 4px;
}
.adbar-reopen button:hover { background: #FFE85A; }
.p-adbar .p-ad-left .p-adgraphic {
  color: var(--prodigy-yellow);
  line-height: 0;
}
.p-adbar .p-ad-left .p-adgraphic img {
  display: block;
  margin: 0 auto;
}
.p-adbar .p-ad-left .p-adbrand {
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 3px;
  color: #FFFFFF;
  font-weight: 700;
}
.p-adbar .p-ad-headline {
  font-family: var(--p-font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
}
.p-adbar .p-ad-subline {
  font-family: var(--p-font-sans);
  font-size: 13px;
  margin-top: 5px;
  line-height: 1.2;
}
.p-adbar .p-ad-sponsor {
  font-family: var(--p-font-mono);
  font-size: 10px;
  color: var(--p-muted);
  margin-top: 5px;
  letter-spacing: 1px;
}
.p-adbar .p-ad-jump {
  background: var(--p-yellow);
  color: var(--p-blue-dark);
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--p-font-serif);
  border-left: 2px solid var(--p-yellow);
  cursor: pointer;
  text-decoration: none;
  min-width: 110px;
  text-align: center;
}
.p-adbar .p-ad-jump:hover { background: #F0C03A; }
.p-adbar .p-ad-jump .p-ad-jump-lbl {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--p-blue-dark);
  font-weight: 700;
}
.p-adbar .p-ad-jump .p-ad-jump-word {
  font-family: var(--p-font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--p-red);
  margin-top: 2px;
}

/* ============================================================
   Classic Prodigy SIGN-ON screen
   Matches the 1988-era visual: yellow banner top, red wordmark,
   gray input zone, "Type your ID and press [RETURN]" instruction.
   ============================================================ */

:root {
  --prodigy-yellow:   #FDFC4F;
  --prodigy-yellow-2: #E5E43A;
  --prodigy-gray:     #BEBEBE;
  --prodigy-gray-2:   #A8A8A8;
  --prodigy-gray-3:   #888888;
  --prodigy-cream:    #E8E4D4;
  --prodigy-star-red: #D60000;
  --prodigy-tile-red:    #D60000;
  --prodigy-tile-pink:   #E94EB0;
  --prodigy-tile-green:  #00A651;
  --prodigy-tile-cyan:   #22C3D6;
  --prodigy-tile-yellow: #FDFC4F;
  --prodigy-tile-blue:   #0033A0;
  --prodigy-tile-orange: #F58220;
  --prodigy-tile-purple: #7E3A93;
}

/* ============================================================
   NAPLPS-style CRT sign-on screen
   Scan-line blue background, skewed yellow + gray parallelograms,
   brush-stroke star, black terminal input fields, corner buttons.
   ============================================================ */

:root {
  --crt-blue:        #2C4BD1;
  --crt-blue-dark:   #1F36A6;
  --crt-scanline:    rgba(0, 0, 0, 0.22);
  --panel-yellow:    #FDFC4F;
  --panel-yellow-2:  #E5E43A;
  --panel-gray:      #ADADAD;
  --panel-gray-2:    #8A8A8A;
  --panel-gray-3:    #6B6B6B;
  --terminal-black:  #000000;
  --terminal-amber:  #FFE060;
  --prodigy-ink:     #0C1E5A;
  --prodigy-red-mk:  #BF0000;
}

body.signon-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--crt-blue);
  /* Horizontal CRT scanlines (thicker/wider to match the reference screenshot). */
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0)     0px,
      rgba(0,0,0,0)     6px,
      rgba(0,0,0,0.35)  6px,
      rgba(0,0,0,0.35) 10px
    );
  color: #000;
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

.signon-screen {
  width: 100%;
  max-width: 820px;
  margin: 24px auto;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 2px #000, 6px 6px 0 rgba(0,0,0,0.35);
}

/* ---------- Top banner (image or SVG) ----------
   The banner fills the full panel width.  No clip-path or slant on
   the wrapper — the image carries its own visual slant.  Gray login
   panel below sits flush beneath with zero gap. */
.signon-bannerwrap {
  width: 100%;
  line-height: 0;
  background: #2C4BD1;   /* matches the banner's scanline blue so
                            any stray pixel-row at the edge looks native */
  display: block;
}
.signon-banner-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Legacy yellow parallelogram class (no longer used by signon) */
.signon-yellow {
  position: relative;
  background: var(--panel-yellow);
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  padding: 22px 70px 30px 90px;
  margin: 0;
  z-index: 3;
  display: none;  /* deprecated */
}
.signon-yellow-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.signon-star {
  width: 96px;
  height: 96px;
  /* Deep royal blue, matching the reference wordmark ink. */
  color: #0B2AA6;
  margin-bottom: 2px;
}
.signon-star img { width: 100%; height: 100%; display: block; }

.signon-wordmark {
  font-family: 'Roboto Slab', 'Rockwell', 'Serifa', Georgia, serif;
  font-weight: 900;
  line-height: 1;
  color: #000;
  margin-top: 2px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.signon-wordmark .wm-main {
  font-size: 64px;
  letter-spacing: 1px;
}
.signon-wordmark .wm-tm {
  font-size: 14px;
  vertical-align: super;
  color: #000;
  font-weight: 700;
}
.signon-wordmark .wm-online {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #000;
  margin-left: 6px;
  transform: translateY(-6px);
}
.signon-subtitle {
  margin-top: 2px;
  font-family: 'Roboto Slab', 'Rockwell', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #000;
  border-top: 3px solid #000;
  padding-top: 2px;
  display: inline-block;
}

/* ---------- Gray input panel ----------
   Full-width rectangle flush under the banner.  No clip-path so the
   whole content area (instructions + ID/PASSWORD + buttons) is always
   visible regardless of viewport width. */
.signon-gray {
  position: relative;
  background: var(--panel-gray);
  padding: 22px 40px 26px;
  margin: 0;
  color: #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.signon-gray-inner {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

.signon-instruction {
  text-align: center;
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.signon-instruction b { font-weight: 700; color: #FFF; }

.signon-form { margin-top: 4px; }
.signon-fields {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 14px;
  margin-left: 30px;
}
.signon-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.signon-field-label {
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 700;
  font-size: 22px;
  color: #FFFFFF;
  letter-spacing: 1px;
  /* Fixed width so labels of different lengths (ID, PASSWORD, E-MAIL, ZIP…)
     line up their inputs vertically on the enrollment page. */
  min-width: 140px;
  text-align: right;
  display: inline-block;
}
.signon-fields.stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}
.signon-fields.stacked .signon-field {
  justify-content: flex-start;
}
.signon-fields.stacked .signon-field input {
  width: 220px;
}
.signon-field input {
  background: var(--terminal-black);
  color: var(--terminal-amber);
  border: 2px inset #555;
  padding: 3px 8px;
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 18px;
  letter-spacing: 2px;
  width: 180px;
  outline: none;
  caret-color: var(--terminal-amber);
}
.signon-field input:focus {
  box-shadow: 0 0 0 2px var(--prodigy-red-mk);
}

.signon-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  margin-top: 6px;
  margin-left: 30px;
}
.signon-btn-primary,
.signon-btn-secondary {
  display: inline-block;
  background: var(--panel-gray-2);
  color: #000;
  font-family: 'VT323', 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 16px;
  border: 3px outset #888;
  text-decoration: none;
  cursor: pointer;
}
.signon-btn-primary:hover,
.signon-btn-secondary:hover { background: #bbb; }
.signon-btn-primary:active,
.signon-btn-secondary:active { border-style: inset; }
.signon-btn-primary { /* Primary keeps same gray; reference shows no red button */ }

.signon-flash {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--prodigy-red-mk);
  color: var(--prodigy-red-mk);
  padding: 6px 10px;
  margin: 0 0 14px;
  font-family: var(--p-font-sans);
  font-weight: 700;
  text-align: center;
}
.signon-flash.ok   { color: #0a6b0a; border-color: #0a6b0a; }
.signon-flash.warn { color: #6b5500; border-color: #6b5500; background: rgba(255,240,180,0.85); }

/* ---------- Yellow strip with version stamp ----------
   Flat, full-width. */
.signon-strip {
  position: relative;
  background: var(--panel-yellow);
  height: 12px;
  margin: 0;
  border-bottom: 1px solid #000;
}
.signon-version {
  position: absolute;
  right: 12px;
  top: -26px;
  font-family: 'VT323', 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: #000;
  letter-spacing: 3px;
  z-index: 5;
  background: var(--panel-gray);
  padding: 0 6px;
}

/* ---------- Black footer band ---------- */
.signon-blackband {
  background: #000000;
  color: #FFFFFF;
  padding: 10px 16px 12px;
  font-family: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.35;
  margin: 0;
}
.signon-creditline { text-align: left; }

/* ---------- Bottom gray bar + HELP | EXIT ---------- */
.signon-bottombar {
  background: var(--panel-gray);
  display: flex;
  align-items: stretch;
  height: 28px;
  border-top: 2px solid #000;
}
.signon-bottombar-spacer { flex: 1; }
.signon-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 0 12px;
  background: var(--panel-yellow);
  color: #000;
  font-family: 'VT323', 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
  border-left: 2px solid #000;
}
.signon-bottom-btn:hover { background: #FFE85A; }

/* legacy classes kept for backward compatibility */
.signon-footer, .signon-footer-line, .signon-corner, .signon-corner-btn { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .signon-screen { margin: 8px; }
  .signon-wordmark .wm-main { font-size: 40px; }
  .signon-wordmark .wm-online { font-size: 18px; }
  .signon-star { width: 64px; height: 64px; }
  .signon-subtitle { font-size: 16px; }
  .signon-yellow { padding: 18px 24px 22px; clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); }
  .signon-gray   { padding: 18px 24px; clip-path: polygon(5% 0, 95% 0, 88% 100%, 12% 100%); }
  .signon-instruction { font-size: 17px; }
  .signon-field input { width: 140px; font-size: 16px; }
  .signon-fields { margin-left: 0; gap: 14px; justify-content: center; }
  .signon-actions { margin-left: 0; justify-content: center; }
  .signon-blackband { font-size: 13px; }
  .signon-bottom-btn { font-size: 14px; min-width: 48px; }
}

.prodigy-signon {
  /* legacy class retained for signoff/pending templates that still reference it */
  width: 100%; max-width: 760px; display: flex; flex-direction: column;
  background: var(--panel-gray); border: 2px solid #000; margin: 20px;
}

/* ---- Yellow banner ---- */
.prodigy-signon-banner {
  background: var(--prodigy-yellow);
  padding: 22px 30px 28px;
  border-bottom: 2px solid #000;
  position: relative;
}
.prodigy-banner-logo {
  display: flex;
  align-items: center;
  gap: 18px;
}
.prodigy-star-big {
  display: inline-block;
  width: 86px;
  height: 86px;
  color: var(--prodigy-star-red);
}
.prodigy-star-big img {
  width: 100%;
  height: 100%;
  display: block;
}
.prodigy-wordmark {
  font-family: 'Roboto Slab', 'Rockwell', 'Serifa', Georgia, serif;
  font-weight: 900;
  font-size: 68px;
  letter-spacing: 3px;
  color: #000;
  line-height: 0.95;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
.prodigy-wordmark .reg {
  font-size: 20px;
  font-weight: 400;
  vertical-align: super;
  margin-left: 2px;
}
.prodigy-subbanner {
  font-family: 'Roboto Slab', 'Rockwell', Georgia, serif;
  color: #000;
  font-size: 18px;
  letter-spacing: 2px;
  margin-top: 6px;
  padding-left: 104px;
  font-style: italic;
}

/* ---- Gray input section ---- */
.prodigy-signon-gray {
  background: var(--prodigy-gray);
  padding: 24px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
}

.prodigy-signon-gray .p-flash {
  background: #FFE0E0;
  border: 2px solid var(--p-red-dark);
  color: var(--p-red-dark);
  padding: 8px 12px;
  font-family: var(--p-font-sans);
  margin-bottom: 16px;
}
.prodigy-signon-gray .p-flash.ok   { background: #E6F7E0; border-color: var(--p-green); color: #0d5a0d; }
.prodigy-signon-gray .p-flash.warn { background: #FFF4C2; border-color: #8a6d00; color: #3d2f00; }

.prodigy-signon-panel {
  background: var(--prodigy-gray);
  padding: 12px 0;
}

.prodigy-instruction {
  font-family: var(--p-font-serif);
  font-size: 16px;
  color: #000;
  line-height: 1.5;
  margin-bottom: 18px;
}
.prodigy-instruction b { font-weight: 900; }

.prodigy-signon-form { margin-top: 8px; }
.prodigy-signon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.prodigy-signon-row label {
  width: 90px;
  font-family: var(--p-font-serif);
  font-weight: 900;
  font-size: 15px;
  color: #000;
  letter-spacing: 1px;
}
.prodigy-signon-row input {
  flex: 1;
  background: #000;
  color: #FEDE3A;
  border: 2px inset #999;
  padding: 6px 10px;
  font-family: var(--p-font-mono);
  font-size: 15px;
  letter-spacing: 2px;
  caret-color: #FEDE3A;
  outline: none;
}
.prodigy-signon-row input:focus {
  border-color: var(--prodigy-star-red);
  box-shadow: 0 0 0 1px var(--prodigy-star-red);
}

.prodigy-signon-buttons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.prodigy-signon-btn {
  display: inline-block;
  background: #000;
  color: var(--prodigy-yellow);
  border: 2px outset #777;
  padding: 6px 18px;
  font-family: var(--p-font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
}
.prodigy-signon-btn.primary { background: var(--prodigy-star-red); color: #FFF; border-color: #8a0000; }
.prodigy-signon-btn:hover { filter: brightness(1.15); }
.prodigy-signon-btn:active { border-style: inset; }

.prodigy-signon-notice {
  margin-top: 18px;
  font-family: var(--p-font-serif);
  font-size: 13px;
  color: #333;
  font-style: italic;
}

.prodigy-signon-legal {
  background: var(--prodigy-gray-2);
  border-top: 2px solid #000;
  padding: 8px 12px;
  font-family: var(--p-font-mono);
  font-size: 10px;
  color: #333;
  letter-spacing: 0.5px;
  text-align: center;
}

/* small screens */
@media (max-width: 640px) {
  .prodigy-wordmark { font-size: 44px; }
  .prodigy-star-big { width: 58px; height: 58px; }
  .prodigy-subbanner { padding-left: 72px; font-size: 14px; }
  .prodigy-signon-row label { width: 72px; font-size: 13px; }
}

/* legacy signon (no longer used for /signon but kept for member edit etc) */
.p-signon-frame {
  max-width: 560px;
  margin: 40px auto;
  background: var(--p-bg);
  border: 3px double var(--p-blue);
  padding: 24px;
  box-shadow: 4px 4px 0 var(--p-shadow);
}
.p-signon-frame .logo-big {
  text-align: center;
  margin-bottom: 16px;
}
.p-signon-frame .logo-big .star {
  color: var(--p-red);
  font-size: 60px;
  line-height: 1;
  font-weight: 900;
  font-family: var(--p-font-serif);
  display: block;
  margin-bottom: 2px;
}
.p-signon-frame .logo-big .word {
  font-family: var(--p-font-serif);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--p-ink);
}
.p-signon-frame .logo-big .ver {
  color: var(--p-red);
  font-size: 18px;
  vertical-align: super;
  margin-left: 3px;
}
.p-signon-frame .tagline {
  text-align: center;
  font-family: var(--p-font-serif);
  color: var(--p-blue);
  font-style: italic;
  font-size: 16px;
  margin-bottom: 14px;
}

/* ---------- Footer ---------- */
.p-footer {
  font-size: 10px;
  color: var(--p-muted);
  text-align: center;
  padding: 6px 0;
  border-top: 1px dotted var(--p-blue);
  margin-top: 20px;
  font-family: var(--p-font-mono);
  letter-spacing: 1px;
}

/* ---------- Ticker (stocks) ---------- */
.p-ticker {
  background: var(--p-blue);
  color: #FFFFFF;
  overflow: hidden;
  padding: 3px 0;
  font-family: var(--p-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  border-top: 1px solid var(--p-blue-dark);
  border-bottom: 1px solid var(--p-blue-dark);
}
.p-ticker .p-ticker-inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: tickerScroll 120s linear infinite;
}
.p-ticker span { margin-right: 24px; }
.p-ticker .up   { color: #9EF59E; }
.p-ticker .down { color: #FFB3B3; }
@keyframes tickerScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* ---------- Weather display ---------- */
.p-weather-now {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  padding: 14px;
}
.p-weather-now .icon { font-size: 64px; }
.p-weather-now .temp {
  font-family: var(--p-font-serif);
  font-size: 48px;
  color: var(--p-red);
  line-height: 1;
}
.p-weather-now .desc {
  font-family: var(--p-font-serif);
  color: var(--p-blue);
  font-size: 20px;
}
.p-weather-forecast {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.p-weather-day {
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  padding: 6px;
  text-align: center;
  font-size: 12px;
}
.p-weather-day .day-name { color: var(--p-blue); font-family: var(--p-font-serif); font-weight: 700; }
.p-weather-day .icon { font-size: 26px; margin: 2px 0; }
.p-weather-day .hi { color: var(--p-red); font-weight: 700; }
.p-weather-day .lo { color: var(--p-muted); }

/* ---------- Chat ---------- */
.p-chat {
  display: flex;
  flex-direction: column;
  height: 450px;
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
}
.p-chat .p-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  font-family: var(--p-font-mono);
  font-size: 13px;
}
.p-chat .p-chat-log .line { margin-bottom: 2px; }
.p-chat .p-chat-log .ts { color: var(--p-muted); margin-right: 6px; font-size: 11px; }
.p-chat .p-chat-log .user { color: var(--p-blue); font-weight: 700; }
.p-chat .p-chat-log .sys  { color: var(--p-muted); font-style: italic; }
.p-chat .p-chat-input {
  display: flex;
  border-top: 2px solid var(--p-blue);
}
.p-chat .p-chat-input input {
  flex: 1;
  border: none;
  padding: 8px 10px;
  font-family: var(--p-font-mono);
  font-size: 13px;
  outline: none;
}
.p-chat .p-chat-input button {
  border: none;
  background: var(--p-red);
  color: #FFFFFF;
  padding: 0 16px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

/* ---------- Game boards ---------- */
.p-ttt {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 4px;
  margin: 10px 0;
}
.p-ttt button {
  width: 80px;
  height: 80px;
  font-size: 48px;
  font-family: var(--p-font-serif);
  background: #FFFFFF;
  border: 3px solid var(--p-blue);
  color: var(--p-red);
  cursor: pointer;
}
.p-ttt button[data-mark="O"] { color: var(--p-blue); }
.p-ttt button:disabled { cursor: default; }

.p-conc {
  display: grid;
  grid-template-columns: repeat(4, 70px);
  gap: 6px;
  margin: 10px 0;
}
.p-conc button {
  width: 70px;
  height: 70px;
  font-size: 32px;
  font-family: var(--p-font-serif);
  background: var(--p-blue);
  color: #FFFFFF;
  border: 3px solid var(--p-blue-dark);
  cursor: pointer;
}
.p-conc button.open,
.p-conc button.matched {
  background: var(--p-yellow);
  color: var(--p-red);
}
.p-conc button.matched { opacity: 0.6; cursor: default; }

.p-hangman-gallows {
  font-family: var(--p-font-mono);
  white-space: pre;
  font-size: 18px;
  color: var(--p-blue);
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  padding: 10px;
  display: inline-block;
  line-height: 1.2;
}
.p-hangman-letters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.p-hangman-letters button {
  width: 30px;
  height: 30px;
  border: 2px solid var(--p-blue);
  background: #FFFFFF;
  color: var(--p-blue);
  font-weight: 700;
  font-family: var(--p-font-mono);
  cursor: pointer;
}
.p-hangman-letters button:disabled { background: var(--p-bg-alt); color: var(--p-muted); }

/* ---------- Shopping ---------- */
.p-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.p-product {
  background: #FFFFFF;
  border: 2px solid var(--p-blue);
  padding: 10px;
}
.p-product .name { font-family: var(--p-font-serif); font-weight: 700; color: var(--p-blue); }
.p-product .desc { font-size: 12px; color: var(--p-ink); margin: 4px 0 8px; }
.p-product .price { color: var(--p-red); font-weight: 700; font-family: var(--p-font-serif); font-size: 18px; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 720px) {
  .p-grid { grid-template-columns: repeat(2, 1fr); }
  .p-product-grid { grid-template-columns: 1fr; }
  .p-weather-forecast { grid-template-columns: repeat(3, 1fr); }
  .p-nav { flex-wrap: wrap; }
  .p-jumpbox { width: 100%; border-left: none; }
  .p-jumpbox input { min-width: 0; flex: 1; }
  .p-adbar { height: auto; padding: 4px 0; }
  .p-adbar .p-ad-main { padding: 4px 8px; }
  .p-adbar .p-ad-headline { font-size: 14px; }
  .p-adbar .p-ad-subline { font-size: 11px; }
  .p-adbar .p-ad-jump { min-width: 80px; }
  .p-adbar .p-ad-left { min-width: 60px; padding: 4px 6px; }
  .p-adbar .p-ad-left .p-adgraphic { font-size: 20px; }
  .p-title { font-size: 20px; }
  body { font-size: 13px; }
  .p-main { padding-bottom: 24px; }   /* ad bar removed 2026-04-16 */
}

/* ---------- Utility classes ---------- */
.text-right { text-align: right; }
.text-center { text-align: center; }
.muted { color: var(--p-muted); }
.small { font-size: 11px; }
.mono { font-family: var(--p-font-mono); }
.serif { font-family: var(--p-font-serif); }
.red  { color: var(--p-red); }
.blue { color: var(--p-blue); }
.green { color: var(--p-green); }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0 !important; }
.mt1 { margin-top: 8px; }
.mt2 { margin-top: 16px; }
.mb1 { margin-bottom: 8px; }
.mb2 { margin-bottom: 16px; }

/* ---------- Pioneer Trail waypoint map ---------- *
   Horizontal parchment-style map showing every waypoint with a dot,
   label, and mile marker.  The wagon icon sits above the current stop.
   Scrolls horizontally on narrow viewports. */
.trail-map {
  background:
    radial-gradient(circle at 10% 20%, #EEDCA8 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #E8D29E 0%, transparent 40%),
    #F2E2B4;
  border: 3px double #6b4f1a;
  padding: 8px 4px 14px;
  margin: 12px 0;
  box-shadow: inset 0 0 30px rgba(110, 74, 28, 0.35), 2px 2px 0 rgba(0,0,0,0.25);
  font-family: 'Rockwell', 'Roboto Slab', Georgia, serif;
  color: #3a2c10;
}
.trail-map-title {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #5a4316;
  padding: 2px 0 8px;
  font-style: italic;
}
.trail-map-scroll {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  overflow-x: auto;
  padding: 18px 4px 6px;
  gap: 2px;
}
/* the dashed trail "line" running through all the dots */
.trail-map-line {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 46px;
  height: 0;
  border-top: 3px dashed #8b5a1f;
  z-index: 0;
}
.trail-stop {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  min-width: 62px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trail-wagon {
  position: absolute;
  top: -24px;
  font-size: 26px;
  line-height: 1;
  animation: trail-bob 1.8s ease-in-out infinite;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
}
@keyframes trail-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.trail-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8b5a1f;
  border: 2px solid #3a2410;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.trail-stop.passed .trail-dot  { background: #5a3a10; }
.trail-stop.current .trail-dot { background: #CC0000; border-color: #7a0000;
                                  box-shadow: 0 0 0 3px rgba(204,0,0,0.2); }
.trail-stop.future .trail-dot  { background: #C4A974; }
.trail-label {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  max-width: 64px;
  line-height: 1.15;
}
.trail-stop.passed .trail-label  { color: #6b4f1a; text-decoration: line-through; }
.trail-stop.current .trail-label { color: #CC0000; font-weight: 900; }
.trail-mile {
  font-size: 9px;
  color: #6b4f1a;
  margin-top: 2px;
  font-style: italic;
}

/* ---------- Multiplayer invite banners ---------- */
/* Yellow strip under the nav when you have a pending game invite. */
.p-mp-banner {
  background: var(--p-yellow-bg);
  border-top: 2px solid var(--p-blue);
  border-bottom: 2px solid var(--p-blue);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--p-font-sans);
  font-size: 13px;
}
.p-mp-banner .p-mp-icon {
  font-size: 20px;
  line-height: 1;
}
.p-mp-banner .p-mp-text {
  flex: 1;
}
.p-mp-banner .mp-mode {
  color: var(--p-blue);
  font-family: var(--p-font-mono);
  font-size: 11px;
  margin-left: 4px;
}
.p-mp-banner form {
  margin: 0;
}

/* Red strip under the nav when it's your turn in one or more games. */
.p-mp-yourturn {
  background: #FFE8E4;
  border-bottom: 2px solid var(--p-red);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--p-font-sans);
  font-size: 13px;
  color: var(--p-red-dark);
}
.p-mp-yourturn a { color: var(--p-red-dark); text-decoration: underline; }
.p-mp-yourturn .p-mp-icon { font-size: 16px; }

/* Session-scoped close "×" on the status bar — returns on next sign-on. */
.p-mp-close {
  background: transparent;
  border: 1px solid var(--p-red-dark);
  color: var(--p-red-dark);
  font-family: var(--p-font-sans);
  font-size: 14px;
  line-height: 1;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  border-radius: 2px;
}
.p-mp-close:hover { background: var(--p-red-dark); color: #fff; }

/* ============================================================
   CRT terminal primitive — reusable for retro-styled content.
   Any plugin/view can wrap a <div class="p-crt"> around a buffer
   to get the period-green-on-black CRT look.  Optionally pair
   with /static/js/crt.js for character-by-character type-on.

   Classes:
     .p-crt                 container (dark, phosphor glow, scanlines, rounded bezel)
     .p-crt-buffer          where line text goes
     .p-crt-line            a single line (display:block, pre-wrap)
       .p-crt-line.muted    dim green (system chatter)
       .p-crt-line.bright   bright green (primary voice)
       .p-crt-line.user     yellow (user echo)
       .p-crt-line.accent   yellow bold with glow (highlight)
     .p-crt-cursor          blinking block cursor
     .p-crt-prompt          yellow prompt line container
     .p-crt-prompt input    transparent yellow text input inside .p-crt
     .p-crt-skip            tiny "SKIP >>" button pinned bottom-right
   ============================================================ */
.p-crt {
  position: relative;
  background: #020604;
  color: #9AFE2E;
  font-family: 'VT323', var(--p-font-mono), 'Courier New', monospace;
  font-size: 20px;
  line-height: 1.25;
  padding: 20px 28px 32px;
  border: 3px solid #0a1a0a;
  border-radius: 14px;
  /* Fixed height — CRT never grows with content; the buffer scrolls. */
  height: var(--p-crt-h, 560px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 24px rgba(122, 255, 97, 0.10) inset,
              0 6px 18px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  white-space: pre-wrap;
  text-shadow: 0 0 2px #7afc72, 0 0 8px rgba(122, 255, 97, 0.28);
}
.p-crt::before {   /* subtle scanlines */
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px);
  pointer-events: none;
  z-index: 3;
}
.p-crt-buffer {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;           /* allow flex child to shrink */
  overflow-y: auto;        /* scroll here, not on the CRT */
  overflow-x: hidden;
  padding-top: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2b4e2b #020604;
}
.p-crt-buffer::-webkit-scrollbar         { width: 8px; }
.p-crt-buffer::-webkit-scrollbar-track   { background: #020604; }
.p-crt-buffer::-webkit-scrollbar-thumb   { background: #2b4e2b; border-radius: 4px; }
.p-crt-buffer::-webkit-scrollbar-thumb:hover { background: #3f6f3f; }
.p-crt-line         { display: block; }
.p-crt-line.muted   { color: #9ED6A0; }
.p-crt-line.bright  { color: #8EFF6E; }
.p-crt-line.user    { color: #FDFC4F; }
.p-crt-line.accent  { color: #FDFC4F; font-weight: bold; text-shadow: 0 0 6px #FDFC4F; }

.p-crt-cursor {
  display: inline-block;
  width: 10px; height: 18px;
  background: #9AFE2E;
  color: transparent;
  animation: p-crt-blink 0.95s steps(1) infinite;
  vertical-align: -2px;
  margin-left: 2px;
}
@keyframes p-crt-blink { 50% { background: transparent; } }

.p-crt-prompt {
  color: #FDFC4F;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.p-crt-prompt input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #FDFC4F;
  font-family: inherit;
  font-size: 20px;
  caret-color: #9AFE2E;
  text-transform: uppercase;
}
.p-crt-prompt input::placeholder { color: rgba(253, 252, 79, 0.35); }

.p-crt-skip {
  position: absolute;
  right: 12px; bottom: 8px;
  z-index: 4;
  background: rgba(0, 0, 0, 0.55);
  color: #9AFE2E;
  border: 1px solid #2b4e2b;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.p-crt-skip:hover { background: rgba(0, 0, 0, 0.8); }


/* ============================================================
   Pioneer Trail — desktop + mobile + hunting-modal
   ============================================================ */
.p-pioneer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

/* Compact stats strip shown on every viewport */
.p-pioneer-stats {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  border: 2px solid #000;
  background: #EDE2C1;
  font-family: var(--p-font-mono), 'Courier New', monospace;
  margin: 8px 0 0;
}
.p-pioneer-stats > div {
  background: #F8F1DA;
  padding: 6px 4px;
  text-align: center;
  line-height: 1.1;
  min-width: 0;
}
.p-pioneer-stats .lbl {
  display: block; font-size: 10px; color: var(--p-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.p-pioneer-stats .val {
  display: block; font-size: 16px; font-weight: 700;
}

/* Action / trade / settings button groups — tap-friendly on mobile */
.p-pioneer-actions,
.p-pioneer-trade,
.p-pioneer-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.p-pioneer-actions form,
.p-pioneer-trade form,
.p-pioneer-settings form { margin: 0; }
.p-pioneer-settings {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dotted #999;
  font-family: var(--p-font-mono), 'Courier New', monospace;
  font-size: 12px;
}

/* Hunt modal: fixed overlay so it's always in the viewport,
   regardless of scroll position on desktop or mobile. */
.p-hunt-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 900;
}
.p-hunt-modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 94vw);
  max-height: 92vh;
  z-index: 901;
  background: #1a2410;
  color: #e7d26a;
  border: 3px solid var(--p-yellow);
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
  padding: 14px 16px;
  display: flex; flex-direction: column;
  font-family: var(--p-font-mono), 'Courier New', monospace;
}
.p-hunt-header {
  display: flex; justify-content: space-between;
  font-size: 16px; letter-spacing: 0.04em;
  color: var(--p-yellow);
  border-bottom: 1px solid #3a4d2b;
  padding-bottom: 6px; margin-bottom: 10px;
}
.p-hunt-stage {
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, #2a3a18 0%, #0f1807 70%),
    #0f1807;
  border: 2px solid #3a4d2b;
  border-radius: 4px;
  height: clamp(240px, 38vh, 340px);
  overflow: hidden;
  touch-action: manipulation;
  cursor: crosshair;
}
/* Tree "edges" around the clearing, just for flavor */
.p-hunt-stage::before,
.p-hunt-stage::after {
  content: "\1F332 \1F332 \1F332 \1F332 \1F332 \1F332 \1F332 \1F332";
  position: absolute; left: 0; right: 0;
  font-size: 18px;
  opacity: 0.55;
  letter-spacing: 0.4em;
  text-align: center;
  pointer-events: none;
  color: #7aa062;
}
.p-hunt-stage::before { top: -6px; }
.p-hunt-stage::after  { bottom: -6px; }

.p-deer {
  position: absolute;
  font-size: 34px;
  line-height: 1;
  padding: 4px 6px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 120ms ease;
  animation: p-deer-pop 180ms ease-out;
  touch-action: manipulation;
}
.p-deer:hover { transform: translate(-50%, -50%) scale(1.08); }
.p-deer.hit {
  animation: p-deer-hit 420ms ease-out forwards;
  color: #ff8787;
}
@keyframes p-deer-pop {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.00); opacity: 1; }
}
@keyframes p-deer-hit {
  0%   { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.p-hunt-status {
  margin: 10px 0 4px;
  font-size: 15px;
  min-height: 1.3em;
  color: #e7d26a;
}
.p-hunt-controls {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 6px;
}

/* Phone layout: collapse the 2-column grid, stack everything */
@media (max-width: 720px) {
  .p-pioneer-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .p-pioneer-stats {
    grid-template-columns: repeat(4, 1fr);
  }
  .p-pioneer-stats > div { padding: 5px 2px; }
  .p-pioneer-stats .val  { font-size: 14px; }
  .p-pioneer-stats .lbl  { font-size:  9px; }

  .p-pioneer-actions .p-btn,
  .p-pioneer-trade .p-btn {
    flex: 1 1 100%;      /* full-width tappable rows */
    padding: 10px 12px;
    font-size: 14px;
  }
  .p-pioneer-settings { font-size: 13px; }

  .p-hunt-modal { padding: 10px 12px; }
  .p-hunt-header { font-size: 14px; }
  .p-deer { font-size: 40px; padding: 8px 10px; }
}

/* ---------- Print ---------- */
@media print {
  .p-nav, .p-adbar, .p-footer, .p-mp-banner, .p-mp-yourturn { display: none; }
  .p-main { padding-bottom: 0; }
}


/* ============================================================
   Mobile refinements (phones, <=480px)
   Additive only — never modifies an existing rule at a wider
   breakpoint.  The 720px block higher up still fires first;
   these rules layer on top for truly tiny viewports.
   ============================================================ */
@media (max-width: 480px) {
  /* Prevent iOS Safari from auto-zooming form inputs — it triggers when
     input font-size is <16px.  Keeps JUMP, signon, and admin forms from
     jumping the viewport on focus. */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Bigger tap targets — Apple/WCAG recommend 44px min. */
  .p-btn, .p-nav a, .p-jumpbox button, .p-tile, .p-tile2 {
    min-height: 44px;
  }

  /* Header: stack logo over welcome line so the date doesn't push off-screen */
  .p-header {
    flex-wrap: wrap;
    padding: 6px 10px;
    gap: 6px;
  }
  .p-header .p-welcome {
    font-size: 12px;
    width: 100%;
    text-align: left;
  }

  /* Nav row: smaller padding, wrap freely, keep labels readable */
  .p-nav a {
    padding: 8px 8px;
    font-size: 11px;
    letter-spacing: 0.5px;
    flex-grow: 1;            /* even spacing on wrap */
    min-width: 0;
  }
  .p-nav .p-jumpbox {
    order: 99;               /* JUMP always last, full row */
  }
  .p-jumpbox label {
    padding: 6px 8px;
    font-size: 12px;
  }
  .p-jumpbox input {
    font-size: 16px !important;  /* belt + suspenders vs. iOS auto-zoom */
    padding: 10px 8px;
  }

  /* Highlights tile grid: 2 across instead of 4 */
  .p-tile-grid,
  .p-grid[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Trivia / games / etc. 3-col grids → 1 col on phone */
  .p-grid[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Ad bar — stack top-to-bottom on phones; keep the period look */
  .p-adbar {
    height: auto;
  }
  .p-adbar .p-adbar-inner {
    flex-wrap: wrap;
    padding: 4px;
    gap: 4px;
  }
  .p-adbar .p-ad-left,
  .p-adbar .p-ad-main,
  .p-adbar .p-ad-jump {
    flex: 1 1 100%;
    text-align: center;
    min-width: 0;
  }
  .p-adbar .p-ad-jump {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: baseline;
  }
  .p-adbar .p-ad-headline { font-size: 13px; }
  .p-adbar .p-ad-subline  { font-size: 11px; }

  /* Admin tables get a horizontal scroll gutter instead of blowing out the viewport */
  .p-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .p-table th, .p-table td {
    white-space: normal;     /* per-cell can wrap; only the outer scrolls */
  }

  /* Forms: full-width inputs; stack form-rows */
  .p-form-row {
    flex-direction: column;
    gap: 6px;
  }
  .p-form-row > div {
    width: 100%;
  }
  .p-form input[type=text],
  .p-form input[type=email],
  .p-form input[type=password],
  .p-form input:not([type]),
  .p-form textarea {
    width: 100%;
  }

  /* Page title: smaller but still the chunky serif */
  .p-title { font-size: 18px; }

  /* Footer: smaller, wrap */
  .p-footer { font-size: 10px; padding: 8px 10px; }

  /* Frame side borders waste horizontal pixels; drop them on phones */
  .p-frame {
    border-left: none;
    border-right: none;
  }

  /* Cards: tighter padding */
  .p-card { padding: 12px; }
}