/* ============ Gecko Grove — style.css ============ */
:root{
  --bg1:#bfe9ff; --bg2:#e7f9e9;
  --card:#ffffff; --ink:#2f3542; --ink-soft:#6b7280;
  --brand:#2fa66a; --brand-dark:#1f7a4d;
  --accent:#ff8a3d; --accent-dark:#d96a20;
  --gem:#38a3f5; --danger:#e75757;
  --wood:#8a5a3b; --wood-dark:#6d4429;
  --radius:18px;
  --shadow:0 6px 18px rgba(47,53,66,.12);
  --font-fun:"Comic Sans MS","Chalkboard SE","Segoe UI",system-ui,sans-serif;
  --font-ui:"Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-ui);
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg1),var(--bg2) 60%,#f7fbe9);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
img,svg{max-width:100%}

/* ---------- Buttons ---------- */
.btn{
  border:none;border-radius:14px;padding:.6rem 1.1rem;
  font-weight:700;font-size:1rem;color:#fff;
  background:var(--brand);box-shadow:0 4px 0 var(--brand-dark);
  transition:transform .06s ease, box-shadow .06s ease, filter .15s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brand-dark)}
.btn.big{font-size:1.15rem;padding:.8rem 1.4rem}
.btn.small{font-size:.85rem;padding:.35rem .7rem;border-radius:10px}
.btn.warn{background:var(--accent);box-shadow:0 4px 0 var(--accent-dark)}
.btn.warn:active{box-shadow:0 1px 0 var(--accent-dark)}
.btn.danger{background:var(--danger);box-shadow:0 4px 0 #b23a3a}
.btn.ghost{background:#fff;color:var(--brand-dark);box-shadow:0 4px 0 #d5e3d9;border:2px solid #cfe5d6}
.btn.gem{background:var(--gem);box-shadow:0 4px 0 #2274b5}
.btn:disabled{filter:grayscale(.7);opacity:.6;cursor:not-allowed;transform:none}
.btn.pulse{animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.icon-btn{
  background:#ffffffcc;border:2px solid #e3ebe4;border-radius:12px;
  font-size:1.05rem;padding:.35rem .55rem;box-shadow:var(--shadow);
}

/* ---------- Landing ---------- */
.landing{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#75c9a0,#3fa7d6 90%);padding:1rem;
}
.landing-card{
  background:#fff;border-radius:26px;box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:2rem 1.8rem;max-width:430px;width:100%;text-align:center;
  animation:pop-in .45s ease;
}
@keyframes pop-in{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.landing-logo{font-size:4.2rem;animation:bob 3s ease-in-out infinite}
.landing h1{font-family:var(--font-fun);font-size:2.3rem;color:var(--brand-dark);letter-spacing:.5px}
.tagline{color:var(--ink-soft);margin:.5rem 0 1.2rem}
.landing-form{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.1rem}
.landing-form input{
  border:2px solid #cfe5d6;border-radius:14px;padding:.75rem 1rem;font-size:1.05rem;text-align:center;outline:none;
}
.landing-form input:focus{border-color:var(--brand)}
.landing-feats{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.landing-feats span{background:#eef8f0;border-radius:999px;padding:.3rem .7rem;font-size:.8rem;color:var(--brand-dark);font-weight:600}

/* ---------- App shell ---------- */
.app{max-width:1020px;margin:0 auto;padding:0 .8rem 3.5rem;min-height:100%}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem .2rem .5rem;flex-wrap:wrap;
}
.brand{font-family:var(--font-fun);font-weight:700;font-size:1.35rem;color:var(--brand-dark)}
.hud{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.hud-gems{
  background:#fff;border-radius:999px;padding:.35rem .8rem;font-size:1.05rem;
  box-shadow:var(--shadow);border:2px solid #d9ecff;color:#1e6db3;
}
.hud-gems b{font-size:1.1rem}
.hud-gems.flash{animation:gem-flash .5s}
@keyframes gem-flash{0%{transform:scale(1)}40%{transform:scale(1.25);background:#dff1ff}100%{transform:scale(1)}}
.hud-day{background:#fff;border-radius:14px;padding:.3rem .7rem;box-shadow:var(--shadow);font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.day-prog{height:6px;background:#e8eef0;border-radius:99px;margin-top:3px;overflow:hidden;min-width:110px}
.day-prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#ffd23f,var(--accent));border-radius:99px;transition:width .4s linear}

/* ---------- Nav ---------- */
.nav{display:flex;gap:.35rem;margin:.4rem 0 1rem;flex-wrap:wrap}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#ffffffb8;border:2px solid transparent;border-radius:14px;padding:.45rem .3rem;
  font-weight:700;color:var(--ink-soft);font-size:.78rem;min-width:64px;
}
.nav-btn .nav-ico{font-size:1.25rem}
.nav-btn.active{background:#fff;border-color:var(--brand);color:var(--brand-dark);box-shadow:var(--shadow)}
.nav-btn:hover{background:#fff}

/* ---------- Generic panels ---------- */
.screen{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem;margin-bottom:1rem}
.panel h2{font-family:var(--font-fun);color:var(--brand-dark);margin-bottom:.35rem;font-size:1.35rem}
.panel .sub{color:var(--ink-soft);font-size:.9rem;margin-bottom:.7rem}
.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.empty-state{text-align:center;padding:2.2rem 1rem;color:var(--ink-soft)}
.empty-state .big-emoji{font-size:3.2rem;display:block;margin-bottom:.5rem}

/* ---------- Enclosures ---------- */
.enclosure-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.tank{
  position:relative;height:215px;
  background:linear-gradient(180deg,#dff3ff 0%,#f0fbf3 70%);
  border:7px solid var(--wood);border-bottom-width:10px;border-radius:14px;
  margin:.7rem .7rem 0;overflow:hidden;
  box-shadow:inset 0 8px 18px rgba(70,120,160,.18), inset 0 -4px 10px rgba(0,0,0,.08);
}
.tank::after{ /* glass shine */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 42%,transparent 50%);
}
.tank.aquatic{background:linear-gradient(180deg,#bfe3ff 0%,#9fd4f7 80%)}
.tank .substrate{position:absolute;left:0;right:0;bottom:0;height:34px}
.sub-none{background:#e8e4da}
.sub-paper{background:repeating-linear-gradient(90deg,#f6f6f6 0 26px,#e9e9e9 26px 28px)}
.sub-carpet{background:#7ac074;background-image:radial-gradient(#6cb166 15%,transparent 16%);background-size:10px 10px}
.sub-soil{background:#6b4a2f;background-image:radial-gradient(#57381f 12%,transparent 13%),radial-gradient(#7d5a3c 10%,transparent 11%);background-size:16px 16px,22px 22px}
.tank .deco{position:absolute;font-size:1.9rem;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.tank .lamp{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:1.5rem;z-index:3}
.tank .lamp-glow{position:absolute;top:0;left:20%;right:20%;height:80px;background:radial-gradient(ellipse at top,rgba(255,214,90,.55),transparent 70%);pointer-events:none}
.tank .heat-glow{position:absolute;bottom:0;left:0;width:45%;height:26px;background:linear-gradient(0deg,rgba(255,90,60,.4),transparent);pointer-events:none}
.tank .critter{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  width:52%;max-width:190px;cursor:pointer;z-index:2;
  animation:bob 3.4s ease-in-out infinite;transition:transform .15s;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
.tank .critter.boing{animation:boing .5s ease}
@keyframes boing{0%{transform:translateX(-50%) scale(1)}30%{transform:translateX(-50%) scale(1.15,.85)}60%{transform:translateX(-50%) scale(.92,1.1)}100%{transform:translateX(-50%) scale(1)}}
.tank .poop{position:absolute;font-size:1.25rem;cursor:pointer;z-index:4;animation:pop-in .3s}
.tank .poop:hover{transform:scale(1.2)}
.tank .hungry-tag{
  position:absolute;top:8px;right:8px;z-index:5;background:#fff3;backdrop-filter:blur(2px);
  background-color:#ffffffd9;border-radius:999px;padding:.2rem .6rem;font-size:.78rem;font-weight:800;color:var(--accent-dark);
  animation:pulse 1.2s infinite;
}
.enclosure-info{padding:.7rem .9rem .9rem}
.enclosure-name{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.enclosure-name b{font-size:1.1rem}
.enclosure-name .species{color:var(--ink-soft);font-size:.82rem}
.meter-row{display:flex;align-items:center;gap:.5rem;margin:.35rem 0;font-size:.85rem}
.meter-row .lbl{width:78px;color:var(--ink-soft);font-weight:600}
.meter{flex:1;height:10px;background:#eef1f3;border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff9a9e,#f6416c);transition:width .4s}
.meter.good i{background:linear-gradient(90deg,#a8e063,#2fa66a)}
.meter.mid i{background:linear-gradient(90deg,#ffd23f,#ff8a3d)}
.feed-info{font-size:.82rem;color:var(--ink-soft);margin:.2rem 0 .55rem}
.enclosure-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- Shop ---------- */
.shop-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:.9rem;display:flex;flex-direction:column;gap:.45rem;text-align:center;
}
.shop-card .portrait{height:110px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#eef9ff,#f2fbf2);border-radius:12px}
.shop-card .portrait svg{width:70%;max-height:100px}
.shop-card h3{font-family:var(--font-fun);color:var(--ink)}
.shop-card .diet{font-size:.82rem;color:var(--ink-soft)}
.shop-card .sched{font-size:.8rem;font-weight:700;color:var(--accent-dark);background:#fff4ea;border-radius:999px;padding:.18rem .6rem;align-self:center}
.shop-card .fact{font-size:.78rem;color:var(--ink-soft);font-style:italic;min-height:2.2em}
.price-tag{font-weight:800;color:#1e6db3;font-size:1.05rem}
.owned-chip{font-size:.75rem;color:var(--brand-dark);font-weight:700}

/* ---------- Games ---------- */
.game-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.game-card .game-emoji{font-size:2.6rem}
.game-card h3{font-family:var(--font-fun)}
.game-card .desc{color:var(--ink-soft);font-size:.88rem}
.milestones{list-style:none;font-size:.82rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:2px}
.milestones li::before{content:"🎯 "}
.best-score{font-size:.85rem;font-weight:700;color:var(--brand-dark)}

/* ---------- Game modal / canvas ---------- */
.game-stage{position:relative;background:#0f2537;border-radius:14px;overflow:hidden}
.game-stage canvas{display:block;width:100%;height:auto;touch-action:none}
.game-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  background:rgba(8,25,40,.72);color:#fff;text-align:center;padding:1rem;z-index:5;
}
.game-overlay h3{font-family:var(--font-fun);font-size:1.6rem}
.game-overlay p{max-width:420px;font-size:.95rem;line-height:1.45}
.game-hud{display:flex;justify-content:space-between;gap:.6rem;padding:.5rem .2rem 0;font-weight:800;color:var(--ink);flex-wrap:wrap}
.reward-lines{background:#f1faf3;border-radius:12px;padding:.6rem .9rem;text-align:left;font-size:.92rem;display:flex;flex-direction:column;gap:.25rem;color:var(--ink)}

/* ---------- Turtle Crossing on-screen controls ---------- */
.tc-controls{display:flex;justify-content:center;align-items:center;gap:1.4rem;padding:.65rem .5rem;background:#0b1c2b;border-radius:16px;margin-top:.5rem}
.tc-btn{
  width:64px;height:64px;border:none;border-radius:18px;cursor:pointer;
  font-size:1.7rem;line-height:1;color:#fff;font-weight:900;
  background:#2fa66a;box-shadow:0 5px 0 #17573a;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .06s ease, box-shadow .06s ease;
}
.tc-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #17573a}
.tc-btn.tc-up{background:var(--accent);box-shadow:0 5px 0 var(--accent-dark)}
.tc-btn.tc-up:active{box-shadow:0 1px 0 var(--accent-dark)}
@media (max-width:820px){
  .tc-controls{gap:min(6vw,1.6rem);margin-top:.35rem}
  .tc-btn{width:min(26vw,110px);height:64px;font-size:2rem;border-radius:16px}
}

/* ---------- Quiz ---------- */
.quiz-q{font-size:1.15rem;font-weight:700;margin:.6rem 0 1rem;line-height:1.4}
.quiz-opts{display:grid;gap:.6rem}
.quiz-opt{
  text-align:left;background:#f4f8f5;border:2px solid #dde8df;border-radius:14px;
  padding:.75rem 1rem;font-size:.98rem;font-weight:600;color:var(--ink);
  transition:transform .08s, background .15s;
}
.quiz-opt:hover{transform:translateY(-2px);background:#ecf6ee}
.quiz-opt.correct{background:#d9f5e2;border-color:var(--brand)}
.quiz-opt.wrong{background:#fde3e3;border-color:var(--danger)}
.quiz-opt:disabled{cursor:default;opacity:.9}
.quiz-fact{background:#fff8e8;border:2px dashed #f0d48a;border-radius:12px;padding:.6rem .9rem;font-size:.88rem;margin-top:.8rem}
.quiz-progress{font-size:.85rem;color:var(--ink-soft);font-weight:700}

/* ---------- Friends ---------- */
.friend-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;display:flex;align-items:center;gap:.9rem}
.friend-avatar{font-size:2.4rem;background:#eef8f0;border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.friend-card .info{flex:1}
.friend-card .motto{font-size:.85rem;color:var(--ink-soft)}
.mini-tanks{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.mini-tank{position:relative;height:130px;background:linear-gradient(180deg,#dff3ff,#f0fbf3);border:5px solid var(--wood);border-radius:12px;overflow:hidden}
.mini-tank .critter{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:60%;animation:bob 3.4s ease-in-out infinite}
.mini-tank .nick{position:absolute;top:5px;left:8px;font-size:.75rem;font-weight:800;background:#ffffffd0;border-radius:99px;padding:.1rem .5rem}
.chat-box{background:#f4f8f5;border-radius:14px;padding:.7rem;height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:.45rem}
.chat-msg{max-width:78%;padding:.45rem .75rem;border-radius:14px;font-size:.9rem;line-height:1.35}
.chat-msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.chat-msg.them{align-self:flex-start;background:#fff;border:1px solid #e0e8e2;border-bottom-left-radius:4px}
.chat-row{display:flex;gap:.5rem;margin-top:.6rem}
.chat-row input{flex:1;border:2px solid #cfe5d6;border-radius:12px;padding:.55rem .8rem;font-size:.95rem;outline:none}
.trade-offer{background:#fff8e8;border:2px dashed #f0d48a;border-radius:14px;padding:.8rem;margin-top:.8rem}
.trade-offer h4{margin-bottom:.4rem}
.trade-pick{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.trade-pick button{border:2px solid #dde8df;background:#fff;border-radius:12px;padding:.4rem .7rem;font-weight:700}
.trade-pick button.sel{border-color:var(--brand);background:#e7f6ec}

/* ---------- Events ---------- */
.event-card{display:flex;gap:.8rem;align-items:center;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:.9rem 1rem;margin-bottom:.8rem}
.event-card .ev-ico{font-size:2rem}
.event-card .info{flex:1}
.event-card .info b{display:block}
.event-card .info .desc{font-size:.85rem;color:var(--ink-soft)}
.ev-progress{height:9px;background:#eef1f3;border-radius:99px;overflow:hidden;margin-top:.35rem}
.ev-progress i{display:block;height:100%;background:linear-gradient(90deg,#a8e063,#2fa66a)}
.calendar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.55rem}
.cal-month{background:#fff;border-radius:12px;padding:.55rem .6rem;font-size:.8rem;box-shadow:var(--shadow)}
.cal-month b{display:block;color:var(--brand-dark)}
.cal-month.now{outline:3px solid var(--accent);background:#fff7ef}

/* ---------- Ranks ---------- */
.ranks-tabs{display:flex;gap:.5rem;margin-top:.4rem;flex-wrap:wrap}
.ranks-tabs .btn{flex:1;max-width:220px}
.rank-row{display:flex;align-items:center;gap:.7rem;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:.6rem .9rem;margin-bottom:.5rem}
.rank-row .pos{font-weight:900;width:2.2rem;font-size:1.1rem}
.rank-row .av{font-size:1.5rem}
.rank-row .nm{flex:1;font-weight:700}
.rank-row .sc{color:#1e6db3;font-weight:800}
.rank-row.me{outline:3px solid var(--brand);background:#effaf2}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,32,28,.55);z-index:70;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fade .2s}
.modal{
  background:#fff;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.3);
  width:100%;max-width:560px;max-height:92vh;overflow-y:auto;padding:1.2rem 1.2rem 1.4rem;
  animation:pop-in .28s ease;
}
.modal.wide{max-width:860px}
.modal h3{font-family:var(--font-fun);color:var(--brand-dark);font-size:1.35rem;margin-bottom:.6rem;padding-right:2rem}
.modal-close{position:absolute;margin-left:auto;float:right;background:#f0f3f1;border:none;border-radius:10px;font-size:1rem;padding:.3rem .6rem;font-weight:800}
.modal .form-row{display:flex;gap:.6rem;margin:.8rem 0}
.modal .form-row input{flex:1;border:2px solid #cfe5d6;border-radius:12px;padding:.6rem .9rem;font-size:1rem;outline:none}
.decor-group{margin:.8rem 0}
.decor-group h4{font-size:.95rem;color:var(--ink-soft);margin-bottom:.4rem}
.decor-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:2px solid #e6ede8;border-radius:12px;margin-bottom:.4rem}
.decor-item .d-ico{font-size:1.5rem}
.decor-item .d-info{flex:1}
.decor-item .d-info b{font-size:.92rem;display:block}
.decor-item .d-info span{font-size:.76rem;color:var(--ink-soft)}
.decor-item.active-item{border-color:var(--brand);background:#effaf2}
.help-list{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem;margin:.6rem 0 1rem}
.help-list li{list-style:none}

/* ---------- Toasts & particles ---------- */
.toast-root{position:fixed;top:.8rem;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:.45rem;align-items:center;pointer-events:none;width:min(94vw,480px)}
.toast{
  background:#2f3542ee;color:#fff;border-radius:14px;padding:.6rem 1rem;font-size:.92rem;font-weight:600;
  box-shadow:0 10px 24px rgba(0,0,0,.25);animation:toast-in .3s ease;text-align:center;max-width:100%;
}
.toast.good{background:#1f7a4dee}
.toast.warn{background:#d96a20ee}
.toast.fact{background:#4d3fa0ee}
@keyframes toast-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.gem-float{
  position:fixed;z-index:95;font-weight:900;color:#1e6db3;font-size:1.1rem;pointer-events:none;
  text-shadow:0 1px 0 #fff;animation:float-up 1.1s ease forwards;
}
@keyframes float-up{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-56px)}}
.heart-float{position:fixed;z-index:95;pointer-events:none;animation:float-up 1s ease forwards;font-size:1.2rem}

.foot{text-align:center;color:var(--ink-soft);font-size:.78rem;padding:1rem 0 1.4rem}

/* ---------- DOM mini-games (memory / whack) ---------- */
.game-stage.light{background:#eef6ef}
.dom-arena{display:flex;align-items:center;justify-content:center;padding:1rem}
.mem-grid{display:grid;grid-template-columns:repeat(4,minmax(60px,96px));gap:.55rem;width:100%;justify-content:center}
.mcard{aspect-ratio:1;perspective:600px;border:none;background:none;padding:0;cursor:pointer}
.mcard .inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s}
.mcard.open .inner,.mcard.matched .inner{transform:rotateY(180deg)}
.mcard .face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:clamp(1.6rem,6vw,2.3rem);
}
.mcard .front{background:linear-gradient(160deg,#2fa66a,#1f7a4d);color:#fff;box-shadow:0 3px 0 #17573a}
.mcard .back{background:#fff;transform:rotateY(180deg);border:3px solid #cfe5d6}
.mcard.matched .back{border-color:#ffd23f;box-shadow:0 0 14px #ffd23f88}
.mcard.matched{cursor:default}
.whack-grid{display:grid;grid-template-columns:repeat(3,minmax(72px,110px));gap:.9rem;justify-content:center;width:100%}
.hole{
  aspect-ratio:1;border:none;border-radius:50%;cursor:pointer;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 65%,#3d2a17 0 55%,#5d4123 56% 100%);
  box-shadow:inset 0 6px 12px rgba(0,0,0,.5), 0 3px 0 #4a331c;
}
.hole .mole{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(1.7rem,6vw,2.4rem);transform:translateY(105%);transition:transform .12s ease;
}
.hole.up .mole{transform:translateY(0)}
.hole.gold .mole{filter:drop-shadow(0 0 8px gold) brightness(1.3)}
.hole.wasp{outline:3px solid #e7575766}
.hole.whacked .mole{transform:scale(1.25)}
.dom-arena.sting{animation:sting .25s}
@keyframes sting{0%,100%{background:transparent}50%{background:#e7575733}}

/* ---------- Online friends ---------- */
.on-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#c9cfd6;margin:0 .15rem}
.on-dot.ok{background:#2fa66a;box-shadow:0 0 6px #2fa66a}
.on-dot.bad{background:#e75757}
.on-dot.wait{background:#ffd23f;animation:pulse 1.2s infinite}
.code-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.my-code{
  font-family:ui-monospace,Consolas,monospace;font-weight:800;font-size:1.05rem;color:#1e6db3;
  background:#eaf4ff;border:2px dashed #9cc9f0;border-radius:12px;padding:.4rem .8rem;user-select:all;
}
.online-stats{display:flex;gap:.6rem;margin:.6rem 0 .2rem}
.on-stat{
  flex:1;background:linear-gradient(160deg,#eef7ff,#f6fbff);border:2px solid #d3e8ff;
  border-radius:14px;padding:.6rem .5rem;text-align:center;box-shadow:0 3px 0 #dcebfa;
}
.on-stat.lifetime{background:linear-gradient(160deg,#eafaf0,#f4fdf7);border-color:#c9ecd6;box-shadow:0 3px 0 #d8f0e0}
.on-stat b{display:block;font-size:1.7rem;line-height:1.1;color:var(--gem);font-family:var(--font-fun)}
.on-stat.lifetime b{color:var(--brand-dark)}
.on-stat span{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft);margin-top:.15rem}
.recent-codes{font-size:.85rem;color:var(--ink-soft);margin:.5rem 0;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.friend-card.online{border:2px solid #bfe0ff;background:#f6fbff;margin-top:.6rem;flex-wrap:wrap}
.live-chip{font-size:.7rem;font-weight:900;color:#e75757;vertical-align:middle;animation:pulse 1.6s infinite;letter-spacing:.5px}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .app{padding-bottom:5.4rem}
  .brand span{display:none}
  .hud-day{order:3;width:100%;display:flex;align-items:center;gap:.5rem;justify-content:center}
  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;
    background:#fffffff2;box-shadow:0 -6px 18px rgba(0,0,0,.1);
    padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom));gap:.15rem;flex-wrap:nowrap;overflow-x:auto;
  }
  .nav-btn{min-width:56px;font-size:.62rem;padding:.3rem .15rem}
  .nav-btn .nav-ico{font-size:1.2rem}
  .grid{grid-template-columns:1fr 1fr}
  .foot{padding-bottom:5rem}
}
@media (max-width:420px){
  .grid{grid-template-columns:1fr}
}

/* ---------- Fullscreen mini-games on phones/tablets ---------- */
/* Desktop (mouse) keeps the boxed modal; a game takes over the whole viewport
   on any touch device or small/short screen so the play area is as big as
   possible. The trigger covers portrait phones (narrow), landscape phones
   (wide-but-short) and all touch screens regardless of size. */
.rotate-hint{display:none}
@media (max-width:820px), (max-height:560px) and (orientation:landscape), (hover:none) and (pointer:coarse){
  .modal.game-modal{
    position:fixed;inset:0;
    width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;
    border-radius:0;overflow:hidden;
    padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    padding-top:calc(.5rem + env(safe-area-inset-top));
    display:flex;flex-direction:column;gap:.35rem;
  }
  .modal.game-modal > h3{
    flex:0 0 auto;margin:0;font-size:1.05rem;padding-right:2.8rem;line-height:1.2;
  }
  .modal.game-modal .modal-close{
    position:absolute;top:.5rem;right:.5rem;float:none;margin:0;z-index:10;
    font-size:1.15rem;padding:.4rem .7rem;
  }
  .modal.game-modal .game-hud{flex:0 0 auto;padding:.1rem .1rem 0;font-size:.92rem}
  /* stage fills the leftover height; canvas scales to fit (contain) both ways.
     flex-basis:0 gives the stage a definite height (not derived from the
     canvas) so the canvas's max-height:100% actually resolves — otherwise a
     landscape canvas overflows and shoves the controls off-screen. */
  .modal.game-modal .game-stage{
    flex:1 1 0;min-height:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .modal.game-modal .game-stage canvas{
    width:auto;height:auto;max-width:100%;max-height:100%;margin:auto;
  }
  /* DOM grid games (memory / whack) aren't letterboxed like a canvas — they
     flow naturally, centre horizontally and scroll vertically if they're
     taller than the stage. Overriding the flex-centre + clip above. */
  .modal.game-modal .game-stage.light{
    display:block;overflow:auto;-webkit-overflow-scrolling:touch;
  }
  .modal.game-modal .game-stage.light .dom-arena{
    min-height:100%!important;box-sizing:border-box;padding:.8rem .4rem;
  }
  .modal.game-modal .tc-controls{flex:0 0 auto}
}
@media (orientation:portrait) and (max-width:820px), (orientation:portrait) and (hover:none) and (pointer:coarse){
  .modal.game-modal .rotate-hint{
    display:block;flex:0 0 auto;text-align:center;
    font-size:.74rem;font-weight:700;color:var(--ink-soft);padding:.15rem 0 .05rem;
  }
}

/* ---------- Language menu ---------- */
.lang-mini{
  position:absolute;top:.9rem;right:.9rem;
  background:#fff;border:2px solid #cfe5d6;border-radius:12px;
  color:var(--brand-dark);font-weight:700;font-size:.82rem;
  padding:.3rem .6rem;box-shadow:0 3px 0 #d5e3d9;display:inline-flex;align-items:center;gap:.25rem;
}
.lang-mini:hover{filter:brightness(1.03)}
.landing-card{position:relative}
.lang-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.lang-opt{display:flex;align-items:center;gap:.55rem;justify-content:flex-start;text-align:left}
.lang-flag{font-size:1.3rem;line-height:1}

@media (max-width:640px){
  .lang-mini{top:.6rem;right:.6rem;font-size:.75rem}
}