.mini-dungeon { --dg-green: #6cdda8; --dg-gold: var(--accent); --dg-red: #ff858c; --dg-line: var(--line-2); --dg-surface: var(--surface-2); --dg-muted: var(--muted); }
.mini-dungeon h1, .mini-dungeon h2, .mini-dungeon h3, .dg-results h1, .dg-results h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
.dg-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dg-sprite { display: inline-block; flex: none; width: 64px; height: 64px; background: url('/dungeon/assets/sprites-cartoon.webp?v=1.2.1') no-repeat; background-size: 400% 400%; background-position: calc(var(--sx) * 100% / 3) calc(var(--sy) * 100% / 3); }
.dg-cover { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.tile-dungeon .game-tile-art { padding: 0; overflow: hidden; height: 240px; }
.tile-dungeon .game-tile-body { background: var(--surface); }
.tile-dungeon { border-color: var(--line-2); }
.lobby-dungeon .lobby-head { padding: 28px 24px; background: linear-gradient(90deg, rgba(18,20,25,.94), rgba(18,20,25,.72)), url('/dungeon/assets/cover-cartoon.webp') center 40%/cover; border-radius: 8px; }
.mini-dungeon .game-body { display: flex; align-items: flex-start; gap: 0; overflow-y: auto; }
.dg-content { width: 100%; min-width: 0; flex: 1; max-width: 1280px; margin: 0 auto; }
.mini-dungeon .gamebar { background: var(--surface-2); }
.mini-dungeon .btn-primary { background: var(--accent); color: var(--accent-ink); }
.mini-dungeon .btn { border-radius: 6px; }
.dg-eyebrow { display: block; color: var(--dg-gold); text-transform: uppercase; letter-spacing: 0; font-size: 11px; font-weight: 700; }
.dg-selection { position: relative; padding: 32px 28px; min-height: 640px; isolation: isolate; }
.dg-selection::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,20,25,.48), var(--bg-soft) 85%), url('/dungeon/assets/cover-cartoon.webp') center 38%/cover; }
.dg-selection-title { text-align: center; margin-bottom: 24px; position: relative; }
.dg-selection-title h1 { font-size: 32px; margin: 5px 0 8px; }
.dg-selection-title p { color: #d2e5dc; }
.dg-selection-title .timer { position: absolute; right: 0; top: 8px; }
.dg-classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1060px; margin: auto; }
.dg-class { background: #1e222bf2; border: 2px solid #414754; box-shadow: 0 3px 0 #0e0f13, inset 0 1px 0 #ffffff12; border-radius: 8px; padding: 17px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.dg-class.chosen { border-color: var(--accent); background: #2c2a25; }
.dg-class-art { width: 170px; height: 170px; max-width: 100%; }
.dg-role { color: var(--class-color, var(--dg-green)); font-size: 11px; margin-top: 6px; }
.dg-class:hover:not(.chosen) { border-color: var(--class-color); }
.dg-class h2 { font-size: 21px; margin: 5px 0 10px; overflow-wrap: anywhere; }
.dg-class-stats { display: flex; gap: 17px; color: #d9e5df; }
.dg-class-stats span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.dg-class-stats svg { width: 16px; height: 16px; }
.dg-class h3 { font-size: 13px; margin: 18px 0 6px; }
.dg-class p { font-size: 12px; line-height: 1.6; color: var(--dg-muted); min-height: 60px; margin-bottom: 16px; }
.dg-class .btn { margin-top: auto; width: 100%; }
.dg-selection > .dg-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1060px; margin: 22px auto 0; }
.dg-roster { display: flex; flex-direction: column; gap: 5px; }
.dg-ally { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 6px; text-align: left; border-bottom: 1px solid var(--line-2); }
.dg-ally.self { background: var(--surface-2); border-radius: 8px; box-shadow: inset 3px 0 var(--accent); }
.dg-ally.down { opacity: .65; }
.dg-ally .dg-sprite { width: 49px; height: 59px; }
.dg-ally-info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dg-ally-info strong { font-size: 13px; overflow-wrap: anywhere; }
.dg-ally-info small { color: var(--dg-muted); font-size: 10px; }
.dg-health { height: 5px; background: #0e0f13; display: block; margin: 3px 0; border-radius: 3px; overflow: hidden; }
.dg-health i { display: block; height: 100%; transition: width .25s; }
.dg-expedition { padding: 18px 22px; background: var(--bg-soft); }
.dg-floorbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dg-floorbar h1 { font-size: 23px; margin-top: 4px; }
.dg-resources { display: flex; align-items: center; gap: 20px; font-size: 12px; color: #c7cdd8; }
.dg-resources span { display: flex; align-items: center; gap: 6px; }
.dg-resources span:first-child, .dg-key-found { color: var(--dg-gold); }
.dg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; gap: 22px; }
.dg-playfield { min-width: 0; }
.dg-map-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 44px; background: var(--surface-2); padding: 3px 12px; font-size: 12px; border-bottom: 2px solid #101218; }
.dg-map-toolbar > div { display: flex; align-items: center; gap: 4px; }
.dg-map-toolbar .timer { font-size: 12px; min-width: 44px; height: 30px; margin: 0; padding: 4px; background: #191f25; border: 0; }
.dg-map-toolbar .icon-btn { width: 32px; height: 32px; border-radius: 5px; }
.dg-map-toolbar .icon-btn[aria-pressed='true'] { color: var(--dg-gold); background: #405043; }
.dg-map-wrap { width: 100%; aspect-ratio: 17/11; max-height: calc(100dvh - 500px); min-height: 240px; overflow: hidden; position: relative; background: #14201e; border-inline: 1px solid #363e46; }
.dg-playfield:has(.dg-boss-bar) .dg-map-wrap { max-height: calc(100dvh - 549px); }
#dungeonCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.dg-target { display: flex; align-items: center; gap: 10px; padding: 7px 12px; min-height: 72px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.dg-target > .dg-sprite { width: 48px; height: 48px; }
.dg-target > div { flex: 1; min-width: 0; }
.dg-target strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.dg-target small { display: block; color: var(--dg-muted); font-size: 11px; margin-top: 3px; }
.dg-target.empty { color: #a5beb0; font-size: 12px; }
.dg-command { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 47px; min-height: 44px; color: #e3e8f1; background: var(--surface-3); padding: 4px 8px; border: 2px solid #485363; border-radius: 8px; box-shadow: 0 2px 0 #101218; }
.dg-command span { font-size: 10px; }
.dg-command:hover:not(:disabled) { background: #3c434f; }
.dg-command:disabled, .dg-action:disabled { opacity: .45; }
.dg-controls { padding: 10px 12px 12px; background: var(--surface); border: 1px solid var(--line-2); border-top: 0; }
.dg-action-status { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 10px; min-height: 54px; }
.dg-ap { display: flex; gap: 4px; justify-content: flex-end; }
.dg-ap i { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; background: #303943; color: #58636d; }
.dg-ap i .dg-icon { width: 14px; height: 14px; }
.dg-ap i.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 0 #8f6828, inset 0 1px 0 #fff5be; }
.dg-self-hp { display: inline-flex; align-items: center; gap: 5px; color: var(--dg-green); white-space: nowrap; }
.dg-self-hp svg { width: 15px; height: 15px; }
.dg-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.dg-action { --action-color: #d8dfe8; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 8px 4px 7px; border: 2px solid #414955; border-bottom: 3px solid var(--action-color); background: var(--surface-3); border-radius: 8px; box-shadow: 0 3px 0 #0c0e12, inset 0 1px 0 #ffffff0f; min-height: 90px; color: var(--action-color); transition: background .15s, border-color .15s, transform .15s; }
.dg-action .dg-action-label { font-size: 11px; font-weight: 650; text-align: center; overflow-wrap: anywhere; line-height: 1.3; min-height: 29px; display: grid; place-items: center; }
.dg-action.active, .dg-action:hover:not(:disabled) { border-color: var(--action-color); background: #39414a; transform: translateY(-2px); }
.dg-action.dg-end-turn { background: var(--accent); color: var(--accent-ink); border-color: #ffe49a; border-bottom-color: #b98a24; }
.dg-mobile-pad { display: none; }
.dg-action:active:not(:disabled) { transform: translateY(0); }
.dg-action:focus-visible, .dg-command:focus-visible, .dg-ally:focus-visible { outline: 2px solid #ffe6a0; outline-offset: 3px; }
.dg-attack { --action-color: #ffa1a6; }
.dg-power { --action-color: #8edff5; }
.dg-potion { --action-color: #b5e58e; }
.dg-defend { --action-color: #a1c8ff; }
.dg-interact { --action-color: #e9d594; }
.dg-action-glyph { width: 35px; height: 35px; display: grid; place-items: center; background: color-mix(in srgb, var(--action-color) 13%, transparent); border-radius: 8px; }
.dg-action-glyph .dg-icon { width: 27px; height: 27px; stroke-width: 2.2; }
.dg-action-cost { position: absolute; top: 5px; right: 5px; font-size: 10px; display: flex; align-items: center; gap: 1px; color: #e8d6a3; }
.dg-action-cost .dg-icon { width: 10px; height: 10px; }
.dg-action-count { position: absolute; top: 6px; left: 6px; min-width: 17px; height: 17px; display: grid; place-items: center; background: #171d23; color: #e2ebf1; font-size: 10px; border-radius: 3px; }
.dg-player-portrait { width: 50px; height: 54px; }
.dg-player-status { width: 135px; min-width: 0; }
.dg-player-status strong { display: block; font-size: 12px; }
.dg-player-status .dg-health i { background: #85dfac; }
.dg-turn-status { margin-left: auto; text-align: right; min-width: 0; }
.dg-turn-status strong { display: block; margin-top: 5px; font-size: 11px; color: #c0cbd4; }
.dg-phase { display: inline-flex; align-items: center; gap: 7px; color: #b9ead4; white-space: nowrap; }
.dg-phase .dg-icon { width: 17px; height: 17px; }
.dg-phase.enemy-phase { color: #ffacb3; }
.dg-target.hostile { box-shadow: inset 3px 0 #ef788b; }
.dg-target.friendly { box-shadow: inset 3px 0 #7ccca4; }
.dg-target.armed { color: #ffe297; }
.dg-target .dg-health { max-width: 180px; margin: 4px 0; }
.dg-target .dg-health i { background: #ef788b; }
.dg-target.friendly .dg-health i { background: #7ccca4; }
.dg-elite { margin-left: 8px; color: #f3cf77; font-size: 10px; font-weight: 500; }
.dg-boss-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #ff9caa; background: #38272e; border-bottom: 1px solid #88535c; min-height: 49px; }
.dg-boss-bar > div { flex: 1; min-width: 0; }
.dg-boss-bar strong { display: block; font-size: 11px; }
.dg-boss-bar > span { font-size: 11px; }
.dg-boss-bar .dg-health { margin-bottom: 0; background: #1c1c24; }
.dg-boss-bar .dg-health i { background: #ef788b; }
.dg-boss-warning { color: #ffd58c; animation: dg-warning 1s ease-in-out infinite alternate; }
.dg-combat-stats { display: flex; gap: 18px; margin-top: 12px; color: #d8e2e9; font-size: 12px; }
.dg-combat-stats span { display: inline-flex; align-items: center; gap: 5px; }
.dg-combat-stats .dg-icon { width: 16px; height: 16px; }
.dg-log li:first-child { animation: dg-log-in .3s ease-out; }
@keyframes dg-warning { to { opacity: .55; } }
@keyframes dg-log-in { from { opacity: .3; } to { opacity: 1; } }
.dg-sidebar { min-width: 0; }
.dg-side-heading { display: flex; justify-content: space-between; align-items: center; color: var(--text); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.dg-side-heading span { color: var(--dg-muted); font-weight: 400; font-size: 10px; }
.dg-mission { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.dg-mission strong { display: block; font-size: 13px; margin: 5px 0 10px; line-height: 1.5; }
.dg-mission small { display: block; font-size: 10px; margin-top: 6px; color: var(--dg-muted); }
.dg-xp { height: 5px; background: #2e463b; border-radius: 2px; overflow: hidden; }
.dg-xp i { display: block; height: 100%; background: #79bfdb; }
.dg-equipment { padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.dg-equipment > div:nth-child(2) { display: flex; flex-wrap: wrap; gap: 4px; min-height: 35px; }
.dg-equipment .dg-sprite { width: 34px; height: 34px; }
.dg-equipment small { color: var(--dg-muted); font-size: 10px; display: block; margin-top: 8px; }
.dg-log { padding-top: 16px; }
.dg-log ol { margin: 8px 0 0; padding: 0; list-style: none; }
.dg-log li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.dg-log li:first-child { color: #e8f4ea; }
.dg-camp { background: var(--bg-soft); padding: 32px; min-height: 580px; }
.dg-camp-title { display: flex; gap: 22px; align-items: center; max-width: 920px; margin: 0 auto 25px; }
.dg-camp-hero { width: 130px; height: 130px; }
.dg-camp-title h1 { font-size: 28px; margin: 5px 0 10px; }
.dg-camp-title p { color: var(--dg-muted); }
.dg-camp-title .timer { margin-left: auto; }
.dg-upgrades { max-width: 920px; margin: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dg-upgrade { border: 2px solid #414754; box-shadow: 0 3px 0 #0e0f13; background: var(--surface-2); padding: 21px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 240px; }
.dg-upgrade .dg-sprite { width: 110px; height: 110px; }
.dg-upgrade strong { font-size: 17px; }
.dg-upgrade span:not(.dg-sprite) { color: var(--dg-muted); font-size: 13px; }
.dg-upgrade.chosen, .dg-upgrade:hover:not(:disabled) { border-color: var(--dg-gold); background: #302e28; }
.dg-camp > .dg-roster { max-width: 920px; margin: 28px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dg-camp-progress { text-align: center; margin-top: 22px; color: var(--dg-muted); }
.dg-results { max-width: 1100px; }
.dg-result-summary { position: relative; padding: 44px 32px; min-height: 310px; isolation: isolate; overflow: hidden; }
.dg-result-summary > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dg-result-summary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #121419ed, #121419c9); z-index: -1; }
.dg-result-summary h1 { font-size: 32px; margin: 10px 0; }
.dg-result-summary p { color: #bacfc0; }
.dg-result-stats { display: flex; gap: 38px; margin-top: 32px; flex-wrap: wrap; }
.dg-result-stats span { display: grid; color: #c6d7ca; font-size: 12px; }
.dg-result-stats strong { font-size: 29px; color: #f6d176; }
.dg-result-team { padding: 22px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.dg-result-team article { display: flex; gap: 18px; align-items: center; padding: 16px; border-bottom: 1px solid #3d5143; }
.dg-result-team .dg-sprite { width: 75px; height: 75px; }
.dg-result-team h2 { font-size: 18px; overflow-wrap: anywhere; }
.dg-result-team p { color: #97c5aa; font-size: 12px; margin: 5px 0; }
.dg-result-team small { color: var(--muted); font-size: 11px; }
.dg-results .result-actions { justify-content: flex-start; }
@media (max-width: 1050px) {
  .dg-layout { grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; }
  .dg-expedition { padding: 16px; }
  .dg-classes { gap: 10px; }
  .dg-class { padding: 12px; }
  .dg-class-art { width: 145px; height: 145px; }
  .dg-class h2 { font-size: 18px; }
  .dg-class-stats { gap: 9px; }
  .main-nav { gap: 0; }
}
@media (max-width: 760px) {
  .main-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .main-nav a { flex: none; }
  .brand { flex: none; }
  .dg-selection { padding: 22px 15px; }
  .dg-selection-title h1 { font-size: 25px; padding: 0 35px; }
  .dg-selection-title .timer { top: -10px; right: -5px; }
  .dg-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-class-art { width: 130px; height: 130px; }
  .dg-class p { font-size: 11px; min-height: 57px; }
  .dg-selection > .dg-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dg-expedition { padding: 12px; }
  .dg-floorbar { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .dg-floorbar h1 { font-size: 21px; }
  .dg-resources { gap: 18px; font-size: 11px; flex-wrap: wrap; }
  .dg-sidebar > .dg-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dg-map-wrap, .dg-playfield:has(.dg-boss-bar) .dg-map-wrap { aspect-ratio: 11/7; max-height: none; min-height: 0; }
  .dg-mobile-pad { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .dg-mobile-pad button { width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface-3); border: 2px solid #485363; box-shadow: 0 2px 0 #0e0f13; border-radius: 8px; }
  .dg-mobile-pad button:disabled { opacity: .3; }
  .dg-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dg-controls { padding: 10px 8px; }
  .dg-action { padding: 7px 4px; min-height: 76px; }
  .dg-action .dg-action-label { font-size: 10px; min-height: 25px; }
  .dg-action-glyph { width: 29px; height: 29px; }
  .dg-action-glyph .dg-icon { width: 26px; height: 26px; }
  .dg-action-status { font-size: 11px; gap: 6px; }
  .dg-ap { gap: 3px; }
  .dg-ap i { width: 19px; height: 19px; }
  .dg-player-status { width: 100px; }
  .dg-turn-status strong { font-size: 10px; max-width: 140px; }
  .dg-player-portrait { width: 42px; height: 48px; }
  .dg-camp { padding: 22px 14px; }
  .dg-camp-title { gap: 10px; }
  .dg-camp-hero { width: 68px; height: 68px; }
  .dg-camp-title h1 { font-size: 20px; }
  .dg-camp-title p { font-size: 11px; }
  .dg-upgrades { gap: 8px; }
  .dg-upgrade { padding: 12px 7px; min-height: 210px; }
  .dg-upgrade .dg-sprite { width: 74px; height: 74px; }
  .dg-upgrade strong { font-size: 12px; overflow-wrap: anywhere; }
  .dg-upgrade span:not(.dg-sprite) { font-size: 10px; }
  .dg-camp > .dg-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-result-summary { padding: 28px 20px; }
  .dg-result-summary h1 { font-size: 26px; }
  .dg-result-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .dg-result-team { grid-template-columns: minmax(0, 1fr); }
  .dg-result-team article { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .mini-dungeon *, .mini-dungeon *::before, .mini-dungeon *::after { animation: none !important; transition: none !important; } .dg-action:hover:not(:disabled) { transform: none; } }
@media (max-width: 640px) { .main-nav a:not(.active):not([data-nav='home']):not([data-nav='dungeon']) { display: none; } }