/* =============================================================
 * Wolfoo Spot the Difference — GamePix build
 * style.css
 * ============================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #bfe3f5 url("../assets/ui/bg-menu.png") center center / cover no-repeat;
  --gold: #f4b823;
  --green: #4ad66d;
  --blue: #3aa8ff;
  --red: #ff5670;
  --ink: #5a3e1b;              /* brown text on cream/pastel */
  --ink-soft: #8a6d3b;
  --cream: #fff6db;
  --cream-2: #fff0c2;
  --panel: rgba(255,255,255,0.72);
  --panel-border: #e6bd6a;     /* warm gold border */
  --font: 'Baloo 2', 'Nunito', 'Segoe UI', system-ui, sans-serif;
}
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.btn {
  border-radius: 16px; padding: 14px 12px; font-weight: 800; font-size: 17px;
  color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.35);
  transition: transform .08s, filter .08s; display: inline-flex; align-items: center; gap: 8px;
  justify-content: center; background: transparent;
}
.btn:active { transform: translateY(3px) scale(.985); filter: brightness(.94); }
.btn:disabled { opacity: .45; cursor: default; transform: none; filter: grayscale(.3); }
/* Glossy Wolfoo buttons drawn with a 9-slice border-image so the rounded caps
   never stretch into points (source art is 488×200, cap radius ≈ 100px ≈ 21%). */
.btn-green, .btn-blue, .btn-gold, .btn-red {
  border-style: solid; border-color: transparent; border-width: 0 28px;
  border-image-slice: 0 21% fill; border-image-repeat: stretch;
}
.btn-sm.btn-green, .btn-sm.btn-blue, .btn-sm.btn-gold, .btn-sm.btn-red { border-width: 0 18px; }
.btn-green { border-image-source: url("../assets/ui/btn-green.png"); }
.btn-blue  { border-image-source: url("../assets/ui/btn-blue.png"); }
.btn-gold  { border-image-source: url("../assets/ui/btn-orange.png"); }
.btn-red   { border-image-source: url("../assets/ui/btn-red.png"); }
.btn-ghost { background: var(--cream); border: 2px solid var(--panel-border); color: var(--ink);
  text-shadow: none; box-shadow: 0 3px 0 rgba(122,78,30,.18); }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------- Top HUD (coins / stars / rank) ---------- */
.hud {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top));
  flex-wrap: wrap;
}
.hud .pill {
  background: var(--cream); border: 2px solid var(--panel-border); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 15px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 0 rgba(122,78,30,.18);
}
.hud .pill .ic { font-size: 17px; }
.hud .spacer { flex: 1; }
/* real image icons (coin / star / lock) — replaces plastic emoji */
.ico { height: 20px; width: 20px; object-fit: contain; vertical-align: middle; display: inline-block; }
.hud .pill .ico { height: 22px; width: 22px; margin-right: 2px; }
.mag { width: 18px; height: 18px; vertical-align: -3px; object-fit: contain; }
.reward-line .ico { height: 24px; width: 24px; }
.btn .ico { height: 18px; width: 18px; }
.card .ico, .section-h .ico { height: 17px; width: 17px; }
.gate .ico { height: 15px; width: 15px; vertical-align: -2px; }
.world-head .gate { display: inline-flex; align-items: center; gap: 3px; }

/* ---------- Generic screen scaffold ---------- */
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen-body { flex: 1; overflow-y: auto; padding: 8px 16px 24px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none; }             /* hide scrollbar (Firefox/IE), keep scroll */
.screen-body::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* hide scrollbar (Chrome/Safari/Edge) */
.screen-title { text-align: center; font-size: 26px; font-weight: 900; margin: 6px 0 14px;
  color: #8a3e12; text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.muted { color: var(--ink-soft); }
.back-btn { position: relative; z-index: 5; }

/* ---------- Main menu ---------- */
/* Center the menu block (title + buttons); Wolfoo logo lives in the bottom-left corner.
   `safe center` keeps the title from clipping off the top on short/landscape iframes. */
.menu-body { display: flex; flex-direction: column; justify-content: safe center; padding-bottom: 4vh; }
.menu-hero { text-align: center; padding: 8px 10px 2px; }
/* Wolfoo logo — decorative only, NON-clickable (GamePix: no external links / logo URLs). */
.brand-logo-link { position: fixed; left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom)); width: clamp(96px, 24vw, 155px); z-index: 5;
  pointer-events: none; }
