/* Touch interaction keeps double taps from zooming; pinch zoom remains available outside the arena. */
button,a,input,select,textarea,[role=button],summary{touch-action:manipulation}
#lobby,#hub-dialog,#overlay,#chest-dialog{touch-action:manipulation}#game{touch-action:none}
#mobile-arena-map{position:fixed!important;left:16px!important;top:68px!important;width:92px!important;height:52px!important;max-width:none!important;max-height:none!important;transform:none!important;inset:auto;z-index:40;pointer-events:none;border-radius:4px;box-shadow:0 2px 7px #101b3490}#mobile-arena-map[hidden]{display:none!important}
#touch-controls .touch-stick{width:148px;height:148px}#touch-controls .touch-stick i{width:54px;height:54px}#touch-controls .touch-options{left:190px}#touch-controls.post-match .touch-stick{width:86px;height:86px}#touch-controls.post-match .touch-stick i{width:42px;height:42px}
#mobile-match-menu{display:none}#mobile-match-options{width:min(300px,75vw);padding:16px;border:2px solid #c9b5ef;border-radius:22px;background:linear-gradient(135deg,#304b62,#352b54);color:#fff4da}#mobile-match-options h2{font-size:19px;margin:0 0 10px}#mobile-match-options button{display:block;width:100%;padding:10px;margin:6px 0;border:1px solid #acbce4;border-radius:13px;background:#425477;color:#fff4da;font-weight:bold}#mobile-match-options [data-back]{background:#e9d7a5;color:#283c3e}#mobile-match-options::backdrop{background:#101a2ba8}
.touch-device input,.touch-device select,.touch-device textarea{font-size:16px!important}
#touch-controls .touch-spell-art{display:grid;place-items:center;width:72%;height:72%;pointer-events:none}#touch-controls .touch-spell-art img,#touch-controls .touch-spell-art svg{position:static!important;width:100%!important;height:100%!important;object-fit:contain;max-width:100%;max-height:100%;filter:drop-shadow(0 2px 3px #17214488)}#touch-controls small{position:absolute;inset:0;display:grid;place-items:center;font:bold 18px system-ui;text-shadow:0 2px 4px #15213b;pointer-events:none}#touch-controls .cooling .touch-spell-art{opacity:.4}
#touch-controls.post-match .touch-spells [data-touch]:not([data-touch=dash]),#touch-controls.post-match .touch-options{display:none!important}#touch-controls.post-match .touch-stick{width:86px;height:86px;bottom:10px}#touch-controls.post-match [data-touch=dash]{left:auto;right:15px;bottom:0;background:radial-gradient(circle at 30% 20%,#c692df,#624a85)}#touch-controls.post-match .touch-spells{height:70px;bottom:12px}
.touch-editbar{position:fixed;z-index:2000;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 16px;border:2px solid #e8d8ac;border-radius:18px;background:#27334bf5;color:#f8efd0;font:14px system-ui}.touch-editbar[hidden]{display:none}.touch-editbar button{padding:8px 14px;border-radius:12px;background:#eddaa8;color:#372f26}.editing{background:#101a2bc9!important;z-index:1900!important}.editing [data-touch]{outline:2px dashed #f9e6b4;outline-offset:5px}.editing .touch-spell-art{pointer-events:none}#touch-settings [data-arrange]{display:block;width:100%;padding:10px;margin:8px 0;background:#7b639b;color:white;border:2px solid #c4a8e6;border-radius:13px}
.learn-dash::after{content:"";display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;background:url("art/ui-glove-glyph.svg") center/contain no-repeat;position:absolute;top:-39px;left:14px;font:36px system-ui;filter:drop-shadow(0 3px #2e2444);animation:dash-hand .75s ease-in-out infinite;pointer-events:none}.learn-dash{box-shadow:0 0 0 4px #f7dd9f,0 0 25px #fde6ac!important}.tutorial-keypress{animation:dash-key .8s ease-in-out infinite!important;min-width:65px;text-align:center}.dash-cue{width:auto!important;padding:10px 18px!important}.dash-cue progress,.dash-cue small,.dash-cue .tutorial-dots{display:none!important}.touch-playing .dash-cue{display:none!important}@keyframes dash-hand{50%{translate:0 9px;scale:.92}}@keyframes dash-key{50%{translate:0 4px;box-shadow:0 0 #a28c61;background:#fde7a5}}
.mobile-control-card{display:flex;gap:12px;align-items:center;padding:14px;background:#293850;border:2px solid #abc8df;border-radius:18px}.mobile-control-card button{padding:12px;background:#eddcae;color:#28394a;border-radius:14px}.mobile-control-card p{font-size:12px}.touch-device #hub-content [data-touch-setting]{display:none}
@media(orientation:landscape) and (max-height:600px){
 .touch-device #match>.heading{top:8px!important;left:calc(50% + 47px)!important;right:auto!important;min-height:0!important}.touch-device #match .settings>button:not(#pause):not(#mobile-match-menu){display:none!important}.touch-device #match .settings #pause,.touch-device #match .settings #mobile-match-menu{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;padding:0!important;border-radius:11px!important;background:#2d405ce6;border:1px solid #b7cee7;color:#fff5d5}.touch-device #match .settings #pause{font-size:0!important}.touch-device #pause::after{content:"";display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;background:url("art/ui-pause-glyph.svg") center/contain no-repeat;font:20px system-ui}.touch-device[data-match-paused=true] #pause::after{content:"";display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;background:url("art/ui-play-glyph.svg") center/contain no-repeat;font-size:15px}.touch-device #match .settings #mobile-match-menu{font-size:21px!important}.touch-device #match .hud .fighter{max-width:min(190px,23vw)!important}
 .touch-device #match .fighter{padding:4px 7px 6px!important;transform:none!important;border-bottom-width:3px!important}.touch-device #match .hud-rank img{width:19px!important;height:19px!important}.touch-device #match #php,.touch-device #match #bhp{font-size:12px!important;padding:2px 4px!important}.touch-device #match .timer{padding:3px!important;border-width:2px!important;border-bottom-width:4px!important;border-radius:12px!important;transform:none!important;min-height:0!important}.touch-device #match .timer:before,.touch-device #match #phase{display:none!important}
 .touch-device #match .hud{top:9px!important;left:16px!important;right:16px!important;grid-template-columns:minmax(90px,1fr) 65px minmax(90px,1fr)!important;gap:14px!important}.touch-device .hud .fighter{max-width:190px!important}.touch-device .hud .name{font-size:9px!important;letter-spacing:0!important}.touch-device .hud .health{height:5px!important;margin-top:4px!important}.touch-device .hud .timer{font-size:20px!important}.touch-device .hud .timer small{font-size:8px!important;letter-spacing:0!important;margin:0!important}.touch-device #bot-rating,.touch-device #match-title,.touch-device #match .heading h1{display:none!important}.touch-device #match>.heading{position:absolute!important;z-index:30!important;top:49px!important;right:12px!important;left:auto!important;margin:0!important}.touch-device #match .settings{gap:5px!important}.touch-device #match .settings button{min-height:28px!important;padding:4px 8px!important;font-size:10px!important}.touch-device #notice{font-size:12px!important;top:60px!important}.touch-device #match .settings #sound{display:none!important}
 .touch-device #overlay:not([hidden]){padding:0!important;overflow:hidden!important;display:grid!important;place-items:center!important}.touch-device #overlay .modal{box-sizing:border-box!important;width:760px!important;max-width:none!important;max-height:none!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:10px 16px!important;display:block!important;transform:none!important;margin:auto!important}.touch-device #overlay .sigil{display:none!important}.touch-device #overlay #title{font-size:23px!important;line-height:1.1!important;margin:3px!important}.touch-device #overlay .eyebrow{padding:3px 12px!important;font-size:11px!important}.touch-device #overlay #hint{display:none!important}.touch-device #overlay #start,.touch-device #overlay #overlay-menu{font-size:14px!important;padding:7px 16px!important;min-height:32px!important;margin:5px!important;min-width:0!important;width:auto!important}.touch-device #overlay #description{font-size:13px!important;margin:5px 0!important}.touch-device .result-stats{display:flex!important;justify-content:center;gap:20px;padding:4px!important;margin:0!important}.touch-device .result-stats b{font-size:20px!important}.touch-device .result-earnings{font-size:14px!important;padding:4px!important;margin:4px!important}.touch-device .result-chest{max-width:460px!important;margin:5px auto!important;padding:5px!important;min-height:0!important}.touch-device .result-chest img{width:55px!important;height:55px!important}.touch-device .result-chest strong{font-size:17px!important}.touch-device #result-open-chest{font-size:13px!important;padding:6px 14px!important;margin:2px!important}
 .touch-device #match-scoreboard{display:block!important;min-height:0!important;height:auto!important}.touch-device #match-scoreboard .score-tabs{margin:5px!important;gap:8px!important}.touch-device .score-tabs button{font-size:13px!important;padding:6px 15px!important}.touch-device #match-scoreboard .hero-board{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:auto auto!important;gap:5px 12px!important;padding:0!important;height:auto!important}.touch-device #match-scoreboard .hero-board[hidden]{display:none!important}.touch-device .stage-hint{display:none!important}.touch-device .hero-team h3{font-size:10px!important;letter-spacing:1px!important;margin:3px!important}.touch-device #match-scoreboard .hero-grid{display:grid!important;grid-template-columns:repeat(var(--players),minmax(0,1fr))!important;gap:7px!important}.touch-device #match-scoreboard .hero-card{height:auto!important;min-height:0!important;display:grid!important;grid-template-rows:32px 85px 18px 35px!important;border-radius:15px!important}.touch-device #match-scoreboard .hero-card canvas{width:160px!important;height:85px!important;max-width:100%!important;min-height:0!important;aspect-ratio:36/19!important;object-fit:contain!important}.touch-device #match-scoreboard .hero-rank .rank-badge{width:27px!important;height:27px!important;flex-basis:27px!important}.touch-device #match-scoreboard .hero-rank b,.touch-device #match-scoreboard .hero-rank small{font-size:10px!important;line-height:11px!important}.touch-device #match-scoreboard .hero-awards{font-size:8px!important;line-height:9px!important}.touch-device #match-scoreboard .hero-card h4{font-size:11px!important;margin:0!important}.touch-device #match-scoreboard .hero-numbers{padding:0 4px 4px!important;gap:3px!important}.touch-device #match-scoreboard .hero-numbers div{padding:2px!important}.touch-device #match-scoreboard .hero-numbers b{font-size:14px!important}.touch-device #match-scoreboard .hero-numbers small{font-size:8px!important}
 .touch-device #chest-dialog{box-sizing:border-box!important;width:680px!important;max-width:none!important;max-height:none!important;height:auto!important;overflow:visible!important;padding:10px 18px!important}.touch-device #chest-content{display:block!important;min-height:0!important;overflow:visible!important}.touch-device #chest-content h2{font-size:20px!important;margin:4px!important}.touch-device #chest-content .chest-stage{height:auto!important;min-height:0!important;max-height:none!important;padding:4px!important;display:flex!important;gap:4px!important}.touch-device #chest-content .treasure-icon{width:115px!important;height:115px!important;flex:none!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}.touch-device #chest-content .revealed-card{width:100px!important;height:100px!important;flex:none!important}.touch-device #chest-content .revealed-card img,.touch-device #chest-content .revealed-card svg,.touch-device #chest-content .revealed-card canvas{position:static!important;inset:auto!important;transform:none!important;width:72px!important;height:72px!important;aspect-ratio:1!important;object-fit:contain!important}.touch-device #chest-content .revealed-card strong{font-size:18px!important;padding:3px 8px!important}.touch-device #chest-content .reveal-name{font-size:16px!important;margin:3px!important}.touch-device #chest-content .loot-summary{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;overflow:visible!important;max-height:none!important}.touch-device #chest-content .loot-summary>div{padding:6px!important;margin:0!important;gap:8px!important;min-height:0!important}.touch-device #chest-content .loot-summary img,.touch-device #chest-content .loot-summary svg,.touch-device #chest-content .loot-summary canvas{position:static!important;width:42px!important;height:42px!important;object-fit:contain!important;flex:none!important}.touch-device #chest-content .loot-summary strong{font-size:14px!important}.touch-device #chest-next{font-size:15px!important;padding:6px 20px!important;min-height:32px!important;margin:5px auto!important}.touch-device #chest-skip{min-height:25px!important;padding:3px 12px!important}.touch-device #chest-content p{font-size:11px!important;margin:3px!important}
}
@media(prefers-reduced-motion:reduce){.learn-dash::after,.tutorial-keypress{animation:none!important}}
/* Keep the compact action pair in the header after the shared HUD rules. */
@media(orientation:landscape) and (max-height:600px){.touch-device #match>.heading{top:8px!important;left:calc(50% + 47px)!important;right:auto!important}.touch-device #match .hud .fighter{max-width:min(190px,23vw)!important}}
@media(orientation:landscape) and (max-height:600px){
 .touch-device #match .settings #mobile-match-menu,.touch-device #match .settings #pause{width:39px!important;height:37px!important;border:2px solid #dac3f2!important;border-bottom:5px solid #352443!important;border-radius:12px!important;background:linear-gradient(145deg,#8e6eae,#584078)!important;box-shadow:0 3px 0 #171126,0 0 10px #c78ce51a!important;transition:translate .12s,filter .12s!important}
 .touch-device #match .settings #pause{background:linear-gradient(145deg,#6caaac,#366a7b)!important;border-color:#b9f0e6!important;border-bottom-color:#24424f!important;color:#fff6cc!important}
 .touch-device #match .settings #mobile-match-menu img{width:26px!important;height:26px!important;object-fit:contain;filter:drop-shadow(0 2px #302441);pointer-events:none}
 .touch-device #match .settings #mobile-match-menu:active,.touch-device #match .settings #pause:active{translate:0 2px;filter:brightness(1.15)}
}

/* Give the right thumb room to aim in every direction. */
#touch-controls .touch-spells{right:max(78px,env(safe-area-inset-right));bottom:max(34px,env(safe-area-inset-bottom))}
#touch-controls button.aim-held{overflow:visible!important;isolation:isolate}
#touch-controls button.aim-held::after{content:'';position:absolute;inset:-18px;border:2px dashed #e7d6ffb3;border-radius:50%;background:radial-gradient(circle,transparent 57%,#bfa1f522 60%,transparent 72%);pointer-events:none;z-index:-1;animation:aim-ring-in .15s ease-out}
#touch-controls button.aim-held::before{content:"";display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;background:url("art/ui-move-glyph.svg") center/contain no-repeat;position:absolute;right:-10px;top:-17px;font:18px system-ui;color:#fff2b8;text-shadow:0 2px 4px #251d40;pointer-events:none}
#touch-controls button.aim-held .touch-spell-art{translate:var(--drag-x,0px) var(--drag-y,0px);filter:drop-shadow(0 3px 4px #16233b);transition:none}
#touch-controls button.dragging{border-color:#fff0a8!important;box-shadow:0 4px #332445,0 0 23px #e5b7ff88!important}
.touch-sensitivity{display:flex;flex-direction:column;gap:5px;min-width:0;padding:9px 12px;background:#182d4344;border:1px solid #b4c4e655;border-radius:13px;color:#f9eed9;font:12px system-ui}.touch-sensitivity>span{display:flex;justify-content:space-between;gap:10px;font-weight:bold}.touch-sensitivity output{color:#f4e2af;font-variant-numeric:tabular-nums}.touch-sensitivity input{width:100%;margin:0;height:26px;accent-color:#ead8a7;touch-action:pan-y}.touch-sensitivity small{font-size:10px;opacity:.8}.mobile-control-card{flex-wrap:wrap}.mobile-control-card .touch-sensitivity{flex:1 0 90%}#touch-settings .touch-sensitivity{margin:8px 0}#touch-settings>p{margin:6px 0}
@keyframes aim-ring-in{from{opacity:0;scale:.8}to{opacity:1;scale:1}}@media(prefers-reduced-motion:reduce){#touch-controls button.aim-held::after{animation:none}}
@media(orientation:landscape) and (max-height:430px){#touch-settings{padding:10px 14px!important}#touch-settings h2{font-size:19px;margin:3px 0 7px}#touch-settings [data-layout]{min-height:72px;padding:8px}#touch-settings .touch-sensitivity{padding:5px 10px;margin:5px 0}#touch-settings [data-arrange],#touch-settings [data-close]{padding:7px;margin:4px 0}}

.hero-portrait-frame{position:relative;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden;isolation:isolate}#touch-controls.post-match .learn-dash::after{display:none!important}#touch-controls.post-match .learn-dash{box-shadow:0 4px #161d3e!important}
/* A thumb-centred attack pad, with abilities on its inner arc. */
#touch-controls:not(.post-match) .touch-spells [data-touch]{position:fixed;right:auto;bottom:auto}
#touch-controls:not(.post-match) [data-touch=bolt]{left:calc(100% - 225px);top:calc(100% - 178px)}
#touch-controls:not(.post-match) [data-touch=fire]{left:calc(100% - 301px);top:calc(100% - 214px)}
#touch-controls:not(.post-match) [data-touch=ultimate]{left:calc(100% - 386px);top:calc(100% - 164px)}
#touch-controls:not(.post-match) [data-touch=reflect]{left:calc(100% - 306px);top:calc(100% - 104px)}
#touch-controls:not(.post-match) [data-touch=dash]{left:calc(100% - 216px);top:calc(100% - 79px)}
#touch-controls button.aim-held::after{inset:-24px;border-style:solid;border-color:#ddc3ff66;box-shadow:inset 0 0 16px #b896e522}
.touch-device #tutorial-coach{box-sizing:border-box!important;top:64px!important;bottom:auto!important;left:50%!important;width:min(290px,42vw)!important;min-height:0!important;height:auto!important;padding:8px 10px!important;gap:8px!important;display:flex;align-items:center!important;border-width:2px!important;border-radius:17px!important;box-shadow:0 4px #111c31aa!important;pointer-events:none}
.touch-device #tutorial-coach[hidden]{display:none!important}.touch-device #tutorial-coach .tutorial-picture{width:28px!important;height:28px!important;min-width:28px!important;flex:0 0 28px!important;overflow:hidden!important;display:grid;place-items:center}.touch-device #tutorial-coach .tutorial-picture>*{width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important;object-fit:contain!important}.touch-device #tutorial-coach .tutorial-arrows{font-size:26px!important;line-height:28px!important;animation:none!important}.touch-device #tutorial-coach .tutorial-picture+div{min-width:0;flex:1}.touch-device #tutorial-coach strong{font-size:14px!important;line-height:17px!important;margin:0 0 3px!important}.touch-device #tutorial-coach .tutorial-keys{font:11px/14px system-ui!important;max-width:none!important;display:block!important}.touch-device #tutorial-coach small,.touch-device #tutorial-coach progress,.touch-device #tutorial-coach .tutorial-dots{display:none!important}.touch-device #tutorial-coach.dash-cue{display:none!important}
#touch-controls .touch-stick.learn-move{border-color:#fde5a7;box-shadow:0 0 18px #fcdd8844}#touch-controls .learn-move i{animation:thumb-guide 1.2s ease-in-out infinite}#touch-controls .learn-move:active i{animation:none}@keyframes thumb-guide{50%{translate:12px -8px}}@media(prefers-reduced-motion:reduce){#touch-controls .learn-move i{animation:none}}
@media(max-height:350px){#touch-controls:not(.post-match) [data-touch=fire]{top:calc(100% - 194px)}#touch-controls:not(.post-match) [data-touch=ultimate]{top:calc(100% - 154px)}}


/* Keep the home screen focused on choices and live progress. */
#lobby.home-menu .home-section-heading small,
#lobby.home-menu #selected-mode-title,
#lobby.home-menu .ladder-note,
#lobby.home-menu .menu-controls,
#lobby.home-menu #save-note {display:none!important}
#lobby.home-menu .selected-mode {min-height:0;padding:4px 0}
#lobby.home-menu #selected-mode-description {margin:0}
#lobby.home-menu .lobby-name-editor:not(:focus-within) #name-feedback {visibility:hidden}

/* A consistent tap cue, anchored inside the button instead of a platform emoji. */
#touch-controls [data-touch=dash].learn-dash::after{content:'';inset:auto;left:62%;top:62%;width:34px;height:40px;font-size:0;z-index:4;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M10 24V5c0-5 7-5 7 0v12c2-3 6-2 6 1 3-2 6 0 6 3 4 0 4 4 3 8l-3 8H15L5 26c-4-5 1-8 5-2Z' fill='%23fff0b3' stroke='%23342a54' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 2px 2px #17112699);animation:tutorial-tap 1s ease-in-out infinite;pointer-events:none}
@keyframes tutorial-tap{0%,100%{transform:translate(3px,4px) rotate(-25deg)}50%{transform:translate(-3px,-5px) rotate(-25deg)}}
@media(prefers-reduced-motion:reduce){#touch-controls [data-touch=dash].learn-dash::after{animation:none;transform:rotate(-25deg)}}

/* Put the gesture on its actual control, with distinct tap / hold / drag motion. */
#touch-controls .tutorial-target{overflow:visible!important;box-shadow:0 0 0 3px #f7dd9f,0 0 24px #fde6ac99!important}
#touch-controls .tutorial-target.learn-dash::after{display:none!important}
.touch-lesson-cue{position:absolute;inset:0;pointer-events:none;z-index:5}
.touch-lesson-cue::before{content:attr(data-label);position:absolute;left:50%;top:-23px;transform:translateX(-50%);padding:3px 8px;border:2px solid #fff4bc;border-radius:9px;background:#fcdc89;color:#29213e;font:900 10px/12px system-ui;letter-spacing:.06em;box-shadow:0 3px #241b48;white-space:nowrap}
.touch-lesson-cue::after{content:'';position:absolute;left:62%;top:62%;width:32px;height:38px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M10 24V5c0-5 7-5 7 0v12c2-3 6-2 6 1 3-2 6 0 6 3 4 0 4 4 3 8l-3 8H15L5 26c-4-5 1-8 5-2Z' fill='%23fff0b3' stroke='%23342a54' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 2px 2px #17112699);transform:rotate(-25deg);animation:tutorial-tap 1s ease-in-out infinite}
.touch-lesson-cue[data-gesture=hold]::after{animation:tutorial-hold 1.5s ease-in-out infinite}
.touch-lesson-cue[data-gesture=drag]::after{animation:tutorial-drag 1.6s ease-in-out infinite}
#touch-controls .pressed .touch-lesson-cue{opacity:.25}
@keyframes tutorial-hold{0%,100%{transform:rotate(-25deg) scale(1)}50%{transform:rotate(-25deg) scale(.88)}}
@keyframes tutorial-drag{0%,20%,100%{transform:translate(0,0) rotate(-25deg)}70%{transform:translate(-22px,-14px) rotate(-25deg)}}
@media(prefers-reduced-motion:reduce){.touch-lesson-cue::after{animation:none!important}}

/* White glove demonstrates the whole gesture, including the movement stick. */
.touch-lesson-cue::after{width:44px;height:52px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 44'%3E%3Cpath d='M10 24V5c0-5 7-5 7 0v12c2-3 6-2 6 1 3-2 6 0 6 3 4 0 4 4 3 8l-3 8H15L5 26c-4-5 1-8 5-2Z' fill='white' stroke='%23342a54' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M14 36h16v6H14Z' fill='%23b9dcff' stroke='%23342a54' stroke-width='2'/%3E%3Cpath d='M21 23v5m5-5v5' stroke='%23c5cddd' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")}
.touch-lesson-cue[data-gesture=drag]::after{width:56px;height:66px;left:48%;top:48%}
#touch-controls [data-touch=move] .touch-lesson-cue::after{left:48%;top:44%;animation:tutorial-move-glove 1.6s ease-in-out infinite}
@keyframes tutorial-drag{0%,15%,100%{transform:translate(0,0) rotate(-25deg);opacity:1}65%,80%{transform:translate(-34px,-22px) rotate(-25deg);opacity:1}90%{transform:translate(-34px,-22px) rotate(-25deg);opacity:0}}
@keyframes tutorial-move-glove{0%,15%,100%{transform:translate(0,0) rotate(-25deg)}65%,80%{transform:translate(22px,-15px) rotate(-25deg)}}
@media(prefers-reduced-motion:reduce){#touch-controls [data-touch=move] .touch-lesson-cue::after{animation:none!important}}
.touch-lesson-cue:not([data-gesture=drag])::after{top:35%;left:60%}

/* Keep the action label out of the adjacent Attack button's footprint. */
#touch-controls .touch-spells .tutorial-target{z-index:10}
#touch-controls .touch-lesson-cue[data-gesture=tap]::before{left:calc(100% + 12px);top:-4px;transform:none}
#touch-controls .touch-lesson-cue[data-gesture=hold]::after{width:56px;height:66px;left:48%;top:48%;animation:tutorial-aim-hold 2.2s ease-in-out infinite}
@keyframes tutorial-aim-hold{
 0%,10%{transform:translate(0,0) rotate(-25deg);opacity:1}
 35%,78%{transform:translate(32px,-24px) rotate(-25deg);opacity:1}
 88%{transform:translate(32px,-24px) rotate(-25deg);opacity:0}
 89%{transform:translate(0,0) rotate(-25deg);opacity:0}
 100%{transform:translate(0,0) rotate(-25deg);opacity:1}
}
@media(prefers-reduced-motion:reduce){#touch-controls .touch-lesson-cue[data-gesture=hold]::after{animation:none!important;transform:translate(22px,-16px) rotate(-25deg)}}

/* Make the teaching freeze explicit while the cue continues animating. */
#tutorial-coach[data-waiting=true]{border-color:#ecdbff!important;background:linear-gradient(135deg,#593b7af5,#30234ff5)!important;box-shadow:0 5px #15112b,0 0 28px #caa3ff66!important}
#tutorial-coach[data-waiting=true] small{display:block!important;color:#ecd8ff;font:800 10px/15px system-ui;letter-spacing:.09em;margin-bottom:3px}
#tutorial-coach[data-waiting=true] strong{color:#fce29e}
#touch-controls [data-touch=reflect].tutorial-target{animation:reflect-ready 1.2s ease-in-out infinite}
#touch-controls [data-touch=reflect].tutorial-target .touch-lesson-cue::after{width:64px;height:76px;left:50%;top:18%;animation:tutorial-tap 1.1s ease-in-out infinite}
#touch-controls [data-touch=reflect].tutorial-target .touch-lesson-cue::before{top:-14px;left:calc(100% + 10px)}
@keyframes reflect-ready{0%,100%{filter:brightness(1) drop-shadow(0 0 3px #fcde8b44)}50%{filter:brightness(1.14) drop-shadow(0 0 10px #fcde8b99)}}
@media(prefers-reduced-motion:reduce){#touch-controls [data-touch=reflect].tutorial-target,#touch-controls [data-touch=reflect].tutorial-target .touch-lesson-cue::after{animation:none!important}}

.touch-device #tutorial-coach.dash-cue[data-waiting=true]{display:flex!important}

/* A visible teaching pause, followed by a glove travelling to the required control. */
#tutorial-coach[data-waiting=true]:not([hidden]){position:fixed!important;z-index:64!important;top:calc(50% - 100px)!important;bottom:auto!important;box-shadow:0 5px 18px #09091755!important}
#tutorial-coach[data-waiting=true] small{font-size:12px!important;line-height:18px!important;color:#fff0be!important}
#touch-controls [data-touch].tutorial-target .touch-lesson-cue[data-gesture=tap]::after{animation:cue-arrive .9s cubic-bezier(.3,0,.2,1) both,tutorial-tap 1.1s .9s ease-in-out infinite}
@keyframes cue-arrive{0%,15%{transform:translate(var(--cue-from-x),var(--cue-from-y)) rotate(-25deg);opacity:1}100%{transform:translate(0,0) rotate(-25deg);opacity:1}}
@media(prefers-reduced-motion:reduce){#touch-controls [data-touch].tutorial-target .touch-lesson-cue[data-gesture=tap]::after{animation:none!important}}

/* Simple controls teach a stationary hold, never a right-hand aiming drag. */
#touch-controls[data-layout=facing] .touch-lesson-cue[data-gesture=hold]::after{animation:tutorial-hold 1.5s ease-in-out infinite!important;left:48%;top:40%}
@media(prefers-reduced-motion:reduce){#touch-controls[data-layout=facing] .touch-lesson-cue[data-gesture=hold]::after{animation:none!important}}

/* Double-tap zoom is disabled across the whole game, including gaps and nested art. */
html,body{touch-action:manipulation}
#touch-controls,#touch-controls button,#touch-controls .touch-stick,#game{touch-action:none!important}

/* The paused tutorial owns one cue; never show the legacy dash hand early. */
#touch-controls [data-touch=dash].learn-dash::after{display:none!important}
#touch-controls [data-touch=dash].learn-dash:not(.tutorial-target){box-shadow:0 4px #161d3e!important}

/* Editing is available from a paused lesson as well as a live match. */
body:where([data-touch-editing]):not(#_t):not(._t) #touch-controls.editing{display:block!important}
body:where([data-touch-editing]):not(#_t):not(._t) #touch-controls~.touch-editbar{display:flex!important}
#touch-controls.editing [data-touch].init-slot-hidden{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
#touch-settings{overflow-y:auto}
/* Tablet defaults: a thumb-sized arc with room around drag-to-aim spells.
   Saved inline positions retain priority; Reset returns to these defaults. */
@media(min-width:900px) and (min-height:600px){
 body #touch-controls:not(.post-match) button[data-touch]{width:80px;height:80px}
 body #touch-controls:not(.post-match) [data-touch=bolt]{width:106px!important;height:106px!important;left:calc(100% - 220px);top:calc(100% - 245px)}
 body #touch-controls:not(.post-match) [data-touch=fire]{left:calc(100% - 320px);top:calc(100% - 310px)}
 body #touch-controls:not(.post-match) [data-touch=ultimate]{left:calc(100% - 408px);top:calc(100% - 218px)}
 body #touch-controls:not(.post-match) [data-touch=reflect]{left:calc(100% - 326px);top:calc(100% - 124px)}
 body #touch-controls:not(.post-match) [data-touch=dash]{left:calc(100% - 210px);top:calc(100% - 115px)}
 body #touch-controls:not(.post-match) .touch-stick{width:164px;height:164px;left:max(48px,env(safe-area-inset-left));bottom:max(60px,env(safe-area-inset-bottom))}
 body #touch-controls:not(.post-match) .touch-stick i{width:60px;height:60px}
 body #touch-controls:not(.post-match) .touch-options{width:48px;height:48px;left:242px;bottom:60px}
}
/* The heading copy is hidden on touch, so its dark wrapper must collapse too. */
.touch-device #match>.heading>div:first-child{display:none!important}
/* Map intro: thumbs are idle for these four seconds, so let the card use the screen beside the FFA board. */
html body.touch-device.arena-intro:not(.academy-initiation) #touch-controls:not(.post-match){visibility:hidden!important}
html body.touch-device.arena-intro #arena-intro{left:max(15%,184px)!important;right:max(16px,env(safe-area-inset-right))!important}