* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #14161f; color: #e8eaf2; }
a { color: #8fd0ff; text-decoration: none; }
a:hover { text-decoration: underline; }
#topbar { display: flex; align-items: center; gap: 20px; padding: 10px 18px; background: #1c1f2e; border-bottom: 2px solid #2e3350; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; }
.logo { font-size: 22px; font-weight: 800; color: #ffd75e; }
#topbar nav { display: flex; gap: 14px; flex-wrap: wrap; }
#topbar nav a { color: #cfd4e6; font-weight: 600; }
.top-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.badge { background: #ff5470; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 700; }
main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; }
button { cursor: pointer; border: 1px solid #3a4066; background: #262b45; color: #e8eaf2; border-radius: 8px; padding: 7px 14px; font-weight: 600; }
button.primary { background: #ffb020; border-color: #ffb020; color: #23180a; }
button.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea { background: #1c1f2e; border: 1px solid #3a4066; color: #e8eaf2; border-radius: 8px; padding: 8px; width: 100%; }
label { display: block; margin: 10px 0; font-weight: 600; font-size: 14px; }
.hint { color: #9aa1bd; font-size: 13px; }
.error { color: #ff8296; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card { background: #1e2133; border: 1px solid #2e3350; border-radius: 14px; overflow: hidden; }
.card img.thumb { width: 100%; height: 170px; object-fit: cover; background: #262a42; display: block; }
.card .pad { padding: 10px 12px; }
.card h3 { margin: 2px 0 4px; font-size: 17px; }
.chip { display: inline-block; background: #2e3350; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.chip.class-LIGHT { background: #2b5f8a; } .chip.class-MIDDLE { background: #4a5568; }
.chip.class-HEAVY { background: #7a4a21; } .chip.class-UNLIMITED { background: #6d2b5f; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.toolbar button.active { background: #ffb020; color: #23180a; border-color: #ffb020; }
.statbar { height: 10px; background: #2a2e47; border-radius: 6px; overflow: hidden; }
.statbar > div { height: 100%; background: linear-gradient(90deg, #57d977, #b6e34d); }
table.moves { width: 100%; border-collapse: collapse; font-size: 14px; }
table.moves td, table.moves th { border-bottom: 1px solid #2e3350; padding: 5px 6px; text-align: left; }
.moveopt { display: flex; gap: 8px; align-items: center; background: #1e2133; border: 1px solid #2e3350; border-radius: 10px; padding: 8px; margin: 6px 0; }
.moveopt input[type=text] { max-width: 180px; }
.moveopt .grow { flex: 1; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-box { background: #1e2133; border: 1px solid #3a4066; border-radius: 14px; padding: 22px; width: min(420px, 92vw); }
/* --- Battle stage --- */
.stage { position: relative; height: 380px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, #3a4470 0%, #232845 55%, #171a2c 100%); border: 1px solid #3a4066; }
.stage .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.14), transparent 70%); }
.fighter { position: absolute; bottom: 62px; width: 220px; text-align: center; transition: transform .18s ease; }
.fighter img { max-width: 200px; max-height: 210px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); animation: breathe 2.6s ease-in-out infinite; }
.fighter.left { left: 6%; } .fighter.right { right: 6%; }
.fighter.right img { transform: scaleX(-1); }
.fighter.dash-l { transform: translateX(120px) scale(1.05); }
.fighter.dash-r { transform: translateX(-120px) scale(1.05); }
.fighter.hit { animation: shake .35s ease; }
.fighter.fainted { opacity: .35; transform: rotate(-8deg) translateY(16px); transition: all .6s ease; }
.fighter.flash img { filter: brightness(2.2) drop-shadow(0 0 18px #fff); }
@keyframes breathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.fighter.right img { animation: breathe 2.6s ease-in-out infinite; }
@keyframes shake { 0%,100% { margin-left: 0 } 25% { margin-left: -10px } 75% { margin-left: 10px } }
.hpwrap { position: absolute; top: 14px; width: 38%; }
.hpwrap.left { left: 16px; } .hpwrap.right { right: 16px; text-align: right; }
.hpbar { height: 16px; background: #10121e; border: 1px solid #4a517a; border-radius: 8px; overflow: hidden; }
.hpbar > div { height: 100%; background: linear-gradient(90deg, #ff5470, #ffb020); transition: width .45s ease; }
.hpwrap.left .hpbar > div { background: linear-gradient(90deg, #57d977, #2fb9ff); }
.dmgnum { position: absolute; font-size: 30px; font-weight: 900; color: #ffd75e; text-shadow: 0 2px 6px #000; animation: rise 0.9s ease forwards; pointer-events: none; z-index: 5; }
.dmgnum.big { font-size: 46px; color: #ff5470; }
.fighter.bigshake { animation: bigshake .45s ease; }
@keyframes bigshake { 0%,100% { transform: translateX(0) } 15% { transform: translateX(-16px) } 35% { transform: translateX(14px) } 55% { transform: translateX(-10px) } 75% { transform: translateX(7px) } }
.dmgnum.heal { color: #7dff9a; } .dmgnum.poison { color: #c792ff; }
@keyframes rise { from { opacity: 1; transform: translateY(0) } to { opacity: 0; transform: translateY(-56px) } }
.caption { min-height: 54px; background: #1c1f2e; border: 1px solid #3a4066; border-radius: 12px; padding: 12px 16px; font-size: 17px; margin-top: 12px; }
.controls { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.log { background: #10121e; border: 1px solid #2e3350; border-radius: 12px; padding: 12px 16px; font-family: ui-monospace, monospace; font-size: 13px; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.result-banner { text-align: center; font-size: 26px; font-weight: 900; color: #ffd75e; padding: 14px; }
.meter { height: 14px; background: #2a2e47; border-radius: 8px; overflow: hidden; }
.meter > div { height: 100%; background: #ffb020; transition: width .2s; }
.meter.over > div { background: #ff5470; }
img.detail-img { width: 100%; max-height: 420px; object-fit: contain; background: #262a42; border-radius: 14px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } .fighter { width: 150px; } .fighter img { max-width: 140px; } .stage { height: 320px; } }