/* Viking HUD kit (G-Labs v6 painted assets): forged iron, bronze and Norse knotwork replace the flat
   generic boxes. Loaded last. Frames use border-image so they stretch without distorting corners.
   Asset paths are relative to this stylesheet. */
#game {
  --kit-panel: url('../assets/art/v4/ui_frame_panel.png');
  --kit-socket: url('../assets/art/v4/ui_socket.png');
  --kit-button: url('../assets/art/v4/ui_button_round.png');
  --kit-title: url('../assets/art/v4/ui_title_plate.png');
  --kit-divider: url('../assets/art/v4/ui_divider.png');
  --kit-badge: url('../assets/art/v4/ui_intent_badge.png');
  --kit-portrait: url('../assets/art/v4/ui_portrait_frame.png');
}

/* ---------------------------------------------------------------- compact battlefield header: quiet controls, two lines */
/* The painted shield is deliberately not used here: the button retains a 44px hit area,
   while only a fine inset edge and the glyph are visible against the scene. */
#game .b-top .icon-btn { flex:none; position:relative; display:grid; place-items:center;
  width:44px; height:44px; padding:0; border:0; border-radius:2px; clip-path:none;
  background:none; box-shadow:none; color:#cfbf9a; filter:none; }
#game .b-top .icon-btn::before { content:''; position:absolute; inset:7px; border:1px solid #c9a86a45;
  background:#0b1414b3; border-radius:2px; pointer-events:none; }
#game .b-top .icon-btn .ui-icon { position:relative; width:17px; height:17px; stroke-width:1.8; filter:none; }
#game .b-top .icon-btn:hover { color:#ffe2a2; background:none; box-shadow:none; }
#game .b-top .icon-btn:focus-visible { outline:1px solid #e3bf78; outline-offset:-5px; }
#game .b-top .icon-btn:active { transform:translateY(1px); }
#game .b-top { height:100%; min-width:0; gap:calc(var(--u)*.8); padding:0; border:0;
  background:linear-gradient(90deg,transparent,#071013b8 22%,#071013b8 78%,transparent); }
#game .b-top .title { position:relative; min-width:0; padding:0; text-align:center;
  font:700 clamp(13px,calc(var(--u)*3.2),22px)/1.13 var(--ff-head); letter-spacing:.035em; }
#game .b-top .title::before { content:none; }
#game .b-top .battle-stage-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#game .b-top .battle-meta { display:flex; align-items:center; justify-content:center; gap:.65em; margin-top:4px;
  color:#bcbaab; font:500 clamp(9px,calc(var(--u)*1.75),12px)/1.15 var(--ff-body); letter-spacing:.04em; white-space:nowrap; }
#game .b-top .title small, #game .b-top .turn-counter { display:inline; margin:0;
  font:inherit; letter-spacing:inherit; line-height:inherit; color:inherit; }
#game .b-top .title small[hidden] { display:none; }
#game .b-top .title small:not([hidden])::after { content:'·'; padding-left:.65em; color:#c9a86a; }

/* ---------------------------------------------------------------- enemy intent: compact readout, never a second button */
#game .enemy .intent { top:calc(var(--u)*.6); right:2%; gap:.35em; max-width:95%;
  border:0; border-image:none; border-radius:0; padding:3px 6px;
  background:radial-gradient(ellipse,#071116d9,transparent 78%); box-shadow:none;
  font:700 clamp(11px,calc(var(--u)*2.1),15px)/1.1 var(--ff-body); color:#f6e8c6; text-shadow:0 1px 3px #000; }
#game .enemy .intent::before { content:none; }
#game .enemy .intent .ui-icon { width:1em; height:1em; min-width:12px; min-height:12px; }
#game .enemy .intent .ui-icon { color: #f0c46e; }
#game .enemy .intent.attack .ui-icon { color: #ff9a7a; }
#game .enemy .intent.guard .ui-icon { color: #a8d8ff; }
#game .enemy .intent.danger { color:#ffd2a0; filter:none; }

/* ---------------------------------------------------------------- hero panel in a forged frame */
#game .b-player { border: solid transparent; border-width: calc(var(--u) * 1.6); border-image: var(--kit-panel) 12% / calc(var(--u) * 1.6) stretch;
  border-radius: 0; background-clip: padding-box; box-shadow: 0 6px 14px #000a; }
#game .b-player .avatar { position: relative; overflow: visible; border: 0; box-shadow: none; }
#game .b-player .avatar img { border-radius: 0; }
#game .b-player .avatar::after { content: ''; position: absolute; inset: -18%; pointer-events: none; background: var(--kit-portrait) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 2px #000); }

/* ---------------------------------------------------------------- board frame: the forged frame IS the board's border (cell maths already subtracts the border) */
#game .board::before { content: none !important; }
#game .board { border: calc(var(--u) * 2.4) solid transparent !important; border-image: var(--kit-panel) 12% / calc(var(--u) * 2.4) stretch !important; border-radius: 0 !important;
  background-clip: padding-box; box-shadow: 0 8px 22px #000b, inset 0 0 22px #000a !important; }

/* ---------------------------------------------------------------- panels & dividers */
#game .panel { border: solid transparent; border-width: calc(var(--u) * 3.4); border-image: var(--kit-panel) 12% / calc(var(--u) * 3.4) stretch; background-clip: padding-box; border-radius: 0; }
#game .panel h3::after { height: calc(var(--u) * 2.2); background: var(--kit-divider) left center / 100% 100% no-repeat; opacity: .85; }

/* ---------------------------------------------------------------- painted special-rune overlays */
#game .tile.blast::after {
  content: ''; position: absolute; z-index: 3; pointer-events: none; border-radius: 0; mix-blend-mode: normal; -webkit-mask: none; mask: none; opacity: 1; }
