/* Apresentação retrô: pixels nítidos; menu DOM permanece adaptável. */
html body,html body button,html body input,html body kbd,html body .hero-progression,html body .combat-log,html body .inventory-panel * { font-family:'Inter',Arial,sans-serif; }
html body h1,html body h2,html body .zone-toast,html body .hero-card strong { font-family:'Cinzel',Georgia,serif; }
html body img,html body canvas,html body .hero-portrait { image-rendering:pixelated; }
html body .hero-portrait { width:80px;height:80px;background-size:320px 320px;background-position:-80px 0; }
html body .character-creation { align-items:safe center;background-image:linear-gradient(#0d192cc9,#0b1422f2),url('/assets/hd/site/floresta.png'); }
html body .creation-panel { border-radius:24px;border-width:1px;background:linear-gradient(150deg,#1a2839f5,#101922f5); }
html body .hero-card,html body .inventory-panel { border-radius:16px; }
html body .nickname-field input,html body .enter-world { border-radius:10px; }
html body .attack-action { border-radius:14px;background:linear-gradient(145deg,#344356,#172432);border:1px solid #c1a46e;box-shadow:inset 0 1px #e8d6a144,0 4px 12px #07121b70; }
html body .pixel-sword { background-image:url('/assets/hd/items/WeaponBuff_01.png');background-size:contain;image-rendering:pixelated; }
html body .inventory-slot,html body .inventory-slot-empty { border-radius:10px; }
@media(max-width:700px) {
  html body .hero-progression { top:auto;bottom:102px; }
  html body .zone-toast { top:auto;bottom:124px;font-size:16px; }
  html body .combat-log { bottom:166px; }
}
:root {
  color-scheme: dark;
  --background: #0b0f19;
  --panel: #101923e8;
  --line: #525544;
  --gold: #dfbd7c;
  --text: #eae4d5;
  --muted: #a1b1aa;
}
body[data-retro-hud='on'] .combat-actions { bottom:calc(var(--retro-dialog-offset,160px) + 8px); }
body[data-retro-hud='on'] .combat-log { clip-path:inset(50%);width:1px;height:1px;overflow:hidden; }
body[data-retro-hud='on'] .hero-progression { top:var(--retro-progress-top,150px);left:var(--retro-ui-left,16px);bottom:auto; }
body[data-retro-hud='on'] .enemy-target { top:var(--retro-enemy-top,310px);right:var(--retro-ui-right,16px);max-width:calc(var(--retro-canvas-width,100vw) - 16px);border-color:#fff;background:linear-gradient(#0000aa,#000044); }
body[data-retro-hud='on'] .zone-toast { display:none; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0b0f19;
}
body { color: var(--text); font: 14px/1.5 'Segoe UI', sans-serif; }
.game-shell { width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; }
.world-frame { margin: 0; padding: 0; width: 100%; height: 100%; border: 0; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; }
canvas {
  display: block;
  /* Scale.FIT controla tamanho e margens sem distorcer a resolução 512x384. */
  image-rendering: pixelated;
}
canvas:focus { outline: none; }
h1, h2 { margin: 0; }
.eyebrow { margin: 0 0 3px; font-size: 9px; letter-spacing: 1.4px; color: var(--muted); font-weight: 600; }

/* Criação de personagem: menu DOM anterior ao boot do Phaser. */
body[data-game-state='selection'] .game-shell { visibility: hidden; }
.character-creation { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: auto; padding: 12px 20px; background: linear-gradient(#080a11a6,#080a11ef), url('/assets/site/hero-night.png') center/cover; transition: opacity .32s ease, transform .32s ease; }
.character-creation[hidden] { display: none; }
.character-creation.is-leaving { opacity: 0; transform: scale(1.025); pointer-events: none; }
.creation-panel { position: relative; width: min(860px,100%); margin: auto; padding: 18px 36px 14px; background: #0d0d11eb; border: 2px solid #9d7a3d; box-shadow: 0 0 0 3px #16151b, 0 0 0 5px #493b25, inset 0 0 0 5px #1f1d21, 0 24px 90px #000b; }
.creation-panel::before, .creation-panel::after { content: '◆'; position: absolute; top: -12px; color: #dfbd7c; background: #15141a; padding: 0 8px; font-size: 16px; }
.creation-panel::before { left: 18px; }.creation-panel::after { right: 18px; }
.creation-heading { text-align: center; }
.creation-sigil { display: block; color: #dfbd7c; font-size: 28px; line-height: 1; margin-bottom: 8px; text-shadow: 0 0 22px #b98b3c66; }
.creation-heading h1 { color: #f0dbad; font: 36px/1.2 Georgia,serif; }
.creation-heading > p:last-child { margin: 8px 0 16px; color: #a8a2a4; font-size: 13px; }
.nickname-field label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #cbbd9c; letter-spacing: 1px; font-size: 10px; }
.nickname-field label span { color: #77717b; font-size: 9px; }
.nickname-field input { width: 100%; min-height: 48px; padding: 12px 16px; color: #f4ead5; background: #08090d; border: 1px solid #514431; border-radius: 0; box-shadow: inset 0 2px 8px #0008; font: 15px monospace; outline: none; }
.nickname-field input::placeholder { color: #77717c; font-size: 13px; }
.nickname-field input:focus { border-color: #dfbd7c; box-shadow: 0 0 0 2px #dfbd7c25; }
.nickname-field input[aria-invalid='true'] { border-color: #ed8177; }
.class-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0 12px; }
.class-caption h2 { font: 20px Georgia,serif; color: #dfd4be; }
.class-caption > span { font: 9px monospace; color: #80798a; }.class-caption strong { color: #dfbd7c; font-weight: normal; }
.hero-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.hero-card { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px 5px 10px; border: 1px solid #39333b; color: #d5ccd4; background: radial-gradient(ellipse at 50% 35%,#33303b55,transparent 70%),#141219; box-shadow: inset 0 0 0 3px #1b1921; transition: border-color .15s, background .15s, box-shadow .15s; }
.hero-card:hover { border-color: #b29159; background-color: #262027; }
.hero-card[aria-pressed='true'] { border-color: #f1d28b; background-color: #30261c; box-shadow: inset 0 0 0 2px #826436,0 0 14px #d4af3730; }
.hero-card[aria-pressed='true']::after { content: '◆'; position: absolute; top: 7px; right: 8px; color: #f1d28b; font-size: 9px; }
.hero-card:focus-visible, .enter-world:focus-visible { outline: 2px solid #f0dba7; outline-offset: 3px; }
.hero-portrait { display: block; width: 64px; height: 64px; background-size: 256px 256px; background-position: -64px 0; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 4px 4px #0009); margin-bottom: 6px; }
.hero-card strong { font: 17px Georgia,serif; }.hero-card small { display: block; margin-top: 5px; font: 10px/1.4 'Segoe UI',sans-serif; color: #9d919c; }
.hero-card[aria-pressed='true'] strong { color: #ffe7b2; }.hero-card[aria-pressed='true'] small { color: #bca783; }
.creation-error { min-height: 18px; margin: 10px 0 6px; color: #ffaaa1; font: 12px/1.5 'Segoe UI',sans-serif; }
.enter-world { cursor: pointer; width: 100%; padding: 18px 12px; border: 1px solid #f1d18f; border-radius: 0; color: #20180e; background: linear-gradient(#e4c181,#b99050); box-shadow: inset 0 2px #ffe3ad,inset 0 -3px #7e5e32,0 4px #050507; font: bold 13px/1.5 monospace; letter-spacing: 2px; }
.enter-world:hover { filter: brightness(1.12); }.enter-world:disabled { cursor: wait; opacity: .75; }
.creation-note { text-align: center; color: #77717a; font-size: 10px; letter-spacing: .5px; margin: 16px 0 0; }
@media(max-width:600px) { .character-creation { padding: 16px 12px; }.creation-panel { padding: 24px 16px 16px; }.creation-heading h1 { font-size: 30px; }.creation-heading .eyebrow { font-size: 8px; letter-spacing: .7px; }.hero-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.hero-card { padding: 8px 4px 10px; }.hero-portrait { margin-bottom: 2px; }.class-caption { align-items: flex-start; flex-direction: column; }.nickname-field label span { font-size: 8px; letter-spacing: 0; }.nickname-field input { padding-inline: 10px; }.nickname-field input::placeholder { font-size: 11px; }.enter-world { letter-spacing: .7px; font-size: 12px; } }
@media(prefers-reduced-motion:reduce) { .character-creation,.hero-card { transition: none; } }

/* HUD de combate: o mundo fica livre; alvo aparece somente durante seleção. */
.connection-notice { position: fixed; z-index: 20; left: 50%; top: 20px; transform: translateX(-50%); color: #f2d29b; background: #15131ceb; border: 1px solid #63513a; padding: 8px 16px; font: 12px monospace; }
body[data-connection='online'] .connection-notice { display: none; }
.hero-progression { position: fixed; z-index: 10; top: 166px; left: 29px; color: #d9c597; font: 11px/1.5 monospace; text-shadow: 1px 2px #000; letter-spacing: .4px; pointer-events: none; }
.zone-toast { position: fixed; z-index: 10; top: 36px; left: 50%; transform: translateX(-50%); color: #e3cf9e; font: 25px Georgia,serif; text-shadow: 0 2px 6px #000; opacity: 0; transition: opacity .7s; pointer-events: none; }
.zone-toast.visible { opacity: 1; }
.enemy-target { position: fixed; z-index: 10; top: 22px; right: 22px; width: 245px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #705b42; background: linear-gradient(110deg,#231924ee,#100e15e8); box-shadow: inset 0 0 0 3px #211c21,0 3px 12px #0006; }
.enemy-target[hidden] { display: none; }.target-rune { color: #ca7971; font-size: 24px; }.enemy-target>div { flex: 1; min-width: 0; }.enemy-target strong { display:block; font: 15px Georgia,serif; color:#f1c1af; }.enemy-target span#enemy-health { display:block; margin:3px 0 5px; color:#b6a79e; font:10px monospace; }
.enemy-target progress { display:block; width:100%; height:6px; border:0; background:#100d12; appearance:none; }.enemy-target progress::-webkit-progress-bar { background:#100d12; }.enemy-target progress::-webkit-progress-value { background:linear-gradient(#dc6852,#762d31); }.enemy-target progress::-moz-progress-bar { background:#b2473e; }
.combat-actions { position: fixed; z-index: 10; left: 50%; bottom: max(15px,env(safe-area-inset-bottom)); transform: translateX(-50%); text-align: center; width:max-content; max-width:calc(100vw - 20px); }
.combat-buttons { display:flex; justify-content:center; gap:6px; }
.attack-action { position: relative; display: inline-flex; justify-content:center; align-items:center; width:58px; height:58px; cursor:pointer; border:2px solid #baa171; background:linear-gradient(145deg,#39313c,#16121c); box-shadow:inset 0 0 0 3px #100e16,0 3px 8px #0009; }
.attack-action:hover,.attack-action:focus-visible { border-color:#ffe1a4; outline:none; box-shadow:inset 0 0 0 3px #100e16,0 0 14px #d7ab5655; }.attack-action:active { filter:brightness(1.3); }.attack-action kbd { position:absolute; bottom:2px; color:#c3bba8; font:7px monospace; letter-spacing:1px; }
.pixel-sword { position:relative; display:block; width:5px; height:28px; margin-top:-8px; background:#d7d7d4; border-left:2px solid #8b919e; transform:rotate(40deg); box-shadow:0 0 0 1px #151421; }.pixel-sword::before { content:''; position:absolute; left:-6px; bottom:5px; width:15px; height:3px; background:#c2a16d; }.pixel-sword::after { content:''; position:absolute; left:-1px; bottom:-4px; width:5px; height:9px; background:#8b6241; border-bottom:2px solid #d9bb7c; }
.pixel-sword { width:32px; height:32px; margin-top:-6px; background: url('/assets/hd/items/WeaponBuff_01.png') center/32px 32px no-repeat; border:0; transform:none; box-shadow:none; image-rendering:auto; }.pixel-sword::before,.pixel-sword::after { display:none; }
.asset-credits { display:block; margin-top:18px; color:#a69880; font:10px monospace; }
.combat-hint { color:#d2c8b2; text-shadow:0 2px 4px #000; font:11px monospace; margin:0 0 12px; transition:opacity .4s; }.combat-hint[hidden] { display:none; }
.combat-actions .attack-action { display:inline-grid; margin:0; flex:0 1 58px; min-width:44px; }
.potion-action img { width:32px; height:32px; margin-top:-5px; image-rendering:auto; pointer-events:none; }
.potion-action .potion-quantity { position:absolute; top:3px; right:4px; max-width:calc(100% - 6px); color:#ffe5b3; background:#110e17d9; padding:0 2px; font:bold 11px/1.3 monospace; overflow-wrap:anywhere; pointer-events:none; }
.potion-action kbd { left:5px; bottom:2px; font:bold 11px/1.2 monospace; color:#f0d9a6; }
.potion-cooldown { position:absolute; inset:2px; z-index:1; display:grid; place-items:center; background:conic-gradient(from -90deg,#070912d9 var(--cooldown-sweep,360deg),transparent 0); pointer-events:none; }
.potion-cooldown[hidden] { display:none; }
.potion-cooldown>span { padding:2px 3px; background:#100d16e8; color:#fff1d0; font:bold 13px/1.3 monospace; text-shadow:1px 1px #000; }
.potion-action .potion-quantity,.potion-action kbd { z-index:2; }
.potion-action.is-cooling:disabled { opacity:1; cursor:wait; border-color:#78684c; }
.potion-action.is-cooling img { filter:brightness(.6); }
.potion-action.is-ready { border-color:#b8cc8f; }
.potion-action.is-ready::after { content:''; position:absolute; top:4px; left:4px; width:4px; height:4px; background:#c5e69e; box-shadow:0 0 4px #b8d28466; pointer-events:none; }
.hud-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.attack-action:disabled { opacity:.35; cursor:default; }.attack-action.cooling .pixel-sword { opacity:.5; }
.pixel-bag,.pixel-pack { color:#d8b672; font:bold 30px/1 monospace; text-shadow:2px 2px #775330,-2px -2px #17131e; margin-top:-6px; }
.inventory-panel { --slot-edge:#66523b; --slot-bg:#18151e; position:fixed; z-index:30; right:22px; top:50%; transform:translateY(-50%); width:min(366px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; user-select:none; padding:20px; border:1px solid var(--gold); background:#14121cfb; box-shadow:inset 0 0 0 4px #29222b,0 12px 40px #000a; }
.inventory-panel[hidden],.inventory-tooltip[hidden],.inventory-empty[hidden] { display:none; }
.inventory-panel header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.inventory-panel .eyebrow { color:#a69780; font-size:8px; letter-spacing:1.8px; }.inventory-panel h2 { font:26px Georgia,serif; color:#e6c992; }
.inventory-close { width:34px; height:34px; border:1px solid #65513d; background:#211b24; color:var(--gold); font:25px/1 Georgia,serif; cursor:pointer; }
.inventory-close:hover { border-color:#f7dca7; }.inventory-close:focus-visible,.inventory-slot:focus-visible { outline:2px solid #ffe1a4; outline-offset:2px; }
.inventory-balance { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-top:1px solid #493c30; }
.inventory-balance p { margin:0; color:var(--gold); font:13px monospace; }.inventory-balance p::before { content:'◆'; margin-right:8px; font-size:11px; color:#f5cf74; }.inventory-balance span { color:#9d9185; font:10px monospace; }
.inventory-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:0; padding:2px; list-style:none; max-height:270px; overflow-y:auto; }
.inventory-cell { min-width:0; aspect-ratio:1; }.inventory-slot,.inventory-slot-empty { border:1px solid var(--slot-edge); background:linear-gradient(145deg,#302733,var(--slot-bg)); box-shadow:inset 0 0 0 2px #100e16,inset 0 0 8px #0008; }
.inventory-slot { position:relative; display:grid; place-items:center; width:100%; height:100%; padding:4px; cursor:pointer; border-radius:0; }
.inventory-slot img { width:32px; height:32px; image-rendering:auto; pointer-events:none; filter:drop-shadow(0 2px 1px #000b); }
.inventory-slot:hover,.inventory-slot.is-inspected { border-color:#efce8a; background:radial-gradient(#765a393f,transparent),#30252b; box-shadow:inset 0 0 0 2px #171019,0 0 8px #c5a65b22; }
.inventory-quantity { position:absolute; right:3px; bottom:2px; max-width:calc(100% - 4px); padding:0 2px; color:#fff2d6; background:#100d16dd; font:bold 11px/1.3 monospace; overflow-wrap:anywhere; pointer-events:none; text-shadow:1px 1px #000; }
.inventory-slot-empty { position:relative; opacity:.55; }.inventory-slot-empty::after { content:''; position:absolute; inset:7px; border:1px solid #3a303827; }
.inventory-empty { margin:10px 0 0; color:#b7a995; font-size:12px; }
.inventory-inspection { position:relative; margin-top:14px; min-height:174px; border-top:1px solid #514130; padding:12px 0 0; }
.inventory-help { margin:30px 12px; color:#968b87; font:12px/1.7 'Segoe UI',sans-serif; text-align:center; }
.inventory-tooltip { position:absolute; inset:12px 0 0; background:#14121c; }.inventory-tooltip strong { display:block; color:#f1d298; font:19px/1.2 Georgia,serif; }
.inventory-tooltip span { display:block; color:#ab9b86; font:10px/1.5 monospace; margin-top:5px; }.inventory-tooltip p { color:#d4c9b9; font:12px/1.6 'Segoe UI',sans-serif; margin:8px 0; }
.inventory-panel footer { display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid #493c30; margin-top:8px; padding-top:10px; color:#887b71; font:9px/1.5 'Segoe UI',sans-serif; }
.inventory-panel .asset-credits { color:#b9a789; font-size:9px; }
.inventory-slot.is-consumable { border-color:#779183; }.inventory-slot.is-consumable:hover,.inventory-slot.is-consumable.is-inspected { border-color:#e6d29c; }
.inventory-tooltip .inventory-use-hint { color:#dfbd7c; font:10px/1.5 'Segoe UI',sans-serif; }
@media(max-width:700px) { .inventory-panel { right:12px; padding:16px; }.inventory-grid { gap:5px; }.inventory-inspection { min-height:190px; } }
@media(max-height:540px) { .inventory-panel { top:12px; transform:none; }.inventory-grid { max-height:126px; }.inventory-inspection { min-height:174px; } }
.combat-log { position:fixed; z-index:10; bottom:18px; left:26px; max-width:310px; margin:0; padding:0; list-style:none; pointer-events:none; color:#e2cea1; font:12px/1.8 monospace; text-shadow:0 2px 3px #000; }.combat-log li { animation:combat-log-life 7s forwards; }@keyframes combat-log-life { 0%,75% { opacity:1; }100% { opacity:0; } }
@media(max-width:700px) { .hero-progression { left:18px; font-size:10px; }.enemy-target { top:213px; right:12px; width:200px; padding:8px 10px; }.enemy-target strong { font-size:14px; }.zone-toast { top:190px; font-size:18px; white-space:nowrap; }.combat-hint { font-size:8px; letter-spacing:0; }.combat-log { left:12px; bottom:85px; font-size:10px; max-width:260px; }.combat-actions { bottom:12px; } }
@media(prefers-reduced-motion:reduce) { .zone-toast,.combat-hint { transition:none; }.combat-log li { animation:none; } }