@font-face { font-family: 'Pixel'; src: url(fonts/PressStart2P-Regular.ttf) format('truetype'); font-display: swap; }

:root {
  --ink: #1b1b1f;
  --paper: #fffdf6;
  --muted: #5b5b66;
  --line: #1b1b1f;
  --ok: #2aa846;
  --no: #e0383b;
  --gold: #ffd23f;
  --lit: #ffe066;
  --blue: #1d4fb8;
  --read: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pixel: 'Pixel', ui-monospace, monospace;
  --ground-h: 56px;
}
/* The four worlds: sky, accent and the ground strip along the bottom. */
body[data-world=fungo] {
  --sky: linear-gradient(#5c94fc, #a4c6ff);
  --accent: #e4000f;
  --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='%23c84c0c'/%3E%3Cpath d='M0 1.5h32M0 17.5h32M1.5 0v16M17.5 16v16' stroke='%23401400' stroke-width='3'/%3E%3Cpath d='M4 5h10M20 21h10' stroke='%23ff9f6b' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 32px 32px;
  --grass: #c84c0c;
}
body[data-world=veloce] {
  --sky: linear-gradient(#1b5fd6, #5fb4ff 60%, #c2e8ff);
  --accent: #1450d2;
  --ground: conic-gradient(#d0741f 25%, #8a3f12 0 50%, #d0741f 0 75%, #8a3f12 0) 0 0 / 28px 28px;
  --grass: #33c13f;
}
body[data-world=blocchi] {
  --sky: linear-gradient(#6f9fff, #b9d6ff);
  --accent: #3c8527;
  --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23866043'/%3E%3Crect x='2' y='3' width='2' height='2' fill='%23634329'/%3E%3Crect x='9' y='1' width='2' height='2' fill='%23a37a53'/%3E%3Crect x='12' y='8' width='2' height='2' fill='%23634329'/%3E%3Crect x='5' y='10' width='2' height='2' fill='%23a37a53'/%3E%3Crect x='1' y='13' width='2' height='2' fill='%23634329'/%3E%3Crect x='13' y='13' width='2' height='2' fill='%23523520'/%3E%3C/svg%3E") 0 0 / 32px 32px;
  --grass: #5dab2f;
}
body[data-world=stella] {
  --sky: linear-gradient(#ffb8da, #d9c7ff);
  --accent: #f0468f;
  --ground: radial-gradient(circle, #ffd6ea 0 5px, transparent 6px) 0 0 / 26px 26px, #9edf96;
  --grass: #74c96b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--sky) fixed, #5c94fc;
  color: var(--ink);
  font-family: var(--read);
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body::before { /* clouds */
  content: ''; position: fixed; inset: 0 0 auto 0; height: 70vh; pointer-events: none; opacity: .85;
  background:
    radial-gradient(ellipse 44px 18px at 14% 12%, #fff 96%, transparent),
    radial-gradient(ellipse 30px 16px at 19% 9%, #fff 96%, transparent),
    radial-gradient(ellipse 52px 20px at 82% 30%, #fff 96%, transparent),
    radial-gradient(ellipse 30px 16px at 77% 27%, #fff 96%, transparent),
    radial-gradient(ellipse 40px 16px at 45% 55%, #ffffffb0 96%, transparent);
}
body::after { /* ground */
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  height: calc(var(--ground-h) + env(safe-area-inset-bottom));
  background: var(--ground);
  border-top: 10px solid var(--grass);
  image-rendering: pixelated;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }

#app {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto; min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + var(--ground-h) + 28px);
  display: flex; flex-direction: column; gap: 14px;
}

body.caps .t { text-transform: uppercase; letter-spacing: .03em; }

.card {
  background: var(--paper);
  border: 4px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--line);
}
.btn {
  flex: 1; min-height: 58px; padding: 0 16px;
  font-family: var(--pixel); font-size: 13px; line-height: 1.4; color: #fff;
  background: var(--accent);
  border: 4px solid var(--line); border-radius: 12px; box-shadow: 0 6px 0 var(--line);
  transition: transform .06s, box-shadow .06s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.btn.alt { background: var(--paper); color: var(--ink); }
.btn.danger { background: var(--no); }
.btn:disabled { opacity: .45; }
.row { display: flex; gap: 12px; }

/* top bar */
.bar { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; }
.bar h2 { margin: 0; text-align: center; font: 15px/1.3 var(--pixel); color: #fff; text-shadow: 3px 3px 0 var(--line); }
.back {
  width: 52px; height: 48px; font-size: 20px;
  background: var(--paper); border: 4px solid var(--line); border-radius: 12px; box-shadow: 0 4px 0 var(--line);
}
.purse {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px;
  background: var(--paper); border: 4px solid var(--line); border-radius: 999px;
  font: 14px/1 var(--pixel); font-size: 14px;
}
.purse .item { font-size: 22px; }

/* collectibles: coin, ring, gem, star */
.item { display: inline-block; width: 1em; height: 1em; flex: none; }
body[data-world=fungo] .item {
  width: .74em; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #ffe680 0 22%, #ffc21a 23% 60%, #d99000 61%);
  box-shadow: inset 0 0 0 .07em #7a4c00;
}
body[data-world=veloce] .item {
  border-radius: 50%;
  border: .17em solid #ffd23f;
  box-shadow: 0 0 0 .05em #a86f00, inset 0 0 0 .05em #a86f00;
}
body[data-world=blocchi] .item {
  background: linear-gradient(135deg, #e6ffff 0 20%, #46e0dc 21% 60%, #158f8c 61%);
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
}
body[data-world=stella] .item {
  background: linear-gradient(#fff59a, #ffbf00);
  clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 36%, 38% 35%);
}
.item.fly { position: fixed; z-index: 100; font-size: 30px; pointer-events: none; }

/* question block */
.qb {
  position: relative; width: 108px; height: 108px;
  font: 44px/1 var(--pixel); color: #fff; text-shadow: 4px 4px 0 #6b3300;
  background:
    radial-gradient(circle at 12px 12px, #6b3300 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #6b3300 3.5px, transparent 4.5px),
    radial-gradient(circle at 12px calc(100% - 12px), #6b3300 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #6b3300 3.5px, transparent 4.5px),
    #f8b800;
  border: 4px solid var(--line); border-radius: 8px;
  box-shadow: inset -6px -6px 0 #c86a00, inset 6px 6px 0 #ffde7a, 0 6px 0 var(--line);
}
.qb:disabled { background-color: #b0602a; color: #f0c8a0; text-shadow: none; box-shadow: inset -6px -6px 0 #7a3a12, inset 6px 6px 0 #d08a52, 0 6px 0 var(--line); }
.qb.ready { animation: bob 1.1s ease-in-out infinite; }
.qb.small { width: 50px; height: 50px; font-size: 18px; text-shadow: 2px 2px 0 #6b3300; box-shadow: inset -4px -4px 0 #c86a00, inset 4px 4px 0 #ffde7a; border-width: 3px; background-size: auto; flex: none; display: grid; place-items: center;
  background:
    radial-gradient(circle at 7px 7px, #6b3300 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) 7px, #6b3300 2px, transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px), #6b3300 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #6b3300 2px, transparent 2.6px),
    #f8b800; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* home */
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 8px; }
.hero h1 { margin: 0; font: 26px/1.35 var(--pixel); color: #fff; text-shadow: 4px 4px 0 var(--line); }
.worlds { display: flex; gap: 12px; justify-content: space-between; }
.worlds button {
  flex: 1; aspect-ratio: 1; max-width: 76px; font-size: 32px;
  background: var(--paper); border: 4px solid var(--line); border-radius: 50%; box-shadow: 0 5px 0 var(--line);
  opacity: .75;
}
.worlds button.on { opacity: 1; background: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 0 var(--line); }
.levels { display: flex; flex-direction: column; gap: 16px; }
.level {
  display: flex; align-items: center; gap: 14px; padding: 14px; text-align: left;
  background: var(--paper); border: 4px solid var(--line); border-radius: 16px; box-shadow: 0 6px 0 var(--line);
}
.level:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.level .lt { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.level b { font: 14px/1.3 var(--pixel); }
.level small { font-size: 15px; font-weight: 600; color: var(--muted); }
.level .check { font-size: 22px; color: var(--accent); width: 28px; text-align: center; }
.level.done .check { color: var(--ok); font-size: 26px; }
.foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 1px 1px 0 var(--line); }
.gear { width: 46px; height: 46px; flex: none; font-size: 22px; color: var(--ink); background: var(--paper); border: 3px solid var(--line); border-radius: 50%; text-shadow: none; transition: transform 1.2s; }
.gear.hold { transform: rotate(180deg); background: var(--gold); }

/* progress dots */
.dots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.dots i { width: 14px; height: 14px; background: #ffffffa0; border: 3px solid var(--line); border-radius: 3px; }
.dots i.ok { background: var(--ok); }
.dots i.no { background: var(--no); }

/* LAMPO */
.stage { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 6px 0; }
.word {
  min-height: 1.5em; min-width: 70%; padding: 10px 16px; text-align: center;
  font-size: clamp(36px, 11vw, 60px); font-weight: 700; line-height: 1.2;
  background: var(--paper); border: 4px solid var(--line); border-radius: 14px; box-shadow: 0 6px 0 var(--line);
  visibility: hidden;
}
.word.show { visibility: visible; animation: popin .14s ease-out; }
.word.again { outline: 5px solid var(--no); outline-offset: 2px; }
@keyframes popin { from { transform: scale(.7); } }
.hint { margin: 0; color: #fff; font-weight: 700; font-size: 17px; text-shadow: 2px 2px 0 var(--line); }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-height: 110px; }
.choices button {
  aspect-ratio: 1; font-size: clamp(44px, 14vw, 64px); line-height: 1;
  background: var(--paper); border: 4px solid var(--line); border-radius: 16px; box-shadow: 0 6px 0 var(--line);
  animation: popin .16s ease-out;
}
.choices button.ok { background: #b8f0c4; border-color: var(--ok); }
.choices button.no { background: #ffc4c4; border-color: var(--no); }
.choices button:disabled { color: inherit; }

/* VERO O FALSO */
.sentence {
  min-height: 34vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 22px 18px; text-align: center;
  font-size: clamp(26px, 7.4vw, 36px); font-weight: 700; line-height: 1.35;
}
.sentence em { font-style: normal; font-size: .7em; color: var(--no); }
.tf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tf button {
  min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 20px; font-weight: 800;
  border: 4px solid var(--line); border-radius: 18px; box-shadow: 0 6px 0 var(--line);
}
.tf button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.tf .yes { background: var(--ok); }
.tf .no { background: var(--no); }
.tf .mark { font-size: 42px; line-height: 1; }
.tf button.zap { box-shadow: 0 6px 0 var(--line), 0 0 0 6px var(--gold); }
.tf button:disabled { color: #fff; }

/* STORIA BOSS */
.stories { display: flex; flex-direction: column; gap: 16px; }
.story-btn { display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; font-size: 19px; font-weight: 700; }
.story-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.story-btn .ic { font-size: 40px; }
.story-btn .t { flex: 1; }
.story-btn small { font: 11px/1.4 var(--pixel); white-space: nowrap; }
.steps { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.steps li {
  width: 40px; height: 40px; display: grid; place-items: center;
  font: 13px/1 var(--pixel); background: var(--paper); border: 3px solid var(--line); border-radius: 10px; opacity: .7;
}
.steps li.now { background: var(--gold); opacity: 1; transform: scale(1.12); }
.steps li.done { background: var(--ok); color: #fff; opacity: 1; }
.track { position: relative; height: 54px; padding: 0; overflow: hidden;
  background: linear-gradient(90deg, #ddd 50%, transparent 0) 0 50% / 18px 4px repeat-x, var(--paper); }
.track[hidden] { display: none; }
.track .flag { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 30px; }
.track .ghost { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 34px; width: 44px; text-align: center; }
.story { padding: 18px 16px 8px; }
.story[hidden] { display: none; }
.story h3 { margin: 0 0 14px; font-size: 21px; font-weight: 800; color: var(--accent); }
.story p { margin: 0 0 .7em; font-size: clamp(21px, 6vw, 27px); font-weight: 600; line-height: 1.75; }
.ch { padding: 2px 2px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .15s; }
body.phrases .ch.b { color: var(--blue); }
.ch.on { background: var(--lit); box-shadow: 0 0 0 3px var(--lit); }
.qa { display: flex; flex-direction: column; gap: 14px; }
.qa[hidden] { display: none; }
.peek { flex: none; align-self: center; min-height: 48px; font-size: 11px; }
#app.storyscr { padding-bottom: 0; }
.dock { /* control tray pinned to the bottom of the story screen */
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: auto -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 4px solid var(--line);
}
.dock:empty { display: none; }
.dock .btn { min-height: 66px; }
.dock .go, .dock .fin { font-size: 15px; }
.time {
  flex: 1 0 100%; text-align: center; padding: 12px; font-size: 19px; font-weight: 800;
  background: var(--paper); border: 4px solid var(--line); border-radius: 12px;
}

/* results */
.result { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px; text-align: center; }
.trophy { font-size: 64px; animation: popin .3s ease-out; }
.big { font: 34px/1.2 var(--pixel); }
.result p { margin: 0; font-size: 19px; font-weight: 600; }

/* parents */
.parent { font-family: system-ui, -apple-system, sans-serif; -webkit-user-select: text; user-select: text; }
.panel { padding: 16px; }
.panel h3 { margin: 0 0 10px; font-size: 18px; }
.panel p { margin: 8px 0; }
.note { font-size: 14px; color: var(--muted); line-height: 1.45; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin-bottom: 12px; }
.field select { font: inherit; font-size: 16px; padding: 8px; border: 2px solid var(--line); border-radius: 8px; background: #fff; }
.tick { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; line-height: 1.35; }
.tick input { width: 22px; height: 22px; flex: none; margin: 0; }
.link { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 4px; text-align: left; border-bottom: 1px solid #e3e0d6; vertical-align: top; }
th { font-size: 12px; color: var(--muted); }
td small { display: block; color: var(--muted); font-size: 11px; }
.parent .btn { font-size: 11px; min-height: 48px; }

.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 16px); z-index: 200; transform: translateX(-50%);
  padding: 10px 16px; max-width: calc(100% - 32px);
  background: var(--ink); color: #fff; border-radius: 12px; font-weight: 700; font-size: 15px;
  animation: popin .15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .qb.ready { animation: none; }
}