/* 0.5.2 additions in their own sheet (camp layout and texts live in style.css): forced run orientation, camp badges, «Забрать всё». */

/* Forced orientation (src/orientation.js). html[data-rotate] is set only while the arena is shown and the window has the other
   orientation; the page box takes the swapped size and turns 90°. --rot-w = box width (window height), --rot-h = box height. */
html{--phys-safe-top:var(--safe-top);--phys-safe-right:var(--safe-right);--phys-safe-bottom:var(--safe-bottom);--phys-safe-left:var(--safe-left);--phys-tg-top:var(--tg-safe-area-inset-top,0px);--phys-tg-right:var(--tg-safe-area-inset-right,0px);--phys-tg-bottom:var(--tg-safe-area-inset-bottom,0px);--phys-tg-left:var(--tg-safe-area-inset-left,0px)}
html[data-rotate]{overflow:hidden;width:100%;height:100%;background:#141320;overscroll-behavior:none}
html[data-rotate] body{position:fixed;left:0;top:0;width:var(--rot-w);height:var(--rot-h);margin:0;overflow:hidden;transform-origin:0 0;box-sizing:border-box}
/* cw: the box's top edge lies along the window's right edge (phone turned counter-clockwise to read it). */
html[data-rotate="cw"] body{transform:translate(var(--rot-h),0) rotate(90deg);--safe-top:var(--phys-safe-right);--safe-right:var(--phys-safe-bottom);--safe-bottom:var(--phys-safe-left);--safe-left:var(--phys-safe-top)}
/* ccw: the box's top edge lies along the window's left edge (a portrait run on a landscape window). */
html[data-rotate="ccw"] body{transform:translate(0,var(--rot-w)) rotate(-90deg);--safe-top:var(--phys-safe-left);--safe-right:var(--phys-safe-top);--safe-bottom:var(--phys-safe-right);--safe-left:var(--phys-safe-bottom)}
html[data-rotate="cw"].tg-fullscreen .xp-track{top:var(--phys-tg-right)}
html[data-rotate="ccw"].tg-fullscreen .xp-track{top:var(--phys-tg-left)}
/* Chromium draws backdrop-filter under a rotated ancestor only over part of the screen: a denser solid veil instead. */
html[data-rotate] .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0c0914eb}
/* The joystick editor ghost is a <button>: the global button transform transition slid it for 180 ms after it was pinned, so a
   drag started meanwhile measured a moving centre (seen as a jump in the rotated QA, also possible unrotated). */
.joystick-editor .joystick-ghost{transition:background .18s,border-color .18s}
.orientation-setting .segmented{grid-template-columns:repeat(3,minmax(0,1fr))}
.orientation-setting .segmented button{white-space:normal;line-height:1.2}

/* Shared dash (docs/DASH-0.5.2.md): its own HUD button above the ability button (the centred joystick stays clear); both buttons
   show the remaining cooldown as a dark sector under their text (--cd = remaining share, written by app.js updateHUD). */
.dash-button{position:absolute;right:32px;bottom:104px;width:56px;height:56px;padding:0;margin-right:var(--safe-right);border-radius:50%;display:grid;place-items:center;align-content:center;background:#1d2440cc;border:2px solid #8fb4ff;color:#d4e2ff;box-shadow:0 0 18px #6f93ff33;touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
.dash-button>span{display:block;font-size:24px;line-height:1;font-weight:700}
.dash-button small{display:block;font-size:6px;letter-spacing:.5px;margin-top:2px}
.dash-button[hidden]{display:none}
.dash-button.dashing{border-color:#eef3ff;box-shadow:0 0 22px #a9c2ffaa}
.ability-button,.dash-button{isolation:isolate}
.ability-button::after,.dash-button::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:conic-gradient(#04050bd9 calc(var(--cd,0)*1turn),#0000 0);pointer-events:none}
.joystick-editor .dash-ghost{display:grid;place-items:center;opacity:.45;pointer-events:none}
.modal-content .pause-controls{font-size:11px;line-height:1.5;color:#a394ae;margin-top:-4px}
@media(max-width:550px){.dash-button{right:35px;bottom:calc(max(54px,var(--safe-bottom)) + 82px)}}
@media(pointer:coarse){.dash-button{right:41px;bottom:calc(max(57px,var(--safe-bottom)) + 88px);width:58px;height:58px}.dash-button small{font-size:0}.dash-button small::after{content:"РЫВОК";font-size:7px;letter-spacing:.5px}}
@media(pointer:coarse),(max-width:850px){.dash-button{right:33px;bottom:calc(max(43px,var(--safe-bottom)) + 88px)}}

/* Camp badges (src/badges.js): state on <html>, so any [data-tab] button and the title «Лагерь» pick it up. */
html[data-badge-mail] [data-tab="mail"]::after,html[data-badge-achievements] [data-tab="achievements"]::after,html[data-badge-inventory] [data-tab="inventory"]::after{display:inline-block;box-sizing:border-box;min-width:17px;height:17px;margin-left:6px;padding:0 5px;border-radius:9px;background:#d9ad54;color:#1d1621;font:700 10px/17px var(--font-display,Circle,'Segoe UI',sans-serif);letter-spacing:0;text-align:center;vertical-align:1px;box-shadow:0 0 0 1px #11101b,0 0 8px #d9ad5466;pointer-events:none}
html[data-badge-mail="count"] [data-tab="mail"]::after{content:var(--badge-mail,"")}
html[data-badge-achievements="count"] [data-tab="achievements"]::after{content:var(--badge-achievements,"")}
html[data-badge-inventory="count"] [data-tab="inventory"]::after{content:var(--badge-inventory,"")}
html[data-badge-mail="dot"] [data-tab="mail"]::after{content:"";min-width:0;width:8px;height:8px;padding:0;border-radius:50%;vertical-align:5px;margin-left:5px}
#title-camp{position:relative}
html[data-badge-camp] #title-camp::after{content:"";position:absolute;top:9px;right:12px;width:10px;height:10px;border-radius:50%;background:#fff1c9;box-shadow:0 0 0 2px #221b18,0 0 10px #ffe39a;pointer-events:none;animation:camp-badge-pulse 1.8s ease-in-out infinite}
@keyframes camp-badge-pulse{50%{transform:scale(.72);opacity:.75}}
@media(prefers-reduced-motion:reduce){html[data-badge-camp] #title-camp::after{animation:none}}

/* «Забрать всё» on the mail page. */
.mail-claim-all{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:1050px;margin:0 0 16px;padding:14px 18px;border-color:#8d7252;background:linear-gradient(135deg,#2c2335,#1d1827)}
.mail-claim-all p{margin:0;font-size:12px;color:#d8c8a8;line-height:1.5;flex:1 1 240px}
.mail-claim-all b{color:#f0cf86}
.mail-claim-all button{width:auto;margin:0;min-height:44px;padding:11px 20px}