/* Арена и сцена поимки. Все цвета — из theme/theme.css (единый стиль «аниме-кел»). */
:root {
  --arena-scene: url('../images/anime-arena.jpg');
  --catch-scene: url('../assets/anime-flower-meadow.jpg');   /* дикий покемон ловится на поляне, а не на стадионе */
}
.ash-sprite { display:block; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.hero .hero-body { display:block; width:32px; height:72px; font-size:0; filter:none; }
.hero .hero-body .ash-sprite { width:100%; height:100%; }
.hero .hero-cap { display:none; }
.hero .hero-shadow { bottom:-3px; width:26px; }

/* ---------- Сцена поимки ---------- */
.encounter .encounter-stage { height:clamp(245px, 64vw, 310px); background-image:linear-gradient(180deg,rgba(8,11,31,.05),rgba(8,11,31,.25)),var(--catch-scene); background-size:cover; background-position:center 72%; border:2px solid var(--ink-line); border-radius:var(--r-lg); box-shadow:var(--shadow-cel-sm); }
.encounter-stage::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 -25px 40px rgba(8,11,31,.35); }
.encounter .enc-hero { left:8%; bottom:10%; font-size:0; height:54%; width:25%; z-index:2; filter:none; }
.enc-hero .ash-sprite { width:100%; height:100%; }
.encounter .enc-mon { right:11%; top:36%; z-index:2; }
.encounter .enc-mon-emoji img { width:108px!important; height:108px!important; }
.encounter .enc-ball { z-index:6; }
.encounter .encounter-bg { background-image:linear-gradient(rgba(8,11,31,.72),rgba(8,11,31,.88)),var(--catch-scene)!important; background-size:cover!important; background-position:center!important; }
.encounter .encounter-card { max-height:calc(100dvh - 28px); overflow-y:auto; }
.catch-scene-label { position:absolute; left:12px; top:12px; color:var(--text); background:var(--ink-900); border:2px solid var(--ink-line); border-radius:var(--r-pill); padding:5px 11px; font-size:10px; font-weight:900; letter-spacing:.12em; z-index:3; box-shadow:var(--shadow-cel-sm); }

/* ---------- Экран арен ---------- */
.arena-page-header { margin-bottom:18px; }
.arena-page-header h1 { font-size:26px; font-weight:900; letter-spacing:-.02em; margin:4px 0; text-shadow:0 2px 0 var(--ink-line); }
.arena-page-header > p:last-child { font-size:13px; color:var(--text-2); }
.duel-eyebrow { display:flex; gap:7px; align-items:center; color:var(--sun); font-size:11px; font-weight:900; letter-spacing:.14em; text-shadow:0 1px 0 var(--ink-line); }
.duel-eyebrow i { width:8px; height:8px; border-radius:50%; background:var(--sun); border:1.5px solid var(--ink-line); }
.arena-feature { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; padding:24px 22px; border-radius:var(--r-xl); background:linear-gradient(95deg,rgba(14,19,51,.92),rgba(14,19,51,.15)),var(--arena-scene) center 43%/cover; border:2px solid var(--ink-line); box-shadow:var(--shadow-float), inset 0 0 0 2px rgba(255,255,255,.08); min-height:155px; }
.arena-feature span:not(.arena-feature-badge) { font-size:10px; letter-spacing:.14em; font-weight:900; color:var(--sun); }
.arena-feature strong { display:block; font-size:26px; font-weight:900; line-height:1.25; margin:5px 0; color:var(--text); text-shadow:0 2px 0 var(--ink-line); }
.arena-feature p { font-size:12px; color:var(--text-2); line-height:1.6; }
.arena-feature-badge { font-size:70px; color:var(--sun); text-shadow:0 4px 0 var(--ink-line); transform:rotate(12deg); }
.arena-list-heading { display:flex; justify-content:space-between; align-items:center; margin:24px 0 12px; }
.arena-list-heading h2 { font-weight:900; font-size:16px; text-shadow:0 2px 0 var(--ink-line); }
.arena-list-heading span { font-size:12px; color:var(--text-2); }
.arena-list { display:grid; gap:12px; }
.arena-list-card { display:grid; grid-template-columns:1fr 100px; border:2px solid var(--panel-border); background:var(--panel); backdrop-filter:blur(10px); border-radius:var(--r-lg); padding:16px 16px 12px; box-shadow:var(--shadow-cel), var(--panel-hi); overflow:hidden; }
.arena-list-card.is-defeated { border-color:rgba(var(--sun-rgb),.6); }
.arena-number { font-size:10px; letter-spacing:.12em; color:var(--mute); font-weight:900; }
.is-defeated .arena-number { color:var(--sun); }
.arena-list-copy h3 { font-size:17px; font-weight:900; margin:6px 0 3px; color:var(--text); }
.arena-list-copy p { font-size:12px; color:var(--text-2); }
.arena-list-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.arena-list-tags span { background:var(--chip); border-radius:var(--r-pill); border:1.5px solid var(--chip-border); padding:2px 8px; color:var(--text-2); font-size:11px; font-weight:800; }
.arena-list-art { display:grid; place-items:center; background:radial-gradient(ellipse,rgba(var(--sun-rgb),.16),transparent 65%); }
.arena-challenge { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; margin-top:12px; border-radius:var(--r-md); background:var(--sun); border:2px solid var(--ink-line); box-shadow:var(--shadow-cel-sm), inset 0 2px 0 rgba(255,255,255,.3); color:var(--ink-950); padding:9px 12px; font-size:13px; font-weight:900; transition:transform .12s, filter .15s; cursor:pointer; }
.arena-challenge:hover:not(:disabled) { filter:brightness(1.06); }
.arena-challenge:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.arena-challenge:disabled { background:var(--ink-700); color:var(--mute); cursor:not-allowed; box-shadow:none; }
.arena-resume { width:100%; display:flex; align-items:center; justify-content:space-between; text-align:left; margin-top:14px; padding:13px; border-radius:var(--r-md); border:2px solid var(--ink-line); background:rgba(var(--sun-rgb),.16); box-shadow:var(--shadow-cel-sm); color:var(--text); cursor:pointer; }
.arena-resume small { display:block; font-size:11px; color:var(--text-2); margin-top:4px; }
.arena-resume strong,.arena-resume b { font-size:13px; color:var(--sun); }
.arena-empty { padding:22px 8px; text-align:center; font-size:13px; color:var(--text-2); }

