/* ================= MOBILE / TOUCH =================
   body.touch is set by JS when a phone/tablet is detected. It shows the
   virtual controls (joystick + T/Y/G/H + U) and reflows every screen for
   portrait. The canvas already scales to the window in render.js, so this
   file only owns the DOM layers. */

/* touch-action: manipulation on the whole tree (not just the body) kills the
   300ms double-tap magnify on iOS Safari even where user-scalable=no is
   ignored · the pinch itself is blocked in JS, so this page never zooms. */
body.touch { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
body.touch, body.touch * { -webkit-touch-callout: none; }
body.touch * { touch-action: manipulation; }
body.touch button, body.touch a, body.touch .screen, body.touch .grid, body.touch .card { touch-action: manipulation; }

/* ---------------- fullscreen prompt ---------------- */
#fullscreen-prompt {
  position: fixed; inset: 0; z-index: 960;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,4,8,.82); backdrop-filter: blur(3px);
}
.fs-box {
  text-align: center; padding: 22px 26px;
  border: 1px solid rgba(212,175,55,.35); border-radius: 14px;
  background: rgba(11,9,13,.92);
}
.fs-title { font-size: 16px; letter-spacing: .22em; color: #d4af37; margin-bottom: 6px; }
.fs-sub { font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.fs-btn {
  display: block; width: 100%; margin: 10px 0 0; padding: 10px 0;
  font-family: var(--f); font-size: 12px; letter-spacing: .18em;
  color: #0b090d; background: #d4af37; border: 0; border-radius: 8px; cursor: pointer;
}
.fs-btn:active { transform: scale(.97); }
#fullscreen-prompt[hidden] { display: none; }

/* ---------------- virtual controls layer ---------------- */
#touchui {
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none; display: none;
}
/* the controls appear only while a match is on screen (body.match-active) ·
   on menus the player taps the DOM directly, so the joystick and buttons
   never cover a menu button. */
body.touch.match-active #touchui { display: block; }
#touchui, #touchui * { touch-action: none; }

.touch-hint {
  position: fixed; left: 50%; bottom: calc(2vh + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-size: 8.5px; letter-spacing: .12em; color: rgba(255,255,255,.4);
  background: rgba(0,0,0,.45); border-radius: 10px; padding: 5px 12px;
  max-width: 76vw; width: max-content; white-space: normal; text-align: center;
  line-height: 1.5; pointer-events: none; z-index: 905;
}

/* joystick — bottom-left, a bit right of the edge and BIGGER */
#joy-zone {
  position: fixed; left: 7vw; bottom: calc(6vh + env(safe-area-inset-bottom, 0px));
  width: 46vw; height: 36vh; pointer-events: auto;
}
#joy-base {
  position: absolute; left: 0; bottom: 0;
  width: 27vh; height: 27vh; max-width: 50vw; max-height: 50vw;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.09), rgba(255,255,255,.02));
  box-shadow: inset 0 0 26px rgba(0,0,0,.4);
}
#joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 42%; height: 42%; margin: -21% 0 0 -21%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #b26a1f 72%);
  box-shadow: 0 2px 10px rgba(0,0,0,.55);
  opacity: .9;
}
#joy-zone.active #joy-knob { opacity: 1; transform: scale(1.06); }


/* buttons — bottom-right 3×3 grid, ORDER T Y B / G H TY / U S D, BIGGER */
#touch-btns {
  position: fixed; right: 1.5vw; bottom: calc(2vh + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(3, 22vw);
  grid-template-rows: repeat(3, 22vw);
  gap: 1.8vw;
  pointer-events: none;
}
.tbtn {
  pointer-events: auto;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 6.6vw; font-weight: 900; letter-spacing: .02em;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  box-shadow: inset 0 -4px 10px rgba(0,0,0,.35);
}
.tbtn.on, .tbtn:active { background: rgba(255,255,255,.3); border-color: #ffe08a; }
.tbtn em { font-size: 8px; letter-spacing: .06em; font-style: normal; opacity: .75; margin-top: 2px; }

/* Row 1: T Y B */
.tb-T { grid-area: 1 / 1; }
.tb-Y { grid-area: 1 / 2; }
.tb-B, #tbtn-guard {
  grid-area: 1 / 3;
  background: rgba(224,74,58,.22);
  border-color: rgba(255,170,140,.55);
}
.tb-B.on, #tbtn-guard.on { background: rgba(224,74,58,.45); }
/* Row 2: G H TY */
.tb-G { grid-area: 2 / 1; }
.tb-H { grid-area: 2 / 2; }
.tb-TY {
  grid-area: 2 / 3;
  background: rgba(168,85,247,.22);
  border-color: rgba(210,150,255,.55);
}
.tb-TY.on { background: rgba(168,85,247,.45); }
/* Row 3: U S D */
.tb-U {
  grid-area: 3 / 1;
  background: rgba(212,175,55,.22);
  border-color: rgba(255,215,100,.55);
}
.tb-U.on { background: rgba(212,175,55,.45); }
.tb-S {
  grid-area: 3 / 2;
  background: rgba(74,144,226,.22);
  border-color: rgba(100,180,255,.55);
}
.tb-S.on { background: rgba(74,144,226,.45); }
.tb-D {
  grid-area: 3 / 3;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.25);
}
.tb-D.on { background: rgba(255,255,255,.25); }

