/* Basil's Cook-Along Kitchen — cozy morning bakery. */

:root {
    --cream: #FFF3DC;
    --wood: #E6A85C;
    --wood-d: #C57B3C;
    --sage: #A8C97F;
    --sage-d: #7CB518;
    --copper: #C56B3E;
    --batter: #F6C453;
    --pink: #FF7BAC;
    --ink: #4A3B2C;
}

html, body { height: 100%; overflow: hidden; background: #F3D9AE; }
.screen { position: fixed; inset: 0; overflow: hidden; }
.gk-hidden { display: none !important; }

.kbg { position: absolute; inset: 0; z-index: 0; }
.kbg-svg { width: 100%; height: 100%; display: block; }

.vignette {
    position: absolute; inset: 0; z-index: 25; pointer-events: none;
    box-shadow: inset 0 0 160px 40px rgba(120, 78, 30, 0.34);
}

/* ══ START SCREEN ══════════════════════════════════════════════════════ */
.start-inner {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(10px, 2.4vh, 22px); padding: 2vh 3vw;
}
#start-card {
    position: relative;
    background: linear-gradient(150deg, #F0BE7C 0%, #DE9A54 100%);
    border: 8px solid #B8763A;
    border-radius: 30px;
    padding: clamp(16px, 3vh, 30px) clamp(24px, 5vw, 56px) clamp(20px, 3.4vh, 34px);
    box-shadow: 0 14px 40px rgba(90, 55, 20, 0.4), inset 0 3px 0 rgba(255, 255, 255, 0.35);
    text-align: center;
}
#start-card::before {
    content: ""; position: absolute; inset: 8px; border-radius: 20px;
    border: 3px dashed rgba(255, 255, 255, 0.5); pointer-events: none;
}
#start-card h1 {
    font-size: clamp(1.9rem, 6.2vw, 3.4rem); line-height: 1.02; color: #fff;
    text-shadow: 0 3px 0 #B8763A, 0 6px 10px rgba(0, 0, 0, 0.22); letter-spacing: 0.5px;
}
#start-card h1 span { color: #FFE9B8; }
#start-card .tagline {
    margin: 8px 0 14px; font-size: clamp(0.95rem, 2.6vw, 1.35rem); color: #5A3A1C; font-weight: bold;
}
#btn-start {
    width: clamp(104px, 15vw, 140px); height: clamp(104px, 15vw, 140px);
    border-radius: 50%; border: 7px solid #fff; cursor: pointer;
    background: radial-gradient(circle at 40% 34%, #A2D149, var(--sage-d));
    box-shadow: 0 10px 26px rgba(90, 130, 20, 0.5), inset 0 -6px 12px rgba(0, 0, 0, 0.15);
    display: grid; place-items: center; animation: bs-pulse 1.7s ease-in-out infinite;
}
.bs-play { font-size: clamp(2.6rem, 6vw, 3.6rem); color: #fff; margin-left: 8px; text-shadow: 0 3px 6px rgba(0,0,0,0.25); }
#btn-start:active { transform: scale(0.94); }
@keyframes bs-pulse { 0%,100% { transform: scale(1); box-shadow: 0 10px 26px rgba(90,130,20,0.5); } 50% { transform: scale(1.06); box-shadow: 0 14px 34px rgba(90,130,20,0.62); } }

#start-basil {
    position: absolute; left: clamp(6px, 3vw, 60px); bottom: -8px;
    width: clamp(140px, 20vw, 240px); z-index: 11; pointer-events: none;
    animation: peek 4s ease-in-out infinite;
}
@keyframes peek { 0%,100% { transform: translateY(6px) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }

#level-cards { display: flex; gap: clamp(8px, 1.6vw, 18px); flex-wrap: wrap; justify-content: center; }
.level-card {
    width: clamp(94px, 13vw, 128px); min-height: 116px;
    border: 5px solid #fff; border-radius: 22px; cursor: pointer;
    background: linear-gradient(160deg, #FFFDF6, #FCEFD2);
    box-shadow: 0 8px 20px rgba(120, 80, 30, 0.28);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 8px 6px; transition: transform 0.15s;
}
.level-card:active { transform: scale(0.95); }
.level-card.locked { filter: saturate(0.5) brightness(0.96); background: linear-gradient(160deg, #EFE7D8, #DED2BC); }
.level-card.fresh { animation: lc-pop 0.7s ease; }
@keyframes lc-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.level-card.nope { animation: shake-no 0.4s; }
@keyframes shake-no { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }
.lc-emoji { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.lc-name { font-size: clamp(0.72rem, 1.7vw, 0.95rem); font-weight: bold; color: var(--ink); text-align: center; line-height: 1.05; }
.lc-stars { color: var(--batter); font-size: 1.05rem; letter-spacing: 1px; }
.lc-stars i { color: #D8C7A0; font-style: normal; }

#star-tally {
    position: absolute; top: clamp(10px, 2vh, 20px); left: 50%; transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.92); border-radius: 30px; padding: 6px 20px;
    font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: bold; color: var(--copper);
    box-shadow: 0 6px 16px rgba(120, 80, 30, 0.25); z-index: 12;
}

.corner-btn {
    position: fixed; left: 14px; bottom: 14px; z-index: 30;
    width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 12px rgba(90, 60, 30, 0.28); font-size: 1.7rem;
}
.corner-btn:active { transform: scale(0.92); }

/* ══ PLAY SCENE ════════════════════════════════════════════════════════ */
#scene { position: absolute; inset: 0; }

/* recipe card */
#recipe-card {
    position: absolute; top: clamp(8px, 2vh, 22px); left: 50%;
    transform: translate(-50%, -160%); z-index: 14;
    background: linear-gradient(160deg, #F0BE7C, #DE9A54);
    border: 6px solid #B8763A; border-radius: 20px; padding: 10px 16px 12px;
    box-shadow: 0 10px 26px rgba(90, 55, 20, 0.4), inset 0 2px 0 rgba(255,255,255,0.35);
    transition: transform 0.7s cubic-bezier(0.3, 1.3, 0.5, 1);
}
#recipe-card.down { transform: translate(-50%, 0); }
#recipe-card::before { content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 30px; height: 18px; background: #C99; border-radius: 6px 6px 0 0; background: #B8763A; }
#recipe-steps { display: flex; gap: clamp(6px, 1.4vw, 14px); align-items: flex-start; }
.rc-step {
    position: relative; width: clamp(50px, 8vw, 74px); height: clamp(50px, 8vw, 74px);
    background: #FFF7E6; border: 4px solid #E4C88F; border-radius: 15px; padding: 5px;
    display: grid; place-items: center;
}
.rc-step svg { width: 100%; height: 100%; }
.rc-step.done { border-color: var(--sage-d); background: #EAF6D6; }
.rc-step.current { border-color: var(--sage-d); box-shadow: 0 0 0 4px rgba(124,181,24,0.35), 0 6px 14px rgba(124,181,24,0.35); animation: rc-glow 1.1s ease-in-out infinite; }
.rc-step.just-done { animation: rc-check-pop 0.6s ease; }
.rc-step.nudge { animation: rc-nudge 0.5s ease; }
@keyframes rc-glow { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.05); } }
@keyframes rc-check-pop { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes rc-nudge { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-6deg);} 75%{transform:rotate(6deg);} }
.rc-check { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--sage-d); color: #fff; font-size: 0.95rem; display: none; place-items: center; box-shadow: 0 3px 6px rgba(0,0,0,0.25); }
.rc-step.done .rc-check { display: grid; }
.rc-arrow { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); color: var(--sage-d); font-size: 1.3rem; display: none; }
.rc-step.current .rc-arrow { display: block; animation: arrow-bounce 0.9s ease-in-out infinite; }
@keyframes arrow-bounce { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* oven */
#oven {
    position: absolute; right: clamp(8px, 3vw, 60px); bottom: clamp(4px, 1vh, 20px);
    width: clamp(180px, 24vw, 280px); z-index: 3; cursor: pointer;
}
#oven .oven-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 20px rgba(80,40,20,0.35)); }
#oven.active { animation: oven-invite 1.2s ease-in-out infinite; }
@keyframes oven-invite { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#oven.active .ov-cavity { opacity: 0.6; }
.ov-door { transform-box: view-box; transform-origin: 150px 292px; transition: transform 0.5s ease; }
#oven.open .ov-door { transform: rotateX(78deg); }
#oven.baking .ov-win-glow, #oven.baking .ov-cavity { opacity: 0.85 !important; animation: bake-flick 0.4s ease-in-out infinite alternate; }
@keyframes bake-flick { from { opacity: 0.6; } to { opacity: 0.95; } }
.ov-dial-hand { transform-box: view-box; transform-origin: 70px 60px; transition: transform 0.2s linear; }
.ov-led { animation: led-blink 1.4s steps(1) infinite; }
@keyframes led-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: 0.3; } }

