/* 0.7.5c «Читаемость боя и удобство» (docs/CLARITY-0.7.5c.md). One file, loaded after every other stylesheet. */

/* §2 One toggle component for the camp settings and the pause settings: interface font (never the display/serif pair),
   each button as wide as its text, the row wraps when there is no room. */
.setting-row .segmented[role]{display:flex;flex-wrap:wrap;gap:6px;grid-template-columns:none}
.setting-row .segmented[role]>button{flex:1 1 auto;min-width:min(100%,64px);width:auto;margin:0;padding:8px 12px;white-space:nowrap;font-family:var(--font-body,Circle,'Segoe UI',sans-serif);font-size:13px;line-height:1.25;letter-spacing:0;text-transform:none;text-overflow:clip;overflow:visible}
.language-setting .segmented[role]{max-width:none}
.language-setting .segmented[role]>button{flex:0 1 auto;min-width:120px}
@media(max-width:550px){.setting-row .segmented[role]>button{font-size:12px;padding:8px 10px}}

/* §2 Camp header on a narrow screen: the sign-in button is a Telegram icon + «Войти» / «Sign in». */
.account-link-header .alh-icon{display:none;width:14px;height:14px;vertical-align:-2px;margin-right:5px;fill:currentColor}
.account-link-header .alh-short{display:none}
@media(max-width:650px){.profile-chip .account-link-header{flex-basis:auto;display:inline-flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden}
 .account-link-header .alh-icon{display:inline-block}.account-link-header .alh-long{display:none}.account-link-header .alh-short{display:inline;overflow:hidden;text-overflow:ellipsis}}
/* §2 Camp tabs: they wrap into rows instead of running off the edge (any width: the tab count grew with the patches). */
.shell .tabs{flex-wrap:wrap;height:auto;min-height:0;overflow:visible;mask-image:none;-webkit-mask-image:none;padding-right:0;row-gap:0}
.shell .tabs>button{min-height:44px;flex-shrink:0}
@media(max-width:900px){.shell .tabs{gap:2px 14px}.shell .tabs>button{min-height:34px}}
@media(max-width:420px){.shell .tabs{gap:0 11px}.shell .tabs>button{min-height:32px;font-size:10px}}

/* §3 «Shining» card (rarityBoost shining = luck made it Rare+, pity = guaranteed after 12 picks without a Rare).
   Frame exactly on the card contour (same radius as the card), gold #e8c27a (STYLE-BIBLE §3.1) with a soft glow; the
   card-shine-loop glint is clipped to the card and sits over the frame; a 9-slice from the artist replaces the CSS frame
   when it is wired (src/choice-ui.js SHINE_FRAME_ART → html.pa-shine-frame). */
