/* 🕹 The app's own game styles, copied unchanged from www/css/app.css (lines named below) so the games look the same here */
/* app.css 19, 36-37 */
@keyframes bob { to { transform: translateY(-4px) rotate(-2deg); } }
.big, .big2 { width: 100%; padding: 16px; border: 0; border-radius: 16px; background: var(--orange); color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 4px 0 #c95a2e; }
.big2 { width: auto; flex: 1.4; font-size: 16px; padding: 14px; }
/* app.css 217-229: Precious the bat */
/* 🦇 Precious the bat (js/bat.js): flutters between the clinic's corners; tap = Tina tells her story */
.pipbat { position: absolute; z-index: 30; width: 66px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  transition: left 2.4s cubic-bezier(.45,.05,.4,1), top 2.4s cubic-bezier(.45,.05,.4,1); animation: pipbob 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 4px 6px #0004); }
.pipbat svg { width: 100%; height: 100%; overflow: visible; }
.pipbat.flip svg { transform: scaleX(-1); }
.pipbat .wing { transform-box: fill-box; animation: pipflap .32s ease-in-out infinite alternate; }
.pipbat .wing.l { transform-origin: 100% 60%; } .pipbat .wing.r { transform-origin: 0% 60%; }
@keyframes pipflap { from { transform: rotate(-14deg) scaleY(1); } to { transform: rotate(16deg) scaleY(.82); } }
.pipbat .wing.r { animation-name: pipflapr; }
@keyframes pipflapr { from { transform: rotate(14deg) scaleY(1); } to { transform: rotate(-16deg) scaleY(.82); } }
@keyframes pipbob { from { translate: 0 -4px; } to { translate: 0 5px; } }
.pipbat.boop { animation: pipboop .6s ease-out; }
@keyframes pipboop { 30% { transform: scale(1.3) rotate(-8deg); } 60% { transform: scale(.95) rotate(6deg); } }
/* app.css 673, 675 */
@keyframes dpburst { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1.2) rotate(180deg); opacity: 0; } }
@keyframes dpplus { 0% { transform: translate(-50%, -50%) scale(.3); } 25% { transform: translate(-50%, -50%) scale(1.25); } 100% { transform: translate(-50%, -160%) scale(1); opacity: 0; } }
/* app.css 720-805: the games */
/* 🕹 the arcade games: a full-screen neon cabinet */
.gm { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 30%, #2a1a5a, #0b0820 75%); color: #fff; padding: 12px; padding-top: calc(env(safe-area-inset-top) + 12px); }
.gm-top { display: grid; grid-template-columns: 44px 1fr; gap: 6px; align-items: center; }
.gm-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #ffffff22; color: #fff; font-size: 18px; }
.gm-title { text-align: center; font: 900 24px system-ui, sans-serif; letter-spacing: 2px; color: #ffd84a; text-shadow: 0 0 12px #ffb84a; margin-right: 44px; }
.gm-hud { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.gm-hud span { background: #000a; border: 2px solid #7cf6ff66; border-radius: 12px; padding: 4px 12px; font: 800 11px system-ui, sans-serif; letter-spacing: 2px; color: #7cf6ff; }
.gm-hud b { color: #fff; font-size: 18px; margin-left: 6px; letter-spacing: 0; }
.gm-board { position: relative; flex: 1; display: grid; place-content: center; }
.gm-foot { text-align: center; padding: 10px 0 calc(env(safe-area-inset-bottom) + 10px); font: 700 15px system-ui, sans-serif; color: #e8dcff; display: grid; gap: 10px; justify-items: center; }
.gm-win { font-size: 20px; color: #ffd84a; text-shadow: 0 0 10px #ffb84a; }
.gm-star { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: 28px; animation: dpburst 1.4s ease-out forwards; }
/* 🐾 Pet Pairs: 4×4 flip cards */
.pp { grid-template-columns: repeat(4, min(21vw, 92px)); gap: 10px; }
.pp-card { aspect-ratio: 1; border: 0; padding: 0; background: none; perspective: 600px; }
.pp-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.pp-card.up .pp-in { transform: rotateY(180deg); }
.pp-back, .pp-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: min(10vw, 40px); }
.pp-back { background: linear-gradient(135deg, #ff6fa5, #7b5cff); box-shadow: 0 0 10px #ff6fa588, inset 0 0 0 3px #fff6; }
.pp-face { background: #fff7ec; transform: rotateY(180deg); overflow: hidden; box-shadow: inset 0 0 0 3px #ffd84a; }
.pp-face img { width: 100%; height: 100%; object-fit: cover; }
.pp-card.got .pp-face { box-shadow: inset 0 0 0 4px #5cffb0, 0 0 16px #5cffb0; animation: ppgot .5s; }
@keyframes ppgot { 50% { transform: rotateY(180deg) scale(1.12); } }
/* 🧩 Paw Blocks: 8 × 10 glowing blocks */
.pb { grid-template-columns: repeat(8, min(10.6vw, 46px)); gap: 4px; }
.pb-b { aspect-ratio: 1; border: 0; padding: 0; border-radius: 9px; font-size: min(6vw, 26px); line-height: 1;
  background: radial-gradient(circle at 35% 30%, #fff8, #0000 55%), var(--c); box-shadow: inset 0 -3px 0 #0004, 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.pb-b.empty { background: #ffffff08; box-shadow: none; }
.pb-b.pop { animation: pbpop .26s ease-in forwards; } @keyframes pbpop { to { transform: scale(1.4); opacity: 0; filter: brightness(2); } }
.pb-b.no { animation: pbno .3s; } @keyframes pbno { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pb-pts { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: 900 40px system-ui, sans-serif; color: #ffd84a; text-shadow: 0 0 14px #ffb84a; pointer-events: none; animation: dpplus 1s ease-out forwards; }
/* the small print: one tiny line across the very bottom, with the trainer sitting just above it (the Boss, 2026-10-27) */
.about { font-size: clamp(6px, 1.75vw, 8px); line-height: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px calc(env(safe-area-inset-bottom) + 2px); background: linear-gradient(0deg, #0006, #0000); color: #ffffffcc; }
.coach { bottom: calc(env(safe-area-inset-bottom) + 15px); }

/* 🧩 Paw Blocks' cast: mini Nurse Tina bottom-left (with her bubble), Princess Mindy napping bottom-right */
.gm-cast { position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
.gm-tina { position: absolute; left: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); display: flex; align-items: flex-end; gap: 6px; }
.gm-tina img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 12px #7cf6ff; animation: gmtina .6s cubic-bezier(.2, 1.5, .4, 1) .3s both; }
.gm-cast.talk .gm-tina img { animation: bob .5s ease-in-out infinite alternate; }
@keyframes gmtina { from { transform: scale(0) translateY(40px); } }
.gm-say { max-width: 52vw; background: #fff; color: #3a2440; border-radius: 14px 14px 14px 4px; padding: 7px 10px; font: 700 13px/1.3 system-ui, sans-serif; box-shadow: 0 4px 12px #0006; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; margin-bottom: 30px; }
.gm-cast.talk .gm-say { opacity: 1; transform: none; }
.gm-mindy { position: absolute; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 6px); width: 78px; filter: drop-shadow(0 4px 10px #0008); animation: gmnap 3s ease-in-out infinite alternate; }
@keyframes gmnap { to { transform: scale(1.03) translateY(-1px); } }
/* a glowing border on Play again */
.gm-again { border: 3px solid #ffd84a !important; box-shadow: 0 0 0 3px #ff6fa5, 0 0 18px #ffd84a, 0 4px 0 #b34a00 !important; animation: gmagain 1.4s ease-in-out infinite alternate; }
@keyframes gmagain { to { box-shadow: 0 0 0 3px #7b5cff, 0 0 28px #ff6fa5, 0 4px 0 #b34a00; } }
.gm .gm-foot { position: relative; z-index: 2; padding-bottom: calc(env(safe-area-inset-bottom) + 76px); }

/* 🐾 Pet Pairs flair: glowing card borders + paw prints around the board */
.pp-back { border: 2px solid #ffd84a; box-shadow: 0 0 12px #ff6fa5aa, inset 0 0 0 3px #fff6, inset 0 0 14px #7b5cff88; }
.pp-face { border: 2px solid #ffd84a; }
.pp-card:active .pp-in { transform: scale(.94); }
.gm-paws { position: absolute; inset: -18px; pointer-events: none; z-index: 0; }
.gm-paws i { position: absolute; font-style: normal; font-size: 22px; opacity: .45; filter: drop-shadow(0 0 6px #ff6fa5); animation: gmpaw 2.4s ease-in-out infinite alternate; }
.gm-paws i:nth-child(1) { left: 2%; top: 8%; transform: rotate(-25deg); } .gm-paws i:nth-child(2) { right: 3%; top: 4%; transform: rotate(20deg); animation-delay: .3s; }
.gm-paws i:nth-child(3) { left: 0; top: 46%; transform: rotate(10deg); animation-delay: .6s; } .gm-paws i:nth-child(4) { right: 0; top: 52%; transform: rotate(-15deg); animation-delay: .9s; }
.gm-paws i:nth-child(5) { left: 6%; bottom: 4%; transform: rotate(30deg); animation-delay: 1.2s; } .gm-paws i:nth-child(6) { right: 5%; bottom: 2%; transform: rotate(-30deg); animation-delay: 1.5s; }
.gm-paws i:nth-child(7) { left: 44%; top: -2%; animation-delay: 1.8s; } .gm-paws i:nth-child(8) { left: 48%; bottom: -3%; transform: rotate(180deg); animation-delay: 2.1s; }
@keyframes gmpaw { to { opacity: .8; transform: scale(1.15); } }
.pp .pp-card { position: relative; z-index: 1; }
/* the host's bubble sits beside their face, under the game's buttons (it covered Play again) */
.gm-say { margin-bottom: 4px; max-width: 62vw; }
.gm .gm-foot { padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }

/* 🃏 Paw Solitaire: 7 piles that fit any phone, paw-print backs, team faces on J/Q/K */
.sol { display: block; width: 100%; max-width: 460px; margin: 0 auto; --cw: min(12.6vw, 60px); --ch: calc(var(--cw) * 1.4); }
.sol-row { display: grid; grid-template-columns: repeat(7, var(--cw)); justify-content: space-between; margin: 8px 0 12px; position: relative; z-index: 1; }
.sol-tab { display: grid; grid-template-columns: repeat(7, var(--cw)); justify-content: space-between; position: relative; z-index: 1; }
.sol-pile { position: relative; min-height: var(--ch); border-radius: 7px; background: #ffffff0d; }
.sol-pile .sc { position: absolute; left: 0; }
.sc-spot { position: relative; width: var(--cw); height: var(--ch); border-radius: 7px; background: #ffffff10; border: 1px dashed #ffffff33; }
.sc-spot .sc { position: absolute; inset: 0; }
.sc-ghost { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); color: #ffffff33; }
.sc { width: var(--cw); height: var(--ch); border-radius: 7px; border: 0; padding: 0; overflow: hidden; display: block; box-shadow: 0 2px 4px #0007; }
.sc.slot { display: grid; place-items: center; background: #ffffff14; border: 1px dashed #ffffff44; color: #fff; font-size: 22px; }
.sc.down { background: linear-gradient(135deg, #ff6fa5, #7b5cff); border: 2px solid #ffd84a; box-shadow: 0 2px 4px #0007, inset 0 0 0 2px #fff4; }
.sc-paw { display: grid; place-items: center; height: 100%; font-size: calc(var(--cw) * .42); }
.sc.up { background: #fffaf2; border: 1.5px solid #e8c766; position: relative; }
.sc.red { color: #d6264f; } .sc.blk { color: #1c1c2e; }
.sc-c { position: absolute; left: 3px; top: 2px; font: 900 calc(var(--cw) * .27)/1 system-ui, sans-serif; text-align: left; z-index: 1; }
.sc-c i { font-style: normal; display: block; font-size: .9em; }
.sc-big { position: absolute; right: 4px; bottom: 2px; font-size: calc(var(--cw) * .5); line-height: 1; }
.sc img { position: absolute; right: 0; bottom: 0; width: 72%; height: 64%; object-fit: cover; border-top-left-radius: 8px; }
.sc.no { animation: pbno .3s; }