.utility { z-index: 60 !important; }
.game-shell { width:min(1280px,100%,calc((100vh - 20px) * 16 / 9)); }
.modal.pause-active { z-index: 70 !important; }
.rotate { z-index: 90 !important; pointer-events: auto !important; }
.cinematic { place-items:stretch !important; }
#canvas { image-rendering:pixelated; image-rendering:crisp-edges; }
.dog-keyframe { background-image:url('assets/dog-reveal-keyframes-v1.png'); background-size:600% 100%; background-repeat:no-repeat; image-rendering:pixelated; animation:keyframeImpact .35s steps(2) both; }
.dog-keyframe.frame0 { background-position:0 0; }
.dog-keyframe.frame1 { background-position:20% 0; }
.dog-keyframe.frame2 { background-position:40% 0; }
.dog-keyframe.frame3 { background-position:60% 0; }
.dog-keyframe.frame4 { background-position:80% 0; }
.dog-keyframe.frame5 { background-position:100% 0; }
.dog-keyframe.frame5 { position:relative; background-image:url('assets/great-lawn-background-v1.png'); background-size:cover; background-position:center; }
.dog-keyframe.frame5::before { content:""; position:absolute; left:48%; bottom:6%; width:128px; height:128px; background:url('assets/chacha-movement-sheet-v3.png') 33.333% 33.333%/400% 400% no-repeat; image-rendering:pixelated; z-index:2; }
.dog-keyframe.frame5::after { content:""; position:absolute; left:62%; bottom:8%; width:256px; height:256px; background:url('assets/level1-dog-hazard-sheet-v2.png') 66.666% 0/400% 300% no-repeat; image-rendering:pixelated; z-index:2; }
.reveal-leash { position:absolute; z-index:1; left:-4%; bottom:23%; width:57%; height:4px; background:#f07b2c; border:1px solid #6d2c26; transform:rotate(9deg); transform-origin:left center; image-rendering:pixelated; }
@keyframes keyframeImpact { from { filter:brightness(.72); transform:scale(.985); } to { filter:brightness(1); transform:scale(1); } }
.boss-copy.trick-stage { width:100%; min-height:0; display:block; text-align:center; font-size:inherit; }
.boss-copy.trick-stage h2 { font-size:clamp(22px,3vw,38px); }
.boss-copy.trick-stage p { max-width:680px; margin:5px auto 0; font-size:clamp(10px,1.25vw,15px); }
.trick-duet { display:flex; align-items:center; justify-content:center; gap:clamp(12px,4vw,40px); min-height:132px; }
.trick-sprite { width:128px; height:128px; flex:0 0 auto; background-image:url('assets/chacha-trick-sheet-v1.png'); background-size:400% 300%; image-rendering:pixelated; animation:trickFrames .8s steps(3) infinite; }
.trick-sprite.dead { background-position-y:0; }
.trick-sprite.sing { background-position-y:50%; }
.trick-sprite.five { background-position-y:100%; }
.boss-reaction { width:144px; height:144px; flex:0 0 auto; background-image:url('assets/boss-rottweiler-reaction-v1.png'); background-size:300% 100%; background-position:0 0; image-rendering:pixelated; animation:bossDelight 1.05s steps(2) infinite; }
.boss-panel:has(.boss-entrance),.boss-panel:has(.boss-outcome) { grid-template-columns:112px 1fr auto; align-items:center; }
.boss-entrance,.boss-outcome { width:96px; height:96px; background-image:url('assets/boss-rottweiler-reaction-v1.png'); background-size:300% 100%; background-position:0 0; image-rendering:pixelated; }
.boss-entrance { animation:bossIdle .7s steps(2) infinite alternate; }
.boss-outcome.stop { background-position:50% 0; }
.boss-outcome.amused { background-position:100% 0; }
@keyframes bossIdle { to { transform:translateY(-4px); } }
.portrait { background-image:url('assets/chacha-hud-portraits-v1.png'); background-size:300% 100%; background-repeat:no-repeat; image-rendering:pixelated; color:transparent; }
.portrait.ready { background-position:0 0; }
.portrait.alert { background-position:50% 0; }
.portrait.hurt { background-position:100% 0; }
@keyframes trickFrames { from { background-position-x:0; } to { background-position-x:100%; } }
@keyframes bossDelight { from { background-position-x:0; } to { background-position-x:100%; } }
@media (max-width:600px){.trick-duet{gap:4px}.trick-sprite{width:96px;height:96px}.boss-reaction{width:108px;height:108px}}
@media (max-width:760px){.game-shell{width:min(100%,calc(100vh * 16 / 9))}}
.gallery-card { width:min(620px,88vw); text-align:center; }
.gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px auto 14px; }
.gallery-grid button { width:100%; min-height:52px; margin:0; padding:10px 14px; }
.gallery-grid button:last-child { grid-column:1 / -1; width:calc(50% - 5px); justify-self:center; }
.gallery-back { display:block; margin:0 auto; min-width:180px; }
.modal-actions { display:grid; gap:12px; width:min(460px,100%); margin:18px auto 0; }
.modal-actions .primary,.modal-actions .secondary { width:100%; min-height:46px; margin:0; }
.modal-actions .primary { box-shadow:4px 4px 0 #000; }
.modal-actions .danger { color:#ffd9d9; background:#492029; }
.modal-card > .primary + .secondary,.modal-card > .secondary + .secondary { margin-top:12px; }
.title-copy .secondary + .secondary { margin-top:10px; }
.boss-actions { row-gap:10px; column-gap:10px; }
.boss-actions button { min-height:44px; }
@media (max-height:500px) and (orientation:landscape) { .gallery-card { width:min(620px,82vw); padding:8px 18px; } .gallery-card .kicker { margin:2px 0; } .gallery-card h2 { margin:3px 0; font-size:24px; } .gallery-grid { gap:6px; margin:6px auto; } .gallery-grid button { min-height:34px; padding:5px 8px; } .gallery-back { padding:5px 10px; min-height:32px; } .modal-actions{gap:6px;margin-top:6px}.modal-actions .primary,.modal-actions .secondary{min-height:34px;padding:5px 8px}.boss-actions button{min-height:34px} }
.cinematic-art { background-image:url('assets/reveal-sheet-v3.png'); background-size:400% 200%; filter:none !important; }
.cinematic-art.human { filter:saturate(.72) brightness(.86) !important; }
.cinematic-art.dog.human { background-position:0 0; }
.cinematic-art.dog.cat { background-position:0 100%; }
.cinematic-art.catnip.human { background-position:33.333% 0; }
.cinematic-art.catnip.cat { background-position:33.333% 100%; }
.cinematic-art.jogger.human { background-position:66.666% 0; }
.cinematic-art.jogger.cat { background-position:66.666% 100%; }
.cinematic-art.bird.human { background-position:100% 0; }
.cinematic-art.bird.cat { background-position:100% 100%; }
.cinematic-art.bench { background-image:url('assets/bench-sequence-v1.png'); background-size:400% 100%; filter:none !important; }
.cinematic-art.bench.frame0 { background-position:0 0; }
.cinematic-art.bench.frame1 { background-position:33.333% 0; }
.cinematic-art.bench.frame2 { background-position:66.666% 0; }
.cinematic-art.bench.frame3 { background-position:100% 0; }
.reveal-landscape { min-height:0; height:100%; width:auto; max-width:100%; aspect-ratio:16/9; align-self:center; justify-self:center; background-image:var(--reveal); background-size:600% 100%; background-repeat:no-repeat; background-position-y:center; background-color:#10131e; image-rendering:pixelated; animation:revealBeatIn .32s steps(3,end) both; }
.reveal-landscape.beat0 { background-position:0 0; }
.reveal-landscape.beat1 { background-position:20% 0; }
.reveal-landscape.beat2 { background-position:40% 0; }
.reveal-landscape.beat3 { background-position:60% 0; }
.reveal-landscape.beat4 { background-position:80% 0; }
.reveal-landscape.beat5 { background-position:100% 0; }
.reveal-frame { display:block; align-self:center; justify-self:center; width:auto; height:100%; max-width:100%; max-height:100%; aspect-ratio:16/9; object-fit:contain; background:#10131e; image-rendering:pixelated; animation:revealBeatIn .32s steps(3,end) both; }
.bench-frame { display:block; align-self:center; justify-self:center; width:auto; height:100%; max-width:100%; max-height:100%; aspect-ratio:16/9; background:#10131e; image-rendering:pixelated; animation:revealBeatIn .45s steps(3,end) both; }
@keyframes revealBeatIn { from { filter:brightness(.72); transform:translateY(4px); } to { filter:brightness(1); transform:translateY(0); } }
.runner-entrance,.runner-outcome,.runner-reaction{width:96px;height:96px;background-image:url('assets/boss-lightning-runner-v1.png');background-size:400% 200%;background-repeat:no-repeat;image-rendering:pixelated}
.runner-entrance{background-position:0 0;animation:runnerEntrance .56s steps(3) infinite}
.runner-outcome.follow{background-position:33.333% 100%}.runner-outcome.amused,.runner-reaction.amused{background-position:66.666% 100%}
.runner-reaction{width:144px;height:144px;flex:0 0 auto}
.boss-panel:has(.runner-entrance),.boss-panel:has(.runner-outcome){grid-template-columns:112px 1fr auto;align-items:center}
@keyframes runnerEntrance{from{background-position-x:0}to{background-position-x:100%}}
@media(max-width:600px){.runner-reaction{width:108px;height:108px}}
.flock-entrance,.flock-outcome,.flock-reaction{width:112px;height:112px;background-image:url('assets/boss-mystic-crows-v1.png');background-size:400% 300%;background-repeat:no-repeat;image-rendering:pixelated}
.flock-entrance{background-position:0 0;animation:flockEntrance .75s steps(3) infinite}
.flock-outcome.follow{background-position:66.666% 50%}.flock-outcome.amused,.flock-reaction.amused{background-position:66.666% 100%}
.flock-reaction{width:144px;height:144px;flex:0 0 auto;animation:flockDelight .7s steps(2) infinite alternate}
.boss-panel:has(.flock-entrance),.boss-panel:has(.flock-outcome){grid-template-columns:128px 1fr auto;align-items:center}
@keyframes flockEntrance{from{background-position-x:0}to{background-position-x:100%}}
@keyframes flockDelight{to{transform:translateY(-5px) rotate(2deg)}}
@media(max-width:600px){.flock-reaction{width:108px;height:108px}.flock-entrance,.flock-outcome{width:88px;height:88px}.boss-panel:has(.flock-entrance),.boss-panel:has(.flock-outcome){grid-template-columns:94px 1fr auto}}

/* Keep the Level 3 encounter readable in a short iPhone landscape viewport. */
@media (max-height:500px) and (orientation:landscape) {
  .boss-panel:has(.flock-entrance),
  .boss-panel:has(.flock-outcome) {
    grid-template-columns:94px minmax(0,1fr);
    grid-template-areas:
      "art copy"
      "actions actions";
    align-items:center;
    gap:5px 10px;
    padding:7px 10px;
  }
  .boss-panel:has(.flock-entrance) .flock-entrance,
  .boss-panel:has(.flock-outcome) .flock-outcome { grid-area:art; }
  .boss-panel:has(.flock-entrance) .boss-copy,
  .boss-panel:has(.flock-outcome) .boss-copy { grid-area:copy; min-width:0; }
  .boss-panel:has(.flock-entrance) .boss-copy h2,
  .boss-panel:has(.flock-outcome) .boss-copy h2 {
    margin:0 0 3px;
    font-size:18px;
    line-height:1.05;
  }
  .boss-panel:has(.flock-entrance) .boss-copy p,
  .boss-panel:has(.flock-outcome) .boss-copy p {
    font-size:13px;
    line-height:1.18;
  }
  .boss-panel:has(.flock-entrance) .boss-actions,
  .boss-panel:has(.flock-outcome) .boss-actions {
    grid-area:actions;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    width:100%;
  }
  .boss-panel:has(.flock-entrance) .boss-actions button,
  .boss-panel:has(.flock-outcome) .boss-actions button {
    width:100%;
    min-height:36px;
    padding:6px 8px;
  }
  .boss-panel:has(.flock-outcome) .boss-actions:has([data-next]) {
    grid-template-columns:1fr;
  }
}

/* Final framing-screen family */
.brand-wordmark{color:#ffe2a0;font-weight:900;letter-spacing:.13em;text-shadow:2px 2px 0 #3f1838;font-size:clamp(9px,1.2vw,14px)}
.brand-wordmark span{color:#f07b2c;margin-right:.35em}
.title-screen{display:grid;grid-template-columns:1fr 43%;padding:0;background:#15101b}
.title-art{display:block;position:absolute;inset:0}
.title-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,10,22,.04) 0%,rgba(17,10,22,.18) 45%,rgba(17,10,22,.96) 63%,#110a16 100%)}
.title-art img{width:100%;height:100%;display:block;object-fit:contain;object-position:left center;image-rendering:pixelated;background:#15101b}
.title-copy{position:relative;z-index:2;grid-column:2;width:auto;max-width:none;padding:clamp(14px,3vw,34px);align-self:center}
.title-copy h1{font-size:clamp(30px,5.1vw,66px);line-height:.88;margin:.12em 0}
.title-copy>p:not(.kicker){margin:.45em auto;line-height:1.3}
.title-actions{display:grid;gap:10px;margin-top:14px}
.title-actions .primary,.title-actions .secondary{width:100%;min-height:44px;margin:0}
.loader{background:#110a16;overflow:hidden}
.loader img{object-fit:contain;image-rendering:pixelated;opacity:.58;background:#15101b}
.loader::after{content:"";position:absolute;inset:0;background:rgba(20,9,26,.38)}
.loader>*:not(img){z-index:2}
.load-track{border-color:#f5c45d;background:#25152c;box-shadow:4px 4px 0 #000}
.load-track i{background:#f07b2c}
.continue-card,.end-card{width:min(900px,94%);display:grid;grid-template-columns:47% 1fr;gap:clamp(12px,2.5vw,28px);padding:clamp(12px,2.5vw,24px);align-items:center}
.continue-art{aspect-ratio:16/9;width:100%;background:#100b17 url('assets/continue-gear-v1.png') center/contain no-repeat;image-rendering:pixelated;border:3px solid #0c090b;outline:2px solid var(--gold)}
.continue-copy,.end-card-copy{text-align:center}
.continue-copy .modal-actions{margin-top:12px}
.continue-copy h2,.end-card-copy h2{font-size:clamp(18px,3vw,35px);line-height:1.05}
.restart-card{position:relative;width:min(960px,96%);height:min(94%,620px);display:grid;grid-template-rows:minmax(0,1fr) auto;background:#110b18;border:5px solid #0c090b;outline:3px solid var(--gold);box-shadow:8px 8px 0 #000;overflow:hidden}
.restart-frame,.end-card-art{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#10131e;image-rendering:pixelated}
.restart-copy{padding:8px 16px 12px;text-align:center;background:#171015}
.restart-copy p,.restart-copy h2{margin:3px}
.restart-skip{position:absolute;z-index:2;right:14px;top:14px}
.end-card-art{aspect-ratio:16/9;border:3px solid #0c090b;outline:2px solid var(--gold)}
.end-card-copy .primary{margin:16px auto 0}
@media(max-height:500px) and (orientation:landscape){
  .title-copy{padding:8px 18px}.title-copy .brand-wordmark{font-size:9px}.title-copy h1{font-size:7.2vh}.title-copy>p:not(.kicker){font-size:2.1vh}.title-actions{gap:6px;margin-top:7px}.title-actions .primary,.title-actions .secondary{min-height:34px;padding:5px 8px}
  .continue-card,.end-card{grid-template-columns:44% 1fr;gap:10px;padding:9px}.continue-copy p,.end-card-copy p{margin:4px 0}.continue-copy h2,.end-card-copy h2{font-size:4.4vh;margin:3px}.continue-copy .modal-actions{gap:6px;margin-top:6px}.continue-copy .modal-actions button,.end-card-copy .primary{min-height:34px;padding:5px 8px}.end-card-copy .primary{margin-top:7px}
  .restart-card{height:94%}.restart-copy{padding:4px 10px 6px}.restart-copy h2{font-size:4.5vh}.restart-skip{min-height:34px;padding:5px 8px}
}