/* Website theme (owner request, RD-049): the pages around the game take on the art's look — dark ink and leather
   panels, brass edges and buttons, parchment text and serif display type, the same family as the commander banner and
   match-end screen. Loaded last. The game itself is untouched (owner instruction): nothing here styles the canvas, units,
   effects, the in-arena picker and status pills, the round intro, the commander banner or the match-end screen; button
   and panel rules skip anything inside the arena. */
:root{
 --ink-0:#0c1214;--ink-1:#121b1d;--ink-2:#182224;--ink-3:#1f2b2b;
 --brass-lo:#6c5331;--brass:#b28b50;--brass-hi:#e5c990;--gold:#f0cd7c;
 --parchment:#f3e6c8;--parchment-dim:#cdbd99;--muted-warm:#a99d82;
 --moss:#8fb06a;--sky:#86cdf7;--ember:#ec9a76;
 --display:Georgia,'Palatino Linotype','Book Antiqua',Palatino,serif;
 --panel-bg:linear-gradient(180deg,#1f2a2a,#161f20);
 --panel-edge:#5d4a30;
 --panel-shadow:inset 0 1px #e5c99014,inset 0 0 0 1px #00000040,0 8px 24px #0006;
}
/* Page: deep ink with a lantern glow from above and moss at the edges, like the arena's surroundings. */
body{background:radial-gradient(ellipse 80% 45% at 50% -8%,#3b3a2a66,transparent 70%),radial-gradient(ellipse 60% 40% at 0% 100%,#22352a55,transparent 70%),radial-gradient(ellipse 60% 40% at 100% 100%,#3a2a2255,transparent 70%),var(--ink-0);background-attachment:fixed;color:var(--parchment)}
/* Type: serif display headings in parchment; small labels in letter-spaced serif small caps instead of monospace. */
h1,h2,h3{font-family:var(--display);color:var(--parchment);letter-spacing:0}
h1{font-weight:700;letter-spacing:-1px;text-shadow:0 3px 0 #05090b}
h2{font-weight:700}
.hero-copy h1 em,.hero-copy h1 span{color:var(--gold);text-shadow:0 3px 0 #2a1d0b,0 0 28px #f0cd7c33}
.eyebrow,.build-tag,.small-label,.section-label span,.hero-details,footer,.arena-label,.preview-bottom span,.mode-card .index,.round-label{font-family:var(--display);font-variant:small-caps;letter-spacing:1.5px;color:var(--brass-hi)}
.eyebrow,.hero-copy .eyebrow{color:var(--brass-hi);font-size:12px}
.hero-copy>p,.mode-card p,.muted,.profile-note,.deck-note,.setting-help,.section-label small{color:var(--muted-warm)}
.hero-details span:before,.text-button span,.build-tag b{color:var(--gold)}
/* Header and footer: a brass rule and a brass medallion for the brand mark. */
.topbar{border-bottom:0;position:relative}
.topbar:after,footer:before{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--brass-lo) 12%,var(--brass-hi) 50%,var(--brass-lo) 88%,transparent)}
.topbar:after{bottom:0}
footer{position:relative}footer:before{top:0}
.brand{font-family:var(--display);letter-spacing:2px;color:var(--parchment)}
.brand-light{color:var(--brass-hi)}
/* The painted logo (AR-26, RD-247) replaces the text: the emblem badge and the wordmark. */
.brand{display:inline-flex;align-items:center;gap:8px}.brand-emblem{height:32px;width:auto}.brand-logo{height:36px;width:auto}
@media(max-width:480px){.brand-emblem{height:22px}.brand-logo{height:24px}}
.gate-logo{width:min(320px,78vw);height:auto;justify-self:center}@media(min-width:820px){.gate-logo{justify-self:start}}
.brand-mark{background:radial-gradient(circle at 35% 30%,#fff4cf,var(--gold) 35%,var(--brass) 70%,var(--brass-lo));color:#2a1d0b;border-radius:50%;transform:none;box-shadow:0 0 0 2px #1b2228,0 0 0 3px var(--brass),inset 0 -3px 5px #5a3e1a88,0 3px 8px #0008;font-family:var(--display)}
.brand-mark span{color:var(--gold);text-shadow:0 1px #000}
.status-dot{background:var(--gold);box-shadow:0 0 8px var(--gold)}
/* Buttons (outside the arena): brass primary, leather-and-brass secondary, quiet ink. */
:is(.primary,.secondary,.quiet):not(.arena-dock *,.draft-dock *,.result-dock *,.match-end *){font-family:var(--display);letter-spacing:.4px;border-radius:7px;transition:filter .15s,transform .1s,box-shadow .15s}
.primary:not(.arena-dock *,.draft-dock *,.result-dock *,.match-end *){background:linear-gradient(180deg,#f6dea2,#d4ad66 48%,#a87e3f);color:#2a1d0b;border:1px solid #6c5331;box-shadow:inset 0 1px #fff7dccc,inset 0 -2px #7a5a2d,0 3px 8px #0007;text-shadow:0 1px #fbe9bd88}
.primary:not(.arena-dock *,.draft-dock *,.result-dock *,.match-end *):hover:not(:disabled){filter:brightness(1.08);box-shadow:inset 0 1px #fff7dccc,inset 0 -2px #7a5a2d,0 0 0 1px #f0cd7c55,0 4px 14px #f0cd7c33}
.secondary:not(.arena-dock *,.draft-dock *,.result-dock *,.match-end *){background:linear-gradient(180deg,#2a2a22,#1c1d18);color:var(--parchment);border:1px solid var(--brass);box-shadow:inset 0 1px #e5c99022,0 2px 6px #0006}
.quiet:not(.arena-dock *,.draft-dock *,.result-dock *,.match-end *){background:linear-gradient(180deg,#222c2b,#1a2222);color:var(--parchment-dim);border:1px solid #4d4231;box-shadow:inset 0 1px #e5c99012}
:is(.primary,.secondary,.quiet):not(.arena-dock *,.draft-dock *,.result-dock *,.match-end *):active:not(:disabled){transform:translateY(1px)}
.text-button:not(.arena-dock *,.draft-dock *,.result-dock *,.match-end *){color:var(--parchment);font-family:var(--display)}
.text-button:not(.arena-dock *,.draft-dock *,.result-dock *,.match-end *):hover:not(:disabled){color:var(--gold)}
:is(button,a,input,select):focus-visible:not(.arena-dock *,.draft-dock *){outline-color:var(--gold)}
/* Panels: ink-and-leather with a brass edge and a faint top highlight. */
:is(.mode-card,.lobby-tools,.waiting,.recap,.sandbox-editor,.unit-guide,.side-panel,.editor-form fieldset,.editor-summary,.editor-history,.editor-preview,.deck-lane,.empty-note,.update-banner,.sandbox-drawer):not(.arena-dock *,.draft-dock *,.match-end *){background:var(--panel-bg);border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);color:var(--parchment)}
.mode-card.featured{background:radial-gradient(ellipse at 50% 0%,#4a3d2266,transparent 70%),var(--panel-bg);border-color:var(--brass);box-shadow:var(--panel-shadow),0 0 0 1px #e5c99030,0 0 26px #f0cd7c1a}
.mode-icon{color:var(--gold);text-shadow:0 0 12px #f0cd7c55}
.mode-card:hover{border-color:var(--brass)}
.waiting{background:radial-gradient(ellipse at top,#3a3423aa,transparent 70%),var(--panel-bg)}
.waiting .eyebrow,.room-code{color:var(--gold)}
.room-code{text-shadow:0 2px 0 #2a1d0b,0 0 22px #f0cd7c44}
.section-label{border-bottom:1px solid #5d4a3088}
/* The home preview's frame (the frame only; the battle inside is the game's own rendering). */
.arena-preview{border:2px solid var(--brass);background:#141b1c;box-shadow:0 0 0 4px #1b2228,0 0 0 5px var(--brass-lo),0 24px 60px #000a}
.arena-label,.preview-bottom{background:linear-gradient(180deg,#2a2a22,#1c1d18);border-color:var(--brass-lo)}
.arena-label .mint{color:var(--gold)}
/* Forms. */
:is(input,select):not(.arena-dock *,.draft-dock *){background:#0e1415;border:1px solid #5a4a32;color:var(--parchment);border-radius:6px}
:is(input,select):not(.arena-dock *,.draft-dock *):focus{border-color:var(--gold);box-shadow:0 0 0 2px #f0cd7c33;outline:none}
input::placeholder{color:#7f7663}
.editor-form label,.editor-form legend{color:var(--parchment-dim)}
.editor-form legend,.editor-history h3{font-family:var(--display);font-variant:small-caps;letter-spacing:1.5px;color:var(--brass-hi)}
/* Dialogs, toasts and banners: parchment notes and ink-and-brass windows. */
dialog{background:var(--panel-bg);border:2px solid var(--brass);box-shadow:0 0 0 4px #1b2228,0 0 0 5px var(--brass-lo),0 30px 80px #000c;color:var(--parchment)}
dialog li{color:var(--parchment-dim)}dialog li b{color:var(--parchment)}
dialog::backdrop{background:#05090bcc}
.close-button{color:var(--brass-hi)}
#toast{background:linear-gradient(180deg,#f7ebcf,#e6d3a8);color:#2a2116;border:1px solid var(--brass);box-shadow:0 8px 30px #000a,inset 0 1px #fff8e6;font-family:var(--display)}
/* Unit editor list and history. */
.editor-unit{background:linear-gradient(180deg,#1f2a2a,#172021);border-color:#4d4231;color:var(--parchment)}
.editor-unit small,.editor-history li small{color:var(--muted-warm)}
.editor-unit.chosen{outline-color:var(--gold);background:linear-gradient(180deg,#2e2b1f,#1d2020)}
.editor-unit.settings-entry{border-color:var(--brass);background:linear-gradient(180deg,#2c2a1f,#1c1f1d)}
.settings-icon{color:var(--gold)}
.editor-history li{background:#0f1617;border:1px solid #3d3527}
.editor-history .history-current{color:var(--gold)}
.editor-history .profile-note.warning{color:var(--ember)}
.editor-access small{color:var(--muted-warm)}
/* The serif button labels are a little wider: let the editor's button row wrap instead of widening the form. */
.unit-editor .profile-footer{flex-wrap:wrap}
/* Profile and deck screens: ink tiles with warm edges (rarity edges kept) and a gold selection. */
.profile-unit{background:linear-gradient(180deg,#1f2a2a,#151d1e);border-color:#4d4231;color:var(--parchment)}
.profile-unit small{color:var(--muted-warm)}
.profile-unit.chosen{outline-color:var(--gold);box-shadow:0 0 16px #f0cd7c40;background:linear-gradient(180deg,#2e2b1f,#1c1f1d)}
.profile-unit .select-mark,.select-mark:not(.arena-dock *,.draft-dock *){background:linear-gradient(180deg,#f6dea2,#c9a15a);color:#2a1d0b}
.profile-heading small{font-family:var(--display);color:var(--gold)}
.profile-footer{background:linear-gradient(transparent,var(--ink-0) 30%);color:var(--parchment-dim)}
.profile-chip b{font-family:var(--display);color:var(--parchment)}
.roster-chip{color:var(--muted-warm)}
.deck-status{border-top-color:#5d4a3088;color:var(--muted-warm)}.deck-status b{color:var(--gold)}
/* Pre-match deck draft window (not the arena): ink window, brass edge, gold selection; your lane cool, the rival's warm. */
.in-game .deck-screen{background:var(--panel-bg);border:2px solid var(--brass);box-shadow:0 0 0 3px #1b2228,0 0 0 4px var(--brass-lo),0 18px 50px #000a}
.in-game .deck-footer{background:#161f20f5;border-top-color:var(--brass-lo)}
.deck-draft-status{font-family:var(--display);color:var(--parchment);background:linear-gradient(180deg,#2a2a22,#1c1d18);border-color:var(--brass-lo)}
.deck-draft-status.revealing{border-color:var(--gold);background:linear-gradient(180deg,#3a3423,#22211b)}
.deck-draft-status .timer{color:var(--gold)}
.deck-offer.chosen .art-tile{outline-color:var(--gold);box-shadow:0 0 18px #f0cd7c55}
.deck-lane{background:linear-gradient(180deg,#1a2628,#141c1e);border-color:#3e5a63}
.deck-lane.rival{background:linear-gradient(180deg,#2a2224,#1c1819);border-color:#6b4038}
.lane-label{font-family:var(--display);font-variant:small-caps;letter-spacing:1.5px;color:var(--sky)}
.deck-chip{background:#0f1617}
.deck-chip.empty{color:#6c6250;border-color:#4d4231}
.deck-wait{color:var(--muted-warm)}
/* Changelog links (RD-067): the version tag in the header and "What's new" in the footer open /changelog.html. */
a.build-tag,.footer-link{text-decoration:none;color:var(--brass-hi)}a.build-tag:hover,.footer-link:hover{color:var(--gold);text-decoration:underline}
/* Flock cards (RD-069): "Deploys ×4" beside the name of a card that deploys several units (Goslings). */
/* Progression (RD-072): Commander level, XP bars, Gears and unit XP on the home record, profile and match end. */
.record-progress:empty{display:none}
.progress-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px}
.level-badge{font-family:var(--display);color:#2a1d0b;background:linear-gradient(180deg,#f6dea2,#c99a52);border:1px solid var(--brass-lo);border-radius:999px;padding:1px 9px;font-size:13px}
.xp-bar{display:inline-block;position:relative;width:120px;max-width:40vw;height:7px;border-radius:999px;background:var(--ink-3);border:1px solid var(--panel-edge);overflow:hidden;vertical-align:middle}
.xp-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--brass),var(--gold));border-radius:inherit}
.gears{font-family:var(--display);color:var(--gold);white-space:nowrap}.gears small{color:var(--muted-warm)}
.first-win{color:var(--muted-warm)}.first-win.done{color:var(--moss)}
.me-rewards{text-align:left;margin:14px 0;padding:12px 14px;border:1px solid var(--panel-edge);border-radius:10px;background:var(--panel-bg);box-shadow:var(--panel-shadow)}
.me-reward-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.me-reward-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.me-reward{display:flex;flex-direction:column;gap:3px;min-width:0}.me-reward b{font-family:var(--display);font-size:26px;color:var(--gold)}
.me-level{display:flex;align-items:center;gap:8px;color:var(--parchment-dim);font-size:13px}
.level-up{font-style:normal;font-family:var(--display);color:var(--gold);text-shadow:0 0 10px #f0cd7c66}
.unit-xp{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.unit-xp li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 10px;font-size:13px}
.unit-xp li>small{grid-column:1/-1;color:var(--muted-warm)}
.unit-xp-name{color:var(--parchment)}.unit-xp-name small{color:var(--muted-warm)}.unit-xp li>b{color:var(--moss)}
.profile-progress{display:grid;gap:8px}
/* Ranks in play (RD-073): silver trim at Rank II, gold at Rank III on cards and deck tiles; rank labels; rank rule. */
.rank-2:is(.roster-card,.deck-chip,.profile-unit){box-shadow:0 0 0 2px #cfd6e0,0 0 12px #cfd6e055}
.rank-3:is(.roster-card,.deck-chip,.profile-unit){box-shadow:0 0 0 2px var(--gold),0 0 16px #f0cd7c77}
.tile-rank{display:block;font-style:normal;font-family:var(--display);font-size:11px;color:var(--gold)}
.chip-rank{color:var(--gold)}
.rank-ready{color:var(--gold);font-family:var(--display)}
.rank-up{padding:3px 10px;font-size:12px}
.rank-rule-field{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0}
.rank-rule-field small{color:var(--muted-warm);flex-basis:100%}
/* Engagement (RD-074): quests, reward track, titles, mastery stars, locked deck tiles, prizes on the end screen. */
.quest-line{color:var(--parchment-dim)}
.profile-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:6px 0}
.quest-list,.track-list,.me-prizes,.me-quests{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--parchment-dim)}
.quest-list li.done,.me-quests li.done{color:var(--moss)}
.track-list b,.me-prizes b{color:var(--gold);font-family:var(--display)}
.prize-unlock{color:var(--sky)}
.me-prizes,.me-quests{margin-top:10px}
.title-field{display:flex;flex-direction:column;gap:4px}
.duel-title{font-style:normal}
.stars{color:var(--gold);letter-spacing:1px}
.rank-up-buttons{display:inline-flex;gap:6px}
.profile-unit.locked{opacity:.55;filter:grayscale(.6)}
.tile-lock{display:block;font-style:normal;font-size:11px;color:var(--muted-warm)}
/* Release readiness (RD-075): recovery code, limited-reward note, owner economy summary. */
.recovery{display:grid;gap:8px}
.recovery-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.recovery-row input{flex:1 1 220px;min-width:0;font-family:ui-monospace,monospace}
.recovery-row small{flex-basis:100%;color:var(--muted-warm)}
#recovery-code{font-family:ui-monospace,monospace;color:var(--gold);word-break:break-all;background:var(--ink-2);border:1px solid var(--panel-edge);border-radius:6px;padding:4px 8px}
.me-limited{margin:0 0 8px;color:var(--ember);font-size:13px}
.economy-summary{margin:8px 0 12px;padding:10px 12px;border:1px solid var(--panel-edge);border-radius:8px;font-size:13px}
.economy-summary p{margin:4px 0}
/* ---- Mobile app shell (owner request, RD-077) ----
   Outside matches the game is one full-screen app: commander bar, one tab's view (scrolling inside), bottom tab bar.
   On wide screens the shell stays a phone-width column. App-like touch behaviour: no text selection or double-tap zoom on
   controls, no tap flash, no page bounce. */
body.app-home{height:100dvh;overflow:hidden;overscroll-behavior:none}
body.app-home>.topbar,body.app-home>footer{display:none}
body.app-home main{height:100dvh;padding:0;max-width:none}
body.app-home,body.in-game{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.app-home :is(input,textarea,code),body.in-game :is(input,textarea){-webkit-user-select:text;user-select:text}
button,select,a,input,summary{touch-action:manipulation}
.app-shell{height:100dvh;max-width:560px;margin:0 auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--ink-0);border-inline:1px solid #ffffff08}
.app-bar{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));border-bottom:1px solid var(--panel-edge)}
.app-avatar{width:42px;height:42px;flex:none;border-radius:50%;border:2px solid var(--brass);overflow:hidden}
.app-id{flex:1;min-width:0;display:grid;gap:2px}
.app-id b{font-family:var(--display);font-size:16px;color:var(--parchment);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-id small{font-size:11px;color:var(--brass-hi);font-family:var(--display)}
.app-id .xp-bar{width:100%;max-width:none;height:5px}
.app-bar .gears{font-size:15px}
.app-view{overflow-y:auto;overscroll-behavior:contain;padding:12px 14px 18px;scrollbar-width:thin}
.tab-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;background:linear-gradient(180deg,var(--ink-1),var(--ink-0));border-top:1px solid var(--panel-edge);padding-bottom:env(safe-area-inset-bottom,0px)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;background:none;border:0;color:var(--muted-warm);font:600 11px/1 var(--display);letter-spacing:.6px;cursor:pointer}
.tab span{font-size:21px;line-height:1}
.tab.active{color:var(--gold);text-shadow:0 0 12px #f0cd7c55}
.app-card{display:block;margin:12px 0 0;padding:12px;border:1px solid var(--panel-edge);border-radius:12px;background:var(--panel-bg);box-shadow:var(--panel-shadow)}
.app-field{display:grid;gap:5px;margin-top:12px}
.app-field small{color:var(--muted-warm);font-size:12px}
.app-field select,.app-field input,.join-form input,.recovery-row input{min-height:44px;font-size:16px}
.section-gap{display:block;margin:16px 0 6px}
/* Play */
.arena-card{height:min(34vh,300px);border-radius:14px;overflow:hidden;border:1px solid var(--panel-edge);background:#0b1213}
.arena-card canvas{display:block;width:100%;height:100%}
.play-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mode-button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:76px;padding:12px 14px;text-align:left}
.mode-button b{font-size:19px;line-height:1.1}
.mode-button small{font-size:12px;opacity:.8}
.today-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;font-size:14px;color:var(--parchment-dim)}
.today-list li.done{color:var(--moss)}
.app-link{margin-top:10px;width:100%;min-height:42px}
.friend-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.friend-buttons button{min-height:46px}
.play-view .join-form{display:flex;gap:8px;margin-top:12px}
.play-view .join-form input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:2px}
/* Deck */
.lineup-head{display:grid;gap:3px}
.lineup-head small{color:var(--muted-warm);font-size:12px}
.lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
.lineup-slot{padding:0;border:0;background:none;min-width:0;cursor:pointer}
.lineup-slot .deck-chip{position:relative;grid-template-rows:58px auto;padding:3px 2px 5px}
.lineup-slot .deck-chip canvas{height:58px}
.lineup-slot .deck-chip small{display:none}
.lineup-slot.empty{display:grid;place-items:center;min-height:84px;border:1px dashed var(--panel-edge);border-radius:8px;color:var(--muted-warm);font:700 20px var(--display)}
.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.collection-grid .profile-unit canvas{height:84px}
@media (min-width:480px){.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* More */
.more-view .avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.more-view details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:32px;color:var(--parchment)}
.more-view details summary::-webkit-details-marker{display:none}
.more-links{display:grid;padding:4px 12px}
.more-link{display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:0;background:none;border:0;border-bottom:1px solid #ffffff10;color:var(--parchment);font:16px var(--display);text-align:left;text-decoration:none;cursor:pointer}
.more-link:last-child{border-bottom:0}
.more-link span{color:var(--brass-hi);font-size:20px}
.more-foot{margin:16px 0 0;text-align:center;font-size:11px;color:var(--muted-warm)}
.level-card{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.level-card .xp-bar{flex:1 1 140px;max-width:none}
.record-line{margin:6px 0 2px;color:var(--parchment-dim)}.record-line b{font-family:var(--display);font-size:22px;color:var(--gold)}
/* Rank badge (RD-077): chevrons = rank; bronze I, silver II, gold III. Over the portrait on tiles and chips, inline in
   card headers and lists. */
.rank-badge{display:inline-grid;place-items:center;padding:3px 4px;border-radius:7px;background:#0b1114d9;border:1px solid currentColor;box-shadow:0 1px 4px #000a;line-height:0}
.rank-badge svg{width:15px;height:auto;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.rank-badge-1{color:#c9925a}.rank-badge-2{color:#dfe5ee}.rank-badge-3{color:var(--gold);box-shadow:0 0 8px #f0cd7c66,0 1px 4px #000a}
:is(.profile-unit,.deck-chip)>.rank-badge{position:absolute;top:5px;right:5px;z-index:1}
.rank-badge.inline{position:static;vertical-align:middle;margin-right:6px;padding:2px 3px}
.rank-badge.inline svg{width:12px}
/* Painted insignia (AR-02): the picture carries the frame. */
.rank-badge.painted{padding:0;background:none;border:0;box-shadow:none}.rank-badge.painted img{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 1px 2px #000c)}
.rank-badge.painted.inline img{width:18px;height:18px}
.deck-chip{position:relative}
.unit-xp-name{display:flex;align-items:center;min-width:0}
/* ---- Icons and the reward track (owner request, RD-078) ----
   Brass-and-steel icons (public/icons.mjs) beside or instead of text; a scrolling track of level medallions whose prizes
   are pictures (Gears, the unlocked unit's portrait, a title banner, a token). */
.ico{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.3em;flex:none;overflow:visible;filter:drop-shadow(0 1px 0 #000a)}
img.ico{object-fit:contain}
.ico.big{width:38px;height:38px}
.small-label .ico{width:15px;height:15px;vertical-align:-3px;margin-right:2px}
.tab-ico{width:27px;height:27px}
.tab:not(.active) .ico{filter:saturate(.25) brightness(.7) drop-shadow(0 1px 0 #000a)}
.tab.active .ico{filter:drop-shadow(0 0 6px #f0cd7c88) drop-shadow(0 1px 0 #000a)}
.gears .ico{width:1.25em;height:1.25em}
.mode-button{flex-direction:row;align-items:center;gap:10px}
.mode-button>span{display:grid;gap:2px}
button .ico{margin-right:4px}
button .ico:last-child:not(:first-child){margin:0 0 0 4px}
.select-mark .ico{width:14px;height:14px;filter:none}
.tile-lock .ico{width:14px;height:14px;vertical-align:-2px}
.icon-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.icon-row>.ico{width:22px;height:22px}
.icon-row small{white-space:nowrap}
.icon-row small .ico{width:14px;height:14px;vertical-align:-2px}
.quest-list.me-quests{margin-top:10px}
.unit-thumb{display:inline-block;width:34px;height:34px;flex:none;border-radius:8px;overflow:hidden;background:#0c1214;border:1px solid var(--panel-edge)}
.unit-thumb canvas{display:block;width:100%;height:100%}
.unit-xp li{grid-template-columns:auto minmax(0,1fr) auto auto}
.stars{display:inline-flex;gap:1px}.stars .ico{width:15px;height:15px}.stars .ico.off{filter:grayscale(1) brightness(.45)}
.rank-up .ico{width:16px;height:16px;margin:0 2px 0 0;vertical-align:-3px}
.level-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.level-shield{position:relative;display:grid;place-items:center;width:58px;height:58px}
.level-shield .ico{position:absolute;inset:0;width:100%;height:100%}
.level-shield b{position:relative;font:700 20px var(--display);color:#1b130a;text-shadow:0 1px 0 #ffffff66;margin-top:-2px}
.level-info{display:grid;gap:4px;min-width:0}.level-info>b{font-family:var(--display);color:var(--parchment)}
.level-info .xp-bar{width:100%;max-width:none}
.level-wallet{display:grid;gap:4px;justify-items:end}
/* Reward track: medallions joined by a brass rail. */
.track{list-style:none;margin:8px -12px 0;padding:6px 12px 4px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track-node{position:relative;flex:0 0 92px;display:grid;align-content:start;justify-items:center;gap:6px;padding:8px 6px 10px;border:1px solid var(--panel-edge);border-radius:12px;background:linear-gradient(180deg,#1f2a2a,#141c1d);scroll-snap-align:center;text-align:center}
.track-node::before{content:'';position:absolute;top:24px;left:-11px;width:11px;height:3px;background:linear-gradient(90deg,#6c5331,#b28b50)}
.track-node:first-child::before{display:none}
.track-medal{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4cf,#d4ad66 45%,#8a5f28);border:1.5px solid #2b1a0c;box-shadow:0 2px 4px #0009;color:#1b130a;font:700 15px var(--display)}
.track-medal .ico{width:20px;height:20px;filter:none}
/* Painted medallion (AR-05) behind the level or tick. */
.track-medal.painted{position:relative;background:none;border:0;box-shadow:none}.track-medal .medal-art{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);object-fit:contain}
.track-medal.painted>:not(.medal-art){position:relative}
.track-node.claimed .track-medal.painted{background:none}
.track-prizes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;min-height:40px}
.prize{position:relative;display:inline-flex;align-items:center;gap:2px}
.prize .ico{width:24px;height:24px}
.prize-gears b{font:700 12px var(--display);color:var(--gold)}
.prize-unit .unit-thumb{width:40px;height:40px;border-color:var(--brass)}
.prize-unit .ico.corner{position:absolute;right:-5px;bottom:-4px;width:17px;height:17px}
.track-node small{font-size:10px;line-height:1.2;color:var(--parchment-dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-node small .ico{width:12px;height:12px;vertical-align:-2px}
.track-node .xp-bar{width:100%;height:5px}
.track-node.claimed{opacity:.55}.track-node.claimed .track-medal{background:radial-gradient(circle at 35% 30%,#e9ffd8,#9fcf7a 45%,#4f7a34)}
.track-node.next{border-color:var(--gold);box-shadow:0 0 0 1px #f0cd7c55,0 0 16px #f0cd7c33}
.track-node.won{border-color:var(--gold)}
.next-reward{cursor:pointer}.next-reward-row{display:flex;margin-top:8px}.next-reward-row .track-node{flex:1 1 auto;grid-template-columns:auto 1fr;justify-items:start;text-align:left}
.next-reward-row .track-node::before{display:none}
.next-reward-row .track-medal{grid-row:span 3}
.me-track{margin:10px 0 0;padding:4px 0}
.more-link{display:grid;grid-template-columns:auto 1fr auto;gap:10px}
.more-link>.ico{width:24px;height:24px}
.more-link .chevron{width:16px;height:16px}
.avatar-current{display:inline-flex;align-items:center;gap:8px}.app-avatar.small{width:32px;height:32px}
.more-foot .ico{width:14px;height:14px;vertical-align:-2px}
.record-line .ico{width:16px;height:16px;vertical-align:-3px}
#copy-recovery .ico{width:20px;height:20px}
/* Unit XP rows (RD-078 layout): portrait | name over bar | action or numbers. */
.unit-xp li{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"thumb name act" "thumb bar note";gap:3px 10px}
.unit-xp li>.unit-thumb{grid-area:thumb;align-self:center}
.unit-xp li>.unit-xp-name{grid-area:name;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.unit-xp li>.xp-bar{grid-area:bar;width:100%;max-width:none;align-self:center}
.unit-xp li>b{grid-area:act;justify-self:end}
.unit-xp li>small{grid-area:note;grid-column:auto;justify-self:end}
.unit-xp li>.rank-up-buttons{grid-area:act;grid-row:1/3;align-self:center}
.unit-xp li>.stars{grid-area:act;grid-row:1/3;align-self:center}
.more-links .more-link{padding:0 4px;margin:0;box-sizing:border-box;width:100%}
/* Accounts (RD-079): the More tab's account card. */
.account-card{display:grid;gap:10px}
/* Locked unit avatars (RD-262): dimmed, with the level that unlocks them. */
.avatar-grid .profile-unit{position:relative}.avatar-grid .profile-unit.locked canvas{filter:grayscale(.85) brightness(.6)}
.avatar-lock{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:999px;background:#0b1316d9;border:1px solid var(--panel-edge);color:var(--parchment);font:600 10px/16px var(--display);font-style:normal}.avatar-lock .ico{width:11px;height:11px;margin:0}
/* Sign-in screen (RD-241): signed out, outside the first tutorial, this is the whole page. */
.signin-gate{height:100dvh;overflow-y:auto;display:grid;justify-items:center;align-content:safe center;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));background:radial-gradient(circle at 50% 30%,#1c2a2c 0,#0c1214 65%)}
/* RD-242: the skirmish and features beside the form on wide screens; stacked on phones (head, skirmish, form, features). */
.gate-layout{width:min(980px,100%);display:grid;gap:14px;grid-template-areas:'head' 'arena' 'form' 'features'}
.gate-head{grid-area:head;display:grid;gap:6px;text-align:center}.gate-arena{grid-area:arena;position:relative;height:min(30vh,260px)}.gate-form{grid-area:form;min-width:0}.gate-form .account-card{margin:0}
.gate-features{grid-area:features;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gate-features li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;color:var(--muted-warm);line-height:1.4}.gate-features .ico{width:26px;height:26px;margin-top:2px}.gate-features b{display:block;color:var(--parchment);font:600 15px var(--display)}
@media(min-width:820px){.gate-layout{grid-template-columns:1.25fr 1fr;grid-template-areas:'head form' 'arena form' 'features form';align-items:start;column-gap:28px}.gate-head{text-align:left}.gate-arena{height:300px}}
.gate-head h1{margin:8px 0 0;font:700 clamp(22px,6vw,28px) var(--display);color:var(--parchment);text-wrap:balance}
.gate-note{margin:0;color:var(--muted-warm);line-height:1.45;text-wrap:balance}
.auth-switch{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--panel-edge);border-radius:10px;overflow:hidden}
.auth-switch button{min-height:40px;background:none;border:0;color:var(--muted-warm);font:600 14px var(--display);cursor:pointer}
.auth-switch button.active{background:linear-gradient(180deg,#f6dea2,#c99a52);color:#1b130a}
.auth-form{display:grid;gap:8px}
.auth-form input{min-height:46px;font-size:16px;padding:0 12px;border-radius:9px;border:1px solid var(--panel-edge);background:var(--ink-0);color:var(--parchment)}
.auth-form button{min-height:46px}
.auth-alt{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;text-decoration:none}
.account-name{display:flex;align-items:center;gap:8px;margin:0;color:var(--parchment)}.account-name b{color:var(--gold)}
.account-methods{list-style:none;margin:0;padding:0;display:grid}
.account-methods li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid #ffffff10}
.account-methods li:last-child{border-bottom:0}
.account-methods small{color:var(--muted-warm)}.account-methods .linked{color:var(--moss)}
.auth-signout{min-height:44px}
.auth-form[hidden]{display:none}
/* ---- Unit levels (owner request, RD-086) ----
   A unit's lasting level is a small brass plate; ranks stay as chevrons for in-match upgrades. Collection tiles carry an
   Upgrade strip (progress to the next level) that opens the upgrade view; a draft offer that upgrades a unit wears a gold
   ribbon. */
.unit-level{display:inline-grid;grid-auto-flow:column;align-items:baseline;gap:1px;padding:1px 6px 2px;border-radius:6px;border:1px solid #2b1a0c;background:linear-gradient(180deg,#f6dea2,#d4ad66 55%,#a87e3f);color:#2a1d0b;font:700 13px/1.1 var(--display);box-shadow:0 1px 3px #000a,inset 0 1px #fff7dc99;white-space:nowrap}
.unit-level small{font-size:8px;letter-spacing:.5px;margin-right:1px}
.unit-level.max{background:linear-gradient(180deg,#fff3c4,#f0cd7c 50%,#c9922f);box-shadow:0 0 8px #f0cd7c88,0 1px 3px #000a}
.unit-level.inline{margin-right:6px;font-size:11px;padding:0 5px 1px;vertical-align:middle}
.unit-level.big{font-size:22px;padding:3px 10px 4px;border-radius:9px}.unit-level.big small{font-size:11px}
:is(.profile-unit,.deck-chip)>.unit-level{position:absolute;top:5px;right:5px;z-index:1}
.unit-cell{position:relative;display:grid;grid-template-rows:1fr auto;min-width:0}
.unit-cell .profile-unit{border-bottom-left-radius:0;border-bottom-right-radius:0}
.unit-upgrade{display:grid;gap:3px;padding:4px 6px 5px;border:1px solid #33504d;border-top:0;border-radius:0 0 9px 9px;background:#0f1d20;color:var(--parchment-dim);font:600 11px var(--display);cursor:pointer}
.unit-upgrade:hover{filter:brightness(1.15)}
.uu-bar{display:block;height:4px;border-radius:3px;background:var(--ink-3);overflow:hidden}.uu-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--gold))}
.uu-label{display:flex;align-items:center;justify-content:center;gap:3px}.uu-label .ico{width:13px;height:13px;margin:0}
.unit-cell.ready .unit-upgrade{border-color:var(--gold);background:linear-gradient(180deg,#3a3018,#1f1a0e);color:var(--gold);animation:upgrade-glow 2s ease-in-out infinite}
.rank-up.ready{border-color:var(--gold);color:var(--gold);animation:upgrade-glow 2s ease-in-out infinite}
@keyframes upgrade-glow{0%,100%{box-shadow:0 0 0 #f0cd7c00}50%{box-shadow:0 0 12px #f0cd7c66}}
/* The upgrade view. */
.unit-sheet{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;background:#05090bd9;animation:cb-in .25s both}
.us-card{position:relative;width:min(460px,100%);max-height:100%;overflow:auto;display:grid;gap:10px;padding:14px 18px 18px;border:2px solid var(--brass);border-radius:18px;background:var(--panel-bg);box-shadow:0 0 0 4px #1b2228,0 0 0 5px var(--brass-lo),0 30px 80px #000c;--glow:#e8dcc0;animation:cb-card .45s cubic-bezier(.2,1.3,.4,1) both}
.us-card.rarity-rare{--glow:#7cc4ff}.us-card.rarity-epic{--glow:#c49cff}.us-card.rarity-legendary{--glow:#ffd36a}
.us-close{position:absolute;top:8px;right:10px;z-index:2;font-size:18px;background:none;border:0;color:var(--parchment-dim);cursor:pointer}
.us-stage{position:relative;height:min(36vh,260px);display:grid;place-items:end center;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse 70% 70% at 50% 65%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%)}
.us-stage canvas{position:relative;width:100%;height:100%;filter:drop-shadow(0 8px 8px #000a)}
.us-stage .unit-level{position:absolute;left:10px;bottom:10px}
.us-head{display:grid;gap:2px;text-align:center}.us-head h2{margin:0;font-size:26px}.us-head small{color:var(--muted-warm)}
.us-progress{display:grid;gap:5px}.us-progress .xp-bar{width:100%;max-width:none;height:10px}.us-progress small{color:var(--muted-warm);font-size:12px}
.us-progress.max{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gold);font-family:var(--display)}
.us-levels{display:flex;justify-content:space-between;align-items:center;font:700 14px var(--display);color:var(--parchment)}.us-levels .ico{width:16px;height:16px}
.us-changes{list-style:none;margin:0;padding:8px 10px;display:grid;gap:4px;border:1px solid var(--panel-edge);border-radius:10px;background:#0c1214aa}
.us-changes li{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:6px;font-size:13px;color:var(--parchment-dim)}
.us-changes b{font:700 15px var(--display);color:var(--parchment);font-variant-numeric:tabular-nums}.us-changes b.up{color:var(--moss)}.us-changes .ico{width:13px;height:13px}
.us-why{margin:0;font-size:12px;color:var(--ember);text-align:center}
.us-actions{display:grid;gap:8px}.us-actions button{min-height:46px}
.us-note{margin:0;font-size:11px;color:var(--muted-warm);text-align:center}
.cb-badge.cb-level{width:auto;height:auto;right:-6px}
/* An Upgrade offer in the draft. */
.pick-tile.upgrade-tile{border-color:#f0cd7c!important;box-shadow:0 0 0 1px #f0cd7c88,0 0 18px #f0cd7c55}
.pick-tile{position:relative}
@media(prefers-reduced-motion:reduce){.unit-cell.ready .unit-upgrade,.rank-up.ready,.unit-sheet,.us-card{animation:none}}
/* ---- Matchmaking (owner request, RD-089) ----
   The search screen: you and the unknown opponent either side of a brass ring that fills over the 10 s before the
   practice bot steps in; it flashes gold when a match is found. */
.find-note{display:flex;align-items:center;gap:6px;margin:8px 2px 0;font-size:12px;color:var(--muted-warm)}.find-note .ico{width:16px;height:16px;margin:0}
.practice-row{margin-top:14px}.practice-row .friend-buttons{margin-top:6px}
.match-search{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:16px;background:#05090bdd;animation:cb-in .25s both;--p:0}
.ms-card{width:min(420px,100%);display:grid;justify-items:center;gap:12px;padding:20px 20px 18px;text-align:center;border:2px solid var(--brass);border-radius:18px;background:var(--panel-bg);box-shadow:0 0 0 4px #1b2228,0 0 0 5px var(--brass-lo),0 30px 80px #000c;animation:cb-card .45s cubic-bezier(.2,1.3,.4,1) both}
.ms-card h2{margin:0;font-size:24px}.ms-note{margin:0;font-size:13px;color:var(--muted-warm);max-width:32ch}
.ms-card .secondary{min-width:160px;min-height:44px}
.ms-versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:100%}
.ms-me,.ms-them{display:grid;justify-items:center;gap:6px;min-width:0}.ms-me b,.ms-them b{font:600 13px var(--display);color:var(--parchment);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-avatar{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid var(--brass);overflow:hidden;background:#0c1214}
.ms-avatar canvas{position:absolute;inset:0;width:100%;height:100%}
.ms-unknown{font:700 28px var(--display);color:var(--muted-warm);animation:ms-pulse 1.4s ease-in-out infinite}
.ms-ring{position:relative;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*360deg),#ffffff14 0)}
.ms-ring i{position:absolute;inset:6px;border-radius:50%;background:var(--ink-1)}
.ms-ring b{position:relative;font:700 24px var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.ms-landed{animation:ms-land .45s cubic-bezier(.2,1.6,.4,1)}@keyframes ms-land{0%{transform:scale(.7)}100%{transform:scale(1)}}
.match-search.found .ms-ring{background:var(--gold);box-shadow:0 0 24px #f0cd7c88}.match-search.found .ms-unknown{animation:none;color:var(--gold)}
@keyframes ms-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.match-search,.ms-card,.ms-unknown,.ms-landed{animation:none}}
/* Email on accounts (RD-092). */
.account-email{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--parchment-dim)}
.account-methods .account-note small{color:var(--ember)}
.auth-forgot{display:block;margin:6px auto 0;font-size:13px}
.auth-privacy{margin:10px 0 0;text-align:center;font-size:12px;color:var(--muted-warm)}
.auth-privacy a{color:var(--brass-hi)}
.reset-card{gap:12px}.reset-card h2{margin:0}.reset-card input{min-height:44px;font-size:16px}
.account-actions{display:inline-flex;align-items:center;gap:10px;justify-self:end}
/* Free upgrades read at a glance (owner request, RD-117): the whole tile pulses gold, a FREE ribbon sits on the portrait,
   the Upgrade button gets a light sweep and a bouncing arrow, and the Deck tab shows how many are waiting. */
/* Upgrade ready (owner request, RD-166: no text, make those cards glow): a pulsing golden aura round the card and a shine
   sweeping across the portrait; a steady glow with reduced motion. */
.unit-cell.ready{position:relative;border-radius:12px;animation:free-ring 1.6s ease-in-out infinite}
.unit-cell.ready .profile-unit{box-shadow:inset 0 0 0 2px #ffd36acc,inset 0 0 24px #ffcf5a40}
.unit-cell.ready .profile-unit::after{content:'';position:absolute;inset:-20%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 38%,#fff3c066 48%,#ffffffaa 50%,#fff3c066 52%,transparent 62%);transform:translateX(-110%);animation:ready-shine 3.2s ease-in-out infinite}
@keyframes ready-shine{0%,55%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){.unit-cell.ready{animation:none;box-shadow:0 0 0 2px var(--gold),0 0 22px #ffd36aaa}.unit-cell.ready .profile-unit::after{display:none}}
.unit-cell.ready .profile-unit{position:relative;overflow:hidden}

.unit-cell.ready .unit-upgrade{position:relative;overflow:hidden;font-weight:700}
.unit-cell.ready .unit-upgrade::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#fff6 50%,transparent 70%);transform:translateX(-120%);animation:free-sweep 2.2s ease-in-out infinite}
.unit-cell.ready .uu-label .ico{animation:free-bounce 1s ease-in-out infinite}
.tab{position:relative}
.tab-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;
 font:700 11px/1 var(--display);color:#2a1d0b;background:var(--gold);box-shadow:0 0 0 2px #0b1214,0 0 10px var(--gold);animation:free-pop .4s cubic-bezier(.2,1.6,.4,1) both}
@keyframes free-ring{0%,100%{box-shadow:0 0 0 2px #e8c27acc,0 0 14px #ffd36a77,0 0 28px #ffb84a33}50%{box-shadow:0 0 0 3px #ffe08a,0 0 26px #ffd36add,0 0 52px #ffb84a88}}
@keyframes free-sweep{0%,40%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@keyframes free-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes free-pop{from{transform:scale(0)}}
@media(prefers-reduced-motion:reduce){.unit-cell.ready,.unit-cell.ready .unit-upgrade::after,.unit-cell.ready .uu-label .ico,.tab-badge{animation:none}.unit-cell.ready{box-shadow:0 0 0 2px var(--gold)}}