:root{
  --bg1:#4c29c7;
  --bg2:#9d41dd;
  --bg3:#ff6d94;
  --bg4:#ffb454;
  --panel:rgba(255,255,255,.14);
  --panel-strong:rgba(255,255,255,.2);
  --line:rgba(255,255,255,.18);
  --text:#fff7ff;
  --muted:rgba(255,247,255,.78);
  --shadow:0 18px 40px rgba(8,3,34,.28);
  --radius:24px;
  --safe-top:max(16px, env(safe-area-inset-top));
  --safe-bottom:max(16px, env(safe-area-inset-bottom));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#2b175f;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text)}
body::before{
  content:"";position:fixed;inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 35%, rgba(255,255,255,.11) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 80%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    linear-gradient(135deg,var(--bg1),var(--bg2) 35%,var(--bg3) 70%,var(--bg4));
  background-size:auto,auto,auto,cover;
  filter:saturate(1.1);
}
#app,.screen{position:relative;width:100%;height:100%}
.screen{display:none !important}
.screen.active{display:block !important}
#loadingScreen.active{display:flex !important}
#menuScreen.active{display:flex !important}
.hidden{display:none !important}

.logoWrap,.menuCard,.panel,.hudBar,.modeBadge,.statsCard,.modeCard,.levelProgress,.iconBtn,.toast{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
#loadingScreen{
  display:flex;align-items:center;justify-content:center;
}
.logoWrap{
  display:flex;align-items:center;gap:18px;
  padding:22px 28px;border:1px solid var(--line);
  border-radius:30px;background:var(--panel);box-shadow:var(--shadow);
  transform:translateY(6px);animation:fadeInUp .45s ease both;
}
.logoDog,.heroDog{display:block;object-fit:contain}
.logoDog{width:72px;height:72px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.22))}
.logoText{margin:0;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:.02em}

#menuScreen{
  padding:var(--safe-top) 16px var(--safe-bottom);
  display:flex;align-items:center;justify-content:center;
}
.menuTopIcons{
  position:absolute;top:var(--safe-top);right:16px;display:flex;gap:10px;z-index:4;
}
.menuCard{
  width:min(980px,100%);padding:22px;border-radius:30px;background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--shadow);
  animation:fadeInUp .3s ease both;
}
.hero{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.heroDog{
  width:92px;height:92px;padding:6px;border-radius:24px;
  background:rgba(255,255,255,.18);filter:drop-shadow(0 10px 16px rgba(0,0,0,.18));
}
.hero h1{margin:0 0 8px;font-size:clamp(2rem,4vw,3.3rem)}
.tagline{margin:0;color:var(--muted);font-size:1rem}
.modeGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}
.modeCard{
  appearance:none;border:1px solid var(--line);cursor:pointer;text-align:left;color:var(--text);
  background:rgba(255,255,255,.12);padding:18px;border-radius:26px;box-shadow:var(--shadow);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.modeCard:hover,.modeCard:active{transform:translateY(-2px);background:rgba(255,255,255,.17)}
.modeCard span{display:block}
.modeTitle{font-size:1.15rem;font-weight:800;margin-bottom:8px}
.modeSub{color:var(--muted);min-height:40px;line-height:1.35}
.cta{
  margin-top:14px;display:inline-block;padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.18);font-weight:700
}
.statsCard{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px 18px;
  border-radius:22px;background:rgba(255,255,255,.1);border:1px solid var(--line);
}
.statsCard strong,.resultsGrid strong{display:block;margin-bottom:6px}
.statsCard span,.resultsGrid span{color:var(--muted)}

