:root{
  --bg:#ffffff; --bg2:#ffffff; --panel:#ffffff;
  --line:#e5e7eb; --text:#111111; --muted:#6b7280;
  --good:#22c55e; --mid:#fff061; --bad:#e5e7eb;
  --key:#f3f4f6; --key2:#f8fafc;
  --accent:#22c55e; --accent2:#16a34a;
  --L:5; --brand:#212121; --brand-dark:#111111; --brand-contrast:#ffffff;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
html,body{touch-action:manipulation;-ms-touch-action:manipulation}
body{
  margin:0;color:var(--text);
  font:14px/1.5 "Nunito",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:
    radial-gradient(500px 220px at 8% -10%, rgba(34,197,94,.08) 0, transparent 55%),
    radial-gradient(700px 380px at 110% 25%, rgba(34,197,94,.06) 0, transparent 55%),
    var(--bg);
  overscroll-behavior:none;
}

/* remove iOS grey tap flash on interactive elements */
a,button,.btn,.key,.hamburger,.mobile-menu button,[role="button"]{-webkit-tap-highlight-color:transparent}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--brand-dark);background:var(--brand);color:var(--brand-contrast);
}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:36px;height:36px;border-radius:7px;object-fit:cover;cursor:pointer}
.brand h1{margin:0;font-weight:800;display:flex;align-items:center;gap:0;cursor:pointer;
  font-family:"Ubuntu",ui-sans-serif; font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.05}
