:root{
  --bg0:#0b0d12;
  --bg1:#07080b;
  --panel0:#141827;
  --panel1:#0d101a;
  --card0:#0f1115;
  --card1:#0c0e13;

  --ink:#e9e2d9;
  --ink2:#cfd6e6;

  --edge: rgba(255,255,255,.08);
  --edge2: rgba(0,0,0,.45);

  --ember:#ffb84d;
  --blood:#ff4d5b;
  --violet:#b197fc;
  --aqua:#4dabf7;
  --leaf:#69db7c;
  --gold:#ffd43b;
  --scroll-track: linear-gradient(180deg, rgba(7,10,18,0.96), rgba(18,22,34,0.92));
  --scroll-thumb: linear-gradient(180deg, rgba(255,191,109,0.92), rgba(160,200,255,0.82));
  --scroll-thumb-hover: linear-gradient(180deg, rgba(255,214,143,0.98), rgba(194,222,255,0.94));
  --scroll-border: rgba(255,223,163,0.26);
  --scroll-shadow: rgba(255,184,77,0.2);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Overlay z-index lanes */
  --z-overlay-modal: 2000;
  --z-overlay-toast: 2050;
  --z-overlay-modal-elevated: 2100;
  --z-overlay-help: 2200;
  --z-overlay-memory: 2280;
  --z-overlay-guide: 2300;
  --z-overlay-combat: 2400;
}

*{ box-sizing:border-box; }

html,
body{
  height: 100%;
}

body{
  margin:0;
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  background: #0b0d12 url("./data/ui/game_bg.webp") center/cover no-repeat;
}

.inventoryContent,
.panel-log,
#log,
.deckLibraryBody,
.memoryBoard,
.handDrawerPanel #hand,
.gearSlotPickerList,
#helpOverlay .overlayCard,
#menuInfoOverlay .menuInfoCard,
#profileOverlay .profileCard,
.topbar.menu-open .topbarButtonsRow,
.settingsMenu,
.debugMenu,
body[data-ui="web"] .panel-enemy,
body[data-ui="web"] .panel-player{
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 199, 129, 0.9) rgba(10, 13, 22, 0.72);
}

.inventoryContent::-webkit-scrollbar,
.panel-log::-webkit-scrollbar,
#log::-webkit-scrollbar,
.deckLibraryBody::-webkit-scrollbar,
.memoryBoard::-webkit-scrollbar,
.handDrawerPanel #hand::-webkit-scrollbar,
.gearSlotPickerList::-webkit-scrollbar,
#helpOverlay .overlayCard::-webkit-scrollbar,
#menuInfoOverlay .menuInfoCard::-webkit-scrollbar,
#profileOverlay .profileCard::-webkit-scrollbar,
.topbar.menu-open .topbarButtonsRow::-webkit-scrollbar,
.settingsMenu::-webkit-scrollbar,
.debugMenu::-webkit-scrollbar,
body[data-ui="web"] .panel-enemy::-webkit-scrollbar,
body[data-ui="web"] .panel-player::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}

.inventoryContent::-webkit-scrollbar-track,
.panel-log::-webkit-scrollbar-track,
#log::-webkit-scrollbar-track,
.deckLibraryBody::-webkit-scrollbar-track,
.memoryBoard::-webkit-scrollbar-track,
.handDrawerPanel #hand::-webkit-scrollbar-track,
.gearSlotPickerList::-webkit-scrollbar-track,
#helpOverlay .overlayCard::-webkit-scrollbar-track,
#menuInfoOverlay .menuInfoCard::-webkit-scrollbar-track,
#profileOverlay .profileCard::-webkit-scrollbar-track,
.topbar.menu-open .topbarButtonsRow::-webkit-scrollbar-track,
.settingsMenu::-webkit-scrollbar-track,
.debugMenu::-webkit-scrollbar-track,
body[data-ui="web"] .panel-enemy::-webkit-scrollbar-track,
body[data-ui="web"] .panel-player::-webkit-scrollbar-track{
  background: var(--scroll-track);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.42);
}

.inventoryContent::-webkit-scrollbar-thumb,
.panel-log::-webkit-scrollbar-thumb,
#log::-webkit-scrollbar-thumb,
.deckLibraryBody::-webkit-scrollbar-thumb,
.memoryBoard::-webkit-scrollbar-thumb,
.handDrawerPanel #hand::-webkit-scrollbar-thumb,
.gearSlotPickerList::-webkit-scrollbar-thumb,
#helpOverlay .overlayCard::-webkit-scrollbar-thumb,
#menuInfoOverlay .menuInfoCard::-webkit-scrollbar-thumb,
#profileOverlay .profileCard::-webkit-scrollbar-thumb,
.topbar.menu-open .topbarButtonsRow::-webkit-scrollbar-thumb,
.settingsMenu::-webkit-scrollbar-thumb,
.debugMenu::-webkit-scrollbar-thumb,
body[data-ui="web"] .panel-enemy::-webkit-scrollbar-thumb,
body[data-ui="web"] .panel-player::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: var(--scroll-thumb);
  border: 2px solid rgba(10,13,22,0.78);
  box-shadow:
    0 0 0 1px var(--scroll-border) inset,
    0 0 12px var(--scroll-shadow);
}

.inventoryContent::-webkit-scrollbar-thumb:hover,
.panel-log::-webkit-scrollbar-thumb:hover,
#log::-webkit-scrollbar-thumb:hover,
.deckLibraryBody::-webkit-scrollbar-thumb:hover,
.memoryBoard::-webkit-scrollbar-thumb:hover,
.handDrawerPanel #hand::-webkit-scrollbar-thumb:hover,
.gearSlotPickerList::-webkit-scrollbar-thumb:hover,
#helpOverlay .overlayCard::-webkit-scrollbar-thumb:hover,
#menuInfoOverlay .menuInfoCard::-webkit-scrollbar-thumb:hover,
#profileOverlay .profileCard::-webkit-scrollbar-thumb:hover,
.topbar.menu-open .topbarButtonsRow::-webkit-scrollbar-thumb:hover,
.settingsMenu::-webkit-scrollbar-thumb:hover,
.debugMenu::-webkit-scrollbar-thumb:hover,
body[data-ui="web"] .panel-enemy::-webkit-scrollbar-thumb:hover,
body[data-ui="web"] .panel-player::-webkit-scrollbar-thumb:hover{
  background: var(--scroll-thumb-hover);
}

body.is-fullscreen{
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  padding: 0;
}


#uiWebRoot,
#uiMobileRoot{
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- UI Mode: Mobile (minimal layout) --- */


/* Player panel particles container */
.playerParticles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 30%, rgba(0,0,0,.9) 45%, #000 70%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 30%, rgba(0,0,0,.9) 45%, #000 70%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.playerParticles canvas{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure panel container properly contains absolutely positioned particles */

/* Enemy panel fog removed per UX request */

/* Reduced FX when effects are disabled */
body.effects-off .panel-enemy::before,
body.effects-off .panel-enemy::after,
body.particles-off .panel-enemy::before,
body.particles-off .panel-enemy::after{
  animation: none;
  filter: none;
  opacity: 0.2;
}

body.effects-off .storyImage,
body.particles-off .storyImage{
  filter: none;
}

body.effects-off .storyImage--shrine,
body.particles-off .storyImage--shrine{
  animation: none;
  filter: none;
}

body.effects-off .shrineSparkle,
body.particles-off .shrineSparkle{
  animation: none;
  opacity: 0.35;
}

body.effects-off .shrineSparkle::before,
body.effects-off .shrineSparkle::after,
body.particles-off .shrineSparkle::before,
body.particles-off .shrineSparkle::after{
  animation: none;
  opacity: 0.35;
}

body.effects-off .itemDropImage,
body.particles-off .itemDropImage{
  filter: none;
}

body.effects-mid .panel-enemy::before,
body.effects-mid .panel-enemy::after{
  animation: none;
  filter: none;
  opacity: 0.1;
}

body.effects-mid .storyImage,
body.effects-mid .storyImage--shrine,
body.effects-mid .shrineSparkle,
body.effects-mid .shrineSparkle::before,
body.effects-mid .shrineSparkle::after,
body.effects-mid .itemDrop::before,
body.effects-mid .itemDropCoins,
body.effects-mid .itemDropLeaves{
  opacity: 0.5;
}

body.effects-mid *,
body.effects-mid *::before,
body.effects-mid *::after{
  box-shadow: none !important;
  text-shadow: none !important;
}

body.effects-mid .itemDropImage,
body.effects-mid .itemDropCoin,
body.effects-mid .itemDropLeaf{
  filter: none !important;
}

body.effects-off *,
body.effects-off *::before,
body.effects-off *::after{
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* --- Topbar --- */
.topbar{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  position:sticky;
  top:0;
  z-index:10;

  border-bottom: 1px solid rgba(255,184,77,0.16);
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.04) 0%, rgba(255,255,255,.01) 40%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg, rgba(18,22,34,.98), rgba(10,12,18,.98));
  box-shadow: 0 10px 22px rgba(0,0,0,0.40);
  border-radius: 0 0 14px 14px;
  backdrop-filter: blur(6px);
}

/* On desktop, keep header from expanding (you liked the 72px cap).
   On phones we relax this inside the @media block so the Menu can expand. */
@media (min-width: 769px){
  .topbar{
    min-height: 72px;
    max-height: 72px;
    overflow: visible;
  }
}

/* Default desktop layout: only the buttons row is visible */
.topbarMainRow{
  display:none;
}

.topbarButtonsRow{
  display:flex;
  justify-content:space-between;
  width:100%;
  align-items:center;
  gap:10px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(16,18,28,0.98), rgba(10,11,18,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.44);
}

.topbar .left,
.topbar .right{
  display:flex;
  align-items:center;
  gap:10px;
}

.settingsGroup{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.settingsMenu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(16,18,28,0.98), rgba(10,11,18,0.98));
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  z-index: 30;
  transform: translateY(-4px) scale(.992);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.settingsMenu.is-open{
  display: flex;
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.settingsMenu button{
  width: 100%;
  justify-content: flex-start;
}

.settingsVolumeRow{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 2px;
}

.settingsMiniBtn{
  width: 34px !important;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 9px;
  justify-content: center !important;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.settingsMiniBtn[aria-pressed="true"]{
  border-color: rgba(255,176,77,.72);
  box-shadow: 0 0 0 1px rgba(255,176,77,.2) inset;
}

.settingsVolumeLabel{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,233,223,.86);
}

.settingsVolumeRow input[type="range"]{
  width: 100%;
  accent-color: #ffb04d;
}

.settingsVolumeValue{
  min-width: 58px;
  text-align: right;
  font-size: 11px;
  color: rgba(248,231,205,.92);
}

.menuHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.menuTitle{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.96;
  color: rgba(242,233,223,.92);
}

.menuSectionLabel{
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(198,211,231,.70);
  margin: 2px 2px -2px;
  padding-top: 4px;
}

.menuPrimaryAction,
.menuCategoryBtn{
  width: 100%;
  justify-content: space-between !important;
  gap: 10px;
}

.menuCategoryBtn{
  border-color: rgba(146,184,236,.24);
  background:
    radial-gradient(180% 140% at 10% 0%, rgba(112,166,238,.14), transparent 58%),
    linear-gradient(180deg, #202b3f, #162033);
}

.menuCategoryBtn[aria-expanded="true"]{
  border-color: rgba(172,214,255,.46);
  box-shadow:
    0 14px 28px rgba(0,0,0,.44),
    0 0 0 1px rgba(88,146,226,.30) inset,
    0 0 16px rgba(112,178,255,.20);
}

.menuBtnChevron{
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(180,208,238,.44);
  background: rgba(26,40,62,.44);
  color: rgba(224,239,255,.96);
  font-size: 11px;
  line-height: 1;
  transition: transform 140ms ease, border-color 140ms ease;
}

.menuCategoryBtn[aria-expanded="true"] .menuBtnChevron{
  transform: rotate(45deg);
  border-color: rgba(194,226,255,.7);
}

.menuCloseBtn{
  width: 36px !important;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  justify-content: center !important;
  align-items: center;
  font-size: 14px;
  letter-spacing: 0;
}

.debugGroup{
  position: relative;
  display: none;
  align-items: center;
}

body.debug-start-unlocked .debugGroup{
  display: inline-flex;
}

.debugMenu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(16,18,28,0.98), rgba(10,11,18,0.98));
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  z-index: 31;
  transform: translateY(-4px) scale(.992);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.debugMenu.is-open{
  display: flex;
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.debugMenu button{
  width: 100%;
  justify-content: flex-start;
}

.topbarButtonsRow button{
  background: linear-gradient(180deg, #1c222f, #131927);
  border-color: rgba(255,255,255,.12);
  color: #f2e9df;
  font-size: 12px;
  padding: 8px 10px;
  letter-spacing: .04em;
  box-shadow:
    0 10px 18px rgba(0,0,0,.32),
    0 0 0 1px rgba(0,0,0,.42) inset,
    0 0 18px rgba(255,184,77,.06);
}

.settingsMenu button,
.debugMenu button{
  font-size: 12px;
  padding: 10px 12px;
  letter-spacing: 0.06em;
}

.settingsGroup.is-open > .settingsMenu{
  border-color: rgba(154,198,255,.34);
  box-shadow: 0 16px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(76,130,205,.22) inset;
}

.topbarButtonsRow button:hover{
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(255,184,77,.16), transparent 58%),
    linear-gradient(180deg, #262f42, #171d2b);
  border-color: rgba(255,214,166,.30);
  color: #fff3df;
  box-shadow:
    0 14px 26px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,0,0,.40) inset,
    0 0 16px rgba(255,214,166,.12);
}

.settingsMenu button:hover,
.debugMenu button:hover{
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(255,184,77,.18), transparent 58%),
    linear-gradient(180deg, #283247, #181e2d);
  border-color: rgba(255,214,166,.32);
  color: #fff3df;
  box-shadow:
    0 14px 26px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,184,77,.14) inset,
    0 0 16px rgba(255,214,166,.14);
}

.topbarButtonsRow button:active{
  transform: translateY(1px) scale(.99);
  box-shadow:
    0 8px 16px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.45) inset;
}

.topbarButtonsRow button[aria-pressed="true"],
body.inventory-open #btnInventory,
body.profile-open #btnProfile{
  border-color: rgba(255,184,77,.48);
  box-shadow:
    0 14px 28px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,184,77,.30) inset,
    0 0 18px rgba(255,184,77,.18);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,184,77,.16), transparent 60%),
    linear-gradient(180deg, #242c3c, #182033);
}

/* Compact run summary in the header (used on phones, but defined here for reuse) */
.topbarRunSummary{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.topbarRunSummary .mono{
  font-size:11px;
  opacity:0.95;
}

.topbarMainActions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.webTopStats{
  display: none;
}

.topbar .runStat.energy{
  color: rgba(120,190,255,.98);
  text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 10px rgba(120,190,255,.18);
}

.topbarCombatBars,
.compactCombatBars{
  margin-top: 4px;
  width: 100%;
}

.combatBarsRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.combatBar{
  position: relative;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.42);
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0,0,0,.26), 0 0 0 1px rgba(0,0,0,.38) inset;
}

.combatBarFill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  transition: width 180ms ease;
}

.combatBar.hp .combatBarFill{
  background: linear-gradient(90deg, rgba(214,76,88,.74), rgba(229,112,122,.74));
}

.combatBar.energy .combatBarFill{
  background: linear-gradient(90deg, rgba(74,150,214,.74), rgba(108,174,230,.74));
}

.combatBar.blockmeter .combatBarFill{
  background: linear-gradient(90deg, rgba(150,156,170,.72), rgba(184,190,202,.72));
}

.combatBar.xpmeter .combatBarFill{
  background: linear-gradient(90deg, rgba(92,182,106,.74), rgba(128,206,141,.74));
}

.combatBarLabel{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(236,229,217,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.92);
  pointer-events: none;
}

.topbarMenuToggle{
  align-self:flex-start;
  font-weight: 900;
  font-size: inherit;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(18,22,34,0.92);
  color: rgba(245,245,255,0.96);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

/* Web UI: topbar actions live under single Menu toggle. */
body[data-ui="web"] .topbar{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: auto;
  max-height: none;
  overflow: visible;
}

body[data-ui="web"] .topbarMainRow{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  min-height: 42px;
}

body[data-ui="web"] .topbarRunSummary{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: 0 0 auto;
  min-width: 0;
  z-index: 1;
}

body[data-ui="web"] .topbarMainActions{
  flex-wrap: nowrap;
  margin-left: auto;
  z-index: 2;
}

body[data-ui="web"] .topbarMenuToggle{
  flex-shrink: 0;
}

body[data-ui="web"] .topbarButtonsRow{
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  left: auto;
  width: min(460px, calc(100vw - 24px));
  margin: 0;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  z-index: 170;
}

body[data-ui="web"] .topbar.menu-open .topbarButtonsRow{
  display: grid;
  -webkit-overflow-scrolling: touch;
}

body[data-ui="web"] .topbar .left,
body[data-ui="web"] .topbar .right{
  display: contents;
}

body[data-ui="web"] .topbarButtonsRow button{
  width: 100%;
  justify-content: flex-start;
  font-size: 11px;
  padding: 8px 10px;
  letter-spacing: 0.06em;
}

body[data-ui="web"] .topbarButtonsRow .settingsGroup{
  width: 100%;
  display: block;
  position: static;
}

body[data-ui="web"] .topbarButtonsRow .settingsGroup > button{
  width: 100%;
  justify-content: flex-start;
}

/* Web Menu sections: expand inline within Menu panel (not floating off-screen). */
body[data-ui="web"] .topbarButtonsRow .settingsMenu{
  position: static;
  top: auto;
  right: auto;
  min-width: 0;
  width: 100%;
  margin-top: 6px;
  max-height: none;
  padding: 10px;
}

body[data-ui="web"] #nodeInfoCompact{
  display: none;
}

/* --- Buttons --- */
button{
  background: rgba(18,22,34,0.92);
  color: rgba(245,245,255,0.96);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
button:hover{
  border-color: rgba(255,184,77,.22);
  box-shadow: 0 12px 22px rgba(0,0,0,.40), 0 0 18px rgba(255,184,77,.08);
  transform: translateY(-1px);
}
button:active{ transform: translateY(1px) scale(.99); }

button.talentNode:hover,
button.talentNode:active,
button.talentNode:focus-visible {
  transform: translate(-50%, -50%);
}

button:disabled{ opacity:.45; cursor:not-allowed; }

/* --- Grid / Panels --- */
.grid{
  display:grid;
  grid-template-columns:
    minmax(200px, 260px)
    minmax(220px, 280px)
    minmax(420px, 1.3fr)
    minmax(420px, 1.3fr);
  gap:12px;
  padding:12px;
  background: transparent;
}

.panel{
  min-width:0;
  position:relative;

  border-radius:16px;
  padding:14px;

  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.07) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(18,22,34,.92), rgba(10,12,18,.90));
  box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.30) inset;
}


.panel h2{
  margin:0 0 10px 0;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size: 16px;
  color: #f3eadf;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

/* Hide redundant Enemy/Player titles (names already shown) */
#enemyTitle,
.titlePlayer{
  display: none;
}

.panel.wide{ grid-column: span 4; }

.panelTitle{
  letter-spacing: .9px;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-shadow: 0 1px 0 rgba(0,0,0,.75);
}
.titleEnemy{ border-bottom-color: rgba(255,77,91,.20); color: rgba(255,77,91,.95); }
.titlePlayer{ border-bottom-color: rgba(255,184,77,.18); color: rgba(255,184,77,.95); }
.titleStory{ border-bottom-color: rgba(177,151,252,.18); color: rgba(177,151,252,.95); }
.titleRun{ border-bottom-color: rgba(77,171,247,.16); color: rgba(77,171,247,.95); }
.titleRewards{ border-bottom-color: rgba(255,184,77,.14); color: rgba(233,226,217,.92); }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  color: var(--ink2);
}

/* --- Story / Log --- */
/* Story text now lives inside a dedicated “story card”:
   - subtle glow + vignette
   - slightly larger line-height
   - newline characters in JSON are respected via white-space: pre-line
*/
#storyText{
  font-size: 15px;
  line-height: 1.5;
  color: #efe7de;
  margin: 6px 0 0 0;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);

  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,0.08) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.46) 100%),
    linear-gradient(180deg, rgba(10,12,18,0.96), rgba(5,6,11,0.98));
  box-shadow:
    0 14px 30px rgba(0,0,0,0.70),
    0 0 0 1px rgba(0,0,0,0.70) inset;

  /* Respect \n in story.json so Awakening / The Nave of Ash read as paragraphs. */
  white-space: pre-line;

  position: relative;
  overflow: hidden;
}

/* Soft vignette + ember glow over the story card */
#storyText::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 180% at 50% 0%, rgba(255,184,77,0.18), transparent 55%),
    radial-gradient(120% 180% at 50% 100%, rgba(0,0,0,0.65), transparent 60%);
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* Story panel layout: keep everything stacked cleanly */
.panel-story{
  display: flex;
  flex-direction: column;
}

/* Choices under the story card, with consistent spacing */
#storyChoices{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* --- Story text fade-in (no layout shift) --- */
#storyText.storyFade{
  opacity: 0;
  transform: translateY(4px); /* transform = no layout shift */
  transition: opacity 200ms ease, transform 200ms ease;
  will-change: opacity, transform;
}
#storyText.storyFade.is-in{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  #storyText.storyFade{
    transition: none;
    transform: none;
    opacity: 1;
  }
}

.choiceBtn{ display:block; width:100%; margin:8px 0; text-align:left; }

