/* Fonts are self-hosted (SIL Open Font License) so the game works without external requests */
@font-face { font-family: 'VT323'; src: url('../fonts/vt323-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('../fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-display: swap; }
:root {
  --bg: #0b0b18; --panel: rgba(14, 14, 32, 0.92); --line: #2e2c52; --text: #e8e6f5; --muted: #9a97b8;
  --gold: #ffd98a; --accent: #ffd98a; --red: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: radial-gradient(circle at 50% 30%, #1b1838, var(--bg) 70%); color: var(--text); overflow: hidden; }
body { display: grid; place-items: center; font-family: 'VT323', ui-monospace, monospace; -webkit-user-select: none; user-select: none; touch-action: none; }
#wrap {
  position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9;
  container-type: size; box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); background: #000;
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; }
.hidden { display: none !important; }

/* ---- overlays ---- */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.1cqw; z-index: 5; }
#levelup, #pause, #gameover { background: rgba(6, 6, 16, 0.6); backdrop-filter: blur(2px); }
.menu-inner { width: 94%; height: 94%; display: flex; flex-direction: column; align-items: center; }
.title {
  font-family: 'Press Start 2P', monospace; font-size: 4cqw; margin: 1cqw 0 0.8cqw; letter-spacing: 0.3cqw;
  color: #ffcf6b; text-shadow: 0 0.4cqw 0 #a5401f, 0 0 2cqw rgba(255, 140, 60, 0.6);
}
.subtitle { margin: 0.3cqw 0 0.7cqw; color: var(--muted); text-align: center; }
.tabs { display: flex; gap: 0.8cqw; margin-bottom: 0.6cqw; }
.tabs button, .btn {
  font: inherit; font-size: 2cqw; color: var(--text); background: #1c1a3a; border: 0.2cqw solid var(--line);
  padding: 0.5cqw 1.6cqw; cursor: pointer; border-radius: 0.5cqw; transition: transform .1s, background .1s;
}
.tabs button:hover, .btn:hover { background: #2a2752; transform: translateY(-0.1cqw); }
.tabs button.active { background: #3a2d63; border-color: var(--gold); color: var(--gold); }
.btn.primary { background: #a5401f; border-color: #ffcf6b; color: #fff4dd; }
.btn.primary:hover { background: #c4532a; }
.btn:disabled { opacity: .5; cursor: default; }
.tab { display: none; width: 100%; flex: 1; min-height: 0; }
.tab.active { display: flex; flex-direction: column; align-items: center; overflow-y: auto; }

/* ---- cards ---- */
.cards { display: flex; gap: 1.4cqw; justify-content: center; width: 100%; }
.card {
  position: relative; font: inherit; color: var(--text); text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(40, 36, 80, 0.95), rgba(18, 16, 38, 0.95));
  border: 0.25cqw solid var(--line); border-radius: 1cqw; padding: 0.8cqw 1.1cqw; flex: 1; max-width: 31%;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card:hover, .card:focus-visible { transform: translateY(-0.5cqw); border-color: var(--accent); box-shadow: 0 0 2cqw color-mix(in srgb, var(--accent) 40%, transparent); outline: none; }
.card h3 { font-family: 'Press Start 2P', monospace; font-size: 1.6cqw; margin: 0.6cqw 0 0.3cqw; color: var(--accent); }
.card .num { position: absolute; top: 0.6cqw; right: 0.8cqw; font-family: 'Press Start 2P', monospace; font-size: 1.1cqw; color: var(--muted); }
.hero-top canvas { width: 100%; height: 9cqw; object-fit: contain; display: block; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%); border-radius: 0.6cqw; }
.blurb { margin: 0 0 0.4cqw; color: var(--muted); font-size: 1.6cqw; line-height: 1; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2cqw 1cqw; font-size: 1.6cqw; }
.stats div { display: flex; justify-content: space-between; align-items: center; }
.stats i { display: flex; gap: 0.2cqw; }
.stats b, .stats em { width: 0.9cqw; height: 0.9cqw; display: block; background: var(--accent); }
.stats em { background: #2e2c52; }
.passive { font-size: 1.65cqw; color: var(--gold); margin: 0.6cqw 0; line-height: 1; }
.abil { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45cqw; }
.abil li { display: flex; gap: 0.6cqw; align-items: flex-start; font-size: 1.4cqw; line-height: 0.95; }
.abil strong { display: block; color: #fff; font-weight: normal; font-size: 1.7cqw; }
.abil span { color: var(--muted); }
kbd {
  font-family: 'Press Start 2P', monospace; font-size: 1cqw; background: #2b2850; border: 0.15cqw solid #4c4880; border-bottom-width: 0.35cqw;
  border-radius: 0.4cqw; padding: 0.35cqw 0.5cqw; color: var(--gold); display: inline-block; min-width: 2cqw; text-align: center;
}

/* ---- panels ---- */
.panel { background: var(--panel); border: 0.25cqw solid var(--line); border-radius: 1.2cqw; padding: 1.6cqw 2cqw; width: 80%; text-align: center; box-shadow: 0 1cqw 4cqw rgba(0, 0, 0, .6); }
.panel.narrow { width: 46%; }
.panel.wide { width: 70%; max-height: 94%; overflow: auto; }
.panel h2 { font-family: 'Press Start 2P', monospace; font-size: 2.6cqw; margin: 0.4cqw 0 0.8cqw; color: var(--gold); }
.panel h2.red { color: var(--red); }
.panel h4 { margin: 0.6cqw 0; color: var(--muted); font-weight: normal; }
.glow { text-shadow: 0 0 1.5cqw rgba(255, 210, 63, .8); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.hint { color: var(--muted); margin: 1cqw 0 0; }
.row { display: flex; gap: 1cqw; justify-content: center; margin-top: 1.2cqw; }

.upg-card { text-align: center; padding-top: 1.6cqw; animation: dealIn .35s ease-out backwards; }
.upg-card:nth-child(2) { animation-delay: .07s; } .upg-card:nth-child(3) { animation-delay: .14s; }
@keyframes dealIn { from { transform: translateY(3cqw) scale(.9); opacity: 0; } }
.upg-card canvas { width: 5.5cqw; height: 5.5cqw; }
.upg-card p { color: #d6d3ea; font-size: 1.85cqw; line-height: 1; min-height: 5.4cqw; margin: 0.4cqw 0; }
.upg-card .tag { position: absolute; top: 0.6cqw; left: 0.8cqw; font-size: 1.4cqw; color: var(--accent); text-transform: uppercase; letter-spacing: .1cqw; }
.pips { display: flex; gap: 0.4cqw; justify-content: center; }
.pips i { width: 1.4cqw; height: 0.7cqw; background: #2e2c52; display: block; border-radius: .2cqw; }
.pips i.on { background: var(--accent); }
.pips i.new { background: #fff; animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }

.ups { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3cqw 2cqw; text-align: left; max-width: 90%; }
.ups b { color: var(--gold); font-weight: normal; float: right; }
.muted { color: var(--muted); }

.over-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8cqw; margin-bottom: 1cqw; }
.over-stats div { background: #1c1a3a; border-radius: 0.6cqw; padding: 0.6cqw; display: flex; flex-direction: column; }
.over-stats span { color: var(--muted); font-size: 1.6cqw; }
.over-stats b { color: #fff; font-weight: normal; font-size: 2.4cqw; }
.submit { display: flex; gap: 1cqw; justify-content: center; }
.submit input {
  font: inherit; font-size: 2.2cqw; background: #0d0c20; color: #fff; border: 0.2cqw solid var(--line); border-radius: 0.5cqw;
  padding: 0.4cqw 1cqw; width: 40%; outline: none; -webkit-user-select: text; user-select: text;
}
.submit input:focus { border-color: var(--gold); }
.status { min-height: 2cqw; margin: 0.5cqw 0; color: var(--gold); }

/* ---- leaderboard ---- */
.board-wrap { width: 100%; max-width: 60cqw; margin: 0 auto; }
.board-label { color: var(--muted); margin: 0.6cqw 0; text-align: center; font-size: 1.7cqw; }
.board { width: 100%; border-collapse: collapse; font-size: 2cqw; }
.board th { color: var(--muted); font-weight: normal; text-align: left; border-bottom: 0.15cqw solid var(--line); padding: 0.2cqw 0.6cqw; }
.board td { padding: 0.2cqw 0.6cqw; border-bottom: 0.1cqw solid rgba(255, 255, 255, .05); text-align: left; }
.board td:last-child, .board th:last-child { text-align: right; color: var(--gold); }
.board tr:nth-child(1) td:first-child { color: #ffd23f; } .board tr:nth-child(2) td:first-child { color: #d9d9e6; } .board tr:nth-child(3) td:first-child { color: #d08a4a; }
.board tr.me td { background: rgba(255, 217, 138, .15); }

/* ---- help ---- */
.help { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3cqw; width: 90%; font-size: 1.9cqw; }
.help h3 { font-family: 'Press Start 2P', monospace; font-size: 1.4cqw; color: var(--gold); }
.help td { padding: 0.25cqw 0.6cqw; }
.help ul { padding-left: 2cqw; margin: 0; line-height: 1.05; }
.help li { margin-bottom: 0.4cqw; }
.c-crate { color: #d39a55; } .c-stone { color: #a8b0c2; } .c-barrel { color: #ff5a4a; } .c-sand { color: #e2c48f; } .c-spring { color: #ff8a8a; } .c-lava { color: #ff8a2a; }

/* ---- misc ---- */
#mute-btn {
  position: absolute; right: 1cqw; bottom: 1cqw; z-index: 8; font: inherit; font-size: 2.2cqw; width: 4cqw; height: 4cqw;
  background: rgba(14, 14, 32, .7); color: var(--gold); border: 0.15cqw solid var(--line); border-radius: 50%; cursor: pointer;
}
#mute-btn.off { color: #666; }

#touch { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#touch button {
  pointer-events: auto; font: inherit; font-size: 3cqw; color: #fff; background: rgba(255, 255, 255, .12);
  border: 0.2cqw solid rgba(255, 255, 255, .3); border-radius: 50%; width: 8cqw; height: 8cqw; touch-action: none;
}
#touch button.down { background: rgba(255, 217, 138, .4); }
#touch .pad { position: absolute; bottom: 3cqw; display: flex; gap: 1.5cqw; align-items: center; }
#touch .left { left: 2cqw; bottom: 14cqh; }
#touch .right { right: 7cqw; bottom: 14cqh; }
#touch .col { display: flex; flex-direction: column; gap: 1cqw; }
#touch .sm { width: 5.5cqw !important; height: 5.5cqw !important; font-size: 2cqw !important; }
#touch .big { width: 10cqw !important; height: 10cqw !important; }
#touch .jump { background: rgba(127, 227, 255, .18); }
#touch .pause-btn { position: absolute; top: 14cqh; right: 1.5cqw; width: 5cqw !important; height: 5cqw !important; font-size: 1.8cqw !important; }