#game .tile.blast::after { content: none; background: none; animation: none; }
#game .tile.blast .ov::after { content: none; border: 0; animation: none; }
/* Blast reads as heat held inside the rune, not a rotating ring over its neighbours.
   Drop-shadows follow the real sprite silhouette; the faint floor light stays in-cell. */
#game .tile.blast::before { inset: 10%; z-index: 0; opacity: .48 !important;
  background: radial-gradient(ellipse at 50% 62%, #e8ad5866, #c8893220 42%, transparent 68%) !important;
  box-shadow: none; animation: blastEmberBreath 3.6s ease-in-out infinite; animation-delay: var(--charge-delay, 0s); }
#game .tile.blast .gem .shape.gem-v6 { filter: drop-shadow(0 calc(var(--ts) * .05) calc(var(--ts) * .035) #0009)
  drop-shadow(0 0 calc(var(--ts) * .025) #ffdb9ac0) drop-shadow(0 0 calc(var(--ts) * .045) #e9a95070) !important; }
@keyframes blastEmberBreath { 0%, 100% { filter: brightness(.8); } 50% { filter: brightness(1.2); } }
#game .tile.blast.locked::before { opacity: .2 !important; animation: none; filter: none; }
#game .tile.blast.pop::before, #game .tile.blast.fusion-source::before { opacity: 0 !important; animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  #game .tile.blast::before { animation: none; filter: none; }
  #game .tile.blast .gem { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { #game .tile.blast::after { animation: none; } }

/* ---------------------------------------------------------------- bars tall enough for their numbers */
#game .enemy .bar.hp { height: max(12px, calc(var(--u) * 2.9)) !important; }
#game .b-player .bar.hp { height: max(14px, calc(var(--u) * 2.3)) !important; }
#game .b-player .bar.mana, #game .b-player .bar.rage { height: max(12px, calc(var(--u) * 1.9)) !important; }
#game .bar .txt { line-height: 1; display: flex; align-items: center; justify-content: center; }
#game .b-player { border-width: calc(var(--u) * 1.3); border-image-width: calc(var(--u) * 1.3); padding: calc(var(--u) * .6) calc(var(--u) * 1.6); }

/* ---------------------------------------------------------------- gems v6: isolated painted gems, one light model
   Key light top-left is painted into the art; CSS only adds a soft contact shadow under each gem,
   a faint colour bounce on the socket floor and carved stone sockets. No fake gloss blobs, no square halos. */
#game .tile::before { inset: 14% 10% -2%; border-radius: 50%; opacity: .22 !important; transition: opacity .2s;
  background: radial-gradient(ellipse 50% 32% at 50% 82%, var(--rune-light), transparent 72%) !important; }
#game .tile .gem::before { display: none !important; }
#game .tile .gem .shape.gem-v6 { background-color: transparent !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important;
  border-radius: 0 !important; clip-path: none !important; box-shadow: none !important;
  filter: drop-shadow(0 calc(var(--ts) * .05) calc(var(--ts) * .035) rgba(0, 0, 0, .6)) drop-shadow(0 0 calc(var(--ts) * .02) rgba(0, 0, 0, .5)) !important; }
#game .tile.selected .gem .shape.gem-v6, #game .tile.hint .gem .shape.gem-v6 { filter: drop-shadow(0 calc(var(--ts) * .09) calc(var(--ts) * .06) rgba(0, 0, 0, .55)) drop-shadow(0 0 calc(var(--ts) * .08) var(--rune-light)) brightness(1.12) !important; }
#game .tile.selected .gem { transform: translateY(-5%) scale(1.08); }
#game .tile.selected .gem .shape, #game .tile.selected .gem .shape.gem-v6 { outline: none !important; }
#game .tile.selected::before, #game .tile.hint::before { opacity: .6 !important; }
/* Match-five: one sculpted prism and its internal rune, never an orbiting UI graphic.
   Only the small pool of reflected light breathes; the gem remains still and readable. */
