/* Secondary screens (Season, Wallet, Profile, Leaders, Guild...): the Rewards look. A short head
   (title + one chip), one status card, rows instead of essays; explanations fold under "More".
   Colours follow rewards.css: green is "take it", gold is a fund or a chest, blue is the rest. */

/* Status card: the season fund or the score, place and days left. */
.season-hero { display:grid; gap:8px; padding:14px; border:2px solid #fff1bd; border-radius:22px; color:#fff; background:radial-gradient(circle at 88% 0,#ffd36b55,transparent 45%),linear-gradient(160deg,#2a82c4f0,#0d4a8ef5); box-shadow:inset 0 2px #fff6d966,0 4px 0 #0a4c91; }
.season-hero__top { display:grid; gap:4px; }
.season-hero__top span { color:#ffe9a0; font:13px DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.season-hero__top b { font:24px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #0d4e98; font-variant-numeric:tabular-nums; white-space:nowrap; }
.season-hero .profile-bar { margin:0; }
.season-hero p { margin:0; color:#d6f3ff; font-size:12px; line-height:1.4; }
.season-hero.is-live { grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; }
.season-hero.is-live > div { display:grid; gap:2px; }
.season-hero.is-live > div + div { border-left:2px solid #8ddcf855; }
.season-hero.is-live small { color:#d6f3ff; font-size:11px; }
.season-hero.is-live strong { font:24px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #0d4e98; font-variant-numeric:tabular-nums; }
.season-hero.is-live em { color:#bdf3ff; font-size:13px; font-style:normal; }

/* Doors side by side instead of one full-width row each. */
.scr-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.scr-link { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:8px; min-height:56px; padding:8px 10px; border:2px solid #8ddcf8; border-radius:16px; color:#fff; background:linear-gradient(160deg,#2a82c4f0,#0d4a8ef5); box-shadow:inset 0 2px #eaffff55,0 3px 0 #0a4c91; text-align:left; }
.scr-link > .icon { width:24px; height:24px; color:#ffe9a0; }
.scr-link > span { display:grid; gap:1px; min-width:0; }
.scr-link strong { overflow:hidden; font:13px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.scr-link small { overflow:hidden; color:#d6f3ff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.scr-link .badge-dot { position:absolute; top:6px; right:6px; }
.scr-link:active { transform:translateY(3px); box-shadow:none; }

/* Explanations fold away; the toggle that opens a long list. */
.scr-more { margin:6px 0 0; }
.scr-more summary { display:inline-flex; align-items:center; gap:4px; min-height:32px; color:#bdf3ff; font:12px DraklyBold,'Trebuchet MS',sans-serif; text-decoration:underline; text-underline-offset:2px; cursor:pointer; list-style:none; }
.scr-more summary::-webkit-details-marker { display:none; }
.scr-more summary::after { content:'▾'; text-decoration:none; }
.scr-more[open] summary::after { content:'▴'; }
.scr-more p, .scr-more li { color:#d6f3ff; font-size:12px; line-height:1.45; }
.scr-more p { margin:4px 0 0; }
.scr-toggle { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:40px; margin-top:8px; padding:0; border:2px dashed #8ddcf8aa; border-radius:14px; color:#bdf3ff; background:transparent; font:13px DraklyBlack,'Trebuchet MS',sans-serif; }
.scr-toggle .icon { width:14px; height:14px; }
.scr-toggle[aria-expanded="true"] .icon { transform:rotate(180deg); }

/* Season: the pre-season quest as one row, the cards with a short head. */
.season-quest { min-height:64px; }
.season-quest .rw-row__art { overflow:visible; }
.season-quest__egg { width:46px; height:auto; }
.season-quest__steps { display:flex; flex-wrap:wrap; gap:4px 10px; color:#d6f3ff; font-size:12px; }
.season-quest__steps b { color:#fff; }
.season-quest__steps .is-done b { color:#8ff07a; }
.season-screen .feature-card { margin:0; }
.season-screen .track-card .rw-group__head, .season-screen .skins-card .rw-group__head, .season-screen .burn-card .rw-group__head { margin:0 0 8px; }
.season-screen .track-card .pass-progress { margin-top:0; }
.season-screen .feature-card .rw-group__head h2 { font-size:19px; line-height:1.1; }
.season-screen .feature-card .rw-group__head small { white-space:nowrap; }
/* Season skins: three equal columns that never push the third off the card (big Telegram fonts),
   each skin on a stage lit in its own colour, the price as a chip, a compact button. */
.skins-card .skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:4px; }
.skins-card .skin-offer { --glow:#7fd8ff; position:relative; min-width:0; display:grid; grid-template-rows:auto 1fr auto auto; justify-items:center; align-items:start; gap:6px; padding:8px 6px 8px;
  border:2px solid color-mix(in srgb,var(--glow) 55%,#ffffff22); border-radius:16px; text-align:center;
  background:radial-gradient(90% 60% at 50% 26%,color-mix(in srgb,var(--glow) 42%,transparent) 0,transparent 70%),linear-gradient(170deg,#1a5aa0,#0c3770 70%);
  box-shadow:inset 0 2px #ffffff2e,0 3px 0 #082f5e,0 6px 10px #00163d40; }
.skins-card .skin-offer--ember { --glow:#ff8a3d; }
.skins-card .skin-offer--frost { --glow:#8fe9ff; }
.skins-card .skin-offer--void { --glow:#b37bff; }
.skins-card .skin-offer__stage { display:grid; place-items:center; width:100%; aspect-ratio:1; max-width:96px; border-radius:50%;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--glow) 30%,transparent) 0,transparent 68%); }
.skins-card .skin-preview { width:100%; height:100%; object-fit:contain; }
.skins-card .skin-offer__name { align-self:center; min-width:0; max-width:100%; color:#fff; font:normal 13px/1.12 DraklyBlack,'Trebuchet MS',sans-serif; overflow-wrap:break-word; hyphens:auto; text-shadow:0 2px 0 #0a3d78; }
.skins-card .skin-offer__price { display:inline-flex; align-items:center; gap:4px; padding:2px 9px 2px 4px; border-radius:999px; background:#06264f99; box-shadow:inset 0 0 0 1px #ffffff26;
  color:#fff; font:13px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; }
.skins-card .skin-offer__price .ui-icon,.skins-card .skin-offer__price img,.skins-card .skin-offer__price svg { width:18px; height:18px; }
.skins-card .skin-offer .btn,.skins-card .skin-offer .btn-cta-buy { width:100%; min-width:0; min-height:38px; margin:0; padding:0 4px; font-size:14px; line-height:1.1; white-space:normal; }
.skins-card .skin-offer .btn-cta-buy { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 4px; border:0; border-radius:999px; color:#ffe2b8; background:#06264fcc; box-shadow:inset 0 0 0 2px #ffd27a99; font:12px/1.1 DraklyBold,'Trebuchet MS',sans-serif; cursor:pointer; }
.skins-card .skin-offer .btn-cta-buy .ui-icon { width:16px; height:16px; }
.skins-card .skin-offer .btn-cta-buy small { display:none; }
.skins-card .skin-offer__owned { padding:5px 8px; border-radius:999px; color:#0c4a2c; background:linear-gradient(#d8ffe6,#7fe3a6); font:12px/1.15 DraklyBold,'Trebuchet MS',sans-serif; }
.skins-card .skin-offer.is-owned { border-color:#7fe3a6; }
@media (max-width:359px) { .skins-card .skin-grid { gap:5px; } .skins-card .skin-offer__name { font-size:12px; } .skins-card .skin-offer .btn { font-size:12px; } }
.season-screen .burn-card .mini { margin:0 0 8px; }

.scr-link--wide { grid-template-columns:28px minmax(0,1fr) 18px; width:100%; }
.scr-link--wide > .icon:last-child { width:16px; height:16px; color:#bdf3ff; }

/* A setting that folds: the card is its own summary. */
.scr-fold { padding:0 14px; }
.scr-fold > summary { display:flex; align-items:center; justify-content:space-between; min-height:48px; color:#fff; font:15px DraklyBlack,'Trebuchet MS',sans-serif; cursor:pointer; list-style:none; }
.scr-fold > summary::-webkit-details-marker { display:none; }
.scr-fold > summary .icon { width:16px; height:16px; color:#bdf3ff; }
.scr-fold[open] > summary .icon { transform:rotate(180deg); }
.scr-fold[open] { padding-bottom:14px; }
.scr-fold .mini { margin:0 0 10px; }

/* Secondary screens share one rhythm: 12px between blocks, card titles one size, small heading icons. */
.wallet-screen, .profile-screen, .guild-screen, .history-screen, .friends-screen, .settings-screen, .rules-screen, .leaderboard-screen { gap:12px; }
.wallet-screen > .feature-card, .wallet-screen > section, .wallet-screen > details { margin:0; }
:is(.wallet-screen,.season-screen,.profile-screen,.guild-screen,.leaderboard-screen) .feature-card { padding:14px; }
:is(.wallet-screen,.season-screen,.profile-screen,.guild-screen,.leaderboard-screen) .feature-card h2 { margin:3px 0 6px; font-size:19px; line-height:1.15; }
:is(.wallet-screen,.season-screen,.profile-screen,.guild-screen,.leaderboard-screen) .feature-card-heading > .ui-icon { width:32px; height:32px; }
:is(.wallet-screen,.season-screen,.profile-screen,.guild-screen,.leaderboard-screen) .feature-card p { font-size:13px; line-height:1.4; }
.wallet-screen .economy-hero { margin:0; }
.wallet-screen .wallet-price { font-size:12px; }
.wallet-screen .economy-hero { padding:14px; }
.wallet-screen .wallet-price-hero { padding:10px 14px; }
.wallet-screen .wallet-price-hero p:first-child { margin-top:0; }
/* Two currencies side by side: coins (in-game only) and $DRAKLY (withdrawable). */
.wallet-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.wallet-cur { display:flex; align-items:flex-start; gap:8px; min-width:0; padding:12px; border:3px solid #92e3ff; border-radius:18px; color:white; background:linear-gradient(145deg,#2e83c3,#0e4e96 66%,#0a3675); box-shadow:inset 0 2px #fff8,0 5px 0 #0a4c94; }
.wallet-cur.is-token { border-color:#ffd77a; background:linear-gradient(145deg,#3a6f9a,#183f6a 66%,#0d2a4d); box-shadow:inset 0 2px #fff6,0 5px 0 #8a6420; }
.wallet-cur > .ui-icon { flex:none; width:36px; height:36px; }
.wallet-cur > span { display:grid; gap:2px; min-width:0; }
.wallet-cur small { color:#d7f3ff; font-size:12px; font-weight:700; }
.wallet-cur strong { overflow-wrap:anywhere; color:#fff; font:700 24px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:var(--num); text-shadow:0 2px #0c4b92; }
.wallet-cur em { color:#cfe9f5; font-size:11px; font-style:normal; line-height:1.3; }
.withdraw-split { margin:8px 0 10px; }
@media (max-width:360px) { .wallet-split { grid-template-columns:1fr; } }
.wallet-list { display:grid; padding:4px 14px; }
.wallet-line { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:6px 0; }
.wallet-line + .wallet-line { border-top:1px solid #8ddcf844; }
.wallet-line > span, .wallet-line > b { display:grid; gap:1px; min-width:0; }
.wallet-line > span { color:#fff; font:14px DraklyBold,'Trebuchet MS',sans-serif; }
.wallet-line > b { color:#fff; font:15px DraklyBlack,'Trebuchet MS',sans-serif; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.wallet-line small { color:#cdeeff; font:11px/1.3 'Trebuchet MS',sans-serif; }
.wallet-line em { color:#ffd27a; font-size:11px; font-style:normal; }

/* One head for every secondary screen: the title, at most a chip, at most one short line under it. */
.scr-head { margin:2px 2px 0; }
.scr-lead { margin:-4px 2px 0; color:#d6f3ff; font-size:13px; line-height:1.4; }
.scr-link > img { width:28px; height:28px; border-radius:50%; }
.scr-link > .ui-icon { width:28px; height:28px; }
.scr-link.is-on { border-color:#c9ffb8; }

/* Profile: the collection and frames without extra air. */
.profile-screen .profile-collection .profile-bar { margin:8px 0 10px; }
.profile-screen .profile-frames .rw-group__head { margin:0 0 10px; }
.profile-screen .profile-conditions { margin-top:10px; }

/* History: empty blocks are one line. */
.history-screen .defense-log.is-empty .rw-group__head { margin:0; }
.rw-unlock .ui-icon { flex:none; width:18px; height:18px; }

/* Empty states on secondary screens: a small picture beside the words, not a poster. */
body :is(.guild-screen,.friends-screen,.leaderboard-screen,.profile-screen,.wallet-screen,.season-screen,.rules-screen) .empty-state { box-sizing:border-box; width:100%; justify-self:stretch; grid-template-columns:72px minmax(0,1fr); justify-items:start; align-items:center; gap:2px 12px; padding:6px 0; text-align:left; }
body :is(.guild-screen,.friends-screen,.leaderboard-screen,.profile-screen,.wallet-screen,.season-screen,.rules-screen) .empty-state__art { grid-row:span 2; width:72px; height:72px; }
body :is(.guild-screen,.friends-screen,.leaderboard-screen,.profile-screen,.wallet-screen,.season-screen,.rules-screen) .empty-state__title { max-width:none; font-size:15px; }
body :is(.guild-screen,.friends-screen,.leaderboard-screen,.profile-screen,.wallet-screen,.season-screen,.rules-screen) .empty-state__text { max-width:none; }
body :is(.guild-screen,.friends-screen,.leaderboard-screen,.profile-screen,.wallet-screen,.season-screen,.rules-screen) .empty-state .btn { grid-column:1 / -1; justify-self:stretch; }
.profile-screen .profile-token h2 { font-size:19px; line-height:1.15; }

@media (max-width:370px) {
  .scr-links { gap:6px; }
  .scr-link { grid-template-columns:22px minmax(0,1fr); padding:7px 8px; }
  .season-hero.is-live strong { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) { .scr-link:active { transform:none; } }

/* The window money race (app.js stakeCard): who is in it, the stake close countdown, the x cap. */
.stake-card { display:grid; gap:8px; border-color:#ffd36b; background:radial-gradient(circle at 12% 0,#ffd36b40,transparent 50%),linear-gradient(160deg,#21407aee,#122a57f5); color:#fff; }
.stake-card.is-in { border-color:#8ff0b8; }
.stake-card__head { display:flex; align-items:center; gap:12px; }
.stake-card__art { flex:0 0 56px; width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 3px 6px #0006); }
.stake-card__head h2 { margin:2px 0 0; font-size:18px; line-height:1.15; }
.stake-card__fund { display:block; margin-top:3px; color:#ffe9a0; font:13px/1.2 'Trebuchet MS',sans-serif; }
.stake-card__fund b { font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; }
.stake-card p { margin:0; }
.stake-card__clock { padding:8px 10px; border-radius:12px; background:#0006; color:#ffe2a8; font:13px/1.3 'Trebuchet MS',sans-serif; }
.stake-card__clock b { color:#fff; font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; }
.stake-card__tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.stake-card__tiles div { display:grid; gap:2px; padding:8px; border-radius:12px; background:#ffffff14; text-align:center; }
.stake-card__tiles small { color:#cfe6ff; font:11px/1.15 'Trebuchet MS',sans-serif; }
.stake-card__tiles strong { font:18px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; }
.stake-card__tiles em { font-style:normal; font-size:12px; opacity:.7; }