/* make the timer clickable for pause on touch */
body.touch .timer { cursor: pointer; pointer-events: auto; position: relative; z-index: 910; }

/* ---------------- ROTATE PROMPT (landscape phones) ---------------- */
#rotate-prompt {
  position: fixed; inset: 0; z-index: 950;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(20,12,8,.92), rgba(4,3,5,.98));
  text-align: center; padding: 20px;
}
body.touch.portrait #rotate-prompt { display: flex; }
.rotate-icon {
  font-size: 64px; line-height: 1; color: var(--gold, #e0b04a);
  animation: rotate-nudge 1.4s ease-in-out infinite;
}
@keyframes rotate-nudge {
  0%, 100% { transform: rotate(-35deg); }
  50%      { transform: rotate(35deg); }
}
.rotate-title { font-size: 26px; font-weight: 900; letter-spacing: .24em; color: #fff; margin-top: 18px; }
.rotate-sub { font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.65); margin-top: 10px; }
.rotate-dismiss {
  margin-top: 34px; padding: 10px 16px; font-size: 11px; letter-spacing: .14em;
  background: transparent; color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.25); border-radius: 4px; cursor: pointer;
}

/* ---------------- LANDSCAPE phones: fixed-size controls ---------------- */
@media (orientation: landscape) and (max-height: 520px) {
  /* the pad ONLY rides above a live fight — body.touch.match-active is the
     same gate as the base rule, so intro/menu screens never show the pad */
  body.touch.match-active #touchui { display: block; }
  body.touch #joy-zone { left: 5vw; bottom: calc(3vh + env(safe-area-inset-bottom, 0px)); width: 30vw; height: 32vh; }
  body.touch #joy-base { width: 128px; height: 128px; }
  body.touch #joy-knob { width: 40%; height: 40%; margin: -20% 0 0 -20%; }
  body.touch #touch-btns {
    right: 1.5vw; bottom: calc(2vh + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(3, 68px);
    gap: 8px;
  }
  body.touch .tbtn { font-size: 20px; }
  body.touch .tbtn em { font-size: 8px; }
  body.touch .touch-hint { font-size: 8px; bottom: calc(1vh + env(safe-area-inset-bottom, 0px)); max-width: 60vw; }

  /* ---- landscape phone screens: a sideways phone is short (≈390px tall),
         so every screen compacts vertically and scrolls instead of clipping ---- */
  body.touch .screen { overflow-y: auto; }

  /* menu — 3×3 grid so every option is a tap away without scrolling */
  body.touch .menu-center { gap: 6px; padding-top: 42px; justify-content: flex-start; }
  body.touch .menu-title { font-size: 28px; margin: 0; margin-top: -10px; }
  body.touch .menu-list {
    display: grid; grid-template-columns: repeat(3, 1fr);
    width: min(520px, 94vw); gap: 4px;
  }
  body.touch .menu-item { padding: 8px 6px; font-size: 12px; text-align: center; justify-content: center; }
  body.touch .menu-item .mi-idx { width: auto; margin-right: 0; }
  body.touch .menu-item .mi-hint { display: none; }
  body.touch .menu-tabs { position: absolute; top: 60px; right: 18px; }
  body.touch .profile-chip { top: 8px; left: 8px; transform: scale(.8); }
  body.touch #acct-chip { top: 10px; right: 56px; transform: scale(.8); }

  /* select — compact cards (portrait + name) + a scrollable grid */
  body.touch .select-body { grid-template-columns: 168px 1fr 168px; gap: 8px; padding: 52px 8px 6px; }
  body.touch .fighter-card { padding: 7px; }
  body.touch .fighter-card .bars, body.touch .fighter-card .balchip { display: none; }
  body.touch .fighter-card .portrait { min-height: 0; margin: 2px 0; flex: 1 1 auto; }
  body.touch .sname { font-size: 11px; }
  body.touch #style-grid { overflow-y: auto; }
  body.touch .grid { grid-auto-rows: 72px; gap: 6px; align-content: start; }
  body.touch .tile .glyph { font-size: 16px; }
  body.touch .tile .tn { font-size: 8px; }
  body.touch .selfoot { height: 46px; padding: 0 10px 0 6px; }
  body.touch .selfoot .hint { display: none; }

  /* story / wiki / movelist / online / squad — scrollable, compact */
  body.touch .story-grid { gap: 10px; }
  body.touch .online-body, body.touch .you-body { padding: 52px 8px 12px; }
  body.touch .modal { max-height: calc(100vh - 56px); overflow-y: auto; }
  body.touch #scr-pause, body.touch #scr-result, body.touch #scr-controls { overflow-y: auto; }
}