#game .tile.world::after, #game .tile.world .gem::after { content: none; background: none; animation: none; }
#game .tile.world::before { inset: 9%; z-index: 0; opacity: .55 !important;
  background: radial-gradient(ellipse at 50% 62%, #f3d89c60, #c9b5ef24 42%, transparent 70%) !important;
  box-shadow: none; animation: worldCoreBreath 3.8s ease-in-out infinite; animation-delay: var(--charge-delay, 0s); }
#game .tile.world:not(.selected):not(.hint) .gem .shape.gem-v6 { filter: drop-shadow(0 calc(var(--ts) * .05) calc(var(--ts) * .035) #000a)
  drop-shadow(0 0 calc(var(--ts) * .025) #ffe7aa90) !important; }
@keyframes worldCoreBreath { 0%, 100% { filter: brightness(.85); } 50% { filter: brightness(1.25); } }
#game .tile.world.locked::before { opacity: .18 !important; animation: none; filter: none; }
#game .tile.world.pop::before, #game .tile.world.fusion-source::before { opacity: 0 !important; animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  #game .tile.world::before { animation: none; filter: none; }
  #game .tile.world .gem { animation: none !important; }
}
/* carved stone sockets */
#game .cell-bg { border: 0 !important; border-radius: 22% !important; background: radial-gradient(ellipse at 50% 40%, #0a100e 0%, #121a17 70%, #18211d 100%) !important;
  box-shadow: inset 0 calc(var(--ts) * .05) calc(var(--ts) * .07) #000c, inset 0 calc(var(--ts) * -.02) 0 #ffffff0d; }

/* ---------------------------------------------------------------- war briefing: fixed hero / rewards / actions, one scrolling dossier
   Deliberately bounded pixel type: wide desktop game canvases must not inflate six
   portraits into a page-long list. Scope defeats the generic painted panel below. */
#game .panel.brief {
  --brief-pad: clamp(12px, calc(var(--u) * 3.2), 22px);
  display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 100%; min-height: 0;
  padding: 0; overflow: hidden; color-scheme: dark; border: 1px solid #9b8052; border-image: none; border-radius: 3px;
  background: linear-gradient(135deg, #17221f, #0a1414 65%); background-clip: padding-box;
  box-shadow: inset 0 0 0 1px #e4c08312, 0 18px 60px #000b;
  font: 400 clamp(12px, calc(var(--u) * 3), 14px)/1.45 var(--ff-body); color: #d6d5c8;
}
#game .brief .brief-hero {
  position: relative; flex: none; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(128px, calc(var(--u) * 33), 176px); margin: 0;
  padding: 36px var(--brief-pad) 16px; background-size: cover; background-position: center 47%;
  border-bottom: 1px solid #c7a67140;
}
#game .brief .brief-hero .eyebrow { display: block; padding-right: 32px; margin: 0 0 7px;
  font: 700 clamp(9px, calc(var(--u) * 2.5), 11px)/1.3 var(--ff-body); letter-spacing: .17em;
  color: #eac98d; text-shadow: 0 1px 4px #000; }
#game .brief .brief-hero h2 { margin: 0; font: 600 clamp(21px, calc(var(--u) * 5.9), 34px)/1.13 var(--ff-head);
  letter-spacing: .015em; color: #f5ead0; text-shadow: 0 2px 8px #000a; overflow-wrap: anywhere; text-wrap: balance; }
#game .brief .brief-close { position: absolute; z-index: 1; top: 3px; right: 3px; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  color: #e0d8c3; background: radial-gradient(ellipse, #071011bc, transparent 70%); box-shadow: none; }
#game .brief .brief-close .ui-icon { width: 16px; height: 16px; }
#game .brief .brief-close:hover { color: #fff1c6; background: #081310a6; }
#game .brief .brief-close:focus-visible { outline: 2px solid #e6c788; outline-offset: -5px; }
#game .brief .brief-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px;
  margin-top: 10px; font: 500 clamp(10px, calc(var(--u) * 2.8), 12px)/1.25 var(--ff-body); color: #c7c9bc; letter-spacing: .01em; }
#game .brief .brief-type { color: #cfe0d5; }
#game .brief .brief-stat { padding-left: 12px; border-left: 1px solid #d3c19c55; }
#game .brief .brief-meta.type-elite .brief-type { color: #b7df9e; }
#game .brief .brief-meta.type-miniboss .brief-type { color: #f3ad90; }
#game .brief .brief-meta.type-boss .brief-type { color: #d6b3ff; }
#game .brief .brief-meta.type-trial .brief-type { color: #abdceb; }

