/* Patch's Puzzle Pets — game styles (loads after shared/gamekit.css) */

html { overflow: hidden; }
body { background: #FFF8EC; }

#stage { position: fixed; inset: 0; overflow: hidden; }

section { position: absolute; inset: 0; overflow: hidden; }

/* ══ Patch the Panda rig ═══════════════════════════════════════════════ */

.patch { pointer-events: none; }
.patch-svg { width: 100%; height: 100%; display: block; }

.patch .p-armL, .patch .p-armR, .patch .p-head, .patch .p-all {
    transform-box: fill-box;
    transition: transform 0.25s ease;
}
.patch .p-armL, .patch .p-armR { transform-origin: 50% 14%; }
.patch .p-head { transform-origin: 50% 78%; }
.patch .p-all { transform-origin: 50% 100%; }

.pp-idle .p-all { animation: patch-bob 2.8s ease-in-out infinite; }
.patch .p-lids { animation: patch-blink 4.2s linear infinite; }

/* idle fidget — every few seconds an ear gives a little twitch */
.patch .p-earL, .patch .p-earR, .patch .p-eyes { transform-box: fill-box; }
.patch .p-earL { transform-origin: 60% 82%; }
.patch .p-earR { transform-origin: 40% 82%; }
.patch .p-eyes { transform-origin: 50% 50%; }
.pp-idle .p-earL { animation: patch-earL 5.5s ease-in-out infinite; }
.pp-idle .p-earR { animation: patch-earR 6.7s ease-in-out infinite; }
@keyframes patch-earL {
    0%, 80%, 100% { transform: rotate(0deg); }
    84% { transform: rotate(-11deg); }
    88% { transform: rotate(7deg); }
    92% { transform: rotate(-4deg); }
}
@keyframes patch-earR {
    0%, 46%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
    54% { transform: rotate(-6deg); }
    58% { transform: rotate(3deg); }
}

@keyframes patch-bob {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    50%      { transform: translateY(-6px) scale(0.99, 1.015); }
}
@keyframes patch-blink {
    0%, 91%, 100% { opacity: 0; }
    93%, 97%      { opacity: 1; }
}

.pp-wave .p-armR { animation: patch-wave 2.2s ease-in-out infinite; }
@keyframes patch-wave {
    0%, 100% { transform: rotate(0deg); }
    12%      { transform: rotate(-118deg); }
    24%      { transform: rotate(-96deg); }
    36%      { transform: rotate(-122deg); }
    52%      { transform: rotate(0deg); }
}

.pp-clap .p-armL { animation: patch-clapL 0.32s ease-in-out 4; }
.pp-clap .p-armR { animation: patch-clapR 0.32s ease-in-out 4; }
.pp-clap .p-all  { animation: patch-hop 0.64s ease-in-out 2; }
.pp-clap .p-eyes { animation: patch-eyes-happy 0.34s ease-in-out 3; } /* happy squint on correct */
@keyframes patch-eyes-happy { 0%, 100% { transform: scaleY(1); } 55% { transform: scaleY(0.45); } }
@keyframes patch-clapL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(74deg); } }
@keyframes patch-clapR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-74deg); } }
@keyframes patch-hop {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    30%      { transform: translateY(-14px) scale(0.98, 1.04); }
    60%      { transform: translateY(0) scale(1.04, 0.94); }
}

.pp-point .p-armR { transform: rotate(-64deg); }
.pp-point .p-head { transform: rotate(7deg); }

.pp-dance .p-all  { animation: patch-dance 0.62s ease-in-out infinite; }
.pp-dance .p-armL { animation: patch-clapL 0.62s ease-in-out infinite; }
.pp-dance .p-armR { animation: patch-clapR 0.62s ease-in-out infinite; }
@keyframes patch-dance {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-10px) rotate(4deg); }
}

/* ══ START screen ══════════════════════════════════════════════════════ */

#screen-start { background: linear-gradient(#FFF6E6, #FFDFBB); }

#den-wrap { position: absolute; inset: 0; }
#den-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

#start-inner {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(4px, 1.2vh, 12px);
    padding: 12px;
}

