:root {
  /* ===== Pastel kawaii palette ===== */
  --pink:        #ffb3d1;
  --pink-dark:   #ff8db5;
  --pink-soft:   #ffd9e6;
  --lavender:    #d9c5ff;
  --lavender-dk: #b8a3ff;
  --mint:        #b8f2d4;
  --mint-dark:   #8de0b8;
  --lemon:       #fff5b3;
  --peach:       #ffd4ab;
  --cream:       #fffaf2;

  --ink:    #5a4a78;    /* soft plum instead of pure black */
  --muted:  #9b8eb5;
  --bg:     #fff8fc;
  --green:  #4cbf94;
  --red:    #ff7a98;

  --yellow: var(--lemon);          /* legacy alias */
  --panel:  #f8f0ff;
  --shadow: 0 4px 0 rgba(255, 142, 184, 0.18);
}

* { box-sizing: border-box; }

/* ===== Zoom & copy lock ===== */
html, body {
  touch-action: manipulation;   /* no double-tap zoom; panning still works */
  user-select: none;
  -webkit-user-select: none;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
}

html, body {
  margin: 0; padding: 0;
  height: 100vh;
  height: 100dvh; /* mobile-safe viewport */
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 220, 235, 0.65) 0, transparent 38%),
    radial-gradient(circle at 85% 80%, rgba(220, 230, 255, 0.6) 0, transparent 42%),
    linear-gradient(180deg, #fff0f7 0%, #f6ebff 55%, #ebf6ff 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  animation: fade 250ms ease;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center` gracefully falls back to flex-start when content is taller
     than the viewport, so nothing gets clipped on short screens. */
  justify-content: safe center;
}
/* Draw screen must not scroll — canvas gestures conflict with page scroll. */
#screen-draw { overflow: hidden; touch-action: none; }

@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Kawaii pill buttons (overrides NES.css) ===== */
.nes-btn.pixel,
.nes-btn {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.3 !important;
  padding: 12px 28px !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--pink), var(--lavender)) !important;
  box-shadow: 0 4px 0 rgba(255, 138, 184, 0.32), 0 2px 6px rgba(170, 130, 200, 0.15) !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: transform 100ms ease, box-shadow 120ms ease !important;
  image-rendering: auto !important;
}
.nes-btn.pixel:hover,
.nes-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(255, 138, 184, 0.34), 0 4px 10px rgba(170, 130, 200, 0.2) !important; }
.nes-btn.pixel:active,
.nes-btn:active  { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 138, 184, 0.32) !important; }
.nes-btn.pixel:focus,
.nes-btn:focus { outline: none; }

.nes-btn.pixel.pixel-sm,
.nes-btn.pixel-sm { font-size: 12px !important; padding: 8px 18px !important; }

/* Kill NES.css ::before / ::after pixel corner artifacts that show up as
   stray dots / lines on top of our pastel pill buttons. */
