/* ===== Shared Arcade Theme — works on phone, tablet, desktop ===== */
:root {
  /* ===== Ocean theme — midnight navy + sky / cyan / indigo ===== */
  --bg-1: #0a1628;
  --bg-2: #0e2039;
  --bg-3: #0b1c33;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-border: rgba(120, 170, 235, 0.18);
  --neon: #38bdf8;                 /* sky */
  --neon-2: #818cf8;               /* indigo */
  --neon-3: #22d3ee;               /* cyan */
  --good: #34d399;                 /* emerald */
  --accent-rgb: 56, 189, 248;      /* --neon as rgb, for glows */
  --text: #eaf2ff;
  --text-dim: #9fb2d0;
  --radius: 18px;
  --shadow: 0 12px 34px rgba(3, 10, 24, 0.55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;            /* no pull-to-refresh / rubber-band drag */
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg-1);              /* solid fallback behind the fixed backdrop */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Fixed gradient backdrop — pinned to the viewport on EVERY device.
   `background-attachment: fixed` is ignored by iOS/most mobile browsers (it
   falls back to scrolling, which looks like the background being dragged), so
   we paint the gradient on a position:fixed layer behind all content instead. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3));
  pointer-events: none;
}

a { color: var(--neon); text-decoration: none; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: rgba(15, 12, 41, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--panel-border);
}

.topbar h1 {
  font-size: clamp(1.05rem, 4vw, 1.5rem);
  margin: 0;
  letter-spacing: 0.5px;
  font-weight: 800;
}

.brand-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 12px var(--neon), 0 0 24px var(--neon);
}

.btn {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover { background: rgba(255,255,255,0.12); }
.btn:active { transform: scale(0.96); }
.btn.primary {
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  color: #04121f;
  border: none;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35);
}
.btn.pink { background: linear-gradient(135deg, var(--neon-3), var(--neon)); color:#04121f; border:none;}

.back-link {
  margin-left: auto;
}

/* ---------- Generic page container ---------- */
main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* ---------- Hub grid ---------- */
.hero {
  text-align: center;
  padding: 28px 14px 10px;
}
.hero h2 {
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  margin: 0 0 8px;
  background: linear-gradient(90deg, var(--neon), var(--neon-2), var(--neon-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.hero p { color: var(--text-dim); margin: 0; font-size: clamp(.95rem, 3.5vw, 1.1rem); }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.game-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120px 80px at var(--mx,50%) -20%, rgba(var(--accent-rgb),.25), transparent 70%);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.game-card:hover { transform: translateY(-4px); border-color: var(--card, var(--neon)); box-shadow: 0 16px 40px rgba(var(--accent-rgb),.18); }
.game-card:hover::after { opacity: 1; }
.game-card:active { transform: scale(0.98); }
.game-card .icon { line-height: 0; }

/* ===== Inline SVG icons ===== */
.ic {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: -0.2em;
  flex: 0 0 auto;
}
.btn .ic { width: 1.15em; height: 1.15em; vertical-align: -0.16em; }
.game-card .icon .ic {
  width: 46px;
  height: 46px;
  stroke-width: 1.7;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}
.topbar h1 .ic {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  margin-right: 4px;
  color: var(--neon);
}
.switch-item .ic { width: 20px; height: 20px; color: var(--neon); }
.nav-group .btn .ic { width: 20px; height: 20px; }
.game-card .name { font-weight: 800; font-size: 1.12rem; }
.game-card .desc { color: var(--text-dim); font-size: .85rem; }
.game-card .tag {
  align-self: flex-start;
  font-size: .68rem; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--card, var(--neon)); font-weight: 700;
}

/* ---------- Game shell (inside each game page) ---------- */
.game-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.scorebar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 8px 16px;
  min-width: 84px;
  text-align: center;
}
.stat .label { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.stat .value { font-size: 1.4rem; font-weight: 800; }

canvas { touch-action: none; display: block; max-width: 100%; }

.controls-hint {
  color: var(--text-dim);
  font-size: .85rem;
  text-align: center;
}

/* On-screen direction pad (used by Snake/Breakout) */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 8px;
  justify-content: center;
}
.dpad .btn { min-height: 56px; justify-content: center; font-size: 1.4rem; padding: 0; }
.dpad .up { grid-column: 2; grid-row: 1; }
.dpad .left { grid-column: 1; grid-row: 2; }
.dpad .down { grid-column: 2; grid-row: 2; }
.dpad .right { grid-column: 3; grid-row: 2; }

.footer {
  text-align: center;
  color: var(--text-dim);
  font-size: .8rem;
  padding: 18px;
}

/* Overlay message (win/lose) */
.overlay {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 4, 20, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 50;
  padding: 20px;
}
.overlay.show { display: flex; }
.overlay .box {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow);
}
.overlay .box h3 { margin: 0 0 8px; font-size: 1.8rem; }
.overlay .box p { color: var(--text-dim); margin: 0 0 18px; }
.end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}
.end-actions .btn { min-width: 108px; justify-content: center; }