.log{
  white-space: pre-wrap;
  margin:0;
  max-height: 280px;
  overflow:auto;
  background: linear-gradient(180deg, var(--card0) 0%, var(--card1) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
  color: rgba(255,255,255,.86);
}

/* --- Rewards --- */
.rewardLine{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.rewardMain{ display:flex; flex-direction:column; gap:6px; }
.rewardName{ font-weight: 750; }
.rewardBadges{ display:flex; gap:6px; flex-wrap:wrap; }
.rewardText{ color:#d6d6d6; font-size: 13px; line-height: 1.25; }

.progressionHint{
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(120,184,255,.30);
  background:
    radial-gradient(120% 180% at 10% 0%, rgba(120,184,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(14,20,34,.92), rgba(9,12,20,.92));
  color: rgba(220,236,255,.95);
  font-size: 12px;
  line-height: 1.3;
}

/* --- Shop items (overlay) --- */
.shopItemsGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.shopItemCard{
  margin: 0;
  width: 100%;
  display: block;
  padding: 10px 12px;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  --buff-color: rgba(246,232,210,0.96);
  --buff-glow: rgba(255,184,77,0.18);
  --slot-accent: rgba(255,184,77,.34);
  --slot-bg-a: rgba(255,184,77,.13);
  --slot-bg-b: rgba(16,14,20,.94);
  border: 1px solid var(--slot-accent);
  background:
    radial-gradient(120% 140% at 10% 0%, var(--slot-bg-a), transparent 58%),
    linear-gradient(180deg, var(--slot-bg-b), rgba(10,10,14,.96));
}

.shopItemCard[data-slot="weapon"]{
  --slot-accent: rgba(255,107,107,.44);
  --slot-bg-a: rgba(255,107,107,.18);
  --slot-bg-b: rgba(30,12,16,.94);
}

.shopItemCard[data-slot="shield"]{
  --slot-accent: rgba(120,180,240,.42);
  --slot-bg-a: rgba(120,180,240,.18);
  --slot-bg-b: rgba(9,17,30,.94);
}

.shopItemCard[data-slot="armor"]{
  --slot-accent: rgba(255,212,59,.38);
  --slot-bg-a: rgba(255,212,59,.16);
  --slot-bg-b: rgba(30,24,11,.94);
}

.shopItemCard[data-slot="rune"]{
  --slot-accent: rgba(177,151,252,.42);
  --slot-bg-a: rgba(177,151,252,.16);
  --slot-bg-b: rgba(20,13,30,.94);
}

.shopItemCard[data-branch="aegis"]{
  --slot-accent: rgba(140,206,255,.48);
  --slot-bg-a: rgba(140,206,255,.18);
  --slot-bg-b: rgba(10,20,34,.94);
}

.shopItemCard[data-branch="ruin"]{
  --slot-accent: rgba(255,123,123,.48);
  --slot-bg-a: rgba(255,123,123,.18);
  --slot-bg-b: rgba(34,12,16,.94);
}

.shopItemCard[data-item-id="rune_renewal"]{
  --slot-accent: rgba(105,219,124,.44);
  --slot-bg-a: rgba(105,219,124,.18);
  --slot-bg-b: rgba(10,26,16,.94);
  --buff-color: var(--leaf);
  --buff-glow: rgba(105,219,124,.30);
}

.shopItemCard .rewardLine{
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.shopItemArt{
  width: 56px;
  height: 74px;
  flex: 0 0 56px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--slot-accent) 70%, rgba(255,255,255,.22));
  background: rgba(0,0,0,.24);
  box-shadow: 0 8px 16px rgba(0,0,0,.30), 0 0 14px color-mix(in srgb, var(--slot-accent) 45%, transparent), 0 0 0 1px rgba(0,0,0,.35) inset;
  overflow: hidden;
}

.shopItemArt img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.shopItemCard .rewardMain{
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.shopItemCard .rewardName{
  font-size: 14px;
  line-height: 1.2;
}

.shopItemCard.is-unaffordable{
  opacity: 0.45;
  filter: grayscale(0.35);
  cursor: not-allowed;
}

.shopItemCard.imploding{
  animation: shopPulse 220ms ease-out;
  pointer-events: none;
}

.shopItemCard[data-buff="damage"]{
  --buff-color: var(--blood);
  --buff-glow: rgba(255,77,91,.28);
}

.shopItemCard[data-buff="hp"]{
  --buff-color: var(--gold);
  --buff-glow: rgba(255,212,59,.24);
}

.shopItemCard[data-buff="heal"]{
  --buff-color: var(--leaf);
  --buff-glow: rgba(105,219,124,.24);
}

.shopItemCard[data-buff="stat"]{
  --buff-color: var(--violet);
  --buff-glow: rgba(177,151,252,.24);
}

.shopItemCard .rewardName{
  color: var(--buff-color);
  text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 12px var(--buff-glow);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.shopItemCard .rewardText{
  color: rgba(230,230,230,.92);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.shopItemCard .rewardBadges{
  text-transform: none;
  gap: 4px;
  align-items: center;
}

.shopItemCard .rewardBadges .rewardIcons{
  display: inline-flex;
  align-items: center;
}

.shopItemCard .rewardBadges .abilityIcons{
  margin-top: 0;
  display: inline-flex;
  gap: 4px;
}

.shopItemCard .abilityIcon{
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.shopItemCard .badge.cost{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shopItemCard .badge.branch{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.shopItemCard .badge.branch.aegis{
  border-color: rgba(140,206,255,.6);
  color: rgba(220,242,255,.95);
  background: rgba(140,206,255,.16);
}

.shopItemCard .badge.branch.ruin{
  border-color: rgba(255,123,123,.58);
  color: rgba(255,226,226,.95);
  background: rgba(255,123,123,.14);
}

.shopItemCard .costCoin{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(224,244,255,.95), rgba(120,180,240,.45) 55%, rgba(40,80,140,.55) 100%);
  border: 1px solid rgba(120,180,240,.65);
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 8px rgba(120,180,240,.35);
  color: rgba(234,248,255,.95);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.shopItemCard .costCoin::after{
  content: "❄";
}

.shopItemCard .abilityIcons{
  margin-top: 0;
}


.rewardCardsGrid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.rewardCard{
  text-align: left;
  cursor: pointer;
}

.rewardCard[data-branch="aegis"]{
  border-color: rgba(140,206,255,.48);
  box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 18px rgba(140,206,255,.16);
}

.rewardCard[data-branch="ruin"]{
  border-color: rgba(255,123,123,.48);
  box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 18px rgba(255,123,123,.16);
}

.rewardCard .badge.branch{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.rewardCard .badge.branch.aegis{
  border-color: rgba(140,206,255,.6);
  color: rgba(220,242,255,.95);
  background: rgba(140,206,255,.16);
}

.rewardCard .badge.branch.ruin{
  border-color: rgba(255,123,123,.58);
  color: rgba(255,226,226,.95);
  background: rgba(255,123,123,.14);
}

.rewardCard:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}


hr{ border:none; border-top:1px solid rgba(255,255,255,.08); margin:10px 0; }


/* --- Info / Inventory swap (same panel) --- */
#infoArea,
#inventoryArea{
  display: block;
  transition: opacity 180ms ease, max-height 180ms ease, visibility 0s linear 180ms;
}

#infoArea{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 2000px;
}

#inventoryArea{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
}

body.inventory-open #inventoryArea{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 2000px;
  transition: opacity 180ms ease, max-height 180ms ease, visibility 0s linear 0s;
}

body.inventory-open #infoArea{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
}

#inventoryArea{
  position: relative;
  isolation: isolate;
}

.inventoryContent{
  position: relative;
  z-index: 120;
  height: 100%;
  overflow: auto;
  padding: 10px 10px 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140% 120% at 18% 0%, rgba(255,184,77,.09) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(15,18,28,.92), rgba(7,8,14,.94));
  box-shadow: 0 16px 32px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.35) inset;
  backdrop-filter: blur(4px);
}

.inventoryBackdrop{
  display:block;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
  z-index: 90;
}

body.inventory-open .inventoryBackdrop{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease, visibility 0s linear 0s;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,184,77,0.10), transparent 60%),
    radial-gradient(100% 120% at 40% 100%, rgba(0,0,0,0.40), rgba(0,0,0,0.78));
}

.inventoryHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}

.inventoryTabs{
  display:inline-flex;
  flex-wrap: wrap;
  gap:8px;
  padding:4px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.debugOnly{
  display:none;
}

body.mode-debug .debugOnly{
  display:inline-flex;
}

.inventoryTab{
  min-width: 92px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid transparent;
  background: transparent;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(233,226,217,.86);
  box-shadow: none;
}

.inventoryTab:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.inventoryTab.active{
  border-color: rgba(255,184,77,.40);
  background:
    radial-gradient(160% 200% at 10% 0%, rgba(255,184,77,.18), transparent 60%),
    linear-gradient(180deg, rgba(28,32,48,.95), rgba(18,20,32,.95));
  box-shadow:
    0 10px 18px rgba(0,0,0,.32),
    0 0 0 1px rgba(0,0,0,.40) inset,
    0 0 14px rgba(255,184,77,.12);
  color: #f8ecde;
}

.inventoryClose{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(246,236,220,.96);
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.38) inset;
}

.inventoryClose:hover{ background: rgba(255,255,255,.10); }

.inventoryView{
  display:flex;
  flex-direction:column;
  gap:10px;
  animation: inventoryFade 140ms ease;
}

.gearHeader{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(240, 232, 220, .88);
}

.gearStage{
  position: relative;
  width: min(540px, 100%);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(12,16,26,.88), rgba(7,10,18,.94));
  box-shadow: 0 14px 26px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.28) inset;
  overflow: hidden;
}

.gearBackdrop{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.gearSlot{
  position: absolute;
  width: clamp(56px, 15vw, 92px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
  transition: transform 120ms ease, filter 120ms ease;
  cursor: pointer;
}

.gearSlot img{
  display: block;
  width: 100%;
  height: auto;
}

.gearSlotState{
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 24px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid rgba(189,218,255,.58);
  background: rgba(33,74,116,.90);
  color: rgba(236,248,255,.95);
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  font-weight: 800;
  pointer-events: none;
}

.gearSlotState.is-equipped{
  border-color: rgba(255,226,156,.80);
  background: linear-gradient(180deg, rgba(122,85,22,.95), rgba(86,56,12,.96));
  color: rgba(255,242,206,.98);
}

.gearSlotState.is-equipped.is-common{
  border-color: rgba(206,226,255,.84);
  background: linear-gradient(180deg, rgba(62,86,118,.92), rgba(34,55,86,.95));
  color: rgba(239,247,255,.97);
}

.gearSlotState.is-equipped.is-uncommon{
  border-color: rgba(92,247,130,.88);
  background: linear-gradient(180deg, rgba(32,96,52,.94), rgba(17,58,31,.96));
  color: rgba(214,255,226,.98);
}

.gearSlotState.is-equipped.is-rare{
  border-color: rgba(255,224,88,.92);
  background: linear-gradient(180deg, rgba(132,95,22,.94), rgba(90,60,14,.96));
  color: rgba(255,245,190,.99);
}

.gearSlot.is-selected{
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 10px 16px rgba(120,190,255,.34));
}

.gearSlot.is-equipped img{
  outline: 2px solid rgba(138,206,255,.72);
  outline-offset: 2px;
  border-radius: 10px;
}

.gearSlot.is-equipped[data-rarity="common"] img{
  outline-color: rgba(220,232,255,.72);
  box-shadow: 0 0 0 1px rgba(220,232,255,.22), 0 0 12px rgba(220,232,255,.18);
}

.gearSlot.is-equipped[data-rarity="uncommon"] img{
  outline-color: rgba(72,244,112,.96);
  box-shadow: 0 0 0 1px rgba(72,244,112,.48), 0 0 20px rgba(72,244,112,.48), 0 0 30px rgba(24,118,46,.24);
}

.gearSlot.is-equipped[data-rarity="rare"] img{
  outline-color: rgba(255,224,88,.98);
  box-shadow: 0 0 0 1px rgba(255,224,88,.50), 0 0 22px rgba(255,224,88,.52), 0 0 32px rgba(153,114,22,.30);
}

.gearSlot.is-selected.is-equipped[data-rarity="uncommon"] img{
  box-shadow: 0 0 0 1px rgba(72,244,112,.56), 0 0 26px rgba(72,244,112,.56), 0 0 36px rgba(24,118,46,.28);
}

.gearSlot.is-selected.is-equipped[data-rarity="rare"] img{
  box-shadow: 0 0 0 1px rgba(255,224,88,.60), 0 0 30px rgba(255,224,88,.60), 0 0 40px rgba(153,114,22,.34);
}

.gearSlot.slot-helmet{ left: 50%; top: 10%; }
.gearSlot.slot-shoulders{ left: 22%; top: 22%; }
.gearSlot.slot-necklace{ left: 78%; top: 22%; }
.gearSlot.slot-chest{ left: 50%; top: 42%; }
.gearSlot.slot-gloves{ left: 22%; top: 50%; }
.gearSlot.slot-rings{ left: 78%; top: 50%; }
.gearSlot.slot-legs{ left: 50%; top: 68%; }
.gearSlot.slot-boots{ left: 50%; top: 85%; }

.talentTreeView{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
}

.talentTreeHeader{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.talentTreeTitle{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,229,186,.95);
}

.talentTreeSubtitle{
  font-size: 11px;
  color: rgba(238,230,216,.72);
  letter-spacing: .04em;
}

.talentPointsMeta{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.talentPointsPill{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,237,201,.94);
  border: 1px solid rgba(255,226,168,.34);
  background: rgba(31,22,10,.62);
}

.talentPointsSub{
  font-size: 10px;
  color: rgba(234,223,204,.74);
  letter-spacing: .03em;
}

.talentTreeMobile{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.talentTreeStage{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 5;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  background:
    radial-gradient(130% 100% at 20% 0%, rgba(255,184,77,.10), transparent 60%),
    linear-gradient(180deg, rgba(12,16,26,.94), rgba(8,10,16,.96));
}

.talentTreeMobile .talentTreeStage::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--talent-bg, none) center/cover no-repeat;
  opacity: .68;
  pointer-events: none;
}

.talentTreeLineArt{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
  pointer-events: none;
  z-index: 1;
}

.talentTreeLinks{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.talentTreeLinks .talentLink{
  position: absolute;
  height: 18px;
  transform-origin: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.96;
}

.talentTreeLinks .talentLink.is-left{
  background-image: url("./data/ui/blue_line.webp");
  filter: drop-shadow(0 0 6px rgba(64, 176, 255, 0.58));
}

.talentTreeLinks .talentLink.is-right{
  background-image: url("./data/ui/red_line.webp");
  filter: drop-shadow(0 0 6px rgba(255, 78, 78, 0.58));
}

.talentNode{
  position: absolute;
  transform: translate(-50%, -50%);
  isolation: isolate;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background:
    radial-gradient(130% 130% at 20% 0%, rgba(255,255,255,.16), rgba(255,255,255,.01) 55%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, rgba(20,24,36,.94), rgba(10,12,19,.96));
  box-shadow: 0 8px 16px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.35) inset;
  color: #f6ead8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  z-index: 2;
}

.talentNode::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 188%;
  height: 188%;
  transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.talentNode::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 202%;
  height: 202%;
  transform: translate(-50%, -50%) rotate(0deg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.talentNode.is-left::before{
  background-image: url("./data/ui/talent_ring_blue.webp");
}

.talentNode.is-right::before{
  background-image: url("./data/ui/talent_ring_red.webp");
}

.talentNode.is-left::after{
  background-image: url("./data/ui/talent_ring_red.webp");
}

.talentNode.is-right::after{
  background-image: url("./data/ui/talent_ring_blue.webp");
}

.talentNode.is-left.is-locked::before,
.talentNode.is-right.is-locked::before{
  opacity: 0.42;
}

.talentNode.is-left.is-unlocked::before,
.talentNode.is-right.is-unlocked::before{
  opacity: 0.7;
}

.talentNode.is-left.is-active::before,
.talentNode.is-right.is-active::before{
  opacity: 0.9;
}

.talentNode.is-left.is-active::after,
.talentNode.is-right.is-active::after{
  opacity: 0.62;
  animation: talentRingSpinCW 5.8s linear infinite;
}

@keyframes talentRingSpinCW{
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.talentNode.starter{
  width: 66px;
  min-width: 66px;
  height: 66px;
  min-height: 66px;
}

.talentNode.capstone{
  width: 80px;
  min-width: 80px;
  height: 80px;
  min-height: 80px;
}

.talentNode img{
  width: 92%;
  height: 92%;
  position: relative;
  z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,.5));
}

.talentNodeLabel{
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 68px;
  max-width: 68px;
  font-size: 8px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(251,239,217,.95);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  white-space: normal;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}

.talentNode.starter .talentNodeLabel{
  width: 76px;
  max-width: 76px;
}

.talentNode.capstone .talentNodeLabel{
  width: 88px;
  max-width: 88px;
}

.talentNode.is-locked{
  opacity: .72;
  filter: grayscale(.75);
}

.talentNode.is-left.is-locked{
  border-color: rgba(112, 198, 255, 0.42);
  background:
    radial-gradient(130% 130% at 20% 0%, rgba(78, 172, 255, 0.22), rgba(255,255,255,.01) 55%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(12,30,52,.94), rgba(8,18,34,.96));
  box-shadow:
    0 8px 16px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 14px rgba(68, 176, 255, 0.34);
}

.talentNode.is-left.is-unlocked{
  border-color: rgba(118, 204, 255, 0.72);
  background:
    radial-gradient(130% 130% at 20% 0%, rgba(96, 186, 255, 0.34), rgba(255,255,255,.02) 55%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(14,40,70,.95), rgba(8,24,46,.97));
  box-shadow:
    0 9px 16px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 18px rgba(78, 188, 255, 0.46);
}

.talentNode.is-left.is-active{
  border-color: rgba(142, 220, 255, 0.96);
  box-shadow:
    0 10px 18px rgba(0,0,0,.46),
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 20px rgba(88, 196, 255, 0.5);
  background:
    radial-gradient(130% 130% at 20% 0%, rgba(124, 210, 255, 0.5), rgba(255,255,255,.03) 55%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(16,50,86,.95), rgba(10,30,56,.97));
}

.talentNode.is-right.is-locked{
  border-color: rgba(255, 126, 126, 0.42);
  background:
    radial-gradient(130% 130% at 20% 0%, rgba(255, 98, 98, 0.22), rgba(255,255,255,.01) 55%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(52,18,24,.94), rgba(34,10,14,.96));
  box-shadow:
    0 8px 16px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 14px rgba(255, 88, 88, 0.34);
}

.talentNode.is-right.is-unlocked{
  border-color: rgba(255, 132, 132, 0.72);
  background:
    radial-gradient(130% 130% at 20% 0%, rgba(255, 108, 108, 0.34), rgba(255,255,255,.02) 55%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(74,22,30,.95), rgba(50,12,18,.97));
  box-shadow:
    0 9px 16px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 18px rgba(255, 92, 92, 0.46);
}

.talentNode.is-right.is-active{
  border-color: rgba(255, 158, 158, 0.96);
  box-shadow:
    0 10px 18px rgba(0,0,0,.46),
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 0 20px rgba(255, 92, 92, 0.5);
  background:
    radial-gradient(130% 130% at 20% 0%, rgba(255, 132, 132, 0.5), rgba(255,255,255,.03) 55%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(92,28,38,.95), rgba(62,16,24,.97));
}

.talentTreeWeb{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.talentTierGroup{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.talentTierTitle{
  margin: 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,232,211,.72);
}

.talentListGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.talentListItem{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  text-align: left;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.talentListItem.is-locked{
  opacity: .6;
  filter: grayscale(.7);
}

.talentListItem.is-active{
  border-color: rgba(255,220,154,.56);
  box-shadow: 0 0 18px rgba(255,184,77,.18);
}

.talentListHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.talentListName{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.talentListState{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(240,226,201,.82);
}

.talentListDesc,
.talentReq{
  font-size: 11px;
  line-height: 1.35;
  color: rgba(238,230,216,.78);
}

.talentTagRow{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.talentTag{
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,.24);
  background: rgba(255,184,77,.08);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(247,226,187,.9);
}


.runeHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140% 140% at 10% 0%, rgba(255,184,77,.12), transparent 60%),
    linear-gradient(180deg, rgba(14,17,27,.92), rgba(9,10,16,.94));
  box-shadow: 0 10px 22px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.32) inset;
}

.runeHeaderLeft{
  display:flex;
  align-items:center;
  gap:8px;
}

.runeHeaderRight{
  display:flex;
  align-items:center;
  gap:8px;
}

.runeGateBtn{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,.35);
  background: rgba(255,184,77,.10);
  color: #ffdfb0;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,.24);
}

.runeGateBtn:hover{
  background: rgba(255,184,77,.16);
}

.runeGateBtn.is-back{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(245,235,221,.88);
}

.runeBoxView{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.runeGatesView{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.runeGatesHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140% 140% at 10% 0%, rgba(255,184,77,.10), transparent 60%),
    linear-gradient(180deg, rgba(14,17,27,.92), rgba(9,10,16,.94));
  box-shadow: 0 10px 22px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.32) inset;
}

.runeGatesTitle{
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,223,176,.9);
}

.runeGatesSection{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.runeGatesSectionTitle{
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,235,221,.75);
}

.runeProgress{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,.35);
  background: rgba(255,184,77,.10);
  color: #ffdfb0;
  font-weight: 750;
  letter-spacing: .04em;
}

.runeGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap:10px;
}

.runeSlot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding: 10px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(140% 160% at 16% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(20,24,34,.92), rgba(12,14,20,.94));
  box-shadow: 0 12px 24px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.32) inset;
  text-align:center;
}

.runeSlot.is-missing{
  opacity: 0.55;
  filter: grayscale(0.55);
}

.runeIcon{
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,184,77,.28);
  background: rgba(255,184,77,.08);
  box-shadow: 0 8px 14px rgba(0,0,0,.28);
}

.runeIcon img{
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}

.runeUnknown{
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,223,176,.8);
}

.runeName{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(233,226,217,.82);
}

.runeMasterNote{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,.35);
  background: rgba(255,184,77,.14);
  color: #ffdfb0;
  font-weight: 750;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 16px rgba(0,0,0,.26);
}

.runeKeysHeader{
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,235,221,.75);
}

.runeKeysList{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.runeCatalystList,
.runePortalList{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.runeGateCard{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(18,22,34,.9), rgba(10,12,18,.95));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.runeGateTitle{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,223,176,.9);
  font-weight: 800;
}

.runeGateMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size: 11px;
  color: rgba(233,226,217,.7);
}

.runeGateStatus{
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,.24);
  background: rgba(255,184,77,.06);
  color: rgba(233,226,217,.8);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10px;
}

.runeGateActionBtn{
  padding: 6px 10px;
  font-size: 11px;
  align-self: flex-end;
}

.runeGateActionBtn:disabled{
  opacity: 0.6;
  cursor: default;
}

.runeKeyCard{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(18,22,34,.9), rgba(10,12,18,.95));
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.runeKeyIconWrap{
  width: 56px;
  min-width: 56px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255,184,77,.18);
  background: rgba(255,184,77,.06);
  padding: 6px;
}

.runeKeyIconWrap.is-empty{
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}

.runeKeyTitle{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,223,176,.9);
  font-weight: 800;
}

.runeKeyContent{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.runeKeyIcon{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.runeGateSlots{
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 6px 0 4px 0;
}

.runeGateSlot{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,184,77,.22);
  background: rgba(255,184,77,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.runeGateSlot.is-missing{
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  opacity: 0.6;
}

.runeGateSlot img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.runeGateSlotCount{
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(12,16,26,.92);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,245,220,.95);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

.runeKeyRunes{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.runeKeyRuneSlot{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,184,77,.22);
  background: rgba(255,184,77,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.runeKeyRuneSlot.is-missing{
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  opacity: 0.6;
}

.runeKeyRuneSlot img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.runeKeyActions{
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.runeKeyStatus{
  font-size: 11px;
  color: rgba(233,226,217,.7);
}

.runeKeyBtn{
  padding: 6px 10px;
  font-size: 11px;
}

.runeKeyBtn.is-forged{
  opacity: 0.6;
  cursor: default;
}

@keyframes inventoryFade{
  from{ opacity:0; transform: translateY(4px); }
  to{ opacity:1; transform: translateY(0); }
}

.deckHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding: 8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140% 140% at 10% 0%, rgba(255,184,77,.10), transparent 60%),
    linear-gradient(180deg, rgba(14,17,27,.92), rgba(9,10,16,.94));
  box-shadow: 0 10px 22px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.32) inset;
}

.deckCount{
  font-weight: 750;
  letter-spacing: .04em;
}

.inventoryBody,
.deckLibraryBody{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.inventoryEmpty,
.minDeckWarning{
  border-radius: 10px;
  border: 1px solid rgba(255,184,77,.30);
  background: rgba(255,184,77,.08);
  padding: 10px;
  color: #ffdfb0;
  font-size: 13px;
  box-shadow: 0 8px 16px rgba(0,0,0,.26);
}

.inventoryItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(140% 160% at 16% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(20,24,34,.92), rgba(12,14,20,.94));
  box-shadow: 0 12px 24px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.32) inset;
}

.inventoryItemIcon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,184,77,.32);
  background: rgba(255,184,77,.12);
  color: #ffcd73;
  box-shadow: 0 8px 14px rgba(0,0,0,.28);
  font-size: 14px;
}

