/* Battle proportions (loaded last): give the battlefield room so bosses read big.
   Skills: one compact row (icon + cost on its rim, one-line name, thin charge bar).
   Top bar and enemy HUD: slimmer. The board keeps its size (touch targets). */

/* rows: top · battlefield · hero · board · skills · status */
#game #screen-battle { grid-template-rows: max(36px, calc(var(--u) * 6.6)) minmax(0, 1fr) max(46px, calc(var(--u) * 9.2)) auto max(76px, calc(var(--u) * 18)) max(18px, calc(var(--u) * 3.8)); }

/* ---- top bar */
#game .b-top .icon-btn { width: 36px; height: 36px; }
#game .b-top .icon-btn::before { inset: 4px; }
#game .b-top .title { font-size: clamp(13px, calc(var(--u) * 3), 20px); line-height: 1.05; }

/* ---- skills: round forged sockets, no boxed cards (game-ui-craft §1/§2: mix shapes, charge as a ring,
   cost on the rim, one weight level). The ultimate is a larger gold socket on the same baseline. */
#game .b-skills { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); align-items: end; gap: calc(var(--u) * .8); padding: 0 calc(var(--u) * 1.5);
  background: radial-gradient(ellipse 70% 120% at 50% 100%, #050a0acc, transparent 72%); }
#game .skill, #game .skill.ready, #game .skill.ult, #game .skill.ult.ready {
  --sock: max(40px, calc(var(--u) * 10.6)); --ring: #aed9e5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  height: 100%; padding: 4px 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
#game .skill.ult, #game .skill.ult.ready { --sock: max(46px, calc(var(--u) * 12.2)); --ring: #f0c583; }
#game .skill-head { position: relative; flex: none; width: var(--sock); height: var(--sock); gap: 0; }
/* charge ring: conic fill masked to a thin band just outside the socket */
#game .skill-head::before { content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--charge, 0) * 1%), #ffffff1c 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 2.5px), #000 calc(50% - 2px)); mask: radial-gradient(circle, transparent calc(50% - 2.5px), #000 calc(50% - 2px)); }
#game .skill .ic { position: absolute; inset: 0; width: auto; height: auto; min-width: 0; min-height: 0; border-radius: 50%; overflow: hidden;
  border: 1px solid #0a0f0e; box-shadow: inset 0 0 0 1px #d9c38a33, 0 2px 6px #000a; background: #0b1211; }
#game .skill .ic .skill-art { width: 100%; height: 100%; object-fit: cover; }
#game .skill.disabled .ic .skill-art { filter: saturate(.75) brightness(.95); } /* uncharged stays legible (UI §1) */
/* cost: a small pill sitting on the socket's lower-right rim */
#game .skill .cost { position: absolute; left: 50%; right: auto; bottom: -8px; transform: translateX(-50%); z-index: 1; flex-direction: row; gap: 1px; white-space: nowrap;
  padding: 1px 4px 1px 2px; border: 1px solid #ffffff22; border-radius: 99px; background: #070d0cf0; box-shadow: 0 1px 3px #000c;
  font: 700 10px/1 var(--ff-body); font-variant-numeric: tabular-nums; color: var(--ring); }
