:root{
  --bg1:#dff0ff;
  --bg2:#eef7ff;
  --card:#ffffff;
  --text:#22324a;
  --muted:#66768f;
  --shadow:0 6px 16px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg1),var(--bg2))}
button{font:inherit;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
#app{min-height:100dvh;width:min(1400px,100%);margin:0 auto;padding:12px}
.screen{display:flex;flex-direction:column;gap:14px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.topbar-left{display:flex;align-items:flex-start;gap:12px;min-width:0}
.icon-btn,.nav-btn{width:46px;height:46px;border:none;border-radius:999px;background:#fff;box-shadow:var(--shadow);cursor:pointer;font-size:22px;color:var(--text);flex:0 0 auto}
.title-wrap h1{margin:0;font-size:clamp(24px,7vw,42px);line-height:1}
.subtitle{margin-top:4px;color:var(--muted);font-size:clamp(14px,4vw,18px);line-height:1.25}
.badge{padding:8px 12px;border-radius:999px;background:#ffd166;color:#6d5200;font-weight:800;white-space:nowrap;font-size:14px}
.home-hero{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.9));border-radius:24px;padding:16px 18px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px;font-size:clamp(24px,8vw,40px);font-weight:900}
.brand-badge{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#ffb703,#fb8500);display:grid;place-items:center;font-size:24px;flex:0 0 auto}
.home-grid{display:grid;grid-template-columns:1fr;gap:12px}
.menu-card{border:none;background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--shadow);text-align:left;cursor:pointer;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.menu-icon{font-size:28px}
.menu-card h3{margin:8px 0 6px;font-size:clamp(20px,6vw,28px)}
.menu-card p{margin:0;color:var(--muted);line-height:1.35;font-size:14px}
.helper-steps{display:grid;gap:6px;color:var(--muted);font-size:14px;font-weight:700}
.habitats{display:grid;grid-template-columns:1fr;gap:12px}
.habitat{position:relative;overflow:hidden;min-height:108px;border:none;border-radius:22px;box-shadow:var(--shadow);padding:14px;cursor:pointer;color:#fff;text-align:left}
.habitat.selected{outline:3px solid rgba(255,255,255,.95);transform:scale(1.01)}
.habitat-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16}
.habitat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.06))}
.habitat-content{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}
.habitat-head{display:flex;flex-direction:column;gap:2px}
.habitat-title{font-size:clamp(22px,8vw,34px);font-weight:900}
.habitat-emoji{font-size:24px}
.habitat-progress{font-size:13px;font-weight:700;opacity:.95}
.habitat-animals{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;justify-content:flex-end;min-height:34px;max-width:55%}
.habitat-mini{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.22);display:grid;place-items:center;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.habitat-mini img{width:100%;height:100%;object-fit:contain}
.habitat-mini-emoji{font-size:22px;line-height:1}
.animals-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:4px}
.animal-card{border:none;background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:10px;text-align:center;min-height:180px}
.animal-card.selected{outline:3px solid #ffd166;transform:scale(1.03)}
.animal-card.done{opacity:.35;pointer-events:none}
.animal-image{flex:1;min-height:110px;border-radius:18px;background:linear-gradient(180deg,#f7fbff,#edf5ff);display:grid;place-items:center;overflow:hidden}
.animal-image img{width:100%;height:100%;object-fit:contain}
.image-fallback{font-size:58px}
.animal-name{font-size:clamp(20px,6vw,28px);font-weight:900}
.memory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.memory-card{position:relative;border:none;background:transparent;aspect-ratio:1/1;border-radius:18px;overflow:hidden;cursor:pointer;padding:0}
.memory-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s ease}
.memory-card.flipped .memory-card-inner,.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}
.memory-face{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;overflow:hidden}
.memory-front{background:linear-gradient(160deg,#5fb0ff,#4a7fff);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow);font-size:44px;font-weight:900}
.memory-back{background:#fff;transform:rotateY(180deg);padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
.memory-back .animal-image{min-height:unset;flex:1}
.memory-back .animal-name{font-size:18px}
.carousel-wrap{position:relative;overflow:hidden;padding-top:4px}
.carousel-track{display:flex;transition:transform .35s ease}
.slide{min-width:100%;display:flex;justify-content:center;padding:0 3%}
.slide-card{width:min(780px,100%);background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
.slide-card .animal-image{min-height:220px}
.slide-title{font-size:clamp(22px,8vw,40px);font-weight:900}
.speech{color:var(--muted);line-height:1.38;font-size:clamp(14px,4.4vw,19px)}
.carousel-nav{display:flex;justify-content:center;align-items:center;gap:10px}
.primary-btn{border:none;background:linear-gradient(135deg,#ffb703,#ff7b00);color:#fff;border-radius:18px;padding:12px 18px;box-shadow:var(--shadow);cursor:pointer;font-size:16px;font-weight:800;min-width:120px}
.peek{position:absolute;top:28px;bottom:72px;width:6%;pointer-events:none;opacity:.25}
.peek.left{left:0;background:linear-gradient(90deg,rgba(223,240,255,.98),rgba(223,240,255,0))}
.peek.right{right:0;background:linear-gradient(270deg,rgba(223,240,255,.98),rgba(223,240,255,0))}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#22324a;color:#fff;padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);z-index:30;font-size:14px}
.success{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:40}
.success-bubble{background:#1fa34a;color:#fff;padding:16px 22px;border-radius:18px;box-shadow:var(--shadow);font-size:clamp(20px,6vw,30px);font-weight:900}
@media (min-width:768px){
  #app{padding:18px}
  .home-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .menu-card{min-height:170px;padding:22px;border-radius:28px}
  .menu-icon{font-size:42px}
  .menu-card h3{font-size:clamp(24px,2vw,32px);margin:14px 0 8px}
  .menu-card p{font-size:16px}
  .habitats{grid-template-columns:repeat(3,1fr);gap:16px}
  .habitat{min-height:128px;padding:16px;border-radius:26px}
  .habitat-title{font-size:clamp(26px,2.3vw,40px)}
  .habitat-emoji{font-size:28px}
  .habitat-mini{width:38px;height:38px}
  .animals-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .animal-card{min-height:240px;padding:14px;border-radius:26px}
  .animal-image{min-height:160px}
  .memory-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .memory-card{border-radius:24px}
  .memory-face{border-radius:24px}
  .memory-front{font-size:50px}
  .slide{padding:0 7%}
  .slide-card{padding:22px;border-radius:34px}
  .slide-card .animal-image{min-height:300px}
  .primary-btn{padding:14px 24px;font-size:18px;min-width:140px}
}