/* Dokunmatik cihazlar: oyun içi kontroller + küçük ekran düzeni (html.touch, touch.js ekler) */
#touch-ui { position: fixed; inset: 0; z-index: 9; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; --u: min(15vh, 70px); }
#touch-ui.hidden { display: none; }
#touch-ui .t-look { position: absolute; inset: 0; }
#touch-ui .t-stick-zone { position: absolute; left: 0; bottom: 0; width: 42%; height: 72%; }
#touch-ui .t-base { position: fixed; left: calc(env(safe-area-inset-left, 0px) + 20vh); top: 70vh; width: calc(var(--u) * 2); height: calc(var(--u) * 2); margin: calc(var(--u) * -1) 0 0 calc(var(--u) * -1);
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); background: radial-gradient(circle, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18)); opacity: .55; pointer-events: none; transition: opacity .15s; }
#touch-ui .t-base.on { opacity: 1; transition: none; }
#touch-ui .t-knob { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * .9); height: calc(var(--u) * .9); margin: calc(var(--u) * -.45) 0 0 calc(var(--u) * -.45); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18)); border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }

#touch-ui .t-btn, #touch-ui .t-mini { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .38); background: rgba(10, 12, 15, .42); color: #fff;
  font: 700 calc(var(--u) * .17)/1.05 var(--font, system-ui), sans-serif; letter-spacing: .06em; text-shadow: 0 1px 2px #000; padding: 0; touch-action: none;
  width: var(--u); height: var(--u); display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
#touch-ui .t-btn.big { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); font-size: calc(var(--u) * .2); border-color: rgba(255, 150, 60, .75); background: rgba(255, 120, 30, .22); }
#touch-ui .t-btn.on, #touch-ui .t-mini:active { background: rgba(255, 150, 40, .55); border-color: #ffb347; }
#touch-ui .t-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); right: calc(env(safe-area-inset-right, 0px) + 8px); display: flex; gap: 6px; }
#touch-ui .t-mini { position: static; width: auto; min-width: calc(var(--u) * .62); height: calc(var(--u) * .5); border-radius: 8px; padding: 0 10px; font-size: calc(var(--u) * .16); }
#touch-ui button { pointer-events: auto; }
#touch-ui .t-btn { display: none; }

