@font-face {
  font-family: "PressStart";
  src: url("../assets/fonts/pressstart2p.ttf") format("truetype");
  font-display: block;
}

/* All UI art is pixel art drawn at 2 CSS px per art pixel. */
:root {
  --ink: #1a0e12;
  --cream: #fff3d6;
  --gold: #ffd84a;
  --muted: #f0d9a8;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #2a3a6a;
  color: var(--cream);
  font-family: "PressStart", "Courier New", monospace;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
img { image-rendering: pixelated; -webkit-user-drag: none; }

#game { position: fixed; display: block; image-rendering: pixelated; }

.hidden { display: none !important; }

/* Pixel text: hard 2px outline so it reads over any sky */
.screen, #hud, .tutorial {
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
               2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
               0 4px 0 var(--ink);
}

/* ---------- Image buttons (9-slice from the UI kit) ---------- */
.btn {
  font: inherit; font-size: 13px; line-height: 20px; color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 6px; margin: 4px 0;
  background: none; cursor: pointer; text-decoration: none;
  border-style: solid; border-width: 18px;
  border-image: url("../assets/ui/btn.png") 9 fill / 18px stretch;
  image-rendering: pixelated;
}
.btn:active { border-image-source: url("../assets/ui/btn-down.png"); transform: translateY(2px); }
.btn.gold { border-image-source: url("../assets/ui/btn-gold.png"); color: #fff; }
.btn.gold:active { border-image-source: url("../assets/ui/btn-gold-down.png"); }
.btn.big { font-size: 18px; min-width: 248px; min-height: 64px; }
.btn .bi { width: 26px; height: 26px; margin: -6px 2px -6px -8px; }
.btn[disabled] { filter: grayscale(.7) brightness(.8); }

.ibtn {
  width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-grid; place-items: center;
}
.ibtn img { width: 52px; height: 52px; }
.ibtn:active { transform: translateY(2px); filter: brightness(.85); }
.ibtn.off img { filter: grayscale(.8) brightness(.75); }

.coins {
  display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--gold);
  padding: 4px 4px;
}
.coins img { width: 27px; height: 28px; }
.coins.center { align-self: center; margin-bottom: 6px; }

/* ---------- Ribbon title (9-slice horizontally) ---------- */
.ribbon {
  height: 62px; min-width: 240px; padding: 0 8px;
  border-style: solid; border-width: 0 52px;
  border-image: url("../assets/ui/ribbon.png") 0 26 fill / 0 52px stretch;
  image-rendering: pixelated;
  display: flex; align-items: flex-start; justify-content: center;
  margin: -46px auto 10px;
}
.ribbon span { margin-top: 15px; padding: 0 14px; font-size: 13px; white-space: nowrap; color: #fff; }
.ribbon b { color: var(--gold); font-weight: normal; }

/* ---------- Panels ---------- */
.panel {
  width: min(92vw, 360px);
  border-style: solid; border-width: 28px;
  border-image: url("../assets/ui/panel.png") 14 fill / 28px stretch;
  image-rendering: pixelated;
  padding: 18px 4px 4px;
  margin-top: 40px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-height: calc(100dvh - 80px);
}
.panel.wide { width: min(96vw, 420px); }
.panel p { margin: 4px 0; font-size: 10px; line-height: 1.8; }
.muted { color: var(--muted); font-size: 9px !important; }

/* ---------- Screens ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(14px + var(--safe-top)) 14px calc(18px + var(--safe-bottom));
}
.screen.dim { background: rgba(14, 10, 30, .45); }

#scr-menu { justify-content: space-between; }
.menu-top { width: 100%; max-width: 480px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.profile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar {
  width: 40px; height: 40px; flex: none; background: #6a1a22 center / cover;
  image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #e8b030, 0 0 0 6px var(--ink);
}
.pinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pinfo b { font-weight: normal; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.pinfo span { font-size: 8px; color: var(--muted); }
.pinfo span.ok { color: #9cf08f; }

.title { display: flex; flex-direction: column; align-items: center; margin-top: 4vh; }
.logo {
  width: 264px; height: auto; pointer-events: none;   /* 2 CSS px per art pixel */
  animation: bob 3.2s steps(4) infinite;
}
.title .ribbon { margin: 10px auto 0; }
@keyframes bob { 50% { transform: translateY(-4px); } }
#menu-hero { width: 168px; height: 180px; image-rendering: pixelated; margin-top: auto; margin-bottom: -8px; }
@media (min-width: 430px) and (min-height: 760px) { .logo { width: 396px; } }

.menu-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.icon-row { display: flex; gap: 10px; margin: 4px 0; }

/* ---------- Game over ---------- */
.over-m { font-size: 14px; color: var(--muted); }
.over-m b { font-size: 40px; color: #fff; font-weight: normal; margin-right: 4px; }
.over-coins { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--gold); margin-bottom: 4px; }
.over-coins img { width: 27px; height: 28px; }
.record { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 12px; animation: blink 1s steps(2) infinite; }
.record img { width: 30px; height: 29px; }
@keyframes blink { 50% { opacity: .55; } }

/* ---------- Shop ---------- */
.shop-list { width: 100%; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 2px 2px 6px; touch-action: pan-y; }
.shop-item {
  position: relative; cursor: pointer; padding: 6px 4px 8px;
  background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 2px rgba(255,216,74,.25);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.shop-item.sel { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(255,216,74,.12); }
.shop-item canvas { width: 96px; height: 108px; image-rendering: pixelated; }
.shop-item b { font-weight: normal; font-size: 8px; line-height: 1.5; }
.shop-item .price { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--gold); }
.shop-item .price img { width: 18px; height: 19px; }
.shop-item .tag { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; }

/* ---------- Leaderboard ---------- */
.top-list { width: 100%; list-style: none; padding: 0; margin: 0 0 6px; overflow-y: auto; max-height: 52vh; touch-action: pan-y; }
.top-list li { display: flex; gap: 8px; align-items: center; padding: 8px 6px; font-size: 10px; border-bottom: 2px solid rgba(255,216,74,.15); }
.top-list li .n { width: 26px; color: var(--muted); text-align: right; }
.top-list li .nm { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list li .sc { color: var(--gold); }
.top-list li.me { background: rgba(255,216,74,.14); }
.top-list li:nth-child(1) .n { color: #ffd84a; }
.top-list li:nth-child(2) .n { color: #dfe8f4; }
.top-list li:nth-child(3) .n { color: #f0a868; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; left: 0; right: 0; top: 0; z-index: 5;
  padding: calc(10px + var(--safe-top)) 10px 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
#hud .ibtn, #hud .coins { pointer-events: auto; }
#hud .coins { min-width: 52px; justify-content: flex-end; }
.hud-mid { text-align: center; padding-top: 4px; }
.hud-m { font-size: 36px; line-height: 1; color: #fff; }
.hud-best { font-size: 8px; color: var(--muted); margin-top: 8px; }

.tutorial {
  position: fixed; left: 0; right: 0; bottom: calc(16vh + var(--safe-bottom)); z-index: 6;
  text-align: center; pointer-events: none; font-size: 13px; line-height: 1.7;
  animation: blink 1.4s steps(2) infinite;
}
.tutorial .sub { font-size: 9px; color: var(--muted); }

.loading { position: fixed; inset: 0; background: #2a3a6a; display: grid; place-items: center; z-index: 50; transition: opacity .3s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading .bar { width: 168px; height: 16px; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #e8b030, 0 0 0 6px var(--ink); padding: 2px; }
.loading .bar i { display: block; height: 100%; width: 0; background: #ffd84a; transition: width .2s steps(6); }

.toast {
  position: fixed; left: 50%; top: calc(96px + var(--safe-top)); transform: translateX(-50%); z-index: 60;
  font-size: 11px; line-height: 1.6; max-width: 90vw; text-align: center; color: var(--gold);
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 4px 0 var(--ink);
  pointer-events: none;
}

@media (max-height: 660px) {
  .logo { width: min(56vw, 260px); }
  .btn.big { min-height: 56px; }
}