/* Kong Empires — touch layer ( src/touch.js ): phones and tablets. Everything keys on body.ke-touch ( a coarse pointer at
   boot, or a finger on the canvas ), so a mouse and keyboard desktop never sees any of it. The HUD's own sheet is css/ui.css;
   this one only overrides it: safe-area insets, the labels' floor under the smaller touch --s ( ui.js caps it by the height ),
   no key caps or keyboard-only copy, and 44 px touch targets. */

/* ================================================================ page: no scroll, no page zoom, no callouts */
#game { touch-action: none; }
body.ke-touch { overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body.ke-touch #ui, body.ke-touch #touch-dock { touch-action: manipulation; -webkit-touch-callout: none; }
body.ke-touch #ui input, body.ke-touch #ui textarea { user-select: text; -webkit-user-select: text; }
body.ke-touch #minimap-wrap { touch-action: none; }

/* ================================================================ HUD fit: the notch / home bar stay clear */
body.ke-touch #ui {
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  /* the labels' floor: ~12 px on screen under the small touch --s ( :root's --lbl stops at 16 px, too small at --s 0.6 ) */
  --lbl: clamp( 14px, calc( 12.2px / var(--s) ), 24px );
}
/* key caps and kbd hints mean nothing without a keyboard: keyboard copy ( .k-only ) gives way to touch copy ( .t-only ) */
body.ke-touch #ui .ab .key, body.ke-touch #ui .cmd .key, body.ke-touch #ui .btn > kbd, body.ke-touch #ui .sp-arr .key,
body.ke-touch #ui .t-key, body.ke-touch #ui .bn-sub kbd, body.ke-touch #ui .tip-h kbd, body.ke-touch #ui .k-only { display: none; }
body.ke-touch #ui .t-only { display: block; }
body.ke-touch #ui .cmd { padding-right: 8px; }

/* ================================================================ 44 px touch targets ( on screen )
   --tap is 45 screen px ( 44 plus a px for subpixel rounding ) in the local stage unit: the HUD and the pause / defeat cards scale by --s, the menu, the end screen
   and the help by --fit */
body.ke-touch #ui { --tap: calc( 45px / var(--s) ); }
body.ke-touch #ui .mn-stage, body.ke-touch #ui .ov-fit { --tap: calc( 45px / var(--fit) ); }
body.ke-touch #ui .btn.mid, body.ke-touch #ui .btn.big, body.ke-touch #ui .btn.small, body.ke-touch #ui .pill, body.ke-touch #ui .btn.opt,
body.ke-touch #ui .btn.set-btn, body.ke-touch #ui .btn.stab, body.ke-touch #ui .seed-in, body.ke-touch #ui .vol input { min-height: var(--tap); }
body.ke-touch #ui .dice, body.ke-touch #ui .x-btn, body.ke-touch #ui .btn.sp-arr { min-width: var(--tap); min-height: var(--tap); }
body.ke-touch #ui .btn.mid, body.ke-touch #ui .btn.big, body.ke-touch #ui .btn.small { padding-top: 0; padding-bottom: 0; }
body.ke-touch #ui .pill, body.ke-touch #ui .btn.opt, body.ke-touch #ui .btn.set-btn, body.ke-touch #ui .btn.stab { padding-top: 0; padding-bottom: 0; }
body.ke-touch #ui .set-tabs { margin-bottom: 4px; }
body.ke-touch #ui .set-row, body.ke-touch #ui .vol { margin: 1px 0; }
/* the pause card ( --s 0.6 on a phone ): with SETTINGS open the buttons and the settings sit side by side, so the card keeps
   to a short screen and RENDER's four choices reach the target */
body.ke-touch #ui .pause-card.set-open { width: 980px; padding-top: 50px; margin-top: 50px; display: grid; grid-template-columns: 300px 1fr; column-gap: 24px; align-content: start; }
body.ke-touch #ui .pause-card.set-open > .btn { grid-column: 1; }
body.ke-touch #ui .pause-card.set-open > .pause-set { grid-column: 2; grid-row: 1 / span 4; }
body.ke-touch #ui .pause-card.set-open [data-act="restart"], body.ke-touch #ui .pause-card.set-open [data-act="quit"] { display: block; }
/* HUD: the powers and ATTACK / STOP / HOLD ( the dock has A-MOVE; STOP and HOLD live here ) grow to the target, the bar with them */
body.ke-touch #ui .ab { height: max( 64px, var(--tap) ); }
body.ke-touch #ui .cmd { height: max( 40px, var(--tap) ); }
body.ke-touch #ui .abil { height: auto; }
/* toasts stack left of the dock's right column, above the taller ability bar ( 34 px of padding and gap, two rows ) */
body.ke-touch #ui .toasts { right: 82px; bottom: calc( 16px + 34px * var(--s) + max( 64px * var(--s), 45px ) + max( 40px * var(--s), 45px ) ); }
body.ke-touch #ui .coach.at-abil { bottom: calc( 38px + 34px * var(--s) + max( 64px * var(--s), 45px ) + max( 40px * var(--s), 45px ) ); }

