/* Touch play in a match (js/touch.js): phones in landscape and small tablets. Every rule here sits under body.touch,
   a class touch.js sets only on a touch-first screen (a coarse pointer, no mouse, up to a small tablet's size), so a
   desktop with a mouse renders exactly as before. Loaded last.
   Two tiers: body.touch (any touch layout: the action bar, Lock in in the corner, bigger targets, no key hints) and
   body.touch under (max-height: 500px) (a landscape phone: everything compact so the board keeps the middle). */

/* ======================================================================= TOUCH (phones and tablets) */
body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch button { touch-action: manipulation; }
/* Keyboard hints mean nothing here. */
body.touch .slot .k, body.touch #social .so-menu kbd { display: none; }
/* The action bar has these. */
body.touch #sbBtn, body.touch #social .so-bar { display: none; }
/* A unit card can be tapped to inspect its champion. */
body.touch #hud .ucard { pointer-events: auto; }

/* The action bar: bottom left, two rows. Only in a match. */
#touchbar { display: none; }
body.touch.ag-inmatch #touchbar { position: fixed; z-index: 4; left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, 56px); grid-auto-rows: 52px; gap: 6px; }
body.touch #touchbar .tb-btn { --ar-cut: 7px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0;
  font: 700 9.5px var(--ui); letter-spacing: .02em; color: #cfe6f7; cursor: pointer;
  background: var(--ar-panel); border: 1px solid var(--ar-line); box-shadow: inset 0 1px 0 rgba(160, 225, 255, .14);
  clip-path: polygon(var(--ar-cut) 0, 100% 0, 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, 0 100%, 0 var(--ar-cut)); }
body.touch #touchbar .tb-btn svg { display: block; }
body.touch #touchbar .tb-btn[hidden] { display: none; }
body.touch #touchbar .tb-btn:disabled { opacity: .4; }
body.touch #touchbar .tb-btn:active:not(:disabled) { background: linear-gradient(180deg, rgba(40, 80, 110, .95), rgba(14, 30, 44, .95)); }
body.touch #touchbar .tb-btn.on { color: #fff; border-color: var(--ally); background: linear-gradient(180deg, rgba(20, 90, 120, .92), rgba(8, 36, 52, .92)); box-shadow: inset 0 0 8px rgba(63, 196, 224, .27); }
body.touch #touchbar [data-tb="wp"].on { border-color: #64a8e0; }
body.touch #touchbar [data-tb="wall"] { color: #ffe39a; border-color: rgba(255, 201, 40, .6); }

/* The dock stays centred without a transform (a transform would hold Lock in inside it), and Lock in with its
   timer ring and the time bank go to the bottom-right corner: the big button of the action bar. */
body.touch #dock { left: 0; right: 0; margin: 0 auto; width: max-content; transform: none; }
body.touch #lockwrap { position: fixed; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); }
/* Pings and quick chat (their menu and the team feed) sit above Lock in. */
body.touch #social { right: calc(12px + env(safe-area-inset-right)); bottom: calc(150px + env(safe-area-inset-bottom)); }
body.touch #social .so-feed { right: 0; bottom: 0; width: 280px; }
body.touch #social:has(.so-menu:not([hidden])) .so-feed { bottom: calc(100% + var(--s2)); }
body.touch #social .so-menu button { min-height: 40px; }
body.touch #skip { right: calc(12px + env(safe-area-inset-right)); bottom: calc(132px + env(safe-area-inset-bottom)); height: 40px; }

/* The top bar: no brand; the view tools on the left, the rest on the right, the match header between them. */
body.touch #top .brand { display: none; }
body.touch #top .tools { display: contents; }
body.touch #top .tgrp:first-child { padding-left: 0; border-left: 0; }
body.touch #top .tgrp:nth-child(2) { margin-left: auto; padding-left: 0; border-left: 0; }

body.touch #top .tgrp:first-child { order: -1; }
/* The turn log above the action bar (it opens upward, folded by default). */
body.touch #turnlog { top: auto; bottom: calc(132px + env(safe-area-inset-bottom)); left: calc(12px + env(safe-area-inset-left)); }

/* A held tooltip (the title of what was held). */
#ttip { position: fixed; z-index: 30; max-width: min(300px, calc(100vw - 16px)); padding: 6px 10px; font: 600 12.5px/1.35 var(--ui); color: var(--fg); pointer-events: none;
  background: rgba(8, 13, 22, .97); border: 1px solid var(--ar-line-hi); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
