/* Frog's Way Home — game styles (Gaimo.in) */
  :root{
    --s:.7;
    /* palette sampled from the painted river art */
    --cream:#fff4dc; --sand:#f3c98a; --sand-deep:#e0a15a;
    --bark:#8a4516; --bark-deep:#5e2c0b;
    --cliff:#e2843a;
    --water:#3be3ec; --water-pale:#c9f6f8; --water-rim:#1d7fc4; --water-deep:#0f5a8f;
    --lime:#a8d82a; --leaf:#6fae1c; --jungle:#2d6a12; --jungle-deep:#1b4a0a;
    --frog-red:#e3261d; --frog-red-deep:#8e120c; --frog-yellow:#ffd23a;
    --ink:#3a220c; --ink-soft:#7a5230;
    --desk:#cfe9a8; --desk-2:#a9d67a; --notes-ink:#1f3d12; --notes-soft:#44652e; --notes-head:#2d6a12;
  }
  @media (prefers-color-scheme: dark){
    :root{ --desk:#12301a; --desk-2:#0a1f10; --notes-ink:#e6f2d8; --notes-soft:#a9c79a; --notes-head:#b6f03a; }
  }

  *{ box-sizing:border-box; }
  html,body{
    height:100%; margin:0; width:100%; overflow:hidden;
    background:var(--desk);
    font-family:'Fredoka',system-ui,sans-serif; font-weight:500;
    color:var(--ink);
    overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  body{
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; user-select:none; -webkit-user-select:none;
    background:radial-gradient(120% 90% at 50% 40%, var(--desk) 0%, var(--desk-2) 100%);
  }
  button{ font:inherit; color:inherit; }
  kbd{
    display:inline-block; min-width:24px; padding:0 6px 1px; margin:0 1px;
    font:inherit; font-size:15px; font-weight:600; line-height:22px; text-align:center;
    background:#fff; color:var(--ink);
    border:2px solid var(--bark); border-bottom-width:4px; border-radius:7px;
  }

  /* ---------- stage: the game is authored at 480x800 and scaled as a unit ---------- */
  #stage{ position:relative; flex:none; width:calc(480px * var(--s)); height:calc(800px * var(--s)); }
  #gameWrap{
    position:absolute; left:0; top:0; width:480px; height:800px;
    transform-origin:0 0; transform:scale(var(--s,1));
    background:var(--water); overflow:hidden; border-radius:22px;
    box-shadow:0 0 0 5px var(--bark), 0 10px 0 5px var(--bark-deep), 0 26px 50px rgba(10,30,10,.35);
    touch-action:none;
  }
  canvas#c{ display:block; width:480px; height:800px; touch-action:none; }

  /* ---------- HUD ---------- */
  .chip{
    background:var(--cream); border:3px solid var(--bark); border-radius:14px;
    padding:3px 10px 4px; display:flex; align-items:center; gap:8px;
    box-shadow:0 4px 0 var(--bark);
  }
  .hud{ position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
  .hudR{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
  .hudL{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  .lives{ gap:4px; }
  .lvl{ font-family:'Lilita One',sans-serif; font-size:17px; line-height:1; color:var(--bark); padding:5px 11px 6px; }
  /* level banner, styled like the yellow level tags */
  .banner{
    position:absolute; left:50%; top:210px; transform:translate(-50%,-14px); pointer-events:none;
    background:#eecb5a; color:#1d1a12; padding:8px 20px 10px; text-align:left; min-width:250px;
    border-radius:4px; box-shadow:0 5px 0 rgba(94,44,11,.55), 0 14px 26px rgba(0,0,0,.2);
    opacity:0; transition:opacity .35s, transform .35s;
  }
  .banner.show{ opacity:1; transform:translate(-50%,0); }
  .banner small{ display:block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; letter-spacing:.5px; }
  .banner b{ display:block; font-family:'Lilita One',sans-serif; font-weight:400; font-size:28px; line-height:1.05; }
  /* level picker */
  .levels{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 10px; max-width:264px; margin-left:auto; margin-right:auto; }
  .levels button{
    width:40px; height:40px; padding:0; cursor:pointer; border-radius:50%;
    font-family:'Lilita One',sans-serif; font-size:21px; line-height:1; color:var(--bark);
    background:var(--sand); border:3px solid var(--bark); box-shadow:0 4px 0 var(--bark);
    display:grid; place-items:center; transition:transform .1s;
  }
  .levels button:hover:not(:disabled){ transform:translateY(-2px); }
  .levels button.sel{ background:var(--lime); border-color:var(--jungle); color:#fff; text-shadow:0 2px 0 var(--jungle-deep); box-shadow:0 4px 0 var(--jungle); }
  .levels button.done:not(.sel){ background:#fff4dc; }
  .levels button:disabled{ cursor:not-allowed; opacity:.5; background:#e8dcc4; }
  .levels button svg{ width:16px; height:16px; fill:none; stroke:var(--bark); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  .twist{
    display:inline-block; margin:0 0 12px; padding:5px 12px 6px; border-radius:4px;
    background:#eecb5a; color:#1d1a12; font-size:16px; font-weight:600; line-height:1.25;
    box-shadow:0 3px 0 rgba(94,44,11,.45);
  }
  .lives img{ width:27px; height:30px; object-fit:contain; display:block; transition:transform .25s, opacity .25s, filter .25s; }
  .lives img.lost{ opacity:.3; filter:grayscale(1); transform:scale(.8) rotate(12deg); }
  .flight .lbl{ font-family:'Lilita One',sans-serif; font-size:18px; line-height:1; color:var(--water-rim); letter-spacing:.3px; }
  .pips{ display:flex; gap:5px; }
  .pips i{
    width:17px; height:17px; display:block; border:2.5px solid var(--water-rim);
    border-radius:50%; background:#fff; transition:background .2s, transform .2s;
  }
  .pips i.on{ background:var(--water); transform:scale(1.08); }
  .calm .lbl{ color:#2f7d8c; }
  .calm .pips i{ border-color:#2f7d8c; }
  .calm .pips i.on{ background:#8ef0b6; }
  .calm.ready{ background:#9df3c2; }
  .calm.ready .lbl{ color:#12533f; }
  .calmBtn{
    bottom:24px; background:#37c2d6; border-color:#12586b; text-shadow:0 2px 0 #12586b;
    box-shadow:inset 0 -5px 0 rgba(0,0,0,.14), 0 6px 0 #12586b;
  }
  .calmBtn.ready{ transform:translate(-50%,0); }
  #gameWrap.boost.calmup .boostBtn.ready{ transform:translate(-50%,-46px); }
  #gameWrap.boost.calmup .boostBtn.ready:active{ transform:translate(-50%,-42px); }
  .flight.ready{ background:var(--frog-yellow); }
  .flight.ready .lbl{ color:var(--frog-red-deep); }
  .flight.ready .pips i.on{ background:var(--frog-red); border-color:var(--frog-red-deep); }
  .tools{ display:flex; gap:8px; pointer-events:auto; }
  .tool{
    width:38px; height:38px; padding:0; cursor:pointer; display:grid; place-items:center;
    background:var(--cream); border:3px solid var(--bark); border-radius:50%;
    box-shadow:0 4px 0 var(--bark);
  }
  .tool:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--bark); }
  .tool svg{ width:20px; height:20px; fill:none; stroke:var(--bark); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  .tool.off .wave{ display:none; } .tool .cross{ display:none; } .tool.off .cross{ display:block; }

  .hint{
    position:absolute; right:12px; bottom:14px; transform:translateY(8px);
    width:212px; text-align:left; font-size:17px; line-height:1.25;
    background:var(--cream); border:3px solid var(--bark); border-radius:16px;
    padding:8px 12px 9px; box-shadow:0 4px 0 var(--bark);
    opacity:0; transition:opacity .35s, transform .35s; pointer-events:none;
  }
  .hint.show{ opacity:1; transform:translateY(0); }
  .hint kbd{ font-size:13px; line-height:18px; min-width:20px; }

  .boostBtn{
    position:absolute; left:50%; bottom:24px; transform:translate(-50%,20px);
    display:flex; align-items:center; gap:10px; cursor:pointer;
    font-family:'Lilita One',sans-serif; font-size:26px; line-height:1; color:#fff;
    text-shadow:0 2px 0 var(--frog-red-deep);
    background:var(--frog-red); border:3px solid var(--frog-red-deep); border-radius:18px;
    padding:9px 18px 11px; box-shadow:inset 0 -5px 0 rgba(0,0,0,.14), 0 6px 0 var(--frog-red-deep);
    opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  }
  .boostBtn kbd{ font-family:'Fredoka',sans-serif; text-shadow:none; }
  .boostBtn.ready{ opacity:1; pointer-events:auto; transform:translate(-50%,0); animation:floatUp 1.6s ease-in-out infinite; }
  .boostBtn:active{ transform:translate(-50%,4px); box-shadow:0 2px 0 var(--frog-red-deep); animation:none; }
  @keyframes floatUp{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,-6px);} }

  /* ---------- overlays ---------- */
  .overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(8,60,86,.42);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s ease, visibility 0s linear .35s;
  }
  .overlay.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s ease, visibility 0s; }
  .card{
    position:relative; width:380px; max-height:764px; overflow:visible;
    background:var(--cream); border:4px solid var(--bark); border-radius:26px;
    padding:18px 24px 22px; text-align:center;
    box-shadow:0 8px 0 var(--bark), 0 24px 40px rgba(0,0,0,.3);
    transform:translateY(14px) scale(.97); transition:transform .4s cubic-bezier(.2,1.4,.4,1);
  }
  .overlay.show .card{ transform:translateY(0) scale(1); }
  /* painted splash screens: the art fills the frame, the buttons sit on a panel below it */
  .splash{ position:relative; width:480px; height:800px; display:flex; align-items:flex-end; overflow:hidden; }
  .splash::before{            /* a blurred copy of the poster fills the frame behind it */
    content:''; position:absolute; inset:-24px; background-image:var(--img);
    background-size:cover; background-position:center; filter:blur(18px) brightness(.82) saturate(1.05);
  }
  .splash .poster{
    position:absolute; inset:0; background-image:var(--img); background-repeat:no-repeat;
    background-position:center top; background-size:auto 700px;
  }
  #overSplash .poster, #winSplash .poster{ background-size:auto 616px; background-position:center 8px; }
  .panel{ position:relative; z-index:1; }
  .panel{
    width:100%; text-align:center; padding:12px 22px 18px;
    background:linear-gradient(180deg, rgba(255,244,220,.72) 0%, rgba(255,244,220,.96) 26%, rgba(255,244,220,.98) 100%);
    border-top:4px solid var(--bark); border-radius:30px 30px 0 0;
    box-shadow:0 -8px 26px rgba(10,40,60,.28);
  }
  .panel .sub{ margin:0 0 8px; }
  .panel .capt{ font-family:'Lilita One',sans-serif; font-size:24px; line-height:1.05; color:var(--water-rim); margin:0 0 2px; }
  .panel .statsGrid{ margin:10px 0 12px; }
  .statsLine{
    display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin:6px 0 12px;
    font-size:15px; color:var(--water-deep);
  }
  .statsLine span{ white-space:nowrap; }
  .statsLine b{ font-family:'Lilita One',sans-serif; font-weight:400; font-size:19px; color:var(--water-rim); margin-right:3px; }
  .panel .badge{ margin-bottom:8px; }
  .panel .how{ margin-bottom:12px; }
  .panel .how .row{ line-height:24px; font-size:15px; }
  .panel .how .keys{ width:88px; }
  .art{ display:block; width:240px; height:150px; margin:2px auto 4px; }
  .card h1{
    font-family:'Lilita One',sans-serif; font-weight:400;
    font-size:42px; line-height:1.02; margin:4px 0 4px; color:var(--water-rim);
    text-shadow:0 3px 0 rgba(15,90,143,.22);
  }
  .card .sub{ font-size:19px; margin:0 0 10px; color:var(--ink-soft); line-height:1.2; }
  .goal{ font-size:17px; font-weight:500; line-height:1.32; margin:0 0 12px; text-align:left; }
  .goal b{ font-weight:600; color:var(--jungle); background:linear-gradient(transparent 62%, rgba(168,216,42,.55) 62%); }
  .how{
    text-align:left; margin:0 0 16px; padding:10px 12px 9px;
    background:var(--water-pale); border:2.5px solid var(--water-rim); border-radius:16px;
  }
  .how .row{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:15px; line-height:25px; color:var(--water-deep); }
  .how .keys{ flex:none; width:100px; text-align:right; white-space:nowrap; font-weight:600; }
  .touch-only{ display:none !important; }
  @media (pointer:coarse){ .kbd-only{ display:none !important; } .touch-only{ display:flex !important; } }

  button.primary{
    font-family:'Lilita One',sans-serif; font-size:28px; line-height:1; color:#fff; cursor:pointer;
    text-shadow:0 2px 0 var(--jungle-deep);
    background:var(--lime); border:3px solid var(--jungle); border-radius:18px;
    padding:10px 34px 12px; box-shadow:inset 0 -5px 0 rgba(45,106,18,.35), 0 6px 0 var(--jungle);
    transition:transform .1s, box-shadow .1s;
  }
  button.primary:hover{ transform:translateY(-2px); box-shadow:inset 0 -5px 0 rgba(45,106,18,.35), 0 8px 0 var(--jungle); }
  button.primary:active{ transform:translateY(4px); box-shadow:inset 0 -3px 0 rgba(45,106,18,.35), 0 2px 0 var(--jungle); }
  button.ghost{
    font-size:18px; background:none; border:none; color:var(--ink-soft); cursor:pointer;
    margin-top:14px; padding:2px 8px; text-decoration:underline; text-decoration-color:var(--sand-deep); text-decoration-thickness:3px; text-underline-offset:5px;
  }
  button:focus-visible, .tool:focus-visible{ outline:3px dashed var(--water-rim); outline-offset:4px; }

  .statsGrid{
    display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; text-align:left;
    background:var(--water-pale); border:2.5px solid var(--water-rim); border-radius:16px;
    padding:10px 16px; margin:12px 0 16px; font-size:16px; line-height:1.15; color:var(--water-deep);
  }
  .statsGrid b{ display:block; font-family:'Lilita One',sans-serif; font-weight:400; font-size:28px; line-height:1.05; color:var(--water-rim); }
  .badge{
    display:inline-block; font-family:'Lilita One',sans-serif; font-size:22px; line-height:1; color:var(--frog-red-deep);
    background:var(--frog-yellow); border:3px solid var(--bark); border-radius:14px;
    padding:5px 14px 7px; margin-bottom:2px; transform:rotate(-1.5deg); box-shadow:0 3px 0 var(--bark);
  }
  #bestTimeMenu{ font-size:16px; color:var(--ink-soft); margin-top:12px; min-height:1em; }

  /* ---------- margin notes for keyboard players on wide screens ---------- */
  .notes{ display:none; position:absolute; left:calc(100% + 38px); top:50%; width:236px; transform:translateY(-50%); font-size:18px; line-height:1.3; color:var(--notes-ink); }
  .notes h2{ font-family:'Lilita One',sans-serif; font-weight:400; font-size:34px; margin:0 0 10px; color:var(--notes-head); }
  .notes ul{ list-style:none; margin:0; padding:0; }
  .notes li{ margin:0 0 12px; }
  .notes li span{ display:block; margin-top:3px; color:var(--notes-soft); font-weight:400; }
  @media (min-width:1010px) and (pointer:fine){ .notes{ display:block; } }

  .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  @media (prefers-reduced-motion: reduce){
    .boostBtn.ready{ animation:none; }
    .card, .hint, .overlay{ transition:none; }
  }
  #gameWrap.boost .hint{ bottom:92px; }

/* ---------- link back to the site (hidden when the game is embedded in a page) ---------- */
html.standalone body{ padding-top:calc(env(safe-area-inset-top,0px) + 38px); }
.backbar{ display:none; }
html.standalone .backbar{
  display:flex; align-items:center; gap:12px; position:fixed; z-index:10; left:0; right:0;
  top:env(safe-area-inset-top,0px); height:38px; padding:0 14px;
  background:rgba(255,244,220,.92); border-bottom:3px solid var(--bark);
  font-size:15px; font-weight:600; color:var(--bark);
}
.backbar a{ color:var(--bark); text-decoration:none; }
.backbar a:hover{ text-decoration:underline; }
.backbar .brand{ font-family:'Lilita One',sans-serif; font-weight:400; font-size:19px; letter-spacing:.3px; }
.backbar .sep{ opacity:.45; }
.backbar .spacer{ flex:1; }