/* ============================================================
   Critter Match — playful / toy-like art direction
   Sunny sky background, two clear player colors, chunky rounded UI.
   ============================================================ */
:root{
  --bg-top:#8fd6ff;      /* sky */
  --bg-bot:#c9f2d6;      /* meadow */
  --paper:#fffdf6;       /* card face */
  --ink:#4a3524;         /* friendly dark brown, never pure black */
  --ink-soft:#8a725d;
  --p1:#ff7a3c;          /* Player 1 — tangerine fox */
  --p1-deep:#e85f1e;
  --p2:#12b3b0;          /* Player 2 — teal owl */
  --p2-deep:#0a8f8c;
  --sun:#ffcb2e;         /* celebration yellow */
  --grape:#7b6cf0;       /* card back */
  --grape-deep:#5f4fd6;
  --shadow: 0 8px 0 rgba(74,53,36,.18);
  --shadow-lift: 0 14px 26px rgba(74,53,36,.22);
  --r-lg:32px; --r-md:22px; --r-sm:16px;
  --fast:.16s; --mid:.28s;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bot));
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
h1,h2,.baloo,.win-banner,.p-num,.logo-text{font-family:"Baloo 2",system-ui,sans-serif}
img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}

/* ---------- 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.is-active{display:flex}
[hidden]{display:none!important}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

/* ============================================================
   HOME
   ============================================================ */
