/* ui-system.css (v054) — one look for every menu screen (ui-ux-pro-max: «Claymorphism» for casual games — chunky, thick borders, double shadows, radius 16–24; 8-px spacing; one primary action per screen). Loaded last: it wins over the layers of older versions in ui.css. Colours stay the game's own: night blue/violet surfaces, gold primary. */ :root{ --u-gap:12px;--u-pad:16px;--u-r:20px;--u-r-sm:14px; --u-surface:linear-gradient(180deg,#2c1d94,#1c106a);--u-surface-2:linear-gradient(180deg,#352399,#24157a); --u-line:#ffffff24;--u-hi:inset 0 2px 0 #ffffff1f;--u-drop:0 6px 0 #0b0630,0 10px 24px #0007; --u-gold:linear-gradient(180deg,#ffe866,#ffb02e);--u-gold-ink:#3a1c00;--u-gold-drop:0 6px 0 #b86e00,0 10px 22px #ffb02e44; --u-text:#fff;--u-text-2:#cfc6ff;--u-text-3:#9d92d8; --u-h1:28px;--u-h2:18px;--u-body:14px;--u-small:12px; } /* ---------------------------------------------------------------- typography */ #panel.menu{font-family:'Nunito',system-ui,sans-serif;color:var(--u-text)} #panel.menu .m-title,#panel.menu .h-head>b,#panel.menu .h-head h2{font-family:'Russo One',sans-serif!important;font-weight:400!important;font-size:var(--u-h1)!important;letter-spacing:.5px;text-shadow:0 3px 0 #0b0630;margin:0 0 4px!important} #panel.menu .h-head small,#panel.menu .h-head p{font-size:var(--u-small)!important;color:var(--u-text-2)!important} #panel.menu .m-note{font-size:var(--u-small)!important;color:var(--u-text-3)!important;line-height:1.4} /* ---------------------------------------------------------------- surfaces: every card is the same clay block */ #panel.menu :is(.m-card,.xp-card,.m-stage,.goal-home,.xp-row,.mn-quests,.mn-wheel,.mn-conv,.case-shop,.xp-gift,.m-gear,.m-inv,.d-row,.xp-ad,.it-detail){ border-radius:var(--u-r)!important;border:3px solid var(--u-line)!important;box-shadow:var(--u-hi),var(--u-drop)!important} #panel.menu :is(.m-card,.xp-card,.mn-quests,.mn-wheel,.mn-conv,.m-inv,.it-detail,.xp-ad,.d-row){background:var(--u-surface)!important} #panel.menu .m-body{gap:var(--u-gap)!important} #panel.menu .m-body>*{margin-top:0!important;margin-bottom:0!important} /* ---------------------------------------------------------------- buttons: three sizes, one shape */ #panel.menu button{cursor:pointer;touch-action:manipulation} #panel.menu :is(.m-play,.m-yellow,.mn-btn,.m-go){border-radius:16px!important;border:0!important;font-weight:900!important;transition:transform .12s ease-out,filter .12s} #panel.menu :is(.m-play,.m-yellow,.mn-btn):active{transform:translateY(3px) scale(.98)} #panel.menu .m-play{min-height:56px;padding:14px 18px!important;font-family:'Russo One',sans-serif!important;font-weight:400!important;font-size:20px!important;letter-spacing:.5px;background:var(--u-gold)!important;color:var(--u-gold-ink)!important;box-shadow:var(--u-gold-drop)!important} #panel.menu .m-yellow{min-height:48px;padding:12px 16px!important;font-size:16px!important;background:var(--u-gold)!important;color:var(--u-gold-ink)!important;box-shadow:0 5px 0 #b86e00!important} #panel.menu :is(.m-play,.m-yellow):disabled{filter:grayscale(.8) brightness(.7);box-shadow:0 4px 0 #0b0630!important;cursor:not-allowed} #panel.menu .mn-big{min-height:56px;font-size:16px!important} #panel.menu .mn-mini{min-height:44px} #panel.menu .m-ghost:not(.xp-test){min-height:44px;background:none!important;border:0!important;box-shadow:none!important;color:var(--u-text-2)!important;font-weight:800!important;text-decoration:none} #panel.menu .m-ghost:not(.xp-test):hover{color:#fff!important} /* ---------------------------------------------------------------- tabs: one segmented control */ #panel.menu .m-tabs{display:flex!important;gap:6px!important;padding:5px!important;border-radius:16px!important;background:#0b0630aa!important;border:2px solid var(--u-line)!important;box-shadow:none!important} #panel.menu .m-tabs>button{flex:1;min-height:44px;border-radius:12px!important;border:0!important;background:none!important;color:var(--u-text-2)!important;font-weight:900!important;font-size:15px!important;box-shadow:none!important} #panel.menu .m-tabs>button:is(.on,[aria-selected=true],.sel,.active){background:var(--u-gold)!important;color:var(--u-gold-ink)!important;box-shadow:0 4px 0 #b86e00!important} /* ---------------------------------------------------------------- the shop: rewards grid and the wheel */ #panel.menu .mn-shop{gap:var(--u-gap)!important} #panel.menu .mn-shop .xp-adsh{text-align:center} #panel.menu .mn-shop .xp-adsh b{font-family:'Russo One',sans-serif;font-weight:400;font-size:20px;color:#ffe45c} #panel.menu .mn-shop .xp-adsh span{display:block;font-size:var(--u-small);color:var(--u-text-2)} #panel.menu .mn-wheel{position:relative;align-items:center} #panel.menu .mn-wheel-disc{display:none} #panel.menu .mn-wheel::before{content:"";flex:none;width:96px;height:96px;border-radius:50%;border:5px solid #ffe45c;background:conic-gradient(#ff5fa8 0 45deg,#5fd0ff 0 90deg,#ffb02e 0 135deg,#7dffb8 0 180deg,#c58bff 0 225deg,#ffe45c 0 270deg,#72edff 0 315deg,#ff7a7a 0 360deg);box-shadow:0 0 0 4px #7a3a00,0 0 24px #ffe45c66;animation:mbSpin 14s linear infinite;position:static;margin:0;color:transparent} #panel.menu .mn-wheel>div{flex:1} #panel.menu .mn-wheel .mn-btn{width:100%;justify-content:center} /* ---------------------------------------------------------------- the workshop and the hero: calm columns */ #panel.menu .mn-ws{gap:var(--u-gap)!important} #panel.menu .it-detail{padding:var(--u-pad)!important} /* ---------------------------------------------------------------- touch targets */ #panel.menu :is(.m-tabs>button,.mn-btn,.m-play,.m-yellow){min-width:44px} @media (prefers-reduced-motion:reduce){#panel.menu *{animation:none!important;transition:none!important}} /* ---------------------------------------------------------------- v054h fixes after the first full screenshot pass */ #panel.menu .h-head>:first-child,#panel.menu .h-head>div>:first-child{font-family:'Russo One',sans-serif!important;font-weight:400!important;font-size:var(--u-h1)!important;text-shadow:0 3px 0 #0b0630} #panel.menu .d-pts{border-radius:var(--u-r)!important;border:3px solid var(--u-line)!important;background:var(--u-surface)!important;box-shadow:var(--u-hi),var(--u-drop)!important} html.wide #panel[data-route=hero] .m-body>.tm-row{display:none} html.wide #panel[data-route=hero] .m-body{grid-template-rows:minmax(0,1fr)!important} /* phone: the two buff tiles keep only the essentials */ @media (max-width:520px){ #panel.menu .mn-buffs{gap:8px!important} #panel.menu .mn-tile{min-height:56px;padding:6px 26px 6px 8px!important;gap:6px} #panel.menu .mn-tile small,#panel.menu button.mn-tile .mn-adtag{display:none} #panel.menu .mn-tile b{font-size:12.5px;white-space:normal} #panel.menu .mn-tile img,#panel.menu .mn-tile .mn-tile-ic{width:30px;height:30px} #panel.menu button.mn-tile .mn-tv{width:18px;height:18px;font-size:9px} #panel.menu .mn-tile.on strong{font-size:14px} } html.wide #panel[data-route=hero] .m-body>.xp-test{display:none} html body #panel#panel.menu .h-head>b{font-family:'Russo One',sans-serif!important;font-weight:400!important;font-size:var(--u-h1)!important;letter-spacing:.5px;text-transform:none} /* ---------------------------------------------------------------- v054i: windows over the game */ /* case / gift opening: a wide window, the ribbon shows 7+ items, the marker is a glowing gold line */ .case-opening{width:100%!important;max-width:none!important} .case-opening .chest-window{width:min(900px,94vw)!important;height:150px!important;border:4px solid #ffe45c!important;border-radius:20px!important;background:linear-gradient(180deg,#160c55,#0b0630)!important;box-shadow:0 0 30px #ffe45c55,inset 0 0 30px #0009!important;-webkit-mask:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);mask:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000)} .case-opening .chest-window>i{width:4px!important;background:#fff6c4!important;box-shadow:0 0 16px #ffe45c,0 0 4px #fff!important;z-index:2} .case-opening .chest-ribbon{margin-top:10px} /* results: «ещё забег» is a secondary action, not an ad colour (green = ad) */ #panel.r-result .r-btns .m-yellow{background:linear-gradient(180deg,#6fb0ff,#2a64d6)!important;color:#fff!important;box-shadow:0 5px 0 #173c8c!important} /* level-up: the three ad tools sit on one line, the free reroll looks like a plain tool */ .mn-up{gap:10px!important;margin-top:14px!important} .mn-up .mn-btn:not(.mn-ad){background:#ffffff1a!important;color:#fff!important;box-shadow:0 4px 0 #0b0630!important} @media (max-width:520px){.mn-up{display:grid!important;grid-template-columns:1fr 1fr}.mn-up>:first-child{grid-column:1/-1}} html body #panel#panel.menu :is(.h-head>b,.m-title){text-transform:uppercase!important} @media (max-width:520px){#panel.menu .mn-shop .mn-btn{font-size:11.5px!important;padding:8px 6px!important;gap:4px;white-space:nowrap}#panel.menu .mn-shop .mn-btn .mn-tv{width:18px;height:18px;font-size:8px}} #panel[data-route=patrol] .xp-pic{min-height:150px;height:150px} #panel[data-route=patrol] .xp-pic img{width:100%;height:100%;object-fit:cover} html.wide #panel[data-route=patrol] .xp-pic{height:min(46vh,380px)} /* ================================================================ v054j: compact pass (nothing clipped, no scroll on PC) */ :root{--u-drop:0 4px 0 #0b0630,0 6px 12px #0006} #panel.menu :is(.m-card,.xp-card,.m-stage,.goal-home,.xp-row,.mn-quests,.mn-wheel,.mn-conv,.case-shop,.xp-gift,.m-gear,.m-inv,.d-row,.xp-ad,.it-detail,.d-pts){box-shadow:var(--u-hi),var(--u-drop)!important} #panel.menu .m-play{box-shadow:0 5px 0 #b86e00,0 8px 16px #ffb02e33!important} /* column wrappers keep room for shadows and glows (they were clipped at the edges) */ html.wide #panel.menu .hx-left,html.wide #panel.menu .hx-right{padding:6px 10px 14px 6px!important;margin:-6px -10px 0 -6px} /* tabs: buttons fill the segment evenly */ #panel.menu .m-tabs>button{margin:0!important;transform:none!important} /* icons inside text never inherit image animations or sizes */ #panel.menu img.mn-ic,.mn-cur img.mn-ic{animation:none!important;width:1.15em!important;height:1.15em!important;margin:0 .1em!important;vertical-align:-.2em!important;filter:none!important;transform:none!important;position:static!important} /* the ad mark: the ▶ icon only — the word did not fit and covered text */ .mn-adtag{display:none!important} button.mn-tile{padding-right:12px!important} button.mn-tile .mn-tv{position:static!important;order:3;margin-left:auto} /* home on PC: the island under the title, not under it */ html.wide #panel[data-route=home] .m-body>.m-isle{grid-row:2/12!important;align-self:start;margin-top:10px} /* «received» card: a centred window, one entrance only */ #panel:has(.m-card.got) .m-body,#panel:has(.m-card.got) .hx-left,#panel:has(.m-card.got) .hx-right{animation:none!important;transform:none!important} html body #panel#panel .m-card.got{position:fixed!important;left:50%!important;top:50%!important;right:auto!important;width:min(420px,90vw)!important;max-height:86vh;overflow:auto;transform:translate(-50%,-50%)!important;z-index:60!important;grid-column:auto!important;box-shadow:0 0 0 100vmax #05031acc,0 10px 40px #000a!important} html body #panel#panel .m-card.got.seen,html body #panel#panel .m-card.got.seen *{animation:none!important} .m-card.got .it-props{width:100%} /* the shop rewards never re-animate */ #panel.menu .mn-shop,#panel.menu .mn-shop *:not(.mw-disc){animation:none!important} /* ---------------------------------------------------------------- hero (PC): everything on one screen */ html.wide #panel[data-route=hero] .hx-left>.m-title{display:none} html.wide #panel[data-route=hero] .m-gear{padding:8px!important} html.wide #panel[data-route=hero] .m-gear .m-slot>.it{width:60px!important;height:60px!important} html.wide #panel[data-route=hero] .m-gear .m-slot{gap:2px} html.wide #panel[data-route=hero] .m-doll canvas{height:230px!important;width:auto!important} html.wide #panel[data-route=hero] .m-stats{padding:6px!important;gap:6px!important} html.wide #panel[data-route=hero] .m-stats>div{padding:4px 8px!important} #panel[data-route=hero] .it-detail{position:relative;padding:12px!important} #panel[data-route=hero] .it-detail .it-dh{gap:10px} #panel[data-route=hero] .it-detail .it-dh>.it{width:60px!important;height:60px!important} #panel[data-route=hero] .it-detail .it-props{display:grid!important;grid-template-columns:1fr 1fr;gap:4px 10px!important;margin:8px 0!important} #panel[data-route=hero] .it-detail .it-props li{padding:3px 8px!important;font-size:12px!important;min-height:0!important} #panel[data-route=hero] .it-detail .it-acts{display:flex!important;flex-wrap:wrap;gap:8px!important;align-items:center} #panel[data-route=hero] .it-detail .it-acts>.main{flex:1 1 140px;min-height:44px} #panel[data-route=hero] .it-detail .it-acts>button:not(.main){flex:0 1 auto;min-height:40px;padding:6px 10px!important} #panel[data-route=hero] .it-detail .xp-lock{position:absolute!important;top:10px;right:10px;margin:0!important} /* ---------------------------------------------------------------- workshop: rarity fits */ #panel[data-route=workshop] .h-head>small{display:none} #panel[data-route=workshop] .xp-card.sel{padding:10px 12px!important} #panel[data-route=workshop] .xp-card.sel .xp-big{width:60px!important;height:60px!important} #panel[data-route=workshop] .xp-card.sel .xp-big img{width:48px!important;height:48px!important} #panel[data-route=workshop] .xp-mats{gap:10px!important} #panel[data-route=workshop] .xp-mat{display:grid!important;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;justify-items:start;text-align:left!important;padding:8px 10px!important;min-height:0!important;column-gap:8px} #panel[data-route=workshop] .xp-mat img{grid-row:1/3;width:44px!important;height:44px!important} #panel[data-route=workshop] .xp-mat b{font-size:13px!important} #panel[data-route=workshop] .xp-card.col{padding:10px 12px!important} #panel[data-route=workshop] .xp-card.col p{margin:0!important;font-size:12.5px!important;line-height:1.35} #panel[data-route=workshop] .xp-card.col p+p{margin-top:6px!important} #panel[data-route=workshop] .xp-card.col b.up,#panel[data-route=workshop] .xp-card.col b.warn,#panel[data-route=workshop] .xp-card.col b.bad{font-size:14px!important} #panel[data-route=workshop] .mn-ws .mn-big{min-height:48px;padding:8px 14px!important} #panel[data-route=workshop] .mn-done{padding:8px!important;font-size:13px} /* ---------------------------------------------------------------- shop rewards: one compact board */ #panel.menu .mn-shop{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important} #panel.menu .mn-shop>.xp-adsh{margin:0} #panel.menu .mn-shop .xp-ad{padding:10px 8px!important;gap:2px!important} #panel.menu .mn-shop .xp-ad .pic img{width:40px!important;height:40px!important} #panel.menu .mn-shop .xp-ad b{font-size:14px} #panel.menu .mn-shop .mn-btn{min-height:38px;padding:6px 10px!important;font-size:13px!important;margin-top:4px} #panel.menu .mn-shop .mn-case{display:grid!important;grid-template-columns:52px 1fr auto;grid-template-rows:auto auto;justify-items:start;text-align:left;column-gap:12px;align-items:center} #panel.menu .mn-shop .mn-case .pic{grid-row:1/3} #panel.menu .mn-shop .mn-case em{font-size:12px;grid-column:2} #panel.menu .mn-shop .mn-case .mn-btn{grid-column:3;grid-row:1/3;margin:0} #panel.menu .mn-wheel{display:flex!important;gap:14px;padding:12px!important} #panel.menu .mn-wheel::before{display:none!important} .mn-mini-wheel{position:relative;flex:none;width:112px;height:112px} .mn-mini-wheel .mw-disc{position:absolute;inset:0;border-width:5px!important;transition:none;animation:mbSpin 30s linear infinite} .mn-mini-wheel .mw-disc span{position:absolute;width:auto!important} .mn-mini-wheel .mw-disc img{width:20px!important;height:20px!important} .mn-mini-wheel .mw-hub{width:26px;height:26px;margin:-13px;border-width:3px} .mn-mini-wheel .mw-pin{top:-12px;margin-left:-8px;border-width:8px;border-top-width:16px} #panel.menu .mn-conv{padding:10px 12px!important} @media (max-width:520px){.mn-mini-wheel{width:92px;height:92px}} #panel.menu .mn-wheel>.mn-mini-wheel{flex:none!important;width:112px!important;height:112px!important} #panel.menu .mn-shop .mn-case .pic img{width:52px!important;height:52px!important} #panel.menu .mn-shop .mn-case b{font-size:15px} html.wide #panel[data-route=hero] .m-doll canvas{height:200px!important} html.wide #panel[data-route=hero] .m-gear .m-slot>.it{width:52px!important;height:52px!important} html.wide #panel[data-route=hero] .m-gear .m-slot small{font-size:10px} html.wide #panel[data-route=hero] .m-stats>div img{width:18px!important;height:18px!important} html.wide #panel[data-route=hero] .m-stats>div b{font-size:16px!important} html.wide #panel[data-route=hero] .hx-left{gap:10px!important} #panel.menu .mn-shop .mn-case .pic{width:52px;height:52px;display:grid;place-items:center;overflow:hidden} #panel.menu .mn-shop .xp-ad{min-width:0;overflow:hidden} #panel.menu .mn-shop .xp-ad>.mn-btn{max-width:100%;width:100%;justify-content:center} @media (max-width:520px){#panel.menu .mn-shop .xp-ad>.mn-btn{font-size:10.5px!important;padding:6px 4px!important} #panel[data-route=hero] .it-detail .it-props{grid-template-columns:1fr!important} #panel[data-route=hero] .m-doll small{display:none}} html.wide #panel[data-route=hero] .hx-left>.m-stats{order:2} html.wide #panel[data-route=hero] .hx-left>.it-detail{order:3} html.wide #panel[data-route=hero] .hx-left>.m-gear{order:1} html.wide #panel[data-route=hero] .m-doll small{display:none} html.wide #panel[data-route=hero] .m-doll canvas{height:190px!important} html.wide #panel[data-route=hero] .hx-left>.m-stats{order:4} html.wide #panel[data-route=hero] .hx-left>.it-detail{order:2} html.wide #panel[data-route=hero] .m-stats{padding:4px!important} html.wide #panel[data-route=hero] .m-stats>div{display:flex!important;align-items:center;justify-content:center;gap:6px;padding:4px!important;min-height:0!important} html.wide #panel[data-route=hero] .m-stats>div span{display:flex!important;align-items:baseline;gap:5px} html.wide #panel[data-route=hero] .m-stats>div small{font-size:10px!important} html.wide #panel[data-route=hero] .it-detail .it-dh em,html.wide #panel[data-route=hero] .it-detail .it-dh small+em{display:none} html.wide #panel[data-route=hero] .it-detail .it-props{margin:6px 0!important} html.wide #panel[data-route=hero] .it-detail .it-props li{padding:2px 8px!important} html body #panel#panel .m-card.got.fx-pop{animation:gotIn .35s cubic-bezier(.2,1.5,.4,1) both!important} html body #panel#panel .m-card.got.seen.fx-pop{animation:none!important} /* case / gift opening: no new picture behind — the screen is just dimmed in violet */ #overlay:has(#panel[data-route=chest]){background:radial-gradient(ellipse at 50% 45%,#3a2499e6,#140a4ff2 70%)!important;backdrop-filter:blur(3px)!important} #overlay:has(#panel[data-route=chest])>#menuBg{display:block!important;filter:blur(2px) brightness(.55)} /* the wheel drawing */ .mw-disc{background:none!important;border:0!important;overflow:visible} .mw-disc .mw-svg{display:block;width:100%;height:100%;border-radius:50%} .mw-wheel .mw-disc{inset:4%!important;box-shadow:0 0 0 10px #f5b81c,0 0 0 14px #7a3a00,0 0 0 16px #ffe866,0 0 40px #ffe45c88,inset 0 0 30px #0007!important;border-radius:50%} .mw-wheel .mw-lights{inset:-6px!important;background:none!important} .mw-hub{background:radial-gradient(circle at 40% 35%,#fff6c4,#ffb02e 55%,#a85a00)!important;border:4px solid #7a3a00!important} .mw-pin{border-top-color:#ff3b3b!important;filter:drop-shadow(0 3px 0 #7a0000) drop-shadow(0 6px 8px #0008)!important;z-index:3} .mn-mini-wheel .mw-disc{inset:3px!important;box-shadow:0 0 0 4px #f5b81c,0 0 0 6px #7a3a00,0 0 16px #ffe45c66!important;border-radius:50%} #mnWheelShow .mw-wheel{width:min(80vmin,500px)} #overlay:has(#panel[data-route=chest])>#menuBg{display:none!important} #overlay:has(#panel[data-route=chest]){background:radial-gradient(ellipse at 50% 42%,#4a2fb8,#241470 55%,#0f0838 100%)!important} html body .mw-disc svg.mw-svg{display:block!important;width:100%!important;height:100%!important;max-width:none!important} /* ================================================================ v054k */ /* tabs: the active one sits exactly in the middle (its depth is drawn inside, not below) */ #panel.menu .m-tabs{align-items:stretch!important} #panel.menu .m-tabs>button:is(.on,[aria-selected=true],.sel,.active){box-shadow:inset 0 -4px 0 #d98a00,inset 0 2px 0 #fff6!important} /* workshop: tighter rhythm, the buttons higher */ #panel[data-route=workshop] .m-body{gap:8px!important} html.wide #panel[data-route=workshop] .m-body{row-gap:8px!important} #panel[data-route=workshop] .m-body>.m-note,#panel[data-route=workshop] .m-body>p{margin:0!important} #panel[data-route=workshop] .xp-tag.pad{margin:2px 0 -2px!important} #panel[data-route=workshop] .mn-ws{margin:0!important;gap:8px!important} #panel[data-route=workshop] .mn-ws .mn-big{min-height:44px;padding:6px 14px!important;font-size:14px!important} #panel[data-route=workshop] .xp-card{margin:0!important} /* shop as one page */ #panel.menu .sh-h{margin:4px 0 0!important;font-family:'Russo One',sans-serif;font-weight:400;font-size:18px;color:#ffe45c;letter-spacing:.5px} #panel.menu .sh-h small{font-family:Nunito,system-ui,sans-serif;font-size:12px;color:var(--u-text-3);margin-left:8px;letter-spacing:0} #panel.menu .sh-show{display:grid;gap:10px} #panel.menu .sh-show .m-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px} #panel[data-route=shop] .xp-gift{min-height:0!important;padding:10px!important} /* home: mastery + patrol side by side, small like the buff tiles */ #panel.menu .mn-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;order:4} html.wide #panel[data-route=home] .m-body>.mn-pair{grid-column:2;grid-row:4} #panel.menu .mn-pair>*{margin:0!important;width:auto!important;min-width:0} #panel.menu .mn-pair .mastery-card{padding:8px 10px!important;min-height:64px;display:grid!important;grid-template-columns:40px 1fr;align-items:center;gap:2px 8px} #panel.menu .mn-pair .mastery-card>img{width:40px!important;height:34px!important;grid-row:1/4;transform:none!important} #panel.menu .mn-pair .mastery-card small,#panel.menu .mn-pair .mastery-card .m-note{font-size:10px!important} #panel.menu .mn-pair .mastery-card b{font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #panel.menu .mn-pair .mastery-card>p:last-child,#panel.menu .mn-pair .mastery-card .mc-rew{display:none} #panel.menu .mn-pair .xp-row{padding:8px 10px!important;min-height:64px;gap:8px!important} #panel.menu .mn-pair .xp-row img{width:34px!important;height:34px!important} #panel.menu .mn-pair .xp-row span{font-size:12.5px!important;line-height:1.25} /* pair tiles: the coin in the patrol line stays text-sized, the album link inside the card */ #panel.menu .mn-pair .xp-row span img,#panel.menu .mn-pair .xp-row .mn-ic,#panel.menu .mn-pair .xp-row svg{width:1.1em!important;height:1.1em!important;vertical-align:-.15em;animation:none!important} #panel.menu .mn-pair .goal-home{display:grid;gap:2px} #panel.menu .mn-pair .goal-home>:not(.mastery-card){font-size:10px!important;padding:0 6px!important} #panel.menu .mn-pair .mastery-card .mc-bar,#panel.menu .mn-pair .mastery-card u{height:5px!important} /* shop: the gift card is small, the day plan compact */ #panel[data-route=shop] .xp-gift{display:grid!important;grid-template-columns:64px 1fr;align-items:center;text-align:left!important;gap:2px 12px} #panel[data-route=shop] .xp-gift img{width:56px!important;height:56px!important;grid-row:1/3} #panel[data-route=shop] .xp-gift b{font-size:16px!important} #panel[data-route=shop] .g-days>div{padding:4px!important;min-height:0!important} #panel[data-route=shop] .g-days small,#panel[data-route=shop] .g-days em{font-size:9.5px!important} #panel[data-route=shop] .m-card:has(.g-days)>.m-note{display:none} #panel[data-route=shop] .s-offer .it-props{display:none} #panel[data-route=shop] .s-offer{padding:8px!important} @media (max-width:520px){#panel.menu .mn-pair .mastery-card b{font-size:12px!important}} /* case reveal: «Надеть» is the main action, «Забрать» and «К улучшению» are equal secondary ones under it */ html body #panel#panel .case-buttons{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;width:min(420px,92vw);margin:14px auto 0!important} html body #panel#panel .case-buttons>[data-action=caseEquip]{grid-column:1/-1;order:1;min-height:56px;font-size:20px!important;background:linear-gradient(180deg,#ffe866,#ffb02e)!important;color:#3a1c00!important;box-shadow:0 5px 0 #b86e00!important;border-radius:16px!important;font-family:'Russo One',sans-serif!important;font-weight:400!important} .case-buttons>[data-action=caseEquip]:disabled{filter:grayscale(.6) brightness(.8)} html body #panel#panel .case-buttons>:is([data-action=closereveal],[data-action=caseWorkshop]){order:2;min-height:46px;font-size:15px!important;border-radius:14px!important;background:#ffffff1c!important;color:#fff!important;box-shadow:0 4px 0 #0b0630!important;border:2px solid #ffffff2e!important;font-family:Nunito,system-ui,sans-serif!important;font-weight:900!important;text-decoration:none!important} html body #panel#panel .case-buttons>*{width:auto!important;margin:0!important;padding:10px 14px!important} #panel .case-opening,#panel .case-reveal,#panel:has(.case-buttons) .m-card{margin-top:0} html body #panel#panel .case-buttons>:is([data-action=closereveal],[data-action=caseWorkshop]){grid-column:auto!important;grid-row:2!important} html body #panel#panel .case-compare li,html body #panel#panel .case-compare>div{width:100%!important} /* ================================================================ v054l */ /* workshop: the action right under the item, details after — the button is always on screen */ #panel[data-route=workshop] .m-body>.h-head{order:0} #panel[data-route=workshop] .m-body>.m-tabs{order:1} #panel[data-route=workshop] .m-body>.xp-card.sel,#panel[data-route=workshop] .m-body>.xp-card:not(.col):first-of-type{order:2} #panel[data-route=workshop] .m-body>.xp-tag.pad{order:3} #panel[data-route=workshop] .m-body>.xp-mats{order:4} #panel[data-route=workshop] .m-body>.m-play{order:5} #panel[data-route=workshop] .m-body>.mn-ws{order:6} #panel[data-route=workshop] .m-body>.xp-card.col,#panel[data-route=workshop] .m-body>.xp-card:not(.sel){order:7} #panel[data-route=workshop] .m-body>.m-note,#panel[data-route=workshop] .m-body>p{order:8} #panel[data-route=workshop] .m-body>.m-inv{order:9} #panel[data-route=workshop] .m-body>.tm-row{order:10} #panel[data-route=workshop] .mn-ws{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important} #panel[data-route=workshop] .mn-ws>:only-child,#panel[data-route=workshop] .mn-ws>.mn-big,#panel[data-route=workshop] .mn-ws>.mn-done,#panel[data-route=workshop] .mn-ws>.mn-wait{grid-column:1/-1} .mn-half{min-height:46px;justify-content:center;text-align:center;font-size:14px!important;padding:6px 10px!important} .mn-half span{display:grid;justify-items:center} .mn-half small{font-size:10.5px!important} #panel[data-route=workshop] .mn-wait{margin:0;font-size:12px} /* home: only the island picture is the button, not its whole box */ #panel.menu .m-isle{pointer-events:none} #panel.menu .m-isle>img,#panel.menu .m-isle img{pointer-events:auto;cursor:pointer} /* home: mastery and patrol tiles look like the buff tiles */ #panel.menu .mn-pair>*{border-radius:16px!important;border:2px solid #ffffff33!important;background:linear-gradient(135deg,#3b2a9c,#241470)!important;box-shadow:0 4px 0 #0b0630!important;cursor:pointer;transition:transform .12s} #panel.menu .mn-pair>*:active{transform:translateY(3px)} #panel.menu .mn-pair .goal-home .mastery-card{background:none!important;border:0!important;box-shadow:none!important} #panel.menu .mn-pair .xp-row{display:flex!important;align-items:center} #panel.menu .mn-pair .xp-row span{display:grid!important} /* the exchange */ #panel.menu .mn-conv{display:grid!important;grid-template-columns:auto 1fr 1fr;align-items:center;gap:10px!important} .cv-h{display:grid}.cv-h b{font-family:'Russo One',sans-serif;font-weight:400;font-size:16px}.cv-h small{font-size:11px;color:var(--u-text-3)} .cv-deal{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:6px 10px;border:2px solid #ffffff2e;border-radius:14px;background:linear-gradient(180deg,#352399,#24157a);color:#fff;font-weight:900;font-size:16px;box-shadow:0 4px 0 #0b0630;cursor:pointer} .cv-deal:active{transform:translateY(3px)} .cv-deal span{display:flex;align-items:center;gap:4px}.cv-deal img{width:22px;height:22px;object-fit:contain} .cv-deal i{font-style:normal;color:#ffe45c} .cv-deal em{position:absolute;top:-8px;right:-6px;font-style:normal;font-size:10px;font-weight:900;padding:1px 6px;border-radius:8px;background:#7dffb8;color:#063a1c} @media (max-width:520px){#panel.menu .mn-conv{grid-template-columns:1fr 1fr}.cv-h{grid-column:1/-1}} /* shop: both columns start on the same line */ html.wide #panel[data-route=shop] .m-body>.hx-left,html.wide #panel[data-route=shop] .m-body>.hx-right{align-self:start;padding-top:0!important;margin-top:0!important} html.wide #panel[data-route=shop] .hx-left>.sh-h,html.wide #panel[data-route=shop] .hx-right .sh-h{margin:0!important;line-height:28px;height:28px} html.wide #panel[data-route=shop] .hx-right>.sh-show{gap:10px} #panel.menu .mn-pair .xp-row>span{display:block!important;min-width:0} #panel.menu .mn-pair .xp-row>span>small,#panel.menu .mn-pair .xp-row>span>em,#panel.menu .mn-pair .xp-row>span>i{display:block} #panel.menu .mn-pair .xp-row span span,#panel.menu .mn-pair .mn-cur{display:inline!important} /* v054m: workshop list — rarity chips and pages; the free attempt on cooldown keeps its slot with a timer */ .it-rar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px} .it-rar button{flex:1 1 auto;min-height:32px;padding:4px 8px;border-radius:10px;border:2px solid #ffffff22;background:#ffffff12;color:#e7e0ff;font-weight:900;font-size:12px;cursor:pointer} .it-rar button.rar0{border-color:#c9d6e855}.it-rar button.rar1{border-color:#66ffb077;color:#a6ffcf}.it-rar button.rar2{border-color:#72edff77;color:#a8f5ff}.it-rar button.rar3{border-color:#c8a6ff88;color:#dcc8ff}.it-rar button.rar4{border-color:#ffe45c88;color:#ffe866} .it-rar button.on{background:linear-gradient(180deg,#ffe866,#ffb02e);color:#3a1c00;border-color:transparent} #panel[data-route=workshop] .it-pages{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px} #panel[data-route=workshop] .it-pages span{font-weight:900} .mn-cool{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:16px;border:2px dashed #ffe45c66;background:#ffe45c14;color:#ffe866;font-weight:900;font-size:14px;text-align:center} .mn-cool span{display:grid;justify-items:center}.mn-cool small{font-size:11px;color:#e7e0ff;font-weight:700}.mn-cool b{color:#ffe866} /* ================================================================ v054n */ /* a used reward: a solid dashed button with a live timer */ .mn-used{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;border-radius:14px;border:2px dashed #ffe45c88;background:#1b0f66;color:#ffe866;text-align:center;line-height:1.15} .mn-used b{font-weight:900;font-size:13px}.mn-used small{font-size:11px;color:#e7e0ff;font-weight:700}.mn-used i{font-style:normal;color:#ffe866;font-variant-numeric:tabular-nums} .mn-shop .xp-ad>.mn-used{width:100%;margin-top:4px} .mn-wheel .mn-used{width:100%} .violet-solid{background:linear-gradient(180deg,#c79bff,#7a3ad6)!important;color:#fff!important;box-shadow:0 4px 0 #4a1a9c!important} /* the growing case ladder */ .gc-ladder{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;grid-column:2} .gc-ladder i{font-style:normal;font-size:10.5px;font-weight:900;padding:2px 7px;border-radius:8px;background:#ffffff12;border:2px solid currentColor;opacity:.55} .gc-ladder i.done{opacity:.35}.gc-ladder i.cur{opacity:1;box-shadow:0 0 12px currentColor;animation:breathe 1.6s ease-in-out infinite} .gc-ladder s{text-decoration:none;color:#9d92d8;font-weight:900} .gc-ladder .rc1{color:#66ffb0}.gc-ladder .rc2{color:#72edff}.gc-ladder .rc3{color:#c8a6ff}.gc-ladder .rc4{color:#ffe45c} #panel.menu .mn-shop .mn-case{grid-template-rows:auto auto auto!important} #panel.menu .mn-shop .mn-case .pic{grid-row:1/4!important} #panel.menu .mn-shop .mn-case>.mn-btn,#panel.menu .mn-shop .mn-case>.mn-used{grid-column:3;grid-row:1/4} /* folded long lists */ .mn-fold:not(.open)>:nth-child(n+6){display:none!important} .mn-foldbtn{display:block;margin:6px auto 0;padding:4px 14px;border:0;border-radius:10px;background:#ffffff1a;color:#e7e0ff;font-weight:900;font-size:12px;cursor:pointer} /* home: mastery and patrol — two equal tiles */ #panel.menu .mn-pair{align-items:stretch} #panel.menu .mn-pair>*{height:78px!important;min-height:0!important;padding:8px 12px!important;overflow:hidden;display:flex!important;align-items:center} #panel.menu .mn-pair .goal-home>:not(.mastery-card){display:none!important} #panel.menu .mn-pair .goal-home .mastery-card{width:100%!important;padding:0!important;min-height:0!important;grid-template-columns:44px 1fr!important;gap:1px 10px!important} #panel.menu .mn-pair .mastery-card>img{width:44px!important;height:40px!important} #panel.menu .mn-pair .mastery-card>:not(img){min-width:0} #panel.menu .mn-pair .mastery-card small:first-of-type{font-size:10px!important;letter-spacing:.5px} #panel.menu .mn-pair .mastery-card b{font-family:'Russo One',sans-serif;font-weight:400;font-size:14px!important} #panel.menu .mn-pair .xp-row{gap:10px!important} #panel.menu .mn-pair .xp-row img:first-child{width:44px!important;height:44px!important} #panel.menu .mn-pair .xp-row b{font-family:'Russo One',sans-serif;font-weight:400;font-size:14px!important} #panel.menu .mn-pair .xp-row small{font-size:11px!important;color:#cfc6ff} /* workshop on PC: two real columns like the hero screen */ html.wide #panel[data-route=workshop] .m-body{grid-template-rows:minmax(0,1fr)!important;overflow:hidden;height:100%} html.wide #panel[data-route=workshop] .m-body>.hx-left,html.wide #panel[data-route=workshop] .m-body>.hx-right{grid-row:1;display:flex;flex-direction:column;gap:10px;min-height:0;max-height:100%;overflow-y:auto} html.wide #panel[data-route=workshop] .m-body>.hx-left{grid-column:1}html.wide #panel[data-route=workshop] .m-body>.hx-right{grid-column:2} html.wide #panel[data-route=workshop] .hx-left>*,html.wide #panel[data-route=workshop] .hx-right>*{margin:0!important;flex:none} html.wide #panel[data-route=workshop] .hx-right>.m-inv{max-height:none!important;overflow:visible!important} #panel[data-route=workshop] .hx-left>.h-head{order:0}#panel[data-route=workshop] .hx-left>.m-tabs{order:1}#panel[data-route=workshop] .hx-left>.xp-card.sel,#panel[data-route=workshop] .hx-left>.xp-card:not(.col):first-of-type{order:2} #panel[data-route=workshop] .hx-left>.xp-tag.pad{order:3}#panel[data-route=workshop] .hx-left>.xp-mats{order:4}#panel[data-route=workshop] .hx-left>.m-play{order:5}#panel[data-route=workshop] .hx-left>.mn-ws{order:6} #panel[data-route=workshop] .hx-left>.xp-card.col,#panel[data-route=workshop] .hx-left>.xp-card:not(.sel){order:7}#panel[data-route=workshop] .hx-left>.m-note,#panel[data-route=workshop] .hx-left>p{order:8}#panel[data-route=workshop] .hx-left>.tm-row{order:10} /* shop: the two headers on one line */ html.wide #panel[data-route=shop] .sh-h{display:flex!important;align-items:baseline;gap:8px;height:30px!important;line-height:30px!important;margin:0!important;padding:0!important} html.wide #panel[data-route=shop] .hx-right>.sh-show{margin-top:0!important} html.wide #panel[data-route=shop] .hx-left,html.wide #panel[data-route=shop] .hx-right{padding-top:0!important} html body #panel#panel .it-rar{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;margin:6px 0 8px!important} html body #panel#panel .it-rar button{flex:1 1 0!important;min-width:0!important;min-height:30px!important;height:30px;padding:2px 4px!important;border-radius:9px!important;font-size:11px!important;background:#ffffff12!important;box-shadow:none!important;border-width:2px!important;border-style:solid!important} html body #panel#panel .it-rar button.on{background:linear-gradient(180deg,#ffe866,#ffb02e)!important;color:#3a1c00!important;border-color:#ffb02e!important} #panel.menu .mn-pair .xp-row>img{width:44px!important;height:44px!important} #panel.menu .mn-pair .xp-row .mn-ic{width:1.1em!important;height:1.1em!important} #panel[data-route=patrol] .mn-pboost{display:block;width:100%} #panel[data-route=patrol] .mn-pboost>*{width:100%} html body #panel#panel .mn-pair .xp-row>img{width:44px!important;height:44px!important;flex:none} html body #panel#panel .mn-pair .xp-row>span img{width:1.1em!important;height:1.1em!important;vertical-align:-.15em} #overlay.menu{overflow:hidden!important} .mn-half span{display:block!important;text-align:center}.mn-half small{display:block} /* ================================================================ v054o */ /* rarity chips: centred text; the chosen one takes its rarity colour */ html body #panel#panel .it-rar button{display:flex!important;align-items:center;justify-content:center;text-align:center;line-height:1!important} html body #panel#panel .it-rar button.on{color:#1b0f66!important;border-color:transparent!important} html body #panel#panel .it-rar button.rar-1.on{background:linear-gradient(180deg,#ffe866,#ffb02e)!important} html body #panel#panel .it-rar button.rar0.on{background:linear-gradient(180deg,#eef3fa,#a9b6c8)!important} html body #panel#panel .it-rar button.rar1.on{background:linear-gradient(180deg,#8affc4,#2ecf7f)!important} html body #panel#panel .it-rar button.rar2.on{background:linear-gradient(180deg,#8ff3ff,#2aa8d6)!important} html body #panel#panel .it-rar button.rar3.on{background:linear-gradient(180deg,#dcc4ff,#8a4ff0)!important;color:#fff!important} html body #panel#panel .it-rar button.rar4.on{background:linear-gradient(180deg,#fff27a,#ffb02e)!important} /* home tiles: mastery and patrol, same height, nothing clipped */ html body #panel#panel .mn-pair>*{height:auto!important;min-height:92px!important;padding:10px 12px!important;align-items:center!important} html body #panel#panel .mn-pair .mastery-card{display:grid!important;grid-template-columns:46px 1fr!important;align-items:center!important;gap:0 10px!important} html body #panel#panel .mn-pair .mastery-card>img{width:46px!important;height:40px!important;grid-row:1!important} html body #panel#panel .mn-pair .mastery-card>div{display:grid;gap:3px;min-width:0} html body #panel#panel .mn-pair .mastery-card small{font-size:9.5px!important;letter-spacing:.5px;color:#7ee8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #panel#panel .mn-pair .mastery-card b{font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #panel#panel .mn-pair .mastery-card .goal-meter{height:6px!important;margin:1px 0!important} html body #panel#panel .mn-pair .mastery-card p{margin:0!important;font-size:10.5px!important;line-height:1.2;color:#cfc6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #panel#panel .mn-pair .xp-row{display:grid!important;grid-template-columns:46px 1fr;gap:0 10px!important} html body #panel#panel .mn-pair .xp-row>img{width:46px!important;height:46px!important} .pt-t{display:grid!important;gap:3px;min-width:0} .pt-t>b{font-family:'Russo One',sans-serif;font-weight:400;font-size:14px!important;color:#fff} .pt-t>small{font-size:12px!important;font-weight:800;color:#fff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pt-t>em{justify-self:start;font-style:normal;font-size:11px;font-weight:900;padding:2px 10px;border-radius:9px;background:linear-gradient(180deg,#ffe866,#ffb02e);color:#3a1c00} /* new item from a case: compact so the buttons are on screen */ html body #panel#panel .case-reward .case-halo img{width:96px!important;height:96px!important} html body #panel#panel .case-reward h3{margin:2px 0!important;font-size:20px!important} html body #panel#panel .case-compare>div{padding:4px 10px!important;min-height:0!important;font-size:13px!important} html body #panel#panel .case-compare{gap:4px!important} html body #panel#panel .case-reward{padding:12px 16px!important} html body #panel#panel .case-reward>.m-note{margin:4px 0!important} /* shop: gift card and showcase cards start on the same line */ html body #panel#panel .sh-show{gap:12px!important} html body #panel#panel .sh-show .s-offer{margin:0!important} html body #panel#panel .sh-show>.m-list{margin:0!important;padding:0!important;align-items:start} /* patrol tile v2 (home) */ html body #panel#panel .mn-pair .pt2{display:grid!important;grid-template-columns:52px 1fr!important;gap:0 10px!important;position:relative;overflow:hidden;align-items:center!important} html body #panel#panel .mn-pair .pt2::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 50%,#5ef2ff33,#0000 55%);pointer-events:none} html body #panel#panel .mn-pair .pt2.ok::before,html body #panel#panel .mn-pair .pt2.full::before{background:radial-gradient(circle at 18% 50%,#ffe45c44,#0000 60%)} html body #panel#panel .mn-pair .pt2 .pt2-ic{position:relative;width:52px;height:52px;display:grid!important;place-items:center} html body #panel#panel .mn-pair .pt2 .pt2-ic img{width:50px!important;height:50px!important;animation:ptBob 2.4s ease-in-out infinite;filter:drop-shadow(0 4px 6px #0008)} html body #panel#panel .mn-pair .pt2 .pt2-ic i{position:absolute;right:-4px;bottom:-2px;font-style:normal!important;font-size:10px;font-weight:900;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;background:#ffe45c;color:#3a1c00;box-shadow:0 2px 0 #b86e00} @keyframes ptBob{50%{transform:translateY(-5px) rotate(-4deg)}} html body #panel#panel .mn-pair .pt2 .pt2-t{display:grid!important;gap:4px;min-width:0} html body #panel#panel .mn-pair .pt2 .pt2-h{display:flex!important;align-items:center;gap:6px;min-width:0} html body #panel#panel .mn-pair .pt2 .pt2-h b{font-family:'Russo One',sans-serif;font-weight:400;font-size:14px!important;color:#fff} html body #panel#panel .mn-pair .pt2 .pt2-st{font-style:normal!important;font-size:9px;font-weight:900;letter-spacing:.5px;padding:2px 6px;border-radius:7px;background:#5ef2ff33;color:#8ff3ff;white-space:nowrap} html body #panel#panel .mn-pair .pt2.ok .pt2-st{background:#ffe45c33;color:#ffe866} html body #panel#panel .mn-pair .pt2.full .pt2-st{background:#ff6b6b33;color:#ff9a9a} html body #panel#panel .mn-pair .pt2.off .pt2-st{background:#ffffff1a;color:#cfc6ff} html body #panel#panel .mn-pair .pt2 .pt2-bar{position:relative;display:block!important;height:14px;border-radius:7px;background:#0b0630;border:1px solid #ffffff22;overflow:hidden} html body #panel#panel .mn-pair .pt2 .pt2-bar i{display:block;height:100%;background:linear-gradient(90deg,#3ee8a0,#a6ffcf);box-shadow:0 0 10px #7dffb888} html body #panel#panel .mn-pair .pt2.full .pt2-bar i{background:linear-gradient(90deg,#ffb02e,#ffe866)} html body #panel#panel .mn-pair .pt2 .pt2-bar small{position:absolute;inset:0;display:grid!important;place-items:center;font-size:9.5px!important;font-weight:900;color:#fff!important;text-shadow:0 1px 2px #000} html body #panel#panel .mn-pair .pt2 .pt2-loot{display:flex!important;align-items:center;gap:4px;font-size:12px;font-weight:900;color:#ffe866;min-width:0} html body #panel#panel .mn-pair .pt2 .pt2-loot img{width:16px!important;height:16px!important;object-fit:contain;animation:none!important} html body #panel#panel .mn-pair .pt2 .pt2-loot img+img{margin-left:6px} html body #panel#panel .mn-pair .pt2 .pt2-loot em{margin-left:auto;font-style:normal!important;font-size:10.5px;padding:2px 8px;border-radius:8px;background:linear-gradient(180deg,#ffe866,#ffb02e);color:#3a1c00;white-space:nowrap} @media (max-width:520px){html body #panel#panel .mn-pair .pt2{grid-template-columns:40px 1fr!important;gap:0 6px!important}html body #panel#panel .mn-pair .pt2 .pt2-ic{width:40px;height:40px}html body #panel#panel .mn-pair .pt2 .pt2-ic img{width:38px!important;height:38px!important}html body #panel#panel .mn-pair .pt2 .pt2-st{display:none}html body #panel#panel .mn-pair .pt2 .pt2-loot em{display:none}} /* v054p: patrol tile polish + mastery tile in the same style */ html body #panel#panel .mn-pair .pt2 .pt2-ic i{right:auto;left:-6px;top:-4px;bottom:auto;min-width:0;padding:0 5px;height:16px;line-height:16px;font-size:9px;background:linear-gradient(180deg,#a98bff,#6a3df0);color:#fff;box-shadow:0 2px 0 #2b1680} html body #panel#panel .mn-pair .pt2 .pt2-ic i::before{content:"УР."} html body #panel#panel .mn-pair .pt2 .pt2-bar small{color:#fff!important;text-shadow:-1px 0 #0b0630,1px 0 #0b0630,0 -1px #0b0630,0 1px #0b0630,0 1px 3px #000} html body #panel#panel .mn-pair .pt2.ok,html body #panel#panel .mn-pair .pt2.full{border-color:#ffe45c99!important;animation:ptGlow 1.8s ease-in-out infinite} @keyframes ptGlow{50%{box-shadow:0 4px 0 #0b0630,0 0 16px #ffe45c66}} html body #panel#panel .mn-pair .mastery-card .goal-meter{display:block!important;height:8px!important;margin:3px 0 2px;border-radius:5px;background:#0b0630;border:1px solid #ffffff22;overflow:hidden} html body #panel#panel .mn-pair .mastery-card .goal-meter i{display:block;height:100%;min-width:3px;background:linear-gradient(90deg,#b28cff,#5ef2ff);box-shadow:0 0 8px #8a6bff99} html body #panel#panel .mn-pair .mastery-card small{color:#8ff3ff!important;font-weight:900;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #panel#panel .mn-pair .mastery-card>img{animation:ptBob 3s ease-in-out infinite;filter:drop-shadow(0 4px 6px #0008)} html body #panel#panel .mn-pair .mastery-card p{margin:0!important;font-size:10.5px!important;color:#e9e4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:520px){ html body #panel#panel .mn-pair>*{padding:7px 8px!important} html body #panel#panel .mn-pair .goal-home .mastery-card{grid-template-columns:34px 1fr!important;gap:1px 6px!important} html body #panel#panel .mn-pair .mastery-card>img{width:34px!important;height:30px!important} html body #panel#panel .mn-pair .mastery-card small{font-size:0!important} html body #panel#panel .mn-pair .mastery-card small::before{content:"МАСТЕРСТВО";font-size:9px} html body #panel#panel .mn-pair .mastery-card b{font-size:11.5px!important;white-space:normal!important;line-height:1.1;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical} html body #panel#panel .mn-pair .mastery-card p{font-size:9.5px!important} html body #panel#panel .mn-pair .pt2 .pt2-ic i{left:-4px;font-size:8px;padding:0 3px} html body #panel#panel .mn-pair .pt2 .pt2-ic i::before{content:""} } /* v054q: patrol map — drone on a route, points of interest, log */ html body #panel#panel .pt-map{position:relative;height:200px!important;min-height:200px!important;flex:none!important;overflow:hidden;border-radius:16px;background:#0b0630} html.wide body #panel#panel .pt-map{height:240px!important;min-height:240px!important} @media (max-width:520px){html body #panel#panel .pt-sig{left:auto;right:10px;bottom:auto;top:44px}} html body #panel#panel .pt-map>.pt-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.7) hue-rotate(-8deg)} html body #panel#panel .pt-map .pt-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#5ef2ff14 1px,#0000 1px) 0 0/100% 22px,linear-gradient(90deg,#5ef2ff14 1px,#0000 1px) 0 0/22px 100%,radial-gradient(ellipse at 50% 50%,#0000 55%,#05021acc)} html body #panel#panel .pt-map .pt-grid::after{content:"";position:absolute;left:0;right:0;height:40%;background:linear-gradient(#0000,#5ef2ff1c,#0000);animation:ptScan 4s linear infinite} @keyframes ptScan{from{top:-40%}to{top:100%}} html body #panel#panel .pt-map .pt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} html body #panel#panel .pt-route{fill:none;stroke:#5ef2ff55;vector-effect:non-scaling-stroke;stroke-width:6px} html body #panel#panel .pt-route2{fill:none;stroke:#bffbff;vector-effect:non-scaling-stroke;stroke-width:2px;stroke-dasharray:6 7;animation:ptDash 1.2s linear infinite;filter:drop-shadow(0 0 3px #5ef2ff)} @keyframes ptDash{to{stroke-dashoffset:-13}} html body #panel#panel .pt-map.off .pt-route2,html body #panel#panel .pt-map.full .pt-route2{animation:none;stroke:#ffffff55;filter:none} html body #panel#panel .pt-poi,html body #panel#panel .pt-base{position:absolute;width:0;height:0;font-style:normal!important;z-index:2} html body #panel#panel .pt-poi b,html body #panel#panel .pt-base b{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#ffe45c;border:2px solid #3a1c00;box-shadow:0 0 0 4px #ffe45c33,0 0 10px #ffe45c} html body #panel#panel .pt-poi.hit b{animation:ptHit .9s ease-out} @keyframes ptHit{0%{box-shadow:0 0 0 0 #ffe45cff}100%{box-shadow:0 0 0 18px #ffe45c00}} html body #panel#panel .pt-base b{left:-11px;top:-11px;width:22px;height:22px;border-radius:7px;background:#5ef2ff;border-color:#06303a;animation:ptRadar 2s ease-out infinite} @keyframes ptRadar{0%{box-shadow:0 0 0 0 #5ef2ffaa}100%{box-shadow:0 0 0 26px #5ef2ff00}} html body #panel#panel .pt-poi em,html body #panel#panel .pt-base em{position:absolute;left:0;top:9px;transform:translateX(-50%);white-space:nowrap;font:900 9.5px/1 'Golos Text',sans-serif;font-style:normal;letter-spacing:.3px;color:#fff;padding:2px 5px;border-radius:6px;background:#0b0630d9;border:1px solid #ffffff2e} html body #panel#panel .pt-base em{top:14px;color:#8ff3ff} html body #panel#panel .pt-drone{position:absolute;left:14%;top:76%;width:0;height:0;z-index:4} html body #panel#panel .pt-drone img{position:absolute;left:-21px;top:-38px;width:42px!important;height:42px!important;transform:rotate(var(--tilt,0deg));transition:transform .4s;opacity:1!important;filter:drop-shadow(0 0 6px #5ef2ffaa)} html body #panel#panel .pt-drone s{position:absolute;left:-12px;top:-3px;width:24px;height:7px;border-radius:50%;background:#000a;filter:blur(2px)} html body #panel#panel .pt-pop{position:absolute;background:none;padding:0;border:0;width:auto;height:auto;z-index:5;display:flex;align-items:center;gap:2px;font:900 12px/1 'Russo One',sans-serif;color:#ffe866;text-shadow:0 1px 2px #000,0 0 6px #000;animation:ptPop 1.6s ease-out forwards;pointer-events:none} html body #panel#panel .pt-pop img{width:16px!important;height:16px!important;animation:none!important} @keyframes ptPop{0%{opacity:0;transform:translate(-50%,-120%) scale(.5)}15%{opacity:1;transform:translate(-50%,-140%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-300%) scale(1)}} html body #panel#panel .pt-sig{position:absolute;display:block;background:none;padding:0;left:10px;bottom:9px;font:900 10px/1 'Golos Text',sans-serif;letter-spacing:.8px;color:#7dffb8;text-shadow:0 0 6px #7dffb8;animation:ptBlink 1.4s steps(2) infinite;z-index:3} html body #panel#panel .pt-map.full .pt-sig{color:#ffb070;text-shadow:0 0 6px #ff8a3c} html body #panel#panel .pt-map.off .pt-sig{color:#cfc6ff;text-shadow:none;animation:none} @keyframes ptBlink{50%{opacity:.45}} html body #panel#panel .pt-map .pt-chip,html body #panel#panel .pt-map .pt-lv{z-index:3} html body #panel#panel .pt-log{display:grid!important;gap:4px;padding:10px 12px!important} html body #panel#panel .pt-log>b{font:400 12px/1.2 'Russo One',sans-serif;color:#8ff3ff;letter-spacing:.5px;text-transform:uppercase} html body #panel#panel .pt-log p{display:flex!important;background:none!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;padding:0!important;border:0!important;box-shadow:none!important;align-items:center;gap:8px;margin:0;font-size:12px;color:#e9e4ff} html body #panel#panel .pt-log p::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#5ef2ff} html body #panel#panel .pt-log p.lg-it::before{background:#c8a6ff} html body #panel#panel .pt-log p.lg-c::before{background:#ffe45c} html body #panel#panel .pt-log p.lg-bad::before{background:#ff7a5c} html body #panel#panel .pt-log p span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html body #panel#panel .pt-log p small{flex:none;font-size:10.5px;color:#a99fd8} /* v054q: patrol loot window */ .ptl{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;background:#12063acc;backdrop-filter:blur(3px);animation:ptlIn .2s ease-out} @keyframes ptlIn{from{opacity:0}} .ptl-card{position:relative;width:min(420px,100%);max-height:calc(100vh - 32px);overflow:auto;display:grid;justify-items:center;gap:10px;padding:18px 16px 16px;border-radius:20px;background:linear-gradient(160deg,#3b2a9c,#1d1060);border:2px solid #ffffff33;box-shadow:0 6px 0 #0b0630,0 18px 40px #000a;animation:ptlCard .35s cubic-bezier(.2,1.4,.4,1)} @keyframes ptlCard{from{transform:scale(.7);opacity:0}} .ptl-rays{position:absolute;left:50%;top:50px;width:260px;height:260px;margin:-130px 0 0 -130px;background:repeating-conic-gradient(#ffe45c22 0 12deg,#0000 12deg 30deg);border-radius:50%;animation:ptlSpin 9s linear infinite;pointer-events:none;-webkit-mask:radial-gradient(#000 30%,#0000 70%);mask:radial-gradient(#000 30%,#0000 70%)} @keyframes ptlSpin{to{transform:rotate(360deg)}} .ptl-drone{position:relative;width:64px;height:64px;animation:ptBob 1.6s ease-in-out infinite;filter:drop-shadow(0 4px 8px #000a)} .ptl-t{position:relative;font:400 18px/1 'Russo One',sans-serif;color:#fff;letter-spacing:.5px} .ptl-t u{text-decoration:none;margin-left:4px;padding:2px 7px;border-radius:8px;background:linear-gradient(180deg,#ffe866,#ffb02e);color:#3a1c00;font-size:14px} .ptl-res{position:relative;display:flex;gap:10px} .ptl-res span{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;background:#0b0630aa;border:1px solid #ffffff22;font:400 16px/1 'Russo One',sans-serif;color:#ffe866} .ptl-res span:last-child{color:#8ff3ff} .ptl-res img{width:22px;height:22px;object-fit:contain} .ptl-up{margin:0;font-weight:900;color:#7dffb8} .ptl-none{margin:0;font-size:12px;color:#cfc6ff} .ptl-items{position:relative;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px} .ptl-it{--rc:#9aa3b8;display:grid;justify-items:center;gap:3px;padding:8px 6px;border-radius:14px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--rc) 35%,#0000),#0b0630cc 70%);border:2px solid var(--rc);box-shadow:0 0 12px color-mix(in srgb,var(--rc) 45%,#0000);opacity:0;animation:ptlIt .45s cubic-bezier(.2,1.5,.4,1) forwards} .ptl-it.r1{--rc:#66ffb0}.ptl-it.r2{--rc:#72edff}.ptl-it.r3{--rc:#c8a6ff}.ptl-it.r4{--rc:#ffe45c} @keyframes ptlIt{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1;transform:none}} .ptl-it img{width:48px;height:48px;object-fit:contain} .ptl-it small{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.3px} .ptl-it span{font-size:11px;font-weight:800;color:#fff;text-align:center;line-height:1.15} .ptl-btns{position:relative;display:flex;gap:8px;width:100%} .ptl-btns button{flex:1;min-height:46px} html body .ptl .ptl-btns button.m-ghost{border-radius:14px!important;border:2px solid #ffffff55!important;background:linear-gradient(180deg,#5a46c8,#3b2a9c)!important;color:#fff!important;font:400 14px/1 'Russo One',sans-serif!important;box-shadow:0 4px 0 #0b0630!important;cursor:pointer;text-decoration:none!important} .ptl-btns .m-ghost:active{transform:translateY(3px);box-shadow:none} /* v054r: full drone art (ui_drone.webp 192x151), never squeezed */ html body #panel#panel .pt-drone img{left:-24px!important;top:-40px!important;width:48px!important;height:auto!important;object-fit:contain!important} html body #panel#panel .mn-pair .pt2 .pt2-ic img{width:52px!important;height:auto!important;object-fit:contain!important} @media (max-width:520px){html body #panel#panel .mn-pair .pt2 .pt2-ic img{width:40px!important}} .ptl-drone{width:84px!important;height:auto!important;object-fit:contain} /* v054s: live patrol bank */ html body #panel#panel #xpBank>div{position:relative} html body #panel#panel #xpBank b.pt-bump{animation:ptBump .5s cubic-bezier(.2,1.6,.4,1)} @keyframes ptBump{40%{transform:scale(1.35);color:#fff}} html body #panel#panel #xpBank .pt-plus{position:absolute;left:50%;top:30%;font:400 14px/1 'Russo One',sans-serif;font-style:normal;color:#7dffb8;text-shadow:0 1px 2px #000;pointer-events:none;animation:ptPlus 1.2s ease-out forwards} @keyframes ptPlus{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-34px)}} html body #panel#panel .pt-pop img{width:20px!important;height:20px!important;filter:drop-shadow(0 0 6px #ffe45c)} /* v054t: no horizontal page scroll (a wide effect after an upgrade showed a scrollbar) */ html,body{overflow-x:clip!important;max-width:100%} /* v054t: hero preview — one soft static shadow under the feet (the render's own black shadow is off) */ html body #panel#panel .m-doll{background:radial-gradient(circle at 50% 50%,#ffe45c44,#ff5fa822 45%,#ffffff00 68%)!important} /* v054t: phone home — round buttons around the island */ .ib-wrap{display:none} html:not(.wide) body #panel#panel[data-route=home] .m-stage,html:not(.wide) body #panel#panel[data-route=home] .mn-pair{display:none!important} html:not(.wide) body #panel#panel[data-route=home] .mn-home:not(.qopen) .mn-quests{display:none!important} html:not(.wide) body #panel#panel[data-route=home] .m-isle{min-height:250px!important;position:relative} html:not(.wide) body #panel#panel[data-route=home] .ib-wrap{display:block;position:absolute;inset:0;pointer-events:none;z-index:4} html:not(.wide) body #panel#panel .ib{position:absolute;pointer-events:auto;display:grid;justify-items:center;gap:3px;width:auto;min-height:0;margin:0;padding:0;background:none!important;border:0!important;box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent} html:not(.wide) body #panel#panel .ib:active .ib-c{transform:translateY(3px);box-shadow:0 1px 0 #0b0630} html:not(.wide) body #panel#panel .ib-c{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#5a46c8,#2a1a86 70%);border:2.5px solid #ffffff66;box-shadow:0 4px 0 #0b0630,0 0 14px #8a6bff55} html:not(.wide) body #panel#panel .ib-c img{width:38px!important;height:38px!important;object-fit:contain;animation:none!important;filter:drop-shadow(0 2px 3px #0008)} html:not(.wide) body #panel#panel .ib>b{font:400 10.5px/1 'Russo One',sans-serif;color:#fff;text-shadow:0 1px 2px #000;padding:3px 7px;border-radius:8px;background:#0b0630cc;white-space:nowrap} html:not(.wide) body #panel#panel .ib>i{position:absolute;top:-4px;right:-8px;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:linear-gradient(180deg,#ffe866,#ffb02e);color:#3a1c00;font:900 10.5px/20px 'Golos Text',sans-serif;font-style:normal;text-align:center;box-shadow:0 2px 0 #b86e00;z-index:2} html:not(.wide) body #panel#panel .ib-q{left:4px;top:6px} html:not(.wide) body #panel#panel .ib-m{left:4px;bottom:8px} html:not(.wide) body #panel#panel .ib-p{right:4px;top:6px} html:not(.wide) body #panel#panel .ib-m .ib-c::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(#5ef2ff calc(var(--p,0)*1%),#ffffff26 0);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 4px))} html:not(.wide) body #panel#panel .ib.hot .ib-c,html:not(.wide) body #panel#panel .ib-p.ok .ib-c,html:not(.wide) body #panel#panel .ib-p.full .ib-c{border-color:#ffe45c;animation:ibGlow 1.6s ease-in-out infinite} @keyframes ibGlow{50%{box-shadow:0 4px 0 #0b0630,0 0 22px #ffe45ccc}} html:not(.wide) body #panel#panel .ib-p.off>i,html:not(.wide) body #panel#panel .ib.hot>i{background:linear-gradient(180deg,#ff8a6a,#e0453a);color:#fff;box-shadow:0 2px 0 #8a1c14} html:not(.wide) body #panel#panel .ib-p.go .ib-c img{animation:ptBob 2s ease-in-out infinite!important} html:not(.wide) body #panel#panel .ib-hint{position:absolute;right:6px;bottom:10px;pointer-events:none;font:400 11px/1 'Russo One',sans-serif;color:#fff;padding:6px 10px;border-radius:12px;background:#0b0630cc;border:1px solid #ffffff33} /* v054t: phone — the quest list opens as a window */ html:not(.wide) body #panel#panel .mn-home.qopen .mn-qbg{position:fixed;inset:0;z-index:8000;background:#12063acc;backdrop-filter:blur(2px)} html:not(.wide) body #panel#panel .mn-home.qopen .mn-quests{position:fixed!important;left:12px;right:12px;top:50%;transform:translateY(-50%);z-index:8001;max-height:80vh;overflow:auto;margin:0!important} /* v054u: patrol map art keeps its 5:3 shape so the markers sit on the buildings */ html body #panel#panel .pt-map,html.wide body #panel#panel .pt-map{height:auto!important;min-height:0!important;aspect-ratio:5/3} html body #panel#panel .pt-map>.pt-bg{object-fit:fill!important;filter:saturate(.9) brightness(.88)!important} html body #panel#panel .pt-map .pt-grid{background:linear-gradient(#5ef2ff0d 1px,#0000 1px) 0 0/100% 22px,linear-gradient(90deg,#5ef2ff0d 1px,#0000 1px) 0 0/22px 100%,radial-gradient(ellipse at 50% 50%,#0000 60%,#05021a99)!important} /* v054w: phone home — bigger island, small round buttons up in the corners, the play button right under it */ html:not(.wide) body #panel#panel[data-route=home] .m-isle{--ih:clamp(200px,calc(100dvh - 560px),300px)!important;min-height:0!important;margin-bottom:4px!important} html:not(.wide) body #panel#panel .ib-c{width:46px;height:46px;border-width:2px} html:not(.wide) body #panel#panel .ib-c img{width:28px!important;height:28px!important} html:not(.wide) body #panel#panel .ib>b{font-size:9.5px;padding:2px 6px} html:not(.wide) body #panel#panel .ib>i{min-width:18px;height:17px;font-size:9.5px;line-height:17px;right:-6px;top:-3px} html:not(.wide) body #panel#panel .ib-q{left:2px;top:0} html:not(.wide) body #panel#panel .ib-m{left:2px;top:72px;bottom:auto} html:not(.wide) body #panel#panel .ib-p{right:2px;top:0} html:not(.wide) body #panel#panel .ib-m .ib-c::before{inset:-5px} html:not(.wide) body #panel#panel .ib-hint{display:none!important} /* v054w: shop showcase — equal cards, the item never squeezed, buttons on one line at the bottom */ html body #panel#panel .sh-show>.m-list{align-items:stretch!important} html body #panel#panel .sh-show .s-offer{display:flex!important;flex-direction:column;align-items:stretch;height:auto;overflow:visible} html body #panel#panel .sh-show .s-offer .it-dh{flex:1;align-content:start} html body #panel#panel .sh-show .s-offer .it{width:64px!important;height:64px!important;display:grid;place-items:center;padding:4px!important} html body #panel#panel .sh-show .s-offer .it img{width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important} html body #panel#panel .sh-show .s-offer .it-dh b{min-height:2.3em;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html body #panel#panel .sh-show .s-offer .m-yellow{margin-top:auto!important;min-height:40px;font-size:13px!important;white-space:nowrap} html body #panel#panel .sh-show .s-offer .m-yellow[disabled]{font-size:10.5px!important;letter-spacing:.3px;padding:8px 2px!important;filter:none!important;background:#ffffff1a!important;color:#cfc6ff!important;box-shadow:none!important;border:1px dashed #ffffff40!important} html body #panel#panel .sh-h{position:relative;z-index:1;margin:6px 0 2px!important;line-height:1.15} html body #panel#panel .mn-shop .xp-adsh{position:relative;z-index:1;margin-top:8px!important} /* v054w: level-up — three equal tiles in one row */ html body #panel#panel .mn-up{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none!important;gap:8px;margin-top:8px;flex-wrap:nowrap} html body #panel#panel .mn-up>*{width:auto!important;max-width:none!important;flex:none!important;margin:0!important} html body #panel#panel .mn-up .mu-t{position:relative;display:grid!important;justify-items:center;align-content:center;gap:2px;min-height:68px;padding:8px 4px!important;border-radius:14px!important;text-align:center;width:auto!important} html body #panel#panel .mn-up .mu-t .mu-ic{font-style:normal;font-size:20px;line-height:1} html body #panel#panel .mn-up .mu-t b{font:400 13px/1.1 'Russo One',sans-serif} html body #panel#panel .mn-up .mu-t small{font-size:10px;opacity:.85;line-height:1.1} html body #panel#panel .mn-up .mu-t .mu-ad{position:absolute;right:5px;top:5px;text-decoration:none} html body #panel#panel .mn-up .mu-t .mu-ad .mn-tv{width:18px;height:18px;font-size:8px;line-height:18px} html body #panel#panel .mn-up .mn-tag{grid-column:span 1;align-self:center;font-size:10.5px;text-align:center} /* v054w: fight HUD — no map button, no «Залп» line, neat pause and boss timer, passives as icons */ #hud .district-map-button,#hud #feelStatus{display:none!important} #hud #pause.square{width:44px;height:44px;border-radius:14px;background:linear-gradient(180deg,#7a5cff,#4a32c8);border:2px solid #ffffff66;box-shadow:0 4px 0 #1b0f66,0 0 12px #6a4cff66;color:#fff;font:400 18px/1 'Russo One',sans-serif} #hud #pause.square:active{transform:translateY(3px);box-shadow:0 1px 0 #1b0f66} #hud #bossbar{width:150px;padding:7px 10px 8px!important;border-radius:12px!important;background:linear-gradient(180deg,#4a1450e6,#2a0a36e6)!important;border:2px solid #ff6b9a88!important;box-shadow:0 3px 0 #12041acc,0 0 14px #ff3d7a44!important} #hud #bossbar #bossLabel{display:block;font:400 10.5px/1 'Russo One',sans-serif!important;letter-spacing:.5px;color:#ffd3e2!important;padding-left:18px;position:relative} #hud #bossbar #bossLabel::before{content:"";position:absolute;left:0;top:-2px;font-size:12px} #hud #bossbar .bar{height:7px!important;margin-top:6px;border-radius:5px!important;background:#ffffff1a!important;overflow:hidden} #hud #bossbar .bar i,#hud #bossbar .bar>*{background:linear-gradient(90deg,#ff3d7a,#ffb02e)!important;box-shadow:0 0 8px #ff3d7a} #hud #buffPanel[hidden]{display:none!important} #hud #buffPanel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;width:auto!important} #hud #buffPanel>summary{list-style:none;display:flex!important;flex-wrap:wrap;gap:4px;max-width:180px;padding:0!important;background:none!important;border:0!important;cursor:pointer} #hud #buffPanel>summary::-webkit-details-marker{display:none} #hud #buffPanel>summary::before,#hud #buffPanel>summary::after{display:none!important} #hud #buffPanel .pv{position:relative;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#0b0630cc;border:1.5px solid #8a6bff88} #hud #buffPanel .pv.am{border-color:#ffb02e99} #hud #buffPanel .pv img{width:22px;height:22px;object-fit:contain} #hud #buffPanel .pv b{position:absolute;right:-4px;bottom:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:#ffe45c;color:#3a1c00;font:900 9px/14px 'Golos Text',sans-serif;text-align:center} #hud #buffPanel[open]>p{margin:2px 0 0;padding:3px 7px;border-radius:7px;background:#0b0630e6;font-size:11px;color:#e9e4ff;max-width:240px} /* v054w: phone fight — joystick waits bottom centre, abilities small in one column at the right edge */ @media (pointer:coarse),(max-width:650px){ #hud #joystick{left:calc(50% - 47px);bottom:max(26px,env(safe-area-inset-bottom))} #hud #skillbar{display:flex!important;flex-direction:column;gap:6px;right:8px;left:auto;top:auto;bottom:max(150px,calc(env(safe-area-inset-bottom) + 130px));max-width:none;grid-template-columns:none} #hud #skillbar .skill{width:40px!important;height:40px!important;min-width:0;border-radius:11px!important;font-size:9px!important} #hud #skillbar .skill img{width:24px!important;height:24px!important} #hud #skillbar .skill.empty{opacity:.35;width:30px!important;height:30px!important;align-self:flex-end} } /* v054x: case roll — items centred top/bottom in the window */ .chest-window .chest-ribbon,.case-opening .chest-ribbon{margin-top:0!important;height:100%!important;align-items:center!important} /* v054x: backpack limit counter */ html body #panel#panel .m-inv>header>small.bag-warn{color:#ffb070!important;font-weight:900} html body #panel#panel .m-inv>header>small.bag-full{color:#ff7a6a!important} html body #panel#panel .bag-note{margin:4px 0 8px;padding:8px 10px;border-radius:10px;background:#ff5a4a22;border:1px solid #ff7a6a77;color:#ffd3cc;font-size:12px;line-height:1.3} /* v054y: case roll — fast run, then a slow last stretch (creep to the edge, or slip past and roll back) */ @keyframes caseRoll{0%{transform:translateX(0);animation-timing-function:cubic-bezier(.1,.62,.2,1)}78%{transform:translateX(var(--chest-pre,var(--chest-end)));animation-timing-function:cubic-bezier(.4,0,.3,1)}100%{transform:translateX(var(--chest-end))}} .case-opening .chest-ribbon{animation-name:caseRoll!important} html body #panel#panel .bag-note small{display:block;margin-top:3px;opacity:.75;font-size:11px} /* v054y: PC home — the right column sits in its own rows, centred against the island (no empty row between quests and mastery/patrol) */ html.wide body #panel#panel[data-route=home] .m-body{grid-template-rows:max-content minmax(0,1fr) repeat(9,max-content) minmax(0,1fr)!important;align-content:stretch!important;row-gap:10px!important} html.wide body #panel#panel[data-route=home] .m-body>.h-head{grid-row:1!important} html.wide body #panel#panel[data-route=home] .m-body>.m-isle{grid-row:2/13!important;align-self:center!important;margin-top:0!important} html.wide body #panel#panel[data-route=home] .m-body>.xp-unlock{grid-row:3!important} html.wide body #panel#panel[data-route=home] .m-body>.m-stage{grid-row:4!important} html.wide body #panel#panel[data-route=home] .m-body>.mn-home{grid-column:2!important;grid-row:5!important} html.wide body #panel#panel[data-route=home] .m-body>.mn-pair{grid-row:6!important} html.wide body #panel#panel[data-route=home] .m-body>.m-play{grid-row:7!important} html.wide body #panel#panel[data-route=home] .m-body>.xp-endless{grid-row:8!important} html.wide body #panel#panel[data-route=home] .m-body>.m-ghost{grid-row:9!important} html.wide body #panel#panel[data-route=home] .m-body>.extra-links{grid-row:10!important} html.wide body #panel#panel[data-route=home] .m-body>.tm-row{grid-column:2!important;grid-row:11!important} html.wide body #panel#panel[data-route=home] .m-body{padding-bottom:84px!important;scroll-padding-bottom:84px} /* v054y: PC home — «ЕЩЁ ›» goes up into the title row (right), so nothing hides under the bottom bar */ html.wide body #panel#panel[data-route=home] .m-body>.extra-links,html.wide body #panel#panel[data-route=home] .m-body>.m-ghost{grid-row:1!important;grid-column:2!important;justify-self:end;align-self:center;margin:0!important;width:auto!important} html.wide body #panel#panel[data-route=home] .m-body>.extra-links .m-ghost{width:auto!important;padding:8px 14px!important} /* v054y: alignment pass — category filters 4 + 3 (no lonely «Дрон»), showcase price on one line, rarity line centred, shop headers all left like «Витрина» */ html body #panel#panel .it-filt{display:flex!important;flex-wrap:wrap!important;gap:8px!important;grid-template-columns:none!important} html body #panel#panel .it-filt>button{flex:1 1 calc(25% - 8px)!important;min-width:0!important;width:auto!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #panel#panel .sh-show .s-offer .m-yellow{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:4px!important;font-size:clamp(11.5px,3.3vw,13px)!important;padding:8px 4px!important} html body #panel#panel .sh-show .s-offer .m-yellow img{width:18px!important;height:18px!important;margin:0!important;flex:none} html body #panel#panel .sh-show .s-offer .it-dh small{display:block!important;width:100%;text-align:center!important} html body #panel#panel .mn-shop .xp-adsh{text-align:left!important;display:flex!important;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-bottom:2px!important} html body #panel#panel .mn-shop .xp-adsh b{display:inline!important;font-size:18px!important;letter-spacing:.5px} html body #panel#panel .mn-shop .xp-adsh span{display:inline!important;font-size:12px!important} html:not(.wide) body #panel#panel[data-route=shop] .m-body>.sh-h:first-of-type,html:not(.wide) body #panel#panel[data-route=shop] .sh-gift>.sh-h{margin-top:10px!important} /* v055b: boss plate in the menu style — boss face in a ring, small caption, big timer, thick bar; pulses in the last 10 s, red while the boss is alive */ html body #hud #bossbar{position:absolute;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;width:178px!important;padding:6px 12px 8px 6px!important;border-radius:16px!important; background:linear-gradient(180deg,#5b2bd6,#3a1a9c)!important;border:2.5px solid #ffffff66!important;box-shadow:0 4px 0 #1b0b55,0 6px 14px #0008!important;overflow:visible} html body #hud #bossbar .bb-face{grid-row:1/3;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:radial-gradient(circle at 50% 40%,#ff8a5c,#8a1c3a);border:2.5px solid #ffe45c;box-shadow:0 3px 0 #1b0b55,0 0 10px #ffe45c66} html body #hud #bossbar #bossLabel{display:grid!important;padding:0!important;margin:0!important;line-height:1} html body #hud #bossbar #bossLabel::before{display:none!important;content:none!important} html body #hud #bossbar #bossLabel small{font:900 9px/1.1 'Golos Text',sans-serif;letter-spacing:.6px;color:#d9ccff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #hud #bossbar #bossLabel b{font:400 17px/1.05 'Russo One',sans-serif;color:#fff;text-shadow:0 2px 0 #1b0b55} html body #hud #bossbar .bar{grid-column:2;height:8px!important;margin:4px 0 0!important;border-radius:6px!important;background:#12063a!important;border:1px solid #ffffff2a;overflow:hidden} html body #hud #bossbar .bar i{display:block;height:100%;background:linear-gradient(90deg,#ffe45c,#ff8a3c,#ff3d6a)!important;box-shadow:0 0 8px #ff8a3c!important;border-radius:6px} html body #hud #bossbar.bb-soon{animation:bbSoon .8s ease-in-out infinite} html body #hud #bossbar.bb-soon #bossLabel b{color:#ffe45c} @keyframes bbSoon{50%{box-shadow:0 4px 0 #1b0b55,0 0 22px #ff3d6acc;transform:scale(1.04)}} html body #hud #bossbar.bb-alive{background:linear-gradient(180deg,#c22a55,#7a1035)!important;border-color:#ffb0c0aa!important} html body #hud #bossbar.bb-alive .bb-face{border-color:#fff;animation:bbFace 1s ease-in-out infinite} @keyframes bbFace{50%{transform:scale(1.08);box-shadow:0 3px 0 #1b0b55,0 0 16px #ff3d6a}} html.wide body #hud #bossbar,html body #hud.hud18 #bossbar{} @media (min-width:900px){html body #hud #bossbar{width:230px!important;padding:8px 14px 10px 8px!important}html body #hud #bossbar .bb-face{width:60px;height:60px}html body #hud #bossbar #bossLabel small{font-size:10.5px}html body #hud #bossbar #bossLabel b{font-size:21px}html body #hud #bossbar .bar{height:10px!important}} /* v055b: passive icons sit under the bigger plate */ html body #hud #buffPanel{margin-top:6px} /* v055b: level-up extras — drawn icons in round badges */ html body #panel#panel .mn-up .mu-t .mu-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff26;border:2px solid #ffffff55;box-shadow:inset 0 -3px 0 #0003} html body #panel#panel .mn-up .mu-t .mu-ic svg{width:20px;height:20px;fill:#fff;filter:drop-shadow(0 2px 0 #0005)} html body #panel#panel .mn-up .mu-t.gold .mu-ic{background:#fff3;border-color:#fff8} html body #panel#panel .mn-up .mu-t.gold .mu-ic svg{fill:#7a3d00;filter:none} html body #panel#panel .mn-up .mu-t.gold .mu-ic svg rect:first-child{fill:#a85a00} html body #panel#panel .mn-up .mu-t.violet .mu-ic svg{fill:#fff6c4} /* v055b: phone — learned abilities: one straight column, every slot the same size */ @media (pointer:coarse),(max-width:650px){ html body #hud #skillbar{align-items:center!important;gap:8px!important} html body #hud #skillbar .skill,html body #hud #skillbar .skill.empty{width:42px!important;height:42px!important;margin:0!important;align-self:center!important;flex:none} html body #hud #skillbar .skill.empty{opacity:.3} } /* v055b: «Рюкзак полон» — a real notice: red card, bell badge, soft blink */ html body #panel#panel .bag-note{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;height:auto!important;overflow:visible!important;padding:10px 12px!important;border-radius:14px; background:linear-gradient(180deg,#d0344e,#8e1638)!important;border:2px solid #ffb0b8aa!important;color:#fff!important;font-size:12.5px;font-weight:700;box-shadow:0 4px 0 #4a0a1e;animation:bagBlink 1.6s ease-in-out infinite} html body #panel#panel .bag-note::before{content:"";background:#fff url(icons/ui_backpack.png) center/22px no-repeat!important;grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;font-size:18px;box-shadow:0 2px 0 #4a0a1e} html body #panel#panel .bag-note small{grid-column:2;margin:0!important;font-size:11px;font-weight:600;opacity:.85} @keyframes bagBlink{50%{box-shadow:0 4px 0 #4a0a1e,0 0 18px #ff4d6acc;border-color:#fff}} /* v055a: case — the prize grows once the ribbon settles on it */ .chest-ribbon>div{transition:transform .45s cubic-bezier(.2,1.6,.4,1),box-shadow .45s} .chest-ribbon>div.cr-win{transform:scale(1.16);position:relative;z-index:2;box-shadow:inset 0 0 0 3px var(--rc),0 0 26px var(--rc)!important} html body #hud #buffPanel{top:auto!important} html body #hud #buffPanel{position:absolute!important;left:12px!important;top:184px!important} @media (min-width:900px){html body #hud #buffPanel{left:18px!important;top:206px!important}} html body #panel#panel .mn-up .mu-t.gold .mu-ic{background:#a8580022!important;border-color:#7a3d0066!important} html body #panel#panel .mn-up .mu-t.gold .mu-ic svg,html body #panel#panel .mn-up .mu-t.gold .mu-ic svg rect:first-child{fill:#7a3d00!important} html body #panel#panel .mn-up .mu-t.gold .mu-ic svg rect:last-child{fill:#fff!important;stroke:#7a3d00;stroke-width:1.6} html.wide body #panel#panel[data-route=home] .m-body>.mn-endless{grid-column:2!important;grid-row:9!important} html.wide body #panel#panel[data-route=home] .m-body{row-gap:8px!important} html.wide body #panel#panel[data-route=home] .mn-endless .mn-big{min-height:0!important;padding:7px 14px!important} html.wide body #panel#panel[data-route=home] .mn-endless .mn-big small{font-size:10.5px!important} /* v055c: wheel — the won item itself: picture, name, rarity */ #mnWheelShow .mw-win.mw-item{--rc:#9aa3b8;display:grid;justify-items:center;gap:4px;padding:12px 18px;border-radius:16px;border:3px solid var(--rc);background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rc) 40%,#0000),#0b0630dd 70%);box-shadow:0 0 24px color-mix(in srgb,var(--rc) 60%,#0000)} #mnWheelShow .mw-win.mw-item.r1{--rc:#66ffb0}#mnWheelShow .mw-win.mw-item.r2{--rc:#72edff}#mnWheelShow .mw-win.mw-item.r3{--rc:#c8a6ff}#mnWheelShow .mw-win.mw-item.r4{--rc:#ffe45c} #mnWheelShow .mw-win.mw-item img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 6px #000a)} #mnWheelShow .mw-win.mw-item small{font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.5px} #mnWheelShow .mw-wheel{width:min(80vmin,500px,calc(100vh - 330px))!important} #mnWheelShow.won .mw-wheel{width:min(80vmin,440px,calc(100vh - 380px))!important;transition:width .4s} /* v055d: drawn / game icons instead of emoji */ .gi{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;object-fit:contain} img.gi{animation:none!important} .mn-toast .gi{width:1.3em;height:1.3em} /* v055d: wheel — the bulbs follow the wheel size (they sat inside the rim after the wheel got smaller); the title is clear of the pin */ #mnWheelShow .mw-wheel{--W:min(80vmin,500px,calc(100vh - 340px));width:var(--W)!important} #mnWheelShow.won .mw-wheel{--W:min(80vmin,440px,calc(100vh - 390px))} #mnWheelShow .mw-lights i{transform:rotate(calc(var(--i)*22.5deg)) translateY(calc(var(--W)/-2 - 4px))!important} #mnWheelShow .mw-title{position:relative;z-index:4;margin-bottom:14px;line-height:1} /* v055d: passives — a neat strip of round glossy badges with a coloured ring and a gold rank coin */ html body #hud #buffPanel>summary{gap:6px!important;padding:5px 7px!important;border-radius:14px!important;background:linear-gradient(180deg,#2a1680cc,#16084acc)!important;border:2px solid #ffffff33!important;box-shadow:0 3px 0 #0b0630aa!important;max-width:230px} html body #hud #buffPanel .pv{width:32px!important;height:32px!important;border-radius:50%!important;background:radial-gradient(circle at 35% 28%,#8a6bff,#3a1a9c 70%)!important;border:2px solid #c8a6ff!important;box-shadow:inset 0 -3px 0 #0004,0 2px 0 #0b0630} html body #hud #buffPanel .pv.am{background:radial-gradient(circle at 35% 28%,#ffb070,#a8431a 70%)!important;border-color:#ffd27a!important} html body #hud #buffPanel .pv img{width:22px!important;height:22px!important;filter:drop-shadow(0 1px 1px #0008)} html body #hud #buffPanel .pv b{right:-5px!important;bottom:-5px!important;min-width:15px!important;height:15px!important;line-height:15px!important;border-radius:50%!important;background:radial-gradient(circle at 35% 30%,#fff3a0,#ffb02e)!important;border:1.5px solid #3a1c00;font-size:8.5px!important;color:#3a1c00!important;padding:0!important} html body #hud #buffPanel{min-width:0!important;width:max-content!important;max-height:none!important;overflow:visible!important} html body #hud #buffPanel>summary{width:max-content} html body #panel#panel .mn-up .mu-t .mu-ic img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 0 #0005)} html body #panel#panel .bag-note::before{background-size:26px!important} /* v055c: «2 из 3» — the card taken first stays, dark */ html body #panel#panel .u-card.mn-taken{pointer-events:none;position:relative;transform:none!important;opacity:.9} html body #panel#panel .u-card.mn-taken>*:not(.mn-taken-tag){filter:grayscale(.85) brightness(.5)} html body #panel#panel .u-card.mn-taken .mn-taken-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);padding:6px 14px;border-radius:12px;background:#1fa35a;color:#fff;font:400 16px/1 'Russo One',sans-serif;font-style:normal;border:2px solid #fff;box-shadow:0 4px 0 #0b4a2a;filter:none} /* v055c: PC home — «Начать заново» (shown with «Продолжить бой») sits under the play button, not on «ЕЩЁ»; the island keeps its place when the quest list opens */ html.wide body #panel#panel[data-route=home] .m-body>.m-ghost{grid-row:8!important;grid-column:2!important;justify-self:stretch;align-self:auto;width:100%!important;margin:0!important} html.wide body #panel#panel[data-route=home] .m-body>.xp-endless{grid-row:9!important} html.wide body #panel#panel[data-route=home] .m-body>.mn-endless{grid-row:10!important} html.wide body #panel#panel[data-route=home] .m-body>.m-isle{align-self:start!important;margin-top:28px!important;position:sticky;top:0} /* v055d: soft end of a fight — the banner fades, the dimming and the results / revive window come in gently */ .xp-finale{transition:opacity .7s ease,transform .7s ease} .xp-finale.fl-out{opacity:0;transform:scale(1.04)} #overlay:has(#panel[data-route=result]),#overlay:has(#panel[data-route=revive]){background:linear-gradient(90deg,#030c23d8,#041333b8)!important} @keyframes endDim{from{background:transparent;backdrop-filter:blur(0)}} #panel[data-route=result],#panel[data-route=revive]{animation:endIn .75s cubic-bezier(.2,1.25,.4,1) .15s both} @keyframes endIn{from{opacity:0;transform:translateY(26px) scale(.94)}} /* v055e: «Продолжить бой» — small pill under the island */ html body #panel#panel .m-isle{position:relative} html body #panel#panel .m-isle>.m-resume{position:absolute!important;left:50%;bottom:0;transform:translateX(-50%);z-index:6;width:auto!important;min-height:0!important;margin:0!important;padding:8px 16px!important;border-radius:999px!important;background:#0b0630d9!important;border:2px solid #ffe45c!important;color:#ffe866!important;font:400 13px/1 'Russo One',sans-serif!important;box-shadow:0 4px 0 #0b0630,0 0 14px #ffe45c55!important;white-space:nowrap;display:inline-flex!important;align-items:center;gap:6px} html body #panel#panel .m-isle>.m-resume svg{width:14px;height:14px} html body #panel#panel .m-isle>.m-resume:active{transform:translateX(-50%) translateY(2px)} html body #panel#panel .m-isle>.m-resume{pointer-events:auto!important;cursor:pointer} /* v055g: section tours — «Дальше ›» in the bubble, step counter, no tapping hand on info steps */ #coach .co-tip .co-next{pointer-events:auto!important;cursor:pointer;display:block;margin:9px auto 0;padding:8px 18px;border-radius:12px;border:0;background:linear-gradient(180deg,#7a5cff,#4a32c8);color:#fff;font:400 14px/1 'Russo One',sans-serif;box-shadow:0 3px 0 #1b0f66} #coach .co-tip .co-next:active{transform:translateY(2px);box-shadow:none} #coach .co-tip .co-step{display:block;font:900 10px/1 'Golos Text',sans-serif;letter-spacing:.6px;color:#7a5200;margin-bottom:4px;opacity:.8} #coach.info .co-hand,#coach.info .co-tap{display:none} #coach.on .co-tip{pointer-events:none} #coach.info .co-tip{animation:none!important} /* v056: CrazyGames plays the game in a window about 985×554 … 1150×615 (and phones in landscape). Short windows get compact layouts so the home screen and the level-up choice fit without scrolling. */ @media (min-width:640px) and (max-height:820px) and (min-aspect-ratio:5/4){ html body #panel#panel:has(.u-cards){padding:10px 14px!important;max-height:calc(100dvh - 16px)!important;width:min(1080px,calc(100vw - 20px))!important} html body #panel#panel .u-title{font-size:18px!important;padding:5px 18px!important;margin:0 auto 2px!important;box-shadow:0 3px 0 #a85a00!important} html body #panel#panel .u-sub{margin:2px 0 4px!important;font-size:12px!important} html body #panel#panel[data-route=upgrade] .feel-build{display:none!important} html body #panel#panel .power-recipes{margin:0 0 6px!important} html body #panel#panel .power-recipes summary{min-height:24px!important;padding:3px 0!important} html body #panel#panel .u-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important} html body #panel#panel .u-card{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"name" "art" "desc" "change" "gear" "hint" "rar"!important;grid-template-rows:22px 62px auto auto auto auto 20px!important;row-gap:4px!important;padding:8px 8px 7px!important;justify-items:center!important} html body #panel#panel .u-card>b{font-size:14px!important;justify-content:center!important;text-align:center!important} html body #panel#panel .u-card .u-art{width:60px!important;height:60px!important} html body #panel#panel .u-card .u-art img,html body #panel#panel .u-card .u-art svg{width:48px!important;height:48px!important} html body #panel#panel .u-card>p{font-size:12px!important;line-height:1.2!important;text-align:center!important} html body #panel#panel .u-card .feel-offer-hint{padding:3px 4px!important} html body #panel#panel .u-card .feel-offer-hint i{display:none!important} html body #panel#panel .u-card>small{font-size:10px!important;padding:2px 6px!important} html body #panel#panel .mn-up{margin-top:8px!important;gap:8px!important} html body #panel#panel .mn-up .mu-t{min-height:44px!important;grid-template-columns:auto auto!important;grid-template-rows:auto auto;justify-content:center!important;column-gap:8px!important;row-gap:0!important;padding:4px 8px!important;text-align:left!important} html body #panel#panel .mn-up .mu-t .mu-ic{grid-row:1/3!important;width:30px!important;height:30px!important} html body #panel#panel .mn-up .mu-t .mu-ic img{width:22px!important;height:22px!important} } /* very short (phone landscape): the description line goes, the recipe hint keeps one row */ @media (min-width:640px) and (max-height:480px) and (min-aspect-ratio:5/4){ html body #panel#panel .u-sub{display:none!important} html body #panel#panel .u-card{grid-template-rows:20px 44px auto auto auto 18px!important;grid-template-areas:"name" "art" "change" "gear" "hint" "rar"!important;row-gap:3px!important;padding:6px 6px 5px!important} html body #panel#panel .u-card>p:not(.change):not(.gear-hint){display:none!important} html body #panel#panel .u-card .u-art{width:44px!important;height:44px!important} html body #panel#panel .u-card .u-art img,html body #panel#panel .u-card .u-art svg{width:36px!important;height:36px!important} html body #panel#panel .u-card kbd{display:none!important} html body #panel#panel .mn-up .mu-t{min-height:38px!important} html body #panel#panel .mn-up .mu-t small{display:none!important} } /* home in a short wide window: smaller buttons; the mastery card goes when even that does not fit */ @media (max-height:700px){ html.wide body #panel#panel[data-route=home] .m-body{row-gap:6px!important} html.wide body #panel#panel[data-route=home] .m-body>.m-play{padding-top:7px!important;padding-bottom:7px!important;min-height:0!important;font-size:22px!important} html.wide body #panel#panel[data-route=home] .m-body>.xp-endless,html.wide body #panel#panel[data-route=home] .m-body>.mn-endless{padding-top:5px!important;padding-bottom:5px!important;min-height:0!important} html.wide body #panel#panel[data-route=home] .m-body>.m-stage{padding-top:4px!important;padding-bottom:4px!important;min-height:0!important} } @media (max-height:700px){ html.wide body #panel#panel[data-route=home] .m-body>.m-isle{--ih:min(60vh,calc(100dvh - 262px))!important} } html.wide body #panel#panel[data-route=home] .m-body>.notice{grid-column:2!important;grid-row:3!important;margin:0!important} @media (max-height:450px){ html:not(.wide) body #panel#panel[data-route=home] .m-isle{--ih:clamp(100px,calc(100dvh - 255px),200px)!important} } @media (min-width:640px) and (max-height:480px) and (min-aspect-ratio:5/4){ html body #panel#panel .u-card .feel-offer-hint .fh-state{display:none!important} html body #panel#panel .u-card .feel-offer-hint .fh-part-name{font-size:10px!important} } #tutorialTip{transition:opacity .6s}#tutorialTip.tt-gone{opacity:0;pointer-events:none} /* v057: wide windows (CrazyGames) — quests, mastery and patrol become round buttons by the island, as on a phone; the quest list opens as a window in the middle; the right column keeps only the stage, «Fight» and the endless fight, so nothing scrolls */ html.wide body #panel#panel[data-route=home] .m-body>.m-stage,html.wide body #panel#panel .ib-m,html.wide body #panel#panel .ib-p{display:none!important} /* v057: wide home — the stage card goes (the island opens the stages); mastery and patrol stay as cards, quests is a round button */ html.wide body #panel#panel[data-route=home] .mn-home:not(.qopen) .mn-quests{display:none!important} html.wide body #panel#panel[data-route=home] .m-isle{position:relative} html.wide body #panel#panel[data-route=home] .ib-wrap{display:block;position:absolute;inset:0;pointer-events:none;z-index:4} html.wide body #panel#panel .ib{position:absolute;pointer-events:auto;display:grid;justify-items:center;gap:4px;width:auto;min-height:0;margin:0;padding:0;background:none!important;border:0!important;box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent} html.wide body #panel#panel .ib:active .ib-c{transform:translateY(3px);box-shadow:0 1px 0 #0b0630} html.wide body #panel#panel .ib-c{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#5a46c8,#2a1a86 70%);border:2.5px solid #ffffff66;box-shadow:0 4px 0 #0b0630,0 0 14px #8a6bff55} html.wide body #panel#panel .ib-c img{width:40px!important;height:40px!important;object-fit:contain;animation:none!important;filter:drop-shadow(0 2px 3px #0008)} html.wide body #panel#panel .ib>b{font:400 11px/1 'Russo One',sans-serif;color:#fff;text-shadow:0 1px 2px #000;padding:3px 8px;border-radius:8px;background:#0b0630cc;white-space:nowrap} html.wide body #panel#panel .ib>i{position:absolute;top:-4px;right:-8px;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:linear-gradient(180deg,#ffe866,#ffb02e);color:#3a1c00;font:900 11px/20px 'Golos Text',sans-serif;font-style:normal;text-align:center;box-shadow:0 2px 0 #b86e00;z-index:2} html.wide body #panel#panel .ib-q{left:8px;top:4px} html.wide body #panel#panel .ib-m{left:8px;top:100px;bottom:auto} html.wide body #panel#panel .ib-p{right:8px;top:4px} html.wide body #panel#panel .ib-m .ib-c::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(#5ef2ff calc(var(--p,0)*1%),#ffffff26 0);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 4px))} html.wide body #panel#panel .ib.hot .ib-c,html.wide body #panel#panel .ib-p.ok .ib-c,html.wide body #panel#panel .ib-p.full .ib-c{border-color:#ffe45c;animation:ibGlow 1.6s ease-in-out infinite} html.wide body #panel#panel .ib-p.off>i,html.wide body #panel#panel .ib.hot>i{background:linear-gradient(180deg,#ff8a6a,#e0453a);color:#fff;box-shadow:0 2px 0 #8a1c14} html.wide body #panel#panel .ib-p.go .ib-c img{animation:ptBob 2s ease-in-out infinite!important} html.wide body #panel#panel .ib-hint{display:none!important} html.wide body #panel#panel .mn-home.qopen .mn-qbg{position:fixed;inset:0;z-index:8000;background:#12063acc;backdrop-filter:blur(2px)} html.wide body #panel#panel .mn-home.qopen .mn-quests{position:fixed!important;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));z-index:8001;max-height:84vh;overflow:auto;margin:0!important} html.wide body #panel#panel[data-route=home] .m-body>.m-isle{min-height:min(62vh,560px,calc(100dvh - 250px))!important} html body #panel#panel .mn-pair .pt2.pt-lock{filter:saturate(.35);opacity:.85}html body #panel#panel .mn-pair .pt2.pt-lock .pt2-ic img{animation:none!important}html body #panel#panel .pt2.pt-lock .pt2-ic i{background:#0b0630!important;padding:2px!important}html body #panel#panel .pt2.pt-lock .pt2-ic i img{width:12px!important;height:12px!important;animation:none!important}html body #panel#panel .pt2.pt-lock .pt-cond{font-size:11px;line-height:1.25;color:#cfd8ff;white-space:normal} html body #panel#panel .pt2.pt-lock .pt2-ic i::before,html body #panel#panel .pt2.pt-lock .pt2-ic i::after{content:none!important;display:none!important} .mn-adfail{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:99999;padding:10px 16px;border-radius:12px;background:#0b0630ee;color:#fff;font:600 14px/1.3 'Golos Text',sans-serif;border:1px solid #ffffff33;box-shadow:0 6px 20px #0008;pointer-events:none;max-width:calc(100vw - 32px);text-align:center} /* v061: shelter (from v059) */ html body #panel#panel .ib-s{left:2px;top:144px} html.wide body #panel#panel .ib-s{left:8px;top:100px} html.wide body #panel#panel .ib-s{display:grid!important} #panel .sh-hero{position:relative;border-radius:18px;overflow:hidden;border:3px solid #06163c;box-shadow:0 5px 0 #06163c;margin-bottom:10px} #panel .sh-hero img{display:block;width:100%;aspect-ratio:3/2;max-height:46vh;object-fit:cover} #panel .sh-cap{position:absolute;left:12px;top:10px;display:grid;gap:2px} #panel .sh-cap b{font:400 28px/1 'Russo One',sans-serif;color:#fff;-webkit-text-stroke:1.5px #06163c;paint-order:stroke fill;text-shadow:0 3px 0 #06163c} #panel .sh-cap span{justify-self:start;padding:3px 10px;border-radius:10px;background:linear-gradient(#fff07a,#ffc61a);color:#4a2a00;font:700 13px/1.2 'Golos Text',sans-serif;border:2px solid #06163c} #panel .sh-lv{display:grid;gap:4px;margin:0 0 10px} #panel .sh-bar{height:10px;border-radius:6px;background:#06163c;overflow:hidden} #panel .sh-bar i{display:block;height:100%;background:linear-gradient(90deg,#5ef2ff,#62f08b)} #panel .sh-lv small{color:#cfe2ff;font-size:12px;text-align:center} #panel .sh-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:8px 0 12px} #panel .sh-card{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:10px;border-radius:14px;background:#0b2a6bcc;border:2px solid #2a64d6} #panel .sh-card img{width:44px;height:44px;object-fit:contain} #panel .sh-card b{font:400 16px/1.1 'Russo One',sans-serif;color:#fff} #panel .sh-card b em{font-style:normal;color:#ffe45c;margin-left:4px} #panel .sh-card small{display:block;color:#c8dcff;font-size:12px;margin:2px 0} #panel .sh-card span{display:block;color:#7df0a8;font-size:12px;font-weight:700} /* v061: settlement screen */ #panel .st-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border-radius:14px;background:#0b2a6bcc;border:2px solid #2a64d6;margin:0 0 10px} #panel .st-inc b{display:block;font:400 16px/1.15 'Russo One',sans-serif;color:#ffe45c} #panel .st-inc small{display:block;color:#c8dcff;font-size:12px;margin-top:2px} #panel .st-row .m-btn{margin:0;flex:none;min-width:130px} #panel .st-wait{color:#8fb0e8;font-size:12px} #panel .st-h{font:400 15px/1.2 'Russo One',sans-serif;color:#fff;margin:6px 0} #panel .st-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 10px} #panel .st-man{display:grid;justify-items:center;gap:2px;padding:8px 6px;border-radius:14px;background:#0b2a6bcc;border:2px solid #2a64d6;color:#fff;cursor:pointer;font:inherit} #panel .st-man img{width:36px;height:36px;object-fit:contain} #panel .st-man b{font:400 14px/1.1 'Russo One',sans-serif} #panel .st-man small{color:#c8dcff;font-size:11px} #panel .st-man.on{border-color:#62f08b;background:#0f4a3ccc;box-shadow:0 0 0 2px #62f08b55} #panel .st-man.on small{color:#7df0a8;font-weight:700} #panel .st-man.off{opacity:.45;cursor:default} #panel .st-b{grid-template-columns:48px 1fr auto} #panel .st-b small{color:#ffb0a0} #panel .st-up{margin:0;min-width:92px;padding:8px 10px;border-radius:12px;background:linear-gradient(#7df08b,#2fbf5a);color:#06301a;font:400 15px/1 'Russo One',sans-serif;border:2px solid #06163c;box-shadow:0 3px 0 #06163c;cursor:pointer} #panel .st-up[disabled]{filter:grayscale(1);opacity:.5;cursor:default} #panel .sh-hero canvas{display:block;width:100%;aspect-ratio:3/2;max-height:52vh;object-fit:cover;background:#0b1640} #panel .st-man img{width:auto;height:44px} #panel .sh-hero canvas{position:static!important;inset:auto!important;height:auto!important;width:100%!important} /* v061: ui.css stretches every canvas over the screen */ /* v061: settlement income reminder */ .st-toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-20px);opacity:0;transition:.35s;z-index:60;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:16px;background:linear-gradient(#123a86,#0b2462);border:2px solid #ffd45c;box-shadow:0 4px 0 #06163c,0 8px 22px #0008;color:#fff;font:inherit;cursor:pointer} .st-toast.on{opacity:1;transform:translate(-50%,0)} .st-toast img{width:34px;height:44px;object-fit:contain} .st-toast b{display:block;font:400 15px/1.15 'Russo One',sans-serif;color:#ffe45c} .st-toast b i{font-style:normal} .st-toast small{display:block;color:#c8dcff;font-size:12px;text-align:left} /* v061b: settlement people cards */ #panel .st-plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin:0 0 10px} #panel .st-pc{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-radius:14px;background:#0b2a6bcc;border:2px solid #2a64d6;text-align:left} #panel .st-pc.on{border-color:#62f08b;background:#0f4a3ccc} #panel .st-pc.off{opacity:.5} #panel .st-pc img{width:38px;height:50px;object-fit:contain} #panel .st-pi b{display:block;font:400 14px/1.15 'Russo One',sans-serif;color:#fff} #panel .st-pi small{display:block;color:#c8dcff;font-size:11px;line-height:1.2} #panel .st-stars{display:block;font-style:normal;color:#ffd54a;font-size:14px;letter-spacing:1px;line-height:1.1} #panel .st-stars u{text-decoration:none;color:#ffffff30} #panel .st-pb{display:grid;gap:4px;justify-items:stretch} #panel .st-pb .m-btn{margin:0;min-width:0;padding:6px 10px;border-radius:10px;font:400 12px/1.1 'Russo One',sans-serif;border:2px solid #06163c;box-shadow:0 2px 0 #06163c;cursor:pointer;white-space:nowrap} #panel .st-keep,#panel .st-bud{background:linear-gradient(#7df08b,#2fbf5a);color:#06301a} #panel .st-rel{background:linear-gradient(#ffe27a,#f5b52a);color:#3a2300} #panel .st-ic{width:13px;height:13px;vertical-align:-2px} #panel .st-full{color:#ffb0a0;font-size:11px;text-align:center} #panel .st-res .st-pc{margin:6px 0} html body #panel .st-pb .m-btn img.st-ic,html body #panel .st-pb .m-btn img{width:14px!important;height:14px!important;max-width:14px!important;margin:0 0 0 2px!important;vertical-align:-2px;display:inline-block!important;position:static!important} html body #panel .st-pb .m-btn{display:block!important;width:auto!important;height:auto!important;min-height:0!important} #panel .st-up small.st-dur{display:block;font:600 10px/1 "Golos Text",sans-serif;opacity:.8;margin-top:2px} #panel .st-timer{display:block;text-align:center;font:400 15px/1 "Russo One",sans-serif;color:#ffe45c} #panel .st-blist{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))!important} #panel .st-blist .st-b b em{display:inline;margin-left:6px} #panel .st-blist .st-b span,#panel .st-blist .st-b small{display:block;font-size:12px;line-height:1.25} #panel .st-blist .st-b span span,#panel .st-blist .st-b small span,#panel .st-blist .st-b b span,#panel .st-blist .st-b em span{display:inline!important} /* v061: the walkable town */ #town{position:fixed;inset:0;z-index:9000;background:#0b1640;touch-action:none;user-select:none} #town canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block} #town .tw-top{position:absolute;left:10px;right:10px;top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none} #town .tw-top>*{pointer-events:auto} #town .tw-c{padding:6px 12px;border-radius:12px;background:#06163ccc;color:#fff;font:400 14px/1 'Russo One',sans-serif;display:flex;align-items:center;gap:6px} #town .tw-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(680px,calc(100% - 20px));display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;border-radius:16px;background:linear-gradient(#123a86ee,#0b2462ee);border:2px solid #2a64d6;box-shadow:0 4px 0 #06163c,0 8px 22px #0008;color:#fff} #town .tw-t b{display:block;font:400 16px/1.15 'Russo One',sans-serif} #town .tw-t em{font-style:normal;color:#ffe45c;margin-left:6px} #town .tw-t .tw-st{color:#ffd54a;letter-spacing:1px} #town .tw-t small{display:block;color:#c8dcff;font-size:12px;margin-top:2px} #town .tw-why{color:#ffb0a0!important} #town .tw-hint{width:100%;text-align:center;color:#c8dcff;font-size:13px} #town .tw-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap} #town .tw-b{padding:8px 14px;border-radius:12px;border:2px solid #06163c;box-shadow:0 3px 0 #06163c;background:linear-gradient(#5aa0ff,#2f6ee0);color:#fff;font:400 14px/1.1 'Russo One',sans-serif;cursor:pointer;white-space:nowrap} #town .tw-b.g{background:linear-gradient(#7df08b,#2fbf5a);color:#06301a} #town .tw-b.y{background:linear-gradient(#ffe27a,#f5b52a);color:#3a2300} #town .tw-b.p{background:linear-gradient(#ffe86a,#ffb32a);color:#3a2300;font-size:16px;padding:10px 26px} #town .tw-b[disabled]{filter:grayscale(1);opacity:.55;cursor:default} #town .tw-ic{width:14px;height:14px;vertical-align:-2px} #town .tw-timer{font:400 16px/1 'Russo One',sans-serif;color:#ffe45c} body.town-on #coach,body.town-on .st-toast{display:none!important} /* v061: town in the engine — the same panel over the game */ #townui canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block} #townui .tw-top{position:absolute;left:10px;right:10px;top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none} #townui .tw-top>*{pointer-events:auto} #townui .tw-c{padding:6px 12px;border-radius:12px;background:#06163ccc;color:#fff;font:400 14px/1 'Russo One',sans-serif;display:flex;align-items:center;gap:6px} #townui .tw-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(680px,calc(100% - 20px));display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;border-radius:16px;background:linear-gradient(#123a86ee,#0b2462ee);border:2px solid #2a64d6;box-shadow:0 4px 0 #06163c,0 8px 22px #0008;color:#fff} #townui .tw-t b{display:block;font:400 16px/1.15 'Russo One',sans-serif} #townui .tw-t em{font-style:normal;color:#ffe45c;margin-left:6px} #townui .tw-t .tw-st{color:#ffd54a;letter-spacing:1px} #townui .tw-t small{display:block;color:#c8dcff;font-size:12px;margin-top:2px} #townui .tw-why{color:#ffb0a0!important} #townui .tw-hint{width:100%;text-align:center;color:#c8dcff;font-size:13px} #townui .tw-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap} #townui .tw-b{padding:8px 14px;border-radius:12px;border:2px solid #06163c;box-shadow:0 3px 0 #06163c;background:linear-gradient(#5aa0ff,#2f6ee0);color:#fff;font:400 14px/1.1 'Russo One',sans-serif;cursor:pointer;white-space:nowrap} #townui .tw-b.g{background:linear-gradient(#7df08b,#2fbf5a);color:#06301a} #townui .tw-b.y{background:linear-gradient(#ffe27a,#f5b52a);color:#3a2300} #townui .tw-b.p{background:linear-gradient(#ffe86a,#ffb32a);color:#3a2300;font-size:16px;padding:10px 26px} #townui .tw-b[disabled]{filter:grayscale(1);opacity:.55;cursor:default} #townui .tw-ic{width:14px;height:14px;vertical-align:-2px} #townui .tw-timer{font:400 16px/1 'Russo One',sans-serif;color:#ffe45c} #townui{position:fixed;inset:0;z-index:60;pointer-events:none} #townui .tw-top,#townui .tw-bar{pointer-events:auto} #townui .tw-top{pointer-events:none} #townui .tw-top>*{pointer-events:auto} body.town-on #bossbar,body.town-on #wave,body.town-on #stageLabel,body.town-on #lv,body.town-on #xptext,body.town-on #xpbar,body.town-on #skillbar,body.town-on #movehint,body.town-on #pause,body.town-on #toast{display:none!important} html body.town-on #hud #bossbar,html body.town-on #hud .stagebox,html body.town-on #hud #combatTime,html body.town-on #hud #skillbar,html body.town-on #hud #pause,html body.town-on #hud #xpbar,html body.town-on #hud #xptext,html body.town-on #hud #lv,html body.town-on #hud .topbar>*:not(#joystick){display:none!important} #panel .st-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:12px 14px;border-radius:16px;background:linear-gradient(#123a86,#0b2462);border:2px solid #2a64d6} #panel .st-head .sh-cap{position:static} #panel .st-head .m-btn{margin:0;width:auto;flex:none} @media (max-width:520px){#townui .tw-top .tw-b{padding:6px 9px;font-size:12px}#townui .tw-c{font-size:12px;padding:5px 8px}#townui .tw-top{left:6px;right:6px;top:6px;gap:4px}#townui .tw-bar{bottom:8px;padding:8px 10px}#townui .tw-b{font-size:13px;padding:7px 11px}} #townui .tw-signs{position:fixed;inset:0;pointer-events:none} #townui .tw-sign{position:fixed;left:0;top:0;padding:4px 12px;border-radius:12px;font:400 15px/1.1 'Russo One',sans-serif;white-space:nowrap;color:#fff;background:#06163cdd;border:2px solid #ffd45c;box-shadow:0 3px 0 #06163c} #townui .tw-sign.plot{color:#ffe45c;background:#06163cb0;border-style:dashed} #townui .tw-sign.off{display:none} @media (max-width:520px){#townui .tw-sign{font-size:12px;padding:3px 8px}} #townui .tw-float{position:fixed;left:0;top:0;font:400 15px/1 'Russo One',sans-serif;white-space:nowrap;pointer-events:none;text-shadow:0 2px 0 #06163c,0 0 6px #06163c} #townui .tw-float.w{color:#7df0a8}#townui .tw-float.g{color:#7df0a8;font-size:20px}#townui .tw-float.y{color:#ffe45c;font-size:20px} #townui .tw-tut{position:absolute;left:50%;top:60px;transform:translateX(-50%);width:min(620px,calc(100% - 20px));display:flex;gap:10px;align-items:center;padding:10px 12px 10px 16px;border-radius:14px;background:linear-gradient(#fff07a,#ffc61a);color:#3a2300;font:600 14px/1.3 'Golos Text',sans-serif;border:2px solid #06163c;box-shadow:0 4px 0 #06163c;pointer-events:auto} #townui .tw-tut span{flex:1} #townui .tw-x{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid #06163c;background:#fff;color:#06163c;font-weight:900;cursor:pointer} #townui .tw-b.b{background:linear-gradient(#5aa0ff,#2f6ee0)} #townui .tw-cv{color:#c8dcff;font-size:12px;margin-left:6px} #hud .minimap{position:absolute;left:18px;top:200px;width:180px;height:120px;border-radius:14px;overflow:hidden;border:2px solid #06163c;box-shadow:0 0 0 2px rgba(127,170,255,.55),0 4px 0 #06163c;background:#0b1d44;pointer-events:none;z-index:3} #hud .minimap canvas{display:block;width:100%;height:100%;position:static} @media (max-width:700px),(max-height:500px){#hud .minimap{width:120px;height:80px;left:12px;top:188px}} #townui .tw-q{position:absolute;left:12px;top:56px;width:250px;padding:8px 10px;border-radius:12px;background:rgba(8,20,58,.86);border:2px solid #06163c;box-shadow:0 0 0 1px rgba(127,170,255,.45);color:#dfe9ff;font:500 12px/1.3 'Golos Text',sans-serif;pointer-events:auto} #townui .tw-q b{display:block;font:400 13px/1.2 'Russo One',sans-serif;color:#ffe066;margin-bottom:4px} #townui .tw-qi{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:3px 0;border-top:1px solid rgba(127,170,255,.18)} #townui .tw-qi .n{flex:1;min-width:0}#townui .tw-qi .v{color:#9fd8ff;font-weight:700}#townui .tw-qi.ok{opacity:.55} #townui .tw-qi button{flex-basis:100%;margin-top:2px;padding:4px 6px;border-radius:9px;border:2px solid #06163c;background:linear-gradient(#ffe45c,#ffb21a);color:#3a2300;font:700 12px/1 'Golos Text',sans-serif;cursor:pointer} @media (max-width:700px),(max-height:500px){#townui .tw-q{width:190px;font-size:11px;top:50px;left:8px}} /* v061k: the fight hint banner (rescue.js) — the same purple card as the boss panel, not a canvas strip */ .rtip{position:absolute;left:50%;top:23%;transform:translate(-50%,-6px) scale(.96);max-width:min(560px,calc(100% - 32px));padding:10px 20px 11px;border-radius:14px;background:linear-gradient(180deg,#8a63ee,#5a37c8);border:2px solid #d9ccff;box-shadow:0 0 0 2px #06163c,0 5px 0 #06163c,0 8px 22px #0008;color:#fff;font:400 15px/1.25 'Russo One',sans-serif;letter-spacing:.4px;text-align:center;text-shadow:0 2px 0 #2a1270;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;z-index:4} .rtip.on{opacity:1;transform:translate(-50%,0) scale(1)} @media (max-width:700px),(max-height:500px){.rtip{font-size:12.5px;padding:7px 14px 8px;top:19%}} /* v061k: the building choice on a cleared plot — six buttons that wrap */ .tw-acts.tw-pick{flex-wrap:wrap;gap:6px;max-width:min(560px,100%)} .tw-acts.tw-pick .tw-b{flex:1 1 30%;min-width:96px;padding-left:8px;padding-right:8px} /* v061l: the left column in a fight — minimap, then the fight's objectives, then the picked buffs (they used to sit on the minimap) */ #hud .objv{position:absolute;left:18px;top:330px;width:210px;padding:6px 9px 7px;border-radius:12px;background:rgba(8,20,58,.82);border:2px solid #06163c;box-shadow:0 0 0 1px rgba(127,170,255,.4);color:#c9d8ff;font:600 11.5px/1.35 'Golos Text',sans-serif;pointer-events:none;z-index:3} #hud .objv b{display:block;font:400 10px/1 'Russo One',sans-serif;letter-spacing:.6px;color:#ffe066;margin-bottom:4px} #hud .objv div{display:flex;gap:6px;opacity:.55} #hud .objv div.now{opacity:1;color:#fff} #hud .objv div.ok{opacity:.6;text-decoration:line-through} #hud .objv i{font-style:normal;width:12px;flex:none;color:#7fe6ff} #hud .objv div.ok i{color:#7dff9a} html body #hud #buffPanel{left:18px!important;top:436px!important} @media (max-width:700px),(max-height:500px){#hud .objv{left:12px;top:274px;width:150px;font-size:10px;padding:4px 7px 5px}#hud .objv b{font-size:9px;margin-bottom:2px}html body #hud #buffPanel{left:12px!important;top:360px!important}} /* v061l: the camp guide's arrow over the place to go */ .tw-sign.guide{background:none;border:0;box-shadow:none;color:#ffe45c;font-size:34px;text-shadow:0 3px 0 #06163c,0 0 12px #ffd45c88;padding:0} .tw-sign.guide.off{opacity:0} #townui .tw-sign.guide{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;color:#ffe45c!important;font-size:38px!important;line-height:1!important;text-shadow:0 3px 0 #06163c,0 0 14px #ffd45caa} @media (max-width:700px),(max-height:500px){#hud .objv div:not(.now){display:none}#hud .objv b{display:none}html body #hud #buffPanel{top:305px!important}} /* v061n: what the stars do, on the rescue result */ #panel .sh-stars{margin:2px 0 8px;padding:6px 10px;border-radius:10px;background:#0b1d44cc;border:1px solid #ffd45c55;color:#d8e4ff;font-size:12px;line-height:1.35} #townui .tw-sign.guide::before{content:'▼';display:block;animation:twGuide .55s ease-in-out infinite alternate} @keyframes twGuide{from{transform:translateY(0)}to{transform:translateY(-14px)}} /* v061s: the rescue banner and the centre toast stood on the same spot — the plain toast yields to the banner, the banner yields to a boss warning */ body:has(.rtip.on) #toast:not(.danger){opacity:0!important} body:has(#toast.danger) .rtip{opacity:0!important} /* v061s: CrazyGames asks text to read at 800x450 — the smallest HUD captions go up to 11–12 px */ html body #hud #bossbar #bossLabel small{font-size:11px!important} #hud.hud18 #stageLabel{font-size:11.5px} #movehint{font-size:11.5px;color:#c0e8ffb0} /* v061s: the result's main buttons fell below the fold once a rescue card was added — they stick to the bottom of the panel */ #panel.r-result .r-btns{position:sticky;bottom:-12px;z-index:3;margin:10px -14px -12px!important;padding:10px 14px 12px;background:linear-gradient(180deg,#0a1f45e0,#071a39 40%);border-top:1px solid #3a77b355;border-radius:0 0 22px 22px} #panel.r-result .r-loot{justify-content:center} /* v061s: one find stood left of its centred caption */ .st-plist>.m-note{grid-column:1/-1} /* v061s: «Пока никого» took one grid cell and pushed the locked cook/mechanic out of line */ .co-tip.side::after{display:none} /* v061s: a tip beside its target has no pointer */ /* v061s: on a short screen the camp lesson banner lay over the daily quests — it moves right of them; the fight's rescue banner never shows in the camp */ @media (max-width:1100px){#townui .tw-tut{top:auto;bottom:66px;width:min(560px,calc(100% - 24px));font-size:12px}} /* narrow screens: above the hint bar at the bottom — the quests panel's width varies */ body.town-on .rtip{display:none!important} html,body{overscroll-behavior:none} /* v061s: the wheel at the end of a list must not scroll the portal page around the game */ @media (max-height:500px){.rtip{top:104px!important;font-size:11.5px;padding:6px 12px 7px;max-width:min(470px,calc(100% - 300px))}} /* v061s: on a phone the rescue banner covered the fight timer */ @media (max-width:560px) and (min-height:600px){.rtip{top:auto!important;bottom:150px;font-size:12px;width:calc(100% - 40px);max-width:calc(100% - 40px);box-sizing:border-box}} /* v061s: a portrait phone — the rescue banner lay on the minimap */ html body #panel#panel#panel [data-gate="1"],html.wide body #panel#panel#panel .mn-pair [data-gate="1"]{display:none!important} /* v061s: home tiles a newbie does not need yet (ui-plus.js homeGate) */ #panel .st-up small.st-dur{color:#06301a!important;opacity:1!important;font:700 11px/1 "Golos Text",sans-serif!important;margin-top:3px} /* v061s: the build time inherited a pale pink and was unreadable on green */ /* v061t: the first-tutorial card sits in the middle of its panel (it hugged the left edge) */ .tutorial-start{margin-left:auto;margin-right:auto} /* v061t: inside YouTube Playables the YouTube mute button is the only overall one; the in-game sound settings stay */ html.yt-host [data-action="sound"]{display:none!important} /* v061t: settings checkboxes are game-style switches (the plain browser tick looked like an old website) */ #panel input[type=checkbox]{appearance:none;-webkit-appearance:none;width:46px;height:26px;margin:0;flex-shrink:0;position:relative;cursor:pointer;border-radius:13px;background:#241f66;border:2px solid #ffffff44;box-shadow:inset 0 2px 4px #0006;transition:background .15s,border-color .15s;vertical-align:middle} #panel input[type=checkbox]::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#c9cdf5;box-shadow:0 2px 0 #0007;transition:transform .15s,background .15s} #panel input[type=checkbox]:checked{background:linear-gradient(180deg,#ffd84d,#f0a51c);border-color:#fff9} #panel input[type=checkbox]:checked::after{transform:translateX(20px);background:#fff} #panel input[type=checkbox]:focus-visible{outline:2px solid #fff;outline-offset:2px} /* v061t: the finds on the result card are bigger and centred under the rewards (players found the 50 px icons tiny and off-centre) */ html body #panel.r-result .r-loot{display:flex!important;flex-wrap:wrap;justify-content:center!important;gap:10px!important;width:100%;margin:6px auto 4px} html body #panel.r-result .r-loot .it,html body #panel.r-result .r-loot .r-more{width:72px!important;height:72px!important;flex:0 0 72px} html body #panel.r-result .r-loot .it img{width:78%;height:78%;object-fit:contain} @media (max-width:520px){html body #panel.r-result .r-loot .it,html body #panel.r-result .r-loot .r-more{width:58px!important;height:58px!important;flex-basis:58px}} /* v061t: compare block on the hero item card */ #panel .it-detail .it-cmp{margin:6px 0 2px;padding:8px 10px;border-radius:10px;background:#ffffff10} #panel .it-detail .it-cmp .m-note{margin:0 0 4px;font-size:11px} #panel .it-detail .it-cmp .case-compare{margin:0;gap:4px} #panel .case-compare b.case-good{color:#6dff9a}#panel .case-compare b.case-bad{color:#ff8a7a}#panel .case-compare b.case-same{color:#c9cdf5} /* v061t: with a set on, the two set panels pushed the hero and his slots below the fold — the hero comes first, the set panels go under the stats, and the plain «Sets» list is hidden while the richer «Sets on the hero» card is shown */ html body #panel[data-route=hero] .hx-left>.m-gear{order:0!important} html body #panel[data-route=hero] .hx-left>.m-stats{order:1!important} html body #panel[data-route=hero] .hx-left>.it-detail{order:2!important} html body #panel[data-route=hero] .hx-left>.xp-sets{order:3!important} html body #panel[data-route=hero] .hx-left>section.m-card:not(.it-detail){order:4!important} html body #panel[data-route=hero] .hx-left:has(>.xp-sets)>section.m-card:not(.it-detail):not(.xp-card){display:none!important} /* v061t: «new quests in …» line under three done quests */ .mn-qnext{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 4px;font-size:12px;color:#c9cdf5} .mn-qnext b{color:#ffd84d} /* v061t: the chest reward card fits the screen with its buttons (with 7 properties it ran under the bottom edge) — on short screens the picture shrinks, the compare rows tighten, and the card itself scrolls if it still does not fit */ @media (max-height:800px){ html body #panel .case-reward{padding:12px 14px!important;max-height:calc(100vh - 170px);overflow-y:auto;scrollbar-width:thin} html body #panel .case-halo{height:96px!important} html body #panel .case-halo img{width:86px!important;height:86px!important} html body #panel .case-reward h3{margin:2px 0 4px!important;font-size:17px!important} html body #panel .case-reward .case-bonus{margin:2px auto!important;padding:3px 10px!important} html body #panel .case-reward .m-note{margin:4px 0!important} html body #panel .case-compare{margin:6px 0!important;gap:3px!important} html body #panel .case-compare>div{padding:2px 10px!important} html body #panel .case-buttons{margin-top:8px!important} } /* v061t: a bigger battle HUD on big PC screens (players found it tiny with room to spare); «Interface size» setting overrides it */ @media (min-width:1500px) and (min-height:800px){html:not(.ui-normal) #hud{zoom:1.22}} @media (min-width:1900px) and (min-height:1000px){html:not(.ui-normal) #hud{zoom:1.4}} html.ui-large #hud{zoom:1.3} @media (min-width:1900px) and (min-height:1000px){html.ui-large #hud{zoom:1.55}} .setting-sel{background:#241f66;color:#fff;border:2px solid #ffffff44;border-radius:10px;padding:5px 8px;font:inherit;font-size:13px;cursor:pointer} /* v061z: camp resident level perks */ .tw-perks{display:block;margin-top:3px;font-size:.92em;line-height:1.35}.tw-perks .off{opacity:.5}.tw-perks .on{color:#9dffb0} #panel .st-next{display:block;margin-top:2px;color:#9dffb0;opacity:.85} /* v061z: camp guide — an arrow at the screen edge when the next step is off the screen; the first-visit window */ #townui .tw-edge{position:fixed;left:0;top:0;width:0;height:0;border-top:24px solid transparent;border-bottom:24px solid transparent;border-left:46px solid #ffe45c;filter:drop-shadow(0 3px 0 #06163c) drop-shadow(0 0 10px #ffd45c99);pointer-events:none;z-index:6;animation:twEdge .6s ease-in-out infinite alternate} @keyframes twEdge{from{opacity:1}to{opacity:.55}} #townui .tw-intro{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,8,30,.55);z-index:30;pointer-events:auto} #townui .tw-intro-box{width:min(460px,calc(100% - 32px));padding:20px 22px;border-radius:18px;background:linear-gradient(#3b2fae,#24207a);border:3px solid #06163c;box-shadow:0 6px 0 #06163c;color:#fff;font:600 15px/1.4 'Golos Text',sans-serif;text-align:left} #townui .tw-intro-box b{display:block;font:400 24px/1.1 'Russo One',sans-serif;color:#ffe45c;margin-bottom:10px} #townui .tw-intro-box ul{margin:0 0 10px;padding-left:20px}#townui .tw-intro-box li{margin:4px 0} #townui .tw-intro-box small{display:block;opacity:.85;margin-bottom:14px} #townui .tw-intro-box .tw-b{display:block;margin:0 auto;min-width:160px} #panel .st-pk{display:block;margin-top:2px;color:#ffd77a} #panel .st-hurt{display:block;color:#ff9c88;font:600 12px/1.2 'Golos Text',sans-serif;text-align:center;margin-bottom:4px} /* v062: screen classes (app.js A.devClass → html[data-dev]). Each block only touches its own class. */ html[data-dev=phone-port] #tutorialTip{top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 250px)!important;width:min(300px,74vw);padding:7px 10px;font-size:11.5px!important;line-height:1.3;border-radius:10px;background:#082039cc} html[data-dev=phone-port] #tutorialTip button{margin-top:4px;font-size:10px} html[data-dev=phone-port] .rtip{top:calc(env(safe-area-inset-top,0px) + 312px)!important;bottom:auto!important;height:auto!important;width:auto!important;max-width:78vw!important;font-size:11px!important;padding:5px 10px 6px!important;white-space:normal} html[data-dev=phone-land] #tutorialTip{top:calc(env(safe-area-inset-top,0px) + 62px)!important;bottom:auto!important;left:auto!important;right:12px;transform:none!important;width:min(260px,32vw);padding:6px 9px;font-size:11px!important;background:#082039cc} html[data-dev=phone-land] .rtip{bottom:auto!important;height:auto!important;font-size:11px!important;padding:5px 10px 6px!important} /* v062: big screens — the upgrade window sat small in the middle of an empty screen */ html[data-dev=tablet-land]:not(.ui-normal) #panel[data-route=upgrade]{zoom:1.45} html[data-dev=tablet-port]:not(.ui-normal) #panel[data-route=upgrade]{zoom:1.3} @media (min-height:900px){html[data-dev=desktop]:not(.ui-normal) #panel[data-route=upgrade],html[data-dev=wide]:not(.ui-normal) #panel[data-route=upgrade]{zoom:1.3}} @media (min-height:700px) and (max-height:899px){html[data-dev=desktop]:not(.ui-normal) #panel[data-route=upgrade]{zoom:1.15}} html[data-dev=tablet-land]:not(.ui-normal) #hud{zoom:1.2} /* v062 UI-002: a tip taller than the screen scrolls inside itself; its «Дальше/Понятно» stays visible at the bottom */ #coach .co-tip{box-sizing:border-box;overflow:hidden} #coach .co-tip.co-scroll{overflow-y:auto;pointer-events:auto!important;overscroll-behavior:contain} #coach .co-tip.co-scroll .co-next{position:sticky;bottom:0} /* v062 UI-003: the result window («УЛУЧШЕНО!» etc.) had scrollbars on both axes — its decorative rays (a 2.1× turning disc) counted as content. They are painted as fixed background now, so the window only scrolls its own content, vertically; the buttons stay in view. */ .xp-show{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain} .xp-show .xs-rays{position:fixed!important} .xp-show .xs-btns{position:sticky;bottom:0;padding:10px 12px calc(8px + env(safe-area-inset-bottom,0px));z-index:2;width:100%;background:linear-gradient(180deg,#0b064000,#0b0640ee 30%)} .xp-show>*:not(.xs-rays){min-width:0;max-width:100%;box-sizing:border-box} @media (max-height:420px){.xp-show{gap:4px!important;padding:8px 14px 0!important;align-content:start!important}.xp-show .xs-item{width:84px!important;height:84px!important}.xp-show .xs-title{font-size:22px!important}.xp-show .xs-hint{display:none}} /* v062 UI-005: on a low landscape screen «Назад» of the sound settings was below the first screen — a back button now sits in a header pinned to the top */ #panel[data-route=soundsettings] .snd-head{position:sticky;top:-1px;z-index:3;display:flex;align-items:center;gap:10px;padding:6px 0;background:#0b1d57} #panel[data-route=soundsettings] .snd-head .u-title{margin:0} #panel[data-route=soundsettings] .snd-x{order:-1;flex:0 0 auto;width:auto!important;margin:0!important;padding:6px 12px!important;font-size:13px!important;min-height:36px} #panel[data-route=soundsettings] .snd-head .u-title{flex:1 1 auto;min-width:0} @media (max-height:420px){#panel[data-route=soundsettings]{padding-top:8px!important}#panel[data-route=soundsettings] .audio-controls{gap:4px!important}} /* v062 UI-006: catalog section switch — one compact row of three tabs, so filters and items start on the first screen of a low landscape window */ #panel .extra-links.cat-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0 10px!important;grid-row:auto!important;order:0!important} #panel .extra-links.cat-tabs .m-ghost{width:auto!important;min-width:0;margin:0!important;padding:8px 6px!important;font-size:12px!important;min-height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #panel .extra-links.cat-tabs .m-ghost.on{background:linear-gradient(180deg,#ffd451,#f0a91c)!important;color:#3a2300!important;border-color:#06163c!important} /* v062 UI-004: the six rarity filters were squeezed into one row (a 35-px button for a 45-px word on a 320-px phone) — they wrap now, each at least 66 px wide and 40 px tall, so the words fit and a finger hits them */ #panel .it-rar{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(66px,1fr))!important;gap:6px!important;flex-wrap:initial} #panel .it-rar button{min-width:0!important;min-height:40px!important;padding:4px 6px!important;font-size:12px!important;line-height:1.1;white-space:normal;overflow-wrap:anywhere;flex:initial!important} /* v062 UI-010: «Poz. 1» broke into two lines next to the avatar on a 320-px phone — the level label stays on one line, the bar gives way */ #panel .m-top .m-lv{min-width:0} #panel .m-top .m-lv b{white-space:nowrap} @media (max-width:360px){#panel .m-top .m-lv b{font-size:12px}#panel .m-top{gap:6px}} /* v062 (audit regression): the chest title («OTWIERAMY SKRZYNIĘ») was wider than a 320–568-px screen and pushed the panel sideways */ #panel .u-title.case-title{max-width:100%;box-sizing:border-box;white-space:normal!important;overflow-wrap:anywhere;font-size:clamp(17px,5.4vw,24px)!important} #panel .case-opening .chest-window{width:min(900px,calc(100% - 16px))!important;max-width:calc(100% - 16px)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box} /* v062: it was 94vw inside a narrower panel */ #panel .case-opening .case-title{display:block;width:fit-content;max-width:calc(100% - 16px);margin-left:auto!important;margin-right:auto!important} #panel .en-rec{display:block;margin:4px 0 8px;color:#ffe45c;font:700 12px/1.3 'Golos Text',sans-serif}#panel .en-rec.off{color:#c9c3ff;opacity:.7} /* v062: the pause icon sat off-centre (button padding/line-height) */ #pause.square{display:grid!important;place-items:center;padding:0!important;line-height:0} #pause.square svg{display:block;margin:0} /* v062: caravan card in the settlement window */ #panel .st-cv .cv-bar{position:relative;display:block;height:10px;margin:8px 22px 4px 0;border-radius:6px;background:#0a1440;border:2px solid #06163c;overflow:visible} #panel .st-cv .cv-bar u{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#ffd451,#f0a91c)} #panel .st-cv .cv-bar em{position:absolute;top:50%;transform:translate(-50%,-55%);font-style:normal;font-size:18px;line-height:1} /* v062: resident perks as icon chips */ .pk-chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px} .pk-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 3px;border-radius:999px;background:#ffffff14;border:1px solid #ffd45c66;color:#ffe9a8;font:700 11px/1.2 'Golos Text',sans-serif;font-style:normal;white-space:nowrap} .pk-chip img{width:18px;height:18px;object-fit:contain} #panel .pk-chips .pk-chip img,#townui .pk-chips .pk-chip img{width:18px!important;height:18px!important;max-width:18px!important;min-width:0!important;margin:0!important;flex:0 0 18px} #panel .pk-chips .pk-chip,#townui .pk-chips .pk-chip{padding:2px 7px 2px 3px!important;font-size:11px!important;min-height:0!important} #panel .st-cv .cv-bar em img{width:34px!important;height:auto!important;max-width:34px!important;display:block;transform:scaleX(-1)} /* v063: tap the portrait for a resident's full card */ #panel .st-ava{position:relative;flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;align-self:center} #panel .st-ava>i{position:absolute;right:-4px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:#5aa2ff;color:#fff;font:italic 800 11px/16px serif;text-align:center;box-shadow:0 1px 0 #0006} /* v063b: the resident card is a window over the list */ .mc-wrap{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#06041ccc;backdrop-filter:blur(3px);animation:mcIn .18s ease-out} @keyframes mcIn{from{opacity:0}to{opacity:1}} .mc-wrap .mc{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:16px 16px 14px;border-radius:20px;background:linear-gradient(180deg,#2f2496,#1d1668);border:2px solid #6f8dff;box-shadow:0 8px 0 #0b0630,0 20px 50px #0008;color:#fff;text-align:left;animation:mcPop .22s cubic-bezier(.2,1.4,.4,1)} @keyframes mcPop{from{transform:scale(.9)}to{transform:scale(1)}} .mc-wrap .mc-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:2px solid #ffffff44;background:#ffffff18;color:#fff;font-size:16px;cursor:pointer} .mc-wrap .mc-top{display:flex;gap:14px;align-items:center;margin-bottom:10px} .mc-wrap .mc-ph{flex:0 0 96px;height:116px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle at 50% 70%,#ffd45c55,#ffffff08 70%);border:2px solid #ffffff22} .mc-wrap .mc-ph img{width:80px;height:108px;object-fit:contain;filter:drop-shadow(0 4px 0 #0006)} .mc-medic .mc-ph{background:radial-gradient(circle at 50% 70%,#5dff9a55,#ffffff08 70%)}.mc-sniper .mc-ph{background:radial-gradient(circle at 50% 70%,#7fb5ff55,#ffffff08 70%)}.mc-engineer .mc-ph{background:radial-gradient(circle at 50% 70%,#ffb24d55,#ffffff08 70%)}.mc-mechanic .mc-ph{background:radial-gradient(circle at 50% 70%,#c58cff55,#ffffff08 70%)} .mc-wrap .mc-id{display:flex;flex-direction:column;gap:3px;min-width:0;padding-right:30px} .mc-wrap .mc-name{font:400 22px/1.1 'Russo One',sans-serif;color:#ffe45c;text-shadow:0 2px 0 #0007} .mc-wrap .mc-role{font-weight:800;font-size:14px}.mc-wrap .mc-role .st-stars{font-style:normal;color:#ffd45c} .mc-wrap .mc-ab{font-size:13px;opacity:.9} .mc-wrap .mc-bud{align-self:flex-start;margin-top:2px;padding:2px 10px;border-radius:999px;background:#34c46a;color:#05300f;font:800 11px/1.5 'Golos Text',sans-serif;font-style:normal}.mc-wrap .mc-bud.away{background:#ffd45c;color:#3a2405} .mc-wrap .mc-sec{margin-top:10px;padding:10px 12px;border-radius:14px;background:#ffffff0f;border:1px solid #ffffff1c} .mc-wrap .mc-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font:800 13px 'Golos Text',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#c9c4ff} .mc-wrap .mc-h b{font:400 16px 'Russo One',sans-serif;color:#fff;text-transform:none}.mc-wrap .mc-h b.g{color:#7dffa8} .mc-wrap .mc-track{display:grid;grid-template-columns:repeat(10,1fr);gap:4px} .mc-wrap .mc-track i{position:relative;height:22px;border-radius:6px;background:#0a1440;border:1px solid #ffffff22;display:grid;place-items:center;font:800 10px 'Golos Text',sans-serif;font-style:normal;color:#ffffff66} .mc-wrap .mc-track i.on{background:linear-gradient(#ffe76a,#f0a91c);border-color:#fff3b0;color:#3a2405} .mc-wrap .mc-track i.ms::after{content:'★';position:absolute;top:-9px;right:-3px;font-size:11px;color:#7dffa8;text-shadow:0 1px 0 #000} .mc-wrap .mc-bar{display:block;height:12px;border-radius:8px;background:#0a1440;border:1px solid #ffffff22;overflow:hidden} .mc-wrap .mc-bar u{display:block;height:100%;background:linear-gradient(90deg,#3fdc7f,#a6ff6a)} .mc-wrap .mc-src{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px} .mc-wrap .mc-src>span{padding:2px 9px;border-radius:999px;background:#0a1440;font-size:12px}.mc-wrap .mc-src b{color:#ffe45c} .mc-wrap .mc-pow small{font-size:11px;opacity:.75} .mc-wrap .mc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .mc-wrap .mc-list li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:#ffffff0d;font-size:13px} .mc-wrap .mc-list img{width:24px;height:24px;object-fit:contain} .mc-wrap .mc-steps li{opacity:.6}.mc-wrap .mc-steps li.ok{opacity:1;background:#2fbf6a2e} .mc-wrap .mc-steps b{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#0a1440;color:#ffd96a;font:800 12px 'Golos Text',sans-serif}.mc-wrap .mc-steps li.ok b{background:#34c46a;color:#05300f} .mc-wrap .mc-foot{display:flex;justify-content:center;margin-top:12px}.mc-wrap .mc-foot .m-btn{min-width:200px} /* v063: caravan on its way — picture + one info line + full-width bar */ #panel .st-cv.cv-go{display:flex;align-items:center;gap:12px} #panel .st-cv .cv-pic{width:64px!important;height:auto!important;max-width:64px!important;flex:0 0 64px;transform:scaleX(-1);filter:drop-shadow(0 3px 0 #0006)} #panel .st-cv .cv-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px} #panel .st-cv .cv-info>b{color:#ffd96a;font-size:15px} #panel .st-cv .cv-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px} #panel .st-cv .cv-clock{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;background:#0a1440;border:1px solid #ffffff22} #panel .st-cv .cv-clock .st-timer{display:inline!important;margin:0!important;padding:0!important;font:800 14px/1.3 'Russo One',sans-serif!important;color:#ffe45c!important;background:none!important;border:0!important;min-width:0!important;text-align:left!important} #panel .st-cv .cv-loot{display:inline-flex;align-items:center;gap:4px;opacity:.9} #panel .st-cv .cv-info .cv-bar{margin:0!important;width:100%;height:10px} /* v063: residents away with the caravan */ #panel .st-pc.away{opacity:.72;background:linear-gradient(180deg,#2a2466,#1d1850)!important;border-style:dashed!important} #panel .st-pc.away .st-ava img{filter:grayscale(.6)} #panel .st-away{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border-radius:12px;background:#0a1440;border:1px solid #ffd45c55;color:#ffe9a8;font:700 12px/1.25 'Golos Text',sans-serif;text-align:center;max-width:150px} #panel .st-away img{width:44px!important;height:auto!important;transform:scaleX(-1)} #panel .st-away .st-timer{display:inline!important;margin:0!important;padding:0!important;background:none!important;border:0!important;color:#ffe45c!important;font:800 13px 'Russo One',sans-serif!important;min-width:0!important} /* v063: match history */ #panel .hs-list{display:flex;flex-direction:column;gap:10px;max-width:640px;margin:12px auto} #panel .hs-item{border-radius:16px;background:linear-gradient(180deg,#2c2390,#1f1870);border:2px solid #ffffff22;overflow:hidden} #panel .hs-item.win{border-color:#5dff9a55}#panel .hs-item.lose{border-color:#ff6b6b44} #panel .hs-item>summary{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none} #panel .hs-item>summary::-webkit-details-marker{display:none} #panel .hs-r{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 16px 'Golos Text',sans-serif;background:#0a1440} #panel .hs-item.win .hs-r{background:#34c46a;color:#05300f}#panel .hs-item.lose .hs-r{background:#c94a4a;color:#fff} #panel .hs-t{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}#panel .hs-t small{opacity:.75;font-size:12px} #panel .hs-item[open]>summary{background:#ffffff0c} #panel .hs-item>.hs-sum,#panel .hs-item>.hs-h,#panel .hs-item>.hs-bars,#panel .hs-item>p{margin-left:14px;margin-right:14px} .hs-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;margin:10px 0} .hs-sum>div{display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:10px;background:#0a1440} .hs-sum b{font:400 16px 'Russo One',sans-serif;color:#fff}.hs-sum small{font-size:10px;opacity:.7;text-align:center} .hs-h{margin:12px 0 6px;font:800 12px 'Golos Text',sans-serif;text-transform:uppercase;letter-spacing:.05em;text-align:left} .hs-bars{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px} .hs-bars li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px;text-align:left} .hs-bars .hs-v{opacity:.85;font-size:12px}.hs-bars i{grid-column:1/-1;display:block;height:7px;border-radius:5px;background:#0a1440;overflow:hidden}.hs-bars u{display:block;height:100%;border-radius:5px} .hs-none,.hs-note{font-size:12px;opacity:.7;margin:2px 0 8px;text-align:left} .mc-wrap .hs-card{width:min(520px,100%)}.hs-title{margin:0 40px 4px 0;font:400 18px 'Russo One',sans-serif;color:#ffe45c;text-align:left} #panel .hs-item:last-child{margin-bottom:4px}#panel .hs-item[open]{padding-bottom:10px} /* v076 (018): no browser text selection / long-press callout / image drag on game surfaces (phones showed blue selection handles on the upgrade cards). Real inputs, text areas and selects keep normal behaviour. */ html,body,#overlay,#panel,#hud,#c,#joystick,#townui,.mc-wrap{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent} img,svg,canvas{-webkit-user-drag:none;user-drag:none} input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} /* v076 (013): the rarity-up / star result — the buttons sit right under the content (they stuck to the screen bottom as a wide dark band with a borderless «Close»), «Close» is a real button, the window is centred and sized by its content */ .xp-show{align-content:center!important;padding:12px 14px!important} .xp-show .xs-btns{position:relative!important;bottom:auto!important;width:min(100%,340px)!important;padding:0!important;background:none!important;margin-top:8px!important;grid-auto-flow:row} html body #panel .xp-show .xs-btns button.m-ghost:not(.xp-test){min-height:44px;border:2px solid #ffffff66!important;border-radius:14px!important;background:#ffffff1a!important;color:#fff!important;font-weight:800!important;font-size:15px!important;box-shadow:0 3px 0 #0b0630!important} .xp-show .xs-btns .m-ghost:hover{background:#ffffff26!important} .xp-show .xs-hint{display:block!important;font-size:11px;opacity:.6;margin-top:2px} /* v076 (003): on the result screen every action looks like a button (TO BASE / HERO were plain text) */ html body #panel.menu[data-route=result] button.m-ghost:not(.xp-test),html body #panel[data-route=result] button.m-ghost:not(.xp-test),html body #panel.menu[data-route=revive] button.m-ghost:not(.xp-test),html body #panel[data-route=revive] button.m-ghost:not(.xp-test){border:2px solid #ffffff66!important;border-radius:14px!important;background:#ffffff1a!important;color:#fff!important;min-height:44px;box-shadow:0 3px 0 #0b0630!important;font-weight:800!important} #panel[data-route=result] .m-ghost:hover,#panel[data-route=revive] .m-ghost:hover{background:#ffffff26!important} /* v076 (019): the boss plate leaves after the boss falls */ #bossbar.bb-gone{opacity:0;transform:translateY(-12px) scale(.9);pointer-events:none;transition:opacity .5s ease .8s,transform .5s ease .8s} /* v076 (002/011): compact result screen — summary chips with details in place; the whole screen fits without scrolling */ #panel[data-route=result] .r-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0 6px} #panel[data-route=result] .r-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:999px;border:2px solid #ffffff33;background:#ffffff12;color:#fff;font:800 13px 'Golos Text',sans-serif;cursor:pointer;min-height:40px} #panel[data-route=result] .r-chip img{width:28px!important;height:28px!important;object-fit:contain} #panel[data-route=result] .r-chip b{font:400 15px 'Russo One',sans-serif;color:#ffe45c} #panel[data-route=result] .r-chip.on{background:linear-gradient(#5a46d8,#3b2aa8);border-color:#ffe45c} #panel[data-route=result] .r-pane{max-height:30vh;overflow:auto;border-radius:12px;margin-bottom:6px} #panel[data-route=result] .r-pane .it-grid{justify-content:center} #panel[data-route=result] .feel-result{display:none} #panel[data-route=result] .r-line{margin:4px 0!important} #panel[data-route=result] .r-tiles{margin:6px 0!important} #panel[data-route=result] .r-title{margin:0!important} #panel[data-route=result] .p-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} #panel[data-route=result] .p-row>button{margin:0!important} @media (max-height:700px){#panel[data-route=result] .r-tiles>div{padding:6px!important}#panel[data-route=result] .r-tiles svg,#panel[data-route=result] .r-tiles img{width:22px!important;height:22px!important}#panel[data-route=result] .r-pane{max-height:24vh}} /* v076b: tighter result — stats as one small line, rewards as a row of compact pills, the two main buttons side by side */ #panel[data-route=result] .r-stage{margin:2px auto 0!important;font-size:12px!important;padding:3px 12px!important} #panel[data-route=result] .r-title{font-size:clamp(20px,4.2vh,30px)!important} #panel[data-route=result] .r-line{gap:4px 14px!important;font-size:11px!important} #panel[data-route=result] .r-line span{display:inline-flex!important;flex-direction:row!important;gap:5px;align-items:baseline} #panel[data-route=result] .r-line b{font-size:13px!important} #panel[data-route=result] .r-tiles{display:flex!important;gap:6px!important;justify-content:center} #panel[data-route=result] .r-tiles>div{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;padding:4px 12px!important;min-height:0!important;border-radius:999px!important;flex:0 0 auto!important} #panel[data-route=result] .r-tiles small{display:none!important} #panel[data-route=result] .r-tiles svg,#panel[data-route=result] .r-tiles img{width:22px!important;height:22px!important} #panel[data-route=result] .r-tiles b{font-size:16px!important} #panel[data-route=result] .r-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin-top:6px!important} #panel[data-route=result] .r-btns>button{margin:0!important;padding:10px!important;min-height:46px} #panel[data-route=result] .r-btns>button[data-action=next]{order:-1} #panel[data-route=result] .p-row{margin-top:6px!important} #panel[data-route=result] .p-row>button{min-height:38px!important;padding:6px!important;font-size:12px!important} #panel[data-route=result] .st-res .sh-stars,#panel[data-route=result] .st-res h3{display:none} #panel[data-route=result] .st-res{padding:6px 8px!important;margin:0!important} #panel[data-route=result] .st-res p{margin:2px 0!important;font-size:12px!important} #panel[data-route=result] .st-res .st-pc{padding:4px 8px!important;margin:4px 0!important} #panel[data-route=result] .st-res .st-pc small:not(.st-full){display:none} #panel[data-route=result] .st-res .pk-chips{display:none} #panel[data-route=result] .r-pane{max-height:none} #panel[data-route=result] .r-btns{position:relative!important;bottom:auto!important;margin:6px 0 0!important;padding:0!important;background:none!important;border:0!important;grid-template-columns:1fr 1fr!important;grid-auto-flow:row!important} #panel[data-route=result]{padding:12px 14px!important} /* v076c: residents in the result — one line each, buttons side by side */ #panel[data-route=result] .st-res .st-pc{display:flex!important;align-items:center;gap:8px} #panel[data-route=result] .st-res .st-pc .st-ava img{width:30px!important;height:40px!important} #panel[data-route=result] .st-res .st-pi{flex:1 1 auto;min-width:0} #panel[data-route=result] .st-res .st-pi b{font-size:13px!important} #panel[data-route=result] .st-res .st-pb{display:flex!important;flex-direction:row!important;gap:6px;flex:0 0 auto} #panel[data-route=result] .st-res .st-pb button{min-height:34px!important;padding:4px 10px!important;font-size:12px!important;margin:0!important;white-space:nowrap} #panel[data-route=result] .st-res>p:first-of-type{display:none} /* landscape / short screens: two columns — summary and buttons on the left, chips + the chosen details on the right */ @media (orientation:landscape) and (max-height:560px){ #panel[data-route=result]{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:14px;align-content:start;grid-auto-rows:min-content;width:min(900px,100%)!important} #panel[data-route=result]>*{grid-column:1} #panel[data-route=result]>.r-side{grid-column:2;grid-row:1/span 30;align-self:stretch;display:flex;flex-direction:column;min-height:0} #panel[data-route=result] .r-side .r-chips{margin-top:0!important;justify-content:flex-start} #panel[data-route=result] .r-side .r-pane{flex:1 1 auto;min-height:0;max-height:calc(100vh - 100px);overflow:auto} #panel[data-route=result] .r-title{font-size:20px!important} #panel[data-route=result] .r-line{justify-content:center} #panel[data-route=result] .r-line span:nth-child(n+3){display:none!important} } /* v076d: rows as flex (other rules forced grid spans) */ html body #panel[data-route=result] .r-btns{display:flex!important;flex-direction:row!important;gap:8px!important} html body #panel[data-route=result] .r-btns>button{flex:1 1 0!important;grid-column:auto!important;width:auto!important} html body #panel[data-route=result] .p-row{display:flex!important;flex-direction:row!important;gap:8px!important} html body #panel[data-route=result] .p-row>button{flex:1 1 0!important;width:auto!important;min-width:0!important;white-space:nowrap} #panel[data-route=result] .r-chip{padding:4px 10px 4px 5px} @media (max-width:420px){#panel[data-route=result] .r-chips{gap:5px}#panel[data-route=result] .r-chip{font-size:12px;gap:4px;padding:3px 8px 3px 4px}#panel[data-route=result] .r-chip img{width:24px!important;height:24px!important} #panel[data-route=result] .st-res .st-pc{flex-wrap:wrap}#panel[data-route=result] .st-res .st-pb{width:100%}#panel[data-route=result] .st-res .st-pb button{flex:1 1 0}} @media (max-width:420px){html body #panel[data-route=result] .p-row>button{font-size:11px!important;padding:4px!important;min-height:34px!important}html body #panel[data-route=result] .p-row>button svg{display:none}#panel[data-route=result] .r-chips{flex-wrap:nowrap}} @media (max-height:420px){html body #panel[data-route=result] .p-row>button{font-size:11px!important;padding:4px!important;min-height:32px!important}html body #panel[data-route=result] .p-row>button svg{display:none}html body #panel[data-route=result] .r-btns>button{min-height:40px!important;padding:6px!important;font-size:14px!important}#panel[data-route=result] .st-res .st-pi b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#panel[data-route=result] .st-res .st-pb button{padding:3px 8px!important}} /* v076 (020): minimap folds into a round button on phones (tap to open/close); on PC it stays open */ .minimap .mm-toggle{position:absolute;right:2px;top:2px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:#071a3fcc;display:grid;place-items:center;cursor:pointer;z-index:2;pointer-events:auto} .minimap .mm-toggle img{width:18px;height:18px;object-fit:contain} .minimap.mm-closed{width:46px!important;height:46px!important;border-radius:50%!important} .minimap.mm-closed canvas{opacity:0} .minimap.mm-closed .mm-toggle{inset:0;width:100%;height:100%;background:linear-gradient(#3f84f5,#1f55c8)} .minimap.mm-closed .mm-toggle img{width:26px;height:26px} .minimap{pointer-events:auto} /* v076 (019/020): landscape phone — the skills run along the bottom right, never off the top of the screen */ html[data-dev=phone-land] #skillbar{flex-direction:row!important;top:auto!important;bottom:max(10px,env(safe-area-inset-bottom))!important;right:12px!important;max-width:42vw!important;flex-wrap:nowrap!important} html[data-dev=phone-land] #skillbar>*:empty,html[data-dev=phone-land] #skillbar .empty{display:none!important} /* v076 (017): daily tasks in the camp — a header that folds the list; on a phone it starts folded */ #townui .tw-q .tw-qhead{display:flex;align-items:center;gap:6px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left} #townui .tw-q .tw-qhead img{width:18px;height:18px;object-fit:contain} #townui .tw-q .tw-qhead em{margin-left:auto;font-style:normal;font-weight:800;color:#ffe45c} #townui .tw-q[data-open="0"] .tw-qi{display:none} #townui .tw-q[data-open="0"]{padding:6px 10px!important;width:auto!important} #townui .tw-q.ready[data-open="0"] .tw-qhead em::after{content:' ●';color:#5dff9a} #townui .tw-bar:empty{display:none!important} /* v076 (patrol addon): first screen in two columns on wide screens, stacked on phones; log / upgrade as short own screens */ #panel[data-route=patrol] .pt-main{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:700px){#panel[data-route=patrol] .pt-main{grid-template-columns:1.1fr 1fr;align-items:start}} @media (orientation:landscape) and (max-height:560px){#panel[data-route=patrol] .pt-main{grid-template-columns:1.1fr 1fr;align-items:start}} #panel[data-route=patrol] .pt-left>*,#panel[data-route=patrol] .pt-right>*{margin-top:0!important;margin-bottom:8px!important} #panel[data-route=patrol] .pt-foot{display:flex;gap:8px;margin-top:6px} #panel[data-route=patrol] .pt-foot>button{flex:1 1 0;margin:0!important;min-height:44px} html body #panel[data-route=patrol] .pt-nav:not(.xp-test){border:2px solid #ffffff55!important;border-radius:14px!important;background:#ffffff14!important;color:#fff!important;font-weight:800!important;box-shadow:0 3px 0 #0b0630!important} #panel[data-route=patrol] .pt-sub{max-width:560px;margin:0 auto} #panel[data-route=patrol] .bank{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px} /* v076 (017): camp top bar on phones sat under the portal's own strip (CrazyGames «Exit» bar) — moved down, bigger to tap */ html[data-dev^=phone] #townui .tw-top{top:calc(env(safe-area-inset-top,0px) + 44px)!important} html[data-dev^=phone] #townui .tw-top .tw-b{min-height:40px;padding:8px 14px!important;font-size:14px!important} html[data-dev^=phone] #townui .tw-top .tw-c{font-size:14px!important;padding:8px 12px!important} html[data-dev^=phone] #townui .tw-q{top:calc(env(safe-area-inset-top,0px) + 98px)!important} html[data-dev^=phone] #townui .tw-q .tw-qhead{min-height:30px;font-size:14px} html[data-dev^=phone] #townui .tw-top .tw-b{font-size:13px!important;padding:8px 10px!important;flex:0 0 auto} html[data-dev^=phone] #townui .tw-top .tw-c{font-size:12px!important;padding:8px 8px!important;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden} html body #panel[data-route=patrol] .m-body{display:block!important;grid-template-columns:none!important;columns:auto!important} html body #panel[data-route=patrol] .pt-main,html body #panel[data-route=patrol] .pt-foot,html body #panel[data-route=patrol] .pt-sub{width:100%!important;max-width:none} @media (orientation:landscape) and (max-height:560px){html body #panel[data-route=patrol] .pt-left .xp-pic{max-height:38vh;overflow:hidden}html body #panel[data-route=patrol] .h-head small{display:none}html body #panel[data-route=patrol] .pt-left .xp-pic{max-height:30vh}html body #panel[data-route=patrol] .pt-main{gap:8px}html body #panel[data-route=patrol] .bank{padding:4px 8px!important}html body #panel[data-route=patrol] .bank img{width:22px!important;height:22px!important}html body #panel[data-route=patrol] .bank b{font-size:16px!important}html body #panel[data-route=patrol] .pt-right .m-play{min-height:38px!important;padding:6px!important}html body #panel[data-route=patrol] .pt-foot>button{min-height:36px}html body #panel[data-route=patrol] .pt-prog{padding:6px 10px!important}html body #panel[data-route=patrol] .h-head{margin-bottom:2px!important}} /* v076: patrol on short screens — smaller map, no rate line, so everything sits above the bottom bar */ @media (orientation:landscape) and (max-height:560px){html body #panel[data-route=patrol] .pt-left .xp-pic{max-height:26vh!important}html body #panel[data-route=patrol] .pt-prog small{display:none}} @media (orientation:portrait) and (max-height:700px){html body #panel[data-route=patrol] .pt-left .xp-pic{max-height:24vh;overflow:hidden}html body #panel[data-route=patrol] .pt-prog small{display:none}html body #panel[data-route=patrol] .pt-main{gap:6px}html body #panel[data-route=patrol] .pt-left>*,html body #panel[data-route=patrol] .pt-right>*{margin-bottom:6px!important}} @media (orientation:portrait) and (max-height:700px){html body #panel[data-route=patrol] .bank{padding:4px 8px!important}html body #panel[data-route=patrol] .bank img{width:22px!important;height:22px!important}html body #panel[data-route=patrol] .bank b{font-size:16px!important}html body #panel[data-route=patrol] .pt-right .m-play{min-height:40px!important;padding:6px!important}html body #panel[data-route=patrol] .pt-foot>button{min-height:38px}html body #panel[data-route=patrol] .h-head small{display:none}} /* v076: short landscape — the map gets the whole left column, progress/loot/buttons stack on the right */ @media (orientation:landscape) and (max-height:560px){html body #panel[data-route=patrol] .pt-main{grid-template-columns:1fr 1fr;grid-auto-flow:row dense;row-gap:6px} html body #panel[data-route=patrol] .pt-left,html body #panel[data-route=patrol] .pt-right{display:contents} html body #panel[data-route=patrol] .pt-main>*>*{grid-column:2;margin:0!important} html body #panel[data-route=patrol] .pt-left>:first-child{grid-column:1;grid-row:1/span 6;max-height:none!important;align-self:stretch} html body #panel[data-route=patrol] .pt-left .xp-pic{max-height:none!important}} @media (orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=patrol] .pt-map{height:calc(100dvh - 180px)!important;min-height:150px!important;align-self:start}} @media (orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=patrol] .bank small{display:none}html body #panel#panel[data-route=patrol] .bank>div{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px}html body #panel#panel[data-route=patrol] .pt-prog{padding:4px 10px!important}html body #panel#panel[data-route=patrol] .pt-foot>button{min-height:34px!important;padding:4px!important}} @media (orientation:landscape) and (max-height:380px){html body #panel#panel.menu[data-route=patrol] .h-head>b{font-size:20px!important;margin:0!important}html body #panel#panel[data-route=patrol] .pt-main{row-gap:4px}} @media (orientation:landscape) and (max-height:380px){html body #panel#panel[data-route=patrol] .pt-right .m-play{min-height:34px!important;padding:4px!important}html body #panel#panel[data-route=patrol] .bank{padding:2px 8px!important}} /* v076 (020): shop = one short main screen + short sub-views */ html body #panel#panel[data-route=shop] [data-sv][hidden],html body #panel#panel[data-route=shop] .mn-shop [data-sv][hidden]{display:none!important} html body #panel[data-route=shop] .mn-shop[data-sv=box]{display:contents!important} html body #panel[data-route=shop] .m-body.sh-main{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;align-content:start;columns:auto!important} html body #panel[data-route=shop] .m-body.sh-main>*:not(.case-shop){grid-column:1/-1;margin:0!important} html body #panel[data-route=shop] .m-body.sh-main>.case-shop :is(.case-target,.case-sets,[data-action=caseDemo],[data-action=chances],.m-note){display:none!important} html body #panel[data-route=shop] .m-body.sh-main>.case-shop h3{font-size:15px!important;margin:0!important} html body #panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions{display:block;margin:0} html body #panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions>button{width:100%;margin:0!important} html body #panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity span{font-size:11px} html body #panel[data-route=shop] .m-body:not(.sh-main) .sh-det{display:none!important} html body #panel[data-route=shop] .sh-det{min-height:32px!important;padding:4px 8px!important;font-size:12px!important;margin:0!important} html body #panel[data-route=shop] .xp-gift{cursor:pointer;display:flex!important;align-items:center;gap:10px;padding:8px 12px!important;margin:0!important} html body #panel[data-route=shop] .xp-gift>img{width:44px!important;height:44px!important;flex:none} html body #panel[data-route=shop] .xp-gift>b{flex:1 1 auto;text-align:left} html body #panel[data-route=shop] .xp-gift>small{display:none} html body #panel[data-route=shop] .xp-gift .sh-claim{flex:none;width:auto!important;min-height:40px!important;padding:6px 16px!important;margin:0!important;font-size:15px!important} html body #panel[data-route=shop] .xp-gift .sh-more{font-style:normal;font-size:13px;color:var(--u-text-2,#cfc6ff);flex:none} html body #panel[data-route=shop] .sh-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media (min-width:700px){html body #panel[data-route=shop] .sh-tiles{grid-template-columns:repeat(4,1fr)}} html body #panel[data-route=shop] .sh-tile{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:8px 10px;min-height:56px;border-radius:14px;border:2px solid #6d5cff;background:linear-gradient(#2a1f7a,#1b1257);color:#fff;font:inherit;cursor:pointer;box-shadow:0 3px 0 #0b0630} html body #panel[data-route=shop] .sh-tile img{grid-row:1/3;width:36px;height:36px;object-fit:contain} html body #panel[data-route=shop] .sh-tile b{font-family:'Russo One',sans-serif;font-weight:400;font-size:14px;line-height:1.1} html body #panel[data-route=shop] .sh-tile small{font-size:11px;color:var(--u-text-2,#cfc6ff);line-height:1.15} html body #panel[data-route=shop] .sh-tile:active{transform:translateY(2px);box-shadow:0 1px 0 #0b0630} html body #panel[data-route=shop] .sh-back{width:auto!important;align-self:flex-start;min-height:38px!important;padding:6px 14px!important;margin:0 0 8px!important} @media (orientation:landscape) and (max-height:560px){html body #panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity{display:none}html body #panel[data-route=shop] .m-body.sh-main{gap:8px}} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop{margin:0!important;padding:10px!important;min-width:0;grid-template-columns:72px minmax(0,1fr)!important;gap:4px 10px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop::before{width:72px!important;height:72px!important;grid-row:1/span 2!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop>:is(.case-actions,.sh-det){grid-column:1/-1} @media (max-width:699px){html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop{grid-template-columns:minmax(0,1fr)!important;justify-items:center;text-align:center} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop::before{grid-row:auto!important;width:64px!important;height:64px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop h3{font-size:13px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity span{display:none} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions{width:100%} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions button{font-size:13px!important;padding:6px 4px!important;white-space:nowrap}} @media (orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop{grid-template-columns:48px minmax(0,1fr) auto!important;grid-template-rows:auto auto;padding:6px 10px!important;gap:0 10px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop::before{width:48px!important;height:48px!important;grid-row:1/span 2!important;grid-column:1} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop h3{grid-column:2;grid-row:1;font-size:13px!important;align-self:end} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .sh-det{grid-column:2;grid-row:2;justify-self:start;align-self:start;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font-size:12px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions{grid-column:3;grid-row:1/span 2} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions button{min-height:38px!important;padding:4px 10px!important;font-size:13px!important} html body #panel#panel[data-route=shop] .xp-gift{padding:4px 10px!important}html body #panel#panel[data-route=shop] .xp-gift>img{width:32px!important;height:32px!important} html body #panel#panel[data-route=shop] .sh-tile{min-height:44px;padding:4px 8px}} @media (orientation:landscape) and (max-height:560px){html body #panel#panel.menu[data-route=shop] .m-title{font-size:22px!important;margin:0!important} html body #panel#panel.menu[data-route=shop] .xp-gift{min-height:0!important;height:auto!important} html body #panel#panel.menu[data-route=shop] .xp-gift .sh-claim{min-height:34px!important;padding:4px 14px!important} html body #panel#panel.menu[data-route=shop] .sh-tile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}} /* shop sub-views: one column, the back button replaces the title, compact grids so each view fits */ html body #panel#panel[data-route=shop] :is(.sh-back,.sh-det)::after{content:""!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main){display:block!important;columns:auto!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.m-title{display:none!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>*{max-width:none!important;width:auto} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop{display:grid!important;grid-template-columns:1fr 1fr;gap:8px} @media (min-width:700px){html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop{grid-template-columns:repeat(4,1fr)}html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .g-days{grid-template-columns:repeat(7,1fr)!important}html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .g-days>*{grid-column:auto!important}} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>:is(.xp-adsh,.mn-wheel,.mn-conv){grid-column:1/-1} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>.xp-ad{padding:6px!important;gap:0!important;margin:0!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>.xp-ad .pic{transform:scale(.7);margin:-8px 0} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>.xp-ad .mn-btn,html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>.xp-ad button{margin-top:4px!important;min-height:36px!important;padding:4px!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>.mn-case{grid-column:1/-1} html body #panel#panel[data-route=shop] .m-body:not(.sh-main){position:relative} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.sh-back{position:absolute;right:12px;top:4px;z-index:3;margin:0!important} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>.mn-case{grid-column:auto} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>.xp-ad .pic{display:none} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop>.mn-case :is(em,.gc-ladder){display:none} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .s-offer{padding:6px!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .s-offer img{max-height:44px} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop{grid-template-columns:80px minmax(0,1fr) minmax(0,1fr)!important;padding:10px!important;gap:4px 14px!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop::before{width:80px!important;height:80px!important;grid-row:1/span 3!important;grid-column:1} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>h3{grid-column:2;grid-row:1} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>.m-note{grid-column:2;grid-row:2;margin:0!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>.case-pity{grid-column:2;grid-row:3} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>.case-sets{grid-column:2/4;grid-row:4} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>.case-target{grid-column:3;grid-row:1} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>.case-actions{grid-column:3;grid-row:2} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>[data-action=caseDemo]{grid-column:3;grid-row:3;min-height:30px!important;margin:0!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop h3{font-size:18px!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=shop] .m-body:not(.sh-main) .mn-shop{grid-template-columns:repeat(4,minmax(0,1fr))!important} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop{align-items:start!important;align-content:start} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>.case-actions{display:flex!important;gap:8px;align-items:center} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>.case-actions>button{margin:0!important;flex:1 1 auto} html body #panel#panel[data-route=shop] .m-body:not(.sh-main)>.case-shop>.case-actions>[data-action=chances]{flex:0 1 auto;min-height:36px!important}} /* v076 (020): hero — «было → станет» for the picked item */ html body #panel#panel .hx-gain{margin:8px 0;padding:8px 10px;border-radius:14px;background:#0b063099;border:2px solid #6d5cff} html body #panel#panel .hx-gain>small{display:block;font-size:12px;color:var(--u-text-2,#cfc6ff);margin-bottom:6px} html body #panel#panel .hx-gain>p{margin:0;font-size:14px;color:#cfc6ff} html body #panel#panel .hx-gv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px} html body #panel#panel .hx-gv>div{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;align-items:baseline;column-gap:6px;padding:6px 10px;border-radius:12px;background:linear-gradient(#2a1f7a,#1b1257)} html body #panel#panel .hx-gv span{grid-column:1/-1;font-size:12px;color:#cfc6ff} html body #panel#panel .hx-gv em{font-style:normal;font-size:15px;color:#a99fe0;text-decoration:line-through;text-decoration-color:#a99fe088} html body #panel#panel .hx-gv i{font-style:normal;color:#cfc6ff} html body #panel#panel .hx-gv b{font-family:'Russo One',sans-serif;font-weight:400;font-size:22px;line-height:1} html body #panel#panel .hx-gv u{grid-column:1/-1;text-decoration:none;font-family:'Russo One',sans-serif;font-size:14px} html body #panel#panel .hx-gv .up b,html body #panel#panel .hx-gv .up u{color:#5cf2a0} html body #panel#panel .hx-gv .dn b,html body #panel#panel .hx-gv .dn u{color:#ff6b6b} html body #panel#panel .hx-gv{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))} html body #panel#panel .hx-gv>div{padding:5px 8px} html body #panel#panel .hx-gv b{font-size:19px} html body #panel#panel .hx-gain .hx-wear{width:100%;margin:8px 0 0!important;min-height:42px} html body #panel#panel .it-detail:has(.hx-gain) .it-acts [data-action=equip]{display:none!important} /* v077 (008 / 009): flying rewards */ .rfx{position:fixed;z-index:60;pointer-events:none;object-fit:contain;filter:drop-shadow(0 0 6px #fff8) drop-shadow(0 2px 2px #0008)} .rfx[src*="camp_p_"]{border-radius:50%;border:2px solid #ffe45c;background:#2a1f7a;object-fit:cover} .rfx-hit{animation:rfxHit .42s ease-out} @keyframes rfxHit{0%{filter:brightness(1)}30%{filter:brightness(1.9) drop-shadow(0 0 8px #ffe45c);transform:scale(1.06)}100%{filter:brightness(1);transform:none}} /* v077 (010): the first reward and the stat growth */ html body #panel#panel .ob-reward{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;margin:4px 0 10px!important;font-size:20px!important;animation:obPulse 1.4s ease-in-out infinite} html body #panel#panel .ob-reward img{width:44px;height:44px;object-fit:contain;margin:-8px 0;filter:drop-shadow(0 3px 4px #0008)} html body #panel#panel .ob-pulse{animation:obPulse 1.2s ease-in-out infinite} @keyframes obPulse{0%,100%{transform:scale(1);box-shadow:0 4px 0 #b86e00,0 0 0 #ffe45c00}50%{transform:scale(1.04);box-shadow:0 4px 0 #b86e00,0 0 22px #ffe45caa}} html body #panel#panel .m-stats>div{position:relative} html body #panel#panel .m-stats>div.ob-up{box-shadow:0 0 0 2px #5cf2a0,0 0 18px #5cf2a088!important;transition:box-shadow .3s} html body #panel#panel .m-stats>div.ob-up b{color:#5cf2a0!important} .ob-plus{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font-style:normal;font-family:'Russo One',sans-serif;font-size:18px;color:#5cf2a0;text-shadow:0 2px 0 #0b0630,0 0 8px #5cf2a0aa;pointer-events:none;animation:obRise 1.6s ease-out forwards;z-index:3;white-space:nowrap} .ob-plus.dn{color:#ff6b6b} @keyframes obRise{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.2)}100%{opacity:0;transform:translate(-50%,-34px) scale(1)}} /* v077 (007): daily district */ html body #panel#panel .dy-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;margin:8px 0;padding:8px 12px;border-radius:16px;border:2px solid #ffb84a;background:linear-gradient(135deg,#ff7a3c,#c2357a);color:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 4px 0 #6b1640,0 0 18px #ff7a3c55} html body #panel#panel .dy-card.done{border-color:#ffffff55;background:linear-gradient(135deg,#7a4a9c,#4a2a7a);box-shadow:0 4px 0 #24124a} html body #panel#panel .dy-cic{width:40px;height:40px;border-radius:50%;background:#0006;display:grid;place-items:center} html body #panel#panel .dy-cic img{width:28px;height:28px} html body #panel#panel .dy-ct{display:flex;flex-direction:column;gap:2px;min-width:0} html body #panel#panel .dy-ct b{font-family:'Russo One',sans-serif;font-weight:400;font-size:15px;letter-spacing:.3px} html body #panel#panel .dy-ct small{display:flex;align-items:center;gap:4px;font-size:12px;opacity:.95} html body #panel#panel .dy-card em{font-style:normal;font-family:'Russo One',sans-serif;font-size:14px;display:flex;align-items:center;gap:4px;white-space:nowrap} .dy-ic{width:22px;height:22px;object-fit:contain;vertical-align:middle}.dy-ic.s{width:16px;height:16px} .dy-ct .dy-ic{width:18px;height:18px;border-radius:50%;padding:1px}.dy-ct .dy-ic.bad{background:#ff4d6d55}.dy-ct .dy-ic.good{background:#5cf2a055} html body #panel#panel[data-route=daily] .dy-main{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:700px),(orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=daily] .dy-main{grid-template-columns:1fr 1fr;align-items:start}} html body #panel#panel[data-route=daily] .dy-main>section{margin:0!important;display:flex;flex-direction:column;gap:6px;padding:10px 12px!important} .dy-h{font-size:12px;color:var(--u-text-2,#cfc6ff);text-transform:uppercase;letter-spacing:.5px} .dy-mod{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:6px 8px;border-radius:12px;background:#0b063088;border-left:4px solid #ff4d6d} .dy-mod.good{border-left-color:#5cf2a0} .dy-mod .dy-ic{width:32px;height:32px} .dy-mod b{display:block;font-size:14px}.dy-mod small{display:block;font-size:12px;color:#cfc6ff} .dy-base{font-family:'Russo One',sans-serif;font-size:18px;display:flex;align-items:center;gap:4px}.dy-ok{color:#5cf2a0;font-size:15px} .dy-tier{display:grid;grid-template-columns:20px auto 1fr auto;gap:8px;align-items:center;padding:4px 8px;border-radius:10px;background:#0b063066;font-size:13px} .dy-tier i,.dy-medal{display:inline-block;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 -2px 0 #0004,0 0 6px #0006} .dy-tier span{color:#cfc6ff}.dy-tier em{font-style:normal;display:flex;align-items:center;gap:3px;font-family:'Russo One',sans-serif;font-size:13px} .dy-tier.got{outline:2px solid #5cf2a0} .m3 i,.dy-medal.m3,.dy-tier.m3 i{background:radial-gradient(circle at 35% 35%,#fff6b0,#ffc83d 50%,#b8860b)} .m2 i,.dy-medal.m2,.dy-tier.m2 i{background:radial-gradient(circle at 35% 35%,#ffffff,#c9d3e0 50%,#7d8a9c)} .m1 i,.dy-medal.m1,.dy-tier.m1 i{background:radial-gradient(circle at 35% 35%,#ffd7a8,#cd7f32 50%,#7a4a1a)} .dy-best{margin:2px 0 0;font-size:12px;color:#cfc6ff} html body #panel#panel[data-route=daily] .dy-foot{display:flex;gap:10px;margin-top:10px}html body #panel#panel[data-route=daily] .dy-foot>button{flex:1;margin:0!important} html body #panel#panel .dy-res{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:6px 0;padding:6px 10px;border-radius:12px;background:linear-gradient(135deg,#ff7a3c55,#c2357a55);border:1px solid #ffb84a88;font-size:14px} html body #panel#panel .dy-res b{font-family:'Russo One',sans-serif;font-weight:400}.dy-res em{font-style:normal;display:flex;align-items:center;gap:3px;color:#ffe45c;font-family:'Russo One',sans-serif}.dy-res .dy-none{color:#cfc6ff;font-family:inherit} .dy-time{display:flex;align-items:center;gap:3px;font-family:'Russo One',sans-serif} .dy-tier span{white-space:nowrap;font-size:12px} html body #panel#panel[data-route=daily] .dy-main>section{align-items:stretch;text-align:left} html body #panel#panel[data-route=daily] .dy-mod,html body #panel#panel[data-route=daily] .dy-tier{width:100%;box-sizing:border-box;margin:0} html body #panel#panel[data-route=daily] .dy-h{text-align:left} @media (orientation:landscape) and (max-height:560px){html body #panel#panel.menu[data-route=daily] .h-head>b{font-size:22px!important;margin:0!important}html body #panel#panel[data-route=daily] .h-head small{display:none} html body #panel#panel[data-route=daily] .dy-mod{padding:3px 8px;grid-template-columns:24px 1fr}html body #panel#panel[data-route=daily] .dy-mod .dy-ic{width:22px;height:22px}html body #panel#panel[data-route=daily] .dy-mod small{display:none} html body #panel#panel[data-route=daily] .dy-tier{padding:2px 8px}html body #panel#panel[data-route=daily] .dy-best{display:none}html body #panel#panel[data-route=daily] .dy-main>section{gap:4px;padding:6px 10px!important} html body #panel#panel[data-route=daily] .dy-foot{margin-top:6px}html body #panel#panel[data-route=daily] .dy-foot>button{min-height:40px!important}} html body #panel#panel[data-route=daily] .dy-main{display:flex;flex-direction:column} html body #panel#panel[data-route=daily] .dy-l{display:contents} html body #panel#panel[data-route=daily] .dy-mods{order:1}html body #panel#panel[data-route=daily] .dy-rew{order:2}html body #panel#panel[data-route=daily] .dy-foot{order:3;margin-top:0} @media (min-width:700px),(orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=daily] .dy-main{display:grid;grid-template-columns:1fr 1fr}html body #panel#panel[data-route=daily] .dy-l{display:flex;flex-direction:column;gap:8px}} @media (orientation:portrait) and (max-height:700px){html body #panel#panel[data-route=daily] .dy-mod small,html body #panel#panel[data-route=daily] .dy-best,html body #panel#panel[data-route=daily] .h-head small{display:none}html body #panel#panel[data-route=daily] .dy-mod{padding:3px 8px;grid-template-columns:24px 1fr}html body #panel#panel[data-route=daily] .dy-mod .dy-ic{width:22px;height:22px}html body #panel#panel[data-route=daily] .dy-tier{padding:2px 8px}html body #panel#panel[data-route=daily] .dy-main>section,html body #panel#panel[data-route=daily] .dy-l>section{gap:4px;padding:6px 10px!important}html body #panel#panel[data-route=daily] .dy-main{gap:6px}} /* v077 (005): helper viewer */ #hview{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:16px;background:#1b1257ee;border:2px solid #6d5cff;box-shadow:0 6px 20px #0008;color:#fff;max-width:calc(100vw - 24px);user-select:none} #hview .hv-row{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap} #hview button{font:inherit;font-size:13px;color:#fff;background:#2a1f7a;border:2px solid #6d5cff;border-radius:10px;padding:6px 10px;min-height:36px;cursor:pointer} #hview button.on{background:#ffc83d;color:#3a1c00;border-color:#ffe45c} #hview .hv-name{display:flex;flex-direction:column;align-items:center;min-width:180px;text-align:center} #hview .hv-name b{font-family:'Russo One',sans-serif;font-weight:400;font-size:16px}#hview .hv-name small{font-size:11px;color:#cfc6ff;max-width:70vw} body.hv-on #bossbar,body.hv-on #hud .objv,body.hv-on #hud .rtip,body.hv-on #hud .boss-next,body.hv-on #hud [class*="bossin"],body.hv-on #skillbar{display:none!important} html body.hv-on #hud #bossbar{display:none!important;visibility:hidden!important} html body #hview{z-index:9999} @media (max-width:600px){html body #hview{width:calc(100vw - 24px);box-sizing:border-box;padding:6px}#hview .hv-row:first-child{flex-wrap:nowrap}#hview .hv-name{min-width:0;flex:1}#hview .hv-name small{max-width:none}#hview button{padding:4px 7px;font-size:12px;min-height:32px}} html:has(body.hv-on),body.hv-on{overflow:hidden!important;max-width:100vw;max-height:100vh;overscroll-behavior:none} body.hv-on #c{position:fixed!important;left:0;top:0} /* v077: «Получено» on a short landscape phone — the card ran under the bottom bar with its «В рюкзак» button off screen */ @media (orientation:landscape) and (max-height:560px){ html body #panel#panel .m-card.got{z-index:200!important;width:min(640px,92vw)!important;max-height:calc(100dvh - 16px)!important;grid-template-columns:auto minmax(0,1fr);align-items:start;justify-items:stretch;text-align:left;gap:6px 14px;padding:10px 14px!important} html body #panel#panel .m-card.got>b{grid-column:1/-1;margin:0!important;text-align:center} html body #panel#panel .m-card.got>.it-dh{grid-column:1;grid-row:2/span 2;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:150px} html body #panel#panel .m-card.got>.it-dh .it{width:84px!important;height:84px!important} html body #panel#panel .m-card.got>:not(b):not(.it-dh){grid-column:2} html body #panel#panel .m-card.got .it-props{margin:0!important;max-height:calc(100dvh - 140px);overflow:auto} html body #panel#panel .m-card.got button{grid-column:2;margin:4px 0 0!important;min-height:38px!important}} /* v077: the «Получено» card looks like a reward */ html body #panel#panel .m-card.got{--gc:#8cf05a;background:radial-gradient(120% 70% at 50% 28%,color-mix(in srgb,var(--gc) 26%,#2a1f7a),#1b1257 70%)!important;border:2px solid var(--gc)!important;box-shadow:0 0 0 4px #0b063088,0 0 40px color-mix(in srgb,var(--gc) 45%,transparent),0 12px 30px #000a!important} html body #panel#panel .m-card.got.gt-r0{--gc:#b8c2d6}html body #panel#panel .m-card.got.gt-r1{--gc:#7ff07a}html body #panel#panel .m-card.got.gt-r2{--gc:#5ec8ff}html body #panel#panel .m-card.got.gt-r3{--gc:#c47bff}html body #panel#panel .m-card.got.gt-r4{--gc:#ffc83d} html body #panel#panel .m-card.got>b{font-family:'Russo One',sans-serif;font-weight:400;font-size:24px!important;color:#ffe45c!important;text-shadow:0 3px 0 #0b0630,0 0 18px #ffe45c66;letter-spacing:.5px} html body #panel#panel .m-card.got .it-dh>.it{position:relative;width:120px!important;height:120px!important;border:3px solid var(--gc)!important;box-shadow:0 0 0 3px #0b0630,0 0 30px var(--gc)!important;animation:gtGlow 1.8s ease-in-out infinite} html body #panel#panel .m-card.got .it-dh>.it img{filter:drop-shadow(0 6px 8px #0009)} @keyframes gtGlow{0%,100%{box-shadow:0 0 0 3px #0b0630,0 0 22px var(--gc)}50%{box-shadow:0 0 0 3px #0b0630,0 0 42px var(--gc)}} html body #panel#panel .m-card.got .it-dh b{font-family:'Russo One',sans-serif;font-weight:400;font-size:19px!important} html body #panel#panel .m-card.got .it-props{width:100%;border-radius:12px;overflow:hidden;background:#0b063066} html body #panel#panel .m-card.got .it-props li b{color:#7ff07a} html body #panel#panel .m-card.got .gt-acts{display:flex;gap:10px;width:100%;margin-top:4px} html body #panel#panel .m-card.got .gt-acts>button{flex:1 1 0;min-height:48px!important;margin:0!important;font-size:16px!important} html body #panel#panel .m-card.got .gt-wear{flex:1.4 1 0!important;font-family:'Russo One',sans-serif} html body #panel#panel .m-card.got .gt-bag{background:#2a1f7a!important;border:2px solid #6d5cff!important;color:#fff!important;box-shadow:0 4px 0 #0b0630!important} html body #panel#panel .m-card.got .gt-bag::after{content:""!important} html body #panel#panel .m-card.got::after{opacity:.6} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel .m-card.got{grid-template-columns:200px minmax(0,1fr)!important;align-items:center!important;padding:12px 16px!important;width:min(680px,92vw)!important} html body #panel#panel .m-card.got>.it-dh{grid-row:1/span 3!important;max-width:200px!important;text-align:center} html body #panel#panel .m-card.got>b{grid-column:2!important;text-align:left!important;font-size:21px!important} html body #panel#panel .m-card.got .it-dh>.it{width:110px!important;height:110px!important} html body #panel#panel .m-card.got .it-dh b{font-size:16px!important} html body #panel#panel .m-card.got .gt-acts{grid-column:2!important} html body #panel#panel .m-card.got .gt-acts>button{min-height:42px!important;grid-column:auto!important}} /* v078: the daily card has its own row on the wide home grid (it landed over the mastery / patrol pair) */ html.wide body #panel#panel[data-route=home] .m-body>.dy-card{grid-column:2!important;grid-row:8!important;margin:0!important;align-self:center} /* v078: shop main — gift, then the two chests, then the showcase right on the screen, then the tiles */ html body #panel#panel[data-route=shop] .m-body.sh-main>.xp-gift{order:1} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop{order:2} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show{order:3;margin:0!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-tiles{order:4} html body #panel#panel[data-route=shop] .m-body.sh-main>.m-title{order:0} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .sh-h{margin:0 0 6px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .m-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} /* v078: shop main fits — chests as one-line cards (chest · name · button), compact showcase cards */ html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop{grid-template-columns:52px minmax(0,1fr) auto!important;grid-template-rows:auto auto;padding:6px 10px!important;gap:0 10px!important;justify-items:start!important;text-align:left!important;align-items:center!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop::before{width:52px!important;height:52px!important;grid-row:1/span 2!important;grid-column:1!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop h3{grid-column:2!important;grid-row:1!important;font-size:13px!important;align-self:end} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity{display:none!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .sh-det{grid-column:2!important;grid-row:2!important;justify-self:start;align-self:start;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font-size:12px!important;width:auto!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions{grid-column:3!important;grid-row:1/span 2!important;width:auto!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions button{min-height:38px!important;padding:4px 12px!important;font-size:13px!important;white-space:nowrap} @media (max-width:699px){html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop{grid-column:1/-1!important}} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props{display:none!important} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .sh-h{display:none!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.m-title{display:none!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main{gap:6px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.xp-gift{padding:2px 10px!important;min-height:0!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.xp-gift>b{font-size:14px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.case-shop{padding:3px 8px!important;grid-template-columns:40px minmax(0,1fr) auto!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.case-shop::before{width:40px!important;height:40px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.case-shop h3{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.case-shop .sh-det{font-size:11px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.case-shop .case-actions button{min-height:32px!important;font-size:12px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.sh-show .s-offer{padding:3px 6px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it{width:34px!important;height:34px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it u{display:none} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh b{font-size:11px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.sh-show .s-offer [data-action=buy]{min-height:28px!important;font-size:12px!important} html body #panel#panel.menu[data-route=shop] .m-body.sh-main>.sh-tiles .sh-tile{min-height:38px!important;padding:2px 8px!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;text-align:left;padding:3px 6px!important;gap:4px 8px;margin:0!important;min-width:0} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh{display:flex!important;flex-direction:row;grid-column:1/3;gap:8px;align-items:center;text-align:left;margin:0!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it{width:34px!important;height:34px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it u,html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh small,html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer [data-action=buy] span{display:none} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh b{font-size:11px!important;line-height:1.15} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer [data-action=buy]{grid-column:3;width:auto;min-height:28px!important;padding:2px 8px!important;font-size:12px!important;margin:0!important}} /* v078: the old «reward for an ad» list and its «ads are off here» note never show on the shop's main screen (CrazyGames build has no ads) */ html body #panel#panel[data-route=shop] .m-body>.m-list,html body #panel#panel[data-route=shop] .m-body>p.m-note.c{display:none!important} @media (orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer>:not(.it-dh):not(button):not(.it-props){display:none!important}} /* v079: shop main — the chests show how many openings are left to the guaranteed epic; PC showcase cards list their stats; short landscape = two columns: gift / chests / tiles on the left, the showcase as three rich rows on the right */ html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity{display:flex!important;grid-column:2!important;grid-row:2!important;gap:3px;align-items:center;flex-wrap:nowrap;margin:2px 0 0} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity i{width:12px!important;height:6px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity span{display:inline!important;font-size:11px!important;white-space:nowrap;margin-left:4px} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop{grid-template-rows:auto auto auto!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop::before{grid-row:1/span 3!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-actions{grid-row:1/span 3!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .sh-det{grid-row:3!important} @media (max-width:699px){html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .sh-det{display:none!important}} @media (min-width:900px){html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props{display:block!important;width:100%;margin:2px 0!important;font-size:12px} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li:nth-child(n+4){display:none} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li{padding:2px 8px!important;min-height:0!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=shop] .m-body.sh-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-auto-rows:auto;align-content:start} html body #panel#panel[data-route=shop] .m-body.sh-main>.xp-gift{grid-column:1!important;grid-row:1!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop:nth-of-type(n){grid-column:1!important} html body #panel#panel[data-route=shop] .m-body.sh-main>[data-sv~="case0"]{grid-row:2!important} html body #panel#panel[data-route=shop] .m-body.sh-main>[data-sv~="case1"]{grid-row:3!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-tiles{grid-column:1!important;grid-row:4!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-tiles .sh-tile{grid-template-columns:24px 1fr;min-height:34px!important;padding:2px 6px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-tiles .sh-tile img{width:24px;height:24px} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-tiles .sh-tile b{font-size:12px} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-tiles .sh-tile small{display:none} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show{grid-column:2!important;grid-row:1/span 4!important;align-self:start} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .sh-h{display:none!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .m-list{grid-template-columns:1fr!important;gap:6px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer{grid-template-columns:48px minmax(0,1fr) auto!important;grid-template-rows:auto auto;padding:4px 8px!important;gap:0 8px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh{display:contents!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it{grid-column:1;grid-row:1/span 2;width:46px!important;height:46px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh>div{grid-column:2;grid-row:1;display:flex;gap:6px;align-items:baseline;min-width:0} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh>div b{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh small{display:inline!important;font-size:10px!important;white-space:nowrap} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh small span{display:none} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props{display:flex!important;grid-column:2;grid-row:2;gap:8px;margin:0!important;background:none!important;font-size:11px;overflow:hidden} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li{display:flex;gap:3px;padding:0!important;background:none!important;white-space:nowrap;min-height:0!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li:nth-child(n+3){display:none} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer [data-action=buy]{grid-column:3!important;grid-row:1/span 2!important;min-height:34px!important}} html body #panel#panel[data-route=shop] .case-pity .pity-n{display:none;font-style:normal;font-size:11px;color:#d9c1ff;margin-left:4px;white-space:nowrap} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity span{display:none!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity .pity-n{display:inline} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh>div{text-align:left!important;justify-content:flex-start!important;align-items:center!important;flex-wrap:nowrap} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh>div b{text-align:left!important;flex:0 1 auto} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li span{color:#cfc6ff} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li b{color:#7ff07a}} @media (max-width:699px){html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity span{font-size:10px!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:10px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li{display:flex!important;flex-direction:row!important;gap:4px!important;white-space:nowrap!important;flex:0 0 auto} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li:nth-child(n+3){display:none!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh>div b{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:150px;font-size:13px!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh>div{display:flex!important;flex-direction:row!important}} @media (min-width:900px){html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li:nth-child(n+4){display:none!important}} @media (max-width:699px){html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity span{display:none!important}html body #panel#panel[data-route=shop] .m-body.sh-main>.case-shop .case-pity .pity-n{display:inline}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li{display:block!important;grid-template-columns:none!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li>span,html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-props li>b{display:inline!important;width:auto!important;margin:0 3px 0 0!important}} @media (min-width:900px){html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer{align-content:start!important;justify-content:start!important;gap:4px!important;padding:8px 10px!important;min-height:0!important;height:auto!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .m-list{align-items:start!important} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer .it-dh{margin:0!important}} html body #panel#panel[data-route=shop] .m-body.sh-main>.sh-show .s-offer>:not(.it-dh):not(button):not(.it-props){display:none!important} /* v079 development (feedback5): points as a pill beside the title, full-width tabs, compact rows — two columns on PC and short landscape, the hint card at the bottom; the «можно улучшить» card is gone (it repeated the «+1» of the same row) */ html body #panel#panel[data-route=dev] .m-body{position:relative} html body #panel#panel[data-route=dev] .m-body>.xp-rec{display:none!important} html body #panel#panel[data-route=dev] .m-body>.d-pts{position:absolute!important;top:6px;right:10px;margin:0!important;padding:4px 12px!important;min-height:0!important;width:auto!important;display:flex!important;align-items:center;gap:8px;border-radius:999px;z-index:2} html body #panel#panel[data-route=dev] .m-body>.d-pts small{display:none!important} html body #panel#panel[data-route=dev] .m-body>.d-pts span{font-size:13px!important} html body #panel#panel[data-route=dev] .m-body>.d-pts b{font-size:20px!important;line-height:1;color:#ffe45c} html body #panel#panel[data-route=dev] .m-body>.m-title{margin-bottom:6px!important} html body #panel#panel[data-route=dev] .m-body>.m-tabs{width:100%!important;margin:0 0 8px!important;grid-column:1/-1} html body #panel#panel[data-route=dev] .m-body>.m-list{display:grid!important;grid-template-columns:1fr;gap:8px;margin:0 0 8px!important} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row{margin:0!important;min-height:0!important;padding:8px 10px!important} html body #panel#panel[data-route=dev] .m-body>.m-note{margin:0!important;padding:10px 12px;border-radius:14px;background:#0b063066;text-align:left!important} @media (min-width:900px),(orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=dev] .m-body>.m-list{grid-template-columns:1fr 1fr}} html.wide body #panel#panel[data-route=dev] .m-body{display:block!important} html.wide body #panel#panel[data-route=dev] .m-body>*{grid-column:auto!important;grid-row:auto!important} @media (orientation:landscape) and (max-height:560px){html body #panel#panel.menu[data-route=dev] .m-body>.m-title{font-size:22px!important;margin:0 0 4px!important}html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row{padding:4px 8px!important}html body #panel#panel[data-route=dev] .m-body>.m-tabs button{min-height:34px!important}} /* v079 workshop (feedback5): «Звёзды» without the backpack on screen; «Сменить ›» opens it */ html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-inv{display:none!important} html body #panel#panel[data-route=workshop] .xp-card.sel{position:relative} html body #panel#panel[data-route=workshop] .ws-change{position:absolute;top:8px;right:8px;width:auto!important;min-height:30px!important;padding:4px 12px!important;margin:0!important;font-size:13px!important;background:#2a1f7a!important;border:2px solid #6d5cff!important;color:#fff!important;box-shadow:0 3px 0 #0b0630!important} html body #panel#panel[data-route=workshop] .ws-change::after,html body #panel#panel[data-route=workshop] .ws-back::after{content:""!important} html body #panel#panel[data-route=workshop] .ws-back{width:auto!important;min-height:34px!important;padding:4px 14px!important;margin:0 0 8px!important;background:#2a1f7a!important;border:2px solid #6d5cff!important;color:#fff!important} html body #panel#panel[data-route=workshop]:not([data-wspick]) .ws-back{display:none!important} /* phone / narrow: the mock-up order — item, stats, odds, «Улучшить», free / ad row, the price note last */ html body #panel#panel[data-route=workshop] .m-body:not(:has(>.hx-left)){display:flex!important;flex-direction:column;gap:8px} html body #panel#panel[data-route=workshop] .m-body>*{margin-top:0!important;margin-bottom:0!important} html body #panel#panel[data-route=workshop] .m-body>.h-head{order:0}html body #panel#panel[data-route=workshop] .m-body>.m-tabs{order:1} html body #panel#panel[data-route=workshop] .m-body>.xp-card.sel{order:2}html body #panel#panel[data-route=workshop] .m-body>.xp-card.col:not(.xp-odds){order:3} html body #panel#panel[data-route=workshop] .m-body>.xp-odds{order:4}html body #panel#panel[data-route=workshop] .m-body>.m-play,html body #panel#panel[data-route=workshop] .m-body>.m-yellow{order:5} html body #panel#panel[data-route=workshop] .m-body>.mn-ws{order:6}html body #panel#panel[data-route=workshop] .m-body>.m-note{order:7} html body #panel#panel[data-route=workshop] .m-body>.m-inv{order:8}html body #panel#panel[data-route=workshop] .m-body>.tm-row{order:9} html body #panel#panel[data-route=workshop][data-wspick] .m-body:not(:has(>.hx-left))>:not(.m-inv){display:none!important} /* PC: the left half is one column of the item, the right half the stats and the buttons; with the backpack open it shows on the right as before */ html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body>.hx-right{display:none!important} html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body:has(>.hx-left){grid-template-columns:1fr!important} html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body>.hx-left{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;gap:8px 16px;align-content:start;grid-column:1/-1!important} html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body>.hx-left>*{grid-column:2;margin:0!important} html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body>.hx-left>:is(.h-head,.m-tabs){grid-column:1/-1} html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body>.hx-left>.xp-card.sel{grid-column:1;grid-row:span 6;align-self:start} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.h-head{order:0}html body #panel#panel[data-route=workshop] .m-body>.hx-left>.m-tabs{order:1} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-card.sel{order:2}html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-card.col:not(.xp-odds){order:3} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-odds{order:4}html body #panel#panel[data-route=workshop] .m-body>.hx-left>:is(.m-play,.m-yellow){order:5} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.mn-ws{order:6}html body #panel#panel[data-route=workshop] .m-body>.hx-left>.m-note{order:7}html body #panel#panel[data-route=workshop] .m-body>.hx-left>.tm-row{order:9} html body #panel#panel[data-route=workshop][data-wstab=star] .xp-card.sel{padding-right:104px!important} html body #panel#panel[data-route=workshop] .xp-card.sel b{white-space:normal!important;overflow:visible!important} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=workshop]:not([data-wspick]) .m-body:not(:has(>.hx-left)){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;align-content:start} html body #panel#panel[data-route=workshop]:not([data-wspick]) .m-body:not(:has(>.hx-left))>*{grid-column:2} html body #panel#panel[data-route=workshop]:not([data-wspick]) .m-body:not(:has(>.hx-left))>.m-tabs{grid-column:1/-1} html body #panel#panel[data-route=workshop]:not([data-wspick]) .m-body:not(:has(>.hx-left))>.xp-card.sel{grid-column:1;grid-row:span 6;align-self:start} html body #panel#panel[data-route=workshop] .m-body>.h-head{display:none!important} html body #panel#panel[data-route=workshop] .m-body>.m-tabs button{min-height:32px!important} html body #panel#panel[data-route=workshop] .m-body .xp-props li{padding:2px 10px!important;min-height:0!important} html body #panel#panel[data-route=workshop] .m-body>.xp-odds{padding:2px 10px!important} html body #panel#panel[data-route=workshop] .m-body>:is(.m-play,.m-yellow){min-height:38px!important;padding:4px!important} html body #panel#panel[data-route=workshop] .m-body>.mn-ws button,html body #panel#panel[data-route=workshop] .m-body>.mn-ws .mn-used{min-height:34px!important;padding:2px 6px!important} html body #panel#panel[data-route=workshop] .m-body>.m-note{display:none!important} html body #panel#panel[data-route=dev] .m-body>.m-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row{padding:4px 6px!important;gap:6px!important} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row .m-tile{width:34px!important;height:34px!important;min-width:34px!important} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row small,html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row div>span:not(:first-child){font-size:11px!important} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row .m-go{min-height:36px!important;min-width:44px!important;padding:2px 6px!important} html body #panel#panel[data-route=dev] .m-body>.m-note{display:none!important} html body #panel#panel[data-route=dev] .m-body>.d-pts{top:0}} @media (orientation:portrait) and (max-height:900px){html body #panel#panel[data-route=dev] .m-body>.m-list{gap:6px}html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row{padding:6px 10px!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=workshop] .m-body>.hx-left>.h-head{display:none!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left{gap:5px 12px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.m-tabs button{min-height:32px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left .xp-props li{padding:1px 10px!important;min-height:0!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-card.col{padding:4px 8px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-odds{padding:2px 10px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>:is(.m-play,.m-yellow){min-height:38px!important;padding:4px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.mn-ws button,html body #panel#panel[data-route=workshop] .m-body>.hx-left>.mn-ws .mn-used{min-height:34px!important;padding:2px 6px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.m-note,html body #panel#panel[data-route=workshop] .m-body>.hx-left>.tm-row{display:none!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-card.sel .xp-big{width:64px!important;height:64px!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body>.hx-left>.xp-card.sel{grid-row:auto!important} html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body>.hx-left>:is(.xp-odds,.mn-ws){grid-column:1!important} html body #panel#panel[data-route=workshop][data-wstab=star]:not([data-wspick]) .m-body>.hx-left{grid-auto-flow:row dense!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-card.sel{padding:6px 92px 6px 8px!important;min-height:0!important;gap:8px!important;align-items:center} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-card.sel .xp-big{width:52px!important;height:52px!important;min-width:52px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-card.sel b{font-size:14px!important;line-height:1.15} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-card.sel .xp-stars{font-size:16px!important;margin:2px 0 0!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left .ws-change{top:6px;right:6px;min-height:26px!important;padding:2px 8px!important;font-size:12px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>*{align-self:start}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=workshop] .m-body>.hx-left>.m-tabs{padding:3px!important;min-height:0!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.m-tabs button{min-height:28px!important;padding:2px 8px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-odds{padding:0 10px!important;min-height:0!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-odds>div{padding:4px 0!important;min-height:0!important}} @media (orientation:landscape) and (max-height:560px){ html body #panel#panel[data-route=workshop] .m-body>.hx-left .xp-props li{padding:0 10px!important;font-size:12px!important;line-height:1.5} html body #panel#panel[data-route=workshop] .m-body>.hx-left>.mn-ws button,html body #panel#panel[data-route=workshop] .m-body>.hx-left>.mn-ws .mn-used{min-height:30px!important;padding:1px 6px!important} html body #panel#panel[data-route=workshop] .m-body>.hx-left{gap:4px 12px!important}} @media (orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=workshop] .m-body>.hx-left{overflow:visible!important}html body #panel#panel[data-route=workshop] .m-body>.hx-left>.xp-odds *{padding-top:0!important;padding-bottom:0!important;min-height:0!important}} /* v079: skills list on a phone — the «not learnt» line is hidden and the «next» text stays on two lines */ @media (max-width:699px){html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row div>small{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px!important;line-height:1.25} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row{padding:5px 8px!important} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row .m-go{min-height:40px!important} html body #panel#panel[data-route=dev] .m-body>.m-note{display:none!important}} @media (max-width:699px){html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row div>em{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px!important;line-height:1.25;font-style:normal} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row div>em br{display:none} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row .m-tile{width:40px!important;height:40px!important;min-width:40px!important} html body #panel#panel[data-route=dev] .m-body>.m-list>.d-row .m-go{min-height:38px!important;min-width:48px!important;font-size:16px!important} html body #panel#panel[data-route=dev] .m-body>.m-list{gap:6px!important}} /* v079 (021): the reward card sits above everything — the bottom bar no longer shows through it, the rest of the screen dims; both buttons are one system (same height, font and corners: «Надеть» filled, «В рюкзак» outlined); the card always fits */ html body #panel#panel .m-card.got{z-index:400!important;box-shadow:0 0 0 100vmax #05021acc,0 0 40px color-mix(in srgb,var(--gc) 45%,transparent),0 12px 30px #000a!important;max-height:calc(100dvh - 24px)!important;overflow:auto;padding:16px 18px 12px!important;gap:10px!important} html body #panel#panel .m-card.got .gt-acts{gap:10px!important;margin-top:2px} html body #panel#panel .m-card.got .gt-acts>button{flex:1 1 0!important;min-height:48px!important;border-radius:14px!important;font-family:'Russo One',sans-serif!important;font-weight:400!important;font-size:16px!important;letter-spacing:.3px;text-transform:uppercase;margin:0!important;padding:6px 10px!important} html body #panel#panel .m-card.got .gt-bag{background:transparent!important;border:2px solid #ffe45c!important;color:#ffe45c!important;box-shadow:0 4px 0 #0b0630!important} html body #panel#panel .m-card.got::after{content:"Нажми вне кнопок, чтобы закрыть"!important;font-size:11px!important;opacity:.65!important;margin-top:-2px} @media (orientation:landscape) and (max-height:560px){html body #panel#panel .m-card.got .gt-acts>button{min-height:40px!important;font-size:14px!important}html body #panel#panel .m-card.got::after{grid-column:2}} /* v079 (022): «Сменить ›» was a small text button with an unclear meaning — now «Другая вещь» with the backpack icon, a real button */ html body #panel#panel[data-route=workshop] .ws-change{display:inline-flex!important;align-items:center;gap:6px;min-height:34px!important;padding:4px 12px 4px 8px!important;border-radius:12px!important;font-size:13px!important;font-weight:700} html body #panel#panel[data-route=workshop] .ws-change img{width:22px;height:22px;object-fit:contain} @media (orientation:landscape) and (max-height:560px){html body #panel#panel[data-route=workshop] .ws-change{min-height:28px!important;padding:2px 8px 2px 6px!important;font-size:12px!important}html body #panel#panel[data-route=workshop] .ws-change img{width:18px;height:18px}} /* v079 (023): the camp loading curtain — same look as the fight loader, above it, shown at once */ #campLoading.ll{position:fixed!important;inset:0!important;z-index:95!important;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#2a1b8c,#0b0630 70%)!important;color:#fff;font-family:Nunito,system-ui,sans-serif;width:100vw;height:100dvh} /* v079 (021): while the reward card is open the bottom bar fades back and cannot be pressed; the card fits above it */ html body:has(#panel .m-card.got) .m-nav{filter:brightness(.3) saturate(.5);pointer-events:none!important} html body:has(#panel .m-card.got) .m-nav *{pointer-events:none!important} html body #panel#panel .m-card.got{top:calc((100dvh - 64px)/2)!important;max-height:calc(100dvh - 88px)!important} @media (orientation:landscape) and (max-height:560px){html body #panel#panel .m-card.got{top:calc((100dvh - 60px)/2)!important;max-height:calc(100dvh - 72px)!important;padding:8px 14px!important;gap:4px 14px!important} html body #panel#panel .m-card.got .it-props li{padding:2px 10px!important;min-height:0!important} html body #panel#panel .m-card.got>b{font-size:19px!important}html body #panel#panel .m-card.got .it-dh>.it{width:88px!important;height:88px!important}} /* v079 (022): on a narrow screen «Другая вещь» goes under the item name instead of over it */ @media (max-width:699px){html body #panel#panel[data-route=workshop][data-wstab=star] .xp-card.sel{padding-right:12px!important;flex-wrap:wrap} html body #panel#panel[data-route=workshop] .ws-change{position:static!important;margin:6px 0 0!important;order:9}} /* v079 (030): the small result buttons (Статистика · Герой · В штаб) — text always inside the button */ html body #panel#panel .p-row>button{min-width:0!important;padding:4px 4px!important;font-size:clamp(11px,3.05vw,15px)!important;letter-spacing:0!important;white-space:nowrap;gap:4px!important;overflow:hidden} html body #panel#panel .p-row>button img,html body #panel#panel .p-row>button svg{width:18px!important;height:18px!important;flex:none} @media (max-width:380px){html body #panel#panel .p-row>button img,html body #panel#panel .p-row>button svg{display:none!important}} /* v079 (032): the phone home fits without scrolling (scrolled, the round buttons slid under the profile bar) — a compact endless card, a shorter title and «ЕЩЁ», the island a little smaller on short screens */ @media (orientation:portrait) and (max-width:699px){ html body #panel#panel[data-route=home] .m-body>.xp-endless{min-height:0!important;padding:8px 12px!important;gap:10px!important} html body #panel#panel[data-route=home] .m-body>.xp-endless>b{width:44px!important;height:44px!important;font-size:24px!important;flex:none} html body #panel#panel[data-route=home] .m-body>.xp-endless span b{font-size:18px!important} html body #panel#panel[data-route=home] .m-body>.xp-endless span small{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} html body #panel#panel[data-route=home] .m-body>.extra-links{min-height:0!important;padding:2px 0!important;margin:0!important} html body #panel#panel[data-route=home] .m-body>.h-head{margin-bottom:0!important} html body #panel#panel[data-route=home] .m-body{row-gap:8px!important}} @media (orientation:portrait) and (max-width:699px) and (max-height:760px){ html body #panel#panel[data-route=home] .m-body>.m-hero{height:170px!important;min-height:0!important} html body #panel#panel[data-route=home] .m-body>.h-head small{display:none} html body #panel#panel[data-route=home] .m-body>.m-play{min-height:50px!important}} @media (orientation:portrait) and (max-width:699px){html body #panel#panel[data-route=home] .m-body>.extra-links>*{min-height:30px!important;padding:2px 10px!important;margin:0!important}html body #panel#panel[data-route=home] .m-body>.extra-links{height:auto!important}} @media (orientation:portrait) and (max-width:699px) and (max-height:760px){html body #panel#panel[data-route=home] .ib-wrap{zoom:.74}} /* v079 (033): on a phone the passives are a thin column of small icons beside the skills (portrait) or a small row in the bottom-left corner (landscape) — they no longer cover the hero's HP; a tap still opens the list */ html[data-dev=phone-port] #hud #buffPanel{position:fixed!important;right:48px!important;left:auto!important;top:calc(50% - 52px)!important;margin:0!important;z-index:4} html[data-dev=phone-port] #hud #buffPanel>summary{flex-direction:column!important;flex-wrap:nowrap!important;max-width:none!important;gap:3px!important} html[data-dev=phone-land] #hud #buffPanel{position:fixed!important;left:8px!important;right:auto!important;top:auto!important;bottom:8px!important;margin:0!important;z-index:4} html[data-dev=phone-land] #hud #buffPanel>summary{flex-wrap:nowrap!important;max-width:none!important;gap:3px!important} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #buffPanel .pv{width:20px!important;height:20px!important;border-radius:6px!important;border-width:1px!important;background:#0b063099!important} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #buffPanel .pv img{width:15px!important;height:15px!important} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #buffPanel .pv b{min-width:10px!important;height:10px!important;font-size:7px!important;line-height:10px!important;right:-3px!important;bottom:-3px!important;padding:0 2px!important} html[data-dev=phone-port] #hud #buffPanel[open]>p{position:absolute;right:26px;top:0;width:200px} /* v079 (029): boss down */ .bw{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden} .bw-flash{position:absolute;inset:0;background:radial-gradient(circle at var(--bx) var(--by),#fff 0,#fff6c0cc 18%,#ffe45c33 45%,transparent 70%);animation:bwFlash .55s ease-out forwards} @keyframes bwFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}} .bw-ring{position:absolute;left:var(--bx);top:var(--by);width:40px;height:26px;margin:-13px 0 0 -20px;border-radius:50%;border:6px solid #ffe45c;box-shadow:0 0 24px #ffb02e,inset 0 0 18px #ffe45c;animation:bwRing .9s cubic-bezier(.15,.7,.3,1) forwards} .bw-ring.r2{border-color:#fff;border-width:3px;animation-delay:.12s;opacity:0} @keyframes bwRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(14);opacity:0}} .bw-spark{position:absolute;left:var(--bx);top:var(--by);width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff3a0;box-shadow:0 0 10px #ffb02e,0 0 4px #fff;animation:bwSpark .8s ease-out forwards} @keyframes bwSpark{0%{transform:translate(0,0) scale(1.3);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}} .bw-stamp{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);text-align:center;animation:bwStamp 1.6s cubic-bezier(.2,1.6,.4,1) forwards;white-space:nowrap} .bw-stamp b{display:block;font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(28px,8vw,56px);color:#ffe45c;letter-spacing:1px;text-shadow:0 4px 0 #6b2a00,0 0 24px #ffb02e,0 0 2px #000} .bw-stamp small{display:block;font-family:'Russo One',sans-serif;font-size:clamp(14px,3.6vw,22px);color:#fff;text-shadow:0 2px 0 #0b0630;margin-top:2px} @keyframes bwStamp{0%{transform:translate(-50%,-50%) scale(2.6) rotate(-6deg);opacity:0}14%{transform:translate(-50%,-50%) scale(.92) rotate(-2deg);opacity:1}22%{transform:translate(-50%,-50%) scale(1.04) rotate(-2deg)}80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-60%) scale(.96) rotate(-2deg)}} .bw-light .bw-ring{border-width:4px} .bw-troph{position:fixed;width:44px;height:44px;z-index:71;pointer-events:none;filter:drop-shadow(0 0 10px #ffb02e)} body:has(.bw:not(.bw-light)) #hud .rtip{opacity:0!important;transition:none} /* v079 (034): a cleaner phone fight HUD — timer kept, district name and wave hidden; the boss card is one thin line; map button and the current goal share one row; captions smaller; skill tiles a little smaller. Nothing is removed for good: the map button opens the map, the goal chip still lists the goals, a tap on passives lists them. */ html[data-dev=phone-port] #hud #stageLabel,html[data-dev=phone-port] #hud #wave,html[data-dev=phone-land] #hud #stageLabel,html[data-dev=phone-land] #hud #wave{display:none!important} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #bossbar{display:grid!important;grid-template-columns:26px auto;grid-template-rows:auto 5px;column-gap:6px;align-items:center;width:auto!important;min-width:0!important;max-width:150px;height:auto!important;padding:3px 8px 4px 4px!important;border-radius:12px!important;background:#0b0630b0!important;border:1px solid #8a6bff66!important;box-shadow:none!important} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #bossbar .bb-face{grid-row:1/span 2;width:26px!important;height:26px!important;position:static!important;margin:0!important;border-width:1px!important} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #bossLabel{display:flex!important;gap:4px;align-items:baseline;white-space:nowrap;line-height:1} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #bossLabel small{font-size:9px!important;margin:0!important} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #bossLabel b{font-size:13px!important;margin:0!important} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #bossbar .bar{grid-column:2;height:4px!important;margin:0!important;width:auto!important;min-width:70px} html[data-dev=phone-port] #hud .minimap{top:160px!important} html[data-dev=phone-port] #hud .objv{top:168px!important;left:62px!important;max-width:calc(100vw - 120px)} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud .rtip{font-size:12px!important;max-width:min(70vw,300px)!important;padding:5px 10px!important;line-height:1.25} html:is([data-dev=phone-port],[data-dev=phone-land]) #hud #skillbar .skill{transform:scale(.88);transform-origin:right center;margin:-2px 0!important} /* v079: on short phones (the portal's top bar and the system bars leave little height) the skill column grew up into the kill counter — it now wraps into a second column to the left instead of climbing */ @media (max-height:640px){html[data-dev=phone-port] #hud #skillbar{flex-wrap:wrap-reverse!important;max-height:calc(100% - 300px)!important;align-content:flex-start;column-gap:6px}html[data-dev=phone-port] #hud .rtip{max-width:calc(100vw - 170px)!important}} /* v079: the fight statistics window sits over the whole screen and scrolls inside itself (it was cut off inside the result card) */ body>#hsCard{position:fixed!important;inset:0!important;z-index:450!important;display:flex!important;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:#02041099} body>#hsCard .mc{position:relative!important;max-height:100%!important;overflow-y:auto!important;width:min(460px,100%)!important;margin:0!important;overscroll-behavior:contain;touch-action:pan-y} body>#hsCard .mc .mc-x{position:sticky!important;top:0;float:right;z-index:2}