:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  background: #130c09;
  color: #fff5d6;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body { overflow: hidden; background: #130c09; }

.phone-only[hidden] { display: none; }
.phone-only { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 2rem; color: #f5dfaa; background: linear-gradient(rgba(8,4,2,.78), rgba(8,4,2,.92)), url("assets/paysages/auberge-splash.png") center / cover no-repeat; }
.phone-only__card { width: min(30rem, 100%); padding: 2.2rem; border: 1px solid #bd8741; border-radius: .45rem; background: rgba(27,14,8,.94); box-shadow: inset 0 0 0 3px #35190d, 0 1rem 4rem #000; text-align: center; }
.phone-only__icon { width: 3.4rem; height: 5.2rem; margin: 0 auto 1.2rem; border: 2px solid #e0ac53; border-radius: .45rem; color: transparent; box-shadow: inset 0 -.45rem 0 -.3rem #e0ac53, 0 0 1.3rem rgba(224,172,83,.18); }
.phone-only__card p { margin: 0 0 .45rem; color: #c98d49; font: 700 .65rem/1 Cinzel, serif; letter-spacing: .2em; text-transform: uppercase; }
.phone-only__card h1 { margin: 0; color: #ffe7a5; font: 700 clamp(1.5rem, 4vw, 2.2rem)/1.2 Cinzel, serif; letter-spacing: 0; text-shadow: 0 2px #3b190d; }
.phone-only__card span { display: block; margin-top: .9rem; color: #cdbb98; font-size: .9rem; line-height: 1.55; }
.phone-only__languages { display: flex; justify-content: center; gap: .55rem; margin-top: 1.35rem; }
.phone-only__languages button { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 1px solid rgba(224,172,83,.55); border-radius: 50%; color: #cdbb98; background: rgba(12,6,3,.7); font: 700 .72rem/1 Cinzel, serif; text-transform: lowercase; cursor: pointer; }
.phone-only__languages button[aria-pressed="true"] { border-color: #f0c36a; color: #fff0bd; background: linear-gradient(#8a471f, #54210e); box-shadow: inset 0 0 0 2px #32150b, 0 0 1rem rgba(224,172,83,.2); }
.is-phone-blocked > :not(.phone-only) { visibility: hidden; }

button, input { font: inherit; }

.splash {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: start;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

.splash[hidden] { display: none; }

.splash__backdrop,
.splash__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.splash__backdrop {
  background: url("assets/paysages/auberge-splash.png") center center / cover no-repeat;
  scale: 1.02;
  animation: awaken 7s ease-out both;
}

.splash__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 4, 3, .78) 0%, rgba(8, 4, 2, .30) 34%, transparent 51%, rgba(5, 3, 2, .25) 67%, rgba(6, 3, 2, .88) 100%),
    radial-gradient(circle at 50% 22%, transparent 0 28%, rgba(3, 2, 1, .34) 76%);
}

.brand {
  width: min(34rem, 100%);
  margin: clamp(1rem, 8vh, 5rem) auto 0;
  text-align: center;
  filter: drop-shadow(0 .15rem .1rem #000) drop-shadow(0 .5rem 1rem #000);
  animation: title-in 1s .15s cubic-bezier(.2,.8,.2,1) both;
}

.brand__ornament { display: flex; align-items: center; gap: .7rem; margin: 0 auto .65rem; width: 9rem; color: #d8a547; }
.brand__ornament::before, .brand__ornament::after { content: ""; height: 1px; flex: 1; background: currentColor; box-shadow: 0 0 .4rem currentColor; }
.brand__ornament span { width: .55rem; height: .55rem; rotate: 45deg; border: 1px solid currentColor; background: #7c411c; }

.brand__eyebrow,
.brand__subtitle {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: #e7c47a;
  font-size: clamp(.61rem, 2.3vw, .78rem);
  font-weight: 600;
}

h1 {
  margin: .22rem 0 .05rem;
  font: 800 clamp(2.8rem, 13vw, 6.2rem)/.83 Cinzel, Georgia, serif;
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: #f5d991;
  text-shadow: 0 2px 0 #7d3817, 0 5px 0 #32160d, 0 0 1.6rem rgba(224, 142, 40, .3);
}

h1 span { display: block; font-size: .52em; letter-spacing: .23em; margin-right: -.23em; color: #fff3c0; }
.brand__subtitle { color: #c98d49; letter-spacing: .36em; margin-right: -.36em; }

.actions {
  align-self: end;
  width: min(29rem, 100%);
  margin: 0 auto clamp(2.2rem, 7vh, 5rem);
  text-align: center;
  animation: actions-in .85s .65s ease-out both;
}

.enter-button {
  position: relative;
  width: 100%;
  min-height: 4.2rem;
  border: 1px solid #efbd5e;
  border-radius: .35rem;
  padding: .9rem 1rem;
  overflow: hidden;
  color: #fff3cb;
  background: linear-gradient(180deg, rgba(139, 66, 25, .96), rgba(76, 31, 14, .98));
  box-shadow: inset 0 0 0 2px #3c1b0e, inset 0 1px 0 3px rgba(255, 214, 126, .25), 0 .5rem 1.5rem rgba(0,0,0,.6), 0 0 1.8rem rgba(223, 126, 30, .18);
  font: 700 clamp(.88rem, 3.8vw, 1.1rem)/1 Cinzel, Georgia, serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, filter .14s ease;
}

.enter-button::before, .enter-button::after { content: "◆"; position: absolute; top: 50%; translate: 0 -50%; color: #dca64d; font-size: .55rem; }
.enter-button::before { left: 1rem; }
.enter-button::after { right: 1rem; }
.enter-button__icon { margin-right: .55rem; color: #f6cd75; font-size: 1.2em; }
.enter-button__glow { position: absolute; inset: -100% 45%; rotate: 20deg; background: rgba(255,255,255,.12); animation: glint 3.8s 1.4s infinite; }
.enter-button:hover { filter: brightness(1.16); transform: translateY(-2px); }
.enter-button:active { transform: translateY(1px) scale(.985); }
.enter-button:focus-visible { outline: 3px solid #fff2b1; outline-offset: 4px; }

.hint { margin: .8rem 0 0; color: rgba(255, 230, 186, .7); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; animation: breathe 2.2s infinite ease-in-out; }
.version { position: absolute; bottom: max(.55rem, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center; color: rgba(255,255,255,.32); font-size: .61rem; letter-spacing: .1em; }

.game-screen[hidden] { display: none; }
.game-screen { position: relative; isolation: isolate; min-height: 100svh; min-height: 100dvh; overflow: hidden; opacity: 0; }
.game-screen.is-active { animation: location-in .9s ease-out forwards; }
.game-screen.is-leaving { animation: location-out .6s ease-in forwards; pointer-events: none; }
.dungeon-screen { background: #080706; }
.dungeon-map { position: absolute; top: max(3.9rem, calc(env(safe-area-inset-top) + 3.2rem)); right: 0; bottom: max(4.7rem, calc(env(safe-area-inset-bottom) + 4.1rem)); left: 0; width: 100%; height: calc(100% - max(3.9rem, calc(env(safe-area-inset-top) + 3.2rem)) - max(4.7rem, calc(env(safe-area-inset-bottom) + 4.1rem))); }
.dungeon-elements { position: absolute; z-index: 2; top: max(3.9rem, calc(env(safe-area-inset-top) + 3.2rem)); right: 0; bottom: max(4.7rem, calc(env(safe-area-inset-bottom) + 4.1rem)); left: 0; }
.dungeon-elements button { position: absolute; display: grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; padding: .25rem; border: 1px solid rgba(244,188,81,.88); border-radius: 50%; color: #ffe4a0; background: rgba(45,22,10,.92); box-shadow: 0 0 .8rem rgba(238,151,47,.38); translate: -50% -50%; cursor: pointer; }
.dungeon-elements button > span { font-size: 1rem; line-height: 1; }
.dungeon-elements button > strong { position: absolute; top: calc(100% + .18rem); left: 50%; padding: .15rem .28rem; border-radius: .18rem; color: #f0d49b; background: rgba(8,6,4,.88); font: 700 .42rem/1.1 Cinzel, serif; text-transform: uppercase; white-space: nowrap; translate: -50% 0; }
.dungeon-elements button.is-looted { opacity: .38; filter: grayscale(.8); cursor: default; }
.dungeon-elements button.is-obstacle { border-style: dashed; border-color: rgba(202,157,84,.58); color: #cbb890; background: rgba(31,24,17,.82); box-shadow: none; }
.dungeon-retreat { position: fixed; z-index: 5; left: 50%; bottom: max(.85rem, env(safe-area-inset-bottom)); min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgba(214,166,89,.72); border-radius: 1.5rem; color: #ead3a4; background: rgba(24,13,8,.9); box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.55); font: 700 .57rem/1 Cinzel, serif; letter-spacing: .06em; text-transform: uppercase; translate: -50% 0; cursor: pointer; backdrop-filter: blur(7px); }
.dungeon-element-detail { position: fixed; z-index: 6; right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); left: max(.75rem, env(safe-area-inset-left)); padding: 1rem 2.7rem 1rem 1rem; border: 1px solid #c28a43; border-radius: .35rem; color: #ead5a8; background: rgba(25,13,8,.96); box-shadow: 0 .7rem 2rem rgba(0,0,0,.7); }
.dungeon-element-detail[hidden] { display: none; }
.dungeon-element-detail button { position: absolute; top: .2rem; right: .25rem; width: 2.4rem; height: 2.4rem; border: 0; color: #ddba79; background: transparent; font-size: 1.5rem; cursor: pointer; }
.dungeon-element-detail strong { display: block; color: #ffd98b; font: 700 .78rem/1.2 Cinzel, serif; text-transform: capitalize; }
.dungeon-element-detail p { margin: .45rem 0 0; font-size: .68rem; line-height: 1.45; }
.dungeon-element-boss { float: left; width: 5.2rem; height: 6.4rem; margin: .35rem .75rem .25rem 0; overflow: hidden; }
.dungeon-element-boss[hidden] { display: none; }
.dungeon-element-boss img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.7)); }
.dungeon-element-detail dl { display: grid; gap: .3rem; margin: .7rem 0 0; padding-top: .65rem; border-top: 1px solid rgba(194,138,67,.45); }
.dungeon-element-detail dl[hidden] { display: none; }
.dungeon-element-detail dl > div { display: flex; justify-content: space-between; gap: .7rem; font-size: .58rem; }
.dungeon-element-detail dt { color: #ae9a77; text-transform: capitalize; }
.dungeon-element-detail dd { margin: 0; color: #f1c978; text-align: right; }
.dungeon-route { width: min(30rem, calc(100% - 1.25rem)); max-height: calc(100dvh - 1.25rem); margin: auto; padding: 0; overflow: visible; border: 0; color: #ead5a8; background: transparent; }
.dungeon-route::backdrop { background: rgba(3,5,7,.82); backdrop-filter: blur(5px); }
.dungeon-route__card { max-height: calc(100dvh - 1.25rem); overflow: auto; padding: 1.25rem; border: 1px solid #b88743; border-radius: .45rem; background: radial-gradient(circle at 50% 0, rgba(93,113,115,.24), transparent 38%), linear-gradient(#1c211f, #0b0e0d); box-shadow: inset 0 0 0 3px #29302b, 0 1.5rem 4rem #000; }
.dungeon-route h2 { margin: 0; color: #ffe4a0; font: 700 1.12rem/1.2 Cinzel, serif; text-align: center; text-transform: uppercase; }
.dungeon-route h3 { margin: 0 0 .55rem; color: #ffe4a0; font: 700 .9rem/1.2 Cinzel, serif; text-transform: uppercase; }
#dungeon-route-target { margin: .55rem 0 .85rem; color: #d4c39e; font-size: .7rem; line-height: 1.4; text-align: center; }
#dungeon-route-costs { display: grid; gap: .35rem; margin: 0; }
#dungeon-route-costs[hidden], .dungeon-route__encounters[hidden], #dungeon-route-target[hidden] { display: none; }
#dungeon-route-costs > div { display: flex; justify-content: space-between; gap: .8rem; padding: .48rem .6rem; border: 1px solid rgba(177,135,71,.42); border-radius: .25rem; background: rgba(8,10,9,.55); font-size: .65rem; }
#dungeon-route-costs dt { color: #b9aa8e; } #dungeon-route-costs dd { margin: 0; color: #f2cb78; font-weight: 800; }
.dungeon-route__encounters { display: grid; gap: .3rem; margin-top: .7rem; }
.dungeon-route__encounters p { margin: 0; padding: .4rem .55rem; border-left: 2px solid #a36c35; color: #cdbb98; background: rgba(67,35,18,.32); font-size: .58rem; line-height: 1.35; }
.dungeon-route__status { min-height: 1rem; margin: .75rem 0; color: #e8ad67; font-size: .65rem; line-height: 1.4; text-align: center; }
.dungeon-route__status.is-impossible { color: #ff8e79; }
.dungeon-route__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.dungeon-route__actions button, .dungeon-route__continue { min-height: 3rem; border: 1px solid #a9793e; border-radius: .3rem; color: #f3dfb2; background: linear-gradient(#5d3c21, #2e1c10); font: 700 .63rem/1.2 Cinzel, serif; text-transform: uppercase; cursor: pointer; }
.dungeon-route__actions button:last-child { border-color: #d3a04e; background: linear-gradient(#945326, #572b13); }
.dungeon-route__actions button:disabled { opacity: .38; cursor: not-allowed; }
.dungeon-route__result { margin: .8rem 0; padding: .8rem; border: 1px solid #c99b4d; border-radius: .3rem; background: rgba(104,61,24,.35); text-align: center; }
.dungeon-route__result[hidden] { display: none; }
#dungeon-route-rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
#dungeon-route-rewards span { padding: .35rem .5rem; border: 1px solid rgba(239,190,91,.45); border-radius: 1rem; color: #ffe19a; background: rgba(15,9,5,.7); font-size: .62rem; }
.dungeon-route__continue { width: 100%; }
.tavern-screen__backdrop, .tavern-screen__shade, .public-square__backdrop, .public-square__shade { position: absolute; inset: 0; z-index: -2; }
.tavern-screen__backdrop { background: url("assets/paysages/auberge-splash.png") center center / cover no-repeat; scale: 1.03; }
.tavern-screen__shade { z-index: -1; background: linear-gradient(180deg, rgba(9,5,3,.55), transparent 30%, transparent 70%, rgba(8,4,2,.58)); }
.public-square__backdrop { background: url("assets/paysages/place-publique.png") center center / cover no-repeat; scale: 1.03; }
.public-square__shade { z-index: -1; background: linear-gradient(180deg, rgba(9,6,3,.6), transparent 28%, transparent 68%, rgba(8,5,3,.55)); }
.location-banner { position: absolute; top: max(1.25rem, env(safe-area-inset-top)); left: 50%; translate: -50%; width: min(22rem, calc(100% - 2.5rem)); padding: .75rem 1rem .85rem; border: 1px solid rgba(225,174,82,.75); border-radius: .25rem; color: #f7dfa0; background: linear-gradient(rgba(45,24,12,.88), rgba(24,12,7,.92)); box-shadow: inset 0 0 0 2px rgba(48,23,10,.8), 0 .6rem 1.8rem rgba(0,0,0,.5); text-align: center; backdrop-filter: blur(5px); }
.location-banner::before, .location-banner::after { content: "◆"; position: absolute; top: 50%; translate: 0 -50%; color: #c78c42; font-size: .45rem; }
.location-banner::before { left: .75rem; }
.location-banner::after { right: .75rem; }
.location-banner p, .location-banner span { margin: 0; color: #c98d49; font: 700 .55rem/1 Cinzel, serif; letter-spacing: .22em; text-transform: uppercase; }
.location-banner h2 { margin: .2rem 0 .15rem; color: #ffe8a9; font: 700 clamp(1.25rem, 6vw, 1.7rem)/1 Cinzel, serif; text-transform: uppercase; text-shadow: 0 2px #421d0d; }
.location-banner span { color: #d8bd87; font-size: .5rem; }
.location-arrival { position: absolute; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); translate: -50%; margin: 0; color: rgba(255,242,207,.88); font: 600 .66rem/1 Cinzel, serif; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 2px .5rem #000; white-space: nowrap; animation: breathe 2.5s ease-in-out infinite; }
.public-hero, .shop-hero, .gate-hero, .church-hero, .apothecary-hero, .road-hero { position: absolute; z-index: 1; left: var(--hero-x, 50%); top: var(--hero-y, 68%); translate: -50% -100%; scale: var(--hero-scale, 1.027); width: min(8.5rem, 34vw); filter: drop-shadow(0 .7rem .45rem rgba(0,0,0,.65)); will-change: left, top, scale; }
.public-hero.is-warrior, .shop-hero.is-warrior, .gate-hero.is-warrior, .church-hero.is-warrior, .apothecary-hero.is-warrior, .road-hero.is-warrior { width: min(10rem, 40vw); }
.public-hero img, .shop-hero img, .gate-hero img, .church-hero img, .apothecary-hero img, .road-hero img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.public-hero img.is-facing-left, .shop-hero img.is-facing-left, .gate-hero img.is-facing-left, .church-hero img.is-facing-left, .apothecary-hero img.is-facing-left, .road-hero img.is-facing-left { transform: scaleX(-1); }
.movement-pad { --direction-angle: 0deg; position: absolute; z-index: 2; left: max(1.25rem, env(safe-area-inset-left)); bottom: max(1.75rem, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 8rem; height: 8rem; border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; }
.movement-pad__ring { position: relative; width: 7rem; height: 7rem; border: 1px solid rgba(245,211,143,.48); border-radius: 50%; background: radial-gradient(circle, rgba(31,16,9,.42) 0 42%, rgba(20,10,6,.65) 43% 100%); box-shadow: inset 0 0 0 3px rgba(50,25,12,.45), 0 .4rem 1.3rem rgba(0,0,0,.4); backdrop-filter: blur(4px); }
.movement-pad__knob { position: absolute; left: 50%; top: 50%; width: 2.8rem; height: 2.8rem; margin: -1.4rem; border: 1px solid #d8a652; border-radius: 50%; background: linear-gradient(#8b491f, #4c210f); box-shadow: inset 0 0 0 2px #32160c, 0 .25rem .6rem rgba(0,0,0,.6); transition: transform .08s linear; }
.movement-pad__arrow { position: absolute; z-index: 1; left: 50%; top: .42rem; translate: -50%; color: rgba(250,217,151,.45); font-size: .75rem; transform: rotate(var(--direction-angle)); transform-origin: 50% 3.05rem; transition: color .15s ease; }
.movement-pad.is-active .movement-pad__arrow { color: #ffd77f; text-shadow: 0 0 .5rem #e88c27; }
.movement-pad.is-active .movement-pad__knob { filter: brightness(1.15); }
.travel-zones { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.travel-zone { position: absolute; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,219,146,.5); border-radius: .35rem; color: #ffe8b1; background: rgba(62,31,15,.42); box-shadow: inset 0 0 2rem rgba(228,151,48,.08), 0 .3rem 1rem rgba(0,0,0,.25); opacity: 0; pointer-events: none; backdrop-filter: blur(2px); transition: opacity .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.travel-zone span { display: block; max-width: 100%; padding: .15rem .3rem; font: 700 clamp(.5rem, 2.2vw, .68rem)/1.1 Cinzel, serif; letter-spacing: .06em; text-align: center; text-transform: uppercase; text-shadow: 0 2px .3rem #000; }
.public-square.is-moving .travel-zone { opacity: 1; pointer-events: auto; }
.travel-zone.is-targeted { border-color: #ffd57d; background: rgba(196,104,30,.38); box-shadow: inset 0 0 2.5rem rgba(255,184,69,.3), 0 0 1.5rem rgba(238,145,43,.35); animation: zone-target 1s ease-in-out infinite; }
.travel-zone--gates { top: 45%; left: 15%; width: 80%; height: 5%; }
.travel-zone--shop { left: 0; bottom: 18%; width: 7%; height: 32%; }
.travel-zone--tavern { right: 0; bottom: 0; width: 58%; height: 6%; }
.travel-zone--church { right: 0; bottom: 8%; width: 7%; height: 25%; }
.travel-zone--gates span, .travel-zone--tavern span { white-space: nowrap; }
.travel-zone--shop span { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; }
.travel-zone--church span { writing-mode: vertical-rl; white-space: nowrap; }

.destination-screen { display: grid; place-items: center; padding: 1rem; background-position: center; background-size: cover; background-repeat: no-repeat; }
.weapon-shop { background-image: url("assets/paysages/magasin-d-armes.png"); }
.city-gates { background-image: url("assets/paysages/porte-de-la-ville.png"); }
.church { background-image: url("assets/paysages/eglise.png"); }
.apothecary { background-image: url("assets/paysages/apothicaire.png"); }
.castle-road { background-image: url("assets/paysages/allee.png"); }
.destination-screen__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,5,3,.48), transparent 35%, transparent 68%, rgba(8,5,3,.48)); }
.shop-exit-zone { position: absolute; z-index: 1; right: 0; bottom: 0; display: grid; place-items: center; width: 62%; height: 6%; border: 1px solid rgba(255,219,146,.5); border-radius: .35rem; color: #ffe8b1; background: rgba(62,31,15,.42); box-shadow: inset 0 0 2rem rgba(228,151,48,.08); opacity: 0; pointer-events: none; transition: opacity .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.shop-exit-zone span { font: 700 clamp(.5rem, 2.2vw, .68rem)/1 Cinzel, serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px .3rem #000; }
.weapon-shop.is-moving .shop-exit-zone { opacity: 1; pointer-events: auto; }
.shop-exit-zone.is-targeted { border-color: #ffd57d; background: rgba(196,104,30,.5); box-shadow: inset 0 0 2.5rem rgba(255,184,69,.38), 0 0 1.5rem rgba(238,145,43,.45); animation: zone-target 1s ease-in-out infinite; }
.church-exit-zone { position: absolute; z-index: 1; right: 0; bottom: 0; display: grid; place-items: center; width: 62%; height: 6%; border: 1px solid rgba(255,219,146,.5); border-radius: .35rem; color: #ffe8b1; background: rgba(62,31,15,.42); box-shadow: inset 0 0 2rem rgba(228,151,48,.08); opacity: 0; pointer-events: none; transition: opacity .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.church-exit-zone span { font: 700 clamp(.5rem, 2.2vw, .68rem)/1 Cinzel, serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px .3rem #000; }
.church.is-moving .church-exit-zone { opacity: 1; pointer-events: auto; }
.church-exit-zone.is-targeted { border-color: #ffd57d; background: rgba(196,104,30,.5); box-shadow: inset 0 0 2.5rem rgba(255,184,69,.38), 0 0 1.5rem rgba(238,145,43,.45); animation: zone-target 1s ease-in-out infinite; }
.apothecary-exit-zone { position: absolute; z-index: 1; right: 0; bottom: 0; display: grid; place-items: center; width: 62%; height: 6%; border: 1px solid rgba(255,219,146,.5); border-radius: .35rem; color: #ffe8b1; background: rgba(62,31,15,.42); box-shadow: inset 0 0 2rem rgba(228,151,48,.08); opacity: 0; pointer-events: none; transition: opacity .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.apothecary-exit-zone span { font: 700 clamp(.5rem, 2.2vw, .68rem)/1 Cinzel, serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px .3rem #000; }
.apothecary.is-moving .apothecary-exit-zone { opacity: 1; pointer-events: auto; }
.apothecary-exit-zone.is-targeted { border-color: #ffd57d; background: rgba(196,104,30,.5); box-shadow: inset 0 0 2.5rem rgba(255,184,69,.38), 0 0 1.5rem rgba(238,145,43,.45); animation: zone-target 1s ease-in-out infinite; }
.gate-zone { position: absolute; z-index: 1; display: grid; place-items: center; border: 1px solid rgba(255,219,146,.5); border-radius: .35rem; color: #ffe8b1; background: rgba(62,31,15,.42); box-shadow: inset 0 0 2rem rgba(228,151,48,.08); opacity: 0; pointer-events: none; transition: opacity .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.gate-zone span { font: 700 clamp(.5rem, 2.2vw, .68rem)/1 Cinzel, serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px .3rem #000; }
.gate-zone--adventure { top: 48%; left: 22%; width: 58%; height: 6%; }
.gate-zone--square { right: 0; bottom: 0; width: 62%; height: 6%; }
.gate-zone--apothecary { left: 0; bottom: 18%; width: 7%; height: 28%; }
.gate-zone--castle { right: 0; bottom: 18%; width: 7%; height: 28%; }
.gate-zone--apothecary span { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; }
.gate-zone--castle span { writing-mode: vertical-rl; white-space: nowrap; }
.city-gates.is-moving .gate-zone { opacity: 1; pointer-events: auto; }
.gate-zone.is-targeted { border-color: #ffd57d; background: rgba(196,104,30,.5); box-shadow: inset 0 0 2.5rem rgba(255,184,69,.38), 0 0 1.5rem rgba(238,145,43,.45); animation: zone-target 1s ease-in-out infinite; }
.road-zone { position: absolute; z-index: 1; display: grid; place-items: center; border: 1px solid rgba(255,219,146,.5); border-radius: .35rem; color: #ffe8b1; background: rgba(62,31,15,.42); box-shadow: inset 0 0 2rem rgba(228,151,48,.08); opacity: 0; pointer-events: none; transition: opacity .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.road-zone span { font: 700 clamp(.5rem, 2.2vw, .68rem)/1 Cinzel, serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px .3rem #000; }
.road-zone--castle { top: 41%; left: 35%; width: 30%; height: 5%; }
.road-zone--messenger { right: 27%; top: 47%; width: 9%; height: 15%; }
.road-zone--cartographer { right: 16%; top: 63%; width: 9%; height: 15%; }
.road-zone--guard { right: 6%; top: 79%; width: 9%; height: 15%; }
.road-zone--messenger span, .road-zone--cartographer span, .road-zone--guard span { writing-mode: vertical-rl; display: block; padding: .2rem; line-height: 1.1; rotate: 180deg; text-align: center; white-space: nowrap; }
.road-zone--gates { right: 0; bottom: 0; width: 62%; height: 6%; }
.castle-road.is-moving .road-zone { opacity: 1; pointer-events: auto; }
.road-zone.is-targeted { border-color: #ffd57d; background: rgba(196,104,30,.5); box-shadow: inset 0 0 2.5rem rgba(255,184,69,.38), 0 0 1.5rem rgba(238,145,43,.45); animation: zone-target 1s ease-in-out infinite; }
.road-zone--locked { border-color: rgba(191,183,165,.45); color: #d4cbbb; background: rgba(34,31,29,.52); }
.road-zone--locked.is-targeted { border-color: #e4a96a; background: rgba(112,55,35,.62); box-shadow: inset 0 0 2rem rgba(197,91,48,.25), 0 0 1.2rem rgba(216,112,61,.3); }
.travel-zone, .shop-exit-zone, .church-exit-zone, .apothecary-exit-zone, .gate-zone, .road-zone { opacity: .36; }
.road-zone--locked { opacity: .27; }
.road-lock-dialog { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; color: #ffe0aa; background: rgba(6,3,2,.82); }
.road-lock-dialog[hidden] { display: none; }
.road-lock-dialog > div { width: min(22rem, 100%); padding: 1.15rem 1rem 1rem; border: 1px solid #c7804d; border-radius: .4rem; background: linear-gradient(rgba(55,25,13,.98), rgba(27,12,7,.98)); box-shadow: inset 0 0 0 3px #30150c, 0 .8rem 2.5rem rgba(0,0,0,.68); text-align: center; }
.road-lock-dialog p:first-child { margin: 0 0 .35rem; color: #d4935d; font: 700 .58rem/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; }
.road-lock-dialog h2 { margin: 0; color: #ffe0aa; font: 700 1.25rem/1.2 Cinzel, serif; text-transform: uppercase; }
.road-lock-dialog #road-lock-message { margin: .7rem 0 1rem; color: #d8c09a; font-size: .78rem; line-height: 1.5; }
.road-lock-dialog button { min-width: 8rem; min-height: 2.6rem; border: 1px solid #d99b57; border-radius: .25rem; color: #fff0c5; background: linear-gradient(#8d4925, #5b260f); box-shadow: inset 0 0 0 2px #35160b; font: 700 .68rem/1 Cinzel, serif; text-transform: uppercase; cursor: pointer; }
.adventure-screen { background-image: url("assets/paysages/porte-de-la-ville.png"); }
.adventure-screen.is-active { opacity: 1; animation: none; filter: none; }
.barcode-capture { position: relative; width: min(30rem, calc(100% - 2rem)); margin: 7rem auto 1rem; padding: clamp(1.1rem, 5vw, 1.6rem); border: 1px solid rgba(225,174,82,.7); border-radius: .45rem; color: #f4dfad; background: linear-gradient(rgba(35,18,10,.97), rgba(18,9,5,.99)); box-shadow: inset 0 0 0 3px rgba(48,23,10,.8), 0 1rem 3rem rgba(0,0,0,.65); text-align: center; }
.capture-close { position: absolute; z-index: 2; top: .55rem; right: .55rem; display: grid; place-items: center; width: 2.65rem; height: 2.65rem; padding: 0 0 .18rem; border: 1px solid #d5a14b; border-radius: 50%; color: #ffe6a5; background: rgba(55,25,12,.92); box-shadow: inset 0 0 0 2px #32170c, 0 .3rem .8rem rgba(0,0,0,.55); font: 700 1.8rem/1 Georgia, serif; cursor: pointer; }
.capture-close[hidden] { display: none; }
.capture-close:focus-visible { outline: 3px solid #fff2b1; outline-offset: 3px; }
.barcode-capture__intro[hidden], .capture-preview[hidden] { display: none; }
.barcode-icon { display: flex; align-items: stretch; justify-content: center; gap: .16rem; width: 4.6rem; height: 3.2rem; margin: 0 auto .9rem; padding: .45rem; border: 1px solid #c69245; border-radius: .25rem; color: #f3c66b; background: rgba(7,4,2,.7); }
.barcode-icon::before, .barcode-icon::after, .barcode-icon span { content: ""; width: .18rem; background: currentColor; box-shadow: .35rem 0 currentColor, .7rem 0 currentColor, 1.05rem 0 currentColor; }
.barcode-icon::after { width: .3rem; margin-left: 1rem; }
.barcode-capture h3 { margin: 0; color: #ffe6a4; font: 700 clamp(1.05rem, 5vw, 1.4rem)/1.3 Cinzel, serif; text-transform: uppercase; text-shadow: 0 2px #3b190d; }
.barcode-capture__intro p { margin: .8rem auto 1.2rem; color: #cbb995; font-size: .78rem; line-height: 1.55; }
.capture-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.capture-button-wrap { position: relative; }
.capture-button, .capture-actions button { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3.5rem; border: 1px solid #e5b157; border-radius: .3rem; color: #fff0c4; background: linear-gradient(#88451f, #54210e); box-shadow: inset 0 0 0 2px #32150b, 0 .4rem 1rem rgba(0,0,0,.5); font: 700 clamp(.68rem, 3vw, .82rem)/1.2 Cinzel, serif; letter-spacing: .055em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.capture-input--primary { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: visible; border: 0; opacity: .001; clip: auto; clip-path: none; cursor: pointer; pointer-events: auto; }
.capture-input--primary::file-selector-button,
.capture-input--primary::-webkit-file-upload-button { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.capture-button:focus-visible, .capture-actions button:focus-visible { outline: 3px solid #fff2b1; outline-offset: 3px; }
.discovered-dungeons-button { width: 100%; min-height: 3rem; margin-top: .7rem; border: 1px solid #85643c; border-radius: .3rem; color: #d9c49b; background: rgba(23,13,8,.86); font: 700 .63rem/1.2 Cinzel, serif; letter-spacing: .045em; text-transform: uppercase; cursor: pointer; }
.capture-preview__image { position: relative; width: 100%; max-height: 48dvh; overflow: hidden; border: 1px solid #886036; border-radius: .3rem; background: #080503; touch-action: none; user-select: none; }
.capture-preview__image img { display: block; width: 100%; max-height: 48dvh; object-fit: contain; transform-origin: center; will-change: transform; pointer-events: none; }
.capture-preview.is-dungeon-ready .capture-preview__image,
.capture-preview.is-dungeon-ready .photo-controls,
.capture-preview.is-dungeon-ready .photo-hint,
.capture-preview.is-dungeon-ready .capture-actions,
.capture-preview.is-dungeon-ready .barcode-result,
.capture-preview.is-dungeon-ready > #capture-status { display: none; }
.capture-preview.is-generating .capture-preview__image,
.capture-preview.is-generating .photo-controls,
.capture-preview.is-generating .photo-hint,
.capture-preview.is-generating .capture-actions,
.capture-preview.is-generating .barcode-result,
.capture-preview.is-generating > #capture-status { display: none; }
.capture-preview.is-discovery-ready .capture-preview__image,
.capture-preview.is-discovery-ready .photo-controls,
.capture-preview.is-discovery-ready .photo-hint,
.capture-preview.is-discovery-ready .capture-actions,
.capture-preview.is-discovery-ready .barcode-result,
.capture-preview.is-discovery-ready > #capture-status { display: none; }
.capture-preview.is-rewarding .capture-preview__image,
.capture-preview.is-rewarding .photo-controls,
.capture-preview.is-rewarding .photo-hint,
.capture-preview.is-rewarding .capture-actions,
.capture-preview.is-rewarding .barcode-result,
.capture-preview.is-rewarding > #capture-status { display: none; }
.barcode-guide { position: absolute; inset: 27% 10%; border: 2px solid rgba(255,211,112,.88); border-radius: .3rem; box-shadow: 0 0 0 999px rgba(0,0,0,.18), inset 0 0 1.2rem rgba(255,192,64,.12); }
.photo-controls { display: grid; grid-template-columns: 3rem 1fr 3rem; gap: .45rem; margin-top: .55rem; }
.photo-controls button { min-height: 2.4rem; border: 1px solid #9d743d; border-radius: .25rem; color: #f5d99a; background: rgba(48,25,13,.92); font: 700 .68rem/1 Cinzel, serif; cursor: pointer; }
.photo-controls button:first-child, .photo-controls button:last-child { font: 700 1.4rem/1 Inter, sans-serif; }
.photo-hint { display: block; margin-top: .4rem; color: #a99572; font-size: .58rem; }
.dungeon-progress { margin: .9rem 0 .7rem; color: #e6c681; font: 700 .62rem/1.35 Cinzel, serif; }
.dungeon-progress[hidden] { display: none; }
.dungeon-progress__track { height: .65rem; margin-top: .55rem; overflow: hidden; border: 1px solid #9d743d; border-radius: 999px; background: rgba(8,5,3,.85); box-shadow: inset 0 .15rem .35rem rgba(0,0,0,.65); }
.dungeon-progress__track i { position: relative; display: block; width: 0; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, #a94b20, #f0b64e); box-shadow: 0 0 .7rem rgba(244,157,48,.6); transition: width 1.1s ease; }
.dungeon-progress__track i::after { content: ''; position: absolute; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255,244,190,.7), transparent); transform: translateX(-120%); animation: dungeon-progress-glint 1.8s ease-in-out infinite; }
@keyframes dungeon-progress-glint { to { transform: translateX(340%); } }
.discovery-choice { position: relative; isolation: isolate; margin: 0; padding: 1.25rem 1rem; overflow: hidden; border: 1px solid #ffe08a; border-radius: .35rem; background: radial-gradient(circle at 50% 28%, rgba(255,224,113,.36), transparent 42%), radial-gradient(circle at 50% 0, rgba(222,142,49,.32), transparent 66%), rgba(35,17,9,.96); box-shadow: inset 0 0 2.4rem rgba(255,190,62,.22), 0 0 1.4rem rgba(255,190,62,.35); animation: discovery-arrival .8s cubic-bezier(.2,.8,.2,1) both; }
.discovery-choice::before, .discovery-choice::after { content: ''; position: absolute; z-index: -1; inset: -45%; background: repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(255,224,130,.22) 10deg 11deg, transparent 12deg 24deg); animation: discovery-rays 12s linear infinite; }
.discovery-choice::after { inset: 0; background: radial-gradient(circle at 18% 25%, #fff7bd 0 1px, transparent 2px), radial-gradient(circle at 80% 34%, #ffd76a 0 1px, transparent 2px), radial-gradient(circle at 30% 72%, #fff1a1 0 1.5px, transparent 2.5px), radial-gradient(circle at 72% 78%, #ffc94f 0 1px, transparent 2px); background-size: 2.4rem 2.4rem, 3rem 3rem, 3.5rem 3.5rem, 2.8rem 2.8rem; animation: discovery-sparkles 1.7s ease-in-out infinite alternate; }
.discovery-choice[hidden] { display: none; }
.discovery-choice > p { margin: 0 0 .65rem; color: #fff1a7; font: 900 clamp(1.2rem, 6.8vw, 2.35rem)/1 Cinzel, serif; letter-spacing: .045em; white-space: nowrap; text-shadow: 0 0 .25rem #fff, 0 0 .75rem #ffc547, 0 0 1.5rem #e46f16; animation: discovery-title-pulse 1.15s ease-in-out infinite alternate; }
.discovery-choice h3 { margin: 0; color: #e8bb66; font: 700 .68rem/1.2 Cinzel, serif; letter-spacing: .15em; text-transform: uppercase; }
.discovery-choice > strong, .discovery-choice > span { display: block; margin-top: .55rem; }
.discovery-choice > strong { color: #ffe7a7; font: 700 .9rem/1.25 Cinzel, serif; }
.discovery-choice > span { color: #cdb992; font-size: .68rem; line-height: 1.45; }
.discovery-choice > div { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; }
.discovery-choice button { min-height: 3rem; border: 1px solid #c88b43; border-radius: .25rem; color: #f7dfaa; background: rgba(53,27,14,.92); font: 700 .65rem/1 Cinzel, serif; text-transform: uppercase; cursor: pointer; }
.discovery-choice button:last-child { border-color: #edb457; background: linear-gradient(#91471f, #57220e); }
.dungeon-reward { margin: 0 0 .8rem; padding: 1.15rem .9rem; border: 1px solid #f1c15c; border-radius: .35rem; color: #ffe7a0; background: radial-gradient(circle at 50% 25%, rgba(255,201,75,.25), transparent 55%), rgba(64,31,12,.97); box-shadow: 0 0 1.8rem rgba(238,160,50,.45); animation: reward-reveal .75s ease-out both; }
.dungeon-reward[hidden] { display: none; }
.dungeon-reward > strong { display: block; font: 700 .7rem/1.2 Cinzel, serif; text-transform: uppercase; }
.dungeon-reward > div { display: flex; justify-content: center; gap: .7rem; margin-top: .65rem; }
.dungeon-reward span { padding: .45rem .65rem; border: 1px solid rgba(246,198,103,.6); border-radius: 2rem; background: rgba(18,8,3,.7); font: 800 .8rem/1 Inter, sans-serif; animation: reward-gain 1.2s .15s ease both; }
.dungeon-reward button { width: 100%; min-height: 3rem; margin-top: 1rem; border: 1px solid #ffe08a; border-radius: .25rem; color: #fff0bd; background: linear-gradient(#a85320, #64260d); font: 800 .68rem/1 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 .8rem rgba(255,190,62,.25); }
.scan-refund { margin: 0 0 .8rem; padding: 1.2rem .9rem; border: 1px solid #9dd4ff; border-radius: .35rem; color: #e8f7ff; background: radial-gradient(circle at 50% 20%, rgba(91,180,255,.28), transparent 58%), rgba(12,35,55,.97); box-shadow: 0 0 1.8rem rgba(76,170,239,.4); animation: reward-reveal .75s ease-out both; }
.scan-refund[hidden] { display: none; }
.scan-refund > strong { display: block; color: #dff3ff; font: 800 .78rem/1.25 Cinzel, serif; text-transform: uppercase; }
.scan-refund > p { margin: .55rem 0; color: #b9d9ef; font-size: .68rem; line-height: 1.45; }
.scan-refund > div span { display: inline-block; padding: .5rem .75rem; border: 1px solid rgba(157,212,255,.65); border-radius: 2rem; background: rgba(4,18,30,.72); font: 800 .85rem/1 Inter, sans-serif; }
.scan-refund button { width: 100%; min-height: 3rem; margin-top: 1rem; border: 1px solid #9dd4ff; border-radius: .25rem; color: #effaff; background: linear-gradient(#286b9d, #123c5d); font: 800 .65rem/1.2 Cinzel, serif; text-transform: uppercase; cursor: pointer; }
@keyframes discovery-arrival { from { opacity: 0; transform: scale(.72); filter: brightness(2); } 65% { transform: scale(1.04); } to { opacity: 1; transform: scale(1); filter: brightness(1); } }
@keyframes discovery-rays { to { transform: rotate(1turn); } }
@keyframes discovery-sparkles { from { opacity: .35; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes discovery-title-pulse { to { transform: scale(1.035); filter: brightness(1.25); } }
.capture-preview > p { min-height: 2.5rem; margin: .75rem 0; color: #d3c09a; font-size: .72rem; line-height: 1.45; }
.capture-preview.is-analyzing > #capture-status { color: #ffe08a; animation: scan-status-pulse .75s ease-in-out infinite alternate; }
@keyframes scan-status-pulse { from { opacity: .58; } to { opacity: 1; } }
.barcode-result[hidden] { display: none; }
.barcode-result [hidden] { display: none; }
.barcode-result { margin: 0 0 .8rem; padding: .7rem .8rem; border: 1px solid #d4a04b; border-radius: .3rem; background: rgba(108,55,20,.42); box-shadow: inset 0 0 1.2rem rgba(246,174,63,.12); overflow-wrap: anywhere; }
.barcode-result span, .barcode-result small { display: block; color: #cfa965; font: 700 .53rem/1.3 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; }
.barcode-result strong { display: block; margin: .3rem 0; color: #ffe8a9; font: 700 clamp(1rem, 5vw, 1.35rem)/1.2 Inter, sans-serif; letter-spacing: .08em; }
.dungeon-choice { margin: 0 0 .8rem; padding: .9rem; border: 1px solid #dc9949; border-radius: .35rem; background: radial-gradient(circle at 50% 0, rgba(205,103,31,.24), transparent 55%), rgba(35,17,9,.9); box-shadow: inset 0 0 1.5rem rgba(239,138,42,.12); }
.dungeon-choice[hidden] { display: none; }
.dungeon-choice > p { margin: 0; color: #c99854; font: 700 .55rem/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; }
.dungeon-choice h3 { margin: .45rem 0; color: #ffe19b; font: 700 clamp(1rem, 5vw, 1.35rem)/1.2 Cinzel, serif; }
.dungeon-choice > span, .dungeon-choice > small { display: block; color: #d2bd94; font-size: .68rem; }
.dungeon-choice > small { margin-top: .3rem; color: #9f8b6b; font-size: .56rem; }
.dungeon-boss-preview { display: grid; justify-items: center; gap: .2rem; margin: .35rem auto 0; }
.dungeon-boss-preview[hidden] { display: none; }
.dungeon-boss-preview > div { width: 5.4rem; height: 10.8rem; overflow: hidden; }
.dungeon-boss-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dungeon-boss-preview figcaption { color: #f2c879; font: 700 .62rem/1.2 Cinzel, serif; }
.dungeon-choice > div { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .85rem; }
.dungeon-choice button { min-height: 2.9rem; border: 1px solid #c88b43; border-radius: .25rem; color: #f7dfaa; background: rgba(53,27,14,.92); font: 700 .65rem/1 Cinzel, serif; text-transform: uppercase; cursor: pointer; }
.dungeon-choice button:last-child { border-color: #edb457; background: linear-gradient(#91471f, #57220e); }
.barcode-result .product-name { margin-top: .65rem; color: #fff0bd; font-size: clamp(.85rem, 4.4vw, 1.15rem); letter-spacing: .02em; }
.capture-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: .65rem; }
.capture-actions button { min-height: 3.2rem; padding: .5rem; }
.capture-actions button:first-child { color: #d8bc87; background: rgba(44,24,13,.85); }
.capture-actions button:disabled { opacity: .65; cursor: default; }

.hero-select { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: min(36rem, 100%); height: 100dvh; min-height: 0; margin: auto; overflow: hidden; padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(.7rem, env(safe-area-inset-bottom)); text-align: center; }
.hero-select__heading { width: min(28rem, calc(100% - 1rem)); padding: .7rem 1rem .8rem; border: 1px solid rgba(225,174,82,.72); border-radius: .25rem; background: linear-gradient(rgba(45,24,12,.9), rgba(24,12,7,.94)); box-shadow: inset 0 0 0 2px rgba(48,23,10,.8), 0 .6rem 1.8rem rgba(0,0,0,.5); backdrop-filter: blur(5px); }
.hero-select__heading p { margin: 0 0 .25rem; color: #c98d49; font: 700 .52rem/1 Cinzel, serif; letter-spacing: .18em; text-transform: uppercase; }
.hero-select__heading h2 { margin: 0; color: #ffe8a9; font: 700 clamp(1.15rem, 5.8vw, 1.7rem)/1.1 Cinzel, serif; text-transform: uppercase; text-shadow: 0 2px #421d0d; }
.hero-carousel { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; width: 100%; min-height: 0; flex: 1; }
.hero-arrow { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid #d5a14b; border-radius: 50%; color: #ffe6a5; background: rgba(45,22,10,.78); box-shadow: inset 0 0 0 2px #32170c, 0 .3rem 1rem rgba(0,0,0,.5); font: 700 2rem/1 Georgia, serif; cursor: pointer; }
.hero-arrow:disabled { opacity: .35; cursor: not-allowed; }
.hero-choice { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; height: clamp(14rem, 46dvh, 27rem); margin: 0; }
.hero-choice__aura { position: absolute; z-index: -1; left: 50%; bottom: 0; translate: -50%; width: min(18rem, 70vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245,186,77,.24), rgba(217,111,25,.07) 48%, transparent 70%); filter: blur(3px); animation: breathe 2.4s ease-in-out infinite; }
.hero-choice.is-locked img { filter: grayscale(.8) brightness(.55) drop-shadow(0 .7rem .45rem rgba(0,0,0,.65)); }
.hero-lock { position: absolute; z-index: 2; left: 50%; top: 52%; min-width: 9rem; padding: .55rem .7rem; border: 1px solid #9dcfff; border-radius: 2rem; color: #eaf7ff; background: rgba(10,31,48,.94); box-shadow: 0 .35rem 1rem rgba(0,0,0,.65); font: 800 .62rem/1 Cinzel, serif; text-transform: uppercase; translate: -50% -50%; }
.hero-lock[hidden] { display: none; }
.hero-choice img { width: min(11.5rem, 44vw); height: 100%; object-fit: contain; object-position: center bottom; image-rendering: pixelated; filter: drop-shadow(0 .8rem .5rem rgba(0,0,0,.65)); }
.hero-choice img.is-warrior { translate: clamp(.8rem, 4vw, 1.25rem) clamp(.15rem, .8dvh, .4rem); }
.hero-choice img.is-thief { translate: 0 clamp(2rem, 4dvh, 2.7rem); }
.hero-choice img.is-dwarf,
.hero-choice img.is-paladin { translate: 0 clamp(1.75rem, 3.4dvh, 2.25rem); }
.hero-choice img.is-elf { translate: 0 clamp(1.25rem, 2.4dvh, 1.65rem); }
.hero-choice img.is-gnome { translate: 0 clamp(2.4rem, 4.6dvh, 3.1rem); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; width: min(25rem, calc(100% - 1rem)); margin: 0 0 .65rem; }
.hero-stats > div { min-width: 0; padding: .38rem .3rem; border: 1px solid color-mix(in srgb, var(--stat-color, #d4a04b) 72%, #42210f); border-radius: .25rem; background: rgba(26,13,8,.84); box-shadow: inset 0 .16rem 0 var(--stat-color, #d4a04b); }
.hero-stats dt { overflow: hidden; color: #cdbb98; font: 700 clamp(.43rem, 1.9vw, .56rem)/1 Cinzel, serif; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; }
.hero-stats dd { margin: .28rem 0 0; color: var(--stat-color, #f0c56d); font: 800 clamp(.82rem, 3.4vw, 1.05rem)/1 Inter, sans-serif; text-shadow: 0 2px #180b06; }
.hero-confirm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32rem; width: min(24rem, calc(100% - 2rem)); min-height: 4.2rem; border: 1px solid #efbd5e; border-radius: .3rem; color: #fff3cb; background: linear-gradient(#985027, #61280f); box-shadow: inset 0 0 0 2px #35160b, 0 .5rem 1.3rem rgba(0,0,0,.55); cursor: pointer; }
.hero-confirm strong { font: 700 clamp(.78rem, 3.4vw, .95rem)/1 Cinzel, serif; letter-spacing: .055em; text-transform: uppercase; }
.hero-confirm small { color: #e0bc7c; font-size: .53rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.hero-confirm:hover { filter: brightness(1.14); }
.hero-confirm:active { transform: translateY(1px) scale(.99); }
.hero-confirm:focus-visible, .hero-arrow:focus-visible { outline: 3px solid #fff2b1; outline-offset: 3px; }
.hero-count { margin: .55rem 0 0; color: rgba(255,230,186,.62); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-count[hidden] { display: none; }
.tavern-meta-actions { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-top: .35rem; }
.new-game-button { margin: 0; padding: .35rem .6rem; border: 0; color: rgba(225,187,125,.72); background: transparent; font: 600 .55rem/1 Inter, sans-serif; text-decoration: underline; cursor: pointer; }
.new-game-button:focus-visible { outline: 2px solid #f0c56d; outline-offset: 2px; }
.about-button { margin: 0; padding: .35rem .6rem; border: 0; color: rgba(225,187,125,.72); background: transparent; font: 700 .55rem/1 Cinzel, serif; letter-spacing: .08em; text-decoration: underline; text-transform: uppercase; cursor: pointer; }
.about-dialog { width: min(25rem, calc(100% - 2rem)); margin: auto; padding: 0; border: 0; color: #f6e3b5; background: transparent; }
.about-dialog::backdrop { background: rgba(5,3,2,.82); backdrop-filter: blur(6px); }
.about-dialog__card { position: relative; padding: 1.6rem 1.25rem 1.35rem; border: 1px solid #b37836; border-radius: .45rem; background: radial-gradient(circle at 50% 0, rgba(152,87,30,.22), transparent 48%), linear-gradient(rgba(40,21,12,.99), rgba(18,9,5,.99)); box-shadow: inset 0 0 0 3px #2b160c, 0 1.5rem 5rem #000; text-align: center; }
.about-dialog__close { position: absolute; top: .35rem; right: .5rem; width: 2.5rem; height: 2.5rem; border: 0; color: #e0bd7d; background: transparent; font-size: 1.7rem; cursor: pointer; }
.about-dialog__card > p:first-of-type { margin: 0 0 .45rem; color: #c98d49; font: 700 .56rem/1 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; }
.about-dialog h2 { margin: 0; color: #ffe8a9; font: 700 1.3rem/1.2 Cinzel, serif; text-transform: uppercase; }
.about-dialog #about-copy { margin: 1rem 0; color: #d8c6a3; font-size: .74rem; line-height: 1.55; }
.about-dialog a { display: inline-block; padding: .65rem .9rem; border: 1px solid rgba(214,166,89,.55); border-radius: 2rem; color: #ffd98b; background: rgba(17,8,4,.65); font: 700 .72rem/1 Inter, sans-serif; text-decoration: none; }
.scan-consent { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; color: #e5f4ff; background: rgba(3,7,12,.92); }
.scan-consent[hidden] { display: none; }
.scan-consent__card { width: min(25rem, 100%); padding: 1.4rem 1.1rem 1.1rem; border: 1px solid #65b9d0; border-radius: .45rem; background: radial-gradient(circle at 50% 0, rgba(43,101,151,.34), transparent 48%), linear-gradient(#14283b, #080f17); box-shadow: inset 0 0 0 3px #102337, 0 1.5rem 5rem #000; text-align: center; }
.scan-consent__card > p:first-child { margin: 0 0 .4rem; color: #91d7e8; font: 700 .56rem/1 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; }
.scan-consent h2 { margin: 0; color: #e9fbff; font: 700 clamp(.88rem, 4.3vw, 1.25rem)/1.2 Cinzel, serif; text-transform: uppercase; white-space: nowrap; }
.scan-consent__card > strong { display: block; margin: .9rem 0 .65rem; color: #ffe09a; font: 800 1.15rem/1 Cinzel, serif; text-shadow: 0 0 .8rem rgba(255,223,117,.4); }
.scan-consent__card > small { display: block; margin-top: .35rem; color: #a9c8dc; font-size: .61rem; }
.scan-consent__card > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: .55rem; margin-top: 1rem; }
.scan-consent button { min-height: 3rem; border: 1px solid #497e91; border-radius: .25rem; color: #d6edf3; background: rgba(9,32,45,.95); font: 700 .61rem/1.2 Cinzel, serif; text-transform: uppercase; cursor: pointer; }
.scan-consent button:last-child { border-color: #79d1e6; color: #f5fdff; background: linear-gradient(#247a96, #12475f); }

.hero-purchase-confirm { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; color: #eff9ff; background: rgba(2,7,13,.92); }
.hero-purchase-confirm[hidden] { display: none; }
.hero-purchase-confirm__card { width: min(25rem, 100%); padding: 1.4rem 1.1rem 1.1rem; border: 1px solid #65b9d0; border-radius: .45rem; background: radial-gradient(circle at 50% 0, rgba(60,164,193,.3), transparent 50%), linear-gradient(#153449, #07131e); box-shadow: inset 0 0 0 3px #0b2434, 0 1.5rem 5rem #000; text-align: center; }
.hero-purchase-confirm__card > p:first-child { margin: 0 0 .4rem; color: #91d7e8; font: 700 .56rem/1 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; }
.hero-purchase-confirm h2 { margin: 0; color: #e9fbff; font: 700 clamp(.88rem, 4.3vw, 1.25rem)/1.2 Cinzel, serif; text-transform: uppercase; }
.hero-purchase-confirm__card > p:not(:first-child) { margin: .9rem auto .65rem; color: #d2e9ef; font-size: .76rem; }
.hero-purchase-confirm__card > strong { display: block; color: #fff4c4; font: 800 1.05rem/1 Cinzel, serif; text-shadow: 0 0 .8rem rgba(255,223,117,.38); }
.hero-purchase-confirm__card > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: .55rem; margin-top: 1rem; }
.hero-purchase-confirm button { min-height: 3rem; border: 1px solid #497e91; border-radius: .25rem; color: #d6edf3; background: rgba(9,32,45,.95); font: 700 .61rem/1.2 Cinzel, serif; text-transform: uppercase; cursor: pointer; }
.hero-purchase-confirm button:last-child { border-color: #79d1e6; color: #f5fdff; background: linear-gradient(#247a96, #12475f); }
.hero-purchase-confirm button:disabled { opacity: .55; cursor: wait; }

.player-level { position: fixed; z-index: 5; top: max(1rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); min-height: 2.75rem; padding: 0 .85rem; border: 1px solid rgba(239,189,94,.72); border-radius: 1.4rem; color: #f7dda0; background: rgba(25,12,7,.82); box-shadow: 0 .3rem 1rem rgba(0,0,0,.45); font: 700 .62rem/1 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); }
.player-level[hidden] { display: none; }
.discovered-dungeons { width: min(28rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0; overflow: visible; border: 0; color: #f5dfad; background: transparent; }
.discovered-dungeons::backdrop { background: rgba(5,3,2,.9); }
.discovered-dungeons__card { position: relative; max-height: calc(100dvh - 1.5rem); overflow: auto; padding: 1.5rem 1rem 1.1rem; border: 1px solid #a97439; border-radius: .45rem; background: radial-gradient(circle at 50% 0, rgba(126,73,27,.25), transparent 42%), linear-gradient(#29180d, #100805); box-shadow: inset 0 0 0 3px #2d190d, 0 1.5rem 5rem #000; text-align: center; }
.discovered-dungeons__close { position: absolute; top: .4rem; right: .5rem; width: 2.5rem; height: 2.5rem; border: 0; color: #dfbd7c; background: transparent; font-size: 1.7rem; cursor: pointer; }
.discovered-dungeons__card > p:first-of-type { margin: 0 0 .35rem; color: #bd8547; font: 700 .56rem/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; }
.discovered-dungeons h2 { margin: 0 0 1rem; color: #ffe3a3; font: 700 1.3rem/1.15 Cinzel, serif; text-transform: uppercase; }
.discovered-dungeons__list { display: grid; gap: .55rem; text-align: left; }
.discovered-dungeons__item { display: grid; grid-template-columns: 1fr auto; gap: .4rem; }
.discovered-dungeons__list button { padding: .75rem; border: 1px solid #8f6639; border-radius: .28rem; color: #f1d9a5; background: rgba(25,14,8,.82); text-align: left; cursor: pointer; }
.discovered-dungeons__list button:active { border-color: #e2aa58; background: rgba(86,43,18,.9); }
.discovered-dungeons__list button:disabled { cursor: default; opacity: .72; }
.discovered-dungeons__open { width: 100%; }
.discovered-dungeons__unlock { width: 6.2rem; color: #ffd27b !important; font: 700 .5rem/1.3 Cinzel, serif; text-align: center !important; }
.discovered-dungeons__list strong, .discovered-dungeons__list span { display: block; }
.discovered-dungeons__list strong { font: 700 .75rem/1.25 Cinzel, serif; }
.discovered-dungeons__list span { margin-top: .32rem; color: #ad9b7b; font-size: .59rem; text-transform: capitalize; }
.discovered-dungeons__list small { display: block; margin-top: .42rem; color: #d5aa65; font-size: .55rem; }
.discovered-dungeons__status { min-height: 1.2rem; margin: .85rem 0 0; color: #b9a381; font-size: .65rem; }
.hero-sheet { width: min(27rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; overflow: visible; border: 0; color: #f6e3b5; background: transparent; }
.hero-sheet::backdrop { background: rgba(5,3,2,.78); backdrop-filter: blur(5px); }
.hero-sheet__card { position: relative; max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.5rem; border: 1px solid #b37836; border-radius: .45rem; background: linear-gradient(rgba(40,21,12,.98), rgba(18,9,5,.99)); box-shadow: inset 0 0 0 3px #2b160c, 0 1.5rem 5rem #000; text-align: center; }
.hero-sheet__close { position: absolute; top: .5rem; right: .6rem; width: 2.5rem; height: 2.5rem; border: 0; color: #e0bd7d; background: transparent; font-size: 1.7rem; cursor: pointer; }
.hero-sheet__level { margin: .55rem 0 .35rem; color: #c98d49; font: 700 .62rem/1 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; }
.hero-sheet__season { margin: 0 0 .75rem; color: #e2bd73; font: 700 .56rem/1.25 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; }
.hero-sheet h2 { margin: 0; padding: 0 2rem; overflow-wrap: anywhere; color: #ffe8a9; font: 700 clamp(1.65rem, 8vw, 2.2rem)/1.08 Cinzel, serif; text-transform: none; }
.hero-sheet__hero { margin: 0; color: #e8c77f; font: 700 .82rem/1.1 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; }
.hero-sheet__motto { margin: .35rem 0 1rem; color: #cdb58a; font-size: .56rem; letter-spacing: .09em; text-transform: uppercase; }
.hero-sheet__stats { display: grid; grid-template-columns: 1fr; gap: .4rem; margin: 0 0 1rem; }
.hero-sheet__stats > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4rem .75rem; padding: .55rem .7rem; border: 1px solid var(--stat-color, #8d6334); border-radius: .25rem; background: rgba(15,8,5,.7); }
.hero-sheet__stats dt { justify-self: start; color: #cdbb98; font: 700 .5rem/1 Cinzel, serif; text-align: left; text-transform: uppercase; }
.hero-sheet__stats dd { margin: 0; color: var(--stat-color, #f0c56d); font: 800 1rem/1 Inter, sans-serif; }
.energy-meter { grid-column: 1 / -1; height: .48rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--stat-color, #8d6334) 65%, #211007); border-radius: 1rem; background: rgba(0,0,0,.55); box-shadow: inset 0 1px .2rem rgba(0,0,0,.7); }
.energy-meter span { display: block; width: var(--energy-percent, 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--stat-color) 72%, #39170b), var(--stat-color)); box-shadow: 0 0 .55rem var(--stat-color); transition: width .3s ease; }
.experience-stat__cost { grid-column: 1 / -1; justify-self: start; color: #bda77e; font-size: .56rem; line-height: 1.3; text-align: left; }
.hero-sheet section { padding: .7rem; border-top: 1px solid rgba(187,135,67,.4); text-align: left; }
.hero-sheet section h3 { margin: 0 0 .35rem; color: #dca85c; font: 700 .62rem/1 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; }
.hero-sheet section p { margin: 0; color: #ead8b2; font-size: .72rem; line-height: 1.5; }
.hero-currency__row { display: flex; align-items: center; gap: .7rem; }
.hero-currency__row p { flex: 1; }
.hero-currency__balance { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #ffbd63; font-family: Cinzel, serif; text-transform: uppercase; }
.hero-currency__amount { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; }
#hero-lys { color: #ffe09a; font: 800 clamp(1.8rem, 8vw, 2.35rem)/.9 Cinzel, serif; text-shadow: 0 .12rem #5c2c13, 0 0 .7rem rgba(255,189,99,.28); }
#hero-lys-label { color: #d7b878; font: 700 .58rem/1.1 Cinzel, serif; letter-spacing: .09em; }
.buy-lys-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0 0 .08rem; border: 1px solid #9dcfff; border-radius: 50%; color: #eaf7ff; background: #255783; box-shadow: inset 0 0 0 2px #102d49; font: 800 1.3rem/1 Inter, sans-serif; cursor: pointer; }
.hero-currency__row small { display: block; margin-top: .25rem; color: #baa98a; font-size: .62rem; line-height: 1.4; }
.lys-icon { position: relative; flex: 0 0 4rem; width: 4rem; height: 3.8rem; overflow: hidden; border: 1px solid rgba(132,201,255,.58); border-radius: 50%; background: transparent; box-shadow: inset 0 0 1rem rgba(76,177,255,.18), 0 0 .8rem rgba(74,158,226,.2); }
.lys-icon img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.lys-store { width: min(30rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0; overflow: visible; border: 0; color: #e5f4ff; background: transparent; }
.lys-store::backdrop { background: rgba(3,7,12,.86); backdrop-filter: blur(6px); }
.lys-store__card { position: relative; max-height: calc(100dvh - 1.5rem); overflow: auto; padding: 1.5rem 1rem 1.2rem; border: 1px solid #477da9; border-radius: .45rem; background: radial-gradient(circle at 50% 0, rgba(43,101,151,.32), transparent 38%), linear-gradient(#14283b, #080f17); box-shadow: inset 0 0 0 3px #102337, 0 1.5rem 5rem #000; text-align: center; }
.lys-store__close { position: absolute; top: .45rem; right: .55rem; width: 2.5rem; height: 2.5rem; border: 0; color: #b9dfff; background: transparent; font-size: 1.7rem; cursor: pointer; }
.lys-store__card > p:first-of-type, .lys-store__card > span { display: block; margin: 0 0 .35rem; color: #7fb7e5; font: 700 .58rem/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; }
.lys-store h2 { margin: 0 0 .35rem; color: #e8f7ff; font: 700 1.35rem/1.15 Cinzel, serif; text-transform: uppercase; }
.lys-packs { display: grid; grid-template-columns: 1fr; gap: .65rem; margin-top: 1.1rem; }
.lys-pack { display: grid; grid-template-columns: 5.2rem 1fr; grid-template-rows: auto auto; align-items: center; gap: .22rem .75rem; min-width: 0; padding: .55rem .75rem; border: 1px solid #477da9; border-radius: .35rem; color: #dcefff; background: rgba(8,20,31,.82); box-shadow: inset 0 0 1.2rem rgba(67,167,239,.1); text-align: left; cursor: pointer; }
.lys-pack:active { scale: .98; }
.lys-pack:disabled { opacity: .6; cursor: wait; }
.lys-pack strong { align-self: end; font: 800 clamp(.92rem, 4.4vw, 1.15rem)/1.15 Cinzel, serif; text-transform: uppercase; }
.lys-pack > small { align-self: start; color: #9dcfff; font: 700 clamp(.8rem, 3.8vw, 1rem)/1.25 Inter, sans-serif; }
.lys-pack__image { position: relative; display: block; grid-row: 1 / 3; width: 5.2rem; height: 5rem; overflow: hidden; border-radius: .3rem; background: transparent; }
.lys-pack__image img { width: 100%; height: 100%; object-fit: contain; }
.lys-store__status { min-height: 2rem; margin: .9rem 0 0; color: #b9dfff; font-size: .8rem; font-weight: 600; line-height: 1.4; }

.sound-toggle {
  position: fixed;
  z-index: 5;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(239, 189, 94, .65);
  border-radius: 50%;
  color: #f5d991;
  background: rgba(25, 12, 7, .72);
  box-shadow: 0 .3rem 1rem rgba(0,0,0,.45);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.sound-toggle.is-visible { display: grid; }
.sound-toggle__off { display: none; position: absolute; font-size: 1.35rem; color: #e6a762; }
.sound-toggle__off::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.55rem; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 2px #1a0b06; transform: translate(-50%, -50%) rotate(-48deg); }
.sound-toggle.is-muted .sound-toggle__on { opacity: 0; }
.sound-toggle.is-muted .sound-toggle__off { display: block; }
.language-toggle {
  position: fixed;
  z-index: 5;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(239, 189, 94, .65);
  border-radius: 50%;
  color: #f5d991;
  background: rgba(25, 12, 7, .72);
  box-shadow: 0 .3rem 1rem rgba(0,0,0,.45);
  font: 700 .68rem/1 Cinzel, serif;
  letter-spacing: .04em;
  text-transform: lowercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.language-toggle.is-visible { display: grid; }
.sound-toggle.is-visible + .language-toggle { right: max(4.25rem, calc(env(safe-area-inset-right) + 3.25rem)); }

.auth-dialog {
  width: min(29rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  color: #f9e8bf;
  background: transparent;
}
.auth-dialog::backdrop { background: rgba(5, 3, 2, .78); backdrop-filter: blur(5px); animation: veil-in .25s ease-out; }
.auth-dialog[open] { animation: card-in .35s cubic-bezier(.2,.8,.2,1); }
.auth-card {
  position: relative;
  padding: 2.5rem clamp(1.25rem, 6vw, 2.2rem) 1.8rem;
  border: 1px solid #b37836;
  border-radius: .45rem;
  background:
    linear-gradient(rgba(35, 18, 10, .96), rgba(20, 10, 6, .98)),
    repeating-linear-gradient(90deg, transparent 0 2rem, rgba(255,255,255,.02) 2.1rem);
  box-shadow: inset 0 0 0 3px #2b160c, inset 0 0 3rem rgba(199, 111, 26, .12), 0 1.5rem 5rem #000;
}
.auth-card::before, .auth-card::after { content: "◆"; position: absolute; color: #b37836; top: .7rem; font-size: .6rem; }
.auth-card::before { left: .8rem; }
.auth-card::after { right: .8rem; }
.auth-close { position: absolute; z-index: 1; top: .55rem; right: .7rem; width: 2.35rem; height: 2.35rem; border: 0; color: #cda96d; background: transparent; font-size: 1.65rem; cursor: pointer; }
.auth-seal { position: absolute; left: 50%; top: -1.65rem; translate: -50%; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; rotate: 45deg; border: 2px solid #e1ae52; color: #ffd988; background: #713416; box-shadow: inset 0 0 0 3px #32160d, 0 .4rem 1rem #000; }
.auth-seal::first-letter { rotate: -45deg; }
.auth-step { text-align: center; }
.auth-step[hidden] { display: none; }
.auth-character { display: flex; align-items: center; justify-content: center; min-height: 9.6rem; margin: -.8rem 0 .35rem; }
.auth-character img { width: 7.4rem; height: 9.6rem; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 .55rem .4rem rgba(0,0,0,.55)); }
.auth-character p { position: relative; align-self: flex-start; margin: .75rem 0 0 -.3rem; border: 1px solid #8e693c; border-radius: .5rem; padding: .65rem .75rem; color: #442312; background: #f3dfad; box-shadow: inset 0 0 0 2px rgba(91,51,25,.15), 0 .3rem .7rem rgba(0,0,0,.35); font: 700 .67rem/1.35 Cinzel, serif; text-align: left; }
.auth-character p::before { content: ""; position: absolute; left: -.48rem; bottom: .65rem; width: .75rem; height: .75rem; border-left: 1px solid #8e693c; border-bottom: 1px solid #8e693c; background: #f3dfad; transform: rotate(45deg); }
.auth-kicker { margin: 0 0 .35rem; color: #c98d49; font: 700 .65rem/1 Cinzel, serif; letter-spacing: .2em; text-transform: uppercase; }
.auth-step h2 { margin: 0; color: #f5d991; font: 700 clamp(1.55rem, 7vw, 2rem)/1.1 Cinzel, serif; text-shadow: 0 2px #3b190d; }
.auth-copy { margin: .85rem auto 1.25rem; color: #cdbb98; font-size: .88rem; line-height: 1.55; }
.auth-copy strong { color: #f2d18b; overflow-wrap: anywhere; }
.auth-step label { display: block; margin: 0 0 .45rem; text-align: left; color: #e6c98f; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.auth-step input { width: 100%; height: 3.5rem; border: 1px solid #73502d; border-radius: .25rem; padding: 0 .9rem; color: #fff4d4; background: rgba(8, 5, 3, .7); outline: none; box-shadow: inset 0 2px .5rem rgba(0,0,0,.45); }
.auth-step input:focus { border-color: #e4ae55; box-shadow: 0 0 0 3px rgba(228,174,85,.15), inset 0 2px .5rem rgba(0,0,0,.45); }
.auth-step input::placeholder { color: rgba(230, 201, 143, .35); }
.auth-step .code-input { text-align: center; font-size: 1.4rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.auth-error { min-height: 1.25rem; margin: .45rem 0; color: #ee9b7e; font-size: .75rem; }
.auth-submit { width: 100%; min-height: 3.35rem; border: 1px solid #e8b45a; border-radius: .25rem; color: #fff0c5; background: linear-gradient(#985027, #61280f); box-shadow: inset 0 0 0 2px #35160b, 0 .4rem 1rem rgba(0,0,0,.35); font: 700 .85rem/1 Cinzel, serif; letter-spacing: .055em; text-transform: uppercase; cursor: pointer; }
.auth-submit:hover { filter: brightness(1.12); }
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.auth-links button { border: 0; padding: .25rem 0; color: #c99b5b; background: transparent; font-size: .72rem; text-decoration: underline; cursor: pointer; }

.dialog-controls { display: flex; justify-content: center; gap: .4rem; margin: -.55rem 2.5rem .75rem; }
.dialog-controls button { position: relative; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; padding: 0; border: 1px solid rgba(224,172,83,.5); border-radius: 50%; color: #cdbb98; background: rgba(12,6,3,.72); font: 700 .62rem/1 Cinzel, serif; text-transform: lowercase; cursor: pointer; }
.dialog-controls button[aria-pressed="true"]:not(.dialog-sound) { border-color: #f0c36a; color: #fff0bd; background: linear-gradient(#8a471f, #54210e); }
.dialog-sound { font-size: 1.1rem !important; }
.dialog-sound.is-muted::after { content: ""; position: absolute; width: 1.25rem; height: 2px; border-radius: 2px; background: #e6a762; transform: rotate(-48deg); }

.name-dialog { width: min(29rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; overflow: visible; border: 0; color: #f4e4bf; background: transparent; }
.name-dialog::backdrop { background: rgba(4,2,1,.88); backdrop-filter: blur(7px); }
.name-dialog__card { max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.5rem 1.15rem 1.2rem; border: 1px solid #bd8741; border-radius: .45rem; background: radial-gradient(circle at 50% 0, rgba(152,87,30,.25), transparent 42%), linear-gradient(#2b170d, #100805); box-shadow: inset 0 0 0 3px #35190d, 0 1.5rem 5rem #000; text-align: center; }
.name-dialog__card > p:first-child { margin: 0 0 .4rem; color: #c98d49; font: 700 .56rem/1 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; }
.name-dialog h2 { margin: 0; color: #ffe8a9; font: 700 clamp(1.15rem, 5vw, 1.5rem)/1.15 Cinzel, serif; text-transform: uppercase; }
#name-copy { margin: .65rem 0 1rem; color: #cdbb98; font-size: .72rem; line-height: 1.45; }
.name-suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.name-suggestions button { min-height: 2.8rem; padding: .45rem; border: 1px solid #87613a; border-radius: .25rem; color: #f0d8a4; background: rgba(29,14,8,.9); font: 700 .72rem/1.2 Cinzel, serif; cursor: pointer; }
.name-suggestions button[aria-pressed="true"] { border-color: #efbd5e; color: #fff3cb; background: linear-gradient(#985027, #61280f); box-shadow: inset 0 0 0 2px #35160b; }
.name-dialog__status { min-height: 1.2rem; margin: .7rem 0; color: #c99b5b; font-size: .67rem; }
.name-dialog form { text-align: left; }
.name-dialog label { display: block; margin-bottom: .35rem; color: #d8bd85; font: 700 .62rem/1 Cinzel, serif; text-transform: uppercase; }
.name-dialog input { width: 100%; height: 3.35rem; border: 1px solid #73502d; border-radius: .25rem; padding: 0 .85rem; color: #fff4d4; background: rgba(8,5,3,.75); font-size: 1rem; outline: none; }
.name-dialog input:focus { border-color: #e4ae55; box-shadow: 0 0 0 3px rgba(228,174,85,.15); }
#name-limit { display: block; margin-top: .3rem; color: #9f8b6c; font-size: .6rem; }

.splash.is-entering { animation: fade-out .65s ease-in forwards; pointer-events: none; }

@keyframes awaken { from { scale: 1.1; filter: brightness(.6); } to { scale: 1.02; filter: brightness(1); } }
@keyframes title-in { from { opacity: 0; translate: 0 -1.2rem; } to { opacity: 1; translate: 0; } }
@keyframes actions-in { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0; } }
@keyframes glint { 0%, 68% { translate: -500% 0; } 88%, 100% { translate: 500% 0; } }
@keyframes breathe { 50% { opacity: .45; } }
@keyframes fade-out { to { opacity: 0; scale: 1.035; filter: brightness(1.5); } }
@keyframes location-in { from { opacity: 0; filter: brightness(1.5); } to { opacity: 1; filter: brightness(1); } }
@keyframes location-out { from { opacity: 1; } to { opacity: 0; scale: 1.025; filter: brightness(1.35); } }
@keyframes reward-reveal { 0% { opacity: 0; scale: .82; } 70% { opacity: 1; scale: 1.04; } 100% { opacity: 1; scale: 1; } }
@keyframes reward-gain { 0% { opacity: 0; translate: 0 .8rem; } 35%, 100% { opacity: 1; translate: 0 0; } }
@keyframes zone-target { 50% { filter: brightness(1.25); } }
@keyframes veil-in { from { opacity: 0; } }
@keyframes card-in { from { opacity: 0; translate: 0 1rem; scale: .97; } }

@media (min-width: 760px) and (orientation: landscape) {
  .splash { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-items: center; padding-inline: 7vw; }
  .brand { margin: 0; width: min(35rem, 46vw); }
  .actions { align-self: center; margin: 11rem auto 0; width: min(25rem, 36vw); }
  .splash__backdrop { background-position: center 57%; }
  .splash__shade { background: linear-gradient(90deg, rgba(5,3,2,.72), transparent 47%, rgba(5,3,2,.63)); }
}

@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait) {
  .tavern-screen .hero-select { padding-top: max(5rem, calc(env(safe-area-inset-top) + 4.25rem)); }
  .public-hero, .shop-hero, .gate-hero, .church-hero, .apothecary-hero, .road-hero { width: min(14rem, 29vw); }
  .public-hero.is-warrior, .shop-hero.is-warrior, .gate-hero.is-warrior, .church-hero.is-warrior, .apothecary-hero.is-warrior, .road-hero.is-warrior { width: min(16.5rem, 34vw); }
}

@media (max-width: 699px) {
  .tavern-screen .hero-select { padding-top: max(5rem, calc(env(safe-area-inset-top) + 4.25rem)); }
  .location-banner { top: max(4.6rem, calc(env(safe-area-inset-top) + 4rem)); }
  .barcode-capture { margin-top: 10rem; }
}

@media (max-height: 620px) {
  .brand { margin-top: .15rem; }
  .actions { margin-bottom: 1.45rem; }
  h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .enter-button { min-height: 3.6rem; }
  .auth-character { min-height: 6.8rem; }
  .auth-character img { width: 5.4rem; height: 6.8rem; }
  .auth-copy { margin-block: .55rem .8rem; }
}

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