#game-title {
    font-size: clamp(2rem, 6.5vmin, 3.6rem);
    text-align: center;
    line-height: 1.05;
    background: linear-gradient(90deg, #E63946, #F77F00, #FCBF49, #7CB518, #00B4D8, #B565D8);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.85)) drop-shadow(0 5px 10px rgba(90, 60, 130, 0.22));
}

#tagline {
    font-size: clamp(0.95rem, 2.4vmin, 1.2rem);
    color: #7A6690;
    background: rgba(255, 248, 236, 0.75);
    padding: 4px 16px; border-radius: 20px;
}

#patch-hello-wrap { position: relative; margin-top: -4px; }
#patch-start { width: clamp(150px, 25vmin, 230px); height: clamp(172px, 28.7vmin, 264px); }

/* 2-3s hello: Patch hops in from the side, waves, and a greeting pops up */
.pp-hello { animation: patch-hello-in 1.25s cubic-bezier(0.32, 1.25, 0.5, 1) both; }
@keyframes patch-hello-in {
    0%   { transform: translateX(-58vw) translateY(0);   opacity: 0; }
    12%  { opacity: 1; }
    34%  { transform: translateX(-34vw) translateY(-30px); }
    50%  { transform: translateX(-22vw) translateY(0); }
    68%  { transform: translateX(-10vw) translateY(-20px); }
    84%  { transform: translateX(0) translateY(0); }
    92%  { transform: translateX(0) translateY(-7px); }
    100% { transform: translateX(0) translateY(0); }
}

#hello-bubble {
    position: absolute;
    left: calc(100% + 8px);
    top: 4%;
    width: max-content;
    max-width: min(44vw, 232px);
    padding: 11px 16px;
    background: #FFFFFF;
    color: #4A3B5C;
    font-size: clamp(0.82rem, 2vmin, 1.02rem);
    line-height: 1.28;
    text-align: left;
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 8px 20px rgba(90, 60, 30, 0.28);
    opacity: 0;
    transform-origin: left bottom;
    animation: hello-bubble 5s ease 0.62s both;
    z-index: 3;
}
#hello-bubble b { display: block; color: var(--gk-orange); font-size: 1.08em; margin-bottom: 2px; }
#hello-bubble::after { /* little tail pointing down-left toward Patch */
    content: ''; position: absolute; left: -8px; bottom: 12px;
    border: 8px solid transparent; border-right-color: #FFFFFF; border-left: 0;
    filter: drop-shadow(-2px 2px 1px rgba(90, 60, 30, 0.12));
}
@keyframes hello-bubble {
    0%   { opacity: 0; transform: translateY(8px) scale(0.55); }
    9%   { opacity: 1; transform: translateY(0) scale(1.06); }
    14%  { transform: scale(0.98); }
    18%  { transform: scale(1); }
    86%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.92); }
}

#btn-start { font-size: clamp(1.4rem, 4.5vmin, 1.9rem); padding: 16px 52px; }

#start-shelf { margin-top: clamp(6px, 2vh, 18px); position: relative; }
#start-shelf-row { display: flex; gap: 10px; padding: 0 8px 6px; position: relative; z-index: 1; }
#start-shelf-plank {
    height: 14px; margin: -4px
 -6px 0;
    border-radius: 8px;
    background: linear-gradient(#C89B69, #97673B);
    box-shadow: 0 4px 8px rgba(90, 60, 30, 0.3);
}
.mini-sticker {
    width: clamp(42px, 6.5vmin, 56px); height: clamp(42px, 6.5vmin, 56px);
    border-radius: 50%; overflow: hidden; position: relative;
    background: #FFF8EC;
    border: 3px solid #FFFFFF;
    box-shadow: 0 3px 8px rgba(90, 60, 30, 0.25);
}
.mini-sticker svg { width: 100%; height: 100%; display: block; }
.mini-sticker.locked svg { filter: grayscale(1) brightness(0.72); opacity: 0.55; }
.mini-sticker .mini-star {
    position: absolute; right: -3px; bottom: -4px; font-size: 0.95rem;
    filter: drop-shadow(0 1px 1px rgba(90, 60, 30, 0.4));
}

/* ══ PICKER / Star Den ═════════════════════════════════════════════════ */

