/* Shared battle presentation for the Next.js preview and standalone PHP game. */
:root { --arena-scene: url('../images/anime-arena.jpg'); }
.ash-sprite { display:block; object-fit:contain; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 6px 5px #02061766); }
.hero .hero-body { display:block; width:32px; height:72px; font-size:0; }
.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,#030a1610,#06172330),var(--arena-scene); background-size:cover; background-position:center 64%; border:1px solid #ccf5df26; }
.encounter-stage::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -25px 40px #06101b66; }
.encounter .enc-hero { left:8%; bottom:10%; font-size:0; height:54%; width:25%; z-index:2; }
.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(#020817a8,#020817d9),var(--arena-scene)!important; background-size:cover!important; background-position:center!important; }
.encounter .encounter-card { max-height:calc(100dvh - 28px); overflow-y:auto; background:#091726f5; border-color:#b2dccd24; box-shadow:0 26px 100px #0009; }
.catch-scene-label { position:absolute; left:12px; top:12px; color:#f1fff6; background:#05201caa; backdrop-filter:blur(8px); border:1px solid #c8ead233; border-radius:20px; padding:6px 10px; font-size:10px; letter-spacing:.14em; z-index:3; }

.arena-page { --arena-muted:#8ba4b9; }
.arena-page-header { margin-bottom:18px; }
.arena-page-header h1 { font-size:25px; font-weight:750; letter-spacing:-.04em; margin:4px 0; }
.arena-page-header > p:last-child { font-size:12px; color:#a7b8c7; }
.duel-eyebrow { display:flex; gap:7px; align-items:center; color:#88dbcb; font-size:9px; font-weight:700; letter-spacing:.18em; }
.duel-eyebrow i { width:6px; height:6px; border-radius:50%; background:#7ee7b5; box-shadow:0 0 10px #73e5b7; }
.arena-feature { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; padding:24px 22px; border-radius:22px; background:linear-gradient(95deg,#0b263ae8,#0b263a36),var(--arena-scene) center 43%/cover; border:1px solid #c6ecdb33; box-shadow:0 15px 35px #0004; min-height:155px; }
.arena-feature span:not(.arena-feature-badge) { font-size:8px; letter-spacing:.16em; font-weight:700; color:#bafce3; }
.arena-feature strong { display:block; font-size:25px; line-height:1.3; margin:5px 0; color:white; letter-spacing:-.04em; }
.arena-feature p { font-size:11px; color:#daecec; line-height:1.6; }
.arena-feature-badge { font-size:70px; color:#ffe6a6; text-shadow:0 8px 25px #082924,0 0 24px #ffe3a455; 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:650; font-size:15px; }
.arena-list-heading span { font-size:11px; color:#afc4d0; }
.arena-list { display:grid; gap:12px; }
.arena-list-card { display:grid; grid-template-columns:1fr 100px; border:1px solid #c6ddec1c; background:linear-gradient(125deg,#0a1a29f5,#101d2be8); border-radius:20px; padding:17px 17px 12px; box-shadow:0 8px 26px #0003; overflow:hidden; }
.arena-list-card.is-defeated { border-color:#ddc27b55; }
.arena-number { font-size:8px; letter-spacing:.15em; color:#91b4b9; font-weight:700; }
.arena-list-copy h3 { font-size:16px; font-weight:700; letter-spacing:-.025em; margin:6px 0 3px; color:#f1f6fb; }
.arena-list-copy p { font-size:11px; color:#a3b7c8; }
.arena-list-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.arena-list-tags span { background:#d9eafb09; border-radius:5px; border:1px solid #d9eafb0b; padding:3px 5px; color:#b9d4df; font-size:9px; }
.arena-list-art { display:grid; place-items:center; background:radial-gradient(ellipse,#81eed422,transparent 65%); }
.arena-challenge { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; margin-top:12px; border-radius:10px; background:#d0ecde09; border:1px solid #c9f3df18; color:#c8f7e3; padding:9px 12px; font-size:11px; font-weight:650; transition:background .2s; cursor:pointer; }
.arena-challenge:hover:not(:disabled) { background:#79cfa629; }
.arena-challenge:disabled { color:#7d94a5; cursor:not-allowed; }
.arena-resume { width:100%; display:flex; align-items:center; justify-content:space-between; text-align:left; margin-top:14px; padding:13px; border-radius:14px; border:1px solid #d5b76d66; background:#b69d431f; }
.arena-resume small { display:block; font-size:10px; color:#c4b995; margin-top:4px; }
.arena-resume strong,.arena-resume b { font-size:11px; color:#ffe7a1; }
.arena-empty { padding:22px 8px; text-align:center; font-size:13px; color:#abc1ca; }

.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:#020713db; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); 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:26px; background:#091422; border:1px solid #bbd5e129; box-shadow:0 30px 100px #0009; color:#eaf3fa; animation:duel-panel-in .5s cubic-bezier(.2,.8,.2,1) both; outline:none; scrollbar-width:thin; scrollbar-color:#2b4250 transparent; }
.duel-header { display:flex; justify-content:space-between; align-items:center; padding:19px 20px 16px; }
.duel-header h2 { font-size:19px; font-weight:700; letter-spacing:-.035em; margin:4px 0 2px; }
.duel-header small { color:#8fa9ba; font-size:10px; }
.duel-close { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:10px; background:#b7cbe00a; border:1px solid #b7cbe022; font-size:22px; line-height:1; color:#cfdee8; 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; }
.duel-stage-shade { position:absolute; inset:0; background:linear-gradient(#07383122,transparent 35%,#02161f66); z-index:0; }
.duel-round { position:absolute; top:15px; left:16px; font-size:9px; letter-spacing:.17em; color:#f2ffee; padding:6px 10px; background:#05231ca6; border:1px solid #efffd744; border-radius:20px; z-index:3; font-weight:700; }
.duel-health { position:absolute; width:44%; max-width:213px; padding:10px 11px 7px; background:#081827e8; border:1px solid #cce9db40; border-radius:12px; box-shadow:0 4px 20px #0003; z-index:5; backdrop-filter:blur(10px); }
.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:11px; }
.duel-health-heading strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:700; }
.duel-health-heading > span { white-space:nowrap; color:#ffdf9b; font-size:9px; }
.duel-hp-track { height:6px; border-radius:8px; background:#ffffff16; overflow:hidden; margin:7px 0 4px; }
.duel-hp-track > span { display:block; height:100%; border-radius:8px; transition:width .7s cubic-bezier(.16,1,.3,1),background .7s; box-shadow:0 0 9px #87ffc030; }
.duel-health-foot { display:flex; justify-content:space-between; color:#c1d4df; font-size:8px; }
.duel-platform { position:absolute; border-radius:50%; border:2px solid #d8ffb277; transform:rotateX(48deg); background:radial-gradient(ellipse,#b6e47766,transparent 70%); box-shadow:0 0 18px #cfff5b33; 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:drop-shadow(0 9px 5px #08241577)!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:.2; 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 8%,var(--attack-color) 35%,transparent 72%); box-shadow:0 0 28px var(--attack-color),0 0 7px white; filter:blur(.3px); }
[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:4px solid var(--attack-color); border-radius:50%; box-shadow:0 0 25px var(--attack-color),inset 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:white; font-size:30px; line-height:1; font-weight:900; text-shadow:0 3px 0 #722943,0 0 12px #19121d; animation:duel-damage 1s .32s ease-out both; }
.duel-damage small { display:block; margin-top:5px; color:#ffebb1; font-size:10px; letter-spacing:.14em; text-align:center; }
[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 #8fdbff; background:radial-gradient(ellipse,#91d9ff11,#91d9ff55); box-shadow:0 0 28px #7bd5ff88; animation:duel-shield 1.3s ease both; z-index:3; }
.duel-body { padding:17px 18px 14px; }
.duel-message { min-height:57px; display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:12px; background:#152b383b; border:1px solid #a7c9db13; }
.duel-message p { font-size:11px; line-height:1.7; color:#d0e0e9; margin:0; }
.duel-signal { display:block; width:7px; height:7px; flex:0 0 7px; margin-top:5px; border-radius:50%; background:#94e8c0; box-shadow:0 0 9px #67dfb06b; }
.duel-signal.busy { animation:duel-signal 1s ease-in-out infinite; }
.duel-command-heading { display:flex; align-items:center; justify-content:space-between; margin:18px 0 11px; }
.duel-command-heading strong { font-size:12px; font-weight:600; }
.duel-energy { display:flex; align-items:center; gap:4px; font-size:9px; color:#9db0c3; }
.duel-energy i { display:inline-block; height:10px; width:7px; border-radius:3px; background:#d5fff011; transform:skewX(-10deg); }
.duel-energy i.filled { background:#7fe8c5; box-shadow:0 0 7px #7fe8c533; }
.duel-moves { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.duel-move { display:flex; gap:9px; align-items:center; padding:13px 10px; border-radius:12px; background:linear-gradient(125deg,#29355099,#172536); border:1px solid #a6c3ee26; text-align:left; position:relative; cursor:pointer; color:#f0f7fb; transition:background .2s,transform .2s; min-height:65px; }
.duel-move:hover:not(:disabled) { transform:translateY(-2px); border-color:#b8fbd48a; }
.duel-move:active:not(:disabled) { transform:translateY(0); }
.duel-move:disabled { opacity:.4; cursor:not-allowed; }
.duel-move strong { font-size:11px; display:block; line-height:1.4; }
.duel-move small { font-size:8px; color:#adbfcd; display:block; line-height:1.5; margin-top:3px; }
.duel-move b { position:absolute; top:6px; right:7px; font-size:8px; opacity:.22; }
.duel-move-symbol { font-size:24px; flex:0 0 24px; color:#b6c9f6; }
.duel-move--skill { background:linear-gradient(125deg,#1e614551,#102934); border-color:#77d7ae35; }
.duel-move--skill .duel-move-symbol { color:#85edbd; }
.duel-move--burst { background:linear-gradient(125deg,#73501e60,#262436); border-color:#e9c17845; }
.duel-move--burst .duel-move-symbol { color:#ffdc8c; }
.duel-move--guard { background:linear-gradient(125deg,#24566f65,#172439); border-color:#79beed2e; }
.duel-move--guard .duel-move-symbol { color:#8acdeb; }
.duel-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:13px 1px 0; font-size:8px; color:#758da3; }
.duel-foot button { padding:6px; font-size:10px; color:#b0bfd0; background:none; border:0; cursor:pointer; }
.duel-error { border:1px solid #f2879333; border-radius:10px; color:#ffc4cd; background:#f2879310; margin:10px 0; padding:11px; font-size:12px; }
.duel-result { margin-top:12px; text-align:center; padding:16px 8px 0; }
.duel-result h3 { font-size:20px; font-weight:750; letter-spacing:-.03em; margin:4px 0; }
.duel-result > p { color:#aec2cf; font-size:11px; line-height:1.6; margin:8px 0 15px; }
.duel-result-mark { font-size:36px; color:#a6d2ed; }
.is-win .duel-result-mark { color:#ffe095; text-shadow:0 0 26px #ffcf6988; }
.duel-rewards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:17px 0; }
.duel-rewards > span { border:1px solid #c7deee17; background:#c7deee05; border-radius:12px; padding:12px 4px; color:#ffdda0; font-weight:750; font-size:18px; }
.duel-rewards small { display:block; color:#96acbf; font-weight:400; font-size:8px; margin-top:3px; }
.duel-log { margin-top:14px; font-size:10px; border-top:1px solid #dae7ff0f; padding-top:10px; color:#8da6bd; }
.duel-log summary { cursor:pointer; }
.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:20px; font-weight:700; margin-top:4px; }
.duel-picker-hint { color:#adc1d2; font-size:12px; line-height:1.7; margin:14px 0; }
.duel-roster { display:grid; gap:8px; max-height:46dvh; overflow-y:auto; padding:2px; margin-bottom:18px; }
.duel-roster-card { display:flex; gap:12px; align-items:center; text-align:left; background:#cde7ff05; border:1px solid #cde7ff19; padding:10px 13px; border-radius:15px; color:#e7f2fd; cursor:pointer; }
.duel-roster-card.selected { background:#9ae7ba0d; border-color:#95e7b988; box-shadow:0 0 0 2px #95e7b916; }
.duel-roster-card:disabled { opacity:.35; cursor:not-allowed; }
.duel-roster-card > span { flex:1; min-width:0; }
.duel-roster-card strong { display:block; font-size:13px; }
.duel-roster-card small { display:block; font-size:10px; color:#9eb5c6; margin-top:3px; }
.duel-roster-card i { width:18px; height:18px; border-radius:50%; border:1px solid #9ae7ba55; font-size:10px; font-style:normal; display:grid; place-items:center; color:#9ae7ba; }
.duel-panel button:focus-visible,.duel-picker button:focus-visible,.arena-page button:focus-visible { outline:2px solid #b8ffe0; 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:.8; 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:11px 7px; gap:5px; } .duel-move strong { font-size:10px; } .duel-move small { font-size:7px; } .duel-header { padding:15px; } .duel-health { padding:8px; } .duel-health-heading { font-size:10px; } }
@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; } }