* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: radial-gradient(circle at 50% 0%, #35507a 0%, #131b2b 70%);
  font-family: system-ui, "Segoe UI", sans-serif;
  height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  user-select: none; color: #fff;
}

#game { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

/* ---------------- HUD ---------------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; gap: 6px; padding: 8px; align-items: center;
  font-size: clamp(14px, 3vmin, 24px); font-weight: 700;
}
.hud-box {
  background: rgba(8,12,20,.72); color: #fff;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.12);
}
#sound-toggle { cursor: pointer; font-family: inherit; font-size: inherit; }
#basket {
  background: rgba(8,12,20,.5); border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 5px 10px; min-height: 1.9em; flex: 1;
  letter-spacing: 3px; overflow: hidden;
}
#clock.panic { color: #ff7676; }
#clock.hit   { animation: flash .5s; }
@keyframes flash { 0%,100% { color:#fff } 50% { color:#ff4d4d; transform: scale(1.3) } }

/* ---------------- 3D CITY ---------------- */
#stage { position: absolute; inset: 0; }
/* Placed by fit() in JS, not by layout: a flex container clamps an item wider than
   itself to one side, which slid the map off the right edge in portrait. */
#world {
  position: absolute; left: 50%; top: 50%;
  transform-origin: 0 0; transform-style: preserve-3d;
}
#ground, #blocks, #actors, #hits { position: absolute; inset: 0; transform-style: preserve-3d; }
#hits { z-index: 5; }
.hit { position: absolute; background: transparent; cursor: pointer; }

#ground {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px var(--c)),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.10) 0 2px, transparent 2px var(--c)),
    #3c4550;
  box-shadow: 0 0 90px rgba(0,0,0,.85) inset;
}

.bld { position: absolute; transform-style: preserve-3d; }
.bld .top {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, #8fa2bd, #5d6e88);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.bld .side {
  position: absolute; transform-origin: top;
  background: linear-gradient(180deg, #46536b, #232c3c);
  border-left: 1px solid rgba(0,0,0,.25); border-right: 1px solid rgba(0,0,0,.25);
}
.bld .side::after {                       /* windows */
  content: ""; position: absolute; inset: 14% 12%;
  background-image: radial-gradient(circle, #ffd98a 34%, transparent 36%);
  background-size: 33% 30%; opacity: .5;
}

/* ---------------- ACTORS ---------------- */
.actor {
  position: absolute; width: var(--c); height: var(--c);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--c) * .82); line-height: 1;
  transform-style: preserve-3d; will-change: transform;
  pointer-events: none;
}
.actor > span {
  transform: translateZ(calc(var(--c) * .55)) rotateX(var(--untilt, -48deg));
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.6));
}
.actor.chef  > span { font-size: 1.1em; }
.actor.mon   > span { animation: hover 1.6s ease-in-out infinite alternate; }
.actor.grub  > span { animation: hop .5s ease-in-out infinite alternate; }
@keyframes hover { to { transform: translateZ(calc(var(--c) * .78)) rotateX(var(--untilt, -48deg)) } }
@keyframes hop   { to { transform: translateZ(calc(var(--c) * .80)) rotateX(var(--untilt, -48deg)) } }
.actor.caught { animation: pop .45s forwards; }
@keyframes pop { to { transform: scale(2.2); opacity: 0 } }

.actor.rest > span { font-size: 1.7em; filter: drop-shadow(0 0 14px #ffd76b) drop-shadow(0 6px 5px rgba(0,0,0,.6)); }
.actor.rest::before {
  content: ""; position: absolute; inset: 8%;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,215,107,.55), transparent 68%);
}
.actor.rest.ready > span { animation: bob .6s infinite alternate; }
@keyframes bob { to { transform: translateZ(calc(var(--c) * .95)) rotateX(var(--untilt, -48deg)) scale(1.15) } }

#hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 30;
  text-align: center; font-size: clamp(12px, 2.6vmin, 19px);
  background: rgba(8,12,20,.72); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 6px 16px; max-width: 92vw;
}

