/* UI refresh layer, pass 1 (Arclight Lead, 2026-09-23). Loaded last.
   Goal: the game's own tactile UI instead of a generic dark-template look
   (docs/UI_VIBE_REVIEW_20260923.md). The palette, illustrations and icon set stay unchanged.
   - Quiet the eyebrow labels; remove wide tracking from reading text.
   - Make primary actions feel like pressed brass, and give every tap a small physical response.
   - Use tabular numbers wherever values tick. */

:root{
  --brass-hi:#f6dca6;
  --brass:#e2b77e;
  --brass-lo:#b7844a;
  --brass-edge:#6d4a22;
  --press:cubic-bezier(.2,.8,.3,1);
}

/* 1. Eyebrows and tracking */
small,.eyebrow{letter-spacing:.02em}
.collection-heading small,.skill-upgrade small,.stage-option small{letter-spacing:.03em}
/* Labels that only repeat the screen title or add flavour. Informative ones stay:
   stage numbers, hero class, MAIN WEAPON, MEET A WANDERER, the wardrobe name. */
.camp-scene-label,
.collection-heading>div>small:first-child,
.commerce-header>div>small:first-child,
.exchange-header>div>small:first-child,
.gear-header>div>small:first-child,
.board-header>div>small:first-child,
.campaign-map .campaign-header>div>small:first-child,
.dj-intro .dj-eyebrow,
#stageBriefing .stage-copy>small,
.exchange-feature-copy>small,
.exchange-section-title>span:first-child:not(.exchange-preview),
#modal .panel:is([data-screen="menu"],[data-screen="audio"],[data-screen="collection"],[data-screen="inventory"],[data-screen="paused"]) .eyebrow{display:none}
/* Shop section rows keep only their status chip (STORE PREVIEW, COMING LATER...) */
.exchange-section-title{justify-content:flex-end}
.exchange-section-title:not(:has(.exchange-preview)){display:none}
.exchange-preview{font-size:11px;letter-spacing:.05em}

/* 2. Tactile actions. Individual translate/scale properties compose with any
   positioning transform instead of replacing it. */
button{transition:translate .08s var(--press),scale .08s var(--press),filter .12s ease,box-shadow .12s ease}
button:active:not(:disabled):not(.coach-focus){translate:0 1px;scale:.985}
button:disabled{filter:saturate(.6)}

.primary:not(:disabled){
  background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass) 52%,var(--brass-lo) 100%);
  border-color:#f8e2b2;
  box-shadow:inset 0 1px 0 #ffffff70,inset 0 -2px 0 #00000026,0 3px 0 var(--brass-edge),0 7px 16px #00000059;
  text-shadow:0 1px 0 #ffffff55;
}
.primary:active:not(:disabled){
  translate:0 2px;scale:1;
  box-shadow:inset 0 1px 0 #ffffff55,inset 0 -1px 0 #00000026,0 1px 0 var(--brass-edge),0 3px 8px #00000059;
}

/* Camp Play: same brass, deeper edge. The ID selector outranks menu-shell/beacon-ui. */
.camp-launch #start:not(:disabled){
  background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass) 52%,var(--brass-lo) 100%);
  border-width:1px;border-color:#f8e2b2;
  box-shadow:inset 0 1px 0 #ffffff70,inset 0 -2px 0 #00000026,0 4px 0 var(--brass-edge),0 9px 18px #00000059;
}
.camp-launch #start:active:not(:disabled){
  translate:0 3px;scale:1;
  box-shadow:inset 0 1px 0 #ffffff55,inset 0 -1px 0 #00000026,0 1px 0 var(--brass-edge),0 3px 8px #00000059;
}
/* "Explore" sat on the brightest part of the stage art */
#stageBriefing .stage-facts>span{padding:3px 10px;border-radius:999px;background:#0b1d22b8;border:1px solid #f6dca633;color:#f6dca6}

