/* Touch controls (SPEC 14). Buttons use CSS pixels (64 px, FIRE 88 px; 80% on
   phones under 740 px wide, never below 44 px) so they stay thumb-sized
   regardless of the HUD scale. */

.ds-touch {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: auto;
    touch-action: none;
    -webkit-touch-callout: none;
}

.ds-stick {
    position: absolute;
    width: 132px;
    height: 132px;
    margin: -66px 0 0 -66px;
    border-radius: 50%;
    border: 2px solid rgba(242, 239, 230, 0.35);
    background: radial-gradient(circle, rgba(8, 10, 9, 0.25), rgba(8, 10, 9, 0.45));
    pointer-events: none;
}

.ds-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(242, 239, 230, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
}

.ds-stick-sprint {
    position: absolute;
    left: 50%;
    top: -26px;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--mk-2);
    opacity: 0;
    transition: opacity 0.15s;
}

.ds-stick-sprint.is-on { opacity: 1; }

.ds-tbtn {
    position: absolute;
    display: grid;
    place-items: center;
    width: calc(64 * var(--tb));
    height: calc(64 * var(--tb));
    border-radius: 50%;
    border: 2px solid rgba(242, 239, 230, 0.5);
    background: rgba(8, 10, 9, 0.52);
    color: var(--ink);
    font-size: calc(13 * var(--tb));
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.ds-tbtn.is-down {
    background: rgba(230, 204, 147, 0.45);
    border-color: var(--tan-2);
}

.ds-tbtn-xl { width: calc(88 * var(--tb)); height: calc(88 * var(--tb)); font-size: calc(16 * var(--tb)); border-width: 3px; }
.ds-tbtn-s { font-size: calc(12 * var(--tb)); }
/* Buttons are 64 px (FIRE 88 px) in --tb units: 1 px, or 0.8 px on phones under
   740 px wide, where the full cluster would cover the centre (51 px buttons stay
   above the 44 px touch minimum). They sit on two arcs around FIRE, whose centre
   is 80 from the right and 100 from the bottom: an inner ring at 118 (crouch, ADS,
   reload, jump) and an outer ring at 196 (knife, grenade, use, swap). Positions
   are the button boxes (centre minus 32); the cluster stays within 306 of the
   right edge and below the SCORE/MENU bar at 360 px viewport height. */
.ds-touch { --tb: 1px; }
@media (max-width: 739px) { .ds-touch { --tb: 0.8px; } }
.ds-tbtn-fire { right: calc(36 * var(--tb)); bottom: calc(56 * var(--tb)); border-color: rgba(255, 90, 70, 0.75); background: rgba(80, 14, 10, 0.45); }
.ds-tbtn-fire.is-down { background: rgba(255, 74, 61, 0.45); }
.ds-tbtn-crouch { right: calc(159 * var(--tb)); bottom: calc(28 * var(--tb)); }
.ds-tbtn-ads { right: calc(162 * var(--tb)); bottom: calc(98 * var(--tb)); }
.ds-tbtn-reload { right: calc(124 * var(--tb)); bottom: calc(158 * var(--tb)); }
.ds-tbtn-jump { right: calc(58 * var(--tb)); bottom: calc(186 * var(--tb)); }
.ds-tbtn-melee { right: calc(240 * var(--tb)); bottom: calc(27 * var(--tb)); }
.ds-tbtn-grenade { right: calc(240 * var(--tb)); bottom: calc(109 * var(--tb)); }
.ds-tbtn-interact { right: calc(207 * var(--tb)); bottom: calc(183 * var(--tb)); }
.ds-tbtn-swap { right: calc(146 * var(--tb)); bottom: calc(238 * var(--tb)); }
/* SMOKE (breacher and marksman only) extends the bottom row left of KNIFE, below
   the centre prompts at every phone height; the weapon panel then moves left
   (.ds-touch-smoke). With it the cluster reaches 376 from the right. */
.ds-tbtn-smoke { right: calc(312 * var(--tb)); bottom: calc(27 * var(--tb)); }
.ds-tbtn-fireLeft { left: calc(36 * var(--tb)); top: 42%; border-color: rgba(255, 90, 70, 0.75); }

/* Out: combat buttons go; USE (walk off / respawn now) takes FIRE's place when the
   mode allows it, clear of the out panel, which shifts left of it. */
.ds-touch[data-out='true'] .ds-tbtn:not(.ds-tbtn-mini) { display: none; }
.ds-touch[data-walk='true'] .ds-tbtn.ds-tbtn-interact {
    display: grid;
    right: calc(36 * var(--tb));
    bottom: calc(56 * var(--tb));
    width: calc(88 * var(--tb));
    height: calc(88 * var(--tb));
    font-size: calc(16 * var(--tb));
    border-width: 3px;
    border-color: var(--mk-2);
    background: rgba(10, 40, 20, 0.55);
}
.ds-touch-mode .ds-out { padding-right: 140px; }

/* Held scoreboard: the combat cluster steps aside (held contacts stay tracked on the
   layer's pointer capture, so a held FIRE keeps working). */
.ds-touch[data-board='true'] .ds-tbtn:not(.ds-tbtn-mini) { display: none; }

.ds-touch-top {
    position: absolute;
    right: 14px;
    top: 10px;
    display: flex;
    gap: 8px;
}

.ds-tbtn-mini {
    position: relative;
    width: auto;
    min-width: 64px;
    height: 44px;
    padding: 0 12px;
    border-radius: 0;
    font-size: 12px;
}

/* HUD adjustments in touch mode (landscape phones and tablets). */
.ds-touch-mode .ds-top-right {
    right: auto;
    left: calc(28 * var(--u));
    top: calc(310 * var(--u));
    align-items: flex-start;
}

.ds-touch-mode .ds-kf-row:nth-last-child(n + 4) { display: none; }
.ds-touch-mode .ds-kf-row { padding-left: calc(10 * var(--u)); background: rgba(8, 10, 9, 0.6); font-size: calc(15 * var(--t)); }
.ds-touch-mode .ds-killfeed { align-items: flex-start; }
.ds-touch-mode .ds-netgraph { align-items: flex-start; }
.ds-touch-mode .ds-bottom-right { right: 318px; bottom: 12px; }
.ds-touch-mode.ds-touch-smoke .ds-bottom-right { right: 388px; }
.ds-touch-mode .ds-weapon { min-width: 0; }
/* Compact weapon panel: name and fire mode, ammo, then grenade/smoke pips (no
   keycaps: the touch buttons are the keys). */
.ds-touch-mode .ds-mag-bar,
.ds-touch-mode .ds-equip .ds-keycap { display: none; }
.ds-touch-mode .ds-weapon-head { font-size: calc(13 * var(--t)); gap: calc(6 * var(--u)); }
.ds-touch-mode .ds-firemode { font-size: calc(12 * var(--t)); }
.ds-touch-mode .ds-ammo-mag { font-size: calc(34 * var(--t)); }
.ds-touch-mode .ds-equip { margin-top: calc(2 * var(--u)); gap: calc(12 * var(--u)); }
.ds-touch-mode .ds-equip-item { font-size: calc(11 * var(--t)); gap: calc(5 * var(--u)); }
.ds-touch-mode .ds-chat-host { bottom: calc(60 * var(--u)); width: calc(380 * var(--u)); }
.ds-touch-mode .ds-chat-log { max-height: calc(130 * var(--u)); }
/* The column under the crosshair ends above the bottom button row and stays
   narrower than the gap between the chat and the button cluster's inner edge
   (304 px from the right at full size, 243 px at 80%). */
.ds-touch-mode .ds-lower { bottom: 96px; width: min(calc(640 * var(--u)), max(160px, calc(100vw - 630px))); }
/* Touch prompts name the touch button instead of a keyboard key. The RELOAD
   button itself carries the reload prompt (amber when low, pulsing red when empty,
   filled while reloading), so only NO AMMO keeps its centre text. */
.ds-touch-mode .ds-reload-prompt:not([data-kind='dry']) { display: none; }
.ds-tbtn-reload[data-alert='warn'] { border-color: var(--warn); color: var(--warn); }
.ds-tbtn-reload[data-alert='alert'] { border-color: var(--enemy); color: #ffd2cc; background: rgba(90, 16, 12, 0.6); animation: ds-pulse 0.9s ease-in-out infinite; }
.ds-tbtn-reload[data-alert='busy'] { border-color: var(--ink-2); background: rgba(242, 239, 230, 0.2); }
.ds-touch-mode .ds-interact .ds-keycap,
.ds-touch-mode .ds-out-walk .ds-keycap { border-radius: 999px; padding: 0 calc(8 * var(--t)); border-bottom-width: 1px; }
/* One line (key chip + text) with the hold bar just under it. The capture and
   spawn-protection bars move to the top-centre stack on touch (objective.js,
   status.js), so the lower centre holds only the target name, this prompt and
   NO AMMO. */
.ds-touch-mode .ds-interact { width: auto; max-width: 100%; gap: calc(3 * var(--u)); }
.ds-top-center > .ds-capture,
.ds-top-center > .ds-protected { margin-top: calc(4 * var(--u)); }
/* Touch: the killfeed sits under the minimap, so the top-centre column only has
   to clear the SCORE / MENU bar. */
.ds-touch-mode .ds-top-center { max-width: max(calc(100% - 320px), calc(560 * var(--u))); }
/* The held scoreboard starts below the SCORE / MENU bar. */
.ds-touch-mode .ds-scoreboard { top: 62px; max-height: calc(100% - 72px); }

/* Portrait prompt. */
.ds-rotate {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    background: #070908;
    pointer-events: auto;
    text-align: center;
}

.ds-rotate-phone {
    position: relative;
    width: 64px;
    height: 112px;
    border: 3px solid var(--ink);
    border-radius: 12px;
    animation: ds-rotate 2.2s ease-in-out infinite;
}

.ds-rotate-screen {
    position: absolute;
    inset: 10px 6px;
    border-radius: 3px;
    background: linear-gradient(160deg, rgba(201, 168, 106, 0.55), rgba(34, 197, 94, 0.35));
}

@keyframes ds-rotate {
    0%, 20% { transform: rotate(0deg); }
    55%, 100% { transform: rotate(-90deg); }
}

.ds-rotate-title { font-size: 26px; font-weight: 700; letter-spacing: 0.2em; }
.ds-rotate-sub { max-width: 320px; font-size: 16px; font-weight: 500; color: var(--ink-2); }

/* Small phones (under 740 px wide): the 80% button cluster leaves this much room. */
@media (max-width: 739px) {
    .ds-touch-mode .ds-lower { width: min(calc(640 * var(--u)), max(160px, calc(100vw - 500px))); }
    .ds-touch-mode .ds-bottom-right { right: 256px; }
    .ds-touch-mode.ds-touch-smoke .ds-bottom-right { right: 312px; }
    .ds-touch-mode .ds-chat-host { width: calc(300 * var(--u)); }
    .ds-touch-mode .ds-interact { font-size: calc(15 * var(--t)); letter-spacing: 0.08em; }
}

/* Menu tap targets on touch screens: every control is at least --tap (44 px) tall
   (ui.css; the phone HUD scale would otherwise make nav items, segment buttons, tabs
   and key boxes 20-22 px). */
.ds-touch-mode .ds-nav-item { justify-content: center; }
.ds-touch-mode .ds-seg-btn { padding: 0 calc(8 * var(--u)); }
/* LEAVE MATCH keeps a clear gap from the items around it. */
.ds-touch-mode .ds-nav-gap { height: 14px; }