.inventoryItemName{
  font-weight: 750;
  letter-spacing: .03em;
}

.mirrorInventoryIntro{
  margin-bottom: 4px;
  opacity: 0.9;
}

.mirrorInventoryList{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

button.inventoryItem.mirrorItem{
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

button.inventoryItem.mirrorItem:disabled{
  opacity: 0.55;
  filter: grayscale(0.24);
}

/* --- Hand --- */
.hand{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: 1fr;
  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;

  width: 100%;
  max-width: 100%;

  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  align-content: start;
}
.hand .card{ scroll-snap-align: start; }

/* --- Cards --- */
.card{
  width: 210px;
  text-transform: none;
  letter-spacing: normal;
  background:
    radial-gradient(160% 140% at 15% 0%, rgba(255,184,77,.07) 0%, rgba(255,255,255,.02) 35%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, var(--card0) 0%, var(--card1) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
  box-shadow: 0 14px 26px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.35) inset;
  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}


.card.disabled{ opacity:0.45; }

.card .row{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.card .name{ font-weight: 750; line-height: 1.1; }
.card .text{ margin-top:8px; color:#d6d6d6; font-size: 13px; line-height: 1.25; }

.cardTopLine{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cardTopMain{
  min-width: 0;
  flex: 1;
}

.handCardArt{
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.24);
  box-shadow: 0 8px 14px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.34) inset;
  overflow: hidden;
}

.handCardArt img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* --- Card rarity (border + glow only; no size changes) --- */
.card{
  /* rarity defaults */
  --r-border: rgba(255,255,255,.08);
  --r-inset: rgba(0,0,0,.35);
  --r-glow: rgba(0,0,0,0);

  border-color: var(--r-border);
  box-shadow:
    0 14px 26px rgba(0,0,0,.38),
    0 0 0 1px var(--r-inset) inset,
    0 0 18px var(--r-glow);
}

/* Set rarity colors (no sizing changes) */
.card.r-common{
  --r-border: rgba(207,214,230,.18);
  --r-glow: rgba(207,214,230,.06);
}
.card.r-uncommon{
  --r-border: rgba(105,219,124,.32);
  --r-glow: rgba(105,219,124,.14);
}
.card.r-rare{
  --r-border: rgba(255,212,59,.38);
  --r-glow: rgba(255,212,59,.16);
}

/* Keep hover feel, preserve rarity glow */
.card:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--r-border) 55%, rgba(255,184,77,.30));
  box-shadow:
    0 18px 34px rgba(0,0,0,.46),
    0 0 0 1px var(--r-inset) inset,
    0 0 22px var(--r-glow),
    0 0 22px rgba(255,184,77,.06);
}

/* --- Card Type Backgrounds --- */
.card[data-type="attack"],
.card.type-attack{
  background:
    linear-gradient(180deg, rgba(8,10,16,.34), rgba(8,10,16,.40)),
    url("./data/cards/bg_attack.svg") center/cover no-repeat,
    radial-gradient(150% 120% at 15% 0%, rgba(255,96,112,.16) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.30) 100%),
    linear-gradient(150deg, rgba(78,22,30,.32), transparent 60%),
    linear-gradient(180deg, var(--card0) 0%, var(--card1) 100%);
}

.card[data-type="block"],
.card.type-block{
  background:
    linear-gradient(180deg, rgba(8,10,16,.34), rgba(8,10,16,.40)),
    url("./data/cards/bg_block.svg") center/cover no-repeat,
    radial-gradient(150% 120% at 15% 0%, rgba(90,166,232,.15) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.30) 100%),
    linear-gradient(150deg, rgba(20,40,68,.30), transparent 60%),
    linear-gradient(180deg, var(--card0) 0%, var(--card1) 100%);
}

.card[data-type="skill"],
.card.type-skill{
  background:
    linear-gradient(180deg, rgba(8,10,16,.34), rgba(8,10,16,.40)),
    url("./data/cards/bg_skill.svg") center/cover no-repeat,
    radial-gradient(150% 120% at 15% 0%, rgba(138,166,250,.15) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.30) 100%),
    linear-gradient(150deg, rgba(30,46,78,.30), transparent 60%),
    linear-gradient(180deg, var(--card0) 0%, var(--card1) 100%);
}

.card[data-type="power"],
.card.type-power{
  background:
    linear-gradient(180deg, rgba(8,10,16,.34), rgba(8,10,16,.40)),
    url("./data/cards/bg_power.svg") center/cover no-repeat,
    radial-gradient(150% 120% at 15% 0%, rgba(210,168,84,.15) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.30) 100%),
    linear-gradient(150deg, rgba(74,54,22,.28), transparent 60%),
    linear-gradient(180deg, var(--card0) 0%, var(--card1) 100%);
}

/* Card-specific art direction overrides */
.card[data-card-id="guard"]{
  background:
    linear-gradient(180deg, rgba(8,10,16,.36), rgba(8,10,16,.42)),
    url("./data/cards/bg_guard.svg") center/cover no-repeat,
    radial-gradient(150% 120% at 15% 0%, rgba(88,176,248,.20) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.30) 100%),
    linear-gradient(150deg, rgba(24,48,82,.36), transparent 60%),
    linear-gradient(180deg, var(--card0) 0%, var(--card1) 100%);
}

.card[data-card-id="guard"] .name{
  color: #d0ebff;
  text-shadow: 0 1px 0 rgba(0,0,0,.78), 0 0 12px rgba(77,171,247,.20);
}

.card[data-card-id="heal"]{
  background:
    linear-gradient(180deg, rgba(8,10,16,.36), rgba(8,10,16,.42)),
    url("./data/cards/bg_mend.svg") center/cover no-repeat,
    radial-gradient(150% 120% at 15% 0%, rgba(112,210,130,.20) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.30) 100%),
    linear-gradient(150deg, rgba(20,64,38,.34), transparent 60%),
    linear-gradient(180deg, var(--card0) 0%, var(--card1) 100%);
}

.card[data-card-id="heal"] .name{
  color: #d3f9d8;
  text-shadow: 0 1px 0 rgba(0,0,0,.78), 0 0 12px rgba(105,219,124,.22);
}

/* Badge cluster */
.badges{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.badge{
  border:1px solid rgba(255,255,255,.10);
  padding:2px 8px;
  border-radius:999px;
  color:var(--ink);
  background: rgba(0,0,0,.18);
  font-size: 12px;
}
.badge.cost{ min-width: 22px; text-align:center; padding:2px 8px; }
.badge.type, .badge.rarity{ text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }

/* Type tints */
.badge.type.attack { border-color: rgba(255,107,107,.55); color: #ffd6d6; background: rgba(255,107,107,.08); }
.badge.type.skill  { border-color: rgba(77,171,247,.55); color: #d0ebff; background: rgba(77,171,247,.08); }
.badge.type.power  { border-color: rgba(177,151,252,.55); color: #ece3ff; background: rgba(177,151,252,.08); }
.badge.type.weapon { border-color: rgba(255,212,59,.55); color: #fff3bf; background: rgba(255,212,59,.10); }
.badge.type.shield { border-color: rgba(77,171,247,.55); color: #d0ebff; background: rgba(77,171,247,.08); }
.badge.type.armor  { border-color: rgba(186,200,214,.55); color: #e3e9f4; background: rgba(186,200,214,.08); }
.badge.type.rune   { border-color: rgba(177,151,252,.55); color: #ece3ff; background: rgba(177,151,252,.08); }
.badge.type.item   { border-color: rgba(207,214,230,.45); color: #cfd6e6; background: rgba(207,214,230,.06); }

/* Rarity tints */
.badge.rarity.common   { border-color: rgba(207,214,230,.45); color: #cfd6e6; background: rgba(207,214,230,.06); }
.badge.rarity.uncommon { border-color: rgba(105,219,124,.55); color: #d3f9d8; background: rgba(105,219,124,.08); }
.badge.rarity.rare     { border-color: rgba(255,212,59,.60); color: #fff3bf; background: rgba(255,212,59,.10); }

/* Ability icons (sigils) */
.abilityIcons{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.abilityIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 8px 16px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.35) inset;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-0.5px);
}

/* Keyword styling */
.kw-damage{ font-weight: 700; color: #ff6b6b; }
.kw-block{ font-weight: 700; color: #4dabf7; }
.kw-heal{ font-weight: 700; color: #69db7c; }
.kw-draw{ font-weight: 700; color: #ffd43b; }
.kw-energy{ font-weight: 700; color: #b197fc; }
.kw-vulnerable{ font-weight: 700; color: #ffa94d; }
.kw-weak{ font-weight: 700; color: #ffd8a8; }

/* --- Actor layout + Portraits --- */
.actorRow{ display:flex; align-items:flex-start; gap:14px; margin: 6px 0 10px 0; }
.actorInfo{ flex:1; min-width:0; }
.actorInfo .mono{ margin-top:2px; }

body.mode-combat .panel-enemy .actorInfo,
body.mode-debug.in-battle .panel-enemy .actorInfo{
  border: 1px solid rgba(255,107,107,.42);
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255,107,107,.08), rgba(0,0,0,.16));
  box-shadow: 0 0 0 1px rgba(0,0,0,.30) inset, 0 10px 18px rgba(0,0,0,.24);
}

body.mode-combat .panel-player .actorInfo,
body.mode-debug.in-battle .panel-player .actorInfo{
  border: 1px solid rgba(77,171,247,.45);
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(77,171,247,.09), rgba(0,0,0,.16));
  box-shadow: 0 0 0 1px rgba(0,0,0,.30) inset, 0 10px 18px rgba(0,0,0,.24);
}

.turnRecapWrap{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 8px;
  width: 100%;
  align-self: stretch;
}

.turnRecapHeader{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233,226,217,.76);
  margin-bottom: 6px;
}

.turnRecap{
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(16,19,28,.88), rgba(8,10,16,.9));
  box-shadow: 0 0 0 1px rgba(7,12,20,.6) inset;
  font-size: 12px;
  line-height: 1.35;
  color: #d7ecff;
}

.turnRecapLine{
  border-radius: 8px;
  padding: 6px 8px;
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

.turnRecapLine.player{
  border: 1px solid rgba(98,168,255,.45);
  background: linear-gradient(180deg, rgba(40,78,132,.35), rgba(17,30,53,.40));
  color: #cfe9ff;
}

.turnRecapLine.enemy{
  border: 1px solid rgba(255,96,96,.45);
  background: linear-gradient(180deg, rgba(126,41,41,.34), rgba(52,20,20,.42));
  color: #ffd2d2;
}

.turnRecapLine + .turnRecapLine{
  margin-top: 6px;
}

.turnValAttack{
  color: #ff6f6f;
  text-shadow: 0 0 10px rgba(255,81,81,.35);
}

.turnValBlock{
  color: #72beff;
  text-shadow: 0 0 10px rgba(77,171,247,.35);
}

.turnValEffect{
  color: #ffd966;
  text-shadow: 0 0 10px rgba(255,212,59,.35);
}

.turnValHeal{
  color: #7fe4a5;
  text-shadow: 0 0 10px rgba(105,219,124,.35);
}

.portraitStack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width: 126px;
  flex-shrink: 0;
}

.portraitTitle{
  min-height: 14px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,.45);
  background: rgba(255,184,77,.14);
  color: #ffdfb0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  display:none;
  align-items:center;
  justify-content:center;
}

.portraitTitle.is-active{
  display:inline-flex;
}

.portraitTitle.soulcollector{
  border-color: rgba(177,151,252,.72);
  background: rgba(177,151,252,.24);
  color: #e6dcff;
  box-shadow: 0 0 0 1px rgba(76,53,133,.35) inset, 0 6px 14px rgba(76,53,133,.25);
}

.portraitMetaIcons{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
}

.portraitMetaIcon{
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(182,206,238,.30);
  background: rgba(8,12,20,.58);
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.28) inset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portraitMetaIcon img{
  position: relative;
  z-index: 1;
  width: 39px;
  height: 39px;
  object-fit: contain;
  display: block;
}

.portraitMetaIcon.is-origin::before,
.portraitMetaIcon.is-origin::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.portraitMetaIcon.is-origin::after{
  width: 162%;
  height: 162%;
}

.portraitMetaIcon.is-origin.is-aegis::before{
  background-image: url("./data/ui/talent_ring_red.webp");
  opacity: .58;
  animation: talentRingSpinCW 6.2s linear infinite;
}

.portraitMetaIcon.is-origin.is-aegis::after{
  background-image: url("./data/ui/talent_ring_blue.webp");
  opacity: .52;
}

.portraitMetaIcon.is-origin.is-ruin::before{
  background-image: url("./data/ui/talent_ring_blue.webp");
  opacity: .58;
  animation: talentRingSpinCW 6.2s linear infinite;
}

.portraitMetaIcon.is-origin.is-ruin::after{
  background-image: url("./data/ui/talent_ring_red.webp");
  opacity: .52;
}

.portraitMetaIcon.is-origin.is-locked::before{
  background-image: url("./data/ui/talent_ring_blue.webp");
  opacity: .34;
}

.portraitMetaIcon.is-origin.is-locked::after{
  background-image: url("./data/ui/talent_ring_red.webp");
  opacity: .24;
}

.portraitMetaIcon.is-oath{
  border-color: rgba(255,184,77,.40);
  background:
    radial-gradient(140% 140% at 0% 0%, rgba(255,184,77,.18), rgba(255,184,77,.03) 55%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, rgba(18,14,8,.88), rgba(10,9,6,.94));
}

.portraitMetaIcon.is-proc{
  border-color: rgba(170,188,208,.34);
  background:
    radial-gradient(140% 140% at 0% 0%, rgba(196,210,232,.14), rgba(196,210,232,.02) 55%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(11,14,22,.9), rgba(8,10,16,.94));
}

.portraitMetaIcon.is-proc.is-aegis{
  border-color: rgba(120,198,255,.36);
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 0 1px rgba(36,85,128,.35) inset;
  color: rgba(186,232,255,.92);
}

.portraitMetaIcon.is-proc.is-ruin{
  border-color: rgba(255,142,106,.36);
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 0 1px rgba(132,64,42,.35) inset;
  color: rgba(255,220,198,.92);
}

.portraitMetaIcon.is-proc.is-inactive{
  opacity: .62;
  filter: saturate(0.82) brightness(0.86);
}

.portraitMetaIcon.is-proc.is-active{
  opacity: 1;
  filter: saturate(1.08) brightness(1.06);
  animation: procIconPop 920ms ease-out 1;
}

.portraitMetaIcon.is-proc.is-aegis.is-active{
  border-color: rgba(146,214,255,.62);
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 0 1px rgba(56,112,158,.48) inset, 0 0 16px rgba(116,196,255,.34);
}

.portraitMetaIcon.is-proc.is-ruin.is-active{
  border-color: rgba(255,164,132,.62);
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 0 1px rgba(144,74,50,.48) inset, 0 0 16px rgba(255,132,98,.34);
}

.procGlyphSvg{
  width: 32px;
  height: 32px;
  display: block;
}

.procGlyphSvg path,
.procGlyphSvg circle,
.procGlyphSvg line{
  fill: currentColor;
  stroke: currentColor;
}

@keyframes procIconPop{
  0%{ transform: scale(0.94); }
  32%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .portraitMetaIcon.is-origin.is-aegis::before,
  .portraitMetaIcon.is-origin.is-ruin::before{
    animation: none;
  }
}

.portrait{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

/* Decorative frame */
.portraitFrame{
  position: relative;
  width: 74px;
  height: 74px;
  padding: 4px;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(0,0,0,.20) 100%),
    linear-gradient(180deg, rgba(255,212,59,.10), rgba(177,151,252,.08));
  border: 1px solid rgba(255,212,59,.28);
  box-shadow: 0 12px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.portraitFrame::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  pointer-events:none;
}
.portraitFrame .portrait{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  position: relative;
  z-index: 1;
}

.portraitFrame.has-badge{
  overflow: visible;
}

.runemasterBadge{
  position: absolute;
  top: -8px;
  left: -8px;
  width: 46px;
  height: 46px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: url("./data/ui/runes/runemaster_badge.webp") center/contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  cursor: pointer;
  display: none;
  z-index: 2;
}

.portraitFrame.runemaster .runemasterBadge{
  display: inline-flex;
}

.portraitFrame.soulcollector .runemasterBadge{
  display: inline-flex;
  background-image: url("./data/ui/soul_collector_badge.webp");
}

.soulCardBody{
  display: flex;
  align-items: center;
  gap: 10px;
}

.soulIconWrap{
  width: 54px;
  min-width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(255,184,77,.25);
  background: rgba(255,184,77,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.soulIconWrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.soulIconFallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,223,176,.92);
  font-size: 24px;
  font-weight: 800;
}

.cosmeticOption{
  --cosmetic-accent: rgba(255,255,255,.16);
  border-radius: 12px;
  border: 1px solid var(--cosmetic-accent);
  background:
    radial-gradient(120% 120% at 10% 0%, color-mix(in srgb, var(--cosmetic-accent) 35%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(18,22,34,.9), rgba(10,12,18,.95));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.cosmeticOption[data-cosmetic="runemaster"]{
  --cosmetic-accent: rgba(255,212,59,.52);
}

.cosmeticOption[data-cosmetic="soul_collector"]{
  --cosmetic-accent: rgba(177,151,252,.54);
}

.cosmeticOptionMain{
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.cosmeticOptionMain.no-badge{
  align-items: center;
}

.cosmeticBadgeWrap{
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--cosmetic-accent) 72%, rgba(255,255,255,.18));
  background: rgba(0,0,0,.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.34) inset;
  overflow: hidden;
}

.cosmeticBadgeThumb{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cosmeticBadgeThumb--none{
  color: rgba(255,255,255,.60);
  font-weight: 700;
}

.cosmeticOptionInfo{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.cosmeticOption .runeKeyBtn{
  align-self: flex-start;
  border-color: color-mix(in srgb, var(--cosmetic-accent) 78%, rgba(255,255,255,.16));
  background:
    radial-gradient(130% 170% at 14% 0%, color-mix(in srgb, var(--cosmetic-accent) 34%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(22,26,38,.95), rgba(12,14,22,.96));
  color: color-mix(in srgb, var(--cosmetic-accent) 80%, #fff 20%);
  box-shadow: 0 10px 20px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.38) inset;
}

.cosmeticOption .runeKeyBtn:hover{
  border-color: color-mix(in srgb, var(--cosmetic-accent) 92%, #fff 8%);
  box-shadow: 0 12px 22px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.36) inset, 0 0 14px color-mix(in srgb, var(--cosmetic-accent) 34%, transparent);
}

.cosmeticOption .runeKeyBtn.is-forged{
  opacity: .72;
}

.runemasterBadge:focus-visible{
  outline: 2px solid rgba(255,184,77,.65);
  outline-offset: 2px;
}


/* Larger framed portraits in actor panels */
.portraitFrame.actorPortraitFrame{ width:126px; height:126px; padding:6px; border-radius:24px; }
.portraitFrame.actorPortraitFrame .portrait{ width:112px; height:112px; border-radius:18px; }


/* --- Buff/Debuff chips --- */
.effectsRow{ display:flex; flex-wrap:wrap; gap:6px; margin: 8px 0 10px 0; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  font-size: 12px;
  line-height: 1.2;
  color:var(--ink);
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.35) inset;
}
.chip .i{ display:inline-flex; width: 16px; justify-content:center; align-items:center; font-size: 13px; line-height: 1; transform: translateY(-0.5px); }
.chip .k{ font-weight: 750; letter-spacing: .2px; }
.chip .v{ opacity: .95; }

.chip.status{ border-color: rgba(77,171,247,.28); background: rgba(77,171,247,.06); color:#d0ebff; }
.chip.power{ border-color: rgba(177,151,252,.28); background: rgba(177,151,252,.06); color:#ece3ff; }

.chip.status.status-vulnerable{ border-color: rgba(255,169,77,.65); background: rgba(255,169,77,.08); color: #fff0db; }
.chip.status.status-weak{ border-color: rgba(255,216,168,.55); background: rgba(255,216,168,.08); color: #fff7ed; }
.chip.status.status-enraged{ border-color: rgba(255,77,91,.55); background: rgba(255,77,91,.08); color: #ffe3e6; }

/* --- Enemy Intent --- */
#enemyIntent{
  margin-top: 8px;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--ink);
}
#enemyIntent::before{
  content: "INTENT";
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
  opacity: .75;
  padding: 2px 6px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
#enemyIntent[data-type="attack"]{
  border-color: rgba(255,77,91,.55);
  background: rgba(255,77,91,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.30), 0 0 18px rgba(255,77,91,.12);
}

/* Coordinated Fury intent: treat visually like an Attack (red, glowy) */
#enemyIntent[data-type="coordinated_fury"]{
  color: #ff6b6b;
  border-color: rgba(255,107,107,65);
  box-shadow: 0 0 12px rgba(255,107,107,25);
}

#enemyIntent[data-type="block"]{
  border-color: rgba(77,171,247,.55);
  background: rgba(77,171,247,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.30), 0 0 18px rgba(77,171,247,.12);
}
#enemyIntent[data-type="lifesteal"]{
  border-color: rgba(177,151,252,.55);
  background: rgba(177,151,252,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.30), 0 0 18px rgba(177,151,252,.12);
}

#enemyIntent[data-type="dodge"]{
  border-color: rgba(170,220,255,.56);
  background: rgba(170,220,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.30), 0 0 18px rgba(170,220,255,.12);
}

#enemyIntent[data-type="counter"]{
  border-color: rgba(255,214,102,.58);
  background: rgba(255,214,102,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.30), 0 0 18px rgba(255,214,102,.14);
}

#enemyIntent[data-brace="1"]::after{
  content: "BRACEABLE";
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .7px;
  opacity: .86;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,.42);
  background: rgba(255,184,77,.12);
}

#enemyIntent[data-type="none"]{ opacity: .75; }

/* --- Logo panel --- */
.logoPanel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
}
.logoPanelImg{
  width: 100%;
  max-width: 320px;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

/* --- Start Screen --- */
.startScreen{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px 14px calc(14px + var(--safe-bottom));
  background: #0b0b10 url("./data/ui/load_poster.webp") center/cover no-repeat;
}

.startVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: #0b0b10 url("./data/ui/load_poster.webp") center/cover no-repeat;
  opacity: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
  z-index: 0;
}


.startVideoMask{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #0b0b10 url("./data/ui/load_poster.webp") center/cover no-repeat;
  opacity: 1;
  transition: opacity 1200ms ease;
  pointer-events: none;
  will-change: opacity;
}

.startVideoMask.is-hidden{
  opacity: 0;
}


.startVideoWrap{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.startCard{
  width: min(720px, 92vw);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.15) 100%),
    linear-gradient(180deg, rgba(10,12,18,.6), rgba(5,6,11,.8));
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  padding: 18px;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.webStartLogo{
  display: none;
}

html[data-ui="web"] .startScreen{
  background: transparent;
}

body[data-ui="web"].start-endless .startScreen,
html[data-ui="web"].start-endless .startScreen{
  background: #06090f url("./data/ui/webui_background.webp") center/cover no-repeat;
}

body[data-ui="web"].start-endless .startVideo,
html[data-ui="web"].start-endless .startVideo,
body[data-ui="web"].start-endless .startVideoMask,
html[data-ui="web"].start-endless .startVideoMask{
  background: #06090f url("./data/ui/webui_background.webp") center/cover no-repeat;
}

html[data-ui="web"] .startVideoWrap{
  display: none;
}

html[data-ui="web"] .webStartLogo{
  display: block;
  width: min(760px, 92vw);
  max-height: 260px;
  object-fit: contain;
}

html[data-ui="web"] .startScreenTitle,
html[data-ui="web"] .startScreenSubtitle{
  display: none;
}

html[data-ui="web"] .startCard{
  width: min(760px, 92vw);
}

html[data-ui="web"] .startPreviewPanel{
  max-width: 660px;
}

html[data-ui="web"] #btnStartFullscreen{
  display: none;
}

.startScreenTitle{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #f1ddc6;
  text-align: center;
}

.startScreenSubtitle{
  font-size: 13px;
  color: rgba(233,226,217,.86);
  text-align: center;
  max-width: 520px;
}

.startButtons{ display:flex; gap: 12px; flex-wrap: wrap; justify-content:center; width: 100%; }

.startScreen .startButtons button{
  font-size: 12px;
  padding: 8px 10px;
  letter-spacing: 0.06em;
}

.startPreviewPanel{
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,220,156,0.20);
  background:
    radial-gradient(140% 180% at 0% 0%, rgba(255,188,96,0.14), transparent 54%),
    radial-gradient(140% 180% at 100% 0%, rgba(120,178,255,0.10), transparent 58%),
    linear-gradient(180deg, rgba(16,20,32,0.88), rgba(9,12,20,0.94));
  box-shadow:
    0 18px 36px rgba(0,0,0,0.34),
    0 0 0 1px rgba(0,0,0,0.30) inset,
    0 0 20px rgba(255,188,96,0.08);
}

.startPreviewBadges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.startPreviewBadge{
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,220,156,0.26);
  background: linear-gradient(180deg, rgba(255,196,112,0.14), rgba(116,168,240,0.08));
  color: rgba(247,232,206,0.94);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.startPreviewLead{
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(236,229,217,0.92);
}

.startPreviewActions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.startLinkButton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(16,20,32,0.96), rgba(7,10,18,0.98));
  color: rgba(245,245,255,0.96);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0,0,0,0.44);
  transition: transform .06s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}

.startLinkButton:hover{
  transform: translateY(-1px);
  border-color: rgba(255,184,77,.32);
  box-shadow: 0 14px 28px rgba(0,0,0,.48), 0 0 18px rgba(255,184,77,.10);
}

.startLinkButtonPrimary{
  border-color: rgba(255,184,77,0.38);
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(255,184,77,.20), transparent 58%),
    linear-gradient(180deg, rgba(54,32,20,0.96), rgba(25,14,11,0.98));
  color: rgba(255,238,214,0.98);
}

.startPreviewMeta{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(208,216,232,0.82);
}

.startInstallGuide{
  border-top: 1px solid rgba(255,220,156,0.14);
  padding-top: 10px;
}

.startInstallGuide summary{
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,226,180,0.92);
}

.startInstallGuide summary::-webkit-details-marker{
  display: none;
}

.startInstallGuide summary::after{
  content: " +";
  color: rgba(144,192,255,0.92);
}

.startInstallGuide[open] summary::after{
  content: " -";
}

.startInstallGuide ol,
.startInstallGuide p{
  margin: 10px 0 0;
  color: rgba(229,235,246,0.90);
  font-size: 12px;
  line-height: 1.5;
}

.startInstallGuide ol{
  padding-left: 18px;
}

.startInstallGuide strong{
  color: rgba(255,227,182,0.98);
}

.startVersion{
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(224,232,246,0.72);
}

.lightningCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.startCard{
  position: relative;
  z-index: 1;
}

.startScreen::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.85) 100%);
  z-index: 1;
  pointer-events: none;
}