@media (max-width: 480px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  main { padding: 14px; }
}

/* ===== Game pages: lock to the real viewport, center the game, never scroll ===== */
/* svh = the *small* viewport (mobile URL bar visible). It never changes as that
   bar hides, so the game shell cannot resize mid-play and the page stays still. */
body.game-page {
  height: 100vh;          /* fallback for old browsers */
  height: 100svh;
  overflow: hidden;       /* game pages never scroll/drag */
}
body.game-page main {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  min-height: 0;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
body.game-page .game-stage { width: 100%; }
body.game-page .game-stage { gap: clamp(8px, 2.2vh, 16px); }   /* tighter on short screens */

/* ===== In-game nav group (prev / switch / next / arcade) ===== */
.topbar { flex-wrap: wrap; }
.nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-group .btn { padding: 9px 13px; min-height: 42px; }
.nav-group .back-link.in-group { margin-left: 0; }

.switch-wrap { position: relative; }
.switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(20, 16, 50, 0.98);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 8px;
  min-width: 210px;
  max-height: 70vh;
  overflow: auto;
  box-shadow: var(--shadow);
  display: none;
  z-index: 60;
}
.switch-wrap.open .switch-menu { display: block; }
.switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.switch-item span { font-size: 1.2rem; }
.switch-item:hover { background: rgba(255, 255, 255, 0.08); }
.switch-item.current { background: rgba(var(--accent-rgb), 0.15); color: var(--neon); }

@media (max-width: 540px) {
  .switch-label { display: none; }       /* keep icon, drop the word on phones */
  .topbar { padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .topbar h1 { font-size: .98rem; }
  .nav-group { gap: 6px; }
  .nav-group .btn {
    padding: 7px 10px;
    /* 44x44 is the smallest control a finger hits reliably; these were 42x38,
       which is why taps on the top bar kept missing on phones. */
    min-height: 44px;
    min-width: 44px;
  }
  /* compact the in-game chrome so the play area fits without scrolling */
  body.game-page .scorebar { gap: 8px; }
  body.game-page .stat { padding: 6px 12px; min-width: 70px; }
  body.game-page .stat .value { font-size: 1.2rem; }
  body.game-page .controls-hint { font-size: .76rem; margin: 0; }
}

/* Short screens (landscape phones): trim chrome, and allow a little normal scroll
   so nothing is ever cut off. overscroll-behavior:none still kills the drag-bounce. */
@media (max-height: 520px) {
  body.game-page .controls-hint { display: none; }
  body.game-page .scorebar .stat { padding: 4px 10px; }
  body.game-page .scorebar .stat .value { font-size: 1.05rem; }
  body.game-page .dpad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); }
  body.game-page .dpad .btn { min-height: 46px; }
}
@media (max-height: 450px) {
  body.game-page { height: auto; min-height: 100svh; overflow-y: auto; }
  body.game-page main { overflow: visible; }
}

/* ===== Ad units — non-intrusive placement ===== */
/* Fixed skyscraper rails: only on wide desktop, in the empty side margins. */






/* In-flow banner slots (hub only). */
.ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 18px auto;
  overflow: hidden;
  min-height: 0;
}
.ad-slot iframe { max-width: 100%; }

