/* ===== Shared Peppy Thinkers header/footer ===== */
.container{
  width:min(1120px,calc(100% - 44px));
  max-width:none;
  margin:0 auto;
}
.site-header,
.site-header *,
.site-footer,
.site-footer *{
  box-sizing:border-box;
}
.puzzle-site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(223,231,242,.9);
  padding:0;
}
.puzzle-header-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.puzzle-brand,
.brand{
  display:inline-flex;
  align-items:center;
  gap:13px;
  min-width:fit-content;
  color:inherit;
  text-decoration:none;
}
.brand-badge{
  width:44px;
  height:44px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:.92rem;
  font-weight:900;
  background:linear-gradient(135deg,#4078ff,#6757f5);
  box-shadow:0 12px 22px rgba(64,120,255,.22);
}
.logo{
  display:block;
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.05;
  color:#172033;
}
.tagline{
  display:block;
  margin-top:8px;
  color:#718096;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.19em;
}
.site-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.site-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  color:#435067;
  font-size:.9rem;
  font-weight:900;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.site-nav a:hover{
  transform:translateY(-1px);
  background:#f2f0ff;
  color:#4d3fdc;
}
.site-nav a.active{
  color:#fff;
  background:#6757f5;
  box-shadow:0 12px 22px rgba(103,87,245,.25);
}
.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid #dfe7f2;
  border-radius:14px;
  background:#fff;
  color:#27344a;
  font-size:1.2rem;
  font-weight:900;
  cursor:pointer;
}

/* ===== Mini Games sub navigation — long one-row style ===== */
.mini-game-subnav{
  width:min(1360px,calc(100% - 44px));
  max-width:none;
  margin:18px auto 18px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(223,231,242,.9);
  box-shadow:0 10px 25px rgba(34,50,84,.08);
  backdrop-filter:blur(14px);
}
.mini-game-subnav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 13px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dfe7f2;
  color:#435067;
  font-size:.88rem;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.mini-game-subnav a:hover,