body.start-endless #btnStartNew,
body.start-endless #btnStartDebug,
body.start-endless #btnStartHelp{
  display: none !important;
}

body.start-endless #btnStartLoad{
  width: min(420px, 100%);
  font-size: 14px;
}


#btnStartDebug{
  display: none;
}

body.debug-start-unlocked #btnStartDebug{
  display: inline-flex;
}


.gameScreen{ display:none; position: relative; opacity: 1; transition: opacity 200ms ease; }
.gameScreen.is-node-fading{ opacity: 0; }
body.is-started .startScreen{ display:none; }
body.is-started .gameScreen{ display:block; }
body:not(.is-started) .topbar{ display:none; }

/* --- Screen modes --- */
body.mode-story .titleEnemy,
body.mode-story .titlePlayer,
body.mode-story #enemyIntent,
body.mode-story #hand,
body.mode-story #btnEndTurn,
body.mode-story #log{
  display:none;
}
body.mode-combat #storyChoices{ display:none; }

/* --- Debug mode shows everything --- */
body.mode-debug #storyText,
body.mode-debug #storyChoices,
body.mode-debug #hand,
body.mode-debug #log,
body.mode-debug #enemyIntent,
body.mode-debug #enemyStatuses,
body.mode-debug #enemyPowers,
body.mode-debug #playerStatuses,
body.mode-debug #playerPowers,
body.mode-debug #rewards,
body.mode-debug #runInfo,
body.mode-debug #nodeInfo,
body.mode-debug #btnDraw,
body.mode-debug #btnEndTurn{
  display: revert !important;
}

/* --- Story Image --- */
.storyImage{
  display: none;              /* only shown when a story image resolves */
  width: 100%;
  height: auto;
  max-height: 240px;          /* taller for humanoid figures */
  object-fit: contain;        /* avoid chopping heads/feet */
  margin: 8px 0 12px 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.45));
}

.storyImage--shrine{
  filter:
    drop-shadow(0 0 18px rgba(255,224,176,.35))
    drop-shadow(0 0 40px rgba(255,205,120,.22));
  animation: shrinePulse 3.6s ease-in-out infinite;
}

@keyframes shrinePulse{
  0%{
    filter:
      drop-shadow(0 0 14px rgba(255,224,176,.25))
      drop-shadow(0 0 30px rgba(255,205,120,.18));
  }
  50%{
    filter:
      drop-shadow(0 0 28px rgba(255,224,176,.55))
      drop-shadow(0 0 64px rgba(255,205,120,.35));
  }
  100%{
    filter:
      drop-shadow(0 0 14px rgba(255,224,176,.25))
      drop-shadow(0 0 30px rgba(255,205,120,.18));
  }
}

/* --- Shrine story variant --- */
body.mode-shrine .panel-story{
  --shrine-stack-gap: clamp(4px, 1.2vh, 10px);
  --shrine-choice-gap: clamp(2px, 0.6vh, 6px);
  --shrine-button-height: clamp(42px, 6vh, 69px);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,9,13,0.78), rgba(7,8,11,0.90)),
    url("./data/story/shrine_bg.webp") center/cover no-repeat;
  border-color: rgba(255,205,130,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.60), 0 0 24px rgba(255,205,130,.12);
}

.shrineImageWrap{
  position: relative;
  width: 100%;
}

.shrineImageWrap .storyImage{
  position: relative;
  z-index: 1;
}
body.mode-shrine .panel-story > *{
  position: relative;
  z-index: 1;
}

body.mode-shrine #shrineParticles{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.shrineGlowCircle{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 36px);
  height: var(--size, 36px);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--s0, 0.35));
  background:
    radial-gradient(circle at 50% 50%, rgba(255,248,220,.85) 0%, rgba(255,214,140,.34) 38%, rgba(255,168,78,0) 72%);
  filter: blur(0.3px) drop-shadow(0 0 12px rgba(255,198,110,.38));
  animation: shrineGlowPulse ease-out infinite;
}

@keyframes shrineGlowPulse{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--s0, 0.35));
  }
  30%{
    opacity: .9;
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--s1, 1.35));
  }
}

body.mode-shrine .panel-story .titleStory{
  display: none;
}

body.mode-shrine #locationHeader{
  margin: 2px 0 var(--shrine-stack-gap) 0;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: url("./data/story/shrine_title.webp") center/100% 100% no-repeat;
  box-shadow: none;
  text-align: center;
}

body.mode-shrine #locationHeader .locationName{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(247,236,221,.98);
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  display: inline-block;
  transform: translateY(-2px);
}

body.mode-shrine #storyImage{
  display: block;
  margin: 0 0 var(--shrine-stack-gap) 0;
}

body.mode-shrine #storyText{
  display: none;
}

body.mode-shrine #storyChoices{
  margin-top: 0;
  gap: var(--shrine-choice-gap);
}

body.mode-shrine #storyChoices .choiceBtn{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,214,150,.28);
  background: linear-gradient(180deg, #2b2117, #1a120c);
  box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.55) inset;
  min-height: var(--shrine-button-height);
  padding: 6px 14px 16px;
  color: #f2d7a7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1.15;
  white-space: normal;
  text-shadow: 0 2px 6px rgba(0,0,0,.75);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.mode-shrine #storyChoices .choiceBtn .choiceText{
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translateY(3px);
}

body.mode-shrine #storyChoices .choiceBtn:hover{
  border-color: rgba(255,214,150,.55);
  box-shadow: 0 12px 22px rgba(0,0,0,.45), 0 0 16px rgba(255,184,77,.12);
  filter: brightness(1.05);
}

body.mode-shrine #storyChoices .choiceBtn:active{
  transform: translateY(1px) scale(0.99);
}

body.mode-shrine #storyChoices .choiceBtn:focus-visible{
  outline: 2px solid rgba(255,210,140,.55);
  outline-offset: 2px;
}

/* --- Column width caps (prevent widescreen sprawl) --- */
/* Columns 1 & 2: story / info panels */
.col-1,
.col-2,
.column-1,
.column-2{
  max-width: 420px;
}

/* Allow them to shrink normally on smaller screens */
.col-1,
.col-2,
.column-1,
.column-2{
  width: 100%;
}

/* --- Location Banner (Story) --- */
.locationHeader{
  margin: 0 0 10px 0;
  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,184,77,.18);
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,184,77,.10) 0%, rgba(255,255,255,.02) 42%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(16,18,28,.85), rgba(10,12,18,.78));
  box-shadow: 0 14px 26px rgba(0,0,0,.36), 0 0 18px rgba(255,184,77,.06);
}

.locationHeader .locationMeta{
  display:block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,212,59,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.65);
  margin-bottom: 4px;
}

.locationHeader .locationName{
  display:block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .3px;
  color: rgba(243,234,223,.98);
  text-shadow: 0 1px 0 rgba(0,0,0,.75);
}

/* --- Enemy Title Tier Styling --- */
/* Default enemy title stays as-is (your existing .titleEnemy rule) */
#enemyTitle[data-tier="normal"]{
  /* no override; inherits .titleEnemy */
}

/* Boss: red + stronger underline */
#enemyTitle[data-tier="boss"]{
  color: rgba(255,77,91,.98);
  border-bottom-color: rgba(255,77,91,.36);
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 16px rgba(255,77,91,.12);
}

/* Elite: grey/silver */
#enemyTitle[data-tier="elite"]{
  color: rgba(210,216,226,.92);
  border-bottom-color: rgba(210,216,226,.18);
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 14px rgba(210,216,226,.08);
}

/* Rare: gold */
#enemyTitle[data-tier="rare"]{
  color: rgba(255,212,59,.96);
  border-bottom-color: rgba(255,212,59,.26);
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 16px rgba(255,212,59,.10);
}

/* --- Run Stats Emphasis (Gold + Energy) --- */
.runStats{
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 6px;
}

.runStat{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.runStat.score{
  position: relative;
  z-index: 4;
}

.scoreTooltipPanel{
  display: none;
}

/* Mobile: use a fixed score panel so it is never hidden behind compact HUD bars. */
body[data-ui="mobile"] .topbarRunSummary .runStat.score[data-tooltip]::after,
body[data-ui="mobile"] .topbarRunSummary .runStat.score[data-tooltip]::before,
html[data-ui="mobile"] .topbarRunSummary .runStat.score[data-tooltip]::after,
html[data-ui="mobile"] .topbarRunSummary .runStat.score[data-tooltip]::before{
  display: none !important;
}

body[data-ui="mobile"] .topbarRunSummary .runStat.score.tooltip-open .scoreTooltipPanel,
html[data-ui="mobile"] .topbarRunSummary .runStat.score.tooltip-open .scoreTooltipPanel{
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  left: 50%;
  top: calc(var(--safe-top) + 10px);
  transform: translateX(-50%);
  width: min(290px, calc(100vw - 16px));
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(188,222,255,.30);
  background: #101a2b;
  box-shadow: 0 16px 36px rgba(0,0,0,.56), 0 0 0 1px rgba(0,0,0,.32) inset;
  z-index: 200000 !important;
}

body[data-ui="mobile"] .topbarRunSummary .runStat.score.tooltip-open,
html[data-ui="mobile"] .topbarRunSummary .runStat.score.tooltip-open{
  position: relative;
  z-index: 199999 !important;
}

/* While score tooltip is open on mobile, suppress top combat bars so they never sit over/through it. */
body[data-ui="mobile"].score-tooltip-open .topbarCombatBars,
body[data-ui="mobile"].score-tooltip-open .compactCombatBars,
html[data-ui="mobile"].score-tooltip-open .topbarCombatBars,
html[data-ui="mobile"].score-tooltip-open .compactCombatBars{
  visibility: hidden;
}

body[data-ui="mobile"] .scoreTooltipTitle,
html[data-ui="mobile"] .scoreTooltipTitle{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226,238,255,.94);
  margin-bottom: 2px;
}

body[data-ui="mobile"] .scoreTooltipRow,
body[data-ui="mobile"] .scoreTooltipTotal,
html[data-ui="mobile"] .scoreTooltipRow,
html[data-ui="mobile"] .scoreTooltipTotal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: rgba(231,240,255,.92);
}

body[data-ui="mobile"] .scoreTooltipTotal,
html[data-ui="mobile"] .scoreTooltipTotal{
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(186,218,255,.20);
  font-weight: 900;
}

.runStat .icon{
  font-size: 18px;
}

.runStat.gold{
  font-size: 20px;
  color: rgba(255,212,59,.98);
  text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 10px rgba(255,212,59,.15);
}

.runStat.energy{
  font-size: 20px;
  color: rgba(120,220,160,.98);
  text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 10px rgba(120,220,160,.15);
}

.runTalentChipRow{
  margin: 0 0 6px;
}

.runActionChips{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}

.runActionChips .runTalentChipRow{
  margin: 0;
}

.runTalentChipBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,224,88,.52);
  background:
    radial-gradient(170% 220% at 10% 0%, rgba(255,224,88,.16), transparent 56%),
    linear-gradient(180deg, rgba(38,31,14,.92), rgba(21,17,8,.94));
  color: rgba(255,242,186,.98);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(0,0,0,.9), 0 0 10px rgba(255,224,88,.22);
}

.runTalentChipBtn:hover{
  border-color: rgba(255,232,126,.70);
  box-shadow: 0 1px 0 rgba(0,0,0,.9), 0 0 14px rgba(255,232,126,.28);
}

.runGearChipBtn{
  border-color: rgba(150,214,255,.52);
  background:
    radial-gradient(170% 220% at 10% 0%, rgba(150,214,255,.16), transparent 56%),
    linear-gradient(180deg, rgba(18,34,48,.92), rgba(10,22,34,.94));
  color: rgba(220,244,255,.98);
  box-shadow: 0 1px 0 rgba(0,0,0,.9), 0 0 10px rgba(132,202,255,.20);
}

.runGearChipBtn:hover{
  border-color: rgba(188,230,255,.74);
  box-shadow: 0 1px 0 rgba(0,0,0,.9), 0 0 14px rgba(188,230,255,.26);
}

.runBuildIdentity{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120,184,255,.28);
  background:
    radial-gradient(160% 220% at 10% 0%, rgba(120,184,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(18,22,34,.94), rgba(10,12,18,.94));
  color: rgba(226,238,255,.96);
}

.runBuildLabel{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .82;
}

.runBuildBranch{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.runBuildTags,
.runBuildChipTags{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.runBuildTag,
.runBuildChipTag{
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(236,241,255,.94);
}

.runBuildChip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(120,184,255,.30);
  background:
    radial-gradient(160% 220% at 10% 0%, rgba(120,184,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(18,22,34,.98), rgba(10,12,18,.98));
  color: rgba(228,239,255,.96);
  box-shadow: 0 1px 0 rgba(0,0,0,.9);
}

/* --- Actor Header (Player/Enemy) --- */
.actorHeader{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.actorName{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(243,234,223,.98);
  text-shadow: 0 1px 0 rgba(0,0,0,.75);
  line-height: 1.05;
  margin-right: 2px;
}

.playerLevelBadge{
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  min-width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(120,220,160,.45);
  background: rgba(120,220,160,.12);
  color: rgba(214,255,230,.96);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.runeMasterTitle{
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,.45);
  background: rgba(255,184,77,.14);
  color: #ffdfb0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
}

.actorBadges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}


/* --- Run Contract Stars (Player header) --- */
.contractStars{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
  box-shadow: 0 10px 20px rgba(0,0,0,0.26), 0 0 0 1px rgba(0,0,0,0.35) inset;
  font-size: 13px;
  line-height: 1;
  user-select: none;
}

.contractStars .star{
  opacity: 0.9;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.75));
}

/* Default/active: muted */
.contractStars[data-status="active"]{
  color: rgba(205,205,205,0.65);
}

/* Fulfilled: gold */
.contractStars[data-status="fulfilled"]{
  color: rgba(255,212,59,0.95);
  border-color: rgba(255,212,59,0.35);
  box-shadow: 0 10px 20px rgba(0,0,0,0.26), 0 0 18px rgba(255,212,59,0.10);
}

/* Failed: red */
.contractStars[data-status="failed"]{
  color: rgba(255,107,107,0.95);
  border-color: rgba(255,107,107,0.35);
  box-shadow: 0 10px 20px rgba(0,0,0,0.26), 0 0 18px rgba(255,107,107,0.10);
}

.vitalPill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  font-weight: 900;
  letter-spacing: .15px;
  box-shadow: 0 10px 20px rgba(0,0,0,.26), 0 0 0 1px rgba(0,0,0,.35) inset;
}

.vitalPill .i{
  width: 16px;
  display:inline-flex;
  justify-content:center;
  opacity: .95;
}

.vitalPill.hp{
  color: rgba(255,227,230,.96);
  border-color: rgba(255,77,91,.28);
  background: rgba(255,77,91,.07);
}

.vitalPill.block{
  color: rgba(208,235,255,.96);
  border-color: rgba(77,171,247,.28);
  background: rgba(77,171,247,.07);
}

.playerXpRow{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.playerNameStack{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: min(320px, 60%);
}

.playerXpTrack{
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(120,220,160,.30);
  background: rgba(7,12,10,.68);
  overflow: hidden;
}

.playerXpFill{
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(105,219,124,.88), rgba(120,220,160,.96));
  box-shadow: 0 0 10px rgba(105,219,124,.35);
}

.playerXpLabel{
  min-width: 78px;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  color: rgba(214,255,230,.92);
}

/* Make the rest of the mono lines read cleaner under the header */
#playerStatuses, #playerPowers, #enemyStatuses, #enemyPowers{
  opacity: .92;
}


/* Intent: Coordinated Fury (treat visually like an attack) */
..intentBadge[data-type="coordinated_fury"] {
  /* matches attack vibe without forcing a redesign */
}


/* --- Post-battle overlay (Rewards/Shop) --- */
/* DEV NOTE: Separate container avoids ID collisions + avoids moving #rewards in DOM. */
#postBattleRewards.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-modal);
  display: none; /* toggled by .is-open */
}

#postBattleRewards.overlay.is-open{ display: block; }

#postBattleRewards .overlayBackdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 800px at 50% 25%, rgba(255,184,77,.16), transparent 60%),
    radial-gradient(900px 700px at 70% 15%, rgba(255,77,91,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.92));
}

#postBattleRewards.is-reward-gold .overlayBackdrop{
  background:
    radial-gradient(1200px 860px at 50% 24%, rgba(255,210,110,.30), transparent 62%),
    radial-gradient(980px 760px at 60% 18%, rgba(255,166,46,.22), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.92));
}

#postBattleRewards.is-reward-heal .overlayBackdrop{
  background:
    radial-gradient(1200px 860px at 50% 24%, rgba(92,226,164,.28), transparent 62%),
    radial-gradient(980px 760px at 60% 18%, rgba(58,183,121,.20), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.92));
}

#postBattleRewards .overlayCard{
  position: relative;
  width: min(920px, 94vw);
  max-height: min(90vh, 940px);
  overflow: auto;
  margin: 8vh auto 0 auto;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.07) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(18,22,34,.92), rgba(10,12,18,.90));
  box-shadow: 0 16px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.30) inset;
  backdrop-filter: blur(6px);
}

#postBattleRewards.is-shop .overlayCard{
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.05) 0%, rgba(255,255,255,.015) 40%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(18,22,34,.62), rgba(10,12,18,.58));
}

body[data-ui="mobile"] #postBattleRewards .overlayCard{
  background:
    linear-gradient(180deg, rgba(10,12,18,.42), rgba(6,8,14,.50)),
    url("./data/ui/reward_shop_bg.webp") center/cover no-repeat,
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.07) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(18,22,34,.92), rgba(10,12,18,.90));
}

body[data-ui="mobile"] #postBattleRewards.is-shop .overlayCard{
  background:
    linear-gradient(180deg, rgba(10,12,18,.38), rgba(6,8,14,.44)),
    url("./data/ui/reward_shop_bg.webp") center/cover no-repeat,
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.05) 0%, rgba(255,255,255,.015) 40%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(18,22,34,.62), rgba(10,12,18,.58));
}

body[data-ui="mobile"] #postBattleRewards.is-shop #postBattleTitle,
body[data-ui="mobile"] #postBattleRewards.is-reward #postBattleTitle{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  margin-bottom: 6px;
  border-bottom: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
  overflow: hidden;
}

body[data-ui="mobile"] #postBattleRewards.is-shop #postBattleTitle::before,
body[data-ui="mobile"] #postBattleRewards.is-reward #postBattleTitle::before{
  content: "";
  display: block;
  width: min(98vw, 520px);
  max-width: 100%;
  height: clamp(96px, 24vw, 148px);
  margin: 0;
  background: url("./data/ui/victory.webp") center/contain no-repeat;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(255,184,77,.14));
}

#mirrorPromptOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-modal-elevated);
  display: none;
}

#mirrorPromptOverlay.overlay.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#mirrorPromptOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 800px at 50% 22%, rgba(170,196,255,.14), transparent 62%),
    radial-gradient(860px 680px at 62% 14%, rgba(120,148,255,.12), transparent 58%),
    url("./data/ui/mirror_bg.webp") center/cover no-repeat,
    linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.72));
}

