/* ===== YakPool — storybook daylight ===== */
:root{
  --sky:#BEE9F4; --sky-deep:#8FD4EA;
  --meadow:#7ECB6F; --forest:#2E7D4F; --bark:#8A5A3B;
  --gold:#FFC93C; --berry:#FF7BAC; --cream:#FFF8EC;
  --ink:#2B3A33; --ink-soft:#5B6E63;
  --radius:26px;
  --shadow:0 6px 0 rgba(43,58,51,.18);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0; overflow:hidden;}
body{
  font-family:"Nunito",system-ui,sans-serif; color:var(--ink);
  background:linear-gradient(var(--sky) 0%, var(--sky-deep) 70%, var(--meadow) 70.5%);
  user-select:none;
}
button{font-family:inherit; cursor:pointer;}
button:focus-visible{outline:4px solid var(--berry); outline-offset:2px;}
.hidden{display:none !important;}

.screen{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; overflow:hidden;}

/* ===== title / profile picker ===== */
.app-title{
  font-family:"Baloo 2",cursive; font-weight:800; margin:5vh 0 0;
  font-size:clamp(3rem,9vw,5.5rem); color:var(--forest); letter-spacing:.02em;
  text-shadow:0 5px 0 rgba(43,58,51,.12);
}
.app-title span{color:var(--berry);}
.app-sub{font-family:"Baloo 2",cursive; font-size:clamp(1.3rem,3.5vw,1.9rem); color:var(--ink); margin:.4em 0 1em;}
.sky-deco{position:absolute; inset:0; pointer-events:none; font-size:3rem;}
.sun{position:absolute; top:4vh; right:6vw; font-size:4.5rem;}
.cloud{position:absolute; opacity:.9;}
.c1{top:8vh; left:8vw; animation:drift 40s linear infinite;}
.c2{top:18vh; left:55vw; animation:drift 55s linear infinite reverse;}
@keyframes drift{from{transform:translateX(-10vw)}to{transform:translateX(110vw)}}

