/* ============ Cabin Kids Games — design system ============ */
:root{
  --sun:#ffd23f; --sun-dk:#e8a800;
  --sky:#37b6f0; --sky-dk:#1187c4;
  --grass:#6bcb3d; --grass-dk:#3f9c1c;
  --berry:#ff5d73; --berry-dk:#d42b44;
  --grape:#9b5de5; --grape-dk:#6f2dbd;
  --tang:#ff9f1c; --tang-dk:#d97706;
  --ink:#243b53; --ink-soft:#486581;
  --paper:#fffdf5; --cream:#fff3d6;
  --shadow:0 .5vmin 0 rgba(0,0,0,.14);
  --radius:3.2vmin;
  font-size:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{background:#5ec9f7;}
body{
  position:fixed; inset:0; overflow:hidden;
  width:100vw; height:100dvh;
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;
  background:linear-gradient(180deg,#5ec9f7 0%,#a8e4ff 60%,#d8f4ff 100%);
  color:var(--ink);
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
  overscroll-behavior:none;
}
button{font-family:inherit; color:inherit; border:none; background:none; cursor:pointer;}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{outline:.7vmin solid #fff; outline-offset:.45vmin; box-shadow:0 0 0 1.1vmin var(--ink);}
h1,h2,h3,p{margin:0;}

/* ---------- screens ---------- */
.screen{position:fixed; inset:0; display:none; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
.screen.on{display:flex;}

/* ---------- rotate note ---------- */
#rotate-note{display:none;}
@media (orientation:portrait){
  #rotate-note{display:flex; position:fixed; inset:0; z-index:999; background:linear-gradient(180deg,#37b6f0,#1187c4); align-items:center; justify-content:center; text-align:center; color:#fff;}
  .rotate-phone{font-size:18vmin; animation:rotatePhone 1.6s ease-in-out infinite;}
  .rotate-inner h2{font-size:7vmin; margin:2vmin 0 1vmin;}
  .rotate-inner p{font-size:4vmin; opacity:.85;}
}
@keyframes rotatePhone{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:1.5vmin;
  background:#fff; color:var(--ink);
  border-radius:var(--radius);
  padding:2.2vmin 4vmin;
  font-size:4.2vmin; font-weight:800;
  box-shadow:var(--shadow);
  border-bottom:.9vmin solid rgba(0,0,0,.18);
  transition:transform .06s ease;
}
.btn:active{transform:translateY(.5vmin); border-bottom-width:.3vmin;}
.btn-huge{font-size:6.5vmin; padding:3.2vmin 7vmin; border-radius:5vmin;}
.btn-sun{background:var(--sun); border-bottom-color:var(--sun-dk);}
.btn-sky{background:var(--sky); border-bottom-color:var(--sky-dk); color:#fff;}
.btn-grass{background:var(--grass); border-bottom-color:var(--grass-dk); color:#fff;}
.btn-berry{background:var(--berry); border-bottom-color:var(--berry-dk); color:#fff;}
.btn-grape{background:var(--grape); border-bottom-color:var(--grape-dk); color:#fff;}
.btn-tang{background:var(--tang); border-bottom-color:var(--tang-dk); color:#fff;}
.btn-ghost{background:rgba(255,255,255,.35); box-shadow:none; border-bottom-color:transparent;}
.btn:disabled{opacity:.4; pointer-events:none;}

.chip-btn{
  background:rgba(255,255,255,.85); border-radius:99px;
  padding:1.2vmin 2.8vmin; font-size:2.9vmin; font-weight:800; color:var(--ink);
  box-shadow:var(--shadow); border-bottom:.5vmin solid rgba(0,0,0,.15);
}
.chip-btn:active{transform:translateY(.3vmin);}

/* ---------- splash ---------- */
#scr-splash{
  align-items:center; justify-content:center;
  background:
    linear-gradient(90deg,rgba(55,182,240,.26),rgba(255,253,245,.52)),
    url("../assets/splash-cabin.webp") center/cover no-repeat;
}
.splash-sky{display:none; position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.splash-cloud{position:absolute; font-size:10vmin; opacity:.9;}
.splash-cloud.c1{top:8%; left:6%; animation:drift 9s ease-in-out infinite alternate;}
.splash-cloud.c2{top:14%; right:8%; font-size:14vmin; animation:drift 12s ease-in-out infinite alternate-reverse;}
.splash-rain{position:absolute; bottom:10%; left:8%; font-size:12vmin; animation:bob 3s ease-in-out infinite;}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(6vmin)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2vmin)}}
.splash-card{position:relative; text-align:center; background:rgba(255,253,245,.92); padding:4vmin 8vmin 4.5vmin; border-radius:5vmin; box-shadow:0 1.2vmin 0 rgba(0,0,0,.2); max-width:80vw; backdrop-filter:blur(6px);}
.splash-logo{font-size:13vmin; line-height:1;}
.splash-title{font-size:8vmin; letter-spacing:-.1vmin; color:var(--ink);}
.splash-sub{font-size:3.6vmin; color:var(--ink-soft); margin:.6vmin 0 2.6vmin;}
.splash-hint{font-size:2.6vmin; color:var(--ink-soft); margin-top:2.4vmin;}

/* ---------- menu ---------- */
#scr-menu{
  gap:1.6vmin; padding-top:max(2vmin, env(safe-area-inset-top));
  background:
    linear-gradient(180deg,rgba(94,201,247,.78),rgba(216,244,255,.68)),
    url("../assets/splash-cabin.webp") center/cover no-repeat;
}
.menu-head{display:flex; align-items:center; justify-content:space-between; padding:1vmin 3vmin 0;}
.menu-title{font-size:5.4vmin;}
.menu-actions{display:flex; gap:1.4vmin;}
.menu-grid{
  flex:1; display:grid; gap:2vmin; padding:1vmin 3vmin 3vmin;
  grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(2,1fr);
  min-height:0;
}
.menu-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8vmin;
  background:var(--paper); border-radius:var(--radius);
  box-shadow:var(--shadow); border-bottom:.9vmin solid rgba(0,0,0,.15);
  padding:1vmin; min-height:0; position:relative; overflow:hidden;
  transition:transform .06s ease;
}
.menu-tile::before{content:""; position:absolute; inset:0; background-image:var(--tile-art); background-size:cover; background-position:center; transform:scale(1.02);}
.menu-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(36,59,83,.1) 45%,rgba(36,59,83,.6));}
.menu-tile:active{transform:scale(.96);}
.menu-tile .t-emoji,.menu-tile .t-name,.menu-tile .t-ages{position:relative; z-index:1;}
.menu-tile .t-emoji{font-size:4.6vmin; line-height:1; background:rgba(255,253,245,.86); width:7vmin; height:7vmin; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 .35vmin .8vmin rgba(0,0,0,.18);}
.menu-tile .t-name{font-size:2.85vmin; font-weight:900; text-align:center; line-height:1.08; color:#fff; text-shadow:0 .35vmin .8vmin rgba(0,0,0,.55);}
.menu-tile .t-ages{font-size:1.9vmin; font-weight:800; color:var(--ink); background:rgba(255,253,245,.9); border-radius:99px; padding:.35vmin 1.4vmin;}

/* ---------- game shell ---------- */
#scr-game{background:transparent;}
.game-topbar{position:absolute; top:max(1.2vmin, env(safe-area-inset-top)); left:1.2vmin; right:1.2vmin; display:flex; align-items:center; gap:2vmin; z-index:50; pointer-events:none;}
.game-topbar .game-title{font-size:3.2vmin; font-weight:900; color:rgba(36,59,83,.75); background:rgba(255,255,255,.55); padding:.6vmin 2vmin; border-radius:99px;}
.home-btn{
  pointer-events:auto; position:relative; width:7vmin; height:7vmin; border-radius:50%;
  background:rgba(255,255,255,.85); font-size:3.6vmin; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.hold-ring{position:absolute; inset:0; transform:rotate(-90deg);}
.hold-ring circle{fill:none; stroke:var(--berry); stroke-width:3; stroke-linecap:round; stroke-dasharray:107; stroke-dashoffset:107;}
.game-root{flex:1; display:flex; flex-direction:column; min-height:0;}

/* generic game layout helpers */
.g-center{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4vmin; text-align:center; padding:4vmin; min-height:0;}
.g-mega{font-size:20vmin; line-height:1;}
.g-big{font-size:12vmin; line-height:1;}
.g-h1{font-size:7vmin; font-weight:900; line-height:1.15;}
.g-h2{font-size:4.6vmin; font-weight:800; color:var(--ink);}
.g-sub{font-size:3.2vmin; color:var(--ink-soft); font-weight:700;}
.g-row{display:flex; gap:2vmin; align-items:center; justify-content:center; flex-wrap:wrap;}
.g-card{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:3vmin 4.5vmin;}

/* ---------- sub screens (scores / settings / help) ---------- */
.sub-head{display:flex; align-items:center; justify-content:space-between; padding:2vmin 3vmin 1vmin;}
.sub-head h1{font-size:5vmin;}
.scores-list{flex:1; overflow-y:auto; padding:1vmin 6vmin; display:flex; flex-direction:column; gap:1.6vmin;}
.score-row{display:flex; align-items:center; gap:3vmin; background:var(--paper); border-radius:var(--radius); padding:1.6vmin 3vmin; box-shadow:var(--shadow);}
.score-row .s-rank{font-size:4.5vmin; width:7vmin; text-align:center;}
.score-row .s-emoji{font-size:6vmin;}
.score-row .s-name{flex:1; font-size:4.2vmin; font-weight:900;}
.score-row .s-pts{font-size:4.2vmin; font-weight:900; color:var(--tang);}
.score-row .s-del{font-size:3vmin; opacity:.4; padding:1vmin;}
.scores-foot{text-align:center; font-size:2.6vmin; color:var(--ink-soft); padding:1.5vmin;}

.settings-list{flex:1; overflow-y:auto; padding:1vmin 8vmin 3vmin; display:flex; flex-direction:column; gap:1.6vmin;}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:3vmin; background:var(--paper); border-radius:var(--radius); padding:2vmin 3.4vmin; box-shadow:var(--shadow);}
.set-row .set-label{font-size:3.4vmin; font-weight:800;}
.set-row .set-note{font-size:2.3vmin; color:var(--ink-soft); font-weight:600;}
.set-row select,.set-row input[type=range]{font-size:3vmin; max-width:40vw;}
.toggle{width:9.5vmin; height:5.4vmin; border-radius:99px; background:#cbd5e1; position:relative; transition:background .15s;}
.toggle.on{background:var(--grass);}
.toggle::after{content:""; position:absolute; top:.55vmin; left:.55vmin; width:4.3vmin; height:4.3vmin; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 .3vmin .6vmin rgba(0,0,0,.25);}
.toggle.on::after{left:4.6vmin;}

.help-body{flex:1; overflow-y:auto; padding:1vmin 8vmin 4vmin; display:flex; flex-direction:column; gap:1.8vmin;}
.help-card{background:var(--paper); border-radius:var(--radius); padding:2.4vmin 3.4vmin; box-shadow:var(--shadow);}
.help-card h3{font-size:3.6vmin; margin-bottom:.8vmin;}
.help-card p{font-size:2.9vmin; color:var(--ink-soft); font-weight:600; line-height:1.45;}

/* ---------- overlays ---------- */
.overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2vmin; background:rgba(36,59,83,.45); backdrop-filter:blur(4px);}
.overlay .ov-num{font-size:34vmin; font-weight:900; color:#fff; text-shadow:0 1.5vmin 0 rgba(0,0,0,.25); animation:popIn .5s ease both;}
.overlay .ov-text{font-size:10vmin; font-weight:900; color:#fff; text-shadow:0 1vmin 0 rgba(0,0,0,.25); text-align:center; padding:0 6vmin;}
.banner{
  position:fixed; z-index:210; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--paper); border-radius:5vmin; padding:3.5vmin 7vmin; text-align:center;
  box-shadow:0 1.5vmin 0 rgba(0,0,0,.2); animation:popIn .35s ease both;
}
.banner .b-emoji{font-size:13vmin; line-height:1.1;}
.banner .b-text{font-size:5.5vmin; font-weight:900;}

.modal-wrap{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:rgba(36,59,83,.5); backdrop-filter:blur(4px);}
.modal{background:var(--paper); border-radius:4vmin; padding:3.5vmin 4.5vmin; max-width:82vw; max-height:82dvh; overflow-y:auto; box-shadow:0 1.5vmin 0 rgba(0,0,0,.25); display:flex; flex-direction:column; gap:2.2vmin;}
.modal h2{font-size:4.6vmin;}
.modal .modal-btns{display:flex; gap:2vmin; justify-content:center; flex-wrap:wrap;}
.modal input[type=text]{font-family:inherit; font-size:4vmin; font-weight:700; padding:1.6vmin 2.4vmin; border-radius:2.4vmin; border:.45vmin solid #cbd5e1; width:100%;}

/* roster bar */
.roster-bar{display:flex; gap:1.6vmin; align-items:center; justify-content:center; flex-wrap:wrap; padding:1vmin 2vmin;}
.roster-chip{display:flex; align-items:center; gap:1vmin; background:var(--paper); border-radius:99px; padding:1vmin 2.6vmin; font-size:3.4vmin; font-weight:900; box-shadow:var(--shadow); border-bottom:.5vmin solid rgba(0,0,0,.15);}
.roster-chip:active{transform:translateY(.3vmin);}
.roster-chip .rc-e{font-size:4.2vmin;}

/* timer ring */
.tring{position:relative; display:flex; align-items:center; justify-content:center;}
.tring svg{transform:rotate(-90deg); display:block;}
.tring .tr-bg{fill:none; stroke:rgba(0,0,0,.12); stroke-width:8;}
.tring .tr-fg{fill:none; stroke:var(--tang); stroke-width:8; stroke-linecap:round; transition:stroke .2s;}
.tring .tr-label{position:absolute; font-size:6.5vmin; font-weight:900;}
.tring.tr-low .tr-fg{stroke:var(--berry);}
.tring.tr-low .tr-label{color:var(--berry); animation:pulse .5s ease infinite;}

/* confetti */
.confetti{position:fixed; z-index:400; top:-6vmin; border-radius:.6vmin; pointer-events:none; animation:confFall linear both;}
@keyframes confFall{to{transform:translateY(115dvh) rotate(720deg);}}

/* flashes */
.flash-red{animation:flashRed .5s ease 4;}
@keyframes flashRed{0%,100%{background:transparent}50%{background:rgba(255,60,60,.55)}}
.explode-bg{position:fixed; inset:0; z-index:180; background:radial-gradient(circle at 50% 55%, #ffde59, #ff7b00 45%, #e6193c 80%); animation:popIn .18s ease both;}

/* generic animations */
@keyframes popIn{from{transform:scale(.35); opacity:0}60%{transform:scale(1.12)}to{transform:scale(1); opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-2vmin)}40%{transform:translateX(2vmin)}60%{transform:translateX(-1.4vmin)}80%{transform:translateX(1.4vmin)}}
@keyframes bounceUp{0%{transform:translateY(0)}30%{transform:translateY(-3.5vmin)}60%{transform:translateY(0)}}
.anim-pop{animation:popIn .4s ease both;}
.anim-pulse{animation:pulse 1s ease infinite;}
.anim-wiggle{animation:wiggle .6s ease infinite;}
.anim-shake{animation:shake .45s ease;}
.anim-bounce{animation:bounceUp .7s ease;}

/* ---------- game-specific ---------- */
/* memory grid */
.mem-wrap{flex:1; display:flex; flex-direction:column; padding:9vmin 3vmin 2.5vmin; min-height:0; align-items:center;}
.mem-grid{display:grid; gap:1.2vmin; flex:1; min-height:0; width:100%; max-width:150vmin;}
.mem-corner{}
.mem-lab{display:flex; align-items:center; justify-content:center; font-size:3.6vmin;}
.mem-card{position:relative; border-radius:1.8vmin; perspective:600px; min-height:0;}
.mem-face{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:1.8vmin; backface-visibility:hidden; transition:transform .35s ease; font-size:min(7.5vmin,5.5vh);}
.mem-back{background:var(--sky); color:#fff; box-shadow:inset 0 -0.7vmin 0 rgba(0,0,0,.15);}
.mem-front{background:var(--paper); transform:rotateY(180deg); box-shadow:inset 0 -0.7vmin 0 rgba(0,0,0,.08);}
.mem-card.flip .mem-back{transform:rotateY(180deg);}
.mem-card.flip .mem-front{transform:rotateY(360deg);}
.mem-card.matched .mem-front{background:#d8f7c5; animation:pulse .5s ease 2;}

/* pattern parrot buttons */
.pp-grid{display:grid; grid-template-columns:1fr 1fr; gap:2.4vmin; width:min(74vmin,86vw); aspect-ratio:1.6;}
.pp-btn{border-radius:3vmin; opacity:.85; box-shadow:inset 0 -1.2vmin 0 rgba(0,0,0,.25); transition:filter .1s,opacity .1s; font-size:6vmin;}
.pp-btn.lit{opacity:1; filter:brightness(1.35) saturate(1.3); transform:scale(1.03);}
.pp-red{background:#ff4d5e;} .pp-blue{background:#2f9df4;} .pp-green{background:#4fc94f;} .pp-yellow{background:#ffd23f;}

/* doodle canvas */
.dd-wrap{flex:1; display:flex; min-height:0; padding:8.5vmin 2vmin 2vmin; gap:2vmin;}
.dd-canvas-box{flex:1; background:#fff; border-radius:2.5vmin; box-shadow:var(--shadow); position:relative; overflow:hidden;}
.dd-canvas-box canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none;}
.dd-tools{display:flex; flex-direction:column; gap:1.4vmin; justify-content:center;}
.dd-color{width:6.5vmin; height:6.5vmin; border-radius:50%; border:.7vmin solid #fff; box-shadow:var(--shadow);}
.dd-color.sel{outline:.8vmin solid var(--ink); outline-offset:.3vmin;}
.dd-tool{width:6.5vmin; height:6.5vmin; border-radius:50%; background:var(--paper); font-size:3.4vmin; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;}

/* WYR split */
.wyr-wrap{flex:1; display:flex; min-height:0; padding:8.5vmin 2.5vmin 2.5vmin; gap:2.5vmin;}
.wyr-side{flex:1; border-radius:4vmin; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vmin; padding:3vmin; text-align:center; box-shadow:var(--shadow); border-bottom:1vmin solid rgba(0,0,0,.18); transition:transform .1s;}
.wyr-side:active{transform:scale(.97);}
.wyr-side .w-emoji{font-size:16vmin; line-height:1;}
.wyr-side .w-text{font-size:5vmin; font-weight:900; color:#fff; text-shadow:0 .4vmin 0 rgba(0,0,0,.2); line-height:1.2;}
.wyr-a{background:linear-gradient(160deg,#ff5d73,#ff9f1c);}
.wyr-b{background:linear-gradient(160deg,#37b6f0,#9b5de5);}
.wyr-or{align-self:center; font-size:6vmin; font-weight:900; color:#fff; background:var(--ink); border-radius:50%; width:11vmin; height:11vmin; display:flex; align-items:center; justify-content:center; z-index:2; margin:0 -4.5vmin;}

/* how many scatter field */
.hm-field{position:relative; flex:1; margin:8.5vmin 3vmin 2vmin; background:rgba(255,255,255,.5); border-radius:3vmin; overflow:hidden;}
.hm-item{position:absolute; font-size:7vmin; transform:translate(-50%,-50%);}
.hm-item.counted{animation:pulse .4s ease; filter:drop-shadow(0 0 1.5vmin #ffd23f);}
.hm-counter{
  position:absolute;
  top:2vmin;
  right:2vmin;
  z-index:6;
  min-width:14vmin;
  height:14vmin;
  padding:0 2vmin;
  display:flex;
  align-items:center;
  justify-content:center;
  border:.7vmin solid rgba(255,255,255,.95);
  border-radius:3vmin;
  background:rgba(255,253,245,.94);
  box-shadow:0 .8vmin 0 rgba(0,0,0,.16), 0 1.5vmin 4vmin rgba(0,0,0,.18);
  color:var(--tang);
  font-size:9vmin;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

/* story */
.story-sug{display:grid; grid-template-columns:repeat(4,1fr); gap:1.8vmin; width:min(120vmin,92vw);}
.story-text{font-size:4.2vmin; line-height:1.55; font-weight:700; text-align:left; max-width:88vw; overflow-y:auto; max-height:62dvh; padding:1vmin 2vmin;}
.story-text .blank{color:var(--grape); font-weight:900; background:#f3e8ff; border-radius:1.2vmin; padding:0 1vmin;}
.story-text .said{background:#fff3c4;}

/* scavenger / freeze / copycat big prompt screens reuse g-center */
.prompt-emoji{font-size:24vmin; line-height:1;}

/* scrollbar hush */
::-webkit-scrollbar{width:0; height:0;}