.mirrorPromptCard{
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.mirrorPromptTitle{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mirrorPromptPanel{
  position: absolute;
  left: 50%;
  top: calc(54% + 75px);
  transform: translate(-50%, -50%);
  width: min(86vw, 740px);
  aspect-ratio: 740 / 550;
  display: block;
  padding: clamp(82px, 11vw, 98px) clamp(34px, 5vw, 52px) clamp(22px, 3.2vw, 30px);
  background: url("./data/ui/mirror_textboxbg.webp") center/contain no-repeat;
  pointer-events: auto;

  --mirror-content-x: 50%;
  --mirror-content-y: 58%;
  --mirror-content-w: 84%;
}

.mirrorPromptContentBox{
  position: absolute;
  left: var(--mirror-content-x);
  top: var(--mirror-content-y);
  transform: translate(-50%, -50%);
  width: var(--mirror-content-w);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mirrorPromptText{
  position: relative;
  width: 100%;
  min-height: 0;
  max-height: none;
  padding: 14px 12px;
  margin: 0;
  overflow: visible;
  text-align: center;
  line-height: 1.45;
  color: rgba(228,235,255,.96);
  text-shadow: 0 1px 0 rgba(0,0,0,.82);
}

.mirrorPromptActions{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mirrorPromptAction{
  width: 100%;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
}

.mirrorPromptAction:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.mirrorPromptAction:active{
  transform: translateY(1px);
  filter: brightness(0.96);
}

.mirrorPromptAction:focus-visible{
  outline: 2px solid rgba(178,206,255,.9);
  outline-offset: 3px;
}

.mirrorPromptActionGaze{
  aspect-ratio: 654 / 95;
  background-image: url("./data/ui/gaze_button.webp");
}

.mirrorPromptActionCase{
  aspect-ratio: 616 / 82;
  background-image: url("./data/ui/case_button.webp");
}

.mirrorPromptClose{
  position: absolute;
  right: 12px;
  top: 12px;
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.42);
  pointer-events: auto;
}



#postBattleText{
  opacity: .92;
  margin: 0 0 12px 0;
  line-height: 1.35;
}

/* Shrine sparkle overlay */
.shrineSparkle{
  display: none;
}

.shrineSparkle::before,
.shrineSparkle::after{
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Rune/Catalyst drop popup */
.itemDrop{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 920ms ease;
}

.itemDrop::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 220ms ease;
}

.itemDrop.tone-gold::before{
  background:
    radial-gradient(1200px 900px at 50% 26%, rgba(255,210,110,.34), transparent 62%),
    radial-gradient(900px 700px at 62% 14%, rgba(255,164,44,.24), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.64));
}

.itemDrop.tone-heal::before{
  background:
    radial-gradient(1200px 900px at 50% 26%, rgba(95,228,166,.32), transparent 62%),
    radial-gradient(900px 700px at 62% 14%, rgba(58,183,121,.24), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.58));
}

.itemDrop.is-active{
  opacity: 1;
  visibility: visible;
}

.itemDrop.is-active.is-fading-out{
  opacity: 0;
}

.itemDrop.is-active.tone-gold::before,
.itemDrop.is-active.tone-heal::before{
  opacity: 1;
}

.itemDropCard{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  gap: 8px;
  padding: 14px 18px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,214,150,.14), transparent 60%),
    linear-gradient(180deg, rgba(12,16,26,.86), rgba(6,8,14,.92));
  box-shadow: 0 18px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.55) inset;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 920ms ease, transform 920ms ease;
}

.itemDrop.is-active .itemDropCard{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.itemDrop.is-active.is-fading-out .itemDropCard{
  opacity: 0;
  transform: translateY(10px) scale(0.985);
}

.itemDropImage{
  width: clamp(110px, 30vw, 160px);
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}

.itemDrop.image-only .itemDropCard{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.itemDrop.image-only .itemDropImage{
  width: clamp(220px, 60vw, 320px);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}

.itemDrop.image-only.tone-levelup .itemDropImage{
  width: 100vw;
  max-width: 100vw;
}

body[data-ui="web"] .itemDrop.image-only.tone-levelup .itemDropImage{
  width: min(50vw, 760px) !important;
  max-width: min(50vw, 760px) !important;
  max-height: 50vh;
  object-fit: contain;
}

body[data-ui="web"] .itemDrop.image-only.tone-levelup .itemDropCard{
  width: min(50vw, 760px);
  max-width: min(50vw, 760px);
}

.itemDropLabel{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  color: rgba(245,230,206,.95);
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
}

.itemDropCoins{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.itemDropCoin{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--coin-size, 20px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: url("./data/ui/coin.webp") center/contain no-repeat;
  opacity: 0;
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--rot)) scale(var(--s0));
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  animation: itemDropSpritePulse ease-out infinite;
}

.itemDropLeaves{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.itemDropLeaf{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--leaf-size, 18px);
  aspect-ratio: 1 / 1;
  background: url("./data/ui/leaf.webp") center/contain no-repeat;
  opacity: 0;
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--rot)) scale(var(--s0));
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  animation: itemDropSpritePulse ease-out infinite;
}

@keyframes itemDropSpritePulse{
  0%{
    opacity: 0;
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--rot)) scale(var(--s0));
  }
  24%{
    opacity: .96;
  }
  100%{
    opacity: 0;
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--rot)) scale(var(--s1));
  }
}

body.effects-off .itemDropCoins,
body.effects-off .itemDropLeaves,
body.particles-off .itemDropCoins,
body.particles-off .itemDropLeaves{
  display: none;
}

.itemDrop.image-only .itemDropLabel{
  font-size: clamp(14px, 2.4vw, 22px);
  letter-spacing: 0.14em;
  color: rgba(255,242,196,.98);
  text-shadow:
    0 2px 14px rgba(0,0,0,.82),
    0 0 22px rgba(255,196,74,.55);
}




.shrineSparkle::before{
  inset: -15%;
  background:
    radial-gradient(220px 220px at 35% 35%, rgba(255,244,210,.75), transparent 65%),
    radial-gradient(420px 420px at 60% 45%, rgba(255,206,120,.45), transparent 72%),
    radial-gradient(520px 520px at 50% 55%, rgba(255,170,90,.25), transparent 78%);
  transform: scale(0.95);
  animation: shrineGlowDrift 4.2s ease-in-out infinite;
}

.shrineSparkle::after{
  background:
    radial-gradient(6px 6px at 10% 18%, rgba(255,248,224,1), transparent 70%),
    radial-gradient(7px 7px at 18% 28%, rgba(255,230,190,.95), transparent 70%),
    radial-gradient(5px 5px at 26% 40%, rgba(255,214,150,.95), transparent 70%),
    radial-gradient(6px 6px at 34% 52%, rgba(255,240,210,.95), transparent 70%),
    radial-gradient(5px 5px at 42% 64%, rgba(255,248,224,.9), transparent 70%),
    radial-gradient(7px 7px at 52% 18%, rgba(255,220,160,.95), transparent 70%),
    radial-gradient(6px 6px at 60% 30%, rgba(255,240,210,.95), transparent 70%),
    radial-gradient(5px 5px at 68% 42%, rgba(255,214,150,.95), transparent 70%),
    radial-gradient(7px 7px at 76% 54%, rgba(255,230,190,.95), transparent 70%),
    radial-gradient(6px 6px at 84% 66%, rgba(255,248,224,.95), transparent 70%),
    radial-gradient(5px 5px at 14% 76%, rgba(255,214,150,.9), transparent 70%),
    radial-gradient(7px 7px at 22% 86%, rgba(255,240,210,.95), transparent 70%),
    radial-gradient(6px 6px at 38% 84%, rgba(255,220,160,.95), transparent 70%),
    radial-gradient(5px 5px at 50% 72%, rgba(255,248,224,.9), transparent 70%),
    radial-gradient(6px 6px at 62% 82%, rgba(255,230,190,.95), transparent 70%),
    radial-gradient(7px 7px at 74% 88%, rgba(255,240,210,.95), transparent 70%),
    radial-gradient(5px 5px at 86% 22%, rgba(255,220,160,.9), transparent 70%),
    radial-gradient(6px 6px at 90% 38%, rgba(255,248,224,.95), transparent 70%);
  transform: scale(0.98);
  animation: shrineSparkleDrift 3.6s ease-in-out infinite;
}

@keyframes shrineScreenPulse{
  0%{ opacity: 0.65; }
  50%{ opacity: 1; }
  100%{ opacity: 0.65; }
}

@keyframes shrineGlowDrift{
  0%{ transform: scale(0.95) translateY(4px); opacity: 0.55; }
  50%{ transform: scale(1.02) translateY(-6px); opacity: 0.85; }
  100%{ transform: scale(0.95) translateY(4px); opacity: 0.55; }
}

@keyframes shrineSparkleDrift{
  0%{ transform: scale(0.98) translateY(2px); opacity: 0.55; }
  50%{ transform: scale(1.02) translateY(-6px); opacity: 0.9; }
  100%{ transform: scale(0.98) translateY(2px); opacity: 0.55; }
}


/* --- UI interactivity v1 --- */
/* More visual feedback for story choices, enemy intent, and playable cards. */

/* Story / reward / shop choice buttons */
button.choiceBtn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 6px;
}

/* Sliding arrow that appears on hover */
button.choiceBtn::after{
  content: "›";
  opacity: 0;
  font-size: 13px;
  transform: translateX(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

button.choiceBtn:hover::after{
  opacity: 0.9;
  transform: translateX(0);
}

/* Slight press-in on click (overrides base button:active) */
button.choiceBtn:active{
  transform: translateY(1px) scale(0.99);
}

button.shopItemCard{
  display: block;
  align-items: unset;
  justify-content: unset;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

button.shopItemCard::after{
  content: none;
  display: none;
}


/* Enemy intent "pill" styling driven by data-type from ui.js */



/* Attack intent: red-tinted, glowy */
#enemyIntent[data-type="attack"]{
  color: #ff6b6b;
  border-color: rgba(255,107,107,.65);
  box-shadow: 0 0 12px rgba(255,107,107,.25);
}

/* Lifesteal intent: ember/gold tint */
#enemyIntent[data-type="lifesteal"]{
  color: #ffb84d;
  border-color: rgba(255,184,77,.65);
  box-shadow: 0 0 12px rgba(255,184,77,.25);
}

/* When there is no intent, keep it subtle */
#enemyIntent[data-type="none"]{
  opacity: 0.8;
}

/* Playable hand cards vs unplayable ones */
.card.playable{
  cursor: pointer;
}

/* Stronger hover feedback for playable cards */
.card.playable:hover{
  transform: translateY(-2px) scale(1.02);
}

/* Tiny press on click */
.card.playable:active{
  transform: translateY(1px) scale(0.98);
}

/* Unplayable cards: dim + slight desaturation */
.card.disabled{
  opacity: 0.45;
  filter: grayscale(0.25);
  cursor: default;
}

/* Card implode animation when successfully played */
.card.imploding{
  animation: cardImplode 420ms ease-in forwards;
  pointer-events: none;
}

@keyframes cardImplode{
  0%{
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: brightness(1);
  }
  40%{
    transform: scale(1.05) translateY(-4px);
    opacity: 1;
    filter: brightness(1.3);
    box-shadow:
      0 0 40px rgba(255,184,77,.45),
      0 0 80px rgba(255,184,77,.25),
      0 14px 26px rgba(0,0,0,.38),
      0 0 0 1px rgba(0,0,0,.35) inset;
  }
  100%{
    transform: scale(0) translateY(20px);
    opacity: 0;
    filter: brightness(2) blur(2px);
  }
}

@keyframes shopPulse{
  0%{
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  45%{
    transform: scale(0.96);
    opacity: 0.9;
    filter: brightness(1.25);
  }
  100%{
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}

/* --- UI interactivity v2 --- */
/* HP change flashes, portrait hover polish. */

/* Actor headers: allow transform/box-shadow transitions */
.actorHeader{
  transition: transform 140ms ease-out,
              box-shadow 160ms ease-out,
              background-color 160ms ease-out;
}

/* Player & Enemy HP hit/heal animations */
#playerLine.hp-hit .actorHeader,
#enemyLine.hp-hit .actorHeader{
  animation: hpHitFlash 180ms ease-out;
}

#playerLine.hp-heal .actorHeader,
#enemyLine.hp-heal .actorHeader{
  animation: hpHealFlash 220ms ease-out;
}

@keyframes hpHitFlash{
  0%{
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(255,80,80,0);
    background-color: rgba(80,0,0,0);
  }
  30%{
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(255,80,80,.55);
    background-color: rgba(120,0,0,.35);
  }
  100%{
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(255,80,80,0);
    background-color: rgba(80,0,0,0);
  }
}

@keyframes hpHealFlash{
  0%{
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(80,200,140,0);
    background-color: rgba(0,60,20,0);
  }
  30%{
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(80,200,140,.55);
    background-color: rgba(0,80,40,.45);
  }
  100%{
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(80,200,140,0);
    background-color: rgba(0,60,20,0);
  }
}

/* Portrait hover micro interaction */
.portraitFrame img{
  transition: transform 140ms ease-out,
              box-shadow 160ms ease-out,
              filter 160ms ease-out;
}

.portraitFrame:hover img{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 0 12px rgba(0,0,0,.7);
}

/* -----------------------------
   Enemy Turn Cinematic Overlay
-------------------------------- */


/* Enemy turn overlay container (hidden until .is-open) */
#enemyTurnOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-combat);
  display: none;
  align-items: center;
  justify-content: center;
  padding: min(6vh, 48px) 10px;
}

#enemyTurnOverlay.overlay.is-open{ display: flex; }

#enemyTurnOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 65% 30%, rgba(255,120,120,0.12), transparent 60%),
    radial-gradient(800px 600px at 35% 20%, rgba(180,120,255,0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.58), rgba(0,0,0,0.82));
}

#enemyTurnOverlay.is-enraged-turn .overlayBackdrop{
  background:
    radial-gradient(900px 600px at 65% 30%, rgba(255,92,92,0.2), transparent 58%),
    radial-gradient(850px 620px at 35% 20%, rgba(255,42,42,0.16), transparent 56%),
    linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.86));
}

#enemyTurnOverlay .overlayCard{
  position: relative;
  width: min(450px, 92vw);
  margin: 0;
  border-radius: 18px;
}

.enemyTurnCard{
  max-width: none;
  text-align: center;
  padding: 14px 14px 12px;
  max-height: 92vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(20,20,26,0.96), rgba(14,14,18,0.92));
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  animation: enemyTurnPop 220ms ease-out both;
}

.enemyTurnLabel{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

#enemyTurnOverlay.is-enraged-turn .enemyTurnLabel{
  color: #ff9a9a;
}

.enemyTurnMove{
  font-size: 14px;
  opacity: 0.95;
}

.enemyTurnHint{
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.75;
}

.bracePrompt{
  display: none;
  margin-top: 10px;
  --brace-window-ms: 700ms;
}

.bracePrompt.is-open{
  display: block;
}

.bracePrompt.is-success .braceBarrier{
  filter: saturate(1.25);
  opacity: 1;
}

.bracePrompt.is-fail .braceBarrier{
  opacity: 0.3;
}

.bracePrompt.is-enraged-turn .braceArtFrame{
  border-color: transparent;
  box-shadow: none;
}

.bracePrompt.is-enraged-turn .braceBarrier{
  background:
    radial-gradient(72% 52% at 52% 52%, rgba(255,176,176,0.36), rgba(255,176,176,0.04) 70%),
    linear-gradient(100deg, rgba(255,120,120,0) 0%, rgba(255,120,120,0.38) 48%, rgba(255,120,120,0) 100%);
}

.bracePrompt.is-enraged-turn .braceButton{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,222,222,0.2), transparent 60%),
    linear-gradient(180deg, rgba(165,36,36,0.96), rgba(118,20,20,0.94));
}

.bracePrompt.is-enraged-turn .braceLead{
  color: #ffd1d1;
  text-shadow: 0 0 10px rgba(255,80,80,0.4);
}

.braceArtFrame{
  position: relative;
  width: 100%;
  height: min(58vh, 520px);
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: none;
  background: radial-gradient(120% 100% at 50% 50%, rgba(16,24,40,0.72), rgba(8,12,20,0.9));
}

.braceArtFrame::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(110% 90% at 50% 72%, rgba(92,186,255,0.28), rgba(92,186,255,0.02) 66%),
    linear-gradient(180deg, rgba(8,16,30,0.06), rgba(8,16,30,0.28));
}

.braceArtFrame.is-impact{
  animation: braceImpactFrame 320ms cubic-bezier(0.2, 0.9, 0.28, 1.02) both;
}

.braceArt{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.08) contrast(1.03);
  background: transparent;
}

.braceBarrier{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 52% 52%, rgba(180,225,255,0.3), rgba(180,225,255,0.02) 70%),
    linear-gradient(100deg, rgba(130,210,255,0) 0%, rgba(130,210,255,0.34) 48%, rgba(130,210,255,0) 100%);
  mix-blend-mode: screen;
  opacity: 0.88;
  z-index: 2;
  pointer-events: none;
  animation: braceBarrierSweep 900ms ease-in-out infinite;
}

.braceUi{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(6,10,16,0), rgba(6,10,16,0.78) 40%, rgba(6,10,16,0.94));
  z-index: 3;
}

.bracePrompt.is-enraged-turn .braceArtFrame::before{
  background:
    radial-gradient(110% 90% at 50% 72%, rgba(255,80,80,0.3), rgba(255,80,80,0.03) 66%),
    linear-gradient(180deg, rgba(30,8,8,0.08), rgba(30,8,8,0.32));
}

.braceArtFrame.is-impact .braceBarrier{
  animation: none;
  opacity: 1;
  filter: brightness(1.35) saturate(1.35);
}

.braceLead{
  font-size: 11px;
  letter-spacing: 0.6px;
  opacity: 0.94;
  text-transform: uppercase;
}

.braceButton{
  min-width: 168px;
  min-height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(180deg, rgba(130,30,30,0.96), rgba(92,16,16,0.94));
  color: #f8ecec;
  font-weight: 800;
  letter-spacing: 1.2px;
  cursor: pointer;
  box-shadow:
    0 0 0 0 rgba(225,80,80,0.55),
    0 12px 26px rgba(0,0,0,0.42);
  animation: bracePulse 680ms ease-out infinite;
}

.braceButton:hover{
  filter: brightness(1.06);
}

.braceButton.is-success{
  animation: none;
  background: linear-gradient(180deg, rgba(42,122,72,0.98), rgba(28,94,56,0.96));
}

.braceButton.is-fail{
  animation: none;
  background: linear-gradient(180deg, rgba(86,42,42,0.96), rgba(62,28,28,0.94));
  opacity: 0.72;
}

#enemyTurnOverlay.brace-impact-success .overlayBackdrop{
  background:
    radial-gradient(900px 600px at 50% 28%, rgba(164,232,255,0.28), transparent 58%),
    radial-gradient(720px 420px at 50% 42%, rgba(190,240,255,0.22), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.52), rgba(0,0,0,0.8));
}

#enemyTurnOverlay.brace-impact-success .enemyTurnCard{
  border-color: rgba(165,236,255,0.55);
  box-shadow:
    0 0 0 1px rgba(165,236,255,0.45),
    0 0 42px rgba(144,224,255,0.35),
    0 22px 60px rgba(0,0,0,0.55);
}

.bracePrompt.is-success .braceLead{
  color: #bdf4d2;
}

.bracePrompt.is-fail .braceLead{
  color: #ffb0b0;
}

.braceTimer{
  width: min(260px, 62vw);
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(10,10,14,0.65);
}

#braceTimerFill{
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(136,215,255,0.95), rgba(236,251,255,0.95));
  transform-origin: left center;
  transform: scaleX(1);
}

#braceTimerFill.is-running{
  animation: braceTimerDrain var(--brace-window-ms) linear forwards;
}

@keyframes bracePulse{
  0%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(225,80,80,0.55),
      0 12px 26px rgba(0,0,0,0.42);
  }
  70%{
    transform: scale(1.02);
    box-shadow:
      0 0 0 14px rgba(225,80,80,0),
      0 12px 26px rgba(0,0,0,0.42);
  }
  100%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(225,80,80,0),
      0 12px 26px rgba(0,0,0,0.42);
  }
}

@keyframes braceBarrierSweep{
  0%{
    transform: translateX(-14%) scale(1.02);
    opacity: 0.55;
  }
  55%{
    transform: translateX(8%) scale(1.03);
    opacity: 0.95;
  }
  100%{
    transform: translateX(-14%) scale(1.02);
    opacity: 0.55;
  }
}

@keyframes braceImpactFrame{
  0%{
    transform: scale(1);
  }
  40%{
    transform: scale(1.02);
  }
  100%{
    transform: scale(1);
  }
}

@keyframes braceTimerDrain{
  0%{ transform: scaleX(1); }
  100%{ transform: scaleX(0); }
}



@keyframes enemyTurnPop{
  0%{ transform: translateY(-8px) scale(0.98); opacity: 0; }
  100%{ transform: translateY(0px) scale(1); opacity: 1; }
}

/* Screen shake (applied briefly via body.enemy-shake) */
body.enemy-shake .panel-player,
body.enemy-shake .panel-enemy{
  animation: screenShakePanel 220ms linear;
  will-change: transform;
}

body[data-ui="mobile"].enemy-shake .panel-enemy{
  animation: screenShakePanelMirrored 220ms linear;
}

@keyframes screenShakePanel{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-4px); }
  40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
  100%{ transform: translateX(0); }
}

@keyframes screenShakePanelMirrored{
  0%{ transform: scaleX(-1) translateX(0); }
  20%{ transform: scaleX(-1) translateX(-4px); }
  40%{ transform: scaleX(-1) translateX(4px); }
  60%{ transform: scaleX(-1) translateX(-3px); }
  80%{ transform: scaleX(-1) translateX(3px); }
  100%{ transform: scaleX(-1) translateX(0); }
}

/* Enemy portrait lunge (applied briefly via .enemy-lunge) */
#enemyPortrait.enemy-lunge{
  animation: enemyLunge 320ms ease-out;
}

@keyframes enemyLunge{
  0%{ transform: translateX(0) scale(1); }
  45%{ transform: translateX(-14px) scale(1.03); }
  100%{ transform: translateX(0) scale(1); }
}

#bossIntro {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-modal-elevated);
  display: none;
}

#bossIntro.is-open {
  display: block;
}

#bossIntro .overlayBackdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.12), transparent 55%),
    radial-gradient(120% 120% at 10% 100%, rgba(255,120,120,0.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.98));
  backdrop-filter: blur(4px);
}

#bossIntro .overlayCard {
  position: relative;
  width: min(880px, 96vw);
  max-height: min(86vh, 900px);
  margin: 8vh auto 0 auto;
  padding: 22px 22px 18px 22px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(160% 140% at 10% 0%, rgba(255,184,77,0.20), transparent 55%),
    radial-gradient(150% 150% at 90% 0%, rgba(177,151,252,0.20), transparent 60%),
    linear-gradient(180deg, #0b0d16, #05060a);
  box-shadow: 0 22px 60px rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Deck removal confirm overlay */
#deckRemoveConfirm{
  position: fixed;
  inset: 0;
  z-index: 6200;
  display: none;
}

#deckRemoveConfirm.is-open{ display: block; }

#deckRemoveConfirm .overlayBackdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 700px at 50% 20%, rgba(255,184,77,0.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.94));
}

.deckRemoveCard{
  position: relative;
  width: min(480px, 92vw);
  margin: 12vh auto 0 auto;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,0.10) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, #111522, #080a12);
  box-shadow: 0 18px 36px rgba(0,0,0,0.55);
}