#game .brief .brief-rewards { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; padding: 11px var(--brief-pad); border-bottom: 1px solid #a8905c36;
  background: linear-gradient(90deg, #7d61351a, #1f2b251c); text-align: left; }
#game .brief .brief-reward-label { font: 700 clamp(9px, calc(var(--u) * 2.25), 10px)/1.3 var(--ff-body);
  color: #b3b3a0; letter-spacing: .12em; text-transform: uppercase; }
#game .brief .brief-loot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
#game .brief .brief-reward { display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  color: #c2bbae; font: 500 clamp(11px, calc(var(--u) * 2.8), 13px)/1.25 var(--ff-body); }
#game .brief .brief-reward b { color: #f4dfb2; font: 700 clamp(14px, calc(var(--u) * 3.4), 17px)/1 var(--ff-body); font-variant-numeric: tabular-nums; }
#game .brief .brief-reward small { color: #c2bbae; font: inherit; }
#game .brief .brief-reward .ui-icon, #game .brief .brief-reward img { width: 17px; height: 17px; flex: none; object-fit: contain; color: #e6c887; border-radius: 2px; }
#game .brief .brief-reward.bonus { color: #dfcb9b; overflow-wrap: anywhere; }

#game .brief .brief-scroll { flex: 1 1 auto; min-height: 0; overflow: hidden auto; padding: 16px var(--brief-pad);
  scrollbar-width: thin; scrollbar-color: #8c754a #0c1615; scrollbar-gutter: stable; overscroll-behavior: contain; touch-action: pan-y; }
#game .brief .brief-scroll::-webkit-scrollbar { width: 5px; }
#game .brief .brief-scroll::-webkit-scrollbar-track { background: #0c1615; }
#game .brief .brief-scroll::-webkit-scrollbar-thumb { background: #8c754a; border: 1px solid #0c1615; border-radius: 5px; }
#game .brief .brief-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#game .brief .brief-scroll:focus-visible { outline: 1px solid #dbc18b; outline-offset: -3px; }
#game .brief .brief-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
#game .brief .brief-section-head h3 { display: block; margin: 0; color: #d6be90;
  font: 700 clamp(10px, calc(var(--u) * 2.5), 11px)/1.25 var(--ff-body); letter-spacing: .13em; text-transform: uppercase; }
#game .brief .brief-section-head h3::after { content: none; }
#game .brief .brief-section-head small { color: #a6afa3; font: 500 10px/1.25 var(--ff-body); letter-spacing: .02em; text-align: right; }
#game .brief .brief-waves { display: grid; gap: 12px; }
#game .brief .brief-wave-label { display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
  color: #90a89d; font: 600 9px/1.25 var(--ff-body); letter-spacing: .13em; text-transform: uppercase; }
#game .brief .brief-wave-label::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, #778b773b, transparent); }
#game .brief .brief-wave-foes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#game .brief .brief-foe { display: flex; align-items: center; gap: clamp(7px, calc(var(--u) * 2), 11px); min-width: 0;
  padding: 6px; border: 1px solid #93a18921; border-radius: 2px; background: linear-gradient(115deg, #93a1890b, transparent); }
#game .brief .brief-foe:only-child { grid-column: 1 / -1; }
#game .brief .brief-foe img { flex: none; width: clamp(34px, calc(var(--u) * 9.6), 46px); height: clamp(34px, calc(var(--u) * 9.6), 46px);
  border: 1px solid #b297635f; border-radius: 2px; object-fit: cover; object-position: center 22%; background: #071211; box-shadow: none; }
#game .brief .foe-glyph { flex: none; display: grid; place-items: center; width: clamp(34px, calc(var(--u) * 9.6), 46px); height: clamp(34px, calc(var(--u) * 9.6), 46px);
  border: 1px solid #b297635f; border-radius: 2px; color: #bda575; background: #071211; }
#game .brief .foe-glyph .ui-icon { width: 20px; height: 20px; }
#game .brief .foe-copy { min-width: 0; }
#game .brief .brief-foe b { display: block; color: #e1dfcf; overflow-wrap: anywhere; text-wrap: pretty;
  font: 600 clamp(11px, calc(var(--u) * 3), 14px)/1.23 var(--ff-body); letter-spacing: 0; }
#game .brief .brief-foe small { display: block; margin-top: 4px; color: #a1afa4;
  font: 500 clamp(10px, calc(var(--u) * 2.5), 11px)/1.3 var(--ff-body); font-variant-numeric: tabular-nums; }
