/* Virtual Bubble Wrap — pop a bubble, it splits into four */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --teal: #35b8a5;
  --teal-dark: #1f8d7e;
  --ink: #1d3a36;
  --sage: #a7c9b9; /* reference background color */
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--sage);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript-msg {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 60, 50, 0.25);
  text-align: center;
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 2px;
}

/* ============ Shell fills the viewport ============ */
.wrap-shell {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  height: -webkit-fill-available; /* old iOS Safari without svh */
  height: 100svh;
  overflow: hidden;
  background: var(--sage);
  touch-action: none;
}

.wrap-shell:fullscreen {
  height: 100%;
}

/* ============ Recursive bubble screen ============ */
/* A centered square that opens with 4 big wrap bubbles. Every .frame
   is one quadrant of its parent, so each tap multiplies the popped
   bubble into four half-size bubbles (4 -> 16 -> 64...). */
.screen {
  position: absolute;
  /* vmin fallback, then size against the dynamic viewport so mobile
     browser chrome (URL bar) never clips the board */
  width: 96vmin;
  height: 96vmin;
  width: min(96dvw, 96svh);
  height: min(96dvw, 96svh);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}

/* On near-square viewports the board would collide with the corner
   control buttons — reserve a strip for them */
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 7/5) {
  .screen {
    width: min(96vmin, calc(100vh - 150px));
    height: min(96vmin, calc(100vh - 150px));
    width: min(96dvw, calc(100svh - 150px));
    height: min(96dvw, calc(100svh - 150px));
  }
}

/* Moderate landscape (small landscape phones/tablets, 16:10 desktops):
   keep the board clear of the HUD strip and the control buttons */
@media (min-aspect-ratio: 7/5) and (max-aspect-ratio: 16/9) {
  .screen {
    width: min(96vmin, calc(100vh - 120px));
    height: min(96vmin, calc(100vh - 120px));
    width: min(96dvw, calc(100svh - 120px));
    height: min(96dvw, calc(100svh - 120px));
  }
}

.frame {
  position: absolute;
  width: 50%;
  height: 50%;
}

/* Photo-style clear plastic bubbles (SVG, four wrinkle variants like the
   reference's random frames). Each bubble also gets a random rotation
   (--rot) so the same variant never looks repeated. */
.bubble {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* the wrinkle detail comes from the SVG variant (v1-v4); this base
     styling guarantees EVERY bubble is clearly visible on any screen,
     even if its SVG is faint or hasn't loaded yet */
  background-color: rgba(255, 255, 255, 0.16);
  /* two shadow layers only — keeps pop-spawning cheap on phones */
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.6),
    0 3px 9px rgba(52, 82, 72, 0.32);
  animation: bubble-in 0.22s ease-out backwards;
}

.bubble.v1 { background-image: url("../assets/bubble1.svg"); }
.bubble.v2 { background-image: url("../assets/bubble2.svg"); }
.bubble.v3 { background-image: url("../assets/bubble3.svg"); }
.bubble.v4 { background-image: url("../assets/bubble4.svg"); }

@keyframes bubble-in {
  from {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.4);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
    opacity: 1;
  }
}

/* ============ HUD ============ */
.hud {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  display: flex;
  gap: 8px;
  pointer-events: none;
  z-index: 9; /* game UI always sits above ad rails */
}

.hud-group {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 5px 14px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(20, 90, 80, 0.18);
}

.hud-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #4a6d67;
}

.hud-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============ Controls ============ */
.controls {
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  z-index: 9; /* game UI always sits above ad rails */
}

.icon-btn {
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  font-size: 1.15rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(20, 90, 80, 0.22);
  transition: transform 0.15s;
}

.icon-btn:hover {
  transform: scale(1.08);
}

.icon-btn:active {
  transform: scale(0.9); /* tactile press feedback on touch */
}

/* ============ Toast ============ */
.toast {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(29, 58, 54, 0.88);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(20, 90, 80, 0.35);
  animation: toast-in 0.25s ease-out;
  pointer-events: none;
  text-align: center;
  max-width: calc(100% - 32px);
}