#screen-picker {
    background: linear-gradient(#FFF3DD, #F8D8AC);
    display: flex; flex-direction: column; align-items: center;
    padding: clamp(8px, 2vh, 20px) 12px;
    gap: clamp(6px, 1.4vh, 14px);
}
#picker-bg { position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 12% 16%, rgba(252, 191, 73, 0.25), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(255, 123, 172, 0.18), transparent 30%);
}
#picker-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#picker-bg .sway { transform-box: fill-box; transform-origin: 50% 0%; animation: star-sway 3.8s ease-in-out infinite; }
@keyframes star-sway { 0%, 100% { transform: rotate(-4.5deg); } 50% { transform: rotate(4.5deg); } }
#picker-bg .tw { animation: gk-twinkle 2.8s ease-in-out infinite; }
#picker-title {
    font-size: clamp(1.7rem, 5vmin, 2.6rem);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 40px; padding: 6px 30px;
    box-shadow: 0 4px 14px rgba(90, 60, 30, 0.15);
    z-index: 2;
}
#shelves { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px); z-index: 2; width: min(94vw, 720px); flex: 1; justify-content: space-evenly; min-height: 0; }

.shelf {
    position: relative;
    border-radius: 22px;
    padding: 10px 16px 16px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: 0 8px 20px rgba(90, 60, 30, 0.18), inset 0 -8px 0 rgba(90, 60, 30, 0.14);
}
.shelf-0 { background: linear-gradient(120deg, #D9EFAE, #AEDD6E); }
.shelf-1 { background: linear-gradient(120deg, #B3D98A, #7FB350); }
.shelf-2 { background: linear-gradient(120deg, #8E7BC0, #5C4B8C); }

.shelf-label {
    display: flex; flex-direction: column; align-items: center; width: clamp(78px, 13vw, 120px);
    color: #4A3B5C; font-weight: bold; font-size: clamp(0.72rem, 1.8vmin, 0.95rem); text-align: center;
}
.shelf-2 .shelf-label { color: #FFF3DD; }
.shelf-label .shelf-emoji { font-size: clamp(1.6rem, 4.5vmin, 2.4rem); }

.shelf-cards { display: flex; gap: clamp(10px, 3vw, 26px); flex: 1; justify-content: center; }

.pet-card {
    width: clamp(120px, 16vmin, 150px); height: clamp(120px, 16vmin, 150px);
    border-radius: 50%;
    border: 5px solid #FFFFFF;
    padding: 0; overflow: visible;
    position: relative;
    cursor: pointer;
    background: #FFF8EC;
    box-shadow: 0 6px 16px rgba(90, 60, 30, 0.3);
    transition: transform 0.18s ease;
}
.pet-card:active { transform: scale(0.94); }
.pet-card .card-port { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.pet-card svg { width: 100%; height: 100%; display: block; }
.pet-card .card-name {
    position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
    background: #FFFFFF; color: #4A3B5C; font-weight: bold;
    font-size: clamp(0.7rem, 1.7vmin, 0.9rem);
    padding: 2px 12px; border-radius: 12px; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(90, 60, 30, 0.25);
}
.pet-card .card-star {
    position: absolute; top: -8px; right: -4px; font-size: clamp(1.3rem, 3.4vmin, 1.8rem);
    filter: drop-shadow(0 2px 2px rgba(90, 60, 30, 0.4));
    animation: gk-star-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
.pet-card.next { animation: card-bounce 1.6s ease-in-out infinite; box-shadow: 0 6px 22px rgba(252, 191, 73, 0.75), 0 0 0 5px rgba(255, 215, 0, 0.45); }
@keyframes card-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

.shelf-lock {
    position: absolute; inset: -4px; z-index: 3;
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: linear-gradient(rgba(236, 240, 255, 0.88), rgba(214, 224, 248, 0.92));
    color: #6B7FA3; font-weight: bold; font-size: clamp(0.85rem, 2.2vmin, 1.05rem);
    backdrop-filter: blur(2px);
}
.shelf-lock .lock-moon { font-size: clamp(1.8rem, 5vmin, 2.6rem); animation: moon-doze 3.4s ease-in-out infinite; }
@keyframes moon-doze { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
.shelf.shimmer { animation: shelf-shimmer 0.55s ease; }
@keyframes shelf-shimmer {
    0%, 100% { filter: brightness(1); transform: translateX(0); }
    25% { filter: brightness(1.15); transform: translateX(-4px); }
    75% { filter: brightness(1.15); transform: translateX(4px); }
}

#patch-picker {
    position: absolute; right: clamp(14px, 2vw, 30px); bottom: 10px; z-index: 4;
    width: clamp(80px, 11vmin, 120px); height: clamp(92px, 12.7vmin, 138px);
}

/* ══ PLAY screen ═══════════════════════════════════════════════════════ */

#screen-play { display: flex; flex-direction: column; }
#screen-play.hab-0 { background: linear-gradient(#AEDCF5 0%, #DFF3FF 58%, #A2D149 59%, #7CB518 100%); }
#screen-play.hab-1 { background: linear-gradient(#EAF5D0 0%, #C8E29E 55%, #79A93B 56%, #4E7A35 100%); }
#screen-play.hab-2 { background: linear-gradient(#8A5BB8 0%, #5C4B8C 52%, #2E6E96 53%, #123F5E 100%); }

#play-bg { position: absolute; inset: 0; pointer-events: none; }
#play-bg .bg-far, #play-bg .bg-mid { position: absolute; left: 0; right: 0; }
#play-bg .bg-far { top: 0; height: 62%; }
#play-bg .bg-far svg { width: 100%; height: 100%; }
#play-bg .bg-mid { bottom: 0; height: 30%; opacity: 0.95; }
#play-bg .bg-mid svg { width: 100%; height: 100%; }
.drift-a { animation: drift 44s linear infinite; }
.drift-b { animation: drift 60s linear infinite reverse; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(9%); } }

.bg-nearL, .bg-nearR {
    position: absolute; bottom: -6px; width: clamp(110px, 15vw, 200px); height: clamp(130px, 18vw, 240px);
    pointer-events: none; z-index: 6; opacity: 0.96;
}
.bg-nearL { left: -8px; }
.bg-nearR { right: -8px; }
.bg-nearL svg, .bg-nearR svg { width: 100%; height: 100%; }

#play-main {
    flex: 1; min-height: 0; position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 14px 8px 0;
}
#patch-zone { width: clamp(120px, 15vw, 190px); align-self: flex-end; display: flex; justify-content: center; }
#patch-play { width: clamp(104px, 13vw, 168px); height: clamp(120px, 15vw, 193px); }

#board-zone {
    flex: 1; min-width: 0; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
}

#board-frame {
    position: relative;
    padding: clamp(10px, 1.8vmin, 18px);
    border-radius: 26px;
    background:
        repeating-linear-gradient(100deg, rgba(255, 236, 200, 0.09) 0 3px, transparent 3px 14px),
        linear-gradient(160deg, #C0906033, #00000014),
        linear-gradient(150deg, #B98A5C, #96683F 55%, #86592F);
    box-shadow: 0 14px 34px rgba(70, 45, 20, 0.4), inset 0 2px 3px rgba(255, 240, 210, 0.5);
}
#board-frame::before {
    content: ''; position: absolute; inset: 6px;
    border: 3px dashed rgba(255, 244, 220, 0.55);
    border-radius: 20px;
    pointer-events: none;
}

#board {
    display: grid;
    gap: 4px;
    width: var(--bs, 420px); height: var(--bs, 420px);
    background: #EBD9B8;
    border-radius: 12px;
    padding: 5px;
    box-shadow: inset 0 4px 12px rgba(90, 60, 30, 0.4);
}

.slot {
    position: relative;
    border: 2.5px dashed rgba(150, 110, 70, 0.55);
    border-radius: 10px;
    background: #FBF0DA;
    padding: 0; cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}
.slot .ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.14; filter: saturate(0.6); pointer-events: none; }
.slot .placed { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.slot.filled { border-color: transparent; background: transparent; cursor: default; }

.slot::after {
    content: ''; position: absolute; inset: 0; border-radius: 8px;
    pointer-events: none; opacity: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, rgba(255, 215, 0, 0.12) 55%, transparent 75%);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.8), 0 0 22px 6px rgba(255, 215, 0, 0.65);
}
.slot.glow::after { animation: slot-glow 1.15s ease-in-out infinite; }
@keyframes slot-glow {
    0%, 100% { opacity: 0.5; transform: scale(0.99); }
    50%      { opacity: 1; transform: scale(1.015); }
}
.slot.shimmer::after { animation: slot-shimmer 0.5s ease; }
@keyframes slot-shimmer { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.slot.flash { border: none; }
.slot.flash::after { animation: seam-flash 0.55s ease forwards; }
@keyframes seam-flash {
    0%   { opacity: 1; box-shadow: 0 0 0 4px #FFD700, 0 0 26px 10px rgba(255, 215, 0, 0.9); }
    100% { opacity: 0; box-shadow: 0 0 0 4px #FFD700, 0 0 30px 14px rgba(255, 215, 0, 0); }
}
.slot.ripple::before {
    content: ''; position: absolute; inset: 12%; border-radius: 50%;
    border: 4px solid rgba(255, 215, 0, 0.9); pointer-events: none;
    animation: snap-ripple 0.45s ease-out forwards;
}
@keyframes snap-ripple {
    0%   { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
}

#pips { display: flex; gap: 7px; padding: 2px 12px 6px; }
.pip { font-size: clamp(0.9rem, 2vmin, 1.15rem); filter: grayscale(1) opacity(0.35); transition: filter 0.3s, transform 0.3s; }
.pip.on { filter: none; animation: pip-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes pip-pop { from { transform: scale(0.2); } to { transform: scale(1); } }

/* ── tray ── */

#tray-zone { position: relative; z-index: 5; padding: 0 clamp(8px, 4vw, 48px); }
#tray-shelf {
    position: relative;
    border-radius: 20px 20px 0 0;
    padding: clamp(8px, 1.4vh, 14px) clamp(10px, 2vw, 22px) clamp(10px, 1.8vh, 18px);
    background:
        repeating-linear-gradient(92deg, rgba(70, 40, 10, 0.07) 0 2px, transparent 2px 26px),
        linear-gradient(#C89B69, #A2743F 70%, #8A5D37);
    box-shadow: 0 -6px 20px rgba(70, 45, 20, 0.28), inset 0 3px 2px rgba(255, 240, 210, 0.55);
}
#tray-shelf::before, #tray-shelf::after {
    content: ''; position: absolute; top: -7px; width: 34px; height: 13px; border-radius: 50% 50% 0 0;
    background: radial-gradient(ellipse at 30% 20%, #8FBF44, #57862B);
}
#tray-shelf::before { left: 8%; }
#tray-shelf::after { right: 11%; width: 26px; height: 10px; }

#tray {
    display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
    gap: clamp(8px, 1.4vw, 14px);
    min-height: calc(var(--ph, 110px) * 1px + 10px);
}

.piece {
    width: calc(var(--pw, 110) * 1px);
    height: calc(var(--ph, 110) * 1px);
    padding: 0; position: relative;
    border: 4px solid #FFFDF5;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #FFF8EC;
    box-shadow: 0 5px 10px rgba(70, 45, 20, 0.35), inset 0 0 0 1px rgba(90, 60, 30, 0.12);
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.2s;
}
.piece svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.piece { touch-action: none; }
.piece:active:not(.sel):not(.gone) { transform: scale(0.9); } /* squishy tap feel */
.piece.sel {
    transform: translateY(-12px) scale(1.08);
    box-shadow: 0 0 0 4px #FFD700, 0 0 20px 4px rgba(255, 215, 0, 0.7), 0 12px 18px rgba(70, 45, 20, 0.4);
    z-index: 3;
}
.piece.gone { visibility: hidden; pointer-events: none; }

#btn-hint {
    position: absolute; right: clamp(6px, 1.5vw, 20px); top: -76px;
    width: 66px; height: 66px; border-radius: 50%;
    border: none; font-size: 1.9rem; cursor: pointer;
    background: radial-gradient(circle at 32% 28%, #FFE9A8, #FCBF49 70%);
    box-shadow: 0 6px 16px rgba(232, 168, 40, 0.55), inset 0 -3px 0 rgba(160, 110, 20, 0.4);
    transition: transform 0.15s;
    z-index: 7;
}
#btn-hint:active { transform: scale(0.9); }

/* ── flight / drag clones & how-to paw ── */

.fly {
    position: fixed; z-index: 850; pointer-events: none;
    border: 4px solid #FFFDF5; border-radius: 14px; overflow: hidden;
    background: #FFF8EC;
    box-shadow: 0 14px 24px rgba(70, 45, 20, 0.45);
}
.fly svg { width: 100%; height: 100%; display: block; }
.fly.wiggle svg { animation: no-fit 0.16s ease-in-out 2; }
@keyframes no-fit {
    0%, 100% { transform: rotate(0) scale(1, 1); }
    25% { transform: rotate(-6deg) scale(1.04, 0.92); }
    75% { transform: rotate(6deg) scale(1.04, 0.92); }
}

#howto-paw {
    position: fixed; z-index: 860; width: 76px; height: 76px;
    pointer-events: none; opacity: 0;
    filter: drop-shadow(0 6px 10px rgba(70, 45, 20, 0.4));
}
#howto-paw svg { width: 100%; height: 100%; }
#howto-paw .paw-ring {
    position: absolute; inset: -6px; border-radius: 50%;
    border: 4px solid rgba(255, 215, 0, 0.9); opacity: 0;
}
#howto-paw.tapping .paw-ring { animation: snap-ripple 0.5s ease-out 1; }

/* ══ ALIVE stage ═══════════════════════════════════════════════════════ */

#alive-stage {
    position: fixed; inset: 0; z-index: 700;
    display: flex; align-items: center; justify-content: center;
    animation: gk-fade-in 0.4s ease-out;
    overflow: hidden;
}
#alive-stage.hab-0 #alive-bg { background: linear-gradient(#AEDCF5, #DFF3FF 55%, #7CB518); }
#alive-stage.hab-1 #alive-bg { background: linear-gradient(#D6EBAE, #AFD57E 55%, #4E7A35); }
#alive-stage.hab-2 #alive-bg { background: linear-gradient(#8A5BB8, #5C4B8C 55%, #123F5E); }
#alive-bg { position: absolute; inset: 0; }
#alive-bg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 62% 55% at 50% 46%,
        rgba(255, 246, 216, 0.5), rgba(255, 246, 216, 0.14) 55%, transparent 78%);
}

#alive-scene {
    position: relative; z-index: 2;
    width: min(78vmin, 560px); height: min(78vmin, 560px);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(40, 20, 60, 0.5), 0 0 0 10px rgba(255, 255, 255, 0.85), 0 0 60px 12px rgba(255, 215, 0, 0.35);
    animation: scene-grow 0.7s cubic-bezier(0.2, 1.3, 0.4, 1);
    background: #FFF8EC;
}
@keyframes scene-grow {
    from { transform: scale(0.55); opacity: 0.3; }
    to   { transform: scale(1); opacity: 1; }
}

#patch-dance {
    position: absolute; z-index: 3;
    left: clamp(2px, 6vw, 90px); bottom: clamp(6px, 5vh, 50px);
    width: clamp(110px, 17vmin, 170px); height: clamp(126px, 19.5vmin, 195px);
    animation: patch-run-in 1.1s cubic-bezier(0.3, 1.2, 0.5, 1) backwards;
}
@keyframes patch-run-in {
    from { transform: translateX(-260px) rotate(-8deg); }
    to   { transform: translateX(0) rotate(0); }
}

