/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --clr-bg:        #63C2FF;
  --clr-bg-end:    #A0E4FF;
  --clr-primary:   #FF4081;
  --clr-secondary: #2196F3;
  --clr-accent:    #FFD700;
  --clr-green:     #4caf50;
  --clr-text:      #ffffff;
  --clr-text-dim:  rgba(255,255,255,0.75);
  --clr-overlay:   rgba(15,65,155,0.82);
  --clr-border:    rgba(255,255,255,0.25);
  --radius-btn:    12px;
  --radius-card:   18px;
  --btn-h:         56px;
  --btn-w-min:     220px;
  --icon-btn-sz:   56px;
  --safe-t: env(safe-area-inset-top,    0px);
  --safe-r: env(safe-area-inset-right,  0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left,   0px);
}

/* ── Base ────────────────────────────────────────────────────── */
html, body { width:100%; height:100%; overflow:hidden; background:var(--clr-bg);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--clr-text);
  -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; }

#app { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--clr-bg); }

/* ── Canvas ──────────────────────────────────────────────────── */
#game-canvas { display:block; position:absolute; touch-action:none; user-select:none;
  -webkit-user-select:none; image-rendering:pixelated; image-rendering:crisp-edges; }

/* ── Screens ─────────────────────────────────────────────────── */
.screen { position:fixed; inset:0; display:flex; align-items:center;
  justify-content:center; z-index:10; }
.screen--hidden { display:none; }
.screen--active { display:flex; }
.screen--overlay { background:transparent; pointer-events:none; }
.screen--overlay > * { pointer-events:auto; }