.brand-logo-link.play-logo { width: clamp(76px, 17vw, 116px); opacity: .92; }
.brand-logo { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
/* Sticker-style game title — matches the Wolfoo logo (white outline + gold fill + 3D shadow) */
.menu-title { display: flex; flex-direction: column; align-items: center; line-height: 1;
  margin-top: 2px; transform: rotate(-2.5deg); }
.mt-top { font-weight: 900; font-size: clamp(22px, 7vw, 33px); letter-spacing: 2.5px;
  text-transform: uppercase; color: #ff7a2f;
  text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff,
    0 -1.5px 0 #fff, 0 1.5px 0 #fff, -1.5px 0 0 #fff, 1.5px 0 0 #fff, 0 3px 4px rgba(90,40,10,.3); }
.mt-main { font-weight: 900; font-size: clamp(48px, 15.5vw, 74px); color: #ffce35; line-height: .95;
  letter-spacing: .5px; margin-top: 1px; display: inline-flex; align-items: center; gap: .12em;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff, 0 6px 0 #d67e1e, 0 9px 10px rgba(90,40,10,.4); }
.mt-main .mag { width: .82em; height: .82em; color: #fff; transform: rotate(8deg);
  filter: drop-shadow(0 2px 2px rgba(90,40,10,.4)); flex: none; }
.menu-actions { display: grid; gap: 12px; max-width: 288px; margin: 64px auto 0; padding: 0 16px 24px; }
.menu-actions .btn { font-size: 20px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Menu call-to-action pills (Continue / Shop / Missions) — icon left-aligned so all 3 line up */
.menu-cta { font-size: 20px; gap: 12px; justify-content: flex-start; padding-left: 14px; }
.cta-ic { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.26);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.15); }
.cta-ic svg { width: 19px; height: 19px; color: #fff; }

.daily-banner {
  max-width: 360px; margin: 0 auto 12px; background: linear-gradient(#fff8e1,#ffe9a8);
  border: 3px solid var(--panel-border); border-radius: 18px; padding: 12px 14px; display:flex; align-items:center; gap:12px;
  cursor: pointer; color: var(--ink); box-shadow: 0 4px 0 rgba(122,78,30,.18);
}
.daily-banner .gift { width: 48px; height: 48px; object-fit: contain; flex: none; animation: wobble 1.2s ease-in-out infinite; }
/* Daily-reward popup gift (replaces the old 🎁 emoji) */
.daily-gift { width: 90px; height: 90px; object-fit: contain; display: block; margin: 6px auto 4px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.22)); animation: wobble 1.4s ease-in-out infinite; }
/* Mission-screen icons (Wolfoo-style, replace emoji) */
.ach-ic { width: 46px; height: 46px; object-fit: contain; flex: none; }
.ach-lock { width: 26px; height: 26px; object-fit: contain; flex: none; opacity: .8; }
.rw-gift { width: 17px; height: 17px; object-fit: contain; vertical-align: -4px; }
.sh-ic { width: 24px; height: 24px; object-fit: contain; vertical-align: -6px; margin-right: 3px; }
.title-ic { width: 32px; height: 32px; object-fit: contain; vertical-align: -7px; margin-right: 5px; }
.daily-banner.claimed { opacity:.6; border-color: var(--panel-border); cursor: default; }
.daily-banner.claimed .gift { animation:none; }
@keyframes wobble { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }

/* ---------- World map ---------- */
.world { background: linear-gradient(#fff8e1,#ffedbe); border: 3px solid var(--panel-border); border-radius: 22px;
  padding: 16px 14px 14px; margin: 0 auto 16px; max-width: 480px; color: var(--ink);
  box-shadow: 0 4px 0 rgba(122,78,30,.18), inset 0 0 0 2px rgba(255,255,255,.5); }
.world.locked { opacity: .6; }
.world-head { display:flex; align-items:center; gap:10px; margin-bottom: 12px; }
.world-head .em { font-size: 30px; }
.world-head .nm { font-weight: 900; font-size: 19px; color:#8a3e12; }
.world-head .gate { margin-left:auto; font-size: 13px; font-weight:800; background: #fff3cf;
  border: 2px solid var(--panel-border); padding: 4px 10px; border-radius:999px; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* Level badges — exact GamePix assets (cream tile / locked tile) */
.level-node {
  aspect-ratio: 1/1; border: none; padding: 0; position: relative;
  background: url("../assets/ui/lvl-btn.png") center / 100% 100% no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  transition: transform .1s;
}
.level-node:active { transform: translateY(2px) scale(.95); }
.level-node.locked { background-image: url("../assets/ui/lvl-btn-lock.png"); }
.node-num { font-size: clamp(18px, 5.2vw, 25px); font-weight: 900; color: #5a3e1b; line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.node-diff { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: -.2px; line-height: 1; }
.node-diff.easy   { color: #1b8a3e; }
.node-diff.medium { color: #1565c0; }
.node-diff.hard   { color: #8e24aa; }
.node-diff.expert { color: #d84315; }
.node-stars { order: -1; display:flex; gap: 1px; margin-bottom: 1px; }  /* stars ABOVE the number */
.node-stars img { width: 12px; height: 12px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.node-stars img.off { filter: grayscale(1) opacity(.35); }
.node-lock { position:absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; object-fit: contain; }

/* Gameplay keeps the candy backdrop + white text (like the GamePix in-game screen) */
.play { background: linear-gradient(rgba(18,10,40,.42), rgba(18,10,40,.42)),
    url("../assets/ui/bg-menu.png") center / cover no-repeat, #6a7c93; color: #fff; }
.play .muted { color: rgba(255,255,255,.85); }

/* ---------- Play screen ---------- */
.play { flex:1; display:flex; flex-direction:column; min-height:0; }
.play-bar { display:flex; align-items:center; gap:10px; padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top)); }
.play-bar .lvl { font-weight:900; color: var(--gold); font-size: 17px; text-shadow: 0 2px 3px rgba(0,0,0,.5); }
.play-bar .found { font-weight:900; font-size: 18px; color: var(--ink); background: var(--cream); border:2px solid var(--panel-border);
  border-radius:999px; padding:5px 14px; box-shadow: 0 2px 0 rgba(122,78,30,.18);
  display:inline-flex; align-items:center; gap:5px; }
.play-bar .found .chk { width: 20px; height: 20px; }
.play-bar .found.complete { background: rgba(255,196,0,.9); border-color: var(--gold); }
.play-bar .hearts { font-size: 18px; letter-spacing: 1px; }
.play-bar .timer { font-weight:900; font-size:17px; display:inline-flex; align-items:center; gap:3px; text-shadow: 0 2px 3px rgba(0,0,0,.5); }
.play-bar .timer.low { color: var(--red); animation: pulse .6s infinite; }
.clock-ic { width: 24px; height: 24px; object-fit: contain; }
.tool-ic-img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.play-bar .spacer { flex:1; }
.combo-badge { position: fixed; top: 54px; left: 50%; transform: translateX(-50%) scale(0);
  background: linear-gradient(#ff8a3d,#ff4d6d); font-weight:900; font-size: 22px; padding: 6px 18px;
  border-radius: 999px; z-index: 60; box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: transform .18s cubic-bezier(.5,1.8,.5,1); }
.combo-badge.show { transform: translateX(-50%) scale(1); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.images-wrap { flex:1; display:flex; gap:8px; padding: 4px 8px 8px; min-height:0; align-items:center; justify-content:center; }
.img-slot { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; }
.img-frame {
  position: relative; width: 100%; aspect-ratio: 16/9; max-height: 100%;
  border-radius: 12px; overflow: hidden; border: 2px solid var(--panel-border); background:#1a1a2e;
  touch-action: none;
}
.img-canvas { position:absolute; inset:0; transform-origin: 0 0; will-change: transform; }
.img-canvas img { width:100%; height:100%; object-fit: fill; display:block; pointer-events:none; }
.marker, .hint-glow {
  position:absolute; transform: translate(-50%,-50%); width:9%; aspect-ratio:1/1; border-radius:50%;
  pointer-events:none;
}
.marker { border: 4px solid var(--green);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.3); animation: pop .4s ease-out; }
.hint-glow { border: 4px solid var(--gold);
  box-shadow: inset 0 0 8px rgba(255,213,74,.9), 0 0 12px 4px rgba(255,213,74,.85); animation: hintpulse .8s ease-in-out infinite; }
@keyframes pop { 0%{transform:translate(-50%,-50%) scale(0);opacity:0} 60%{transform:translate(-50%,-50%) scale(1.2)} 100%{transform:translate(-50%,-50%) scale(1)} }
@keyframes hintpulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85} 50%{transform:translate(-50%,-50%) scale(1.25);opacity:1} }

@media (max-width: 780px) {
  /* Portrait / narrow: stack the two scenes and size each one by the available
     HEIGHT (half the images area) so both fit WITHOUT pushing the HUD or the
     help bar off-screen. width follows the 16:9 ratio, capped to the width. */
  .images-wrap { flex-direction: column; }
  .img-slot { width:100%; min-height:0; }
  .img-frame { width:auto; height:100%; max-width:100%; }
}

/* zoom controls — horizontal bar BELOW the images (no longer covering the scene) */
.zoom-bar { display: flex; justify-content: center; gap: 12px; padding: 8px 0 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.zoom-btn { width: 46px; height: 46px; border-radius: 13px; font-size: 24px; font-weight: 900; line-height: 1;
  background: var(--cream); color: #7a4e1e; border: 2px solid var(--panel-border);
  box-shadow: 0 3px 0 rgba(122,78,30,.28); }
.zoom-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(122,78,30,.28); }
.zoom-btn:disabled { opacity: .45; }

/* Help buttons (below the images): +15s time token & hint — icons equal size */
.help-bar { display: flex; justify-content: center; gap: 18px; padding: 8px 0 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.help-btn { position: relative; width: 60px; height: 60px; border-radius: 16px; padding: 0;
  background: var(--cream); border: 2px solid var(--panel-border); box-shadow: 0 3px 0 rgba(122,78,30,.28);
  display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.help-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(122,78,30,.28); }
.help-btn.empty, .help-btn:disabled { opacity: .5; }
.help-ic { width: 40px; height: 40px; object-fit: contain; }
.help-btn .mini-badge { top: -5px; right: -5px; }
/* Out of stock → the item stays disabled showing 0; a separate "watch ad → +1"
   button appears to its LEFT. */
.help-group { position: relative; display: inline-flex; }
/* Watch-ad icon pinned to the item's TOP-LEFT corner (only shown when out of stock). */
.ad-btn { position: absolute; top: -13px; left: -13px; z-index: 4; padding: 0;
  background: none; border: none; cursor: pointer; display: block;
  animation: adPulse 1.15s ease-in-out infinite; transform-origin: top left; }
.ad-btn:active { transform: scale(.9); animation: none; }
.ad-ic { width: 40px; height: auto; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
@keyframes adPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* 30s item cooldown — overlay shows remaining seconds, button stays visible. */
.help-btn.cooling { opacity: 1; cursor: default; }
.help-btn .cd-overlay {
  position: absolute; inset: 0; border-radius: inherit; z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,18,50,.62); color: #fff; font-weight: 900; font-size: 17px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* click feedback */
.click-x { position: fixed; transform: translate(-50%,-50%); font-size: 40px; font-weight:900; color: var(--red);
  z-index: 70; pointer-events:none; text-shadow: 0 2px 6px rgba(0,0,0,.5); animation: xpop .5s ease-out forwards; }
@keyframes xpop { 0%{transform:translate(-50%,-50%) scale(0)} 40%{transform:translate(-50%,-50%) scale(1.3)} 100%{transform:translate(-50%,-90%) scale(1);opacity:0} }

/* ---------- Overlays / modals ---------- */
.overlay { position: fixed; inset:0; background: rgba(10,4,26,.72); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; z-index: 100; padding: 16px; }
/* Cream candy panel — matches the original khung-pause / khung-setting frames */
.modal { background: linear-gradient(#fff8e1, #ffedbe); border: 4px solid #d69a3a;
  border-radius: 26px; padding: 16px 18px; width: min(94vw, 410px); text-align:center; color:#6a441c;
  box-shadow: 0 0 0 4px #7a4e1e, 0 22px 60px rgba(0,0,0,.55); max-height: 94vh; overflow-y: auto; position: relative; }
.modal-close { position:absolute; top:8px; right:8px; width:40px; height:40px; padding:0; z-index:3;
  background:none; border:none; cursor:pointer; transition:transform .1s; }
.modal-close:active { transform:scale(.9); }
.modal-close img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.modal h2 { font-size: clamp(22px, 6vw, 27px); margin-bottom: 4px; color:#9a3f10; text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.modal p { color:#6a441c; margin: 2px 0; }
.modal .muted { color:#a07c48; opacity:1; }
/* Result stars (3-star arc, middle highest) — compact so the popup fits without scrolling */
.result-stars { display:flex; justify-content:center; align-items:flex-start; gap: 8px; margin: 6px 0 2px; }
.result-stars img { width: clamp(38px, 11vw, 48px); height: clamp(38px, 11vw, 48px); filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
  animation: starPop .45s cubic-bezier(.5,1.7,.5,1) backwards; }
.result-stars img:nth-child(1) { animation-delay: .05s; }
.result-stars img:nth-child(2) { width: clamp(48px, 14vw, 60px); height: clamp(48px, 14vw, 60px); margin-top: -8px; animation-delay: .22s; }
.result-stars img:nth-child(3) { animation-delay: .38s; }
.result-stars img.off { filter: grayscale(1) brightness(1.5) opacity(.4); animation: none; }
@keyframes starPop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.win-preview { width: min(72%, 250px); aspect-ratio: 16/9; max-height: 26vh; object-fit: cover;
  border-radius: 12px; border: 3px solid var(--panel-border); margin: 4px auto 2px; display: block;
  box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.modal .reward-line { display:flex; justify-content:center; align-items:center; gap:14px; font-weight:900; font-size:17px;
  margin: 6px 0; flex-wrap:wrap; color:#7a3e12; }
.modal .actions { display:grid; gap:8px; margin-top: 10px; }
.modal .actions.two { grid-template-columns: 1fr 1fr; }
.modal .actions .btn { padding: 11px 12px; }
.modal .menu-cta { font-size: 18px; }
.modal .cta-ic { width: 28px; height: 28px; }
.modal .cta-ic svg { width: 17px; height: 17px; }

.mode-pick { display:grid; gap:12px; margin-top: 12px; }
.mode-card { text-align:left; background:#fff6df; border:2px solid #e6bd6a; border-radius:16px;
  padding:14px; display:flex; gap:12px; align-items:center; cursor:pointer; color:#6a441c;
  box-shadow: 0 3px 0 rgba(122,78,30,.2); transition: transform .08s; }
.mode-card:active { transform: translateY(2px); }
.mode-card .em { font-size:34px; }
.mode-card .mode-ic { width:54px; height:54px; object-fit:contain; flex:none; }
.mode-card b { font-size:18px; color:#7a3e12; } .mode-card p { font-size:13px; color:#a07c48; }

/* Image icon buttons (pause / settings) — original Wolfoo UI */
.icon-btn { width: 46px; height: 46px; padding: 0; display:flex; align-items:center; justify-content:center;
  background: none; transition: transform .1s; }
.icon-btn:active { transform: scale(.9); }
.icon-btn img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); pointer-events:none; }

/* ---------- Shop / Missions ---------- */
.list { max-width: 480px; margin: 0 auto; display:grid; gap:10px; }
.card { background: linear-gradient(#fff8e1,#fff0c2); border:2px solid var(--panel-border); border-radius:16px; padding:14px;
  display:flex; align-items:center; gap:12px; color: var(--ink);
  box-shadow: 0 3px 0 rgba(122,78,30,.15); }
/* Shop action buttons — buy (coins) & Watch (ad) rendered at the SAME width &
   height so the right column lines up. The Watch icon is shrunk to match the
   coin icon so neither button is taller than the other. */
/* ×5 items offer two choices (coins + Watch) stacked with an "or" divider. */
.card .shop-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex: none; width: 156px; }
.card .shop-actions .shop-btn { width: 100%; min-width: 0; }
.card .shop-or { display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #b98a3c; }
.card .shop-or i { flex: 1; height: 2px; border-radius: 2px; background: rgba(185,138,60,.35); }
.card .shop-btn { min-width: 138px; height: 40px; box-sizing: border-box; padding: 0 14px; gap: 6px; white-space: nowrap; }
/* "Watch Ad" reward button — FREE badge makes the ad option pop. */
.card .shop-watch { position: relative; overflow: visible; }
.card .shop-watch .free-badge {
  position: absolute; top: -9px; right: -7px; z-index: 3;
  background: linear-gradient(180deg,#ff5b5b,#e02f2f); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: .5px; line-height: 1;
  padding: 3px 7px; border-radius: 999px; border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.35); transform: rotate(9deg); text-shadow: none;
}
.card .shop-btn .cta-ic { width: 20px; height: 20px; }
.card .shop-btn .cta-ic svg { width: 12px; height: 12px; }
.card .shop-btn .ico { height: 18px; width: 18px; }
.card .em { font-size: 30px; }
.shop-ic { width: 40px; height: 40px; object-fit: contain; flex: none; }
.card .grow { flex:1; }
.card .grow b { font-size:16px; } .card .grow p { font-size:13px; opacity:.85; }
.progress { height:8px; background: rgba(122,78,30,.2); border-radius:6px; overflow:hidden; margin-top:6px; }
.progress > i { display:block; height:100%; background: var(--green); }
.section-h { max-width:480px; margin: 16px auto 8px; font-weight:900; font-size:18px; color: #8a3e12;
  text-shadow: 0 1px 0 rgba(255,255,255,.6); }

/* ---------- Toast + confetti ---------- */
/* Candy-cream toast — matches the modal/pill style (gold border, brown text, image icons). */
.toast { position: fixed; left:50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(#fff8e1, #ffedbe); color:#6a441c;
  border: 3px solid var(--panel-border); box-shadow: 0 0 0 3px rgba(122,78,30,.22), 0 10px 26px rgba(0,0,0,.32);
  padding: 9px 16px; border-radius: 22px; font-weight:800; font-size:15px; line-height:1.15;
  display:flex; align-items:center; gap:10px; justify-content:center;
  z-index: 200; opacity:0; transition: opacity .25s, transform .25s; pointer-events:none; max-width: 90vw; text-align:left; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
.toast .ico { height: 22px; width: 22px; }
.toast .toast-ic { height: 34px; width: 34px; flex: none; }
.toast .toast-txt { text-align:left; }
.toast .toast-txt b { color:#c8791a; font-weight:900; }
.toast .toast-reward { display:inline-flex; align-items:center; gap:3px; color:#c8791a; font-weight:900;
  background: var(--cream); border:2px solid var(--panel-border); border-radius:999px; padding:3px 10px 3px 6px; flex:none; }
.fx-layer { position: fixed; inset:0; pointer-events:none; z-index:150; overflow:hidden; }
.confetti { position:absolute; top:-30px; font-size:24px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .3; } }
.spark { position: fixed; pointer-events:none; z-index:80; transition: all .6s cubic-bezier(.3,.9,.4,1); }

.center-col { display:flex; flex-direction:column; align-items:center; gap:6px; }
.muted { opacity:.7; font-size: 13px; }
.badge-new { background: var(--red); border-radius:999px; font-size:11px; padding:2px 7px; font-weight:800; }
.tab-row { display:flex; gap:8px; justify-content:center; margin-bottom:12px; }

/* ===== GamePix-style top-bar tools + settings/pause overlays ===== */
.hud-set { width: 40px; height: 40px; }
.play-bar .icon-btn { width: 42px; height: 42px; }
.relax-pill { background: rgba(255,255,255,.85); color:#5a3e1b; border:2px solid var(--panel-border);
  border-radius:999px; padding:4px 12px 4px 8px; font-weight:800; font-size:14px;
  display:inline-flex; align-items:center; gap:5px; }
.relax-pill .pill-ic { width:24px; height:24px; object-fit:contain; }

/* top-bar tool buttons (hint / +15s) with a count badge */
.tool-top { position: relative; }
.tool-top .tool-ic { font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.hint-mag { color:#fff; display:flex; align-items:center; justify-content:center; }
.hint-mag .mag { width: 26px; height: 26px; }
.tool-top.empty { opacity: .5; }
.mini-badge { position:absolute; top:-3px; right:-3px; background:var(--red); color:#fff;
  font-size:11px; font-weight:900; min-width:17px; height:17px; line-height:16px; border-radius:999px;
  padding:0 3px; box-shadow:0 1px 2px rgba(0,0,0,.4); }

/* framed overlays reusing the real khung-pause / khung-setting art */
/* Pause & Settings popups — share the .modal card style + .modal-close X */
.pause-modal { width: min(92vw, 340px); }
.pause-btns { display:flex; flex-direction:column; gap:11px; width:100%; margin-top: 10px; }
.pause-btns .btn { width:100%; }
.setting-modal { width: min(90vw, 360px); }
.settings-row { display:flex; gap: clamp(24px,9vw,48px); align-items:center; justify-content:center; margin-top: 16px; }
.set-item { display:flex; flex-direction:column; align-items:center; gap:8px; }
.set-toggle { background:none; border:none; padding:0; cursor:pointer; width:clamp(58px,17vw,78px); transition:transform .12s; }
.set-toggle:active { transform:scale(.92); }
.set-toggle.off { opacity:.5; filter:grayscale(.6); }
.set-toggle img, .set-toggle .music-svg { width:100%; height:auto; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.set-label { font-weight:800; color:#5c3700; font-size: clamp(14px,4.5vw,18px); }

/* ===== Level select — image thumbnail grid (no numbers/difficulty/titles) ===== */
.lvl-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
  max-width: 560px; margin: 0 auto; }
.lvl-card { position: relative; border: 3px solid var(--panel-border); border-radius: 16px;
  overflow: visible; padding: 0; background: #241a3a; aspect-ratio: 16/9; cursor: pointer;
  box-shadow: 0 4px 0 rgba(122,78,30,.25); transition: transform .1s; display:block; }
.lvl-card:active { transform: translateY(2px) scale(.98); }
.lvl-card .thumb { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 13px;
  filter: saturate(1.1) contrast(1.06) brightness(.94); }  /* tame glare, boost definition */
/* soft inner frame + bottom vignette → gives depth so bright scenes don't glare */
.lvl-card::after { content:''; position:absolute; inset:0; border-radius:13px; pointer-events:none; z-index:1;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), inset 0 -22px 30px rgba(18,8,38,.3); }
.lvl-card.locked { cursor: default; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.lvl-card.locked::after { box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.lvl-card.locked .thumb { filter: grayscale(.7) brightness(.5); }
.lock-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.lock-ov .lock-ic { width: 30%; max-width: 46px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
/* completed stars — gold 3-star arc peeking over the top edge (middle higher & bigger) */
.card-stars { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: flex-start; gap: 0; }
.card-stars img { width: 19px; height: 19px;
  filter: drop-shadow(0 0 1.5px rgba(110,60,10,.95)) drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.card-stars img:nth-child(1) { transform: rotate(-24deg) translateY(5px); margin-right: -1px; }
.card-stars img:nth-child(2) { width: 25px; height: 25px; transform: translateY(-1px); }
.card-stars img:nth-child(3) { transform: rotate(24deg) translateY(5px); margin-left: -1px; }
.card-stars img.off { filter: grayscale(1) brightness(1.7) opacity(.55); }

/* =============================================================
 * Responsive — short / landscape iframes (GamePix runs at ≥640×480)
 * Keep menu title + result/pause/settings modals fully on-screen.
 * ============================================================= */
/* Result / lose / pause / settings modals shrink as height drops (no scrollbar). */
@media (max-height: 620px) {
  .overlay { padding: 10px; }
  .modal { padding: 12px 16px; border-radius: 22px; max-height: 96vh; }
  .modal h2 { font-size: clamp(18px, 4.6vh, 24px); margin-bottom: 2px; }
  .win-preview { max-height: 19vh; width: min(58%, 200px); margin: 2px auto; }
  .result-stars { margin: 3px 0 1px; }
  .result-stars img { width: clamp(28px, 7.5vh, 40px); height: clamp(28px, 7.5vh, 40px); }
  .result-stars img:nth-child(2) { width: clamp(36px, 9.5vh, 50px); height: clamp(36px, 9.5vh, 50px); margin-top: -6px; }
  .modal .reward-line { font-size: 15px; margin: 3px 0; }
  .modal .actions { gap: 6px; margin-top: 6px; }
  .modal .actions .btn { padding: 8px 12px; }
  .modal .menu-cta { font-size: 16px; }
  .modal .cta-ic { width: 24px; height: 24px; }
  .pause-btns { gap: 8px; margin-top: 6px; }
}
@media (max-height: 470px) {
  .overlay { padding: 6px; }
  .modal { padding: 9px 14px; }
  .win-preview { max-height: 15vh; }       /* keep the image, just small */
  .modal h2 { font-size: 17px; margin-bottom: 1px; }
  .result-stars { margin: 1px 0; }
  .result-stars img { width: 26px; height: 26px; }
  .result-stars img:nth-child(2) { width: 32px; height: 32px; margin-top: -4px; }
  .modal .reward-line { font-size: 14px; margin: 2px 0; }
  .modal .actions { gap: 5px; margin-top: 5px; }
  .modal .actions .btn { padding: 6px 12px; }
  .modal .menu-cta { font-size: 15px; }
}
/* Landscape + short: use the WIDTH — 2-column WIN modal (image left, buttons right).
   :has() scopes it to the WIN modal only (lose / mode-pick / pause stay 1-column). */
@media (orientation: landscape) and (max-height: 560px) {
  .modal:has(.win-preview) {
    display: grid; width: min(94vw, 600px); column-gap: 18px; align-items: center;
    grid-template-columns: 42% 1fr;
    grid-template-areas:
      "title   title"
      "preview stars"
      "preview reward"
      "preview actions";
  }
  .modal:has(.win-preview) h2 { grid-area: title; margin-bottom: 6px; }
  .modal:has(.win-preview) .win-preview {
    grid-area: preview; width: 100%; height: 100%; max-height: 42vh;
    aspect-ratio: 4/3; object-fit: cover; margin: 0; align-self: center;
  }
  .modal:has(.win-preview) .result-stars { grid-area: stars; margin: 0 0 2px; }
  .modal:has(.win-preview) .reward-line { grid-area: reward; margin: 2px 0; }
  .modal:has(.win-preview) .actions { grid-area: actions; margin-top: 4px; }
}
/* Menu title (SPOT THE / Difference) must never clip; shrink title + button gap. */
@media (max-height: 640px) {
  .mt-top { font-size: clamp(17px, 5vw, 27px); }
  .mt-main { font-size: clamp(38px, 12vw, 60px); }
  .menu-actions { margin-top: 26px; }
}
@media (max-height: 520px) {
  .menu-body { padding-top: 6px; padding-bottom: 6px; }
  .menu-hero { padding: 2px 10px 0; }
  .menu-title { margin-top: 0; }
  .mt-top { font-size: clamp(14px, 4.4vw, 20px); letter-spacing: 1.5px; }
  .mt-main { font-size: clamp(30px, 9.5vw, 44px); }
  .menu-actions { margin-top: 12px; gap: 9px; padding-bottom: 8px; }
  .menu-actions .btn, .menu-actions .menu-cta { font-size: 17px; }
  .menu-actions .cta-ic { width: 26px; height: 26px; }
}