#game .skill .cost .ui-icon { width: 9px; height: 9px; color: var(--ring); opacity: .9; }
#game .skill .nm { font-size: max(10px, calc(var(--u) * 2.05)); line-height: 1; white-space: nowrap; letter-spacing: 0; color: #cdbf9f; text-shadow: 0 1px 2px #000; }
#game .skill.ready .nm, #game .skill.active .nm { color: #f2e6c8; }
#game .skill-charge { display: none; }
/* "N to charge" stays for screen readers; the ring shows progress. Row-select prompt stays visible. */
#game .skill .skill-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ready: ring full + a slow breathing glow (one at a time is enough signal) */
#game .skill.ready .skill-head { animation: socketReady 2.6s ease-in-out infinite; border-radius: 50%; }
@keyframes socketReady { 50% { box-shadow: 0 0 0 1px var(--ring), 0 0 14px 2px color-mix(in srgb, var(--ring) 55%, transparent); } }
#game .skill.active .skill-head { box-shadow: 0 0 0 2px #fff0c4, 0 0 16px 3px #f2c46c; border-radius: 50%; }
#game .skill:active .skill-head { transform: translateY(1px) scale(.97); }
@media (prefers-reduced-motion: reduce) { #game .skill.ready .skill-head { animation: none; box-shadow: 0 0 0 1px var(--ring); } }

/* ---- enemy HUD: name and HP bar only take the space they need */
#game .enemy-hud, #game .enemy.solo .enemy-hud { padding: calc(var(--u) * .9) calc(var(--u) * 1) calc(var(--u) * .3); }
#game .enemy-hud .name { font-size: clamp(12px, calc(var(--u) * 3), 18px); line-height: 1.05; }
#game .enemy-hud .kind { font-size: max(9px, calc(var(--u) * 1.8)); line-height: 1; margin: 1px 0 2px; }
#game .enemy-hud .bar.hp { height: max(12px, calc(var(--u) * 3)); }
#game .enemy-hud .badges { margin-top: 2px; }

/* ---- enemy intent: a light readout (icon + number) on a soft scrim, never a framed box.
   Board-tampering intents use .tamper — the old class name ".board" pulled in the game board's painted frame. */
#game .enemy .intent { padding: 2px 7px; border: 0; border-image: none; background: radial-gradient(ellipse at 60% 50%, #050b0ed9 10%, #050b0e80 50%, transparent 78%); }
#game .enemy .intent::before, #game .enemy .intent::after { content: none; }

/* ---- map header: back + sound (small top-corner controls, full 44 px hit area per HUD rules) */
#game .map-header .map-back, #game .map-header .map-sound { flex: none; width: 34px; height: 44px; padding: 0; border: 0; background: none; box-shadow: none; color: #d9c48f; display: grid; place-items: center; }
#game .map-header .map-back .ui-icon, #game .map-header .map-sound .ui-icon { width: 20px; height: 20px; }
#game .map-header .map-sound.off { color: #7f8a86; }
#game .map-header .map-back:active, #game .map-header .map-sound:active { transform: scale(.94); }

/* ---- footer tray (reference: one soft rounded tray holding round boosters, counts on the rim; names on long-press) */
#game .b-skills { align-self: center; justify-self: center; width: calc(100% - var(--u) * 3); height: auto; min-height: 0; padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4);
  grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: calc(var(--u) * 1.5);
  border: 1px solid #c9a86a55; border-radius: calc(var(--u) * 5);
  background: linear-gradient(180deg, #1a2422f2, #0d1513f7 60%, #090f0ef7); box-shadow: inset 0 1px 0 #ffe6b022, inset 0 -2px 6px #0008, 0 4px 12px #000a; }
#game .skill, #game .skill.ready, #game .skill.ult, #game .skill.ult.ready { --sock: max(46px, calc(var(--u) * 12.6)); height: auto; padding: 0; gap: 0; }
#game .skill.ult, #game .skill.ult.ready { --sock: max(52px, calc(var(--u) * 14.2)); }
/* names live in the long-press tooltip; kept for screen readers */
#game .skill .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* count badge on the lower-right rim, like booster counts */
#game .skill .cost { left: auto; right: calc(var(--sock) * -.16); bottom: calc(var(--sock) * -.1); transform: none; padding: 2px 5px 2px 3px; border-color: #ffffff2e; }

/* ---- balanced row: four equal sockets on one baseline; the ultimate differs by its gold ring only.
   Thin 1.5 px charge ring; a one-shot sweep of light when a skill becomes ready, then a soft breath. */
#game .skill, #game .skill.ready, #game .skill.ult, #game .skill.ult.ready { --sock: max(46px, calc(var(--u) * 12.6)); }
#game .skill-head::before { inset: -4px;
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 1.6px), #000 calc(50% - 1.2px)); mask: radial-gradient(circle, transparent calc(50% - 1.6px), #000 calc(50% - 1.2px)); }
#game .skill-head::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 78%, #fffaf0 88%, transparent 96%);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px)); mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px)); }
#game .skill.just-ready .skill-head::after { animation: chargedSweep .9s cubic-bezier(.3, .6, .3, 1); }
#game .skill.just-ready .skill-head { animation: chargedFlash .9s ease-out; }
@keyframes chargedSweep { 0% { opacity: 1; transform: rotate(-90deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(270deg); } }
@keyframes chargedFlash { 0% { box-shadow: 0 0 0 1px #fff, 0 0 18px 6px color-mix(in srgb, var(--ring) 80%, white); } 100% { box-shadow: 0 0 0 0 transparent; } }
#game .skill.ready .skill-head { animation: socketReady 2.8s ease-in-out infinite .9s; }
@keyframes socketReady { 50% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--ring) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { #game .skill.just-ready .skill-head, #game .skill.just-ready .skill-head::after { animation: none; } }

/* ---- map header: one line for the realm name, one for its subtitle; controls keep their size */
#game .map-header { gap: calc(var(--u) * 1.4); }
#game .map-header .realm { flex: 1 1 auto; min-width: 0; }
#game .map-header .realm b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, calc(var(--u) * 3.7), 22px); letter-spacing: .03em; }
#game .map-header .realm span { font-size: max(10px, calc(var(--u) * 2.3)); }
#game .map-header .realm span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game .map-header .icon-btn.labeled { flex: none; min-width: 42px; min-height: 40px; }
#game .map-header .chip-stats { flex: none; }

/* ---- map: header = back · realm · level/coin · sound; journey actions live in the footer tray (thumb zone) */
#game .map-footer { align-items: center; }
#game .map-footer .map-actions { display: flex; gap: calc(var(--u) * 1.6); align-items: center; }
#game .map-footer .map-actions .icon-btn.labeled { flex: none; width: auto; min-width: 46px; height: 44px; padding: 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid #c9a86a40; border-radius: 3px; background: #0b1414b3; color: #d6c393; }
#game .map-footer .map-actions .icon-btn.labeled .ui-icon { width: 17px; height: 17px; }
#game .map-footer .map-actions .icon-btn.labeled small { font: 600 10px/1 var(--font-ui); letter-spacing: .06em; color: #cbb98f; white-space: nowrap; }

/* =============== art-direction P0 pass (work/art-direction/review-2026-10-09.md) =============== */
/* P0-1: no letterbox on tall phones — fill the screen height; desktop keeps the centred 9:16 frame. */
@media (max-aspect-ratio: 9/16) { #game { width: 100vw; height: 100dvh; } }
/* P0-4: no status line in normal play (it returns only to carry an instruction, e.g. row targeting). */
#game #screen-battle { grid-template-rows: max(36px, calc(var(--u) * 6.6)) minmax(0, 1fr) max(38px, calc(var(--u) * 9)) auto max(76px, calc(var(--u) * 18)) auto; }
#game .battle-status { display: none; }
#game .battle-status.show { display: block; font-size: 13px; }
/* enemy turn: the board dims and rests instead of a "YOUR TURN" label */
#game #screen-battle.enemy-turn .b-board-wrap { filter: brightness(.8) saturate(.85); transition: filter .25s; }
#game #screen-battle .b-board-wrap { transition: filter .25s; }

/* P0-3: hero bar = one composite object: round portrait over a green HP bar, mana/rage as two thin lines. */
#game .b-player { position: relative; display: flex; align-items: center; gap: 0; padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 2); border: 0 !important; border-image: none !important; background: linear-gradient(transparent, #000a 45%, transparent) !important; box-shadow: none !important; }
#game .b-player::before, #game .b-player::after { content: none; }
#game .b-player .avatar { position: relative; z-index: 2; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1.5px solid #b8935a; box-shadow: 0 2px 6px #000c; background: #0b1211; padding: 0; }
#game .b-player .avatar::after { content: none; }
#game .b-player .avatar img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
#game .b-player .bars { position: relative; flex: 1 1 auto; min-width: 0; margin-left: -10px; padding-left: 14px; display: flex; flex-direction: column; gap: 3px; }
#game .b-player .hero-name { display: none; }
#game .b-player .bar { border: 0; border-radius: 2px; box-shadow: inset 0 1px 2px #000b; background: #0a100fcc; }
#game .b-player .bar.hp { height: 14px; }
#game .b-player .bar.hp .fill { background: linear-gradient(#5fae6a, #2f6b3c); }
#game .b-player .bar.hp .lag { background: #ffffff55; }
#game .b-player .bar.hp .txt { font-size: 11px; font-weight: 700; text-shadow: 0 1px 1px #000; }
/* mana + rage share one row of 4 px lines; their numbers live on the skill sockets */
#game .b-player .bars { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; row-gap: 3px; }
#game .b-player .bar.hp { grid-column: 1 / -1; }
#game .b-player .bar.mana, #game .b-player .bar.rage { height: 4px !important; min-height: 0; }
#game .b-player .bar.mana .txt, #game .b-player .bar.rage .txt { display: none; }
#game .b-player .bar.mana .fill { background: #3f9fc0; }
#game .b-player .bar.rage .fill { background: #e0893a; }
#game .b-player .armor-chip { position: absolute; z-index: 3; left: calc(var(--u) * 2 + 26px); top: -4px; font-size: 11px; }

/* ---- modal header controls: help (?) and close (x) are one family — equal round 36 px glyphs, hairline rim,
   44 px hit area, on one baseline with the title. */
#game .camp-panel .camp-help, #game .panel > .close-x { position: absolute; top: calc(var(--u) * 4.4); width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid #c9a86a66; background: #0b1413e6; color: #e8d39e; box-shadow: none; }
#game .panel > .close-x { right: calc(var(--u) * 4.4); }
#game .camp-panel .camp-help { right: calc(var(--u) * 4.4 + 44px); font: 700 15px/1 var(--font-title); }
#game .panel > .close-x .ui-icon { width: 15px; height: 15px; }
#game .camp-panel .camp-help::after, #game .panel > .close-x::after { content: ''; position: absolute; inset: -4px; } /* 44 px hit area */

/* ---- status readouts without boxes (art-direction: no value-in-a-box). Boss statuses = icon + number in one
   quiet row under the HP bar; hero armour = a small medallion on the portrait rim. */
#game .enemy .badges { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 3px; }
#game .enemy .badges .badge { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; margin: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important;
  font: 700 12px/1 var(--ff-num, var(--ff-body)); font-variant-numeric: tabular-nums; color: #efe3c4; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#game .enemy .badges .badge + .badge { border-left: 1px solid #ffffff2a !important; }
#game .enemy .badges .badge .ui-icon { width: 13px; height: 13px; }
#game .enemy .badges .badge.armor .ui-icon { color: #cfe0ec; }
#game .enemy .badges .badge.stun .ui-icon { color: #9fd3ff; }
#game .enemy .badges .badge.vuln .ui-icon { color: #c9a7ff; }
#game .enemy .badges .badge.enrage { color: #ffb38a; }
#game .b-player .armor-chip { position: absolute; z-index: 3; left: calc(var(--u) * 2 + 22px); top: auto; bottom: -3px; display: inline-flex; align-items: center; gap: 2px;
  height: 18px; padding: 0 6px 0 4px; border: 1px solid #cfe0ec66; border-radius: 99px; background: #0a1414f2; box-shadow: 0 1px 3px #000c;
  font: 700 11px/1 var(--ff-num, var(--ff-body)); font-variant-numeric: tabular-nums; color: #e6eef3; }
#game .b-player .armor-chip .ui-icon { width: 11px; height: 11px; color: #cfe0ec; }
#game .b-player .armor-chip.hidden { display: none; }

/* ---- special rune glow: a steady soft light in the rune's own colour hugging the gem (no ring, no square halo,
   inside the cell; never touches .gem animation so hint/select motions keep working). Cross and Blast get an
   occasional light sweep across the face, masked to the painted gem; World and charged runes already animate
   their own inner light. */
#game .tile.charged_h .gem, #game .tile.charged_v .gem, #game .tile.cross .gem, #game .tile.blast .gem {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--rune-glow, #fff) 85%, white)) drop-shadow(0 0 8px color-mix(in srgb, var(--rune-glow, #fff) 75%, transparent)); }
#game .tile.world .gem { filter: drop-shadow(0 0 3.5px #fff6d8) drop-shadow(0 0 12px #ffd77add); }
#game .tile.locked .gem, #game .tile.pop .gem, #game .tile.fusion-source .gem { filter: none; }
/* (no position override: .shape is already absolute; "relative" collapsed blast/cross art to 0×0 — the "missing rune" bug) */
#game .tile.cross .gem .shape::after, #game .tile.blast .gem .shape::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, #fffaf0cc 48%, #ffffff 50%, #fffaf0cc 52%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 140% 0;
  -webkit-mask: var(--gem-mask) center / contain no-repeat; mask: var(--gem-mask) center / contain no-repeat; mix-blend-mode: screen; opacity: .85;
  animation: gemSheen 8s ease-in-out infinite; }
@keyframes gemSheen { 0%, 84% { background-position: 140% 0; } 96%, 100% { background-position: -40% 0; } }
#game .tile:nth-child(4n) .shape::after { animation-delay: -2.2s; } #game .tile:nth-child(4n+1) .shape::after { animation-delay: -4.6s; } #game .tile:nth-child(4n+2) .shape::after { animation-delay: -6.1s; }
#game .tile.locked .shape::after, #game .tile.pop .shape::after, #game .tile.fusion-source .shape::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { #game .tile.cross .gem .shape::after, #game .tile.blast .gem .shape::after { animation: none; opacity: 0; } }

/* ---- skill tray v2 (owner: "thô và lỗi"): sound toggle · 3 skills · rule · ultimate on one centre line.
   Ring masks use closest-side: "circle" defaults to farthest-corner, which made the 1.5 px ring render ~6 px thick. */
#game .b-skills { display: grid; grid-template-columns: 34px repeat(3, minmax(0, 1fr)) 1px minmax(0, 1.2fr); align-items: center; column-gap: calc(var(--u) * 1.4);
  width: calc(100% - var(--u) * 3); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4) max(14px, calc(var(--u) * 3));
  border: 0; border-radius: calc(var(--u) * 4.6);
  background: linear-gradient(180deg, #17211fe8, #0a100ff0); box-shadow: inset 0 1px 0 #f3dcaa24, inset 0 0 0 1px #c9a86a30, 0 6px 14px #0009; }
#game .skill, #game .skill.ready, #game .skill.ult, #game .skill.ult.ready { --sock: max(44px, calc(var(--u) * 11.6)); --ring: #9fd3e2; --track: #ffffff17; justify-self: center; }
#game .skill.ult, #game .skill.ult.ready { --sock: max(50px, calc(var(--u) * 13.4)); --ring: #f0c583; --track: #f0c58324; }
#game .skill .ic { border: 0; box-shadow: inset 0 0 0 1px #00000080, inset 0 2px 6px #fff1, 0 2px 5px #000b; }
#game .skill-head::before { inset: -4.5px; background: conic-gradient(var(--ring) calc(var(--charge, 0) * 1%), var(--track) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
#game .skill.ready .skill-head::before { filter: drop-shadow(0 0 2px var(--ring)); }
#game .skill-head::after { inset: -6px;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
@keyframes socketReady { 50% { box-shadow: 0 0 12px 1px color-mix(in srgb, var(--ring) 40%, transparent); } }
/* cost: small centred tag on the bottom rim */
#game .skill .cost { left: 50%; right: auto; bottom: -9px; transform: translateX(-50%); gap: 2px; padding: 1px 6px 1px 4px;
  border: 1px solid color-mix(in srgb, var(--ring) 38%, transparent); background: #070c0b; box-shadow: 0 1px 3px #000c;
  font: 700 10px/1.25 var(--ff-body); color: color-mix(in srgb, var(--ring) 80%, white); }
#game .skill.disabled .cost { color: #b9c4c1; }
/* thin rule before the ultimate */
#game .b-skills .tray-sep { width: 1px; height: calc(var(--u) * 9); background: linear-gradient(transparent, #c9a86a59 30%, #c9a86a59 70%, transparent); }
/* quiet sound toggle (44 px hit area via ::after) */
#game .b-skills .tray-sound { position: relative; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #e8d3a233; background: radial-gradient(circle at 50% 35%, #1d2826, #0b1110); box-shadow: 0 1px 4px #000a; color: #d9c48f; cursor: pointer; }
#game .b-skills .tray-sound::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
#game .b-skills .tray-sound .ui-icon { width: 19px; height: 19px; }
#game .b-skills .tray-sound.off { color: #7f8a86; border-color: #ffffff1a; }
#game .b-skills .tray-sound:active { transform: scale(.94); }

/* ---- tray balance: sound · 3 skills · rule · ultimate · hint — mirrored utilities, equal skill columns */
#game .b-skills { grid-template-columns: 34px repeat(3, minmax(0, 1fr)) 1px minmax(0, 1fr) 34px; }
/* ultimate art fills its socket like the others (viking.css shrank it with padding + brightness → washed-out hammer) */
#game .skill.ult .ic .skill-art { object-fit: cover; padding: 0; filter: none; }
#game .skill.ult.disabled .ic .skill-art { filter: saturate(.8) brightness(.95); }

/* ---- stage brief: the trial objective is a line of type, not a boxed card with an icon (AI-UI pattern) */
#game .brief .brief-objective { display: block; margin: 0 0 4px; padding: 0 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#game .brief .brief-objective .brief-objective-label { display: block; margin-bottom: 4px; font: 600 10px/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: #c9a86a; }
#game .brief .brief-objective .brief-objective-copy { display: block; font: italic 400 15px/1.4 var(--ff-story, Georgia, serif); color: #e6dcc4; text-wrap: pretty; }

/* ---- tray utilities v2: filled glyphs (read at 19 px) + a micro label so nobody has to guess ("mắt đó là gì") */
#game .b-skills .tray-sound { overflow: visible; }
#game .b-skills .tray-sound .ui-icon { width: 18px; height: 18px; }
#game .b-skills .tray-sound .tray-label { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 600 9px/1 var(--ff-body); letter-spacing: .08em; text-transform: uppercase; color: #b9ab86; }
#game .b-skills .tray-sound.off .tray-label { color: #7f8a86; }
#game .b-skills .tray-hint { color: #f1d27e; }
/* idle auto-hint flashes the button twice, linking the glowing runes to it */
#game .b-skills .tray-hint.nudge { animation: hintNudge 1.1s ease-in-out 2; }
@keyframes hintNudge { 50% { box-shadow: 0 0 0 1px #f1d27e, 0 0 14px 2px #f1d27e66; color: #fff1c4; } }
@media (prefers-reduced-motion: reduce) { #game .b-skills .tray-hint.nudge { animation: none; } }

/* ---- zones v3 (owner: "thêm hub đơn giản ngăn ra", footer "quá lớn"): battlefield · hero band · board · tray.
   Hero band and tray share the board's framed width (--board-w, set in layout()) and one light frame:
   dark glass + a 1 px gold hairline. The board keeps the only heavy painted frame (UI §2). */
#game #screen-battle { grid-template-rows: max(36px, calc(var(--u) * 6.6)) minmax(0, 1fr) auto auto auto max(18px, calc(var(--u) * 3.8)); }
#game .b-player { justify-self: center; align-self: center; height: auto; min-height: 0; width: var(--board-w, calc(100% - var(--u) * 3)); max-width: calc(100% - 12px); box-sizing: border-box;
  margin: 4px 0 6px; padding: 5px 10px 5px 6px !important;
  border: 1px solid #c9a86a40 !important; border-radius: 12px;
  background: linear-gradient(180deg, #121b19eb, #080d0cf0) !important; box-shadow: inset 0 1px 0 #f3dcaa1f, 0 4px 10px #0009 !important; }
#game .b-player .avatar { width: 36px; height: 36px; }
#game .b-skills { width: var(--board-w, calc(100% - var(--u) * 3)); max-width: calc(100% - 12px); box-sizing: border-box; margin: 6px 0 2px;
  padding: 7px 10px 14px; column-gap: 6px; border-radius: 14px;
  border: 1px solid #c9a86a40; box-shadow: inset 0 1px 0 #f3dcaa1f, 0 4px 10px #0009; }
#game .skill, #game .skill.ready, #game .skill.ult, #game .skill.ult.ready { --sock: clamp(38px, calc(var(--u) * 9.4), 50px); }
#game .skill.ult, #game .skill.ult.ready { --sock: clamp(44px, calc(var(--u) * 10.8), 58px); }
#game .b-skills .tray-sep { height: calc(var(--sock, 40px) * .9); height: 36px; }

/* ---- painted utility buttons (same style as the skill icons), thin gold rim like the sockets */
#game .b-skills .tray-sound { padding: 0; border: 1px solid #c9a86a8c; background: #0b1110; }
#game .b-skills .tray-sound .tray-art { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
#game .b-skills .tray-sound.off .tray-art { filter: saturate(.8) brightness(.9); }

/* ---- utility buttons ≠ skills (owner: "nhìn như skill"): skills are round painted medallions with charge rings;
   utilities are small rounded-square bronze plates with a flat glyph, no ring, no cost, quieter label. */
#game .b-skills .tray-sound { width: 32px; height: 32px; border-radius: 9px; padding: 0; overflow: visible;
  border: 1px solid #c9a86a66; background: linear-gradient(180deg, #24302d, #111917); box-shadow: inset 0 1px 0 #f3dcaa26, inset 0 -2px 3px #0008, 0 1px 3px #000a; }
#game .b-skills .tray-sound::after { inset: -6px; border-radius: 12px; }
#game .b-skills .tray-sound .tray-art { width: 72%; height: 72%; margin: auto; border-radius: 0; object-fit: contain; filter: drop-shadow(0 1px 1px #000c); }
#game .b-skills .tray-sound .tray-label { top: calc(100% + 4px); font-size: 8.5px; color: #9d927a; }
#game .b-skills .tray-sound:active { transform: translateY(1px); box-shadow: inset 0 1px 3px #000c; }

/* ---- Eirik's saga: a chapter timeline, not a stack of boxed cards (owner rejected the card list).
   One thin gold line, small rune medallions on it, label · Cinzel title · italic excerpt, hairline between chapters. */
#game .saga-v2 .saga-line { position: relative; list-style: none; margin: 14px 0 0; padding: 0; }
#game .saga-v2 .saga-line::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(#c9a86a00, #c9a86a66 6%, #c9a86a66 94%, #c9a86a00); }
#game .saga-v2 .saga-ch { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px 4px 12px 0; cursor: pointer; border: 0; background: none; }
#game .saga-v2 .saga-ch + .saga-ch .saga-copy { border-top: 1px solid #ffffff0d; margin-top: -12px; padding-top: 12px; }
#game .saga-v2 .saga-rune { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #c9a86a8c; background: radial-gradient(circle at 50% 35%, #1f2a27, #0b1110); box-shadow: 0 0 0 4px #0d1513, 0 2px 5px #000a;
  font: 400 17px/1 'Noto Sans Runic', var(--ff-display); color: #e9d39b; }
#game .saga-v2 .saga-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#game .saga-v2 .saga-label { font: 600 10px/1.2 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: #c9a86a; }
#game .saga-v2 .saga-title { font: 700 15px/1.25 var(--ff-display); letter-spacing: .02em; color: #f0e6cc; }
#game .saga-v2 .saga-text { font: italic 400 13.5px/1.45 var(--ff-story, Georgia, serif); color: #b9b3a1; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#game .saga-v2 .saga-ch:hover .saga-title, #game .saga-v2 .saga-ch:focus-visible .saga-title { color: #fff3d2; }
#game .saga-v2 .saga-ch:hover .saga-rune, #game .saga-v2 .saga-ch:focus-visible .saga-rune { border-color: #e9c77f; box-shadow: 0 0 0 4px #0d1513, 0 0 10px #e9c77f55; }
#game .saga-v2 .saga-ch:focus-visible { outline: none; }
/* realm: a section heading crossing the line */
#game .saga-v2 .saga-realm { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 4px 44px; padding: 10px 0; cursor: pointer; text-align: center; background: none; }
#game .saga-v2 .saga-realm::before, #game .saga-v2 .saga-realm::after { content: ''; position: absolute; top: 50%; width: 18%; height: 1px; background: linear-gradient(90deg, transparent, #c9a86a80); }
#game .saga-v2 .saga-realm::before { left: 6%; } #game .saga-v2 .saga-realm::after { right: 6%; transform: scaleX(-1); }
#game .saga-v2 .saga-realm-name { font: 700 13px/1 var(--ff-display); letter-spacing: .28em; text-transform: uppercase; color: #e9d39b; }
#game .saga-v2 .saga-realm-sub { font: italic 400 12px/1.3 var(--ff-story, Georgia, serif); color: #9f9886; }
/* locked chapter: hollow medallion, quiet copy */
#game .saga-v2 .saga-ch.locked { cursor: default; }
#game .saga-v2 .saga-ch.locked .saga-rune { border-style: dashed; border-color: #ffffff2e; background: #0b1110; }
#game .saga-v2 .saga-ch.locked .saga-label { color: #6f7a76; }
#game .saga-v2 .saga-ch.locked .saga-title { font: italic 400 14px/1.3 var(--ff-story, Georgia, serif); letter-spacing: 0; color: #6f7a76; }
#game .b-skills .tray-sound { background: linear-gradient(180deg, #2c3a36, #151e1c); }
#game .b-skills .tray-sound .tray-art { width: 78%; height: 78%; filter: drop-shadow(0 1px 1px #000c) brightness(1.08); }

/* ---- footer sound panel: Music + Sound FX, each a mute glyph + thin slider. Light glass card above the button,
   no boxed rows (UI §1); same gold slider thumb as the pause menu. */
#game .sound-pop { position: absolute; z-index: 40; width: min(260px, calc(100% - 16px)); padding: 10px 12px 6px; border-radius: 12px;
  border: 1px solid #c9a86a55; background: linear-gradient(180deg, #17211ff7, #0b100ffa); box-shadow: inset 0 1px 0 #f3dcaa22, 0 10px 24px #000c; animation: spIn .16s ease-out; }
#game .sound-pop::after { content: ''; position: absolute; left: calc(var(--arrow-x, 20px) - 6px); bottom: -6px; width: 10px; height: 10px; transform: rotate(45deg);
  background: #0b100f; border-right: 1px solid #c9a86a55; border-bottom: 1px solid #c9a86a55; }
@keyframes spIn { from { opacity: 0; transform: translateY(6px); } }
#game .sound-pop .sp-title { font: 600 10px/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: #c9a86a; margin: 0 0 4px 2px; }
#game .sound-pop .sp-row { display: grid; grid-template-columns: 36px 62px minmax(0, 1fr) 36px; align-items: center; column-gap: 4px; }
#game .sound-pop .sp-row + .sp-row { border-top: 1px solid #ffffff0d; }
#game .sound-pop .sp-mute { width: 36px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: #e9d39b; cursor: pointer; }
#game .sound-pop .sp-mute .ui-icon { width: 20px; height: 20px; }
#game .sound-pop .sp-label { font: 500 13px/1 var(--ff-body); color: #e6dcc4; white-space: nowrap; }
#game .sound-pop .sp-val { font: 600 11px/1 var(--ff-body); font-variant-numeric: tabular-nums; color: #b9ab86; text-align: right; }
#game .sound-pop .is-off .sp-mute { color: #7f8a86; }
#game .sound-pop .is-off .sp-label, #game .sound-pop .is-off .sp-val { color: #7f8a86; }
#game .sound-pop .sp-range { --fill: 40%; -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; touch-action: none; }
#game .sound-pop .sp-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #d9b56f var(--fill), #ffffff1f var(--fill)); }
#game .sound-pop .is-off .sp-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, #6f7a76 var(--fill), #ffffff14 var(--fill)); }
#game .sound-pop .sp-range::-moz-range-track { height: 4px; border-radius: 2px; background: #ffffff1f; }
#game .sound-pop .sp-range::-moz-range-progress { height: 4px; border-radius: 2px; background: #d9b56f; }
#game .sound-pop .sp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1bf, #d9b56f 55%, #9c7338); border: 1px solid #3a2a12; box-shadow: 0 1px 3px #000a; }
#game .sound-pop .sp-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #3a2a12; background: radial-gradient(circle at 35% 30%, #fff1bf, #d9b56f 55%, #9c7338); }
@media (prefers-reduced-motion: reduce) { #game .sound-pop { animation: none; } }

/* ---- charged (match-4) runes: their painted light bands are the signal — no outer halo spilling past the cell
   (owner: "ánh sáng thanh dọc ngang tràn ra … không đẹp"). Only a tight 1 px rim light + soft contact shadow.
   Art is the cleaned *_v21.png (anti-aliased edge, no dark keyed fringe, band streaks trimmed to the silhouette). */
#game .tile.charged_h .gem, #game .tile.charged_v .gem {
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--rune-glow, #fff) 70%, transparent)) drop-shadow(0 2px 2px #0009); }
#game .tile.charged_h .gem .shape.has-art, #game .tile.charged_v .gem .shape.has-art { filter: saturate(1.08) contrast(1.04) brightness(1.06); }
#game .tile.charged-art::before { opacity: .22; }

/* charged band shimmer: feathered band edges (the old ±3 % hard-stop mask read as a stiff horizontal bar),
   a touch dimmer. Art is v22: re-cut with the clean normal-gem silhouette, so the light cannot leave the stone. */
#game .tile.charged-art .gem::after {
  --charged-band-mask: linear-gradient(to bottom,
    transparent calc(var(--charged-band-a, 42%) - 4.5%), #fff calc(var(--charged-band-a, 42%) - 1.2%),
    #fff calc(var(--charged-band-a, 42%) + 1.2%), transparent calc(var(--charged-band-a, 42%) + 4.5%),
    transparent calc(var(--charged-band-b, 60%) - 4.5%), #fff calc(var(--charged-band-b, 60%) - 1.2%),
    #fff calc(var(--charged-band-b, 60%) + 1.2%), transparent calc(var(--charged-band-b, 60%) + 4.5%));
  opacity: .22; }
#game .tile.charged-art.charged_v .gem::after {
  --charged-band-mask: linear-gradient(to right,
    transparent calc(var(--charged-band-a, 42%) - 4.5%), #fff calc(var(--charged-band-a, 42%) - 1.2%),
    #fff calc(var(--charged-band-a, 42%) + 1.2%), transparent calc(var(--charged-band-a, 42%) + 4.5%),
    transparent calc(var(--charged-band-b, 60%) - 4.5%), #fff calc(var(--charged-band-b, 60%) - 1.2%),
    #fff calc(var(--charged-band-b, 60%) + 1.2%), transparent calc(var(--charged-band-b, 60%) + 4.5%)); }