@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;700;800;900&display=swap');
/* =====================================================================
   War Rumble UI system (docs/ui-style-guide.md, section 0a is binding).
   Modern, clean mobile-game UI with the Warcraft Rumble feel: smooth
   gradients, slate-navy panels with a thin gold trim, crisp bevels and
   highlights, soft shadows, bright glossy buttons with a short lip.
   No noise, grunge or stone textures. Small SVG ornaments come from
   ui-system-art.css (generated by ui-system-art.cjs).
   Loaded LAST so the theme layer (part 3) can recolour existing screens
   without renaming ids/classes, and WITHOUT changing their geometry
   (sizes, borders widths, paddings, positions stay as the screens set them).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
 --wr-ink:#10142a;--wr-ink-2:#171b30;--wr-outline:#10142a;
 --wr-slate-hi:#3d4870;--wr-slate:#2b3350;--wr-slate-lo:#1d2338;--wr-slate-deep:#151a2c;
 --wr-wood-hi:#b07a45;--wr-wood:#8a5a30;--wr-wood-lo:#5c3818;
 --wr-text:#f6f3ec;--wr-text-dim:#c4cadb;--wr-muted:#8f97ae;--wr-parch-ink:#3a2a18;
 --wr-gold:#ffcf4d;--wr-gold-hi:#ffeaa6;--wr-gold-lo:#c8861c;--wr-gold-deep:#6b4508;
 --wr-cyan:#6fe6ff;--wr-purple-hi:#b98af0;--wr-purple:#7a48c8;--wr-purple-lo:#3f2178;
 /* Button roles: bright, tasteful; -lo is the lip. */
 --wr-emerald-hi:#7ee04f;--wr-emerald:#3fae2a;--wr-emerald-lo:#23731a;
 --wr-sapphire-hi:#5fb0ff;--wr-sapphire:#2f78e0;--wr-sapphire-lo:#1a4a9c;
 --wr-amber-hi:#ffdc5c;--wr-amber:#f3a51e;--wr-amber-lo:#a8640c;
 --wr-garnet-hi:#ff7563;--wr-garnet:#e03a2c;--wr-garnet-lo:#8e1d14;
 --wr-pewter-hi:#8d94aa;--wr-pewter:#5f667e;--wr-pewter-lo:#3a3f52;
 /* Trims. */
 --wr-brass:linear-gradient(180deg,#ffeaa6 0,#e8b445 50%,#b07a1c 100%);
 --wr-iron:linear-gradient(180deg,#56618a 0,#343d5e 100%);
 --wr-goldleaf:linear-gradient(180deg,#fff6d2 0%,#ffd75a 48%,#f2a92a 100%);
 --wr-font-display:'Rubik','Segoe UI',system-ui,sans-serif;
 --wr-font-deco:var(--wr-font-display);
 --wr-font-body:'Rubik','Inter','Segoe UI',system-ui,sans-serif;
 /* Fine dark outline + soft shadow for display text. */
 --wr-text-shadow:0 1px 0 #10142a,1px 0 0 #10142acc,-1px 0 0 #10142acc,0 -1px 0 #10142a99,0 2px 4px #0008;
 --wr-text-emboss:0 1px 0 #3a2306,1px 0 0 #3a2306cc,-1px 0 0 #3a2306cc,0 -1px 0 #3a230699,0 2px 4px #0009;
 /* Panel recipe. */
 --wr-panel:linear-gradient(180deg,#323b5c 0,#2b3350 24%,#1d2338 100%);
 --wr-panel-gloss:linear-gradient(180deg,#ffffff14 0,#fff0 90px);
 --wr-brackets:var(--wr-bracket-tl) 5px 5px/18px 18px no-repeat padding-box,var(--wr-bracket-tr) right 5px top 5px/18px 18px no-repeat padding-box,var(--wr-bracket-br) right 5px bottom 5px/18px 18px no-repeat padding-box,var(--wr-bracket-bl) left 5px bottom 5px/18px 18px no-repeat padding-box;
 --wr-stone-face:var(--wr-panel-gloss) padding-box,var(--wr-panel) padding-box;
 --wr-stone-rim:var(--wr-brass) border-box;
 --wr-frame-shadow:0 0 0 1px #0b0e1c,0 12px 32px #0009,0 2px 6px #0006,inset 0 1px 0 #ffffff26,inset 0 -2px 6px #0004;
 --wr-trim:inset 0 0 0 1px #e8b44599,inset 0 0 0 2px #0b0e1c66,inset 0 1px 0 2px #ffffff12;
 --wr-wood-face:linear-gradient(180deg,#ffffff24 0,#fff0 40%) ,linear-gradient(180deg,var(--wr-wood-hi),var(--wr-wood) 55%,var(--wr-wood-lo));
 --wr-tray-face:linear-gradient(180deg,#141829,#1b2034);
 --wr-tray-shadow:0 1px 0 #ffffff12,inset 0 2px 6px #0009,inset 0 0 0 1px #0b0e1c;
}

/* ---------- 2. Components ---------- */
.wr-ui,.wr-ui *{box-sizing:border-box}
.wr-display{font-family:var(--wr-font-display);font-weight:800;letter-spacing:.01em}
.wr-gold-text,.wr-plaque__text{color:var(--wr-gold);text-shadow:var(--wr-text-emboss)}
@supports (-webkit-background-clip:text){.wr-gold-text,.wr-plaque__text{background:var(--wr-goldleaf);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 0 #3a2306) drop-shadow(0 0 1px #3a2306) drop-shadow(0 2px 2px #0008)}}

/* Frame: slate-navy panel with a thin gold trim and small gold corner caps. */
.wr-frame{position:relative;padding:16px 18px;color:var(--wr-text);font-family:var(--wr-font-body);border:2px solid transparent;border-radius:14px;background:var(--wr-brackets),var(--wr-stone-face),var(--wr-stone-rim);box-shadow:var(--wr-frame-shadow)}
.wr-frame--wood{background:var(--wr-brackets),linear-gradient(180deg,#ffffff14,#fff0 60px) padding-box,linear-gradient(180deg,#5a3a20,#3a2412) padding-box,var(--wr-stone-rim)}
.wr-frame--crest{margin-top:58px;padding-top:44px}
/* Crest: a clean slate tab with a gold medallion. */
.wr-crest{position:absolute;z-index:3;top:-70px;left:50%;transform:translateX(-50%);width:176px;height:78px;pointer-events:none}
.wr-crest::before{content:'';position:absolute;left:28px;right:28px;top:30px;bottom:0;border:2px solid transparent;border-bottom:0;border-radius:18px 18px 0 0;background:linear-gradient(180deg,#3a4468,#2b3350) padding-box,var(--wr-brass) border-box;box-shadow:0 -2px 10px #0006}
.wr-crest::after{content:none}
.wr-medallion{position:absolute;z-index:2;left:50%;top:-6px;width:84px;height:84px;transform:translateX(-50%);display:grid;place-items:center;background:var(--wr-medallion) center/100% 100% no-repeat;filter:drop-shadow(0 4px 6px #0008)}
.wr-medallion>svg,.wr-medallion>img,.wr-medallion>i{width:40px;height:40px;display:block;font-style:normal;font:800 30px/40px var(--wr-font-display);text-align:center;color:var(--wr-gold);text-shadow:var(--wr-text-emboss)}

/* Plaque: slate bar, thin gold bezel, gold title. */
.wr-plaque{position:relative;display:flex;align-items:center;justify-content:center;max-width:calc(100% - 40px);min-height:46px;margin:0 auto 14px;padding:7px 28px 8px;
 color:var(--wr-gold);font:800 23px/1.1 var(--wr-font-display);letter-spacing:.01em;text-align:center;text-shadow:var(--wr-text-emboss);
 border:2px solid transparent;border-radius:10px;background:linear-gradient(180deg,#ffffff1a,#fff0 50%) padding-box,linear-gradient(180deg,#252c48,#161b2e) padding-box,var(--wr-brass) border-box;
 box-shadow:0 0 0 1px var(--wr-ink),inset 0 2px 6px #0007,0 4px 10px #0007}
.wr-plaque--caps::before,.wr-plaque--caps::after{content:'';position:absolute;top:50%;width:14px;height:26px;margin-top:-13px;background:var(--wr-endcap-l) center/100% 100% no-repeat}
.wr-plaque--caps::before{right:calc(100% + 1px)}.wr-plaque--caps::after{left:calc(100% + 1px);background-image:var(--wr-endcap-r)}
.wr-plaque--small{min-height:34px;padding:4px 18px 5px;font-size:17px}
.wr-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:6px 14px;color:var(--wr-text);font:800 18px/1.1 var(--wr-font-display);text-shadow:var(--wr-text-shadow);border:2px solid #0b0e1c;border-radius:10px;background:var(--wr-wood-face);box-shadow:inset 0 1px 0 #ffe2b04d,inset 0 -2px 0 #0003,0 3px 8px #0007}
.wr-bar--stone{background:linear-gradient(180deg,#ffffff1a,#fff0 50%),linear-gradient(180deg,#3a4468,#262d48)}
.wr-bar small{font:600 14px var(--wr-font-body);letter-spacing:0;color:var(--wr-text-dim)}

/* Buttons. Variant lists carry a never-matching #wr-x so their :is() specificity equals the base list (which holds ids).
   2a. Visual recipe shared by .wr-btn and existing game buttons (no geometry here). */
.wr-btn,:root :is(.primary,#start,#mode-login,#account-submit,#replay,.red-button,.army-summary button,.map-picker button,#audio-settings,#atelier-open,#account-switch,#account-refresh,#army-save,#army-load,.market-inspect button,.daily-offer button,.shop-offer button,.quest-offer button,.menu-popup>button:not(.popup-close),.result-actions button,#world-action-dock .world-actions button,.rumble-btn){
 --b-hi:var(--wr-sapphire-hi);--b:var(--wr-sapphire);--b-lo:var(--wr-sapphire-lo);
 color:#fff!important;font-family:var(--wr-font-display)!important;font-weight:800!important;letter-spacing:.01em;text-shadow:0 1px 0 #10142a,1px 0 0 #10142a99,-1px 0 0 #10142a99,0 2px 3px #0007!important;text-decoration:none;cursor:pointer;
 border-color:#10142a!important;
 background:radial-gradient(ellipse 90% 55% at 50% 0,#ffffff5c,#fff0 70%),linear-gradient(180deg,var(--b-hi),var(--b) 62%)!important;
 box-shadow:inset 0 -4px 0 var(--b-lo),inset 0 1px 0 #ffffffa6,inset 0 0 0 1px #ffffff1f,0 3px 6px #0008!important;
 transition:transform .08s ease,box-shadow .08s ease,filter .12s;-webkit-tap-highlight-color:transparent}
.wr-btn:hover,:root :is(.primary,#start,.rumble-btn,.result-actions button,.army-summary button):hover{filter:brightness(1.08)}
.wr-btn:active,.wr-btn.is-pressed,:root :is(.primary,#start,#mode-login,#account-submit,#replay,.red-button,.army-summary button,.map-picker button,#audio-settings,.market-inspect button,.daily-offer button,.shop-offer button,.quest-offer button,.result-actions button,#world-action-dock .world-actions button,.rumble-btn):active{transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--b-lo),inset 0 2px 4px #0005,0 1px 2px #0008!important}
/* 2b. Geometry for the .wr-btn component only (existing buttons keep their own sizes). */
.wr-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;min-width:46px;padding:6px 20px 9px;font-size:17px!important;line-height:1.05;white-space:nowrap;border:2px solid #10142a;border-radius:10px}
.wr-btn:focus-visible{outline:2px solid var(--wr-gold-hi);outline-offset:3px}
.wr-btn--green,:root :is(.primary,#start,#mode-login,#account-submit,#replay,.quest-offer button,.menu-popup>button:not(.popup-close),#world-action-dock .world-actions button:first-child,.rumble-btn.primary,#wr-x .wr-x i){--b-hi:var(--wr-emerald-hi);--b:var(--wr-emerald);--b-lo:var(--wr-emerald-lo)}
.wr-btn--blue,:root :is(.army-summary button,.map-picker button,#audio-settings,#atelier-open,#account-switch,#account-refresh,#army-save,#army-load,.result-actions button,#wr-x .wr-x i){--b-hi:var(--wr-sapphire-hi);--b:var(--wr-sapphire);--b-lo:var(--wr-sapphire-lo)}
.wr-btn--gold,:root :is(.market-inspect button,.daily-offer button,.shop-offer button,#world-action-dock .world-actions button,.defeat .result-actions button:first-child,.rumble-btn.gold,#wr-x .wr-x i){--b-hi:var(--wr-amber-hi);--b:var(--wr-amber);--b-lo:var(--wr-amber-lo)}
.wr-btn--red,:root :is(.red-button,.rumble-btn.danger,#wr-x .wr-x i){--b-hi:var(--wr-garnet-hi);--b:var(--wr-garnet);--b-lo:var(--wr-garnet-lo)}
.wr-btn--stone,:root :is(.rumble-btn.stone,#wr-x .wr-x i){--b-hi:#6c78a0;--b:#46507a;--b-lo:#2a3152}
.wr-btn--disabled,.wr-btn:disabled,.wr-btn[aria-disabled="true"],:root :is(.primary,#start,.army-summary button,.daily-offer button,.shop-offer button,.market-inspect button,.rumble-btn,.result-actions button):disabled{--b-hi:var(--wr-pewter-hi);--b:var(--wr-pewter);--b-lo:var(--wr-pewter-lo);color:#e2e4ea!important;cursor:not-allowed;filter:saturate(.4);transform:none}
.wr-btn--big{min-height:58px;padding:8px 30px 11px;font-size:22px!important}
.wr-btn--small{min-height:44px;padding:4px 14px 7px;font-size:15px!important}
.wr-btn--block{display:flex;width:100%}
.wr-btn--glow{animation:wr-glow 1.8s ease-in-out infinite}
@keyframes wr-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15) drop-shadow(0 0 8px #ffd77a)}}
/* Round buttons: blue info, red close. Visuals for existing close buttons; size only for the components. */
.wr-btn-info,.wr-btn-close,:root :is(#close-picker,.popup-close,.confirm-close,.mission-close,.detail-close,#account-close,.rumble-close){
 color:#fff!important;font-family:var(--wr-font-display)!important;font-weight:800!important;text-shadow:0 1px 0 #10142a,0 0 2px #10142a!important;cursor:pointer;border-color:#10142a!important;
 background:radial-gradient(ellipse 80% 50% at 50% 12%,#ffffff70,#fff0 70%),linear-gradient(180deg,var(--wr-garnet-hi),var(--wr-garnet) 65%)!important;
 box-shadow:inset 0 -3px 0 var(--wr-garnet-lo),inset 0 0 0 1px #ffffff26,0 2px 5px #0008!important;transition:transform .08s}
.wr-btn-info,.wr-btn-close{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;min-width:0;min-height:0;margin:0;padding:0 0 3px;font-size:24px!important;line-height:1;border:2px solid #10142a;border-radius:50%}
.wr-btn-info{background:radial-gradient(ellipse 80% 50% at 50% 12%,#ffffff70,#fff0 70%),linear-gradient(180deg,var(--wr-sapphire-hi),var(--wr-sapphire) 65%)!important;box-shadow:inset 0 -3px 0 var(--wr-sapphire-lo),inset 0 0 0 1px #ffffff26,0 2px 5px #0008!important;font-family:Georgia,serif!important;font-style:italic;font-weight:700!important}
.wr-btn-info:active,.wr-btn-close:active{transform:translateY(2px)}

/* Badges, coins, hex level, portrait coins. */
.wr-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:2px solid #fff;border-radius:11px;background:linear-gradient(180deg,#ff6a55,#d42a1e);color:#fff;font:800 13px/1 var(--wr-font-body);text-shadow:0 1px 0 #6a0f08;box-shadow:0 0 0 1px var(--wr-ink),0 2px 3px #0008}
.wr-badge--new{animation:wr-badge-pulse .6s ease-out 1}
@keyframes wr-badge-pulse{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.wr-coin{display:inline-grid;place-items:center;width:30px;height:30px;border:2px solid var(--wr-ink);border-radius:50%;background:radial-gradient(ellipse 70% 45% at 50% 20%,#fffbe0,#fff0 70%),linear-gradient(180deg,#ffd75a,#e0961c);color:#fff;font:800 16px/1 var(--wr-font-body);text-shadow:var(--wr-text-shadow);box-shadow:inset 0 -2px 0 #a8640c,0 2px 3px #0008}
.wr-hex-wrap{display:inline-grid;padding:2px;background:var(--wr-ink);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:drop-shadow(0 2px 1px #0008)}
.wr-hex{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 6px;color:#fff;font:800 15px/1 var(--wr-font-body);text-shadow:0 1px 0 #10142a;background:linear-gradient(180deg,#ffffff40,#fff0 50%),linear-gradient(var(--wr-purple-hi),var(--wr-purple) 60%,var(--wr-purple-lo));clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.wr-portrait{position:relative;display:inline-grid;place-items:center;width:56px;height:56px;border:3px solid transparent;border-radius:50%;background:radial-gradient(circle at 50% 35%,#4a5684,#1d2338) padding-box,var(--wr-ring,var(--wr-brass)) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 3px 5px #0008}
.wr-portrait>img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%}
.wr-portrait>.wr-hex-wrap{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%)}

/* Tray (dark inset) and parchment (warm reading panel). */
.wr-tray{padding:12px;color:var(--wr-text);border:2px solid #0d1020;border-radius:10px;background:var(--wr-tray-face);box-shadow:var(--wr-tray-shadow)}
.wr-tray--wood{background:linear-gradient(180deg,#4a2f1a,#2e1d10)}
.wr-parchment{padding:14px 16px;color:var(--wr-parch-ink);font-family:var(--wr-font-body);border:2px solid transparent;border-radius:10px;background:linear-gradient(180deg,#fbf2dc,#ead6a8) padding-box,var(--wr-brass) border-box;box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #fff,0 4px 8px #0007}

/* Unit card: family-coloured frame, inset portrait, gold cost coin, purple hex level, XP bar. */
.wr-card{--wr-fam:#2f5bb0;--wr-fam-hi:#5d8ae0;--wr-fam-lo:#1a326e;position:relative;display:flex;flex-direction:column;min-width:0;padding:4px 4px 3px;color:var(--wr-text);text-align:center;font-family:var(--wr-font-body);
 border:3px solid transparent;border-radius:10px;background:linear-gradient(180deg,#ffffff2e,#fff0 40%) padding-box,linear-gradient(180deg,var(--wr-fam-hi),var(--wr-fam) 45%,var(--wr-fam-lo)) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--wr-fam-hi) 60%,#fff),var(--wr-fam-lo)) border-box;
 box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff40,0 3px 0 #0b0e1c99,0 6px 12px #0007;transition:transform .12s,box-shadow .12s}
.wr-card--blue{--wr-fam:#2f5bb0;--wr-fam-hi:#5d8ae0;--wr-fam-lo:#1a326e}.wr-card--green{--wr-fam:#2f8a34;--wr-fam-hi:#62c055;--wr-fam-lo:#17491b}
.wr-card--purple{--wr-fam:#6a3cb0;--wr-fam-hi:#9a6ae0;--wr-fam-lo:#331a63}.wr-card--gold{--wr-fam:#c7871e;--wr-fam-hi:#ffcf4d;--wr-fam-lo:#6b4508}
.wr-card--red{--wr-fam:#b03a2c;--wr-fam-hi:#e8695a;--wr-fam-lo:#5a1610}.wr-card--slate{--wr-fam:#4a5478;--wr-fam-hi:#7883a8;--wr-fam-lo:#262c45}
.wr-card__art{position:relative;display:block;flex:1;min-height:84px;border-radius:7px;background:radial-gradient(ellipse at 50% 30%,#ffffff33,#fff0 62%),linear-gradient(#0000 40%,#00000066),color-mix(in srgb,var(--wr-fam) 55%,#1d2338);box-shadow:inset 0 0 0 1px #0b0e1c99,inset 0 3px 8px #0006;overflow:hidden}
.wr-card__art>img{width:100%;height:100%;object-fit:contain;object-position:50% 70%;filter:drop-shadow(0 4px 4px #0008)}
.wr-card--leader .wr-card__art>img{object-fit:cover;object-position:50% 25%}
.wr-card__name{display:block;margin:3px 0 2px;font:700 13px/1.15 var(--wr-font-body);text-shadow:var(--wr-text-shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-card__cost{position:absolute;z-index:2;left:50%;bottom:42px;transform:translateX(-50%);display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--wr-ink);border-radius:50%;color:#fff;font:800 16px/1 var(--wr-font-body);text-shadow:var(--wr-text-shadow);background:radial-gradient(ellipse 70% 45% at 50% 20%,#fffbe0,#fff0 70%),linear-gradient(180deg,#ffd75a,#e0961c);box-shadow:inset 0 -2px 0 #a8640c,0 2px 4px #0009}
.wr-card__foot{display:flex;align-items:center;gap:3px;height:24px}
.wr-card__foot>.wr-hex-wrap{flex:none}
.wr-card__xp{position:relative;flex:1;height:14px;border-radius:7px;background:#0d1020;box-shadow:inset 0 0 0 1px var(--wr-ink),inset 0 2px 3px #000a,0 1px 0 #ffffff1a;overflow:hidden}
.wr-card__xp>i{position:absolute;inset:1px auto 1px 1px;width:var(--value,0%);border-radius:6px;background:linear-gradient(#d0a8ff,var(--wr-purple) 60%,var(--wr-purple-lo))}
.wr-card__xp>small{position:relative;display:block;font:700 10px/14px var(--wr-font-body);text-shadow:0 1px 1px #000}
.wr-card__talent{flex:none;width:22px;height:22px;border:2px solid var(--wr-gold-lo);border-radius:6px;background:linear-gradient(#3d4870,#1d2338);display:grid;place-items:center;overflow:hidden;color:var(--wr-gold-hi);font-size:12px}
.wr-card__talent>img,.wr-card__talent>svg{width:100%;height:100%;object-fit:contain}
.wr-card__trait{position:absolute;z-index:2;left:6px;top:4px;width:24px;height:28px;display:grid;place-items:center;color:var(--wr-gold-hi);font-size:13px;background:linear-gradient(#4a5684,#232a46) padding-box;clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);box-shadow:inset 0 0 0 2px var(--wr-gold-lo)}
.wr-card__up{position:absolute;z-index:3;right:-5px;top:-7px;width:22px;height:24px;background:linear-gradient(#d4ffb0,#5fd23a 50%,#2a8a1c);clip-path:polygon(50% 0,100% 52%,70% 52%,70% 100%,30% 100%,30% 52%,0 52%);filter:drop-shadow(0 1px 0 #10142a) drop-shadow(0 0 4px #9effa0aa)}
.wr-card__up--gold{background:linear-gradient(#fff6c0,#ffcf4d 50%,#c8861c);filter:drop-shadow(0 1px 0 #10142a) drop-shadow(0 0 4px #ffd77aaa)}
.wr-card.is-selected,.wr-card.selected{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 16px 4px #6fe6ff88,0 6px 12px #0007;transform:translateY(-3px)}
.wr-card--leader{grid-row:span 2}
.wr-card.is-locked{filter:grayscale(.85) brightness(.7)}

/* Slot header medallions: metal discs by tier. */
.wr-slot-head{--t:linear-gradient(180deg,#fff1b8,#ffcf4d 45%,#c8861c);display:inline-grid;place-items:center;width:42px;height:42px;border:3px solid transparent;border-radius:50%;
 background:radial-gradient(circle at 50% 35%,#3d4870,#1d2338) padding-box,var(--t) border-box;box-shadow:0 0 0 1px var(--wr-ink),inset 0 2px 4px #0008,0 3px 5px #0008;color:var(--wr-gold-hi);font:800 17px/1 var(--wr-font-display)}
.wr-slot-head>img,.wr-slot-head>svg{width:24px;height:24px;object-fit:contain}
.wr-slot-head--gold{--t:linear-gradient(180deg,#fff1b8,#ffcf4d 45%,#c8861c)}
.wr-slot-head--silver{--t:linear-gradient(180deg,#ffffff,#c9d0de 45%,#7d8699);color:#eef1f8}
.wr-slot-head--bronze{--t:linear-gradient(180deg,#ffd6ae,#d0905a 45%,#83501f);color:#ffd9b0}
.wr-slot-head--brown{--t:linear-gradient(180deg,#c49464,#8a5a30 45%,#4e2e14);color:#ecd3b0}

/* List rows; your row in gold. */
.wr-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.wr-row{display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 12px 4px 5px;color:var(--wr-text);border-radius:10px;background:linear-gradient(180deg,#38426a,#2b3350);box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff1f,0 2px 4px #0007}
.wr-list>.wr-row:nth-child(even){background:linear-gradient(180deg,#323b5e,#262d48)}
.wr-row__name{flex:1;min-width:0;font:700 17px/1.1 var(--wr-font-body);text-shadow:var(--wr-text-shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-row__meta{font:600 14px var(--wr-font-body);color:var(--wr-text-dim);text-shadow:0 1px 0 #10142a}
.wr-row.is-self,.wr-list>.wr-row.is-self{color:#3a2306;background:radial-gradient(ellipse 80% 70% at 30% 0,#fff8d880,#fff0 70%),linear-gradient(#ffdc6a,#f0a92a);box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #fff6d0,inset 0 -2px 0 #c8861c,0 0 10px #ffcf4d55}
.wr-row.is-self .wr-row__name{text-shadow:0 1px 0 #fff3c080;color:#3a2306}
.wr-row.is-self .wr-row__meta{color:#5a3a0a;text-shadow:none}

/* Rank tier bands: polished metal plates. */
.wr-tier{--t:var(--wr-goldleaf);position:relative;padding:8px 14px 10px;text-align:center;color:#fff;border:2px solid var(--wr-ink);border-radius:10px;
 background:linear-gradient(180deg,#ffffff38,#fff0 45%) padding-box,var(--t) padding-box;box-shadow:inset 0 1px 0 #ffffff99,inset 0 -3px 0 #0003,0 3px 6px #0008}
.wr-tier>h3,.wr-tier__title{margin:0 0 6px;font:800 18px/1.1 var(--wr-font-display);color:#fff;text-shadow:var(--wr-text-shadow)}
.wr-tier--gold{--t:linear-gradient(180deg,#ffe58a,#f0b232 55%,#c8861c)}
.wr-tier--silver{--t:linear-gradient(180deg,#f4f6fb,#bfc7d6 55%,#8a93a8)}
.wr-tier--bronze{--t:linear-gradient(180deg,#f7c9a0,#c98552 55%,#8e5426)}
.wr-tier__rewards{display:flex;justify-content:center;gap:18px}
.wr-tier__reward{position:relative;display:flex;flex-direction:column;align-items:center;font:800 14px var(--wr-font-body);text-shadow:var(--wr-text-shadow)}
.wr-check{position:absolute;left:50%;top:4px;width:26px;height:20px;transform:translateX(-50%);background:linear-gradient(#c8ffa8,#5fd23a 55%,#2a8a1c);clip-path:polygon(0 55%,18% 38%,40% 60%,82% 0,100% 18%,40% 100%);filter:drop-shadow(0 1px 0 #10142a)}
.wr-chest{display:inline-block;width:36px;height:30px;background:var(--wr-chest) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)}
.wr-chest.is-claimed{background-image:var(--wr-chest-open);filter:saturate(.4) brightness(.85) drop-shadow(0 2px 2px #0008)}

/* Thick progress bar with milestone chests. */
.wr-progress{--value:0%;--fill-hi:#ffb35c;--fill:#ef6a24;--fill-lo:#b53a12;position:relative;height:24px;margin:24px 0 8px;border:2px solid var(--wr-ink);border-radius:12px;background:#0d1020;box-shadow:inset 0 3px 5px #000a,0 1px 0 #ffffff14}
.wr-progress__fill{position:absolute;inset:2px auto 2px 2px;width:calc(var(--value) - 4px);min-width:0;border-radius:9px;background:linear-gradient(180deg,#ffffff59,#fff0 55%),linear-gradient(var(--fill-hi),var(--fill) 60%,var(--fill-lo));box-shadow:0 0 8px color-mix(in srgb,var(--fill) 50%,transparent)}
.wr-progress__label{position:absolute;left:0;right:0;bottom:calc(100% + 4px);text-align:center;color:var(--wr-text);font:800 15px/1 var(--wr-font-display);text-shadow:var(--wr-text-shadow)}
.wr-progress__chest{position:absolute;top:50%;left:var(--at,50%);transform:translate(-50%,-56%)}
.wr-progress--xp{--fill-hi:#d0a8ff;--fill:#7a48c8;--fill-lo:#3f2178}
.wr-progress--done{--fill-hi:#a8f07a;--fill:#3fae2a;--fill-lo:#23731a}

/* Bottom navigation dock: warm wood bar; tabs are slate tiles, the active one raised, gold and lit. */
.wr-dock{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:9px 12px calc(9px + var(--safe-bottom,0px));border-top:2px solid var(--wr-ink);
 background:var(--wr-wood-face);box-shadow:0 -6px 18px #0008,inset 0 1px 0 #ffe2b04d}
.wr-dock__tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:66px;height:62px;padding:4px;color:#e9eaf2;font:700 13px/1 var(--wr-font-body);text-shadow:var(--wr-text-shadow);
 border:2px solid var(--wr-ink);border-radius:10px;background:linear-gradient(180deg,#ffffff1a,#fff0 50%),linear-gradient(180deg,#3d4870,#262d48);
 box-shadow:inset 0 1px 0 #ffffff2a,inset 0 -3px 0 #0004,0 2px 4px #0007;cursor:pointer;transition:transform .14s,filter .14s}
.wr-dock__tab.is-active,.wr-dock__tab.active{transform:translateY(-10px);color:#fff;background:radial-gradient(ellipse at 50% 30%,#ffffff55,#fff0 65%),linear-gradient(180deg,var(--wr-amber-hi),var(--wr-amber) 60%);box-shadow:inset 0 -4px 0 var(--wr-amber-lo),inset 0 1px 0 #fff8,0 6px 12px #0009,0 0 16px 2px #ffcf4d55}

/* Top resource strip: wood plank, level shield, dark counters. */
.wr-resources{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:2px solid var(--wr-ink);background:var(--wr-wood-face);box-shadow:inset 0 1px 0 #ffe2b04d,0 4px 12px #0008}
.wr-level{display:inline-flex;align-items:center;min-width:0;height:36px;padding:0 12px 0 0;border:2px solid var(--wr-ink);border-radius:10px;background:linear-gradient(180deg,#ffffff1f,#fff0 50%),linear-gradient(#3d6ad0,#22408f);box-shadow:inset 0 1px 0 #ffffff40;color:var(--wr-text);font:700 17px/1 var(--wr-font-body);text-shadow:var(--wr-text-shadow)}
.wr-level__shield{display:grid;place-items:center;flex:none;width:42px;height:49px;margin:-8px 8px -8px -8px;padding-bottom:7px;color:#fff;font:800 17px/1 var(--wr-font-display);text-shadow:var(--wr-text-shadow);background:var(--wr-shield) center/100% 100% no-repeat;filter:drop-shadow(0 2px 2px #0008)}
.wr-counter{display:inline-flex;align-items:center;gap:6px;height:34px;white-space:nowrap;padding:0 10px 0 6px;border:2px solid var(--wr-ink);border-radius:10px;background:linear-gradient(180deg,#151a2c,#232a44);color:var(--wr-text);font:700 16px/1 var(--wr-font-display);text-shadow:var(--wr-text-shadow);box-shadow:inset 0 2px 4px #0008,0 1px 0 #ffffff1a}
.wr-counter>img,.wr-counter>svg{width:28px;height:28px;object-fit:contain;margin:-4px 0 -4px -12px;filter:drop-shadow(0 2px 2px #0009)}

/* Popups and the stacked context menu. */
.wr-popup{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at center,#0d10208c,#060814d9);animation:wr-fade .16s ease-out}
.wr-popup>.wr-frame,.wr-popup__panel{width:min(520px,100%);max-height:calc(100dvh - 90px);overflow:auto;animation:wr-pop .24s cubic-bezier(.3,1.4,.5,1)}
.wr-popup__close{position:absolute!important;top:-6px;right:-6px;z-index:4}
.wr-menu{position:fixed;z-index:2100;display:flex;flex-direction:column;gap:7px;min-width:136px;padding:10px;border:2px solid transparent;border-radius:12px;background:var(--wr-panel) padding-box,var(--wr-brass) border-box;box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff26,0 12px 26px #000a;animation:wr-pop .2s cubic-bezier(.3,1.4,.5,1)}
.wr-menu>.wr-btn{width:100%}
@keyframes wr-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes wr-fade{from{opacity:0}to{opacity:1}}

/* Inputs, toasts, tabs. */
.wr-input,.wr-select{min-height:44px;padding:9px 12px;color:var(--wr-text);font:600 16px var(--wr-font-body);border:2px solid #4a5478;border-radius:10px;background:#12162a;box-shadow:inset 0 2px 4px #0008}
.wr-input:focus,.wr-select:focus{outline:2px solid var(--wr-gold);outline-offset:1px}
.wr-toast{position:fixed;z-index:3000;left:50%;top:calc(14px + var(--safe-top,0px));transform:translateX(-50%);max-width:min(92vw,460px);padding:9px 20px;color:var(--wr-gold);font:800 17px/1.2 var(--wr-font-display);text-shadow:var(--wr-text-emboss);text-align:center;border:2px solid transparent;border-radius:12px;background:var(--wr-panel) padding-box,var(--wr-brass) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 10px 22px #000a;animation:wr-pop .22s ease-out}
.wr-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.wr-tab{flex:1 1 auto;min-height:46px;padding:6px 14px;color:#dfe3f0;font:700 16px var(--wr-font-display);text-shadow:var(--wr-text-shadow);border:2px solid var(--wr-ink);border-bottom:0;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#ffffff14,#fff0 50%),linear-gradient(180deg,#3a4468,#262d48);cursor:pointer}
.wr-tab.is-active,.wr-tab.active{color:#fff;background:linear-gradient(180deg,#ffffff24,#fff0 50%),linear-gradient(180deg,var(--wr-wood-hi),var(--wr-wood))}

/* Motion preferences. */
html.reduce-motion :is(.wr-btn,.wr-card,.wr-dock__tab){transition:none}
html.reduce-motion :is(.wr-popup,.wr-popup>.wr-frame,.wr-popup__panel,.wr-menu,.wr-toast,.wr-btn--glow,.wr-badge--new){animation:none!important}
@media (prefers-reduced-motion:reduce){:is(.wr-popup,.wr-popup>.wr-frame,.wr-popup__panel,.wr-menu,.wr-toast,.wr-btn--glow,.wr-badge--new){animation:none!important}:is(.wr-btn,.wr-card,.wr-dock__tab){transition:none}}
@media (max-width:520px){.wr-plaque{font-size:20px}.wr-dock__tab{width:58px;height:58px;font-size:12px}}


/* =====================================================================
   3. Theme application: existing screens adopt the colours and type.
   Colour/typography ONLY: no border widths, paddings, sizes, positions
   or transforms, so every screen keeps its previous arrangement.
   ":root" prefixes add one class of specificity so these rules beat the
   older equal-specificity rules regardless of file order.
   ===================================================================== */
:root{--gold:var(--wr-gold);--rk-display:var(--wr-font-display);--rk-body:var(--wr-font-body);--rk-ink:var(--wr-ink)}
:root body{background:var(--wr-slate-deep);font-family:var(--wr-font-body)}
:root body.mode-gate,:root .mode-online{background:radial-gradient(ellipse at 50% 0,#36406a,#1d2338 55%,#10142a)}
:is(h1,h2,h3){font-family:var(--wr-font-display);font-weight:800}

/* Generic buttons/inputs (element specificity only, so component classes keep their art). */
button{font-family:var(--wr-font-body);font-weight:600;color:var(--wr-text);background:linear-gradient(180deg,#ffffff1a,#fff0 50%),linear-gradient(180deg,#46507a,#2e3656);border-color:#10142a;box-shadow:inset 0 1px 0 #ffffff33,inset 0 -2px 0 #0004,0 2px 4px #0007;text-shadow:0 1px 0 #10142a}
button:focus-visible{outline:2px solid var(--wr-gold-hi);outline-offset:2px}
:is(input:where(:not([type=checkbox],[type=radio],[type=range],[type=color])),select,textarea){color:var(--wr-text);font-family:var(--wr-font-body);background:#12162a;border-color:#4a5478;box-shadow:inset 0 2px 4px #0008}
:is(input,select,textarea):focus-visible{outline:2px solid var(--wr-gold);outline-offset:1px}

/* Panels: sandbox panel, picker, lobby shell, dialogs and popups become slate-navy with a thin gold trim. */
:root :is(.panel,#army-picker,.menu-popup,.game-confirm,#account-dialog,body.mode-gate #account-dialog,dialog.unit-detail),:root #lobby-panel,:root .mode-online #lobby-panel:not([data-page="map"]),:root dialog.rumble-panel{
 color:var(--wr-text);border-color:#d9a94a!important;background:var(--wr-panel-gloss),var(--wr-panel)!important;box-shadow:0 0 0 1px #0b0e1c,0 16px 40px #0008,0 2px 6px #0006,inset 0 1px 0 #ffffff26;backdrop-filter:none}
:root .mode-online #lobby-panel[data-page="map"]{background:none!important;border-color:transparent!important;box-shadow:none}
:root dialog.rumble-panel{box-shadow:0 0 0 1px #0b0e1c,0 16px 40px #0008,inset 0 1px 0 #ffffff26!important}
:root :is(.game-confirm,#account-dialog,.activity-popup,dialog.unit-detail,dialog.rumble-panel)::backdrop{background:radial-gradient(ellipse at center,#0d10208c,#060814d9);backdrop-filter:blur(3px)}
:root :is(.panel,#army-picker,.game-confirm,#account-dialog,.menu-popup,#lobby-panel) p{color:var(--wr-text-dim)}
:root :is(.panel,#army-picker,#lobby-panel,.menu-popup,.game-confirm,#account-dialog) :is(h1,h2,h3){color:var(--wr-gold);text-shadow:var(--wr-text-emboss)}
:root :is(#menu h1,#mode-gate h1,.combat-result h1,#result h1){color:var(--wr-gold)!important;font-family:var(--wr-font-display);font-weight:800;letter-spacing:0;text-shadow:var(--wr-text-emboss)!important}
@supports (-webkit-background-clip:text){:root :is(#menu h1,#mode-gate h1,.combat-result h1,#result h1){background:var(--wr-goldleaf);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;filter:drop-shadow(0 1px 0 #3a2306) drop-shadow(0 0 1px #3a2306) drop-shadow(0 3px 5px #0009)}}
/* Rubik is wider than the old condensed face: scale the hero title so it keeps its old footprint. */
:root #menu h1{font-size:46px;line-height:1.02}
:root .combat-result.defeat h1{background:linear-gradient(180deg,#ffd6c8,#ff7563 48%,#c42a20);-webkit-background-clip:text;background-clip:text}
:root :is(.eyebrow,#lobby-panel small,.mission span){color:var(--wr-gold);font-family:var(--wr-font-display);font-weight:700;text-shadow:0 1px 0 #10142a}
:root .mission{border-color:#ffffff1f}
:root .mission h2,:root #inspect strong{color:var(--wr-text);font-family:var(--wr-font-display);font-weight:800;text-shadow:var(--wr-text-shadow)}
:root #army-picker h2,:root #picker-title,:root .rumble-title{color:var(--wr-gold)!important;font-family:var(--wr-font-display)!important;font-weight:800!important;text-shadow:var(--wr-text-emboss)!important}
:root .game-confirm>p,:root .account-note{color:var(--wr-text-dim)}
:root .confirm-portrait{background:radial-gradient(circle at 50% 35%,#4a5684,#1d2338);border-color:#e8b445;box-shadow:0 0 0 1px var(--wr-ink),0 4px 8px #0008}
:root .cost-table th{color:var(--wr-gold);font-family:var(--wr-font-display);border-bottom-color:#ffffff24}
:root .confirm-benefits{background:#3fae2a26;border-color:#3fae2a80;color:#d6f5c8!important}
:root .rumble-subtitle{font-family:var(--wr-font-display);font-weight:600;color:var(--wr-text-dim)}

/* Sandbox roster minis and the picker library as unit cards. */
:root .mini{border-color:#9db4ec;background:linear-gradient(180deg,#ffffff2a,#fff0 45%),linear-gradient(#5d8ae0,#2f5bb0 50%,#1a326e);box-shadow:0 0 0 1px var(--wr-ink),0 3px 5px #0008}
:root .mini.champion-slot{border-color:#ffe08a;background:linear-gradient(180deg,#ffffff2a,#fff0 45%),linear-gradient(#ffcf4d,#c7871e 50%,#6b4508)}
:root .mini.chosen{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 12px 3px #6fe6ff88}
:root .mini>span{background:linear-gradient(var(--wr-purple-hi),var(--wr-purple) 60%,var(--wr-purple-lo));color:#fff;font-family:var(--wr-font-display);font-weight:800;text-shadow:0 1px 0 #10142a}
:root .library-card{color:var(--wr-text);border-color:#6a77a3;background:linear-gradient(180deg,#ffffff1f,#fff0 40%),linear-gradient(#3d4870,#2b3350 50%,#1d2338);box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff26,0 4px 8px #0008}
:root .library-card img{background:radial-gradient(ellipse at 50% 35%,#ffffff2a,#fff0 62%),linear-gradient(#0000 40%,#0006),#2b3558}
:root .library-card b{font-family:var(--wr-font-display);font-weight:700;text-shadow:var(--wr-text-shadow)}
:root .library-card span{color:var(--wr-gold);font-weight:700}
:root .library-card.equipped{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 14px 3px #6fe6ff77;border-color:#bff4ff}
:root .unit-traits .trait-icon{border-color:#e8b445;background:radial-gradient(circle at 50% 35%,#3d4870,#1d2338)}
:root #trait-tooltip{color:var(--wr-text);border-color:#d9a94a;background:var(--wr-panel);box-shadow:0 0 0 1px var(--wr-ink),0 12px 30px #000a}
:root #trait-tooltip strong{color:var(--wr-gold);font-family:var(--wr-font-display);font-weight:800;text-shadow:var(--wr-text-emboss)}
:root #trait-tooltip>.tooltip-art{background:#12162a;box-shadow:inset 0 0 0 1px #0b0e1c,inset 0 2px 5px #0008}

/* Welcome / sandbox chrome. */
:root .map-picker select{color:var(--wr-text)!important;background-color:#12162a!important;border-color:#4a5478!important;box-shadow:inset 0 2px 4px #0008}
:root #mode-exit:not(.mode-online *){color:var(--wr-gold)!important;font-family:var(--wr-font-display);font-weight:700;text-shadow:0 1px 0 #10142a,0 0 4px #10142a}
:root #mode-options a{color:var(--wr-text);border-color:#d9a94a;background:var(--wr-panel-gloss),var(--wr-panel);box-shadow:0 0 0 1px #0b0e1c,0 12px 30px #0008,inset 0 1px 0 #ffffff26}
:root #mode-options a:hover{filter:brightness(1.1)}
:root #mode-options strong{color:var(--wr-gold);font-family:var(--wr-font-display);font-weight:800;text-shadow:var(--wr-text-emboss)}
:root #mode-options span{color:var(--wr-text-dim)}
:root #mode-gate{background:#1d2338}
:root #welcome-mute{border-color:#4a5478;background:linear-gradient(180deg,#3d4870,#1d2338);box-shadow:0 0 0 1px var(--wr-ink),0 2px 4px #0007}

/* Online home: warm wood dock with slate tabs; the active tab turns gold. */
:root #home-tabs,:root .mode-online #home-tabs{border-color:#10142a;background:var(--wr-wood-face);box-shadow:0 -6px 18px #0008,inset 0 1px 0 #ffe2b04d}
:root #home-tabs button,:root .mode-online #home-tabs button{color:#e9eaf2;font-family:var(--wr-font-display);font-weight:700;text-shadow:var(--wr-text-shadow);border-color:#10142a;background:linear-gradient(180deg,#ffffff1a,#fff0 50%),linear-gradient(180deg,#3d4870,#262d48);box-shadow:inset 0 1px 0 #ffffff2a,inset 0 -3px 0 #0004,0 2px 4px #0007}
:root #home-tabs button span,:root .mode-online #home-tabs button span{font-family:var(--wr-font-display);font-weight:700}
:root #home-tabs button.active,:root .mode-online #home-tabs button.active{color:#fff;border-color:#10142a;background:radial-gradient(ellipse at 50% 30%,#ffffff55,#fff0 65%),linear-gradient(180deg,var(--wr-amber-hi),var(--wr-amber) 60%);box-shadow:inset 0 -4px 0 var(--wr-amber-lo),inset 0 1px 0 #fff8,0 4px 10px #0009,0 0 14px 2px #ffcf4d55}
:root .menu-badge{border-color:#fff;background:linear-gradient(180deg,#ff6a55,#d42a1e);font-family:var(--wr-font-display);font-weight:800}

/* Online home: resource strip. */
:root .mode-online #home-profile,:root #home-profile{color:var(--wr-text);font-family:var(--wr-font-display);font-weight:700;text-shadow:var(--wr-text-shadow);border-color:#10142a;background:linear-gradient(180deg,#ffffff1f,#fff0 50%),linear-gradient(#3d6ad0,#22408f);box-shadow:inset 0 1px 0 #ffffff40,0 3px 8px #0008}
:root .mode-online #home-profile::before,:root #home-profile::before{color:var(--wr-gold);text-shadow:0 1px 0 #10142a}
:root .resource-chip,:root .mode-online #home-resources .resource-chip{color:var(--wr-text);border-color:#10142a;background:linear-gradient(180deg,#151a2c,#232a44);box-shadow:inset 0 2px 4px #0008,0 1px 0 #ffffff1a}
:root .resource-chip b,:root .mode-online #home-resources .resource-chip b{font-family:var(--wr-font-display);font-weight:800;color:var(--wr-text);text-shadow:var(--wr-text-shadow)}
:root .resource-chip small{color:var(--wr-text-dim)}
:root .resource-tooltip{color:var(--wr-text);background:#151a2c;border-color:var(--wr-gold-lo)}

/* Online home: sub-panels on dark trays, wood headers. */
:root .mode-online #lobby-panel>header h1{color:var(--wr-gold);text-shadow:var(--wr-text-emboss)}
:root :is(.social-card,.activity-card,.quest-offer,.data-row,.unit-detail:not(dialog),.shop-offer,.daily-offer,.market-inspect,.army-summary,.daily-track){color:var(--wr-text);border-color:#0d1020!important;background:var(--wr-tray-face)!important;box-shadow:var(--wr-tray-shadow)!important}
:root :is(.social-card,.activity-card,.quest-offer,.shop-offer,.daily-offer,.market-inspect) :is(h2,h3){color:var(--wr-gold);text-shadow:var(--wr-text-emboss)}
:root .chat-log{background:#10142a;border-color:#0b0e1c;box-shadow:inset 0 2px 6px #0009}
:root .collection-toolbar,:root .daily-header,:root .mode-online #lobby-panel .daily-header{border-color:#10142a!important;background:var(--wr-wood-face);box-shadow:inset 0 1px 0 #ffe2b04d,0 3px 8px #0007}
:root :is(.collection-toolbar h2,.daily-header h2){color:var(--wr-gold);text-shadow:var(--wr-text-emboss)}
:root .mode-online .equipped-grid{border-color:#0d1020;background:var(--wr-tray-face);box-shadow:var(--wr-tray-shadow)}
:root .mode-online :is(.equipped-grid,.collection-grid) .online-unit{box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff33,0 3px 6px #0008!important}
:root .market-board{border-color:#10142a;background:linear-gradient(180deg,#ffffff14,#fff0 60px),linear-gradient(180deg,#6a4424,#432a14);box-shadow:inset 0 0 0 1px #d9a94a66,inset 0 4px 12px #0007,0 6px 14px #0008}
:root :is(.mode-online .army-slot-role,.army-slot-role){background:linear-gradient(#3d4870,#262d48);border-color:var(--wr-ink);color:var(--wr-text);font-family:var(--wr-font-display);font-weight:700}

/* Settings / pause / confirm kit. */
:root .sp-tab{font-family:var(--wr-font-display);font-weight:700;border-color:var(--wr-ink);color:#e9eaf2;background:linear-gradient(180deg,#ffffff14,#fff0 50%),linear-gradient(180deg,#3a4468,#262d48)}
:root .sp-tab.active{color:var(--wr-parch-ink);background:linear-gradient(180deg,#fbf2dc,#ead6a8)}
:root .sp-page{background:linear-gradient(180deg,#fbf2dc,#ead6a8)!important;border-color:#c8861c!important;box-shadow:inset 0 1px 0 #fff}
:root .sp-root .sp-group-title{font-family:var(--wr-font-display);font-weight:800}

/* Battle result screen. */
:root .reward-unit{border-color:#e8b445;box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff40,0 6px 14px #0008}
:root .reward-unit h2{font-family:var(--wr-font-display);font-weight:800;text-shadow:var(--wr-text-shadow)}
:root .combat-result{background:radial-gradient(ellipse at 50% 18%,#4a5a92ef,#2b3350f5 48%,#141829f8)}
:root .combat-result:before{opacity:.55}
:root .reward-progress b{font-family:var(--wr-font-display);font-weight:800;background:linear-gradient(var(--wr-purple-hi),var(--wr-purple) 60%,var(--wr-purple-lo))}
:root .reward-progress progress{border-color:#10142a}
:root .combat-xp{border-color:#d9a94a;background:var(--wr-panel);box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff26,0 4px 8px #0008}
:root .combat-xp strong{font-family:var(--wr-font-display);font-weight:800}

/* In-battle HUD: same palette, readability first. */
:root body #hud footer{border-color:#10142a;background:var(--wr-wood-face);box-shadow:0 8px 22px #0008,inset 0 1px 0 #ffe2b04d}
:root #hud #hand .card{border-color:#10142a;box-shadow:inset 0 1px 0 #ffffff33,0 0 0 1px #10142a,0 3px 6px #0008}
:root #hud #hand .card.selected{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 14px 4px #6fe6ff99}
:root #hud #hand .card .cost{border-color:#10142a;font-family:var(--wr-font-display);font-weight:800;color:#fff;text-shadow:var(--wr-text-shadow);background:radial-gradient(ellipse 70% 45% at 50% 20%,#fffbe0,#fff0 70%),linear-gradient(180deg,#ffd75a,#e0961c)}
:root #hud #hand .card strong{font-family:var(--wr-font-display);font-weight:700;text-shadow:var(--wr-text-shadow)}
:root #hud #timer{font-family:var(--wr-font-display)!important;font-weight:800;color:var(--wr-text)!important;text-shadow:var(--wr-text-shadow);border-color:#d9a94a!important;background:linear-gradient(180deg,#2b3350,#1d2338)!important;box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff26,0 3px 6px #0008}
:root #hud #pause{border-color:#10142a!important;background:radial-gradient(ellipse 90% 55% at 50% 0,#ffffff5c,#fff0 70%),linear-gradient(180deg,var(--wr-amber-hi),var(--wr-amber) 62%)!important;box-shadow:inset 0 -3px 0 var(--wr-amber-lo),inset 0 1px 0 #ffffffa6,0 3px 6px #0008!important}
:root #battle-status{font-family:var(--wr-font-display);font-weight:800;color:var(--wr-gold);text-shadow:var(--wr-text-emboss);border-color:#d9a94a;background:var(--wr-panel);box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff26,0 6px 12px #0008}
:root .battle-start{font-family:var(--wr-font-display);font-weight:800;text-shadow:0 1px 0 #6b4508,0 2px 3px #0008}
:root :is(.server-battle-ui>header,.server-deck){border-color:#10142a;background:var(--wr-wood-face);box-shadow:inset 0 1px 0 #ffe2b04d,0 6px 18px #0008}
:root .server-battle-message{font-family:var(--wr-font-display);font-weight:800;color:var(--wr-gold);text-shadow:var(--wr-text-emboss);background:var(--wr-panel);border-color:#d9a94a}

@media (max-width:650px){
 :root #menu h1{font-size:38px}
}
html.reduce-motion #home-tabs button{transition:none}
/* Online header avatar (profile-panel.css hides the shield glyph in favour of the account avatar): gold portrait coin. */
:root .mode-online #home-profile .account-header-avatar{border-color:#e8b445;box-shadow:0 0 0 1px var(--wr-ink),0 3px 6px #0009}
/* Desktop: lift "← Welcome" next to the brand so it no longer touches the sandbox panel's top edge. */
@media (min-width:701px){:root body.mode-sandbox #mode-exit{top:44px;left:286px}}
/* Welcome: the panel is phone-width at every size, so the Battlefield select gets the full row and its button sits under it. */
:root body.mode-sandbox #menu .map-picker{grid-template-columns:minmax(0,1fr)}
:root body.mode-sandbox #menu .map-picker>button{width:100%}
/* Tablet widths: the troop picker cannot sit beside the panel without covering half of it, so it covers the panel fully (as on phones). */
@media (min-width:701px) and (max-width:940px){:root body.mode-sandbox #army-picker{left:4vw;right:auto}}
/* Settings window near full width: keep the round close button inside the viewport. */
@media (min-width:641px) and (max-width:900px){:root .rumble-close{top:-14px;right:-6px}}
/* In battle on phones/tablets the build tag would sit on the hand tray; desktop keeps it in the free corner. */
@media (max-width:1000px){:root body.battle #sandbox-version{display:none}}
/* Settings tabs were sized for a condensed face; with the wider display sans they use Title Case and a smaller size so labels stay inside their tabs. */
:root .sp-tab{font-size:calc(16px * var(--rk-s,1));letter-spacing:0;text-transform:none;gap:6px}
@media (max-width:640px){:root .sp-tab{font-size:calc(12px * var(--rk-s,1));gap:3px}}
/* Shop grid "Empty" stamp: sized for the old condensed face; scale it to the slot so it stays on its plate. */
:root .mode-online #lobby-panel .grid-machine .market-slot.empty strong{font-size:clamp(16px,5.4vw,28px)}

/* Overtime: the battle timer digits turn ember red (the "2x GOLD" tag below stays gold). */
:root #hud #timer.battle-overtime,:root .server-battle-ui .battle-overtime{color:#ff8a76!important;text-shadow:0 0 6px rgba(214,52,34,.85),0 1px 0 #3d0a06!important;border-color:#c9573f!important;filter:drop-shadow(0 0 5px #d8402c)!important}

/* Every popup's close: one round red × centred under the panel (popup-dismiss.js places it). */
:root .wr-x-under.wr-x-under{z-index:30;display:grid!important;place-items:center;width:54px!important;height:54px!important;min-width:0!important;min-height:0!important;padding:0 0 4px!important;box-sizing:border-box;border-radius:50%!important;border:4px solid #697073!important;
 background:radial-gradient(ellipse 80% 50% at 50% 12%,#ffffff70,#fff0 70%),linear-gradient(180deg,var(--wr-garnet-hi,#f0644c),var(--wr-garnet,#a51b17) 65%)!important;box-shadow:0 0 0 3px #292c34,inset 0 -3px 0 var(--wr-garnet-lo,#6e120e),0 4px 10px #000a!important;
 color:#fff7db!important;font:800 34px/1 Arial,sans-serif!important;text-shadow:0 2px 0 #5a0c08!important;cursor:pointer;opacity:1!important;visibility:visible!important}
/* Resources (ui-shell.js), sized like Rumble's: a small dropdown in the game's own panel style under the tapped counter, arrow pointing at it;
   pill rows, number right, icon on the end. */
:root .header-popup.wallet-drop{position:fixed;transform:none;width:min(300px,calc(100vw - 16px));max-height:none;margin:0;padding:12px 12px 12px 10px;overflow:visible;box-sizing:border-box;border-radius:12px}
/* the arrow is a notch in the panel: a gold triangle standing on the 3px border (same gold as the panel border), and a fill triangle in the
   panel's top colour, 3px inside it, reaching down over the border so the border opens under the notch */
:root .header-popup.wallet-drop:before,:root .header-popup.wallet-drop:after{content:'';position:absolute;pointer-events:none;clip-path:polygon(50% 0,100% 100%,0 100%)}
:root .header-popup.wallet-drop:before{top:-17px;left:calc(var(--arrow-x,50%) - 14px);width:28px;height:14px;background:rgb(217,169,74)}
:root .header-popup.wallet-drop:after{top:-12.8px;left:calc(var(--arrow-x,50%) - 12.8px);width:25.6px;height:12.8px;background:rgb(66,75,105)}
.wallet-drop__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.wallet-drop__row{position:relative;display:flex;align-items:center;justify-content:flex-end;height:34px;padding:0 40px 0 10px;border-radius:9px 17px 17px 9px;background:linear-gradient(#5f7db0,#3b5486);box-shadow:inset 0 2px 0 #ffffff33,inset 0 -2px 0 #22345a;clip-path:polygon(6px 0,100% 0,100% 100%,0 100%)}
.wallet-drop__row.is-wide{grid-column:1/-1}
.wallet-drop__row b{font:900 20px/1 var(--wr-font-display,'Rubik',sans-serif);color:#fff;text-shadow:0 2px 0 #1b2440,1px 0 0 #1b2440,-1px 0 0 #1b2440;letter-spacing:.01em;white-space:nowrap}
.wallet-drop__row .resource-icon{position:absolute;right:-6px;top:50%;width:42px;height:42px;transform:translateY(-50%);object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}
.wallet-drop__row.is-wide .resource-icon{width:46px;height:46px}
:root .wr-x-under.wr-x-under:hover{filter:brightness(1.1)}
:root .wr-x-under.wr-x-under:active{filter:brightness(.92)}