:root {
  --text: #f1e9d6;
  --gold: #f2c14e;
  --danger: #e04545;
  --font-display: 'Press Start 2P', ui-monospace, monospace;
  --hs: min(25vh, 15vw);           /* taille d'un héros */
  --ds: min(60vh, 36vw);           /* taille du dragon */
  --rage: 0;                       /* 0 → 1 selon la piste de colère */
  font-family: 'VT323', ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: var(--text); }
img { image-rendering: pixelated; user-select: none; -webkit-user-drag: none; }

#stage { position: fixed; inset: 0; overflow: hidden; }
#stage.shake { animation: shake .5s steps(8); }

.bg, #architecture {
  position: absolute; inset: 0;
  background: #211a2b url(img/scene-v2.png) center center / cover no-repeat;
  image-rendering: auto;
  animation: torch 3.2s steps(6) infinite;
}
#architecture {
  inset: auto; left: var(--decor-left); top: var(--decor-top);
  width: var(--decor-width); height: var(--decor-height);
  background-size: 100% 100%;
  mask: url(img/scene-architecture-mask.svg) 0 0 / 100% 100% no-repeat;
  pointer-events: none; z-index: 1;
}
.glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 45% 70% at 85% 70%, rgba(255, 70, 20, calc(.15 + var(--rage) * .45)), transparent 70%);
  mix-blend-mode: screen;
  animation: pulse calc(3s - var(--rage) * 1.8s) ease-in-out infinite;
  transition: background 1s;
}
.vignette {
  z-index: 3;
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, #000c 100%);
}
.flash { z-index: 4; position: absolute; inset: 0; background: #ff2a0a; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.flash.on { animation: flash .6s steps(4); }

/* ---------- Héros ---------- */
#heroes {
  z-index: 2;
  position: absolute; left: 3vw; right: calc(var(--ds) + 5vw); top: 32vh; bottom: 7vh;
  display: grid; grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));
  justify-items: center; align-items: end; gap: 3vh 1vw;
}
#heroes[data-count="1"], #heroes[data-count="2"], #heroes[data-count="3"] { top: 40vh; bottom: 15vh; }
#heroes:is([data-count="2"], [data-count="3"]) .hero:nth-child(odd) { margin-bottom: 8vh; }
.hero { --size: calc(var(--hs) * var(--scale, 1)); position: relative; display: grid; justify-items: center; width: var(--size); isolation: isolate; }
.hero[data-depth="rear"] { z-index: 1; }
.hero[data-depth="front"] { z-index: 2; }
.hero[data-depth="rear"] .body { filter: brightness(.9) saturate(.9); }
.hero .hud {
  display: grid; justify-items: center; gap: .6vh; margin-bottom: .5vh;
  padding: .6vh .8vh; background: #000a; border: 2px solid var(--pc); border-radius: 4px;
  width: 100%; min-width: 0;
}
#heroes[data-count="4"] .hud { width: 145%; }
.hero .name {
  font-family: var(--font-display); font-size: max(10px, 1.6vh); color: var(--pc);
  text-shadow: 0 2px 0 #000; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.hpbar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: 100%; }
.hpbar i { aspect-ratio: 1; border-radius: 1px; background: #e33b3b; box-shadow: inset -2px -2px 0 #0005, inset 2px 2px 0 #fff4; transition: background .3s; }
.hpbar i.dmg { background: var(--pc); box-shadow: inset -2px -2px 0 #0007, inset 2px 2px 0 #fff3; filter: brightness(.75); }
.hero .body { position: relative; width: var(--size); height: var(--size); }
.hero .sprite { position: absolute; left: 0; bottom: calc(-1 * var(--foot-offset, 0%)); width: 100%; height: 100%; z-index: 1; }
.hero .body::before {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -5%; height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--pc) 18%, transparent), transparent 70%);
}
.hero .body.flip { transform: scaleX(-1); }
.hero .shadow { position: absolute; left: 23%; right: 23%; bottom: -1%; height: 5%; background: #000b; border-radius: 50%; box-shadow: 0 0 .7vh .3vh #0006; }
.hero.hurt .sprite { animation: hurt .5s steps(5); }
.hero.hurt .body::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #ff000066, transparent 70%); animation: fade .5s steps(4) forwards; }
.hero.ko .sprite { filter: grayscale(1) brightness(.6); transform: rotate(-90deg) translateX(-25%); animation: none; }
.hero.escaped:not(.leaving) .body { visibility: hidden; }
.hero.escaped .hud { border-color: #80cfa4; }
.hero .skull { display: none; position: absolute; top: 10%; left: 50%; width: 30%; transform: translateX(-50%); animation: bob 1.2s steps(2) infinite; }
.hero.ko .skull { display: block; }
.hero.enter { animation: enter 1s steps(10) both; animation-delay: var(--delay, 0s); }

.pop {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  font-family: var(--font-display); font-size: max(12px, 2.4vh); white-space: nowrap;
  text-shadow: 0 3px 0 #000, 0 0 10px currentColor;
  animation: pop 1.4s steps(12) forwards; pointer-events: none; z-index: 5;
}
.pop.dmg { color: #ff4a4a; }
.pop.heal { color: #6dff8a; }
.pop.noise { color: var(--gold); }

/* ---------- Zone de clank ---------- */
#clank-zone {
  z-index: 3;
  position: absolute; top: 4vh; left: 18vw; right: calc(var(--ds) - 4vw);
  display: flex; align-items: center; justify-content: center; gap: 1.5vh;
  min-height: 8vh;
}
.clank-icon { width: 8vh; height: 8vh; opacity: .25; transition: opacity .4s; }
#clank-zone.active .clank-icon { opacity: 1; }
.clank-cubes { display: flex; flex-wrap: wrap; gap: .8vh; max-width: 40vw; }

.cube {
  display: inline-block; width: 3.4vh; height: 3.4vh;
  background: var(--c); border-radius: 3px;
  box-shadow: inset -.5vh -.5vh 0 #0006, inset .5vh .5vh 0 #fff5, 0 .4vh 0 #0008, 0 0 1.2vh color-mix(in srgb, var(--c) 60%, transparent);
}
.cube.black { --c: #2a2633; box-shadow: inset -.5vh -.5vh 0 #000, inset .5vh .5vh 0 #ffffff2a, 0 .4vh 0 #0008; }
.cube.big { width: 7vh; height: 7vh; }
.cube.white { --c: #f4f8ff; }

/* ---------- Dragon ---------- */
#dragon { position: absolute; right: 1vw; bottom: 4vh; width: var(--ds); display: grid; justify-items: center; isolation: isolate; transform-origin: 50% 85%; z-index: 2; }
#dragon::before { content: ""; position: absolute; left: 8%; right: 5%; bottom: 12%; height: 5%; background: #000a; border-radius: 50%; box-shadow: 0 0 1.5vh .7vh #0007; z-index: -1; }
.dragon-sprite { width: 100%; height: auto;  filter: drop-shadow(0 0 calc(1vh + var(--rage) * 3vh) rgba(255, 60, 20, calc(.3 + var(--rage) * .5))); }
.dragon-sprite, .dragon-flying { transition: none; }
.dragon-flying { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; background: url(img/dragon-flight-sheet.png) 0 0 / 800% 100% no-repeat; image-rendering: pixelated; animation: dragon-wings 1.1s steps(8) infinite; }
#dragon.prowling { z-index: 0; }
#dragon:is(.prowling, .landing, .departing)::before { opacity: 0; }
#dragon:is(.prowling, .landing, .departing) .dragon-sprite { opacity: 0; }
#dragon:is(.prowling, .landing, .departing) .dragon-flying { opacity: 1; }
#dragon.prowling .dragon-flying, #dragon.prowling .dragon-looking { filter: brightness(.8) saturate(.9); }
.dragon-looking { display: none; position: absolute; inset: 0; background: url(img/dragon-turnaround.png) left center / 200% 100% no-repeat; image-rendering: pixelated; }
#dragon.prowling[data-pose="right"] .dragon-flying { transform: scaleX(-1); }
#dragon.prowling:is([data-pose="front"], [data-pose="back"]) .dragon-flying { opacity: 0; }
#dragon.prowling:is([data-pose="front"], [data-pose="back"]) .dragon-looking { display: block; }
#dragon.prowling[data-pose="back"] .dragon-looking { background-position: right center; }
#dragon-mouth { position: absolute; left: 15%; top: 40%; width: 1px; height: 1px; }
.fire-spark { position: absolute; width: 2.6vh; height: 2.6vh; background: linear-gradient(90deg, #fff6b5, #ffbc31 35%, #ff501a 75%, #a41b13); clip-path: polygon(0 40%, 25% 18%, 56% 28%, 100% 0, 78% 48%, 100% 80%, 40% 75%, 0 60%); filter: drop-shadow(0 0 .6vh #ff6a1a); }
#dragon.roar .dragon-sprite { animation: roar .9s steps(6); }
.rage { position: absolute; top: 3vh; right: 4vw; z-index: 3; list-style: none; margin: 0; padding: .6vh; display: flex; gap: .6vh; background: #000a; border-radius: 4px; border: 2px solid #7d1d1d; }
.rage li {
  display: grid; place-items: center;
  width: min(4.2vh, 5vw); height: min(4.8vh, 5.8vw);
  font-family: var(--font-display); font-size: max(9px, min(1.5vh, 1.9vw));
  color: #ffffff40; background: #ffffff0d; border-radius: 2px;
}
.rage li.lit { color: #fff; background: linear-gradient(#ffcf4d, #e8582a 60%, #a8200f); box-shadow: 0 0 1.2vh #ff6a1a; text-shadow: 0 2px 0 #0008; }
.rage li.current { outline: 2px solid #fff; }

/* ---------- Sac ---------- */
#bag { position: absolute; right: calc(var(--ds) - 1vw); bottom: 5vh; width: 11vh; z-index: 1; display: grid; justify-items: center; }
#bag img { width: 100%; }
#bag .count {
  font-family: var(--font-display); font-size: max(10px, 1.8vh);
  background: #000b; padding: .4vh .8vh; border-radius: 4px; margin-top: -1vh;
}
#bag.shake img { animation: jiggle .2s steps(2) 3; }
.ghost-bag { display: flex; align-items: center; gap: .7vh; padding: .4vh .8vh; margin-top: .5vh; background: #151b29dd; border: 1px solid #b5cdec80; border-radius: 4px; font-size: max(16px, 2.2vh); }
.ghost-bag[hidden] { display: none; }
.ghost-bag .cube { width: 1.8vh; height: 1.8vh; }
.ghost-effect { position: absolute; width: min(22vh, 22vw); height: min(22vh, 22vw); object-fit: contain; filter: drop-shadow(0 0 1.5vh #bfeaff); z-index: 4; }
#ghost-roamer { position: absolute; left: 5vw; top: 45vh; width: min(18vh, 18vw); pointer-events: none; z-index: 2; animation: ghost-roam 18s ease-in-out infinite; }
#ghost-roamer[hidden] { display: none; }
#ghost-roamer img { display: block; width: 100%; opacity: .8; filter: drop-shadow(0 0 1.2vh #bfeaff); }
#ghost-roamer::before { content: ""; position: absolute; left: 25%; right: 25%; bottom: 10%; height: 5%; background: #07111c70; border-radius: 50%; }
#draw-layer { z-index: 4; position: absolute; inset: 0; pointer-events: none; }
#draw-layer .cube { position: absolute; animation: none; }

/* ---------- Bannière ---------- */
#banner {
  z-index: 5;
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: max(16px, 4.5vh); text-align: center; line-height: 1.5;
  color: #fff; text-shadow: 0 .5vh 0 #000, 0 0 2vh #ff3a1a;
  opacity: 0; pointer-events: none; width: max-content; max-width: 90vw;
  padding: 2vh 4vh; background: #000b; border: 3px solid #7d1d1d; border-radius: 6px;
}
#banner small { display: block; font-size: .5em; color: var(--gold); text-shadow: 0 .3vh 0 #000; margin-top: 1vh; }
#banner.show { animation: banner var(--dur, 2.5s) steps(20) forwards; }

/* ---------- Pas de partie ---------- */
#idle {
  z-index: 6;
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 2vh;
  background: #000a; text-align: center;
}
#stage.no-game #idle { display: flex; }
#stage.no-game :is(#heroes, #dragon, #bag, #clank-zone, .rage) { display: none; }
#idle h1 { font-family: var(--font-display); font-weight: 400; font-size: max(16px, 4vh); color: var(--gold); margin: 0; text-shadow: 0 .5vh 0 #000; }
#idle p { font-size: max(18px, 3vh); margin: 0; }
#idle .sleeping { width: 28vh; filter: brightness(.5) saturate(.6);  }
#qr { background: #fff; padding: 1.2vh; border-radius: 4px; }
#qr img, #qr canvas { width: 16vh !important; height: 16vh !important; display: block; }
.url { color: #a89cbc; }

#offline {
  z-index: 7;
  position: absolute; top: 2vh; left: 50%; transform: translateX(-50%);
  background: #7d1d1d; padding: 1vh 2vh; border-radius: 4px; font-size: max(16px, 2.4vh);
  display: none;
}
#stage.offline #offline { display: block; }

#fullscreen {
  position: fixed; top: 10px; right: 10px; z-index: 10;
  width: 44px; height: 44px; font-size: 22px;
  color: #fff; background: #0006; border: 2px solid #fff3; border-radius: 6px;
  opacity: .35; cursor: pointer;
}
:fullscreen #fullscreen, body.fs #fullscreen { display: none; }

/* ---------- Animations ---------- */
@keyframes dragon-wings { to { background-position-x: calc(var(--ds) * -8); } }

@keyframes ghost-roam { 0%, 100% { transform: translate(0, 0) scale(.9); } 25% { transform: translate(18vw, 8vh) scale(1); } 50% { transform: translate(38vw, 2vh) scale(.85); } 75% { transform: translate(20vw, 12vh) scale(1); } }
@keyframes torch { 0%, 100% { filter: brightness(1); } 30% { filter: brightness(.93); } 60% { filter: brightness(1.04); } 80% { filter: brightness(.97); } }
@keyframes pulse { 50% { opacity: .65; } }
@keyframes roar { 20%, 60% { filter: brightness(1.35) drop-shadow(0 0 3vh #ff6a1a); } 40%, 80% { filter: brightness(1.1) drop-shadow(0 0 1.5vh #ff3a1a); } }
@keyframes shake { 0%, 100% { transform: none; } 12% { transform: translate(-1.2vh, .6vh); } 25% { transform: translate(1.2vh, -.6vh); } 37% { transform: translate(-.8vh, -.6vh); } 50% { transform: translate(.8vh, .6vh); } 75% { transform: translate(-.4vh, .3vh); } }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes hurt { 0%, 100% { transform: none; filter: none; } 20%, 60% { transform: translateX(-6%); filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(5); } 40%, 80% { transform: translateX(6%); } }
@keyframes fade { to { opacity: 0; } }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -30%) scale(1.15); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%); } }
@keyframes jiggle { 50% { transform: rotate(-6deg) scale(1.06); } }
@keyframes bob { 50% { transform: translate(-50%, -15%); } }
@keyframes enter { from { transform: translateX(-60vw); opacity: 0; } 20% { opacity: 1; } to { transform: none; } }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 12% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* Tablette en portrait : le dragon domine la scène, les héros occupent toute la largeur en bas. */
@media (orientation: portrait) {
  :root { --hs: min(16vh, 24vw); --ds: min(52vw, 33vh); }
  #heroes { left: 3vw; right: 3vw; top: 54vh; bottom: 5vh; gap: 2vh 2vw; }
  #heroes[data-count="1"], #heroes[data-count="2"], #heroes[data-count="3"] { top: 62vh; bottom: 8vh; }
  #heroes:is([data-count="2"], [data-count="3"]) .hero:nth-child(odd) { margin-bottom: 4vh; }
  #dragon { bottom: 43vh; right: 2vw; }
  #bag { right: auto; left: 6vw; bottom: 44vh; }
  #clank-zone { left: 4vw; right: 4vw; top: 12vh; }
  #ghost-roamer { top: 59vh; }
  .clank-cubes { max-width: 80vw; }
  .glow { background: radial-gradient(ellipse 70% 40% at 70% 50%, rgba(255, 70, 20, calc(.15 + var(--rage) * .45)), transparent 70%); }
}



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Sound remains accessible in fullscreen, without covering the heroes. */
#sound-controls {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  z-index: 10; display: flex; align-items: center; gap: 8px; padding: 4px 10px;
  max-width: calc(100vw - 82px); box-sizing: border-box;
  border: 1px solid #ffffff30; border-radius: 8px; background: #14111cdd; color: #e8d7b2;
  font: 16px sans-serif;
}
#sound-toggle { min-height: 40px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
#sound-volume { width: clamp(55px, 10vw, 110px); min-height: 40px; accent-color: #e8bd69; }
#sound-controls :focus-visible { outline: 2px solid #e8bd69; outline-offset: 2px; }
@media (max-width: 480px) { #sound-controls label { display: none; } #sound-controls { font-size: 13px; gap: 4px; } }

#sound-controls { flex-wrap: wrap; }
#sound-preview { min-height: 40px; border: 0; background: transparent; color: #edc477; font: inherit; cursor: pointer; }
#sound-preview:disabled { opacity: .4; cursor: default; }
.sound-credits { color: #baafc5; text-decoration: none; padding: 8px 2px; }


/* Inventaire dans le cadre du joueur, indépendant du sprite animé. */
.hero-heading { display: flex; align-items: center; justify-content: center; gap: .6vh; width: 100%; min-width: 0; }
.hero-heading .name { min-width: 0; }
.hero-artifact { display: flex; align-items: center; gap: .3vh; flex-shrink: 0; }
.hero-artifact[hidden] { display: none; }
.hero-artifact img { display: block; width: clamp(16px, 2.5vh, 28px); height: clamp(16px, 2.5vh, 28px); object-fit: contain; }
.hero-artifact .artifact-item { display: flex; align-items: center; }

/* Living characters: the HUD stays still while the actor performs. */
.hero .body {
  display: block; padding: 0; border: 0; border-radius: 12px;
  background: none; color: inherit; cursor: pointer; overflow: visible;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hero .body:disabled { cursor: default; }
.body:focus-visible, .refuge-guest:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.actor { display: block; position: absolute; inset: 0; transform-origin: 50% 95%; }
.actor.flip { scale: -1 1; }
.hero:not(.ko):not(.leaving) .actor { animation: hero-breathe 3.8s ease-in-out infinite; animation-delay: var(--delay); }
.hero[data-condition="tired"] .actor { animation-duration: 5.2s; }
.hero:not(.ko)[data-condition="tired"] .sprite { filter: brightness(.84) saturate(.8); }
.hero.curious .actor { rotate: -5deg; transition: rotate .35s ease; }
.hero[data-gesture="look"] .actor { animation: hero-glance 1.5s ease-in-out; }
.hero[data-gesture="wave"] .actor { animation: hero-wave 1.5s ease-in-out; }
.hero[data-gesture="stumble"] .actor { animation: hero-stumble .9s ease-out; }
.hero[data-gesture="shush"] .actor { animation: hero-shush 1.15s ease-in-out; }
.hero[data-gesture="proud"] .actor { animation: hero-proud 1.25s ease-in-out; }
.hero[data-gesture="relief"] .actor { animation: hero-relief 1.8s ease-in-out; }
.hero[data-gesture="walk"] .actor { animation: hero-stride .28s steps(2) infinite; }
.hero.leaving { z-index: 6; }
.hero.leaving .body { visibility: visible; }
.hero.leaving .actor { animation: hero-stride .28s steps(2) infinite; }
.hero.ko .actor { animation: none; }

.carried-treasure {
  position: absolute; z-index: 2; left: 64%; top: 44%;
  display: flex; align-items: end; justify-content: center;
  width: 26%; height: 26%; pointer-events: none;
  filter: drop-shadow(0 0 .5vh #ffd96d);
  transition: top .3s, left .3s;
}
.carried-treasure[hidden] { display: none; }
.carried-treasure img { width: 100%; height: 100%; object-fit: contain; }
.carried-treasure img + img { width: 70%; height: 70%; margin-left: -35%; transform: translateY(20%); }
[data-pose="proud"] .carried-treasure { top: -1%; left: 65%; }
.claiming .carried-treasure { opacity: 0; }
.treasure-glow::after {
  content: '✦'; position: absolute; top: -4%; left: 51%; font: 3vh serif;
  color: #fff1b4; text-shadow: 0 0 1vh #ffbd37; animation: treasure-twinkle 1s ease-in-out infinite;
}
.flying-artifact { position: absolute; width: min(10vh, 10vw); height: min(10vh, 10vw); object-fit: contain; filter: drop-shadow(0 0 2vh #ffc64e); }
.speech-bubble {
  position: absolute; z-index: 7; left: 50%; top: 24%; translate: -50% -100%;
  width: max-content; max-width: 24vw; padding: .7vh 1.1vh;
  border: 2px solid #e5d2b1; border-radius: 6px; background: #231b31f2;
  color: #fff1d6; font: max(18px, 2.6vh) 'VT323', monospace;
  box-shadow: 0 .5vh 0 #0008; pointer-events: none; animation: speech-appear .18s ease-out;
}
.speech-bubble::after {
  content: ''; position: absolute; bottom: -7px; left: calc(50% - 5px);
  width: 9px; height: 9px; background: #231b31; border-right: 2px solid #e5d2b1; border-bottom: 2px solid #e5d2b1; rotate: 45deg;
}
.theatrical #banner { top: 19%; font-size: max(14px, 2.8vh); padding: 1.2vh 2vh; }
#dragon:is(.listening, .coveting) .dragon-looking { animation: dragon-listen 1.1s ease-in-out; }
#dragon.embarrassed .dragon-sprite { animation: dragon-cough .45s steps(3) 3; }
.smoke-puff {
  position: absolute; width: 4vh; height: 4vh; border-radius: 45%;
  background: radial-gradient(circle at 35% 35%, #d4c3bddd, #88777888 60%, transparent 75%);
}

/* Escaped actors gather under a warm arch; their health panels stay on stage. */
#refuge {
  position: absolute; left: 3vw; top: 11vh; width: min(21vw, 30vh); height: 21vh;
  z-index: 2; isolation: isolate; text-align: center;
}
#refuge[hidden] { display: none; }
.refuge-arch {
  position: absolute; inset: 0 4% 1%; z-index: -1;
  border: 1.2vh solid #574638; border-bottom: 1.3vh solid #bc8d4a;
  border-radius: 48% 48% 3px 3px;
  background: radial-gradient(ellipse at 50% 80%, #d2933d66, #241c20e8 75%);
  box-shadow: inset 0 0 2vh #f2ba4b44, 0 0 2vh #0008;
}
.refuge-title {
  display: inline-block; margin-top: 1.4vh; position: relative; z-index: 2;
  padding: .4vh 1vh; border: 1px solid #a8793e; border-radius: 4px;
  background: #302318; color: #ffe1a0; font: max(16px, 2.5vh) 'VT323', monospace;
}
.refuge-guests { position: absolute; inset: 5vh 7% 1.5vh; display: flex; align-items: end; justify-content: center; }
.refuge-guest {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  width: 38%; height: 100%; max-width: 12vh; flex: 1; min-width: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.refuge-guest .actor { inset: auto 0 0; width: 100%; aspect-ratio: 1; }
.refuge-guest .sprite { display: block; width: 100%; height: 100%; }
.refuge-guest[data-gesture="wave"] .actor { animation: hero-wave 1.3s ease-in-out; }
.refuge-guest .speech-bubble { top: 30%; max-width: 25vw; }

@keyframes hero-breathe { 50% { transform: translateY(-1.2%) scaleY(1.012); } }
@keyframes hero-glance { 30%, 65% { transform: translateX(2%) rotate(3deg); } }
@keyframes hero-wave { 20%, 60% { transform: translateY(-3%) rotate(-3deg); } 40%, 80% { transform: translateY(-1%) rotate(3deg); } }
@keyframes hero-stumble { 20% { transform: translate(10%, -4%) rotate(12deg); } 55% { transform: translate(-6%, 1%) rotate(-8deg); } 80% { transform: translate(3%, 0) rotate(3deg); } }
@keyframes hero-shush { 35%, 70% { transform: translateX(-4%) rotate(-5deg); } }
@keyframes hero-proud { 25% { transform: translateY(-7%) scale(1.05); } 55%, 80% { transform: translateY(-2%); } }
@keyframes hero-relief { 20% { transform: translateY(3%) scaleY(.95); } 55% { transform: translateY(-2%) rotate(-3deg); } 80% { transform: rotate(3deg); } }
@keyframes hero-stride { 50% { transform: translateY(-4%) rotate(3deg); } }
@keyframes treasure-twinkle { 50% { opacity: .3; transform: rotate(90deg) scale(.6); } }
@keyframes speech-appear { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes dragon-listen { 35%, 65% { transform: rotate(-8deg) scale(1.08); filter: brightness(1.2); } }
@keyframes dragon-cough { 50% { transform: translate(-2%, 1%) rotate(-2deg); } }
@media (orientation: portrait) {
  #refuge { left: 4vw; top: 22vh; width: 36vw; height: 22vh; }
  .speech-bubble { max-width: 45vw; font-size: max(18px, 2.1vh); }
  .theatrical #banner { top: 17%; font-size: max(14px, 2.3vh); }
}
@media (prefers-reduced-motion: reduce) {
  .actor, .dragon-looking, .dragon-sprite { animation: none !important; }
  .carried-treasure { transition: none; }
}