/* customer window */
#cust-window {
    position: absolute; right: clamp(10px, 4vw, 80px); top: clamp(10px, 3vh, 34px);
    width: clamp(120px, 16vw, 190px); z-index: 4;
    opacity: 0; transform: translateY(20px) scale(0.9); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3,1.4,0.5,1);
}
#cust-window.show { opacity: 1; transform: translateY(0) scale(1); }
#cust-frame { position: relative; }
#cust-frame .custwin-svg { width: 100%; height: auto; display: block; }
#cust-slot { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
#cust-slot svg { width: 76%; height: 76%; }
#cust-window.show .cust-body { animation: cust-bounce 0.7s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes cust-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* stage + props */
#stage {
    position: absolute; left: 0; right: 0; top: 22%; bottom: 6%; z-index: 6;
    touch-action: none;
}
#surface {
    position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
    width: clamp(230px, 32vw, 340px); z-index: 6;
}
#surface .surf-base, #surface .surf-food { position: relative; }
#surface .surf-base svg, #surface .surf-food svg { width: 100%; height: auto; display: block; }
#surface .surf-food { position: absolute; inset: 0; display: grid; place-items: center; }
#surface[data-surf="pan"] .surf-food svg { width: 78%; margin-top: -6%; }
/* the pancake fades + grows in as the child pours batter into the pan */
#surface[data-surf="pan"] .surf-food { opacity: var(--fill, 1); transform: scale(calc(0.6 + 0.4 * var(--fill, 1))); transition: opacity 0.2s ease, transform 0.2s ease; }
#surface[data-surf="plate"] .surf-base svg { width: 100%; }
.batter-wrap { transform-box: view-box; transform-origin: 150px 210px; transform: scaleY(var(--fill, 0)); transition: transform 0.18s ease; }
#surface.golden .batter { fill: url(#batter-gold); }
#surface.golden .batter-top { fill: #F3C25A; }
.bub { animation: bub-rise 0.7s ease-out forwards; transform-box: view-box; }
@keyframes bub-rise { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(-40px); opacity: 0; } }
.surf-food.flipping { animation: pc-flip 0.75s cubic-bezier(0.3, 0.9, 0.4, 1); transform-box: fill-box; transform-origin: center; }
@keyframes pc-flip {
    0% { transform: translateY(0) rotateX(0) scale(1); }
    35% { transform: translateY(-120px) rotateX(180deg) scale(1.05, 0.8); }
    70% { transform: translateY(-30px) rotateX(360deg) scale(0.95, 1.08); }
    100% { transform: translateY(0) rotateX(360deg) scale(1); }
}