.mini-game-subnav a.active{
  color:#fff;
  background:#6757f5;
  border-color:#6757f5;
  box-shadow:0 10px 22px rgba(103,87,245,.22);
  transform:translateY(-1px);
}
@media(max-width:900px){
  .mini-game-subnav{
    width:min(100% - 28px,1360px);
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .mini-game-subnav::-webkit-scrollbar{display:none;}
  .mini-game-subnav a{flex:0 0 auto;}
}

.puzzle-site-footer{
  padding:32px 0;
  border-top:1px solid #dfe7f2;
  background:rgba(255,255,255,.62);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.site-footer h3{
  font-size:1rem;
  font-weight:900;
  margin:0;
  letter-spacing:-.02em;
}
.site-footer p{
  color:#5f6b7c;
  font-size:.9rem;
  margin:4px 0 0;
}
.footer-nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.footer-nav a{
  color:#435067;
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
}
.footer-nav a:hover{color:#6757f5;}

@media(max-width:820px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .site-nav{
    position:absolute;
    left:22px;
    right:22px;
    top:76px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:12px;
    border:1px solid #dfe7f2;
    border-radius:22px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 45px rgba(34,50,84,.11);
  }
  .site-nav.open{display:flex;}
  .site-nav a{text-align:center;}
}
@media(max-width:680px){
  .container{width:min(100% - 28px,1120px);}
  .puzzle-header-inner{min-height:82px;}
  .brand-badge{width:40px;height:40px;}
  .logo{font-size:1.28rem;}
  .tagline{font-size:.58rem;}
  .footer-inner{align-items:flex-start;flex-direction:column;}
}


:root {
  --bg1: #fff7ed;
  --bg2: #fef3c7;
  --ink: #352016;
  --muted: #7c5f4d;
  --panel: rgba(255,255,255,.82);
  --panel-solid: #fffaf3;
  --cookie: #c47b37;
  --cookie-dark: #8a4f22;
  --cream: #fff5dc;
  --strawberry: #ef476f;
  --chocolate: #7c3f22;
  --vanilla: #f7c948;
  --blueberry: #4f86f7;
  --mint: #2fbf71;
  --danger: #ef4444;
  --gold: #fbbf24;
  --shadow: 0 22px 60px rgba(93, 51, 22, .20);
  --soft-shadow: 0 12px 30px rgba(93, 51, 22, .14);
  --radius: 24px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(251,191,36,.30), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(239,71,111,.16), transparent 28%),
    radial-gradient(circle at 62% 92%, rgba(47,191,113,.14), transparent 30%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x: hidden;
}

button, select { font: inherit; }
button { border: 0; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
select {
  width: 100%;
  border: 1px solid rgba(124,95,77,.22);
  background: white;
  border-radius: 16px;
  padding: 11px 12px;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 700;
}
label { display:block; color: var(--muted); font-weight: 800; font-size: .86rem; margin: 14px 0; }

.app-shell { min-height: 100%; padding: 18px; }
.game-header {
  max-width: 1500px;
  margin: 0 auto 16px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 28px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}
.brand-block { display:flex; align-items:center; gap: 12px; min-width:0; }
.logo-cookie {
  width: 52px; height: 52px; border-radius: 18px;
  display:grid; place-items:center;
  font-size: 1.8rem;
  background: linear-gradient(145deg, #ffd88f, #b86f2e);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), var(--soft-shadow);
}
h1 { margin:0; font-size: clamp(1.35rem, 2vw, 2.25rem); letter-spacing: -0.055em; }
.brand-block p { margin: 2px 0 0; color: var(--muted); font-weight: 800; font-size: .88rem; }
.top-stats { display:flex; align-items:center; gap: 8px; }
.stat {
  min-width: 82px;
  padding: 9px 11px;
  background: rgba(255,250,243,.86);
  border: 1px solid rgba(124,95,77,.14);
  border-radius: 18px;
  text-align: center;
}
.stat span { display:block; color: var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:900; }
.stat strong { display:block; margin-top:2px; font-size:1.1rem; }
.header-actions { display:flex; align-items:center; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 15px;
  background: rgba(255,250,243,.88);
  color: var(--ink);
  font-weight: 900;
  box-shadow: var(--soft-shadow);
}
.primary-btn, .gold-btn, .soft-btn, .danger-soft-btn {
  border-radius: 16px;
  padding: 11px 14px;
  font-weight: 900;
}
.primary-btn { color:white; background: linear-gradient(135deg, #c47b37, #8a4f22); box-shadow: 0 12px 26px rgba(138,79,34,.22); }
.gold-btn { color:#442a05; background: linear-gradient(135deg, #ffe08a, #fbbf24); box-shadow: 0 12px 26px rgba(251,191,36,.26); }
.soft-btn { color: var(--ink); background: rgba(255,250,243,.9); border: 1px solid rgba(124,95,77,.14); }
.danger-soft-btn { color:#8b1a1a; background: #fee2e2; border: 1px solid #fecaca; }
.full { width:100%; }

.game-layout {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(760px, 1fr);
  gap: 18px;
  align-items: start;
}
.side-panel { display:flex; flex-direction:column; gap: 14px; }
.panel-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}
.panel-card h2 { margin:0 0 10px; font-size: 1.05rem; letter-spacing:-.02em; }
.status-card p { margin: 0 0 12px; color: var(--muted); font-weight: 700; line-height: 1.45; }
.mini-meter { height: 12px; border-radius: 999px; background: rgba(124,95,77,.14); overflow: hidden; }
.mini-meter span { display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--gold), var(--mint)); transition: width .25s ease; }
.status-grid { display:grid; grid-template-columns:1fr 1fr; gap: 10px; margin-top: 12px; }
.status-grid div { background: rgba(255,250,243,.72); border-radius: 16px; padding: 10px; }
.status-grid span { display:block; color:var(--muted); font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.status-grid strong { display:block; font-size:1.25rem; margin-top:2px; }
.button-stack { display:grid; gap: 9px; }
.collapse-toggle { width:100%; background:transparent; padding:0; display:flex; justify-content:space-between; align-items:center; font-weight:900; color: var(--ink); }
.collapse-body { margin-top:10px; }
.collapse-body.closed { display:none; }
.log-body { max-height: 190px; overflow:auto; padding-right:4px; }
#gameLog { list-style:none; margin:0; padding:0; }
#gameLog li { padding:8px 0; border-bottom:1px solid rgba(124,95,77,.14); color:var(--muted); font-weight:700; font-size:.84rem; }

.table-zone { min-width:0; }
.table-cloth {
  position: relative;
  min-height: calc(100vh - 130px);
  border-radius: 36px;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.18), transparent 32%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.038) 0 3px, transparent 3px 13px),
    linear-gradient(135deg, #2fbf71 0%, #23985b 46%, #187142 100%);
  border: 10px solid #b46c32;
  box-shadow: var(--shadow), inset 0 0 0 8px rgba(255,255,255,.16);
}
.table-shine { position:absolute; inset: 52px 80px; border: 2px dashed rgba(255,255,255,.22); border-radius: 50%; pointer-events:none; }
.stock-row { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap: 14px; }
.stock-area { display:flex; align-items:flex-start; gap:12px; }
.stock-pile, .discard-pile {
  width: 84px; height: 116px; border-radius: 16px;
  display:grid; place-items:center;
  position:relative;
}
.stock-pile {
  color:white;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 5px, transparent 5px 10px),
    linear-gradient(135deg, #56a6ff, #2870da);
  box-shadow: 0 14px 25px rgba(0,0,0,.18), inset 0 0 0 4px rgba(255,255,255,.35);
}
.stock-icon { font-size:2rem; filter: drop-shadow(0 3px 3px rgba(0,0,0,.15)); }
.stock-count { position:absolute; top:8px; right:9px; background:rgba(0,0,0,.30); color:white; min-width:25px; height:25px; border-radius:999px; display:grid; place-items:center; font-size:.78rem; font-weight:900; }
.discard-pile { border:2px dashed rgba(255,255,255,.35); background: rgba(255,255,255,.10); }
.special-guide { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width: 560px; }
.special-guide span { color:#fff; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.20); border-radius:999px; padding:7px 10px; font-size:.82rem; font-weight:800; backdrop-filter: blur(8px); }
.message-banner {
  position:relative; z-index:2; margin: 18px auto 18px;
  width: fit-content; max-width: min(92%, 760px);
  color:white; text-align:center; font-weight:900; line-height:1.35;
  padding: 10px 16px; border-radius:999px;
  background: rgba(46, 76, 35, .45);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.tray-area {
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 15px;
  margin-top: 12px;
}
.tray {
  min-height: 270px;
  border-radius: 26px;
  padding: 14px 12px;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 14px 25px rgba(0,0,0,.10);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.tray.valid-target { border-color: rgba(255,224,138,.95); background: rgba(255,255,255,.25); transform: translateY(-2px); }
.tray.blocked { filter: grayscale(.2); background: rgba(72, 42, 24, .25); }
.tray-head { display:flex; justify-content:space-between; align-items:center; color:white; font-weight:900; margin-bottom: 10px; }
.tray-title { display:flex; align-items:center; gap: 8px; }
.tray-badge { width:30px; height:30px; border-radius:50%; background: rgba(255,255,255,.22); display:grid; place-items:center; }
.tray-count { color:rgba(255,255,255,.82); font-size:.8rem; }
.stack-preview { position:relative; min-height: 185px; }
.card-in-stack { position:absolute; left:50%; transform:translateX(-50%); }
.empty-tray { height: 170px; border:2px dashed rgba(255,255,255,.32); border-radius: 18px; display:grid; place-items:center; color:rgba(255,255,255,.78); font-weight:900; text-align:center; padding: 16px; }

.hand-section {
  position:relative; z-index:2;
  margin-top: 20px;
  padding: 14px;
  border-radius: 28px;
  background: rgba(30, 97, 55, .35);
  border: 1px solid rgba(255,255,255,.18);
}
.hand-title { display:flex; justify-content:space-between; align-items:center; color:white; font-weight:900; margin-bottom: 10px; }
.hand-title small { color:rgba(255,255,255,.78); font-weight:800; }
.hand-area { display:flex; gap: 10px; flex-wrap:wrap; min-height: 128px; align-items:center; }

.cookie-card {
  width: 86px; height: 120px;
  border-radius: 17px;
  background: linear-gradient(145deg, #fffefa, #fff2d0);
  box-shadow: 0 12px 23px rgba(0,0,0,.20), inset 0 0 0 2px rgba(255,255,255,.75);
  border: 2px solid rgba(80, 48, 25, .14);
  padding: 8px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  user-select:none;
  touch-action: manipulation;
  position:relative;
  animation: popIn .18s ease both;
}
.cookie-card.selectable { cursor:pointer; }
.cookie-card.selectable:hover { transform: translateY(-4px); }
.cookie-card.selected { outline: 4px solid rgba(255,224,138,.96); transform: translateY(-7px) rotate(-1deg); }
.cookie-card .card-top { display:flex; justify-content:space-between; align-items:flex-start; font-weight:900; }
.cookie-card .value { font-size:1.15rem; line-height:1; }
.cookie-card .flavor-dot { width:18px; height:18px; border-radius:50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.45); }
.cookie-card .cookie-emoji { text-align:center; font-size:2.15rem; line-height:1; filter: drop-shadow(0 4px 3px rgba(0,0,0,.12)); }
.cookie-card .card-bottom { display:flex; justify-content:space-between; align-items:flex-end; color: var(--muted); font-weight:900; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.cookie-card.special { background: linear-gradient(145deg, #ffffff, #e8fff3); }
.cookie-card.special .cookie-emoji { font-size: 2.35rem; }
.cookie-card.small { width:72px; height:100px; border-radius: 14px; }
.cookie-card.small .cookie-emoji { font-size:1.7rem; }
.cookie-card.small .value { font-size:.98rem; }
.cookie-card.discarded { opacity:.96; }
.flavor-chocolate { background: var(--chocolate); }
.flavor-strawberry { background: var(--strawberry); }
.flavor-vanilla { background: var(--vanilla); }
.flavor-blueberry { background: var(--blueberry); }

.modal { position:fixed; inset:0; background:rgba(30,20,12,.52); display:grid; place-items:center; z-index:70; padding:18px; }
.modal.hidden { display:none; }
.modal-card { width:min(720px, 96vw); max-height:88vh; overflow:auto; background: var(--panel-solid); border-radius: 28px; padding: 24px; box-shadow: var(--shadow); position:relative; }
.modal-card h2 { margin:0 0 12px; font-size:1.55rem; letter-spacing:-.03em; }
.modal-card h3 { margin:18px 0 8px; }
.modal-card p, .modal-card li { color:var(--muted); line-height:1.55; font-weight:700; }
.modal-close { position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:14px; background:#fff0df; font-size:1.35rem; font-weight:900; }
.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%, 15px); opacity:0; pointer-events:none; z-index:90; background:rgba(52,32,22,.94); color:white; padding:12px 16px; border-radius:18px; box-shadow:var(--shadow); font-weight:900; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity:1; transform:translate(-50%, 0); }

@keyframes popIn { from { opacity:0; transform: translateY(8px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes sparkle { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.25); } }
.sparkle { animation: sparkle .6s ease 2; }

@media (max-width: 1150px) {
  .game-header { grid-template-columns: 1fr; }
  .top-stats { justify-content:space-between; flex-wrap:wrap; }
  .header-actions { justify-content:flex-end; }
  .game-layout { grid-template-columns:1fr; }
  .side-panel { order:2; display:grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .table-zone { order:1; }
}
@media (max-width: 760px) {
  .app-shell { padding:10px; }
  .game-header { border-radius:22px; }
  .brand-block { align-items:flex-start; }
  .logo-cookie { width:44px; height:44px; border-radius:15px; font-size:1.5rem; }
  .top-stats { gap:6px; }
  .stat { flex:1; min-width:70px; padding:8px 6px; }
  .game-layout { gap: 12px; }
  .side-panel { grid-template-columns:1fr; }
  .table-cloth { min-height: 740px; border-radius:26px; border-width:7px; padding:12px; }
  .stock-pile, .discard-pile { width:66px; height:92px; border-radius:13px; }
  .special-guide { display:none; }
  .tray-area { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap:10px; }
  .tray { min-height: 230px; border-radius:22px; padding:11px 9px; }
  .stack-preview { min-height:155px; }
  .empty-tray { height:140px; }
  .cookie-card { width:72px; height:100px; border-radius:14px; padding:7px; }
  .cookie-card .cookie-emoji { font-size:1.72rem; }
  .cookie-card .value { font-size:1rem; }
  .cookie-card.small { width:58px; height:82px; }
  .hand-area { gap:8px; }
}

/* Beginner teaching layer */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(255,250,243,.72);
  border: 1px solid rgba(124,95,77,.14);
  color: var(--ink);
}
.check-row input { width: 18px; height: 18px; accent-color: var(--cookie); }
.check-row span { font-weight: 900; font-size: .86rem; }

.tutorial-panel {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto 18px;
  padding: 15px 16px;
  border-radius: 24px;
  background: rgba(255,250,243,.94);
  border: 2px solid rgba(255,224,138,.92);
  box-shadow: 0 16px 34px rgba(69, 39, 18, .20);
  color: var(--ink);
}
.tutorial-panel.hidden { display: none; }
.tutorial-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff0c2;
  color: #7a4b00;
  font-size: .74rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tutorial-panel h2 {
  margin: 8px 0 5px;
  font-size: 1.15rem;
  letter-spacing: -.025em;
}
.tutorial-panel p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.42;
}
.tutorial-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.why-box {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff7df;
  border: 1px solid #f8d47b;
  color: #68420a;
  font-weight: 900;
  line-height: 1.35;
}
.why-box.hidden { display: none; }
.cookie-card.playable-card::after {
  content: "Playable";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid rgba(22,101,52,.16);
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .02em;
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}
.cookie-card.playable-card {
  box-shadow: 0 12px 23px rgba(0,0,0,.20), 0 0 0 4px rgba(220,252,231,.85), inset 0 0 0 2px rgba(255,255,255,.75);
}
.cookie-card.guided-card {
  animation: guidedPulse 1.1s ease-in-out infinite;
}
.tray.guided-target {
  animation: guidedTrayPulse 1.1s ease-in-out infinite;
}
.tray.valid-target::after {
  content: "Good tray";
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #166534;
  font-weight: 1000;
  font-size: .72rem;
}
@keyframes guidedPulse {
  0%, 100% { transform: translateY(-6px) scale(1); }
  50% { transform: translateY(-10px) scale(1.04); }
}
@keyframes guidedTrayPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 14px 25px rgba(0,0,0,.10), 0 0 0 0 rgba(255,224,138,.7); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 14px 25px rgba(0,0,0,.10), 0 0 0 8px rgba(255,224,138,.26); }
}
@media (max-width: 760px) {
  .tutorial-panel { border-radius: 20px; padding: 13px; }
  .tutorial-actions { display: grid; grid-template-columns: 1fr; }
  .cookie-card.playable-card::after { font-size: .55rem; bottom: -7px; }
}