/* Siege v2: the game builds the plan, one chance signal per floor; battle v2: skill cards and pacing. */

/* Plan summary (normal siege) */
.plan-summary { display:grid; gap:8px; margin:12px 0; padding:12px; border:2px solid #8bdbf6; border-radius:16px; background:linear-gradient(#2f83c0,#0d5096); box-shadow:inset 0 2px #e9ffff69,0 3px 0 #0a478e; }
.plan-summary-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 8px; }
.plan-summary-head small { color:#cdeeff; font-size:11px; }
.plan-row { display:grid; grid-template-columns:28px auto 1fr auto; align-items:center; gap:8px; width:100%; min-height:60px; padding:6px 8px; border:2px solid #8de2ff88; border-radius:12px; color:#fff; background:#0b3f7ccc; text-align:left; cursor:pointer; }
.plan-row:hover { border-color:#b7f5ff; }
.plan-row-floor { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#1b6bb7; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.plan-row-pair { display:flex; }
.plan-row-pair img { width:40px; height:40px; border-radius:10px; border:2px solid #8de2ff; background:#123b78; object-fit:cover; }
.plan-row-pair img + img { margin-left:-10px; }
.plan-row-text { display:grid; gap:2px; min-width:0; }
.plan-row-text strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-row-text small { color:#cdeeff; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chance { padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; color:#07254d; }
.chance--high { background:#7ef0bf; }
.chance--even { background:#ffe27a; }
.chance--low { background:#ff9d8a; }
.chance--wait { background:#cdeeff; }
.plan-verdict { margin:2px 0 0; color:#eaf9ff; font-size:13px; }
.plan-tools { display:flex; justify-content:flex-end; gap:8px; margin:8px 0; }

/* Picker: the game's own pick for this floor */
.siege-picker-options button { position:relative; }
.siege-picker-options button.is-advised { border-color:#7ef0bf; box-shadow:0 0 0 2px #7ef0bf66; }
.advice-badge { position:absolute; top:6px; right:6px; padding:2px 8px; border-radius:999px; color:#07254d; background:#7ef0bf; font-size:10px; font-style:normal; font-weight:700; }

/* Stance guess is optional and folded */
details.stance-guess > summary { cursor:pointer; list-style:none; }
details.stance-guess > summary::-webkit-details-marker { display:none; }
details.stance-guess:not([open]) > summary::after { content:'▾'; float:right; }

/* Battle v2: skill card, combo, decisive exchange, floor cleared */
.skill-card { position:absolute; left:50%; top:38%; z-index:6; display:flex; align-items:center; gap:10px; min-width:min(86%,340px); padding:10px 14px; border:3px solid #b7f5ff; border-radius:18px; color:#fff; background:linear-gradient(#2f83c0f2,#0d5096f2); box-shadow:0 6px 0 #0a478e,0 12px 28px #00184188; transform:translate(-50%,-50%) scale(.7); opacity:0; pointer-events:none; }
.skill-card.theirs { border-color:#ffb3a3; background:linear-gradient(#b8463ef2,#6e1f2bf2); box-shadow:0 6px 0 #4c1220,0 12px 28px #00184188; }
.skill-card.show { animation:skill-card-in var(--skill-card-ms,1000ms) ease-out forwards; }
.skill-card .skill-art,.skill-card img { width:52px; height:52px; flex:none; }
.skill-card div { display:grid; gap:2px; }
.skill-card small { color:#d8f3ff; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.skill-card strong { font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-size:20px; line-height:1.05; }
.skill-card em { color:#eaf9ff; font-size:12px; font-style:normal; }
.skill-card .combo { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; color:#3a2300; background:#ffd84d; font-size:12px; font-family:DraklyBlack,'Trebuchet MS',sans-serif; animation:combo-pop .5s ease-out; }
@keyframes skill-card-in { 0% { opacity:0; transform:translate(-50%,-50%) scale(.7); } 14% { opacity:1; transform:translate(-50%,-50%) scale(1.06); } 22% { transform:translate(-50%,-50%) scale(1); } 82% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-60%) scale(.96); } }
@keyframes combo-pop { 0% { transform:scale(.3); } 70% { transform:scale(1.25); } 100% { transform:scale(1); } }
.combat-arena.is-decisive { animation:decisive-zoom 1.2s ease-in-out; }
.combat-arena.is-decisive::after { content:attr(data-decisive); position:absolute; left:50%; top:12px; z-index:7; padding:4px 12px; border-radius:999px; color:#3a2300; background:#ffd84d; font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-size:13px; transform:translateX(-50%); }
@keyframes decisive-zoom { 0%,100% { transform:scale(1); } 40% { transform:scale(1.04); } }
.combat-arena.is-ko { animation:ko-shake .5s linear; }
@keyframes ko-shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(3px); } }
.floor-cleared-banner { position:absolute; inset:0; z-index:8; display:grid; place-items:center; align-content:center; gap:4px; color:#fff; background:radial-gradient(circle,#1b6bb7cc,#07254dcc 70%); text-align:center; animation:cleared-in 1.6s ease-out forwards; pointer-events:none; }
.floor-cleared-banner strong { font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-size:30px; text-shadow:0 3px #0c4b92; }
.floor-cleared-banner small { color:#d8f3ff; font-size:13px; }
@keyframes cleared-in { 0% { opacity:0; transform:scale(.8); } 18% { opacity:1; transform:scale(1.05); } 30% { transform:scale(1); } 85% { opacity:1; } 100% { opacity:0; } }

/* Result v2: near miss, best moment, season progress */
.near-miss { margin:12px 0; padding:12px; border:2px solid #ffd84d; border-radius:16px; background:linear-gradient(#5b3d12cc,#2e1f0acc); text-align:left; }
.near-miss strong { display:block; color:#ffe27a; font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-size:18px; }
.near-miss p { margin:4px 0 10px; color:#fff3d6; font-size:13px; }
.best-moment { margin:12px 0; padding:12px; border:2px solid #8bdbf6; border-radius:16px; background:linear-gradient(#2f83c0,#0d5096); text-align:left; }
.best-moment-body { display:flex; align-items:center; gap:10px; margin:6px 0 10px; }
.best-moment-body .skill-art,.best-moment-body img { width:44px; height:44px; flex:none; }
.best-moment-body strong { display:block; font-size:15px; }
.best-moment-body small { color:#d8f3ff; font-size:12px; }
.season-progress-result { margin:12px 0; text-align:left; }
.season-progress-result .bar { height:10px; border-radius:999px; background:#0b3f7c; overflow:hidden; }
.season-progress-result .bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7ef0bf,#ffe27a); transition:width 1.2s ease-out; }
.season-progress-result small { display:flex; justify-content:space-between; margin-top:4px; color:#d8f3ff; font-size:11px; }

@media (prefers-reduced-motion: reduce) {
  .skill-card.show,.combat-arena.is-decisive,.combat-arena.is-ko,.floor-cleared-banner,.skill-card .combo { animation:none; opacity:1; }
}

/* Siege hero v2: the dragons stand on the arena's stone platform instead of floating over the sky
   and a cut-off tower floor; the hero is shorter, and with an offer it shrinks to a header strip. */
.siege-screen .siege-hero { height:330px; min-height:0; background:linear-gradient(180deg,#2179b31c,#0b3f8040),url('/assets/cartoon-arena-empty.webp') center bottom / 100% auto #8fc6ef; }
.siege-screen .siege-hero::before { content:none; }
.siege-screen .siege-hero-shade { background:linear-gradient(180deg,#073b77b0 0%,#073b7740 34%,transparent 52%,#092b5d66 100%); }
/* The art is fitted to the width and pinned to the bottom, so its stone platform always sits ~29% of the
   width above the bottom edge: the pair stands there (padding-bottom in % is a share of the width). */
.siege-screen .siege-hero-party { inset:auto 0 0; height:auto; display:flex; justify-content:space-between; align-items:flex-end; padding:0 12% 26.5%; }
.siege-screen .siege-hero-party img { position:static; width:35%; height:auto; aspect-ratio:1; }
.siege-screen .siege-hero-party img.face-flip,.combat-fighters img.face-flip { scale:-1 1; }
.siege-screen .siege-hero.offer-active { height:196px; background-position:center calc(100% + 44px); }
.siege-screen .siege-hero.offer-active .siege-hero-title { right:50%; }
.siege-screen .siege-hero.offer-active .siege-hero-title h1 { font-size:27px; }
.siege-screen .siege-hero.offer-active .siege-hero-title p { display:none; }
.siege-screen .siege-hero.offer-active .siege-hero-party { inset:auto 0 0 46%; padding:0 12% calc(26.5% - 44px) 2%; }
.siege-screen .siege-hero.offer-active .siege-hero-party img { width:44%; }
@media (max-width:380px) {
  .plan-row { grid-template-columns:22px auto 1fr auto; gap:6px; padding:6px; }
  .plan-row-floor { width:22px; height:22px; font-size:12px; }
  .plan-row-pair img { width:34px; height:34px; }
  .chance { padding:3px 8px; font-size:11px; }
}
@media (max-width:380px) { .siege-screen .siege-hero { height:300px; } .siege-screen .siege-hero.offer-active { height:184px; } .siege-screen .siege-hero.offer-active .siege-hero-title h1 { font-size:24px; } }

/* App-wide: no double-tap zoom on taps (the Mini App webview could get stuck zoomed in), and inputs
   at 16px so iOS does not zoom in on focus. */
html,body { touch-action:manipulation; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
button,a,[data-action],[data-tab],summary,label,input,select,textarea { touch-action:manipulation; }
input,select,textarea { font-size:max(16px,1em); }

/* Battle: each art faces the other side by its own facing (face-flip), not a blanket mirror of the defense. */
.combat-fighters.theirs img { transform:none; animation-name:combat-idle; }
/* The pair stands above the caption (it used to hide their feet) and overlaps less, so both read. */
.combat-arena .combat-caption { bottom:8px; min-height:0; padding:7px 10px; }
.combat-arena .combat-fighters { bottom:60px; width:48%; height:36%; }
.combat-arena .combat-fighters img { width:55%; height:100%; }
.combat-arena .combat-fighters img+img { margin-left:-12%; height:90%; }

/* Tower: the dragon and the summon sigil stand on the floor's stone platform (they used to float above it). */
body.game-mode .tower-stack .tower-slot { top:22%; }
body.game-mode .tower-slot-empty,body.game-mode .tower-slot:disabled .tower-slot-empty { bottom:-14px; }

/* Tower command: one line (floor + credit upgrade) by default, the full panel on tap. */
body.game-mode .game-action-bar .action-toggle { display:flex; align-items:center; gap:6px; width:100%; min-width:0; min-height:40px; padding:0 4px; border:0; color:inherit; background:none; box-shadow:none; font:inherit; text-align:left; cursor:pointer; }
body.game-mode .game-action-bar .action-toggle > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.game-mode .game-action-bar .action-toggle .panel-chevron { flex:none; width:16px; height:16px; transform:rotate(-90deg); transition:transform .2s; }
body.game-mode .game-action-bar.open .action-toggle .panel-chevron { transform:rotate(90deg); }
body.game-mode .game-action-bar.compact { display:flex; align-items:center; gap:8px; padding:6px 6px 6px 8px; }
body.game-mode .game-action-bar.compact .action-toggle { flex:1; }
body.game-mode .game-action-bar.compact #action-credit { flex:none; flex-direction:row; gap:6px; width:auto; min-height:42px; padding:6px 12px; font-size:13px; }
body.game-mode .game-action-bar.compact #action-credit .action-icon { width:18px; height:18px; }
body.game-mode .game-action-bar.compact .action-toggle small { display:none; }
/* The front ledge only covers the lip under the platform, so the dragon's feet stay visible on it. */
body.game-mode .tower-module-front.ledge { clip-path:inset(80% 0 0 0); }
/* The base overlaps the first floor less, so its defenders' names are not hidden under it. */
body.game-mode .tower-foundation { margin-top:-40px; }

/* Cartoon skin for the "Today" card and the boot screen (they kept the old dark teal and gold). */
.today-card { border:3px solid #a6edff; border-radius:20px; color:#fff; background:linear-gradient(155deg,#2a82c4f2,#0b4b90f5 72%); box-shadow:inset 0 2px #eaffff8c,0 5px 0 #0a4c91,0 10px 18px #03296066; }
.today-card__head .overline,.today-card__icon,.today-card__go { color:#c9f6ff; }
.today-card__dots i { border-color:#c9f6ffaa; }
.today-card__dots i.on { border-color:#8ce8ff; background:#8ce8ff; }
.today-card__more { color:#e6f8ff; font-family:DraklyBold,'Trebuchet MS',sans-serif; }
.today-card__item { border-top-color:#bdeeff33; color:#fff; }
.today-card__text strong { font-family:DraklyBold,'Trebuchet MS',sans-serif; }
.today-card__text small { color:#d3ecff; }
.today-card__cta { color:#fff; background:linear-gradient(#5fd0f5,#1588d0); box-shadow:inset 0 1px #ffffff99,0 2px 0 #0a4c91; text-shadow:0 1px #0b4f93; }
.boot-screen { color:#fff; background:radial-gradient(circle at 50% 38%,#4d9bd8,#1b5c9f 70%); }
.boot-screen strong { color:#fff; font-family:DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px #125390; }
.boot-screen span { color:#d7efff; }
.boot-screen button { border:0; border-radius:30px; color:#fff; background:linear-gradient(#5fd0f5,#1588d0); box-shadow:0 4px 0 #0a4c91; }
.treasury-chip { border:2px solid #a6edff; border-radius:14px; color:#fff; background:linear-gradient(155deg,#2a82c4f2,#0b4b90f5); box-shadow:inset 0 2px #eaffff70,0 3px 0 #0a4c91; }
.treasury-chip small { color:#c9f6ff; font-family:DraklyBold,'Trebuchet MS',sans-serif; }
.treasury-chip b { font:15px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #10579c; }
/* Soft shadows on numbers: a hard offset copy reads as a doubled digit. */
.today-card__count { color:#fff; background:linear-gradient(#ff9d7e,#ff6f4d); box-shadow:0 2px 4px #7a1f0f55; text-shadow:0 1px 3px #9c2f17aa; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.resource-tile strong,body.game-mode .resource-tile strong { overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px #0c4b92,0 2px 6px #0c4b9266; }
body #meters .resource-tile { gap:3px; }
@media (min-width:381px) { body #meters .resource-icon .ui-icon { width:22px; height:22px; } body #meters .resource-tile { padding-inline:4px; } body #meters .resource-tile small { letter-spacing:-.035em; } }
@media (max-width:380px) { body #meters .resource-tile strong { font-size:12.5px; letter-spacing:-.045em; } }
.overline,.eyebrow,.tag { text-shadow:0 1px 3px #104981,0 2px 6px #10498166; }
/* docs/01 "Приём этажа": the card pick before each floor of a normal siege. */
.siege-pick { display:grid; gap:12px; padding:14px 16px 20px; max-width:520px; margin:0 auto; text-align:left; }
.siege-pick > h3, .siege-pick__note { padding:8px 12px; border-radius:12px; background:#071d43d9; }
.siege-pick h3 { margin:4px 0 0; color:#fff3d6; font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-size:18px; }
.siege-pick__last { display:flex; align-items:center; gap:6px; margin:0; padding:8px 12px; border-radius:12px; background:#1d6b3acc; color:#e6ffe9; font-size:14px; }
.siege-pick__match { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.siege-pick__side { display:grid; gap:4px; padding:10px; border:2px solid #8de2ff66; border-radius:14px; background:#0c3d78cc; color:#f8fbff; font-size:13px; }
.siege-pick__side small { color:#c6e7f6; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.siege-pick__side span { display:flex; align-items:center; gap:4px; min-width:0; overflow-wrap:anywhere; }
.siege-pick__role { width:14px; height:14px; flex:none; }
.siege-cards { display:grid; gap:8px; }
.siege-card { display:grid; gap:4px; width:100%; min-height:64px; padding:12px 14px; border:2px solid #ffd84d99; border-radius:16px; background:linear-gradient(#5b3d12ee,#2e1f0aee); color:#fff3d6; text-align:left; font:inherit; cursor:pointer; box-shadow:0 4px 0 #1d1305; }
.siege-card:active { transform:translateY(2px); box-shadow:0 2px 0 #1d1305; }
.siege-card:focus-visible { outline:none; box-shadow:0 0 0 3px #ffe27a,0 4px 0 #1d1305; }
.siege-card:disabled { opacity:.6; cursor:default; }
.siege-card.is-hint { border-color:#ffe27a; background:linear-gradient(#7a5418ee,#3f2a0cee); }
.siege-card__name { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#ffe27a; font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-size:17px; }
.siege-card__hint { padding:2px 8px; border-radius:999px; background:#ffe27a; color:#3b2a13; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.siege-card small { color:#fff3d6; font-size:13px; line-height:1.35; }
.siege-pick__note { margin:0; color:#c6e7f6; font-size:12px; line-height:1.4; }
/* Step 3 "Путь дракона": the next milestone of normal sieges on the tower. */
.path-card { display:grid; gap:6px; width:100%; max-width:min(100%,440px); margin-top:8px; padding:10px 12px 12px; border:3px solid #ffd84d; border-radius:20px; color:#fff; background:linear-gradient(155deg,#6b4a14f2,#3a2608f5 72%); box-shadow:inset 0 2px #fff3c08c,0 5px 0 #2a1b05,0 10px 18px #1d130566; text-align:left; }
.path-card .overline { color:#ffe27a; }
.path-card__next { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; }
.path-card__next strong { display:block; font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-size:16px; line-height:1.2; }
.path-card__next small, .path-card__later { color:#fff3d6; font-size:12px; }
.path-card__next b { color:#ffe27a; font-size:15px; }
.path-card .mission-progress { margin:0; }
.path-card__grow { display:flex; align-items:center; gap:6px; width:100%; min-height:40px; padding:6px 10px; border:2px solid #9ff0b0; border-radius:12px; background:#1d6b3a; color:#eaffef; font:inherit; font-size:14px; text-align:left; cursor:pointer; }