/* --- yaya --- */
#touch-ui[data-kind="ground"] { --R: calc(env(safe-area-inset-right, 0px) + 3vw); }
#touch-ui[data-kind="ground"] [data-id="fire"] { right: var(--R); bottom: 24vh; }
#touch-ui[data-kind="ground"] [data-id="ads"] { right: calc(var(--R) + var(--u) * 1.55); bottom: calc(24vh + var(--u) * .95); }
#touch-ui[data-kind="ground"] [data-id="reload"] { right: calc(var(--R) + var(--u) * 1.6); bottom: calc(24vh - var(--u) * .3); width: calc(var(--u) * .8); height: calc(var(--u) * .8); }
#touch-ui[data-kind="ground"] [data-id="swap"] { right: calc(var(--R) + var(--u) * .2); bottom: calc(24vh + var(--u) * 1.55); width: calc(var(--u) * .8); height: calc(var(--u) * .8); }
#touch-ui[data-kind="ground"] [data-id="nade"] { right: calc(var(--R) + var(--u) * 1.3); bottom: calc(24vh + var(--u) * 2.05); width: calc(var(--u) * .8); height: calc(var(--u) * .8); }
#touch-ui[data-kind="ground"] [data-id="flash"] { right: calc(var(--R) + var(--u) * 2.2); bottom: calc(24vh + var(--u) * 2.05); width: calc(var(--u) * .8); height: calc(var(--u) * .8); }
#touch-ui[data-kind="ground"] [data-id="buy"] { right: calc(var(--R) + var(--u) * 3.1); bottom: calc(24vh + var(--u) * 2.05); width: calc(var(--u) * .8); height: calc(var(--u) * .8); }
#touch-ui[data-kind="ground"] [data-id="jump"] { right: var(--R); bottom: 4vh; }
#touch-ui[data-kind="ground"] [data-id="crouch"] { right: calc(var(--R) + var(--u) * 1.2); bottom: 4vh; }
#touch-ui[data-kind="ground"] [data-id="use"],
#touch-ui[data-kind="ground"] [data-id="leap"] { right: calc(var(--R) + var(--u) * 2.45); bottom: 4vh; }
#touch-ui[data-kind="ground"] [data-id="wolf"] { right: calc(var(--R) + var(--u) * 2.8); bottom: calc(24vh + var(--u) * .4); border-color: #ff9f2e; background: rgba(255, 140, 20, .35); }
#touch-ui[data-kind="ground"] [data-id="abil"] { right: calc(var(--R) + var(--u) * 1.55); bottom: calc(24vh + var(--u) * .95); }
#touch-ui[data-kind="ground"] [data-id="rs"] { right: calc(var(--R) + var(--u) * 4); bottom: calc(24vh + var(--u) * 1.2); width: calc(var(--u) * 1.5); border-radius: 12px; border-color: #e0c060; background: rgba(200, 160, 40, .35); }
#touch-ui[data-kind="ground"] [data-id="fire"], #touch-ui[data-kind="ground"] [data-id="ads"], #touch-ui[data-kind="ground"] [data-id="reload"],
#touch-ui[data-kind="ground"] [data-id="swap"], #touch-ui[data-kind="ground"] [data-id="nade"], #touch-ui[data-kind="ground"] [data-id="flash"], #touch-ui[data-kind="ground"] [data-id="buy"], #touch-ui[data-kind="ground"] [data-id="jump"],
#touch-ui[data-kind="ground"] [data-id="crouch"] { display: flex; }
#touch-ui[data-use="1"] [data-id="use"], #touch-ui[data-wolf-ready="1"] [data-id="wolf"], #touch-ui[data-rs="1"] [data-id="rs"] { display: flex; }
/* kurt */
#touch-ui[data-wolf="1"] [data-id="ads"], #touch-ui[data-wolf="1"] [data-id="reload"], #touch-ui[data-wolf="1"] [data-id="swap"],
#touch-ui[data-wolf="1"] [data-id="nade"], #touch-ui[data-wolf="1"] [data-id="flash"], #touch-ui[data-wolf="1"] [data-id="crouch"] { display: none; }
#touch-ui[data-wolf="1"] [data-id="leap"], #touch-ui[data-wolf="1"] [data-id="abil"] { display: flex; }
/* araç: yaya düğmeleri gizli */
#touch-ui:not([data-veh=""]) [data-id] { display: none; }
#touch-ui[data-veh="heli"] [data-id="vup"] { display: flex; right: var(--R); bottom: calc(24vh + var(--u) * .7); }
#touch-ui[data-veh="heli"] [data-id="vdown"] { display: flex; right: var(--R); bottom: 6vh; }
#touch-ui[data-veh="heli"] [data-id="vrl"] { display: flex; right: calc(var(--R) + var(--u) * 2.5); bottom: 14vh; }
#touch-ui[data-veh="heli"] [data-id="vrr"] { display: flex; right: calc(var(--R) + var(--u) * 1.25); bottom: 14vh; }
#touch-ui:not([data-veh=""]) [data-id="vexit"] { display: flex; right: calc(var(--R) + var(--u) * 1.3); bottom: calc(24vh + var(--u) * 1.6); width: calc(var(--u) * .8); height: calc(var(--u) * .8); }
#touch-ui[data-veh="heli"] [data-id="vcam"], #touch-ui[data-veh="drive"] [data-id="vcam"] { display: flex; right: var(--R); bottom: calc(24vh + var(--u) * 2.1); width: calc(var(--u) * .8); height: calc(var(--u) * .8); }
#touch-ui[data-veh="gunner"] [data-id="vfire"] { display: flex; right: var(--R); bottom: 24vh; }
#touch-ui[data-dead="1"] .t-btn { display: none !important; }

/* --- uçak --- */