#alive-burst { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.burst-bit {
    position: absolute; left: 50%; top: 50%;
    width: 12px; height: 12px; border-radius: 50%;
    animation: burst-out 1.5s ease-out forwards;
}
@keyframes burst-out {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--bx), var(--by)) scale(0.4); opacity: 0; }
}

/* animatable subgroups inside the cloned scene */
#alive-scene g[class^="a-"], #alive-scene g[class*=" a-"] { transform-box: fill-box; }
#alive-scene .a-animal { transform-origin: 50% 92%; }
#alive-scene .a-lids { animation: pet-blink 3.6s linear infinite; }
@keyframes pet-blink {
    0%, 88%, 100% { opacity: 0; }
    91%, 96%      { opacity: 1; }
}
#alive-scene .a-fly { animation: fly-pulse 1.8s ease-in-out infinite; }
@keyframes fly-pulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* per-pet signature dances (run only when .dancing is set) */
.dancing.pet-clover .a-animal { animation: d-boing 0.8s ease-in-out 6; }
@keyframes d-boing {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    18%      { transform: translateY(0) scale(1.06, 0.9); }
    46%      { transform: translateY(-52px) scale(0.97, 1.06); }
    78%      { transform: translateY(0) scale(1.04, 0.94); }
}
.dancing.pet-clover .a-earL { transform-origin: 50% 95%; animation: d-earflop 0.8s ease-in-out 6; }
.dancing.pet-clover .a-earR { transform-origin: 20% 90%; animation: d-earflop 0.8s ease-in-out 6 reverse; }
@keyframes d-earflop { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }

.dancing.pet-bumble .a-animal { transform-origin: 50% 96%; animation: d-waddle 0.6s ease-in-out 8; }
@keyframes d-waddle {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50%      { transform: rotate(7deg) translateY(-8px); }
}
.dancing.pet-bumble .a-armL { transform-origin: 50% 10%; animation: d-flapL 0.6s ease-in-out 8; }
.dancing.pet-bumble .a-armR { transform-origin: 50% 10%; animation: d-flapR 0.6s ease-in-out 8; }
@keyframes d-flapL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(38deg); } }
@keyframes d-flapR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
.dancing.pet-bumble .a-prop { transform-origin: 50% 50%; animation: d-ripple 1.2s ease-out 4; }
@keyframes d-ripple { 0% { transform: scale(0.75); opacity: 1; } 100% { transform: scale(1.15); opacity: 0.4; } }

.dancing.pet-hazel .a-animal { transform-origin: 50% 60%; animation: d-roll 2.4s ease-in-out 2; }
@keyframes d-roll {
    0%       { transform: rotate(0) scale(1); }
    16%      { transform: rotate(-10deg) scale(0.92); }
    58%      { transform: rotate(350deg) scale(0.92); }
    72%      { transform: rotate(360deg) scale(1.14); }
    86%      { transform: rotate(360deg) scale(0.98); }
    100%     { transform: rotate(360deg) scale(1); }
}
.dancing.pet-hazel .a-prop { transform-origin: 50% 50%; animation: d-apple-hug 0.6s ease-in-out 8; }
@keyframes d-apple-hug { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.dancing.pet-otto .a-head { transform-origin: 50% 80%; animation: d-headbob 0.6s ease-in-out 8; }
@keyframes d-headbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.dancing.pet-otto .a-armL { transform-origin: 50% 12%; animation: d-wingL 1.2s ease-in-out 4; }
.dancing.pet-otto .a-armR { transform-origin: 50% 12%; animation: d-wingR 1.2s ease-in-out 4; }
@keyframes d-wingL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(46deg); } }
@keyframes d-wingR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-46deg); } }
.dancing.pet-otto .a-animal { animation: d-sway 1.2s ease-in-out 4; }
@keyframes d-sway { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.dancing.pet-splash .a-armL { transform-origin: 50% 90%; animation: d-drumL 0.3s ease-in-out 16; }
.dancing.pet-splash .a-armR { transform-origin: 50% 90%; animation: d-drumR 0.3s ease-in-out 16; }
@keyframes d-drumL { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes d-drumR { 0%, 100% { transform: translateY(-14px); } 50% { transform: translateY(0); } }
.dancing.pet-splash .a-tail { transform-origin: 10% 80%; animation: d-tailflap 0.6s ease-in-out 8; }
@keyframes d-tailflap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
.dancing.pet-splash .a-animal { transform-origin: 50% 50%; animation: d-float 1.2s ease-in-out 4; }
@keyframes d-float { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-6px); } }
.dancing.pet-splash .a-prop { transform-origin: 50% 50%; animation: d-ripple 1.2s ease-out 4; }

