/* Pick cards (owner request, RD-090): the deck draft and the in-match picker. The unit's portrait gets its own lit area
   with only small corner badges over it; the name, health and power (as icons) sit below; the action button last. The
   rarity colours the border and the light behind the portrait. Replaces the older text-over-art tiles. */
.pick-card{--rare:#b3bdc9;position:relative;display:flex;flex-direction:column;min-width:0;border:1.5px solid color-mix(in srgb,var(--rare) 70%,#000);border-radius:12px;
 background:linear-gradient(180deg,#16262b,#0f1a1d);box-shadow:0 4px 12px #0008,inset 0 1px #ffffff12;overflow:hidden;color:var(--parchment,#f3e6c8);text-align:left}
.pick-card.rarity-rare{--rare:#65b5ff}.pick-card.rarity-epic{--rare:#c995ff}.pick-card.rarity-legendary{--rare:#f3cd76}
.pick-card.rank-2{box-shadow:0 0 0 1px #dfe5ee88,0 4px 12px #0008}.pick-card.rank-3{box-shadow:0 0 0 1px #f0cd7ccc,0 0 14px #f0cd7c44,0 4px 12px #0008}
.pc-art{position:relative;height:150px;background:radial-gradient(ellipse 70% 60% at 50% 70%,color-mix(in srgb,var(--rare) 30%,transparent),transparent 72%),linear-gradient(180deg,#1d3036,#13212a)}
.pc-art canvas{position:absolute;inset:4px 2px 0;width:calc(100% - 4px);height:calc(100% - 4px)}
.pc-art:after{content:'';position:absolute;left:12%;right:12%;bottom:3px;height:10px;border-radius:50%;background:radial-gradient(ellipse,#0009,transparent 70%);z-index:0}
.pc-art canvas{z-index:1}
.pc-rarity{position:absolute;z-index:2;top:5px;left:6px;padding:1px 6px;border-radius:999px;background:#0b1316cc;border:1px solid color-mix(in srgb,var(--rare) 60%,transparent);color:var(--rare);font:700 9px var(--display,Georgia,serif);letter-spacing:.6px;text-transform:uppercase}
.pc-badges{position:absolute;z-index:2;top:4px;right:5px;display:flex;gap:3px;align-items:center}
.pc-badges .rank-badge,.pc-badges .unit-level{margin:0}
.pc-art,.pc-body,.pick-card .card-action,.pick-card .card-info{flex:none}/* older picker rules set flex-basis:100% on the button */
.pc-body{display:grid;gap:3px;padding:6px 8px 2px}
.pc-body h3{margin:0;font:700 14px/1.15 var(--display,Georgia,serif);color:var(--parchment,#f3e6c8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-stats{display:flex;flex-wrap:wrap;gap:4px 10px;font:700 12px var(--display,Georgia,serif);color:var(--parchment-dim,#cdbd99);font-variant-numeric:tabular-nums}
.pc-stats span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.pc-stats .ico{width:14px;height:14px;margin:0;vertical-align:0}
.pc-recruits{color:var(--mint,#7fe0a8)}
.pc-role{margin:0;font-size:10px;line-height:1.3;color:var(--muted-warm,#a99d82)}
.pick-card .card-action{width:calc(100% - 12px);margin:6px;padding:7px 4px;font-size:12px;border-radius:8px}
.pick-card .card-info{padding:0 8px 6px;font-size:10px}.pick-card .card-info summary{padding:2px 0;font-size:10px;cursor:pointer;color:var(--muted-warm,#a99d82)}
/* Deck draft: a 2 × 2 grid of big cards on phones, a row of four from tablets up. */
.deck-offers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.deck-offer .pick-card{height:100%}
.deck-offer.chosen .pick-card{outline:3px solid var(--gold,#f0cd7c);outline-offset:-3px;box-shadow:0 0 18px #f0cd7c55}
@media(min-width:720px){.deck-offers{grid-template-columns:repeat(4,minmax(0,1fr))}.deck-offers .pc-art{height:190px}}
@media(max-width:600px){.deck-offers .pc-art{height:140px}}
/* In-match picker: three cards over the arena; compact (no role, recruit count or details: the button says it). */
.pick-card.compact{background:linear-gradient(180deg,#16262bee,#0f1a1df2)}
.pick-card.compact .pc-art{height:104px}
.pick-card.compact .pc-body{padding:4px 7px 0}
.pick-card.compact .pc-body h3{font-size:13px}
.pick-card.compact .card-action{margin:5px 6px 6px;padding:6px 4px;font-size:11px}
@media(min-width:720px){.pick-card.compact .pc-art{height:128px}.pick-card.compact .pc-body h3{font-size:14px}}
@media(max-width:380px){.pick-card.compact .pc-art{height:92px}.pc-stats{gap:3px 7px;font-size:11px}}
/* Bigger portraits elsewhere on phones (the Deck tab and lineup; wide screens are sized in wide.css). */
@media(max-width:719px){
 .collection-grid .profile-unit canvas,.deck-grid .profile-unit canvas{height:112px}
 .lineup-slot .deck-chip{grid-template-rows:74px auto}.lineup-slot .deck-chip canvas{height:74px}
 .deck-lane .deck-chip canvas{height:64px}
}
/* An Upgrade offer (RD-086, restyled RD-090): no banner over the art; the button itself is gold brass with a soft glow
   and the rank-up icon, and the corner badge shows the rank it raises to. */
.pick-card.upgrade-tile{border-color:#f0cd7c}
.pick-card .card-action.upgrade-action{background:linear-gradient(180deg,#fff0c2,#f0cd7c 45%,#c9922f);color:#2a1d0b;border:1px solid #6c5331;font-weight:700;letter-spacing:.5px;
 box-shadow:inset 0 1px #fffbeacc,0 0 0 1px #f0cd7c66,0 0 14px #f0cd7c66;animation:upgrade-glow 2s ease-in-out infinite}
.pick-card .card-action.upgrade-action .ico{width:14px;height:14px;margin:0 4px 0 0;vertical-align:-2px}
@media(prefers-reduced-motion:reduce){.pick-card .card-action.upgrade-action{animation:none}}
/* RD-243 (owner request): Upgrade and Units ×2 offers get the deck screen's level-up flourish (RD-166): a pulsing golden
   glow, a shine sweeping across the card and one across the button; a steady glow with reduced motion. RD-248 (owner: "only
   flashes the button and not the whole card"): the in-match picker scrolls inside a clipped dock, which hid a ring drawn
   round the card, and the shine crossed only the portrait. The glow now pulses inside the card's edge (never clipped) and
   the shine crosses the whole card. */
/* RD-253 (owner: the frame "shows up over the character art rectangle"): an inset shadow is painted beneath a card's
   children, so the portrait panel covered it and the glow outlined the art instead of the card. The pulsing gold edge is
   now its own layer above the content, following the card's rounded edge; the card keeps the soft outer glow. */
.pick-card.upgrade-tile{animation:card-ready-outer 1.6s ease-in-out infinite}
.pick-card.upgrade-tile::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;animation:card-ready 1.6s ease-in-out infinite}
@keyframes card-ready{0%,100%{box-shadow:inset 0 0 0 2px #e8c27acc,inset 0 0 10px #ffd36a55}50%{box-shadow:inset 0 0 0 3px #ffe08a,inset 0 0 18px #ffd36a99}}
@keyframes card-ready-outer{0%,100%{box-shadow:0 0 10px #ffd36a66}50%{box-shadow:0 0 24px #ffd36add}}
.pick-card.upgrade-tile::after{content:'';position:absolute;inset:-20%;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 32%,#fff3c055 43%,#ffffffcc 50%,#fff3c055 57%,transparent 68%);transform:translateX(-110%);animation:ready-shine 3.2s ease-in-out infinite}
.pick-card .card-action.upgrade-action{position:relative;overflow:hidden}
.pick-card .card-action.upgrade-action::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,#fff6 50%,transparent 70%);transform:translateX(-120%);animation:free-sweep 2.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.pick-card.upgrade-tile{animation:none;box-shadow:0 0 16px #ffd36aaa}.pick-card.upgrade-tile::before{animation:none;box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 12px #ffd36aaa}.pick-card.upgrade-tile::after,.pick-card .card-action.upgrade-action::after{display:none}}

/* ---- Match end on one screen (owner request, RD-090) ----
   The end screen fills the arena overlay: header, versus row, a carousel of panels (rewards, units, battle,
   standouts, highlights) that cycles every 5 s, labelled tabs with a filling progress line, and the actions. */
.arena-dock.result-dock{align-items:stretch;overflow:hidden}
.result-dock .match-end{display:flex;flex-direction:column;height:100%;max-height:900px;margin:auto;padding:14px 16px 12px;overflow:hidden}
.result-dock .me-title{font-size:clamp(34px,8vw,64px)}
.result-dock .me-reason{margin:2px 0 8px}
.result-dock .me-versus{margin-bottom:8px;padding:6px 8px}
.me-carousel{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;border-radius:10px}
.me-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.me-panel{flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 6px;scrollbar-width:thin}
.me-panel>*{margin-top:0}
.me-panel.active>*{animation:me-up .45s both}
.me-panel.active>*:nth-child(2){animation-delay:.08s}.me-panel.active>*:nth-child(3){animation-delay:.16s}
.me-panel .me-rewards{margin:0}
.me-panel .me-stats{margin-bottom:0}
.me-panel .me-heroes{grid-template-columns:1fr;margin-bottom:0}
.me-panel .me-facts{margin-bottom:8px}
.me-tabs{display:flex;justify-content:center;gap:4px;margin:8px 0 10px;flex-wrap:wrap}
.me-tabs button{position:relative;padding:4px 9px 6px;border:1px solid #c3a16944;border-radius:999px;background:#0e1b1e;color:#cfac70;font:600 11px Georgia,serif;letter-spacing:.4px;cursor:pointer;overflow:hidden}
.me-tabs button.on{border-color:var(--accent,#ffd76a);color:#fff3cf;background:#1c2f33}
.me-tabs button.on:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent,#ffd76a);transform-origin:left;animation:me-tab 5s linear both}
.match-end.me-paused .me-tabs button.on:after{animation:none;transform:none;opacity:.5}
.result-dock .me-actions{flex:none;animation:none}
@keyframes me-tab{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.me-track{transition:none}.me-panel.active>*,.me-tabs button.on:after{animation:none}}
@media(max-width:600px){.result-dock .match-end{padding:10px 10px 10px}.me-tabs button{padding:4px 7px 6px;font-size:10px}}
.me-panel .me-reward-row{grid-template-columns:1fr 1fr;gap:8px}.me-panel .me-reward b{font-size:22px}
.pick-card:not(.compact) .pc-body{flex:1 0 auto;align-content:start}

/* ---- Reward track cards (owner request, RD-091): bigger, with the main prize as a picture ----
   A unit unlock shows the unit's full animated portrait; a title, token or Gears-only level shows a large icon, so no
   level looks empty. Other prizes follow as small chips. */
.track-node{flex-basis:136px;padding:8px 8px 10px;gap:6px;--glow:#e5c990}
.track-node.rarity-rare{--glow:#7cc4ff}.track-node.rarity-epic{--glow:#c49cff}.track-node.rarity-legendary{--glow:#ffd36a}
.track-node.main-title{--glow:#ec9a76}.track-node.main-token,.track-node.main-gears{--glow:#f0cd7c}
.track-node::before{top:26px}
.tn-art{position:relative;width:100%;height:116px;display:grid;place-items:center;border-radius:10px;overflow:hidden;border:1px solid #ffffff12;
 background:radial-gradient(ellipse 70% 62% at 50% 64%,color-mix(in srgb,var(--glow) 32%,transparent),transparent 74%),linear-gradient(180deg,#1b2b30,#101a1c)}
.tn-art canvas{position:absolute;inset:6px 0 0;width:100%;height:calc(100% - 6px);filter:drop-shadow(0 5px 5px #0009)}
.tn-big{width:68px;height:68px;filter:drop-shadow(0 5px 6px #000b)}
.tn-amount{position:absolute;right:8px;bottom:5px;font:700 19px var(--display);color:var(--gold);text-shadow:0 2px 0 #05090b}
.tn-tag{position:absolute;z-index:1;left:5px;top:5px;display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:999px;background:#0b1316d9;border:1px solid #e5c99055;color:var(--brass-hi);font:700 8.5px var(--display);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.tn-tag .ico{width:10px;height:10px;margin:0}
.tn-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font:700 13px var(--display);color:var(--parchment)}
.track-node .track-prizes{min-height:0}
.track-node.claimed .tn-art{filter:saturate(.55) brightness(.8)}
@media(min-width:720px){.track-node{flex-basis:156px}.tn-art{height:132px}.tn-big{width:78px;height:78px}}
/* The next reward on Play: medallion, picture and details side by side. */
.next-reward-row .track-node{display:grid;grid-template-columns:auto 96px minmax(0,1fr);align-items:center;column-gap:10px;row-gap:4px}
.next-reward-row .track-medal{grid-column:1;grid-row:1/span 4}
.next-reward-row .tn-art{grid-column:2;grid-row:1/span 4;height:96px}
.next-reward-row .tn-name,.next-reward-row .track-prizes,.next-reward-row .xp-bar,.next-reward-row small{grid-column:3;justify-self:stretch;text-align:left}
.next-reward-row .track-prizes{justify-content:flex-start}

/* ---- End screen on tall phones (owner feedback, RD-091): spread out, bigger, with graphics ----
   Each panel's content is centred in the carousel, with a faint watermark icon for the panel; stat tiles carry icons and
   larger numbers; standouts show bigger portraits. */
.me-panel{position:relative;display:flex;flex-direction:column}
.me-panel-in{position:relative;z-index:1;margin-block:auto;display:grid;gap:12px}
.me-watermark{position:absolute;z-index:0;right:-14px;bottom:-14px;width:170px;height:170px;opacity:.07;pointer-events:none}
.me-watermark .ico{width:100%;height:100%;filter:none}
.me-panel .me-stat{padding:12px 12px 11px;gap:5px}
.me-panel .me-stat small .ico{width:16px;height:16px;margin:0 5px 0 0;vertical-align:-3px;filter:none}
.me-panel .me-stat b{font-size:30px}
.me-panel .me-rounds{margin:0}.me-panel .me-rounds li{min-width:74px;padding:7px 10px}
.me-panel .me-heroes{gap:10px}.me-panel .me-hero{padding:10px 12px}.me-panel .me-hero-art{width:84px;height:84px}
.me-panel .me-hero-copy b{font-size:17px}.me-panel .me-hero-copy em{font-size:12px}
.me-panel .me-facts{font-size:14px;line-height:1.75}
.me-panel .me-reward b{font-size:30px}.me-panel .me-reward small .ico{width:18px;height:18px}
.me-panel .unit-xp li{padding:4px 0}.me-panel .unit-xp .unit-thumb{width:46px;height:46px}
.me-tabs button{min-height:30px;padding:5px 11px 7px;font-size:12px}
@media(min-height:720px){
 .result-dock .me-title{font-size:clamp(42px,12vw,72px)}
 .result-dock .me-avatar{width:54px;height:60px}
 .result-dock .me-versus{padding:10px 8px;margin-bottom:12px}
 .me-panel-in{gap:16px}
}
.track{align-items:flex-start}
.me-tabs{flex-wrap:nowrap;gap:3px}.me-tabs button{flex:0 1 auto;min-width:0;padding:5px 8px 7px;font-size:11.5px;white-space:nowrap}@media(max-width:380px){.me-tabs button{padding:5px 6px 7px;font-size:10.5px}}

/* ---- More rewards (owner request, RD-093) ----
   Daily reward calendar (seven day tiles, today's glowing), chest slots (bronze, silver, gold; a countdown while one
   unlocks; "Open!" glowing when ready), the win-streak badge and weekly quests. */
.ico.chest-silver{filter:saturate(.1) brightness(1.3) drop-shadow(0 1px 0 #000a)}
.ico.chest-gold{filter:saturate(1.7) brightness(1.2) hue-rotate(-6deg) drop-shadow(0 0 4px #f0cd7c88)}
.ico.chest-ghost{opacity:.25;filter:grayscale(1)}
.streak-days{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sd{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 2px 5px;border:1px solid var(--panel-edge);border-radius:9px;background:#0c1214;text-align:center}
.sd b{font:700 9px var(--display);letter-spacing:.4px;color:var(--muted-warm);text-transform:uppercase}
.sd .ico{width:24px;height:24px;margin:0}
.sd small{font:700 10px var(--display);color:var(--parchment-dim);white-space:nowrap}
.sd.big{background:linear-gradient(180deg,#2a2414,#0c1214);border-color:var(--brass)}
.sd.claimed{opacity:.5}.sd .sd-check{position:absolute;right:2px;top:2px;width:13px;height:13px}
.sd.today{border-color:var(--gold);box-shadow:0 0 0 1px #f0cd7c66,0 0 14px #f0cd7c55;animation:upgrade-glow 2s ease-in-out infinite}
.streak-claim{width:100%;margin-top:10px;min-height:46px}.streak-claim .ico{width:20px;height:20px;margin-right:6px;vertical-align:-4px}
.streak-note{display:flex;align-items:center;gap:6px;margin:8px 2px 0;font-size:12px;color:var(--moss)}.streak-note .ico{width:14px;height:14px;margin:0}
.chest-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.chest-slot{display:grid;justify-items:center;align-content:start;gap:3px;min-height:104px;padding:8px 3px 7px;border:1px solid var(--panel-edge);border-radius:10px;background:#0c1214;color:var(--parchment);font:inherit;cursor:pointer}
.chest-slot.empty{border-style:dashed;cursor:default}.chest-slot.empty small{color:var(--muted-warm);font-size:10px;text-align:center}
.chest-slot .chest-big{width:46px;height:46px;margin:0}
.chest-slot b{font:700 12px var(--display)}.chest-slot small{font:600 10px var(--display);color:var(--muted-warm);font-variant-numeric:tabular-nums;text-align:center}
.chest-slot.kind-silver{border-color:#9aa6ad}.chest-slot.kind-gold{border-color:var(--gold)}
.chest-slot.ticking small{color:var(--sky)}
.chest-slot.ready{border-color:var(--gold);background:linear-gradient(180deg,#3a3018,#16130b);animation:upgrade-glow 1.6s ease-in-out infinite}.chest-slot.ready small{color:var(--gold);font-size:12px}
.chest-slot[aria-disabled="true"]{cursor:default}
.win-streak{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:0 7px;border-radius:999px;background:#3a1a12;border:1px solid #e04b4566;color:#ffb39c;font-size:11px;letter-spacing:.3px}.win-streak .ico{width:13px;height:13px;margin:0}
.best-streak{display:flex;align-items:center;gap:4px;margin-top:8px;color:var(--muted-warm);font-size:12px}.best-streak .ico{width:14px;height:14px;margin:0}
.me-extras{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.me-weekly{display:flex;align-items:center;gap:6px;margin:6px 0;font-size:12px;color:var(--moss)}.me-weekly .ico{width:14px;height:14px;margin:0}
.cb-shield.cb-reward .cb-shield-art,.cb-shield.cb-chest .cb-shield-art{position:static;width:120px;height:120px}
@media(min-width:720px){.chest-slot{min-height:120px}.chest-slot .chest-big{width:58px;height:58px}.sd .ico{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.sd.today,.chest-slot.ready{animation:none}}

/* Store (RD-121): deals first, then chests with their contents and odds; a confirmation sheet before every purchase. */
.store-view{display:grid;gap:12px}
.store-head{display:grid;gap:8px}.store-head small{color:var(--parchment-dim)}
.store-balances{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:18px}
.stars-balance{display:inline-flex;align-items:center;gap:6px;color:#ffe9a8;font-weight:700}.stars-balance .ico{width:20px;height:20px}.stars-balance small{color:var(--parchment-dim);font-weight:400}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.store-item{position:relative;display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;gap:6px 12px;align-items:center;padding:12px;border:1px solid var(--panel-edge);border-radius:12px;background:var(--panel)}
.store-item.deal{border-color:var(--gold);background:linear-gradient(160deg,#2b2412,var(--panel) 60%)}
.store-item.blocked{opacity:.65}
.store-art{grid-row:1/3;display:grid;place-items:center;width:72px;height:72px}
.store-art .store-art,.store-art .ico{width:72px;height:72px}.store-art .unit-thumb{width:68px;height:68px}
.store-body{display:grid;gap:3px;min-width:0}.store-body b{font:700 16px var(--display);color:var(--parchment)}.store-body small{color:var(--parchment-dim);font-size:12px;line-height:1.35}
.store-left{color:var(--muted-warm)!important;letter-spacing:.5px}
.store-buy{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px}.store-buy .ico{width:18px;height:18px}.store-buy s{opacity:.6;font-weight:400}
.store-buy[aria-disabled="true"]{filter:grayscale(.6);opacity:.75}
.store-flag{position:absolute;top:-8px;right:10px;padding:2px 8px;border-radius:8px;background:var(--gold);color:#2a1d0b;font:700 11px var(--display);letter-spacing:1px;text-transform:uppercase}
.store-soon{display:flex;gap:12px;align-items:center}.store-soon .ico{width:30px;height:30px}.store-soon div{display:grid;gap:2px}.store-soon small{color:var(--parchment-dim)}
.confirm-sheet{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px;background:#05090bcc;animation:co-in .2s ease both}
.confirm-card{width:min(380px,100%);display:grid;gap:12px;padding:20px;border:1px solid var(--panel-edge);border-radius:14px;background:var(--panel);box-shadow:0 18px 50px #000c}
.confirm-card h2{margin:0;font:700 22px var(--display);color:var(--parchment)}.confirm-card p{margin:0;color:var(--parchment-dim)}.confirm-card p .ico{width:16px;height:16px;vertical-align:-3px}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px}

/* Season pass (RD-122): tier, pass XP bar and claim button, then a scrolling track of 30 tiers, free above premium. */
.season-card{display:grid;gap:12px}
.pass-head{display:flex;align-items:center;gap:12px}
.pass-tier{display:grid;place-items:center;min-width:56px;height:56px;border-radius:12px;border:1px solid var(--gold);background:linear-gradient(160deg,#3a2f14,var(--panel));line-height:1}
.pass-tier small{font:700 9px var(--display);letter-spacing:1.5px;color:var(--parchment-dim)}.pass-tier b{font:700 24px var(--display);color:#ffe9a8}
.pass-progress{flex:1;display:grid;gap:5px;min-width:0}.pass-progress .xp-bar{width:100%;max-width:none}.pass-progress small{color:var(--parchment-dim);font-size:12px}
.pass-boost{font-style:normal;color:#ffb36b;white-space:nowrap}.pass-boost .ico{width:14px;height:14px;vertical-align:-2px}
.pass-claim{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;white-space:nowrap;animation:pass-glow 1.6s ease-in-out infinite}
.pass-claim .ico{width:20px;height:20px}
@keyframes pass-glow{50%{box-shadow:0 0 0 3px #ffd36b55,0 0 18px #ffd36b66}}
.pass-track{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.pass-key{display:flex;flex-wrap:wrap;gap:8px;font:700 11px var(--display);letter-spacing:1px;text-transform:uppercase}
.pass-key span{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:8px;border:1px solid var(--panel-edge);color:var(--parchment-dim)}.pass-key .premium{border-color:#5b4a8a;background:#2d2147}.pass-key .ico{width:12px;height:12px}
.pass-col{display:grid;grid-template-rows:20px 96px 96px;gap:6px;width:84px;flex:none;scroll-snap-align:center}
.pass-num{display:grid;place-items:center;border-radius:10px;font:700 12px var(--display);color:var(--parchment-dim);background:#0006}
.pass-num.reached{background:var(--gold);color:#2a1d0b}.pass-col.next .pass-num{outline:2px solid var(--gold)}
.pass-cell{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;padding:6px 4px;border:1px solid var(--panel-edge);border-radius:10px;background:#0003;text-align:center}
.pass-cell small{font-size:10.5px;line-height:1.2;color:var(--parchment-dim)}
.pass-cell.premium{background:linear-gradient(170deg,#2d2147,#0003 70%);border-color:#5b4a8a}
.pass-cell.ready{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 14px #ffd36b44;background:linear-gradient(170deg,#3a2f14,#0003 70%)}
.pass-cell.claimed{opacity:.55}.pass-cell.locked .pass-art{filter:grayscale(.5) brightness(.8)}
.pass-art{display:grid;place-items:center;height:42px}.pass-art .ico{width:38px;height:38px}
.pass-mark{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#000a}.pass-mark .ico{width:12px;height:12px}
.emote-bubble{position:relative;padding:5px 8px;border-radius:10px;background:var(--parchment);color:#2a1d0b;font:700 11px var(--display);white-space:nowrap;max-width:76px;overflow:hidden;text-overflow:ellipsis}
.emote-bubble::after{content:"";position:absolute;left:12px;bottom:-5px;border:5px solid transparent;border-top-color:var(--parchment);border-bottom:0}
.frame-swatch{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0006;box-shadow:0 0 0 3px var(--f1),0 0 0 5px var(--f2)}.frame-swatch .ico{width:24px;height:24px}
.pass-earn{color:var(--parchment-dim);font-size:12px;line-height:1.4}
.season-strip{display:grid;gap:10px;cursor:pointer}
.pass-claimed{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.pass-claimed .pass-cell{width:84px}
.confirm-card p .pass-art .ico{width:38px;height:38px;vertical-align:0}

/* Cosmetics (RD-123): frames around avatars (painted ring once AR-14 arrives, a two-tone ring until then), emote bubbles
   in the match banner, the emote menu, and the Progress tab loadout. */
.has-frame{position:relative;box-shadow:0 0 0 2px var(--f1),0 0 0 4px var(--f2)!important}
.has-frame.painted-frame{box-shadow:none!important}
.frame-art{position:absolute;inset:-18%;width:136%;height:136%;pointer-events:none;z-index:1}
/* Animated frames (RD-249, app.mjs FRAME_MOTION): neon tubes that pulse and briefly flicker, firelight, a twinkle. */
.frame-art.frame-neon{animation:frame-neon 3s ease-in-out infinite}
@keyframes frame-neon{0%,100%{filter:drop-shadow(0 0 2px var(--f1)) brightness(1)}40%{filter:drop-shadow(0 0 8px var(--f1)) brightness(1.25)}62%{filter:drop-shadow(0 0 7px var(--f1)) brightness(1.2)}64%{filter:drop-shadow(0 0 1px var(--f1)) brightness(.8)}66%{filter:drop-shadow(0 0 7px var(--f1)) brightness(1.2)}68%{filter:drop-shadow(0 0 1px var(--f1)) brightness(.85)}71%{filter:drop-shadow(0 0 6px var(--f1)) brightness(1.15)}}
.frame-art.frame-ember{animation:frame-ember 1.7s ease-in-out infinite}
@keyframes frame-ember{0%,100%{filter:drop-shadow(0 0 3px #ff7a2a) brightness(1)}30%{filter:drop-shadow(0 0 7px #ffb347) brightness(1.15)}55%{filter:drop-shadow(0 0 4px #ff5a1f) brightness(1.03)}80%{filter:drop-shadow(0 0 8px #ffa13a) brightness(1.18)}}
.frame-art.frame-twinkle{animation:frame-twinkle 2.6s ease-in-out infinite}
@keyframes frame-twinkle{0%,100%{filter:brightness(1)}45%{filter:brightness(1.08) drop-shadow(0 0 3px #fff3c0)}50%{filter:brightness(1.35) drop-shadow(0 0 8px #fff8dc)}58%{filter:brightness(1.05)}}
@media(prefers-reduced-motion:reduce){.frame-art.frame-neon,.frame-art.frame-ember,.frame-art.frame-twinkle{animation:none}}
.emote-art{width:56px;height:56px;object-fit:contain}
.duel-commander{position:relative}
/* An emote pops out just below its commander's avatar, over the top edge of the arena, so it never hides the name or
   hearts (art agent's note on the AR-14 stickers, RD-146). */
.duel-emote{position:absolute;z-index:6;top:calc(100% - 10px);left:-4px;pointer-events:none;animation:emote-pop 3.5s ease both}
.duel-enemy .duel-emote{left:auto;right:-4px}
.duel-emote .emote-art{width:112px;height:112px;filter:drop-shadow(0 6px 10px #000a)}/* RD-163: 72 px was hard to see */
@media(max-width:480px){.duel-emote .emote-art{width:92px;height:92px}}
.duel-emote .emote-bubble{font-size:13px;max-width:140px;box-shadow:0 6px 18px #000a}
@keyframes emote-pop{0%{opacity:0;transform:translateY(8px) scale(.6)}8%{opacity:1;transform:translateY(0) scale(1.08)}14%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
/* The emote button tucks under the avatar's outer (left) corner, clear of the name and hearts beside it (RD-151). */
.duel-emote-button{position:absolute;z-index:5;left:-10px;bottom:-6px;display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid var(--panel-edge);background:var(--panel);box-shadow:0 2px 8px #0008}
.duel-emote-button .ico{width:18px;height:18px}
.emote-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:max-content;max-width:min(300px,90vw);padding:8px;border:1px solid var(--panel-edge);border-radius:12px;background:var(--panel);box-shadow:0 12px 30px #000c}
.emote-menu button{display:grid;place-items:center;min-height:44px;padding:4px 8px;border-radius:10px;border:1px solid var(--panel-edge);background:#0004}
.emote-menu .emote-bubble,.emote-preview .emote-bubble{max-width:120px}.emote-menu .emote-art{width:64px;height:64px}
.emote-mute{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--parchment-dim)}
.cosmetics-card{display:grid;gap:10px}.cosmetics-head{font:700 14px var(--display);color:var(--parchment)}
.cosmetic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.cosmetic{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;min-height:96px;padding:8px 4px;border:1px solid var(--panel-edge);border-radius:10px;background:#0003;color:var(--parchment)}
.cosmetic small{font-size:11px;line-height:1.2;color:var(--parchment-dim);text-align:center}
.cosmetic.chosen{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:linear-gradient(170deg,#3a2f14,#0003 70%)}
.cosmetic.locked{opacity:.5}
.frame-preview{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0006}.frame-preview .ico{width:26px;height:26px}
.emote-preview{display:grid;place-items:center;min-height:44px}
.match-window .duel-banner{z-index:25}/* the emote menu opens over the arena */
/* Season pass in the Store (RD-144): a flag badge with the season or the tiers, priced in Stars. */
.pass-art-badge{position:relative;border-radius:14px;background:radial-gradient(circle at 50% 40%,#3a2f14,#0006 70%);border:1px solid var(--gold)}
.pass-art-badge .ico{width:40px;height:40px}
.pass-art-badge b{position:absolute;bottom:4px;right:6px;font:700 15px var(--display);color:#ffe9a8;text-shadow:0 1px 0 #000}
.pass-item .store-body small b{color:var(--parchment)}.pass-item .inline-chest{width:18px;height:18px;vertical-align:-4px}
/* Sound settings (RD-150). */
.sound-card{display:grid;gap:10px}.sound-row{display:flex;align-items:center;gap:10px;color:var(--parchment)}.sound-row input[type=range]{flex:1;accent-color:var(--gold)}.sound-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--gold)}
/* Stars (RD-163): the balance is a button that explains how to earn and spend them; the Store's cosmetics shelf. */
button.stars-balance{background:none;border:0;padding:0;font:inherit;cursor:pointer}button.stars-balance:hover small{text-decoration:underline}
.app-bar .stars-balance{font-size:15px;font-family:var(--display)}
.stars-info{display:grid;gap:6px;text-align:left}.stars-info b:not(:first-child){margin-top:8px}.stars-info span{display:flex;align-items:center;gap:6px}.stars-info .ico{width:18px;height:18px;flex:none}
.cosmetic-grid{grid-template-columns:repeat(auto-fill,minmax(min(132px,40vw),1fr))}
.cosmetic-item{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;gap:8px;min-width:0}.cosmetic-item .store-art{grid-row:auto}.cosmetic-item .store-body{min-width:0}.cosmetic-item .store-buy{justify-self:auto}
.cosmetic-item .cosmetic-art{width:84px;height:84px;display:grid;place-items:center}.cosmetic-item .cosmetic-art .emote-art{width:84px;height:84px}.cosmetic-item .store-avatar{width:56px;height:62px;overflow:visible}.cosmetic-item .store-avatar canvas{border-radius:inherit;clip-path:inset(0 round 42% 42% 45% 45%)}
.cosmetic-item.owned{opacity:.7}.cosmetic-owned{display:inline-flex;align-items:center;gap:4px;color:var(--muted-warm);font-size:13px}
/* Daily cosmetics rotation (RD-164): the refresh countdown, the calendar of the days ahead, the Store tab dot and the
   Today in the Store card. */
.store-refresh{display:flex;align-items:center;gap:6px;margin:4px 0 8px;color:var(--parchment-dim,#cdbf9f);font-size:13px}.store-refresh .ico{width:16px;height:16px}
.store-calendar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,44vw),1fr));gap:8px}
.sc-day{display:grid;gap:6px;padding:8px;border:1px solid var(--panel-edge);border-radius:10px;background:var(--panel)}.sc-day>b{font-size:13px;color:var(--gold)}
.sc-items{display:flex;flex-wrap:wrap;gap:4px}.sc-item{width:40px;height:40px;display:grid;place-items:center}.sc-item .emote-art{width:40px;height:40px}.sc-item .emote-bubble{font-size:9px;padding:2px 4px;max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-item .store-avatar,.st-item .store-avatar{width:28px;height:31px;overflow:visible}
.tab{position:relative}.tab-dot{position:absolute;top:6px;right:calc(50% - 16px);width:9px;height:9px;border-radius:50%;background:#ff6b4a;box-shadow:0 0 0 2px var(--panel,#13201f)}
.store-today{cursor:pointer;display:grid;gap:8px}.store-today-row{display:flex;flex-wrap:wrap;gap:6px}.st-item{width:52px;height:52px;display:grid;place-items:center}.st-item .emote-art{width:52px;height:52px}.st-item .emote-bubble{font-size:10px;padding:2px 5px}
.store-new{margin-left:8px;padding:1px 7px;border-radius:9px;background:#ff6b4a;color:#fff;font-size:10px;letter-spacing:1px}
/* Painted frames sit outside the avatar's circle (RD-173), so the avatar no longer clips them; the portrait keeps its shape. */
.painted-frame{overflow:visible!important}.painted-frame>canvas{border-radius:inherit}
/* Level-up tokens explain themselves (RD-173): the reward chip's how-to line, the Deck banner and the Upgrade button mark. */
.cb-chip .token-use{display:block;max-width:220px;font:italic 11px/1.3 var(--sans);color:var(--parchment-dim)}
.token-banner{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:10px 14px;border:1px solid var(--gold);border-radius:12px;background:linear-gradient(90deg,#3a2c0f,#14201f)}
.token-banner>.ico{width:36px;height:36px;flex:none;margin:0}.token-banner b{color:var(--gold)}.token-banner small{display:block;color:var(--parchment-dim);font-size:12px;line-height:1.4}.token-banner small b{color:var(--parchment)}
.uu-label .uu-token{width:12px;height:12px;margin-left:2px}
/* Animated emotes (AR-16, RD-175): a strip of --frames pictures stepped at --fps; legendary ones get a gold glow in the Store. */
/* An animated frame (AR-27, RD-250): its strip steps behind a window the size of one cell. */
.frame-strip{display:block;overflow:hidden}.frame-strip>i{position:absolute;top:0;left:0;height:100%;width:calc(var(--frames)*100%);background:0 0/100% 100% no-repeat;animation:emote-strip calc(var(--frames)/var(--fps)*1s) steps(var(--frames)) infinite}
@media(prefers-reduced-motion:reduce){.frame-strip>i{animation:none}}
.emote-strip{display:inline-block;position:relative;overflow:hidden;aspect-ratio:1}.emote-strip>i{position:absolute;top:0;left:0;height:100%;width:calc(var(--frames)*100%);background:0 0/100% 100% no-repeat;animation:emote-strip calc(var(--frames)/var(--fps)*1s) steps(var(--frames)) infinite}
@keyframes emote-strip{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.emote-strip>i{animation:none}}
.cosmetic-tag{display:block;margin-top:2px;font:600 10px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--parchment-dim)}.cosmetic-tag.legendary{color:var(--gold)}
.cosmetic-item.legendary{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px color-mix(in srgb,var(--gold) 45%,transparent)}
/* A thick frame (RD-175) shrinks its avatar to 80%, so the whole framed avatar takes the same room as one with a regular frame. */
.has-frame.thick-frame{scale:.8}
/* A cosmetics gift (RD-177): the first cosmetic large in the centre, each one small in its chip. */
.gift-cosmetic .emote-art{width:120px;height:120px}.cb-chip.cb-cosmetic .emote-art{width:40px;height:40px;flex:none}
/* A painted frame replaces the avatar's own border (RD-182: it showed as a thin ring inside the frame). */
/* It also makes the avatar a circle, so a round frame isn't stretched into an oval on the taller match avatars. */
.has-frame.painted-frame{border-color:transparent!important;border-radius:50%!important;height:auto!important;aspect-ratio:1}
/* ...and drops the match avatar's diamond tip, which poked out under the frame. */
.duel-avatar.painted-frame:after{display:none}
/* Legendary emotes in a match (owner, RD-183: "1.5 the size of normal and maybe have a visible flourish"): 1.5× the size,
   on a turning golden sunburst with twinkling sparkles. */
.duel-emote.legendary .emote-art{width:168px;height:168px;position:relative;z-index:1}
@media(max-width:480px){.duel-emote.legendary .emote-art{width:138px;height:138px}}
.duel-emote.legendary::before{content:'';position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,#fff1c2ee 0 24%,#ffd36a99 40%,transparent 68%),repeating-conic-gradient(from 0deg,#ffd36a88 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 45%,transparent 70%);mask:radial-gradient(circle,#000 45%,transparent 70%);animation:legend-spin 6s linear infinite}
.duel-emote.legendary::after{content:'✦  ✧   ✦';position:absolute;z-index:2;left:0;right:0;top:-6%;text-align:center;font-size:22px;letter-spacing:18px;color:#fff3c4;text-shadow:0 0 8px #ffd36a,0 0 16px #ffb02e;animation:legend-twinkle 1.1s ease-in-out infinite alternate}
@keyframes legend-spin{to{transform:rotate(360deg)}}
@keyframes legend-twinkle{from{opacity:.35;transform:translateY(2px) scale(.9)}to{opacity:1;transform:translateY(-2px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.duel-emote.legendary::before,.duel-emote.legendary::after{animation:none}}
/* Purchase celebrations (RD-187): the bought cosmetic, large; a legendary on a turning golden sunburst. */
.cb-shield.buy-cosmetic{position:relative;width:auto;height:auto;padding:8px;background:none;border:0;box-shadow:none}
.buy-cosmetic .emote-art{width:150px;height:150px}.buy-cosmetic.legendary .emote-art{width:190px;height:190px;position:relative;z-index:1}
.buy-cosmetic .store-avatar{width:110px;height:110px}
.buy-cosmetic.legendary::before{content:'';position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,#fff1c2ee 0 24%,#ffd36a99 40%,transparent 68%),repeating-conic-gradient(from 0deg,#ffd36a88 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 45%,transparent 70%);mask:radial-gradient(circle,#000 45%,transparent 70%);animation:legend-spin 6s linear infinite}
@media(prefers-reduced-motion:reduce){.buy-cosmetic.legendary::before{animation:none}}
/* Admin hub (RD-204). */
.admin-hub .confirm-card{max-width:440px}.admin-note{color:var(--muted-warm);font-size:14px;margin:0 0 10px}
.admin-tools{display:grid;gap:6px;margin-bottom:12px}.admin-tools .more-link{text-align:left}.admin-tool{display:grid;gap:1px}.admin-tool small{color:var(--muted-warm);font-size:12px}
/* Commander title plaques (RD-211): one per tier, styled here until the AR-21 plaque art arrives (then drawn as a
   9-slice border image so any title length fits). */
.title-plaque{--edge:#8a5a2b;--face:linear-gradient(180deg,#e7a96b,#b8743c 55%,#7d4a22);--ink:#2a160a;display:inline-block;text-align:center;max-width:100%;padding:2px 12px;border:1px solid var(--edge);border-radius:4px 14px 4px 14px;background:var(--face);color:var(--ink);font:700 11px/1.3 var(--display,Georgia,serif);letter-spacing:.4px;text-shadow:0 1px 0 #fff6;box-shadow:inset 0 1px 0 #fff7,inset 0 -1px 0 #0004,0 1px 3px #0006;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.title-plaque.tier-silver{--edge:#6f7c84;--face:linear-gradient(180deg,#f4f8fa,#b9c6cd 55%,#7b8a93);--ink:#1d2428}
.title-plaque.tier-gold{--edge:#8c6420;--face:linear-gradient(180deg,#fff0c2,#f0cd7c 45%,#c9922f);--ink:#2a1d0b;box-shadow:inset 0 1px 0 #fff9,0 0 10px #f0cd7c66,0 1px 3px #0006}
.title-plaque.tier-rift{--edge:#5b3fa0;--face:linear-gradient(110deg,#2b1b52,#6d4bd1 35%,#b993ff 50%,#6d4bd1 65%,#2b1b52);--ink:#fff;text-shadow:0 0 6px #d6c2ff,0 1px 0 #0008;background-size:220% 100%;animation:plaque-rift 4s linear infinite;box-shadow:0 0 14px #9b7bff88,inset 0 1px 0 #fff5}
@keyframes plaque-rift{from{background-position:0 0}to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.title-plaque.tier-rift{animation:none}}
.title-plaque.painted{border:14px solid transparent;border-image:var(--plaque) 40 120 fill / 14px 34px stretch;background:none;box-shadow:none;border-radius:0;padding:0 2px;animation:none}
.title-plaque.big{font-size:17px;padding:6px 22px}.title-plaque.painted.big{border-width:22px;border-image-width:22px 54px}
.app-level{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}.app-level .title-plaque{flex:0 1 auto;min-width:0}.app-level>span{flex:none}
.duel-rank .duel-title{display:block;width:fit-content;margin-top:3px}/* RD-255: its own line in the match banner */
.title-plaque.mini{font-size:10px;padding:0 8px;letter-spacing:.2px}
.title-card .title-current{display:grid;justify-items:center;gap:6px;padding:10px 0 12px;text-align:center}
.title-card .title-current small,.title-option small{color:var(--parchment-dim,#bfae8a);font-size:11px;line-height:1.3}
.title-none{color:var(--parchment-dim,#bfae8a);font-style:italic;font-size:13px}
.title-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,42vw),1fr));gap:8px}
.title-option{display:grid;justify-items:center;align-content:center;gap:5px;min-height:62px;padding:8px 6px;border:1px solid var(--panel-edge);border-radius:10px;background:#0003;color:inherit;font:inherit;cursor:pointer;text-align:center;min-width:0}
.title-option.chosen{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 12px #f0cd7c44}
.title-option.locked{opacity:.55;filter:saturate(.4)}.title-option.locked .ico{width:11px;height:11px;margin-right:3px;vertical-align:-1px}
.title-locked{margin-top:10px}.title-locked summary{cursor:pointer;color:var(--gold);font-size:13px;margin-bottom:8px}
/* The season pass reward on the celebration card (RD-211). */
.cb-shield.pass-claim-art .pass-art{display:grid;place-items:center}.cb-shield.pass-claim-art .pass-art .ico,.cb-shield.pass-claim-art .emote-art,.cb-shield.pass-claim-art .chest-icon{width:96px;height:96px}
/* Collapsible cosmetics sections on the Deck tab (RD-253): a summary row showing what's equipped, and a chevron. */
.cosmetic-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;min-height:44px}
.cosmetic-fold>summary::-webkit-details-marker{display:none}
.fold-label{display:grid;gap:6px;min-width:0;justify-items:start}
.title-card .fold-label{justify-items:start}
.fold-now{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.fold-now small{color:var(--parchment-dim,#bfae8a);font-size:12px}
.fold-now .frame-preview{width:36px;height:36px}.fold-emotes .emote-preview{width:34px;height:34px;display:inline-grid;place-items:center}
.fold-emotes .emote-preview .emote-art{max-width:100%;max-height:100%}.fold-emotes .emote-bubble{font-size:10px;padding:2px 6px}
.fold-chevron{flex:none;display:grid;place-items:center;transition:transform .2s}.fold-chevron .ico{transform:rotate(90deg)}
.cosmetic-fold[open]>summary .fold-chevron{transform:rotate(180deg)}
.fold-body{display:grid;gap:10px;padding-top:10px}.fold-note{color:var(--parchment-dim,#bfae8a);font-size:12px}
@media(prefers-reduced-motion:reduce){.fold-chevron{transition:none}}
/* Mica, the practice instructor (AR-28, RD-260): her painted portrait fills the avatar circle inside her own frame. */
/* Avatar portraits (AR-29, RD-269): a painted close-up in the avatar circle, like Mica's. */
.portrait-avatar{position:relative;display:inline-grid;place-items:center;border-radius:50%;overflow:visible}
.portrait-avatar .avatar-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#1d3a40}
.profile-unit .portrait-thumb{width:64px;height:64px}.avatar-section{margin:12px 0 6px;display:block}
.tn-art .tn-avatar{width:84px;height:84px}.pass-art .pass-avatar{width:30px;height:30px}
.mica-avatar{position:relative;display:inline-grid;place-items:center;border-radius:50%;overflow:visible}
.mica-avatar .mica-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#1d3a40}