:root { font-family: Inter, ui-rounded, system-ui, sans-serif; color: #f8f1dc; background: #0d1713; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% 20%, #31503b 0, #14251d 35%, #0d1713 70%); }
#notice { position: fixed; z-index: 10; top: 1rem; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 2rem)); padding: .9rem 1.2rem; border: 1px solid #eebc65; border-radius: 10px; background: #172820; color: #f8f1dc; box-shadow: 0 8px 30px #0009; }
#notice.error { border-color: #ff766b; color: #ffd7d3; }
button, input, select { font: inherit; }
button { cursor: pointer; }
header, footer { display: flex; justify-content: space-between; padding: 1.3rem clamp(1.2rem, 5vw, 5rem); color: #b9c9b8; border-bottom: 1px solid #ffffff18; }
header strong { letter-spacing: .12em; }
header strong span, .eyebrow, a { color: #eebc65; }
.online { color: #75d69d; }
main { max-width: 1100px; margin: auto; padding: 3rem 1.4rem; }
.hero { text-align: center; margin-bottom: 3rem; }
.hero #profile { display: flex; justify-content: center; gap: .5rem; max-width: 420px; margin: 1rem auto; }
.progress-card { display: grid; grid-template-columns: auto minmax(120px, 260px) auto; align-items: center; justify-content: center; gap: .65rem; margin: 1rem auto; color: #e8dcb8; font-size: .82rem; }
.progress-card > span { color: #eebc65; font-weight: 800; }.progress-card small { color: #b9c9b8; }
.progress-track { overflow: hidden; height: 12px; border: 2px solid #694b2d; border-radius: 999px; background: #0d1713; box-shadow: inset 0 2px 4px #0008; }
.progress-track :where(i) { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #eebc65, #ffdf7f); transition: width .4s ease; }
.health { width: fit-content; margin: -.4rem auto .8rem; padding: .3rem .7rem; border-radius: 999px; background: #321e20; color: #ffaaa2; font-size: .82rem; }
.hero h1, .auth h1 { font: 700 clamp(2.5rem, 7vw, 5.5rem)/.95 Georgia, serif; margin: .25em 0; }
.eyebrow { font-weight: 800; font-size: .75rem; letter-spacing: .18em; }
.card, .shadow { border: 1px solid #ffffff1c; background: #172820e8; color: inherit; border-radius: 18px; }
.card { padding: 1.5rem; margin-bottom: 1.5rem; }
.auth { max-width: 500px; margin: 5vh auto; padding: 2rem; }
.tabs { display: flex; margin-bottom: 1rem; }
.tabs button { flex: 1; background: transparent; color: #aaa; border: 0; border-bottom: 2px solid #456; padding: .8rem; }
.tabs .active { color: #eebc65; border-color: #eebc65; }
form { display: grid; gap: .7rem; }
input, select, form button, #actions button, .minor, .duel button, [data-accept], [data-suspend] { border: 1px solid #ffffff24; border-radius: 9px; background: #263a2f; color: #fff; padding: .75rem; }
.error, .danger { color: #ff9b91; }
.questionnaire form { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; padding: .6rem 0; border-top: 1px solid #ffffff12; }
.account-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.account-actions > div { display: grid; align-content: start; gap: .7rem; }
.account-actions button { border: 1px solid #ffffff24; border-radius: 9px; background: #263a2f; color: #fff; padding: .75rem; }
.columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 1.5rem; }
.players { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.guide { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 1.5rem; border-color: #eebc6566; background: linear-gradient(120deg, #2d4935, #172820); }.guide h2, .guide p { margin: .25rem 0; }.guide > div > p:last-child { color: #c2d0c0; }.guide-steps { display: grid; gap: .45rem; }.guide-steps span { padding: .55rem .7rem; border-radius: 7px; background: #0d171388; color: #9eaea0; }.guide-steps span.done { color: #dff7c9; box-shadow: inset 4px 0 #75d69d; }.zone-label { margin: 0 0 .5rem; color: #eebc65; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.zone-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }.zone-nav button { display: grid; gap: .25rem; padding: .85rem; border: 2px solid #4b674f; border-radius: 10px; background: #172820; color: #f8f1dc; text-align: left; box-shadow: 0 5px #09100c; }.zone-nav button:hover:not(:disabled) { border-color: #eebc65; transform: translateY(-2px); }.zone-nav button.active { border-color: #eebc65; background: #2d4935; cursor: default; }.zone-nav small { color: #91a596; }
.village-card { padding: 1rem; background: #253d30; box-shadow: 0 14px 35px #050b0788; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .35rem .5rem 1rem; }
.section-title h2, .section-title p { margin: 0; }
.section-title > p { color: #b9c9b8; font-size: .9rem; }
#map { position: relative; isolation: isolate; overflow: hidden; height: clamp(360px, 55vw, 560px); border: 5px solid #694b2d; border-radius: 12px; background-color: #65a653; background-image: radial-gradient(circle at 20% 30%, #8bc368 0 3px, transparent 4px), radial-gradient(circle at 72% 68%, #4b913e 0 3px, transparent 4px), linear-gradient(#ffffff08 50%, transparent 50%); background-size: 83px 71px, 97px 89px, 100% 8px; cursor: crosshair; box-shadow: inset 0 0 0 3px #a77842, inset 0 0 35px #284d2588; image-rendering: pixelated; }
#map::after { content: ''; position: absolute; z-index: 8; inset: 0; pointer-events: none; box-shadow: inset 0 0 28px #14251d88; }
#map:focus-visible { outline: 4px solid #eebc65; outline-offset: 3px; }
.zone-forest { background: #6f9d4b !important; background-image: none !important; }.zone-forest .house, .zone-forest .garden, .zone-forest .well, .zone-forest .bridge { display: none; }.zone-forest .river { right: auto; left: 7%; width: 12%; transform: rotate(-4deg); }.zone-forest .path { background: #9b7a4d; border-color: #795b37; box-shadow: inset 0 0 0 4px #b6925c; }.zone-forest .map-hint { background: #244f2d; }
.zone-deep-forest { background: #244936 !important; background-image: none !important; border-color: #294e3d !important; box-shadow: inset 0 0 0 3px #396950, inset 0 0 90px #06110d !important; }.zone-deep-forest .house, .zone-deep-forest .garden, .zone-deep-forest .well, .zone-deep-forest .tree, .zone-deep-forest .river, .zone-deep-forest .bridge { display: none; }.zone-deep-forest .path { background: #304c3d; border-color: #21392e; box-shadow: inset 0 0 0 4px #41614f; }.zone-deep-forest .map-hint { background: #10241c; border-color: #75d69d; color: #c9ffda; }
.path { position: absolute; z-index: -1; background: #d6b477; border: 4px solid #b18b52; box-shadow: inset 0 0 0 4px #e4c98e; }
.path-horizontal { left: -4%; right: -4%; top: 44%; height: 19%; transform: rotate(-2deg); }
.path-vertical { top: -8%; bottom: -8%; left: 43%; width: 14%; transform: rotate(4deg); }
.river { position: absolute; z-index: -2; top: 0; bottom: 0; right: 2%; width: 6%; background: repeating-linear-gradient(0deg, #55bad0 0 8px, #78d5df 8px 14px, #43a3bf 14px 22px); border-inline: 5px solid #d4c27b; box-shadow: 0 0 0 5px #477f3f; }
.bridge { position: absolute; z-index: 0; right: 1%; top: 54%; width: 10%; height: 14%; background: repeating-linear-gradient(90deg, #9b6035 0 13px, #c8864c 13px 25px); border: 5px solid #603d28; box-shadow: 0 5px #372519; }
.house { position: absolute; z-index: 1; width: 105px; height: 72px; background: #e9c578; border: 5px solid #704129; border-radius: 3px; box-shadow: inset 0 -10px #c99252, 0 8px #315c31; pointer-events: none; }
.building-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.building-state-image { display: none; position: absolute; z-index: 6; left: 50%; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; translate: -50% 0; transform-origin: 50% 100%; pointer-events: none; image-rendering: pixelated; }
.building-closed:is(.asset-closed-pending, .asset-closed-ready) .building-state-closed, .building-open:is(.asset-open-pending, .asset-open-ready) .building-state-open { display: block; }
.building-closed .building-interior { visibility: hidden; }
.building-open .building-roof { visibility: hidden; }
.house::before { content: ''; position: absolute; left: -14px; right: -14px; top: -47px; height: 50px; background: #b8573f; border: 5px solid #704129; clip-path: polygon(50% 0, 100% 70%, 91% 100%, 9% 100%, 0 70%); }
.house span { position: absolute; width: 25px; height: 38px; bottom: 0; left: 35px; background: #704129; border: 4px solid #4a2c20; }
.house-left { left: 7%; top: 19%; transform: scale(.9); }
.house-right { right: 4%; bottom: 8%; transform: scale(.72); }
.tree { position: absolute; z-index: 1; width: 52px; height: 52px; border-radius: 45% 55% 48% 52%; background: #2f7138; border: 5px solid #20502c; box-shadow: inset 8px 8px #469348, 5px 8px #315c31; pointer-events: none; }
.tree::after { content: ''; position: absolute; z-index: -1; width: 13px; height: 30px; left: 15px; top: 39px; background: #81502e; border: 3px solid #58361f; }
.tree-one { left: 36%; top: 84%; translate: -50% -50%; }.tree-two { left: 28%; top: 91%; translate: -50% -50%; transform: scale(.8); }.tree-three { left: 68%; top: 10%; translate: -50% -50%; transform: scale(.75); }
.garden { position: absolute; left: 19%; top: 5%; display: grid; grid-template-columns: repeat(3, 13px); gap: 9px; padding: 8px; background: #754b2e; border: 4px solid #a97642; transform: rotate(-3deg); pointer-events: none; }
.garden i { width: 9px; height: 9px; border-radius: 50%; background: #ffd34f; box-shadow: 0 0 0 4px #fff2a1; }
.well { position: absolute; z-index: 1; left: 60.5%; top: 27%; width: 54px; height: 39px; translate: -50% -50%; border-radius: 50%; background: #24506a; border: 9px solid #9c9d8a; box-shadow: 0 5px #545c55; pointer-events: none; }
.map-hint { position: absolute; z-index: 1; left: 50%; top: 66%; transform: translateX(-50%); padding: .35rem .65rem; background: #3c2c20cc; border: 2px solid #d8b56f; border-radius: 5px; color: #ffe8aa; font: 700 .67rem/1 ui-monospace, monospace; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.pawn { position: absolute; z-index: 5; width: 46px; height: 58px; padding: 0; transform: translate(-50%, -68%); border: 0; background: transparent !important; color: inherit; filter: drop-shadow(0 5px 2px #17351d88); transition: left .5s linear, top .5s linear, transform .15s; }
.pawn:not(.self):hover, .pawn:not(.self):focus-visible { transform: translate(-50%, -72%) scale(1.12); }
.pawn.self { pointer-events: none; }
.pawn.is-moving .character { animation: character-step .24s steps(2) infinite; }
@keyframes character-step { 25% { translate: 0 -4px; rotate: -2deg; } 75% { translate: 0 -2px; rotate: 2deg; } }
#destination { position: absolute; z-index: 2; display: none; width: 18px; height: 10px; translate: -50% -50%; border: 3px solid #fff2a1; border-radius: 50%; box-shadow: 0 0 0 2px #694b2d88; pointer-events: none; animation: destination-pulse .7s ease-out infinite alternate; }
#destination.visible { display: block; }
@keyframes destination-pulse { to { transform: scale(.7); opacity: .55; } }
.character { display: block; position: relative; width: 100%; height: 100%; }
.character-renderer { position: absolute; left: 50%; bottom: 0; width: 68px; height: 91px; translate: -50% 0; pointer-events: none; }
.pawn.character-shadow, .pawn.character-male, .pawn.character-female { width: 68px; height: 91px; transform: translate(-50%, -100%); }
.pawn.character-shadow:not(.self):hover, .pawn.character-shadow:not(.self):focus-visible,
.pawn.character-male:not(.self):hover, .pawn.character-male:not(.self):focus-visible,
.pawn.character-female:not(.self):hover, .pawn.character-female:not(.self):focus-visible { transform: translate(-50%, -100%) scale(1.08); }
.character-sprite { display: block; width: 68px; height: 90.5px; background-repeat: no-repeat; image-rendering: auto; transform-origin: 50% 100%; }
.sprite-shadow { background-image: url('/assets/characters/shadow-v4.svg'); background-size: 1632px 1086px; }
.sprite-male { background-image: url('/assets/characters/male-v4.svg'); background-size: 1632px 1086px; }
.sprite-female { background-image: url('/assets/characters/female-v4.svg'); background-size: 1632px 1086px; }
.character-sprite.direction-down { --direction-row: 0; }
.character-sprite.direction-left { --direction-row: 1; }
.character-sprite.direction-right { --direction-row: 2; }
.character-sprite.direction-up { --direction-row: 3; }
.character-sprite { background-position-y: calc((var(--direction-row, 0) + var(--state-row, 4)) * -90.5px); }
/* Player poses always run: walking and breathing are game feedback,
   independent of device motion preferences or old saved animation settings. */
.character-sprite.state-walking { --state-row: 0; animation: sprite-walk 640ms steps(24) infinite; }
.character-sprite.state-walking[data-distance-driven] { animation: none; background-position-x: var(--gait-x, 0px); }
.character-sprite.state-settling { --state-row: 8; animation: none; background-position-x: var(--gait-x, 0px); }
.character-sprite.state-idle { --state-row: 4; background-position-x: 0; animation: sprite-rest 6000ms steps(24) infinite; }
.character-sprite.state-attack-ready { --state-row: 4; background-position-x: -272px; animation: none; }
.character-sprite.state-attacking { --state-row: 4; background-position-x: 0; animation: none; }
.hud-portrait .character-sprite.state-idle { animation: none; }
@keyframes sprite-walk { from { background-position-x: 0; } to { background-position-x: -1632px; } }
/* Drawn breathing, stable feet: no scaling or rotation of the full body.
   One 250 ms eyelid pose during each six-second breathing cycle. */
@keyframes sprite-rest { from { background-position-x: 0; } to { background-position-x: -1632px; } }

/* Combat is a distinct visual state, so walking and breathing cannot overwrite it.
   The seven poses read as guard, wind-up, crouch, strike, contact, recovery, rest. */
#self.player-attack-ready .character-renderer { transform: translate(calc(var(--attack-back-x, 0px) * .35),calc(var(--attack-back-y, 0px) * .35)) rotate(calc(var(--attack-rotate, 0deg) * -.18)); }
#self.player-attacking .character-renderer { animation: player-attack-body var(--attack-duration,520ms) cubic-bezier(.22,.7,.2,1) both; }
#self.attack-direction-left { --attack-x: calc(var(--attack-lunge) * -1); --attack-y: 0px; --attack-back-x: var(--attack-lunge); --attack-back-y: 0px; --attack-rotate: -7deg; --impact-left: -9px; --impact-top: 43px; }
#self.attack-direction-right { --attack-x: var(--attack-lunge); --attack-y: 0px; --attack-back-x: calc(var(--attack-lunge) * -1); --attack-back-y: 0px; --attack-rotate: 7deg; --impact-left: 61px; --impact-top: 43px; }
#self.attack-direction-up { --attack-x: 0px; --attack-y: calc(var(--attack-lunge) * -.7); --attack-back-x: 0px; --attack-back-y: calc(var(--attack-lunge) * .45); --attack-rotate: -3deg; --impact-left: 31px; --impact-top: 4px; }
#self.attack-direction-down { --attack-x: 0px; --attack-y: calc(var(--attack-lunge) * .7); --attack-back-x: 0px; --attack-back-y: calc(var(--attack-lunge) * -.45); --attack-rotate: 3deg; --impact-left: 31px; --impact-top: 78px; }
@keyframes player-attack-body {
  0% { transform: translate(0,0) rotate(0) scale(1); }
  16% { transform: translate(calc(var(--attack-back-x) * .25),calc(var(--attack-back-y) * .25)) rotate(calc(var(--attack-rotate) * -.18)) scale(1.01,.99); }
  32% { transform: translate(calc(var(--attack-back-x) * .48),calc(var(--attack-back-y) * .48)) rotate(calc(var(--attack-rotate) * -.42)) scale(1.03,.97); }
  55% { transform: translate(var(--attack-x),var(--attack-y)) rotate(var(--attack-rotate)) scale(.98,1.04); }
  66% { transform: translate(calc(var(--attack-x) * .82),calc(var(--attack-y) * .82)) rotate(calc(var(--attack-rotate) * .65)) scale(1.01,.99); }
  84% { transform: translate(calc(var(--attack-back-x) * .12),calc(var(--attack-back-y) * .12)) rotate(calc(var(--attack-rotate) * -.1)) scale(1); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
#self.player-attacking::after { content:''; position:absolute; z-index:9; left:var(--impact-left); top:var(--impact-top); width:18px; height:18px; border:3px solid #fff0b4; border-left-color:transparent; border-radius:50%; opacity:0; pointer-events:none; animation:player-punch-impact var(--attack-duration,520ms) ease-out both; }
#self.attack-sword.player-attacking::after { width:42px; height:42px; border-width:5px; border-color:#d9fbff #d9fbff transparent transparent; filter:drop-shadow(0 0 5px #bffcff); }
#self.attack-sword.player-attacking .character-weapon { animation:player-sword-swing var(--attack-duration,620ms) ease-in-out both; }
@keyframes player-punch-impact { 0%,45% { opacity:0; transform:scale(.35) rotate(-45deg); } 53% { opacity:1; transform:scale(1.2) rotate(20deg); } 68%,100% { opacity:0; transform:scale(1.65) rotate(70deg); } }
@keyframes player-sword-swing { 0% { rotate:-35deg; } 32% { rotate:-70deg; } 58% { rotate:75deg; } 100% { rotate:28deg; } }
.character-head { position: absolute; z-index: 2; left: 8px; top: 0; width: 31px; height: 31px; border: 3px solid #493324; border-radius: 45% 45% 48% 48%; background: #efbd88; box-shadow: inset 0 5px var(--avatar, #7a5636); }
.character-head::before { content: ''; position: absolute; left: 6px; top: 14px; width: 4px; height: 4px; background: #30251f; border-radius: 50%; box-shadow: 12px 0 #30251f; }
.character-head::after { content: ''; position: absolute; left: 10px; top: 21px; width: 7px; height: 3px; border-bottom: 2px solid #9b574d; border-radius: 50%; }
.character-body { position: absolute; left: 5px; top: 26px; width: 37px; height: 28px; border: 3px solid #493324; border-radius: 9px 9px 5px 5px; background: var(--avatar, #78b96b); box-shadow: inset 0 -8px #0002; }
.character-body::before, .character-body::after { content: ''; position: absolute; bottom: -8px; width: 10px; height: 11px; background: #4c392e; border: 2px solid #34261f; }
.character-body::before { left: 2px; }.character-body::after { right: 2px; }
.character-mark { position: absolute; z-index: 3; top: -12px; left: 16px; color: #fff5c7; font-size: .85rem; text-shadow: 0 2px #493324; }
.stage-0 .character-head, .stage-0 .character-body { background: #273129; box-shadow: none; }
.stage-0 .character-head::before, .stage-0 .character-head::after, .stage-1 .character-head::before, .stage-1 .character-head::after, .stage-2 .character-head::after { display: none; }
.avatar-forest { --avatar: #78b96b; }
.avatar-sunset { --avatar: #e88b62; }
.avatar-ocean { --avatar: #64a9d8; }
.avatar-hidden { --avatar: #101512; }
.stage-0 { color: #59635c !important; filter: brightness(.55) drop-shadow(0 5px 2px #17351d88); }
.stage-1 { border-color: var(--avatar) !important; }
.stage-2 { background: color-mix(in srgb, var(--avatar) 35%, #172820) !important; }
.stage-3 { background: color-mix(in srgb, var(--avatar) 65%, #172820) !important; color: #fff !important; }
.stage-4, .stage-5 { background: var(--avatar) !important; color: #102017 !important; filter: drop-shadow(0 0 8px var(--avatar)); }
.stage-5 { box-shadow: 0 0 0 3px #f8f1dc55, 0 5px 16px #0008; }
.shadow { padding: 1.3rem; transition: transform .2s, border-color .2s; }
.shadow:hover { transform: translateY(-4px); border-color: #eebc6588; }
.shadow i { display: grid; place-items: center; margin: auto auto 1rem; width: 90px; height: 100px; border-radius: 50% 50% 35% 35%; background: #0d1713; font: italic 3rem Georgia; color: #eebc65; }
.shadow i.portrait { position: relative; overflow: hidden; background: linear-gradient(#7fb4bc 0 62%, #6e9c55 62%) !important; border: 3px solid #d8b56f; filter: none; }
.portrait .character { transform: scale(1.45); transform-origin: center bottom; top: 13px; }
.portrait.stage-0 .character { filter: brightness(.45); }
.shadow b, .shadow small { display: block; }
.shadow small { color: #91a596; margin-top: .4rem; }
.ranking h2 { margin-top: .15rem; }.rank-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: .45rem; align-items: center; padding: .55rem 0; border-top: 1px solid #ffffff12; font-size: .85rem; }.rank-row.self { color: #ffe094; }.rank-row strong { overflow: hidden; text-overflow: ellipsis; }.rank-row small { color: #91a596; }
.daily { border-color: #eebc6555; background: linear-gradient(145deg, #263f31, #172820); }.daily h2 { margin: .2rem 0; }.daily > p:not(.eyebrow) { color: #b9c9b8; font-size: .85rem; }.quest-goal { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid #ffffff12; }.quest-goal.done { color: #75d69d; }.daily button { width: 100%; margin-top: .7rem; padding: .7rem; border: 2px solid #8d6636; border-radius: 8px; background: #eebc65; color: #172820; font-weight: 800; }.daily button:disabled { cursor: default; opacity: .55; }
.inventory-card .section-title { padding-inline: 0; }.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .75rem; }.item-stack { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: .6rem; min-height: 72px; padding: .65rem; border: 2px solid #715437; border-radius: 9px; background: #263a2f; box-shadow: inset 0 0 0 2px #ffffff08; }.item-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 7px; background: #172820; font-size: 1.5rem; }.item-stack strong, .item-stack small { display: block; }.item-stack small { color: #91a596; }.item-stack button { border: 0; background: transparent; color: #ffaaa2; font-size: 1.1rem; }.empty-slot { min-height: 72px; border: 2px dashed #ffffff18; border-radius: 9px; }
.duel { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-top: 1px solid #ffffff12; }
.duel span { margin-right: auto; }
.modal { position: fixed; z-index: 2; left: 50%; top: 50%; width: min(560px, calc(100% - 2rem)); transform: translate(-50%, -50%); text-align: center; box-shadow: 0 20px 80px #000c; }
.close { position: absolute; right: 1rem; top: .5rem; background: none; border: 0; color: white; font-size: 2rem; }
#actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
footer { font-size: .8rem; border: 0; }
.map-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; padding: .8rem .4rem 0; color: #b9c9b8; font-size: .78rem; }
.map-legend span { display: flex; align-items: center; gap: .35rem; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; background: #eebc65; }.map-legend .legend-player { background: #75d69d; }
.map-legend .legend-monster { background: #b4e251; }
.monster { position: absolute; z-index: 6; width: 100px; height: 88px; padding: 25px 8px 13px; translate: -50% -58%; border: 0; background: #172820dd; border-radius: 12px; color: #fff; filter: drop-shadow(0 7px 3px #17351d99); box-shadow: 0 0 0 3px #eebc65; animation: monster-alert 1.1s ease-in-out infinite alternate; }.monster-name { position: absolute; left: 50%; top: 5px; translate: -50%; width: max-content; max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: .68rem; font-weight: 900; white-space: nowrap; text-shadow: 0 2px #000; }.monster > small { position: absolute; left: 0; right: 0; bottom: 2px; font-size: .6rem; }.monster-sprite { display: block; position: relative; width: 54px; height: 40px; margin: auto; border: 4px solid #314525; border-radius: 55% 50% 42% 48%; background: #8fc64e; box-shadow: inset 8px 9px #b7e66c; }.monster-sprite::before { content: ''; position: absolute; left: 11px; top: 17px; width: 5px; height: 5px; border-radius: 50%; background: #1f281b; box-shadow: 19px 0 #1f281b; }.monster-sprite::after { content: ''; position: absolute; left: 19px; bottom: 5px; width: 10px; height: 3px; border-bottom: 2px solid #39502a; }.monster:hover .monster-sprite, .monster:focus-visible .monster-sprite { transform: scale(1.15); }.monster-hp { position: absolute; left: 8px; right: 8px; bottom: 12px; height: 8px; border: 2px solid #26351e; background: #2c1b1c; }.monster-hp i { display: block; height: 100%; background: #e55f55; }.monster.dead { opacity: .5; filter: grayscale(1); pointer-events: none; animation: none; }@keyframes monster-alert { to { translate: -50% -63%; box-shadow: 0 0 0 5px #eebc6533; } }
/* Presets sélectionnés dans public/world.js. */
.forge.skin-ember { background: #dfae68; }.forge.skin-ember::before { background: #843d32; }
.forge.skin-slate { background: #aab0ad; }.forge.skin-slate::before { background: #4e5960; }
.market.skin-meadow { background: #d8c979; }.market.skin-meadow::before { background: #4f7b48; }
.market.skin-harvest { background: #e2ad5c; }.market.skin-harvest::before { background: #9b5434; }
.town-hall.skin-royal::before { background: #526f9a; }.town-hall.skin-forest::before { background: #47734d; }
.map-legend .legend-portal { background: #ba8cff; }.portal { position: absolute; z-index: 5; width: 76px; min-height: 82px; translate: -50% -50%; border: 3px solid #dfc4ff; border-radius: 50% 50% 12px 12px; background: radial-gradient(ellipse, #c994ff88, #3a2456 60%); color: #fff; box-shadow: 0 0 18px #ba8cff; animation: portal-glow 1.2s ease-in-out infinite alternate; }.portal span { display: block; color: #f4deff; font-size: 1.7rem; }.portal strong { display: block; font-size: .58rem; line-height: 1.15; }.portal:hover { filter: brightness(1.25); }@keyframes portal-glow { to { box-shadow: 0 0 30px #dcbcff; } }
[hidden] { display: none !important; }
@media (max-width: 760px) { .questionnaire form, .columns, .account-actions, .guide { grid-template-columns: 1fr; } .players { grid-template-columns: 1fr; } .zone-nav { grid-template-columns: 1fr; }.section-title { display: block; }.section-title > p { margin-top: .5rem; } #map { height: 420px; } .house-right { display: none; } .portal { width: 62px; }.portal strong { font-size: .5rem; } footer { display: block; text-align: center; } }

/* Grand monde défilant : la fenêtre montre une partie de la carte et suit le héros. */
.map-viewport { position: relative; overflow: hidden; height: min(68vh, 680px); min-height: 440px; border: 5px solid #694b2d; border-radius: 12px; background: #101b16; }
.map-viewport #map { width: 1600px; height: 1000px; max-width: none; border: 0; border-radius: 0; }

/* Les outils personnels restent accessibles sans encombrer la carte. */
.side-tools { position: fixed; z-index: 100; right: .75rem; top: 42%; display: grid; gap: .65rem; transform: translateY(-50%); }
.side-tools button { display: grid; place-items: center; width: 66px; min-height: 64px; padding: .45rem; border: 2px solid #715437; border-radius: 14px; background: #172820; color: #f8f1dc; box-shadow: 0 6px 18px #0008; }
.side-tools button:hover, .side-tools button[aria-expanded="true"] { border-color: #eebc65; background: #2d4935; transform: translateX(-4px); }
.side-tools span { font-size: 1.5rem; }.side-tools small { font-size: .65rem; }
.drawer { position: fixed; z-index: 21; right: 5.8rem; top: 50%; overflow: auto; width: min(620px, calc(100vw - 8rem)); max-height: calc(100vh - 2rem); margin: 0; transform: translateY(-50%); border-color: #eebc6577; box-shadow: 0 20px 80px #000d; }
.drawer-close { position: sticky; z-index: 1; float: right; top: 0; width: 2.3rem; height: 2.3rem; border: 1px solid #ffffff33; border-radius: 50%; background: #263a2f; color: #fff; font-size: 1.4rem; }
.adventure-drawer > section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ffffff18; }
.adventure-drawer .guide { display: block; padding: 1rem; margin: 1rem 0 0; }
.adventure-drawer .guide-steps { margin-top: .75rem; }
.adventure-summary h3, .adventure-summary p { margin: .25rem 0; }
.adventure-summary .map-legend { padding: .75rem 0 0; }
.monster.attacking { pointer-events: none; animation: monster-hit .18s ease-in-out infinite alternate; }
@keyframes monster-hit { to { filter: brightness(1.8) drop-shadow(0 0 12px #fff); transform: scale(.92); } }
.map-legend .legend-npc { background: #ffdc6a; box-shadow: 0 0 0 2px #714c25; }
.house b, .town-hall b { position: absolute; left: 50%; bottom: -24px; translate: -50%; padding: 4px 7px; border: 2px solid #6c4828; border-radius: 4px; background: #f1d18b; color: #4a2c20; font: 800 10px/1 ui-monospace, monospace; white-space: nowrap; }
.town-hall { position: absolute; z-index: 1; left: 42%; top: 10%; width: 150px; height: 92px; border: 5px solid #704129; background: #f0d292; box-shadow: inset 0 -14px #c99252, 0 8px #315c31; pointer-events: none; }
.town-hall::before { content: ''; position: absolute; left: -15px; right: -15px; top: -45px; height: 48px; border: 5px solid #704129; background: #637f9f; clip-path: polygon(50% 0, 100% 75%, 92% 100%, 8% 100%, 0 75%); }
.town-hall span { position: absolute; left: 55px; bottom: 0; width: 34px; height: 50px; border: 4px solid #4a2c20; background: #704129; }
.zone-forest .town-hall, .zone-deep-forest .town-hall { display: none; }
.npc { position: absolute; z-index: 7; display: grid; place-items: center; width: 82px; min-height: 90px; padding: 20px 4px 4px; translate: -50% -65%; border: 0; background: transparent; color: #fff5d6; filter: drop-shadow(0 5px 3px #0008); }
.npc:hover, .npc:focus-visible { scale: 1.08; }
.npc-role { position: absolute; top: 0; padding: 3px 6px; border: 2px solid #704129; border-radius: 5px; background: #f1d18b; color: #4a2c20; font: 800 9px/1 ui-monospace, monospace; }
.npc-sprite { display: grid; place-items: center; width: 44px; height: 52px; border: 3px solid #493324; border-radius: 45% 45% 9px 9px; background: linear-gradient(#efbd88 0 48%, #496f8f 48%); box-shadow: inset 0 5px #754b2e; }
.npc-sprite i { margin-top: 17px; font-style: normal; font-size: 18px; }.npc strong { font-size: 11px; text-shadow: 0 2px #000; }
.npc-dialog { border-color: #eebc65; }.npc-dialog > button:last-child { padding: .75rem 1rem; border: 2px solid #8d6636; border-radius: 8px; background: #eebc65; color: #172820; font-weight: 800; }.npc-close { position: absolute; right: 1rem; top: .5rem; border: 0; background: none; color: white; font-size: 2rem; }

@media (max-width: 760px) {
  .map-viewport { height: 62vh; min-height: 380px; }
  .map-viewport #map { width: 1200px; height: 800px; }
  .side-tools { top: 32%; right: .35rem; bottom: auto; grid-template-columns: 1fr; transform: none; }
  .side-tools button { width: 58px; min-height: 54px; }
  .side-tools button:hover, .side-tools button[aria-expanded="true"] { transform: translateX(-4px); }
  .drawer { right: 4.2rem; top: .5rem; bottom: .5rem; width: calc(100vw - 1rem); max-height: none; transform: none; }
}

/* Positions de jeu prédéfinies : aucune propriété style intégrée n’est nécessaire. */
.pos-x-0 { left: 0%; } .pos-y-0 { top: 0%; } .percent-0 { width: 0%; }
.pos-x-1 { left: 1%; } .pos-y-1 { top: 1%; } .percent-1 { width: 1%; }
.pos-x-2 { left: 2%; } .pos-y-2 { top: 2%; } .percent-2 { width: 2%; }
.pos-x-3 { left: 3%; } .pos-y-3 { top: 3%; } .percent-3 { width: 3%; }
.pos-x-4 { left: 4%; } .pos-y-4 { top: 4%; } .percent-4 { width: 4%; }
.pos-x-5 { left: 5%; } .pos-y-5 { top: 5%; } .percent-5 { width: 5%; }
.pos-x-6 { left: 6%; } .pos-y-6 { top: 6%; } .percent-6 { width: 6%; }
.pos-x-7 { left: 7%; } .pos-y-7 { top: 7%; } .percent-7 { width: 7%; }
.pos-x-8 { left: 8%; } .pos-y-8 { top: 8%; } .percent-8 { width: 8%; }
.pos-x-9 { left: 9%; } .pos-y-9 { top: 9%; } .percent-9 { width: 9%; }
.pos-x-10 { left: 10%; } .pos-y-10 { top: 10%; } .percent-10 { width: 10%; }
.pos-x-11 { left: 11%; } .pos-y-11 { top: 11%; } .percent-11 { width: 11%; }
.pos-x-12 { left: 12%; } .pos-y-12 { top: 12%; } .percent-12 { width: 12%; }
.pos-x-13 { left: 13%; } .pos-y-13 { top: 13%; } .percent-13 { width: 13%; }
.pos-x-14 { left: 14%; } .pos-y-14 { top: 14%; } .percent-14 { width: 14%; }
.pos-x-15 { left: 15%; } .pos-y-15 { top: 15%; } .percent-15 { width: 15%; }
.pos-x-16 { left: 16%; } .pos-y-16 { top: 16%; } .percent-16 { width: 16%; }
.pos-x-17 { left: 17%; } .pos-y-17 { top: 17%; } .percent-17 { width: 17%; }
.pos-x-18 { left: 18%; } .pos-y-18 { top: 18%; } .percent-18 { width: 18%; }
.pos-x-19 { left: 19%; } .pos-y-19 { top: 19%; } .percent-19 { width: 19%; }
.pos-x-20 { left: 20%; } .pos-y-20 { top: 20%; } .percent-20 { width: 20%; }
.pos-x-21 { left: 21%; } .pos-y-21 { top: 21%; } .percent-21 { width: 21%; }
.pos-x-22 { left: 22%; } .pos-y-22 { top: 22%; } .percent-22 { width: 22%; }
.pos-x-23 { left: 23%; } .pos-y-23 { top: 23%; } .percent-23 { width: 23%; }
.pos-x-24 { left: 24%; } .pos-y-24 { top: 24%; } .percent-24 { width: 24%; }
.pos-x-25 { left: 25%; } .pos-y-25 { top: 25%; } .percent-25 { width: 25%; }
.pos-x-26 { left: 26%; } .pos-y-26 { top: 26%; } .percent-26 { width: 26%; }
.pos-x-27 { left: 27%; } .pos-y-27 { top: 27%; } .percent-27 { width: 27%; }
.pos-x-28 { left: 28%; } .pos-y-28 { top: 28%; } .percent-28 { width: 28%; }
.pos-x-29 { left: 29%; } .pos-y-29 { top: 29%; } .percent-29 { width: 29%; }
.pos-x-30 { left: 30%; } .pos-y-30 { top: 30%; } .percent-30 { width: 30%; }
.pos-x-31 { left: 31%; } .pos-y-31 { top: 31%; } .percent-31 { width: 31%; }
.pos-x-32 { left: 32%; } .pos-y-32 { top: 32%; } .percent-32 { width: 32%; }
.pos-x-33 { left: 33%; } .pos-y-33 { top: 33%; } .percent-33 { width: 33%; }
.pos-x-34 { left: 34%; } .pos-y-34 { top: 34%; } .percent-34 { width: 34%; }
.pos-x-35 { left: 35%; } .pos-y-35 { top: 35%; } .percent-35 { width: 35%; }
.pos-x-36 { left: 36%; } .pos-y-36 { top: 36%; } .percent-36 { width: 36%; }
.pos-x-37 { left: 37%; } .pos-y-37 { top: 37%; } .percent-37 { width: 37%; }
.pos-x-38 { left: 38%; } .pos-y-38 { top: 38%; } .percent-38 { width: 38%; }
.pos-x-39 { left: 39%; } .pos-y-39 { top: 39%; } .percent-39 { width: 39%; }
.pos-x-40 { left: 40%; } .pos-y-40 { top: 40%; } .percent-40 { width: 40%; }
.pos-x-41 { left: 41%; } .pos-y-41 { top: 41%; } .percent-41 { width: 41%; }
.pos-x-42 { left: 42%; } .pos-y-42 { top: 42%; } .percent-42 { width: 42%; }
.pos-x-43 { left: 43%; } .pos-y-43 { top: 43%; } .percent-43 { width: 43%; }
.pos-x-44 { left: 44%; } .pos-y-44 { top: 44%; } .percent-44 { width: 44%; }
.pos-x-45 { left: 45%; } .pos-y-45 { top: 45%; } .percent-45 { width: 45%; }
.pos-x-46 { left: 46%; } .pos-y-46 { top: 46%; } .percent-46 { width: 46%; }
.pos-x-47 { left: 47%; } .pos-y-47 { top: 47%; } .percent-47 { width: 47%; }
.pos-x-48 { left: 48%; } .pos-y-48 { top: 48%; } .percent-48 { width: 48%; }
.pos-x-49 { left: 49%; } .pos-y-49 { top: 49%; } .percent-49 { width: 49%; }
.pos-x-50 { left: 50%; } .pos-y-50 { top: 50%; } .percent-50 { width: 50%; }
.pos-x-51 { left: 51%; } .pos-y-51 { top: 51%; } .percent-51 { width: 51%; }
.pos-x-52 { left: 52%; } .pos-y-52 { top: 52%; } .percent-52 { width: 52%; }
.pos-x-53 { left: 53%; } .pos-y-53 { top: 53%; } .percent-53 { width: 53%; }
.pos-x-54 { left: 54%; } .pos-y-54 { top: 54%; } .percent-54 { width: 54%; }
.pos-x-55 { left: 55%; } .pos-y-55 { top: 55%; } .percent-55 { width: 55%; }
.pos-x-56 { left: 56%; } .pos-y-56 { top: 56%; } .percent-56 { width: 56%; }
.pos-x-57 { left: 57%; } .pos-y-57 { top: 57%; } .percent-57 { width: 57%; }
.pos-x-58 { left: 58%; } .pos-y-58 { top: 58%; } .percent-58 { width: 58%; }
.pos-x-59 { left: 59%; } .pos-y-59 { top: 59%; } .percent-59 { width: 59%; }
.pos-x-60 { left: 60%; } .pos-y-60 { top: 60%; } .percent-60 { width: 60%; }
.pos-x-61 { left: 61%; } .pos-y-61 { top: 61%; } .percent-61 { width: 61%; }
.pos-x-62 { left: 62%; } .pos-y-62 { top: 62%; } .percent-62 { width: 62%; }
.pos-x-63 { left: 63%; } .pos-y-63 { top: 63%; } .percent-63 { width: 63%; }
.pos-x-64 { left: 64%; } .pos-y-64 { top: 64%; } .percent-64 { width: 64%; }
.pos-x-65 { left: 65%; } .pos-y-65 { top: 65%; } .percent-65 { width: 65%; }
.pos-x-66 { left: 66%; } .pos-y-66 { top: 66%; } .percent-66 { width: 66%; }
.pos-x-67 { left: 67%; } .pos-y-67 { top: 67%; } .percent-67 { width: 67%; }
.pos-x-68 { left: 68%; } .pos-y-68 { top: 68%; } .percent-68 { width: 68%; }
.pos-x-69 { left: 69%; } .pos-y-69 { top: 69%; } .percent-69 { width: 69%; }
.pos-x-70 { left: 70%; } .pos-y-70 { top: 70%; } .percent-70 { width: 70%; }
.pos-x-71 { left: 71%; } .pos-y-71 { top: 71%; } .percent-71 { width: 71%; }
.pos-x-72 { left: 72%; } .pos-y-72 { top: 72%; } .percent-72 { width: 72%; }
.pos-x-73 { left: 73%; } .pos-y-73 { top: 73%; } .percent-73 { width: 73%; }
.pos-x-74 { left: 74%; } .pos-y-74 { top: 74%; } .percent-74 { width: 74%; }
.pos-x-75 { left: 75%; } .pos-y-75 { top: 75%; } .percent-75 { width: 75%; }
.pos-x-76 { left: 76%; } .pos-y-76 { top: 76%; } .percent-76 { width: 76%; }
.pos-x-77 { left: 77%; } .pos-y-77 { top: 77%; } .percent-77 { width: 77%; }
.pos-x-78 { left: 78%; } .pos-y-78 { top: 78%; } .percent-78 { width: 78%; }
.pos-x-79 { left: 79%; } .pos-y-79 { top: 79%; } .percent-79 { width: 79%; }
.pos-x-80 { left: 80%; } .pos-y-80 { top: 80%; } .percent-80 { width: 80%; }
.pos-x-81 { left: 81%; } .pos-y-81 { top: 81%; } .percent-81 { width: 81%; }
.pos-x-82 { left: 82%; } .pos-y-82 { top: 82%; } .percent-82 { width: 82%; }
.pos-x-83 { left: 83%; } .pos-y-83 { top: 83%; } .percent-83 { width: 83%; }
.pos-x-84 { left: 84%; } .pos-y-84 { top: 84%; } .percent-84 { width: 84%; }
.pos-x-85 { left: 85%; } .pos-y-85 { top: 85%; } .percent-85 { width: 85%; }
.pos-x-86 { left: 86%; } .pos-y-86 { top: 86%; } .percent-86 { width: 86%; }
.pos-x-87 { left: 87%; } .pos-y-87 { top: 87%; } .percent-87 { width: 87%; }
.pos-x-88 { left: 88%; } .pos-y-88 { top: 88%; } .percent-88 { width: 88%; }
.pos-x-89 { left: 89%; } .pos-y-89 { top: 89%; } .percent-89 { width: 89%; }
.pos-x-90 { left: 90%; } .pos-y-90 { top: 90%; } .percent-90 { width: 90%; }
.pos-x-91 { left: 91%; } .pos-y-91 { top: 91%; } .percent-91 { width: 91%; }
.pos-x-92 { left: 92%; } .pos-y-92 { top: 92%; } .percent-92 { width: 92%; }
.pos-x-93 { left: 93%; } .pos-y-93 { top: 93%; } .percent-93 { width: 93%; }
.pos-x-94 { left: 94%; } .pos-y-94 { top: 94%; } .percent-94 { width: 94%; }
.pos-x-95 { left: 95%; } .pos-y-95 { top: 95%; } .percent-95 { width: 95%; }
.pos-x-96 { left: 96%; } .pos-y-96 { top: 96%; } .percent-96 { width: 96%; }
.pos-x-97 { left: 97%; } .pos-y-97 { top: 97%; } .percent-97 { width: 97%; }
.pos-x-98 { left: 98%; } .pos-y-98 { top: 98%; } .percent-98 { width: 98%; }
.pos-x-99 { left: 99%; } .pos-y-99 { top: 99%; } .percent-99 { width: 99%; }
.pos-x-100 { left: 100%; } .pos-y-100 { top: 100%; } .percent-100 { width: 100%; }

/* Interface immersive : le monde devient la page, les systèmes deviennent le HUD. */
body.game-active { overflow: hidden; background: #101b16; }
body.game-active > header, body.game-active > footer { display: none; }
body.game-active main { width: 100vw; max-width: none; height: 100dvh; margin: 0; padding: 0; }
.game-shell { position: fixed; isolation: isolate; inset: 0; overflow: hidden; background: #101b16; }
.world-layer { position: absolute; z-index: 0; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: #101b16; }
.game-shell .map-viewport { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
.game-shell .map-viewport #map { width: max(1600px, 145vw); height: max(1000px, 145vh); }
.player-hud { position: fixed; z-index: 30; left: 1rem; top: 1rem; width: min(330px, calc(100vw - 7rem)); padding: .8rem 1rem; border: 2px solid #715437; border-radius: 14px; background: #172820ed; box-shadow: 0 8px 30px #0009; pointer-events: none; }
.player-hud p { margin: .2rem 0; }.player-hud strong { display: block; font: 700 1.15rem Georgia, serif; }
.player-hud .progress-card { grid-template-columns: auto 1fr; justify-content: stretch; margin: .55rem 0; }.player-hud .progress-card small { grid-column: 1 / -1; }.player-hud .health { margin: .35rem 0 0; }
.zone-hud { position: fixed; z-index: 25; left: 50%; bottom: 1rem; display: grid; grid-template-columns: 220px minmax(430px, 620px); align-items: end; gap: .8rem; width: min(900px, calc(100vw - 10rem)); translate: -50%; pointer-events: none; }
.zone-hud > div { padding: .7rem 1rem; border: 2px solid #715437; border-radius: 12px; background: #172820ed; box-shadow: 0 7px 25px #0008; }.zone-hud h1, .zone-hud p { margin: .15rem 0; }.zone-hud h1 { font: 700 1.25rem Georgia, serif; }.zone-hud #zoneDescription { color: #b9c9b8; font-size: .75rem; }
.zone-hud .zone-nav { grid-template-columns: repeat(3, 1fr); margin: 0; pointer-events: auto; }.zone-hud .zone-nav button { min-height: 62px; padding: .55rem; box-shadow: 0 3px #09100c; }.zone-hud .zone-nav small { display: none; }
.hud-guide { position: fixed; z-index: 20; top: 1rem; left: 50%; display: block; width: min(440px, 40vw); max-height: 120px; margin: 0; padding: .75rem 1rem; translate: -50%; overflow: hidden; pointer-events: none; }.hud-guide h2 { font-size: 1rem; }.hud-guide p:last-child { font-size: .72rem; }.hud-guide .guide-steps { display: none; }
.game-shell > .map-legend { position: fixed; z-index: 15; left: 1rem; bottom: 1rem; max-width: 240px; padding: .55rem .7rem; border-radius: 8px; background: #172820d9; pointer-events: none; }
.game-shell .side-tools { top: 50%; }
.game-shell .drawer { z-index: 110; background: #172820f7; backdrop-filter: blur(8px); }
.adventure-drawer > section { margin: 1rem 0; padding-top: .7rem; border-top: 1px solid #ffffff1c; }.adventure-drawer .players { grid-template-columns: repeat(2, 1fr); }
.game-shell .modal { z-index: 120; }

@media (max-width: 900px) {
  .hud-guide { top: auto; right: 5rem; bottom: 8rem; left: auto; width: min(360px, calc(100vw - 6rem)); max-height: 92px; translate: none; }
  .zone-hud { left: .6rem; right: 4.7rem; bottom: .6rem; display: block; width: auto; translate: none; }.zone-hud > div { display: none; }.zone-hud .zone-nav { gap: .35rem; }.zone-hud .zone-nav button { min-height: 54px; padding: .4rem; font-size: .7rem; }
  .game-shell > .map-legend { display: none; }
}
@media (max-width: 560px) {
  .player-hud { left: .5rem; top: .5rem; width: calc(100vw - 4.7rem); padding: .55rem .7rem; }.player-hud .eyebrow { font-size: .6rem; }.player-hud .progress-card { font-size: .68rem; }
  .hud-guide { display: none; }
  .game-shell .side-tools { top: 44%; }
  .game-shell .drawer { right: 4.2rem; width: calc(100vw - 4.7rem); }
  .adventure-drawer .players, .questionnaire form, .account-actions { grid-template-columns: 1fr; }
  .game-shell .map-viewport #map { width: 1200px; height: 900px; }
}

/* Ambiances vivantes et retour visuel de l'équipement. */
#map::before { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, transparent 42%, #10261a38 100%); mix-blend-mode: multiply; }
.zone-forest::before { background: radial-gradient(circle at 20% 15%, #ddff9c24 0 8%, transparent 18%), radial-gradient(circle at 72% 60%, transparent 35%, #102b1a66 100%) !important; }
.river { animation: water-flow 2.4s linear infinite; }
.zone-deep-forest .zone-decor { animation: crystal-glow 2.8s ease-in-out infinite alternate; }
.character-weapon { position: absolute; right: -9px; bottom: 5px; width: 7px; height: 27px; color: #d9fbff; font-size: 9px; background: linear-gradient(90deg, #48626b, #e9ffff 55%, #638692); border-radius: 5px 5px 2px 2px; rotate: 28deg; filter: drop-shadow(0 0 3px #bffcff); }
.character-pack { position: absolute; z-index: -1; left: -5px; bottom: 3px; width: 12px; height: 22px; border: 2px solid #35281e; border-radius: 5px; background: #815a38; }
.avatar-ocean .character-pack { background: #397c91; }.avatar-sunset .character-pack { background: #a94f48; }.avatar-hidden .character-pack, .stage-0 .character-pack { visibility: hidden; }
@keyframes water-flow { to { background-position-y: 44px; } }
@keyframes crystal-glow { to { filter: brightness(1.25) drop-shadow(0 0 18px #65ddea); } }

@media (prefers-reduced-motion: reduce) {
  .pawn, .progress-track i { transition-duration: .01ms; }
  .pawn.is-moving .character, .river, .zone-deep-forest .zone-decor, .monster.attacking, .monster.enraged, .slime-projectile, .slime-jump-warning, .slime-impact { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Bâtiments visitables : dimensions alignées sur les collisions serveur. */
.house-left { left: 4%; top: 9%; width: 17%; height: 29%; transform: none; }
.house-right { right: 2%; bottom: 4%; width: 16%; height: 30%; transform: none; }
.town-hall { left: 40%; top: 5%; width: 20%; height: 16%; }
.inn { left: 6%; top: 24%; width: 16%; height: 18%; }
.forge { left: 73%; top: 20%; width: 16%; height: 19%; }
.academy { left: 14%; top: 45%; width: 16%; height: 17%; }
.shop { left: 73%; top: 64%; width: 15%; height: 15%; }
.bank { left: 56%; top: 80%; width: 16%; height: 15%; }
.market { left: 5%; top: 68%; width: 19%; height: 26%; }
.house, .town-hall { background-image: repeating-linear-gradient(90deg, #0000000b 0 2px, transparent 2px 28px); transition: filter .25s, opacity .25s; }
.house span, .town-hall span { left: 44%; }.house-right span { top: 0; bottom: auto; }
.house.interior-open, .town-hall.interior-open { z-index: 0; background-color: #7b5b3d; background-image: repeating-linear-gradient(90deg, #8d6947 0 22px, #79583c 22px 26px); box-shadow: inset 0 0 0 8px #4b3425, inset 0 20px 35px #0005; }
.house.interior-open::before, .town-hall.interior-open::before { opacity: .12; }
.house.interior-open span, .town-hall.interior-open span { opacity: .2; }

/* Mairie / Guilde JRPG : silhouette plus riche, sans modifier son emprise 40–60 / 5–21. */
.town-hall.skin-royal {
  overflow: visible;
  border: 0;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(90deg, #b8753d 0 3%, #f6d994 3% 97%, #a96535 97%);
  background-image: repeating-linear-gradient(90deg, #ffffff16 0 1px, transparent 1px 32px), linear-gradient(180deg, #ffe9ad, #e8b969 72%, #b86f38 73%);
  box-shadow: 0 10px 0 #315c31, 0 17px 18px #17351d66, inset 0 0 0 5px #8e512f, inset 0 -18px #c37b3d;
}
.town-hall.skin-royal::before {
  content: '';
  position: absolute;
  z-index: 4;
  left: -9%;
  right: -9%;
  top: -50%;
  height: 58%;
  border: 0;
  background: linear-gradient(135deg, transparent 0 8%, #365783 8% 15%, #5477a5 15% 76%, #2d496f 76% 84%, transparent 84%), linear-gradient(45deg, transparent 0 44%, #fff3bd 45% 49%, #d5a650 50% 54%, transparent 55%);
  clip-path: polygon(50% 0, 100% 73%, 91% 91%, 9% 91%, 0 73%);
  filter: drop-shadow(0 7px 0 #633c2c) drop-shadow(0 10px 5px #17351d55);
}
.town-hall.skin-royal::after {
  content: '✦';
  position: absolute;
  z-index: 5;
  left: 50%;
  top: -44%;
  width: 18%;
  aspect-ratio: 1;
  translate: -50%;
  display: grid;
  place-items: center;
  border: 4px solid #6b422b;
  border-radius: 50% 50% 8px 8px;
  background: radial-gradient(circle, #fff4b6 0 16%, #e8b84e 17% 45%, #75482d 46% 52%, #f1d37f 53%);
  color: #fff8cf;
  font-size: clamp(12px, 1.6vw, 25px);
  text-shadow: 0 2px #8c552e;
  box-shadow: 0 4px 0 #5d3828;
}
.town-hall.skin-royal .building-front {
  inset: 8% 5% 0;
  border-inline: 5px solid #ad6837;
  background: linear-gradient(90deg, transparent 0 16%, #9d5b32 16% 18%, transparent 18% 82%, #9d5b32 82% 84%, transparent 84%), linear-gradient(180deg, transparent 0 22%, #fff0b9 22% 26%, transparent 26% 70%, #c2783a 70% 75%, transparent 75%);
}
.town-hall.skin-royal .building-front::before,
.town-hall.skin-royal .building-front::after {
  content: '';
  position: absolute;
  top: 30%;
  width: 15%;
  height: 27%;
  border: 4px solid #75442c;
  border-radius: 50% 50% 3px 3px;
  background: linear-gradient(#9ee4ee 0 45%, #4b8da7 46% 54%, #c8f2ed 55%);
  box-shadow: inset 0 0 0 3px #f8dc8e, 0 3px #a96132;
}
.town-hall.skin-royal .building-front::before { left: 12%; }
.town-hall.skin-royal .building-front::after { right: 12%; }
.town-hall.skin-royal .building-props {
  inset: auto 7% -7% 7%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 8% 50%, #ffdd67 0 18%, #4f963f 19% 32%, transparent 33%), radial-gradient(ellipse at 92% 50%, #ff9fb3 0 18%, #4f963f 19% 32%, transparent 33%);
}
.town-hall.skin-royal .building-door {
  z-index: 6;
  left: 43%;
  bottom: 0;
  width: 14%;
  height: 48%;
  border: 4px solid #573524;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(90deg, #71442d 0 45%, #a5693d 46% 52%, #613a28 53%);
  box-shadow: inset 0 0 0 3px #9b633b, 0 3px #44291e;
}
.town-hall.skin-royal .building-door::after { content: ''; position: absolute; right: 16%; top: 54%; width: 5px; height: 5px; border-radius: 50%; background: #ffe284; box-shadow: 0 0 4px #fff2a1; }
.town-hall.skin-royal > b { z-index: 7; bottom: -30px; padding: 5px 12px; border-color: #7b4b2d; background: linear-gradient(#fff2bd, #e9bd68); box-shadow: 0 3px #315c31; letter-spacing: .12em; }
.town-hall.skin-royal.interior-open {
  background-color: #755337;
  background-image: repeating-linear-gradient(90deg, #8c6544 0 28px, #735036 28px 33px);
  box-shadow: inset 0 0 0 8px #432f22, inset 0 22px 38px #0006;
}
.town-hall.skin-royal.interior-open::before,
.town-hall.skin-royal.interior-open::after,
.town-hall.skin-royal.interior-open .building-front,
.town-hall.skin-royal.interior-open .building-props { opacity: .12; }

/* Les PNG remplacent entièrement le décor CSS, mais restent ancrés sur l'entrée logique. */
.building.building-closed.asset-closed-ready, .building.building-open.asset-open-ready { border-color: transparent; background: transparent; box-shadow: none; }
.building.building-closed.asset-closed-ready::before, .building.building-closed.asset-closed-ready::after, .building.building-open.asset-open-ready::before, .building.building-open.asset-open-ready::after, .building.building-closed.asset-closed-ready .building-layer, .building.building-open.asset-open-ready .building-layer, .building.building-closed.asset-closed-ready .building-door, .building.building-open.asset-open-ready .building-door, .building.building-closed.asset-closed-ready > b, .building.building-open.asset-open-ready > b { visibility: hidden; }
.building.building-closed.asset-closed-pending, .building.building-open.asset-open-pending { border-color: transparent; background: transparent; box-shadow: none; }
.building.building-closed.asset-closed-pending::before, .building.building-closed.asset-closed-pending::after, .building.building-open.asset-open-pending::before, .building.building-open.asset-open-pending::after, .building.building-closed.asset-closed-pending .building-layer, .building.building-open.asset-open-pending .building-layer, .building.building-closed.asset-closed-pending .building-door, .building.building-open.asset-open-pending .building-door, .building.building-closed.asset-closed-pending > b, .building.building-open.asset-open-pending > b { visibility: hidden; }
[data-building="inn"] .building-state-closed { width: 215%; height: 205%; } [data-building="inn"] .building-state-open { width: 270%; height: 250%; }
[data-building="forge"] .building-state-closed { width: 215%; height: 210%; } [data-building="forge"] .building-state-open { width: 260%; height: 245%; }
[data-building="academy"] .building-state-closed { width: 220%; height: 210%; } [data-building="academy"] .building-state-open { width: 275%; height: 255%; }
[data-building="shop"] .building-state-closed { width: 230%; height: 220%; } [data-building="shop"] .building-state-open { width: 275%; height: 255%; }
[data-building="bank"] .building-state-closed { width: 280%; height: 270%; } [data-building="bank"] .building-state-open { width: 325%; height: 300%; }
[data-building="market"] .building-state-closed { width: 200%; height: 180%; } [data-building="market"] .building-state-open { width: 250%; height: 220%; }
.town-hall.building-closed.asset-closed-ready, .town-hall.building-open.asset-open-ready { border: 0; background: transparent; box-shadow: none; }
.town-hall.building-closed.asset-closed-ready::before, .town-hall.building-closed.asset-closed-ready::after, .town-hall.building-open.asset-open-ready::before, .town-hall.building-open.asset-open-ready::after, .town-hall.building-closed.asset-closed-ready .building-layer, .town-hall.building-open.asset-open-ready .building-layer, .town-hall.building-closed.asset-closed-ready .building-door, .town-hall.building-open.asset-open-ready .building-door, .town-hall.building-closed.asset-closed-ready > b, .town-hall.building-open.asset-open-ready > b { visibility: hidden; }
.town-hall.building-closed.asset-closed-ready .building-state-closed,
.town-hall.building-open.asset-open-ready .building-state-open { width: 200%; height: 200%; }

/* Les créatures et avatars vivent directement dans le monde, sans carte opaque. */
.monster { width: 112px; height: 104px; padding: 25px 8px 13px; background: transparent; border-radius: 0; box-shadow: none; filter: drop-shadow(0 9px 4px #10231799); transition: left 1.5s linear, top 1.5s linear, filter .2s; }
.monster-name { top: -3px; padding: 3px 7px; border: 1px solid #ffffff2b; border-radius: 999px; background: #172820c9; }
.monster-hp { left: 17px; right: 17px; bottom: 5px; }
.monster > small { bottom: -8px; text-shadow: 0 2px 2px #000; }
.monster-sprite { width: 66px; height: 52px; image-rendering: pixelated; }
.slime { scale: var(--slime-scale, 1); transform-origin: 50% 80%; }
.slime .monster-sprite { border-radius: 58% 58% 42% 42%; border-color: #245b38; background: radial-gradient(circle at 37% 35%, #e8ffd9 0 4px, transparent 5px), linear-gradient(#8ee968, #3aa855); box-shadow: inset 0 -10px #278949, 0 8px 0 -5px #193e2b; }
.slime .monster-sprite::before { top: 21px; background: #123520; box-shadow: 23px 0 #123520; }
.slime .monster-sprite::after { border-color: #123520; }
.monster-deep-slime .monster-sprite { border-color: #293c4e; background: radial-gradient(circle at 37% 35%, #dcfff2 0 4px, transparent 5px), linear-gradient(#6bcfa2, #386c83); box-shadow: inset 0 -10px #315872, 0 8px 0 -5px #172d35; }
.monster-forest-slime.skin-amber .monster-sprite { background: linear-gradient(#f0cf62, #bb793b); }.monster-deep-slime.skin-toxic .monster-sprite { background: linear-gradient(#c4ef55, #488c3a); }
.slime-size-0 { --slime-scale: .72; }.slime-size-1 { --slime-scale: .82; }.slime-size-2 { --slime-scale: .92; }.slime-size-3 { --slime-scale: 1.02; }.slime-size-4 { --slime-scale: 1.12; }.slime-size-5 { --slime-scale: 1.22; }.slime-size-6 { --slime-scale: 1.32; }.slime-size-7 { --slime-scale: 1.42; }.slime-size-8 { --slime-scale: 1.52; }.slime-size-9 { --slime-scale: 1.62; }.slime-size-10 { --slime-scale: 1.72; }
.slime.state-jump_prepare .monster-sprite { animation: slime-charge .35s ease-in-out infinite alternate; filter: brightness(1.35); }.slime.state-jump { opacity: .75; translate: -50% -85%; }
#mapEffects { position: absolute; z-index: 7; inset: 0; pointer-events: none; }.slime-projectile, .slime-jump-warning, .slime-impact { position: absolute; display: block; translate: -50% -50%; }
.slime-projectile { width: 15px; height: 15px; border-radius: 50%; background: #95ffb4; box-shadow: 0 0 12px #53e68c; transition: left 1.5s linear, top 1.5s linear; animation: slime-spit .45s linear infinite; }
.slime-jump-warning, .slime-impact { width: 70px; height: 35px; border: 4px solid #ffe66d; border-radius: 50%; background: #ffdf5422; animation: slime-warning .45s ease-in-out infinite alternate; }.slime-impact { border-color: #79ff99; background: #63ff843d; animation: slime-impact .5s ease-out both; }
@keyframes slime-charge { to { transform: scaleX(1.2) scaleY(.75); } } @keyframes slime-spit { to { rotate: 360deg; } } @keyframes slime-warning { to { scale: 1.25; opacity: .45; } } @keyframes slime-impact { to { scale: 1.8; opacity: 0; } }
.monster-rank { position: absolute; z-index: 2; top: 16px; left: 50%; translate: -50% -100%; padding: 2px 6px; border: 1px solid #ffe790; border-radius: 999px; background: #5e3616e8; color: #fff1a6; font: 900 8px/1.2 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 0 10px #ffc84d77; }
.monster-elite { filter: drop-shadow(0 9px 4px #10231799) drop-shadow(0 0 9px #ffca55aa); }
.monster-elite .monster-sprite { border-color: #e5b94d; }
.monster-elite .monster-sprite > i { position: absolute; z-index: -1; left: 50%; top: -18px; width: 36px; height: 20px; translate: -50%; background: #f4c84d; clip-path: polygon(0 100%, 5% 20%, 30% 62%, 50% 0, 70% 62%, 95% 20%, 100% 100%); filter: drop-shadow(0 2px #6c421a); }
.monster.enraged:not(.dead) { animation: monster-rage .32s ease-in-out infinite alternate; }
.monster.enraged .monster-hp i { background: #ff3737; box-shadow: 0 0 8px #ff3737; }
.monster.enraged > small { color: #ffb2a8; font-weight: 900; text-transform: uppercase; }
@keyframes monster-rage { to { filter: brightness(1.2) drop-shadow(0 9px 4px #10231799) drop-shadow(0 0 14px #ff493d); transform: translateY(-2px) rotate(1deg); } }
.pawn { width: 54px; height: 70px; filter: drop-shadow(0 8px 3px #10231799); transition: left .18s linear, top .18s linear, transform .15s; will-change: left, top; }

/* Particules d'ambiance légères pour les plans promotionnels. */
.ambient-particles { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-particles i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff2a1; box-shadow: 0 0 10px #ffe06a; opacity: .55; animation: ambient-drift 7s ease-in-out infinite alternate; }
.ambient-particles i:nth-child(1) { left: 12%; top: 28%; }.ambient-particles i:nth-child(2) { left: 28%; top: 72%; animation-delay: -2s; }.ambient-particles i:nth-child(3) { left: 46%; top: 38%; animation-delay: -4s; }.ambient-particles i:nth-child(4) { left: 65%; top: 78%; animation-delay: -1s; }.ambient-particles i:nth-child(5) { left: 79%; top: 22%; animation-delay: -5s; }.ambient-particles i:nth-child(6) { left: 91%; top: 61%; animation-delay: -3s; }
.zone-deep-forest .ambient-particles i { background: #bfffd3; box-shadow: 0 0 14px #65de91; }.zone-forest .ambient-particles i { background: #dfff87; box-shadow: 0 0 12px #a8e85d; }
@keyframes ambient-drift { from { translate: -8px 8px; scale: .7; opacity: .2; } to { translate: 14px -22px; scale: 1.3; opacity: .8; } }

/* Mode de capture : H masque le HUD sans interrompre le monde. */

@media (prefers-reduced-motion: reduce) { .ambient-particles i { animation: none; } }

/* Village central : quelques grandes couches normalisées remplacent l'ancien croisement. */
#villageScene, #villageScene > div, #villageScene i { position: absolute; pointer-events: none; }
#villageScene, .village-terrain, .village-grass { inset: 0; }
.zone-forest #villageScene, .zone-cave #villageScene { display: none; }
.zone-village { background: #62a94f !important; background-image: none !important; }
.village-grass { z-index: -5; background-color: #63aa50; background-image: radial-gradient(circle, #a7d767 0 2px, transparent 3px), radial-gradient(circle, #397f3d 0 2px, transparent 3px), linear-gradient(115deg, #ffffff0b, transparent 45%); background-position: 8px 12px, 42px 36px, 0 0; background-size: 54px 48px, 67px 61px, 100% 100%; box-shadow: inset 0 0 90px #285d2a66; }
.village-plaza { z-index: -3; left: 29%; top: 31%; width: 43%; height: 45%; border: 5px solid #cfaa68; border-radius: 46% 50% 44% 48%; background-color: #ddc081; background-image: radial-gradient(circle at 25% 30%, #efd69d 0 2px, transparent 3px), linear-gradient(25deg, transparent 47%, #c9a76b55 48% 51%, transparent 52%); background-size: 39px 35px, 28px 24px; box-shadow: inset 0 0 0 5px #efd79b88, 0 3px 8px #335d2c66; }
.village-roads { inset: 0; z-index: -2; }
.scene-road { height: 7%; border: 4px solid #c39c61; border-radius: 999px; background-color: #ddbd7d; background-image: radial-gradient(ellipse, #efd59c 0 2px, transparent 3px); background-size: 25px 19px; box-shadow: inset 0 0 0 3px #f1d49a66; transform-origin: center; }
.scene-road-hall { left: 46%; top: 18%; width: 8%; height: 18%; }
.scene-road-inn { left: 19%; top: 34%; width: 18%; transform: rotate(7deg); }
.scene-road-forge { left: 65%; top: 34%; width: 17%; transform: rotate(-7deg); }
.scene-road-academy { left: 23%; top: 50%; width: 14%; transform: rotate(-4deg); }
.scene-road-shop { left: 67%; top: 61%; width: 14%; transform: rotate(6deg); }
.scene-road-bank { left: 61%; top: 72%; width: 7%; height: 13%; transform: rotate(-12deg); }
.scene-road-market { left: 20%; top: 71%; width: 19%; transform: rotate(-8deg); }
.scene-road-bridge { left: 69%; top: 57%; width: 25%; transform: rotate(-2deg); }
.scene-road-west-recess { left: 4%; top: 53%; width: 29%; transform: rotate(3deg); }
.village-water { inset: 0; z-index: -1; }
.village-water .river { display: block; position: absolute; inset: 0 2% 0 auto; width: 6%; border-inline: 5px solid #8ea85a; background: repeating-linear-gradient(0deg, #42a9ca 0 8px, #70d1df 8px 14px, #328faf 14px 22px); box-shadow: 0 0 0 4px #426f38; }
.village-water .bridge { display: block; position: absolute; right: 1%; top: 54%; width: 10%; height: 14%; border: 5px solid #665041; border-radius: 35% 35% 8px 8px; background: repeating-linear-gradient(90deg, #a46c42 0 13px, #d09a60 13px 25px); box-shadow: inset 0 5px #e0b77c, 0 5px #3c2d25; }
.village-west-recess { z-index: -1; left: 0; top: 45%; width: 12%; height: 21%; border-radius: 0 48% 48% 0; background: #75b65a; box-shadow: inset -7px 0 #43833e; }
.village-vegetation { inset: 0; z-index: 1; }
.scene-vegetation { width: 12%; height: 8%; border-radius: 50%; background: radial-gradient(circle at 12% 50%, #8ed05d 0 9%, #347a39 10% 19%, transparent 20%), radial-gradient(circle at 44% 45%, #69b64a 0 12%, #286733 13% 24%, transparent 25%), radial-gradient(circle at 78% 55%, #98d864 0 10%, #397d3a 11% 22%, transparent 23%); filter: drop-shadow(0 4px 2px #234d2b66); }
.scene-vegetation-north-west { left: 1%; top: 2%; }.scene-vegetation-north { left: 25%; top: 1%; }.scene-vegetation-north-east { right: 10%; top: 2%; }.scene-vegetation-west { left: 0; top: 28%; }.scene-vegetation-south-west { left: 25%; bottom: 0; }.scene-vegetation-south { left: 44%; bottom: 0; }.scene-vegetation-south-east { right: 10%; bottom: 0; }.scene-vegetation-riverbank { right: 5%; top: 38%; transform: rotate(90deg); }
.scene-flower-bed { width: 70px; height: 34px; border: 3px solid #3f762f; border-radius: 50%; background-color: #4d913c; background-image: radial-gradient(circle, #ffe77a 0 3px, #e95970 4px 6px, transparent 7px), radial-gradient(circle, #fff4b2 0 3px, #8e69cf 4px 6px, transparent 7px); background-position: 5px 4px, 24px 18px; background-size: 38px 30px; box-shadow: inset 0 -5px #326a2d88, 0 4px 4px #244e2866; }
.scene-flower-bed-plaza-west { left: 27%; top: 43%; transform: rotate(-12deg); }
.scene-flower-bed-plaza-east { left: 72%; top: 48%; transform: rotate(13deg); }
.scene-flower-bed-riverbank { right: 7%; top: 73%; transform: rotate(78deg); }
.village-furniture { inset: 0; z-index: 2; }
.scene-furniture { width: 38px; height: 13px; border: 3px solid #503721; border-radius: 4px; background: repeating-linear-gradient(0deg,#a96e39 0 4px,#744829 4px 7px); box-shadow: 0 5px #31502d; }
.scene-furniture-bench-nw { left: 35%; top: 37%; }.scene-furniture-bench-ne { left: 63%; top: 37%; }.scene-furniture-bench-sw { left: 35%; top: 68%; }.scene-furniture-bench-se { left: 63%; top: 68%; }
.scene-furniture[class*="lamp"] { width: 9px; height: 42px; border: 0; border-radius: 5px; background: linear-gradient(90deg,#352a24,#80603c,#352a24); box-shadow: 0 0 10px #ffd873; }
.scene-furniture[class*="lamp"]::before { content: ''; position: absolute; left: -7px; top: -12px; width: 17px; height: 19px; border: 3px solid #49351f; background: #ffd56b; clip-path: polygon(20% 0,80% 0,100% 75%,50% 100%,0 75%); }
.scene-furniture-lamp-nw { left: 38%; top: 39%; }.scene-furniture-lamp-ne { left: 62%; top: 39%; }.scene-furniture-lamp-sw { left: 38%; top: 66%; }.scene-furniture-lamp-se { left: 62%; top: 66%; }
.scene-furniture-quest-board { left: 69%; top: 45%; width: 45px; height: 32px; border: 5px solid #684526; background: #c88b4c; box-shadow: 0 10px #593a23; }
.portal-hub { position: absolute; z-index: 6; left: 2%; top: 55%; }
.portal-hub .portal-gate { position: relative; inset: auto; translate: 0 -50%; }
.portal-choices { position: absolute; left: 82px; top: -58px; display: grid; gap: 6px; width: 130px; padding: 8px; border: 2px solid #dfc4ff; border-radius: 10px; background: #17281ff0; box-shadow: 0 8px 20px #10231799; }
.portal-choices[hidden] { display: none; }
.portal-choices button { padding: 7px; border: 1px solid #ba8cff; border-radius: 7px; background: #3a2456; color: #fff; }

/* Le Village gagne de l'espace physique sans agrandir ses sprites ni ses bâtiments. */
.game-shell .map-viewport #map.zone-village { width: 2000px; height: 1400px; }
.zone-village { --building-x-scale: .8; --building-y-scale: .714286; }
.zone-village [data-building="inn"] .building-state-closed { width: calc(215% * var(--building-x-scale)); height: calc(205% * var(--building-y-scale)); }
.zone-village [data-building="inn"] .building-state-open { width: calc(270% * var(--building-x-scale)); height: calc(250% * var(--building-y-scale)); }
.zone-village [data-building="forge"] .building-state-closed { width: calc(215% * var(--building-x-scale)); height: calc(210% * var(--building-y-scale)); }
.zone-village [data-building="forge"] .building-state-open { width: calc(260% * var(--building-x-scale)); height: calc(245% * var(--building-y-scale)); }
.zone-village [data-building="academy"] .building-state-closed { width: calc(220% * var(--building-x-scale)); height: calc(210% * var(--building-y-scale)); }
.zone-village [data-building="academy"] .building-state-open { width: calc(275% * var(--building-x-scale)); height: calc(255% * var(--building-y-scale)); }
.zone-village [data-building="shop"] .building-state-closed { width: calc(230% * var(--building-x-scale)); height: calc(220% * var(--building-y-scale)); }
.zone-village [data-building="shop"] .building-state-open { width: calc(275% * var(--building-x-scale)); height: calc(255% * var(--building-y-scale)); }
.zone-village [data-building="bank"] .building-state-closed { width: calc(280% * var(--building-x-scale)); height: calc(270% * var(--building-y-scale)); }
.zone-village [data-building="bank"] .building-state-open { width: calc(325% * var(--building-x-scale)); height: calc(300% * var(--building-y-scale)); }
.zone-village [data-building="market"] .building-state-closed { width: calc(200% * var(--building-x-scale)); height: calc(180% * var(--building-y-scale)); }
.zone-village [data-building="market"] .building-state-open { width: calc(250% * var(--building-x-scale)); height: calc(220% * var(--building-y-scale)); }
.zone-village .town-hall.building-closed.asset-closed-ready .building-state-closed,
.zone-village .town-hall.building-open.asset-open-ready .building-state-open { width: calc(200% * var(--building-x-scale)); height: calc(200% * var(--building-y-scale)); }

@media (max-width: 900px) {
  .game-shell .map-viewport #map.zone-village { width: 1600px; height: 1120px; }
  .zone-village { --building-x-scale: 1; --building-y-scale: .892857; }
}
@media (max-width: 560px) {
  .game-shell .map-viewport #map.zone-village { width: 1400px; height: 980px; }
  .zone-village { --building-x-scale: .857143; --building-y-scale: .918367; }
}

/* Échelle native du monde, calibrée séparément du HUD et de la caméra. */
.zone-village .pawn { width: 46px; height: 60px; }
.zone-village .character-renderer { scale: .68; transform-origin: 50% 100%; }
.zone-village .town-hall.building-closed.asset-closed-ready .building-state-closed { width: 550px; height: 275px; }
.zone-village .town-hall.building-open.asset-open-ready .building-state-open { width: 575px; height: 290px; }
.zone-village [data-building="inn"] .building-state-closed { width: 475px; height: 320px; }
.zone-village [data-building="inn"] .building-state-open { width: 620px; height: 405px; }
.zone-village [data-building="forge"] .building-state-closed { width: 475px; height: 345px; }
.zone-village [data-building="forge"] .building-state-open { width: 600px; height: 420px; }
.zone-village [data-building="academy"] .building-state-closed { width: 485px; height: 310px; }
.zone-village [data-building="academy"] .building-state-open { width: 635px; height: 390px; }
.zone-village [data-building="shop"] .building-state-closed { width: 475px; height: 285px; }
.zone-village [data-building="shop"] .building-state-open { width: 595px; height: 345px; }
.zone-village [data-building="bank"] .building-state-closed { width: 615px; height: 350px; }
.zone-village [data-building="bank"] .building-state-open { width: 750px; height: 405px; }
.zone-village [data-building="market"] .building-state-closed { width: 525px; height: 405px; }
.zone-village [data-building="market"] .building-state-open { width: 685px; height: 515px; }
.zone-village .scene-furniture { width: 36px; height: 12px; }
.zone-village .scene-furniture[class*="lamp"] { width: 8px; height: 39px; }
.zone-village .scene-furniture-quest-board { width: 42px; height: 30px; }
.zone-village .portal { width: 72px; min-height: 78px; }

/* Map transfers place the player immediately before the camera measures it. */
#map .pawn.self.camera-arrival { transition: none !important; }

/* The central square label belongs to the village, not combat maps. */
#map:not(.zone-village) .map-hint { display: none; }

/* Match local interpolation to acknowledged movement on slower connections. */
#map .pawn.self { transition: left var(--walk-duration, 180ms) linear, top var(--walk-duration, 180ms) linear, transform .15s; }
/* Keep essential locomotion continuous in every accessibility mode. Decorative
   motion and the character's pose cycle can still be reduced independently. */

/* Pages dédiées accessibles sous le portrait. */
.player-hud .hud-profile { min-width: 0; }
.player-hud .hud-shortcuts { display: flex; justify-content: center; gap: 3px; margin-top: 7px; pointer-events: auto; }
.player-hud .hud-shortcuts button { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 30px; padding: 3px; border: 1px solid #ac9764; border-radius: 6px; background: #14281f; color: #efd18e; }
.hud-shortcuts svg { width: 19px; height: 19px; }
.player-hud .hud-shortcuts button:hover { background: #35533d; border-color: #ffe7ac; }
.hud-shortcuts button:focus-visible, .hub-page button:focus-visible { outline: 2px solid #ffe7ac; outline-offset: 3px; }
.hub-page { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; color: #f7edd3; background: radial-gradient(ellipse at 85% 0%, #38544488, transparent 55%), #101f19; overflow-y: auto; overscroll-behavior: contain; }
.hub-page::backdrop { background: #101f19; }
.hub-inner { max-width: 1100px; margin: auto; padding: 28px clamp(18px, 5vw, 70px) 40px; }
.hub-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 52px; }
.hub-header span { color: #d4b574; font: 700 14px Georgia, serif; letter-spacing: .18em; }
.hub-page button { border: 1px solid #917a4c; border-radius: 7px; background: #20382c; color: #f2dcab; padding: 12px 18px; min-height: 44px; }
.hub-page button:disabled { opacity: .65; cursor: default; }
.hub-page h1 { color: #f5e4bb; font: 500 clamp(32px, 6vw, 54px)/1.1 Georgia, serif; margin: 12px 0; }
.hub-page h2, .hub-page h3 { color: #f5e4bb; font-family: Georgia, serif; }
.hub-eyebrow { color: #c9ab70; font-size: 11px; letter-spacing: .18em; }
.hub-lead, .hub-page p { line-height: 1.6; }
.hub-lead, .hub-card p, .hub-feature p, .hub-note { color: #b9cabc; }
.hub-tabs { display: flex; gap: 10px; margin: 30px 0 24px; }
.hub-tabs [aria-selected="true"] { background: #cfb273; color: #14281f; border-color: #eed79d; }
.hub-feature { padding: clamp(20px, 4vw, 36px); border: 1px solid #8e794a80; border-radius: 14px; background: linear-gradient(120deg, #2b4738, #162b22); margin: 24px 0; }
.hub-status { display: inline-block; padding: 4px 9px; border: 1px solid #b49b6266; border-radius: 20px; color: #e0c385; font-size: 12px; }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.hub-card { display: flex; flex-direction: column; align-items: start; border: 1px solid #697c555e; border-radius: 14px; padding: 24px; background: #1c3228; }
.hub-card-art { display: grid; place-items: center; width: 100%; height: 110px; margin-bottom: 20px; color: #dfc486; font-size: 64px; background: radial-gradient(ellipse, #b8a36325, transparent 70%); }
.hub-card h3 { margin-bottom: 0; }
.hub-card p { flex: 1; }
.hub-card button { width: 100%; font-size: 12px; }
.hub-footer { margin-top: 40px; border-top: 1px solid #b49b6230; padding-top: 20px; color: #a3b5a7; font-size: 12px; }
@media (max-width: 600px) { .hub-grid { grid-template-columns: 1fr; } .hub-header { margin-bottom: 32px; } .hub-header span { font-size: 10px; letter-spacing: .08em; } .hub-card-art { height: 70px; } .player-hud .hud-shortcuts { gap: 1px; } .player-hud .hud-shortcuts button { flex-basis: 24px; width: 24px; height: 28px; } }
.player-hud:has(.hud-profile) { grid-template-columns: 84px minmax(0, 1fr); }
.hud-profile .hud-portrait { width: 72px; margin-inline: auto; }
@media (max-width: 600px) { .player-hud:has(.hud-profile) { grid-template-columns: 76px minmax(0, 1fr); } .hud-profile .hud-portrait { width: 54px; } }

/* Wandering mystery uses the existing shadow artwork, independently of players. */
#map .mystery-actor { position: absolute; width: 48px; height: 62px; padding: 0; border: 0; border-radius: 0; background: transparent; transform: translate(-50%, -100%); transition: left 1s linear, top 1s linear; box-shadow: none; overflow: visible; }
.mystery-actor .character-sprite { position: absolute; left: -10px; bottom: 0; transform: scale(.7); }
.mystery-actor .character-sprite.state-idle { animation: none; }
.mystery-question { position: absolute; left: 11px; top: -27px; width: 26px; height: 30px; border: 1px solid #e4c780; border-radius: 10px; background: #14281fec; color: #ffe6a1; font: bold 23px/28px Georgia, serif; box-shadow: 0 0 12px #e4c78055; }
.mystery-actor:focus-visible { outline: 2px solid #ffe6a1; outline-offset: 4px; }
.mystery-dialog { position: fixed; inset: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: clamp(18px, 4vw, 30px); overflow-y: auto; border: 1px solid #b59a62; border-radius: 16px; color: #f4edd7; background: linear-gradient(145deg, #243e32, #10251b); box-shadow: 0 20px 80px #0009; }
.mystery-dialog::backdrop { background: #06140fc9; }
.mystery-dialog h2, .mystery-dialog h3 { color: #f0d89e; font-family: Georgia, serif; }
.mystery-dialog p, .mystery-dialog li { line-height: 1.5; }
.mystery-dialog section, #mysteryGuessForm { margin-top: 22px; }
.mystery-dialog button { min-height: 44px; }
.mystery-clue-box { padding: 14px 18px; background: #071b1380; border: 1px solid #b59a6255; border-radius: 10px; }
#mysteryClues { padding-left: 22px; } #mysteryClues li + li { margin-top: 9px; }
#mysteryStatus { padding: 10px 12px; border-left: 3px solid #b59a62; background: #06170f66; }
#mysteryMoves, #mysterySuggestions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
#mysteryGuessForm { display: block; } #mysteryGuessForm label { display: block; }
#mysteryQuery { width: 100%; margin-top: 8px; }
#mysterySearchStatus { font-size: 12px; color: #c4d0bd; }
#mysteryGuess { width: 100%; }
@media (prefers-reduced-motion: reduce) { #map .mystery-actor { transition: none; } .mystery-actor .character-sprite { animation: none; } }

.zone-village #mysteryActors { display: contents; }
#map:not(.zone-village) #mysteryActors { display: none; }


/* Forest props now use the authoritative SVG footprints. */
.zone-forest .zone-decor, .zone-deep-forest .zone-decor { display: none; }