.nes-btn::before,
.nes-btn::after,
.nes-btn.pixel::before,
.nes-btn.pixel::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Status colour variants */
.nes-btn.is-warning,
.nes-btn.is-warning.pixel {
  background: linear-gradient(135deg, #ffe599, #ffc6a8) !important;
  color: #6b5235 !important;
  box-shadow: 0 4px 0 rgba(255, 180, 120, 0.4), 0 2px 6px rgba(220, 160, 80, 0.18) !important;
}
.nes-btn.is-success,
.nes-btn.is-success.pixel {
  background: linear-gradient(135deg, var(--mint), #a4e6c2) !important;
  color: #2f6a4f !important;
  box-shadow: 0 4px 0 rgba(120, 200, 160, 0.4), 0 2px 6px rgba(80, 180, 130, 0.18) !important;
}
.nes-btn.is-error,
.nes-btn.is-error.pixel {
  background: linear-gradient(135deg, #ffc1cf, #ff9eba) !important;
  color: #8a3a55 !important;
  box-shadow: 0 4px 0 rgba(255, 130, 165, 0.4), 0 2px 6px rgba(220, 100, 140, 0.18) !important;
}
.nes-btn.is-primary,
.nes-btn.is-primary.pixel {
  background: linear-gradient(135deg, var(--lavender), var(--lavender-dk)) !important;
  color: #4d3b80 !important;
  box-shadow: 0 4px 0 rgba(160, 130, 220, 0.4), 0 2px 6px rgba(140, 110, 200, 0.18) !important;
}
.nes-btn[disabled],
.nes-btn[disabled].pixel { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; }

/* ===== Intro ===== */
.intro-wrap {
  max-width: 640px;
  width: 100%;
  text-align: center;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.logo .pencil { font-size: clamp(36px, 9vw, 56px); }
.logo h1 {
  font-size: clamp(42px, 10vw, 72px);
  margin: 0;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  background: linear-gradient(180deg, var(--pink-dark) 0%, #c279c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 0 var(--pink-soft));
}
.logo .dot { color: var(--lavender-dk); -webkit-text-fill-color: var(--lavender-dk); }
.tagline {
  font-size: clamp(14px, 3.2vw, 20px);
  color: var(--muted);
  margin: 4px 0 20px;
}
.sub {
  font-size: clamp(13px, 2.5vw, 16px);
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 28px;
}
.intro-status {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.intro-status.ready { color: var(--green); }
.intro-status.error { color: var(--red); }
.foot-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
}

/* ===== Prompt ===== */
.prompt-wrap {
  text-align: center;
  width: 100%;
  max-width: 640px;
}
.prompt-label {
  color: var(--muted);
  font-size: clamp(14px, 2.5vw, 18px);
  margin: 0 0 8px;
}
.prompt-wrap h2 {
  font-size: clamp(48px, 14vw, 96px);
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: lowercase;
  word-break: break-word;
  line-height: 1;
}
.prompt-round {
  color: var(--muted);
  margin: 0 0 28px;
  font-size: clamp(13px, 2vw, 16px);
}

/* ===== Draw ===== */
#screen-draw {
  padding: 12px;
  gap: 8px;
  justify-content: safe center;
}
.draw-top {
  width: 100%;
  max-width: 920px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
  flex-wrap: wrap;
}
.draw-instruction {
  font-size: clamp(14px, 2.4vw, 22px);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}
.draw-instruction b { font-weight: 700; }
#draw-timer {
  display: inline-block;
  background: linear-gradient(135deg, var(--lemon), var(--peach));
  color: #6b5235;
  border-radius: 12px;
  padding: 3px 12px;
  font-weight: 700;
  min-width: 36px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(220, 160, 80, 0.25);
}
.draw-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ===== Brush + colour bar ===== */
.brush-bar {
  width: 100%;
  max-width: 920px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px;
  flex-wrap: wrap;
}
.brush-types, .color-swatches {
  display: flex;
  gap: 6px;
  align-items: center;
}
.brush-btn {
  background: #fff;
  border: 2px solid var(--pink-soft);
  border-radius: 14px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: border-color 100ms, transform 80ms, background 120ms;
}
.brush-btn:hover { border-color: var(--pink); background: #fff5fa; }
.brush-btn.is-active {
  border-color: var(--pink-dark);
  background: linear-gradient(135deg, var(--lemon), var(--peach));
  box-shadow: 0 3px 0 rgba(255, 180, 120, 0.35);
}
.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--pink-soft);
  cursor: pointer;
  padding: 0;
  transition: transform 80ms, box-shadow 120ms;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active {
  box-shadow: 0 0 0 3px var(--pink-dark);
  transform: scale(1.18);
}

.canvas-wrap {
  position: relative;
  background: #fff;
  border: 3px dashed var(--mint-dark);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(184, 242, 212, 0.5), 0 4px 14px rgba(180, 150, 220, 0.18);
  margin-top: 4px;
  /* Width and height each grow independently to fill what the device gives,
     capped to the desktop ideal. Decoupling them (rather than locking aspect
     ratio) means portrait phones get a roughly-square pad instead of a tiny
     letterbox, and short landscape views aren't pushed off-screen. */
  width: min(95vw, 900px);
  height: min(60vh, 520px);     /* fallback for older browsers without dvh */
  height: min(60dvh, 520px);    /* modern: dynamic viewport hides iOS URL-bar jumps */
  touch-action: none; /* block browser gestures so every touch reaches the canvas */
}
#board {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  background: #fff;
  user-select: none;
  -webkit-user-select: none;
}

.ai-bubble {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, var(--lavender-dk), var(--pink-dark));
  color: #fff;
  border-radius: 18px;
  padding: 7px 14px;
  font-size: clamp(11px, 2vw, 14px);
  max-width: min(60%, 260px);
  box-shadow: 0 4px 0 rgba(160, 120, 220, 0.35);
  animation: bubblePop 300ms ease;
  pointer-events: none;
  font-weight: 500;
}
.ai-bubble.hidden { display: none; }
@keyframes bubblePop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.draw-bottom {
  margin-top: 8px;
  width: 100%;
  max-width: 920px;
  text-align: center;
}
.ai-thoughts {
  font-size: clamp(12px, 2vw, 16px);
  color: var(--muted);
}
.draw-tip {
  margin: 8px 0 0;
  font-size: clamp(11px, 1.7vw, 13px);
  color: var(--muted);
  opacity: 0.85;
  line-height: 1.5;
}
.draw-tip b { color: var(--ink); font-weight: 600; }
.ai-label {
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}

/* ===== Round Result ===== */
.round-result-wrap {
  text-align: center;
  width: 100%;
  max-width: 640px;
}
.round-result-wrap h2 {
  font-size: clamp(40px, 9vw, 64px);
  margin: 0 0 12px;
  line-height: 1.1;
}
.round-result-wrap p {
  font-size: clamp(16px, 3.2vw, 22px);
  margin: 0 0 28px;
  color: var(--muted);
  word-break: break-word;
}
.round-result-wrap.miss h2 { color: var(--red); }
.round-result-wrap.hit h2 { color: var(--green); }

/* ===== Final ===== */
.final-wrap {
  text-align: center;
  width: 100%;
  max-width: 960px;
}
.final-wrap h2 {
  font-size: clamp(28px, 6vw, 48px);
  margin: 0 0 4px;
}
.final-sub {
  color: var(--muted);
  margin-bottom: 20px;
  font-size: clamp(14px, 2.6vw, 18px);
}
.final-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.final-card {
  background: #fff;
  border-radius: 18px;
  padding: 8px;
  text-align: center;
  border: 2px solid var(--pink-soft);
  box-shadow: 0 3px 0 rgba(220, 180, 230, 0.25);
}
.final-card.hit  { border-color: var(--mint-dark); box-shadow: 0 3px 0 rgba(140, 220, 180, 0.3); }
.final-card.miss { border-color: var(--pink); box-shadow: 0 3px 0 rgba(255, 180, 210, 0.3); }
.final-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 8px;
  object-fit: contain;
  border: 1px solid #eee;
}
.final-card .label {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  text-transform: lowercase;
}
.final-card .verdict {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.final-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ===== Share Modal ===== */
.share-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  animation: fade 200ms ease;
  overscroll-behavior: contain;
}
.share-modal.hidden { display: none; }
.share-sheet {
  background: linear-gradient(180deg, #fff8fc 0%, #f6ecff 100%);
  border-radius: 24px;
  border: 2px dashed var(--pink-soft);
  padding: clamp(14px, 3vw, 24px);
  max-width: 720px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(190, 130, 200, 0.25);
  text-align: center;
  position: relative;
  max-height: 92dvh;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.share-sheet h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 600;
}
.share-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
}
.share-close:hover { color: var(--ink); }
.share-card-wrap {
  background: var(--panel);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 16px;
}
#share-card {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}
.share-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.share-status {
  margin: 12px 0 0;
  min-height: 18px;
  font-size: 14px;
  color: var(--green);
}
.share-status.error { color: var(--red); }

