/* Clear silhouettes, shared metal finish, and a compact notification rail above combat. */
.touchcontrols .skill{--accent:#d3e6e5;border:2px solid var(--accent);background:radial-gradient(ellipse at 28% 15%,#526c7b,#243743 58%,#111e2b);box-shadow:0 4px 9px #0009,inset 0 0 0 3px #101c2b,inset 0 0 0 5px #c2e7f035,inset 0 3px 10px #fff2;color:#f7f2e5;}
.touchcontrols .skill::before{inset:6px;border-color:#d2e5f84d;border-top-color:#f2f8fc99;background:linear-gradient(135deg,#fff1,transparent 45%);}
.touchcontrols .skill img{width:43px;height:43px;filter:drop-shadow(0 2px 1px #07121b);}
.touchcontrols .skill small{font-size:8px;letter-spacing:.2px;font-weight:900;color:#f7f2e5;}
.touchcontrols .skill.fire{--accent:#ffe0a7;background:radial-gradient(ellipse at 25% 12%,#956952,#593d3e 56%,#251f2c);}
.touchcontrols .skill.fire img{width:60px;height:60px;}.touchcontrols .skill.fire small{font-size:10px;}
.touchcontrols .skill.bomb{--accent:#d5e0a9;background:radial-gradient(ellipse at 25% 12%,#667b56,#344942 56%,#182b33);}
.touchcontrols .skill.jump{--accent:#b1e9ff;background:radial-gradient(ellipse at 25% 12%,#547d9f,#2a405f 56%,#15283d);}
.touchcontrols .skill.cycle{--accent:#d8c9ff;background:radial-gradient(ellipse at 25% 12%,#756c9c,#413459 56%,#24253e);}
.touchcontrols .skill.heal{--accent:#bcf2c0;background:radial-gradient(ellipse at 25% 12%,#568773,#254b43 56%,#162f36);}
.touchcontrols .skill.heal img{width:35px;height:35px;}.touchcontrols .skill .itemno{background:#d8f3cd;color:#183829;border-color:#f0ffe3;}
.touchcontrols .skill.ray{--accent:#c6d5ff;background:radial-gradient(ellipse at 25% 12%,#7376b2,#393d70 56%,#202943);}
.touchcontrols .skill.ray img{width:36px;height:36px;}.touchcontrols .skill.ray small{font-size:6.5px;}
.touchcontrols .skill.superbomb{--accent:#ffd7a5;background:radial-gradient(ellipse at 25% 12%,#a17766,#664551 56%,#322c41);}.touchcontrols .skill.superbomb img{width:40px;height:40px;}
.touchcontrols .skill.pressed{filter:brightness(1.23);transform:scale(.94);}.touchcontrols .skill.used{filter:saturate(.3);opacity:.55;}
.touchcontrols .superprogress{font-size:8px;color:#ffe4b3;background:#122432f5;border-color:#e6c39670;padding:1px 6px;}
.touchcontrols #joystick{border-color:#c7dad7;background:radial-gradient(circle,#88a5a94a,#102739d9);box-shadow:0 5px 12px #0007,inset 0 0 0 3px #102635,inset 0 0 0 6px #d0e9e449,inset 0 0 0 20px #19334099;}
.touchcontrols #joystickKnob{border-color:#e0f1e5;background:radial-gradient(circle at 28% 20%,#accdc0,#567f7c 55%,#294856);}
.airsupport{position:fixed;top:83px;left:calc(4% + 232px);z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;width:76px;height:79px;padding:5px;border:1px solid #f4c9a0;border-radius:15px;background:linear-gradient(145deg,#755c55,#293b4d 65%,#142638);box-shadow:0 4px 12px #0007,inset 0 0 0 3px #142635,inset 0 0 0 4px #ffe6c335;color:#fff0d1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.airsupport img{width:44px;height:44px;pointer-events:none;}.airsupport>span{font-size:7px;font-weight:900;letter-spacing:.25px;}.airsupport>b{position:absolute;top:-6px;right:-4px;background:#ffe5b6;border:1px solid #fff2df;border-radius:50%;min-width:19px;padding:1px 4px;color:#443341;font:bold 12px monospace;}.airsupport>small{font-size:6px;margin-top:3px;color:#e0d5c1;}.airsupport:active{filter:brightness(1.2);}.airsupport:disabled{opacity:.62;cursor:default;}.airsupport.used{filter:saturate(.2);background:linear-gradient(145deg,#344450,#172a36);}.airsupport.used>b{background:#577076;color:#e1e6da;border-color:#8fa4a5;}
.notice-rail{position:fixed;top:76px;left:50%;transform:translateX(-50%);width:min(500px,calc(100vw - 700px));min-width:260px;z-index:7;pointer-events:none;}
.notice-rail .missionbanner,.notice-rail .toast{position:static;inset:auto;transform:none;width:100%;max-width:none;margin:0;text-align:center;padding:7px 11px;pointer-events:none;border:1px solid #bbd6d450;border-radius:8px;background:linear-gradient(125deg,#15303cf2,#0b1d2af2);box-shadow:0 3px 10px #0004;}
.notice-rail .missionbanner{animation:noticeIn .2s ease-out;}.notice-rail .missionbanner small{font-size:8px;letter-spacing:1.5px;color:#ffd0a3;}.notice-rail .missionbanner strong{font:20px Impact,'Arial Black',sans-serif;letter-spacing:1px;margin:3px 0;color:#f2eee2;}.notice-rail .missionbanner span{display:block;font-size:9px;letter-spacing:0;line-height:1.3;color:#c3d7cf;}.notice-rail .toast{font-size:11px;line-height:1.4;color:#f0e3cc;}
.playing.has-notice .missionhud{visibility:hidden;}
.touchmode.playing .airsupport{top:42px;left:194px;width:62px;height:65px;border-radius:12px;padding:3px;}.touchmode.playing .airsupport img{width:35px;height:35px;}.touchmode.playing .airsupport>span{font-size:6.5px;}.touchmode.playing .airsupport>small{font-size:5.5px;margin-top:2px;}
.touchmode.playing .notice-rail{top:37px;left:max(273px,34%);right:max(145px,18%);width:auto;min-width:0;transform:none;}.touchmode.playing .notice-rail .missionbanner{padding:6px 9px;}.touchmode.playing .notice-rail .missionbanner small{font-size:7px;letter-spacing:.5px;}.touchmode.playing .notice-rail .missionbanner strong{font-size:18px;margin:2px 0;}.touchmode.playing .notice-rail .missionbanner span{font-size:8px;line-height:1.2;}.touchmode.playing .notice-rail .toast{font-size:10px;padding:7px 9px;}
@media(max-width:1100px){.playing:not(.touchmode) .airsupport{left:calc(4% + 220px);width:65px;height:72px;}.playing:not(.touchmode) .notice-rail{min-width:220px;width:26%;}}
@media(max-width:760px){.playing:not(.touchmode) .airsupport{left:200px;top:79px;width:58px;height:64px;}.playing:not(.touchmode) .notice-rail{top:82px;left:265px;right:165px;transform:none;min-width:0;width:auto;}.notice-rail .missionbanner span{display:none;}}
@media(max-height:370px){.touchmode.playing .airsupport{top:37px;width:54px;height:62px;left:190px;}.touchmode.playing .airsupport img{width:32px;height:32px;}.touchmode.playing .notice-rail{left:260px;right:138px;}.touchmode.playing .notice-rail .missionbanner span{display:none;}}
@keyframes noticeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
#victoryCelebration{display:block;width:100%;max-width:100%;height:150px;object-fit:contain;margin:8px auto;}
#victoryCelebration[hidden]{display:none;}.result-modal{max-height:94vh;overflow:auto;overflow-x:hidden;}
@media(max-height:500px){#victoryCelebration{height:100px;margin:4px auto;}.result-modal h2{font-size:28px;}}
@media(max-height:370px){#victoryCelebration{height:80px;}.touchmode .result-modal{padding:16px;}.touchmode .result-modal .stats{margin:8px 0;}}

/* A thumb arc: fire is the primary target, jump sits immediately beside it. */
.touchcontrols .skillcluster{display:block;width:238px;height:180px;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));transform:none;}
.touchcontrols .skill{position:absolute;inset:auto;width:48px;height:48px;padding:4px;border:1px solid var(--accent);box-shadow:0 3px 8px #0006,inset 0 1px 4px #fff2;}
.touchcontrols .skill::before{inset:4px;border-color:#d2e5f82b;background:none;}
.touchcontrols .skill img,.touchcontrols .skill.heal img,.touchcontrols .skill.ray img,.touchcontrols .skill.superbomb img{width:26px;height:26px;filter:none;}
.touchcontrols .skill small{font-size:7px;line-height:1.1;letter-spacing:0;}
.touchcontrols .skill.heal1{left:12px;top:125px;}.touchcontrols .skill.cycle{left:14px;top:62px;}.touchcontrols .skill.ray{left:52px;top:7px;}.touchcontrols .skill.superbomb{left:110px;top:5px;}.touchcontrols .skill.bomb{left:174px;top:16px;}
.touchcontrols .skill.jump{left:72px;top:111px;width:68px;height:68px;}.touchcontrols .skill.fire{left:150px;top:90px;width:88px;height:88px;}
.touchcontrols .skill.fire img{width:46px;height:46px;}.touchcontrols .skill.jump img{width:36px;height:36px;}.touchcontrols .skill.fire small{font-size:10px;}.touchcontrols .skill.jump small{font-size:8px;}.touchcontrols .skill.ray small{font-size:6px;}
.touchcontrols .superprogress{bottom:-9px;font-size:7px;padding:0 4px;}.touchcontrols .chargepips{gap:3px;}.touchcontrols .chargepips i{width:4px;height:4px;}
.playing .airsupport{width:48px;height:52px;border-radius:10px;padding:3px;border-color:#f4c9a077;box-shadow:0 3px 8px #0005;}.playing .airsupport img{width:28px;height:28px;}.playing .airsupport>span{font-size:5.5px;}.playing .airsupport>small{font-size:5px;}
@media(max-height:370px){
 .touchcontrols .skillcluster{width:220px;height:167px;bottom:max(12px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right));}
 .touchcontrols .skill{width:44px;height:44px;}.touchcontrols .skill img,.touchcontrols .skill.heal img,.touchcontrols .skill.ray img,.touchcontrols .skill.superbomb img{width:24px;height:24px;}
 .touchcontrols .skill.heal1{left:8px;top:116px;}.touchcontrols .skill.cycle{left:10px;top:57px;}.touchcontrols .skill.ray{left:46px;top:5px;}.touchcontrols .skill.superbomb{left:100px;top:3px;}.touchcontrols .skill.bomb{left:160px;top:12px;}
 .touchcontrols .skill.jump{left:66px;top:104px;width:62px;height:62px;}.touchcontrols .skill.fire{left:138px;top:83px;width:82px;height:82px;}.touchcontrols .skill.fire img{width:43px;height:43px;}.touchcontrols .skill.jump img{width:33px;height:33px;}
}