/* ================================================================ menu on a short screen: a smaller logo, no roster strip ( the
   TRIBES pills pick the count too ), so the setup and settings cards have room for their 44 px rows */
@media (max-height: 600px) {
  body.ke-touch #ui .logo { top: 0; scale: 0.5; transform-origin: 50% 0; }
  body.ke-touch #ui .mn-row { top: 196px; }
  body.ke-touch #ui .mn-roster { display: none; }
  /* the stage is height-bound ( --fit ~0.43 on a phone ): wider cards and larger type use the spare width */
  body.ke-touch #ui .mn-row { gap: 30px; }
  body.ke-touch #ui .card.mn-setup { width: 520px; }
  body.ke-touch #ui .card.mn-sound { width: 640px; }
  body.ke-touch #ui .mn-center { width: 340px; }
  body.ke-touch #ui .mn-stage :is( .pill, .btn.opt, .btn.set-btn, .btn.stab, .set-l, .fld-l, .vol-l, .vol-v ) { font-size: 22px; }
  body.ke-touch #ui .mn-stage :is( .set-row, .vol ) { grid-template-columns: 130px 1fr; }
  body.ke-touch #ui .mn-stage .vol { grid-template-columns: 130px 1fr 52px; }
}

/* ================================================================ dock: big buttons at the screen's middle edges */
#touch-dock { display: none; }
body.ke-touch #touch-dock { display: block; }
body.ke-touch #touch-dock[hidden] { display: none; }
.td-col {
  position: fixed; top: 46%; z-index: 3; display: flex; flex-direction: column; gap: 8px; transform: translateY(-50%);
}
.td-left { left: calc( 12px + env(safe-area-inset-left, 0px) ); }
.td-right { right: calc( 12px + env(safe-area-inset-right, 0px) ); }
.td-btn {
  position: relative; display: grid; place-items: center; width: 56px; height: 48px; padding: 0; margin: 0;
  font: 900 13px/1 var(--font); letter-spacing: 0.02em; color: var(--cream);
  border: 3px solid var(--ol); border-radius: 16px; background: var(--dots), var(--g-night);
  box-shadow: inset 0 0 0 2px var(--cream), inset 0 -5px 0 2px rgba(0, 0, 0, 0.22), 2px 3px 0 var(--ol);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; opacity: 0.92;
}
.td-btn b { -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ol); }
.td-btn:active { transform: translate(1px, 2px); box-shadow: inset 0 0 0 2px var(--cream), 1px 1px 0 var(--ol); }
.td-btn.lit { background: var(--dots), var(--g-gold); color: var(--white); }
.td-amove.lit { background: var(--dots), var(--g-mag); }
.td-all { background: var(--dots), var(--g-teal); }
.td-amove b { font-size: 11px; }
.td-pause b { font-size: 18px; letter-spacing: 0.08em; }

/* ================================================================ portrait phones: rotate card ( touch.js pauses a running match ) */
#touch-rotate { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  body.ke-touch #touch-rotate {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; touch-action: none;
    background: var(--dots), var(--g-night);
  }
  body.ke-touch #touch-dock { display: none; }
}
.tr-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center; color: var(--cream); }
.tr-card b { font: 900 24px/1.1 var(--font); color: var(--banana); -webkit-text-stroke: 5px var(--ol); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ol); }
.tr-card span { font: 700 16px/1.3 var(--font2); }
.tr-phone {
  width: 54px; height: 92px; border: 5px solid var(--ol); border-radius: 12px; background: var(--g-gold);
  box-shadow: inset 0 0 0 3px var(--cream), 3px 4px 0 var(--ol); animation: trTurn 2.2s ease-in-out infinite;
}
@keyframes trTurn { 0%, 25% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .tr-phone { animation: none; transform: rotate(-90deg); } }