/* ==========================================================================
   mobile.css — landscape phone layout.

   Everything is anchored to a corner and padded by the safe-area insets, and
   scaled by --m-scale so it holds together from an iPhone SE to a Pro Max.
   ========================================================================== */

:root{
  --m-scale:1;
  --sa-l:env(safe-area-inset-left, 0px);
  --sa-r:env(safe-area-inset-right, 0px);
  --sa-b:env(safe-area-inset-bottom, 0px);
  --sa-t:env(safe-area-inset-top, 0px);
}

html,body.mobile{
  overscroll-behavior:none;            /* no pull-to-refresh */
  touch-action:none;                   /* no pan, no double-tap zoom */
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:fixed; inset:0;             /* stops iOS rubber-banding the page */
  width:100%; height:100%;
}

body.mobile #gl{ cursor:none; touch-action:none; }
body.mobile.cursor-attack #gl{ cursor:none; }

#layer-touch{
  position:absolute; inset:0; z-index:25;
  pointer-events:none;                 /* touches are read from document */
}

/* ==========================================================================
   Desktop HUD pieces that do not belong on a phone
   ========================================================================== */
body.mobile .hud-bottom .portrait-cluster,
body.mobile .hud-bottom .ability-row,
body.mobile .hud-bottom .hud-right,
body.mobile .hud-bottom .chips{ display:none !important; }

body.mobile .hud-bottom{
  height:auto; background:none; padding:0; gap:0;
  left:50%; bottom:calc(6px + var(--sa-b));
  transform:translateX(-50%) scale(var(--m-scale));
  transform-origin:bottom center;
  pointer-events:none;
}
/* Only the bars survive, shrunk and centred above the thumbs. */
body.mobile .hud-mid{ width:auto; }
body.mobile .bar{ width:230px; }
body.mobile .bar.hp{ height:14px; }
body.mobile .bar.res{ height:9px; margin-top:2px; }
body.mobile .bar .bartext{ font-size:9.5px; }
body.mobile .bar.res .bartext{ font-size:8px; }

body.mobile .hud-top{
  height:34px; transform:translateX(-50%) scale(var(--m-scale));
  top:var(--sa-t);
}
body.mobile .team-kills{ font-size:19px; min-width:22px; }
body.mobile .team-gold{ display:none; }
body.mobile .clock{ font-size:16px; }
body.mobile .clock-block{ padding:0 12px; min-width:74px; }
body.mobile .team-side{ padding:0 9px; }
body.mobile .phase{ font-size:7px; }

body.mobile .minimap{
  width:104px; height:104px;
  right:calc(6px + var(--sa-r)); bottom:auto; top:calc(40px + var(--sa-t));
  transform:scale(var(--m-scale)); transform-origin:top right;
  border-width:1px;
}

body.mobile .objective{ top:calc(38px + var(--sa-t)); padding:3px 9px; min-width:120px; }
body.mobile .obj-name{ font-size:8px; letter-spacing:1.5px; }
body.mobile .obj-timer{ font-size:11px; }

body.mobile .dmg{ font-size:15px; }
body.mobile .dmg.taken{ font-size:17px; }
body.mobile .dmg.dim{ font-size:12px; }
body.mobile .wname{ font-size:9px; bottom:17px; }
body.mobile .wbar{ width:58px; }
body.mobile .wbar.minion{ width:30px; }

body.mobile .b-title{ font-size:26px; letter-spacing:3px; }
body.mobile .b-sub{ font-size:10px; }
body.mobile .toast{ font-size:11px; padding:4px 10px; }
body.mobile .death-title{ font-size:26px; letter-spacing:3px; }
body.mobile .death-timer{ font-size:48px; }
body.mobile .fps{ font-size:9px; padding:3px 6px; left:calc(6px + var(--sa-l)); top:calc(38px + var(--sa-t)); }

/* ==========================================================================
   Virtual joystick — floating base, spawns under the thumb
   ========================================================================== */