/* ---------------- SCREENS ---------------- */
.screen {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(12,18,30,.94); backdrop-filter: blur(3px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.2vmin;
  text-align: center; padding: 5vmin;
}
.hidden { display: none; }

#quiz-face { font-size: clamp(48px, 14vmin, 110px); }
#quiz-name { font-size: clamp(17px, 4vmin, 30px); font-weight: 800; }
#quiz-blurb { font-size: clamp(13px, 3vmin, 22px); color: #ffd76b; }
#quiz-ask {
  font-size: clamp(30px, 8vmin, 64px); font-weight: 800;
  background: rgba(255,255,255,.08); padding: .25em .8em; border-radius: 16px;
}
#quiz-answers { display: flex; gap: 2.5vmin; flex-wrap: wrap; justify-content: center; }
.ans {
  font-family: inherit; font-size: clamp(20px, 5.5vmin, 40px); font-weight: 800;
  min-width: clamp(80px, 22vmin, 170px); padding: .45em .5em;
  border: none; border-radius: 18px; background: #3d5166; color: #fff;
  cursor: pointer; box-shadow: 0 6px 0 #232f3d;
}
.ans:active { transform: translateY(5px); box-shadow: 0 1px 0 #232f3d; }
.ans.right { background: #3fb865; box-shadow: 0 6px 0 #24713d; }
.ans.wrong { background: #d64545; box-shadow: 0 6px 0 #7d2626; }
#quiz-run {
  font-family: inherit; margin-top: 1vmin; font-size: clamp(13px, 3vmin, 21px);
  background: none; border: 2px solid rgba(255,255,255,.3); color: #fff;
  padding: .5em 1.2em; border-radius: 999px; cursor: pointer;
}

#menu-big, #end-big, #next-big { font-size: clamp(44px, 13vmin, 105px); }
#menu-title, #end-title, #next-title { font-size: clamp(26px, 7.5vmin, 58px); font-weight: 900; letter-spacing: 1px; }
#menu-text, #end-text, #next-text { font-size: clamp(13px, 3.2vmin, 23px); line-height: 1.6; opacity: .92; }
#end-stars, #next-stars { font-size: clamp(30px, 9vmin, 70px); letter-spacing: 8px; min-height: 1em; }

#go, #again, #save-score, #next-go {
  font-family: inherit; font-size: clamp(17px, 4.2vmin, 32px); font-weight: 800;
  padding: .5em 1.5em; border: none; border-radius: 999px;
  background: #ffd76b; color: #1b2430; cursor: pointer; box-shadow: 0 6px 0 #c9a53f;
}
#go:active, #again:active, #save-score:active, #next-go:active { transform: translateY(5px); box-shadow: 0 1px 0 #c9a53f; }

#name-row { display: flex; gap: 1.5vmin; align-items: center; }
#name-row.hidden { display: none; }
#player-name {
  font-family: inherit; font-size: clamp(16px, 4vmin, 28px); text-align: center;
  width: clamp(140px, 34vmin, 240px); padding: .35em .6em;
  border: 2px solid rgba(255,255,255,.35); border-radius: 14px;
  background: rgba(255,255,255,.1); color: #fff;
}
#save-score { font-size: clamp(14px, 3.4vmin, 24px); padding: .45em 1em; }

#board { font-size: clamp(12px, 3vmin, 21px); line-height: 1.8; }
#board .row { display: flex; gap: 1em; justify-content: center; }
#board .me { color: #ffd76b; font-weight: 800; }
#board h4 { font-size: 1.05em; margin-bottom: .3em; color: #ffd76b; }


/* ---------------- powers, sequences, yeti ---------------- */
#powers { letter-spacing: 2px; min-width: 1.6em; }
#powers:empty { display: none; }
#lives.low { color: #ff7676; }

#quiz-pattern { display: flex; gap: 2vmin; font-size: clamp(30px, 9vmin, 68px); min-height: 1.2em; }
#quiz-pattern span { opacity: .16; transition: opacity .1s, transform .1s; }
#quiz-pattern span.lit  { opacity: 1; transform: scale(1.3); }
#quiz-pattern span.done { opacity: .9; }
.ans.sym { min-width: clamp(70px, 18vmin, 130px); font-size: clamp(26px, 7vmin, 52px); }