.dancing.pet-nova .a-animal { transform-origin: 50% 96%; animation: d-bumwiggle 0.6s ease-in-out 8; }
@keyframes d-bumwiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.dancing.pet-nova .a-armL { transform-origin: 60% 88%; animation: d-reachL 0.6s ease-in-out 8; }
.dancing.pet-nova .a-armR { transform-origin: 40% 88%; animation: d-reachR 0.6s ease-in-out 8; }
@keyframes d-reachL { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }
@keyframes d-reachR { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.dancing.pet-nova .a-prop { transform-origin: 50% 50%; animation: d-swirl 2.4s ease-in-out 2; }
@keyframes d-swirl {
    0%, 100% { transform: rotate(0) translateY(0); }
    33%      { transform: rotate(5deg) translateY(-14px); }
    66%      { transform: rotate(-5deg) translateY(-6px); }
}

/* ══ particles ═════════════════════════════════════════════════════════ */

.bg-particles { position: absolute; inset: 0; overflow: hidden; }
.pt { position: absolute; will-change: transform; pointer-events: none; }

.pt-petal {
    width: 13px; height: 10px; border-radius: 60% 40% 60% 40%;
    background: linear-gradient(120deg, #FFB7CE, #FF7BAC);
    animation: pt-fall var(--dur, 11s) linear infinite;
    animation-delay: var(--del, 0s);
    top: -20px;
}
.pt-leaf {
    width: 15px; height: 11px; border-radius: 0 70% 0 70%;
    background: linear-gradient(120deg, #FCBF49, #E4853C);
    animation: pt-fall var(--dur, 12s) linear infinite;
    animation-delay: var(--del, 0s);
    top: -20px;
}
@keyframes pt-fall {
    0%   { transform: translate(0, -4vh) rotate(0turn); opacity: 0; }
    8%   { opacity: 0.95; }
    50%  { transform: translate(6vw, 52vh) rotate(0.8turn); }
    92%  { opacity: 0.9; }
    100% { transform: translate(-3vw, 108vh) rotate(1.6turn); opacity: 0; }
}
.pt-firefly {
    width: 8px; height: 8px; border-radius: 50%;
    background: #FFE9A8;
    box-shadow: 0 0 12px 5px rgba(252, 191, 73, 0.65);
    animation: pt-hover var(--dur, 9s) ease-in-out infinite, fly-pulse 2.1s ease-in-out infinite;
    animation-delay: var(--del, 0s), var(--del, 0s);
}
@keyframes pt-hover {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(4vw, -6vh); }
    50%      { transform: translate(-2vw, -11vh); }
    75%      { transform: translate(-5vw, -4vh); }
}

/* ══ info popover ══════════════════════════════════════════════════════ */

#info-btn {
    position: fixed; left: 14px; bottom: 14px; z-index: 905;
    width: 60px; height: 60px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(90, 60, 130, 0.25);
    font-size: 1.6rem; cursor: pointer;
    transition: transform 0.15s;
}
#info-btn:active { transform: scale(0.9); }

#info-overlay {
    position: fixed; inset: 0; z-index: 930;
    display: flex; align-items: center; justify-content: center;
    background: rgba(74, 59, 92, 0.45);
    animation: gk-fade-in 0.25s ease-out;
    padding: 18px;
}
#info-card { max-width: min(92vw, 520px); max-height: 90vh; overflow-y: auto; text-align: center; position: relative; padding-top: 12px; }
#info-card h2 { color: var(--gk-orange); margin: 4px 0 10px; }
#info-card p { text-align: left; font-size: clamp(0.92rem, 2.4vmin, 1.05rem); line-height: 1.5; margin-bottom: 10px; }
#info-card #info-close { margin-top: 6px; }
#info-patch { width: 84px; height: 96px; margin: 0 auto; }

/* ══ layout: three mandated viewports ══════════════════════════════════ */

@media (max-width: 860px) {
    #patch-zone { position: absolute; left: 2px; bottom: 0; width: auto; z-index: 6; }
    #patch-play { width: 92px; height: 106px; }
    #play-main { padding-left: 4px; padding-right: 4px; }
    .bg-nearL, .bg-nearR { width: 96px; height: 116px; }
    .shelf-cards { gap: 10px; }
}

@media (max-height: 700px) {
    #patch-start { width: 132px; height: 152px; }
    #start-shelf { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-idle .p-all, .pp-wave .p-armR, .patch .p-lids, .pt,
    .pet-card.next, .drift-a, .drift-b,
    .pp-idle .p-earL, .pp-idle .p-earR,
    #picker-bg .sway, #picker-bg .tw,
    #alive-scene .a-lids, #alive-scene .a-fly { animation: none !important; }
    .pp-hello { animation: none !important; }
    #hello-bubble { animation: none !important; opacity: 1; }
}