.m-joy{
  position:absolute; left:0; top:0; width:0; height:0;
  opacity:0; transition:opacity .12s; pointer-events:none;
}
.m-joy.on{ opacity:1; }
.m-joy-base{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:132px; height:132px; border-radius:50%;
  border:2px solid rgba(200,170,110,.42);
  background:radial-gradient(circle,rgba(10,22,34,.42),rgba(10,22,34,.14) 70%,transparent);
  box-shadow:0 0 18px rgba(0,0,0,.45);
}
.m-joy-knob{
  position:absolute; left:50%; top:50%;
  /* No centring margin: touch.js writes translate(calc(-50% + dx), ...), and
     a margin here would centre it a second time and offset the whole stick. */
  width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#EAF4FF,#7FA8C8 55%,#33556E);
  border:2px solid rgba(240,230,210,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.6), inset 0 -3px 8px rgba(0,0,0,.35);
}

/* ==========================================================================
   Ability cluster — an arc in the bottom-right thumb sweep
   ========================================================================== */
.m-cluster{
  position:absolute;
  right:calc(10px + var(--sa-r)); bottom:calc(10px + var(--sa-b));
  width:210px; height:186px;
  transform:scale(var(--m-scale)); transform-origin:bottom right;
  pointer-events:none;
}
.m-ab{
  position:absolute; border-radius:50%;
  background:linear-gradient(180deg,#141C24,#05090D);
  border:2px solid var(--gold-4);
  box-shadow:0 0 0 1px rgba(0,0,0,.85),0 3px 9px rgba(0,0,0,.7);
  overflow:hidden; isolation:isolate;
}
/* R is the big one, bottom-right under the thumb; Q W E arc up and left. */
.m-ab-r{ width:82px; height:82px; right:0;    bottom:0;   border-color:var(--gold-3); }
.m-ab-e{ width:62px; height:62px; right:76px; bottom:22px; }
.m-ab-w{ width:62px; height:62px; right:126px; bottom:74px; }
.m-ab-q{ width:62px; height:62px; right:150px; bottom:134px; }

.m-ab-icon{ position:absolute; inset:0; border-radius:50%; overflow:hidden; }
.m-ab-sweep{
  position:absolute; inset:0; z-index:2; border-radius:50%;
  background:conic-gradient(from 0turn,
    rgba(2,8,14,.82) 0turn calc(var(--cd,0) * 1turn),
    rgba(0,0,0,0) calc(var(--cd,0) * 1turn) 1turn);
}
.m-ab-cd{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  font:700 22px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 0 3px #000,0 2px 4px #000;
}
.m-ab-key{
  position:absolute; right:3px; bottom:2px; z-index:4;
  font:700 10px/1 var(--font-body); color:var(--gold-1);
  text-shadow:0 1px 2px #000;
}
.m-ab-ammo{
  position:absolute; left:5px; top:3px; z-index:4;
  font:700 13px/1 var(--font-body); color:#8FEFFF;
  text-shadow:0 0 3px #000,0 1px 2px #000;
}
.m-ab-q .m-ab-ammo,.m-ab-w .m-ab-ammo,.m-ab-r .m-ab-ammo{ display:none; }

.m-ab.cooling .m-ab-icon{ filter:grayscale(.6) brightness(.55); }
.m-ab.ready{ border-color:var(--gold-2); box-shadow:0 0 0 1px rgba(0,0,0,.85),0 0 12px rgba(200,170,110,.5),0 3px 9px rgba(0,0,0,.7); }
.m-ab.aiming{ border-color:#F0E6D2; box-shadow:0 0 0 3px rgba(240,230,210,.9),0 0 22px rgba(240,230,210,.7); }
.m-ab.cancel{ border-color:#E84057; box-shadow:0 0 0 3px rgba(232,64,87,.9),0 0 22px rgba(232,64,87,.7); }
.m-ab.active{ border-color:#7FE3FF; box-shadow:0 0 0 3px #7FE3FF,0 0 22px rgba(127,227,255,.85); }
.m-ab.pulse{ animation:mPulse .2s ease-out; }
.m-ab.nope{ animation:mNope .24s ease-out; }
@keyframes mPulse{ 50%{ transform:scale(1.12); } }
@keyframes mNope{ 25%{ transform:translateX(-4px);} 75%{ transform:translateX(4px);} }

/* Attack button, inboard of the cluster */
.m-atk svg{ display:block; color:var(--gold-1); filter:drop-shadow(0 1px 2px #000); }
.m-atk{
  position:absolute;
  right:calc(200px + var(--sa-r)); bottom:calc(14px + var(--sa-b));
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 42% 34%,#3A2D14,#12100A);
  border:2px solid var(--gold-3);
  box-shadow:0 0 0 1px rgba(0,0,0,.85),0 3px 9px rgba(0,0,0,.7);
  transform:scale(var(--m-scale)); transform-origin:bottom right;
}
.m-atk.pulse{ animation:mPulse .2s ease-out; }
.m-atk.nope{ animation:mNope .24s ease-out; }

/* Summoner spells, small, above the cluster */
.m-sums{
  position:absolute;
  right:calc(12px + var(--sa-r)); bottom:calc(196px + var(--sa-b));
  display:flex; gap:7px;
  transform:scale(var(--m-scale)); transform-origin:bottom right;
}
.m-sum{
  position:relative; width:42px; height:42px; border-radius:7px; overflow:hidden;
  border:2px solid var(--gold-5);
  background:#05090D;
  box-shadow:0 2px 6px rgba(0,0,0,.7);
}
.m-sum::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:conic-gradient(from 0turn,
    rgba(2,8,14,.82) 0turn calc(var(--cd,0) * 1turn),
    rgba(0,0,0,0) calc(var(--cd,0) * 1turn) 1turn);
}
.m-sum-cd{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  font:700 14px/1 var(--font-body); color:var(--gold-1); text-shadow:0 1px 3px #000;
}
.m-sum.pulse{ animation:mPulse .2s ease-out; }

/* The dot that tracks the aiming thumb */
.m-aim{
  position:absolute; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; border:2px solid rgba(240,230,210,.9);
  background:rgba(240,230,210,.18);
  opacity:0; transition:opacity .1s;
  box-shadow:0 0 14px rgba(240,230,210,.6);
}
.m-aim.on{ opacity:1; }
.m-aim.cancel{ border-color:#E84057; background:rgba(232,64,87,.25); box-shadow:0 0 14px rgba(232,64,87,.7); }

/* ==========================================================================
   Rotate gate
   ========================================================================== */
#rotate{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:#03080e; text-align:center;
}
body.portrait #rotate{ display:flex; }
.rot-icon{ font-size:58px; color:var(--gold-2); animation:rotSpin 2.4s ease-in-out infinite; }
@keyframes rotSpin{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(90deg); } }
.rot-title{ margin-top:16px; font:700 20px/1 var(--font-display); letter-spacing:4px; color:var(--gold-1); }
.rot-sub{ margin-top:8px; font:400 12px/1 var(--font-body); color:var(--text-dim); }

/* ==========================================================================
   Splash, compacted for a short landscape viewport
   ========================================================================== */
.m-splash .splash-inner{
  grid-template-columns:160px 1fr; gap:14px; padding:14px 18px;
  max-height:100vh; overflow:auto;
}
.m-splash .splash-portrait{ width:132px; height:132px; margin-bottom:8px; }
.m-splash .splash-name{ font-size:22px; letter-spacing:3px; }
.m-splash .splash-title{ font-size:9px; letter-spacing:2px; }
.m-splash .ctl-grid{ grid-template-columns:1fr 1fr; gap:4px 14px; font-size:11px; }
.m-splash .ctl-grid b{ color:var(--gold-2); }
.m-splash .ctl-note{ font-size:10.5px; margin-top:8px; }
.m-splash #playbtn{ padding:12px 30px; font-size:13px; }
.m-splash #mpbtn{ padding:10px 24px; font-size:11px; }
.m-splash .splash-tip{ font-size:10px; }

.m-switch{
  grid-column:2; justify-self:start;
  font:500 10px/1 var(--font-body); letter-spacing:1.6px;
  color:var(--text-dimmer); text-decoration:none;
  border-bottom:1px solid rgba(120,90,40,.5); padding-bottom:2px;
  pointer-events:auto;
}
.m-switch:hover{ color:var(--gold-2); }

/* Very short viewports (SE in landscape): shrink the splash further. */
@media (max-height:400px){
  .m-splash .splash-portrait{ width:104px; height:104px; }
  .m-splash .splash-name{ font-size:18px; }
  .m-splash .ctl-grid{ font-size:10px; }
}

/* Banners sit high and small so they never cover the lane on a short screen. */
body.mobile .announce{ top:36px; }
body.mobile .toast-stack{ top:auto; bottom:calc(64px + var(--sa-b)); }
body.mobile .banner{ opacity:.93; }
body.mobile .b-title{ font-size:21px; letter-spacing:2.5px; }
body.mobile .b-sub{ font-size:9px; letter-spacing:1.6px; }
body.mobile .end-inner{ min-width:0; width:94vw; padding:14px 16px; }
body.mobile .end-title{ font-size:40px; letter-spacing:5px; }
body.mobile .end-table{ font-size:10px; margin-top:10px; }
body.mobile .end-table th{ font-size:8px; padding:0 8px 5px 0; }
body.mobile .end-table td{ padding:4px 8px 4px 0; }
body.mobile .end-btn{ margin-top:12px; padding:9px 24px; font-size:12px; }
body.mobile .sb-inner{ width:94vw; padding:14px 16px; }

/* Shop button — dim until he is standing in the fountain. */
.m-shop{
  position:absolute;
  left:calc(10px + var(--sa-l)); top:calc(40px + var(--sa-t));
  padding:7px 13px; border-radius:5px;
  background:rgba(1,10,19,.78); border:1px solid var(--gold-5);
  font:700 10px/1 var(--font-body); letter-spacing:2px; color:var(--text-dimmer);
  transform:scale(var(--m-scale)); transform-origin:top left;
}
.m-shop.open{
  color:var(--gold-1); border-color:var(--gold-2);
  box-shadow:0 0 12px rgba(200,170,110,.6);
}
.m-shop.pulse{ animation:mPulse .2s ease-out; }
.m-shop.nope{ animation:mNope .24s ease-out; }

/* The shop overlay itself, sized for a short landscape viewport. */
body.mobile .shop{
  min-width:0; width:92vw; max-height:92vh; overflow:auto;
  padding:12px 14px; gap:6px;
}
body.mobile .shop-title{ font-size:17px; letter-spacing:3px; }
body.mobile .shop-sub{ font-size:9px; }
body.mobile .shop-grid{ gap:6px; margin-top:4px; }
body.mobile .shop-item{ padding:8px 9px; }
body.mobile .si-name{ font-size:11px; }
body.mobile .si-desc{ font-size:9.5px; min-height:24px; margin-top:3px; }
body.mobile .si-cost{ font-size:11px; margin-top:4px; }
body.mobile .shop-close{ font-size:11px; padding:10px; }

/* ==========================================================================
   ADD TO HOME SCREEN hint
   Only shown on iPhone Safari, where there is no Fullscreen API at all.
   ========================================================================== */
#a2hs{
  position:fixed; z-index:150;
  left:50%; bottom:calc(8px + var(--sa-b));
  transform:translate(-50%, 140%);
  transition:transform .35s cubic-bezier(.2,1,.3,1);
  max-width:min(560px, calc(100vw - 24px));
  pointer-events:none;
}
#a2hs.on{ transform:translate(-50%, 0); pointer-events:auto; }
.a2hs-inner{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px 9px 14px;
  background:linear-gradient(180deg,rgba(10,22,34,.97),rgba(1,10,19,.98));
  border:1px solid var(--gold-4); border-radius:7px;
  box-shadow:0 6px 24px rgba(0,0,0,.75);
}
.a2hs-text{
  font:400 11.5px/1.45 var(--font-body); color:var(--text-dim);
}
.a2hs-text b{ color:var(--gold-1); font-weight:600; }
.a2hs-share{
  display:inline-block; vertical-align:-3px; color:var(--gold-2);
  margin:0 1px;
}
.a2hs-btn{
  display:inline-block; margin-left:4px; padding:4px 11px;
  background:linear-gradient(180deg,#1E3448,#0A141C);
  border:1px solid var(--gold-3); border-radius:3px;
  font:700 10px/1 var(--font-body); letter-spacing:1.5px; color:var(--gold-1);
  cursor:pointer;
}
.a2hs-close{
  flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; color:var(--text-dimmer); font-size:13px; cursor:pointer;
}
.a2hs-close:hover{ color:var(--gold-1); }

/* Launched from the home screen: the status bar overlays the page, so the
   safe-area padding already in the layout does the work. Nothing to add. */
body.standalone #a2hs{ display:none; }

.m-splash .splash-game{ font-size:9px; letter-spacing:3px; margin-bottom:6px; }