.actor.yeti > span { font-size: 1.5em; animation: stomp .4s ease-in-out infinite alternate; }
@keyframes stomp { to { transform: translateZ(calc(var(--c) * .85)) rotateX(var(--untilt, -48deg)) scale(1.15) } }
#game.hunted { animation: dread 1.1s infinite alternate; }
@keyframes dread { to { box-shadow: inset 0 0 140px rgba(120,190,255,.4) } }

#board-note { font-size: clamp(11px, 2.5vmin, 17px); opacity: .6; }


/* ---------------- level chips on the menu ---------------- */
#menu-levels { display: flex; gap: 1.6vmin; flex-wrap: wrap; justify-content: center; }
.lvl-chip {
  display: flex; align-items: center; gap: .45em;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: .35em .9em;
  font-size: clamp(12px, 2.8vmin, 20px); font-weight: 700;
}
.lvl-chip .n { opacity: .55; }
#level-tag { font-weight: 800; }
#menu .screen, #menu { overflow-y: auto; }
#menu #board { max-height: 30vh; overflow-y: auto; }

/* ---------------- the three places ---------------- */
#game.theme-city    { --sky1:#35507a; --sky2:#131b2b; --ground:#3c4550; --grid:rgba(255,255,255,.10);
                      --top1:#8fa2bd; --top2:#5d6e88; --side1:#46536b; --side2:#232c3c; }
/* dirt lanes against green fields — a green path on green grass is invisible */
#game.theme-country { --sky1:#5a8f4e; --sky2:#16240f; --ground:#c0a068; --grid:rgba(90,60,25,.22);
                      --top1:#5b9038; --top2:#356021; --side1:#43701f; --side2:#22400f; }
#game.theme-seaside { --sky1:#3fa9c9; --sky2:#0d2733; --ground:#e3cf9a; --grid:rgba(255,255,255,.22);
                      --top1:#b9ae96; --top2:#8d8271; --side1:#7e7362; --side2:#4d463b; }

body { background: radial-gradient(circle at 50% 0%, var(--sky1, #35507a) 0%, var(--sky2, #131b2b) 70%); }
#game { background: radial-gradient(circle at 50% 0%, var(--sky1, #35507a) 0%, var(--sky2, #131b2b) 70%); }
#ground {
  background:
    repeating-linear-gradient(90deg, var(--grid) 0 2px, transparent 2px var(--c)),
    repeating-linear-gradient(0deg,  var(--grid) 0 2px, transparent 2px var(--c)),
    var(--ground);
}
.bld .top  { background: linear-gradient(140deg, var(--top1), var(--top2)); }
.bld .side { background: linear-gradient(180deg, var(--side1), var(--side2)); }
/* windows only make sense on buildings */
#game:not(.theme-city) .bld .side::after { display: none; }

/* a tree / rock sitting on the block */
.bld .cap {
  position: absolute; left: 0; top: 0; width: var(--c); height: var(--c);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--c) * .7); pointer-events: none;
}

/* the sea, along the bottom of the seaside level */
#game.theme-seaside .bld.water .top {
  background: linear-gradient(140deg, #2f8fbe, #14536f);
  animation: swell 3.5s ease-in-out infinite alternate;
}
#game.theme-seaside .bld.water .side { background: linear-gradient(180deg, #1d6d92, #0b3244); }
@keyframes swell { to { filter: brightness(1.18) } }


/* the menu is not part of a game in progress — no clock, no lives behind it */
#game.at-menu #hud, #game.at-menu #hint { display: none; }


/* ---------------- exit + leave confirmation ---------------- */
#exit-level { cursor: pointer; font-family: inherit; font-size: inherit; font-weight: 800; }
#leave-big { font-size: clamp(44px, 13vmin, 100px); }
#leave-title { font-size: clamp(22px, 6vmin, 44px); font-weight: 900; }
#leave-text { font-size: clamp(13px, 3vmin, 22px); opacity: .85; }
#leave-buttons { display: flex; gap: 2.5vmin; flex-wrap: wrap; justify-content: center; margin-top: 1vmin; }
#leave-yes, #leave-no {
  font-family: inherit; font-size: clamp(15px, 3.6vmin, 26px); font-weight: 800;
  padding: .55em 1.3em; border: none; border-radius: 999px; cursor: pointer;
}
#leave-no  { background: #ffd76b; color: #1b2430; box-shadow: 0 6px 0 #c9a53f; }
#leave-yes { background: #3d5166; color: #fff;   box-shadow: 0 6px 0 #232f3d; }
#leave-yes:active, #leave-no:active { transform: translateY(5px); box-shadow: none; }

