/* ==========================================================
   games.css — DOM-based mini-games (Memory, Copy Dad), Balloon buttons, intro demos
   ========================================================== */

/* ---------------- MEMORY MADNESS ---------------- */
.mm { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 6px 12px 12px; --cs: clamp(52px, min(13vw, 17vh), 100px); }
.mm-board { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 14px 12px; background: #fffaf0; }
.mm-title { font-size: clamp(1.2rem, 4vmin, 2rem); }
.mm-cards { display: flex; gap: clamp(6px, 1.4vmin, 14px); justify-content: center; min-height: var(--cs); }
.mm-cards.pre { visibility: hidden; }
.mm-card { position: relative; width: var(--cs); height: var(--cs); transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.mm-card .face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 4px solid var(--ink); border-radius: 18px; font-size: calc(var(--cs) * 0.56); box-shadow: 0 4px 0 var(--ink-2); line-height: 1; }
.mm-card .front { background: #fff; }
.mm-card .back { background: linear-gradient(135deg, var(--grape), var(--kid)); color: #fff; transform: rotateY(180deg); font-family: var(--f-display); font-weight: 800; }
.mm-card.down { transform: rotateY(180deg); }
.mm-card.gone .front { background: transparent; border-style: dashed; border-color: #b59be0; box-shadow: none; font-size: 0; }
.mm-card.gone .front::after { content: "❓"; font-size: calc(var(--cs) * 0.5); animation: wobble 0.6s infinite; }
.mm-cards.in .mm-card { animation: cardIn 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; animation-delay: var(--d); }
@keyframes cardIn { from { transform: translateY(-40px) scale(0.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mm-cards.count { position: relative; display: block; width: min(92%, 560px); height: clamp(100px, 24vh, 200px); margin: 0 auto; }
.mm-item { position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); font-size: clamp(1.7rem, 6.4vmin, 3.2rem); line-height: 1; transition: transform 0.4s, opacity 0.4s; }
.mm-cards.count.hide .mm-item { transform: translate(-50%, -50%) scale(0); opacity: 0; }
.mm-cards.count.in .mm-item { animation: itemIn 0.45s cubic-bezier(0.3, 1.8, 0.5, 1) backwards; animation-delay: var(--d); }
@keyframes itemIn { from { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; } to { transform: translate(-50%, -50%) rotate(var(--r)); opacity: 1; } }
.mm-bar { width: min(70%, 380px); height: 14px; border: 3px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; }
.mm-bar i { display: block; height: 100%; background: var(--mint); transform-origin: left center; }
.mm-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
.mm-panel { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px 8px; border: 4px solid var(--ink); border-radius: 24px; box-shadow: 0 6px 0 var(--ink-2); min-height: 0; overflow: hidden; }
.mm-panel.dad { background: #dbe9ff; } .mm-panel.kid { background: #ffe0ee; }
.mm-who { font-size: clamp(0.8rem, 2.3vmin, 1.1rem); }
.mm-q { display: flex; align-items: center; gap: 8px; text-align: left; }
.mm-qe { font-size: clamp(1.8rem, 6vmin, 3rem); line-height: 1; }
.mm-qt { font-family: var(--f-display); font-weight: 800; font-size: clamp(0.95rem, 2.8vmin, 1.4rem); line-height: 1.1; }
.mm-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: center; flex: 1; }
.mm-opt { position: relative; min-width: clamp(64px, 13vmin, 120px); min-height: clamp(58px, 13vmin, 112px); padding: 2px 12px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1rem, 3.2vmin, 1.5rem); line-height: 1.05; border: 4px solid var(--ink); border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 5px 0 var(--ink-2); transition: transform 0.12s cubic-bezier(0.3, 1.8, 0.5, 1), background 0.15s, opacity 0.2s; animation: popIn 0.4s both; }
.mm-opt.e { font-size: clamp(2.2rem, 10vmin, 4.4rem); }
@media (hover: hover) { .mm-panel:not(.locked) .mm-opt:hover { transform: translateY(-3px) scale(1.06); } }
.mm-opt:active { transform: translateY(4px) scale(0.96); box-shadow: 0 1px 0 var(--ink-2); }
.mm-opt.picked { background: var(--sun); transform: translateY(3px) scale(0.97); }
.mm-panel.locked .mm-opt { pointer-events: none; }
.mm-panel.locked .mm-opt:not(.right):not(.wrong):not(.picked) { opacity: 0.5; }
.mm-opt.right { background: var(--mint); opacity: 1 !important; animation: rightPop 0.5s both; }
.mm-opt.right::after { content: "✔"; position: absolute; right: -8px; top: -12px; font-size: 1.4rem; background: #fff; border: 3px solid var(--ink); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; color: var(--mint-d); }
.mm-opt.wrong { background: #ffb3a8; opacity: 1 !important; animation: shakeX 0.45s both; }
.mm-opt.wrong::after { content: "✖"; position: absolute; right: -8px; top: -12px; font-size: 1.2rem; background: #fff; border: 3px solid var(--ink); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; color: var(--tomato-d); }
@keyframes rightPop { 0% { transform: scale(1); } 50% { transform: scale(1.18) rotate(-3deg); } 100% { transform: scale(1.05); } }
.mm-st { min-height: 1.3em; font-family: var(--f-display); font-weight: 800; font-size: clamp(0.8rem, 2.4vmin, 1.1rem); text-align: center; line-height: 1.1; }
.mm-key { position: absolute; left: -7px; top: -10px; min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; background: #fff; border: 3px solid var(--ink); border-radius: 8px; font-style: normal; font-family: var(--f-display); font-weight: 800; font-size: 0.7rem; color: var(--ink); text-shadow: none; -webkit-text-stroke: 0; }
@media (hover: none) { .mm-key { display: none; } }

/* ---------------- COPY DAD ---------------- */
.cd { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 10px; }
.cd-round { align-self: center; font-size: clamp(1rem, 3vmin, 1.5rem); }
.cd-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(0, 1.6fr) 1fr; align-items: end; gap: 8px; }
.cd-side { display: flex; justify-content: center; align-items: flex-end; min-width: 0; }
.cd-card { align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 8px 12px 10px; }
.cd-card.pop { animation: popIn 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.cd-emoji { font-size: clamp(2.8rem, 12vmin, 6.2rem); line-height: 1; }
.cd.doing .cd-emoji[data-pose="robot"] { animation: emRobot 0.8s steps(2) infinite; }
.cd.doing .cd-emoji[data-pose="chicken"] { animation: emChicken 0.35s ease-in-out infinite alternate; }
.cd.doing .cd-emoji[data-pose="freeze"] { animation: emFreeze 0.09s linear infinite alternate; }
.cd.doing .cd-emoji[data-pose="surprise"] { animation: emSurprise 0.9s ease-out infinite; }
.cd.doing .cd-emoji[data-pose="million"] { animation: bounceY 0.4s ease-in-out infinite; }
.cd.doing .cd-emoji[data-pose="wiggle"] { animation: wobble 0.35s ease-in-out infinite; }
@keyframes emRobot { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg) translateY(-4px); } }
@keyframes emChicken { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-14px) rotate(6deg); } }
@keyframes emFreeze { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes emSurprise { 0% { transform: scale(0.6); } 30% { transform: scale(1.3); } 100% { transform: scale(1); } }
.cd-text { font-size: clamp(1rem, 3.6vmin, 2rem); line-height: 1.1; }
.cd-timer { position: relative; width: clamp(44px, 8.5vmin, 66px); aspect-ratio: 1; }
.cd-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cd-timer .bg { fill: none; stroke: #e5dcc6; stroke-width: 10; }
.cd-timer .fg { fill: none; stroke: var(--tomato); stroke-width: 10; stroke-linecap: round; }
.cd-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: clamp(1.1rem, 3.4vmin, 1.6rem); }
.cd-judges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cd-judge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px 10px; border: 4px solid var(--ink); border-radius: 24px; box-shadow: 0 6px 0 var(--ink-2); opacity: 0.55; transition: opacity 0.25s; }
.cd-judge.dad { background: #dbe9ff; } .cd-judge.kid { background: #ffe0ee; }
.cd-judge.ready { opacity: 1; animation: popIn 0.4s both; }
.cd-judge:not(.ready) .cd-rate { pointer-events: none; filter: grayscale(0.6); }
.cd-jl { font-size: clamp(0.85rem, 2.6vmin, 1.2rem); }
.cd-jb { display: flex; gap: clamp(6px, 1.5vmin, 12px); width: 100%; }
.cd-rate { flex: 1; min-width: 0; min-height: clamp(54px, 11vh, 84px); flex-direction: column; gap: 0; padding: 2px 6px; font-size: clamp(0.72rem, 2.2vmin, 1.05rem); }
.cd-rate .re { font-size: clamp(1.5rem, 5.4vmin, 2.6rem); line-height: 1; -webkit-text-stroke: 0; }
.cd-rate .rl { line-height: 1; -webkit-text-stroke: 0; }
.cd-rate.r-nope { --b: #c9bdf5; --bd: #8e7fd0; --fg: var(--ink); }
.cd-rate.r-good { --b: var(--sun); --bd: var(--sun-d); --fg: var(--ink); }
.cd-rate.r-perfect { --b: var(--mint); --bd: var(--mint-d); --fg: var(--ink); }
.cd-rate.picked { outline: 5px solid #fff; outline-offset: 2px; transform: translateY(5px); }
.cd-judge.locked .cd-rate:not(.picked) { opacity: 0.5; }
@media (max-aspect-ratio: 1/1) {
  .cd-stage { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
  .cd-card { grid-column: 1 / -1; grid-row: 1; }
  .cd-side { grid-row: 2; }
}

/* ---------------- BALLOON BATTLE ---------------- */
.bb-btns { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.bb-slot { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.bb-keep { pointer-events: auto; min-width: min(78%, 250px); }
.bb-keep.swapnote { animation: wobble 0.3s infinite; }
.frog-proj { position: fixed; z-index: 50; pointer-events: none; }

/* ---------------- intro demos (tiny looping animations) ---------------- */
.demo { position: relative; width: 100%; height: 100%; min-height: inherit; display: flex; align-items: center; justify-content: center; font-size: clamp(2rem, 9vmin, 4rem); }
.demo > * { line-height: 1; }
/* chicken */
.demo-chicken { flex-direction: column; gap: 6px; }
.dc-lane { position: relative; width: min(60%, 260px); height: clamp(90px, 22vh, 170px); }
.dc-chick { position: absolute; left: 50%; top: 0; margin-left: -0.5em; animation: dcFall 2.2s ease-in infinite; }
.dc-basket { position: absolute; left: 50%; bottom: 0; margin-left: -0.5em; animation: dcSlide 2.2s ease-in-out infinite; }
.dc-plus { position: absolute; left: 50%; bottom: 52%; font-size: 0.7em; opacity: 0; animation: dcPlus 2.2s infinite; }
.dc-legend { display: flex; gap: 14px; font-family: var(--f-display); font-weight: 800; font-size: 0.34em; color: var(--ink); }
@keyframes dcFall { 0% { transform: translate(-90px, -20%); opacity: 1; } 55% { transform: translate(0, 85%); opacity: 1; } 56%, 100% { transform: translate(0, 85%) scale(0); opacity: 0; } }
@keyframes dcSlide { 0%, 20% { transform: translateX(60px); } 55%, 100% { transform: translateX(0); } }
@keyframes dcPlus { 0%, 54% { opacity: 0; transform: translateY(0); } 62% { opacity: 1; transform: translateY(-10px) scale(1.2); } 100% { opacity: 0; transform: translateY(-50px); } }
/* memory */
.dm { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; background: #fff; border: 4px solid var(--ink); border-radius: 18px; margin: 0 6px; animation: dmFlip 3.2s infinite; }
.dm.b { animation-delay: 0.15s; } .dm.c { animation-delay: 0.3s; }
.dm-eye { position: absolute; left: 6%; top: 10%; font-size: 0.8em; animation: bounceY 1s infinite; }
.dm-q { position: absolute; right: 8%; bottom: 8%; font-size: 0.9em; animation: wobble 0.7s infinite; opacity: 0; animation: dmQ 3.2s infinite; }
@keyframes dmFlip { 0%, 45% { transform: rotateY(0); } 55%, 85% { transform: rotateY(180deg); background: var(--grape); color: transparent; } 100% { transform: rotateY(0); } }
@keyframes dmQ { 0%, 50% { opacity: 0; transform: scale(0.3); } 60%, 85% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; } }
/* frog */
.demo-frog { gap: 4px; }
.df { position: relative; display: inline-block; margin: 0 8px; animation: dfPop 2.4s infinite; }
.df.a { animation-delay: 0.5s; } .df.s { animation-delay: 1.1s; }
.df i { position: absolute; left: 50%; top: -0.5em; font-size: 0.5em; font-style: normal; transform: translateX(-50%); }
.df.h { position: absolute; right: 22%; bottom: 8%; animation: dfTap 1.2s infinite; font-size: 0.9em; }
@keyframes dfPop { 0%, 8% { transform: translateY(40px) scale(0.5); opacity: 0; } 20%, 60% { transform: none; opacity: 1; } 75%, 100% { transform: translateY(40px) scale(0.5); opacity: 0; } }
@keyframes dfTap { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-50px, -30px); } 55% { transform: translate(-50px, -22px) scale(0.85); } }
/* copy dad */
.demo-copy { gap: 6px; flex-wrap: wrap; }
.dk { display: inline-block; animation: dkMove 1.4s ease-in-out infinite; }
.dk.b { animation-delay: 0.3s; } .dk.c { animation-delay: 0.6s; }
.dk-j { width: 100%; display: flex; justify-content: center; gap: 10px; font-size: 0.6em; }
.dk-j span { animation: bounceY 1s infinite; } .dk-j span:nth-child(2) { animation-delay: 0.15s; } .dk-j span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dkMove { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.2) translateY(-8px); } }
/* balloon */
.db { display: inline-block; margin: 0 6px; }
.db.b1 { font-size: 1.2em; animation: dbGrow 2.6s ease-in infinite; transform-origin: 50% 90%; }
.db.arrow { animation: dfTap 0.5s infinite; font-size: 0.8em; }
.db.keep { font-family: var(--f-display); font-weight: 800; font-size: 0.4em; background: var(--mint); border: 4px solid var(--ink); border-radius: 99px; padding: 0.3em 0.8em; animation: dbKeep 2.6s infinite; }
.db.pop { position: absolute; font-size: 0.8em; opacity: 0; animation: dbPop 2.6s infinite; }
@keyframes dbGrow { 0% { transform: scale(0.5); } 70% { transform: scale(1.5); } 71%, 100% { transform: scale(0); } }
@keyframes dbKeep { 0%, 55% { transform: scale(1); } 62% { transform: scale(1.25); } 70%, 100% { transform: scale(1); } }
@keyframes dbPop { 0%, 70% { opacity: 0; transform: scale(0.2); } 74% { opacity: 1; transform: scale(1.3) rotate(-6deg); } 95% { opacity: 1; } 100% { opacity: 0; } }
.sticker.tomato { color: #ff8a7d; }