/* Mobile touch skin: PS2-era console plastic. Skin only (color, bevel, icons, pressed state);
   layout geometry for these elements lives in style.css (mobile-ui). Tokens are shared with
   the ability wheel and HUD button: use var(--mt-*) or add class .mt-btn / .mt-btn--round. */
:root{
  --mt-font:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --mt-ink:#f3f6fa;
  --mt-face:#252c3b;       /* graphite plastic */
  --mt-face-hi:#46546e;    /* gloss on the top half */
  --mt-edge:#07090f;       /* underside / depth */
  --mt-rim:#a9bccf;        /* chrome rim */
  --mt-accent:#ff5a1f;     /* lava: jump, primary */
  --mt-accent-hi:#ffb07a;
  --mt-accent-2:#36e6ef;   /* chrome cyan: jetpack, matches the DU marker */
  --mt-glow:#36e6ef88;
  --mt-panel:#0d121cf2;
  --mt-radius:14px;
  --mt-press-depth:4px;
  --ico-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 22 17H2z'/%3E%3C/svg%3E");
  --ico-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 2 7h20z'/%3E%3C/svg%3E");
  --ico-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 21v-7a6 6 0 0 0-6-6H9V3L2 10l7 7v-5h5a2 2 0 0 1 2 2v7z'/%3E%3C/svg%3E");
  --ico-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21v-7a6 6 0 0 1 6-6h5V3l7 7-7 7v-5h-5a2 2 0 0 0-2 2v7z'/%3E%3C/svg%3E");
  --ico-jump:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 21 10h-5v5H8v-5H3z'/%3E%3Crect x='4' y='19' width='16' height='3' rx='1.5'/%3E%3C/svg%3E");
  --ico-jet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c3 3 4 6 4 9v5H8v-5c0-3 1-6 4-9zM8 16h8l-1 2c0 2-1 4-3 5-2-1-3-3-3-5z'/%3E%3C/svg%3E");
  --ico-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10 1h4l.6 3.1 2 1.1 3-1.2 2 3.5-2.4 2v2.9l2.4 2-2 3.5-3-1.2-2 1.1L14 23h-4l-.6-3.1-2-1.1-3 1.2-2-3.5 2.4-2V11.6L2.4 9.5l2-3.5 3 1.2 2-1.1zM12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z'/%3E%3C/svg%3E");
  --ico-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 2.8 12 9.2l6.4-6.4 2.8 2.8L14.8 12l6.4 6.4-2.8 2.8L12 14.8l-6.4 6.4-2.8-2.8L9.2 12 2.8 5.6z'/%3E%3C/svg%3E");
  --ico-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v13H10l-5 5v-5H3z'/%3E%3C/svg%3E");
  --ico-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3C/svg%3E");
  --ico-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l-3 7h7L8 22l3-9H5z'/%3E%3C/svg%3E");
  --ico-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 21 4.5v6.5c0 5.5-3.8 10-9 12-5.2-2-9-6.5-9-12V4.5z'/%3E%3C/svg%3E");
}

/* Reusable icon: <i class="mt-ico mt-ico-jet"></i>; color follows currentColor. */
.mt-ico{display:inline-block;width:1.2em;height:1.2em;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;vertical-align:-.2em}
.mt-ico-up{--ico:var(--ico-up)}.mt-ico-down{--ico:var(--ico-down)}.mt-ico-left{--ico:var(--ico-left)}.mt-ico-right{--ico:var(--ico-right)}
.mt-ico-jump{--ico:var(--ico-jump)}.mt-ico-jet{--ico:var(--ico-jet)}.mt-ico-gear{--ico:var(--ico-gear)}.mt-ico-close{--ico:var(--ico-close)}
.mt-ico-chat{--ico:var(--ico-chat)}.mt-ico-star{--ico:var(--ico-star)}.mt-ico-dash{--ico:var(--ico-dash)}.mt-ico-shield{--ico:var(--ico-shield)}