.deckRemoveBody{ margin: 8px 0 14px 0; line-height: 1.45; }

.deckRemoveActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.bossIntroLabel {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

.bossIntroContent {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}


.bossIntroArtFrame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(180deg, #151829, #05060a);
  box-shadow: 0 16px 40px rgba(0,0,0,0.9);
}

.bossIntroArtFrame img {
  width: 100%;
  display: block;
  object-fit: cover;
  transform-origin: 50% 60%;
  animation: bossIntroZoom 1100ms ease-out forwards;
}

.bossIntroText {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bossIntroName {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bossIntroTitle {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.8;
}

.bossIntroLine {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
}

#bossIntroBegin {
  align-self: center;
  margin-top: 4px;
  min-width: 220px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes bossIntroZoom {
  0% {
    transform: scale(1.08);
    filter: brightness(0.75);
  }
  60% {
    transform: scale(1.0);
    filter: brightness(1.02);
  }
  100% {
    transform: scale(1.0);
    filter: brightness(1.0);
  }
}


/* --- Run Contract (Run-level Oath) --- */
..runContract{
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  line-height: 1.3;
  max-width: 32ch;
}

.runContractLabel{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  opacity: 0.75;
  margin-bottom: 2px;
}

.runContractName{
  font-weight: 900;
  font-size: 13px;
}

.runContractTag{
  font-size: 11px;
  opacity: 0.9;
  color: rgba(255,212,59,0.88);
}

.runContractDesc{
  margin-top: 2px;
  opacity: 0.85;
}


/* Per-oath star tinting: one star per oath. */
.contractStars .star{
  opacity: 0.35;
  color: rgba(205,205,205,0.65);
}

.contractStars .star.status-active{
  opacity: 0.35;
}

.contractStars .star.status-fulfilled{
  opacity: 0.98;
  color: rgba(255,212,59,0.95);
}

.contractStars .star.status-failed{
  opacity: 0.98;
  color: rgba(255,107,107,0.95);
}

/* Small banner that announces whose turn it is (used above the Hand panel). */
.turnBanner{
  display:none;
  margin:4px 0 8px 0;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  background: rgba(255,214,102,0.10);
  border:1px solid rgba(255,214,102,0.45);
  color: rgba(255,231,180,0.96);
}

body.player-turn .turnBanner{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

body.player-turn .turnBanner::before{
  content:"●";
  font-size:10px;
  color:#ffd766;
}


/* --- Hand Drawer (slide-out playable cards) ---
   Goal: cards do NOT share grid space with enemy/player.
   The tab enables on player turn; drawer slides in from the right.
*/
.handDrawerRoot{
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none; /* allow clicks only on tab/panel/backdrop */
}

/* Show only during combat/debug combat; hidden in story by default */
body:not(.mode-combat):not(.mode-debug) .handDrawerRoot{
  display: none;
}

/* The vertical tab that stays visible */
.handDrawerTab{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;

  display: none; /* enabled in combat via rule below */
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-right: 0;

  background: rgba(18,22,34,0.92);
  color: rgba(245,245,255,0.96);

  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  cursor: pointer;

  max-width: 240px;
}

body.mode-combat .handDrawerTab{
  display: inline-flex;
}
body.mode-debug .handDrawerTab{
  display: inline-flex;
}


.handDrawerTab:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* Backdrop dims the game while drawer is open */
.handDrawerBackdrop{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  background: rgba(0,0,0,0.52);
}

/* The slide-out panel */
.handDrawerPanel{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(460px, 94vw);

  pointer-events: auto;
  overflow: hidden;

  transform: translateX(105%);
  transition: transform 220ms ease;

  border-left: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px 0 0 18px;

  background: linear-gradient(180deg, rgba(16,18,28,0.98), rgba(10,11,18,0.98));
  box-shadow: -16px 0 40px rgba(0,0,0,0.55);

  display: flex;
  flex-direction: column;
}

/* Open state */
body.hand-drawer-open .handDrawerBackdrop{
  opacity: 1;
  pointer-events: auto;
}

body.hand-drawer-open .handDrawerPanel{
  transform: translateX(0);
}

.handDrawerHeader{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.handDrawerHeaderTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.handDrawerHeaderTopActions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.handDrawerHeaderActions{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.handDrawerHeaderLeft{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.handDrawerHeader .turnBanner{
  margin: 0;
  align-self: flex-start;
}

.handDrawerTitle{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}

.handDrawerClose{
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(245,245,255,0.96);
  cursor: pointer;
}

.handDrawerInventory,
.handDrawerTalents,
.handDrawerGear{
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handDrawerEndTurn{
  min-width: 104px;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid rgba(255,168,107,0.48);
  background: linear-gradient(180deg, rgba(110,42,28,0.90), rgba(74,24,18,0.92));
  color: #ffd6bf;
}

.handDrawerInventory{
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,184,77,.08), transparent 56%),
    linear-gradient(180deg, #1c222f, #131927);
  color: #f2e9df;
}

.handDrawerTalents{
  border: 1px solid rgba(255,228,166,0.34);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,221,145,.14), transparent 56%),
    linear-gradient(180deg, #2a2235, #1b1525);
  color: #f4e8ff;
}

.handDrawerGear{
  border: 1px solid rgba(158,206,255,.34);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(128,190,255,.16), transparent 56%),
    linear-gradient(180deg, #1f2a3d, #141d2c);
  color: #e3f2ff;
}

.handDrawerEndTurn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

.handDrawerClose:hover{
  background: rgba(255,255,255,0.10);
}

.handDrawerEndTurn:hover,
.handDrawerInventory:hover,
.handDrawerTalents:hover,
.handDrawerGear:hover{
  filter: brightness(1.08);
}

.handDrawerTalents[aria-pressed="true"],
.handDrawerGear[aria-pressed="true"]{
  border-color: rgba(255,232,180,0.72);
  box-shadow:
    0 10px 18px rgba(0,0,0,.36),
    0 0 0 1px rgba(0,0,0,.28) inset,
    0 0 16px rgba(255,210,125,.26);
}

/* Make the hand scroll inside the drawer */
.handDrawerPanel #hand{
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
}

/* If your combat mobile rules target #hand, scope them to drawer so they still work */

/* --- Compact Oath chips in the top header --- */
/* Small pill used next to Gold / Energy to show the active run Oath. */
.runStats-compact{
  gap: 12px;
}

.topbarRunSummary .runStats{
  margin-bottom: 2px;
}

.topbarRunSummary .runTalentChipRow{
  margin: 0;
}

.topbarRunSummary .runActionChips{
  margin: 0;
}

.topbarRunSummary .runTalentChipBtn{
  font-size: 9px;
  padding: 2px 7px;
}

.runOathChips{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  margin-top:1px;
}

.runOathChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:1px solid rgba(255,184,77,0.32);
  background:
    radial-gradient(160% 220% at 10% 0%, rgba(255,184,77,0.16), transparent 55%),
    linear-gradient(180deg, rgba(18,22,34,0.98), rgba(10,12,18,0.98));
  color: rgba(246,232,210,0.96);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.9),
    0 0 8px rgba(255,184,77,0.28);
  white-space:nowrap;
}

.runOathChip .chipIcon{
  font-size:12px;
  opacity:0.95;
}

.runOathChip .chipLabel{
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.runOathStars{
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.runOathStars .contractStars{
  padding: 2px 6px;
  gap: 1px;
  border-color: rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.20);
  box-shadow: none;
  font-size: 10px;
}

.runOathStars .contractStars .star{
  filter: none;
}

/* Phone tuning: slightly smaller chip so it doesn't dominate the header. */

/* --- Oath selection overlay (Run Oath picker) --- */
#oathOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-modal-elevated);
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1200ms ease;
}

#oathOverlay.overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#oathOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 700px at 50% 20%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 1200ms ease;
}

#oathOverlay .overlayCard{
  position: relative;
  width: min(720px, 94vw);
  max-height: min(86vh, 900px);
  margin: 10vh auto 0 auto;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.25) 100%),
    linear-gradient(180deg, rgba(12,16,26,0.78), rgba(5,6,11,0.78));
  box-shadow: 0 18px 40px rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 1200ms ease, transform 1200ms ease;
}

#oathOverlay.overlay.is-open .overlayBackdrop{
  opacity: 1;
}

#oathOverlay.overlay.is-open .overlayCard{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.oathOverlayInner{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#oathOverlayTitle{
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oathOverlayHint{
  margin: 0 0 4px 0;
  font-size: 12px;
  opacity: 0.85;
}

.oathOverlayMeta{
  margin-top: 2px;
}

.oathMetaCard{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(140% 160% at 14% -12%, rgba(255,227,143,.12), transparent 56%),
    linear-gradient(180deg, rgba(14,18,28,.72), rgba(7,9,14,.82));
  box-shadow: 0 8px 18px rgba(0,0,0,.36), 0 0 0 1px rgba(0,0,0,.38) inset;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
}

.oathMetaTitle{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,226,176,.86);
  font-weight: 800;
}

.oathMetaRows{
  display: grid;
  gap: 4px;
}

.oathMetaRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 7px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}

.oathMetaName{
  font-size: 11px;
  font-weight: 700;
  color: rgba(238,234,227,.92);
}

.oathMetaState{
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(198,205,220,.76);
}

.oathMetaRow[data-status="fulfilled"] .oathMetaState{
  color: rgba(255,215,95,.95);
}

.oathMetaRow[data-status="failed"] .oathMetaState{
  color: rgba(255,128,128,.95);
}

.oathMetaReward{
  font-size: 11px;
  color: rgba(228,220,209,.78);
  line-height: 1.3;
}

.oathMetaCard[data-all-fulfilled="1"] .oathMetaReward{
  color: rgba(255,222,138,.95);
}

.oathList{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

button.oathChoiceBtn{
  position: relative;
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  --oath-accent: rgba(255,184,77,.42);
  --oath-bg-a: rgba(255,184,77,.15);
  --oath-bg-b: rgba(18,14,10,.94);
  --oath-text: #f6e8d2;
  --oath-glow: rgba(255,184,77,.22);
  border: 1px solid var(--oath-accent);
  background:
    radial-gradient(120% 140% at 10% 0%, var(--oath-bg-a), transparent 58%),
    linear-gradient(180deg, var(--oath-bg-b), rgba(10,10,14,.96));
  box-shadow:
    0 10px 22px rgba(0,0,0,.36),
    0 0 0 1px rgba(0,0,0,.42) inset,
    0 0 18px var(--oath-glow);
}

button.oathChoiceBtn[data-oath-id="oath_of_avarice"]{
  --oath-accent: rgba(255,212,59,.46);
  --oath-bg-a: rgba(255,212,59,.18);
  --oath-bg-b: rgba(30,24,11,.94);
  --oath-text: #ffe59e;
  --oath-glow: rgba(255,212,59,.24);
}

button.oathChoiceBtn[data-oath-id="oath_of_purity"]{
  --oath-accent: rgba(105,219,124,.46);
  --oath-bg-a: rgba(105,219,124,.18);
  --oath-bg-b: rgba(10,26,16,.94);
  --oath-text: #c8ffd2;
  --oath-glow: rgba(105,219,124,.26);
}

button.oathChoiceBtn[data-oath-id="oath_of_swiftness"]{
  --oath-accent: rgba(120,180,240,.48);
  --oath-bg-a: rgba(120,180,240,.20);
  --oath-bg-b: rgba(9,17,30,.94);
  --oath-text: #d8ecff;
  --oath-glow: rgba(120,180,240,.28);
}

button.oathChoiceBtn:hover{
  border-color: color-mix(in srgb, var(--oath-accent) 82%, white 18%);
  box-shadow:
    0 14px 28px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,0,0,.40) inset,
    0 0 22px var(--oath-glow);
}

button.oathChoiceBtn.imploding{
  animation: cardImplode 420ms ease-in forwards;
  pointer-events: none;
}

.oathChoiceStatus{
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none; /* don't block clicks on the button itself */
}

.oathStatus-failed{
  color: var(--blood);
  border-color: rgba(255,77,91,0.6);
  background: rgba(255,77,91,0.20);
}

.oathStatus-fulfilled{
  color: var(--gold);
  border-color: rgba(255,212,59,0.6);
  background: rgba(255,212,59,0.20);
}

.oathChoiceText{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.oathChoiceRow{
  display: flex;
  align-items: center;
  gap: 16px;
}

.oathChoiceIcon{
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--oath-accent) 72%, rgba(255,255,255,.20));
  box-shadow: 0 8px 16px rgba(0,0,0,.30), 0 0 14px color-mix(in srgb, var(--oath-accent) 45%, transparent), 0 0 0 1px rgba(0,0,0,.35) inset;
  overflow: hidden;
}

.oathChoiceIconImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oathChoiceName{
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: none;
  font-size: 14px;
  color: var(--oath-text);
  text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 12px var(--oath-glow);
}

.oathChoiceTagline{
  font-size: 12px;
  color: color-mix(in srgb, var(--oath-accent) 82%, #fff 18%);
  font-weight: 600;
}

.oathChoiceDesc{
  font-size: 12px;
  opacity: 0.88;
  font-weight: 400;
}

.oathOverlayFooter{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

#oathOverlayCancel{
  min-width: 120px;
}


/* --- Full-screen story / boss cinematics --- */
.cinematicOverlay{
  position:fixed;
  inset:0;
  z-index: var(--z-overlay-modal);
  display:none;
  opacity:0;
  background:#000;
  pointer-events:none;
  transition:
    opacity 1600ms ease-out,
    transform 1600ms ease-out;
  transform:scale(1.04);
}

.cinematicOverlay.is-active{
  display:block;
  opacity:1;
  pointer-events:auto;
  transform:scale(1.0);
}

.cinematicOverlay.is-active.is-fading-out{
  opacity:0;
  transform:scale(1.06);
}

.cinematicImage{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: contrast(1.05) saturate(0.96) brightness(0.96);
}

.cinematicVideo{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: contrast(1.05) saturate(0.96) brightness(0.96);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .cinematicOverlay{
    transition:none;
  }
}

/* --- End-of-story overlay (after boss defeat) --- */
.endOfStoryOverlay{
  position:fixed;
  inset:0;
  z-index: var(--z-overlay-modal-elevated);
  display:none;
  align-items:flex-end;
  justify-content:center;
  background: #000;
  opacity:0;
  transition: opacity 900ms ease-out;
  pointer-events:none;
}

.endOfStoryOverlay.is-active{
  display:flex;
  opacity:1;
  pointer-events:auto;
}

.endOfStoryOverlay.is-fading-out{
  opacity:0;
}

.endlessSplash{
  position:absolute;
  inset:0;
  background: url("./data/story/endless.webp") center/cover no-repeat;
  z-index:0;
}

body[data-ui="web"] .endlessSplash,
html[data-ui="web"] .endlessSplash{
  background: url("./data/ui/webui_background.webp") center/cover no-repeat;
}

.endlessActions{
  position:absolute;
  z-index:1;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 0 6vw;
  width: 100%;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
}

.endlessInfo{
  width: min(92vw, 620px);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: linear-gradient(180deg, rgba(10,12,20,0.78), rgba(5,7,12,0.86));
  color: rgba(236,229,218,0.92);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.45) inset;
  display: none;
}

.endlessInfo.is-open{
  display: block;
}

.endlessBtn{
  min-width: 220px;
  background: linear-gradient(180deg, rgba(12,14,22,0.96), rgba(6,8,14,0.98));
  border-color: rgba(255,96,64,0.55);
  box-shadow: 0 10px 24px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,0,0,0.6) inset;
  color: rgba(245,245,255,0.96);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.endlessEnterBtn{
  min-width: min(560px, 92vw);
  min-height: 54px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.endlessAboutBtn{
  min-width: 128px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .92;
}

.endlessBtn:hover{
  border-color: rgba(255,120,74,0.85);
  box-shadow: 0 14px 30px rgba(0,0,0,0.75), 0 0 18px rgba(255,96,64,0.18);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.endlessBtn:active{
  transform: translateY(1px) scale(0.99);
}

.endOfStoryCard{
  max-width: 540px;
  width: min(90vw, 540px);
  padding: 22px 22px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.16), transparent 50%),
    linear-gradient(145deg, rgba(10,12,18,0.98), rgba(4,6,10,0.99));
  box-shadow:
    0 24px 40px rgba(0,0,0,0.80),
    0 0 0 1px rgba(0,0,0,0.80) inset;
  text-align:center;
}

.endOfStoryTitle{
  margin: 0 0 6px 0;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f5e2c7;
}

.endOfStorySubtitle{
  margin: 0 0 16px 0;
  font-size: 15px;
  color: #d6ccc2;
}

.endOfStoryButtons{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.endOfStoryBtn{
  flex: 1 1 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,0.15), transparent 55%),
              rgba(22,24,32,0.96);
  color: #f5ede2;
  font-size: 14px;
  cursor:pointer;
  transition:
    background 150ms ease-out,
    transform 80ms ease-out,
    border-color 150ms ease-out,
    box-shadow 150ms ease-out;
  box-shadow: 0 2px 8px rgba(0,0,0,0.50);
}

.endOfStoryBtn.primary{
  border-color: rgba(255,200,120,0.7);
  background:
    radial-gradient(circle at 15% 0%, rgba(255,224,160,0.22), transparent 55%),
    linear-gradient(135deg, #b36b2f, #dd9a4d);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6) inset,
    0 3px 12px rgba(0,0,0,0.8);
}

.endOfStoryBtn:hover{
  transform: translateY(-1px);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.20), transparent 55%),
    rgba(32,35,46,0.98);
}

.endOfStoryBtn.primary:hover{
  background:
    radial-gradient(circle at 15% 0%, rgba(255,240,180,0.28), transparent 55%),
    linear-gradient(135deg, #c97b38, #f3b96a);
}

.endOfStoryBtn:active{
  transform: translateY(1px) scale(0.98);
}

/* Reduced motion: keep behaviour but no fancy fade */
@media (prefers-reduced-motion: reduce){
  .gameScreen{
    transition: none;
  }
  .endOfStoryOverlay{
    transition:none;
  }
}

/* --- Combat Log Colors --- */
.log .log-damage{
  color: #ff6b6b;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,107,107,0.35);
}

.log .log-block{
  color: #4dabf7;
  font-weight: 700;
}

.log .log-heal{
  color: #69db7c;
  font-weight: 700;
}

.log .log-energy{
  color: #b197fc;
  font-weight: 700;
}

.log .log-gold{
  color: #ffd43b;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,212,59,0.25);
}

.log .log-status-vuln{
  color: #ffa94d;
  font-weight: 700;
}

.log .log-status-weak{
  color: #ffd8a8;
  font-weight: 700;
}

.log .log-status-enrage{
  color: #ff4d5b;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255,77,91,0.45);
}

.log .log-status-doom{
  color: #b197fc;
  font-weight: 700;
}

.log .log-status-burn{
  color: #ff8787;
  font-weight: 700;
}

.log .log-perfect{
  color: #ffd43b;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255,212,59,0.45);
}

.log .log-victory{
  color: #69db7c;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(105,219,124,0.45);
}

.log .log-defeat{
  color: #ff4d5b;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255,77,91,0.45);
}

/* --- Compact Combat HUD (Mobile: shows when hand drawer is open) --- */
.compactCombatHUD{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 69;
  display: none;
  padding: 8px 12px;
  gap: 8px;
  flex-wrap: wrap;
  
  background:
    linear-gradient(180deg, rgba(10,12,18,0.98), rgba(10,12,18,0.92));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  
  transform: translateY(-100%);
  transition: transform 220ms ease;
}

/* Show only on mobile when hand drawer is open in combat mode */

.compactCombatHUD[aria-hidden="true"]{
  display: none !important;
}

.compactCombatToggle{
  display: none;
}

.compactCombatBars{
  width: 100%;
  margin-top: 0;
}

.compactCombatBars .combatBar{
  height: 18px;
}

.compactCombatBars .combatBarLabel{
  font-size: 10px;
}

.compactEnemy{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,107,107,0.26);
  background:
    radial-gradient(120% 170% at 10% 0%, rgba(255,107,107,0.10), transparent 62%),
    linear-gradient(180deg, rgba(20,14,18,0.88), rgba(12,10,14,0.92));
  box-shadow: 0 8px 20px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.35) inset;
}

.compactEnemyTop{
  display: grid;
  grid-template-columns: 28px minmax(0, 0.86fr) minmax(120px, 152px);
  align-items: stretch;
  gap: 8px;
}

.compactPlayerTop{
  display: grid;
  grid-template-columns: 28px minmax(0, 0.86fr) minmax(120px, 152px);
  align-items: stretch;
  gap: 8px;
  margin-bottom: 0;
}

.compactSectionDivider{
  width: 100%;
  height: 1px;
  margin: 2px 0 0 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 14%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.18) 86%, transparent 100%);
}

.compactSideLabel{
  height: 100%;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 11px;
  font-weight: 900;
  color: rgba(246,241,233,.94);
  box-shadow: 0 6px 14px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.36) inset;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
}

.compactSideLabel.enemy{
  border-color: rgba(255,107,107,.42);
  background: linear-gradient(180deg, rgba(170,68,78,.82), rgba(120,48,56,.84));
}

.compactSideLabel.player{
  border-color: rgba(77,171,247,.45);
  background: linear-gradient(180deg, rgba(58,118,178,.84), rgba(42,92,144,.86));
}

.compactEnemyBars{
  flex: 1;
  min-width: 0;
}

.compactNegStatus{
  min-height: 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  align-content: start;
}

.compactNegChip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 1px 2px;
  border-radius: 8px;
  border: 1px solid rgba(168,174,186,.18);
  background: rgba(108,116,134,.08);
  font-size: 9px;
  font-weight: 800;
  color: rgba(176,184,198,.48);
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
}

.compactNegChip .i{ font-size: 11px; line-height: 1; }

.compactNegChip .v{ line-height: 1; }

.compactNegChip.is-inactive .v{
  display: none;
}

.compactNegChip.is-inactive .i{
  opacity: .56;
  filter: grayscale(100%);
}

.compactNegChip.is-active{
  color: rgba(245,240,232,.96);
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 5px 12px rgba(0,0,0,.24), 0 0 0 1px rgba(0,0,0,.28) inset;
}

