/* FROG MERGE — base styles + HUD. Pixel UI in the style of Stu's Debunk: sand panels, ink borders, offset shadows.
   Shared classes for panels (panels.css builds on them): .db-btn (.go .warn .blue .danger .big), .db-panel, .ico */
@font-face { font-family: 'Pixelify'; src: url('fonts/pixelify-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pixelify'; src: url('fonts/pixelify-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pixelify'; src: url('fonts/pixelify-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Press2P'; src: url('fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink:#181425; --night:#262b44; --slate:#3a4466; --steel:#5a6988; --fog:#8b9bb4; --mist:#c0cbdc; --white:#ffffff;
  --deepsea:#124e89; --sea:#0099db; --sky:#2ce8f5; --pine:#193c3e; --forest:#265c42; --leaf:#3e8948; --grass:#63c74d;
  --lemon:#fee761; --gold:#feae34; --orange:#f77622; --red:#e43b44; --crimson:#a22633; --plum:#3e2731; --brown:#733e39;
  --clay:#b86f50; --tan:#e4a672; --sand:#ead4aa; --rust:#be4a2f; --copper:#d77643; --magenta:#ff0044; --purple:#68386c;
  --pink:#b55088; --rose:#f6757a;
  --font: 'Pixelify', 'Trebuchet MS', system-ui, sans-serif;
  --font-title: 'Press2P', 'Pixelify', monospace;
  --u: clamp(12px, 0.95vw + 0.6vh, 20px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); }
body { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; font-family: var(--font); color: var(--white); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button { font-family: var(--font); }
#game { position: fixed; inset: 0; overflow: hidden; }
#pond { z-index: 0; }

/* icons: <span class="ico" data-ico="fly"> gets a pixel canvas */
.ico { display: inline-block; width: 1.2em; height: 1.2em; flex: none; vertical-align: middle; }
.ico canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* ---- Debunk controls ---- */
.db-btn { font-family: var(--font); font-weight: 700; font-size: calc(var(--u) * 1.0); line-height: 1; color: var(--ink);
  background: var(--sand); border: 0; padding: .65em 1em .75em; margin: .2em; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; letter-spacing: .02em;
  box-shadow: 0 -.18em 0 0 rgba(24,20,37,.35) inset, 0 0 0 .16em var(--ink), .16em .26em 0 .16em rgba(24,20,37,.55);
  transition: transform .06s, filter .1s; touch-action: manipulation; }
.db-btn:hover { filter: brightness(1.08); }
.db-btn:active { transform: translateY(.14em); box-shadow: 0 -.06em 0 0 rgba(24,20,37,.35) inset, 0 0 0 .16em var(--ink), .1em .12em 0 .16em rgba(24,20,37,.55); }
.db-btn:focus-visible { outline: .18em dashed var(--lemon); outline-offset: .3em; }
.db-btn.big { font-size: calc(var(--u) * 1.25); padding: .75em 1.3em .85em; }
.db-btn.go { background: var(--grass); } .db-btn.warn { background: var(--gold); } .db-btn.blue { background: var(--sky); }
.db-btn.danger { background: var(--rose); } .db-btn.on { background: var(--lemon); }
.db-btn[disabled], .db-btn.off { opacity: .5; pointer-events: none; filter: grayscale(.4); }
.db-panel { background: var(--sand); color: var(--ink); box-shadow: 0 0 0 .18em var(--ink), .3em .4em 0 .18em rgba(24,20,37,.5); padding: 1em 1.2em; }

/* ---- HUD ---- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; font-size: var(--u); }
#hud button { pointer-events: auto; }
#top { position: absolute; left: calc(.6em + var(--safe-l)); right: calc(.6em + var(--safe-r)); top: calc(.5em + var(--safe-t)); display: flex; align-items: flex-start; gap: .6em; }
.pill { display: inline-flex; align-items: center; gap: .4em; background: rgba(24,20,37,.82); padding: .35em .8em .4em .5em;
  box-shadow: 0 0 0 .16em var(--ink), .16em .24em 0 .16em rgba(24,20,37,.4); pointer-events: auto; }
#fliesPill .ico { width: 1.9em; height: 1.9em; }
#flies { font-family: var(--font-title); font-weight: 400; font-size: 1.45em; color: var(--lemon); letter-spacing: .02em; text-shadow: .12em .12em 0 var(--ink); }
#rate { font-weight: 700; color: var(--mist); font-size: .95em; margin-left: .2em; }
#fliesPill.bump #flies { animation: bump .18s ease-out; }
@keyframes bump { 50% { transform: scale(1.12); } }
#chips { flex: 1; display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; }
.chip { background: var(--lemon); color: var(--ink); font-weight: 700; padding: .3em .6em; box-shadow: 0 0 0 .14em var(--ink); display: inline-flex; gap: .3em; align-items: center; }
.chip.gold { background: var(--gold); } .chip.auto { background: var(--sky); }
#topR { display: flex; gap: .5em; }
.sq { width: 2.6em; height: 2.6em; border: 0; background: var(--sand); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 -.16em 0 0 rgba(24,20,37,.3) inset, 0 0 0 .15em var(--ink), .14em .22em 0 .15em rgba(24,20,37,.45); }
.sq .ico { width: 1.6em; height: 1.6em; }
.sq:active { transform: translateY(.12em); }

.side { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .75em; }
#sideL { left: calc(.6em + var(--safe-l)); } #sideR { right: calc(.6em + var(--safe-r)); }
.side-btn { position: relative; width: 4.4em; border: 0; background: var(--sand); color: var(--ink); cursor: pointer; padding: .45em .2em .35em;
  display: flex; flex-direction: column; align-items: center; gap: .15em; font-weight: 700; font-size: .92em;
  box-shadow: 0 -.18em 0 0 rgba(24,20,37,.3) inset, 0 0 0 .16em var(--ink), .16em .26em 0 .16em rgba(24,20,37,.45); }
.side-btn .ico { width: 2.1em; height: 2.1em; }
.side-btn:active { transform: translateY(.12em); }
.side-btn .lbl { white-space: nowrap; }
.badge { position: absolute; right: -.45em; top: -.45em; min-width: 1.3em; height: 1.3em; background: var(--red); color: var(--white); font-style: normal; font-weight: 700;
  font-size: .8em; display: grid; place-items: center; box-shadow: 0 0 0 .14em var(--ink); animation: badge 1s steps(2) infinite; padding: 0 .2em; }
@keyframes badge { 50% { transform: translateY(-.2em); } }

#bottom { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(.7em + var(--safe-b)); display: flex; align-items: center; gap: .8em; }
.buy { position: relative; overflow: hidden; border: 0; cursor: pointer; background: var(--grass); color: var(--ink); min-width: 13em; height: 3.6em;
  display: flex; align-items: center; gap: .5em; padding: 0 1em 0 .4em; font-weight: 700; font-size: 1.05em;
  box-shadow: 0 -.22em 0 0 rgba(24,20,37,.3) inset, 0 0 0 .18em var(--ink), .18em .3em 0 .18em rgba(24,20,37,.5); }
.buy:active { transform: translateY(.14em); }
.buy.poor { background: var(--steel); color: var(--mist); }
.buy .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(99,199,77,.55); z-index: 0; transition: width .2s linear; }
.buy .portrait { position: relative; z-index: 1; width: 3.4em; height: 3.1em; flex: none; }
.buy .portrait canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.buy .txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .15em; }
.buy .what { font-size: .95em; white-space: nowrap; }
.buy .cost { display: inline-flex; align-items: center; gap: .25em; font-family: var(--font-title); font-weight: 400; font-size: .85em; }
.buy .cost .ico { width: 1.5em; height: 1.5em; }
.buy.full .what::after { content: ' (pond full)'; font-size: .8em; }
#eggTimer { display: flex; align-items: center; gap: .3em; background: rgba(24,20,37,.82); padding: .3em .5em; box-shadow: 0 0 0 .15em var(--ink); }
#eggTimer .ico { width: 1.8em; height: 1.8em; }
#eggTimer .bar { width: 3.2em; height: .6em; background: var(--slate); box-shadow: 0 0 0 .12em var(--ink); }
#eggTimer .bar i { display: block; height: 100%; width: 0; background: var(--sky); }
.shop .ico { width: 1.7em; height: 1.7em; }

/* sell zone (shown while dragging a frog) */
#sell { position: absolute; z-index: 3; left: 50%; bottom: calc(.7em + var(--safe-b)); transform: translateX(-50%); font-size: calc(var(--u) * 1.1);
  min-width: 15em; height: 3.4em; justify-content: center;
  background: var(--gold); color: var(--ink); font-weight: 700; padding: 0 1em; box-shadow: 0 0 0 .16em var(--ink), .16em .26em 0 .16em rgba(24,20,37,.5);
  display: flex; align-items: center; gap: .4em; pointer-events: none; }
#sell .ico { width: 1.6em; height: 1.6em; }
#sell::after { content: 'for ' attr(data-v) ' flies'; }
#sell.hot { background: var(--lemon); transform: translateX(-50%) scale(1.12); }
#sell[hidden] { display: none; }

/* tip bubble (tutorial) */
#tip { position: absolute; z-index: 3; left: 50%; top: calc(4.2em + var(--safe-t)); transform: translateX(-50%); font-size: calc(var(--u) * 1.05);
  background: var(--sand); color: var(--ink); font-weight: 700; padding: .6em 1em; box-shadow: 0 0 0 .16em var(--ink), .16em .26em 0 .16em rgba(24,20,37,.5);
  max-width: min(90vw, 30em); text-align: center; pointer-events: none; animation: tipIn .3s cubic-bezier(.2,1.6,.4,1); }
#tip[hidden] { display: none; }
@keyframes tipIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } }

/* toasts */
#toasts { position: absolute; z-index: 8; left: 50%; top: calc(4.4em + var(--safe-t)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4em; pointer-events: none; font-size: var(--u); }
.toast { background: var(--ink); color: var(--white); font-weight: 700; padding: .5em .9em; box-shadow: 0 0 0 .15em var(--lemon); display: flex; align-items: center; gap: .45em; animation: toastIn .35s cubic-bezier(.2,1.6,.4,1), toastOut .4s ease-in 2.4s forwards; }
.toast .ico { width: 1.5em; height: 1.5em; }
@keyframes toastIn { from { transform: scale(.5); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-.6em); opacity: 0; } }

