/* Sieges screen in the style of the Dragons and Rewards screens: the next tower is one card with one big
   button, the plan is three floor tiles (your pair against the defense, the chance as a colour), the
   move before a floor is a card with a picture. Chips and bars come from rewards.css (.rw-chip, .rw-bar). */
.siege-screen.is-plan { padding-top:2px; }

/* Home: one card with the squad, the goal for the next sieges and the main button. */
.sg-hero { position:relative; display:grid; gap:10px; padding:14px 14px 14px; overflow:hidden; border:3px solid #b0edff; border-radius:24px; color:#fff; background:linear-gradient(180deg,#0b3f80cc 0,#2179b31c 34%,#2179b300 52%,#0b3f80f2 74%),url('/assets/cartoon-arena-empty.webp') center 42% / cover,#1767bd; box-shadow:inset 0 2px #eaffff8c,0 6px 0 #0a4c91,0 12px 22px #03296066; }
.sg-hero__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sg-hero__top .ui-icon { width:16px; height:16px; }
.sg-hero h1 { margin:0; color:#fff; font:32px/1 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:-.03em; text-shadow:0 3px 0 #125390,0 5px 8px #0b3367aa; }
.sg-hero__stage { position:relative; height:168px; margin:-6px -4px 0; }
.sg-hero__party img { position:absolute; bottom:22px; width:46%; height:150px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 6px #0b2f6699); animation:sg-bob 3.2s ease-in-out infinite; }
.sg-hero__party .party-0 { left:0; }
.sg-hero__party .party-1 { right:0; animation-delay:-1.6s; }
.sg-hero__facts { position:absolute; left:50%; bottom:0; display:flex; gap:6px; transform:translateX(-50%); white-space:nowrap; }
.sg-hero__facts > span { display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:2px 10px 2px 6px; border:2px solid #9fe6ff; border-radius:999px; background:#0b4689e6; font:12px DraklyBlack,'Trebuchet MS',sans-serif; }
.sg-hero__facts .ui-icon { width:18px; height:18px; }
.sg-goal { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:10px; margin:0; padding:8px 12px 8px 8px; border:2px solid #8ddcf8; border-radius:16px; background:#0b3f7be6; }
.sg-goal > .ui-icon { width:40px; height:40px; filter:drop-shadow(0 2px 2px #0006); }
.sg-goal__text { display:grid; gap:5px; min-width:0; }
.sg-goal__text strong { overflow:hidden; font:14px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.sg-goal--done { display:flex; color:#d6f3ff; font-size:13px; }
.sg-goal--done .icon { width:18px; height:18px; color:#8ff07a; }
.siege-screen .sg-hero__go, .siege-screen .sg-confirm > .btn.primary { width:100%; max-width:none; min-height:58px; margin:2px 0 0; font-size:20px; }
.siege-screen .sg-hero__go .ui-icon, .siege-screen .sg-confirm > .btn.primary .ui-icon { width:26px; height:26px; }
.sg-more { display:flex; gap:8px; }
.siege-screen .sg-more .btn { flex:1 1 0; min-width:0; min-height:44px; margin:0; padding-inline:8px; font-size:13px; }

/* The tower plan: its name, three floor tiles and the verdict. */
.siege-screen .sg-plan.offer-summary { display:grid; gap:10px; padding:14px 12px 12px; border:3px solid #b0edff; border-radius:24px; background:linear-gradient(160deg,#2a82c4f2,#0b4b90f5 72%); box-shadow:inset 0 2px #eaffff8c,0 6px 0 #0a4c91,0 12px 22px #03296066; }
.siege-screen .sg-plan.offer-summary::before { content:none; }
.sg-plan__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px; }
.sg-plan__head > div { display:grid; justify-items:start; gap:6px; min-width:0; }
.sg-plan__head h1 { margin:0; overflow-wrap:anywhere; color:#fff; font:26px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px 0 #125390; }
.sg-plan__head > .ui-icon { width:58px; height:58px; filter:drop-shadow(0 4px 4px #0007); }
.siege-screen .sg-plan .sg-plan__hint { margin:-2px 4px 0; color:#d6f3ff; font-size:12px; line-height:1.35; }
.sg-floors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.sg-floor { --edge:#8ddcf8; display:grid; justify-items:center; align-content:start; gap:4px; min-width:0; padding:8px 4px 10px; border:2px solid var(--edge); border-radius:18px; color:#fff; background:linear-gradient(#3a95d2,#124f8f); box-shadow:inset 0 2px #e9ffff55,0 4px 0 #0a4485; font:inherit; }
.sg-floor:active { transform:translateY(3px); box-shadow:inset 0 2px #e9ffff55; }
.sg-floor.is-high { --edge:#c9ffb8; box-shadow:inset 0 2px #e9ffff55,0 4px 0 #0a4485,0 0 0 2px #6fe07a55; }
.sg-floor.is-even { --edge:#fff1bd; }
.sg-floor.is-low { --edge:#ffb3a3; background:linear-gradient(#3a7fc0,#183f80); }
.sg-floor__n { font:13px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 1px 0 #0d4e98; white-space:nowrap; }
.sg-floor__team { display:flex; justify-content:center; min-height:46px; }
.sg-floor__team img { width:46px; height:46px; margin:0 -6px; object-fit:cover; border:2px solid #b2efff; border-radius:50%; background:radial-gradient(circle at 50% 40%,#bff4ff,#1767bd); box-shadow:0 2px 0 #0b4692; }
.sg-floor__team.is-theirs img { border-color:#ffc9bd; background:radial-gradient(circle at 50% 40%,#ffd6cc,#b8434a); box-shadow:0 2px 0 #6e1d2a; }
.sg-floor__team i { display:grid; place-items:center; min-height:46px; color:#cdeeff; font-size:12px; font-style:normal; }
.sg-floor__vs { margin:-2px 0; color:#ffe9a0; font:12px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 1px 0 #5a3a0a; }
.sg-floor .chance { margin-top:4px; max-width:100%; overflow:hidden; text-overflow:ellipsis; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.siege-screen .sg-plan .sg-plan__verdict { margin:0 4px; color:#fff; font:13px/1.35 DraklyBold,'Trebuchet MS',sans-serif; text-align:center; }
.sg-plan__exact { margin:-4px 4px 0; color:#cdeeff; font-size:11px; text-align:center; }
.siege-screen .sg-confirm { display:grid; gap:8px; padding:0; }
.siege-screen .sg-confirm .btn + .btn, .siege-screen .sg-confirm > .sg-more { margin-top:0; }

/* The move before each floor: a card with a picture, the tip glows green. */
.siege-cards .siege-card { grid-template-columns:52px minmax(0,1fr); align-items:center; column-gap:12px; row-gap:2px; min-height:76px; padding:10px 12px 10px 10px; border:2px solid #8ddcf8; border-radius:18px; color:#fff; background:linear-gradient(160deg,#2a82c4f2,#0d4a8ef5); box-shadow:inset 0 2px #eaffff55,0 4px 0 #0a4c91; }
.siege-cards .siege-card:active { box-shadow:inset 0 2px #eaffff55; }
.siege-cards .siege-card:focus-visible { box-shadow:0 0 0 3px #ffe9a0,0 4px 0 #0a4c91; }
.siege-card__art { grid-row:1 / span 2; display:grid; place-items:center; width:52px; height:52px; border:2px solid #b2efff; border-radius:14px; background:radial-gradient(circle at 50% 40%,#bff4ff 0,#62c6f3 38%,#1767bd 100%); box-shadow:inset 0 2px #ffffff88,0 2px 0 #0b4692; }
.siege-card__art img { width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 2px 2px #0006); }
.siege-cards .siege-card__name { grid-column:2; color:#fff; font-size:17px; text-shadow:0 1px 0 #0d4e98; }
.siege-cards .siege-card small { grid-column:2; color:#d6f3ff; }
.siege-cards .siege-card.is-hint { border-color:#c9ffb8; background:linear-gradient(160deg,#2f8fc9f2,#0d4a8ef5); box-shadow:inset 0 2px #eaffff55,0 4px 0 #0a4c91,0 0 0 2px #6fe07a88,0 0 18px #8ff07a66; }
.siege-cards .siege-card__hint { border:2px solid #e4ffd8; background:linear-gradient(#8ff07a,#2fb54b); color:#fff; text-shadow:0 1px 0 #13702c; }

/* Your own siege plan: floor tabs, the defense against your pair, the roster under it. Tap a turn of
   the pair, then a dragon: it takes that turn at once, the forecast updates in place. */
.sx-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px 12px 14px; border:3px solid #b0edff; border-radius:22px; color:#fff; background:linear-gradient(160deg,#2a82c4f2,#0b4b90f5 72%); box-shadow:inset 0 2px #eaffff8c,0 5px 0 #0a4c91,0 10px 18px #03296055; }
.sx-head__text { display:grid; justify-items:start; gap:5px; min-width:0; }
.sx-head h2 { margin:0; overflow-wrap:anywhere; color:#fff; font:22px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #125390; }
.sx-head p { margin:0; color:#d6f3ff; font-size:12px; line-height:1.35; }
.sx-head > .ui-icon { flex:none; width:50px; height:50px; filter:drop-shadow(0 4px 4px #0007); }
.sx-head__tools { display:grid; flex:none; gap:6px; }
.siege-screen .sx-head__tools .btn { min-width:0; min-height:40px; margin:0; padding:6px 14px; font-size:14px; white-space:nowrap; }
.siege-screen .sx-head__tools .btn.subtle { min-height:34px; padding:4px 10px; font-size:11px; }

.sx-tabs { position:sticky; top:calc(var(--safe-top,0px) + var(--hud-h,64px) + 8px); z-index:calc(var(--z-hud,50) - 1); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:12px 0 10px; padding:5px; border:2px solid #9eeaff; border-radius:18px; background:#0b3f80f0; box-shadow:0 6px 14px #03214a66; scroll-margin-top:calc(var(--safe-top,0px) + var(--hud-h,64px) + 8px); }
.sx-tab { --edge:#7fc9ef; display:grid; justify-items:center; align-content:center; gap:3px; min-width:0; min-height:48px; padding:4px 3px; border:2px solid var(--edge); border-radius:13px; color:#fff; background:linear-gradient(#2f86c6,#124f8f); box-shadow:0 3px 0 #082f63; font:inherit; }
.sx-tab b { font:12px/1 DraklyBlack,'Trebuchet MS',sans-serif; white-space:nowrap; text-shadow:0 1px 0 #0d4e98; }
.sx-tab .chance { max-width:100%; overflow:hidden; padding:2px 7px; font:10px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; }
.sx-tab.is-high { --edge:#9ff0b0; }
.sx-tab.is-even { --edge:#ffe9a0; }
.sx-tab.is-low { --edge:#ffab9a; }
.sx-tab.is-on { border-color:#fff; background:linear-gradient(#8ce6f2,#2a9ed0); box-shadow:0 3px 0 #0b5a93,0 0 0 2px #ffe9a0; }
.sx-tab:active { transform:translateY(2px); box-shadow:none; }

.sx-floor { display:grid; gap:8px; padding:12px; border:3px solid #b0edff; border-radius:22px; color:#fff; background:linear-gradient(170deg,#2a82c4f2,#0b4b90f5 70%); box-shadow:inset 0 2px #eaffff8c,0 5px 0 #0a4c91,0 10px 18px #03296055; }
.sx-floor__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sx-floor__head h3 { margin:0; color:#fff; font:20px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #125390; }
.sx-hp { display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:2px 10px 2px 5px; border:2px solid #ffc9bd; border-radius:999px; color:#fff; background:#8a2f3fcc; font:12px DraklyBlack,'Trebuchet MS',sans-serif; white-space:nowrap; }
.sx-hp .ui-icon { width:18px; height:18px; }
.sx-floor .floor-trait { margin:0; }
.sx-label { color:#cdeeff; font:11px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.sx-note, .sx-empty { margin:0; color:#d6f3ff; font-size:12px; line-height:1.35; }
.sx-empty { grid-column:1 / -1; padding:10px; border:2px dashed #8ddcf8; border-radius:14px; text-align:center; }

.sx-ava { position:relative; display:grid; place-items:center; flex:none; width:48px; height:48px; border:2px solid var(--tb,#b2efff); border-radius:50%; background:radial-gradient(circle at 50% 40%,var(--tg,#bff4ff),var(--t2,#1767bd)); box-shadow:0 2px 0 var(--t3,#0b4692); }
.sx-ava img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sx-ava .mastery-mark { top:-3px; left:-3px; width:18px; height:18px; }
.sx-ava .mastery-mark svg { width:12px; height:12px; }
.sx-ava--them { border-color:#ffc9bd; background:radial-gradient(circle at 50% 40%,#ffd6cc,#b8434a); box-shadow:0 2px 0 #6e1d2a; }

.sx-enemies { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; align-items:start; }
.sx-enemy { position:relative; min-width:0; border:2px solid #ffb9aa; border-radius:14px; background:linear-gradient(#a2444f,#6b2236); box-shadow:0 3px 0 #4a1424; }
.sx-enemy summary { display:flex; align-items:center; gap:7px; min-height:60px; padding:6px 7px; cursor:pointer; list-style:none; }
.sx-enemy summary::-webkit-details-marker { display:none; }
.sx-enemy__txt { display:grid; gap:1px; min-width:0; }
.sx-enemy__txt strong { overflow:hidden; color:#fff; font:13px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.sx-enemy__txt small { color:#ffdcd4; font-size:10px; }
.sx-enemy__txt em, .sx-slot em, .sx-pick small { display:flex; align-items:center; gap:3px; min-width:0; color:#ffe9a0; font-size:11px; font-style:normal; font-weight:800; }
.sx-enemy__txt em span, .sx-slot em span, .sx-pick small span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-enemy .skill-art, .sx-slot em .skill-art { width:18px; height:18px; }
.sx-enemy p { margin:0; padding:0 9px 8px; color:#ffe7e1; font-size:11px; line-height:1.35; }
.sx-enemy.is-target { border-color:#ffd46b; box-shadow:0 3px 0 #4a1424,0 0 0 2px #ffd46b66; }
.sx-tag { position:absolute; top:-8px; right:6px; padding:1px 7px; border:2px solid #fff3c4; border-radius:999px; color:#5a3a0a; background:linear-gradient(#ffe9a0,#f0b43c); font:9px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; text-transform:uppercase; }

.sx-vs { display:flex; align-items:center; gap:8px; margin:0 0 -2px; }
.sx-vs::before, .sx-vs::after { content:''; flex:1; height:2px; border-radius:2px; background:#8ddcf866; }
.sx-vs b { color:#ffe9a0; font:15px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #5a3a0a; }

.sx-pair { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); align-items:center; gap:4px; }
.sx-slot { position:relative; display:grid; justify-items:center; align-content:start; gap:3px; min-width:0; min-height:100%; padding:16px 6px 26px; border:2px solid #8ddcf8; border-radius:16px; color:#fff; background:linear-gradient(#3a95d2,#124f8f); box-shadow:inset 0 2px #e9ffff55,0 4px 0 #0a4485; font:inherit; text-align:center; }
.sx-slot .sx-ava { width:62px; height:62px; }
.sx-slot strong { max-width:100%; overflow:hidden; font:15px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 0 #0d4e98; }
.sx-slot em { justify-content:center; max-width:100%; }
.sx-slot small { color:#d6f3ff; font-size:11px; line-height:1.25; }
.sx-slot .target-note { margin:0; font-size:10px; line-height:1.2; }
.sx-slot__n { position:absolute; top:-10px; left:50%; padding:2px 9px; border:2px solid #b2efff; border-radius:999px; color:#fff; background:#0b4689; font:10px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; white-space:nowrap; transform:translateX(-50%); }
.sx-slot__mark { position:absolute; bottom:5px; left:50%; color:#bfe6ff; font:10px/1.2 DraklyBold,'Trebuchet MS',sans-serif; font-style:normal; white-space:nowrap; transform:translateX(-50%); }
.sx-slot.is-sel { border-color:#ffe9a0; background:linear-gradient(#4aa9e0,#16609f); box-shadow:inset 0 2px #e9ffff77,0 4px 0 #0a4485,0 0 0 3px #ffd46b88,0 0 16px #ffd46b55; }
.sx-slot.is-sel .sx-slot__n { border-color:#fff3c4; color:#5a3a0a; background:linear-gradient(#ffe9a0,#f0b43c); }
.sx-slot.is-sel .sx-slot__mark { color:#ffe9a0; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.sx-slot:active { transform:translateY(3px); box-shadow:inset 0 2px #e9ffff55; }
.sx-swap { display:grid; place-items:center; width:36px; height:36px; padding:0; border:2px solid #b2efff; border-radius:50%; background:linear-gradient(#5fc1ee,#1767bd); box-shadow:0 3px 0 #0b4692; }
.sx-swap .ui-icon { width:22px; height:22px; }
.sx-swap:active { transform:translateY(2px) rotate(180deg); box-shadow:none; }
.sx-floor .sx-exact { margin:0; }
.sx-floor .sx-exact summary { font-size:12px; }
.sx-floor .sx-exact p { margin:5px 0 0; }
.sx-floor .floor-forecast { margin:0; border-width:2px; border-radius:14px; }

.sx-roster { display:grid; gap:9px; margin-top:12px; padding:12px; border:3px solid #9eeaff; border-radius:22px; color:#fff; background:linear-gradient(170deg,#1d6cb0f2,#0a3f7ef5); box-shadow:inset 0 2px #eaffff66,0 5px 0 #08376f; }
.sx-roster header { display:grid; gap:3px; }
.sx-roster header strong { font:16px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 1px 0 #0d4e98; }
.sx-roster header small { color:#cdeeff; font-size:11px; line-height:1.35; }
.sx-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.sx-pick { position:relative; display:grid; justify-items:center; align-content:start; gap:3px; min-width:0; padding:8px 3px 7px; border:2px solid var(--tb,#b2efff); border-radius:14px; color:#fff; background:linear-gradient(var(--t1,#62c6f3) -60%,var(--t2,#1767bd) 70%); box-shadow:0 3px 0 var(--t3,#0b4692); font:inherit; }
.sx-pick .sx-ava { width:52px; height:52px; }
.sx-pick strong { max-width:100%; overflow:hidden; font:12px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 0 #0006; }
.sx-pick small { justify-content:center; max-width:100%; color:#fff4c9; font-size:9px; }
.sx-pick small .skill-art { width:14px; height:14px; }
.sx-pick:active { transform:translateY(2px); box-shadow:none; }
.sx-pick.is-here { opacity:1; border-color:#ffe9a0; box-shadow:0 3px 0 var(--t3,#0b4692),0 0 0 3px #ffd46b88; }
.sx-pick__at, .sx-pick__used { position:absolute; top:4px; right:4px; display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:2px solid #fff3c4; border-radius:999px; color:#5a3a0a; background:linear-gradient(#ffe9a0,#f0b43c); font:10px/1 DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; }
.sx-pick__used { border-color:#cdeeff; color:#fff; background:#0b4689; font-size:9px; }
.sx-pick__tip { position:absolute; top:4px; left:4px; display:grid; place-items:center; width:20px; height:20px; border:2px solid #e4ffd8; border-radius:50%; color:#fff; background:linear-gradient(#8ff07a,#2fb54b); font-style:normal; }
.sx-pick__tip .icon { width:12px; height:12px; }
.sx-pick.is-tip:not(.is-here) { box-shadow:0 3px 0 var(--t3,#0b4692),0 0 0 2px #6fe07a88; }
.sx-pick .mastery-mark { top:auto; bottom:-3px; left:-3px; }
.siege-screen .sx-roster ~ .stance-guess { margin-top:12px; }
@media (max-width:370px) {
  .sx-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sx-enemy summary { gap:5px; padding:5px; }
  .sx-enemy .sx-ava { width:40px; height:40px; }
  .sx-slot .sx-ava { width:54px; height:54px; }
  .sx-head h2 { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) { .sx-swap:active { transform:none; } }

@keyframes sg-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@media (max-width:370px) {
  .sg-hero h1 { font-size:28px; }
  .sg-hero__stage { height:150px; }
  .sg-hero__party img { height:132px; }
  .sg-floor__team img { width:40px; height:40px; }
  .sg-floor .chance { padding-inline:6px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .sg-hero__party img { animation:none; } }

/* Weekly cup (cup.py) and the Founders Arena results: lists in the style of the boss tiers. */
.cup-tiers, .cup-table, .cup-results { list-style:none; margin:10px 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cup-tiers li, .cup-table li, .cup-results li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 10px; border-radius:12px; background:var(--c-surface-3); font-size:.85rem; }
.cup-tiers li.is-done { border:1px solid var(--c-gold); }
.cup-tiers li b, .cup-results li b { white-space:nowrap; }
.cup-results li { border:1px solid var(--c-gold); }
.cup-last { margin:10px 0; padding:10px 12px; border:2px solid var(--c-gold); border-radius:14px; background:#0b3f7be6; }
.cup-last h3 { margin:0 0 4px; font-size:1rem; }
.cup-last p { margin:0; font-size:.85rem; }

.siege-energy { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:8px; min-width:0; padding:8px 10px; border:1px solid #9bd5ff9c; border-radius:12px; background:#0a3979d9; color:#f6fbff; }
.siege-energy > .icon { width:24px; height:24px; color:#ffd77d; }
.siege-energy > span { display:grid; gap:2px; min-width:0; font-size:11px; line-height:1.25; }
.siege-energy strong { font-size:12px; }
.siege-energy .btn { grid-column:1 / -1; width:100%; min-height:36px; padding:5px 8px; font-size:11px; }
.siege-energy.is-empty { border-color:#ffd77d; background:#5a3514e8; }

/* "На очки": the lead bar under the arena, pips of the exchanges, the verdict at the end of a floor. */
.pts { display:grid; gap:6px; margin:8px 0 0; padding:8px 10px 9px; border:2px solid #9eeaff; border-radius:16px; color:#fff; background:linear-gradient(#124f8ff2,#0a3670f2); box-shadow:inset 0 2px #eaffff44; }
.pts__row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.pts__side { display:flex; align-items:baseline; gap:5px; min-width:0; }
.pts__side.is-them { justify-content:flex-end; }
.pts__side b { font:20px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #062a5c; transition:color .3s; }
.pts__side small { color:#cdeeff; font:11px/1 DraklyBold,'Trebuchet MS',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.pts.is-ahead .pts__side.is-us b, .pts.is-behind .pts__side.is-them b { color:#ffe9a0; }
.pts__pips { display:flex; gap:4px; }
.pts__pips i { width:10px; height:10px; border:2px solid #7fc9ef; border-radius:50%; background:#0b3f80; transition:background .2s,transform .2s; }
.pts__pips i.is-done { border-color:#b2efff; background:#62c6f3; }
.pts__pips i.is-now { border-color:#fff3c4; background:#ffd46b; transform:scale(1.25); }
.pts__bar { position:relative; height:12px; overflow:hidden; border:2px solid #0a3670; border-radius:999px; background:linear-gradient(90deg,#ff8f7a,#d64b4b); box-shadow:inset 0 1px 2px #0006; }
.pts__bar em { position:absolute; inset:0 auto 0 0; width:50%; border-radius:999px 0 0 999px; background:linear-gradient(90deg,#8ff0ff,#2fa6e8); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.pts__bar::after { content:''; position:absolute; top:-2px; bottom:-2px; left:50%; width:2px; background:#fff9; }
.floor-verdict { z-index:20; gap:6px; padding:16px; background:radial-gradient(circle,#1b6bb7ee,#07254dee 72%); animation-duration:2s; }
.floor-verdict.is-loss { background:radial-gradient(circle,#8a3a4aee,#2a0f22ee 72%); }
.floor-verdict__art { width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 6px 10px #0008); animation:verdict-pop .6s cubic-bezier(.2,1.4,.4,1) both; }
.floor-verdict strong { font-size:28px; }
.floor-verdict small { max-width:280px; font:14px/1.3 DraklyBold,'Trebuchet MS',sans-serif; }
.floor-verdict .floor-verdict__next { color:#bfe6ff; font:12px/1.3 inherit; }
@keyframes verdict-pop { 0% { transform:scale(.3) rotate(-12deg); opacity:0; } 100% { transform:scale(1) rotate(0); opacity:1; } }
.result-how, .sg-plan__how { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:40px; margin-top:8px; padding:6px 10px; border:2px solid #8ddcf8; border-radius:14px; color:#fff; background:#0b3f80cc; font:13px DraklyBold,'Trebuchet MS',sans-serif; }
.result-how .ui-icon, .sg-plan__how .ui-icon { width:20px; height:20px; }
.result-how .icon, .sg-plan__how .icon { width:16px; height:16px; }
.siege-screen .sg-plan .sg-plan__how { margin:0; }

/* Siege editor: the turn's exchanges, tips under the pair, the floor moves, the way to the guide. */
.sx-slot__ex { color:#bfe6ff; font:10px/1.1 DraklyBold,'Trebuchet MS',sans-serif; white-space:nowrap; }
.sx-slot.is-sel .sx-slot__ex { color:#ffe9a0; }
.sx-tips { display:grid; gap:6px; }
.sx-tip { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 10px; border:2px solid #8ddcf8; border-radius:14px; background:#0b3f80cc; }
.sx-tip > .ui-icon, .sx-tip > .skill-art { width:30px; height:30px; }
.sx-tip > span:not(.ui-icon) { display:grid; gap:2px; min-width:0; }
.sx-tip strong { font:13px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; }
.sx-tip small { color:#d6f3ff; font-size:11px; line-height:1.3; }
.sx-tip.is-order { border-color:#ffe9a0; background:linear-gradient(#5b4a12cc,#2e2a0acc); }
.sx-tip.is-good { border-color:#9ff0b0; background:#16543ccc; }
.sx-tip.is-bad { border-color:#ffab9a; background:#5a2234cc; }
.siege-screen .sx-tip .btn { min-width:0; min-height:36px; margin:0; padding:4px 10px; font-size:12px; }
.sx-moves { display:grid; gap:8px; margin-top:12px; padding:12px; border:3px solid #9eeaff; border-radius:22px; color:#fff; background:linear-gradient(170deg,#1d6cb0f2,#0a3f7ef5); box-shadow:inset 0 2px #eaffff66,0 5px 0 #08376f; }
.sx-moves header { display:grid; gap:3px; }
.sx-moves header strong { font:16px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; }
.sx-moves header small { color:#cdeeff; font-size:11px; }
.sx-moves__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.sx-move { position:relative; display:grid; justify-items:center; align-content:start; gap:4px; min-width:0; padding:10px 5px 9px; border:2px solid #8ddcf8; border-radius:14px; color:#fff; background:linear-gradient(#3a95d2,#124f8f); box-shadow:0 3px 0 #0a4485; font:inherit; text-align:center; }
.sx-move__art { display:grid; place-items:center; width:44px; height:44px; border:2px solid #b2efff; border-radius:12px; background:radial-gradient(circle at 50% 40%,#bff4ff,#1767bd); }
.sx-move__art img { width:36px; height:36px; object-fit:contain; }
.sx-move strong { font:13px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; }
.sx-move small { color:#d6f3ff; font-size:10px; line-height:1.25; }
.sx-move__tag { position:absolute; top:-9px; left:50%; padding:1px 8px; border:2px solid #e4ffd8; border-radius:999px; color:#fff; background:linear-gradient(#8ff07a,#2fb54b); font:9px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; white-space:nowrap; transform:translateX(-50%); }
.sx-move__tag.is-mine { border-color:#fff3c4; color:#5a3a0a; background:linear-gradient(#ffe9a0,#f0b43c); }
.sx-move.is-tip { border-color:#9ff0b0; }
.sx-move.is-mine { border-color:#ffe9a0; background:linear-gradient(#4aa9e0,#16609f); box-shadow:0 3px 0 #0a4485,0 0 0 3px #ffd46b88; }
.sx-move:active { transform:translateY(2px); box-shadow:none; }
.sx-guide, .cg-entry { display:grid; grid-template-columns:52px minmax(0,1fr) 18px; align-items:center; gap:10px; width:100%; margin:6px 0; padding:8px 12px 8px 8px; border:2px solid #8ddcf8; border-radius:16px; color:#fff; background:linear-gradient(160deg,#2a82c4f2,#0d4a8ef5); box-shadow:0 3px 0 #0a4c91; font:inherit; text-align:left; }
.sx-guide img, .cg-entry img { width:52px; height:52px; object-fit:contain; }
.sx-guide > span, .cg-entry > span { display:grid; gap:2px; min-width:0; }
.sx-guide strong, .cg-entry strong { font:15px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; }
.sx-guide small, .cg-entry small { color:#d6f3ff; font-size:11px; line-height:1.3; }
.sx-guide .icon, .cg-entry .icon { width:18px; height:18px; }
.cg-entry { margin:12px 0; }
.siege-card.is-planned { border-color:#ffe9a0; box-shadow:inset 0 2px #eaffff55,0 4px 0 #0a4c91,0 0 0 3px #ffd46b88; }
.siege-card__plan { position:absolute; top:-9px; left:14px; padding:1px 8px; border:2px solid #fff3c4; border-radius:999px; color:#5a3a0a; background:linear-gradient(#ffe9a0,#f0b43c); font:10px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; }
.siege-cards .siege-card { position:relative; }

/* "Как устроен бой": the combat guide. */
.cg-screen { display:grid; gap:12px; }
.cg-hero { position:relative; display:grid; gap:8px; padding:14px; overflow:hidden; border:3px solid #b0edff; border-radius:24px; color:#fff; background:radial-gradient(120% 80% at 50% 10%,#5fc1ee 0,#1d74bd 45%,#0b3f80 100%); box-shadow:inset 0 2px #eaffff8c,0 6px 0 #0a4c91,0 12px 22px #03296066; }
.cg-hero__art { justify-self:center; width:min(100%,240px); height:auto; margin:-14px 0 -26px; filter:drop-shadow(0 10px 12px #06265599); }
.cg-hero__text { display:grid; justify-items:start; gap:6px; }
.cg-hero h1 { margin:0; font:30px/1 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:-.02em; text-shadow:0 3px 0 #125390,0 5px 8px #0b3367aa; }
.cg-hero p { margin:0; color:#e6f7ff; font:14px/1.4 DraklyBold,'Trebuchet MS',sans-serif; }
.cg-facts { display:flex; flex-wrap:wrap; gap:6px; }
.cg-facts > span { display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:2px 10px 2px 6px; border:2px solid #9fe6ff; border-radius:999px; background:#0b4689e6; font:12px DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-facts .ui-icon { width:18px; height:18px; }
.cg-card { display:grid; gap:10px; padding:14px 12px; border:3px solid #9eeaff; border-radius:22px; color:#fff; background:linear-gradient(170deg,#2a82c4f2,#0b4b90f5 70%); box-shadow:inset 0 2px #eaffff66,0 5px 0 #08376f; }
.cg-card--hot { border-color:#ffe9a0; background:linear-gradient(170deg,#2f86c6f2,#0b4b90f5 70%); box-shadow:inset 0 2px #fff3c466,0 5px 0 #08376f,0 0 0 2px #ffd46b44; }
.cg-card h2 { display:flex; align-items:center; gap:8px; margin:0; font:19px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #125390; }
.cg-n { display:grid; place-items:center; flex:none; width:28px; height:28px; border:2px solid #fff3c4; border-radius:50%; color:#5a3a0a; background:linear-gradient(#ffe9a0,#f0b43c); font:14px/1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:none; }
.cg-lead { margin:0; font:14px/1.4 DraklyBold,'Trebuchet MS',sans-serif; }
.cg-note { margin:0; color:#d6f3ff; font-size:12px; line-height:1.45; }
.cg-note b { color:#fff; }
.cg-t1 { color:#ffe9a0 !important; }
.cg-t2 { color:#9ff0ff !important; }
.cg-steps { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.cg-steps li { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:10px; padding:8px 10px 8px 8px; border:2px solid #8ddcf8; border-radius:14px; background:#0b3f80cc; }
.cg-step__ico { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:radial-gradient(circle at 50% 40%,#bff4ff,#1767bd); }
.cg-step__ico img { width:40px; height:40px; object-fit:contain; }
.cg-steps div { display:grid; gap:2px; }
.cg-steps strong { font:14px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-steps small { color:#d6f3ff; font-size:12px; line-height:1.35; }
.cg-tl { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) 54px; gap:4px; margin:0; padding:0; list-style:none; }
.cg-tl__cell { display:grid; justify-items:center; gap:3px; padding:7px 2px; border:2px solid #8ddcf8; border-radius:12px; background:#0b3f80cc; }
.cg-tl__cell b { font:16px/1 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-tl__cell > span { padding:1px 6px; border-radius:999px; font:10px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; white-space:nowrap; }
.cg-tl__cell.is-t1 { border-color:#ffe9a0; }
.cg-tl__cell.is-t1 > span { color:#5a3a0a; background:#ffe9a0; }
.cg-tl__cell.is-t2 { border-color:#9ff0ff; }
.cg-tl__cell.is-t2 > span { color:#06305e; background:#9ff0ff; }
.cg-tl__end { display:grid; justify-items:center; align-content:center; gap:1px; }
.cg-tl__end img { width:40px; height:40px; object-fit:contain; }
.cg-tl__end > span { color:#ffe9a0; font:10px/1 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-win { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cg-win article { display:grid; justify-items:center; align-content:start; gap:4px; padding:10px 8px 12px; border:2px solid #8ddcf8; border-radius:16px; background:#0b3f80cc; text-align:center; }
.cg-win img { width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 4px 6px #0007); }
.cg-win strong { font:16px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-win small { color:#d6f3ff; font-size:11px; line-height:1.35; }
.cg-score { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:8px 10px; border:2px solid #9eeaff; border-radius:14px; background:#0a3670; font:13px DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-score i { position:relative; height:12px; overflow:hidden; border-radius:999px; background:linear-gradient(90deg,#ff8f7a,#d64b4b); }
.cg-score em { position:absolute; inset:0 auto 0 0; border-radius:999px 0 0 999px; background:linear-gradient(90deg,#8ff0ff,#2fa6e8); }
.cg-score__us { color:#ffe9a0; }
.cg-order { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cg-order__col { display:grid; align-content:start; gap:5px; padding:10px 8px; border:2px solid #ffe9a0; border-radius:16px; background:#5b4a1255; }
.cg-order__col.is-t2 { border-color:#9ff0ff; background:#0a4a6f66; }
.cg-order__col > strong { margin-bottom:2px; font:13px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-order__col.is-t1 > strong { color:#ffe9a0; }
.cg-order__col.is-t2 > strong { color:#9ff0ff; }
.cg-order__col > span { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:5px; font-size:12px; }
.cg-order__col .skill-art { width:22px; height:22px; }
.cg-order__col b { font-weight:800; line-height:1.15; overflow-wrap:anywhere; }
.cg-order__col em { color:#9ff0b0; font:11px DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; }
.cg-roles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.cg-role { display:grid; justify-items:center; gap:4px; padding:10px 4px; border:2px solid #8ddcf8; border-radius:16px; background:#0b3f80cc; }
.cg-role__ico { width:28px; height:28px; }
.cg-role strong { font:14px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-role > span { display:flex; align-items:baseline; gap:3px; }
.cg-role > span b { font:17px/1 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-role > span small { color:#cdeeff; font-size:10px; }
.cg-skillset { display:grid; gap:5px; }
.cg-skillset__head { display:flex; align-items:center; gap:6px; margin-top:4px; color:#cdeeff; font:12px DraklyBlack,'Trebuchet MS',sans-serif; text-transform:uppercase; letter-spacing:.05em; }
.cg-skillset__head .cg-role__ico { width:18px; height:18px; }
.cg-skill { border:2px solid #8ddcf8; border-radius:14px; background:#0b3f80cc; }
.cg-skill summary { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:52px; padding:6px 10px 6px 8px; cursor:pointer; list-style:none; }
.cg-skill summary::-webkit-details-marker { display:none; }
.cg-skill summary .skill-art { width:34px; height:34px; }
.cg-skill summary > span { display:grid; gap:1px; min-width:0; }
.cg-skill strong { font:14px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-skill small { color:#d6f3ff; font-size:11px; }
.cg-skill p { margin:0; padding:0 10px 6px 50px; color:#e6f7ff; font-size:12px; line-height:1.4; }
.cg-skill p:last-child { padding-bottom:10px; }
.cg-skill[open] { border-color:#b2efff; }
.cg-turn { padding:2px 8px; border-radius:999px; font:10px/1.3 DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; white-space:nowrap; }
.cg-turn.is-t1 { color:#5a3a0a; background:#ffe9a0; }
.cg-turn.is-t2 { color:#06305e; background:#9ff0ff; }
.cg-match { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.cg-match li { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:8px 10px; border:2px solid #9ff0b0; border-radius:14px; background:#16543ccc; }
.cg-match li.is-bad { border-color:#ffab9a; background:#5a2234cc; }
.cg-match__pair { display:flex; align-items:center; gap:2px; }
.cg-match__pair .skill-art { width:26px; height:26px; }
.cg-match__pair b { margin:0 2px; color:#ffe9a0; font:16px DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-match li > span:last-child { display:grid; gap:2px; min-width:0; }
.cg-match strong { font:13px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-match small { color:#e6f7ff; font-size:11px; line-height:1.35; }
.cg-moves, .cg-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.cg-moves li, .cg-list li { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:10px; padding:8px 10px 8px 8px; border:2px solid #8ddcf8; border-radius:14px; background:#0b3f80cc; }
.cg-cardart { display:grid; place-items:center; width:44px; height:44px; border:2px solid #b2efff; border-radius:12px; background:radial-gradient(circle at 50% 40%,#bff4ff,#1767bd); }
.cg-cardart img { width:36px; height:36px; object-fit:contain; }
.cg-list li > .ui-icon, .cg-list .cg-fx { width:40px; height:40px; object-fit:contain; justify-self:center; }
.cg-moves li > span:last-child, .cg-list li > span:last-child { display:grid; gap:2px; min-width:0; }
.cg-moves strong, .cg-list strong { font:14px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; }
.cg-moves small, .cg-list small { color:#d6f3ff; font-size:12px; line-height:1.35; }
.cg-cta .btn { width:100%; max-width:none; min-height:54px; margin:0; font-size:18px; }
.cg-cta .ui-icon { width:24px; height:24px; }
@media (max-width:370px) {
  .cg-hero h1 { font-size:26px; }
  .cg-tl { grid-template-columns:repeat(6,minmax(0,1fr)) 44px; }
  .cg-tl__cell > span { padding:1px 4px; font-size:9px; }
  .cg-order { grid-template-columns:1fr; }
  .sx-moves__list { grid-template-columns:1fr; }
  .sx-move { grid-template-columns:44px minmax(0,1fr); justify-items:start; text-align:left; }
  .sx-move__art { grid-row:span 2; }
}
@media (prefers-reduced-motion:reduce) { .floor-verdict__art { animation:none; } .pts__bar em { transition:none; } }

.result-floors { display:grid; gap:4px; margin:8px 0 0; padding:0; list-style:none; }
.result-floors li { display:grid; grid-template-columns:18px auto 1fr; align-items:center; gap:6px; padding:6px 10px; border:2px solid #9ff0b0; border-radius:12px; background:#16543ccc; font-size:12px; }
.result-floors li.is-loss { border-color:#ffab9a; background:#5a2234cc; }
.result-floors .icon { width:16px; height:16px; }
.result-floors b { font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.result-floors span { justify-self:end; color:#e6f7ff; font-family:DraklyBold,'Trebuchet MS',sans-serif; }

/* Why sieges (owner 2026-10-24): the season fund, place, estimate and the three checks of a share. */
.why-card { display:grid; grid-template-columns:64px minmax(0,1fr) 18px; align-items:center; gap:10px; width:100%; margin:10px 0 0; padding:10px 12px 10px 8px; border:3px solid #ffe08a; border-radius:20px; color:#fff; background:linear-gradient(160deg,#c9771a,#8a4210 70%,#6a300b); box-shadow:inset 0 2px #fff4c66b,0 4px 0 #5a2a08,0 9px 18px #3a1d0666; text-align:left; cursor:pointer; }
.why-card:active { transform:translateY(3px); box-shadow:inset 0 2px #fff4c66b,0 1px 0 #5a2a08; }
.why-card > img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 3px 3px #4a2206aa); }
.why-card__body { display:grid; gap:4px; min-width:0; }
.why-card__body small { color:#ffe9b0; font:10px/1 DraklyBold,'Trebuchet MS',sans-serif; letter-spacing:.04em; }
.why-card__body strong { font:16px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; overflow-wrap:anywhere; text-shadow:0 2px 0 #6a300b; }
.why-card__sub { color:#fff3d6; font-size:12px; line-height:1.3; }
.why-card__checks { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.why-card__checks i { display:inline-flex; align-items:center; gap:3px; min-height:22px; padding:1px 8px; border:1.5px solid #ffd27a88; border-radius:999px; background:#5a2a0899; color:#ffe9b0; font:11px/1 DraklyBold,'Trebuchet MS',sans-serif; font-style:normal; }
.why-card__checks i.is-ok { border-color:#9ff08a; background:#1f5a1acc; color:#e3ffd9; }
.why-card__checks .icon { width:12px; height:12px; color:#9ff08a; }
.why-card__go { width:18px; height:18px; color:#ffe9b0; }

/* The first sieges: the goal on the result screen (siege n of 3, the third dragon). */
.first-steps { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; align-self:stretch; gap:10px 12px; margin:10px 0; padding:12px; border:2px solid #ffb35c; border-radius:var(--r-md,14px); background:linear-gradient(150deg,#7a2a12,#3d1409); text-align:left; }
.first-steps > img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 3px 3px #0008); }
.first-steps > div { display:grid; gap:5px; min-width:0; }
.first-steps strong { color:#fff; font:15px/1.2 DraklyBlack,'Trebuchet MS',sans-serif; }
.first-steps small { color:#ffd9b0; font-size:12px; }
.first-steps__pips { display:flex; gap:6px; }
.first-steps__pips i { width:28px; height:8px; border-radius:999px; background:#ffffff2e; }
.first-steps__pips i.is-done { background:linear-gradient(90deg,#ffd45c,#ff7a2a); box-shadow:0 0 6px #ff8a2a99; }

/* Stash: every balance in one sheet, drawn in the cartoon skin (the same card as tasks and the season banner).
   Each row gets its resource colour through --accent: the art socket glows with it and the number wears it. */
.stash-hero { position:relative; display:grid; justify-items:center; gap:4px; margin:-4px 0 12px; text-align:center; }
.stash-hero::before { content:''; position:absolute; top:-6px; left:50%; width:132px; height:132px; translate:-50% 0; border-radius:50%; background:radial-gradient(circle,#9cefff66 0%,#3fa6e033 45%,transparent 70%); pointer-events:none; }
.stash-sheet .stash-art { position:relative; display:block; width:96px; height:96px; margin:0; object-fit:contain; filter:drop-shadow(0 6px 6px #021b4a99); }
.stash-hero p { position:relative; margin:0; color:#d9f4ff; font-size:13px; line-height:1.3; text-shadow:0 1px 0 #0c4b92; }
.stash { display:grid; gap:10px; margin:0; padding:0 0 4px; list-style:none; }
.stash-row { --accent:#baf5ff; display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px 10px 10px; border:2px solid #92e3ff; border-radius:18px; color:white; background:linear-gradient(145deg,#2e83c3,#0e4e96 66%,#0a3675); box-shadow:inset 0 2px #fff8,0 4px 0 #0a4c94,0 8px 14px #032f6566; }
.stash-row--credits { --accent:#ffe08a; }
.stash-row--token { --accent:#ffd45c; }
.stash-row--biomass { --accent:#91f3ea; }
.stash-row--energy { --accent:#aaf2ff; }
.stash-row--fire { --accent:#ffb07a; }
.stash-row--sparks { --accent:#ffd45c; }
.stash-row--dust { --accent:#efb8ff; }
.stash-row--pumpkin { --accent:#ffa24a; }
.stash-row__art { display:grid; place-items:center; width:56px; height:56px; border:2px solid color-mix(in srgb,var(--accent) 70%,#0a3675); border-radius:50%; background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 38%,transparent) 0%,#0b3b7c 72%); box-shadow:inset 0 3px 6px #021b4a99,0 0 12px color-mix(in srgb,var(--accent) 35%,transparent); }
.stash-row__art > img, .stash-row__art > .ui-icon, .stash-row__art > svg, .stash-row__art .icon, .stash-row__art .stash-row__egg { width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 2px 2px #0007); }
.stash-row__text { display:grid; justify-items:start; gap:3px; min-width:0; }
.stash-row__text strong { font:15px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; color:#fff; text-shadow:0 2px 0 #0c4b92; }
.stash-row__text small { color:#d9f4ff; font-size:12px; line-height:1.3; }
.stash-row__value { display:grid; justify-items:end; gap:6px; min-width:44px; }
.stash-row__value b { color:var(--accent); font:22px/1 DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; text-shadow:0 2px 0 #0a3675,0 0 10px color-mix(in srgb,var(--accent) 40%,transparent); }
.stash-row__bar { display:block; width:64px; height:8px; overflow:hidden; border:1px solid #8de2ff99; border-radius:999px; background:#08306a; box-shadow:inset 0 1px 2px #0009; }
.stash-row__bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,#1469b3),var(--accent)); box-shadow:0 0 6px var(--accent); }
.stash-row__go { display:inline-flex; align-items:center; gap:4px; min-height:30px; margin:4px 0 0; padding:0 12px; border:2px solid #b1f0ff; border-radius:999px; color:#fff; font:12px/1 DraklyBold,'Trebuchet MS',sans-serif; text-shadow:0 1px 0 #0d4e98; background:linear-gradient(#68c6ec,#0e68b4); box-shadow:inset 0 2px #dbfaff88,0 3px 0 #0a438b; cursor:pointer; }
.stash-row__go span { font-size:15px; line-height:1; }
.stash-row__go:active { translate:0 2px; box-shadow:inset 0 2px #dbfaff88,0 1px 0 #0a438b; }
@media (max-width:360px) { .stash-row { grid-template-columns:48px minmax(0,1fr) auto; gap:10px; } .stash-row__art { width:48px; height:48px; } .stash-row__art > img, .stash-row__art > .ui-icon, .stash-row__art .icon, .stash-row__art .stash-row__egg { width:36px; height:36px; } .stash-row__value b { font-size:19px; } }

/* Target tiers (targets.py): the picker on the sieges home and the gain line on the dragon sheet. */
.tier-pick { margin:10px 0 4px; }
.tier-pick__head { margin:0 0 6px; font-size:13px; text-align:center; opacity:.9; }
.tier-pick__row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tier-btn { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px 8px; border:2px solid #a6eeff; border-radius:14px; color:#fff; font:inherit; background:linear-gradient(#52a9dc,#0d60ab); box-shadow:inset 0 2px #e9fbff8a,0 3px 0 #08417f; cursor:pointer; }
.tier-btn strong { font-size:13px; }
.tier-btn b { font-size:15px; }
.tier-btn small { font-size:11px; opacity:.9; }
.tier-btn.tier-strong { background:linear-gradient(#8a6ae0,#4b2a9e); border-color:#d7c8ff; box-shadow:inset 0 2px #f1e9ff8a,0 3px 0 #2e1670; }
.tier-btn.tier-elite { background:linear-gradient(#f3b73a,#c9771a 60%,#9a4f12); border-color:#ffe08a; box-shadow:inset 0 2px #fff6,0 3px 0 #6e3a0a; }
.tier-btn.is-best { outline:2px solid #fff; outline-offset:2px; }
.tier-btn em { position:absolute; top:-9px; right:-4px; padding:1px 6px; border-radius:8px; font-size:10px; font-style:normal; color:#0a2a40; background:#bff6ff; }
.tier-btn:disabled { opacity:.6; }
.tier-gain { margin:6px 0 0; font-size:12px; opacity:.9; }