:root{
  --sky:#d9edf6;
  --sky-deep:#bcdcec;
  --leaf:#2f7d4f;
  --leaf-dark:#1d5334;
  --apple:#e03e3e;
  --plum:#6a4bb0;
  --sun:#f2a413;
  --ink:#17313f;
  --paper:#ffffff;
  --shadow:0 4px 0 rgba(23,49,63,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Fredoka',ui-rounded,'Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(circle at 50% 120%, var(--sky-deep) 0%, var(--sky) 60%);
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:520px;margin:0 auto;padding:16px 16px 40px;min-height:100vh;display:flex;flex-direction:column}

header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:19px;letter-spacing:-.2px;flex:1;min-width:0}
.brand .tree{font-size:24px;line-height:1}
.icon-btn{
  border:none;background:var(--paper);color:var(--ink);
  width:40px;height:40px;border-radius:14px;font-size:18px;cursor:pointer;
  box-shadow:var(--shadow);
}
a.icon-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.icon-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(23,49,63,.18)}

h1{font-size:27px;line-height:1.15;margin:6px 0 4px;font-weight:700;letter-spacing:-.5px}
.lead{margin:0 0 18px;font-size:15px;color:#3f5a68;font-weight:400;max-width:44ch}

.card{background:var(--paper);border-radius:22px;padding:16px;box-shadow:0 6px 0 rgba(23,49,63,.12)}
.block{margin-bottom:18px}
.block-title{font-size:14px;font-weight:600;margin:0 0 10px;color:#3f5a68}

.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.chip{
  border:2px solid var(--sky-deep);background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:19px;font-weight:600;
  padding:12px 0;border-radius:16px;cursor:pointer;transition:transform .08s ease;
}
.chip[aria-pressed="true"]{background:var(--leaf);border-color:var(--leaf-dark);color:#fff}
.chip:active{transform:scale(.94)}
.row-btns{display:flex;gap:8px;margin-top:10px}
.mini{
  flex:1;border:none;background:var(--sky);color:#2b4a5a;font-family:inherit;
  font-size:14px;font-weight:600;padding:10px;border-radius:14px;cursor:pointer;
}

.seg{display:flex;background:var(--sky);border-radius:16px;padding:4px;gap:4px}
.seg button{
  flex:1;border:none;background:transparent;font-family:inherit;font-size:14.5px;font-weight:600;
  color:#3f5a68;padding:11px 6px;border-radius:12px;cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 2px 0 rgba(23,49,63,.12)}

.go{
  width:100%;border:none;background:var(--apple);color:#fff;font-family:inherit;
  font-size:20px;font-weight:700;padding:17px;border-radius:20px;cursor:pointer;
  box-shadow:0 5px 0 #a82a2a;margin-top:4px;
}
.go:active{transform:translateY(3px);box-shadow:0 2px 0 #a82a2a}
.go[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed}

/* gioco */
.hud{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dots{display:flex;gap:5px;flex:1;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:#fff}
.dot.ok{background:var(--leaf)}
.dot.ko{background:var(--apple)}
.dot.now{background:var(--ink);transform:scale(1.35)}
.streak{font-weight:600;font-size:15px;white-space:nowrap}

.timerbar{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.track{flex:1;height:10px;background:var(--paper);border-radius:999px;overflow:hidden}
.fill{height:100%;width:100%;background:var(--leaf);border-radius:999px;transition:width .1s linear}
.fill.hot{background:var(--apple)}
.tlabel{font-weight:600;font-size:14px;min-width:30px;text-align:right;transition:color .2s ease}
.tlabel.bonus{color:var(--leaf);animation:pop .35s ease}

.question{text-align:center;padding:22px 12px 18px}
.sum{font-size:52px;font-weight:600;letter-spacing:1px;line-height:1}
.sum .x{color:var(--sun)}
.hint-btn{
  margin-top:12px;border:none;background:var(--sky);color:#2b4a5a;font-family:inherit;
  font-size:14px;font-weight:600;padding:9px 16px;border-radius:14px;cursor:pointer;
}
.orchard{display:flex;flex-direction:column;gap:5px;align-items:center;margin-top:14px}
.orow{display:flex;gap:5px}
.fruit{width:14px;height:14px;border-radius:50%;background:var(--apple)}
@media (min-width:400px){.fruit{width:16px;height:16px}}

.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ans{
  border:none;background:var(--paper);color:var(--ink);font-family:inherit;
  font-size:26px;font-weight:600;padding:20px 0;border-radius:20px;cursor:pointer;
  box-shadow:var(--shadow);
}
.ans:active{transform:translateY(2px)}
.ans.right{background:var(--leaf);color:#fff}
.ans.wrong{background:var(--apple);color:#fff}
.ans[disabled]{cursor:default}

.typed{margin-top:14px}
.display{
  background:var(--paper);border-radius:20px;padding:16px;text-align:center;
  font-size:34px;font-weight:600;min-height:70px;box-shadow:var(--shadow);
}
.display.right{background:var(--leaf);color:#fff}
.display.wrong{background:var(--apple);color:#fff}
.display .ph{color:#9db4c0}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.key{
  border:none;background:var(--paper);font-family:inherit;font-size:24px;font-weight:600;
  padding:14px 0;border-radius:16px;cursor:pointer;box-shadow:var(--shadow);color:var(--ink);
}
.key.act{background:var(--leaf);color:#fff;box-shadow:0 4px 0 var(--leaf-dark)}
.key.del{background:var(--sky-deep)}
.key:active{transform:translateY(2px)}

.feedback{text-align:center;font-size:17px;font-weight:600;min-height:26px;margin-top:12px}

/* fine */
.score{text-align:center;padding:8px 0 4px}
.score .big{font-size:56px;font-weight:700;line-height:1}
.score .of{font-size:17px;color:#3f5a68;font-weight:500}
.score .record{color:var(--sun);font-weight:700;margin-top:6px}
.medal{font-size:44px}
.review{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.review li{
  display:flex;justify-content:space-between;background:var(--sky);
  border-radius:14px;padding:11px 14px;font-size:17px;font-weight:600;
}
.review li span{color:var(--apple)}
.again{
  width:100%;border:none;background:var(--leaf);color:#fff;font-family:inherit;font-size:18px;
  font-weight:700;padding:16px;border-radius:20px;cursor:pointer;box-shadow:0 5px 0 var(--leaf-dark);
  margin-top:14px;
}
.again.ghost{background:var(--paper);color:var(--ink);box-shadow:var(--shadow);font-size:16px;margin-top:9px}
.again:active{transform:translateY(3px)}
a.again{display:block;text-align:center;text-decoration:none}

/* nome e salvataggio punteggio */
.name-input{
  display:block;width:100%;border:2px solid var(--sky-deep);border-radius:14px;padding:12px;
  font-family:inherit;font-size:18px;font-weight:500;color:var(--ink);background:var(--paper);
}
.name-input:focus{outline:3px solid var(--plum);outline-offset:1px}
.name-input.invalid{border-color:var(--apple)}
.name-hint{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--apple)}
.save{margin-top:16px;background:var(--sky);border-radius:18px;padding:14px;text-align:center}
.save-msg{margin:0;font-size:16px;font-weight:600}
.save-msg.err{color:var(--apple)}
.save-btn{
  margin-top:10px;border:none;background:var(--leaf);color:#fff;font-family:inherit;font-size:16px;font-weight:700;
  padding:10px 18px;border-radius:14px;cursor:pointer;box-shadow:0 4px 0 var(--leaf-dark);
}
.save-btn[disabled]{opacity:.5;cursor:default}
.save-btn.ghost{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.save-choice{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* classifica */
.filters summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:600;
}
.filters summary::-webkit-details-marker{display:none}
.filters summary::after{content:'▾';margin-left:auto;transition:transform .2s}
.filters[open] summary::after{transform:rotate(180deg)}
.filters[open] summary{margin-bottom:14px}
.filters-count{background:var(--leaf);color:#fff;font-size:13px;padding:2px 9px;border-radius:999px}
.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.board li{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:4px 8px;
  background:var(--sky);border-radius:14px;padding:11px 14px;
}
.board li.me{background:var(--sun);color:#fff}
.board .pos{font-size:16px;font-weight:600;color:#5b7482;grid-row:span 2}
.board li.me .pos{color:#fff}
.board .who{font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .pts{font-size:20px;font-weight:700;grid-row:span 2}
.board .cfg{font-size:13px;font-weight:500;color:#3f5a68;display:flex;flex-wrap:wrap;gap:2px 10px}
.board li.me .cfg{color:#fff}
.mini[aria-pressed="true"]{background:var(--leaf);color:#fff}
.empty{text-align:center;color:#5b7482;font-size:15px;padding:14px 0;margin:0}

.pop{animation:pop .28s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.shake{animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

button:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.hidden{display:none}

footer.note{font-size:12px;color:#5b7482;text-align:center;margin-top:auto;padding-top:24px}
footer.note a{color:inherit;text-decoration:underline}
footer.note a:hover{color:var(--ink)}