/* The console button: glossy top half, chrome rim, solid depth underneath that collapses when pressed. */
.mt-btn,
html #touch button,html #jet,html #settings-toggle,html #ability-bar button,
html body #whats-new-badge,html body #world-chat button.wc-toggle{
  font-family:var(--mt-font);font-weight:900;color:var(--mt-ink);letter-spacing:.01em;
  text-shadow:0 1px 0 var(--mt-edge);
  background:linear-gradient(180deg,var(--mt-face-hi) 0%,var(--mt-face) 48%,var(--mt-face) 100%);
  border:2px solid var(--mt-rim);
  box-shadow:inset 0 2px 0 #ffffff40,inset 0 -3px 0 #00000055,0 var(--mt-press-depth) 0 var(--mt-edge),0 calc(var(--mt-press-depth) + 3px) 10px #0008;
  transition:transform 60ms,box-shadow 60ms,background-color 60ms;
}
.mt-btn:hover,html #touch button:hover,html #jet:hover,html #settings-toggle:hover,html #ability-bar button:hover{background:linear-gradient(180deg,var(--mt-face-hi) 0%,var(--mt-face) 48%,var(--mt-face) 100%)}
.mt-btn--round{border-radius:50%}

/* Pressed: data-mt-pressed is set by mobile-theme.js because the touch handlers preventDefault (no :active on iOS). */
.mt-btn:active,.mt-btn[data-mt-pressed],
html #touch button[data-mt-pressed],html #jet[data-mt-pressed],html #settings-toggle[data-mt-pressed],
html #ability-bar button[data-mt-pressed],html body #world-chat button.wc-toggle[data-mt-pressed],html body #whats-new-badge[data-mt-pressed]{
  transform:translateY(var(--mt-press-depth));
  border-color:var(--mt-accent-2);
  background:linear-gradient(180deg,var(--mt-face) 0%,#1a2030 100%);
  box-shadow:inset 0 3px 6px #000a,0 0 0 3px var(--mt-glow),0 0 18px var(--mt-glow);
}
.mt-btn:disabled,.mt-btn[aria-disabled=true],.mt-btn.mt-cooldown,
html #jet:disabled,html #ability-bar button:disabled{
  color:#ffffff80;border-color:#5b6878;filter:saturate(.4);opacity:.7;
  box-shadow:inset 0 2px 0 #ffffff1a,0 2px 0 var(--mt-edge);transform:none;
}
.mt-btn:focus-visible,html #touch button:focus-visible,html #jet:focus-visible,html #settings-toggle:focus-visible,html #ability-bar button:focus-visible{outline:3px solid var(--mt-accent-2);outline-offset:3px}

