:root{
  --ink:#5a463a;
  --card:#fffaf3;
  --accent:#ff6b9a;
  --gold:#ffc83d;
  --good:#3aa15e;
  --bad:#e23b3b;
  --cardboard:#d3a06a;
  --cardboard-d:#b07a4e;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Quicksand', ui-rounded, 'Segoe UI Rounded', 'Segoe UI', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(140% 120% at 50% -10%, #fff7ec 0%, #ffe7d0 55%, #ffd7bb 100%) fixed;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  -webkit-user-select:none; user-select:none;
  overflow-x:hidden;
}

.app{ position:relative; width:100%; max-width:440px; }
.app::before, .app::after{
  content:'🐾'; position:absolute; font-size:2.1rem; opacity:.16; pointer-events:none;
}
.app::before{ top:-10px; left:-4px; transform:rotate(-18deg); }
.app::after{ bottom:-12px; right:-4px; transform:rotate(14deg); }

/* ---------- HUD ---------- */
.hud{ display:flex; align-items:stretch; gap:8px; margin-bottom:8px; }
.stat{
  flex:1; text-align:center; background:var(--card);
  border:2px solid #ffe2c6; border-radius:16px; padding:6px 8px;
  box-shadow:0 4px 0 rgba(255,201,160,.7);
}
.stat .lbl{ display:block; font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; font-weight:800; opacity:.65; }
.stat .val{ font-size:1.35rem; font-weight:900; line-height:1.1; }
.val.low{ color:var(--bad); animation:tick .5s ease; }
@keyframes tick{ 0%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.mute{
  width:46px; border:2px solid #ffe2c6; border-radius:16px; background:var(--card);
  font-size:1.15rem; cursor:pointer; box-shadow:0 4px 0 rgba(255,201,160,.7);
}
.mute:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(255,201,160,.7); }

.combo-row{ height:24px; text-align:center; margin-bottom:6px; }
.combo{ font-weight:800; font-size:.95rem; color:#c08aa0; transition:color .2s, transform .2s; }
.combo.hot{ color:var(--accent); transform:scale(1.08); }

/* ---------- Stage / board ---------- */
.stage{ position:relative; width:100%; }
.board{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px;
  background:linear-gradient(#fff7ee,#ffe9d3);
  border:3px solid #ffd9b8; border-radius:26px;
  box-shadow:inset 0 2px 8px rgba(255,255,255,.8), 0 14px 34px rgba(180,120,70,.28);
}
.board.shake{ animation:shake .36s ease; }
@keyframes shake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,2px); }
  40%{ transform:translate(6px,-2px); }
  60%{ transform:translate(-4px,3px); }
  80%{ transform:translate(4px,-1px); }
}

/* ---------- Cell + cardboard box ---------- */
.cell{
  position:relative; aspect-ratio:1/1; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}

.cat-wrap{
  position:absolute; left:6%; right:6%; bottom:30%; height:64%;
  z-index:2; display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
}
.cat{
  position:relative; width:80%;
  transform:translateY(55%) scale(.2); opacity:0;
  transform-origin:bottom center;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), opacity .16s ease;
  will-change:transform;
}
.cell.show .cat{ transform:translateY(0) scale(1); opacity:1; }
.cell.boop-good .cat{ animation:happy .42s ease; }
.cell.boop-bad .cat{ animation:startle .42s ease; }
@keyframes happy{
  0%{ transform:scale(1); } 35%{ transform:scale(1.16) rotate(-5deg); }
  65%{ transform:scale(1.08) rotate(5deg); } 100%{ transform:scale(1); }
}
@keyframes startle{
  0%{ transform:translateY(0); } 18%{ transform:translateY(-10%) scale(1.06); }
  60%{ transform:translateY(0) rotate(-3deg); } 100%{ transform:translateY(0); }
}

/* crown + zzz badges */
.type-golden .cat{ filter:drop-shadow(0 0 9px rgba(255,200,60,.95)); }
.type-golden .cat::after{
  content:'👑'; position:absolute; top:-22%; left:50%; font-size:1.3rem;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.2)); animation:crown 1s ease-in-out infinite;
}
@keyframes crown{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-22%); } }
.type-sleeping .cat::after{
  content:'💤'; position:absolute; top:-12%; right:-14%; font-size:1.05rem;
  animation:zfloat 1.6s ease-in-out infinite;
}
@keyframes zfloat{ 0%,100%{ transform:translateY(0); opacity:.85; } 50%{ transform:translateY(-26%); opacity:.5; } }