.compactNegChip.status-vulnerable.is-active{ border-color: rgba(255,169,77,.60); color: #fff0db; background: rgba(255,169,77,.12); }
.compactNegChip.status-weak.is-active{ border-color: rgba(255,216,168,.55); color: #fff7ed; background: rgba(255,216,168,.12); }
.compactNegChip.status-doom.is-active{ border-color: rgba(177,151,252,.58); color: #efe8ff; background: rgba(177,151,252,.12); }
.compactNegChip.status-burn.is-active,
.compactNegChip.status-bleed.is-active{ border-color: rgba(255,107,107,.58); color: #ffe7e7; background: rgba(255,107,107,.12); }

.compactEnemyBars .combatBar,
.compactPlayerPanel .compactCombatBars .combatBar{
  height: 16px;
}

.compactEnemyBars .combatBarLabel,
.compactPlayerPanel .compactCombatBars .combatBarLabel{
  font-size: 10px;
}

.compactEnemyBars .combatBarsRow,
.compactPlayerPanel .compactCombatBars .combatBarsRow{
  gap: 3px;
}

.compactPlayerPanel .compactCombatBars{
  flex: 1;
  margin-top: 0;
}

.compactPlayerPanel{
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(77,171,247,.30);
  background:
    radial-gradient(120% 170% at 10% 0%, rgba(77,171,247,.12), transparent 62%),
    linear-gradient(180deg, rgba(12,18,28,.88), rgba(10,13,20,.92));
  box-shadow: 0 8px 20px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.36) inset;
}

.compactName{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(243,234,223,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(52vw, 220px);
}

.compactStats{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.compactBadge{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
}

.compactBadge.hp{
  color: rgba(255,227,230,0.95);
  border-color: rgba(255,77,91,0.35);
  background: rgba(255,77,91,0.12);
}

.compactBadge.block{
  color: rgba(208,235,255,0.95);
  border-color: rgba(77,171,247,0.35);
  background: rgba(77,171,247,0.12);
}

.compactEnemy .combatBar.hp .combatBarFill{
  background: linear-gradient(90deg, rgba(205,82,90,.72), rgba(226,120,128,.72));
}

.compactEnemy .combatBar.blockmeter .combatBarFill{
  background: linear-gradient(90deg, rgba(136,146,170,.72), rgba(168,178,198,.72));
}

.compactEnemy .combatBar.intentmeter .combatBarFill{
  background: transparent;
  opacity: 0;
}

.compactEnemy .combatBar.intentmeter[data-intent="attack"] .combatBarFill,
.compactEnemy .combatBar.intentmeter[data-intent="coordinated_fury"] .combatBarFill{
  background: transparent;
  opacity: 0;
}

.compactEnemy .combatBar.intentmeter[data-intent="lifesteal"] .combatBarFill{
  background: transparent;
  opacity: 0;
}

.compactEnemy .combatBar.intentmeter[data-intent="block"] .combatBarFill{
  background: transparent;
  opacity: 0;
}

.compactEnemy .combatBar.intentmeter{
  background: rgba(6,8,12,.78);
  border-color: rgba(255,255,255,.20);
}

.compactEnemy .combatBar.intentmeter .combatBarLabel{
  color: rgba(226,230,238,.90);
  font-weight: 900;
}

.compactEnemy .combatBar.intentmeter[data-intent="attack"],
.compactEnemy .combatBar.intentmeter[data-intent="coordinated_fury"]{
  border-color: rgba(255,107,107,.55);
  animation: compactIntentPulseRed 1200ms ease-in-out infinite;
}

.compactEnemy .combatBar.intentmeter[data-intent="attack"] .combatBarLabel,
.compactEnemy .combatBar.intentmeter[data-intent="coordinated_fury"] .combatBarLabel{
  color: rgba(255,158,166,.96);
}

.compactEnemy .combatBar.intentmeter[data-intent="block"]{
  border-color: rgba(77,171,247,.58);
  animation: compactIntentPulseBlue 1200ms ease-in-out infinite;
}

.compactEnemy .combatBar.intentmeter[data-intent="block"] .combatBarLabel{
  color: rgba(160,210,255,.96);
}

.compactEnemy .combatBar.intentmeter[data-intent="dodge"]{
  border-color: rgba(170,220,255,.58);
  animation: compactIntentPulseBlue 1200ms ease-in-out infinite;
}

.compactEnemy .combatBar.intentmeter[data-intent="dodge"] .combatBarLabel{
  color: rgba(196,235,255,.96);
}

.compactEnemy .combatBar.intentmeter[data-intent="counter"]{
  border-color: rgba(255,214,102,.58);
  animation: compactIntentPulseGold 1200ms ease-in-out infinite;
}

.compactEnemy .combatBar.intentmeter[data-intent="counter"] .combatBarLabel{
  color: rgba(255,230,166,.98);
}

@keyframes compactIntentPulseRed{
  0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,.22), 0 0 0 rgba(255,107,107,0); }
  50% { box-shadow: 0 6px 14px rgba(0,0,0,.28), 0 0 12px rgba(255,107,107,.20); }
}

@keyframes compactIntentPulseBlue{
  0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,.22), 0 0 0 rgba(77,171,247,0); }
  50% { box-shadow: 0 6px 14px rgba(0,0,0,.28), 0 0 12px rgba(77,171,247,.22); }
}

@keyframes compactIntentPulseGold{
  0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,.22), 0 0 0 rgba(255,214,102,0); }
  50% { box-shadow: 0 6px 14px rgba(0,0,0,.28), 0 0 12px rgba(255,214,102,.24); }
}

.compactBadge.energy{
  color: rgba(233,226,217,0.95);
  border-color: rgba(255,184,77,0.35);
  background: rgba(255,184,77,0.12);
}

.compactEffects{
  display: flex;
  gap: 6px;
  font-size: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.compactEffects .effectIcon{
  opacity: 0.9;
}

/* Compact Intent Styling */
.compactIntent{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}

.compactIntent[data-type="attack"]{
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.55);
  background: rgba(255,107,107,0.12);
  box-shadow: 0 0 12px rgba(255,107,107,0.25);
}

.compactIntent[data-type="lifesteal"]{
  color: #ffb84d;
  border-color: rgba(255,184,77,0.55);
  background: rgba(255,184,77,0.12);
  box-shadow: 0 0 12px rgba(255,184,77,0.25);
}

.compactIntent[data-type="block"]{
  color: #4dabf7;
  border-color: rgba(77,171,247,0.55);
  background: rgba(77,171,247,0.12);
  box-shadow: 0 0 12px rgba(77,171,247,0.25);
}

.compactIntent[data-type="coordinated_fury"]{
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.55);
  background: rgba(255,107,107,0.12);
  box-shadow: 0 0 12px rgba(255,107,107,0.25);
}

.compactIntent[data-type="dodge"]{
  color: #b5e7ff;
  border-color: rgba(170,220,255,0.56);
  background: rgba(170,220,255,0.12);
  box-shadow: 0 0 12px rgba(170,220,255,0.24);
}

.compactIntent[data-type="counter"]{
  color: #ffe8ad;
  border-color: rgba(255,214,102,0.58);
  background: rgba(255,214,102,0.12);
  box-shadow: 0 0 12px rgba(255,214,102,0.24);
}

.compactIntent[data-type="none"]{
  opacity: 0.6;
}

.compactIntentIcon{
  font-size: 13px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .compactCombatHUD{
    transition: none;
  }
}

/* --- Card Damage Preview Badge --- */
.card .damagePreview{
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d5b, #ff6b6b);
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 12px rgba(255,77,91,0.45);
  color: white;
  font-weight: 900;
  font-size: 13px;
  text-align: center;
  z-index: 10;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 120ms ease, transform 120ms ease;
}

.card.playable:hover .damagePreview{
  opacity: 1;
  transform: scale(1);
}

.card .damagePreview::before{
  content: "⚔";
  margin-right: 2px;
  font-size: 11px;
}

/* Card hover enhancements */
.card.playable{
  position: relative;
}

.card.playable::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  border: 1px solid rgba(255,184,77,0);
  box-shadow: 0 0 0 rgba(255,184,77,0);
  pointer-events: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.card.playable:hover::after{
  border-color: rgba(255,184,77,0.45);
  box-shadow: 0 0 20px rgba(255,184,77,0.15);
}

/* --- Tooltip System (Status/Power descriptions) --- */
[data-tooltip]{
  position: relative;
  cursor: help;
}

[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 8px 12px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18,22,34,0.98), rgba(10,12,18,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  max-width: 220px;
  min-width: 140px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 2200;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after,
[data-tooltip].tooltip-open::after{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Arrow for tooltip */
[data-tooltip]::before{
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-width: 4px;
  border-style: solid;
  border-color: rgba(255,255,255,0.12) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 2201;
}

body[data-ui="mobile"] .topbar,
body[data-ui="mobile"] .topbarMainRow,
body[data-ui="mobile"] .topbarRunSummary,
body[data-ui="mobile"] .topbarCombatBars,
body[data-ui="mobile"] .compactCombatBars,
html[data-ui="mobile"] .topbar,
html[data-ui="mobile"] .topbarMainRow,
html[data-ui="mobile"] .topbarRunSummary,
html[data-ui="mobile"] .topbarCombatBars,
html[data-ui="mobile"] .compactCombatBars{
  overflow: visible;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus::before,
[data-tooltip].tooltip-open::before{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: larger tap targets and bottom-aligned tooltips */

/* Touch device support: show on long press */
@media (hover: none) and (pointer: coarse){
  [data-tooltip]:active::after,
  [data-tooltip]:active::before{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 400ms;
  }
}

/* --- Tutorial Overlay --- */
#tutorialOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-guide);
  display: none;
  pointer-events: none;
}

#tutorialOverlay.overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(80,142,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(3,5,10,.44), rgba(3,5,10,.66));
  opacity: 0;
  transition: opacity 180ms ease;
}

#tutorialOverlay.overlay.is-open{
  display: block;
}

#tutorialOverlay.overlay.is-open::before{
  opacity: 1;
}



#tutorialOverlay .tutorialSpotlight{
  position: fixed;
  border: 2px solid rgba(255,190,96,0.94);
  box-shadow:
    0 0 0 200vmax rgba(0,0,0,0.74),
    0 0 0 1px rgba(255,232,176,0.55) inset,
    0 0 18px rgba(255,184,77,0.42);
  background: rgba(7,10,18,0.06);
  pointer-events: none;
  transition: all 140ms ease;
}

#tutorialOverlay[data-step="open_deck"] .tutorialSpotlight{
  border-color: #ffb84d;
  box-shadow: 0 0 0 200vmax rgba(0,0,0,0.66);
}

#tutorialOverlay .tutorialCard{
  position: fixed;
  width: min(360px, 90vw);
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(156,198,255,0.34);
  background:
    radial-gradient(160% 130% at 0% 0%, rgba(255,184,77,0.17) 0%, rgba(130,176,255,0.10) 40%, rgba(255,255,255,0.02) 56%, rgba(0,0,0,0.50) 100%),
    linear-gradient(180deg, rgba(16,21,36,0.96), rgba(8,11,20,0.98));
  box-shadow:
    0 18px 40px rgba(0,0,0,0.72),
    0 0 0 1px rgba(0,0,0,0.30) inset,
    0 0 18px rgba(92,146,255,0.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  animation: tutorialCardDrift 2.4s ease-in-out infinite;
}

#tutorialOverlay .tutorialCard::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.18), rgba(255,255,255,0.01) 44%, rgba(255,255,255,0.06) 100%);
  mix-blend-mode: screen;
  opacity: .36;
}

#tutorialOverlay #tutorialTitle{
  margin: 0 0 6px 0;
  font-size: 18px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffe3a6;
  text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 10px rgba(255,184,77,.28);
}

#tutorialOverlay .tutorialBody{
  margin: 0;
  font-size: 13px;
  line-height: 1.46;
  color: rgba(231,242,255,.94);
}

#tutorialOverlay .tutorialActions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

#tutorialOverlay .tutorialActions button{
  min-width: 136px;
  padding: 6px 10px;
  border-radius: 11px;
  border: 1px solid rgba(152,196,255,.34);
  background:
    radial-gradient(180% 220% at 10% 0%, rgba(86,136,255,.18), transparent 52%),
    linear-gradient(180deg, rgba(24,36,64,.95), rgba(14,22,42,.96));
  color: rgba(228,241,255,.98);
  box-shadow: 0 8px 16px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.26) inset;
  font-size: 11px;
  letter-spacing: .06em;
}

#tutorialOverlay .tutorialActions button:hover{
  border-color: rgba(188,222,255,.58);
  box-shadow: 0 10px 18px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.26) inset, 0 0 14px rgba(98,152,255,.24);
}

#tutorialOverlay .tutorialArrow{
  display: none;
}

#tutorialOverlay .tutorialRingArrows{
  position: fixed;
  pointer-events: none;
  display: none;
}

#tutorialOverlay .tutorialRingArrows .ringArrow{
  position: absolute;
  width: 0;
  height: 0;
  filter: drop-shadow(0 0 8px rgba(255,184,77,0.55));
  animation: tutorialRingPulse 1.4s ease-in-out infinite;
}

#tutorialOverlay .tutorialRingArrows .arrowTop{
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 16px solid #ffb84d;
}

#tutorialOverlay .tutorialRingArrows .arrowRight{
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #ffb84d;
  animation-delay: 0.1s;
}

#tutorialOverlay .tutorialRingArrows .arrowBottom{
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid #ffb84d;
  animation-delay: 0.2s;
}

#tutorialOverlay .tutorialRingArrows .arrowLeft{
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 16px solid #ffb84d;
  animation-delay: 0.3s;
}

@keyframes tutorialRingPulse{
  0%{ opacity: 0.75; filter: drop-shadow(0 0 6px rgba(255,184,77,0.4)); }
  50%{ opacity: 1; filter: drop-shadow(0 0 12px rgba(255,184,77,0.7)); }
  100%{ opacity: 0.75; filter: drop-shadow(0 0 6px rgba(255,184,77,0.4)); }
}

@keyframes tutorialArrowPulse{
  0%{ transform: translateY(0) scale(1); opacity: 0.85; }
  50%{ transform: translateY(6px) scale(1.06); opacity: 1; }
  100%{ transform: translateY(0) scale(1); opacity: 0.85; }
}

@keyframes tutorialCardDrift{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
  100%{ transform: translateY(0); }
}



/* --- Help / How to Play Modal --- */
#helpOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-help);
  display: none;
}

#helpOverlay.overlay.is-open{
  display: block;
}

#runemasterOverlay.overlay,
#soulCollectorOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-modal-elevated);
  display: none;
}

#runemasterOverlay.overlay.is-open,
#soulCollectorOverlay.overlay.is-open{
  display: block;
}

#runemasterOverlay .overlayBackdrop,
#soulCollectorOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 700px at 50% 30%, rgba(255,184,77,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.94));
}

#runemasterOverlay .runemasterCard,
#soulCollectorOverlay .runemasterCard{
  position: relative;
  width: min(92vw, 640px);
  max-height: min(88vh, 900px);
  margin: 6vh auto 0 auto;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#runemasterOverlay .runemasterCard img,
#soulCollectorOverlay .runemasterCard img{
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
}

#profileOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-help);
  display: none;
}

#talentsOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-guide);
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

#gearOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-guide);
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

#talentsOverlay.overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s linear 0s;
}

#gearOverlay.overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s linear 0s;
}

#talentsOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  background:
    radial-gradient(1200px 780px at 50% 18%, rgba(255,228,170,0.10), transparent 62%),
    linear-gradient(180deg, rgba(2,3,8,0.92), rgba(0,0,0,0.98));
}

#gearOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  background:
    radial-gradient(1200px 780px at 50% 18%, rgba(170,218,255,0.10), transparent 62%),
    linear-gradient(180deg, rgba(2,3,8,0.92), rgba(0,0,0,0.98));
}

#talentsOverlay.overlay.is-open .overlayBackdrop,
#gearOverlay.overlay.is-open .overlayBackdrop{
  opacity: 1;
}

#gearOverlay .gearCard{
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  border: none;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(146,194,255,.08), transparent 65%),
    linear-gradient(180deg, rgba(10,13,22,.86), rgba(5,7,12,.92));
  box-shadow: none;
  overflow: hidden;
  opacity: 0;
  transform: none;
  transition: opacity 220ms ease;
}

#gearOverlay.overlay.is-open .gearCard{
  opacity: 1;
  transform: none;
}

.gearInner{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}

.gearTopBar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 12px;
  background: linear-gradient(180deg, rgba(11,15,24,.56), rgba(11,15,24,.22));
}

.gearTopBar::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-image: url("./data/ui/blue_line.webp"), url("./data/ui/red_line.webp");
  background-size: 50% 100%, 50% 100%;
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  opacity: .92;
  pointer-events: none;
}

.gearTitle{
  font-size: 15px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(226, 240, 255, .92);
}

.gearTitleWrap{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.gearTopBar .inventoryClose{
  flex: 0 0 auto;
}

.gearTitleDivider{
  width: 1px;
  height: 14px;
  background: rgba(186, 212, 244, .38);
  box-shadow: 0 0 0 1px rgba(0,0,0,.20);
}

.gearBottom{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(11,15,24,.20), rgba(11,15,24,.58));
}

.gearHint{
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(194,213,236,.86);
  opacity: .88;
  white-space: nowrap;
}

.gearTotals{
  display: inline-block;
  max-width: 100%;
  font-size: 11px;
  letter-spacing: .03em;
  color: rgba(222,236,252,.88);
  background: rgba(23,36,58,.48);
  border: 1px solid rgba(146,189,244,.34);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gearDetailCard{
  border: 1px solid rgba(140,194,255,.24);
  border-radius: 12px;
  padding: 7px 9px;
  background: rgba(12,18,31,.74);
  display: block;
}

.gearDetailRow{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.gearDetailSlot{
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(196,214,236,.88);
}

.gearDetailMain{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.gearDetailName{
  font-size: 15px;
  font-weight: 900;
  line-height: 1.05;
}

.gearDetailBonus{
  font-size: 10px;
  color: rgba(214,228,244,.84);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gearDetailSub{
  font-size: 9px;
  color: rgba(177,199,227,.78);
  letter-spacing: .02em;
}

.gearDetailStatus{
  width: fit-content;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.gearDetailRight{
  display: grid;
  justify-items: end;
  gap: 4px;
}

.gearDetailStatus.is-equipped{
  border: 1px solid rgba(255,226,156,.65);
  background: rgba(121,85,26,.30);
  color: rgba(255,235,186,.94);
}

.gearDetailStatus.is-empty{
  border: 1px solid rgba(166,189,219,.44);
  background: rgba(63,83,109,.22);
  color: rgba(205,222,244,.86);
}

.gearRarity-common{
  color: #f3f6ff;
}

.gearRarity-uncommon{
  color: #74f8a4;
  text-shadow: 0 0 8px rgba(92,247,130,.36);
}

.gearRarity-rare{
  color: #ffe676;
  text-shadow: 0 0 9px rgba(255,218,94,.36);
}

.gearRarity-empty{
  color: rgba(198,214,236,.84);
}

.gearActionBtn{
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(170,210,255,.36);
  background: linear-gradient(180deg, rgba(37,58,92,.92), rgba(22,34,58,.95));
  color: rgba(232,244,255,.95);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 800;
}

.gearActionBtn:disabled{
  opacity: .5;
}

.gearSlotPickerList .gearActionBtn{
  width: 100%;
  margin-top: 0;
}

.gearSlotPicker{
  position: absolute;
  inset: 0;
  display: none;
  z-index: 5;
}

.gearSlotPicker.is-open{
  display: block;
}

.gearSlotPickerBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(4,8,14,.62);
  backdrop-filter: blur(2px);
}

.gearSlotPickerCard{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 92vw);
  max-height: min(86vh, 860px);
  border-radius: 14px;
  border: 1px solid rgba(154,201,255,.30);
  background: linear-gradient(180deg, rgba(17,25,40,.96), rgba(9,14,24,.98));
  box-shadow: 0 20px 40px rgba(0,0,0,.44), 0 0 0 1px rgba(0,0,0,.28) inset;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.gearSlotPickerTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(173,211,255,.18);
}

.gearSlotPickerActions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gearSlotPickerEdit{
  border-radius: 10px;
  border: 1px solid rgba(148,198,255,.34);
  background: linear-gradient(180deg, rgba(33,53,84,.95), rgba(19,32,54,.97));
  color: rgba(224,240,255,.95);
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.gearSlotPickerEdit[aria-pressed="true"]{
  border-color: rgba(182,220,255,.52);
  box-shadow: 0 0 0 1px rgba(136,188,255,.20) inset;
}

.gearSlotPickerTitle{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(226,240,255,.92);
}

.gearSlotPickerUnequip{
  border-radius: 10px;
  border: 1px solid rgba(255,128,128,.44);
  background: linear-gradient(180deg, rgba(122,32,32,.96), rgba(86,20,20,.98));
  color: rgba(255,228,228,.95);
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.gearSlotPickerUnequip:hover{
  filter: brightness(1.08);
}

.gearSlotPickerUnequip:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.gearSlotPickerList{
  display: grid;
  gap: 6px;
  padding: 8px;
  max-height: 100%;
  overflow: auto;
}

.gearPickerRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.gearPickerRow .gearInventoryItem{
  height: 100%;
}

.gearPickerRow .gearDeleteBtn{
  justify-self: end;
}

.gearSlotPicker.is-editing .gearPickerRow{
  grid-template-columns: minmax(0, 1fr) auto;
}

.gearInventoryItem{
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(145,182,228,.24);
  background: rgba(16,24,38,.72);
  color: rgba(232,242,255,.94);
  padding: 6px 8px;
  text-align: left;
}

.gearInventoryItem[data-rarity="uncommon"]{
  border-color: rgba(92,247,130,.52);
  background:
    linear-gradient(180deg, rgba(20,48,29,.68), rgba(12,30,19,.76)),
    rgba(16,24,38,.72);
  box-shadow: 0 0 0 1px rgba(92,247,130,.14) inset;
}

.gearInventoryItem[data-rarity="rare"]{
  border-color: rgba(255,224,88,.56);
  background:
    linear-gradient(180deg, rgba(54,40,12,.70), rgba(34,24,8,.80)),
    rgba(16,24,38,.72);
  box-shadow: 0 0 0 1px rgba(255,224,88,.16) inset;
}

.gearInventoryItem img{
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.gearInventoryItem[data-rarity="uncommon"] img{
  filter: drop-shadow(0 0 8px rgba(92,247,130,.34));
}

.gearInventoryItem[data-rarity="rare"] img{
  filter: drop-shadow(0 0 10px rgba(255,224,88,.38));
}

.gearInventoryText{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.gearInventoryName{
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.gearInventoryBadges{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gearInlineBadge{
  border-radius: 999px;
  border: 1px solid rgba(170,199,232,.56);
  background: rgba(42,65,94,.46);
  color: rgba(224,239,255,.96);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  line-height: 1.2;
  font-weight: 800;
}

.gearInlineBadge.rarity.uncommon{
  border-color: rgba(92,247,130,.84);
  background: rgba(28,88,48,.54);
  color: rgba(206,255,218,.99);
}

.gearInlineBadge.rarity.rare{
  border-color: rgba(255,224,88,.88);
  background: rgba(108,80,24,.54);
  color: rgba(255,244,178,.99);
}

.gearInlineBadge.equipped{
  border-color: rgba(188,230,255,.78);
  background: rgba(44,86,132,.42);
  color: rgba(224,240,255,.97);
}

.gearInventoryMeta{
  font-size: 10px;
  color: rgba(203,220,242,.86);
}

.gearInventoryItem[data-rarity="uncommon"] .gearInventoryMeta{
  color: rgba(166,250,188,.94);
}

.gearInventoryItem[data-rarity="rare"] .gearInventoryMeta{
  color: rgba(255,234,146,.95);
}

.gearInventoryDelta{
  font-size: 10px;
  color: rgba(178,214,255,.9);
}

.gearInventoryDelta.is-positive{
  color: rgba(175,236,189,.92);
}

.gearInventoryDelta.is-mixed{
  color: rgba(246,217,162,.92);
}

.gearInventoryItem.is-equipped{
  border-color: rgba(168,220,255,.82);
  background: linear-gradient(180deg, rgba(28,50,82,.80), rgba(14,27,46,.88));
  box-shadow: 0 0 0 1px rgba(146,206,255,.36) inset, 0 0 18px rgba(136,196,255,.30);
}

.gearInventoryItem.is-equipped[data-rarity="uncommon"]{
  border-color: rgba(92,247,130,.90);
  background: linear-gradient(180deg, rgba(31,66,42,.84), rgba(16,38,24,.90));
  box-shadow: 0 0 0 1px rgba(92,247,130,.40) inset, 0 0 20px rgba(92,247,130,.34);
}

.gearInventoryItem.is-equipped[data-rarity="rare"]{
  border-color: rgba(255,224,88,.92);
  background: linear-gradient(180deg, rgba(70,52,18,.86), rgba(42,30,10,.92));
  box-shadow: 0 0 0 1px rgba(255,224,88,.42) inset, 0 0 22px rgba(255,224,88,.36);
}

.gearInventoryItem.is-equipped:disabled{
  opacity: 1;
  cursor: default;
}

.gearDeleteBtn{
  border-radius: 10px;
  border: 1px solid rgba(255,128,128,.44);
  background: linear-gradient(180deg, rgba(122,32,32,.96), rgba(86,20,20,.98));
  color: rgba(255,228,228,.95);
  padding: 7px 10px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.gearDeleteBtn:hover{
  filter: brightness(1.08);
}

#gearOverlay .badge.rarity.uncommon{
  border-color: rgba(92,247,130,.82);
  color: #74f8a4;
  background: rgba(92,247,130,.18);
  box-shadow: 0 0 0 1px rgba(92,247,130,.24) inset;
}

#gearOverlay .badge.rarity.rare{
  border-color: rgba(255,224,88,.86);
  color: #ffe676;
  background: rgba(255,224,88,.22);
  box-shadow: 0 0 0 1px rgba(255,224,88,.24) inset;
}

.gearDeleteConfirm{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
  background: rgba(3,6,11,.56);
}

.gearDeleteConfirm.is-open{
  display: flex;
}

.gearDeleteConfirmCard{
  width: min(360px, 86vw);
  border-radius: 12px;
  border: 1px solid rgba(255,155,155,.36);
  background: linear-gradient(180deg, rgba(25,16,19,.96), rgba(16,10,12,.98));
  box-shadow: 0 14px 30px rgba(0,0,0,.42);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.gearDeleteConfirmText{
  font-size: 12px;
  color: rgba(255,224,224,.92);
}

.gearDeleteConfirmActions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gearDeleteConfirmCancel,
.gearDeleteConfirmOk{
  border-radius: 10px;
  padding: 8px 10px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 800;
}

.gearDeleteConfirmCancel{
  border: 1px solid rgba(162,187,220,.34);
  background: linear-gradient(180deg, rgba(37,52,78,.95), rgba(21,31,51,.97));
  color: rgba(224,238,255,.94);
}

.gearDeleteConfirmOk{
  border: 1px solid rgba(255,128,128,.48);
  background: linear-gradient(180deg, rgba(128,38,38,.96), rgba(92,24,24,.98));
  color: rgba(255,230,230,.96);
}

.gearEquippedTag{
  border-radius: 999px;
  border: 1px solid rgba(190,228,255,.74);
  background: rgba(44,86,132,.42);
  color: rgba(224,240,255,.97);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  box-shadow: 0 0 0 1px rgba(108,170,236,.24) inset;
}

.gearInventoryItem.is-equipped[data-rarity="uncommon"] .gearEquippedTag{
  border-color: rgba(92,247,130,.86);
  background: rgba(31,90,50,.48);
  color: rgba(206,255,218,.98);
  box-shadow: 0 0 0 1px rgba(92,247,130,.28) inset;
}

.gearInventoryItem.is-equipped[data-rarity="rare"] .gearEquippedTag{
  border-color: rgba(255,224,88,.88);
  background: rgba(108,80,24,.54);
  color: rgba(255,244,178,.98);
  box-shadow: 0 0 0 1px rgba(255,224,88,.30) inset;
}

#gearOverlay .gearStage{
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#talentsOverlay .talentsCard{
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  border: none;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,184,77,.05), transparent 65%),
    linear-gradient(180deg, rgba(10,13,22,.78), rgba(5,7,12,.86));
  box-shadow: none;
  overflow: hidden;
  opacity: 0;
  transform: none;
  transition: opacity 220ms ease;
}

#talentsOverlay.overlay.is-open .talentsCard{
  opacity: 1;
  transform: none;
}

.talentsInner{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  background:
    var(--talents-bg-image, none) center/cover no-repeat,
    linear-gradient(180deg, rgba(8,11,19,.34), rgba(5,7,12,.44));
}

.talentsTopBar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  line-height: 0;
  background: linear-gradient(180deg, rgba(11,15,24,.56), rgba(11,15,24,.22));
  border-bottom: 0;
}

.talentsTopBar::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-image: url("./data/ui/blue_line.webp"), url("./data/ui/red_line.webp");
  background-size: 50% 100%, 50% 100%;
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  opacity: .92;
  pointer-events: none;
}

.talentsTopTitleImg{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.42));
  pointer-events: none;
  user-select: none;
}

#talentsOverlay .talentTreeView{
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

#talentsOverlay .talentTreeHeader{
  display: none;
}