/* ---------- Окно боя ---------- */
.duel-overlay { position:fixed; inset:0; z-index:90; display:grid; place-items:center; overflow-y:auto; overscroll-behavior:contain; padding:18px 12px max(18px,env(safe-area-inset-bottom)); background:rgba(8,11,31,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:duel-overlay-in .35s ease both; }
.duel-panel,.duel-picker { width:100%; max-width:510px; max-height:calc(100dvh - 36px); overflow-y:auto; border-radius:var(--r-xl); background:var(--panel-solid); border:2px solid var(--ink-line); box-shadow:var(--shadow-float), inset 0 0 0 2px rgba(255,255,255,.06); color:var(--text); animation:duel-panel-in .5s cubic-bezier(.2,.8,.2,1) both; outline:none; scrollbar-width:thin; scrollbar-color:var(--ink-600) transparent; }
.duel-header { display:flex; justify-content:space-between; align-items:center; padding:18px 20px 14px; }
.duel-header h2 { font-size:20px; font-weight:900; margin:4px 0 2px; text-shadow:0 2px 0 var(--ink-line); }
.duel-header small { color:var(--mute); font-size:11px; }
.duel-close { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:var(--r-md); background:var(--ink-600); border:2px solid var(--ink-line); box-shadow:var(--shadow-cel-sm); font-size:22px; line-height:1; color:var(--text); cursor:pointer; }
.duel-close:disabled { opacity:.4; cursor:wait; }
.duel-stage { position:relative; height:clamp(265px,72vw,335px); overflow:hidden; background:var(--arena-scene) center 65%/cover #76a36a; isolation:isolate; border-top:2px solid var(--ink-line); border-bottom:2px solid var(--ink-line); }
.duel-stage-shade { position:absolute; inset:0; background:linear-gradient(rgba(8,11,31,.12),transparent 35%,rgba(8,11,31,.38)); z-index:0; }
.duel-round { position:absolute; top:14px; left:14px; font-size:11px; letter-spacing:.12em; color:var(--ink-950); padding:4px 11px; background:var(--sun); border:2px solid var(--ink-line); border-radius:var(--r-pill); z-index:3; font-weight:900; box-shadow:var(--shadow-cel-sm); }
.duel-health { position:absolute; width:46%; max-width:216px; padding:9px 11px 7px; background:rgba(14,19,51,.92); border:2px solid var(--ink-line); border-radius:var(--r-md); box-shadow:var(--shadow-cel-sm), inset 0 2px 0 rgba(255,255,255,.07); z-index:5; }
.duel-health--opponent { right:12px; top:12px; }
.duel-health--player { left:12px; bottom:10px; }
.duel-health-heading { display:flex; justify-content:space-between; gap:6px; align-items:center; font-size:12px; }
.duel-health-heading strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:900; }
.duel-health-heading > span { white-space:nowrap; color:var(--sun); font-size:11px; font-weight:900; }
.duel-hp-track { height:9px; border-radius:var(--r-pill); background:var(--track); border:1.5px solid var(--ink-line); overflow:hidden; margin:6px 0 4px; }
.duel-hp-track > span { display:block; height:100%; border-radius:var(--r-pill); transition:width .7s cubic-bezier(.16,1,.3,1),background .7s; box-shadow:inset 0 2px 0 rgba(255,255,255,.35); }
.duel-health-foot { display:flex; justify-content:space-between; color:var(--text-2); font-size:10px; font-weight:800; }
.duel-platform { position:absolute; border-radius:50%; border:3px solid rgba(255,255,255,.55); transform:rotateX(48deg); background:radial-gradient(ellipse,rgba(255,255,255,.28),transparent 70%); z-index:0; }
.duel-platform--enemy { width:35%; height:22%; right:5%; top:52%; }
.duel-platform--player { width:44%; height:27%; left:6%; bottom:14%; }
.duel-fighter { position:absolute; display:grid; place-items:center; z-index:2; transform-origin:50% 90%; }
.duel-fighter--enemy { right:6%; top:22%; width:36%; height:48%; }
.duel-fighter--player { left:11%; bottom:19%; width:42%; height:49%; }
.duel-fighter img { max-width:100%; max-height:100%; object-fit:contain; filter:var(--art-outline) var(--art-ground)!important; animation:duel-idle 3.7s ease-in-out infinite; }
.duel-fighter--enemy img { animation-delay:-1.6s; }
.duel-trainer { position:absolute; left:1%; bottom:19%; width:13%; height:39%; z-index:1; }
.duel-fainted { transition:opacity .75s,filter .75s; opacity:.25; filter:grayscale(1); }
.duel-fainted img { animation:none; }
.duel-stage[data-effect="attack"][data-actor="player"] .duel-fighter--player { animation:duel-lunge-player 1.25s ease both; }
.duel-stage[data-effect="attack"][data-actor="opponent"] .duel-fighter--enemy { animation:duel-lunge-enemy 1.25s ease both; }
.duel-stage[data-effect="attack"][data-actor="player"] .duel-fighter--enemy,
.duel-stage[data-effect="attack"][data-actor="opponent"] .duel-fighter--player { animation:duel-hit 1.2s ease both; }
.duel-fx { position:absolute; inset:0; pointer-events:none; z-index:4; }
.duel-projectile { position:absolute; width:32px; height:32px; border-radius:50%; background:radial-gradient(circle,#fff 18%,var(--attack-color) 20%,var(--attack-color) 62%,transparent 64%); box-shadow:0 0 0 2px var(--ink-line),0 0 24px var(--attack-color); }
[data-actor="player"] .duel-projectile { left:30%; top:55%; animation:duel-bolt-right 1.1s ease both; }
[data-actor="opponent"] .duel-projectile { left:71%; top:42%; animation:duel-bolt-left 1.1s ease both; }
.duel-impact { position:absolute; width:84px; height:84px; border:5px solid var(--attack-color); border-radius:50%; box-shadow:0 0 0 2px var(--ink-line), inset 0 0 0 2px var(--ink-line), 0 0 22px var(--attack-color); animation:duel-impact .75s .32s ease-out both; }
[data-actor="player"] .duel-impact { left:66%; top:31%; }
[data-actor="opponent"] .duel-impact { left:20%; top:43%; }
.duel-damage { position:absolute; color:#fff; font-size:32px; line-height:1; font-weight:900; -webkit-text-stroke:2px var(--ink-line); paint-order:stroke fill; text-shadow:0 3px 0 var(--ink-line); animation:duel-damage 1s .32s ease-out both; }
.duel-damage small { display:block; margin-top:5px; color:var(--sun); font-size:11px; letter-spacing:.12em; text-align:center; -webkit-text-stroke:1px var(--ink-line); }
[data-actor="player"] .duel-damage { left:70%; top:25%; }
[data-actor="opponent"] .duel-damage { left:27%; top:36%; }
.duel-shield { position:absolute; width:30%; height:48%; left:15%; top:27%; border-radius:45%; border:3px solid var(--sky); background:radial-gradient(ellipse,rgba(var(--sky-rgb),.08),rgba(var(--sky-rgb),.35)); box-shadow:0 0 0 2px var(--ink-line),0 0 24px rgba(var(--sky-rgb),.6); animation:duel-shield 1.3s ease both; z-index:3; }
.duel-body { padding:16px 18px 14px; }
.duel-message { min-height:57px; display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:var(--r-md); background:var(--ink-900); border:2px solid var(--ink-line); }
.duel-message p { font-size:13px; line-height:1.6; color:var(--text); margin:0; }
.duel-signal { display:block; width:9px; height:9px; flex:0 0 9px; margin-top:5px; border-radius:50%; background:var(--leaf); border:1.5px solid var(--ink-line); }
.duel-signal.busy { background:var(--sun); animation:duel-signal 1s ease-in-out infinite; }
.duel-command-heading { display:flex; align-items:center; justify-content:space-between; margin:16px 0 10px; }
.duel-command-heading strong { font-size:14px; font-weight:900; }
.duel-energy { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:var(--text-2); }
.duel-energy i { display:inline-block; height:12px; width:9px; border-radius:3px; background:var(--track); border:1.5px solid var(--ink-line); transform:skewX(-10deg); }
.duel-energy i.filled { background:var(--sun); }
.duel-moves { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.duel-move { display:flex; gap:9px; align-items:center; padding:12px 10px; border-radius:var(--r-md); background:var(--ink-700); border:2px solid var(--ink-line); box-shadow:var(--shadow-cel-sm), inset 0 2px 0 rgba(255,255,255,.1); text-align:left; position:relative; cursor:pointer; color:var(--text); transition:transform .12s, filter .15s; min-height:66px; }
.duel-move:hover:not(:disabled) { filter:brightness(1.12); }
.duel-move:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.duel-move:disabled { opacity:.45; cursor:not-allowed; }
.duel-move strong { font-size:13px; font-weight:900; display:block; line-height:1.3; }
.duel-move small { font-size:11px; color:var(--text-2); display:block; line-height:1.4; margin-top:3px; }
.duel-move b { position:absolute; top:5px; right:7px; font-size:10px; opacity:.45; }
.duel-move-symbol { font-size:24px; flex:0 0 26px; color:var(--text-2); text-align:center; }
.duel-move--skill { box-shadow:var(--shadow-cel-sm), inset 4px 0 0 var(--leaf); }
.duel-move--skill .duel-move-symbol { color:var(--leaf); }
.duel-move--burst { box-shadow:var(--shadow-cel-sm), inset 4px 0 0 var(--peach); }
.duel-move--burst .duel-move-symbol { color:var(--peach); }
.duel-move--guard { box-shadow:var(--shadow-cel-sm), inset 4px 0 0 var(--sky); }
.duel-move--guard .duel-move-symbol { color:var(--sky); }
.duel-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:12px 1px 0; font-size:11px; color:var(--mute); }
.duel-foot button { padding:6px; font-size:12px; font-weight:800; color:var(--text-2); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.duel-error { border:2px solid var(--ink-line); border-radius:var(--r-md); color:var(--bad-soft); background:#5a1a2b; margin:10px 0; padding:11px; font-size:13px; font-weight:800; }
.duel-result { margin-top:12px; text-align:center; padding:16px 8px 0; }
.duel-result h3 { font-size:22px; font-weight:900; margin:4px 0; text-shadow:0 2px 0 var(--ink-line); }
.duel-result > p { color:var(--text-2); font-size:13px; line-height:1.6; margin:8px 0 15px; }
.duel-result-mark { font-size:38px; color:var(--sky); text-shadow:0 3px 0 var(--ink-line); }
.is-win .duel-result-mark { color:var(--sun); }
.duel-rewards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:17px 0; }
.duel-rewards > span { border:2px solid var(--ink-line); background:var(--ink-700); border-radius:var(--r-md); padding:12px 4px; color:var(--sun); font-weight:900; font-size:19px; box-shadow:var(--shadow-cel-sm); }
.duel-rewards small { display:block; color:var(--text-2); font-weight:800; font-size:11px; margin-top:3px; }
.duel-log { margin-top:14px; font-size:12px; border-top:2px solid var(--ink-700); padding-top:10px; color:var(--text-2); }
.duel-log summary { cursor:pointer; font-weight:800; }
.duel-log ol { padding:10px 15px 4px; max-height:160px; overflow-y:auto; line-height:1.7; }
.duel-picker { padding:22px 20px; max-width:460px; }
.duel-picker > header { display:flex; justify-content:space-between; align-items:center; }
.duel-picker h2 { font-size:21px; font-weight:900; margin-top:4px; text-shadow:0 2px 0 var(--ink-line); }
.duel-picker-hint { color:var(--text-2); font-size:13px; line-height:1.6; margin:14px 0; }
.duel-roster { display:grid; gap:8px; max-height:46dvh; overflow-y:auto; padding:2px 2px 4px; margin-bottom:18px; }
.duel-roster-card { display:flex; gap:12px; align-items:center; text-align:left; background:var(--ink-800); border:2px solid var(--ink-line); box-shadow:var(--shadow-cel-sm); padding:10px 13px; border-radius:var(--r-md); color:var(--text); cursor:pointer; }
.duel-roster-card.selected { background:rgba(var(--sun-rgb),.14); box-shadow:var(--shadow-cel-sm), inset 0 0 0 2px var(--sun); }
.duel-roster-card:disabled { opacity:.4; cursor:not-allowed; }
.duel-roster-card > span { flex:1; min-width:0; }
.duel-roster-card strong { display:block; font-size:14px; font-weight:900; }
.duel-roster-card small { display:block; font-size:11px; color:var(--text-2); margin-top:3px; }
.duel-roster-card i { width:20px; height:20px; border-radius:50%; border:2px solid var(--ink-line); background:var(--ink-700); font-size:11px; font-style:normal; display:grid; place-items:center; color:var(--ink-950); }
.duel-roster-card.selected i { background:var(--sun); }
.duel-panel button:focus-visible,.duel-picker button:focus-visible,.arena-page button:focus-visible { outline:3px solid var(--sun); outline-offset:3px; }

@keyframes duel-overlay-in { from { opacity:0; } to { opacity:1; } }
@keyframes duel-panel-in { from { opacity:0; transform:translateY(24px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes duel-idle { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-5px) rotate(1deg); } }
@keyframes duel-lunge-player { 0%,100% { transform:translate(0); } 20% { transform:translate(-7px,3px) rotate(-4deg); } 36% { transform:translate(32px,-10px) rotate(5deg); } 65% { transform:translate(0); } }
@keyframes duel-lunge-enemy { 0%,100% { transform:translate(0); } 20% { transform:translate(7px,-3px) rotate(4deg); } 36% { transform:translate(-26px,9px) rotate(-5deg); } 65% { transform:translate(0); } }
@keyframes duel-hit { 0%,29%,100% { filter:none; transform:translateX(0); } 33%,44% { filter:brightness(2); transform:translateX(-6px); } 38%,49% { filter:brightness(.7); transform:translateX(6px); } 65% { filter:none; transform:none; } }
@keyframes duel-bolt-right { 0%,12% { opacity:0; transform:scale(.2); } 24% { opacity:1; } 44% { transform:translate(170px,-45px) scale(1.5); opacity:1; } 65%,100% { transform:translate(170px,-45px) scale(2); opacity:0; } }
@keyframes duel-bolt-left { 0%,12% { opacity:0; transform:scale(.2); } 24% { opacity:1; } 44% { transform:translate(-170px,45px) scale(1.5); opacity:1; } 65%,100% { transform:translate(-170px,45px) scale(2); opacity:0; } }
@keyframes duel-impact { from { transform:scale(.1); opacity:0; } 30% { opacity:1; } to { transform:scale(1.7); opacity:0; } }
@keyframes duel-damage { from { transform:translateY(18px) scale(.7); opacity:0; } 20% { opacity:1; transform:translateY(0) scale(1.2); } 65% { opacity:1; } to { transform:translateY(-30px) scale(1); opacity:0; } }
@keyframes duel-shield { 0% { opacity:0; transform:scale(.7); } 30%,65% { opacity:.85; transform:scale(1); } 100% { opacity:0; transform:scale(1.1); } }
@keyframes duel-signal { 50% { opacity:.3; } }
@media (max-width:360px) { .duel-body { padding:13px 11px; } .duel-move { padding:10px 7px; gap:5px; } .duel-move strong { font-size:12px; } .duel-move small { font-size:10px; } .duel-header { padding:15px; } .duel-health { padding:7px 8px; } .duel-health-heading { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .duel-panel,.duel-overlay,.duel-fighter,.duel-fighter img,.duel-fx *,.duel-shield,.duel-signal { animation:none!important; } .duel-hp-track > span { transition:none; } .duel-fx { display:none; } }