.profile-grid{display:flex; flex-wrap:wrap; gap:22px; justify-content:center; padding:0 4vw; z-index:1;}
.profile-card{
  width:min(180px,40vw); min-height:180px; border:none; border-radius:var(--radius);
  background:var(--cream); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-family:"Baloo 2",cursive; font-size:1.25rem; font-weight:700; color:var(--ink);
  transition:transform .12s;
}
.profile-card:active{transform:scale(.95);}
.profile-card .face{font-size:4rem; line-height:1;}
.profile-card.new{background:rgba(255,248,236,.6); border:4px dashed var(--bark); box-shadow:none; color:var(--ink-soft);}
.profile-card .band-tag{font-size:.8rem; font-weight:800; color:#fff; background:var(--forest); border-radius:999px; padding:2px 12px;}
.profile-card .band-tag.explorer{background:var(--berry);}

.parents-btn{
  position:absolute; bottom:18px; right:18px; border:none; border-radius:999px;
  background:rgba(255,255,255,.7); padding:12px 18px; font-weight:800; color:var(--ink-soft);
}

/* ===== hub top bar ===== */
.hub-top{
  width:100%; display:flex; gap:10px; align-items:center; padding:12px 14px; z-index:5;
}
.chip{
  border:none; border-radius:999px; background:var(--cream); box-shadow:var(--shadow);
  font-family:"Baloo 2",cursive; font-weight:700; font-size:1.15rem; color:var(--ink);
  min-height:56px; min-width:64px; padding:8px 18px; display:flex; align-items:center; gap:8px; justify-content:center;
}
.chip-stars{background:var(--gold); margin-left:auto;}
.chip-title{background:transparent; box-shadow:none; font-size:1.4rem; color:var(--forest);}
.chip-avatar{font-size:1.6rem;}
#screen-game .chip-stars{margin-left:auto;}

/* ===== valley ===== */
.valley{position:relative; flex:1; width:100%;}
#valley-svg{position:absolute; inset:0; width:100%; height:100%;}
#valley-items{position:absolute; inset:0;}
.spot{
  position:absolute; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:none; background:transparent; padding:6px;
}
.spot .art{
  font-size:clamp(2.6rem,7vw,4rem); line-height:1;
  filter:drop-shadow(0 5px 2px rgba(43,58,51,.25));
  transition:transform .15s;
}
.spot:active .art{transform:scale(1.15);}
.spot .label{
  font-family:"Baloo 2",cursive; font-weight:800; font-size:clamp(.85rem,2vw,1.05rem);
  background:var(--cream); border-radius:999px; padding:4px 14px; box-shadow:var(--shadow); white-space:nowrap;
}
.spot.landmark .label{background:#fff;}
.spot .progress{display:flex; gap:3px;}
.spot .progress i{width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--bark); font-style:normal;}
.spot .progress i.full{background:var(--gold);}
.spot.done .progress{display:none;}
.spot .resident{position:absolute; top:-28px; right:-14px; font-size:1.9rem; animation:hop 2.2s ease-in-out infinite;}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.spot.mischief .art::after{content:"❗"; font-size:1.4rem; position:absolute;}

.yako-bubble{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  max-width:min(640px,92vw); background:var(--cream); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 18px; display:flex; align-items:center; gap:12px;
  font-family:"Baloo 2",cursive; font-size:1.2rem; z-index:6;
}
.say-btn{border:none; background:var(--gold); border-radius:50%; width:52px; height:52px; font-size:1.3rem; flex:none; box-shadow:var(--shadow);}

/* ===== game stage ===== */
.game-root{flex:1; width:100%; max-width:1100px; padding:8px 14px 20px; display:flex; flex-direction:column; overflow:auto;}
.g-instruction{
  display:flex; align-items:center; gap:12px; background:var(--cream); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px 16px; margin-bottom:14px;
  font-family:"Baloo 2",cursive; font-size:clamp(1.1rem,3vw,1.5rem);
}
.g-area{flex:1; display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; justify-content:center;}
.g-panel{background:rgba(255,248,236,.85); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; flex:1; min-width:260px;}
.g-panel h4{font-family:"Baloo 2",cursive; margin:0 0 10px; color:var(--forest); font-size:1.15rem;}

.big-btn{
  border:none; border-radius:999px; background:var(--berry); color:#fff;
  font-family:"Baloo 2",cursive; font-weight:800; font-size:1.35rem;
  min-height:64px; padding:12px 30px; box-shadow:var(--shadow);
}
.big-btn.green{background:var(--forest);}
.big-btn:disabled{opacity:.45;}
.small-btn{
  border:none; border-radius:999px; background:var(--forest); color:#fff;
  font-weight:800; min-height:48px; padding:8px 18px; box-shadow:var(--shadow);
}
.pick{
  border:none; border-radius:20px; background:#fff; box-shadow:var(--shadow);
  min-width:76px; min-height:76px; font-size:2.2rem; position:relative;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.pick small{font-size:.72rem; font-weight:800; color:var(--ink-soft); font-family:"Nunito",sans-serif;}
.pick.sel{outline:5px solid var(--gold);}
.pick.out{opacity:.28; text-decoration:line-through;}
.pick-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}

.cauldron{font-size:6rem; text-align:center; line-height:1.1;}
.effect{font-size:3.4rem; min-height:1.2em; text-align:center;}
.journal{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.journal .entry{background:#fff; border-radius:14px; padding:6px 10px; font-size:1.1rem; box-shadow:var(--shadow);}

.grid3{display:grid; grid-template-columns:repeat(3,minmax(84px,110px)); gap:10px; justify-content:center;}
.tile{
  border:none; border-radius:18px; min-height:84px; font-size:2.2rem; position:relative;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
}
.tile.water{background:#9ADCF0;} .tile.tree{background:#A8DDA0;} .tile.grass{background:#F2E4A2;}
.tile .dino{position:absolute; font-size:2.4rem; bottom:4px;}
.tile.bad{outline:5px solid #E4572E;}
.tile.good{outline:5px solid var(--forest);}

.pizza{
  width:min(320px,70vw); aspect-ratio:1; border-radius:50%; margin:0 auto; position:relative;
  background:radial-gradient(circle at 50% 45%, #F7D08A 62%, #E8A552 63%, #C9752B 100%);
  box-shadow:var(--shadow);
}
.pizza .top{position:absolute; font-size:1.9rem; transform:translate(-50%,-50%); border:none; background:transparent; padding:4px;}
.order-check{font-weight:800; margin:4px 0; font-size:1.05rem;}
.order-check.ok{color:var(--forest);} .order-check.no{color:#B33A3A;}

/* ===== name picker ===== */
.app-title.small{font-size:clamp(2.2rem,6vw,3.4rem); margin:4vh 0 2vh;}
.name-card{
  background:var(--cream); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 24px; width:min(560px,92vw); display:flex; flex-direction:column; gap:12px; align-items:center; z-index:1;
}
.avatar-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.avatar-pick{
  border:none; background:#fff; border-radius:20px; width:76px; height:76px; font-size:2.4rem;
  box-shadow:var(--shadow);
}
.avatar-pick.sel{outline:5px solid var(--gold);}
.name-label{font-family:"Baloo 2",cursive; font-size:1.25rem; display:flex; align-items:center; gap:10px;}
.name-input{
  width:100%; text-align:center; font-family:"Baloo 2",cursive; font-weight:700;
  font-size:1.7rem; padding:14px; border-radius:20px; border:4px solid var(--bark);
  background:#fff; color:var(--ink); min-height:64px;
}
.name-input:focus{outline:4px solid var(--berry); outline-offset:2px;}
.name-hint{margin:0; color:var(--ink-soft); font-size:.95rem; text-align:center;}
.row.center{justify-content:center; align-items:center;}
.small-btn.ghost{background:transparent; color:var(--ink-soft); box-shadow:none;}

/* ===== memory meadow ===== */
.memory-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,110px)); gap:12px; justify-content:center;}
.card{
  border:none; border-radius:20px; aspect-ratio:3/4; min-height:104px; position:relative;
  background:var(--forest); box-shadow:var(--shadow); overflow:hidden;
}
.card .back{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.2rem; background:var(--forest);}
.card .face{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-family:"Baloo 2",cursive; font-weight:800; color:var(--ink);
  background:#fff; opacity:0; transform:scale(.8); transition:opacity .2s, transform .2s;}
.card.flip .back{opacity:0;}
.card.flip .face{opacity:1; transform:scale(1);}
.card.gone{opacity:.25; pointer-events:none;}

/* ===== goblin grid (three in a row) ===== */
.grid3.ttt .tile{font-size:2.6rem; min-height:96px;}

/* ===== secret number ===== */
.guess-status{
  font-family:"Baloo 2",cursive; font-size:clamp(1.2rem,3.5vw,1.6rem);
  text-align:center; margin-bottom:14px; min-height:1.6em; color:var(--forest);
}
.guess-grid{display:grid; grid-template-columns:repeat(5,minmax(60px,84px)); gap:10px; justify-content:center;}
.guess-btn{
  border:none; border-radius:18px; background:#fff; box-shadow:var(--shadow);
  min-height:68px; font-family:"Baloo 2",cursive; font-weight:800; font-size:1.5rem; color:var(--ink);
}
.guess-btn.out{opacity:.25; pointer-events:none; background:#DDD6C8;}
.guess-btn.hit{background:var(--gold); outline:5px solid var(--forest);}

/* ===== overlays ===== */
.overlay{position:fixed; inset:0; background:rgba(43,58,51,.45); display:flex; align-items:center; justify-content:center; z-index:50;}
.reward-card{
  background:var(--cream); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:30px 34px; text-align:center; max-width:min(480px,92vw);
}
.reward-card h2{font-family:"Baloo 2",cursive; color:var(--forest); font-size:2rem; margin:.2em 0;}
.reward-burst{font-size:4rem; animation:pop .6s ease;}
@keyframes pop{0%{transform:scale(.2)}70%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ===== parents ===== */
.parents{background:#F2EFE7; overflow:auto;}
.parents-body{width:min(760px,94vw); display:flex; flex-direction:column; gap:16px; padding-bottom:40px; overflow:auto;}
.parent-card{background:#fff; border-radius:18px; padding:18px 20px; box-shadow:0 2px 10px rgba(0,0,0,.07);}
.parent-card h3{margin:0 0 6px; font-family:"Baloo 2",cursive; color:var(--forest);}
.muted{color:var(--ink-soft); font-size:.95rem; margin:.2em 0 .8em;}
#save-spell{width:100%; font-family:monospace; font-size:.85rem; border-radius:10px; border:1px solid #ccc; padding:8px;}
.row{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;}
.skill-row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #ddd; font-size:.95rem;}
.band-choice{display:flex; gap:10px; align-items:center; margin:6px 0;}

.hold-hint{
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; border-radius:999px; padding:10px 22px; font-weight:800; z-index:60;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}
@media (max-width:640px){
  .hub-top{padding:8px;}
  .chip{font-size:1rem; padding:6px 12px;}
}