#game .brief .brief-objective { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid #80adbe40;
  background: linear-gradient(115deg, #65a1af0d, transparent); border-radius: 2px; }
#game .brief .brief-objective > .ui-icon { width: 24px; height: 24px; color: #a8d1db; }
#game .brief .brief-objective b { color: #e1e5d6; font: 600 14px/1.25 var(--ff-body); }
#game .brief .brief-objective p { margin: 5px 0 0; color: #bbc6bd; font: 400 12px/1.5 var(--ff-body); white-space: normal; }

#game .brief .brief-mastery { margin-top: 18px; padding-top: 16px; border-top: 1px solid #a8905c36; }
#game .brief .brief-mastery .brief-section-head { margin-bottom: 5px; }
#game .brief .brief-tiers { display: grid; grid-template-columns: 1fr; }
#game .brief .tier { display: grid; grid-template-columns: 57px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  min-height: 34px; padding: 8px 0; text-align: left; border: 0; border-bottom: 1px solid #9caa9020; }
#game .brief .tier:last-child { border-bottom: 0; }
#game .brief .tier-stars { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; }
#game .brief .tier-stars .mini-star { color: #e4c388; }
#game .brief .tier-stars .mini-star .ui-icon { width: 16px; height: 16px; }
#game .brief .tier-stars .mini-star.unearned svg { fill: #dac38a0a; opacity: 1; }
#game .brief .tier-stars .mini-star.earned { color: #ffe1a0; }
#game .brief .tier-stars .mini-star.earned svg { fill: #e9c77f; filter: drop-shadow(0 0 2px #e7b94f30); }
#game .brief .tier-text { color: #b8c2b7; font: 400 clamp(11px, calc(var(--u) * 2.8), 13px)/1.4 var(--ff-body); }
#game .brief .tier.met .tier-text { color: #ece8d5; }
#game .brief .tier-state { display: inline-flex; align-items: center; gap: 4px; color: #a8c49c; font: 600 9px/1.2 var(--ff-body); }
#game .brief .tier-state .ui-icon { width: 12px; height: 12px; }
/* A quiet rulebook footnote, not a web alert card. No icon, coloured panel or accent rail. */
#game .brief .brief-note { display: block; margin: 12px 0 0; padding: 0;
  border: 0; background: none; box-shadow: none; color: #a5afa4; text-align: left; white-space: normal;
  font: 400 clamp(10.5px, calc(var(--u) * 2.65), 12px)/1.55 var(--ff-body); }
#game .brief .brief-note-label { display: block; margin-bottom: 3px; color: #c0b18f;
  font: 600 clamp(10px, calc(var(--u) * 2.55), 11px)/1.4 var(--ff-head); letter-spacing: .035em; }
#game .brief .brief-note-copy { display: block; max-width: 48ch; text-wrap: pretty; }

/* The footer never scrolls away. No inset ornament or oversized global button type. */
#game .brief .row.brief-actions { position: relative; z-index: 1; flex: none; display: grid; grid-template-columns: minmax(65px, .38fr) minmax(0, 1fr);
  align-items: stretch; gap: 10px; margin: 0; padding: 12px var(--brief-pad); border-top: 1px solid #a8905c45;
  background: #0b1514; box-shadow: 0 -5px 16px #050c0b50; }
#game .brief .brief-actions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px;
  margin: 0; padding: 10px 8px; border-radius: 2px; border-image: none; clip-path: none;
  font: 600 clamp(12px, calc(var(--u) * 3.2), 16px)/1.2 var(--ff-head); letter-spacing: .04em; text-transform: none; }