/* ===== About / How to play / Tips ===== */
.about {
  max-width: 640px;
  width: 100%;
  margin: 26px auto 0;
  text-align: left;
  background: rgba(255, 255, 255, 0.62);
  border: 2px dashed var(--pink-soft);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 4px 0 rgba(255, 142, 184, 0.12);
}
.about h2 {
  font-size: clamp(18px, 3.4vw, 24px);
  margin: 20px 0 8px;
  color: var(--pink-dark);
  font-weight: 700;
}
.about h2:first-child { margin-top: 0; }
.about p {
  font-size: clamp(13px, 2.3vw, 15px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 4px;
}
.about b { font-weight: 600; }
.about .ad-slot { margin: 16px auto; }

/* ===== Ad slots (Adsterra banners) ===== */
.ad-slot {
  display: flex;
  justify-content: center;
  margin: 22px auto 0;
  max-width: 100%;
  overflow: hidden;   /* a banner can never cause sideways page scroll */
}
/* Extra breathing room below the Next button so nobody fat-fingers an ad. */
.round-result-wrap .ad-slot { margin-top: 36px; }
/* Wide-desktop skyscraper rails. The <script> inside each rail only writes
   the banner at >=1360px-wide viewports, so on smaller screens these divs
   stay empty and invisible. Rails live inside their screen's <section>, so
   each one is only visible while that screen is active. */
.ad-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.ad-rail.left  { left: 14px; }
.ad-rail.right { right: 14px; }

/* ===== Responsive breakpoints ===== */
@media (max-width: 900px) {
  .final-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  /* Compact final grid — 3 cols squeezes 6 cards onto 2 rows so the Play
     Again / Share buttons stay above the fold on phones. */
  .final-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
  .final-card { padding: 4px; }
  .final-card .label { font-size: 11px; margin-top: 4px; }
  .final-card .verdict { font-size: 10px; }
  .final-wrap h2 { font-size: clamp(22px, 6vw, 32px); margin-bottom: 2px; }
  .final-sub { margin-bottom: 12px; font-size: 13px; }

  /* Keep action buttons reachable even if grid overflows */
  .final-actions { flex-direction: column; gap: 8px; padding-bottom: 12px; }
  .final-actions .nes-btn { width: 100%; max-width: 280px; }

  .draw-top { padding: 2px 0; }
  #draw-timer { padding: 1px 8px; min-width: 30px; }
  .draw-tip { font-size: 10px; line-height: 1.4; }
  .brush-bar { gap: 6px; padding: 2px 0; }
  .brush-btn { width: 32px; height: 32px; font-size: 16px; }
  .swatch { width: 22px; height: 22px; }
  .color-swatches { gap: 4px; }
  .brush-types { gap: 4px; }

  .nes-btn.pixel { font-size: 11px; padding: 8px 14px; }
  .nes-btn.pixel.pixel-sm { font-size: 9px; padding: 5px 10px; }

  .share-buttons { gap: 6px; }
  .share-buttons .nes-btn { flex: 1 1 auto; min-width: 80px; }
}
@media (max-width: 360px) {
  .final-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 600px) and (orientation: landscape) {
  .intro-wrap .sub { display: none; } /* hide long copy on short landscape */
  .logo { margin-bottom: 4px; }
  .tagline { margin-bottom: 12px; }
}

/* KRITRIM_LEADERBOARD_FIT: the top slot picks a 728x90 unit whenever the VIEWPORT is
   >=800px, but the column it sits in is .intro-wrap, which is capped at max-width:640px
   at every viewport. .ad-slot carries overflow:hidden (so a banner can never cause
   sideways scroll), so the 728 creative was simply clipped - measured 640x90 rendered,
   88px of every advert cut off. Raising the breakpoint cannot help, because the column
   is 640 no matter how wide the screen is.

   Only the slot holding a 728 unit breaks out of the text column, centred, and capped to
   the viewport so it can never introduce horizontal scroll. :has() scopes this to that
   one slot; browsers without :has() simply keep the old behaviour rather than breaking.
   Verified at 1024 (slot 141-869) and at 800, the narrowest width that picks 728
   (slot 29-757): full 728 shown, no page overflow at either. */
.ad-slot:has(> iframe[width="728"]) {
  width: min(728px, calc(100vw - 16px)) !important;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
}


/* ===== KRITRIM_IPADLAND 2026-09-11 =======================================
   iPad in landscape. Measured at 1024x768: .canvas-wrap asks for
   min(60dvh,520px) = 460px but rendered 276px, because #screen-draw is
   position:absolute inset:0 with overflow:hidden, so every child is a flex
   item that gets crushed rather than allowed to overflow. A 276px-tall pad
   on a 894px-wide box is a letterbox, not a drawing surface.

   Three changes, landscape + short viewport only:
   1. ONE advert, not two - the bottom slot is hidden, so the space goes to
      the pad instead of to a second banner.
   2. The screen SCROLLS. The original rule blocked it because canvas
      gestures fight page scroll - but #board sets its own touch-action:none,
      so every touch inside the pad is still swallowed by the canvas. Only
      touches OUTSIDE the pad now scroll, which is what was wanted.
   3. The pad keeps its intended height (flex:0 0 auto) instead of shrinking,
      and content starts at the top so it can scroll rather than being
      centred and clipped.

   Scoped to max-height:1030px so it covers every iPad landscape height
   (768 / 834 / 1024) and short laptops, which have the identical squeeze.
   Tall desktops are untouched.
   ======================================================================== */
@media (orientation: landscape) and (min-width: 768px) and (max-height: 1030px) {
  #kr-draw-bottom { display: none !important; }

  #screen-draw {
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  #screen-draw.active { justify-content: flex-start; }

  .canvas-wrap {
    flex: 0 0 auto;
    height: min(58dvh, 460px);
    margin-bottom: 10px;
  }
}