/* Brass instruments, enamel controls and legible combat states. */
:root { --brass-light:#f0d69b; --brass-mid:#b18b50; --ink-deep:#081321; --enamel:#1c3045; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid #d0f1ff; outline-offset:4px; }
.utility { min-width:44px; min-height:44px; border-color:#ae93616e; color:#e4d6b5; background:linear-gradient(165deg,#253648e8,#111d2a 58%,#0b1420); box-shadow:inset 0 1px #e8d5a52b,inset 0 0 0 3px #050c143d,0 3px 0 #050c15,0 5px 12px #0004; transition:background .16s,border-color .16s,translate .12s,box-shadow .12s; }
.utility[aria-pressed=true] { color:#fff0bf; border-color:#e9c783; background:linear-gradient(145deg,#514630,#1d2937); box-shadow:inset 0 0 12px #e4ba4e13,0 0 10px #d6ad4633; }
.utility svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.sound-waves,#sound[aria-pressed=true] .sound-muted { display:none; }
#sound[aria-pressed=true] .sound-waves { display:initial; }
:is(.utility,.action-skill,.primary-button,.archive-close,.reward-card):active:not(:disabled) { translate:0 2px; filter:brightness(.94); box-shadow:inset 0 3px 7px #03081266,0 1px 0 #070d17; }
.primary-button { border-color:#f3d594; background:linear-gradient(180deg,#f6e2b2 0%,#d8b97b 42%,#c6a365 48%,#b48a4c 100%); box-shadow:inset 0 1px #fff4d6,inset 0 0 0 3px #77572a55,0 3px 0 #584224,0 8px 24px #0006; color:#231b12; font-weight:700; text-shadow:0 1px #ffe8b25c; transition:filter .15s,translate .12s,box-shadow .15s; }
.primary-button::after { content:""; position:absolute; inset:5px; border:1px solid #76552c69; pointer-events:none; }
.primary-button:hover:not(:disabled) { filter:brightness(1.06); box-shadow:inset 0 1px #fff4d6,inset 0 0 0 3px #77572a55,0 3px 0 #584224,0 8px 26px #d4b26426; }
.primary-button:disabled { opacity:1; color:#94a0ae; border-color:#596577; text-shadow:none; background:linear-gradient(180deg,#293748,#1d2938); box-shadow:inset 0 1px #d0dbea13,inset 0 0 0 3px #07111d44; }
.primary-button:disabled::after { border-color:#91a3b51b; }
.sanctuary-actions { gap:9px; }
.sanctuary-actions button,.sanctuary-actions button:first-child { position:relative; padding:12px 15px; border:1px solid #c0a16b66; border-radius:2px; background:linear-gradient(110deg,#203348eb,#111e2bd9 75%); box-shadow:inset 0 1px #e4d3ac21,inset 0 0 0 4px #070e172e,0 4px 12px #0003; transition:border-color .18s,background .18s,translate .12s; }
.sanctuary-actions button::after { content:""; position:absolute; inset:5px; border:1px solid #d9b97817; pointer-events:none; }
.sanctuary-actions button:hover { border-color:#efcf8cb3; background:linear-gradient(110deg,#304255ed,#172434e8 75%); }
.sanctuary-actions button:active { translate:0 2px; box-shadow:inset 0 2px 8px #03081388; }
.sanctuary-actions b { color:#f2e1bd; }
.sanctuary-actions small { color:#b2c0cf; }
.sanctuary-glyph { display:grid; place-items:center; width:34px; flex:0 0 34px; color:#efcf92; filter:drop-shadow(0 0 5px #d7b16435); }
.sanctuary-glyph svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.15; stroke-linejoin:round; }
.stage-heading { border-color:#c9ae7782; }
.stage-heading > span:last-child { color:#c0cbd5; }
.stage-options { padding-inline:1px 5px; gap:4px; }
.stage-card { border:1px solid #a5b4c51c; padding-inline:10px; background:linear-gradient(110deg,#17263870,#07132035); transition:border-color .18s,background .18s,translate .12s; }
.stage-card::before { inset:0; border-left-width:3px; background:linear-gradient(90deg,color-mix(in srgb,var(--stage) 18%,transparent),transparent 85%); }
.stage-card:hover { border-color:#bda97a69; background:#2233469e; }
.stage-card[aria-pressed=true] { border-color:color-mix(in srgb,var(--stage) 58%,#a78d58); background:linear-gradient(110deg,#26364bdb,#132031bd); box-shadow:inset 0 1px #f0dfb323,0 3px 12px #0003; }
.stage-card[aria-pressed=true] .stage-copy b { color:#fff0cf; }
.stage-copy b { color:#e2dccc; }
.stage-copy small { color:#b7c4d2; font-size:10px; }
.stage-description { color:#bfccda; }
.stage-symbol { filter:drop-shadow(0 0 5px color-mix(in srgb,var(--stage) 25%,transparent)); }
.stage-symbol svg { display:block; width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.departure .deck-summary p { color:#bac7d5; }
.contract-slot .collectible { box-shadow:0 0 0 1px #d5b67b5c,0 4px 10px #0008; }
.menu-bottom { text-shadow:0 1px 3px #000; }
/* These rules style the sanctuary as a location: a chart suspended over the real scene. */
body[data-phase=menu] .world-shade {
  background:linear-gradient(90deg,#070f1bea,#08122280 31%,#0812241c 57%,#07111a62),
    linear-gradient(0deg,#070d19f7,transparent 27%,transparent 76%,#07101aab);
}
.menu-screen > .stage-selection { grid-column:2/-1; max-width:780px; justify-self:end; }
.stage-selection .stage-heading { max-width:100%; padding:0 1px 6px; margin:0 10% 0 12%; border-bottom:1px solid #dec18545; text-shadow:0 1px 6px #000; }
.stage-selection .stage-heading .eyebrow { font-size:12px; }
#stage-options.stage-options {
  position:relative; display:block; height:clamp(208px,37dvh,410px); max-height:none; min-width:0;
  isolation:isolate; overflow:visible; margin:0; padding:0;
  background:radial-gradient(ellipse at 50% 51%,#080e1e80 12%,#0914244c 51%,transparent 72%);
}
.route-engraving { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; pointer-events:none; }
.route-engraving * { vector-effect:non-scaling-stroke; }
.route-orbit { stroke:#ddc6925c; stroke-width:.75; stroke-dasharray:1 4; }
.route-graticule { stroke:#9faac350; stroke-width:.65; stroke-dasharray:2 8; }
.route-compass { stroke:#d6bb853f; stroke-width:.7; fill:#ccab6e22; }
.route-star { fill:#e5ce9e; opacity:.6; }
.route-trail { stroke:#101731; stroke-width:5; opacity:.75; stroke-linejoin:round; }
.route-thread { stroke:#dec7a4c4; stroke-width:1; stroke-linejoin:round; stroke-dasharray:2 5; }
#stage-options .stage-card {
  position:absolute; z-index:1; left:var(--chart-x); top:var(--chart-y); transform:translate(-50%,-50%);
  display:grid; place-items:center; width:48px; min-width:48px; height:48px; min-height:48px;
  padding:0; gap:0; border:1px solid #9bb1ce63; border-radius:50%; background:#0b1426eb;
  box-shadow:0 0 0 3px #101a2668,0 2px 10px #040a12bd; transition:box-shadow .16s,border-color .16s,background .16s;
}
#stage-options .stage-card::before { content:none; }
#stage-options .stage-card:hover { border-color:var(--stage); background:#182641; }
#stage-options .stage-card:focus-visible { outline-offset:4px; z-index:2; }
#stage-options .stage-card[aria-pressed=true] { z-index:2; border-color:#f3d99c; background:#343253; box-shadow:0 0 0 4px #efcc8450,0 0 19px color-mix(in srgb,var(--stage) 70%,transparent); }
#stage-options .stage-symbol { display:grid; place-items:center; width:100%; height:100%; border:0; background:none; color:color-mix(in srgb,var(--stage) 76%,#fff1c9); }
#stage-options .stage-symbol svg { width:27px; height:27px; }
#stage-options .stage-copy { position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); pointer-events:none; white-space:nowrap; }
#stage-options .stage-copy b { color:#f0e6d0; font:600 clamp(10px,1.2vw,15px) var(--serif); letter-spacing:.05em; text-shadow:0 1px 2px #000,0 0 5px #020710,0 0 8px #020710; }
#stage-options .stage-eclipse .stage-copy { top:calc(100% + 3px); left:70%; }
#stage-options .stage-endless .stage-copy { top:auto; bottom:calc(100% + 4px); }
#stage-options .stage-index { position:absolute; top:-5px; left:-4px; border-radius:50%; min-width:15px; height:15px; padding-inline:2px; background:#0c1629; border:1px solid #d6b78480; font:9px/13px Georgia,serif; color:#e8cf9f; pointer-events:none; }
.route-note { position:relative; margin:0 8% 0 12%; border-top:1px solid #dec18552; min-height:58px; padding:7px 0 0 10px; text-shadow:0 2px 4px #000,0 0 8px #040910; }
.route-note::before { content:""; position:absolute; top:-3px; left:-2px; width:5px; height:5px; rotate:45deg; background:#d8b879; }
#stage-difficulty { color:#f6dda6; font:600 11px var(--serif); letter-spacing:.08em; }
.route-note .stage-description { color:#e0d9c8; min-height:0; margin:5px 0 0; line-height:1.55; font-size:11px; }
.sanctuary-actions button,.sanctuary-actions button:first-child { background:linear-gradient(90deg,#0c182888,#121f3214); border-width:0 0 1px; box-shadow:none; padding-inline:2px 14px; }
.sanctuary-actions button::after { display:none; }
.sanctuary-actions button:hover { background:linear-gradient(90deg,#35405d88,transparent); }
@media(max-width:1050px) and (min-width:701px) { .menu-screen > .stage-selection { grid-column:2; } }
@media(max-width:700px) and (orientation:portrait) {
  body[data-phase=menu] .world-shade { background:linear-gradient(180deg,#070e1cbd,#09142423 29%,#09142355 66%,#07101bed); }
  #menu-screen.menu-screen { gap:11px; padding-top:calc(62px + var(--safe-top)); }
  #menu-screen .menu-home { min-height:auto; gap:12px; }
  #menu-screen .menu-intro > p:last-child { display:none; }
  #menu-screen .title-crest { width:65px; height:33px; margin-bottom:0; }
  #menu-screen .title-subline { margin-bottom:2px; }
  #menu-screen .sanctuary-actions button { min-height:44px; }
  #menu-screen .sanctuary-actions small { display:none; }
  #menu-screen .stage-heading,.route-note { margin-inline:3%; }
  .route-note .stage-description { font-size:10px; }
  #stage-options.stage-options { height:228px; }
  #stage-options .stage-card { width:44px; min-width:44px; height:44px; min-height:44px; }
}
@media(orientation:landscape) and (max-height:600px) {
  #menu-screen.menu-screen { grid-template-columns:minmax(185px,.72fr) minmax(285px,1.3fr); grid-template-rows:auto auto auto; column-gap:25px; padding-top:calc(54px + var(--safe-top)); }
  #menu-screen .stage-selection { grid-column:2; }
  #stage-options.stage-options { height:156px; }
  #stage-options .stage-card { width:44px; min-width:44px; height:44px; min-height:44px; }
  #stage-options .stage-symbol svg { width:23px; height:23px; }
  .route-note { min-height:44px; }
  .route-note .stage-description { font-size:10px; }
}
.player-status { border:1px solid #ad905c6b; border-left:3px solid #d1b275; border-radius:2px; background:linear-gradient(105deg,#15283af5,#0b1928e6 90%); box-shadow:inset 0 1px #e7cc8b26,inset 0 0 0 4px #050c1436,0 5px 22px #0004; }
.player-heading { color:#f2e2c0; }
.shield-value { color:#c1e9ff; }
.vital-name { color:#c4d1dd; }
.vital strong { color:#ebf2fa; }
.meter { height:7px; border:1px solid #050d1b; background:#06101d; box-shadow:0 0 0 1px #8a9db14a,inset 0 2px 4px #000b; }
.meter i { position:relative; }
.meter i::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#fff9,transparent 36%,#0002 70%); }
.meter.health i { background:linear-gradient(90deg,#ae3e54,#f38591); box-shadow:0 0 8px #f2697c44; }
.meter.mana i { background:linear-gradient(90deg,#427acb,#90d7ff); box-shadow:0 0 7px #7ac3ff44; }
.boss-status .meter { height:8px; border-color:#b7a06d; }
.boss-status .meter i { background:linear-gradient(90deg,#a74a71,#f09baf); }
.wave-status { padding:9px 20px 8px; background:radial-gradient(ellipse at 50% 0,#0b172ce6,transparent 75%); }
.wave-status .eyebrow { color:#e0cc9e; }
.wave-status h2 { color:#fff0d2; }
.wave-status p { color:#c0ccd9; }
.run-status { color:#bfcbd9; text-shadow:0 1px 4px #000; }
.run-status strong { color:#f0d38d; }
.combat-card-slot .skill-card { border:1px solid color-mix(in srgb,var(--element) 75%,#dfc896); border-radius:4px; box-shadow:inset 0 0 0 2px #e5cc962e,0 0 0 2px #0b1623,0 0 0 3px #9e86534f,0 7px 16px #000b; }
.skill-card::after { background:linear-gradient(180deg,#fff5,transparent 8%,transparent 75%,#07101b44); }
.skill-card:hover:not(:disabled) { transform:translateY(-4px); }
.skill-card:disabled:not(.no-mana) { opacity:1; }
.skill-card.no-mana { border-color:#697890; }
.skill-shade { background:linear-gradient(180deg,#071020df,#091424bd); border-bottom:1px solid #d1e5ffb0; box-shadow:0 2px 9px #b4d8ff5c; }
.cooldown-outline { position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px); z-index:5; overflow:visible; pointer-events:none; }
.cooldown-outline rect { fill:none; stroke:var(--element); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; filter:drop-shadow(0 0 2px var(--element)); }
.combat-card-hint { color:#edf2f8; font-variant-numeric:tabular-nums; }
.combat-card-hint > span { padding:2px 3px; border-radius:2px; background:#0c1b2be8; box-shadow:inset 0 1px #fff1; color:#e3efff; }
.skill-state { color:#dfd8c5; font-size:10px; letter-spacing:.04em; text-shadow:0 1px 4px #000; }
.action-skill { position:relative; border-color:#b6a071a6; color:#eee2c7; background:linear-gradient(150deg,#2a3c50f2,#15253af5 48%,#0b1727fa); box-shadow:inset 0 1px #f0d8a535,inset 0 0 0 3px #0a142742,0 3px 0 #050d18,0 5px 18px #0006; }
.action-skill::after { content:""; position:absolute; inset:5px; border:1px solid #cbb68121; pointer-events:none; }
.action-skill small { color:#c1d4e5; }
.action-skill:disabled { border-color:#5b6d85; color:#9aabbd; background:linear-gradient(150deg,#1f2b3d,#101b2c); }
.action-skill:disabled .action-symbol { color:#6e8fa9; }
.action-symbol { display:grid; place-items:center; width:38px; height:35px; color:#bce9ff; filter:drop-shadow(0 0 5px #89d4ff44); }
.action-symbol svg { width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.nova-orbit { color:#ffe8ad; background:radial-gradient(circle,#8f703345,#182738 68%); border-color:#d5b77a96; box-shadow:inset 0 0 0 3px #d5b77a16; }
.nova-action.ready { border-color:#ffe3a5; color:#fff0ce; box-shadow:inset 0 0 16px #e7bd5b25,0 0 0 1px #d2ad6c77,0 0 22px #e2b45846; }
.skill-card.skill-ready { border-color:#fff5cd; box-shadow:0 0 0 2px #f3df9cbb,0 0 23px color-mix(in srgb,var(--element) 65%,transparent); }
.combat-card-slot .skill-card.cast-flash,.action-skill.cast-flash { border-color:#fff9dc; box-shadow:0 0 0 2px #fff1bcbb,0 0 30px color-mix(in srgb,var(--element,#b9d8ff) 65%,transparent); }
.reward-panel,.pause-panel,.result-panel { border-color:#d2b47c96; background:linear-gradient(135deg,#263b50,#15263b 55%,#102033); box-shadow:inset 0 0 0 5px #080f1c88,inset 0 0 0 6px #e5c48714,0 28px 90px #0009; }
.reward-card { border-color:#aa91667d; background:linear-gradient(160deg,#30445b,#192b41); box-shadow:inset 0 1px #e7d1a329,0 3px 0 #0a1422; }
.reward-card:hover { border-color:#f0d49a; box-shadow:inset 0 1px #f7e7bb55,0 7px 21px #0005; }
.reward-card p,.panel-description,.help-tips { color:#c7d4e2; }
.reward-card small { color:#aebfd2; }
.text-button { color:#bfcee0; }
.archive-close,.collection-pagination button,.collection-filters select { background:linear-gradient(160deg,#27384b,#132234 75%); border-color:#baa06d75; box-shadow:inset 0 1px #dfcea52b,inset 0 0 0 3px #07111c36,0 2px 0 #060d16; }
.archive-close:hover,.collection-pagination button:hover:not(:disabled),.collection-filters select:focus { border-color:#e1c68d; color:#f2dfb8; }
.collection-filters label,.collection-count { color:#becbda; }
.collection-tabs button:hover { color:#f3e5c9; background:linear-gradient(0deg,#c5a96b0d,transparent); }
.collection-tabs button[aria-selected=true] { color:#ffe8b3; text-shadow:0 0 12px #e4ba6326; }
.wish-button { position:relative; color:#f5e6c8; border-color:#cbb27c99; background:linear-gradient(150deg,#304359,#18293d 55%,#132134); box-shadow:inset 0 1px #efe1bd3d,inset 0 0 0 4px #070e183d,0 3px 0 #08101b,0 7px 17px #0005; transition:filter .15s,translate .12s,box-shadow .15s; }
.wish-button::after { content:""; pointer-events:none; position:absolute; inset:5px; border:1px solid #d9bc7d30; }
.wish-button span { color:#c6d3e4; }
.wish-button.featured { color:#281e12; border-color:#f3d594; background:linear-gradient(180deg,#f1dfb2,#d5b476 45%,#b68c4f); box-shadow:inset 0 1px #fff5d8,inset 0 0 0 3px #75532d44,0 3px 0 #594025,0 7px 20px #0005; }
.wish-button.featured::after { border-color:#75542666; }
.wish-button.featured span { color:#493b25; }
.wish-button:active:not(:disabled) { translate:0 2px; box-shadow:inset 0 3px 8px #1a122866,0 1px 0 #07101c; }
.wish-button:disabled { opacity:1; color:#a4b1c2; border-color:#596b80; background:linear-gradient(180deg,#2a394a,#19273a); box-shadow:inset 0 1px #cdd9e41a; }
.wish-button:disabled span { color:#9eafc4; }
.wish-button:disabled::after { border-color:#71839730; }
.joystick-ring { border-color:#c1aa7c88; background:radial-gradient(circle,#182e45aa,#0a182acc 66%,#73644542 68%,#091221ba 73%); box-shadow:inset 0 1px #e7d7ac24,0 3px 16px #0005; }
.joystick-knob { color:#e8d2a5; border-color:#d7b77a9c; background:radial-gradient(circle at 35% 25%,#516c83,#21374f 50%,#14263a); box-shadow:inset 0 1px #d8ebff66,inset 0 0 0 3px #d8bf7829,0 3px 9px #0008; }
@media(prefers-reduced-motion:no-preference) {
  .skill-ready { animation:skill-recharged 420ms ease-out; }
  @keyframes skill-recharged { 0% {filter:brightness(1.48); translate:0 -2px;} 100% {filter:brightness(1);translate:0 0;} }
}
@media(max-width:700px) {
  .sanctuary-actions button { padding:10px; gap:8px; }
  .sanctuary-actions b { font-size:15px; }
  .sanctuary-actions small { font-size:9px; }
  .utility { min-width:44px; min-height:44px; }
  .stage-card { padding-inline:7px; }
  .stage-copy small { font-size:9px; }
  .player-status { padding:9px 10px; }
  .wave-status { padding-inline:8px; }
  .meter { height:6px; }
  .action-symbol { width:30px; height:29px; }
  .action-symbol svg { width:27px; height:27px; }
  .skill-state { font-size:9px; }
}
@media(orientation:landscape) and (max-height:600px) {
  .sanctuary-actions { grid-template-columns:1fr; gap:4px; }
  .sanctuary-actions button { padding:8px 11px; min-height:44px; }
  .sanctuary-actions b { font-size:14px; white-space:nowrap; }
  .stage-card { min-height:52px; }
  .stage-copy b { font-size:13px; }
  .stage-copy small { font-size:9px; }
  .stage-description { font-size:11px; line-height:1.7; }
  .wave-status { padding-block:4px; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.utility,.action-skill,.primary-button,.archive-close,.reward-card,.wish-button,.sanctuary-actions button):active:not(:disabled) { translate:none; }
  .skill-ready,.cast-flash { animation:none!important; }
}
@media(max-width:360px) and (orientation:portrait) {
  .sanctuary-actions button { padding:8px 6px; gap:5px; }
  .sanctuary-actions b { font-size:13px; white-space:nowrap; }
  .sanctuary-glyph { width:26px; min-width:26px; flex:0 0 26px; }
  .sanctuary-glyph svg { width:26px; height:26px; }
}