.prop { position: absolute; z-index: 7; cursor: pointer; touch-action: none; }
.prop svg { width: 100%; height: auto; display: block; pointer-events: none; }
#jug { left: 19%; top: 40%; width: clamp(96px, 13vw, 150px); transform-origin: 70% 20%; }
#stir-spoon { left: 50%; top: 30%; transform: translateX(-50%); width: clamp(64px, 8vw, 86px); z-index: 8; }
#stir-spoon.swirl { animation: spoon-swirl 0.4s ease; }
@keyframes spoon-swirl { 0%{transform:translateX(-50%) rotate(0);} 50%{transform:translateX(-30%) rotate(24deg);} 100%{transform:translateX(-50%) rotate(0);} }
#shaker { left: 50%; top: 22%; transform: translateX(-50%); width: clamp(76px, 10vw, 116px); }
#shaker.jiggle { animation: shaker-jig 0.26s ease; }
@keyframes shaker-jig { 0%,100%{transform:translateX(-50%) rotate(0);} 30%{transform:translateX(-54%) rotate(-12deg);} 70%{transform:translateX(-46%) rotate(12deg);} }
#tray { left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(200px, 28vw, 300px); z-index: 7; }
.prop.selected { filter: drop-shadow(0 0 10px rgba(124, 181, 24, 0.9)); }
.prop.pulse { animation: prop-pulse 0.9s ease-in-out infinite; }
@keyframes prop-pulse { 0%,100% { transform: var(--rest, translateX(-50%)) scale(1); } 50% { transform: var(--rest, translateX(-50%)) scale(1.06); } }
#jug.pulse { animation: jug-pulse 0.9s ease-in-out infinite; }
@keyframes jug-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07) rotate(-4deg);} }
#tray.pulse { animation: tray-pulse 0.9s ease-in-out infinite; }
@keyframes tray-pulse { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.05);} }