@media (pointer:coarse),(max-width:650px){
  /* D-pad: glyph text replaced by chunky filled icons; aria-labels carry the names. */
  html #touch div button{font-size:0;border-radius:12px;position:relative}
  html #touch div button::before{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;background:var(--mt-ink);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;filter:drop-shadow(0 1px 0 var(--mt-edge))}
  html #touch button[data-key=forward]{--ico:var(--ico-up)}
  html #touch button[data-key=back]{--ico:var(--ico-down)}
  html #touch button[data-key=left]{--ico:var(--ico-left)}
  html #touch button[data-key=right]{--ico:var(--ico-right)}
  html #touch div button[data-mt-pressed]::before{background:var(--mt-accent-2)}

  /* Jump: the one loud control. Lava face button with an inner ring and italic label.
     Inner layout (fuel ring, hint) belongs to ability-wheel.css, so skin only. */
  html #touch>button[data-key=jump]{
    font-size:15px;font-style:italic;letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 #7a1c00;
    border:3px solid var(--mt-accent-hi);
    background:radial-gradient(circle at 50% 30%,var(--mt-accent-hi) 0%,var(--mt-accent) 42%,#c23a08 100%);
    box-shadow:inset 0 0 0 5px #ffffff26,inset 0 -6px 0 #0000003a,0 var(--mt-press-depth) 0 #5e1500,0 calc(var(--mt-press-depth) + 4px) 14px #000a;
  }
  html #touch>button[data-key=jump][data-mt-pressed]{
    border-color:#fff;background:radial-gradient(circle at 50% 40%,var(--mt-accent) 0%,#c23a08 100%);
    box-shadow:inset 0 4px 10px #0008,0 0 0 4px #ff5a1f66,0 0 26px #ff5a1f99;
  }

  /* Jetpack: cyan rim and flame icon, secondary to jump. */
  html #jet{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;border-color:var(--mt-accent-2);color:var(--mt-ink);font-size:13px}
  html #jet::before{content:"";flex:none;width:18px;height:18px;background:var(--mt-accent-2);-webkit-mask:var(--ico-jet) center/contain no-repeat;mask:var(--ico-jet) center/contain no-repeat}
  html #jet[data-mt-pressed]{border-color:#fff;box-shadow:inset 0 3px 6px #000a,0 0 0 3px var(--mt-glow),0 0 22px var(--mt-accent-2)}

  /* Round system buttons: settings, what's new, chat. */
  html #settings-toggle{border-radius:50%;position:fixed}
  html #settings-toggle .st-icon{display:none}
  html #settings-toggle::before{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;background:var(--mt-ink);-webkit-mask:var(--ico-gear) center/contain no-repeat;mask:var(--ico-gear) center/contain no-repeat}
  html #settings-toggle[aria-expanded=true]{border-color:var(--mt-accent)}
  html #settings-toggle[aria-expanded=true]::before{-webkit-mask-image:var(--ico-close);mask-image:var(--ico-close);width:18px;height:18px}
  html body #whats-new-badge{border-radius:50%}
  html body #world-chat button.wc-toggle{border-radius:23px}

  /* Ability bar (until the wheel lands): compact rounded chips on the same plastic. */
  html #ability-bar button{border-radius:12px;font-size:12px}

  /* Settings sheet: dark console menu with chrome frame. */
  html body.settings-open footer>div{background:var(--mt-panel);border:2px solid var(--mt-rim);border-radius:18px;box-shadow:inset 0 1px 0 #ffffff30,0 12px 40px #000c;font-family:var(--mt-font)}
  html body.settings-open footer>div>button,html body.settings-open footer>div>select,html body.settings-open footer #quality,html body.settings-open footer #visual-style{
    font-family:var(--mt-font);font-weight:900;color:var(--mt-ink);border-radius:12px;
    border:2px solid #5d6f86;background:linear-gradient(180deg,#34405a 0%,var(--mt-face) 55%);
    box-shadow:inset 0 2px 0 #ffffff30,0 3px 0 var(--mt-edge);
  }
  html body.settings-open footer>div>select,html body.settings-open footer #quality,html body.settings-open footer #visual-style{
    -webkit-appearance:none;appearance:none;padding:0 36px 0 14px;max-width:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2336e6ef'%3E%3Cpath d='M12 18 3 7h18z'/%3E%3C/svg%3E") right 12px center/14px no-repeat,linear-gradient(180deg,#34405a 0%,var(--mt-face) 55%);
  }
  html body.settings-open footer>div>button[aria-pressed=true]{border-color:var(--mt-accent-2);box-shadow:inset 0 2px 0 #ffffff30,0 3px 0 var(--mt-edge),0 0 0 2px var(--mt-glow)}
  html body.settings-open footer>div>button[data-mt-pressed]{transform:translateY(3px);box-shadow:inset 0 3px 6px #000a;border-color:var(--mt-accent-2)}
  html body.settings-open footer>div>#shop-open{border-color:var(--mt-accent);background:linear-gradient(180deg,#ff8a4d 0%,var(--mt-accent) 55%,#c23a08 100%);text-shadow:0 1px 0 #7a1c00}
  html body.settings-open footer>div>.volume{font-family:var(--mt-font);font-weight:900}
  html body.settings-open footer>div>.volume input{accent-color:var(--mt-accent)}
}

/* Role/lives label beside the HUD pill: must end before #shop-open, which style.css pins in the
   top row (right: safe-r + 54px, ~111px wide). 272px = pill offset 104 + gear 54 + shop 111 + gap 3. */
@media (pointer:coarse) and (max-width:650px){
  html body.hud-on header #attempts{max-width:calc(100vw - var(--safe-l,12px) - var(--safe-r,12px) - 272px);font-size:13px;letter-spacing:0}
}

@media (prefers-reduced-motion:reduce){
  .mt-btn,html #touch button,html #jet,html #settings-toggle,html #ability-bar button{transition:none}
}