/* Level-up cards read as physical cards you pick up */
.choice:not(:disabled){box-shadow:0 2px 0 #00000040,0 8px 18px #00000033}
.choice:active:not(:disabled){box-shadow:0 1px 0 #00000040,0 3px 8px #00000033}

/* Level-up cards, pass 2: the icon sits in a socket tinted by lane, the header shows
   NEW or level pips (the glowing pip is the level this pick reaches), and cards deal in.
   data-kind comes from ArcaneChoiceUI.kind(); only offer cards (and coach clones) carry it. */
.choice[data-kind]{--accent:#8fd3c1;--accent-soft:#8fd3c133}
.choice[data-kind="main"]{--accent:#efc788;--accent-soft:#efc78838}
.choice[data-kind="class"]{--accent:#7fd8c4;--accent-soft:#7fd8c433}
.choice[data-kind="world"]{--accent:#a9bdf5;--accent-soft:#a9bdf533}
.choice[data-kind="evolution"]{--accent:#ffd66b;--accent-soft:#ffd66b44}
.choice[data-kind="artifact"]{--accent:#f39a6b;--accent-soft:#f39a6b3a}
.choice[data-kind="modifier"]{--accent:#cdbdf0;--accent-soft:#cdbdf033}
.choices .choice[data-kind]{grid-template-columns:56px 1fr;column-gap:14px}
.choice[data-kind] .item-art{grid-row:1/4;align-self:center;width:56px;height:56px;padding:2px;margin:0;border:1px solid var(--accent-soft);border-radius:14px;background:radial-gradient(circle at 50% 38%,var(--accent-soft),transparent 72%),#0e2329;box-shadow:inset 0 1px 0 #ffffff1c,0 2px 0 #0000004d}
.choice[data-kind]>small{display:flex;align-items:center;gap:8px;min-height:16px;letter-spacing:.03em}
/* The lane name stays on one line; on a 320 px phone the level pips wrap below it instead of breaking "Rook’s skills" (Lead, 09-25). */
.choice-lane{color:var(--accent);white-space:nowrap}
.choice[data-kind]>small{flex-wrap:wrap;row-gap:4px}
.choice-new{font-style:normal;font-size:10px;font-weight:700;line-height:1;letter-spacing:.08em;padding:3px 6px 2px;border-radius:999px;background:var(--accent);color:#132a2f}
.choice-pips{display:inline-flex;gap:5px;margin-left:auto;padding-right:3px}
.choice-pips i{width:7px;height:7px;rotate:45deg;border-radius:1.5px;background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff2e}
.choice-pips i.on{background:var(--accent);box-shadow:none;opacity:.7}
.choice-pips i.next{opacity:1;background:#fff4da;box-shadow:0 0 0 1px var(--accent),0 0 8px var(--accent);animation:pip-next 1s ease-in-out infinite alternate}
@keyframes pip-next{from{box-shadow:0 0 0 1px var(--accent),0 0 2px var(--accent)}to{box-shadow:0 0 0 1px var(--accent),0 0 11px var(--accent)}}
.choice[data-kind="evolution"]:not(:disabled){border-color:var(--accent);box-shadow:0 0 0 1px #ffd66b55,0 0 18px #ffd66b2e,0 8px 18px #00000033}
@keyframes choice-in{from{opacity:0;transform:translateY(12px)}}
.choices .choice[data-kind]{animation:choice-in .24s var(--press) backwards}
.choices .choice[data-kind]:nth-child(2){animation-delay:.06s}
.choices .choice[data-kind]:nth-child(3){animation-delay:.12s}
.choices .choice[data-kind]:nth-child(4){animation-delay:.18s}
@media (prefers-reduced-motion:reduce){.choices .choice[data-kind],.choice-pips i.next{animation:none}}

/* 3. Numbers that tick should not jitter */
#timer,#goldText,#killText,#levelText,[data-wallet],.stage-badge,.coach-count,#perfHud .perf-pill{font-variant-numeric:tabular-nums}
/* T029 elite chest reveal (Lead): 200 ms anticipation, 450 ms reveal, 250 ms settle; a tap after 200 ms skips (game.js chestReveal). */
.panel[data-screen][data-reveal] .panel-emblem.chest-reveal{display:grid;place-items:center;float:none;width:120px;height:104px;margin:-4px auto 6px;padding:0;border:0;border-radius:0;background:none}
.panel .chest-reveal>*{grid-area:1/1}
.panel .chest-reveal .item-art{width:88px;height:88px}
.chest-rays{width:160px;height:160px;border-radius:50%;background:repeating-conic-gradient(#ffd6824d 0 9deg,transparent 9deg 30deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);opacity:.45;transform:rotate(40deg)}
.panel[data-reveal="chest"] .chest-closed{animation:chest-wobble .2s ease-in-out,chest-hide 0s .2s forwards}
.panel[data-reveal="chest"] .chest-open{animation:chest-pop .45s cubic-bezier(.2,1.5,.4,1) .2s backwards}
.panel[data-reveal="chest"] .chest-rays{animation:chest-rays .7s ease-out .2s backwards}
.panel[data-reveal="skip"] .chest-closed{opacity:0}
.panel[data-reveal="chest"] .choices .choice[data-kind]{animation-duration:.2s;animation-delay:.65s}
.panel[data-reveal="chest"] .choices .choice[data-kind]:nth-child(2){animation-delay:.69s}
.panel[data-reveal="chest"] .choices .choice[data-kind]:nth-child(3){animation-delay:.73s}
.panel[data-reveal="chest"] .choices .choice[data-kind]:nth-child(4){animation-delay:.77s}
.panel[data-reveal="skip"] .choices .choice[data-kind]{animation:none}
.panel.revealing .choices{pointer-events:none}
/* T079 catalyst from a chest (Lead): a gold "found" row above the choices; it lands just before the cards. */
.chest-found{display:flex;align-items:center;gap:12px;margin:2px 0 12px;padding:10px 12px;border:1px solid #e3c27a8c;border-radius:14px;background:linear-gradient(135deg,#e3c27a29,#e3c27a0d 60%);box-shadow:inset 0 0 0 1px #fff2cc14,0 0 18px #e3c27a1f;text-align:left}
.chest-found .item-art{width:40px;height:40px;flex:none}
.chest-found span{display:grid;gap:1px;min-width:0}
.chest-found small{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#e7c983}
.chest-found b{font-size:17px;color:#fbecc8}
.chest-found em{font-style:normal;font-size:12px;line-height:1.35;color:#c9d9d6}
.chest-found.evolved{border-color:#f1d08acc;background:linear-gradient(135deg,#f1d08a3d,#e3c27a12 65%);box-shadow:inset 0 0 0 1px #fff2cc24,0 0 24px #f1d08a33}
.chest-found.evolved b{color:#fff4d6}
.panel[data-reveal="chest"] .chest-found{animation:chest-found .3s cubic-bezier(.2,1.4,.4,1) .5s backwards}
.panel[data-reveal="skip"] .chest-found{animation:none}
@keyframes chest-found{0%{opacity:0;transform:translateY(6px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.panel[data-reveal="chest"] .chest-found{animation:chest-fade .2s .2s backwards}}
@keyframes chest-wobble{25%{transform:rotate(-8deg) scale(1.05)}75%{transform:rotate(8deg) scale(1.05)}}
@keyframes chest-hide{to{opacity:0}}
@keyframes chest-pop{0%{opacity:0;transform:scale(.6)}65%{transform:scale(1.14)}}
@keyframes chest-rays{0%{opacity:0;transform:scale(.3) rotate(0)}35%{opacity:1}}
@keyframes chest-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
 .panel[data-reveal="chest"] .chest-closed{animation:chest-hide 0s forwards}
 .panel[data-reveal="chest"] .chest-open,.panel[data-reveal="chest"] .chest-rays,.panel[data-reveal="chest"] .choices .choice[data-kind]{animation:chest-fade .15s backwards}
}
/* T028 level-up beat (Lead, CREATIVE_DIRECTION §4.4; game.js levelBeat): a gold ring and "Level up" rise from the hero over
   the paused run; the veil and the panel fade in 250 ms later and the cards follow their usual stagger. */
#modal[data-beat="level"]{animation:beat-veil .2s ease-out .25s backwards}
#modal[data-beat="level"]>.panel{animation:appear .2s ease .25s backwards}
/* Evolution beat (T074): the run's biggest reward moment, over the paused level-up panel. */
.evolution-beat{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 44%,#3a3a2af0,#0b1a1ff2 62%);animation:evo-in .28s ease-out both;cursor:pointer}
.evolution-beat .evo-rays{position:absolute;left:50%;top:44%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe3a026 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 22%,transparent 68%);mask:radial-gradient(circle,#000 22%,transparent 68%);animation:evo-spin 10s linear infinite;pointer-events:none}
.evolution-beat .evo-flash{position:absolute;left:50%;top:44%;width:26px;height:26px;margin:-13px;border-radius:50%;background:#fff6d8;box-shadow:0 0 70px 34px #f5cf7a;animation:evo-flash .75s ease-out both;pointer-events:none}
.evo-card{position:relative;display:grid;justify-items:center;gap:6px;width:min(330px,88vw);padding:18px 18px 14px;text-align:center;border:1px solid #f5cf7a99;border-radius:18px;background:linear-gradient(180deg,#1a3c45,#0f242b);box-shadow:0 14px 44px #000a,inset 0 1px 0 #ffffff14;animation:evo-card .46s cubic-bezier(.2,1.45,.4,1) .12s both}
.evo-card small{font:700 12px/1 var(--body,system-ui);letter-spacing:.24em;text-transform:uppercase;color:#f5cf7a}
.evo-card h2{margin:2px 0 0;font:34px/1.05 var(--display,serif);color:#fff4d8;text-shadow:0 2px 0 #0009,0 0 18px #f5cf7a70}
.evo-recipe{display:flex;align-items:center;gap:12px;margin:4px 0 2px}
.evo-recipe .item-art{width:54px;height:54px;opacity:.8}
.evo-recipe .item-art.evo-new{width:76px;height:76px;opacity:1;filter:drop-shadow(0 0 12px #f5cf7acc)}
.evo-recipe span{font-size:22px;color:#f5cf7a}
.evo-from{margin:0;font:13px/1.4 var(--body,system-ui);color:#b9cdc4}
.evo-text{margin:2px 0 0;font:15px/1.45 var(--body,system-ui);color:#e9f3ee}
.evo-tap{margin-top:6px;font:12px var(--body,system-ui);color:#9fb7ae}
@keyframes evo-in{from{opacity:0}}
@keyframes evo-spin{to{transform:rotate(1turn)}}
@keyframes evo-flash{0%{transform:scale(.2);opacity:1}100%{transform:scale(7);opacity:0}}
@keyframes evo-card{from{transform:scale(.55);opacity:0}}
.evolution-beat.still,.evolution-beat.still .evo-card,.evolution-beat.still .evo-rays{animation:none}.evolution-beat.still .evo-flash{display:none}
@media (prefers-reduced-motion:reduce){.evolution-beat,.evo-card,.evolution-beat .evo-rays{animation:none}.evolution-beat .evo-flash{display:none}}
#modal[data-beat="level"] .choices .choice[data-kind]{animation-delay:.3s}
#modal[data-beat="level"] .choices .choice[data-kind]:nth-child(2){animation-delay:.36s}
#modal[data-beat="level"] .choices .choice[data-kind]:nth-child(3){animation-delay:.42s}
#modal[data-beat="level"] .choices .choice[data-kind]:nth-child(4){animation-delay:.48s}
.level-beat{position:absolute;width:0;height:0;pointer-events:none}
.level-flash{position:absolute;left:-48px;top:-48px;width:96px;height:96px;border-radius:50%;background:radial-gradient(closest-side,#fff3cf 0,#f2c46acc 38%,#f2c46a00 100%);opacity:0;animation:level-flash .24s ease-out forwards}
.level-ring{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:4px solid #f5cf7a;box-shadow:0 0 18px #f2c46aa6,inset 0 0 14px #ffe7a866;opacity:0;animation:level-ring .3s cubic-bezier(.2,.7,.3,1) forwards}
.level-ring.late{border-width:2px;animation-delay:.07s}
.level-phrase{position:absolute;left:0;top:-66px;white-space:nowrap;font:700 21px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#ffe7a8;text-shadow:0 2px 0 #5b3a10,0 0 3px #3a2508,0 0 14px #f2c46a;opacity:0;animation:level-phrase .42s ease-out forwards}
@keyframes level-flash{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.15)}}
@keyframes level-ring{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1.55)}}
@keyframes level-phrase{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}25%{opacity:1;transform:translate(-50%,0) scale(1.06)}60%{opacity:1;transform:translate(-50%,-4px) scale(1)}80%,100%{opacity:0;transform:translate(-50%,-10px)}}
#bossFill{transition:width .06s linear}
@keyframes beat-veil{from{background-color:#0d252b00;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@media (prefers-reduced-motion:reduce){#modal[data-beat]{animation:none}#modal[data-beat]>.panel{animation:none}.level-beat{display:none}}
/* Telemetry consent card and Settings switch (Lead UI over T010): asked once, equal-weight choices. */
.camp-consent{display:grid;gap:10px;margin:0 0 12px;padding:12px 14px;border:1px solid #91a79a66;border-radius:16px;background:#183a40e6;color:#e9e3cf}
.camp-consent-copy b{display:block;margin-bottom:4px;font-size:14px}
.camp-consent-copy p{margin:0;font-size:12px;line-height:1.4;color:#c5d3c6}
.camp-consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.camp-consent-actions button{min-height:40px;border:1px solid #91a79a88;border-radius:12px;background:#24494b;color:#f2e8cf;font-weight:600}
.camp-consent small{font-size:11px;color:#9fb5a8}
/* T060 neutral age question (Lead, 09-25): a plain year list and Continue, 44 px targets, inside the consent card or Settings. */
.age-gate{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.age-gate-field{display:grid;gap:4px;font-size:12px;color:#c5d3c6}
.age-gate select{min-height:44px;padding:0 10px;border:1px solid #91a79a88;border-radius:12px;background:#12303a;color:#f2e8cf;font:600 14px var(--body)}
.age-gate button{min-height:44px;padding:0 16px;border:1px solid #91a79a88;border-radius:12px;background:#24494b;color:#f2e8cf;font-weight:600}
.age-gate button:disabled{opacity:.5}
.settings-age{margin:6px 0 10px}
/* Legal pages in a sheet (Lead, 09-25): the game keeps its state; 44 px close target. */
.legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:2px 4px 8px}
.legal-links button,.link-button{width:auto!important;flex:none;min-height:32px;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#e9c98a;font:600 13px var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.legal-sheet{width:min(720px,calc(100vw - 16px));height:min(92dvh,900px);padding:0;border:1px solid #2a4f5a;border-radius:18px;background:#0b1b21;color:#eef2ea;overflow:hidden}
.legal-links button{min-height:44px!important;min-width:44px}
.legal-sheet::backdrop{background:#04101499}
.legal-sheet[open]{display:flex;flex-direction:column}
.legal-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-bottom:1px solid #2a4f5a}
.legal-sheet header strong{font:700 16px var(--body)}
.legal-sheet header button{width:44px;height:44px;border:1px solid #8ba29966;border-radius:12px;background:#16343a;color:#f2e8cf;font-size:22px}
.legal-sheet iframe{flex:1;width:100%;border:0;background:#0b1b21}
#campStats[aria-checked="true"]{border-color:#7fe3c8}
/* T007 pass 3 (Lead): slim combat HUD. Full-width XP bar with Lv; icon pause/build at the edges; centered
   timer; skull kills and coin gold; the phase chip appears only when it matters; 40 px slots, dashed empties. */
#hud .hud-top{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px 8px 4px;background:linear-gradient(180deg,#0c2126e6 0,#0c212699 70%,#0c212600);border:0;border-radius:0}
#hud .experience-line{order:-1;display:flex;align-items:center;gap:6px}
#hud #levelText{flex:none;min-width:34px;padding:1px 6px;border-radius:9px;background:#e9c98a;color:#23200f;font:700 11px/1.3 var(--number);text-align:center}
#hud .experience-line .xp{height:6px;border-radius:3px;background:#0b2226cc;box-shadow:inset 0 0 0 1px #8ba29944}
#hud .topline{display:grid;grid-template-columns:44px minmax(0,1fr) auto minmax(0,1fr) 44px;grid-template-areas:"pause kills timer gold build" "pause kills chip gold build";align-items:center;column-gap:8px}
#hud .topline>div{display:contents}
#hud #pause{grid-area:pause}
#hud #inventory{grid-area:build}
#hud #timer{grid-area:timer;font:26px/1 var(--number);letter-spacing:.02em;text-shadow:0 1px 2px #000a}
#hud #stageLabel{grid-area:chip;justify-self:center;max-width:none;margin:3px 0 0;padding:1px 8px;border-radius:9px;background:#17363de6;color:#e2ece2;font:700 11px/1.4 var(--number);letter-spacing:.07em}
#hud #stageLabel:empty{display:none}
#hud #stageLabel[data-tone="danger"]{background:#7a2c24e6;color:#ffe3d8}
#hud #killText{grid-area:kills;justify-self:start;display:flex;align-items:center;gap:5px;font:13px var(--number);text-shadow:0 1px 2px #000a}
#hud #killText::before{content:'';flex:none;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2e8cf'%3E%3Cpath d='M12 2.5c-4.9 0-8.5 3.4-8.5 7.9 0 2.6 1.2 4.7 3.1 6V19c0 .6.4 1 1 1h1.4v-2.2h1.6V20h2.8v-2.2H15V20h1.4c.6 0 1-.4 1-1v-2.6c1.9-1.3 3.1-3.4 3.1-6 0-4.5-3.6-7.9-8.5-7.9zM8.6 13.6a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm6.8 0a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2z'/%3E%3C/svg%3E") center/contain no-repeat}
#hud .topline strong.hud-gold{grid-area:gold;justify-self:end;font:13px var(--number);text-shadow:0 1px 2px #000a}
#hud .hud-gold .item-art{width:16px;height:16px}
#hud #pause,#hud #inventory{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #8ba29966;border-radius:12px;background:#16343ad9 center/20px no-repeat;font-size:0;color:transparent;pointer-events:auto}
#hud #pause{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2e8cf'%3E%3Crect x='6' y='5' width='4' height='14' rx='1.2'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1.2'/%3E%3C/svg%3E")}
#hud #inventory{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2e8cf' stroke-width='2'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
#hud #loadout{grid-template-columns:repeat(6,40px);justify-content:center;gap:6px;margin-top:6px}
#hud #loadout .loadout-slot{width:40px;height:40px;min-height:40px;padding:0;border-radius:10px}
/* A11y pass (Lead, 09-25): 44 px touch areas without changing the visuals. */
#hud #loadout button.loadout-slot::before{content:"";position:absolute;inset:-2px}/* ::after is the cooldown badge (style.css) */
#chestFocus{min-height:44px}
#hud #loadout .loadout-glyph{width:32px;height:32px}
#hud #loadout .loadout-slot .item-art{width:30px;height:30px}
#hud #loadout .cooldown-mask{border-radius:9px}
#hud #loadout .loadout-slot>span{right:1px;bottom:1px;padding:0 2px;border-radius:4px;font-size:10px;line-height:1.2}
#hud #loadout .loadout-slot.empty{border:1px dashed #8ba29955;background:#0c212640;color:transparent}
#hud #magazine{margin:5px auto 0;padding:2px 8px;border-radius:9px;font-size:10px}
#hud #sound{display:none}
/* T006 pass 2 (Lead): First Light HUD in the slim grid; a non-blocking bubble for the move step. */
#hud #firstLightHud{grid-column:1/-1}
body.in-first-light #hud #stageLabel{display:none}
#firstLightHud .first-light-line{margin:6px 0 0;padding:6px 10px;border:1px solid #d5b77e66;border-radius:10px;background:#0f2a30e6;color:#f5ead0;font-size:12px;line-height:1.35}
/* Next goal bar under the hero card (Lead, FUNNEL_REVIEW_V1): one existing purchase to aim gold at. */
.camp-goal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"tag label count" "bar bar bar";align-items:center;column-gap:8px;row-gap:6px;width:100%;margin:8px 0 0;padding:8px 12px;border:1px solid #91a79a55;border-radius:14px;background:#183a40e6;color:#e9e3cf;text-align:left;cursor:pointer}
.camp-goal small{grid-area:tag;padding:1px 7px;border-radius:8px;background:#24494b;color:#d5b77e;font:700 11px/1.5 var(--number);letter-spacing:.06em;text-transform:uppercase}
.camp-goal b{grid-area:label;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px var(--body)}
.camp-goal em{grid-area:count;font:normal 11px var(--number);color:#c5d3c6}
.camp-goal-bar{grid-area:bar;display:block;height:4px;border-radius:2px;background:#0f2c30}
.camp-goal-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#c99a4c,#efcf8b)}
.camp-goal.ready{border-color:#efcf8b;box-shadow:0 0 0 3px #edcc8718}
.camp-goal.ready small{background:#efcf8b;color:#2a2410}
/* PWA update toast (Lead UI over T022): shown only outside runs, applied on tap. */
.pwa-update{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);z-index:30;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:min(92vw,420px);padding:10px 12px 10px 16px;border:1px solid #efcf8b88;border-radius:14px;background:#123036f2;color:#f2e8cf;font-size:13px;box-shadow:0 8px 24px #0008}
.pwa-update span{flex:1}
.pwa-update button{min-height:40px;padding:6px 14px;border:1px solid #efcf8b;border-radius:10px;background:linear-gradient(140deg,#c99a4c,#8a6a35);color:#fff6df;font-weight:600}
/* Short landscape windows (desktop and portal iframes 450-560 px tall): the whole level-up choice stays above
   the fold (the results have their own block below). Phones are taller than this and keep their layout. */
@media (max-height:560px) and (min-width:700px){
 #modal .panel{padding:16px 22px;max-height:calc(100dvh - 16px)}
 #modal .panel h2{font-size:24px;margin:2px 0 10px}
 #modal .choices{gap:10px}
 #modal .choices .choice{padding:10px 12px}
 #modal .choice .item-art{width:44px;height:44px;margin-bottom:0}
 #modal .choice b{font-size:20px}
 #modal .choice p{font-size:13px;line-height:1.35}
}
.choice-new{white-space:nowrap;flex-shrink:0}
/* Results in a short landscape window (T027 part 2): the postcard and its companion line become the left column and only the
   right column may scroll, so the outcome, cause, rewards and actions fit 800x450 and 960x540 without scrolling. */
@media (max-height:560px) and (min-width:700px){
 #modal .run-results.panel{padding:0;width:min(880px,calc(100vw - 24px))}
 #modal .run-results .result-scroll{flex:1 1 auto;display:grid;grid-template-columns:minmax(230px,34%) minmax(0,1fr);overflow:hidden}
 #modal .run-results .result-art{height:auto;min-height:0}
 #modal .run-results .result-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 22px 10px}
 #modal .run-results .result-content h1{font-size:24px;margin:6px 0 10px}
 #modal .run-results .result-message{font-size:14px;margin:0 0 10px}
 #modal .run-results .result-debrief{margin:0 0 10px;padding:8px 12px;gap:4px}
 #modal .run-results .result-content>.result-unlock{margin:0 0 10px;padding:8px 10px}
 #modal .run-results .result-unlock>img{width:40px;height:48px}
 #modal .run-results .result-rewards{gap:8px}
 #modal .run-results .result-rewards article{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:8px;row-gap:0;padding:6px 10px}
 #modal .run-results .result-rewards article small{flex-basis:100%}
 #modal .run-results .result-rewards .camp-icon{width:28px;height:28px}
 #modal .run-results .result-rewards strong{font-size:24px}
 #modal .run-results .result-rewards .result-stage-reward{padding:5px 12px}
 #modal .run-results .result-rewards .result-stage-reward strong{font-size:14px}
 #modal .run-results .result-stage-reward small{display:none}
 /* The optional Salvage row (T013), once the ads integration adds it, compacts to one line: icon, copy, button. */
 #modal .run-results .ad-salvage{grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;margin:8px 0 0;padding:6px 10px}
 #modal .run-results .ad-salvage>.camp-icon{width:28px;height:28px}
 #modal .run-results .ad-salvage>button{grid-column:auto;min-height:40px;padding:6px 12px}
 #modal .run-results .result-run{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px}
 #modal .run-results .result-run-line{padding:8px 1px}
 #modal .run-results .result-build{margin:0;gap:6px}
 #modal .run-results .result-build-weapon{flex-direction:row;gap:5px;min-width:0;padding:3px 7px 3px 4px}
 #modal .run-results .result-build-weapon .item-art{width:24px;height:24px}
 #modal .run-results .result-detail summary{min-height:40px}
 #modal .run-results .result-actions{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;padding-block:8px}
 #modal .run-results .result-actions>*{grid-column:auto}
 #modal .run-results .result-actions button{min-height:42px}
}
/* Short phones (560-700 px visible, for example 360x640 or an iPhone SE under browser bars): the camp keeps the
   stage card clear of the sticky Play button by dropping the secondary main-weapon row. The Heroes view keeps
   it: that row holds the hero actions (See in action, Story, Equipment, Wardrobe). */
@media (max-height:700px) and (max-width:699px){.camp-shell:not(.heroes-open) .camp-signature{display:none}}

/* A11y text pass 3 (Lead, 09-25, UI-A11Y): the last labels under 11 px that tools/ui-tour.cjs found. Loaded last, so these
   win at equal specificity; the wardrobe's own 12 px label keeps its more specific rule. */
.daily-hub .gift-day small{font-size:11px;letter-spacing:0}
#collectionFilters b,#collectionAffinities span,.skill-tile small,.skill-tile>span:not(.skill-lock){font-size:11px}
.shop-outfit-card small,.exchange-recruit small,.gear-chest-top small{font-size:11px}
.choice-new{font-size:11px}
.outfit-stage-label{font-size:11px;letter-spacing:.08em}
.exchange-price span,.exchange-feature-copy>small{font-size:11px}
.profile-copy small,.account-next>small{font-size:11px}
.camp-settings-dialog:has(.tutorial-welcome-art)>small{font-size:11px}
#hud #magazine{font-size:11px}
@media(max-width:350px){.outfit-stage-label{font-size:10px;letter-spacing:.04em}}
/* Evolution paths the run cannot reach yet stay readable but step back (Lead, 09-25). */
.evolution-card.is-distant{opacity:.62}