/* Only the live combat overlay uses these tokens; the existing metagame is unchanged. */
.combat-access {
  --hud-ink: #0a1429;
  --hud-gold: #d7a857;
  --hud-text: #f5e1af;
  --hud-gap: 10px;
  --hud-radius: 12px;
  --hud-transition: 140ms;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-family: 'Alegreya Sans', Georgia, serif;
  color: var(--hud-text);
  container-type: inline-size;
}
.combat-access[hidden] { display: none !important; }
/* Keep the compact scene's layout stable while its HUD is suspended. */
.combat-access.compact[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.combat-access:not(.compact) .combat-access-status,
.combat-access:not(.compact) .combat-access-phase > strong,
.combat-access:not(.compact) .combat-access-progress,
.combat-access:not(.compact) .combat-access-message {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.combat-access button {
  min-height: 44px;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.combat-access:not(.compact) .combat-access-actions {
  position: absolute;
  left: 2.1%;
  top: 20.8%;
  width: 18.3%;
  height: 76.2%;
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  transform: perspective(48cqw) rotateY(24deg) skewY(2deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  border: 1.4px solid var(--hud-gold);
  border-radius: 1.3cqw;
  background: linear-gradient(105deg, #0e1b30fc, #050e1df7 60%, #091428fa);
  box-shadow: inset 3px 0 0 #030914, inset 5px 0 0 #d7a85780, 2px 3px 6px #0006;
  pointer-events: none;
}
.combat-access:not(.compact) .combat-access-actions button {
  position: relative;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  min-height: 0;
  min-width: 0;
  margin: 0 4px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid #d7a85780;
  border-radius: 0;
  background: transparent;
  color: var(--hud-text);
  box-shadow: none;
  text-align: left;
  width: calc(100% - 8px);
  height: 100%;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  transition: box-shadow var(--hud-transition), background-color var(--hud-transition);
}
.combat-access:not(.compact) .combat-skill-row { position: relative; min-width: 0; min-height: 0; transform-style: preserve-3d; pointer-events: auto; }
.combat-access:not(.compact) .combat-skill-row:last-child button { border-bottom: 0; border-radius: 0 0 1.2cqw 1.2cqw; }
.combat-access:not(.compact) .combat-skill-row:first-of-type button { border-radius: 1.2cqw 1.2cqw 0 0; }
.combat-access:not(.compact) .combat-skill-row.is-front { z-index: 5; }
.combat-access:not(.compact) .combat-access-actions .combat-skill-row.is-front button {
  transform: var(--skill-front-transform);
  transition: transform var(--hud-transition) ease-out, box-shadow var(--hud-transition), background-color var(--hud-transition);
  border: 1px solid #f2cb7b;
  border-radius: 5px;
  background: linear-gradient(105deg, #14243b, #07101e);
  box-shadow: 0 4px 14px #0008;
}
.combat-skill-ornaments { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; color: #e2ba73; pointer-events: none; }
.combat-skill-shortcut { position: absolute; z-index: 2; left: 4%; top: 4%; display: grid; place-items: center; width: 2.3cqw; height: 2.3cqw; border: 1.2px solid #e7bd66; border-radius: 50%; background: linear-gradient(#742b21, #491017); color: #f5e1af; box-shadow: inset 0 0 0 1px #3a1118; font: 700 1.55cqw Georgia, serif; }
.combat-skill-art { position: relative; display: grid; place-items: center; justify-self: end; height: 90%; aspect-ratio: 1; margin-right: 8px; border: 0.3cqw solid #72291f; border-radius: 50%; background: #030914; box-shadow: 0 0 0 1px #030914, 0 0 0 2px #dfb467, inset 0 0 0 1px #d7a857, inset 0 0 0 5px #050c19, inset 0 0 0 6px #c59a52; }
#game .combat-skill-art canvas { display: block; position: static !important; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: contain; clip-path: circle(50%); }
.combat-skill-info { display: grid; justify-items: start; align-content: center; gap: .55cqw; min-width: 0; }
.combat-skill-name { max-width: 6.3cqw; color: #f7e3ab; text-shadow: 0 1px 2px #02050a; font: 700 1.3cqw / 1.1 Georgia, 'Yu Mincho', serif; overflow-wrap: normal; }
.combat-skill-cost { min-width: 5cqw; padding: .2cqw .55cqw; border: 1px solid #d7a857; border-radius: .3cqw; background: #06101d; color: #b2e5ff; box-shadow: inset 0 1px 3px #0008; text-align: center; font: 700 1.05cqw / 1.15 'Alegreya Sans', sans-serif; white-space: nowrap; }
.combat-skill-seal { display: grid; place-items: center; width: 28%; height: 58%; border: 1px solid #a43d30; background: #e0d0a7; color: #92251d; transform: rotate(-7deg); font: 700 1.7cqw 'Yu Mincho', serif; }
.combat-skill-mark { position: absolute; color: #ffe4a0; font: 700 2.6cqw 'Yu Mincho', serif; text-shadow: 2px 2px #4f120c, -2px -2px #4f120c; }
.combat-skill-availability { position: absolute; right: -.3cqw; bottom: -.2cqw; padding: .1cqw .25cqw; border: 1px solid #c79a52; border-radius: .2cqw; background: #07101df5; color: #f5e1af; font: 700 .85cqw 'Alegreya Sans', sans-serif; }
.combat-skill-availability:empty { display: none; }
[data-resource-state=insufficient] .combat-skill-cost { color: #ff998d; }
.is-empty .combat-skill-art, .is-empty .combat-skill-info, .is-empty .combat-skill-shortcut { opacity: .65; }
.is-empty .combat-skill-cost { color: #c9c2ae; border-color: #a8844d; }
.combat-access:not(.compact) .combat-access-actions button[aria-pressed=true] { background: linear-gradient(90deg, #d7a85715, transparent); }
.combat-access:not(.compact) .combat-access-actions button[aria-pressed=true]::before { content: ''; position: absolute; left: -.9cqw; top: calc(50% - .55cqw); width: 0; height: 0; border-block: .55cqw solid transparent; border-right: .8cqw solid #f2cb7b; filter: drop-shadow(-1px 1px 1px #000); }
.combat-access:not(.compact) .combat-access-pause {
  position: absolute;
  top: 8.8%;
  left: 47.9%;
  width: 4.2%;
  height: 7.5%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
}
.combat-access button:focus-visible { outline: 2px solid #ffe4a1; outline-offset: -3px; }
.mobile-combat-entry { display: block; min-height: 44px; margin: 22px auto 0; padding: 10px 16px; border: 1px solid #d7a857; border-radius: 8px; background: #0a1429; color: #f5e1af; font: 700 13px 'Alegreya Sans', sans-serif; }
html.mobile-viewport.compact-game-enabled body > main { display: block; }
html.mobile-viewport.compact-game-enabled .mobile-gate { display: none; }
.combat-access:not(.compact) button:hover { background: #f2cb7b0d; }
.combat-access.compact { position: relative; display: grid; gap: var(--hud-gap); padding: 10px; }
.compact .combat-access-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 136px; }
.compact .combat-access-status { min-width: 0; padding: 8px; border: 1px solid var(--hud-gold); border-radius: var(--hud-radius); background: var(--hud-ink); }
.compact .combat-access-status strong { font-family: Cinzel, Georgia, serif; display: block; font-size: 14px; overflow-wrap: anywhere; }
.compact .combat-access-status label { display: grid; grid-template-columns: 18px 1fr; gap: 4px; position: relative; margin-top: 4px; font-size: 12px; }
.compact .combat-access-status label b { position: absolute; right: 4px; line-height: 17px; font-size: 12px; text-shadow: 0 1px 2px #000, 1px 0 #000, -1px 0 #000; }
.compact progress { appearance: none; width: 100%; height: 17px; border: 1px solid var(--hud-gold); border-radius: 9px; overflow: hidden; background: #030915; }
.compact progress::-webkit-progress-bar { background: #030915; }
.compact progress::-webkit-progress-value { background: linear-gradient(#53ea92, #15a650); }
.compact .combat-access-status label:nth-of-type(2) progress::-webkit-progress-value { background: linear-gradient(#42c6ff, #1375c5); }
.compact progress::-moz-progress-bar { background: #269be5; }
.compact small { display: block; font-size: 12px; line-height: 1.2; margin-top: 3px; }
.compact .combat-access-phase { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; height: 44px; }
.compact .combat-access-phase > strong { padding: 6px 14px; font: 700 13px Cinzel, Georgia, serif; border: 1px solid var(--hud-gold); border-radius: 15px; background: #58151d; text-align: center; }
.compact .combat-access-pause { width: 44px; height: 44px; border: 1px solid var(--hud-gold); border-radius: 50%; background: var(--hud-ink); color: #a6e1ff; font-size: 23px; }
.compact .combat-access-scene { aspect-ratio: 16 / 9; margin-inline: -10px; }
.compact .combat-access-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.compact .combat-skill-row { display: contents; }
.compact .combat-skill-ornaments, .compact .combat-skill-art { display: none; }
.compact .combat-skill-info { display: grid; gap: 3px; }
.compact .combat-skill-name { max-width: none; font: inherit; }
.compact .combat-skill-cost { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; font: 700 13px 'Alegreya Sans', sans-serif; }
.compact .combat-skill-shortcut { position: static; display: inline; width: auto; height: auto; border: 0; background: none; font: inherit; }
.compact .combat-access-actions button { grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; }
.compact .combat-access-actions button { display: grid; align-content: center; gap: 3px; min-height: 62px; padding: 7px 10px; border: 1px solid var(--hud-gold); border-radius: 8px; background: var(--hud-ink); color: var(--hud-text); text-align: left; font-weight: 700; transition: background var(--hud-transition); }
.compact .combat-access-actions button[aria-disabled=true] { color: #b8b3aa; border-color: #73654f; }
.compact .combat-access-actions button[aria-pressed=true] { box-shadow: inset 0 0 0 1px #f2cb7b; }
.compact .combat-access-actions b { color: #9cdbff; font-size: 13px; }
.compact .combat-access-progress { padding: 8px 10px; border: 1px solid var(--hud-gold); border-radius: var(--hud-radius); background: var(--hud-ink); }
.compact .combat-access-progress strong { display: block; font: 700 12px Cinzel, Georgia, serif; text-align: center; margin-bottom: 6px; }
.compact .combat-access-progress label { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; }
.compact .combat-access-progress progress::-webkit-progress-value { background: linear-gradient(#d7a857, #a67b3a); }
.compact .combat-access-message { margin: 0; min-height: 20px; font-size: 14px; text-align: center; }
#game.compact-combat { position: relative; width: 100%; height: auto; aspect-ratio: auto; overflow: visible; background: #050c19; }
#game.compact-combat canvas { position: absolute; top: 156px; left: 0; width: 100% !important; height: auto !important; margin: 0 !important; }
html.mobile-viewport:has(.compact-combat) body > main { display: block; }
html.mobile-viewport:has(.compact-combat) .mobile-gate { display: none; }
body:has(.compact-combat) main { width: 100%; max-height: none; height: auto; aspect-ratio: auto; margin: 0; padding: 0; overflow: visible; }
.combat-pause-access { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.combat-pause-access h2, .combat-pause-preferences { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.combat-pause-access button { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); pointer-events: auto; min-height: 44px; background: transparent; border: 0; color: transparent; box-shadow: none; cursor: pointer; }
.combat-pause-access button:focus-visible { outline: 2px solid #f2cb7b; outline-offset: 0; }
@media (max-width: 980px) {
  .combat-pause-access { position: fixed; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 8px; padding: 20px; overflow: auto; background: #050c19f7; pointer-events: auto; }
  .combat-pause-access h2 { position: static; grid-column: 1 / -1; width: auto; height: auto; clip-path: none; margin: 0 0 12px; color: #f5e1af; font: 700 22px Cinzel, Georgia, serif; text-align: center; }
  .combat-pause-preferences { position: static; grid-column: 1 / -1; width: auto; height: auto; clip-path: none; margin: -6px 0 8px; color: #c9c2ae; font: 14px 'Alegreya Sans', sans-serif; text-align: center; }
  .combat-pause-access button { position: static; width: auto; height: auto; padding: 10px; color: #f5e1af; background: #0a1429; border: 1px solid #d7a857; border-radius: 8px; font: 700 15px 'Alegreya Sans', sans-serif; }
  .combat-pause-access button:nth-of-type(-n+5) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .combat-access *, .combat-access *::before, .combat-access *::after { transition: none !important; }
}