/* ── Screen inner (card) ─────────────────────────────────────── */
.screen__inner { display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:32px 28px; padding-top:calc(32px + var(--safe-t)); padding-bottom:calc(32px + var(--safe-b));
  background:var(--clr-overlay); border-radius:var(--radius-card);
  border:1px solid var(--clr-border); min-width:280px; max-width:380px; width:90vw;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.screen__inner--loading { background:transparent; border:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.screen__inner--shop { max-height:90svh; overflow-y:auto; overscroll-behavior:contain; }

/* ── Loading ─────────────────────────────────────────────────── */
#loading-screen { background:var(--clr-bg); z-index:100; }

/* ── Logo ────────────────────────────────────────────────────── */
.logo__sub { font-size:13px; font-weight:600; letter-spacing:8px; color:var(--clr-accent); text-transform:uppercase; }
.logo__title { font-size:56px; font-weight:900; letter-spacing:6px; line-height:1;
  color:var(--clr-text); text-shadow:0 0 24px rgba(255,64,129,0.65); }

/* ── Progress bar ────────────────────────────────────────────── */
.progress-bar { width:240px; height:6px; background:rgba(255,255,255,0.12); border-radius:3px; overflow:hidden; }
.progress-bar__fill { height:100%; width:0%; background:var(--clr-primary); border-radius:3px;
  transition:width 0.25s ease; will-change:width; }
.progress-text { font-size:13px; letter-spacing:1px; color:var(--clr-text-dim); }

/* ── Screen title ────────────────────────────────────────────── */
.screen__title { font-size:26px; font-weight:800; letter-spacing:3px; text-align:center; }

/* ── Record block ────────────────────────────────────────────── */
.record-block { display:flex; flex-direction:column; align-items:center; gap:2px; }
.record-block__label { font-size:11px; font-weight:600; letter-spacing:3px;
  color:var(--clr-text-dim); text-transform:uppercase; }
.record-block__value { font-size:34px; font-weight:800; color:var(--clr-accent); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display:flex; align-items:center; justify-content:center; min-height:var(--btn-h);
  min-width:var(--btn-w-min); width:100%; padding:0 20px; border:none;
  border-radius:var(--radius-btn); font-size:15px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer; touch-action:manipulation;
  transition:transform 0.12s ease, opacity 0.12s ease; -webkit-tap-highlight-color:transparent; }
.btn:active { transform:scale(0.95); opacity:0.88; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn--primary   { background:var(--clr-primary);   color:var(--clr-text); }
.btn--secondary { background:var(--clr-secondary);  color:var(--clr-text); }
.btn--rewarded  { background:var(--clr-green);      color:var(--clr-text); font-size:13px; }
.btn--active    { background:var(--clr-accent);     color:#0d47a1; }
.btn--icon { min-width:var(--icon-btn-sz); width:var(--icon-btn-sz); min-height:var(--icon-btn-sz);
  height:var(--icon-btn-sz); padding:0; border-radius:50%; background:var(--clr-secondary); font-size:20px; }

/* ── HUD ─────────────────────────────────────────────────────── */
.hud { position:fixed; top:0; left:0; right:0; display:flex; align-items:center;
  justify-content:space-between; padding:10px 16px;
  padding-top:calc(10px + var(--safe-t)); padding-left:calc(16px + var(--safe-l));
  padding-right:calc(16px + var(--safe-r)); pointer-events:none; }
.hud__btn { pointer-events:auto; width:48px; height:48px; border:none; border-radius:50%;
  background:rgba(0,0,0,0.38); color:var(--clr-text); cursor:pointer; display:flex;
  align-items:center; justify-content:center; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; transition:background 0.15s ease; }
.hud__btn:active { background:rgba(0,0,0,0.6); }
.hud__score { font-size:22px; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,0.7); }
.hud__coins { display:flex; align-items:center; gap:6px; font-size:20px; font-weight:700;
  color:var(--clr-accent); text-shadow:0 1px 6px rgba(0,0,0,0.7); }
.hud__fps { font-size:11px; font-weight:600; letter-spacing:0.5px;
  color:rgba(255,255,255,0.4); min-width:44px; text-align:right; }

/* ── Toast ───────────────────────────────────────────────────── */
.hud-toast { position:fixed; top:calc(56px + var(--safe-t)); left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:rgba(255,215,0,0.95); color:#0d47a1; font-size:14px; font-weight:800;
  letter-spacing:1px; padding:6px 18px; border-radius:20px; white-space:nowrap;
  pointer-events:none; transition:opacity 0.25s ease, transform 0.25s ease; z-index:20; }
.hud-toast--hidden  { opacity:0; transform:translateX(-50%) translateY(-12px); }
.hud-toast--visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Stats grid ──────────────────────────────────────────────── */
.stats-grid { width:100%; display:flex; flex-direction:column; gap:0; }
.stats-grid__row { display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--clr-border); }
.stats-grid__label { font-size:13px; color:var(--clr-text-dim); letter-spacing:0.5px; }
.stats-grid__value { font-size:18px; font-weight:700; }
.stats-grid__row--accent .stats-grid__value { color:var(--clr-accent); font-size:22px; }

/* ── Shop ────────────────────────────────────────────────────── */
.shop-balance { display:flex; align-items:center; gap:8px; font-size:26px;
  font-weight:800; color:var(--clr-accent); }
.shop-items { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shop-card { display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px; background:rgba(255,255,255,0.06); border-radius:12px;
  border:1px solid var(--clr-border); }
.shop-card--active { border-color:var(--clr-accent); background:rgba(255,214,0,0.12); }
.shop-card__preview { width:48px; height:48px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.2); flex-shrink:0; }
.shop-card__name { font-size:12px; font-weight:600; letter-spacing:0.5px; text-align:center; }
.shop-card .btn { min-width:unset; width:100%; min-height:36px; font-size:11px; padding:0 8px; }

/* ── CSS Icons ───────────────────────────────────────────────── */
.icon-pause { display:inline-flex; align-items:center; gap:5px; }
.icon-pause::before, .icon-pause::after { content:''; display:block; width:4px; height:16px;
  background:currentColor; border-radius:2px; }
.icon-sound::before { content:'\266A'; font-size:20px; line-height:1; }
.icon-sound--off::before { content:'\2715'; font-size:18px; color:var(--clr-text-dim); }
.coin-icon { display:inline-block; width:16px; height:16px; background:var(--clr-accent);
  border-radius:50%; border:2px solid rgba(255,255,255,0.35); flex-shrink:0; }
.icon-fullscreen::before { content:'\26F6'; font-size:20px; line-height:1; }
.icon-fullscreen--exit::before { content:'\2715'; font-size:18px; color:var(--clr-text-dim); }

/* ── Scrollbar (Shop) ────────────────────────────────────────── */
.screen__inner--shop::-webkit-scrollbar { width:4px; }
.screen__inner--shop::-webkit-scrollbar-track { background:transparent; }
.screen__inner--shop::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2); border-radius:2px; }

/* ── GPU hints ───────────────────────────────────────────────── */
#game-canvas, .progress-bar__fill, .hud-toast, .screen { will-change:transform; }