*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
:root{--bg:#fff7f0;--card:#ffffff;--accent:#ffb703;--accent-dark:#fb8500;--success:#2a9d8f;--wrong:#e63946}
.root-font{font-family:'Comic Sans MS', 'Luckiest Guy', 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, Arial}
:root{--bg:#fffbf2;--card:#ffffff;--accent:#ffb703;--accent-dark:#fb8500;--success:#2a9d8f;--wrong:#e63946}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#e6fdf5 0%, #fff7f2 100%);color:#222;font-family: 'Baloo 2', 'Comic Sans MS', system-ui, -apple-system, 'Segoe UI', Roboto, Arial}

/* Local cartoon font (place TTF/WOFF in assets/fonts/) */
@font-face{
  font-family: 'CartoonFont';
  src: url('assets/fonts/Baloo2-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Additional local font provided by user */
@font-face{
  font-family: 'Oi';
  src: url('assets/fonts/Oi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html,body{font-family: 'Oi', 'CartoonFont', 'Baloo 2', 'Comic Sans MS', system-ui, -apple-system, 'Segoe UI', Roboto, Arial}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;flex-wrap:wrap;gap:8px}
.title{font-weight:800;font-size:clamp(1rem,4.5vw,1.4rem)}
.meta{display:flex;gap:12px;align-items:center}
.meta .level,.meta .coins{background:rgba(255,255,255,0.85);padding:6px 10px;border-radius:10px;font-weight:700;display:flex;align-items:center;gap:8px}
.coin-icon{width:16px;height:16px}
.meta .lives{background:rgba(255,240,240,0.9);padding:6px 10px;border-radius:10px;font-weight:700;display:flex;align-items:center;gap:8px;color:#d62828}
.game{max-width:720px;margin:0 auto;padding:12px;display:flex;flex-direction:column;min-height:calc(100vh - 64px)}
.story{display:flex;gap:12px;align-items:center;padding:12px}
.scene{position:relative;width:clamp(72px,18vw,140px);height:clamp(64px,16vw,112px)}
.bg{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:12px}
.hero{position:absolute;left:8%;top:6%;width:clamp(56px,12vw,96px);height:auto}
.story-text{background:rgba(255,255,255,0.7);padding:10px;border-radius:12px;flex:1}
.card{background:linear-gradient(180deg,#fffef8,#fff6e6);border-radius:20px;padding:12px;box-shadow:0 18px 40px rgba(0,0,0,0.12);margin:10px 0;border:4px solid rgba(255,183,3,0.08);display:flex;flex-direction:column;justify-content:space-between}
.problem{font-size:1.6rem;font-weight:700;padding:18px;text-align:center;border-radius:10px;background:linear-gradient(90deg,#fff 0,#fffbf7 100%)}
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px}
.btn-option{background:linear-gradient(180deg,#fffef8 0%,#fff1d6 100%);border:0;padding:12px 10px;border-radius:14px;font-size:1.05rem;font-weight:800;touch-action:none;box-shadow:0 8px 18px rgba(0,0,0,0.08);color:#7a4b00;min-height:50px}
.btn-option:active{transform:scale(0.98)}
.feedback{min-height:40px;text-align:center;margin-top:8px;font-weight:700}

/* Progress / rewards */
.progress-wrap{height:16px;background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(0,0,0,0.02));border-radius:999px;overflow:hidden;margin-top:12px;border:3px solid rgba(255,219,128,0.4)}
.progress-bar{height:100%;background:linear-gradient(90deg,#ffdd6b 0,#ffb703 100%);width:0%;transition:width 320ms ease}
.badge-area{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px}
.badge{width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,#fffef8,#fff6e6);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,0.12)}

.collected-badges{display:flex;gap:8px;align-items:center;padding-left:6px}
.collected-badges img{width:28px;height:28px;border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,0.12)}

.confetti-piece{pointer-events:none}

/* Level-up and reward animations */
@keyframes badgePulse {
  0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
  50%{transform:scale(1.14);filter:drop-shadow(0 10px 18px rgba(255,183,3,0.14))}
 100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
}
@keyframes heroShine {
  0%{transform:translateY(0) scale(1)}
 50%{transform:translateY(-8px) scale(1.03)}
 100%{transform:translateY(0) scale(1)}
}
.badge-glow{animation:badgePulse 700ms ease}
.level-up .hero{animation:heroShine 700ms ease}

/* small glow on progress bar when filling */
.progress-bar.fill-flash{box-shadow:0 6px 24px rgba(255,183,3,0.18)}

/* Overlay and modal */
.intro-overlay{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#ffe7c7,#fff6f0);pointer-events:none}
.intro-card{padding:12px 18px;border-radius:18px}
.intro-overlay[aria-hidden="true"]{opacity:0;transform:scale(0.98);transition:opacity .2s,transform .2s}
.intro-overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}
.intro-text{font-family: 'Baloo 2', 'Comic Sans MS', system-ui;font-weight:900;font-size:2.4rem;color:#fb8500;text-shadow:0 10px 30px rgba(251,133,0,0.18);text-align:center}

/* intro animation */
.intro-text{opacity:0;transform:scale(.8) translateY(8px);transition:opacity .28s ease, transform .45s cubic-bezier(.2,.9,.25,1)}
.intro-text.intro-show{opacity:1;transform:scale(1) translateY(0)}

/* reward toast */
.reward-toast{position:fixed;left:50%;top:22%;transform:translateX(-50%) scale(.8);background:linear-gradient(90deg,#fff6d8,#fff1c2);padding:10px 14px;border-radius:12px;font-weight:900;color:#ef7a00;box-shadow:0 18px 40px rgba(0,0,0,0.12);opacity:0;pointer-events:none;z-index:120}
.reward-toast.reward-show{opacity:1;transform:translateX(-50%) scale(1);transition:transform .28s cubic-bezier(.2,.9,.25,1),opacity .28s}

/* Start screen */
.start-screen{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#ffdede,#fff9e6);z-index:200}
.start-card{background:linear-gradient(180deg,#fff,#fff6e6);padding:20px;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,0.16);text-align:center;max-height:calc(100vh - 40px);overflow:auto}
.game-logo{font-size:1.8rem;font-weight:900;color:#ef6c00;margin-bottom:10px;text-shadow:0 6px 18px rgba(239,108,0,0.12)}
.start-column{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.start-btn{background:linear-gradient(180deg,#ffb703,#fb8500);color:#fff;border-radius:12px;padding:12px 18px;font-weight:900;font-size:1.1rem;border:none}
.start-screen[aria-hidden="true"]{display:none}

.modal{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.36));opacity:0;pointer-events:none;z-index:300}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal-card{background:linear-gradient(180deg,#fffdf7,#fff7ec);padding:12px;border-radius:14px;max-width:520px;width:94%;box-shadow:0 30px 90px rgba(0,0,0,0.28);text-align:left;border:3px solid rgba(255,183,3,0.12);max-height:calc(100vh - 20px);} 
.modal-card{overflow:auto}
.modal-card h2{margin:6px 0 8px 0;font-size:1.25rem;color:#ef6c00;text-shadow:0 6px 18px rgba(239,108,0,0.06);text-align:center}
.modal-actions{display:flex;justify-content:center;margin-top:14px;gap:10px}
.modal-card .btn{padding:10px 14px;border-radius:12px;font-weight:900}
.modal-close{position:absolute;right:12px;top:8px;background:transparent;border:none;font-size:20px;line-height:1;color:#8a3b1b;cursor:pointer}
.modal-close:hover{transform:scale(1.08)}
.modal-card #gameStats{margin-top:8px;text-align:left;font-weight:700}
.finish-btn{background:linear-gradient(180deg,#ef476f,#e63946);color:#fff;border:none;padding:12px 18px;border-radius:14px;font-weight:900;box-shadow:0 18px 40px rgba(230,30,40,0.16);font-size:1rem}
.finish-btn:hover{transform:translateY(-3px);box-shadow:0 26px 50px rgba(230,30,40,0.18)}

/* Modal inner body */
.modal-card .modal-body{background:linear-gradient(180deg,#fff,#fffaf0);padding:8px;border-radius:10px;box-shadow:inset 0 6px 16px rgba(0,0,0,0.03)}
.modal-body .row{display:flex;justify-content:space-between;align-items:center;padding:8px 6px;border-bottom:1px dashed rgba(0,0,0,0.04)}
.modal-body .row:last-child{border-bottom:none}
.modal-body .stat{font-weight:800;color:#6b3b00}

/* Buttons in modals */
.modal-actions .btn#progressCloseBtn{background:linear-gradient(180deg,#ffb703,#fb8500);color:#fff}
.modal-actions .btn#settingsSave{background:linear-gradient(180deg,#06d6a0,#2a9d8f);color:#fff}

/* Range (volume) styling */
input[type=range]{width:100%;appearance:none;height:10px;background:linear-gradient(90deg,#ffd166,#06d6a0);border-radius:8px;padding:0}
input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #ef6c00;box-shadow:0 6px 18px rgba(239,108,0,0.12);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #ef6c00}

/* Fancy checkbox */
input[type=checkbox]{width:18px;height:18px;appearance:none;border-radius:6px;border:2px solid #ef6c00;background:linear-gradient(180deg,#fff,#fff6e6);box-shadow:0 6px 14px rgba(0,0,0,0.06);cursor:pointer}
input[type=checkbox]:checked{background:linear-gradient(180deg,#ffb703,#fb8500);border-color:#fb8500}

/* Topbar icon buttons */
.icon-btn{background:transparent;border:none;font-size:18px;margin-right:8px;cursor:pointer}

/* Modal body */
.modal-body{display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:8px}
.modal-body label{display:flex;justify-content:space-between;align-items:center}

/* Progress modal specifics */
#progressBody{min-height:80px}
#progressBody .stat{padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.04)}

/* Parent panel smaller input */
#parentPin{width:100%;box-sizing:border-box}

/* Tap mode decorative */
.tap-mode{display:flex;align-items:center;gap:8px;font-weight:800;color:#ef6c00}
.tap-decor{background:linear-gradient(180deg,#fff6d8,#fff1c2);padding:6px;border-radius:10px;box-shadow:0 8px 18px rgba(0,0,0,0.08)}

/* main settings link and ratings box */
.main-actions{display:flex;justify-content:center;margin:8px 0}
.link-btn{background:transparent;border:none;color:#fb8500;font-weight:900;cursor:pointer}
.ratings-box{background:linear-gradient(180deg,#fffef8,#fff6e6);padding:8px;border-radius:12px;margin:8px 12px;box-shadow:0 12px 28px rgba(0,0,0,0.08);font-weight:700}
.ratings-box .row{display:flex;justify-content:space-between;padding:6px 4px;border-bottom:1px dashed rgba(0,0,0,0.04)}
.ratings-box .row:last-child{border-bottom:none}

.controls{display:flex;gap:12px;align-items:center;justify-content:center;padding:10px}
#newBtn{background:var(--accent);border:none;padding:10px 14px;border-radius:12px;color:#fff;font-weight:700}
.btn#endBtn{background:linear-gradient(180deg,#ef476f,#e63946);border:none;padding:10px 14px;border-radius:12px;color:#fff;font-weight:700}
.touch-toggle{display:flex;align-items:center;gap:8px}
.confetti{position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none}

/* Animations */
@keyframes float {
  0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}
}
.hero{animation:float 3s ease-in-out infinite}

/* Responsive */
/* Smaller phones */
@media (max-width:480px){
  .game{padding:8px}
  .story{flex-direction:column;align-items:flex-start}
  .scene{width:84px;height:72px}
  .problem{font-size:1rem;padding:12px}
  .options{grid-template-columns:repeat(1,1fr);gap:8px}
  .btn-option{padding:12px;font-size:1rem;min-height:52px}
  .meta{width:100%;justify-content:space-between}
}

/* Extra small phones: improve touch targets and avoid overflow */
@media (max-width:379px){
  .btn-option{min-height:56px;font-size:0.95rem;padding:10px}
  .reward-toast{top:18%}
  .intro-text{font-size:1.6rem}
  .modal-card{padding:10px}
  .start-card{padding:12px}
}

/* Typical phones */
@media (min-width:481px) and (max-width:900px){
  .game{padding:12px}
  .options{grid-template-columns:repeat(2,1fr)}
  .btn-option{min-height:56px}
}

/* Desktop / large */
@media (min-width:901px){
  .options{grid-template-columns:repeat(3,1fr)}
}

/* When playing, collapse bottom actions and ratings to avoid empty space on small screens */
.playing .main-actions,
.playing .ratings-box{
  display:none !important;
}

/* Ensure main game area uses available vertical space on phones */
@media (max-width:600px){
  .game{min-height:calc(100vh - 100px)}
  .start-card{margin:8px}
}

/* hide ratings on very small devices to save space and tighten layout */
@media (max-width:420px){
  .ratings-box{display:none}
  .main-actions{display:none}
  .topbar{padding:8px 10px}
  .title{font-size:clamp(0.9rem,5vw,1.05rem)}
  .game{padding:6px}
  .card{padding:8px;border-radius:14px}
  .story{gap:8px}
  .scene{width:72px;height:64px}
  .hero{width:64px}
  .story-text{padding:8px}
  .problem{font-size:1.05rem;padding:10px}
  .options{grid-template-columns:repeat(1,1fr);gap:8px}
  .btn-option{padding:10px;font-size:0.95rem;min-height:48px;border-radius:12px}
  .progress-wrap{height:12px}
  .badge{width:40px;height:40px;border-radius:10px}
  .collected-badges img{width:22px;height:22px}
  .reward-toast{top:16%}
  .intro-text{font-size:1.4rem}
  .modal-card{padding:8px;max-height:calc(100vh - 24px)}
  .start-card{padding:10px;max-height:calc(100vh - 24px)}
  input[type=range]::-webkit-slider-thumb{width:16px;height:16px}
  /* hide the label text "Життя:" but keep the hearts visible */
  .meta .lives{font-size:0;color:transparent}
  .meta .lives span#lives{font-size:1rem;color:#d62828;font-weight:800;display:inline-block}
}