/* ---------------- portrait reflow ---------------- */
@media (orientation: portrait) {
  body.touch .bar { height: calc(50px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  body.touch .bar h2 { font-size: 15px; }
  body.touch .screen { overflow-y: auto; }

  /* title */
  body.touch #scr-title .logo { font-size: 60px; }
  body.touch #scr-title .logo-sub { font-size: 12px; }

  /* menu — 3×3 grid for easy thumb reach */
  body.touch .menu-center { gap: 10px; padding-top: calc(4vh + env(safe-area-inset-top, 0px)); }
  body.touch .menu-title { margin-top: -10px; }
  body.touch .menu-list {
    display: grid; grid-template-columns: repeat(3, 1fr);
    width: min(420px, 94vw); gap: 5px;
  }
  body.touch .menu-item { padding: 10px 4px; font-size: 12px; text-align: center; justify-content: center; }
  body.touch .menu-item .mi-idx { width: auto; margin-right: 0; }
  body.touch .menu-item .mi-hint { display: none; }
  body.touch .menu-tabs { position: absolute; top: calc(4vh + 50px + env(safe-area-inset-top, 0px)); right: 18px; }
  body.touch #scr-menu { padding-bottom: 26vh; }

  /* character select — a compact top strip (two small cards, portrait +
     name only) over a full-height scrollable grid, so every fighter stays
     reachable and nothing overflows the narrow screen */
  body.touch #scr-select { padding-bottom: 0; }
  body.touch .select-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 140px 1fr;
    grid-template-areas: "c1 c2" "g g";
    gap: 6px; padding: 52px 6px 6px;
  }
  body.touch #card-p1 { grid-area: c1; }
  body.touch #card-p2 { grid-area: c2; }
  body.touch #style-grid { grid-area: g; overflow-y: auto; }
  body.touch .fighter-card { padding: 6px; }
  body.touch .fighter-card .portrait { min-height: 0; margin: 2px 0; flex: 1 1 auto; }
  body.touch .fighter-card .bars, body.touch .fighter-card .balchip { display: none; }
  body.touch .sname { font-size: 11px; }
  body.touch .selfoot { height: 52px; padding: 0 10px 0 6px; gap: 8px; }
  body.touch .selfoot .hint { display: none; }
  body.touch .grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; gap: 6px; align-content: start; }
  body.touch .tile .glyph { font-size: 18px; }
  body.touch .tile .tn { font-size: 8px; line-height: 1.2; }

  /* story / wiki / movelist grids ride higher so the controls never cover them */
  body.touch #scr-story, body.touch #scr-wiki, body.touch #scr-movelist { padding-bottom: max(26vh, calc(88px + env(safe-area-inset-bottom, 0px))); }
  body.touch #scr-story, body.touch #scr-wiki { padding-top: calc(76px + env(safe-area-inset-top, 0px)); overflow: hidden; }
  body.touch #story-grid, body.touch #wiki-grid { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); touch-action: pan-y; }
  body.touch .story-grid { gap: 10px; }
  body.touch .story-grid > .sttile { flex-basis: 45vw; min-width: 38vw; max-width: 46vw; }

  /* online + squad panels */
  body.touch .online-body, body.touch .you-body { grid-template-columns: 1fr; max-width: 94vw; padding: 64px 8px 26vh; }
  body.touch .online-body .panel { width: 100%; }
  body.touch .you-body { grid-template-columns: 1fr; }
  body.touch .mapgrid { grid-template-columns: repeat(3, 1fr); }

  /* modals / pause / result / settings / controls */
  body.touch .modal { min-width: 0; width: 92vw; padding: 22px 16px; max-height: 72vh; overflow-y: auto; }
  body.touch .modal.wide { min-width: 0; width: 94vw; max-width: 94vw; }
  body.touch #scr-pause, body.touch #scr-result, body.touch #scr-controls { padding-bottom: 30vh; }
  body.touch .mbtn { padding: 12px 18px; font-size: 14px; }
  body.touch .mbtn.small { padding: 9px 14px; font-size: 12px; }

  /* HUD — bigger bars for a phone screen */
  body.touch .meter-wrap { width: 30%; height: 10px; }
  body.touch .hudtag { font-size: 11px; }
  body.touch #hp1, body.touch #hp2 { height: 26px; }
  body.touch #gear-btn, body.touch #fs-btn { width: 42px; height: 42px; font-size: 22px; }

  /* story dialogue — the two-portrait talk fits portrait */
  body.touch #scr-dialogue .dlgbox { width: 94vw; max-width: 94vw; }
  body.touch .dlg-grid { grid-template-columns: repeat(3, 1fr); }
}