#game .brief .brief-actions .btn::before, #game .brief .brief-actions .btn::after { content: none; }
#game .brief .brief-actions .btn.gold { border: 1px solid #d6b777; color: #171b15;
  background: linear-gradient(110deg, #b89c60, #e4ca8b 60%, #bea16a); box-shadow: inset 0 1px 0 #fff2ca66, 0 2px 4px #0005; text-shadow: none; }
#game .brief .brief-actions .btn.gold:hover { filter: brightness(1.08); }
#game .brief .brief-actions .btn.ghost { color: #bcc4b6; padding: 10px 8px; }
#game .brief .brief-actions .btn:focus-visible { outline: 2px solid #f9e5b2; outline-offset: 3px; }
#game .brief .brief-actions .btn .ui-icon { width: 17px; height: 17px; }
@media (max-height: 600px) {
  #game .brief .brief-hero { min-height: 0; padding-top: 28px; padding-bottom: 12px; }
  #game .brief .brief-hero h2 { font-size: clamp(19px, calc(var(--u) * 5.8), 26px); }
  #game .brief .brief-meta { margin-top: 7px; }
  #game .brief .brief-rewards { padding-top: 8px; padding-bottom: 8px; }
  #game .brief .brief-scroll { padding-top: 12px; padding-bottom: 12px; }
  #game .brief .row.brief-actions { padding-top: 8px; padding-bottom: 8px; }
  #game .brief .tier-state span { display: none; }
}
/* secondary action as a quiet text button — only one thing on the panel shouts */
#game .btn.ghost { background: none !important; border-color: transparent !important; box-shadow: none !important; color: var(--tx-dim); min-width: 0 !important; flex: 0 0 auto; padding-left: var(--sp-3); padding-right: var(--sp-3); }
#game .btn.ghost:hover { color: var(--tx-hi); }

/* ---------------------------------------------------------------- balance: heavy frame only where it anchors (board) */
#game .b-player { border:0 !important; border-image:none !important; padding:3px calc(var(--u)*1.5); gap:calc(var(--u)*1.7);
  background:linear-gradient(90deg,#111c1af2,#091211eb) !important;
  box-shadow:inset 0 1px 0 #c9a86a45,inset 0 -1px 0 #c9a86a26 !important; }
#game .b-player .bars { gap:2px calc(var(--u)*1.6); align-content:center; }
#game .b-player .hero-name { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;
  font:700 clamp(10px,calc(var(--u)*1.8),13px)/1.1 var(--ff-head); letter-spacing:.09em; }
#game .b-player .hero-name span { float:none; padding:0; white-space:nowrap;
  font:500 clamp(8px,calc(var(--u)*1.35),9.5px)/1 var(--ff-body); letter-spacing:.08em; color:#a8aa98; }
#game .b-player .bar { border-color:#8c987936; }
#game .b-player .bar .txt { font-size:clamp(9px,calc(var(--u)*1.65),11.5px); letter-spacing:.01em; }
#game .b-player .bar.hp .txt { font-size:clamp(10px,calc(var(--u)*1.8),12.5px); }
#game .b-player .armor-chip { left:calc(var(--u)*1.5); bottom:2px; font-size:10px; }
#game .panel { border-width: calc(var(--u) * 2.4); border-image: url('../assets/art/v4/ui_frame_light.png') 11% / calc(var(--u) * 2.4) round; }

/* ---------------------------------------------------------------- abilities: four aligned iron inlays, no detached rings */
#game .b-skills { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:calc(var(--u)*1.3); padding:calc(var(--u)*.7) calc(var(--u)*1); min-width:0; }
#game .skill, #game .skill.ready, #game .skill.ult, #game .skill.ult.ready {
  --skill-light:#aed9e5; --skill-dim:#385767; --skill-edge:#596760;
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 2.35em auto 3px;
  justify-items:stretch; align-items:center; align-content:stretch; gap:calc(var(--u)*.5);
  min-width:0; min-height:0; height:100%; padding:calc(var(--u)*1.2) calc(var(--u)*1.15) calc(var(--u)*1);
  border:1px solid var(--skill-edge); border-radius:2px;
  background:linear-gradient(145deg,#29332f,#131d1b 48%,#0a1211);
  box-shadow:inset 0 0 0 2px #080f0dcc,inset 0 3px 0 #d9ceb318,0 2px 3px #0006;
  font-size:max(10px,calc(var(--u)*1.95)); overflow:hidden; filter:none; animation:none;
  transition:border-color .18s,box-shadow .18s,transform .12s;
}
#game .skill.ult, #game .skill.ult.ready { --skill-light:#f0c583; --skill-dim:#785332; --skill-edge:#8e7248; background:linear-gradient(145deg,#383528,#1e221c 48%,#121610); }
#game .skill:not(.tut-locked)::before { content:none; }
#game .skill-head { display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*1.15); min-height:0; width:100%; }
#game .skill .ic { position:relative; flex:none; width:calc(var(--u)*8.7); height:calc(var(--u)*8.7); aspect-ratio:1;
  min-height:0; max-height:none; border:1px solid #a18f655c; border-radius:1px; overflow:hidden; opacity:1; filter:none;
  background:radial-gradient(ellipse at 40% 20%,#344644,#0a1010 78%); box-shadow:0 1px 3px #0009; }
#game .skill .ic .skill-art { display:block; width:100%; height:100%; margin:0; padding:0; object-fit:cover; border-radius:0; filter:saturate(.8) brightness(1.07); transform:none; }
#game .skill .ic::before, #game .skill .ic::after { content:none; display:none; animation:none; }
#game .skill.ult .ic .skill-art { object-fit:contain; padding:5%; filter:drop-shadow(0 2px 2px #0008) brightness(1.15); }
#game .skill.disabled .ic { opacity:1; filter:none; }
#game .skill.disabled .ic .skill-art { filter:saturate(.55) brightness(.92); }
#game .skill .cost { position:static; inset:auto; transform:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  margin:0; padding:0; min-width:2.1em; border:0; border-radius:0; background:none; box-shadow:none; color:var(--skill-light);
  font:600 max(11px,calc(var(--u)*2.5))/1 var(--ff-body); font-variant-numeric:tabular-nums; text-shadow:0 1px 2px #000; }
#game .skill .cost .ui-icon { width:.9em; height:.9em; color:var(--skill-light); opacity:.8; }
#game .skill .nm { grid-row:auto; grid-column:auto; align-self:stretch; display:flex; align-items:center; justify-content:center;
  margin:0; color:#e1d4b5; font:600 1em/1.17 var(--ff-head); letter-spacing:.015em; text-align:center; white-space:normal; text-wrap:balance; }
#game .skill .skill-state { position:static; display:block; visibility:visible; height:auto; min-width:0; color:#a6b5af;
  font:600 max(8px,calc(var(--u)*1.45))/1.15 var(--ff-body); letter-spacing:.055em; text-align:center; white-space:nowrap; }
#game .skill-charge { position:relative; height:3px; width:100%; overflow:hidden; border-radius:1px; background:#050b0b; box-shadow:0 1px 0 #ffffff12; }
#game .skill .meter { position:static; display:block; height:100%; max-width:100%; margin:0; opacity:1; border-radius:0;
  background:linear-gradient(90deg,var(--skill-dim),var(--skill-light)); box-shadow:none; transition:width .25s ease-out; }