#home{align-items:center;justify-content:center;position:relative;overflow:hidden}
.home-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,4vh,40px);
  padding:24px;width:100%;max-width:640px;text-align:center;
}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;z-index:1;animation:float 9s ease-in-out infinite}
.b1{width:220px;height:220px;background:#fff6c2;top:-40px;left:-30px}
.b2{width:180px;height:180px;background:#ffd0e0;bottom:-30px;right:-20px;animation-delay:-3s}
.b3{width:150px;height:150px;background:#c6e8ff;bottom:20%;left:8%;animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.05)}}

.logo{display:flex;align-items:center;justify-content:center;gap:clamp(4px,2vw,16px)}
.logo-critter{width:clamp(64px,16vw,104px);height:clamp(64px,16vw,104px);flex:none;filter:drop-shadow(0 6px 0 rgba(74,53,36,.14))}
.lc-left{animation:wobbleL 3.2s ease-in-out infinite}
.lc-right{animation:wobbleR 3.2s ease-in-out infinite}
@keyframes wobbleL{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(4deg) translateY(-8px)}}
@keyframes wobbleR{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}
.logo-text h1{
  font-size:clamp(38px,10vw,72px);line-height:.92;font-weight:800;letter-spacing:-1px;
  color:var(--p1);text-shadow:0 4px 0 #fff, 0 5px 0 rgba(74,53,36,.15);
}
.logo-text h1 span{display:block;color:var(--p2)}
.tagline{margin-top:10px;font-size:clamp(14px,3.6vw,19px);font-weight:800;color:#fff;
  background:var(--ink);display:inline-block;padding:6px 16px;border-radius:999px;box-shadow:var(--shadow)}

/* big play button */
.play-btn{
  width:clamp(120px,30vw,168px);height:clamp(120px,30vw,168px);border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#8affc0,var(--p2) 78%);
  box-shadow:0 12px 0 var(--p2-deep), var(--shadow-lift);
  display:grid;place-items:center;transition:transform var(--fast),box-shadow var(--fast);
  animation:beat 1.8s ease-in-out infinite;
}
.play-btn svg{width:46%;height:46%;fill:#fff;margin-left:6%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.play-btn:active{transform:translateY(8px);box-shadow:0 4px 0 var(--p2-deep),var(--shadow)}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.play-btn:focus-visible,.size-opt:focus-visible,.sound-toggle:focus-visible,.mini-btn:focus-visible,.big-round:focus-visible,.card:focus-visible{outline:5px solid var(--sun);outline-offset:4px}

/* board-size chooser (visual dot grids, no reading) */
.size-choose{display:flex;gap:clamp(10px,3vw,20px)}
.size-opt{
  width:clamp(66px,17vw,88px);height:clamp(66px,17vw,88px);border-radius:var(--r-md);
  background:#fff;box-shadow:0 6px 0 rgba(74,53,36,.14);
  display:grid;place-items:center;transition:transform var(--fast),box-shadow var(--fast),background var(--fast);
  border:4px solid transparent;
}
.size-opt:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(74,53,36,.14)}
.size-opt.is-sel{border-color:var(--p1);background:#fff4ec;transform:translateY(-2px)}
.size-grid{display:grid;gap:5px}
.size-grid::before,.size-grid{--d:12px}
.size-grid i,.size-grid span{display:block}
.g-small{grid-template-columns:repeat(2,1fr)}
.g-medium{grid-template-columns:repeat(3,1fr)}
.g-big{grid-template-columns:repeat(4,1fr)}
.size-grid{--n:4}
.g-small{--n:4}.g-medium{--n:6}.g-big{--n:12}
.size-grid{position:relative}
/* build dots via box-shadow trick: use pseudo children through JS-free approach → use background dots */
.size-grid{width:44px;height:44px;background-image:radial-gradient(var(--sun) 42%,transparent 46%);background-repeat:round}
.g-small{background-size:22px 22px}
.g-medium{background-size:15px 15px}
.g-big{background-size:11px 11px}
.is-sel .size-grid{background-image:radial-gradient(var(--p1) 42%,transparent 46%)}

.sound-toggle{
  width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:0 5px 0 rgba(74,53,36,.14);
  display:grid;place-items:center;transition:transform var(--fast)}
.sound-toggle:active{transform:scale(.92)}
.ic-sound{width:30px;height:26px;
  -webkit-mask:var(--spk) center/contain no-repeat;mask:var(--spk) center/contain no-repeat;background:var(--ink)}
:root{--spk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zm-2.5-9v2.06A7 7 0 0 1 14 21v2.06A9 9 0 0 0 14 3z'/%3E%3C/svg%3E")}
.is-muted .ic-sound{-webkit-mask-image:var(--spk-off);mask-image:var(--spk-off)}
:root{--spk-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm18.6 3 2.1-2.1-1.4-1.4L20.2 10.6 18 8.4l-1.4 1.4L18.8 12l-2.2 2.2 1.4 1.4 2.2-2.1 2.1 2.1 1.4-1.4z'/%3E%3C/svg%3E")}

/* ============================================================
   GAME
   ============================================================ */
#game{background:linear-gradient(180deg,var(--bg-top),var(--bg-bot))}
.topbar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:clamp(8px,2vh,16px) clamp(10px,3vw,20px);
}
.mini-btn{
  width:clamp(44px,11vw,54px);height:clamp(44px,11vw,54px);border-radius:var(--r-sm);
  background:#ffffffcc;box-shadow:0 5px 0 rgba(74,53,36,.14);display:grid;place-items:center;
  transition:transform var(--fast)}
.mini-btn:active{transform:translateY(4px)}
.mini-btn svg{width:56%;height:56%;fill:var(--ink)}
.ic-sound.small{width:24px;height:22px}

.players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;max-width:520px;margin:0 auto;width:100%}
.player{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 8px 8px;border-radius:var(--r-md);transition:background var(--mid),box-shadow var(--mid);
  position:relative}
.p1{--pc:var(--p1);--pcd:var(--p1-deep)}
.p2{--pc:var(--p2);--pcd:var(--p2-deep)}
.player.is-turn{background:var(--pc);box-shadow:0 6px 0 var(--pcd)}
.p-avatar{width:clamp(48px,13vw,72px);height:clamp(48px,13vw,72px);border-radius:50%;background:#fff;
  padding:5px;box-shadow:0 4px 0 rgba(74,53,36,.12);transition:transform var(--mid)}
.player.is-turn .p-avatar{transform:scale(1.14);animation:bob 1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:scale(1.14) translateY(0)}50%{transform:scale(1.14) translateY(-6px)}}
.p-score{min-width:38px;height:30px;padding:0 10px;border-radius:999px;background:#fff;
  display:grid;place-items:center;box-shadow:0 3px 0 rgba(74,53,36,.12)}
.player.is-turn .p-score{background:#fff}
.p-num{font-size:20px;font-weight:800;color:var(--pcd)}
.p-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:120px;min-height:0}
.p-tray img{width:18px;height:18px;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}

.turn-flag{display:grid;place-items:center;font-size:clamp(22px,6vw,34px);
  transition:transform var(--mid)}
.turn-flag.to-p1{transform:translateX(-4px) rotate(-8deg)}
.turn-flag.to-p2{transform:translateX(4px) rotate(8deg)}
.tf-emoji{animation:bob 1.4s ease-in-out infinite;display:block}

/* board */
.board-wrap{flex:1;min-height:0;display:grid;place-items:center;padding:clamp(6px,2vw,18px);position:relative}
.board{display:grid;gap:var(--gap,12px);
  grid-template-columns:repeat(var(--cols),var(--card));
  grid-auto-rows:var(--card);}
.board.turn-p1{filter:none}

.card{
  position:relative;width:var(--card);height:var(--card);border-radius:var(--r-sm);
  background:none;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.4,1.3,.5,1);
  cursor:pointer;animation:dealIn .4s both;
}
@keyframes dealIn{from{opacity:0;transform:scale(.4) rotateZ(-8deg)}to{opacity:1;transform:scale(1)}}
.card .face{position:absolute;inset:0;border-radius:var(--r-sm);backface-visibility:hidden;
  -webkit-backface-visibility:hidden;display:grid;place-items:center;overflow:hidden}
.card .back{
  background:linear-gradient(160deg,#9a8cff,var(--grape) 60%,var(--grape-deep));
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.14),0 6px 0 rgba(74,53,36,.18);
}
.card .back::after{content:"";position:absolute;width:52%;height:52%;
  background:radial-gradient(circle at 50% 45%,#fff 60%,#ffe08a 61%);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2 6.8.8-5 4.6 1.3 6.7L12 17.8 5.9 20.9 7.3 14.2l-5-4.6 6.8-.8z'/%3E%3C/svg%3E")}
.card .front{
  background:var(--paper);transform:rotateY(180deg);
  box-shadow:inset 0 0 0 4px #fff,0 6px 0 rgba(74,53,36,.18);padding:8%;
}
.card .front img{filter:drop-shadow(0 3px 2px rgba(74,53,36,.12))}
.card.flipped{transform:rotateY(180deg)}
.card.matched{cursor:default;animation:matchPop .5s ease}
.card.matched .front{box-shadow:inset 0 0 0 5px var(--pc,#ffd54a),0 6px 0 rgba(74,53,36,.16)}
.card.matched.by1{--pc:var(--p1)}
.card.matched.by2{--pc:var(--p2)}
.card.gone{opacity:.55;transform:rotateY(180deg) scale(.9)}
@keyframes matchPop{0%{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) scale(1.16)}100%{transform:rotateY(180deg) scale(1)}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.card:not(.flipped):not(.matched):active{transform:scale(.94)}
.card.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:rotateY(180deg)}25%{transform:rotateY(180deg) translateX(-6px)}75%{transform:rotateY(180deg) translateX(6px)}}

/* ============================================================
   WIN
   ============================================================ */
#win{align-items:center;justify-content:center;text-align:center;overflow:hidden}
.win-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,4vh,34px);padding:24px;z-index:2}
.win-banner{
  font-size:clamp(40px,12vw,84px);font-weight:800;color:var(--sun);line-height:1;
  text-shadow:0 4px 0 var(--ink),0 6px 0 rgba(74,53,36,.2);animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.podium{display:flex;align-items:flex-end;gap:clamp(16px,6vw,50px)}
.pod{display:flex;flex-direction:column;align-items:center;gap:8px}
.pod .crown{font-size:clamp(28px,8vw,44px);height:1.1em;opacity:0;transition:opacity .3s}
.pod.win .crown{opacity:1;animation:bob 1.2s ease-in-out infinite}
.pod-av{width:clamp(84px,24vw,140px);height:clamp(84px,24vw,140px);border-radius:50%;background:#fff;
  padding:10px;box-shadow:0 8px 0 rgba(74,53,36,.16);animation:bob 1.4s ease-in-out infinite}
.pod.p2 .pod-av{animation-delay:-.5s}
.pod-score{font-family:"Baloo 2";font-size:clamp(30px,9vw,52px);font-weight:800}
.pod.p1 .pod-score{color:var(--p1-deep)}.pod.p2 .pod-score{color:var(--p2-deep)}
.pod-stars{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:150px}
.pod-stars img{width:20px;height:20px}

.win-actions{display:flex;gap:22px;margin-top:6px}
.big-round{width:clamp(72px,20vw,96px);height:clamp(72px,20vw,96px);border-radius:50%;
  background:#fff;box-shadow:0 8px 0 rgba(74,53,36,.18);display:grid;place-items:center;
  transition:transform var(--fast)}
.big-round svg{width:48%;height:48%;fill:var(--ink)}
.big-round.accent{background:radial-gradient(circle at 40% 34%,#ffe27a,var(--sun));box-shadow:0 8px 0 #e0a800}
.big-round.accent svg{fill:#fff}
.big-round:active{transform:translateY(6px);box-shadow:0 2px 0 rgba(74,53,36,.18)}

/* ---------- responsive: portrait stacks players a touch tighter ---------- */
@media (max-width:520px){
  .p-tray{max-width:78px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.06s!important}
}