#ghost-hand { position: absolute; left: 0; top: 0; width: clamp(56px, 7vw, 84px); z-index: 9; pointer-events: none; filter: drop-shadow(0 3px 8px rgba(124,181,24,0.5)); }
#ghost-hand svg { width: 100%; height: auto; }

/* topping chooser */
#topping-tray {
    position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 16;
    display: flex; gap: clamp(10px, 2vw, 22px);
    background: rgba(255, 247, 230, 0.95); padding: 12px 18px; border-radius: 24px;
    border: 5px solid #E4C88F; box-shadow: 0 12px 30px rgba(120, 80, 30, 0.35);
}
.topping-opt {
    width: clamp(88px, 12vw, 120px); height: clamp(74px, 10vw, 96px);
    border: 4px solid #E4C88F; border-radius: 18px; background: #fff; cursor: pointer;
    padding: 4px; transition: transform 0.15s;
}
.topping-opt svg { width: 100%; height: 100%; }
.topping-opt:active { transform: scale(0.93); }
.topping-opt:hover { transform: translateY(-4px); border-color: var(--sage-d); }

/* win treat */
#win-treat {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: clamp(260px, 40vw, 420px); z-index: 18; pointer-events: none;
}
#win-treat .treat-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(90,50,20,0.32)); }
#win-treat.sproing { animation: sproing 0.8s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes sproing { 0% { transform: translate(-50%, 40%) scale(0.4); } 55% { transform: translate(-50%, -55%) scale(1.12); } 100% { transform: translate(-50%, -50%) scale(1); } }
#win-treat.alive .tr-face { opacity: 1; }
#win-treat.alive { animation: wiggle-dance 1.1s ease-in-out 0.2s infinite; }
@keyframes wiggle-dance { 0%,100% { transform: translate(-50%, -50%) rotate(-4deg); } 50% { transform: translate(-50%, -50%) rotate(4deg); } }
.tr-face { opacity: 0; transition: opacity 0.4s ease; transform-box: fill-box; }
#win-treat.alive .tr-eye { animation: tr-blink 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tr-blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.15); } }
.cake-flame { animation: flame-flick 0.5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes flame-flick { from { transform: scaleY(1); opacity: 1; } to { transform: scaleY(0.8) translateY(2px); opacity: 0.85; } }

/* Basil in play */
#basil { position: absolute; left: clamp(4px, 2vw, 34px); bottom: -6px; width: clamp(150px, 19vw, 230px); z-index: 12; }
.basil-holder svg { width: 100%; height: auto; display: block; }

/* say bubble */
#say-bubble {
    position: absolute; left: clamp(160px, 20vw, 250px); bottom: clamp(60px, 12vh, 120px); z-index: 15;
    max-width: min(56vw, 460px);
    background: #fff; color: var(--ink); border: 4px solid #F0BE7C; border-radius: 20px;
    padding: 10px 16px; font-size: clamp(0.9rem, 2.2vw, 1.2rem); font-weight: bold;
    box-shadow: 0 8px 20px rgba(120, 80, 30, 0.3); opacity: 0; transform: translateY(10px) scale(0.9);
    transition: opacity 0.25s, transform 0.25s;
}
#say-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
#say-bubble::after { content: ""; position: absolute; left: 24px; bottom: -14px; border: 10px solid transparent; border-top-color: #F0BE7C; }