#gameScreen{overflow:hidden}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%}
.topHud{
  position:absolute;top:var(--safe-top);left:16px;right:16px;z-index:4;
  display:flex;justify-content:center;align-items:flex-start;gap:12px;pointer-events:none;
}
.hudBar{
  pointer-events:auto;
  display:flex;gap:20px;align-items:center;padding:12px 16px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid var(--line);box-shadow:var(--shadow);
}
.hudItem{display:flex;flex-direction:column;min-width:74px}
.hudLabel{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.modeBadge{
  pointer-events:auto;
  padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid var(--line);box-shadow:var(--shadow);font-size:.9rem;font-weight:700;
}
.playIcons{
  position:absolute;top:var(--safe-top);right:16px;z-index:5;display:flex;gap:10px;
}
.iconBtn{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.14);color:var(--text);
  width:46px;height:46px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--shadow);font-size:1.05rem;transition:transform .12s ease,background .12s ease;
}
.wideIconBtn{width:auto;padding:0 16px}
.iconBtn:hover,.iconBtn:active{transform:translateY(-1px);background:rgba(255,255,255,.2)}
.levelProgress{
  position:absolute;left:16px;right:16px;top:calc(var(--safe-top) + 64px);z-index:4;
  max-width:min(520px,calc(100vw - 32px));margin:0 auto;padding:12px 14px;border-radius:20px;
  background:rgba(255,255,255,.12);border:1px solid var(--line);box-shadow:var(--shadow);
}
.levelRow{display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.progressBar{
  margin-top:10px;height:8px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden
}
#levelProgressBar{
  width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffd166,#fff0ad)
}
.overlay{
  position:absolute;inset:0;z-index:10;display:grid;place-items:center;
  background:rgba(20,12,52,.22)
}
.panel{
  width:min(92vw,460px);padding:24px;border-radius:28px;background:rgba(34,18,78,.45);
  border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow);text-align:center;
  animation:fadeInUp .2s ease both;
}
.panel h2{margin:0 0 10px;font-size:1.8rem}
.panel p{margin:0;color:var(--muted);line-height:1.45}
.primaryBtn,.secondaryBtn{
  appearance:none;border:none;cursor:pointer;border-radius:999px;padding:14px 18px;
  font-size:1rem;font-weight:800
}
.primaryBtn{background:linear-gradient(135deg,#ffcf70,#ff8d73);color:#2d174f}
.secondaryBtn{background:rgba(255,255,255,.14);color:var(--text);border:1px solid var(--line)}
.overlayButtons{display:grid;gap:12px;margin-top:18px}
.rowToggles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.resultsGrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left;
  margin-top:16px;padding:16px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid var(--line)
}
.resultsGrid > div:last-child{grid-column:1/-1}
.toast{
  position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 18px);z-index:12;
  transform:translateX(-50%) translateY(18px);opacity:0;pointer-events:none;
  padding:12px 16px;border-radius:999px;background:rgba(28,15,70,.55);border:1px solid var(--line)
}
.toast.show{animation:toastInOut 1.2s ease forwards}
.countdownPanel{width:150px;height:150px;display:grid;place-items:center}
#countdownText{font-size:4rem;font-weight:900}
.tutorialPanel{width:min(92vw,520px)}
.tutorialDemo{position:relative;height:140px;margin-top:14px;border-radius:22px;background:rgba(255,255,255,.08)}
.demoDog{
  position:absolute;left:46px;bottom:26px;width:54px;height:54px;border-radius:16px;
  background:url("assets/dog.png") center/contain no-repeat;
}
.demoArc{
  position:absolute;left:80px;bottom:54px;width:180px;height:76px;border-top:3px solid rgba(255,255,255,.9);
  border-radius:180px 180px 0 0;transform:rotate(0deg)
}
.demoDot{
  position:absolute;left:124px;bottom:108px;width:14px;height:14px;border-radius:50%;
  background:#ffd166;box-shadow:0 0 14px rgba(255,209,102,.7);animation:demoDot 1.35s ease-in-out infinite alternate
}
@keyframes demoDot{
  from{transform:translate(-42px,24px)}
  to{transform:translate(72px,0)}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes toastInOut{
  0%{opacity:0;transform:translateX(-50%) translateY(18px)}
  12%,82%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(0)}
}
@media (max-width:760px){
  .menuCard{padding:18px}
  .modeGrid,.statsCard,.resultsGrid{grid-template-columns:1fr}
  .heroDog{width:76px;height:76px}
  .hero h1{font-size:2rem}
  .levelProgress{top:calc(var(--safe-top) + 58px)}
  .playIcons .iconBtn,.menuTopIcons .iconBtn{width:42px;height:42px}
}
@media (orientation:landscape) and (max-height:560px){
  .hero{margin-bottom:12px}
  .modeGrid{margin:12px 0}
  .menuCard{max-height:calc(100vh - 24px);overflow:auto}
}