/* discovery card */
#card { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(24,20,37,.72); font-size: var(--u); }
#card[hidden] { display: none; }
#card .c { position: relative; width: min(88vw, 26em); text-align: center; padding: 1.2em 1.2em 1.1em; animation: cardIn .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes cardIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
#card .new { font-family: var(--font-title); font-size: 1.2em; color: var(--red); letter-spacing: .05em; }
#card .rays { position: relative; height: 11em; display: grid; place-items: center; margin: .3em 0; }
#card .rays::before { content: ''; position: absolute; width: 11em; height: 11em; background: repeating-conic-gradient(var(--lemon) 0 12deg, var(--sand) 12deg 30deg); border-radius: 50%; animation: spin 9s linear infinite; opacity: .75;
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 71%); mask: radial-gradient(circle, #000 55%, transparent 71%); }
@keyframes spin { to { transform: rotate(360deg); } }
#card .rays canvas { position: relative; width: 9.9em; height: 9em; image-rendering: pixelated; animation: popIn .5s cubic-bezier(.2,1.8,.4,1) .15s backwards; }
@keyframes popIn { from { transform: scale(.2); } }
#card .nm { font-family: var(--font-title); font-size: 1.15em; margin: .2em 0 .4em; color: var(--ink); line-height: 1.4; }
#card .tier { font-weight: 700; color: var(--steel); }
#card .bl { font-size: 1.05em; margin: .3em 0 .5em; }
#card .inc { font-weight: 700; color: var(--leaf); }
#card .next { display: flex; align-items: center; justify-content: center; gap: .6em; margin: .6em 0 .7em; font-weight: 700; color: var(--steel); }
#card .next canvas { width: 3.3em; height: 3em; image-rendering: pixelated; }

/* loading */
#loading { position: absolute; inset: 0; z-index: 20; background: var(--night); display: grid; place-content: center; gap: 1em; justify-items: center; transition: opacity .4s; }
#loading .lt { font-family: var(--font-title); color: var(--lemon); font-size: calc(var(--u) * 1.8); text-shadow: .15em .15em 0 var(--ink); }
#loading .lb { width: 12em; height: .8em; background: var(--slate); box-shadow: 0 0 0 .15em var(--ink); font-size: var(--u); }
#loading .lb i { display: block; height: 100%; width: 30%; background: var(--grass); animation: load 1.2s ease-in-out infinite alternate; }
@keyframes load { to { width: 95%; } }
#loading.done { opacity: 0; pointer-events: none; }

/* phones held upright: buttons go to a row above the Buy button */
@media (orientation: portrait) {
  :root { --u: clamp(11px, 2.9vw, 18px); }
  .side { top: auto; transform: none; bottom: calc(5.6em + var(--safe-b)); flex-direction: row; gap: .55em; }
  #sideL { left: calc(.5em + var(--safe-l)); } #sideR { right: calc(.5em + var(--safe-r)); }
  .side-btn { width: 3.7em; font-size: .82em; }
  .side-btn .ico { width: 1.8em; height: 1.8em; }
  #bottom { width: calc(100% - 1em); justify-content: center; gap: .5em; }
  .buy { min-width: 0; flex: 1; max-width: 22em; }
  #top { flex-wrap: wrap; }
  #chips { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; } }
.buy.shake { animation: shake .3s steps(4); }
@keyframes shake { 25% { transform: translateX(-.25em); } 75% { transform: translateX(.25em); } }
.buy.nudge { animation: nudge 1s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateY(-.25em); box-shadow: 0 -.22em 0 0 rgba(24,20,37,.3) inset, 0 0 0 .18em var(--lemon), .18em .3em 0 .18em rgba(24,20,37,.5); } }

#leftCol { display: flex; flex-direction: column; align-items: flex-start; gap: .55em; }
#next { padding: .2em .7em .25em .3em; gap: .35em; }
#next .sil { width: 2.6em; height: 2.4em; }
#next .sil canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
#next .nt { display: flex; flex-direction: column; line-height: 1.15; }
#next small { font-size: .7em; color: var(--fog); font-weight: 700; letter-spacing: .06em; }
#next b { font-size: .9em; color: var(--white); }
@media (orientation: portrait) { #next { display: none; } }
#eggTimer .wait { color: var(--lemon); font-family: var(--font-title); font-weight: 400; font-size: .8em; }
body.ad-busy #game { pointer-events: none; }
body.ad-busy #game * { pointer-events: none !important; }