/* SAKATA Monsters V12 — immersive battle system. Designed first for 390×844 Safari. */
body.is-fighting{background:#070911;overscroll-behavior:none}
body.is-fighting .top,body.is-fighting .navbar,body.is-fighting .v11-hubnav{display:none!important}
body.is-fighting #game{padding:0!important;margin:0!important;min-height:100dvh;max-width:none;width:100%;overflow:hidden}
body.is-fighting #effects{pointer-events:none}
.v12-battle{box-sizing:border-box;width:100%;height:100dvh;height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#080c17;color:#f0eafb;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.v12-battle *{box-sizing:border-box}
.v12-battle button{font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.v12-battle button:active:not(:disabled){transform:scale(.975)}
.v12-arena{height:42%;min-height:250px;position:relative;isolation:isolate;overflow:hidden;background:#13162b}
.v12-bg{position:absolute;inset:-4% -4% -1%;background-image:linear-gradient(180deg,#070a16aa 0%,transparent 31%,#0709120c 69%,#070912dd 100%),url('assets/v12_battle.webp');background-position:center 42%;background-size:cover;z-index:-3;animation:v12SceneBreath 13s ease-in-out infinite alternate;transform-origin:center}
.v12-environment{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 48% 58%,transparent 12%,#090a19b5 110%),linear-gradient(180deg,transparent 75%,#090d1e 100%);z-index:-1}
.v12-stage-top{position:absolute;top:calc(9px + env(safe-area-inset-top)*.3);left:13px;right:13px;z-index:4;display:grid;grid-template-columns:70px 1fr 56px;align-items:center;gap:6px;text-shadow:0 2px 8px #02020a}
.v12-exit{background:#080c1c9e;border:1px solid #c2b0ec55;border-radius:30px;color:#ece2fa;font-size:11px;font-weight:700;min-height:35px}
.v12-stage-title{text-align:center;min-width:0}.v12-stage-title b{font-size:12px;letter-spacing:.04em;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.v12-chapter{font-size:8px;letter-spacing:.17em;color:#edc891;text-transform:uppercase}
.v12-turn{border:1px solid #e5cc975c;border-radius:8px;padding:4px 3px;text-align:center;background:#0c0b1dbb}.v12-turn span{display:block;font-size:7px;letter-spacing:.22em;color:#d4c49e}.v12-turn b{display:block;color:#ffdb92;font-family:Georgia,serif;font-size:18px;line-height:1.1}
.v12-arena-caption{position:absolute;top:59px;left:13px;right:13px;display:flex;justify-content:space-between;z-index:2;font-size:8px;letter-spacing:.13em;color:#c0b9de80;text-shadow:0 1px 9px #000}
.v12-monsters{position:absolute;inset:83px 10px 17px;display:flex;justify-content:center;align-items:flex-end;gap:2px;z-index:2;pointer-events:none}
.v12-foe{pointer-events:auto;background:transparent;border:0;padding:0;color:white;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;flex:1 1 0;height:100%;max-width:48%;filter:saturate(.92);transition:filter .24s,transform .24s;animation:v12Enter .66s ease both;animation-delay:calc(var(--i,0)*.1s)}
.v12-foe:focus-visible{outline:2px solid #f4c985;outline-offset:0}
.v12-foe.targeted{filter:saturate(1.3) drop-shadow(0 0 14px #c4a4ff65);z-index:3;transform:translateY(-5px) scale(1.06)}
.v12-foe.fallen{opacity:.12;filter:grayscale(1)}
.v12-foe-portrait{height:72%;width:125%;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;mask-image:radial-gradient(ellipse 51% 52% at 50% 48%,#000 37%,#000b 68%,transparent 100%)}
.v12-foe-portrait img{object-fit:contain;width:100%;height:100%;filter:contrast(1.12) brightness(.92) drop-shadow(0 10px 18px #000);animation:v12Idle 4.2s ease-in-out infinite alternate;transition:filter .2s}
.v12-foe.boss .v12-foe-portrait{height:88%;width:155%}
.v12-foe.targeted .v12-foe-portrait img{filter:contrast(1.12) brightness(1.03) drop-shadow(0 0 16px #bd77f480)}
.v12-target-ring{position:absolute;bottom:49px;left:20%;width:60%;height:15px;border:2px solid #edc781;box-shadow:0 0 13px #d0ac68b0,inset 0 0 9px #c2955a;border-radius:50%;transform:perspective(60px) rotateX(32deg);opacity:0;transition:opacity .2s}
.v12-foe.targeted .v12-target-ring{opacity:1;animation:v12Ring 1.6s ease-in-out infinite}
.v12-foe-info{width:100%;position:relative;z-index:2;text-shadow:0 1px 6px #000,0 0 10px #000;background:linear-gradient(90deg,transparent,#090b1bbf 16%,#090b1bd9 85%,transparent);padding:5px 3px 3px;margin-top:-9px}
.v12-foe-name{font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.v12-bars{display:flex;flex-direction:column;gap:2px;margin:4px 0}.v12-bars span{display:block;height:5px;position:relative;border-radius:6px;background:#121828;border:1px solid #a1b3dc33;overflow:hidden}
.v12-bars span:before{content:'';display:block;height:100%;width:var(--val);border-radius:5px}
.v12-hp:before{background:linear-gradient(90deg,#248f7d,#7beccb)}.v12-br:before{background:linear-gradient(90deg,#a05ed2,#eeadff)}
.v12-foe-meta{display:flex;justify-content:space-between;font-size:8px;color:#c9cbe4;line-height:1}
.v12-danger-tag,.v12-break-tag{position:absolute;top:12%;left:0;right:0;z-index:3;display:block;padding:4px;background:#a52540bd;border:1px solid #ff9e8f;color:#fff2da;font-size:9px;letter-spacing:.06em;transform:rotate(-3deg);box-shadow:0 0 15px #f7384b60;animation:v12Alert .7s infinite alternate}
.v12-break-tag{background:#6240a4d9;border-color:#e4b8fb;animation:none}
.v12-foreground{position:absolute;inset:auto 0 0;height:21px;background:linear-gradient(transparent,#080b14a3);z-index:3;pointer-events:none}
.v12-bottom{background:linear-gradient(180deg,#12182d 0%,#0b1021 24%,#0b0f1c 100%);flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;padding:7px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #b698ee6f;box-shadow:0 -9px 28px #0008;position:relative;z-index:5}
.v12-bottom:before{content:'';position:absolute;left:20%;right:20%;height:1px;top:0;background:linear-gradient(90deg,transparent,#f6ce81,transparent);box-shadow:0 0 13px #dfaf7a}
.v12-telegraph{display:flex;align-items:center;gap:8px;min-height:34px;background:linear-gradient(100deg,#1c2342,#151a31);padding:4px 8px;border:1px solid #69739458;border-radius:7px;min-width:0}
.v12-telegraph.alert{border-color:#e56862;background:linear-gradient(100deg,#572435,#231725);animation:v12Alert 1.2s infinite alternate}
.v12-signal{width:21px;height:21px;display:grid;place-items:center;color:#efcd90;border:1px solid #f1d09465;border-radius:50%;font-weight:900;font-size:13px;flex-shrink:0}
.v12-telegraph>div{display:flex;flex-direction:column;min-width:0;flex:1}.v12-telegraph small{font-size:8px;color:#baaacf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v12-telegraph b{font-size:10px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#f4d8ac}
.v12-weakness{font-size:8px;font-weight:900;white-space:nowrap;color:#f0c67b;letter-spacing:.04em}
.v12-parts{display:flex;align-items:center;gap:5px;justify-content:center;min-height:22px}.v12-parts>b{font-size:8px;color:#e0c6a6;letter-spacing:.12em}.v12-parts button{border:1px solid #79678f;background:#242440;color:#d8d5ec;font-size:9px;padding:3px 7px;border-radius:20px}.v12-parts button.active{border-color:#efcd8c;background:#5a3a3e;color:#ffe2af}.v12-parts button:disabled{opacity:.35}
.v12-party{min-height:0}.v12-party-label{display:flex;justify-content:space-between;align-items:center;margin:1px 2px 5px;color:#c9b8d8}.v12-party-label b{font-size:9px;letter-spacing:.2em;color:#f1d9a9}.v12-party-label span{font-size:9px;color:#b0a7c2}
.v12-party-row{display:flex;gap:6px;min-height:73px}.v12-ally{flex:1;min-width:0;display:flex;align-items:center;text-align:left;gap:3px;border:1px solid #5361886a;border-radius:7px;background:linear-gradient(145deg,#1b2743,#13182b);color:#ece8fa;padding:4px;position:relative;overflow:hidden;transition:background .15s,border-color .15s}
.v12-ally.active{border-color:#ecc886;box-shadow:inset 0 0 16px #b88be727,0 0 9px #b98fe72b;background:linear-gradient(125deg,#45324b,#1d203b)}.v12-ally.active:before{content:'';position:absolute;inset:0 auto 0 0;width:2px;background:#fbe0a8}
.v12-avatar{width:40%;height:57px;min-width:0;flex-shrink:0;mask-image:linear-gradient(180deg,#000 80%,transparent)}.v12-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;filter:contrast(1.08)}
.v12-ally-read{flex:1;min-width:0}.v12-ally-read b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}.v12-ally-read small{font-size:7px;color:#bdc5da;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v12-life{height:4px;border-radius:3px;background:#273551;margin:6px 0;overflow:hidden}.v12-life span{display:block;height:100%;background:linear-gradient(90deg,#4eae9d,#79ecc4)}.v12-ally.fallen{opacity:.3;filter:grayscale(1)}
.v12-resource{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:1px 3px}.v12-resource-left{display:flex;flex-direction:column;gap:2px;max-width:60%;min-width:0}.v12-resource-title{font-size:11px;color:#fbdfae;font-weight:900;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.v12-energy{font-size:9px;letter-spacing:.08em;color:#d6b7f7}.v12-sp{min-width:105px;width:35%;display:flex;flex-direction:column;gap:3px;color:#d7c4ff;font-size:9px;font-weight:900;text-align:right}.v12-meter{height:5px;border:1px solid #8e7cad8c;border-radius:5px;overflow:hidden;background:#252038}.v12-meter i{height:100%;display:block;background:linear-gradient(90deg,#8855f7,#f7b8fe);box-shadow:0 0 10px #c594ef}
.v12-command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;flex:1;min-height:106px;max-height:156px}.v12-command{display:flex;align-items:center;gap:9px;min-width:0;min-height:0;background:linear-gradient(112deg,#202b49,#12192f);color:#e6e9ff;border:1px solid #5d719877;border-radius:8px;padding:8px 9px;box-shadow:inset 0 1px 0 #ffffff10,0 3px 7px #0004;text-align:left}.v12-command.primary{border-color:#a89dca9c;background:linear-gradient(110deg,#354168,#202842)}
.v12-command-icon{font-size:25px;width:29px;flex-shrink:0;text-align:center;text-shadow:0 0 18px #d3a9ff}.v12-command>span:last-child{min-width:0}.v12-command b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}.v12-command small{display:block;margin-top:3px;color:#aebfdf;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v12-command.ultimate{background:linear-gradient(110deg,#47313c,#35263b);border-color:#bd895c80}.v12-command.ultimate.ready{background:linear-gradient(112deg,#6d413d,#694165);border-color:#fbe0ac;box-shadow:0 0 14px #e7aa7744,inset 0 1px #ffffff29;animation:v12Ready 1.5s ease-in-out infinite alternate}.v12-command:disabled{opacity:.36;filter:grayscale(.4)}
.v12-utility{display:flex;align-items:center;gap:8px;min-height:25px}.v12-utility button{border-radius:15px;border:1px solid #65a9ae99;color:#b7eef2;padding:5px 9px;background:#163247aa;font-size:10px;white-space:nowrap}.v12-utility button:disabled{opacity:.4}.v12-log{flex:1;text-align:right;color:#a9b8d2;font-size:9px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v12-attack-overlay{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0}.v12-attack-overlay.v12-charging{opacity:1}.v12-trail{position:absolute;inset:22% -20%;background:linear-gradient(115deg,transparent 15%,#d8b3ff10 38%,#ffffffb0 50%,#b89dff55 54%,transparent 74%);clip-path:polygon(0 70%,100% 20%,100% 34%,0 84%);animation:v12Slash .45s ease-out forwards}.v12-flare{position:absolute;inset:10%;background:radial-gradient(ellipse at 50% 55%,#efd9ff99,transparent 40%);opacity:0}.v12-impact .v12-flare{animation:v12Flash .28s ease-out both}.v12-hit-word{position:absolute;z-index:5;left:-30%;right:-30%;top:20%;font-size:14px;color:#fff1c1;font-family:Georgia,serif;text-shadow:0 0 12px #b364fb,0 2px 5px #000;letter-spacing:.11em;animation:v12Float .65s ease-out forwards;pointer-events:none}
.v12-foe.v12-damaged .v12-foe-portrait img{animation:v12EnemyHurt .32s ease-out}.v12-camera-shake{animation:v12CameraHit .33s ease-out}.v12-avatar.v12-rush{animation:v12HeroRush .54s ease-out}
@keyframes v12HeroRush{30%{transform:translateX(17px) scale(1.12);filter:brightness(1.5)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}
@keyframes v12SceneBreath{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes v12Enter{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
@keyframes v12Idle{from{transform:translateY(0) scale(1)}to{transform:translateY(-5px) scale(1.012)}}
@keyframes v12Ring{50%{box-shadow:0 0 22px #f2d088,inset 0 0 13px #ddb77d}}
@keyframes v12Alert{to{filter:brightness(1.5)}}@keyframes v12Ready{to{box-shadow:0 0 26px #f3b386bb,inset 0 1px #ffffff35}}
@keyframes v12Slash{from{transform:translateX(-120%);opacity:0}40%{opacity:1}to{transform:translateX(110%);opacity:0}}
@keyframes v12Flash{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(2.3)}}
@keyframes v12Float{from{opacity:1;transform:translateY(0) scale(.8)}to{opacity:0;transform:translateY(-45px) scale(1.23)}}
@keyframes v12EnemyHurt{10%,55%{transform:translateX(8px);filter:brightness(2)}30%,70%{transform:translateX(-8px)}100%{transform:translateX(0)}}
@keyframes v12CameraHit{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateY(-3px)}80%{transform:translateY(3px)}}
@media(max-width:370px){.v12-bottom{gap:5px;padding-left:7px;padding-right:7px}.v12-command{gap:5px;padding:5px}.v12-command b{font-size:12px}.v12-command-icon{font-size:21px;width:23px}.v12-ally-read b{font-size:8px}}
@media(max-height:760px){.v12-arena{height:38%;min-height:210px}.v12-bottom{gap:4px;padding-top:5px}.v12-party-row{min-height:57px}.v12-avatar{height:42px}.v12-command-grid{min-height:100px;max-height:122px}.v12-command{padding:5px 7px}.v12-telegraph{min-height:30px}.v12-monsters{top:76px}.v12-command-icon{font-size:21px}}
@media(max-height:640px){.v12-arena{height:35%;min-height:170px}.v12-foe-portrait{height:64%}.v12-party-row{min-height:45px}.v12-avatar{height:36px}.v12-ally-read small{display:none}.v12-command-grid{min-height:83px}.v12-resource{padding:0}.v12-utility{min-height:18px}}
@media(prefers-reduced-motion:reduce){.v12-bg,.v12-foe-portrait img,.v12-command.ultimate.ready,.v12-danger-tag{animation:none!important}}
.v12-damage-popup{position:absolute;top:38%;left:50%;z-index:9;transform:translateX(-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:v12DamageFloat 1.05s ease-out forwards;text-shadow:0 0 12px #130415,0 3px 9px #000}
.v12-damage-popup strong{font-family:Georgia,serif;font-size:43px;font-weight:900;line-height:1;color:#fbdd9b;-webkit-text-stroke:1px #a55b51;filter:drop-shadow(0 0 7px #fd7d4d)}
.v12-damage-popup.weak strong{font-size:50px;color:#fff2cb;-webkit-text-stroke:1px #bb6bff;filter:drop-shadow(0 0 15px #c088ef)}
.v12-damage-popup small{font-family:Georgia,serif;font-size:10px;color:#fbe9b5;font-weight:bold;letter-spacing:.24em}
.v12-boss-intro{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;gap:7px;justify-content:center;align-items:center;text-align:center;background:linear-gradient(90deg,#20050ae8,#3f101bba,#20050ae8);pointer-events:none;animation:v12BossEntrance 1.45s ease-out forwards}
.v12-boss-intro:before,.v12-boss-intro:after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#ffb99a,transparent);box-shadow:0 0 18px #ff4857}.v12-boss-intro:before{top:32%}.v12-boss-intro:after{bottom:32%}
.v12-boss-intro small{color:#f1a9b9;font-size:9px;letter-spacing:.23em}.v12-boss-intro b{font-family:Georgia,serif;color:#fff0dd;font-size:22px;letter-spacing:.14em;text-shadow:0 0 20px #e34f64}
@keyframes v12DamageFloat{0%{opacity:0;transform:translate(-50%,25px) scale(.62)}18%{opacity:1;transform:translate(-50%,-5px) scale(1.16)}45%{opacity:1;transform:translate(-50%,-10px) scale(1)}100%{opacity:0;transform:translate(-50%,-70px) scale(1.08)}}
@keyframes v12BossEntrance{0%{opacity:0;clip-path:inset(49% 0 49% 0)}15%{opacity:1;clip-path:inset(0)}62%{opacity:1}100%{opacity:0;clip-path:inset(0)}}