.toast[hidden] {
  display: none;
}

@keyframes toast-in {
  from {
    transform: translate(-50%, 16px);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* ============ Ad rails ============ */
/* Padded ad cards flanking the board. Individual slots appear only when
   the viewport is wide enough that rails cannot touch the board AND tall
   enough that they cannot cover the HUD or control buttons.
   pointer-events stays off the containers so an empty/blocked slot can
   never intercept game taps — only the ad iframe itself is clickable. */
.ad-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  touch-action: none;
}

.ad-left {
  left: max(8px, env(safe-area-inset-left));
}

.ad-right {
  right: max(8px, env(safe-area-inset-right));
}

.ad-slot {
  display: none;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(20, 90, 80, 0.15);
}

.ad-tag {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  color: #5f8775;
  padding-bottom: 4px;
}

.ad-slot iframe {
  pointer-events: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

/* slots that received no ad (blocked or unfilled) hide themselves */
.ad-slot.ad-empty {
  display: none !important;
}

/* The bottom-docked ad bar was REMOVED 2026-08-24.
   It was position:fixed 8px off the viewport bottom with no close button, so the
   whole width of the thumb zone was advert - a stray tap while popping bubbles
   opened the advertiser's page. This page's own KRITRIM_NOFOOTERADS rule already
   forbids it ("Nothing pinned to the bottom of the viewport... the placement that
   keeps being flagged"), and the guard meant to enforce it only caught bars with
   computed bottom <= 4px, so an 8px one sailed straight through.
   Its markup, the 84px controls lift and the 96px footer reservations went with
   it. The inline units in the About section and the desktop side rails remain. */

/* ---- Placement rules: some ad always fits, on every device class ---- */

/* Portrait phones & tablets: a thin 320x50 banner docks at the bottom,
   the controls lift above it, and the board centers in the space between
   the HUD and the banner */
@media (orientation: portrait) and (min-height: 500px) {
  .screen {
    top: calc((100vh - 100px) / 2);
    top: calc((100svh - 100px) / 2);
    transform: translate(-50%, -50%);
    width: min(96vw, calc(100vh - 220px));
    height: min(96vw, calc(100vh - 220px));
    width: min(96dvw, calc(100svh - 220px));
    height: min(96dvw, calc(100svh - 220px));
  }

  .controls {
    bottom: max(12px, env(safe-area-inset-bottom));   /* no bar to clear any more */
  }
}

/* Landscape phones: one ad on the left, tucked below the HUD */
@media (max-width: 999px) and (min-aspect-ratio: 7/5) and (min-height: 386px) {
  .ad-left {
    top: 56px;
    transform: none;
  }

  .ad-left .ad-slot-300 {
    display: block;
  }
}

/* Tablets landscape / near-square mid screens: one 300 unit per side */
@media (min-width: 1000px) and (min-aspect-ratio: 13/10) and (max-aspect-ratio: 7/5) and (min-height: 470px) {
  .ad-slot-300 {
    display: block;
  }
}

/* Mid-width wide screens below the desktop breakpoint */
@media (min-width: 1000px) and (max-width: 1199px) and (min-aspect-ratio: 7/5) and (min-height: 470px) {
  .ad-slot-300 {
    display: block;
  }
}

/* short-wide screens, narrower desktops: 160x300 sides */
@media (min-width: 1200px) and (max-width: 1339px) and (min-aspect-ratio: 7/5) and (min-height: 470px) and (max-height: 779px) {
  .ad-slot-300 {
    display: block;
  }
}

/* short-wide screens, moderate aspect: still only room for 160x300 */
@media (min-width: 1340px) and (min-aspect-ratio: 7/5) and (max-aspect-ratio: 16/10) and (min-height: 470px) and (max-height: 779px) {
  .ad-slot-300 {
    display: block;
  }
}

/* short-wide laptops with wide aspect: room for 300x250 sides */
@media (min-width: 1340px) and (min-aspect-ratio: 16/10) and (min-height: 470px) and (max-height: 779px) {
  .ad-slot-250 {
    display: block;
  }
}

/* large desktops: bottom 728x90 leaderboard, board lifts to make room */
@media (min-width: 1400px) and (min-aspect-ratio: 7/5) and (min-height: 900px) {
  .screen {
    top: 66px;
    transform: translateX(-50%);
    width: min(96vw, calc(100vh - 200px));
    height: min(96vw, calc(100vh - 200px));
    width: min(96dvw, calc(100svh - 200px));
    height: min(96dvw, calc(100svh - 200px));
  }

}

/* tall screens: only the 600px units */
@media (min-width: 1200px) and (min-aspect-ratio: 7/5) and (min-height: 780px) and (max-height: 1119px) {
  .ad-slot-600 {
    display: block;
  }
}

/* very tall screens: both units stacked per side */
@media (min-width: 1200px) and (min-aspect-ratio: 7/5) and (min-height: 1120px) {
  .ad-slot-600,
  .ad-slot-300 {
    display: block;
  }
}

/* native fullscreen paints over the whole page — hide rails so ads are
   never served covered (zero-viewability impressions) */
body.fs-active .ad-rail {
  display: none;
}

/* ============ Device tweaks ============ */
@media (pointer: coarse) {
  .icon-btn {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .hud-group {
    padding: 4px 10px;
  }

  .hud-value {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble {
    animation: none;
  }

  .icon-btn {
    transition: none;
  }

  .toast {
    animation: none;
  }
}

/* ---- KRITRIM: scrollable About content + policy footer below the game ---- */
html { height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; touch-action: pan-y !important; }
body { height: auto !important; min-height: 100%; overflow: visible !important; touch-action: pan-y !important; }
.wrap-shell { height: 100svh; }
.screen { touch-action: none; }
.about { max-width: 700px; margin: 0 auto; padding: 26px 22px 30px; line-height: 1.66; }
.about-card { background: #f6fbf9; color: #26332e; border-radius: 18px; padding: 26px 24px; box-shadow: 0 10px 34px rgba(0,0,0,.18); }
.about h2 { font-size: 1.5rem; margin: .1em 0 .5em; color: #1f3b31; }
.about h3 { font-size: 1.12rem; margin: 1.3em 0 .4em; color: #2b6b56; }
.about p { margin: 0 0 1.05em; color: #3a4a44; }
.about .ad-inline { margin: 20px auto; display: flex; justify-content: center; }
.site-footer { text-align: center; padding: 20px 16px 44px; color: #cfe6de; font-size: .85rem; }
.site-footer a { color: #eafff8; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* The How to Play control is a link, not a button. Anchors do not centre
   their content the way buttons do, so restate it here to keep the round
   toolbar visually uniform. */
a.icon-btn { display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: inherit; }

/* Back-to-game control on the guide page. It is a link because it navigates,
   but it should read as a button, so give it the same pill shape and
   translucent fill as the round on-screen controls. */
.howto-back { margin: 18px 0; }
.howto-back a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 11px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.88); color: #1d3b33;
  font-weight: 600; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background .15s ease;
}
.howto-back a:hover { background: #fff; }
.howto-back a:active { transform: scale(0.96); }

/* Guide page container. Deliberately NOT .wrap-shell: that one is fixed to
   all four edges so the board can fill the screen, which traps prose inside
   a non-scrolling box. Normal flow here, with room at the bottom so the
   sticky ad bar never covers the last paragraph. */
.howto { position: static; display: block; min-height: 100svh;
  overflow: visible; }
.howto .about { max-width: 700px; margin: 0 auto; }
.howto h1 { font-size: 1.9rem; margin: .2em 0 .6em; color: #1f3b31; }
.howto h3 { margin: 1.2em 0 .4em; color: #2b5348; }

/* The sticky bottom ad bar is gone, so the footer no longer reserves room for it. */