/* fx */
#fx-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.fx { position: absolute; }
.puff { display: block; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #F3E4C6); opacity: 0.9; animation: puff-fall 0.9s ease-out forwards; }
@keyframes puff-fall { 0% { transform: translate(0,0) scale(0.4); opacity: 0.9; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }
.sprk { display: block; border-radius: 2px; animation: sprk-fall 0.85s ease-out forwards; }
@keyframes sprk-fall { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.steam { display: block; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(255,255,255,0)); animation: steam-rise 1.6s ease-out forwards; }
@keyframes steam-rise { 0% { transform: translate(0,0) scale(0.6); opacity: 0.8; } 100% { transform: translate(var(--dx), -120px) scale(1.6); opacity: 0; } }
.heart { display: block; font-size: 1.6rem; animation: heart-rise 1.8s ease-out forwards; }
@keyframes heart-rise { 0% { transform: translate(0,0) scale(0.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx), -110px) scale(1.2); opacity: 0; } }

/* ══ BASIL animation rig ═══════════════════════════════════════════════ */
.basil-svg, .basil-svg * { transform-box: fill-box; }
.basil-svg { transform-origin: center bottom; }
.ba-eyes, .ba-nose, .ba-cheek { transform-origin: center; }
.ba-ear-l, .ba-ear-r { transform-origin: bottom; }
.ba-arm, .ba-spoon { transform-origin: bottom; }

/* idle ear-flop (left ear flops forward then perks) */
.ba-ear-l { animation: ear-flop 6s ease-in-out infinite; }
@keyframes ear-flop { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-4deg); } }

.basil-holder.blink .ba-eyes { transform: scaleY(0.12); }
.basil-holder.talk .ba-nose { animation: nose-twitch 0.28s ease-in-out 5; }
@keyframes nose-twitch { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.14); } }
.basil-holder.talk .ba-head { animation: talk-bob 0.4s ease-in-out 4; }
@keyframes talk-bob { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-1.5deg); } }

.basil-holder.wave .ba-arm { animation: wave-arm 0.5s ease-in-out 3; }
@keyframes wave-arm { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }

.basil-holder.happy .basil-svg { animation: b-happy 0.6s ease; }
@keyframes b-happy { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-18px) scale(1.05, 0.96); } }
.basil-holder.happy .ba-ear-l, .basil-holder.happy .ba-ear-r { animation: ears-perk 0.6s ease; }
@keyframes ears-perk { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-8deg); } }

.basil-holder.tilt .basil-svg { animation: b-tilt 1.3s ease; }
@keyframes b-tilt { 0%,100% { transform: rotate(0); } 30%,70% { transform: rotate(-8deg); } }

.basil-holder.fidget .ba-ear-r { animation: ear-fidget 1.2s ease; }
@keyframes ear-fidget { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }

.basil-holder.celebrate .basil-svg { animation: b-celebrate 0.6s ease-in-out 4; }
@keyframes b-celebrate { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-26px) rotate(3deg); } }
.basil-holder.celebrate .ba-spoon { animation: spoon-toss 0.6s ease-in-out 4; }
@keyframes spoon-toss { 0%,100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-40deg) translateY(-10px); } }

.basil-holder.entering { animation: b-enter 0.65s cubic-bezier(0.3, 1.2, 0.5, 1); }
@keyframes b-enter { 0% { transform: translate(-60px, 40px) scale(0.7); opacity: 0; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
.basil-holder.hopin { animation: b-hop 0.7s ease; }
@keyframes b-hop { 0% { transform: translateY(80px); } 45% { transform: translateY(-24px); } 70% { transform: translateY(8px); } 100% { transform: translateY(0); } }

/* ══ FOR GROWN-UPS ═════════════════════════════════════════════════════ */
#grownups { position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center; background: rgba(74, 59, 44, 0.5); padding: 4vw; }
.grownups-card { position: relative; max-width: min(94vw, 540px); max-height: 92vh; overflow-y: auto; }
.grownups-card h3 { color: var(--copper); font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: 10px; }
.grownups-card p { font-size: clamp(0.92rem, 2.2vw, 1.08rem); line-height: 1.5; margin-bottom: 10px; color: var(--ink); }
.tip-row { display: flex; gap: 12px; align-items: flex-start; background: #FFF6E4; border-radius: 16px; padding: 12px 14px; margin-top: 6px; }
.tip-icons { font-size: 1.8rem; }
.close-btn { position: absolute; top: 10px; right: 10px; width: 48px; height: 48px; border-radius: 50%; border: none; background: #F0BE7C; color: #fff; font-size: 1.3rem; cursor: pointer; }
.close-btn:active { transform: scale(0.92); }

@media (prefers-reduced-motion: reduce) {
    #btn-start, #start-basil, .rc-step.current, #oven.active, .cust-body,
    .ba-ear-l, #win-treat.alive, .cake-flame, .ov-led { animation: none !important; }
}

@media (max-width: 820px) {
    #say-bubble { left: 14px; right: auto; transform: none; max-width: min(66vw, 400px); bottom: clamp(46px, 9vh, 84px); text-align: left; }
    #say-bubble::after { left: 30px; margin-left: 0; }
}