/* =================================================================== touch controls + layouts for phones and tablets
   Classes on <html> (client/js/layout.js): touch (touch controls on), form-phone / form-tablet / form-desktop,
   portrait / landscape, lefty (mirrored controls), chatting (the chat input has the keyboard).
   Variables: --talpha button opacity (settings; sizes are set by touch.js), --t-stick-w / --t-cluster-w / --t-cluster-h the room
   the controls take (touch.js), so the log and the quick items sit between them. Targets are >= 44 px everywhere. */

/* ---------- the control layer (inside #hud, under HUD windows; the buttons are placed by touch.js) ---------- */
#hud > #touch { position: absolute; inset: 0; pointer-events: none; z-index: 5; transition: opacity 0.15s; }
#touch.modal { opacity: 0; visibility: hidden; }
.touch-btn .ti { --want: 46cqmin; display: block; }
.touch-btn { container-type: size; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border-radius: 50%;
  border: 2px solid rgba(201, 210, 255, 0.85); background: radial-gradient(circle at 50% 35%, #3a4aa8, #141c5c 75%); color: var(--ink);
  box-shadow: 0 0 0 2px rgba(10, 14, 48, 0.85), 0 4px 10px rgba(0, 0, 0, 0.45); opacity: var(--talpha, 0.85); pointer-events: auto; touch-action: none;
  cursor: pointer; font-family: var(--font); line-height: 1; transition: transform 0.08s, filter 0.08s, opacity 0.15s; -webkit-user-select: none; user-select: none; }
.touch-btn.small { width: 46px; height: 46px; }
.touch-btn.held { transform: scale(0.93); filter: brightness(1.35); }
.touch-btn.pressed { animation: tpress 0.2s; }
@keyframes tpress { 50% { box-shadow: 0 0 0 2px rgba(10, 14, 48, 0.85), 0 0 18px 4px rgba(255, 227, 106, 0.7); } }
.touch-btn.off { filter: grayscale(0.85) brightness(0.75); }
.touch-btn.idle { opacity: calc(var(--talpha, 0.85) * 0.8); }
.touch-btn[hidden] { display: none !important; }
.touch-btn .tl { font-size: 11px; text-shadow: 0 1px 0 #000, 0 0 3px #000; white-space: nowrap; }
.touch-btn .tc { position: absolute; right: -4px; bottom: -4px; min-width: 20px; padding: 2px 4px; border-radius: 9px; background: #0a0e30; border: 1px solid var(--win-border); font-size: 11px; text-align: center; }

/* Attack: the big button */
.t-attack { background: radial-gradient(circle at 50% 35%, #ff8a5a, #c03a1a 70%, #6a1408); border-color: #ffe0c8; }
.t-attack .gi { --want: 44cqmin; }
.t-attack .tl { font-size: 12px; margin-top: 2px; }

/* Moves: type colour, type icon, name, PP number and a PP ring */
.t-move { --tc: #9aa4d8; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tc) 80%, #fff), color-mix(in srgb, var(--tc) 58%, #0a0e30) 52%, color-mix(in srgb, var(--tc) 28%, #0a0e30)); border-color: rgba(255, 255, 255, 0.9); }
.t-move .ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.t-move .ring circle { fill: none; stroke-width: 3; }
.t-move .ring .rb { stroke: rgba(5, 8, 24, 0.75); }
.t-move .ring .rp { stroke: #9be0ff; stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dasharray 0.25s; }
.t-move.low .ring .rp { stroke: #ffb84a; }
.t-move .mi { height: 18px; display: flex; align-items: center; margin-top: -4px; }
.t-move .mi .ticon { --want: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.t-move .tn { max-width: 94%; font-size: 10px; line-height: 1; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.t-move .tn.long { font-size: 9px; letter-spacing: -0.3px; }
.t-move .tn.xlong { font-size: 8px; letter-spacing: -0.5px; }
.t-move .tp { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); min-width: 22px; padding: 1px 5px; border-radius: 8px; background: #0a0e30; border: 1px solid rgba(201, 210, 255, 0.7); font-size: 11px; text-align: center; }
.t-move .tv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(5, 8, 24, 0.6); font: 7px var(--pixel); color: var(--gold); text-align: center; }
.t-move .tv[hidden] { display: none; }
.t-move.linked .ring .rb { stroke: #f4ac00; }   /* a linked set (client/js/linkshop.js) */
.t-move .tlk { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 1px 0 #100818); }
.t-move .tlk[hidden] { display: none; }

/* Interact: only while there is something to do here; caption beside it */
.t-interact { background: radial-gradient(circle at 50% 35%, #ffe88a, #d8a020 70%, #7a5000); border-color: #fff7d8; color: #2a1800; animation: tglow 1.4s ease-in-out infinite; }
.t-interact .ii { width: 46%; height: 46%; display: flex; }
.t-interact .ii .ti { --want: 46cqmin; }
.t-interact .tl { font-size: 11px; }
@keyframes tglow { 50% { box-shadow: 0 0 0 2px rgba(10, 14, 48, 0.85), 0 0 16px 3px rgba(255, 227, 106, 0.75); } }
.t-cap { position: absolute; max-width: min(260px, 60vw); padding: 3px 10px; border-radius: 10px; background: rgba(10, 14, 48, 0.85); border: 1px solid rgba(255, 227, 106, 0.6); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.t-cap[hidden] { display: none; }
.t-bag.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(10, 14, 48, 0.85), 0 0 12px rgba(255, 227, 106, 0.7); }
.t-turn.on { background: radial-gradient(circle at 50% 35%, #ffe88a, #d8a020 75%); border-color: #fff; }
.t-turn.on .ti { filter: brightness(0.3); }

/* Joystick: a faint ring at rest, under the thumb while held */
.t-stick { position: absolute; border-radius: 50%; border: 2px solid rgba(201, 210, 255, 0.35); background: radial-gradient(circle, rgba(20, 28, 88, 0.25), rgba(20, 28, 88, 0.45)); opacity: calc(var(--talpha, 0.85) * 0.6); pointer-events: none; transition: opacity 0.15s; }
.t-stick.live { opacity: var(--talpha, 0.85); transition: none; border-color: rgba(201, 210, 255, 0.7); }
.t-knob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #e8eeff, #8a96d8 70%); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
/* D-pad: 8 sectors on a round pad */
.t-dpad { position: absolute; display: none; border-radius: 50%; background: radial-gradient(circle, rgba(20, 28, 88, 0.55), rgba(10, 14, 48, 0.75)); border: 2px solid rgba(201, 210, 255, 0.6); opacity: var(--talpha, 0.85); pointer-events: auto; touch-action: none; }
#touch.dpad .t-dpad { display: block; }
#touch.dpad .t-stick { display: none; }
.t-dpad svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.t-dpad .t-arm { fill: rgba(255, 227, 106, 0); transition: fill 0.06s; }
.t-dpad .t-arm.on { fill: rgba(255, 227, 106, 0.45); }
.t-dpad .t-cross { fill: rgba(28, 38, 110, 0.9); stroke: rgba(201, 210, 255, 0.9); stroke-width: 2; stroke-linejoin: round; }
.t-dpad .t-arrow { fill: #e8eeff; }
.t-dpad .t-diag circle { fill: rgba(201, 210, 255, 0.55); }

/* top right: Chat / Squad / Menu next to the minimap */
.t-sys { display: none; gap: 6px; align-items: flex-start; }
.t-sys .touch-btn { position: relative; width: 44px; height: 44px; }
html.touch .t-sys { display: flex; }
html.form-phone .t-sys .t-fs { display: none; }   /* phones: in the Menu (and on the login screen) */
.t-fslogin { display: none; position: absolute; z-index: 3; top: calc(8px + var(--sat)); left: calc(8px + var(--sal)); width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
.t-fslogin .ti { --want: 24px; }
html.touch .t-fslogin { display: inline-flex; }
html.touch #settings-btn { display: none; }
html.touch #minimap { cursor: pointer; }

/* chat: hidden until the Chat button, then a bar at the top (clear of the soft keyboard) with Send / Close */
.t-chatbtns { display: none; gap: 6px; }
html.touch #chat { font-size: 16px; }   /* >= 16 px: iOS doesn't zoom into the field */
html.touch:not(.chatting) #chat { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; }
html.touch.chatting #logbox { top: calc(8px + var(--sat)); bottom: auto !important; left: calc(8px + var(--sal)) !important; right: calc(8px + var(--sar)) !important; width: auto !important; max-width: none !important;
  transform: none !important; z-index: 50; opacity: 1 !important; display: grid; grid-template-columns: 1fr auto; column-gap: 6px; }
html.touch.chatting #logbox .loghead, html.touch.chatting #log { grid-column: 1 / -1; }
html.touch.chatting #hud #logbox { background: linear-gradient(180deg, var(--win-a), var(--win-b)); }
html.touch.chatting #logbox:not(.expanded) #log { height: calc(4 * 1.3em); }
html.touch.chatting #chat { min-height: 44px; opacity: 1; }
html.touch.chatting .t-chatbtns { display: flex; margin-top: 4px; }
.t-chatbtns .sbtn { min-height: 44px; min-width: 52px; }

/* ---------- every screen with touch: >= 44 px targets, centred sheets, on-screen close buttons ---------- */
html.touch .kc { display: none; }                         /* key caps */
html.touch .nbtns .kh { display: none; }                  /* "Y:" / "N:" */
html.touch #moves { display: none; }                      /* the round buttons replace the move bar */
html.touch #bagbtn { display: none; }
html.touch #quick { border-left: 0; padding-left: 0; padding-top: 0; }
html.touch .islot { min-width: 44px; min-height: 44px; }
html.touch #actionbar { padding: 4px 6px; }
html.touch #prompt.keyed { display: none; }               /* the Interact button says it */
html.touch #prompt { bottom: calc(var(--abar-h) + 22px + var(--sab) + 4.5em); }
html.touch .sbtn { min-height: 44px; padding: 6px 14px; touch-action: manipulation; }
html.touch .sbtn[disabled] { opacity: 0.45; }
html.touch .sx { width: 30px; height: 30px; position: relative; }
html.touch .sx::after, html.touch #log-toggle::after { content: ''; position: absolute; inset: -8px; }
html.touch #log-toggle { position: relative; min-height: 22px; padding: 0 6px; }
html.touch .loghead { height: 22px; }
html.touch #log { touch-action: pan-y; }

/* menus: centred sheets with an OK / Back bar; tap selects, tap again (or OK) confirms */
html.touch .pmd-menu { left: 50% !important; top: 50% !important; right: auto; transform: translate(-50%, -50%); animation: popc 0.12s ease-out;
  width: min(calc(460px * var(--k)), calc(100vw - 24px - var(--sal) - var(--sar))) !important; max-width: none; max-height: calc(var(--vh) - 16px - var(--sat) - var(--sab)); }
html.touch .pmd-menu .mitems { max-height: none; }
html.touch .pmd-menu > .mclose + * { padding-right: 52px; min-height: 44px; }   /* clear of the close button */
html.touch .pmd-menu > .mclose + .mtitle { display: flex; align-items: center; }
html.touch .pmd-menu .mfoot { display: flex; }
html.touch .pmd-menu .mfoot .sbtn { min-width: 96px; }
html.touch .pmd-menu .msearch input { height: 40px; font-size: 17px; }   /* 44 px with the border; 16 px+ so iOS doesn't zoom */
html.touch .mitem { min-height: 44px; padding-top: 4px; padding-bottom: 4px; white-space: normal; }
html.touch .mitem .mlabel { flex: 1 1 auto; min-width: 0; }
html.touch .mitem .msub { flex: none; }
/* bank amounts (ui.js numberInput): ▲ / ▼ over and under each digit, All / 0 */
.mitem .digit { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; vertical-align: middle; margin: 0 1px; }
.dstep { width: 22px; height: 16px; padding: 0; border: 1px solid var(--slot-line); border-radius: 4px; background: var(--slot); color: var(--ink); font-size: 9px; line-height: 1; cursor: pointer; }
.dstep:hover { border-color: var(--gold); }
.nquick { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.nquick .sbtn { padding: 2px 10px; }
html.touch .dstep { width: 44px; height: 44px; font-size: 13px; touch-action: manipulation; }
html.touch .nquick .sbtn { min-width: 52px; }
html.touch .pmd-menu .mitem:has(.digit) { flex-wrap: wrap; row-gap: 6px; }
/* dialog answers: big buttons, one tap answers */
html.touch #dialog .dchoices { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
html.touch #dialog .dchoices .mitem { min-height: 44px; min-width: 88px; justify-content: center; border: 2px solid var(--win-border); background: #0c1240; border-radius: 8px; padding: 6px 14px; }
html.touch #dialog .dchoices .mitem .cursor { display: none; }
html.touch #dialog .dchoices .mitem.sel { background: #1c2878; }
html.touch .nbtns button { min-height: 44px; flex: 1; }
html.touch #sos button { min-height: 44px; }
/* bag: a centred sheet, tap an item to see it, tap again or Use */
html.touch #bagpanel { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(calc(560px * var(--k)), calc(100vw - 24px)); max-height: calc(var(--vh) - 24px); overflow-y: auto; z-index: 14; }
html.touch .bp-grid .islot { height: auto; min-height: 60px; }
/* the bag grows with the rank (up to 48): the sheet is a column, the grid takes the height left and scrolls, the buttons stay in view */
html.touch #bagpanel { display: flex; flex-direction: column; }
html.touch #bagpanel > * { flex: none; }
html.touch #bagpanel .bp-grid { flex: 0 1 auto; min-height: calc(2 * var(--gv-h, 64px)); max-height: none; }
html.touch .bp-grid .islot.sel { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 227, 106, 0.6); }
.bp-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.bp-foot .sbtn { min-width: 96px; }
/* help + settings */
html.touch #help { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(calc(600px * var(--k)), calc(100vw - 24px)); max-width: none; max-height: calc(var(--vh) - 24px); overflow-y: auto; z-index: 46; line-height: 1.45; }
html.touch #help > div { margin: 6px 0; }
.help-x { position: absolute; top: 6px; right: 6px; border-radius: 5px; border: 1px solid var(--win-border); background: var(--slot); color: var(--ink); font: 9px var(--pixel); cursor: pointer; }
html.touch #settings .set-row { margin: 8px 0; }
html.touch .keycap { min-width: 36px; min-height: 32px; }
/* the log sits between the stick and the cluster */
html.touch #logbox, html.touch #logbox.side { left: var(--t-stick-w); right: var(--t-cluster-w); width: auto; max-width: calc(440px * var(--k)); margin: 0 auto; bottom: calc(var(--abar-h) + 14px + var(--sab)); }
html.touch #actionbar { max-width: calc(100vw - var(--t-stick-w) - var(--t-cluster-w)); }
html.lefty.touch #logbox, html.lefty.touch #logbox.side { left: var(--t-cluster-w); right: var(--t-stick-w); }
html.touch #notices { top: calc(96px * var(--k) + var(--sat)); }

/* Mystic Portal (portal.js / portal.css): bigger controls, a phone layout that scrolls as one page */
html.touch .pclose { width: 44px; height: 44px; }
html.touch .pctrl input.psearch, html.touch .pctrl select { font-size: 16px; min-height: 44px; }
html.touch .phide { min-height: 44px; }
html.touch .phide input { width: 22px; height: 22px; }
html.touch .pgo { min-height: 48px; position: sticky; bottom: 0; z-index: 1; }   /* always in reach while the details scroll */
html.touch .pgrid, html.touch .pdetail { touch-action: pan-y; overscroll-behavior: contain; }
html.touch .pfoot > :first-child { display: none; }   /* the keyboard hints */
#portal { padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); height: var(--vh); }
html.form-phone #portal { padding: calc(4px + var(--sat)) calc(4px + var(--sar)) calc(4px + var(--sab)) calc(4px + var(--sal)); }
html.form-phone .portal-win { padding: 6px 8px 4px; }
html.form-phone .phead { flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
html.form-phone .ptitle { font-size: 12px; }
html.form-phone .ptitle small { display: none; }
html.form-phone .pctrl input.psearch { width: 130px; }
html.form-phone .pgrid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
html.form-phone .pname { font-size: 13px; }
html.form-phone.landscape .pbody { flex-direction: row; }
html.form-phone.landscape .pdetail { width: 46%; max-height: none; }
html.form-phone.landscape .pbig { display: none; }
html.form-phone.portrait .pdetail { max-height: 52%; }

/* ---------- phones (short side < 520 px; landscape is the main way to play) ---------- */
html.form-phone.touch #party { display: none; }
html.form-phone #hud-right { width: auto; }
html.form-phone #minimap:not(.big) { max-width: calc(132px * var(--k) * var(--mm-f)); max-height: calc(100px * var(--k) * min(var(--mm-f), 1.06)); }   /* landscape: the move buttons under it */
html.form-phone #minimap.big { max-width: 94vw; max-height: calc(var(--vh) - 96px); }
/* the cards top left (the player's, the squad's row of mini cards): client/hudcards.css */
html.form-phone #hud-top { max-width: calc(100vw - 2 * (212px * var(--k)) - 24px - var(--sal) - var(--sar)); min-width: 0; }
html.form-phone #zonebar { font-size: calc(13px * var(--k)); padding: 2px 8px; }
html.form-phone #log { height: calc(2 * 1.3em); }
html.form-phone.touch #actionbar { display: none; }
html.form-phone.touch { --abar-h: 0px; }
html.form-phone.touch #logbox, html.form-phone.touch #logbox.side { bottom: calc(8px + var(--sab)); }
html.form-phone #dialog { width: calc(100vw - 16px - var(--sal) - var(--sar)); min-height: 0; bottom: calc(8px + var(--sab)); }
html.form-phone #dialog .dportrait img { width: 56px; height: 56px; }
html.form-phone #settings { width: calc(100vw - 16px - var(--sal) - var(--sar)); }
html.form-phone.portrait .set-l { width: 100%; }
html.form-phone #settings .set-row { margin: 5px 0; }

/* phone portrait: zone bar on top, the cards and the minimap under it, controls along the bottom, the log above them */
html.form-phone.portrait #hud-top { left: 50%; max-width: calc(100vw - 16px); }
html.form-phone.portrait #hud-right { top: calc(max(40px * var(--k), var(--hudtop-h, 0px) + 14px) + var(--sat)); }   /* below the zone bar and any flag under it (main.js; #hud-left: client/hudcards.css) */
html.form-phone.portrait .maprow { flex-direction: row; }
html.form-phone.portrait .t-sys { flex-direction: column; }
/* its height leaves room for the chat history above the controls (29vh - 163 px: about 50 px on a 360 x 740 phone, 72 on 375 x 812) */
html.form-phone.portrait #minimap:not(.big) { max-width: calc(112px * var(--k) * var(--mm-f)); max-height: min(calc(100px * var(--k) * var(--mm-f)), calc(var(--vh) * 0.29 - 163px)); }
html.form-phone.portrait #minimap.big { max-height: 64vh; }
html.form-phone.portrait.touch #logbox, html.form-phone.portrait.touch #logbox.side { left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); max-width: none; bottom: calc(var(--t-cluster-h) + 10px + var(--sab)); }
html.form-phone.portrait #notices { top: calc(150px + var(--sat)); }

/* ---------- tablets: the desktop HUD, quick items between the controls ---------- */
html.form-tablet.touch #actionbar { bottom: calc(8px + var(--sab)); }