/* Touch uses the live circular layout. Academy touch styling is opt-in for a future redesign. */
/* Academy combat dock. All elemental ornament is static SVG. */
body #match:not([hidden]) .hud>.fighter,body #match:not([hidden]) #team-roster{display:none!important}
body #match:not([hidden]) .hud{display:flex!important;justify-content:center!important;pointer-events:none}
body #match:not([hidden]) .bottom{--tile:64px;position:fixed!important;inset:auto max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) auto!important;display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;padding:12px 14px 12px 8px!important;border:2px solid #71566a!important;border-radius:18px 8px 18px 8px!important;background:linear-gradient(#55405bef,#201a32f5)!important;box-shadow:inset 0 0 0 3px #1d172c,0 5px 0 #100e1b,0 8px 24px #0006!important;z-index:12;transform:none!important;pointer-events:auto}
body #match#match .bottom.academy-spectating,body.touch-device #match:not([hidden]) .bottom{display:none!important}
body #match#match .bottom .spell{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:var(--tile)!important;min-width:0!important;min-height:0!important;height:calc(var(--tile) + 26px)!important;padding:4px 3px 23px!important;gap:0!important;border:1px solid var(--element,#c1a770)!important;border-radius:9px!important;background:linear-gradient(145deg,#30243e,#151b30)!important;box-shadow:inset 0 0 0 2px #89708a44!important;overflow:hidden;grid-column:auto!important}
body #match#match .bottom .spell[hidden]{display:none!important}
body #match#match .bottom .spell>.icon{display:grid!important;place-items:center!important;width:calc(var(--tile) - 10px)!important;height:calc(var(--tile) - 10px)!important;flex:none;border:0!important;background:none!important;box-shadow:none!important;margin:0!important;padding:0!important}
body #match#match .bottom .spell>.icon :is(svg,img){width:100%!important;height:100%!important;object-fit:contain}
body #match#match .bottom .spell>span:not(.icon):not(.cool){position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body #match#match .bottom .spell kbd{position:absolute!important;bottom:3px!important;left:50%!important;transform:translateX(-50%)!important;width:calc(100% - 14px)!important;height:20px!important;display:flex!important;justify-content:center!important;align-items:center!important;margin:0!important;padding:0!important;background:var(--depth,#1a1627)!important;border:1px solid var(--element,#c1a770)!important;border-radius:5px 1px 5px 1px!important;font:bold 12px Georgia!important;color:var(--element,#f9e2b3)!important;z-index:3;box-shadow:inset 0 0 4px #ffffff18!important;text-align:center}
body #match#match .bottom .spell .cool{position:absolute!important;bottom:26px!important;left:0!important;height:3px!important;background:var(--element,#c6a0ff)!important;opacity:1!important}
body #match#match .bottom .spell[data-spell=ultimate]{order:6}
.academy-cooldown{position:absolute;inset:18px 0 auto;text-align:center;font:700 19px Georgia;color:#fff1cf;text-shadow:0 2px 3px #000,0 0 8px #000;pointer-events:none;z-index:3}
body #match#match .bottom .academy-cooling>.icon{opacity:.4}
body #match#match .bottom .ultimate-ready{outline:1px solid #b0f1ed;outline-offset:2px}
.academy-vital{width:88px;flex:none;position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;align-self:center;color:#fff2d7;pointer-events:none}
.vital-glass{position:relative;width:72px;height:72px;overflow:hidden;border:3px solid #d9bb80;border-radius:20px 7px 20px 7px;background:radial-gradient(circle at 35% 25%,#61313e,#180f23);box-shadow:0 0 0 3px #271c30,0 0 0 4px #927156,inset 0 0 12px #0008;transform:rotate(-5deg)}
.vital-glass i{position:absolute;inset:auto 0 0;height:var(--vital-fill,100%);background:radial-gradient(ellipse at 30% 0,#ffb4ae88,transparent 50%),linear-gradient(#e86c79,#b63356 55%,#591c43);border-top:1px solid #ffc3ba;transition:height .16s ease-out}
.vital-glass:after{content:'';position:absolute;inset:4px;border-radius:15px 4px 15px 4px;border-top:2px solid #fff5;box-shadow:inset -7px -6px 12px #240b3d88}
.vital-glass span{position:absolute;inset:5px 0 auto;text-align:center;font:30px Georgia;color:#ffe5aeaa}
.academy-vital strong{position:absolute;top:43px;width:100%;text-align:center;font:bold 12px Georgia;text-shadow:0 2px 3px #160b22;z-index:1}
.academy-vital>small{margin-top:6px;font:8px Georgia;letter-spacing:.14em;color:#dec698}
.academy-vital:before{content:'✦';position:absolute;top:-12px;left:50%;transform:translateX(-50%);font:17px Georgia;color:#edcf8f;z-index:2;text-shadow:0 2px #261829}
.academy-vital.critical .vital-glass{border-color:#ff9393;box-shadow:0 0 0 3px #271c30,0 0 12px #f6606755}.academy-vital.depleted .vital-glass{filter:saturate(.2)}
body #match:not([hidden])>.footer{display:none!important}
body:not(.touch-device) #match .notice{right:auto!important;left:50%!important;bottom:144px!important;transform:translateX(-50%);max-width:50vw;pointer-events:none}
body:not(.touch-device) #match:not([hidden]) #tutorial-coach{bottom:158px!important;top:auto!important}
/* Keep original gesture handlers and saved inline touch positions. */
body #touch-controls.academy-dock .touch-spells{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:auto;height:auto;display:flex;align-items:center;gap:7px;padding:9px 11px 9px 5px;border:2px solid #71566a;border-radius:18px 8px 18px 8px;background:linear-gradient(#55405bef,#201a32f5);box-shadow:inset 0 0 0 3px #1d172c,0 4px 0 #100e1b}
body #touch-controls.academy-dock .touch-spells button[data-touch]{position:relative;inset:auto;width:54px!important;height:62px!important;min-width:0;padding:4px 3px 14px;border:1px solid #c1a770!important;border-radius:9px!important;background:linear-gradient(145deg,#30243e,#151b30)!important;box-shadow:inset 0 0 0 2px #89708a44!important;flex:none}
body #touch-controls.academy-dock .touch-spells [data-touch=bolt]{order:1}body #touch-controls.academy-dock .touch-spells [data-touch=fire]{order:2}body #touch-controls.academy-dock .touch-spells [data-touch=reflect]{order:3}body #touch-controls.academy-dock .touch-spells [data-touch=dash]{order:4}body #touch-controls.academy-dock .touch-spells [data-touch=ultimate]{order:5}
body #touch-controls.academy-dock .touch-spells .touch-spell-art{width:44px!important;height:44px!important;display:grid;place-items:center}body #touch-controls.academy-dock .touch-spells .touch-spell-art :is(img,svg){width:100%!important;height:100%!important}
body #touch-controls.academy-dock .touch-spells button>small{position:absolute;inset:auto 0 3px;color:#f9e2b3;font:bold 10px Georgia}
#touch-controls.academy-dock .academy-vital{width:66px}#touch-controls.academy-dock .vital-glass{width:56px;height:56px}#touch-controls.academy-dock .academy-vital strong{top:33px;font-size:10px}#touch-controls.academy-dock .academy-vital>small{font-size:7px}#touch-controls.academy-dock.editing .academy-vital{visibility:hidden}
:is(#match .bottom,#touch-controls.academy-dock .touch-spells) [data-element]{--element:#ccb1fa;--enamel:#413057;--depth:#191626;--element-art:url('art/ability-frame-arcane.svg')}
:is(#match .bottom,#touch-controls.academy-dock .touch-spells) [data-element=fire]{--element:#ffbc73;--enamel:#72382f;--depth:#301825;--element-art:url('art/ability-frame-fire.svg')}
:is(#match .bottom,#touch-controls.academy-dock .touch-spells) [data-element=water]{--element:#9ce6fa;--enamel:#285771;--depth:#152639;--element-art:url('art/ability-frame-water.svg')}
:is(#match .bottom,#touch-controls.academy-dock .touch-spells) [data-element=earth]{--element:#d5d48b;--enamel:#4f5532;--depth:#252a20;--element-art:url('art/ability-frame-earth.svg')}
:is(#match .bottom,#touch-controls.academy-dock .touch-spells) [data-element=air]{--element:#cff5d6;--enamel:#3e6669;--depth:#1b2c39;--element-art:url('art/ability-frame-air.svg')}
:is(#match .bottom,#touch-controls.academy-dock .touch-spells) [data-element=verdant]{--element:#e9d18d;--enamel:#634a32;--depth:#2d2014;--element-art:url('art/ability-frame-verdant.svg')}
body #match#match .bottom .spell[data-element],body #touch-controls.academy-dock#touch-controls.academy-dock .touch-spells button[data-element]{background:radial-gradient(ellipse at 50% 15%,var(--enamel),transparent 80%),linear-gradient(150deg,var(--enamel),var(--depth))!important;border-color:var(--element)!important;box-shadow:inset 0 0 0 2px #ffffff15,inset 0 -6px 15px #0004!important}
body #match#match .bottom .spell[data-element=fire],body #touch-controls.academy-dock .touch-spells button[data-element=fire]{border-radius:4px 12px 4px 12px!important}
body #match#match .bottom .spell[data-element=water],body #touch-controls.academy-dock .touch-spells button[data-element=water]{border-radius:13px 13px 8px 8px!important}
body #match#match .bottom .spell[data-element=earth],body #touch-controls.academy-dock .touch-spells button[data-element=earth]{border-radius:4px!important}
body #match .bottom:before,body #touch-controls.academy-dock .touch-spells:before{content:'';position:absolute;inset:-9px -10px;pointer-events:none;background:url('art/ability-dock-trim.svg') center/100% 100% no-repeat}
body #match#match .bottom .spell:after,body #touch-controls.academy-dock .touch-spells button:before{content:'';position:absolute;inset:0 0 23px;pointer-events:none;background:var(--element-art) center/100% 100% no-repeat;opacity:.85;z-index:1}
body #touch-controls.academy-dock .touch-spells button:before{inset:0 0 12px}
@media(max-width:700px),(max-height:480px){body #match:not([hidden]) .bottom{--tile:48px;gap:6px!important;padding:9px!important;bottom:16px!important;right:16px!important}.academy-vital{width:68px}.vital-glass{width:56px;height:56px}.academy-vital strong{top:33px;font-size:10px}.academy-cooldown{top:12px;font-size:16px}}
@media(max-height:480px){body:not(.touch-device) #match:not([hidden]) #tutorial-coach{top:60px!important;bottom:auto!important;max-width:330px!important;padding:8px 12px!important}}
@media(max-width:620px){body #touch-controls.academy-dock .touch-spells{gap:4px;padding-right:7px}body #touch-controls.academy-dock .touch-spells button[data-touch]{width:46px!important;height:56px!important}body #touch-controls.academy-dock .touch-spells .touch-spell-art{width:38px!important;height:38px!important}#touch-controls.academy-dock .academy-vital{width:58px}}
@media(prefers-reduced-motion:reduce){.vital-glass i{transition:none}}
body #touch-controls.academy-dock:not(.post-match) .touch-spells button[data-touch]{position:relative;inset:auto}
#touch-controls.academy-dock .academy-vital>small{position:static;display:block;inset:auto;text-shadow:none;line-height:1.2}
.academy-vital[hidden]{display:none!important}
/* Reveal opponents behind the phone dock during either touch aiming style.
   Existing pressed state clears on release, cancellation, pause and input reset. */
body.touch-device.touch-playing #touch-controls:not(.editing):not(.post-match) .touch-spells{transition:opacity .18s ease-out}
body.touch-device.touch-playing #touch-controls:not(.editing):not(.post-match) .touch-spells:has(button.pressed:is([data-touch=bolt],[data-touch=fire],[data-touch=ultimate])){opacity:.08;transition-duration:.1s}
@media(prefers-reduced-motion:reduce){body.touch-device.touch-playing #touch-controls .touch-spells{transition:none!important}}

/* The permanent ultimate slot uses a sealed academy lock until usable. */
.academy-vital{display:none!important}
body #match#match .bottom .spell.academy-locked,body #touch-controls.academy-dock .touch-spells button.academy-locked{opacity:1!important;cursor:default;--element:#bba277;--enamel:#493b50;--depth:#211b2c;--element-art:url('art/ability-frame-arcane.svg')}
body #match#match .bottom .academy-locked>.icon,body #touch-controls.academy-dock .academy-locked>.touch-spell-art{background:url('art/ultimate-locked.svg') center/contain no-repeat!important;opacity:1!important}
body #match#match .bottom .academy-locked>.icon>*,body #touch-controls.academy-dock .academy-locked>.touch-spell-art>*{visibility:hidden}
body #match#match .bottom .academy-locked .cool,body #match#match .bottom .academy-locked .academy-cooldown{display:none!important}
body #touch-controls.academy-dock .academy-locked>small{color:#eed39e}