/* dikey tutuşta uyarı */
#t-rotate { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(6, 8, 10, .94); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; font: 700 18px var(--font, system-ui); letter-spacing: .05em; padding: 24px; }
#t-rotate .ph { width: 54px; height: 92px; border: 4px solid #ffb347; border-radius: 10px; animation: t-rot 1.8s ease-in-out infinite; }
@keyframes t-rot { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { html.touch.ingame #t-rotate { display: flex; } }

/* --- küçük ekranda oyun içi göstergeler --- */
html.touch #hp-box { transform: scale(.72); transform-origin: left bottom; left: calc(env(safe-area-inset-left, 0px) + 8px); bottom: 6px; }
html.touch #ammo-box { transform: scale(.66); transform-origin: right top; bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 46px); right: calc(env(safe-area-inset-right, 0px) + 6px); }
html.touch #ammo-box #slots { display: none; }
html.touch #mm-wrap { transform: scale(.62); transform-origin: left top; left: calc(env(safe-area-inset-left, 0px) + 8px); top: 6px; }
html.touch #scorebar { transform: translateX(-50%) scale(.72); transform-origin: center top; top: 4px; }
html.touch #map-name { display: none; }
html.touch #killfeed { top: 34vh; right: 8px; transform: scale(.75); transform-origin: right top; }
html.touch #chat-wrap { transform: scale(.78); transform-origin: left bottom; bottom: 26vh; }
html.touch #veh-hud { transform: translateX(-50%) scale(.68); transform-origin: center bottom; bottom: 4px; }
html.touch #veh-hud .vh-seats, html.touch #veh-hud .vh-keys { display: none; }
html.touch .pk-hint, html.touch #breath span { display: none; }
html.touch #pick { bottom: 18vh; transform: translateX(-50%) scale(.8); transform-origin: center bottom; }
html.touch #veh-prompt kbd, html.touch #bomb-carry kbd { display: none; }
html.touch #scoreboard { transform: translate(-50%, -50%) scale(.82); max-height: 96vh; overflow: auto; }
html.touch #pause .pause-hint { display: none; }

/* --- dar ekranda menüler (telefon yatay/dikey) --- */
@media (max-width: 960px) {
  .lp-nav, .lp-status { display: none; }
  .lp-head-in { justify-content: space-between; gap: 10px; padding: 8px 14px; }
  .rm-head { gap: 8px; padding: 10px 12px; }
  .rm-title { flex: 1 1 220px; min-width: 180px; }
  .rm-head .btn { padding: 0 10px; font-size: 12px; }
}
@media (max-height: 460px) {
  #pause .pause-box { transform: scale(.86); transform-origin: center center; }
}
/* duraklatma menüsü kısa ekranda kaydırılabilir; dokunmatikte klavye yardımı gizli */
html.touch #pause .pause-box { max-height: calc(100dvh - 12px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* uçak: radar sol üste küçülür (sağ alttaki düğmelerin üstünü örtmesin) */

/* --- telefon / dar ekran: lobi sayfaları tek sütun, ana alan kayar --- */
@media (max-width: 900px) {
  .lobby-main { padding: 10px 10px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .page { min-height: auto; }
  .wt-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .wt-rooms, .wt-side, .wt-chat, .wt-users { grid-column: 1 !important; grid-row: auto !important; }
  .wt-rooms { min-height: 340px; max-height: 70vh; }
  .wt-chat { min-height: 280px; max-height: 60vh; }
  .wt-users { min-height: 200px; max-height: 50vh; }
  .wt-side { overflow: visible; }
  .wt-head { flex-wrap: wrap; gap: 8px; }
  .wt-table-wrap { overflow-x: auto; }
  .seg { max-width: 100%; flex-wrap: wrap; height: auto; }
  .seg button { flex: 1 1 auto; white-space: nowrap; }
  .prof-grid, .clan-grid, .inv-grid { grid-template-columns: 1fr; height: auto; }
  .inv-grid > .panel, .detail { min-height: 420px; }
  .detail-stage { height: 260px; min-height: 0; }
  .loadout-bar { grid-template-columns: repeat(4, 1fr); }
  .mk-bar { grid-template-columns: 1fr 1fr; }
  .mk-bar > *:not(.mk-chk):not(.mk-count) { grid-column: 1 / -1; min-width: 0; }
  .mk-chk { white-space: normal; }
  .mk-grid { height: auto; max-height: none; }
  .srv-top .logo.xl { font-size: 46px; }
  .rm-actions { flex-wrap: wrap; gap: 8px; }
  .rm-actions #rm-start { flex: 1 1 100%; justify-content: center; }
  .modal-box { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
}
@media (max-width: 560px) {
  .srv-table th:nth-child(2), .srv-table td:nth-child(2), .srv-table th:nth-child(4), .srv-table td:nth-child(4) { display: none; }
  .wt-table th:nth-child(1), .wt-table td:nth-child(1), .wt-table th:nth-child(6), .wt-table td:nth-child(6) { display: none; }
  .wt-table td, .wt-table th { padding-left: 6px; padding-right: 6px; }
  .srv-top .logo.xl { font-size: 34px; }
  .srv-wrap { padding-left: 10px; padding-right: 10px; }
  .srv-grid > * { min-width: 0; }
  .srv-box { padding: 12px 8px; overflow-x: auto; }
  .srv-table { width: 100%; }
  .srv-table td.load { min-width: 96px; }
  .srv-table td.sn { gap: 8px; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .wt-cards { grid-template-columns: 1fr 1fr; }
}
/* Battle Royale */
#touch-ui[data-kind="ground"] [data-id="heal"] { right: calc(var(--R) + var(--u) * 2.8); bottom: calc(24vh + var(--u) * .4); border-color: #6fe08a; background: rgba(60, 200, 100, .3); }
#touch-ui[data-kind="ground"] [data-id="map"] { right: calc(var(--R) + var(--u) * 4); bottom: calc(24vh + var(--u) * 2.05); width: calc(var(--u) * .8); height: calc(var(--u) * .8); }
#touch-ui[data-br-heal="1"] [data-id="heal"], #touch-ui[data-br="1"] [data-id="map"], #touch-ui[data-ww="1"] [data-id="map"] { display: flex; }
#touch-ui[data-br="1"] [data-id="buy"] { display: none; }