.choice{--shine-gold:#e8c27a}
.choice-shine-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:2}
.choice-shine-clip{padding:7px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.choice-shine-clip .pa-card-shine-loop{opacity:.55}/* only the band along the frame shows the delivered glint */
.choice-shine-frame{position:absolute;inset:-1px;border:2px solid var(--shine-gold);border-radius:inherit;box-shadow:0 0 10px 1px rgba(232,194,122,.55),inset 0 0 10px rgba(232,194,122,.28);pointer-events:none;z-index:1}
@supports selector(:has(a)){
 .choice:has(>.choice-shine-frame){border-color:var(--shine-gold);border-width:2px;box-shadow:0 0 0 1px rgba(232,194,122,.35),0 0 14px 2px rgba(232,194,122,.5),inset 0 0 14px rgba(232,194,122,.22)}
 .choice:has(>.choice-shine-frame)>.choice-shine-frame{inset:-2px;border-color:transparent;box-shadow:none}}
html.pa-shine-frame .choice-shine-frame{inset:calc(-1 * var(--shine-frame-outset,5px));border:var(--shine-frame-width,12px) solid transparent;border-image:var(--shine-frame-url) var(--shine-frame-slice,24) / var(--shine-frame-width,12px) / 0 round;box-shadow:none;image-rendering:pixelated}
html.pa-shine-frame .choice:has(>.choice-shine-frame){box-shadow:none}
.choice-shine-label{position:absolute;left:50%;top:-1px;transform:translate(-50%,-50%);z-index:3;padding:2px 9px;border:1px solid var(--shine-gold);border-radius:999px;background:#2a2016;color:#ffe2a3;font:700 10px/1.4 var(--font-body,Circle,'Segoe UI',sans-serif);letter-spacing:.3px;white-space:nowrap;box-shadow:0 0 8px rgba(232,194,122,.45);pointer-events:auto;cursor:help}
.choice-shine-label[data-shine=pity]{background:#1d2232;color:#d9e4ff;border-color:#b9c8f5;box-shadow:0 0 8px rgba(185,200,245,.4)}
.choice-shine-tip{display:none;position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:max-content;max-width:min(220px,70vw);padding:6px 9px;border:1px solid var(--shine-gold);border-radius:4px;background:#17121f;color:#f3e6c8;font:500 11px/1.4 var(--font-body,Circle,'Segoe UI',sans-serif);white-space:normal;text-align:center;box-shadow:0 4px 14px #000a;z-index:5}
.choice-shine-label:hover .choice-shine-tip,.choice.show-tip .choice-shine-tip,.choice-shine-label:focus-visible .choice-shine-tip{display:block}
.choice.show-tip{transform:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:550px){.choice-shine-label{font-size:9px;padding:1px 7px}}
body.reduced-motion .choice-shine-clip .pa-card-shine-loop{opacity:.3}

/* §4 Keyboard focus on a choice card: bright frame and a slight lift; hint under the cards on PC. */
.choice.kb-focus{outline:3px solid #ffffff;outline-offset:3px;transform:translateY(-3px) scale(1.025);z-index:4}
.choice-keys-hint{margin:10px 0 0;text-align:center;font-size:11px;letter-spacing:.4px;color:#a99ab2}
@media(prefers-reduced-motion:reduce){.choice.kb-focus{transform:none}}
body.reduced-motion .choice.kb-focus{transform:none}

/* §5 HUD: the «+N» chip of the relic strip at the END of the row; the buff column moves down by every row the strip takes
   (data-relic-rows from src/result-polish.js updateHudPolish; one row = relics-ui.css --relic-shift); the control hint shows for
   the first minute (and in the pause); the prize-ranking status sits under the timer, compact. */
.equipment .relic-strip .relic-more{order:99}
#arena.has-relics[data-relic-rows="2"]{--relic-shift:64px}#arena.has-relics[data-relic-rows="3"]{--relic-shift:96px}
@media(max-width:850px){#arena.has-relics[data-relic-rows="2"]{--relic-shift:56px}#arena.has-relics[data-relic-rows="3"]{--relic-shift:84px}}
@media(max-width:550px){#arena.has-relics[data-relic-rows="2"]{--relic-shift:50px}#arena.has-relics[data-relic-rows="3"]{--relic-shift:75px}}
#arena .arena-hint{transition:opacity .6s}
#arena.hint-expired .arena-hint{opacity:0;visibility:hidden}
.hud-center .run-ranking-status{display:block;max-width:160px;margin:3px auto 0;font-size:8px;letter-spacing:.4px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 0.7.5c after the 0.7.5a/b rebase: under the timer the centre column is ~89 px at 360 px — the status wraps instead of being cut (measured) */@media(max-width:550px){.hud-center .run-ranking-status{font-size:7px;max-width:110px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}}
.pause-keys-hint{margin:14px 0 0;font-size:10px;letter-spacing:1px;color:#b1a1b9;text-align:center}
.pause-keys-hint span{color:#7f7392}

/* §5 Result screen: awakenings in one centred list (heroes, tomes, other); the not-ranked note with its reason under «Details». */
.result-awakened{margin:14px auto 0;padding:10px 12px;border:1px solid #6d5a3c;border-radius:4px;background:#1d1824;text-align:center;max-width:520px}
.result-awakened .section-kicker{margin-bottom:6px}
.result-awakened .awakened-group{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;font-size:12px;line-height:1.6}
.result-awakened .awakened-group span{color:#a99ab2}
.result-awakened .awakened-group b{color:#ecd59e;font-weight:600}
.result-not-ranked p{margin:0}
.result-not-ranked details{margin-top:6px;font-size:11px;color:#a99ab2}
.result-not-ranked summary{cursor:pointer;color:#d5b46d}
.achievement-unlocks .achievement-gain-single{color:#f1c86a}