#ttip[hidden] { display: none; }
/* The ability tooltip, when held, sits above everything around the dock. */
body.touch #tip { z-index: 30; }

/* Portrait in a match: turn the phone. */
#rotatemsg { display: none; }
@media (orientation: portrait) {
  body.touch.ag-inmatch #rotatemsg { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; text-align: center;
    background: radial-gradient(circle at 50% 35%, rgba(20, 34, 54, .97), rgba(4, 6, 10, .99)); }
  body.touch.ag-inmatch #rotatemsg .rm-card { max-width: 300px; }
  body.touch.ag-inmatch #rotatemsg .rm-ic { color: var(--ally); filter: drop-shadow(0 0 7px rgba(63, 196, 224, .3)); animation: rm-turn 2.4s ease-in-out infinite; display: inline-block; }
  body.touch.ag-inmatch #rotatemsg h2 { margin: 14px 0 8px; font: 800 20px var(--title); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
  body.touch.ag-inmatch #rotatemsg p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
}
@keyframes rm-turn { 0%, 30% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* ======================================================================= LANDSCAPE PHONE (short screens) */
@media (max-height: 500px) {
  /* ---- top bar: no brand; the view tools on the left, the rest on the right, the header between ---- */
  body.touch #top { padding: calc(4px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 4px calc(8px + env(safe-area-inset-left)); gap: 6px; }
  body.touch #botlvl { display: none; }
  body.touch #top .tgrp { gap: 3px; }
  body.touch #top .tgrp + .tgrp:not(:nth-child(2)) { padding-left: 6px; }
  body.touch .ibtn { width: 34px; height: 34px; }
  body.touch #sndpop { top: 44px; right: calc(52px + env(safe-area-inset-right)); }

  /* ---- the match header: small portraits and medal ---- */
  body.touch #turninfo.mh { top: calc(3px + env(safe-area-inset-top)); gap: 6px; }
  body.touch .mh .mh-side { gap: 5px; padding-top: 2px; } body.touch .mh .mh-roster { gap: 3px; }
  body.touch .mh-p .pf { width: 26px; height: 26px; border-radius: 7px; } body.touch .mh-p .hp { width: 26px; height: 3px; }
  body.touch .mh-p .art { width: 18px; height: 18px; font-size: 14px; } body.touch .mh-p .art .q { font-size: 14px; } body.touch .mh-p .tag { display: none; }
  body.touch .mh-gems .gem { width: 8px; height: 8px; }
  body.touch .mh-medal { width: 50px; margin-top: -2px; } body.touch .mh-medal::before { width: 48px; height: 42px; } body.touch .mh-medal::after { width: 44px; height: 38px; }
  body.touch .mh-medal .mh-rd { margin-top: 5px; font-size: 6.5px; letter-spacing: .08em; } body.touch .mh-medal .tn { font-size: 16px; }
  body.touch .mh-medal .notes { top: 43px; gap: 3px; } body.touch .mh-medal .n { font-size: 9.5px; padding: 0 6px; } body.touch .mh-medal .n .lg { display: none; }

  /* ---- unit cards: compact (portrait, HP, statuses as icons) ---- */
  body.touch .cards { width: 104px; top: calc(46px + env(safe-area-inset-top)); gap: 3px; }
  body.touch #cardsL { left: calc(8px + env(safe-area-inset-left)); } body.touch #cardsR { right: calc(8px + env(safe-area-inset-right)); top: calc(46px + env(safe-area-inset-top)); }
  body.touch .ucard { grid-template-columns: 20px 1fr; padding: 3px 6px 3px 4px; column-gap: 5px; row-gap: 2px; }
  body.touch .ucard .pt { width: 20px; height: 20px; font-size: 11px; grid-row: auto; } body.touch .ucard .pt .svgi { width: 18px; height: 18px; }
  body.touch .ucard .nm, body.touch .ucard .kda, body.touch .ucard .sub, body.touch .ucard .cds { display: none; }
  body.touch .ucard .hpb { grid-column: 2; height: 10px; } body.touch .ucard .hpb em { font-size: 8.5px; line-height: 10px; }
  body.touch .ucard .chip { font-size: 9px; padding: 0 3px; } body.touch .ucard .chip .sn { display: none; }
  body.touch .ucard.unseen .pt { height: 18px; }

  /* ---- the phase tracker: the live step named, the others as dots ---- */
  body.touch #phases { top: calc(64px + env(safe-area-inset-top)); max-width: 220px; transform: translateX(-50%); }
  body.touch #phases .steps { gap: 3px; }
  body.touch #phases .step { font-size: 9px; padding: 2px 8px; min-width: 0; letter-spacing: .08em; }
  body.touch #phases .step:not(.on) { font-size: 0; padding: 0; min-width: 0; width: 10px; height: 8px; }
  body.touch #phases .step:not(.on) .pc { display: none; }
  body.touch #phases .wt { font-size: 9.5px; margin-top: 2px; padding: 1px 6px; text-align: center; }
  body.touch #toasts { top: calc(96px + env(safe-area-inset-top)); }
  body.touch .toast { font-size: 12px; padding: 6px 10px; max-width: 60vw; }

  /* ---- the dock: smaller slots, the catalysts in a column beside them ---- */
  body.touch #dock { bottom: calc(8px + env(safe-area-inset-bottom)); column-gap: 8px; }
  body.touch #dock::before { left: -10px; right: -10px; top: -6px; bottom: -8px; }
  body.touch #bar { gap: 5px; }
  body.touch .slot { width: 58px; height: 58px; padding: 3px 2px 6px; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
  body.touch .slot .ic { width: 26px; height: 26px; font-size: 18px; }
  body.touch .slot .nm { font-size: 8.5px; line-height: 1.05; }
  body.touch .slot .cdn { font-size: 22px; }
  body.touch #cats { gap: 3px; }
  body.touch #cats .cat { height: 18px; padding: 0 6px; font-size: 9.5px; max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
  body.touch #cats .cat .ci { width: 12px; height: 12px; }
  body.touch #lockwrap { right: calc(8px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); gap: 3px; }
  body.touch #lock { width: 74px; height: 74px; }
  body.touch #lock .lbl { font-size: 10.5px; }
  body.touch #lock .secs { bottom: 13px; font-size: 12px; }
  body.touch #bank { height: 22px; }

  /* ---- the action bar: smaller buttons ---- */
  body.touch.ag-inmatch #touchbar { left: calc(8px + env(safe-area-inset-left)); bottom: calc(8px + env(safe-area-inset-bottom)); grid-template-columns: repeat(3, 46px); grid-auto-rows: 40px; gap: 4px; }
  body.touch #touchbar .tb-btn { font-size: 8.5px; gap: 1px; }
  body.touch #touchbar .tb-btn svg { width: 17px; height: 17px; }

  /* ---- hint, banner, spectate, skip ---- */
  body.touch #hint { bottom: calc(78px + env(safe-area-inset-bottom)); max-width: calc(100% - 340px); white-space: normal; text-align: center; font-size: 11.5px; padding: 4px 10px; }
  body.touch #banner { top: 26%; font-size: 22px; padding: 6px 60px; }
  body.touch #banner.big { font-size: 26px; white-space: normal; width: 80%; text-align: center; padding: 6px 30px; }
  body.touch #spectate { bottom: calc(80px + env(safe-area-inset-bottom)); font-size: 12px; padding: 6px 12px; max-width: calc(100% - 340px); white-space: normal; text-align: center; }
  body.touch #skip { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom)); height: 34px; }
  body.touch #social { right: calc(8px + env(safe-area-inset-right)); bottom: calc(108px + env(safe-area-inset-bottom)); }
  body.touch #social .so-menu { max-height: calc(100vh - 170px); overflow: auto; min-width: 180px; }
  body.touch #social .so-menu button { min-height: 34px; font-size: 12.5px; }
  body.touch #social .so-feed { width: 240px; }
  body.touch #social .so-line { font-size: 11.5px; padding: 4px 8px; }

  /* ---- panels: the turn log under your cards (folded), the turn summary above the action bar, the explain card
     and first-use tips under the enemy cards, the kit panel on the right; all scroll inside the short screen ---- */
  body.touch #turnlog { top: auto; bottom: calc(100px + env(safe-area-inset-bottom)); left: calc(8px + env(safe-area-inset-left)); width: 230px; }
  body.touch #turnlog ol { max-height: 150px; font-size: 11px; }
  /* The turn summary sits where the hint does (above the dock); a hint (aiming, a route) wins. */
  body.touch #turnsum { top: auto; bottom: calc(78px + env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 340px); font-size: 12px; padding: 5px 10px; white-space: nowrap; }
  body.touch #hud:has(#hint:not([hidden])) #turnsum { display: none; }
  body.touch #explain, body.touch #fttip { top: calc(132px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); width: 270px; max-height: calc(100vh - 250px); overflow: auto; font-size: 11.5px; }
  body.touch #fttip p { font-size: 12px; }
  body.touch #kit { top: calc(44px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); width: 290px; max-height: calc(100vh - 140px); padding: 10px; }
  body.touch #kit .abil { padding: 6px 8px; margin-top: 5px; }
  body.touch #kit .stats { margin: 8px 0 6px; }
  body.touch #kit .close { font-size: 24px; padding: 0 8px; }
  body.touch #tip { max-width: min(330px, calc(100vw - 16px)); max-height: calc(100vh - 100px); overflow: hidden; }

  /* ---- the scoreboard: tighter ---- */
  body.touch #scoreboard { padding: 8px; }
  body.touch .sb-card { padding: 10px 12px; }
  body.touch .sb-card h2 { font-size: 16px; margin-bottom: 6px; }
  body.touch .sb-card th, body.touch .sb-card td { padding: 3px 6px; font-size: 11.5px; }

  /* ---- the tutorial's lesson panel: top left (your card makes way), scrolling inside the screen ---- */
  body.touch.ag-tutorial #cardsL, body.touch.ag-tutorial #turnlog { display: none; }
  body.touch #tutorial { top: calc(44px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); width: min(300px, calc(100vw - 16px)); }
  body.touch .tt-card { max-height: calc(100vh - 150px); overflow: auto; padding: 9px 12px 10px; }
  body.touch .tt-card h3 { font-size: 14.5px; margin: 6px 0 4px; }
  body.touch .tt-card p { font-size: 12px; line-height: 1.4; margin-bottom: 7px; }
  body.touch .tt-goal { font-size: 11.5px; padding: 5px 8px; }
  body.touch .tt-hint, body.touch .tt-res { font-size: 11.5px; margin-top: 6px; padding: 5px 8px; }
  body.touch .tt-btns .go { margin-top: 7px; padding: 8px; font-size: 13px; }
  body.touch .tt-skip { padding: 5px 10px; }
  /* The hint and the turn summary centre in the room right of the lesson panel. */
  body.touch.ag-tutorial #hint { left: calc(50% + 120px); max-width: calc(100% - 560px); }
  body.touch.ag-tutorial #turnsum { left: 240px; }
  /* After the replay the result and Next lesson matter: the lesson's text makes way for them. */
  body.touch .tt-card:has(.tt-res:not(.wait)) > p, body.touch .tt-card:has(.tt-res:not(.wait)) .tt-goal { display: none; }
}

/* ---- turn order (turnorder.js) in landscape: smaller portraits, no "Order" label; the tracker widens for it ---- */
@media (max-height: 500px) {
  body.touch #phases { max-width: calc(100vw - 260px); }
  body.touch #torder { gap: 3px; margin-top: 2px; }
  body.touch #torder .to-i { display: none; }
  body.touch #torder .to-g { height: 22px; gap: 2px; padding: 0 4px 0 3px; border-left-width: 2px; }
  body.touch #torder .to-l { font-size: 7.5px; letter-spacing: .06em; margin-right: 1px; }
  body.touch #torder .to-u { width: 16px; height: 16px; }
  body.touch #torder .to-pf { border-width: 1px; border-radius: 3px; }
  body.touch #torder .to-pf .svgi { width: 11px; height: 11px; }
  body.touch #torder .to-pf .q { font-size: 10px; }
  body.touch #torder .to-n { font-size: 6.5px; line-height: 8px; right: -3px; bottom: -4px; padding: 0 1px; }
  body.touch #hud:has(#torder) #toasts { top: calc(124px + env(safe-area-inset-top)); }
}

/* A held tooltip keeps its line breaks (the turn-order portraits put name, move and plan on their own lines). */
@media (max-height: 500px) { body.touch #ttip { white-space: pre-line; } }