/* QoL batch Q10, Q11, Q12, Q14 (world-shop-social-qol.js, shop-menu.js). Painted slate-and-brass look of the approved mockups. */

/* Q10 can-afford marks: the offer the wallet can't cover gets a stone button, a dimmed coin and a red price; its tile dims a little. */
:is(#wr-x,html) :is(#wr-x,body) :is(.daily-offer button,.market-moves .wr-btn).wr-short{--b-hi:#6c78a0;--b:#46507a;--b-lo:#2a3152;color:#fff;filter:none}
:is(#wr-x,html) :is(#wr-x,body) :is(.daily-offer button,.market-moves .wr-btn).wr-short :is(img,.resource-icon){filter:grayscale(.8) brightness(.8)}
:is(#wr-x,html) :is(#wr-x,body) :is(.daily-offer button,.market-moves .wr-btn).wr-short b{color:#ff8a7a}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer button.wr-short{display:inline-flex;align-items:center;justify-content:center;gap:5px}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer:not(.capsule-offer) button.wr-short>.resource-icon{flex:none;width:20px;height:20px}
:is(#wr-x,html) :is(#wr-x,body) .daily-offer.wr-short>:not(button):not(.free-cooldown){filter:brightness(.78) saturate(.85)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.wr-short>:not(.market-price){filter:brightness(.78) saturate(.85)}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.wr-short .market-price{color:#ff8a7a}
:is(#wr-x,html) :is(#wr-x,body) .wrs-shop .market-slot.wr-short .market-price>:is(img,.resource-icon){filter:grayscale(.8) brightness(.8)}

/* Q11 Events rotation: the dock's red dot plus a soft inner glow of the Events button while the dot is up. */
#home-tabs button.wr-rotation-glow::before{content:'';display:block;position:absolute;inset:0;width:auto;height:auto;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 10px 2px #ffcf4d8c,inset 0 0 3px 1px #ffeaa699;animation:wr-rotation-glow 2.4s ease-in-out infinite}
#home-tabs button.wr-rotation-glow.is-feature-locked::after{display:none}
@keyframes wr-rotation-glow{50%{box-shadow:inset 0 0 14px 4px #ffcf4da6,inset 0 0 4px 1px #ffeaa6b3}}
html.reduce-motion #home-tabs button.wr-rotation-glow::before{animation:none}
@media (prefers-reduced-motion:reduce){#home-tabs button.wr-rotation-glow::before{animation:none}}

/* Q12 friend online toast: under the top bar, slides in from the right, gone after about 4 s. */
.wr-friend-toast{position:fixed;right:10px;z-index:9000;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:min(306px,calc(100vw - 20px));height:52px;padding:0 6px 0 7px;border:2px solid transparent;border-radius:12px;
 background:linear-gradient(180deg,#ffffff14,#fff0 50%) padding-box,linear-gradient(180deg,#323b5c,#1d2338) padding-box,var(--wr-brass,linear-gradient(180deg,#ffeaa6,#e8b445 50%,#b07a1c)) border-box;
 box-shadow:0 0 0 1px #0b0e1c,0 6px 14px #0009;color:var(--wr-text,#f6f3ec);font-family:var(--wr-font-display,system-ui,sans-serif);cursor:pointer;transform:translateX(calc(100% + 24px));opacity:0;transition:transform .26s cubic-bezier(.2,.9,.3,1.15),opacity .2s ease-out}
.wr-friend-toast.is-in{transform:none;opacity:1}
.wr-friend-toast.is-out{transform:translateX(calc(100% + 24px));opacity:0;transition-timing-function:ease-in}
.wr-friend-toast__face{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 22%;background:radial-gradient(circle at 50% 35%,#4a5684,#1d2338);border:2px solid #10142a;box-shadow:0 0 0 1.5px #e8b445;box-sizing:border-box}
.wr-friend-toast__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 16px/1 var(--wr-font-display,system-ui,sans-serif);text-shadow:var(--wr-text-shadow,0 1px 0 #10142a)}
.wr-friend-toast__dot{flex:none;width:10px;height:10px;border-radius:50%;background:#7ee04f;box-shadow:0 0 6px #7ee04f;border:1.5px solid #10142a}
.wr-friend-toast__open{flex:none;margin-left:auto;display:grid;place-items:center;width:48px;height:36px;padding:0 0 2px;border:2px solid #10142a;border-radius:9px;cursor:pointer;
 background:radial-gradient(ellipse 90% 55% at 50% 0,#ffffff5c,#fff0 70%),linear-gradient(180deg,var(--wr-amber-hi,#ffdc5c),var(--wr-amber,#f3a51e) 62%);box-shadow:inset 0 -4px 0 var(--wr-amber-lo,#a8640c),inset 0 1px 0 #ffffffa6,0 3px 6px #0008}
.wr-friend-toast__open svg{width:24px;height:24px;display:block}
.wr-friend-toast__open:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--wr-amber-lo,#a8640c),inset 0 2px 4px #0005}
.wr-friend-toast__open:focus-visible{outline:3px solid var(--wr-gold-hi,#ffeaa6);outline-offset:2px}
html.reduce-motion .wr-friend-toast{transition:none}
@media (prefers-reduced-motion:reduce){.wr-friend-toast{transition:none}}

/* Q14 pull to refresh: the War Sigil drops in under the top bar as the screen is pulled down, spins while the screen reloads. */
.wr-ptr{position:fixed;z-index:40;width:0;height:0;pointer-events:none;opacity:0;transform:translateY(calc(var(--pull,0px) - 56px))}
.wr-ptr[data-state="idle"]{transition:transform .24s ease-out,opacity .2s ease-out}
.wr-ptr::before{content:'';position:absolute;left:-198px;top:-10px;width:396px;height:72px;background:radial-gradient(ellipse 50% 70% at 50% 50%,#ffcf4d22,#fff0);opacity:0;transition:opacity .2s}
.wr-ptr.is-ready::before,.wr-ptr[data-state="busy"]::before{opacity:1}
.wr-ptr__disc{position:absolute;left:-24px;top:0;width:48px;height:48px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#3d4870,#1d2338);border:2px solid #e8b445;box-shadow:0 3px 8px #0009}
.wr-ptr__disc img{width:34px;height:34px;display:block;transform:rotate(var(--turn,0deg))}
.wr-ptr.is-ready .wr-ptr__disc{border-color:#ffeaa6;box-shadow:0 3px 8px #0009,0 0 10px #ffcf4d88}
.wr-ptr[data-state="busy"] .wr-ptr__disc img{animation:wr-ptr-spin 1.4s linear infinite}
@keyframes wr-ptr-spin{from{transform:rotate(var(--turn,0deg))}to{transform:rotate(calc(var(--turn,0deg) + 360deg))}}
@keyframes wr-ptr-pulse{50%{transform:scale(.86);opacity:.7}}
html.reduce-motion .wr-ptr__disc img{transform:none}
html.reduce-motion .wr-ptr[data-state="busy"] .wr-ptr__disc img{animation:wr-ptr-pulse 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.wr-ptr__disc img{transform:none}.wr-ptr[data-state="busy"] .wr-ptr__disc img{animation:wr-ptr-pulse 1.1s ease-in-out infinite}}
#lobby-content.wr-ptr-shift{transform:translateY(var(--ptr-shift,0px));transition:transform .24s ease-out}
#lobby-content.wr-ptr-shift[data-ptr="pull"]{transition:none}