/* Sticky bottom banner on game pages — a reserved flex row (never overlaps play). */
.game-ad-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 3px 0;
  padding-bottom: max(3px, env(safe-area-inset-bottom));
  background: rgba(3, 10, 24, 0.55);
  border-top: 1px solid var(--panel-border);
  line-height: 0;
}
.game-ad-bar iframe { max-width: 100%; }

.ad-label {
  display: block;
  text-align: center;
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: .6;
  margin-bottom: 4px;
}


/* ---------- Game switcher menu: keep it inside the screen ----------
   .switch-menu is absolutely positioned with right:0 against .switch-wrap,
   which is a ~44px icon button sitting near the LEFT edge of the top bar.
   right:0 therefore pins the menu's right edge to about x=114 and lets its
   210px body run off the left of the viewport - every game name in the list
   was cut in half. Anchored from the left instead, and clamped so it can
   never be wider than the screen it has to fit in. */
.switch-menu {
  right: auto;
  left: 0;
  max-width: calc(100vw - 20px);
  overscroll-behavior: contain;
}
@media (min-width: 760px) {
  /* On a wide screen the wrapper sits at the right-hand end of the bar, so
     the menu opens leftwards from it as originally intended. */
  .switch-menu { left: auto; right: 0; }
}

/* KRITRIM_ADLABEL_ONFILL: each page carries an inline rule that labels
   ".ad-slot:not(:empty)". A slot holding an UNFILLED iframe is still non-empty, so the
   caption printed "ADVERTISEMENT" over blank boxes. Re-key it to .kr-filled, which
   assets/ads.js sets only after a creative has actually painted. The inline block sits
   after this stylesheet in the cascade, so these need !important to win. */
.ad-slot:not(:empty)::before, .game-ad-bar:not(:empty)::before,
.kr-under-btn:not(:empty)::before, .ad-rail:not(:empty)::before,
.kr-auto-ad:not(:empty)::before { content: none !important; }
.ad-slot:not(:empty), .game-ad-bar:not(:empty),
.kr-under-btn:not(:empty), .kr-auto-ad:not(:empty) { padding-top: 0 !important; }

.ad-slot.kr-filled.kr-filled, .game-ad-bar.kr-filled.kr-filled,
.kr-under-btn.kr-filled.kr-filled, .kr-auto-ad.kr-filled.kr-filled {
  position: relative !important; padding-top: 18px !important; }
.ad-slot.kr-filled.kr-filled::before, .game-ad-bar.kr-filled.kr-filled::before,
.kr-under-btn.kr-filled.kr-filled::before, .kr-auto-ad.kr-filled.kr-filled::before {
  content: "Advertisement" !important; display: block !important;
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 0 0 6px 6px; white-space: nowrap;
  font: 700 11px/15px system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.55); pointer-events: none; z-index: 3; }

/* KRITRIM_OVERLAYFIX: the game-over card covered the whole viewport and swallowed every
   tap, so the "New Round" button visible beneath it could never be pressed (measured:
   the tap landed on DIV#overlay, not the button). Let the backdrop pass taps through to
   the page and keep the card itself interactive. switcher.js adds a 450ms guard on the
   card so the tap that was already in flight when the round ended cannot hit Play Again. */
.overlay { pointer-events: none; }
.overlay .box { pointer-events: auto; }

/* The end-of-round 300x250 sits between the score line and Play Again - the single most
   tapped spot on the page - and was drawn with no label at all. Same fill-keyed rule as
   the other slots. */
.kr-nextad.kr-filled.kr-filled {
  position: relative !important; padding-top: 18px !important; }
.kr-nextad.kr-filled.kr-filled::before {
  content: "Advertisement" !important; display: block !important;
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 0 0 6px 6px; white-space: nowrap;
  font: 700 11px/15px system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.55); pointer-events: none; z-index: 3; }

/* KRITRIM_TAPTARGET: measured on all 13 pages - the footer policy links were 17px tall
   and every topbar control 42px, against the 44px minimum. Deliberately NOT fixed with
   padding: each page carries an inline `body>footer *{padding:0!important}` rule that
   silently eats any padding added here. min-height/line-height are untouched by it. */
body > footer a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
  min-width: 44px;
  justify-content: center;
}
.btn { min-height: 44px; }
.topbar .btn, .nav-group .btn { min-height: 44px; }