* { box-sizing: border-box; }
:root { color-scheme: dark; --gold: #e4c488; --ink: #0e181c; --muted: #96a89c; }
html { background: var(--ink); }
body {
    margin: 0;
    min-height: 100svh;
    color: #f3e8cd;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
    background: radial-gradient(ellipse at 50% 18%, #35534a 0, #1b3230 38%, #0e1b20 78%);
}
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #f5d99b; outline-offset: 4px; }
button:disabled { opacity: .4; cursor: default; }
[hidden] { display: none !important; }
.dungeon-shell {
    width: min(100%, 450px);
    margin: auto;
    padding: 0 12px max(14px, env(safe-area-inset-bottom));
    user-select: none;
    -webkit-user-select: none;
}
.hud { position: absolute; z-index: 2; top: 6px; left: 6px; right: 6px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 700; pointer-events: none; }
.hud-status { flex: 1; min-width: 0; display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 8px; padding: 5px 7px; border: 1px solid #c9bc8544; border-radius: 5px; background: #102328e8; }
.goal { grid-column: 1 / -1; color: #edd4a1; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.life { flex: 1; color: #f09291; font-family: monospace; font-size: 16px; letter-spacing: 0; white-space: nowrap; text-shadow: 0 2px #653d48, 0 0 14px #e8757d18; }
.treasure { display: flex; align-items: center; gap: 7px; padding: 0; background: transparent; border-radius: 5px; border: 1px solid #c9bc851c; font-variant-numeric: tabular-nums; color: #edd4a1; letter-spacing: 1px; }
.treasure svg { width: 18px; height: 16px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #0b171a); }
.hud button { pointer-events: auto; flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; color: #b5c2ad; background: #152c2c; border: 1px solid #81967a33; border-radius: 8px; font-size: 20px; box-shadow: inset 0 1px #c5d3a510; }
.arena {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 5px solid #354844;
    border-radius: 9px;
    background: #111f25;
    box-shadow: 0 0 0 1px #84917a, 0 0 0 3px #142323, 0 0 0 4px #d8c18c33, 0 18px 32px #020b0d70, inset 0 0 0 1px #0a161b;
}
.arena::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: 1px solid #e9e0b21f;
    box-shadow: inset 0 0 18px #06141655;
}
canvas { display: block; width: 100%; height: auto; aspect-ratio: 240/360; image-rendering: pixelated; }
.overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 38%, #314a3cbb, #0d2427ed 72%); }
.panel { position: relative; width: 88%; max-width: 310px; padding: 26px 14px; text-align: center; }
.panel::before, .panel::after { content: ""; display: block; width: 62px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, #d6bd7f99, transparent); }
.panel::after { margin-top: 24px; }
.panel-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 22px auto 20px;
    color: #ffe4a8;
    font-size: 32px;
    background: radial-gradient(circle, #e1bd6b22, transparent 72%);
    border: 1px solid #c7b78036;
    border-radius: 17px 2px;
    box-shadow: inset 0 0 0 4px #0f252955, 0 0 32px #e7c77812;
    text-shadow: 0 2px #67563e, 0 0 16px #f4d18a55;
}
.panel h1 { margin: 0 0 12px; color: #ffedc4; font-size: clamp(20px, 5.8vw, 27px); font-weight: 800; letter-spacing: 2px; text-shadow: 0 3px #0e1b20; }
.panel p { margin: 0 0 26px; color: #a5baaa; font-size: 11px; line-height: 1.8; letter-spacing: 1px; }
.panel p:empty { display: none; }
.start {
    min-width: 164px;
    min-height: 48px;
    padding: 11px 22px;
    border: 1px solid #f6dca1;
    border-radius: 3px;
    color: #354033;
    background: linear-gradient(#f0d8a3, #d6b67b);
    box-shadow: inset 0 2px #fff0c2, inset 0 -3px #9f8252, 0 4px 0 #0b1a1d, 0 7px 18px #0003;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 3px;
}
.start::after { content: "›"; display: inline-block; margin-left: 12px; font-size: 18px; line-height: 10px; opacity: .65; }
.start:active { transform: translateY(2px); box-shadow: inset 0 2px #fff0c2, inset 0 -1px #9f8252, 0 2px 0 #0b1a1d; }
/* Only the actual controls intercept touches; the space between them stays clear. */
.controls { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 14px; pointer-events: none; }
.controls .pad, .controls .attack { pointer-events: auto; opacity: .68; }
.controls .pad:active, .controls .attack.is-held { opacity: 1; }
.controls .pad { background: radial-gradient(circle, #15282870 0 48%, #29403a88 50% 64%, #152a2980 66%); }
.controls .attack { background: radial-gradient(circle at 40% 25%, #a18b5caa, #695a4099 70%); }
.pad {
    position: relative;
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    border: 1px solid #829d8655;
    border-radius: 50%;
    background: radial-gradient(circle, #152828 0 48%, #29403a 50% 64%, #152a29 66%);
    box-shadow: 0 5px 0 #091719, 0 8px 16px #0003, inset 0 1px #bed1a92b;
    touch-action: none;
}
.pad-cross::before, .pad-cross::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 2px; background: #9fb69b20; }
.pad-cross::before { width: 70px; height: 20px; }
.pad-cross::after { width: 20px; height: 70px; }
.stick { position: absolute; left: calc(50% - 19px); top: calc(50% - 19px); width: 38px; height: 38px; border: 1px solid #acbba0; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #91a58e, #657f72 70%); box-shadow: inset 0 2px #d6dfb866, 0 4px 0 #0d2222, 0 6px 8px #0004; pointer-events: none; }
.attack {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 86px;
    height: 86px;
    border: 2px solid #d7bc83;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 25%, #a18b5c, #695a40 70%);
    box-shadow: 0 5px 0 #182420, 0 6px 0 1px #a3906170, 0 10px 20px #0004, inset 0 0 0 5px #2b382744, inset 0 2px #f5dfa655;
    touch-action: none;
}
.attack svg { width: 38px; height: 38px; filter: drop-shadow(0 3px 0 #3c4233); }
.attack.is-held { transform: translateY(3px); background: radial-gradient(circle at 40% 25%, #c8a669, #897149 70%); box-shadow: 0 2px 0 #182420, 0 3px 0 1px #a3906170, inset 0 0 0 5px #2b382744; }
.boss-hud { position: absolute; z-index: 2; left: 22%; right: 22%; bottom: 140px; height: 11px; padding: 1px; border: 1px solid #d6bb85; background: #1c2630; box-shadow: 0 2px 0 #09171c; pointer-events: none; }
.boss-hud::before { content: "♛"; position: absolute; right: calc(100% + 5px); top: -6px; color: #f3cf82; font-size: 17px; }
.boss-hud span { display: block; height: 100%; background: linear-gradient(#ff9b9b, #c75273); }
.arena .game-comment--dungeon { top: calc(100% + 6px); left: 2px; right: 2px; font-size: 11px; }
.reward { position: absolute; z-index: 2; top: calc(100% + 6px); left: 2px; right: 2px; margin: 0; padding: 7px 4px; border: 1px solid #edce81; border-radius: 4px; background: #25392ef2; color: #ffe7aa; text-align: center; font-size: 12px; font-weight: 700; pointer-events: none; }
@media (max-height: 760px) {
    .dungeon-shell { max-width: max(260px, min(450px, calc((100svh - 110px) * .666667 + 34px))); }
    .boss-hud { bottom: 124px; }
    .controls { padding: 0 12px 12px; }
    .pad { width: 96px; height: 96px; }
    .attack { width: 76px; height: 76px; }
    .panel { padding: 16px 10px; }
    .panel-icon { width: 52px; height: 52px; margin: 16px auto; font-size: 27px; }
    .panel::after { margin-top: 16px; }
    .panel p { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .start, .attack { transition: none; }
}

/* Portraits lead; the small pixel figure shows the character used in the dungeon. */
.cast-picker { display: flex; justify-content: center; align-items: stretch; gap: 8px; margin: 6px 0 24px; }
.cast-choice {
    --cast-tone: #b9dbbd;
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 90px;
    padding: 8px 3px 12px;
    color: #b5c3b7;
    background: linear-gradient(155deg, #314840, #152b2b 76%);
    border: 1px solid #7c927559;
    border-radius: 7px 7px 3px 3px;
    box-shadow: inset 0 1px #e4e5b70d, 0 4px 0 #091d1e, 0 8px 12px #04151833;
    transition: border-color .16s, background-color .16s, transform .16s;
}
#cast-1248 { --cast-tone: #86c9e6; }
#cast-1024 { --cast-tone: #e9b47e; }
#cast-1208 { --cast-tone: #c9b5ee; }
.cast-choice[aria-pressed="true"] {
    z-index: 1;
    color: #fff0c9;
    background: linear-gradient(155deg, #686d48, #2d463b 62%, #263d34);
    border-color: #e6cb8d;
    box-shadow: inset 0 0 0 1px #ead49926, 0 4px 0 #091d1e, 0 0 20px #e6cb8d10;
    transform: translateY(-4px);
}
.cast-choice[aria-pressed="true"]::after { content: ""; position: absolute; bottom: -4px; left: calc(50% - 3px); width: 6px; height: 6px; background: #f5dba3; transform: rotate(45deg); box-shadow: 0 0 6px #efcb8480; }
.cast-art { position: relative; display: block; height: 80px; margin-bottom: 8px; isolation: isolate; }
.cast-art::before { content: ""; position: absolute; inset: 0 0 8px; z-index: -1; background: radial-gradient(ellipse, color-mix(in srgb, var(--cast-tone) 20%, transparent), transparent 70%); }
.cast-art::after { content: ""; position: absolute; bottom: 0; left: 12%; right: 12%; height: 9px; z-index: -1; background: #0c2226; border-top: 2px solid #718477; border-bottom: 2px solid #071b20; box-shadow: 0 3px #06191b66; }
.cast-art img { display: block; width: 54px; height: 54px; margin: 0 auto; object-fit: contain; filter: saturate(.75) brightness(.9); }
.cast-choice[aria-pressed="true"] img { filter: saturate(1.05) brightness(1.08) drop-shadow(0 2px 5px #08191d55); }
.cast-sprite { position: absolute; right: 7px; bottom: 3px; width: 32px; height: 40px; aspect-ratio: 16/20; image-rendering: pixelated; filter: drop-shadow(1px 1px #0a2024) drop-shadow(-1px 0 #0a2024); }
.cast-name { display: block; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.panel:has(.cast-picker:not([hidden])) { width: 94%; max-width: 330px; padding: 18px 10px; }
.panel:has(.cast-picker:not([hidden])) .panel-icon,
.panel:has(.cast-picker:not([hidden]))::before,
.panel:has(.cast-picker:not([hidden]))::after { display: none; }
.panel:has(.cast-picker:not([hidden])) h1 { margin-bottom: 10px; color: #fff0cf; font-size: clamp(21px, 6.2vw, 27px); letter-spacing: 2px; }
.panel:has(.cast-picker:not([hidden])) p { margin-bottom: 22px; }
.panel:has(.cast-picker:not([hidden])) .start { width: calc(100% - 20px); max-width: 254px; }
@media (max-height: 760px) {
    .cast-picker { gap: 6px; margin-bottom: 19px; }
    .cast-choice { padding: 6px 2px 10px; }
    .cast-art { height: 67px; margin-bottom: 7px; }
    .cast-art img { width: 46px; height: 46px; }
    .cast-sprite { right: 5px; width: 28px; height: 35px; }
    .panel:has(.cast-picker:not([hidden])) { padding: 12px 8px; }
    .panel:has(.cast-picker:not([hidden])) h1 { font-size: 21px; }
    .panel:has(.cast-picker:not([hidden])) p { margin-bottom: 17px; }
}
@media (prefers-reduced-motion: reduce) { .cast-choice { transition: none; } }

.attack { position: relative; }
/* Text stays legible at the smaller touch-control size. */
.sword-level { position: absolute; bottom: 8px; padding: 2px 5px; border-radius: 3px; color: #fff0c9; background: #192820e8; font-size: 11px; font-weight: 800; line-height: 1.2; pointer-events: none; }
.attack[data-level="0"] .sword-level { color: #c7d0bd; }
.attack.is-upgraded { border-color: #fff0b8; box-shadow: 0 0 0 3px #e8ca7a66, 0 0 16px #e8ca7a55; }
.attack svg { margin-top: -8px; }