:root { color-scheme: dark; --gold: #e8c45c; --ink: #f4ead8; }
* { box-sizing: border-box; }
body { margin: 0; background: #140e0a; color: var(--ink); font-family: Georgia, serif; }
header, nav, main { width: min(1100px, 100%); margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: end; padding: 14px 16px 8px; }
h1 { margin: 0; color: var(--gold); letter-spacing: 0.04em; }
.kicker { margin: 0; letter-spacing: 0.18em; font-size: 12px; color: var(--gold); }
nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
body.map-mode #nav { display: none; }
#world-map { display: none; width: min(1100px, 100%); margin: 0 auto 12px; padding: 0 12px; }
body.map-mode #world-map { display: block; }
.world-map-frame { position: relative; overflow: hidden; border: 2px solid #6a4a28; background: #100b09; }
.world-map-frame > img { display: block; width: 100%; height: auto; }
.world-map-pin { position: absolute; left: var(--x); top: var(--y); z-index: 1; display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 2px solid #fff2b0; border-radius: 50%; background: radial-gradient(circle, #fff6cc 0 3px, #b42318dd 4px 100%); box-shadow: 0 0 0 3px #210e0dcc, 0 0 14px #ffcf4a; transform: translate(-50%, -50%); }
.world-map-pin::before { position: absolute; inset: -10px; content: ''; border-radius: 50%; }
.world-map-pin:hover, .world-map-pin:focus-visible { z-index: 2; }
.world-map-pin::after { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 7px); width: max-content; max-width: 180px; padding: 4px 7px; border: 1px solid #e8c45c; border-radius: 4px; background: #140e0aee; color: var(--ink); content: attr(aria-label); font: 13px Georgia, serif; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 120ms ease, transform 120ms ease; }
.world-map-pin:hover::after, .world-map-pin:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.world-map-pin:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.world-map-hint { position: absolute; right: 8px; bottom: 8px; max-width: min(420px, 80%); margin: 0; padding: 6px 9px; border: 1px solid #8a6a32; border-radius: 4px; background: #140e0add; color: var(--ink); font-size: 13px; }
button { background: #2a1c16; color: var(--ink); border: 1px solid #8a6a32; padding: 8px 12px; font: inherit; cursor: pointer; }
button.on, button:hover { border-color: var(--gold); color: var(--gold); }
main { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 10px; padding: 0 12px 16px; }
.stage-column { min-width: 0; }
.stage { position: relative; min-height: 220px; height: 240px; background: #000 center/cover no-repeat; border: 2px solid #6a4a28; overflow: hidden; }
.stage img { position: absolute; bottom: 28px; object-fit: cover; object-position: top; border-radius: 8px; background: #000; }
.stage.fight { height: 460px; }
.stage.fight > img, .stage.fight .plate { display: none; }
.combat-abandon { display: flex; align-items: center; gap: 6px; border-color: #a52a2a; background: #5b1515; color: #fff; }
.combat-abandon:hover, .combat-abandon:focus-visible { border-color: #ff7777; background: #8b1e1e; color: #fff; }
.combat-abandon[hidden] { display: none; }
.stage > .combat-abandon { position: absolute; top: 10px; right: 10px; z-index: 5; }
dialog .combat-abandon { position: fixed; top: 12px; right: 12px; z-index: 1; margin: 0; }
#hero { left: 12px; width: 92px; height: 140px; }
#foe { right: 12px; width: 92px; height: 140px; }
.plate { position: absolute; left: 8px; right: 8px; bottom: 8px; background: #140c10ee; border: 1px solid #8a6a32; padding: 6px 8px; font-size: 14px; }
.plate:empty { display: none; }
aside { background: #1a120e; border: 1px solid #6a4a28; padding: 10px; max-height: 70vh; overflow: auto; }
#character-status { margin-bottom: 10px; }
#character-status[hidden] { display: none; }
#character-status .stack { width: 100%; }
#character-status .card { width: 100%; }
#character-status .card img { width: 64px; height: 80px; }
.pinned-quests { margin-top: 8px; padding: 6px; border: 1px solid var(--gold); background: #392d16; }
.pinned-quests h3 { margin: 0 0 4px; font-size: 1em; }
.pinned-quests p { margin: 2px 0; font-size: .9em; }
.gold-label { display: block; color: var(--gold); margin-top: 2px; }
#actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stage-column > #actions { padding: 8px; border: 1px solid #6a4a28; background: #1a120e; align-items: center; }
.stage-column > #actions:empty { display: none; }
.slot-machine { flex-basis: 100%; max-width: 360px; margin: 4px 0; border: 3px solid #e8c45c; border-radius: 14px 14px 8px 8px; background: linear-gradient(#7a1420, #3b0a10); box-shadow: 0 6px 18px #000a, inset 0 0 14px #0008; padding: 8px 10px 6px; text-align: center; }
.slot-top { margin-bottom: 6px; padding: 4px; border-radius: 6px; background: #140c10; color: #f6e7a2; font-weight: 700; letter-spacing: 2px; text-shadow: 0 0 8px #e8c45c; }
.slot-body { display: flex; align-items: center; justify-content: center; gap: 12px; }
.slot-window { display: flex; gap: 4px; padding: 6px; border: 3px solid #b8892e; border-radius: 8px; background: #140c10; }
.slot-reel { display: grid; place-items: center; width: 64px; height: 76px; border-radius: 4px; background: linear-gradient(#cfc7b5, #fff8e4 40%, #cfc7b5); font-size: 38px; box-shadow: inset 0 6px 8px #0006, inset 0 -6px 8px #0006; }
.slot-reel.spinning { filter: blur(1.5px); }
.slot-reel.landed { animation: slot-land 300ms ease-out; }
.slot-lever { min-width: 0; padding: 10px 8px; border-radius: 999px; border: 2px solid #e8c45c; background: #c2202f; color: #fff; font-weight: 700; }
.slot-lever:disabled { opacity: .6; cursor: wait; }
.slot-pay { margin-top: 6px; color: #e8d9ae; font-size: 12px; }
.slot-machine.win { animation: slot-win 600ms ease 3; }
@keyframes slot-land { from { transform: translateY(-14px); } to { transform: translateY(0); } }
@keyframes slot-win { 50% { box-shadow: 0 0 28px 6px #f6e7a2; } }
#actions p { flex-basis: 100%; margin: 2px 0; }
#actions h3 { flex-basis: 100%; margin: 8px 0 2px; color: var(--gold); font-size: 1rem; }
.quest-list { max-height: 260px; overflow: auto; }
.leaderboard { width: 100%; margin-top: 10px; border-collapse: collapse; text-align: left; }
.leaderboard th, .leaderboard td { padding: 7px; border-bottom: 1px solid #6a4a28; }
.leaderboard th { color: var(--gold); }
.pvp-log { width: 100%; max-height: 300px; overflow-y: auto; align-self: flex-end; padding: 8px; border: 1px solid #8a6a32; background: #100b09dd; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
.pvp-log p { margin: 0 0 4px; }
.pvp-log-center { flex: 1; min-width: 0; width: auto; align-self: center; max-height: 60%; pointer-events: auto; overscroll-behavior: contain; }
.quest-list p { margin: 6px 0; padding-bottom: 4px; border-bottom: 1px solid #6a4a28; }
.place-panel { margin-top: 12px; padding: 10px; border: 1px solid #6a4a28; background: #1a120e; }
.place-panel h2 { margin: 0 0 8px; color: var(--gold); font-size: 1.1rem; }
.place-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.place-panel-actions input { min-width: 140px; padding: 8px; border: 1px solid #8a6a32; background: #2a1c16; color: var(--ink); font: inherit; }
.place-panel .party { margin-top: 8px; }
.quest-list .quest-complete { padding: 6px; border: 1px solid var(--gold); background: #392d16; }
.quest-icon { display: inline-block; min-width: 1.5em; }
.quest-ready { color: var(--gold); }
.inventory-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid #6a4a28; background: #1a120e; }
.inventory-menu-group { display: grid; align-content: start; gap: 8px; }
.inventory-menu h3 { margin: 2px 0; color: var(--gold); font-size: 1rem; }
.inventory-menu select { width: 100%; }
.inventory-menu button { width: 100%; }
.inventory-details { min-width: 0; overflow-wrap: anywhere; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
select { background: #2a1c16; color: var(--ink); border: 1px solid #8a6a32; padding: 6px; font: inherit; max-width: 100%; }
.sell-list { display: grid; flex-basis: 100%; gap: 4px; max-height: 220px; overflow: auto; padding: 6px; border: 1px solid #6a4a28; }
.sell-list label { display: flex; align-items: center; gap: 8px; }
.sell-list input { accent-color: var(--gold); }
.tools { display: flex; gap: 10px; align-items: center; }
.tools label { font-size: 13px; color: var(--gold); }
.tools .map-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#auto-combat-timer { font-size: 13px; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.map-toggle:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.map-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.map-toggle-track { position: relative; width: 42px; height: 24px; border: 1px solid #8a6a32; border-radius: 12px; background: #2a1c16; transition: background 140ms ease; }
.map-toggle-track span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #c5b89d; transition: transform 140ms ease, background 140ms ease; }
.map-toggle input:checked + .map-toggle-track { background: #6b4c16; }
.map-toggle input:checked + .map-toggle-track span { background: var(--gold); transform: translateX(18px); }
.map-toggle input:focus-visible + .map-toggle-track { outline: 3px solid #fff; outline-offset: 3px; }
body.size-m { font-size: 18px; }
body.size-l { font-size: 22px; }
body.size-l .stage:not(.fight) { height: 360px; }
body.size-l #hero, body.size-l #foe { width: 140px; height: 210px; }
body.size-m .stage:not(.fight) { height: 300px; }
body.size-m #hero, body.size-m #foe { width: 116px; height: 170px; }
body.chat-off #log, body.chat-off #line, body.chat-off #chat button[type="submit"], body.chat-off #chat-channel, body.chat-off #chat-target { display: none; }
#activity-panels { width: min(1100px, 100%); margin: 0 auto 12px; padding: 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
#chat { min-width: 0; margin: 0; display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; }
#chat > #line { grid-column: 1 / 4; }
#chat-target { grid-column: 3 / -1; }
#chat-target { color: #ff8fc7; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-target[hidden] { display: none; }
#chat-channel { background: #2a1c16; color: var(--ink); border: 1px solid #8a6a32; padding: 6px; font: inherit; }
#log .chat-name { cursor: pointer; }
#log .chat-name:hover { text-decoration: underline; }
#chat-invites { grid-column: 1 / -1; display: grid; gap: 4px; }
#chat-invites[hidden] { display: none; }
#chat-invites div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid #8a6a32; background: #2a1c16; font-size: 14px; }
#chat-invites span { flex: 1 1 200px; }
body.chat-off #chat-invites { display: none; }
#chat-name-menu { position: fixed; z-index: 1000; display: grid; gap: 4px; min-width: 190px; padding: 8px; border: 1px solid #8a6a32; background: #1a120e; box-shadow: 0 6px 20px #000a; }
#chat-name-menu b { color: var(--gold); padding-bottom: 2px; }
#chat-name-menu button { text-align: left; }
#log .ch-private { color: #ff8fc7; }
#log .ch-party { color: #6cb6ff; }
#log .ch-guild { color: #6fdc84; }
#combat-journal { min-width: 0; padding: 8px; border: 1px solid #6a4a28; background: #1a120e; }
#combat-journal[hidden] { display: none; }
#combat-journal h2 { margin: 0 0 6px; color: var(--gold); font-size: 1rem; }
#combat-log { height: 220px; overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid #6a4a28; background: #100b09; font: 14px/1.5 Georgia, serif; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-gutter: stable; }
#chat-toggle { justify-self: start; }
#log { grid-column: 1 / -1; height: 220px; overflow-y: auto; padding: 8px; border: 1px solid #6a4a28; background: #1a120e; font-size: 14px; line-height: 1.5; }
#log time { color: #bda77e; }
#chat-status { grid-column: 1 / -1; margin: 0; color: #ffb4a2; }
#chat-status:empty { display: none; }
body.chat-off #chat-status { display: none; }
@media (max-width: 800px) {
  header { align-items: center; flex-wrap: wrap; }
  .world-map-hint { font-size: 11px; }
  .pvp-log { max-height: 200px; font-size: 11px; }
  main { grid-template-columns: 1fr; }
  #activity-panels { grid-template-columns: 1fr; }
  #combat-log, #log { height: 180px; }
  .inventory-menu { grid-template-columns: 1fr; }
}
dialog { color: var(--ink); background: #1a120e; border: 1px solid #8a6a32; max-width: min(480px, calc(100% - 24px)); }
dialog::backdrop { background: #000b; }
#tos-dialog { max-width: min(640px, calc(100% - 24px)); }
#tos-dialog h2 { margin-top: 0; color: var(--gold); }
#tos-dialog h3 { margin: 12px 0 4px; font-size: 1rem; }
#tos-dialog p { margin: 4px 0; }
#tos-text { max-height: 55vh; overflow-y: auto; padding-right: 8px; font-size: 14px; line-height: 1.5; }
#tos-status { color: #ffb4a2; }
dialog button + button { margin-left: 8px; }
.auto-picker h2 { margin-top: 0; color: var(--gold); }
.auto-picker select { display: block; margin: 8px 0; width: 100%; }
#create { width: min(1100px, 100%); margin: 0 auto 12px; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
#create[hidden] { display: none !important; }
.stage-column #equipment-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.stage-column #equipment-controls[hidden] { display: none; }
.stage-column #equipment-controls select { flex: 1 1 140px; min-width: 0; }
.stage.character-view { background-size: contain; height: 460px; }
#equipment-display { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#equipment-display[hidden] { display: none; }
.equipment-slot {
  position: absolute; display: grid; justify-items: center; gap: 2px;
  width: 70px; min-height: 54px; padding: 3px;
  border: 1px solid #d4a24a; border-radius: 6px;
  background: rgba(16, 10, 8, 0.88); text-align: center;
  transform: translate(-50%, -50%);
}
.equipment-slot img { position: static; width: 34px; height: 34px; object-fit: contain; }
.equipment-slot small { max-width: 100%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.equipment-empty { display: grid; width: 34px; height: 34px; place-items: center; color: #bda77e; font-size: 20px; }
.slot-head { left: 50%; top: 11%; }
.slot-amulet { left: 50%; top: 29%; }
.slot-armor { left: 50%; top: 47%; }
.slot-mainHand { left: 20%; top: 47%; }
.slot-offHand { left: 80%; top: 47%; }
.slot-feet { left: 50%; top: 65%; }
.slot-accessory { left: 50%; top: 83%; }
.character-sheet { display: grid; gap: 4px; }
.character-sheet h3 { margin: 8px 0 2px; color: var(--gold); font-size: 1rem; }
.character-sheet p { margin: 2px 0; }
.npc-portrait { display: block; width: min(100%, 240px); max-height: 260px; object-fit: cover; border: 1px solid var(--gold); border-radius: 8px; }
.character-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.character-stats span { padding: 4px 6px; border: 1px solid #6a4a28; background: #211710; }
.job-energy { margin: 8px 0; }
.job-energy-bar { height: 18px; }
.job-energy-bar span { background: #ca8a04; }
.energy-recovery { display: contents; }
.energy-recovery button { margin: 0 4px 4px 0; }
.bar { position: relative; height: 8px; background: #2a1c16; border: 1px solid #6a4a28; margin: 2px 0 6px; }
.bar span { display: block; height: 100%; }
.card .bar.hp, .card .bar.res { height: 14px; }
.bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.hp span { background: #b42318; width: 0; }
.res span { background: #3b6ea5; width: 0; }
.res.rage span { background: #c2410c; }
.res.energy span, .res.énergie span { background: #facc15; }
.combo-points { display: flex; gap: 4px; margin: 3px 0; }
.combo-points i { width: 11px; height: 11px; border: 1.5px solid #8a6a32; border-radius: 50%; background: transparent; transition: background .15s, box-shadow .15s; }
.combo-points i.on { background: #dc2626; border-color: #fca5a5; box-shadow: 0 0 5px #dc2626; }
.party { display: flex; gap: 8px; flex-wrap: wrap; }
.party img { width: 64px; height: 80px; object-fit: cover; background: #000; }
.party figcaption { font-size: 12px; text-align: center; }
#create input, #create select, #chat input { background: #2a1c16; color: var(--ink); border: 1px solid #8a6a32; padding: 8px; font: inherit; }
#battle { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 10px; gap: 8px; }
#battle[hidden] { display: none !important; }
.party-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; width: 46%; }
.card { display: flex; gap: 8px; align-items: center; border: 2px solid #d4a24a; background: rgba(20, 8, 8, 0.78); padding: 6px; }
.card.turn, .foe-card.turn { position: relative; }
.card.turn::before, .foe-card.turn::before {
  content: '►'; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  color: #f6e7a2; font-size: 18px; text-shadow: 0 0 6px #000;
}
.foe-card.turn::before { left: -18px; }
.foe-card.thinking::after {
  content: '…'; position: absolute; top: 6px; left: 8px; color: #f6e7a2; font-size: 22px;
}
.card, .foe-card, .card img, .foe-card img, .meter b { position: relative; }
.card.downed { border-color: #a42a31; background: rgba(50, 5, 8, 0.88); }
.card.downed .portrait img { filter: grayscale(1) sepia(1) saturate(8) hue-rotate(315deg) brightness(.65); }
.portrait { position: relative; flex: none; line-height: 0; }
.combat-effects { position: absolute; inset: 4px auto auto 4px; z-index: 3; display: flex; flex-wrap: wrap; gap: 3px; max-width: calc(100% - 8px); }
.effect-icon { display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 2px; border: 1px solid #e8c45c; border-radius: 50%; background: rgba(15, 8, 7, 0.92); font-size: 12px; line-height: 1; }
.foe-card .combat-effects { inset: 8px auto auto 8px; }
.foe-card .effect-icon { min-width: 26px; height: 26px; font-size: 15px; }
.dmg-pop {
  position: absolute; z-index: 6; color: #ff3b3b; font-weight: 700;
  text-shadow: 0 1px 2px #000; pointer-events: none; animation: dmg-rise 1.4s ease-out forwards;
}
.dmg-pop.on-art { left: 50%; top: 28%; font-size: 22px; }
.dmg-pop.on-name { left: 0; bottom: 100%; font-size: 14px; }
@keyframes dmg-rise {
  0% { opacity: 1; transform: translateY(6px) scale(1.3); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  70% { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-24px); }
}
.card img { position: static; width: 72px; height: 88px; object-fit: cover; background: #000; }
.foe-card { width: 150px; border: 2px solid #d4a24a; background: rgba(40, 8, 12, 0.8); display: flex; flex-direction: column; align-items: center; padding: 6px; }
.foe-col { display: flex; align-items: stretch; justify-content: flex-end; gap: 8px; width: 54%; min-width: 0; }
.foe-card { cursor: crosshair; min-width: 0; }
.foe-card.selected { border-color: #f6e7a2; box-shadow: 0 0 18px #e8c45c88; }
.foe-card:not(.boss) .portrait { flex: 1; width: 100%; min-height: 110px; }
.foe-card:not(.boss) .portrait img { width: 100%; height: 100%; object-fit: contain; }
.foe-card img { position: static; width: 120px; height: 150px; object-fit: contain; background: transparent; }
.foe-card.boss { width: 38%; align-self: stretch; justify-content: flex-end; }
.foe-card.boss img { width: 100%; height: 78%; object-fit: contain; }
.foe-card.boss .portrait { flex: 1; width: 100%; min-height: 0; }
.foe-card.boss .portrait img { width: 100%; height: 100%; }
.pvp-side { width: 30%; max-width: 30%; }
.pvp-side.foe-col { justify-content: flex-end; }
.pvp-fighter { flex-direction: column; width: 220px; max-width: 100%; text-align: center; }
.pvp-fighter .meter { width: 100%; }
.pvp-fighter .portrait img { width: 100%; height: 280px; object-fit: contain; background: transparent; }
.pvp-fighter.mine .portrait img { transform: none; }
.pvp-fighter.rival .portrait img { transform: scaleX(-1); }
.pvp-fighter.turn::before { content: none; }
.pvp-fighter.turn { box-shadow: 0 0 22px #e8c45ccc; border-color: #f6e7a2; }
.meter { flex: 1; min-width: 0; font-size: 12px; }
.hp span { background: #46c45a; }
.foe-card .enemy-hp-bar {
  flex: none; width: 100%; height: 12px; margin: 4px 0 2px;
  border-color: #792126; background: #301014;
}
.foe-card .enemy-hp-bar > span { background: #df2935; }
.stage.fight { height: 420px; }
body.fighting { min-height: 100vh; display: flex; flex-direction: column; }
body.fighting header, body.fighting nav, body.fighting main { width: 100%; }
body.fighting header { padding: 6px 12px 4px; }
body.fighting h1 { font-size: 1.15rem; }
body.fighting nav { padding-bottom: 6px; }
body.fighting main { flex: 1; display: block; position: relative; min-height: 0; padding: 0 8px 8px; }
body.fighting .stage.fight { height: 100%; min-height: 72vh; }
body.fighting aside {
  position: absolute; inset: 0; z-index: 4;
  background: none; border: none; padding: 0; max-height: none; overflow: visible;
  pointer-events: none;
}
body.fighting #place-title { display: none; }
body.fighting #character-status { display: none; }
body.fighting #sheet {
  position: absolute; left: 22%; right: 6%; bottom: 8px;
  max-height: 18%; overflow: auto; pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
  text-shadow: 0 1px 2px #000; font-size: 14px; padding: 28px 8px 6px;
}
body.fighting #battle { align-items: center; padding: 12px; }
body.fighting #actions {
  position: absolute; z-index: 10; left: 12px; bottom: 12px;
  max-width: min(52%, 560px); margin: 0; padding: 6px;
  border: 1px solid #6a4a28; border-radius: 8px;
  background: rgba(20, 8, 8, 0.92); pointer-events: auto;
}
body.fighting .party-col { width: auto; max-width: 46%; max-height: 100%; justify-content: center; }
body.fighting .pvp-side { width: 30%; max-width: 30%; }
body.fighting .pvp-side.foe-col { justify-content: flex-end; }
body.fighting .pvp-fighter .portrait img { width: 100%; height: 280px; }
body.fighting .party-col { overflow-y: auto; padding: 4px 6px; }
body.fighting .stack { display: flex; flex-direction: column; gap: 6px; width: max-content; max-width: 100%; }
body.fighting #actions { margin: 0; pointer-events: auto; }
body.fighting #actions button, body.fighting #actions select { padding: 4px 8px; font-size: 14px; }
body.fighting .card img { width: 96px; height: 120px; }
body.fighting .party-col.many .card img { width: 64px; height: 80px; }
body.fighting .foe-card { width: 200px; }
body.fighting .foe-card img { width: 160px; height: 200px; }
body.fighting .foe-card.boss { width: 32%; }
body.fighting .foe-card.boss img { width: 100%; height: 100%; }
body.fighting .foe-col { width: 54%; max-height: 100%; overflow-x: auto; }
body.fighting .foe-card:not(.boss) { flex: 0 0 160px; }

button, select, .card, .foe-card, .stage {
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
button { border-radius: 6px; }
button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px #0008; }
button:active { transform: translateY(0); }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
nav button { border-radius: 999px; padding-inline: 14px; }
.card, .foe-card { animation: card-enter 260ms ease both; }
.card:hover, .foe-card:hover { transform: translateY(-2px); }
.card.turn, .foe-card.turn { box-shadow: 0 0 18px #e8c45c88; }
.bar span { transition: width 550ms cubic-bezier(.22, .8, .3, 1); }
.dmg-pop { will-change: transform, opacity; }
.card, .foe-card { will-change: auto; }
.xp { height: 5px; margin-top: 3px; background: #2b2119; border-color: #6a4a28; }
.xp span { background: linear-gradient(90deg, #69c5ff, #a8e4ff); }
.xp-label { display: block; color: #d8c8a5; font-size: 10px; }
#actions button, #actions select { border-radius: 6px; }
#reward-dialog, #boss-area-dialog, #tavern-dialogue {
  width: min(420px, calc(100% - 32px)); padding: 28px; text-align: center;
  color: var(--ink); background: linear-gradient(145deg, #271a13, #110b0b);
  border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 20px 70px #000c;
}
#reward-dialog::backdrop, #boss-area-dialog::backdrop, #tavern-dialogue::backdrop { background: #080504c9; backdrop-filter: blur(4px); }
#reward-dialog[open] { animation: reward-enter 220ms ease both; }
#reward-dialog h2 { margin: 4px 0 8px; color: var(--gold); }
#reward-dialog p { margin: 8px 0; }
#reward-dialog .kicker { margin-top: 2px; }
#reward-dialog ul { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 8px; }
#reward-dialog li { padding: 10px; border: 1px solid #71542c; border-radius: 8px; background: #211710; }
.reward-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#boss-area-dialog h2 { margin: 4px 0 8px; color: #f17b54; }
#tavern-dialogue h2 { margin: 4px 0 8px; color: var(--gold); }
#sell-dialog {
  width: min(420px, calc(100% - 32px)); padding: 24px; text-align: center;
  color: var(--ink); background: linear-gradient(145deg, #271a13, #110b0b);
  border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 20px 70px #000c;
}
#sell-dialog::backdrop { background: #080504c9; backdrop-filter: blur(4px); }
#sell-dialog h2 { color: var(--gold); }
.reward-crest { color: var(--gold); font-size: 32px; text-shadow: 0 0 16px #e8c45c88; }
.cinematic {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  overflow: hidden; background: #050303; animation: cinematic-fade 350ms ease both;
}
.cinematic[hidden] { display: none; }
.combat-intro {
  position: fixed; inset: 0; z-index: 25; display: grid; place-items: center;
  background: radial-gradient(circle at center, #1a0d0d 0%, #050303 75%);
  clip-path: circle(0% at 50% 50%); transition: clip-path 550ms ease-in;
}
.combat-intro[hidden] { display: none; }
.combat-intro.cover { clip-path: circle(150% at 50% 50%); }
.combat-intro.leaving { opacity: 0; transition: opacity 450ms ease; }
.combat-intro-panel { text-align: center; color: #fff1d1; min-width: min(420px, 86vw); }
.combat-intro-panel h2 { margin: 0 0 6px; color: var(--gold); font-size: clamp(22px, 4vw, 36px); text-shadow: 0 2px 10px #000; }
.combat-intro-sub { margin: 0 0 14px; opacity: 0.8; }
#combat-intro-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#combat-intro-rows li {
  display: flex; justify-content: space-between; gap: 24px; padding: 8px 16px;
  border: 1px solid #d4a24a66; background: #140a0acc; animation: card-enter 300ms ease both;
}
#combat-intro-rows li.monster { border-color: #c4483a99; }
#combat-intro-rows li.rolling b { opacity: 0.6; }
#combat-intro-turn { margin: 16px 0 0; font-weight: 700; color: var(--gold); min-height: 1.4em; }
.video-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000; }
.video-overlay[hidden] { display: none; }
.video-overlay video { width: 100%; height: 100%; object-fit: contain; }
.preload { position: fixed; left: 10%; right: 10%; bottom: 28px; z-index: 70; text-align: center; pointer-events: none; color: #f6e7a2; text-shadow: 0 2px 6px #000; }
.preload[hidden] { display: none; }
.preload p { margin: 0 0 6px; font-weight: 700; letter-spacing: 1px; }
.preload-track { height: 12px; border: 2px solid #d4a24a; background: rgba(20, 6, 8, 0.8); border-radius: 8px; overflow: hidden; }
#preload-bar { width: 0; height: 100%; background: linear-gradient(90deg, #8a6a32, #f6e7a2); transition: width 150ms linear; }
#video-skip {
  position: absolute; top: 64px; right: 12px; padding: 8px 18px; border: 2px solid #d4a24a;
  background: rgba(20, 6, 8, 0.8); color: #f6e7a2; font-weight: 700; letter-spacing: 1px; cursor: pointer;
}
.cinematic img { width: 100%; height: 100%; object-fit: contain; }
.cinematic img.cinematic-frame { animation: cinematic-image ease both; }
.cinematic-shade { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, #080504e8); pointer-events: none; }
#cinematic-caption {
  position: absolute; left: 8%; right: 8%; bottom: 7%; margin: 0; text-align: center;
  color: #fff1d1; font-size: clamp(18px, 3vw, 30px); line-height: 1.45;
  text-shadow: 0 2px 8px #000; animation: caption-enter 450ms ease both;
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reward-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cinematic-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cinematic-image {
  from { opacity: 0.45; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes caption-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
  header { align-items: center; flex-wrap: wrap; gap: 8px; }
  header .tools { width: 100%; justify-content: space-between; }
  nav { gap: 6px; }
  body.fighting .stage.fight { min-height: 78vh; }
  body.fighting #battle { padding: 8px; gap: 4px; }
  body.fighting #actions { left: 8px; bottom: 8px; max-width: 64%; }
  body.fighting .party-col { max-width: 62%; }
  body.fighting .card { gap: 5px; padding: 4px; }
  body.fighting .card img { width: 56px; height: 72px; }
  body.fighting .party-col.many .card img { width: 40px; height: 54px; }
  body.fighting .meter { font-size: 10px; }
  body.fighting .foe-card { width: 30%; min-width: 100px; }
  body.fighting .foe-card img { width: 100%; height: 150px; }
  body.fighting .foe-card.boss { width: 30%; }
  body.fighting #actions button, body.fighting #actions select { font-size: 12px; padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}