.brand h1 .pep{color:#22c55e;font-style:italic}
.brand h1 .dle{color:#fff;font-style:italic}
.actions{display:flex;gap:10px}
.btn{
  appearance:none;cursor:pointer;border-radius:10px;border:1px solid #2a2a2a;background:var(--brand);color:var(--brand-contrast);
  padding:10px 14px;font-weight:800;text-decoration:none;
  transition:transform .06s ease, filter .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover{border-color:#2f2f2f;box-shadow:0 0 0 2px rgba(255,255,255,.10) inset}
.btn:active{transform:translateY(1px);filter:brightness(.97)}

/* badges */
.badge{font-size:12px;padding:3px 10px;border:1px solid #1f2937;border-radius:999px;background:#0b0b0b;color:#d1d5db}
.topbar .badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}

/* layout shell */
.wrap{max-width:720px;margin:12px auto;padding:0 12px}
.prefs{display:flex;align-items:center;gap:8px;margin:6px 0 8px}
.muted{color:var(--muted)}
#nextTimer.badge{
  position:static;display:inline-block;white-space:nowrap;padding:4px 14px;border-radius:10px;
  background:#e7e7e7;border:1px solid #9ca3af;color:#111;font:700 14px/1.2 "Ubuntu",ui-sans-serif;letter-spacing:.2px
}

/* hide “hard mode” if present */
#hardMode, label[for="hardMode"], .hard-toggle, .toggle{display:none!important}

/* ---------- board ---------- */
.board{
  position:relative;display:flex;flex-direction:column;gap:9px;width:min(100%,800px);margin:8px auto 12px
}
.row{display:grid;grid-template-columns:repeat(var(--L),1fr);gap:9px}
.tile{
  border:2px solid var(--line);background:var(--bg2);border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",ui-monospace;font-size:25px;font-weight:800;text-transform:uppercase;color:var(--text);aspect-ratio:1/1
}
.tile.pop{animation:pop .1s ease}
@keyframes pop{50%{transform:scale(1.07)}}
.tile.reveal{animation:flip .55s ease both}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.tile.good{background:var(--good);border-color:var(--good);color:#04250d}
.tile.mid{background:var(--mid);border-color:var(--mid);color:#063817}
.tile.bad{background:var(--bad);border-color:#d1d5db;color:#6b7280}

/* frog image */
.board::before{
  content:"";position:absolute;inset:0;background:url("/eatthedip.png") no-repeat left center;background-size:auto 78%;
  opacity:.2;pointer-events:none;transition:opacity 5s ease
}
.board.frog-in::before{opacity:.2}

/* legend row */
.legend-row{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;flex-wrap:nowrap}
.legend-row .tile{width:40px;height:40px;flex:0 0 auto}

/* ---------- keyboard (desktop base) ---------- */
.keyboard{user-select:none;max-width:800px;margin:8px auto 23px;display:grid;gap:7px;z-index:30}
.krow{display:flex;gap:5px}
.key{
  flex:1;padding:11px 9px;border-radius:10px;border:2px solid var(--line);
  background:linear-gradient(180deg,var(--key),var(--key2));color:var(--text);text-transform:uppercase;font-weight:800;cursor:pointer;
  font-size:1.3rem;min-width:0;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none;
  transition:transform .05s ease, filter .08s ease;
  will-change:transform,filter;
}
.key:hover{border-color:var(--accent)}
.key:active,.key.active{transform:translateY(1px);filter:brightness(.96)}
.key.wide{flex:1.8}
.key.good{background:var(--good);border-color:var(--good);color:#04250d}
.key.mid{background:var(--mid);border-color:var(--mid);color:#063817}
.key.bad{background:var(--bad);border-color:#d1d5db;color:#6b7280}

/* ---------- modals & toast ---------- */
.modal{padding:0;border:none;background:transparent}
.modal::backdrop{background:rgba(0,0,0,.5)}
.modal[hidden]{display:none!important}
.modal.open{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
}
.modal.open::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.sheet{
  position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);color:var(--text);
  border-radius:16px;max-width:560px;width:calc(100vw - 28px);
  max-height:min(92svh,720px);overflow:auto; /* dialogs scroll, page doesn’t */
  padding:16px;margin:0;box-shadow:0 20px 60px rgba(0,0,0,.15)
}
.toast{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#e5e7eb;border:1px solid #d1d5db;color:#111;
  padding:8px 12px;border-radius:10px;z-index:90;display:none;box-shadow:0 6px 20px rgba(0,0,0,.12)
}
.toast.show{display:block}

/* Claim dialog spacing: bigger gap under captcha */
#claimCaptchaWrap + #claimActions{
  margin-top: 22px;   /* was 0; creates larger vertical gap */
}

/* optional: keep buttons grouped nicely */
#claimActions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}

/* ---------- footer ---------- */
.foot{max-width:640px;margin:12px auto 32px;text-align:center}
.lilypad{
  position:fixed;left:5%;top:72%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(34,197,94,.25) 0,rgba(34,197,94,.1) 50%,transparent 60%),
             radial-gradient(circle at 60% 60%,rgba(34,197,94,.25) 0,rgba(34,197,94,.1) 50%,transparent 60%);
  opacity:.12;pointer-events:none;
}
button:focus-visible,a:focus-visible,.key:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}

/* hamburger + slide menu base */
.hamburger{display:none}
.hamburger{flex-direction:column;justify-content:center;gap:4px;width:28px;height:22px;cursor:pointer}
.hamburger span{height:3px;background:#fff;width:100%;border-radius:2px}
.mobile-menu{display:none}
.menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:65}
.menu-overlay.show{display:block}

/* small phones tweaks */
@media (max-width:420px){
  .tile{font-size:22px}
  .key{padding:9px 8px}
}

/* ==================== MOBILE ==================== */
@media (max-width:640px){
  :root{ --vh:1svh }
  @supports (height:1dvh){ :root{ --vh:1dvh } }

  :root{
    --rows:6;
    --hdr-h:56px;
    --kb-h:calc(var(--vh)*25);     /* keyboard ≈ bottom quarter */
    --g:6px;                       /* key gap on mobile */
    --side-pad:8px;
    --timer-h:36px;
    --gap-above-kb: calc(var(--vh)*5); /* 5% above keyboard */
  }

  /* lock page height, no scroll */
  html,body{height:calc(var(--vh)*100); overflow:hidden}
  .actions{display:none}
  .topbar{min-height:var(--hdr-h);padding:10px 12px}

  /* show hamburger */
  .hamburger{display:flex}

  /* slide menu */
  .mobile-menu{
    display:flex;flex-direction:column;gap:14px;
    position:fixed;top:0;left:-260px;width:220px;height:100%;
    background:var(--brand);color:var(--brand-contrast);z-index:75;
    padding:80px 20px 20px;transition:left .25s ease;
  }
  .mobile-menu.show{left:0}
  .mobile-menu button,.mobile-menu a{
    background:transparent;border:none;color:var(--brand-contrast);
    font-size:1rem;text-align:left;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.18);
    text-decoration:none;display:block
  }

  /* wrap fills viewport between header and bottom; no overflow */
  .wrap{
    max-width:none;margin:0 auto;padding:0;min-height:calc(var(--vh)*100 - var(--hdr-h));
    position:relative;overflow:hidden;
  }

  /* timer floats */
  #nextTimer.badge{
    position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:5
  }

  /* grid sizing: fill width, leave 5% gap above keyboard; never scroll */
  .board{
    --tile: min(
      calc((100vw - 2*var(--side-pad) - (var(--L) - 1)*var(--g)) / var(--L)),
      calc((var(--vh)*100 - var(--hdr-h) - var(--kb-h) - var(--gap-above-kb) - (var(--rows) - 1)*var(--g) - (var(--timer-h))) / var(--rows))
    );
    width:calc(var(--tile)*var(--L) + (var(--L) - 1)*var(--g));
    min-height:calc(var(--vh)*100 - var(--hdr-h) - var(--kb-h) - var(--gap-above-kb));
    margin:0 auto var(--gap-above-kb);
    padding-top:var(--timer-h);
    gap:var(--g);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    overflow:visible;
  }
  .row{
    display:grid;gap:var(--g);
    grid-template-columns:repeat(var(--L), var(--tile));
    width:100%;
  }
  .tile{
    width:var(--tile);height:var(--tile);
    font-size:clamp(20px, calc(var(--tile)*0.46), 34px);
  }

  /* frog smaller on mobile */
  .board::before{background-position:center center!important;background-size:auto 58%!important;opacity:.16}

  /* ===== Mobile keyboard: horizontally centered with staggered rows (keep) ===== */
  .keyboard{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    width:100vw; margin:0; background:var(--bg);
    --k: min(clamp(38px, 9.2vw, 50px),
             calc((100vw - 2*var(--side-pad) - 9*var(--g)) / 10));
    --rowW: calc(10*var(--k) + 9*var(--g));
    --shift2: calc(.5*var(--k) + .5*var(--g));
    --shift3: calc(.5*var(--k) + .5*var(--g));
    --offset3: calc(.5*var(--k) + .5*var(--g));  /* half-key shift */
    padding:6px var(--side-pad) calc(8px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; align-items:center; gap:var(--g);
    height:var(--kb-h); touch-action:none;
  }
  #krow1,#krow2,#krow3{
    width:var(--rowW); margin:0 auto;
    display:grid; gap:var(--g);
    align-content:stretch; align-items:stretch;
  }
  #krow1{ grid-template-columns:repeat(10,var(--k)); }
  #krow2{
    grid-template-columns:repeat(9,var(--k));
    padding-left:var(--shift2); padding-right:var(--shift2);
  }
  #krow3{
    grid-template-columns:repeat(10,var(--k));
    padding-left:var(--shift3); padding-right:var(--shift3);
    transform:translateX(var(--offset3));   /* shift row 3 half a tile right */

  }
  .key{ min-width:0; width:var(--k); height:100%; padding:0;
        border-radius:10px; font-size:clamp(18px,5.8vw,26px); }
  .key.wide{ grid-column:span 2; }
}

/* ==================== DESKTOP ==================== */
@media (min-width:641px){
  .topbar{padding:12px 18px}
  .brand .logo{width:44px;height:44px}
  .brand h1{font-size:38px;line-height:1}
  .board::before{background-size:auto 72%} /* slightly smaller on desktop */
  .board{margin:8px auto 12px;transform:none}  /* remove static scale; JS handles fit */
  .keyboard{position:static;margin:8px auto 16px;width:100%;max-width:800px}
  .krow{display:flex;justify-content:center;gap:5px}
  #fitStage{transform-origin:center top}
}

/* donate */
.donate-row{display:flex;gap:8px;align-items:center;margin:6px 0 12px}
.addr{
  flex:1;width:100%;font:600 14px/1.2 "JetBrains Mono",ui-monospace,monospace;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f9fafb;color:var(--text)
}
.addr:focus{outline:2px solid var(--accent);outline-offset:2px}
.donate-img{display:block;max-width:100%;height:auto;border-radius:10px;border:0;margin:8px 0 4px}
#modalDonate .donate-img{width:300px}
@media (max-width:640px){.donate-img{width:160px!important}}
.donate-link{display:inline-block;margin:2px 0 10px}

@media (min-width:641px){
  .prefs #nextTimer.badge{ position:relative; top:-30px !important; }
}


/* Frog overlay fade — desktop default */
.board::before{
  content:"";
  position:absolute; inset:0;
  background:url("/eatthedip.png") no-repeat left center;
  background-size:auto 72%;
  opacity:0;                          /* start hidden */
  pointer-events:none;
  transition:opacity 5s ease;       /* fade */
  will-change:opacity;
}
.board.frog-in::before{ opacity:.22; } /* end state */

/* Mobile tweaks */
@media (max-width:640px){
  .board::before{
    background-position:center center!important;
    background-size:auto 58%!important;
    opacity:0;                        /* start hidden */
  }
  .board.frog-in::before{ opacity:.16; }
}