#talentsOverlay .talentTreeMobile{
  height: 100%;
  min-height: 0;
  gap: 0;
}

#talentsOverlay .talentTreeStage{
  flex: 1;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
}

#talentsOverlay .talentTreeMobile .talentTreeStage::before{
  opacity: .78;
}

#talentsOverlay .talentNodeLabel{
  bottom: -20px;
}

.talentsFooter{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 12px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 96px;
  border-top: 0;
  background: linear-gradient(180deg, rgba(11,15,24,.20), rgba(11,15,24,.58));
}

.talentsFooter::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background-image: url("./data/ui/blue_line.webp"), url("./data/ui/red_line.webp");
  background-size: 50% 100%, 50% 100%;
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  opacity: .92;
  pointer-events: none;
}

.talentsFooterBtn{
  min-height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 800;
  color: #eef4ff;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.28) inset;
}

.talentsResetBtn{
  border: 0;
  border-radius: 0;
  background: url("./data/ui/reset_talents_button.webp") center/100% 100% no-repeat;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.talentsCloseBtn{
  border: 0;
  border-radius: 0;
  background: url("./data/ui/close_talents_button.webp") center/100% 100% no-repeat;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.talentsFooterBtn:hover{
  filter: brightness(1.08);
}

.talentsFooterBtn:active{
  transform: translateY(1px);
}


#profileOverlay.overlay.is-open{
  display: block;
}

#memoryOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-memory);
  display: none;
}

#memoryOverlay.overlay.is-open{
  display: block;
}

#memoryOverlay.overlay .memoryCard{
  transition: opacity 420ms ease, transform 420ms ease;
}

#memoryOverlay.overlay.is-fading-out .memoryCard{
  opacity: 0;
  transform: translate(-50%, -48%);
}

#memoryOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  background: transparent;
}

#memoryOverlay .memoryCard{
  position: absolute;
  --memory-card-w: clamp(100px, 17vw, 150px);
  --memory-cols: 4;
  --memory-rows: 3;
  --memory-gap: 10px;
  --memory-side-pad: 28px;
  --memory-top-ui: 122px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(98vw, calc((var(--memory-cols) * var(--memory-card-w)) + ((var(--memory-cols) - 1) * var(--memory-gap)) + var(--memory-side-pad)));
  height: min(98vh, calc((var(--memory-rows) * (var(--memory-card-w) * (317 / 225))) + ((var(--memory-rows) - 1) * var(--memory-gap)) + var(--memory-top-ui)));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(255,236,202,.24);
  background: linear-gradient(180deg, rgb(15,20,34), rgb(9,12,22));
  --memory-intro-ms: 1850ms;
}

.memoryIntro{
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}

.memoryIntro img{
  width: min(84%, 360px);
  height: auto;
  opacity: 0;
  animation: memoryIntroFade var(--memory-intro-ms) ease both;
}

#memoryOverlay.memory-intro-active .memoryIntro{
  display: flex;
}

#memoryOverlay.memory-intro-active .memoryBoard{
  animation: memoryCardsIntroFade var(--memory-intro-ms) ease both;
}

.memoryHeader{
  padding: 10px 14px 6px;
  border-bottom: 1px solid rgba(255,226,178,.14);
  background:
    linear-gradient(180deg, rgba(255,210,140,.08), rgba(255,210,140,.02)),
    linear-gradient(180deg, rgba(8,12,20,.82), rgba(7,10,18,.60));
}

.memoryStats{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(247,235,205,.98);
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 12px rgba(255,208,128,.16);
}

.memorySummary{
  min-height: 20px;
  padding: 6px 14px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243,229,196,.94);
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}

.memoryBoard{
  padding: 10px 14px 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(4, var(--memory-card-w));
  gap: var(--memory-gap);
  justify-content: center;
  align-content: start;
}

.memoryTile{
  position: relative;
  height: auto;
  aspect-ratio: 225 / 317;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26,38,68,.88), rgba(15,22,40,.95));
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 160ms ease;
}

.memoryTile.is-just-matched{
  animation: memoryMatchPulse 520ms ease;
}

.memoryTile.is-just-mismatched{
  animation: memoryMismatchShake 360ms ease;
  box-shadow: 0 0 0 2px rgba(255,94,94,.42) inset, 0 0 18px rgba(255,94,94,.24);
}

.memoryTile:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.memoryTile.is-faceup,
.memoryTile.is-matched{
  background: linear-gradient(180deg, rgba(32,46,78,.90), rgba(20,31,56,.96));
}

.memoryTileFaceDown,
.memoryTileFaceUp{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.memoryTileFaceDown{
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.memoryTileFaceUp{
  flex-direction: column;
  gap: 8px;
}

.memoryTileFloat{
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff5de;
  background: rgba(14,28,18,.82);
  border: 1px solid rgba(164,255,197,.46);
  box-shadow: 0 10px 16px rgba(0,0,0,.45);
  animation: memoryFloatUp 700ms ease forwards;
}

.memoryTileFaceUp img{
  width: 82%;
  max-height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.44));
}

.memoryTileLabel{
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(248,243,230,.98);
  text-align: center;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(10,14,24,.70);
}

.memoryTile.is-matched{
  box-shadow: 0 0 0 1px rgba(129,240,183,.35) inset, 0 0 16px rgba(68,180,125,.24);
}

@keyframes memoryFloatUp{
  0% { opacity: 0; transform: translateY(8px) scale(.96); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(1.02); }
}

@keyframes memoryIntroFade{
  0% { opacity: 0; transform: scale(.94); }
  18% { opacity: 1; transform: scale(1); }
  78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

@keyframes memoryCardsIntroFade{
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes memoryMatchPulse{
  0% { transform: scale(1); }
  35% { transform: scale(1.04); box-shadow: 0 0 0 1px rgba(129,240,183,.45) inset, 0 0 22px rgba(96,255,179,.30); }
  100% { transform: scale(1); }
}

@keyframes memoryMismatchShake{
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  55% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}


@media (prefers-reduced-motion: reduce) {
  #memoryOverlay.memory-intro-active .memoryBoard,
  .memoryTile,
  .memoryIntro img,
  .memoryTileFloat,
  .memoryTile.is-just-matched,
  .memoryTile.is-just-mismatched{
    animation: none !important;
    transition: none !important;
  }
}

#profileOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 700px at 50% 20%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.88), rgba(0,0,0,0.96));
}

#profileOverlay .profileCard{
  position: relative;
  width: min(680px, 94vw);
  max-height: min(84vh, 820px);
  margin: 8vh auto 0 auto;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140% 120% at 20% 0%, rgba(255,184,77,.10) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(16,19,32,.94), rgba(8,10,16,.96));
  box-shadow: 0 18px 40px rgba(0,0,0,.72);
  overflow: auto;
}

.profileInner{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profileHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#profileOverlayTitle{
  margin: 0;
  font-size: 20px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.profileHint{
  margin: 0;
  font-size: 12px;
  opacity: .86;
}

.profilePreview{
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}

.profilePortraitStack{
  width: auto;
}

.profileBadgePreview{
  pointer-events: none;
  cursor: default;
}

#helpOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 840px at 50% 12%, rgba(255,198,116,0.16), transparent 62%),
    radial-gradient(980px 680px at 12% 100%, rgba(112,170,255,0.12), transparent 68%),
    linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.96));
}

#helpOverlay .overlayCard{
  position: relative;
  width: min(800px, 94vw);
  max-height: min(88vh, 900px);
  margin: 6vh auto 0 auto;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,214,142,0.24);
  background:
    radial-gradient(140% 120% at 14% 0%, rgba(255,186,96,0.18) 0%, rgba(118,174,255,0.08) 42%, rgba(0,0,0,0.34) 100%),
    linear-gradient(180deg, #121826, #070a12);
  box-shadow:
    0 24px 56px rgba(0,0,0,0.78),
    0 0 0 1px rgba(0,0,0,0.34) inset,
    0 0 28px rgba(255,194,104,0.14);
  overflow-y: auto;
}

.helpOverlayInner{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#helpOverlayTitle{
  margin: 0;
  font-size: 23px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,229,184,0.98);
  text-shadow: 0 0 16px rgba(255,194,102,0.24);
  padding: 10px 12px;
  border: 1px solid rgba(255,214,142,0.22);
  border-radius: 12px;
  background:
    radial-gradient(130% 190% at 0% 0%, rgba(255,191,110,0.18), transparent 56%),
    linear-gradient(180deg, rgba(26,30,44,0.86), rgba(14,17,28,0.92));
}

.helpSection{
  padding: 12px;
  border-radius: 12px;
  background:
    radial-gradient(180% 140% at 0% 0%, rgba(255,190,110,0.10), rgba(142,182,255,0.06) 46%, rgba(255,255,255,0.02) 70%),
    linear-gradient(180deg, rgba(24,29,44,0.82), rgba(13,16,26,0.90));
  border: 1px solid rgba(255,214,142,0.18);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.34),
    0 0 0 1px rgba(0,0,0,0.22) inset;
}

.helpSection h3{
  margin: 0 0 8px 0;
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,221,148,0.96);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.helpSection h3::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,204,120,0.96);
  box-shadow: 0 0 10px rgba(255,194,104,0.64);
}

.helpSection p,
.helpSection li{
  margin: 0 0 6px 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(236,241,255,0.9);
}

.helpSection ul{
  margin: 0;
  padding-left: 20px;
}

.helpGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.helpIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  margin-right: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,214,142,0.22);
  font-size: 14px;
}

.helpOverlayFooter{
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

#helpOverlayClose{
  min-width: 180px;
  border: 1px solid rgba(255,210,136,0.52);
  background:
    radial-gradient(130% 220% at 10% 0%, rgba(255,191,110,0.32), transparent 56%),
    linear-gradient(180deg, rgba(112,40,24,0.94), rgba(70,22,16,0.96));
  color: rgba(255,231,206,0.98);
  box-shadow: 0 14px 24px rgba(0,0,0,0.36), 0 0 12px rgba(255,170,95,0.18);
}

#menuInfoOverlay .overlayBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
}

#menuInfoOverlay.overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-help);
  display: none;
}

#menuInfoOverlay.overlay.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

#menuInfoOverlay .menuInfoCard{
  position: relative;
  margin: 0;
  width: min(760px, calc(100vw - 24px));
  max-height: min(84vh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid rgba(128,178,232,.26);
  border-radius: 14px;
  background:
    radial-gradient(140% 140% at 16% 0%, rgba(110,170,234,.14), rgba(255,255,255,.01) 48%, rgba(0,0,0,.26) 100%),
    linear-gradient(180deg, rgba(14,17,27,.98), rgba(8,10,16,.98));
  box-shadow: 0 18px 42px rgba(0,0,0,.6), 0 0 24px rgba(96,164,232,.12);
}

#menuInfoOverlay .menuInfoCard::before{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  border: 1px solid rgba(196,222,252,.10);
  pointer-events: none;
}

.menuInfoBody{
  margin-top: 10px;
  display: grid;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(240,232,220,.94);
}

.menuInfoBody h3{
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(204,228,255,.96);
}

.menuInfoBody p,
.menuInfoBody ul{
  margin: 0;
}

.menuInfoBody p,
.menuInfoBody li{
  overflow-wrap: anywhere;
}

.menuInfoBody ul{
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.menuInfoBody > h3,
.menuInfoBody > p,
.menuInfoBody > ul{
  padding: 0 8px;
}

.menuInfoBody > h3 + p,
.menuInfoBody > h3 + ul{
  margin-top: -3px;
}

#menuInfoTitle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

#menuInfoTitle::before{
  content: "*";
  font-size: 14px;
  color: rgba(198,226,255,.95);
  text-shadow: 0 0 10px rgba(112,178,236,.24);
}

#menuInfoOverlay[data-doc="about"] #menuInfoTitle::before{ content: "A"; }
#menuInfoOverlay[data-doc="privacy"] #menuInfoTitle::before{ content: "P"; }
#menuInfoOverlay[data-doc="terms"] #menuInfoTitle::before{ content: "T"; }
#menuInfoOverlay[data-doc="contact"] #menuInfoTitle::before{ content: "C"; }
#menuInfoOverlay[data-doc="legal"] #menuInfoTitle::before{ content: "L"; }

.menuInfoSubtitle{
  margin-top: 6px;
  padding: 0 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(184,210,238,.86);
}

/* Mobile help adjustments */

/* --- Inventory Tabs & Deck Library --- */

.deckHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.deckCount{
  color: rgba(233,226,217,.90);
  font-size: 13px;
}

.deckCount.warning{
  color: #ff6b6b;
}

.deckGestureHint{
  margin: 0 0 10px 0;
  font-size: 11px;
  letter-spacing: .02em;
  color: rgba(207,214,230,.72);
}

.deckLibraryBody{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.deckCardItem{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140% 160% at 12% 0%, rgba(255,184,77,.08), transparent 60%),
    linear-gradient(180deg, rgba(24,26,38,.94), rgba(14,16,24,.96));
  box-shadow: 0 14px 28px rgba(0,0,0,.40), 0 0 0 1px rgba(0,0,0,.38) inset;
  transition: transform 120ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

/* Card type-specific styling similar to hand cards */
.deckCardItem[data-type="attack"]{
  border-color: rgba(255,107,107,.25);
  background:
    url("./data/cards/bg_attack.svg") center/cover no-repeat,
    radial-gradient(140% 160% at 12% 0%, rgba(255,107,107,.12), transparent 60%),
    linear-gradient(180deg, rgba(24,26,38,.94), rgba(14,16,24,.96));
}

.deckCardItem[data-type="block"]{
  border-color: rgba(77,171,247,.25);
  background:
    url("./data/cards/bg_block.svg") center/cover no-repeat,
    radial-gradient(140% 160% at 12% 0%, rgba(77,171,247,.12), transparent 60%),
    linear-gradient(180deg, rgba(24,26,38,.94), rgba(14,16,24,.96));
}

.deckCardItem[data-type="skill"]{
  border-color: rgba(177,151,252,.25);
  background:
    url("./data/cards/bg_skill.svg") center/cover no-repeat,
    radial-gradient(140% 160% at 12% 0%, rgba(177,151,252,.12), transparent 60%),
    linear-gradient(180deg, rgba(24,26,38,.94), rgba(14,16,24,.96));
}

.deckCardItem[data-type="power"]{
  border-color: rgba(255,212,59,.25);
  background:
    url("./data/cards/bg_power.svg") center/cover no-repeat,
    radial-gradient(140% 160% at 12% 0%, rgba(255,212,59,.12), transparent 60%),
    linear-gradient(180deg, rgba(24,26,38,.94), rgba(14,16,24,.96));
}

.deckCardItem:hover{
  transform: translateY(-1px);
  border-color: rgba(255,184,77,.32);
  box-shadow: 0 16px 30px rgba(0,0,0,.44), 0 0 0 1px rgba(0,0,0,.40) inset, 0 0 18px rgba(255,184,77,.10);
}

.deckCardItem.is-pending{
  border-color: rgba(255,107,107,.32);
  box-shadow: 0 14px 28px rgba(0,0,0,.40), 0 0 0 1px rgba(0,0,0,.38) inset, 0 0 16px rgba(255,107,107,.12);
}

.deckCardInfo{ display: flex; flex-direction: column; gap: 4px; }

.deckCardActions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.deckCardName{ font-weight: 800; letter-spacing: .03em; color: rgba(245,236,224,.96); }

.deckCardMeta{ font-size: 12px; letter-spacing: .02em; color: rgba(207,214,230,.72); }

/* Type badge for deck cards */
.deckCardTypeBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-left: 6px;
}

.deckCardTypeBadge.attack{
  border: 1px solid rgba(255,107,107,.55);
  color: #ffd6d6;
  background: rgba(255,107,107,.12);
}

.deckCardTypeBadge.block{
  border: 1px solid rgba(77,171,247,.55);
  color: #d0ebff;
  background: rgba(77,171,247,.12);
}

.deckCardTypeBadge.skill{
  border: 1px solid rgba(177,151,252,.55);
  color: #ece3ff;
  background: rgba(177,151,252,.12);
}

.deckCardTypeBadge.power{
  border: 1px solid rgba(255,212,59,.55);
  color: #fff3bf;
  background: rgba(255,212,59,.12);
}

.deckCardCount{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
  color: #ffb84d;
  font-weight: 750;
}

.deckPendingBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,107,107,.45);
  background: rgba(255,107,107,.12);
  color:#ffc9c9;
  font-size:12px;
  letter-spacing:.04em;
  width:max-content;
}

.deckCardItem-swiped{
  transform: translateX(-70px) scale(0.98);
  opacity: 0.78;
}

.deckCardItem-unswiped{
  transform: translateX(70px) scale(0.98);
  opacity: 0.82;
}

.deckCardCost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: rgba(255,184,77,.18);
  border: 1px solid rgba(255,184,77,.42);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #ffd48a;
  margin-right: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,.28);
}

.btnRemoveCard{
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,107,107,.50);
  background:
    radial-gradient(140% 180% at 16% 0%, rgba(255,107,107,.16), transparent 60%),
    linear-gradient(180deg, rgba(36,16,18,.96), rgba(24,10,12,.96));
  color: #ffc9c9;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 750;
  box-shadow: 0 12px 22px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.42) inset;
  transition: transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.btnRemoveCard:hover{
  border-color: rgba(255,107,107,.70);
  box-shadow: 0 14px 26px rgba(0,0,0,.40), 0 0 0 1px rgba(0,0,0,.40) inset, 0 0 14px rgba(255,107,107,.16);
}

.btnRemoveCard[data-action="unqueue"]{
  border-color: rgba(105,219,124,.55);
  background:
    radial-gradient(140% 180% at 16% 0%, rgba(105,219,124,.14), transparent 60%),
    linear-gradient(180deg, rgba(18,34,20,.96), rgba(10,24,12,.96));
  color: #d3f9d8;
}

.btnRemoveCard[data-action="unqueue"]:hover{
  border-color: rgba(105,219,124,.75);
  box-shadow: 0 14px 26px rgba(0,0,0,.40), 0 0 0 1px rgba(0,0,0,.40) inset, 0 0 14px rgba(105,219,124,.18);
}

.btnRemoveCard:active{ transform: translateY(1px) scale(.99); }

.btnRemoveCard:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.50);
  box-shadow: none;
}

.minDeckWarning{ margin-top: 8px; }