.box{ position:absolute; left:7%; right:7%; bottom:0; height:44%; z-index:3; }
.box::before{
  content:''; position:absolute; inset:0; border-radius:7px 7px 9px 9px;
  background:linear-gradient(var(--cardboard), #c0894f 80%);
  border:2px solid var(--cardboard-d);
  box-shadow:inset 0 7px 0 rgba(255,255,255,.16), inset 0 -10px 16px rgba(0,0,0,.2), 0 7px 11px rgba(120,80,40,.28);
}
.box .tape{
  position:absolute; left:50%; top:0; width:16%; height:100%; transform:translateX(-50%);
  background:rgba(255,250,235,.5); z-index:1;
}
.box .flap{
  position:absolute; top:-1px; width:53%; height:32%; z-index:2;
  background:linear-gradient(#deb079,#cc9760); border:2px solid var(--cardboard-d);
}
.box .flap.fl{ left:-2%; transform-origin:right top; transform:rotate(-27deg) skewX(-6deg); border-radius:7px 5px 0 0; }
.box .flap.fr{ right:-2%; transform-origin:left top; transform:rotate(27deg) skewX(6deg); border-radius:5px 7px 0 0; }

.cell.miss .box{ animation:nudge .3s ease; }
@keyframes nudge{ 50%{ transform:translateY(3px); } }

/* ---------- FX layer ---------- */
.fx{ position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden; }
.float{
  position:absolute; transform:translate(-50%,-50%);
  font-weight:900; font-size:1.35rem; white-space:nowrap;
  text-shadow:0 2px 0 rgba(255,255,255,.6), 0 3px 6px rgba(0,0,0,.12);
  animation:floatUp .85s ease-out forwards;
}
.float.good{ color:var(--good); }
.float.gold{ color:#e8a200; font-size:1.7rem; }
.float.bad{ color:var(--bad); }
.float.calm{ color:#7c8aa0; font-size:1.05rem; }
.float.miss{ color:#b3739a; font-size:1rem; opacity:.85; }
@keyframes floatUp{ to{ transform:translate(-50%,-190%); opacity:0; } }

.heart{
  position:absolute; transform:translate(-50%,-50%); font-size:1.15rem;
  animation:burst .8s ease-out forwards;
}
@keyframes burst{
  to{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); opacity:0; }
}

.flash{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; border-radius:26px; }
.flash.gold{ background:radial-gradient(circle at 50% 45%, rgba(255,210,80,.55), transparent 70%); animation:flashout .32s ease; }
.flash.bad{ background:radial-gradient(circle at 50% 45%, rgba(255,80,80,.5), transparent 72%); animation:flashout .32s ease; }
@keyframes flashout{ from{ opacity:1; } to{ opacity:0; } }

.combo-banner{
  position:absolute; top:7%; left:50%; z-index:7; pointer-events:none;
  font-weight:900; font-size:1.55rem; color:var(--accent);
  text-shadow:0 2px 0 #fff, 0 5px 10px rgba(0,0,0,.16); opacity:0;
  transform:translateX(-50%);
}
.combo-banner.pop{ animation:cbpop .95s ease; }
@keyframes cbpop{
  0%{ opacity:0; transform:translateX(-50%) scale(.4); }
  20%{ opacity:1; transform:translateX(-50%) scale(1.15); }
  70%{ opacity:1; transform:translateX(-50%) scale(1); }
  100%{ opacity:0; transform:translateX(-50%) translateY(-34px) scale(1); }
}

/* ---------- Overlays ---------- */
.overlay{
  position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:rgba(70,46,32,.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border-radius:26px; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.overlay.active{ opacity:1; pointer-events:auto; }
.panel{
  width:86%; max-width:330px; text-align:center;
  background:var(--card); border:3px solid #ffe0c2; border-radius:24px;
  padding:22px 20px; box-shadow:0 18px 40px rgba(120,80,40,.34);
}
.overlay.active .panel{ animation:panelIn .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes panelIn{ from{ transform:translateY(18px) scale(.92); opacity:0; } to{ transform:none; opacity:1; } }

.logo{ font-size:2rem; font-weight:900; color:var(--accent); letter-spacing:.5px; }
.tag{ margin:6px 0 12px; font-weight:600; opacity:.8; }
.rules{ list-style:none; padding:0; margin:0 auto 4px; display:inline-block; text-align:left; }
.rules li{ margin:8px 0; font-weight:600; font-size:.95rem; }
.rules i{ color:var(--gold); font-style:normal; font-weight:800; }
.rules .emo{ display:inline-block; width:1.7rem; font-size:1.05rem; }

.btn{
  margin-top:14px; font-family:inherit; font-size:1.05rem; font-weight:800; color:#fff;
  background:linear-gradient(#ff8fb3,#ff6b9a); border:none; border-radius:16px; padding:12px 28px;
  cursor:pointer; box-shadow:0 6px 0 #e44f80, 0 10px 18px rgba(255,100,150,.35);
}
.btn:active{ transform:translateY(3px); box-shadow:0 3px 0 #e44f80, 0 6px 12px rgba(255,100,150,.35); }

.hi{ margin-top:10px; font-weight:700; opacity:.85; }
.rank{ font-size:1.1rem; font-weight:800; color:#c77; margin:4px 0 2px; }
.scoreboard{ display:flex; gap:8px; margin-top:12px; }
.scoreboard>div{ flex:1; background:#fff3e6; border:2px solid #ffe4cb; border-radius:14px; padding:8px 4px; }
.scoreboard .lbl{ display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; opacity:.65; }
.scoreboard b{ font-size:1.25rem; }
.newhigh{ margin-top:10px; font-weight:800; color:var(--accent); display:none; }

.foot{ text-align:center; font-size:.72rem; opacity:.6; margin-top:12px; font-weight:600; }

@media (max-width:380px){
  .logo{ font-size:1.7rem; }
  .stat .val{ font-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.05s !important; }
}