/* =====================================================================
   PvP arena, Guild / Social and Shop G.R.I.D. screens (docs/ui-style-guide.md
   sections 0a, 6 and 8). Look comes from the shared WRUI component classes in
   ui-system.css (.wr-frame, .wr-plaque, .wr-btn, .wr-tray, .wr-row, .wr-tier,
   .wr-progress, .wr-portrait, .wr-chest, .wr-tab, .wr-bar). This file only does
   layout, sizing and a few small accents from the colour tokens: no textures,
   no hard-coded fonts. Loaded after ui-system.css; ":is(#wr-x,html)" adds one
   id of specificity so these rules beat the legacy per-screen stylesheets.
   ===================================================================== */

/* ---------- Shared ---------- */
:is(#wr-x,html) :is(.wrs-pvp,.wrs-social,.wrs-shop){color:var(--wr-text);font-family:var(--wr-font-body)}
:is(#wr-x,html) :is(.wrs-pvp,.wrs-social,.wrs-shop) .wrs-note{margin:8px 2px 0;color:var(--wr-text-dim);font:500 14px/1.35 var(--wr-font-body)}
:is(#wr-x,html) .wrs-tray-title{margin:0 0 8px;color:var(--wr-gold);font:800 15px/1.1 var(--wr-font-display);letter-spacing:.04em;text-align:center;text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) :is(.wrs-pvp,.wrs-social,.wrs-shop) [hidden]{display:none!important}
.wrs-insignia{display:block;flex:none;width:44px;height:52px;filter:drop-shadow(0 2px 3px #0009)}
.wrs-insignia>svg{width:100%;height:100%;display:block}

/* =====================================================================
   PvP: arena (ranked), ranks & rewards ladder, friendly duel
   ===================================================================== */
:is(#wr-x,html) :is(#wr-x,body) .pvp-dialog.menu-popup{width:min(460px,calc(100vw - 12px));max-width:none;max-height:calc(100dvh - 12px);padding:4px 2px 6px!important;overflow:auto;border:0!important;background:none!important;box-shadow:none!important;scrollbar-width:thin}
:is(#wr-x,html) .pvp-dialog.menu-popup::backdrop{background:radial-gradient(ellipse at 50% 30%,#2b3350d9,#07060be6 75%)}
:is(#wr-x,html) .pvp-dialog>.popup-close{position:absolute!important;top:66px;right:4px;z-index:6}
:is(#wr-x,html) .pvp-dialog>.popup-status{margin:8px 14px 2px;color:var(--wr-text-dim);font:500 14px/1.3 var(--wr-font-body);text-align:center}
:is(#wr-x,html) .wrs-pvp.wr-frame{margin:60px 0 0;padding:40px 12px 14px}
:is(#wr-x,html) .wrs-pvp>.wr-crest .wr-medallion>img{width:44px;height:44px;filter:drop-shadow(0 1px 1px #0008)}
.wrs-pvp-head{position:relative;display:flex;align-items:center;justify-content:center;margin:0 0 8px}
:is(#wr-x,html) .wrs-pvp .pvp-title{margin:0 auto;min-width:min(72%,280px)}
.wrs-pvp .pvp-info{position:absolute;right:0;top:50%;margin-top:-22px}
:is(#wr-x,html) .wrs-pvp .wrs-tabs{display:flex;gap:4px;margin:0 2px;padding:0}
:is(#wr-x,html) .wrs-pvp .wrs-tabs .wr-tab{flex:1;min-width:0}
:is(#wr-x,html) .wrs-pvp>.pvp-view{display:flex;flex-direction:column;gap:10px;padding:10px 0 0}
/* Weekly rule cards: sealed until the server provides weekly modifiers. */
.wrs-rules{padding:10px}
.wrs-rule-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wrs-rule{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:92px;padding:6px 4px 7px;border-radius:8px;overflow:hidden;
 background:radial-gradient(ellipse 80% 60% at 50% 25%,#ffffff1f,#fff0 70%),linear-gradient(var(--wr-slate),var(--wr-slate-lo) 60%,var(--wr-slate-deep));box-shadow:0 0 0 1px var(--wr-ink),inset 0 0 0 1px var(--wr-gold-lo),inset 0 1px 0 #ffffff2e,0 3px 6px #0008}
.wrs-rule-art{position:absolute;inset:8px 18% 30px;display:grid;place-items:center;opacity:.4;filter:grayscale(.5)}
.wrs-rule-art>svg{width:100%;height:100%}
.wrs-rule.is-sealed::after{content:'?';position:absolute;top:16px;left:50%;transform:translateX(-50%);color:var(--wr-gold);font:900 30px/1 var(--wr-font-display);text-shadow:var(--wr-text-shadow)}
.wrs-rule-name{position:relative;color:var(--wr-text);font:700 13px/1.05 var(--wr-font-body);text-align:center;text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) .wrs-rules .wrs-rules-note{margin:8px 0 0;color:var(--wr-text-dim);font:700 14px/1.2 var(--wr-font-body);text-align:center}
/* Rank panel. */
.wrs-rank{padding:10px 12px 12px}
.wrs-rank-head{display:flex;align-items:center;justify-content:center;gap:12px}
:is(#wr-x,html) .wrs-pvp .pvp-rank{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0;border:0}
:is(#wr-x,html) .wrs-pvp .pvp-rank strong{color:var(--wr-text);font:900 26px/1 var(--wr-font-display);letter-spacing:.02em;text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) .wrs-pvp .pvp-rank b{color:var(--wr-gold);font:800 16px/1 var(--wr-font-body);text-shadow:var(--wr-text-shadow)}
.wrs-rank-bar{display:flex;align-items:center;gap:8px;margin-top:10px}
:is(#wr-x,html) .wrs-pvp .wrs-board-btn{flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0!important}
.wrs-board-btn>i,.wrs-board-btn svg{display:block;width:24px;height:24px}
:is(#wr-x,html) .wrs-pvp .wrs-progress{flex:1;height:26px;margin:0}
.wrs-progress-note{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#fff;font:700 13px/1 var(--wr-font-body);text-shadow:0 1px 2px #000}
/* Victory Road: accent bar header over a tray with evenly spaced chests on a rail. */
.wrs-road{display:flex;flex-direction:column}
:is(#wr-x,html) .wrs-pvp .wrs-road-head{margin:0;border-radius:8px 8px 0 0;font-size:16px}
:is(#wr-x,html) .wrs-pvp .wrs-road-body{padding:10px 6px;border-radius:0 0 8px 8px}
:is(#wr-x,html) .wrs-pvp .pvp-prizes{position:relative;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:0;padding:0;overflow:visible}
.wrs-road-rail{position:absolute;left:calc(50% / var(--n,7));right:calc(50% / var(--n,7));top:13px;height:10px;border-radius:5px;background:linear-gradient(#07060b,#1d2338);box-shadow:0 0 0 1px var(--wr-ink),0 0 0 2px var(--wr-gold-lo),inset 0 2px 3px #000}
.wrs-road-rail>i{position:absolute;inset:1px auto 1px 0;max-width:100%;border-radius:4px;background:linear-gradient(#ffc070,#e8682a 55%,#a8361a)}
:is(#wr-x,html) .wrs-pvp .pvp-prize{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;min-height:0;height:auto;padding:0 0 2px;border:0;border-radius:6px;background:none;box-shadow:none;cursor:default;opacity:1;filter:none}
:is(#wr-x,html) .wrs-pvp .pvp-prize .wr-chest{width:36px;height:32px}
:is(#wr-x,html) .wrs-pvp .pvp-prize:not(.is-claimed):not(.claimable) .wr-chest{filter:brightness(.7) saturate(.6)}
:is(#wr-x,html) .wrs-pvp .pvp-prize.claimable{cursor:pointer}
:is(#wr-x,html) .wrs-pvp .pvp-prize.claimable .wr-chest{animation:wrs-chest 1.4s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--wr-gold))}
@keyframes wrs-chest{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-3px) rotate(-4deg)}60%{transform:translateY(-3px) rotate(4deg)}}
:is(#wr-x,html) .wrs-pvp .pvp-prize .wr-check{top:6px}
:is(#wr-x,html) .wrs-pvp .pvp-prize strong{color:var(--wr-text);font:800 14px/1 var(--wr-font-body);text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) .wrs-pvp .pvp-prize strong.is-gold{color:var(--wr-gold)}
:is(#wr-x,html) .wrs-pvp .pvp-prize strong.is-dust{color:var(--wr-purple-hi)}
:is(#wr-x,html) .wrs-pvp .pvp-prize small{color:var(--wr-text-dim);font:600 11px/1.1 var(--wr-font-body);white-space:nowrap}
:is(#wr-x,html) .wrs-pvp .pvp-prize.claimable small{color:var(--wr-emerald-hi);font-weight:800}
:is(#wr-x,html) .wrs-pvp .pvp-prize:focus-visible{outline:2px solid var(--wr-gold-hi);outline-offset:2px}
:is(#wr-x,html) .wrs-pvp .wrs-road-body>.wrs-note{margin-top:10px;text-align:center}
/* Top leaders: portrait coins with score chips, crown for first, your own coin after a divider. */
.wrs-leaders{padding:10px 6px}
.wrs-leader-row{display:flex;align-items:flex-start;justify-content:space-around;gap:4px;min-height:92px;color:var(--wr-text-dim);font-size:14px}
.wrs-coin{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;width:24%}
:is(#wr-x,html) .wrs-coin>.wr-portrait{width:56px;height:56px}
.wrs-crown{position:absolute;left:calc(50% - 36px);top:-6px;width:24px;height:18px;filter:drop-shadow(0 1px 1px #000)}
.wrs-crown>svg{display:block;width:100%;height:100%}
.wrs-coin-score{margin-top:0;position:relative;padding:2px 7px;border-radius:5px;color:var(--wr-gold-hi);font:800 13px/1.15 var(--wr-font-body);background:linear-gradient(var(--wr-slate-lo),var(--wr-slate-deep));box-shadow:0 0 0 1px var(--wr-ink),inset 0 0 0 1px var(--wr-gold-lo);white-space:nowrap}
.wrs-coin.is-self .wrs-coin-score{color:#fff;background:linear-gradient(var(--wr-sapphire-hi),var(--wr-sapphire-lo))}
.wrs-coin-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wr-text-dim);font:600 12px/1.1 var(--wr-font-body)}
.wrs-leader-sep{align-self:stretch;flex:none;width:2px;margin:6px 2px 20px;border-radius:1px;background:var(--wr-gold-lo)}
/* Champion picker coins. */
:is(#wr-x,html) .wrs-pvp .pvp-champions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:2px;overflow:visible}
:is(#wr-x,html) .wrs-pvp .pvp-champion{flex:0 0 50px;width:50px;height:50px;min-height:0;max-height:none;padding:0;border:2px solid var(--wr-pewter-hi);border-radius:50%;overflow:hidden;background:var(--wr-slate-deep);box-shadow:0 0 0 1px var(--wr-ink),0 2px 5px #0009;filter:saturate(.7) brightness(.85)}
:is(#wr-x,html) .wrs-pvp .pvp-champion.selected{filter:none;border-color:var(--wr-gold);box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 10px 2px #7fe3f088}
:is(#wr-x,html) .wrs-pvp .pvp-champion img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
/* Back / Play! */
.wrs-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 2px 0}
.wrs-actions.is-single{grid-template-columns:minmax(0,220px);justify-content:center}
:is(#wr-x,html) .wrs-actions .wr-btn{display:flex;width:100%;min-width:0;margin:0}
/* Arena: no "Choose your champion" status line; the green Play! button glows softly in gold as the next step (static under reduced motion). */
@keyframes pvp-play-next{0%,100%{filter:drop-shadow(0 0 4px #ffd77acc)}50%{filter:drop-shadow(0 0 12px #ffd77a) drop-shadow(0 0 3px #fff1c4) brightness(1.06)}}
:is(#wr-x,html) .wrs-actions .pvp-play--next:not(:disabled){filter:drop-shadow(0 0 9px #ffd77a);animation:pvp-play-next 2.2s ease-in-out infinite}
html.reduce-motion .wrs-actions .pvp-play--next{animation:none!important}
@media (prefers-reduced-motion:reduce){.wrs-actions .pvp-play--next{animation:none!important}}
/* Ranks & Rewards ladder. */
:is(#wr-x,html) .wrs-standing{margin:0;color:var(--wr-gold);font:700 15px/1.2 var(--wr-font-body);text-align:center}
:is(#wr-x,html) .wrs-pvp .wrs-ladder{position:relative;display:flex;flex-direction:column;gap:5px;max-height:min(58dvh,560px);padding:8px 6px;overflow:auto;scrollbar-width:thin}
:is(#wr-x,html) .wrs-band{display:flex;flex:none;align-items:center;gap:10px;margin:6px 0 2px;padding:6px 12px;text-align:left}
.wrs-band .wrs-insignia{width:32px;height:38px}
.wrs-band-copy{flex:1;min-width:0}
:is(#wr-x,html) .wrs-band .wr-tier__title{margin:0;font-size:18px}
.wrs-band-copy small{color:#fff;font:700 13px var(--wr-font-body);text-shadow:0 1px 2px #000}
.wrs-band-done{position:relative;padding-left:24px;color:#fff;font:800 13px var(--wr-font-body);text-shadow:0 1px 2px #000}
.wrs-band-done::before{content:'';position:absolute;left:0;top:50%;width:20px;height:16px;margin-top:-9px;background:linear-gradient(#b8f59a,#3f9a3a 55%,#1d5a1f);clip-path:polygon(0 55%,18% 38%,40% 60%,82% 0,100% 18%,40% 100%)}
.wrs-band:not(.is-reached){filter:saturate(.5) brightness(.8)}
:is(#wr-x,html) .wrs-lrow{flex:none;gap:8px;padding:3px 10px 3px 4px}
:is(#wr-x,html) .wrs-lrow .wr-portrait{width:38px;height:38px;flex:none}
.wrs-pos{flex:none;width:34px;color:var(--wr-gold);font:800 14px var(--wr-font-body);text-align:center}
.wrs-lrow.is-self .wrs-pos,.wrs-lrow.is-self .wrs-tag{color:inherit}
.wrs-tag{color:var(--wr-gold);font-weight:700}
:is(#wr-x,html) .wrs-lrow .wr-row__meta{font-weight:800;white-space:nowrap}
/* Friendly duel. */
:is(#wr-x,html) .wrs-duel{display:flex;flex-direction:column;gap:8px}
:is(#wr-x,html) .wrs-pvp .wrs-duel label{display:flex;flex-direction:column;gap:5px;margin:4px 0 0;color:var(--wr-gold);font:700 15px var(--wr-font-body)}
:is(#wr-x,html) .wrs-pvp .wrs-duel :is(input,select){display:block;width:100%;margin:0}
:is(#wr-x,html) .wrs-pvp .wrs-duel input{font:800 20px/1 var(--wr-font-display);letter-spacing:.12em;text-transform:uppercase}
.wrs-duel-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
:is(#wr-x,html) .wrs-duel-row .wr-btn{min-width:0;padding-inline:8px;font-size:16px!important;white-space:normal}
:is(#wr-x,html) .wrs-pvp .duel-code{min-height:28px;margin:0;color:var(--wr-gold-hi);font:900 24px/1.1 var(--wr-font-display);letter-spacing:.14em;text-align:center}
/* Matchmaking search panel. */
:is(#wr-x,html) .coop-queue.pvp-queue{padding:44px 18px 34px;border-radius:12px;background:linear-gradient(var(--wr-slate),var(--wr-slate-deep));border:2px solid var(--wr-gold-lo);box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff2e,0 18px 40px #000c;overflow:visible;top:52%}
:is(#wr-x,html) .pvp-queue>.wr-crest{top:-62px}
:is(#wr-x,html) .pvp-queue>.wr-crest .queue-swords{width:44px;height:44px}
:is(#wr-x,html) .pvp-queue h2.wr-plaque{margin:0 auto 10px;color:var(--wr-gold);font-family:var(--wr-font-display)}
:is(#wr-x,html) .pvp-queue p{color:var(--wr-text-dim);font:500 15px/1.4 var(--wr-font-body)}
:is(#wr-x,html) .pvp-queue .pvp-wait{color:var(--wr-text);font-weight:700}
@media (max-width:420px){
 :is(#wr-x,html) .wrs-pvp.wr-frame{padding:40px 8px 12px}
 :is(#wr-x,html) .wrs-coin>.wr-portrait{width:50px;height:50px}
 :is(#wr-x,html) .wrs-pvp .pvp-prize .wr-chest{width:32px;height:28px}
 .wrs-road-rail{top:11px}
}
/* Wide screens: the ranked hall spreads into two columns so Back / Play! stay on screen. */
@media (min-width:900px) and (min-height:600px){
 :is(#wr-x,html) :is(#wr-x,body) .pvp-dialog.menu-popup:has(.pvp-ranked:not([hidden])){width:min(860px,calc(100vw - 40px))}
 :is(#wr-x,html) .wrs-pvp>.pvp-ranked{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:12px}
 :is(#wr-x,html) .wrs-pvp>.pvp-ranked>.wrs-actions{align-self:end}
}
html.reduce-motion .wrs-pvp .pvp-prize.claimable .wr-chest{animation:none}
@media (prefers-reduced-motion:reduce){.wrs-pvp .pvp-prize.claimable .wr-chest{animation:none}}

/* =====================================================================
   Social: Guild page (reference layout), Friends, Leaderboard
   ===================================================================== */
:is(#wr-x,html) .wrs-social{display:flex;flex-direction:column;gap:12px;width:100%;max-width:640px;margin:0 auto}
:is(#wr-x,html) .wrs-social>.social-tabs{display:flex;gap:4px;margin:0;padding:0 4px}
:is(#wr-x,html) .wrs-social>.social-tabs .wr-tab{flex:1;min-width:0;padding-inline:6px;border-radius:8px 8px 0 0;font-size:15px;overflow:hidden;text-overflow:ellipsis}
:is(#wr-x,html) .wrs-social>.social-tabs .wr-tab[aria-selected=true]{box-shadow:none}
/* style.css "#lobby-panel button" (id specificity) flattens .wr-tab inside the lobby; restate the component look here. */
:is(#wr-x,html) .wrs-social>.social-tabs .wr-tab{color:#dfe3f0;border:2px solid var(--wr-ink);border-bottom:0;background:linear-gradient(180deg,#ffffff14,#fff0 50%),linear-gradient(180deg,#3a4468,#262d48)}
:is(#wr-x,html) .wrs-social>.social-tabs .wr-tab.is-active{color:#fff;background:linear-gradient(180deg,#ffffff24,#fff0 50%),linear-gradient(180deg,var(--wr-wood-hi,#9a6a3e),var(--wr-wood))}
.wrs-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(#wr-x,html) .wrs-guild-view{width:100%;max-width:560px;margin:0 auto}
:is(#wr-x,html) .wrs-guild-frame.wr-frame{margin:66px 0 0;padding:40px 12px 14px;grid-column:auto}
:is(#wr-x,html) .wrs-guild-frame>.wr-crest .wr-medallion>i{width:42px;height:42px;display:block}
:is(#wr-x,html) .wrs-guild-frame>.wr-crest .wr-medallion svg{width:100%;height:100%;display:block}
:is(#wr-x,html) .wrs-guild-plaque{margin:0 auto 10px;max-width:calc(100% - 44px)}
:is(#wr-x,html) .wrs-guild-plaque .wr-plaque__text{display:block;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#wr-x,html) .social-guild-body{display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
/* Banner shield + facts + settings gear. */
.wrs-guild-info{position:relative;display:flex;align-items:center;gap:14px;padding:0 4px}
.wrs-emblem{display:block;flex:none;width:76px;height:88px;filter:drop-shadow(0 3px 4px #000a)}
.wrs-emblem>svg{display:block;width:100%;height:100%}
.wrs-emblem--small{width:38px;height:44px}
:is(#wr-x,html) .wrs-guild-facts{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:3px}
:is(#wr-x,html) .wrs-guild-facts>div{display:flex;gap:6px;min-width:0}
:is(#wr-x,html) .wrs-guild-facts :is(dt,dd){margin:0;font:500 15px/1.25 var(--wr-font-body)}
:is(#wr-x,html) .wrs-guild-facts dt{color:var(--wr-text-dim)}
:is(#wr-x,html) .wrs-guild-facts dd{color:var(--wr-text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#wr-x,html) .wrs-gear{align-self:flex-start;flex:none;width:44px;min-width:44px;height:44px;padding:0!important}
.wrs-gear>i,.wrs-gear svg{display:block;width:24px;height:24px}
:is(#wr-x,html) .wrs-guild-desc{margin:0;padding:10px 4px 0;border-top:1px solid #ffffff1f;color:var(--wr-text);font:500 15px/1.4 var(--wr-font-body);overflow-wrap:anywhere}
:is(#wr-x,html) .social-guild-stats{margin:0;padding:0 4px;color:var(--wr-text-dim);font:500 13px/1.3 var(--wr-font-body)}
.wrs-guild-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0}
:is(#wr-x,html) .wrs-guild-actions .wr-btn{width:100%;min-width:0}
/* Sections: accent bar header over a tray. */
:is(#wr-x,html) .wrs-section{display:flex;flex-direction:column;margin:0;padding:0;border:0;background:none;box-shadow:none}
:is(#wr-x,html) .wrs-section-head{margin:0;border-radius:8px 8px 0 0;font-size:16px}
:is(#wr-x,html) .wrs-section-body{display:flex;flex-direction:column;gap:8px;border-radius:0 0 8px 8px;padding:10px}
/* Members bar + roster. */
:is(#wr-x,html) .wrs-members-bar{margin:4px 0 0;font-size:17px}
:is(#wr-x,html) .wrs-members-bar .wrs-sort{min-height:40px;padding-block:2px}
:is(#wr-x,html) .wrs-social .social-roster{gap:5px;max-height:none}
:is(#wr-x,html) .wrs-social .social-roster-row{display:flex;align-items:center;gap:8px;min-height:52px;padding:4px 8px 4px 4px;flex-wrap:wrap}
:is(#wr-x,html) .wrs-avatar{flex:none;width:42px;height:42px}
:is(#wr-x,html) .wrs-avatar>img{width:100%;height:100%;margin:0;border:0;border-radius:50%;object-fit:cover}
:is(#wr-x,html) .wrs-social .social-roster-row>.presence-dot{flex:none;width:11px;height:11px;margin:0 0 4px -16px;align-self:flex-end;position:relative;z-index:1;border:2px solid var(--wr-ink)}
.wrs-member{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
:is(#wr-x,html) .wrs-member .wr-row__name{flex:none;font-size:16px}
.wrs-member-trophies{color:var(--wr-text-dim);font:600 13px/1.1 var(--wr-font-body)}
:is(#wr-x,html) .is-self .wrs-member-trophies{color:inherit;opacity:.8}
.wrs-role{display:flex;align-items:center;gap:4px;flex:none}
.wrs-role>small{font:700 13px/1 var(--wr-font-body);color:var(--wr-text-dim)}
.wrs-role--leader>small{color:var(--wr-gold)}
:is(#wr-x,html) .is-self .wrs-role>small{color:inherit}
.wrs-chevron{display:block;width:24px;height:30px;filter:drop-shadow(0 1px 1px #000a)}
.wrs-chevron>svg{display:block;width:100%;height:100%}
.wrs-row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:none}
@media (max-width:520px){:is(#wr-x,html) .social-roster-row:has(.wrs-row-actions) .wrs-role>small{display:none}}
:is(#wr-x,html) .wrs-row-actions .wr-btn{min-height:36px;padding:2px 12px;font-size:14px!important}
/* Join requests and friends rows. */
:is(#wr-x,html) .wrs-social .data-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:48px;margin:0;padding:6px 8px}
.wrs-row-name{flex:1;min-width:0;font:700 16px/1.2 var(--wr-font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#wr-x,html) .wrs-social .data-row .wr-btn--small{min-height:38px;padding:2px 12px;font-size:14px!important}
/* Guild raid meter: thick bar with tier chests, then tier rows. */
:is(#wr-x,html) .guild-raid-summary{margin:0;color:var(--wr-text);font:700 15px/1.3 var(--wr-font-body);text-align:center}
:is(#wr-x,html) .wrs-social .guild-raid-meter{position:relative;height:22px;margin:10px 18px 14px;overflow:visible;border:0;border-radius:6px;background:linear-gradient(#07060b,#1d2338);box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-gold-lo),inset 0 2px 4px #000}
:is(#wr-x,html) .wrs-social .guild-raid-fill{position:absolute;inset:2px auto 2px 2px;max-width:calc(100% - 4px);border-radius:4px;background:linear-gradient(#b8f59a,var(--wr-emerald-hi) 45%,var(--wr-emerald-lo))}
:is(#wr-x,html) .guild-raid-chest{position:absolute;top:50%;width:34px;height:30px;transform:translate(-50%,-55%)}
:is(#wr-x,html) .guild-raid-chest:not(.is-ready):not(.is-claimed){filter:brightness(.7) saturate(.6)}
:is(#wr-x,html) .guild-raid-chest.is-ready{filter:drop-shadow(0 0 6px var(--wr-gold))}
:is(#wr-x,html) .wrs-social .guild-raid-tiers{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
:is(#wr-x,html) .wrs-social .guild-raid-tier{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:0;padding:4px 10px;border:0;border-radius:6px;background:linear-gradient(#ffffff12,#ffffff05);box-shadow:inset 0 0 0 1px #ffffff1a;font:600 14px/1.25 var(--wr-font-body)}
:is(#wr-x,html) .wrs-social .guild-raid-tier.is-claimable{box-shadow:inset 0 0 0 1px var(--wr-gold)}
:is(#wr-x,html) .wrs-social .guild-raid-tier.is-claimed{opacity:.7}
:is(#wr-x,html) .wrs-social .guild-raid-tier small{color:var(--wr-text-dim);text-align:right}
:is(#wr-x,html) .wrs-social :is(.guild-raid-note,.guild-raid-contributors p){margin:0;color:var(--wr-text-dim);font:500 13px/1.35 var(--wr-font-body)}
/* Chat panel. */
:is(#wr-x,html) .wrs-social .guild-chat{margin:0}
:is(#wr-x,html) .wrs-social .chat-log{height:220px;margin:0;padding:8px;overflow-y:auto;border-radius:6px;overscroll-behavior:contain}
:is(#wr-x,html) .wrs-social .chat-bubble{display:grid;grid-template-columns:32px 1fr auto;align-items:center;column-gap:8px;margin:0 0 6px;padding:6px 10px 7px 6px;border:0;border-radius:8px;background:linear-gradient(#f4ead2,#e2d3ae);box-shadow:0 1px 3px #0008;color:var(--wr-parch-ink)}
:is(#wr-x,html) .wrs-social .chat-bubble.is-mine{background:linear-gradient(#dbe8ff,#b9cdf0)}
:is(#wr-x,html) .wrs-social .chat-bubble>img{grid-row:span 2;width:32px;height:32px;margin:0;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--wr-gold-lo)}
:is(#wr-x,html) .wrs-social .chat-bubble>strong{font:800 14px/1.1 var(--wr-font-body);color:var(--wr-parch-ink)}
:is(#wr-x,html) .wrs-social .chat-bubble>time{font:600 12px var(--wr-font-body);color:#6a5a44}
:is(#wr-x,html) .wrs-social .chat-bubble>p{grid-column:2/-1;margin:2px 0 0;color:var(--wr-parch-ink);font:500 14px/1.35 var(--wr-font-body);overflow-wrap:anywhere}
:is(#wr-x,html) .wrs-social .chat-bubble.chat-system{display:flex;justify-content:center;gap:8px;padding:4px 8px;background:none;box-shadow:none;border:0;color:var(--wr-gold)}
:is(#wr-x,html) .wrs-social .chat-bubble.chat-system>p{margin:0;color:var(--wr-gold);font:600 13px var(--wr-font-body);font-style:italic}
:is(#wr-x,html) .wrs-social .chat-bubble.chat-system>time{color:var(--wr-text-dim)}
:is(#wr-x,html) .wrs-social .guild-chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center;margin:0}
:is(#wr-x,html) .wrs-social .guild-chat-compose label{grid-column:1;margin:0;font-size:0;color:transparent}
:is(#wr-x,html) .wrs-social .guild-chat-compose input{width:100%;font-size:15px}
:is(#wr-x,html) .wrs-social .guild-chat-counter{grid-column:1;grid-row:2;padding:0 2px;color:var(--wr-text-dim);font:600 12px var(--wr-font-body)}
:is(#wr-x,html) .wrs-social .guild-chat-counter.is-warn{color:var(--wr-gold)}
:is(#wr-x,html) .wrs-social .guild-chat-counter.is-over{color:var(--wr-garnet-hi)}
:is(#wr-x,html) .wrs-social .guild-chat-compose .wr-btn{grid-column:2;grid-row:1}
/* Directory (no guild yet). */
:is(#wr-x,html) .wrs-create label{display:flex;flex-direction:column;gap:4px;margin:0;color:var(--wr-gold);font:700 14px var(--wr-font-body)}
:is(#wr-x,html) .wrs-create :is(input,select){width:100%}
:is(#wr-x,html) .wrs-dir-row{gap:10px;min-height:56px;padding:4px 10px 4px 6px}
.wrs-full{color:var(--wr-text-dim);font:700 13px var(--wr-font-body)}
/* Friends tab and leaderboard keep their arrangement; tidy spacing on the shared components. */
:is(#wr-x,html) .wrs-social .social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
:is(#wr-x,html) .wrs-social .social-card{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px}
:is(#wr-x,html) .wrs-card-title{margin:0;color:var(--wr-gold);font:800 18px/1.15 var(--wr-font-display);text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) .wrs-sub{margin:4px 0 0;color:var(--wr-text);font:800 15px var(--wr-font-display)}
.wrs-add-friend{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}
:is(#wr-x,html) .wrs-add-friend label{display:flex;flex-direction:column;gap:4px;margin:0;color:var(--wr-text-dim);font:600 13px var(--wr-font-body)}
:is(#wr-x,html) .wrs-social .social-friends{display:flex;flex-direction:column;gap:6px}
:is(#wr-x,html) .wrs-friend-name{flex:1;min-width:0;display:flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;background:none;box-shadow:none;color:var(--wr-text);font:700 16px var(--wr-font-body);text-align:left;cursor:pointer}
:is(#wr-x,html) .wrs-friend-name>.presence-dot{margin:0}
.wrs-row-meta{color:var(--wr-text-dim);font:600 13px var(--wr-font-body)}
:is(#wr-x,html) .wrs-friend .wrs-row-actions{padding-left:0;flex:1 0 100%}
:is(#wr-x,html) .wrs-social .social-board{display:flex;flex-direction:column;gap:10px;padding:12px}
:is(#wr-x,html) .wrs-social .social-board-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
:is(#wr-x,html) .wrs-social .social-board-head h2{flex:0 1 auto;margin:0}
:is(#wr-x,html) .wrs-social .social-board-self{flex:1 1 100%;margin:0;color:var(--wr-gold);font:700 14px var(--wr-font-body);text-align:center}
:is(#wr-x,html) .wrs-social .social-board-list{margin:0;max-height:min(56dvh,560px);overflow:auto;padding:2px}
:is(#wr-x,html) .wrs-social .social-board-row{display:grid;grid-template-columns:2.6em 40px minmax(0,1fr) auto;gap:2px 8px;min-height:52px;padding:4px 10px 4px 6px}
:is(#wr-x,html) .wrs-social .social-board-portrait{width:40px;height:40px;border:2px solid var(--wr-gold-lo);border-radius:50%;object-fit:cover;background:var(--wr-slate-deep)}
:is(#wr-x,html) .wrs-social .social-board-pos{color:var(--wr-gold);font:800 14px var(--wr-font-body)}
:is(#wr-x,html) .wrs-social .social-board-name{display:flex;flex-direction:column;min-width:0;overflow:hidden}
:is(#wr-x,html) .wrs-social .social-board-name strong{font:800 15px/1.15 var(--wr-font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#wr-x,html) .wrs-social .social-board-name>small{font:600 12px var(--wr-font-body);opacity:.8}
:is(#wr-x,html) .wrs-social .social-board-rating{font:800 15px var(--wr-font-body);white-space:nowrap}
:is(#wr-x,html) .wrs-social .social-board-record{grid-column:3/-1;font:600 12px var(--wr-font-body);opacity:.8}
:is(#wr-x,html) .wrs-social .is-self :is(.social-board-pos,.social-guild-tag){color:inherit}
:is(#wr-x,html) .wrs-social .social-pager{display:flex;align-items:center;justify-content:center;gap:12px;font:700 14px var(--wr-font-body)}
@media (max-width:420px){
 :is(#wr-x,html) .wrs-guild-frame.wr-frame{padding:40px 8px 12px}
 :is(#wr-x,html) .wrs-social>.social-tabs .wr-tab{padding-inline:2px;font-size:14px}
 .wrs-emblem{width:64px;height:74px}
 :is(#wr-x,html) .wrs-social .guild-raid-meter{margin-inline:14px}
}

/* =====================================================================
   Shop: the G.R.I.D. (3x3 offer board in a framed machine) and the big red
   reset button panel. Two ids of specificity: the legacy shop rules use
   ".mode-online #lobby-panel .grid-machine ..." selectors.
   ===================================================================== */
:is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop{width:100%;max-width:540px;margin:66px auto 0;padding:40px 12px 14px}
:is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop>.wr-crest .wr-medallion>img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 1px 1px #0008)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-grid-title{margin:0 auto 12px}
/* Wooden board: flat warm gradient with two plank seams, thin brass trim. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-board{padding:14px 12px 16px;border:2px solid var(--wr-gold-lo);border-radius:10px;
 background:linear-gradient(90deg,#0000 33%,#0000002e 33.3%,#0000 33.8%,#0000 66.2%,#0000002e 66.6%,#0000 67%),linear-gradient(180deg,#9a6a3e,var(--wr-wood) 45%,var(--wr-wood-lo));box-shadow:0 0 0 1px var(--wr-ink),inset 0 2px 0 #ffffff26,inset 0 0 18px #0007,0 4px 10px #0008}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
/* Offer cards: slate face, rarity frame, portrait, name, price plate. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot{--tier:#8d93a3;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:0;aspect-ratio:.72;padding:5px 4px 6px;overflow:visible;color:var(--wr-text);
 border:3px solid var(--tier);border-radius:9px;background:radial-gradient(ellipse 90% 55% at 50% 30%,#ffffff24,#fff0 70%),linear-gradient(var(--wr-slate),var(--wr-slate-deep));box-shadow:0 0 0 1px var(--wr-ink),inset 0 0 0 1px #0008,inset 0 1px 0 #ffffff33,0 4px 8px #0009;cursor:pointer;transition:transform .12s,box-shadow .12s}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.tier-uncommon{--tier:#58b85a}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.tier-rare{--tier:#3d8cf0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.tier-epic{--tier:#a35ee0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.tier-legendary{--tier:#f0b43a}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot::before{content:'';position:absolute;z-index:-1;top:-24px;left:calc(50% - 5px);width:10px;height:22px;border-radius:2px;background:linear-gradient(90deg,#262a3a,#8a8f9e 50%,#262a3a);box-shadow:0 0 0 1px var(--wr-ink)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot:nth-child(-n+3)::before{display:none}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot>img:not(.resource-icon){flex:1;width:100%;min-height:0;height:auto;object-fit:contain;object-position:50% 80%}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot>.resource-icon{flex:1;width:70%;min-height:0;height:auto;object-fit:contain}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot>strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 12px/1.15 var(--wr-font-body);text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot>small{color:var(--wr-text-dim);font:600 11px/1.1 var(--wr-font-body);letter-spacing:0;text-transform:none;text-align:center}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-price{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:2px;padding:2px 4px;border:0;border-radius:6px;color:#fff;font:800 14px/1.2 var(--wr-font-body);text-shadow:0 1px 1px #000;background:linear-gradient(#0b0c14,#20253a);box-shadow:0 0 0 1px var(--wr-ink),inset 0 0 0 1px var(--wr-gold-lo)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-price>.resource-icon{width:18px;height:18px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot:hover{transform:translateY(-2px)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.selected{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 16px 4px #7fe3f099;transform:translateY(-3px)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.purchase-clear{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px #ff8a5a,0 0 12px 2px #ff8a5a66}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.sold{--tier:#5a5f70;cursor:default;opacity:1}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.sold>:not(.wrs-stamp){filter:grayscale(.9) brightness(.6)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-stamp{position:absolute;z-index:6;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-14deg);padding:2px 10px;border:3px solid #e2493b;border-radius:6px;color:#ff6a5a;font:900 18px/1 var(--wr-font-display);letter-spacing:.08em;text-transform:uppercase;background:#1a0a0899;box-shadow:0 2px 4px #000a}
/* Empty / sold-out plate: recessed slate with a small engraved diamond. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.empty{--tier:#5a5f70;justify-content:center;background:linear-gradient(#2a2f44,#161a28);box-shadow:0 0 0 1px var(--wr-ink),inset 0 3px 10px #000c}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-plate{width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffffff1a,#fff0 60%),linear-gradient(#454c66,#262b3e);box-shadow:inset 0 0 0 2px #0008,inset 0 0 0 4px #ffffff12,0 1px 0 #ffffff1a;position:relative}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-plate::after{content:'';position:absolute;inset:30%;background:linear-gradient(#8a90a4,#4a5068);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:.7}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.empty>strong{font-size:12px;color:var(--wr-muted);text-shadow:none;margin-top:6px}
/* Console under the board: cycle note + Info / Recycle, or the selected offer. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:14px 0 0;padding:12px;border:2px solid var(--wr-gold-lo);border-radius:10px;text-align:center;background:linear-gradient(var(--wr-slate-lo),var(--wr-slate-deep));box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 #ffffff1f,0 4px 10px #0008}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console h2{margin:0;padding:0 40px;color:var(--wr-gold);font:800 19px/1.15 var(--wr-font-display);text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console p{margin:0;color:var(--wr-text-dim);font:500 14px/1.35 var(--wr-font-body)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console-actions .wr-btn{width:100%;min-width:0;padding-inline:10px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console .resource-icon{width:24px;height:24px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-selection-close{position:absolute!important;top:8px;right:8px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-moves{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:2px 0 0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-moves .wr-btn{flex:1 1 30%;min-width:96px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-talent-detail{align-self:center}
/* "What this buy does" (shop-menu.js shopOfferEffect; approved shop mockup): a chip replaces a unit tile's plain "N shards" line (same 11px slot,
   tile size unchanged; "rarity up" is two short rows) and the selected-offer panel repeats it in one line. NEW = the gold button recipe at tag size;
   rarity text = unit-inspector.css --rarity; thin bar = unit-inspector.css progress tray filled with the next rarity's button colours. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot>.wrs-buy{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;height:14px;color:var(--wr-text);font:800 11px/14px var(--wr-font-body);white-space:nowrap;text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot>.wrs-buy[data-kind=prog]{gap:4px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot>.wrs-buy[data-kind=up]{flex-direction:column;gap:1px;height:26px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot>.wrs-buy[data-kind=up]>.wrs-up{height:13px;line-height:13px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-carry{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:12px;line-height:12px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-new{display:inline-block;flex:none;height:14px;padding:0 5px;border:1px solid var(--wr-ink);border-radius:4px;color:#fff;font:900 11px/12px var(--wr-font-display);letter-spacing:.06em;text-shadow:0 1px 0 #10142a,1px 0 0 #10142a99,-1px 0 0 #10142a99;background:radial-gradient(ellipse 90% 55% at 50% 0,#ffffff5c,#fff0 70%),linear-gradient(180deg,var(--wr-amber-hi),var(--wr-amber) 62%);box-shadow:inset 0 -2px 0 var(--wr-amber-lo),inset 0 1px 0 #ffffffa6,0 1px 2px #0008}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop :is(.wrs-up,.wrs-r,.wrs-bar){--r:#aeb8c3;--f-hi:var(--wr-pewter-hi);--f:var(--wr-pewter);--f-lo:var(--wr-pewter-lo)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop :is(.wrs-up,.wrs-r,.wrs-bar)[data-rarity=uncommon]{--r:#6fc25a;--f-hi:var(--wr-emerald-hi);--f:var(--wr-emerald);--f-lo:var(--wr-emerald-lo)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop :is(.wrs-up,.wrs-r,.wrs-bar)[data-rarity=rare]{--r:#5aa8f0;--f-hi:var(--wr-sapphire-hi);--f:var(--wr-sapphire);--f-lo:var(--wr-sapphire-lo)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop :is(.wrs-up,.wrs-r,.wrs-bar)[data-rarity=epic]{--r:#c07ae6;--f-hi:var(--wr-purple-hi);--f:var(--wr-purple);--f-lo:var(--wr-purple-lo)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop :is(.wrs-up,.wrs-r,.wrs-bar)[data-rarity=legendary]{--r:#f0b04a;--f-hi:var(--wr-amber-hi);--f:var(--wr-amber);--f-lo:var(--wr-amber-lo)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-up{display:inline-flex;align-items:center;gap:2px;color:var(--r)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-r{color:var(--r);font-style:normal;font-weight:800;text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-ico{display:block;flex:none;line-height:0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-ico>svg{display:block;width:100%;height:100%;overflow:visible}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-up .wrs-ico{width:8px;height:10px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-max{display:inline-flex;align-items:center;gap:2px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-max .wrs-ico{width:9px;height:8px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-max>img{display:block;flex:none;width:13px;height:13px;object-fit:contain;filter:drop-shadow(0 1px 1px #0008)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-bar{position:relative;display:flex;flex:1 1 auto;min-width:24px;max-width:44px;height:6px;padding:1px;border-radius:3px;background:#0c0a14;box-shadow:inset 0 0 0 1px var(--wr-ink),inset 0 2px 3px #000}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-bar>i{display:block;height:100%;background:linear-gradient(180deg,#ffffff59,#fff0 55%),linear-gradient(var(--f-hi),var(--f) 60%,var(--f-lo))}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-bar>.o{width:var(--own);border-radius:2px 0 0 2px;opacity:.45}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-bar>.g{width:var(--gain);border-radius:0 2px 2px 0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-bar>.f{width:var(--fill);border-radius:2px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console .wrs-effect{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;min-height:20px;white-space:nowrap}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect .wrs-new{height:18px;padding:0 7px;border-radius:5px;font-size:12px;line-height:16px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect :is(.wrs-up,.wrs-max){gap:3px;font-weight:800;text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect .wrs-up .wrs-ico{width:10px;height:12px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect .wrs-max .wrs-ico{width:11px;height:10px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console .wrs-effect .wrs-max>img{width:18px;height:18px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect :is(.wrs-max>b,b.wrs-num){color:#fff;font-weight:800;text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect .wrs-bar{flex:0 0 74px;max-width:none;height:8px;border-radius:4px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect .wrs-bar>.o{border-radius:3px 0 0 3px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect .wrs-bar>.g{border-radius:0 3px 3px 0}
/* A changed chip pops in once (gentler wr-badge-pulse); none under reduced motion. */
@keyframes wrs-buy-pop{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop :is(.wrs-buy,.wrs-effect).is-pop{animation:wrs-buy-pop .3s ease-out both}
html.reduce-motion .wrs-shop :is(.wrs-buy,.wrs-effect){animation:none!important}
@media (prefers-reduced-motion:reduce){.wrs-shop :is(.wrs-buy,.wrs-effect){animation:none!important}}
/* Big red button panel: framed hazard plate, remaining count, a domed red button and Cancel. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console.wrs-hazard{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;min-height:132px;padding:14px 12px;
 background:linear-gradient(180deg,#0000 0,#0000008c 100%),repeating-linear-gradient(-45deg,#d9a53a 0 18px,#1c1a1f 18px 36px);border:3px solid #6d7285;box-shadow:0 0 0 1px var(--wr-ink),inset 0 0 0 2px #0009,inset 0 6px 18px #000a,0 4px 10px #0008}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-hazard .grid-remaining{justify-self:start;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:5px;max-width:100%;padding:5px 9px;border-radius:8px;color:#fff;font:800 18px/1.05 var(--wr-font-body);background:#0d0b12d9;box-shadow:inset 0 0 0 1px #ffffff1f}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-hazard .grid-remaining>small{grid-column:1/-1;color:var(--wr-text-dim);font:700 12px/1.1 var(--wr-font-body);text-align:center}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-hazard .grid-remaining .resource-icon{width:22px;height:22px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-hazard .grid-cancel{justify-self:end;min-width:0;max-width:100%;padding-inline:10px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-big-red{display:grid;place-items:center;width:104px;height:104px;min-width:0;padding:0;border-radius:50%;border:6px solid transparent;cursor:pointer;
 color:#fff;font:900 22px/1 var(--wr-font-display);text-shadow:0 2px 2px #5a0a06,0 0 6px #0008;
 background:radial-gradient(circle at 38% 28%,#ffb3a6 0 8%,#ff5a44 26%,#d01e14 58%,#7a0a06 100%) padding-box,linear-gradient(#f6e2a4,#c8922a 45%,#6f4a10) border-box;
 box-shadow:0 0 0 2px var(--wr-ink),0 0 0 7px #5d6070,0 0 0 9px var(--wr-ink),inset 0 -6px 10px #5a0a06aa,0 8px 0 2px #3a0604,0 12px 18px #000a;transition:transform .08s,box-shadow .08s}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-big-red:active:not(:disabled){transform:translateY(6px);box-shadow:0 0 0 2px var(--wr-ink),0 0 0 7px #5d6070,0 0 0 9px var(--wr-ink),inset 0 -3px 8px #5a0a06aa,0 2px 0 2px #3a0604,0 4px 8px #000a}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-big-red:disabled{filter:grayscale(.75) brightness(.7);cursor:not-allowed}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-hazard .grid-help{grid-column:1/-1;margin:0;padding:4px 8px;border-radius:6px;color:#ffe7b9;font:700 13px/1.3 var(--wr-font-body);text-align:center;background:#0d0b12cc}
@media (max-width:420px){
 :is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop{padding:40px 8px 12px}
 :is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-board{padding:12px 8px 14px}
 :is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-grid{gap:18px 8px}
 :is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-big-red{width:92px;height:92px;font-size:20px}
 :is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console.wrs-hazard{gap:6px;padding:12px 8px}
}
@media (min-width:900px){:is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop{max-width:480px}}
/* Daily offer and capsule cards below the machine: keep their buttons inside the card on phones. */
:is(#wr-x,html) :is(#wr-x,body) .daily-offers .daily-offer button{min-width:0;max-width:100%;box-sizing:border-box}
/* "New offers in" live countdown plaque under Daily Offers (shop-menu.js offersText; approved "Live countdown plaques" mockup): the raid-wings .rw-timer look (campaign-ui.css). */
:is(#wr-x,html) :is(#wr-x,body) .daily-header .shop-offers-timer{display:inline-block;max-width:100%;box-sizing:border-box;margin:4px 0 0;padding:1px 10px;border-radius:8px;background:#0008;color:#fff;font-size:12px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}
html.reduce-motion .wrs-shop .market-slot{transition:none}

/* Wide screens: the G.R.I.D. and the offer sections below it share one column width, so they line up instead of a narrow machine over wide rows. */
@media(min-width:900px){
 :is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop,.mode-online #lobby-panel .grid-machine{max-width:620px}
 .mode-online #lobby-panel .daily-header,.mode-online #lobby-panel .daily-offers{max-width:620px;margin-left:auto;margin-right:auto}
 .mode-online #lobby-panel .daily-offers{width:100%}
}

/* ===== Social QoL (approved social2 mockup; social-ui.js, social-qol.test.cjs) ===== */
/* Presence: online green, in battle amber, offline a calm grey (friend rows, guild roster, player card). */
:is(#wr-x,html) .presence-dot.battle{background:#f3a51e;color:#f3a51e}
:is(#wr-x,html) .presence-dot.offline{background:#7d8599;color:#7d8599;box-shadow:none;border-color:#ffffff33}
/* Leaderboard: gold, silver and bronze medallions for the top three in place of #1-#3. */
:is(#wr-x,html) .wrs-social .social-board-pos.medal{display:grid;place-items:center;align-self:center;width:32px;height:32px;margin-left:-2px;box-sizing:border-box;border-radius:50%;font:900 14px/1 var(--wr-font-display);color:var(--m2);text-shadow:0 1px 0 #10142a,0 0 2px #10142a;background:radial-gradient(circle,#3f4d82 0,#1d2338 58%,#0000 60%),linear-gradient(180deg,var(--m1),var(--m2) 45%,var(--m3));box-shadow:0 0 0 1.5px #10142a,0 2px 4px #0009,inset 0 1px 0 #fff8}
:is(#wr-x,html) .wrs-social .is-self .social-board-pos.medal{color:var(--m2)}
:is(#wr-x,html) .wrs-social .social-board-pos.medal--1{--m1:#fff1b8;--m2:#ffcf4d;--m3:#c8861c}
:is(#wr-x,html) .wrs-social .social-board-pos.medal--2{--m1:#f6f9fa;--m2:#c9d4da;--m3:#66767f}
:is(#wr-x,html) .wrs-social .social-board-pos.medal--3{--m1:#f2be8c;--m2:#d08a4c;--m3:#69391a}
/* Any player opens the player card: roster and leaderboard rows, chat avatars and names; the tapped row keeps a thin gold edge behind the card. */
:is(#wr-x,html) .wrs-social .is-tappable{cursor:pointer}
:is(#wr-x,html) .wrs-social .is-tappable:focus-visible{outline:2px solid var(--wr-gold-hi);outline-offset:2px}
:is(#wr-x,html) .wrs-social .is-tapped{box-shadow:0 0 0 2px #ffcf5a,0 0 8px #ffb02e88!important}
/* A friend with a challenge waiting: the row button reads Challenged in muted brass. */
:is(#wr-x,html) .wr-btn.is-waiting{--b-hi:#b49a63;--b:#8a7448;--b-lo:#584628;cursor:default}
/* Chat that reads like chat: own lines right, back-to-back lines stacked under one avatar and name, thin gold day dividers. */
:is(#wr-x,html) .wrs-social .chat-log.is-grouped{position:relative}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble:not(.chat-system){width:fit-content;min-width:62%;max-width:86%;box-sizing:border-box}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.is-mine{margin-left:auto;grid-template-columns:auto 1fr 32px;padding:6px 6px 7px 10px}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.is-mine>img{grid-column:3;grid-row:1/span 2}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.is-mine>strong{grid-column:2;grid-row:1;text-align:right}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.is-mine>time{grid-column:1;grid-row:1}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.is-mine>p{grid-column:1/3;grid-row:2}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.is-more{display:block;min-width:0;margin:-3px 0 6px 40px;padding:5px 10px 6px;border-radius:3px 8px 8px 8px}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.is-more.is-mine{margin:-3px 40px 6px auto;border-radius:8px 3px 8px 8px}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.is-more>p{margin:0}
:is(#wr-x,html) .wrs-social .chat-bubble>strong.is-tappable{justify-self:start}
:is(#wr-x,html) .wrs-social .chat-bubble.is-mine>strong.is-tappable{justify-self:end}
/* The day divider lives inside the day's first bubble and is placed against the log (that bubble stays unpositioned), spanning its width. */
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.has-day{position:static;margin-top:30px}
:is(#wr-x,html) .wrs-social .chat-log.is-grouped .chat-bubble.has-day:first-child{margin-top:22px}
:is(#wr-x,html) .wrs-social .chat-bubble>.chat-day{position:absolute;left:8px;right:8px;align-self:start;display:flex;align-items:center;gap:8px;height:14px;margin:-28px 0 0;pointer-events:none}
:is(#wr-x,html) .wrs-social .chat-bubble.chat-system>.chat-day{margin-top:-26px}
:is(#wr-x,html) .wrs-social .chat-day::before,:is(#wr-x,html) .wrs-social .chat-day::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#ffcf4d00,#ffcf4d99)}
:is(#wr-x,html) .wrs-social .chat-day::after{background:linear-gradient(90deg,#ffcf4d99,#ffcf4d00)}
:is(#wr-x,html) .wrs-social .chat-day>span{color:var(--wr-gold);font:700 12px/1 var(--wr-font-display);letter-spacing:.04em;text-shadow:0 1px 0 #10142a;white-space:nowrap}
/* Scrolled up while new lines arrive: an "N new" pill over the bottom of the log instead of a jump (it follows the log in the card's column). */
:is(#wr-x,html) .wrs-social .chat-new{position:relative;z-index:2;align-self:center;display:inline-flex;align-items:center;gap:2px;min-height:28px;margin:-44px 0 8px;padding:4px 13px 5px 9px;box-sizing:border-box;color:var(--wr-gold);font:800 13px/1 var(--wr-font-display);text-shadow:var(--wr-text-emboss);white-space:nowrap;border:2px solid transparent;border-radius:999px;background:var(--wr-panel) padding-box,var(--wr-brass) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 4px 10px #000a;cursor:pointer;animation:wrs-pill-pop .35s ease-out}
:is(#wr-x,html) .wrs-social .chat-new[hidden]{display:none}
:is(#wr-x,html) .wrs-social .chat-new>b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:2px;padding:0 5px;box-sizing:border-box;border:2px solid #fff;border-radius:10px;background:linear-gradient(180deg,#ff6a55,#d42a1e);color:#fff;font:800 12px/1 var(--wr-font-body);text-shadow:0 1px 0 #6a0f08}
@keyframes wrs-pill-pop{from{transform:scale(.3)}70%{transform:scale(1.15)}to{transform:scale(1)}}
/* "Challenge sent" waiting card: the PvP queue card set low (social-ui.js SocialDuel), the friend's portrait in the medallion. */
:is(#wr-x,html) .coop-queue.pvp-queue.q-low{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%)}
:is(#wr-x,html) .pvp-queue .wr-medallion>.medal-face{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:inset 0 0 0 2px #10142a}
:is(#wr-x,html) .coop-queue.social-duel .wr-btn{margin:6px 4px 0;padding:6px 20px 9px;border-radius:10px}
:is(#wr-x,html) .social-duel .pvp-wait{font-variant-numeric:tabular-nums}
/* Player card (social-ui.js friendProfile): slate panel with a gold rim, portrait in its collection ring, guild tag and presence, rank tray,
   active army and the buttons that fit, with Remove confirmed inside the card. The red x under it comes from popup-dismiss.js. */
:is(#wr-x,html) dialog.player-card{width:min(351px,calc(100vw - 24px));max-height:calc(100dvh - 110px);box-sizing:border-box;padding:20px 16px 18px;color:var(--wr-text);border:2px solid #d9a94a;border-radius:18px;background:var(--wr-panel-gloss),var(--wr-panel);box-shadow:0 0 0 1px #0b0e1c,0 16px 40px #0008,0 2px 6px #0006,inset 0 1px 0 #ffffff26}
:is(#wr-x,html) .player-card [hidden]{display:none!important}
:is(#wr-x,html) .player-card .pc-head{display:flex;align-items:center;gap:16px;padding:0 2px 16px;border-bottom:1px solid #ffffff1f}
:is(#wr-x,html) .player-card .pc-portrait{position:relative;flex:none;width:74px;height:74px;box-sizing:border-box;padding:3px;border:4px ridge var(--collection-color,#b89d65);border-radius:50%;background:#282837;box-shadow:0 0 12px var(--collection-color,#b89d65)}
:is(#wr-x,html) .player-card .pc-portrait>img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 20%}
:is(#wr-x,html) .player-card .pc-portrait>b{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);min-width:23px;box-sizing:border-box;padding:2px 4px;color:#fff;font:900 13px/18px var(--wr-font-display);text-align:center;text-shadow:0 2px #000;border:2px solid var(--collection-color,#b89d65);border-radius:11px;background:linear-gradient(#51598d,#1a1d30)}
:is(#wr-x,html) .player-card .pc-id{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
:is(#wr-x,html) .player-card h2.pc-name{margin:0;padding:0;color:var(--wr-gold);font:800 23px/1.1 var(--wr-font-display);text-shadow:var(--wr-text-emboss);overflow-wrap:anywhere}
:is(#wr-x,html) .player-card .pc-tag{display:block;margin:4px 0 0;color:#9fd3ff;font:700 14px/1.2 var(--wr-font-body);text-shadow:0 1px 0 #10142a}
:is(#wr-x,html) .player-card .pc-presence{display:flex;align-items:center;gap:7px;margin:5px 0 0;color:var(--wr-text-dim);font:600 13px var(--wr-font-body)}
:is(#wr-x,html) .player-card .pc-presence>.presence-dot{margin:0}
:is(#wr-x,html) .player-card .pc-rank{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;margin:14px 0 0;padding:8px 12px 9px;border:2px solid #0d1020;border-radius:10px;background:var(--wr-tray-face);box-shadow:var(--wr-tray-shadow)}
:is(#wr-x,html) .player-card .pc-rank strong{color:var(--wr-gold);font:800 17px/1.1 var(--wr-font-display);text-shadow:var(--wr-text-emboss)}
:is(#wr-x,html) .player-card .pc-rank span{color:var(--wr-text);font:800 16px var(--wr-font-body);text-shadow:0 1px 0 #10142a;white-space:nowrap}
:is(#wr-x,html) .player-card .pc-rank small{grid-column:1/-1;color:var(--wr-text-dim);font:600 12px var(--wr-font-body)}
:is(#wr-x,html) .player-card h3.pc-army-h{margin:14px 0 8px;color:var(--wr-gold);font:800 16px/1.1 var(--wr-font-display);text-shadow:var(--wr-text-emboss)}
:is(#wr-x,html) .player-card .friend-army{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
:is(#wr-x,html) .player-card .friend-army article{min-width:0;padding:4px 3px 5px;text-align:center;color:var(--wr-text);border:1px solid #6a77a3;border-radius:7px;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 3px 6px #0008}
:is(#wr-x,html) .player-card .friend-army article.is-champ{border-color:#ffe08a;background:linear-gradient(180deg,#ffffff2a,#fff0 45%),linear-gradient(#ffcf4d,#c7871e 50%,#6b4508)}
:is(#wr-x,html) .player-card .friend-army img{display:block;width:100%;height:50px;object-fit:contain}
:is(#wr-x,html) .player-card .friend-army small{display:block;overflow:hidden;font:700 11px/1.2 var(--wr-font-body);text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 #10142a}
:is(#wr-x,html) .player-card .friend-army small+small{color:var(--wr-text-dim);font-weight:600}
:is(#wr-x,html) .player-card .friend-army .is-champ small+small{color:#fff3c0}
:is(#wr-x,html) .player-card .pc-acts{display:flex;gap:8px;margin:16px 0 0}
:is(#wr-x,html) .player-card .pc-acts .wr-btn{flex:1 1 0;min-width:0;margin:0;padding:4px 6px 7px;overflow:hidden;text-overflow:ellipsis}
:is(#wr-x,html) .player-card .pc-acts .wr-btn:disabled{opacity:1;cursor:default}
:is(#wr-x,html) .player-card .pc-confirm{margin:14px 0 0;padding:10px 10px 0;border-radius:10px;background:#e03a2c1a;box-shadow:inset 0 0 0 1px #ff756355}
:is(#wr-x,html) .player-card .pc-confirm>p{margin:0;color:var(--wr-text);font:600 14px/1.35 var(--wr-font-body);text-align:center}
:is(#wr-x,html) .player-card .pc-confirm .pc-acts{margin:10px 0}
:is(#wr-x,html) .player-card>.wrs-note{margin:8px 0 0;color:var(--wr-text-dim);font:500 13px/1.4 var(--wr-font-body)}
@media (prefers-reduced-motion:reduce){:is(#wr-x,html) .wrs-social .chat-new{animation:none}}
html.reduce-motion .wrs-social .chat-new{animation:none}
/* ===== Social phone fixes (412x860 review; social-ui.js, social-phone-fixes.test.cjs) ===== */
/* No line under the title, a slimmer title row, and the header stack (title, tabs, plate) kept short. */
#lobby-panel[data-page="social"]>#lobby-status:empty{display:none}
.mode-online #lobby-panel[data-page="social"]>header{margin-bottom:8px}
.mode-online #lobby-panel[data-page="social"]>header h1{font-size:22px}
:is(#wr-x,html) .wrs-social{gap:10px}
/* Guild frame without the crest medallion; a slimmer plate whose left end matches the right arrow (army-polish.css gives ".guild-card>h2:before" a flag glyph). */
:is(#wr-x,html) .wrs-guild-frame.wr-frame{margin:0;padding:14px 10px 12px}
:is(#wr-x,html) .wrs-guild-frame>h2.wrs-guild-plaque{min-height:0;margin:0 auto 10px;padding:6px 14px}
:is(#wr-x,html) .wrs-guild-frame>h2.wrs-guild-plaque::before{content:'';margin:0;background-image:var(--wr-endcap-r);transform:scaleX(-1)}
:is(#wr-x,html) .wrs-guild-plaque .wr-plaque__text{font-size:20px;line-height:1.15}
/* Long guild names: smaller and up to two lines instead of "Guild For Du…". */
:is(#wr-x,html) .wrs-guild-plaque:is(.is-long,.is-longer) .wr-plaque__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:17px;white-space:normal;overflow-wrap:anywhere}
:is(#wr-x,html) .wrs-guild-plaque.is-longer .wr-plaque__text{font-size:15px}
/* Guild facts once, as icon chips beside the banner shield. */
:is(#wr-x,html) .wrs-guild-info{gap:10px}
:is(#wr-x,html) .wrs-guild-info>.wrs-emblem{width:56px;height:65px}
:is(#wr-x,html) .wrs-guild-chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-content:center;gap:6px;margin:0;padding:0;list-style:none}
:is(#wr-x,html) .wrs-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;max-width:100%;margin:0;padding:3px 10px 3px 5px;box-sizing:border-box;border-radius:999px;background:linear-gradient(#ffffff17,#ffffff06);box-shadow:inset 0 0 0 1px #ffffff2b,0 1px 2px #0006;color:var(--wr-text);font:700 14px/1.1 var(--wr-font-body);white-space:nowrap}
:is(#wr-x,html) .wrs-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
:is(#wr-x,html) .wrs-chip--trophies{color:var(--wr-gold)}
.wrs-chip-icon{display:block;flex:none;width:20px;height:20px}
.wrs-chip-icon>svg,.wrs-empty-icon>svg{display:block;width:100%;height:100%}
:is(#wr-x,html) .wrs-guild-info>.wrs-gear{align-self:center}
/* No guild: a Join / Create switch over the directory or the founding form. */
:is(#wr-x,html) .wrs-guild-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;padding:4px;border-radius:12px;background:#0b0e1c80;box-shadow:inset 0 1px 3px #000a,0 0 0 1px #ffffff14}
:is(#wr-x,html) .wrs-guild-switch .wrs-switch-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;margin:0;padding:4px 10px;border:2px solid var(--wr-ink);border-radius:9px;color:#dfe3f0;font:800 16px/1 var(--wr-font-display);text-shadow:0 1px 0 #10142a;background:linear-gradient(180deg,#ffffff14,#fff0 50%),linear-gradient(180deg,#3a4468,#262d48);cursor:pointer}
:is(#wr-x,html) .wrs-guild-switch .wrs-switch-btn.is-active{color:#fff;background:linear-gradient(180deg,#ffffff24,#fff0 50%),linear-gradient(180deg,var(--wr-wood-hi,#9a6a3e),var(--wr-wood));box-shadow:0 0 0 1px var(--wr-gold-lo)}
:is(#wr-x,html) .wrs-guild-switch .wrs-switch-btn .wrs-chip-icon{width:22px;height:22px}
:is(#wr-x,html) :is(.wrs-create-section,.wrs-directory-section)>.wrs-section-body{border-radius:8px}
/* Compact empty states (friends, guild directory, leaderboard): an icon and a few words. */
:is(#wr-x,html) .wrs-social .wrs-empty{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:8px 4px 4px;color:var(--wr-text-dim);font:700 15px/1.2 var(--wr-font-body)}
.wrs-empty-icon{display:block;flex:none;width:26px;height:26px;opacity:.9}
/* Friends: the add-friend field leads (placeholder instead of a label); messages appear once a friend is chosen. */
:is(#wr-x,html) .wrs-social .wrs-add-friend{align-items:center}
:is(#wr-x,html) .wrs-social .wrs-add-friend input{width:100%;min-height:44px;box-sizing:border-box;font-size:16px}
:is(#wr-x,html) .wrs-social .wrs-add-friend .wr-btn{min-height:44px}
:is(#wr-x,html) .wrs-social .social-card.is-empty{gap:10px}
/* Leaderboard: one empty line, no pager for a single page. */
:is(#wr-x,html) .wrs-social .social-board{gap:8px}
:is(#wr-x,html) .wrs-social .social-board .wrs-empty{padding:6px 4px 8px}
/* Guild directory rows: members and type as small icon facts. */
:is(#wr-x,html) .wrs-dir-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
:is(#wr-x,html) .wrs-dir-fact{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
:is(#wr-x,html) .wrs-dir-fact>.wrs-chip-icon{width:16px;height:16px}
/* Phone fixes (shop): shop-menu.js. Lobby status stays hidden when empty (no how-to line under "Shop"). */
#lobby-panel[data-page="shop"]>#lobby-status:empty{display:none}
/* Selected-offer popup: a small closer sized to the popup, clear of the title and the effect line. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-selection-close.wr-btn-close--small{top:6px;right:6px;width:30px;height:30px;padding:0 0 2px;font-size:19px!important;border-width:2px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console.is-picked h2{padding:0 34px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console.is-picked .wrs-effect{padding-inline:4px;row-gap:4px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console .wrs-effect .wrs-shard{width:18px;height:18px;margin:0 1px 0 3px;vertical-align:-4px;object-fit:contain;filter:drop-shadow(0 1px 0 #10142a)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console .wrs-effect .wrs-gain{display:inline-flex;align-items:center}
/* The row and column a purchase would clear glow softly while a tile is selected. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.purchase-clear{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px #ffb35acc,0 0 14px 3px #ff8a5a66}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.purchase-clear::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:linear-gradient(#ff9a5a1f,#ff9a5a0d)}
/* An XP gem the selected purchase would absorb (same row or column; shop-menu.js gemGlows) glows violet over the row/column light (static under reduced motion). */
@keyframes wrs-gem-absorb{0%,100%{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px #b26bff,0 0 16px 6px #9b4dffaa}50%{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 4px #d9b0ff,0 0 30px 12px #a45cffee}}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.wrs-gem-absorb{z-index:2;box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px #b26bff,0 0 24px 9px #9b4dffcc;animation:wrs-gem-absorb 1.6s ease-in-out infinite}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.wrs-gem-absorb::after{background:linear-gradient(#b06cff40,#b06cff1a)}
html.reduce-motion .wrs-shop .market-slot.wrs-gem-absorb{animation:none!important}
@media (prefers-reduced-motion:reduce){.wrs-shop .market-slot.wrs-gem-absorb{animation:none!important}}
/* The gem tile's row-and-column chip: gold arrows on a dark pill (tap: bubble). */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot .wrs-align{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;color:#ffd77a;background:#0b0e1cd9;box-shadow:inset 0 0 0 1px #ffcf4d55,0 1px 2px #0008;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot .wrs-align>.wrs-ico{display:block;line-height:0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot .wrs-align>.wrs-ico>svg{display:block;width:auto;height:13px}
/* "Next store cycle" live countdown chip (shop-menu.js cycleChip): the Daily Offers timer look. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-grid-cycle{margin:0 0 6px;text-align:center}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-cycle-timer{display:inline-block;max-width:100%;box-sizing:border-box;margin:0;padding:1px 10px;border-radius:8px;background:#0008;color:#fff;font:700 12px/1.4 var(--wr-font-body);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* No Red Button left: one small pill button, (red button) + down arrow, to the free Daily Red Button (the Remaining plate shows the 0). */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-hazard .grid-help.wrs-red-help{display:flex;justify-content:center;align-items:center;padding:0;background:none}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-red-down{display:inline-flex;align-items:center;gap:5px;height:34px;min-width:0;min-height:0;padding:0 12px 0 8px;border:2px solid var(--wr-ink);border-radius:999px;color:#ffd77a;cursor:pointer;background:radial-gradient(ellipse 80% 50% at 50% 15%,#ffffff40,#fff0 70%),linear-gradient(180deg,#3a4466,#1d2338);box-shadow:0 0 0 1.5px #d9a94a,0 2px 3px #0009}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-red-down .resource-icon{width:22px;height:22px;margin:0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-hazard .grid-help>.wrs-red-down{flex:0 0 auto;width:auto;max-width:none}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-red-down>.wrs-ico{display:block;flex:0 0 12px;width:12px;height:14px;line-height:0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-red-down>.wrs-ico>svg{display:block;width:12px;height:14px}
/* Dock Shop re-tap (menu-icons.js giftTap): the free offer it brings into view pulses gold once (~1 s; none under reduced motion). */
/* outline + drop-shadow: the card's own box-shadow is locked by an !important skin rule */
@keyframes wr-gift-spot{0%{outline:3px solid #ffd77a00;outline-offset:2px;filter:none}35%{outline:3px solid #ffd77a;outline-offset:2px;filter:drop-shadow(0 0 12px #ffd77a) brightness(1.08)}100%{outline:3px solid #ffd77a00;outline-offset:2px;filter:none}}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.wr-gift-spot{animation:wr-gift-spot 1s ease-out 1}
html.reduce-motion .daily-offer.wr-gift-spot{animation:none!important}
@media (prefers-reduced-motion:reduce){.daily-offer.wr-gift-spot{animation:none!important}}
/* Daily Offers: titles sit clear of the faction ribbon. */
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.has-ribbon>h3{box-sizing:border-box;width:100%;padding:0 2px 0 22px;overflow-wrap:normal;word-break:normal;hyphens:manual}
/* Tome offers: the tome art with the unit as a small portrait badge on the book. */
:is(#wr-x,html) :is(#wr-x,body) .daily-offer .offer-tome{position:relative;display:block;flex:none;height:100px;aspect-ratio:1;max-width:100%;z-index:3;pointer-events:none}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer .offer-tome>.offer-tome-book{display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 4px 4px #0009)}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer .offer-tome>.offer-tome-badge{position:absolute;right:-4px;bottom:-2px;width:38%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 20%;border:2px solid #e9c46a;border-radius:50%;background:radial-gradient(circle at 40% 30%,#3b4670,#151b30);box-shadow:0 0 0 1px #10142a,0 2px 4px #000a}
/* Claimed: no shutter; the art greys out under a stamped seal, the free gift's countdown stays readable. */
:is(#wr-x,html) :is(#wr-x,body) .daily-offer>.offer-stamp{display:none}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>.offer-stamp{display:block;position:relative;align-self:center;margin:-78px 0 34px;z-index:6;transform:rotate(-12deg);padding:5px 10px 6px;border:3px double #f3d9a4;border-radius:6px;background:linear-gradient(#a8352bee,#6e1d17ee);box-shadow:0 0 0 2px #3a0f0b,0 4px 10px #000a,inset 0 1px 0 #ffffff40;color:#fff3dc;font:800 15px/1 var(--wr-font-display);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 0 #3a0f0b;white-space:nowrap;pointer-events:none}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.closing>.offer-stamp{animation:offer-stamp-in .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes offer-stamp-in{0%{opacity:0;transform:rotate(-12deg) scale(1.8)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>:is(img,.resource-icon,.offer-tome,.family-ribbon){filter:grayscale(1) brightness(.62);opacity:.75}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>:is(h3,strong,small:not(.free-cooldown)){opacity:.6}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>button{display:none}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>.free-cooldown{margin-top:auto;padding:3px 8px;border-radius:8px;background:#0008;color:#ffe1a1;font-weight:700;font-variant-numeric:tabular-nums}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>.free-cooldown:empty{display:none}
@media (prefers-reduced-motion:reduce){:is(#wr-x,html) :is(#wr-x,body) .daily-offer.closing>.offer-stamp{animation:none}}
html.reduce-motion .daily-offer.closing>.offer-stamp{animation:none}
@media (max-width:650px){:is(#wr-x,html) :is(#wr-x,body) .daily-offer .offer-tome{height:75px}:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>.offer-stamp{margin:-64px 0 24px;font-size:13px;padding:4px 8px 5px}:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-moves .wr-btn{padding-inline:6px}}
/* ---- Shop phone review (shop-menu.js, game-ui.js confirm). S1: one slim header row - the "Shop" title with a small red-button medallion at its
   right - and a smaller G.R.I.D. plate, so the first row of offers sits high on a phone. */
:is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop.wr-frame--crest{margin-top:6px;padding-top:12px}
:is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop>.wr-crest{top:-52px;left:auto;right:2px;width:44px;height:44px;transform:none}
:is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop>.wr-crest::before{content:none}
:is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop>.wr-crest .wr-medallion{top:0;left:0;width:44px;height:44px;transform:none;filter:drop-shadow(0 2px 3px #0008)}
:is(#wr-x,html) :is(#wr-x,body) .grid-machine.wrs-shop>.wr-crest .wr-medallion>img{width:24px;height:24px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-grid-title.wr-plaque{min-height:32px;margin:0 auto 8px;padding:3px 22px 4px;font-size:17px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-grid-title.wr-plaque--caps::before,:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-grid-title.wr-plaque--caps::after{width:10px;height:20px;margin-top:-10px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-board{padding-top:10px}
/* S2: selected-offer buttons read "(arrows)(coin) 5" and "(coin) 90" with room to spare at 360-412px. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-moves .wr-btn{flex:1 1 0;min-width:0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-moves .wrs-cost-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console .market-moves .wrs-cost-btn>.resource-icon{flex:none;width:20px;height:20px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-moves .wrs-move>.wrs-ico{width:18px;height:18px;margin-right:1px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-moves>[hidden]{display:none!important}
/* Moving an offer: the tiles beside it glow as targets instead of a how-to line. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.move-target{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px #7fe3f0,0 0 14px 4px #7fe3f088;animation:wrs-move-target 1.1s ease-in-out infinite}
@keyframes wrs-move-target{50%{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px #bff4fa,0 0 20px 6px #7fe3f0aa}}
html.reduce-motion .wrs-shop .market-slot.move-target{animation:none!important}
@media (prefers-reduced-motion:reduce){.wrs-shop .market-slot.move-target{animation:none!important}}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console p.wrs-bonus{display:inline-flex;align-self:center;align-items:center;gap:4px;margin:0;padding:2px 10px 2px 5px;border-radius:999px;background:#0009;box-shadow:inset 0 0 0 1px #c9a24a99;color:#fff;font:800 14px/1.2 var(--wr-font-body);text-shadow:var(--wr-text-shadow)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .grid-console .wrs-bonus>.resource-icon{width:20px;height:20px}
/* S3: over-full shards (shards >= need): a full bar in the target-rarity colour plus a glowing up-arrow "ready" badge. */
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-ready{--r:#aeb8c3;display:inline-grid;place-items:center;flex:none;width:13px;height:13px;border-radius:50%;color:#fff;background:radial-gradient(circle at 40% 30%,#ffffff8c,#fff0 60%),var(--r);box-shadow:0 0 0 1px var(--wr-ink),0 0 6px 1px var(--r);animation:wrs-ready-glow 1.6s ease-in-out infinite}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-ready[data-rarity=uncommon]{--r:#6fc25a}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-ready[data-rarity=rare]{--r:#5aa8f0}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-ready[data-rarity=epic]{--r:#c07ae6}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-ready[data-rarity=legendary]{--r:#f0b04a}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-ready .wrs-ico{width:7px;height:9px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect .wrs-ready{width:18px;height:18px;margin-left:4px;vertical-align:-4px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-effect .wrs-ready .wrs-ico{width:9px;height:11px}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-bar.is-ready{background:var(--f-lo);box-shadow:inset 0 0 0 1px var(--wr-ink),0 0 5px var(--r)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .wrs-bar.is-ready>.f{width:100%;border-radius:2px;opacity:1}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop :is(.wrs-buy,.wrs-effect).is-ready :is(b:not(.wrs-new),b.wrs-num){color:#ffe27a}
@keyframes wrs-ready-glow{0%,100%{box-shadow:0 0 0 1px var(--wr-ink),0 0 3px 0 var(--r)}50%{box-shadow:0 0 0 1px var(--wr-ink),0 0 9px 2px var(--r)}}
html.reduce-motion .wrs-shop .wrs-ready{animation:none!important}
@media (prefers-reduced-motion:reduce){.wrs-shop .wrs-ready{animation:none!important}}
/* S4: claimed Daily Offers keep their art recognisable (desaturated, still bright) under the CLAIMED stamp; cards fit their content, so an
   empty cooldown line leaves no gap under the buttons, and buttons line up across a row (margin-top:auto). */
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>:is(img,.resource-icon,.offer-tome,.family-ribbon){filter:grayscale(.85) brightness(1.02) contrast(.92);opacity:.92}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed .offer-tome img{filter:none;opacity:1}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.claimed>:is(h3,strong,small:not(.free-cooldown)){opacity:.8}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer:not(.claimed)>.free-cooldown:empty{display:none}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer>button{margin-top:auto}
/* S5: a lone last Daily Offer (the Daily Red Button) spans its row as a wide banner card: art | title + amount | button. */
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide{grid-column:1/-1;display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"art title buy" "art amount buy" "art cd buy";align-items:center;column-gap:12px;row-gap:2px;padding:8px 12px;text-align:left}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide>h3{grid-area:title;align-self:end;width:auto;margin:0;padding:0}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide>:is(img,.resource-icon,.offer-tome){grid-area:art;justify-self:center;width:60px;height:60px;object-fit:contain}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide>strong{grid-area:amount;align-self:start}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide>small:not(.free-cooldown){grid-area:cd}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide>button{grid-area:buy;margin:0;min-width:96px}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide>.free-cooldown{grid-area:cd;justify-self:start;margin:0}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide.claimed>.free-cooldown{grid-area:buy;justify-self:end}
:is(#wr-x,html) :is(#wr-x,body) .daily-offers>.daily-offer.is-wide.claimed>.offer-stamp{grid-area:art;align-self:center;justify-self:center;margin:0;font-size:12px;padding:3px 6px 4px}
/* S5: capsule cards line up - one-line rarity title in its colour, the owned count as a badge on the capsule art (no square backing: the
   legendary_core.png halo was cleared), and Epic/Legendary buttons show the recipe "5x (lower capsule) -> (this capsule)". */
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers>.capsule-offer>.capsule-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers>.capsule-offer[data-rarity=rare]>.capsule-title{color:#7cc0ff}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers>.capsule-offer[data-rarity=epic]>.capsule-title{color:#cf95ff}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers>.capsule-offer[data-rarity=legendary]>.capsule-title{color:#ffc94a}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers>.capsule-offer>.capsule-art{position:relative;display:block;flex:none;width:96px;height:96px;max-width:100%}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers>.capsule-offer>.capsule-art>.resource-icon{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 4px #0009)}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-owned{position:absolute;right:-2px;bottom:0;display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;box-sizing:border-box;border:2px solid #e9c46a;border-radius:13px;background:linear-gradient(#3e4870,#1b2033);color:#fff;font:900 15px/1 var(--wr-font-display);text-shadow:0 1px 1px #000;box-shadow:0 0 0 1px #10142a,0 2px 4px #000a}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-owned.is-zero{border-color:#7b8194;color:#c4c8d4}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-buy{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-buy .resource-icon{flex:none;width:22px;height:22px}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-recipe{gap:3px}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-recipe>.wrs-ico{display:block;flex:none;width:12px;height:10px;line-height:0}
:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-recipe>.wrs-ico>svg{display:block;width:100%;height:100%}
@media (max-width:650px){:is(#wr-x,html) :is(#wr-x,body) .capsule-offers>.capsule-offer>.capsule-art{width:76px;height:76px}:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-recipe .resource-icon{width:20px;height:20px}}
@media (max-width:400px){:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-buy.capsule-recipe{gap:2px;padding-inline:4px;font-size:13px}:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-recipe .resource-icon{width:16px;height:16px}:is(#wr-x,html) :is(#wr-x,body) .capsule-offers .capsule-recipe>.wrs-ico{width:10px;height:8px}}
/* S6 Purchase confirmation (game-ui.js confirm with costs/gains): art + name, gain chips, one cost line "(icon) 900" with "1,460 -> 560" in small
   dim text, Cancel + Purchase (no kicker, no table, no X). */
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase>h2{margin:10px 8px 4px}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase>p{margin:0 0 4px}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-gains{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:8px 0 0}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-gain{display:inline-flex;align-items:center;gap:5px;padding:3px 12px 3px 6px;border-radius:999px;background:#0008;box-shadow:inset 0 0 0 1px #c9a24a99;color:#fff;font:800 17px/1.2 var(--wr-font-body);text-shadow:var(--wr-text-shadow)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-gain>.resource-icon{width:26px;height:26px;object-fit:contain}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-cost{display:flex;flex-direction:column;align-items:center;gap:3px;margin:14px 0 0}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-price{display:inline-flex;align-items:center;gap:8px;color:#fff;font:900 30px/1 var(--wr-font-display);text-shadow:var(--wr-text-shadow)}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-price>.resource-icon{width:32px;height:32px;object-fit:contain}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-after{color:var(--wr-text-dim);font:700 13px/1.2 var(--wr-font-body);font-variant-numeric:tabular-nums;opacity:.85}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-cost.insufficient :is(.confirm-price b,.confirm-after){color:#ff7a66!important}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-actions{margin-top:18px;gap:10px}
:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-actions>button{min-width:0;padding-inline:8px;white-space:nowrap}
@media (max-width:400px){:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase{padding-inline:16px}:root body dialog.game-confirm.rumble-confirm.rumble-confirm.is-purchase .confirm-actions>button{font-size:19px}}