/* ---------------- level picking ---------------- */
.lvl-chip { cursor: default; }
.lvl-chip.open { cursor: pointer; color: #ffd76b; background: rgba(255,215,107,.14); border-color: rgba(255,215,107,.55); }
.lvl-chip.open .n { color: #ffd76b; opacity: .7; }
.lvl-chip.open:active { transform: translateY(2px); }
.lvl-chip.shut { opacity: .45; }
#menu-hint { font-size: clamp(11px, 2.5vmin, 17px); opacity: .6; }


/* ---------------- Frog's own drawings ---------------- */
.actor > span > img {
  display: block; width: calc(var(--c) * 1.35); height: calc(var(--c) * 1.35);
  object-fit: contain; image-rendering: auto;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.55));
}
.actor.yeti > span > img, .actor.rest > span > img { width: calc(var(--c) * 1.7); height: calc(var(--c) * 1.7); }
#quiz-face img { width: clamp(90px, 26vmin, 210px); height: clamp(90px, 26vmin, 210px); object-fit: contain; }


/* ---------------- the volcano ---------------- */
#game.theme-volcano { --sky1:#8a2a10; --sky2:#170805; --ground:#4a3a37; --grid:rgba(255,140,60,.16);
                      --top1:#6d5148; --top2:#3d2a25; --side1:#33231f; --side2:#180f0d; }

#lava { position: absolute; inset: 0; transform-style: preserve-3d; z-index: 1; }
.lava-cell {
  position: absolute;
  background: radial-gradient(circle at 40% 35%, #ffe08a, #ff8c1a 45%, #d92b0d 100%);
  box-shadow: 0 0 18px rgba(255,120,20,.85);
  animation: molten 1.4s ease-in-out infinite alternate;
}
@keyframes molten { to { filter: brightness(1.3) saturate(1.2) } }

#game.erupting { animation: quake .28s infinite alternate; }
@keyframes quake { from { transform: translate(-2px, 0) } to { transform: translate(2px, 1px) } }
.actor.yeti.surfing > span { animation: surf .5s ease-in-out infinite alternate; }
@keyframes surf { to { transform: translateZ(calc(var(--c) * .95)) rotateX(var(--untilt, -48deg)) rotate(9deg) } }

#burn-big { font-size: clamp(50px, 15vmin, 110px); }
#burn-title { font-size: clamp(24px, 6.5vmin, 48px); font-weight: 900; color: #ff9b4a; }
#burn-text { font-size: clamp(14px, 3.4vmin, 24px); }
#burn-sub { font-size: clamp(12px, 2.8vmin, 19px); opacity: .75; }
#burn-retry, #burn-quit {
  font-family: inherit; font-size: clamp(15px, 3.6vmin, 26px); font-weight: 800;
  padding: .55em 1.3em; border: none; border-radius: 999px; cursor: pointer;
}
#burn-retry { background: #ffd76b; color: #1b2430; box-shadow: 0 6px 0 #c9a53f; }
#burn-quit  { background: #3d5166; color: #fff;   box-shadow: 0 6px 0 #232f3d; }

/* a level you have to earn */
.lvl-chip.bonus.open { color: #ff9b4a; background: rgba(255,120,30,.16); border-color: rgba(255,140,60,.6); }

.actor.crater > span { font-size: 1.5em; animation: rumble 1.8s ease-in-out infinite alternate; }
@keyframes rumble { to { transform: translateZ(calc(var(--c) * .75)) rotateX(var(--untilt, -48deg)) scale(1.12) } }
#game.erupting .actor.crater > span { animation-duration: .4s; }