#game .skill.ready { border-color:var(--skill-light); box-shadow:inset 0 0 0 2px #091210,inset 0 1px 12px #a4dbe41a,0 0 6px #a4dbe415; }
#game .skill.ready .ic { border-color:var(--skill-light); box-shadow:0 0 7px #a4dbe42b; }
#game .skill.ready .skill-state { color:var(--skill-light); }
#game .skill.ready .skill-state::before { content:''; display:inline-block; width:.45em; height:.45em; margin-right:.5em; vertical-align:.12em; background:currentColor; transform:rotate(45deg); }
#game .skill.ult.ready { border-color:var(--skill-light); box-shadow:inset 0 0 0 2px #12140e,inset 0 1px 12px #efc68120,0 0 7px #efc68122; }
#game .skill.active, #game .skill:focus-visible { outline:2px solid #f4dfa8; outline-offset:1px; }
#game .skill.ready:active { transform:translateY(1px); }
#game .skill.tut-locked { background:linear-gradient(145deg,#222925,#0d1412) !important; box-shadow:inset 0 0 0 2px #080f0d !important; }
#game .skill.tut-locked::before { content:none; }
#game .skill.tut-locked::after { top:8%; width:calc(var(--u)*7); height:calc(var(--u)*7); }
#game .skill.tut-locked .skill-state { visibility:visible; color:#b9ac90; }
#game .battle-status { display:flex; justify-content:center; align-items:center; gap:calc(var(--u)*2); font-size:max(9px,calc(var(--u)*2.2)); letter-spacing:.1em; }
#game .battle-status span { margin:0; font-size:max(8px,calc(var(--u)*1.8)); letter-spacing:.01em; }
@media (prefers-reduced-motion:reduce) { #game .skill, #game .skill .meter { transition:none; } }

/* ---------------------------------------------------------------- Rune Trial: an objective written on the scene, progress as igniting rune sockets */
#game .goal-card { align-self: center; justify-self: center; max-width: 86%; margin: auto; padding: var(--sp-4) var(--sp-5); text-align: center;
  border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 50%, #050807d9 0%, #05080799 45%, transparent 72%); box-shadow: none; }
#game .goal-card .eyebrow { display: block; margin-bottom: var(--sp-1); color: var(--accent-hi); text-shadow: 0 1px 4px #000; }
#game .goal-card .desc { margin: 0 auto; max-width: 30ch; font: 600 var(--fs-body)/1.4 var(--ff-body); color: var(--tx-hi); text-shadow: 0 1px 4px #000; text-wrap: balance; }
#game .goal-pips { display: flex; justify-content: center; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-2); }
#game .goal-pip { display: grid; place-items: center; width: calc(var(--u) * 12); aspect-ratio: 1; border-radius: 50%; font: normal 400 calc(var(--u) * 6)/1 'Noto Sans Runic', 'Segoe UI Historic', serif; color: #6f6450;
  background: radial-gradient(circle at 50% 40%, #222b27, #0b100e 72%); box-shadow: 0 0 0 1.5px #0a0705, 0 0 0 calc(var(--u) * .6) #7a6440, 0 4px 9px #000b, inset 0 3px 6px #000c; }
#game .goal-pip.lit { color: #fff3cf; text-shadow: 0 0 6px #ffcf6a, 0 0 14px #ff9a3c;
  background: radial-gradient(circle at 50% 45%, #6a4a1a, #1f1408 75%); box-shadow: 0 0 0 1.5px #0a0705, 0 0 0 calc(var(--u) * .6) #ffd98a, 0 0 calc(var(--u) * 5) #ffb44a88, inset 0 0 10px #ffcf6a55;
  animation: pipIgnite .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pipIgnite { from { transform: scale(.6); filter: brightness(2.5); } }
#game .goal-card .big { display: block; font: 600 var(--fs-micro)/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-dim); }
@media (prefers-reduced-motion: reduce) { #game .goal-pip.lit { animation: none; } }

/* Header and hero use compact, readable minimums. All reclaimed height goes to the
   minmax enemy row; board, skill rail and status sizing are intentionally unchanged. */
#game #screen-battle { grid-template-rows: max(44px,calc(var(--u)*7.8)) minmax(0,1fr) max(48px,calc(var(--u)*9.6)) auto max(98px,calc(var(--u)*23)) max(18px,calc(var(--u)*3.7)); }

/* hero portrait: a fine bronze line, not a heavy painted frame (the bar is a small item) */
#game .b-player .avatar::after { inset: -2px; background: none; border: 1px solid #c9a86a; box-shadow: 0 0 0 1px #0a0705, 0 2px 6px #000a; filter: none; }
#game .b-player .avatar { width:clamp(34px,calc(var(--u)*7.5),48px); height:clamp(34px,calc(var(--u)*7.5),48px); filter:none; }
/* Rune Trial objective must fit above the hero panel */
#game .goal-card { padding: var(--sp-2) var(--sp-4); }
#game .goal-pips { gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-1); }
#game .goal-pip { width: calc(var(--u) * 9); font-size: calc(var(--u) * 4.4); }
/* defeat counsel: words on the scene between two fine rules — no callout box */
#game .result-counsel { display: block; margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-2) 0; max-width: 34ch; text-align: center;
  border: 0 !important; background: none !important; position: relative; }
#game .result-counsel::before { content: ''; display: block; height: calc(var(--u) * 2.4); margin: 0 auto var(--sp-3); width: 70%; background: var(--kit-divider) center / 100% 100% no-repeat; opacity: .7; }
#game .result-counsel b { display: block; font: italic 600 var(--fs-h2)/1.3 var(--ff-story); color: #efc9b8; text-wrap: balance; }
#game .result-counsel span { display: block; margin-top: var(--sp-2); font: 500 var(--fs-small)/1.5 var(--ff-body); color: var(--tx-dim); text-wrap: pretty; }
#game .result-counsel span::before { content: 'Counsel'; display: block; margin-bottom: .5em; font: 700 var(--fs-micro)/1 var(--ff-body); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

/* Cross direction is painted into the rune itself: no rays, ring or idle overlay. */
#game .tile.cross { overflow: clip; }
#game .tile.cross::before { content: none; animation: none; }
#game .tile.cross .gem .shape { animation: none; opacity: 1; }
#game .tile.cross-fallback .gem .ico {
  position: absolute; inset: 24%; z-index: 2; display: grid; place-items: center;
  font-size: calc(var(--ts) * .3); line-height: 1; font-weight: 700;
  color: #fff7d8; text-shadow: 0 1px 2px #12202b; filter: none;
  pointer-events: none; animation: none;
}

/* Painted charged forms carry their own direction band. Light stays inside the cell. */
#game .tile.charged-art { overflow: clip; }
#game .tile.charged-art::before { inset: 12%; }
#game .tile.charged_h::after, #game .tile.charged_v::after,
#game .tile.charged_h .gem::after, #game .tile.charged_v .gem::after { content: none; display: none; animation: none; }
#game .tile.charged-art .ov::before, #game .tile.charged-art .ov::after { animation: none; }
#game .tile.charged-art:not(.selected):not(.hint) .gem .shape.gem-v6 {
  filter: drop-shadow(0 calc(var(--ts) * .05) calc(var(--ts) * .035) #0009)
    drop-shadow(0 0 calc(var(--ts) * .025) color-mix(in srgb, var(--rune-light) 55%, #fff)) !important;
}
/* The baked reference bands paint at full opacity and are never stripe-masked.
   Only the separate additive light surface in sprite-pack.css is masked. */
#game .tile.charged-art .gem .shape { animation: none; opacity: 1; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
#game .tile.charged-art.selected .gem .shape, #game .tile.charged-art.hint .gem .shape,
#game .tile.charged-art.locked .gem .shape, #game .tile.charged-art.pop .gem .shape,
#game .tile.charged-art.fusion-source .gem .shape { animation: none; opacity: 1; }
#game .tile.charged-art.pop::before, #game .tile.charged-art.fusion-source::before { opacity: 0 !important; animation: none; }
@media (prefers-reduced-motion: reduce) { #game .tile.charged-art .gem .shape { animation: none; } }