/* Hallmark · app screen · atmospheric · theme: deep teal arcade · signature: luminous enemy arena · v2.0.0 */
/* Critique: keep the battlefield dominant and use quiet surfaces for rank and loadout. */
:root {
  color-scheme: dark;
  --bg: #101425;
  --panel: #192039;
  --raised: #252e49;
  --edge: #4c5979;
  --field: #202941;
  --ink: #fff3d8;
  --muted: #b7c2d9;
  --accent: #ffd07a;
  --accent-ink: #30203a;
  --danger: #ff6574;
  --shade: #101425ed;
  --font: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--edge) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); }
h1, h2, p { margin: 0; }
h1, h2 { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
a { color: inherit; }
button, input { font: inherit; }
button { min-height: 44px; border: 1px solid var(--edge); border-radius: 9px; background: var(--raised); color: var(--ink); padding: 8px 14px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
.primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.shell { width: min(100% - 48px, 1260px); margin-inline: auto; }
.mast { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 750; }
.brand span { width: 18px; height: 18px; border: 3px solid var(--accent); transform: rotate(45deg); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.layout { max-width: 1000px; margin-inline: auto; padding-bottom: 24px; }
.battle, .rank { border: 1px solid var(--edge); border-radius: 16px; background: var(--panel); min-width: 0; }
.battle { overflow: clip; }
.hud { display: grid; grid-template-columns: 1fr minmax(130px, 2fr) 1fr; align-items: center; padding: 12px 20px; gap: 12px; font-variant-numeric: tabular-nums; }
.hud > div:last-child { text-align: right; }
.hud span { display: block; font-size: 12px; color: var(--muted); }
.hud strong { display: block; font-size: 26px; line-height: 1.15; }
.meters { display: grid; gap: 4px; }
.meter-line { display: grid; grid-template-columns: 84px 1fr; gap: 8px; align-items: center; }
progress { width: 100%; height: 6px; accent-color: var(--accent); }
.health-meter { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 22px; overflow: hidden; border: 1px solid #a34b61; border-radius: 5px; background: #301e35; }
.health-meter #hp { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; }
#hp::-webkit-progress-bar { background: transparent; }
#hp::-webkit-progress-value { background: linear-gradient(180deg, #e25268, #a12d4c); }
#hp::-moz-progress-bar { background: linear-gradient(180deg, #e25268, #a12d4c); }
.health-meter svg { position: absolute; left: 5px; width: 13px; height: 13px; fill: #ffe4e9; }
.health-meter #hp-label { color: #fff; font-size: 12px; font-weight: 750; text-shadow: 0 1px 2px #1b0b19, 0 0 3px #1b0b19; }
.stage { position: relative; isolation: isolate; background: var(--field); }
#battle-event { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 5px; background: var(--shade); color: var(--accent); font-size: 12px; text-align: center; pointer-events: none; }
#battle-combo { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border: 1px solid #9cdbff; border-radius: 5px; background: var(--shade); color: #d8f5ff; font-size: 12px; font-weight: 750; white-space: nowrap; pointer-events: none; }
#battle-event:not([hidden]) + #battle-combo { top: 32px; }
#beam { position: absolute; right: 8px; bottom: 54px; z-index: 2; padding: 5px 9px; color: #d8f5ff; background: #202941e8; border-color: #9cdbff; font-size: 12px; touch-action: manipulation; user-select: none; }
#beam span { display: block; font-size: 10px; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 12 / 7; touch-action: none; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto; text-align: center; }
.overlay > div { margin: auto; }
.lobby { background: linear-gradient(90deg, #10142522, #101425d4 34%, #101425d4 66%, #10142522); }
.lobby h1 { font-size: clamp(36px, 7vw, 82px); line-height: 1.02; font-weight: 900; letter-spacing: .04em; text-shadow: 3px 4px #a93349; }
.lobby .episode { margin: 0 0 10px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .18em; }
.overlay p { color: var(--muted); margin-block: 8px 16px; }
.lobby .tools { justify-content: center; }
.shade { background: var(--shade); }
.shade h2 { font-size: clamp(20px, 4vw, 34px); margin-bottom: 8px; }
.shade button + button { margin-left: 4px; }
.upgrade-inner { width: min(100%, 720px); }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.game-controls-active, .game-controls-active * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.choices button { touch-action: manipulation; }
.choices button { text-align: left; padding: 12px; border-top: 3px solid var(--accent); background: linear-gradient(155deg, #34415d, var(--raised) 65%); }
.choices strong, .choices small { display: block; }
.choices small { color: var(--muted); font-size: 13px; }
.choices .mark { color: var(--accent); font-size: 22px; }
.controls { padding: 12px 16px; color: var(--muted); font-size: 13px; }
.rank { max-width: 620px; margin-inline: auto; padding: 16px; }
.rank header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rank h1 { font-size: 22px; }
.rank time, .subtle, #empty { color: var(--muted); font-size: 13px; }
.rank-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--accent); }
.in-battle .mast .rank-link, .viewing-rank .mast .tools, body:not(.in-battle) #pause { display: none; }
#leaders { padding: 0; list-style: none; margin: 10px 0; }
#leaders li { display: flex; justify-content: space-between; gap: 8px; padding-block: 8px; border-bottom: 1px solid var(--edge); }
#weapons { position: absolute; inset: auto 8px 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 5px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
#weapons li { display: flex; align-items: center; gap: 4px; padding: 1px 5px; border-radius: 4px; background: var(--shade); color: var(--muted); font-size: 11px; }
#weapons strong { color: var(--accent); }
#leaders li span:first-child { min-width: 0; overflow-wrap: anywhere; }
#leaders li strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.subtle { margin-top: 12px; }
#entry { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
input { color: var(--ink); background: var(--raised); border: 1px solid var(--muted); border-radius: 8px; min-height: 44px; max-width: 140px; padding: 8px; caret-color: var(--accent); }
.stick { position: absolute; z-index: 1; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--accent); opacity: .35; pointer-events: none; }
@media (max-width: 540px) {
  body:not(.in-battle) canvas { min-height: 224px; object-fit: cover; }
  .shell { width: calc(100% - 20px); }
  .mast { min-height: 60px; }
  .hud { padding: 8px; gap: 8px; }
  .hud strong { font-size: 21px; }
  .meter-line { grid-template-columns: 72px 1fr; gap: 4px; }
  .choices { gap: 4px; }
  .choices button { padding: 6px; }
  .choices small { font-size: 11px; }
  .choices .mark { display: none; }
}
@media (pointer: coarse), (max-width: 540px) {
  body.in-battle { overflow: hidden; overscroll-behavior: none; }
  .in-battle .mast {
    position: fixed; inset: 0 0 auto; width: 100%; height: calc(54px + env(safe-area-inset-top));
    min-height: 0; padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  }
  .in-battle .layout {
    position: fixed; inset: calc(54px + env(safe-area-inset-top)) 0 auto;
    height: calc(100vh - 54px - env(safe-area-inset-top));
    height: calc(100dvh - 54px - env(safe-area-inset-top));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    max-width: none; background: var(--field);
  }
  .in-battle .battle { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 0; border-radius: 0; }
  .in-battle .stage { min-height: 0; }
  .in-battle canvas { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
  .in-battle .controls { display: none; }
  body.in-battle.viewing-rank { overflow: auto; padding-top: calc(54px + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }