/* Locally bundled OFL fonts. Decorative art is separate from live labels. */
@font-face { font-family: 'Rift Display'; src: url('/modern/fonts/cinzel.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Rift UI'; src: url('/modern/fonts/barlow-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rift UI'; src: url('/modern/fonts/barlow-semibold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }
:root { --display: 'Rift Display', Georgia, serif; --ui: 'Rift UI', 'Segoe UI', sans-serif; --num: 'Rift UI', sans-serif; --stat: 'Rift UI', sans-serif; }
.field__details { display: none; }
.card-hover-preview {
  position: fixed; inset: auto; margin: 0; padding: 9px;
  width: min(320px, 38vw); max-height: calc(100dvh - 16px);
  color: #f4e8cd; background: #08111af7; border: 1px solid #b19458;
  border-radius: 8px; box-shadow: 0 12px 40px #000c; pointer-events: none;
  font: 15px/1.3 var(--ui); overflow: hidden;
}
.card-hover-preview img { display: block; width: 100%; height: min(440px, 64dvh); object-fit: contain; }
.card-hover-preview strong { display: block; font: 600 15px/1.4 var(--display); margin-top: 6px; }
.card-hover-preview p { margin-top: 4px; font-size: 13px; max-height: 12dvh; overflow: hidden; }
/* The full-card panel replaces lifting the source out from under the cursor. */
.unit:hover { --lift: 0px; --scale: 1; }
/* A square interaction footprint contains a portrait frame, including when
   it turns sideways; the existing fit algorithm still reserves the full span. */
.unit { --tap: 0deg; --tap-scale: 1; }
.unit .unit__frame { inset: 0 10%; }
.unit .unit__art { left: 17.8%; top: 10%; width: 64.4%; height: 78.4%; }
.unit--exhausted .unit__frame, .unit--exhausted .unit__art { transform: rotate(90deg); }
.unit--exhausted .unit__art img { filter: saturate(.75) brightness(.8); }
.unit .might { right: 8%; }
.unit--exhausted .might { right: 0; bottom: 8%; }
.rune-meter__amount { font: 400 14px/1 var(--ui); color: #aebdcc; white-space: nowrap; }
.rune-meter__amount b { font: 600 22px/1 var(--num); color: #a4eaff; }
.res .rune-meter { display: flex; width: 100%; gap: 2px; height: 7px; }
.rune-meter__bar { flex: 1; min-width: 0; border-radius: 1px; background: #283745; border: 1px solid #496074; }
.rune-meter__bar.is-ready { background: #45bdff; border-color: #b5eaff; box-shadow: 0 0 4px #339ee988; }
/* Expanded inspection occupies the same battlefield band, including its tabs. */
#stage:not(.is-stacked) .fields.is-focused {
  top: 26%; height: 41%; padding-top: 2.8cqw;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
#stage:not(.is-stacked) .field-nav.is-open {
  left: .8%; right: 19.5%; top: 26%; height: 2.4cqw; z-index: 10;
  gap: .3cqw; background: #07111bed;
}
#stage:not(.is-stacked) .field-nav__button { min-height: 0; padding: .1cqw .5cqw; }
#stage:not(.is-stacked) .field-nav__button strong { font: 600 .73cqw var(--display); }
#stage:not(.is-stacked) .field-nav__button small { font: 400 .65cqw var(--ui); }
#stage:not(.is-stacked) .is-focused-field .field__body { padding-left: 29%; }
#stage:not(.is-stacked) .is-focused-field .field__details {
  display: block; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 28%;
  padding: .6cqw .9cqw; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(90deg, #07111bf5, #0b1726ed);
  border-right: 1px solid #aa8748; scrollbar-width: thin;
}
.field__card-image { display: block; width: 100%; max-height: 5.5cqw; object-fit: contain; margin-bottom: .3cqw; cursor: zoom-in; }
.field__card-name { font: 600 .9cqw/1.3 var(--display); margin: .3cqw 0; color: #eed6a3; }
.field__card-type { font: 600 .75cqw var(--ui); color: #a9c4d7; margin-bottom: .35cqw; }
.field__card-rules { font: 400 .9cqw/1.4 var(--ui); white-space: pre-wrap; color: #edf1e8; }
.hud__portrait-crop { position: absolute; inset: 15.5%; border-radius: 50%; overflow: hidden; }
.hud__portrait .hud__portrait-crop img { position: static; width: 178.6%; height: auto; max-width: none; margin: -10% 0 0 -39.3%; transform: none; border-radius: 0; }
.field__name, .shelf__label, .hud__name, .ophand__label i, .bigaction__label, .turnstate__who { font-family: var(--display); font-weight: 600; }
.res__label, .slot__label, .pile small { font-family: var(--ui); font-weight: 600; letter-spacing: .06em; color: #cbd3da; }
.might__n, .dmg__n, .gem, .pile__n, .hud__points, .res__n { font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums; }
.shelf__label, .ophand__label, .hud__name {
  background: url('/modern/assets/generated-v7/nameplate.png') center/100% 195% no-repeat;
  box-shadow: none; border: 0; border-radius: 0; color: #f0dbab;
}
.field__state { font-family: var(--ui); font-size: 11px; line-height: 1.3; letter-spacing: .03em; padding: 3px 8px; color: #d9e3ee; }
.chain__head { font: 600 14px/1.2 var(--display); }
.chain__note { font: 400 11px/1.3 var(--ui); margin: 3px 0; }
.chain__name { font: 600 12px/1.2 var(--ui); }
.chain__detail, .chain__owner { font: 400 11px/1.2 var(--ui); }

/* One compact label replaces both the header and the contest badge.
   Absolute positioning gives the entire framed area back to the lanes. */
#stage .field__badge {
  position: absolute; z-index: 6; right: max(10px, .85cqw); bottom: max(8px, .7cqw);
  display: flex; align-items: center; gap: max(7px, .4cqw);
  max-width: calc(100% - max(20px, 1.7cqw)); padding: 4px 7px;
  border: 1px solid #9b824d; border-radius: 4px;
  background: #08131bed; box-shadow: 0 2px 6px #0008;
}
#stage .field__badge .field__name {
  flex: 1 1 auto; width: auto; min-width: 0; padding: 0;
  font: 600 clamp(11px, .74cqw, 20px)/1.25 var(--display);
  letter-spacing: .025em; white-space: normal; overflow-wrap: anywhere;
  text-align: left; text-shadow: 0 1px 2px #000;
}
#stage .field__badge .field__score {
  flex: 0 0 auto; padding-left: max(7px, .4cqw); border-left: 1px solid #9b824d80;
  font: 600 clamp(12px, .8cqw, 22px)/1.25 var(--num);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;
}
#stage .field__badge .field__zoom {
  flex: 0 0 auto; width: 22px; height: 22px; min-width: 22px; min-height: 22px;
  font: 14px/1 var(--ui); background: transparent; box-shadow: none; color: #cbd9e6;
}
@media (pointer: coarse) {
  #stage .field__badge .field__name { min-height: 32px; }
  #stage .field__badge .field__zoom { width: 32px; height: 32px; }
}

@media (min-width: 701px) and (orientation: landscape) and (pointer: fine) {
  #stage:not(.is-stacked) .field-nav.is-open { left: 3%; right: 13%; }
  .field__name { font-family: var(--display); font-size: .74cqw; line-height: 1.35; letter-spacing: .04em; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
  .field__score { font: 600 .68cqw/1.25 var(--ui); letter-spacing: .05em; }
  .field__title { display: grid; gap: .18cqw; padding-inline: 2.05cqw; }
  .shelf__label { top: .18cqw; height: 1.5cqw; min-width: 13cqw; padding: .15cqw 1.6cqw; align-items: center; justify-content: center; font-size: .72cqw; letter-spacing: .025em; }
  .shelf__label span { font: 600 .68cqw var(--ui); color: #c4d1df; letter-spacing: .04em; }
  .shelf { padding-top: 1.95cqw; }
  .shelf--opp { top: 12.5%; height: 12.5%; width: 32%; left: 34%; }
  .shelf--you { top: 68.5%; height: 16%; }
  .ophand__label { height: 1.65cqw; min-width: 12cqw; padding-inline: 1.8cqw; background-image: url('/modern/assets/generated-v7/nameplate.png'); background-size: 100% 195%; }
  .ophand__label i { font-size: .77cqw; }
  .ophand__label b { font-size: 1cqw; }
  .hud__name { font-size: .8cqw; line-height: 1.65; padding-inline: .8cqw; }
  .hud__points { font-size: 1.65cqw; }
  .hud__xp { font: 600 .9cqw var(--ui); letter-spacing: .05em; }
  .res__label { font-size: .66cqw; }
  .res__group { justify-content: space-evenly; }
  .res__row { gap: .3cqw; }
  .gem { width: 1.7cqw; font-size: 1cqw; }
  .slot__label { font-size: .67cqw; }
  .rune { width: 1.25cqw; flex-basis: 1.25cqw; }
  .runes { gap: .18cqw; }
  .rune-meter__amount { font-size: .75cqw; }
  .rune-meter__amount b { font-size: 1.25cqw; }
  .res .rune-meter { height: .4cqw; gap: .09cqw; }
  .pilechip small, .pile--deck small { font: 600 .65cqw var(--ui); letter-spacing: .04em; }
  .pile__n { font-size: 1.6cqw; }
  .bigaction__label { font-size: 1.2cqw; letter-spacing: .04em; }
  .turnstate__who { font-size: .9cqw; letter-spacing: .04em; }
  .turnstate__phase { font: 600 .8cqw var(--ui); letter-spacing: .06em; }
  .field__state { bottom: .65cqw; right: .8cqw; font-size: .64cqw; padding: .1cqw .45cqw; }
  .chain { top: 64%; max-height: 12.5%; padding: .4cqw; border: 1px solid #8a7045; border-image: none; background: #0a1421ed; }
  .chain__head { font-size: .8cqw; }
  .chain__note { display: none; }
  .chain__item { padding: .2cqw; }
  .chain__name { font-size: .73cqw; }
  .chain__detail, .chain__owner { font-size: .62cqw; }
  .handzone { bottom: -4%; height: 13%; }
  .hand .card { width: 5.8cqw; margin-inline: -.65cqw; }
  .hand .card:hover, .hand .card:focus-visible { --lift: 0px; transform: rotate(var(--fan, 0deg)); z-index: 60; }
}


/* Full-width rune cards below identity; a separate vertical resource column. */
#stage .res { display: grid; grid-template-columns: minmax(0, 1fr) 90px; grid-template-rows: repeat(3, auto); gap: 5px; height: auto; padding: 0; }
#stage .res__group--runes { grid-column: 1; grid-row: 1 / 4; min-width: 0; padding: 10px 12px; gap: 4px; border: 0; box-shadow: none; background: url('/modern/assets/generated-v5/rune-panel-large.png') center / 100% 100% no-repeat; }
#stage .res__group:not(.res__group--runes) { grid-column: 2; flex-direction: column; justify-content: center; gap: 3px; padding: 4px; }
#stage .res__row { min-height: 0; flex-wrap: wrap; justify-content: center; }
#stage .res .rune-tokens { --rune-card-width: 48px; display: grid; grid-template-columns: repeat(var(--rune-gaps), minmax(0, 1fr)) var(--rune-card-width); align-items: center; width: 100%; height: auto; overflow: visible; padding: 3px 0; gap: 0; }
.rune-token { position: relative; width: var(--rune-card-width); aspect-ratio: 5 / 7; padding: 0; border: 1px solid var(--gem); border-radius: 4px; background: #101b25; cursor: pointer; box-shadow: -3px 0 6px #0009; }
.rune-token__art { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; pointer-events: none; }
.rune-token__state { position: absolute; left: 0; right: 0; bottom: 0; background: #07111ee8; color: white; font: 9px/1.3 var(--ui); text-align: center; pointer-events: none; }
.rune-token--spent .rune-token__art { position: absolute; width: var(--rune-card-width); height: calc(var(--rune-card-width) * 1.4); left: 50%; top: 50%; object-fit: fill; transform: translate(-50%, -50%) rotate(90deg); }
.rune-token--spent::after { content: none; }
.rune-token.is-legal { outline: 1px solid var(--gem); }
.rune-token:hover, .rune-token:focus-visible, .rune-token.is-selected { z-index: 20; outline: 2px solid #ffe0a0; outline-offset: 1px; transform: translateY(-4px); }
@media (min-width: 701px) and (orientation: landscape) {
  #stage:not(.is-stacked) .res {
    left: 2%; width: 31.5%; height: calc(15.5% + 7cqw);
    grid-template-columns: 25cqw 6cqw; grid-template-rows: repeat(3, minmax(0, 1fr)) 7cqw;
    column-gap: .5cqw; row-gap: .15cqw; pointer-events: none;
  }
  #stage:not(.is-stacked) .res--opp { top: 2%; }
  #stage:not(.is-stacked) .res--you { top: 69%; }
  #stage:not(.is-stacked) .res__group { pointer-events: auto; }
  #stage:not(.is-stacked) .res__group--runes { grid-column: 1; grid-row: 4; padding: .4cqw .65cqw; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: .2cqw .5cqw; }
  #stage:not(.is-stacked) .rune-meter__amount { justify-self: end; }
  #stage:not(.is-stacked) .res .rune-tokens { --rune-card-width: 3.35cqw; grid-column: 1 / -1; padding: .15cqw 0; }
  #stage:not(.is-stacked) .res__group:not(.res__group--runes) { grid-column: 2; padding: .15cqw .25cqw; gap: .05cqw; }
  #stage:not(.is-stacked) .res__group:nth-child(2) { grid-row: 1; }
  #stage:not(.is-stacked) .res__group:nth-child(3) { grid-row: 2; }
  #stage:not(.is-stacked) .res__group:nth-child(4) { grid-row: 3; }
  #stage:not(.is-stacked) .res .gem { width: 1.3cqw; }
  #stage:not(.is-stacked) .rune-token__state { font-size: .48cqw; }
  #stage:not(.is-stacked) .shelf--opp, #stage:not(.is-stacked) .shelf--you { left: 35%; width: 35%; }
  #stage:not(.is-stacked) .fields { top: 32.5%; height: 34.5%; }
}
@media (orientation: portrait), (max-width: 700px) {
  #stage .res__group--runes { min-height: 132px; }
  #stage .res__label { font-size: 10px; }
}

#stage .res__row--power { display: grid; grid-template-columns: repeat(var(--power-count), minmax(0, 1fr)); width: 100%; gap: 2px; justify-items: center; }
#stage .res__restricted { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; overflow: auto; }
#stage .res__restricted .res__group { flex: 1 0 100%; max-width: none; box-sizing: border-box; }
#stage .res__restricted .res__label { font-size: 10px; }
#stage .res__balance { font: 600 12px/1.2 var(--ui); }
#stage .res__restriction { font: 11px/1.2 var(--ui); }
@media (min-width: 701px) and (orientation: landscape) {
  #stage:not(.is-stacked) .res__restricted { grid-column: 2; grid-row: 4; pointer-events: auto; align-content: start; margin-top: 4.5cqw; }
}
#stage .res .res__row--power .gem { width: 100%; max-width: 1.3cqw; min-width: 0; }
@media (min-width: 701px) and (orientation: landscape) {
  #stage:not(.is-stacked) .res__n { font-size: 1.1cqw; line-height: 1; }
}
@media (orientation: portrait), (max-width: 700px) {
  #stage .res .res__row--power .gem { max-width: 24px; }
}

/* Same-status cards overlap by half their displayed width. */
#stage .res .rune-tokens { display: flex; justify-content: flex-start; align-items: center; gap: .8cqw; --rune-card-width: min(48px, calc((100vw - 150px) / var(--stack-units))); }
.rune-stack { display: flex; align-items: center; flex: 0 0 auto; }
.rune-stack .rune-token { flex: 0 0 var(--rune-card-width); }
.rune-stack .rune-token + .rune-token { margin-left: calc(var(--rune-card-width) * -.5); }
.rune-stack--exhausted .rune-token { width: calc(var(--rune-card-width) * 1.4); flex-basis: calc(var(--rune-card-width) * 1.4); aspect-ratio: 7 / 5; }
.rune-stack--exhausted .rune-token + .rune-token { margin-left: calc(var(--rune-card-width) * -.7); }
.rune-token__state { display: none; }
@media (min-width: 701px) and (orientation: landscape) {
  #stage:not(.is-stacked) .res .rune-tokens { --rune-card-width: min(3.35cqw, calc(22.9cqw / var(--stack-units))); }
  #stage:not(.is-stacked) .res > .res__group--energy,
  #stage:not(.is-stacked) .res > .res__group--power,
  #stage:not(.is-stacked) .res > .res__group--runedeck,
  #stage:not(.is-stacked) .res > .res__group--xp {
    position: absolute; left: 25.5cqw; width: 7cqw; height: 3.1cqw;
    grid-area: 1 / 1 / -1 / -1; padding: .3cqw .4cqw; gap: .2cqw;
  }
  #stage:not(.is-stacked) .res > .res__group--energy { top: 0; }
  #stage:not(.is-stacked) .res > .res__group--power { top: 3.35cqw; }
  #stage:not(.is-stacked) .res > .res__group--runedeck { top: 6.7cqw; }
  #stage:not(.is-stacked) .res > .res__group--xp { top: 10.05cqw; }
  #stage:not(.is-stacked) .shelf--opp, #stage:not(.is-stacked) .shelf--you { left: 36%; width: 34%; }
}

#affordances .act--rune { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; min-width: min(290px, 100%); max-width: 100%; padding: 12px 16px; text-align: left; white-space: normal; border: 1px solid #ac8c50; border-radius: 8px; background: linear-gradient(135deg, #142a36, #09141f); }
.rune-action__title { font-size: 16px; color: #fff0c4; }
.rune-action__gain { color: #91e7ff; font-weight: 700; }
.rune-action__detail { grid-column: 1 / -1; font: 12px/1.4 var(--ui); color: #c5d1db; }
#affordances .act--rune-recycle { background: linear-gradient(135deg, #30263a, #14101f); }
#stage [data-rune-deck].is-legal-drop { outline: 3px solid #ffd87b; outline-offset: 3px; box-shadow: 0 0 24px #fbc858aa; background: #42321f; }
#stage [data-rune-deck].is-legal-drop::after { content: 'Drop to recycle'; position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 5px 8px; border-radius: 4px; background: #101b28; color: #ffdf8c; font: 12px/1.2 var(--ui); z-index: 30; pointer-events: none; }

/* Victory track: live text stays crisp inside circular, CSS-drawn tokens. */
#stage .hud__stats { min-width: 0; }
#stage .hud__points {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .24em; width: 8em; max-width: 100%; font-size: clamp(10px, 1cqw, 22px);
}
#stage .hud__points::before { content: none; }
.hud__point {
  display: grid; place-items: center; aspect-ratio: 1; min-width: 0;
  border-radius: 50%; border: 1px solid #88734d;
  background: radial-gradient(circle at 35% 25%, #263c4c, #0a1520 75%);
  color: #d5dfe7; line-height: 1; text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 0 0 2px #080e16, 0 1px 3px #0008;
}
.hud__point.is-earned {
  border-color: #ffe4a1; color: #fff7de;
  background: radial-gradient(circle at 35% 25%, #e7b95e, #95601d 65%, #49300e);
  box-shadow: inset 0 0 0 2px #61451d, 0 0 .35em #eeb75c55;
}