/* A slightly pixelated look for the game, in the style of the Kite Club page on packets.build: hard edges, 2px dark outlines, hard offset
   shadows instead of soft ones, small mono capitals for labels, and a faint dotted grid. It only changes how things look, never how
   they work. To go back to the soft look, remove the pixel.css link from the three pages (and set game.pixelSize to 1 in config.js). */
:root {
  --pixel-ink: #1e1238;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* with game.pixelSize above 1 in config.js the scene is drawn small and scaled up with no smoothing; at 1 (the default) it stays sharp */
body.pixel-scene canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* a faint dotted grid behind everything */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(30, 18, 56, .16) 1px, transparent 1.4px); background-size: 14px 14px; }

/* buttons: square, outlined, with a hard shadow that they press into */
.btn { border-radius: 0; border: 2px solid var(--pixel-ink); box-shadow: 4px 4px 0 var(--pixel-ink); }
.btn:hover { background: #fff; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--pixel-ink); }
.btn.primary { border-color: var(--pixel-ink); box-shadow: 4px 4px 0 var(--pixel-ink); }
.btn.quiet { border-color: transparent; box-shadow: none; }
.btn.quiet:active { transform: none; }
.btn[disabled] { box-shadow: none; }

/* panels and pop-ups */
.modal, .card, .stage-card, .rise, .winners, .apply-banner, .who-menu, .collect-win, .gate-sec, .stall-sec, .rise-won, .modal .err {
  border-radius: 0 !important;
}
.modal { border: 2px solid var(--pixel-ink); box-shadow: 8px 8px 0 var(--pixel-ink); }
.card, .stage-card { border: 2px solid var(--pixel-ink); box-shadow: 6px 6px 0 rgba(30, 18, 56, .35); }
.rise-sec .rise { border: 2px solid var(--pixel-ink); box-shadow: 6px 6px 0 rgba(30, 18, 56, .35); }
.rise.selected { box-shadow: 0 0 0 3px #7bc67e, 6px 6px 0 rgba(30, 18, 56, .35); }
.winners, .apply-banner, .collect-win { border: 2px solid var(--pixel-ink); }
.who-menu { border: 2px solid var(--pixel-ink); box-shadow: 5px 5px 0 var(--pixel-ink); }
.modal .err { border-color: var(--pixel-ink); }
#hero-art { border-radius: 0; border: 3px solid var(--pixel-ink); box-shadow: 8px 8px 0 rgba(30, 18, 56, .4); }
.card .scene { border-radius: 0; }

/* small chips and tags */
.who-chip, .hint, .gold-tag, .stage-chip, .adm-pill { border-radius: 0 !important; border: 2px solid var(--pixel-ink); }
.who-chip { box-shadow: 3px 3px 0 var(--pixel-ink); }
.who-btn:focus-visible { border-radius: 0; }
.closes-bar { border-bottom: 2px solid var(--pixel-ink); }

/* leaderboard and home sections */
.company-map, .hb-tab, .board-wrap, .lb-collection, .home-board, .lb-row, .lb-pill, .coll-btn, .cmap, .slot { border-radius: 0 !important; }
.company-map, .board-wrap, .lb-collection, .home-board { border: 2px solid var(--pixel-ink); box-shadow: 6px 6px 0 rgba(30, 18, 56, .3); }
.lb-row, .lb-pill, .coll-btn { border: 2px solid var(--pixel-ink); }
.cmap { border: 2px solid var(--pixel-ink); }
.cmap > *, .cmap button, .cmap a { border-radius: 0 !important; }

/* the pills and banners drawn over the game */
.pill, .banner, .toast, .chip { border-radius: 0 !important; border: 2px solid var(--pixel-ink); }
.pill { box-shadow: 3px 3px 0 var(--pixel-ink); }

/* form fields */
.field input[type="text"], .field input[type="email"], .field textarea, .field select { border-radius: 0; border: 2px solid var(--pixel-ink); }
.cs-list { border-radius: 0; border: 2px solid var(--pixel-ink); }

/* labels in small mono capitals */
.eyebrow-s, .card .num, .gold-tag, .who-label, .stage-chip, .cs-head, .event-tag span, .adm-stage span {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
}
.eyebrow-s { font-size: 0.7rem; }
.player-code { font-family: var(--font-mono); border-radius: 0; border: 2px solid var(--pixel-ink); }

@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

@media (max-width: 720px) {
  .nav-toggle { border-radius: 0; border-color: var(--pixel-ink); box-shadow: 3px 3px 0 var(--pixel-ink); }
  header.top .top-nav, header.top .lb-nav { border-radius: 0; border-color: var(--pixel-ink); box-shadow: 5px 5px 0 var(--pixel-ink); }
}

.hb-tab { border-radius: 0 !important; border: 2px solid var(--pixel-ink); }
.hb-tab[aria-selected="true"] { background: var(--pixel-ink); }
.hp-row { border-radius: 0 !important; border: 0; border-left: 3px solid var(--pixel-ink); }