/* Handy und Tablet: Touch-Steuerung (src/game/touch.js) und kompaktes HUD. Gilt nur mit .touch-on am HUD bzw.
   .is-touch am Dokument; die Rechneransicht bleibt unverändert. Aufbau nach Owner-Vorgabe vom 27.10.2026: links der
   Lauf-Stick, rechts eine Säule aus Blick-Stick und gleich großer Feuertaste genau darüber, alle anderen Tasten
   deutlich kleiner am Rand dieser Säule. Lage der Tasten: Abstand vom rechten und unteren Rand (--x, --y) und Größe
   (--s); kleine Tasten wachsen auf Tablets mit --k; sichere Bereiche (Notch, Home-Leiste) zählen dazu. */
.is-touch { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --k: 1; }
@media (min-width: 700px) and (min-height: 600px) { .is-touch { --k: 1.22; } }
html.is-touch, .is-touch body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
.is-touch #app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.is-touch #app input, .is-touch #app textarea { -webkit-user-select: text; user-select: text; }
.is-touch .game-canvas { touch-action: none; }

/* Rückweg zur Fluffy-&-Friends-Website in der Kopfleiste des Spielmenüs (alle Geräte) */
.home-tools .home-back { display: inline-flex; align-items: center; color: #dededb; font-size: 13px; font-weight: 700; padding: 9px 12px; min-height: 40px; text-decoration: none; }
.home-tools .home-back:hover { color: var(--f); }
@media (max-width: 420px) { .home-tools .home-back { font-size: 12px; padding: 8px 6px; } }

/* Optionen und Hilfen je Gerät */
html:not(.is-touch) .touch-only { display: none !important; }
.is-touch .desk-only, .is-touch .gfx-adv { display: none !important; }
.gl-lost { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(8,8,12,0.82); }
.gl-lost[hidden] { display: none; }

/* Vollbild (src/ui/fullscreen.js, alle Geräte): Weg über den Home-Bildschirm, wo es kein Vollbild gibt (iPhone),
   und Hinweis zum Querhalten, wo sich die Ausrichtung nicht sperren lässt (iPad, iPhone) */
.fs-help { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(8,8,12,0.78); }
.fs-help[hidden], .rotate-hint[hidden] { display: none; }
.fs-steps { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; line-height: 1.35; }
.rotate-hint { position: fixed; left: 50%; top: 50%; z-index: 65; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; padding: 16px 20px; border-radius: 16px; background: rgba(14,13,18,0.86); color: #fff; font-weight: 900; font-size: 15px; pointer-events: none; }
.rotate-hint svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rotate-hint .ph { animation: fsTurn 1.6s ease-in-out infinite; transform-origin: 24px 19.5px; }
@keyframes fsTurn { 0%, 15% { transform: rotate(0deg); } 55%, 100% { transform: rotate(-90deg); } }

/* Steuerfläche. Säule rechts: --stk Stickgröße (auch die Feuertaste), --sx/--sy Abstand der Sticks vom seitlichen
   und unteren Rand, --fg Lücke zwischen Blick-Stick und Feuertaste, --bs Größe der kleinen Tasten, --bg Lücke
   zwischen ihnen, --ca rechter Abstand der Spalte links neben der Säule, --row Rasterschritt dieser Spalte */
.touch-on #touch.tc { position: absolute; inset: 0; z-index: 4; pointer-events: auto; touch-action: none; }
.tc { --stk: 112px; --sx: 50px; --sy: 44px; --fg: 10px; --bs: calc(44px * var(--k)); --bg: 8px; --ca: calc(var(--sx) + var(--stk) + 12px); --row: calc(var(--bs) + var(--bg)); }
.tc.dead > *:not(.tc-menu):not(.tc-look) { opacity: 0; pointer-events: none; }
.tc-look { position: absolute; inset: 0; }
.tc-move { position: absolute; left: 0; bottom: 0; width: 46%; height: 82%; }
/* Blick-Stick: Fläche um seine Ruhelage, oben bis knapp unter die Feuertaste, links bis zur kleinen Tastenspalte */
.tc-aim { position: absolute; right: 0; bottom: 0; width: calc(var(--ca) - 4px + var(--sr)); height: calc(var(--sy) + var(--stk) + var(--fg) / 2 + var(--sb)); }
.tc-stick { position: absolute; left: 0; top: 0; width: var(--stk); height: var(--stk); border-radius: 50%; pointer-events: none; border: 2px solid rgba(255,255,255,0.36); background: radial-gradient(circle, rgba(14,14,20,0.08) 0 70%, rgba(14,14,20,0.26) 71%); box-shadow: 0 6px 18px rgba(0,0,0,0.25); transition: opacity .15s, border-color .15s; will-change: transform; }
.tc-stick.rest { top: auto; bottom: calc(var(--sy) + var(--sb)); transition: opacity .25s; }
.tc-move-stick.rest { left: calc(var(--sx) + var(--sl)); opacity: 0.38; }
.tc-aim-stick.rest { left: auto; right: calc(var(--sx) + var(--sr)); opacity: 0.55; }
.tc-band { position: absolute; left: 50%; top: 50%; width: 52%; height: 52%; margin: -26%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,0.28); }
.tc-knob { position: absolute; left: 50%; top: 50%; width: 45%; height: 45%; margin: -22.5%; border-radius: 50%; background: radial-gradient(circle at 42% 34%, #ffffff, #e6e2ee 55%, #b4aec2); box-shadow: 0 4px 12px rgba(0,0,0,0.45); will-change: transform; }
.tc-knob svg { display: block; width: 62%; height: 62%; margin: 19%; fill: none; stroke: rgba(38,34,52,0.62); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.tc-knob svg .dot { fill: rgba(38,34,52,0.62); stroke: none; }
.tc-stick.quiet { border-color: #7fd6ff; }
.tc-stick.quiet .tc-band { border-color: rgba(127,214,255,0.8); }
.tc-stick.quiet .tc-knob { background: radial-gradient(circle at 42% 34%, #ffffff, #c9efff 55%, #7fbfdc); }
.tc-aim-stick.turning { border-color: #ffe08a; }
.tc-aim-stick.turning .tc-band { border-color: rgba(255,224,138,0.75); }

/* Tasten */
.tc-btn { --s: var(--bs); --x: 0px; --y: 0px; position: absolute; right: calc(var(--x) + var(--sr)); bottom: calc(var(--y) + var(--sb)); width: var(--s); height: var(--s); padding: 0; margin: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; font: inherit; cursor: pointer; touch-action: none; border: 1.5px solid rgba(255,255,255,0.32); background: radial-gradient(circle at 50% 28%, rgba(255,255,255,0.2), rgba(18,18,26,0.5) 72%); box-shadow: 0 6px 16px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.18); transition: transform .08s, opacity .18s, background-color .15s, border-color .15s; }
.tc-btn svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); pointer-events: none; }
.tc-btn svg .fill, .tc-btn svg .dot { fill: currentColor; stroke: none; }
.tc-btn.down { transform: scale(0.92); border-color: rgba(255,255,255,0.75); }
.tc-btn.off { opacity: 0; transform: scale(0.6); pointer-events: none; visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s .18s; }
.tc-btn.tc-use .tc-label { left: auto; right: calc(100% + 8px); top: 50%; bottom: auto; transform: translateY(-50%); margin: 0; text-align: right; }
.tc-btn .tc-count { position: absolute; right: -2px; top: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #15141b; border: 1px solid rgba(255,255,255,0.4); font-size: 12px; font-weight: 900; line-height: 18px; text-align: center; }
.tc-btn .tc-count:empty { display: none; }
.tc-btn .tc-label { position: absolute; left: 100%; margin-left: 8px; display: grid; width: max-content; max-width: min(46vw, 260px); white-space: nowrap; font-size: 13px; font-weight: 900; line-height: 1.15; padding: 5px 11px; border-radius: 12px; background: rgba(14,13,18,0.84); pointer-events: none; text-align: left; }
.tc-btn .tc-label small { font-size: 11px; font-weight: 700; color: #ffe08a; overflow: hidden; text-overflow: ellipsis; }
.tc-btn .tc-label small:empty { display: none; }

/* Säule: Feuertaste so groß wie der Blick-Stick und genau über ihm */
.tc-fire { --s: var(--stk); --x: var(--sx); --y: calc(var(--sy) + var(--stk) + var(--fg)); border: 2px solid rgba(255,182,192,0.85); background: radial-gradient(circle at 50% 26%, rgba(255,150,165,0.62), rgba(208,24,52,0.62) 72%); }
.tc-fire svg { width: 44%; height: 44%; }
.tc-fire.down { background: radial-gradient(circle at 50% 26%, rgba(255,190,200,0.8), rgba(230,40,70,0.78) 72%); }
/* Kleine Tasten, Querformat: Spalte links neben der Säule (unten Ducken und Springen am Blick-Stick, darüber
   Nachladen und Zielen an der Feuertaste, oben Nehmen), Granate und Fähigkeit über der Feuertaste, Hieb unten
   neben Ducken. Medikit, Waffenwand und Pause sitzen oben am Rand. */
.tc-crouch { --x: var(--ca); --y: var(--sy); }
.tc-jump { --x: var(--ca); --y: calc(var(--sy) + var(--row)); }
.tc-reload { --x: var(--ca); --y: calc(var(--sy) + 2 * var(--row)); }
.tc-ads { --x: var(--ca); --y: calc(var(--sy) + 3 * var(--row)); }
.tc-use { --x: var(--ca); --y: calc(var(--sy) + 4 * var(--row)); }
.tc-nade, .tc-ability { --y: calc(var(--sy) + 2 * var(--stk) + var(--fg) + var(--bg)); }
.tc-nade { --x: calc(var(--sx) + var(--stk) - var(--bs)); }
.tc-ability { --x: calc(var(--sx) + var(--stk) - 2 * var(--bs) - var(--bg)); }
.tc-melee { --x: calc(var(--ca) + var(--row)); --y: var(--sy); }
.tc-ads.on { border-color: var(--f); background: radial-gradient(circle at 50% 28%, rgba(190,245,140,0.45), rgba(47,93,26,0.6) 72%); }
.tc-crouch .i-prone { display: none; }
.tc-crouch.on { border-color: #d7f5c2; background: radial-gradient(circle at 50% 28%, rgba(215,245,194,0.4), rgba(40,60,30,0.6) 72%); }
.tc-crouch.prone .i-crouch { display: none; }
.tc-crouch.prone .i-prone { display: inline; }
.tc-crouch.prone { border-color: #d7f5c2; background: radial-gradient(circle at 50% 28%, rgba(215,245,194,0.4), rgba(40,60,30,0.6) 72%); }
.tc-reload.busy svg { animation: tcSpin .8s linear infinite; }
@keyframes tcSpin { to { transform: rotate(360deg); } }
.tc-melee { border-color: rgba(255,242,190,0.8); }
.tc-ability .tc-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.tc-ability .tc-ring circle { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 2.6; }
.tc-ability .tc-ring .fg { stroke: #ffd23f; stroke-dasharray: 100.6 100.6; stroke-linecap: round; }
.tc-ability.ready .tc-ring .fg { stroke: var(--f); }
.tc-ability.active .tc-ring .fg { stroke: #7df9ff; }
.tc-ability:not(.ready):not(.active) .tc-ab-ico { opacity: 0.45; }
.tc-ab-ico { display: grid; place-items: center; width: 100%; height: 100%; pointer-events: none; }
.tc-ab-ico svg { width: 46%; height: 46%; }
.tc-secs { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 900; text-shadow: 0 1px 3px #000; pointer-events: none; }
.tc-med { right: auto; bottom: auto; left: calc(10px + var(--sl)); top: calc(66px + var(--st)); border-radius: 12px; border-color: rgba(255,170,175,0.7); background: radial-gradient(circle at 50% 28%, rgba(255,120,130,0.5), rgba(170,20,40,0.6) 72%); }
.tc-med.hot { animation: tcHot 1.2s ease-in-out infinite; }
.tc-med.on { box-shadow: 0 0 0 3px #8fd13f; }
@keyframes tcHot { 50% { box-shadow: 0 0 0 4px rgba(255,107,119,0.55), 0 6px 16px rgba(0,0,0,0.32); } }
.tc-use { border-color: #ffd23f; background: radial-gradient(circle at 50% 28%, rgba(255,226,120,0.55), rgba(140,100,10,0.6) 72%); }
/* Waffenwand neben dem Medikit; über der Säule bleibt Platz für Granate und Fähigkeit */
.tc-buy { right: auto; bottom: auto; left: calc(10px + var(--bs) + var(--bg) + var(--sl)); top: calc(66px + var(--st)); border-radius: 12px; }
.tc-menu { right: calc(10px + var(--sr)); bottom: auto; top: calc(8px + var(--st)); }

/* Waffenplätze: Tippen wechselt, Tippen auf den aktiven Platz lädt nach */
/* Querformat: Mitte unten zwischen Lauf-Stick und Hieb-Taste */
.tc-slots { position: absolute; left: clamp(calc(170px + var(--sl)), calc(50% - 160px), 50%); bottom: calc(8px + var(--sb)); display: flex; gap: 6px; pointer-events: auto; }
.tc-slot { width: calc(66px * var(--k)); height: calc(44px * var(--k)); padding: 3px 4px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.22); background: rgba(14,13,18,0.62); color: #d9d5e2; font: inherit; display: grid; align-content: center; justify-items: center; gap: 1px; touch-action: none; cursor: pointer; }
.tc-slot .n { max-width: 100%; font-size: 10px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.tc-slot .a { font-size: 14px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tc-slot.on { color: #fff; border-color: rgba(255,255,255,0.75); background: rgba(14,13,18,0.86); box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset; }
.tc-slot.gold { border-color: #f2c14e; }
.tc-slot.gold .n { color: #f2c14e; }
.tc-slot.on.low .a { color: #ff6b77; }
.tc-slot.down { transform: scale(0.94); }

/* Kompaktes HUD */
.touch-on .scorebar { top: calc(4px + var(--st)); transform: translateX(-50%) scale(0.74); transform-origin: top center; }
.touch-on #hud-round { display: none; }
.touch-on .sb-mid { min-width: 92px; padding: 4px 10px; display: grid; align-content: center; }
.touch-on .scorebar.tc-tap { pointer-events: auto; z-index: 5; cursor: pointer; }
.touch-on .hud-bl { left: calc(10px + var(--sl)); top: calc(8px + var(--st)); bottom: auto; width: 148px; gap: 4px; }
.touch-on #hud-char, .touch-on .hud-row, .touch-on #stance, .touch-on .hud-br { display: none; }
.touch-on .shield { padding: 3px 8px; gap: 6px; border-radius: 10px; }
.touch-on .sh-ico { width: 13px; height: 13px; }
.touch-on .sh-bar { height: 6px; }
.touch-on #sh-num { font-size: 12px; min-width: 26px; }
.touch-on .hp { padding: 4px 8px; gap: 6px; border-radius: 10px; }
.touch-on .hp-bar { height: 8px; }
.touch-on #hp-num { font-size: 15px; min-width: 30px; }
/* Querformat: Bildrate und Abschussmeldungen links unter Medikit und Waffenwand, rechts steht die Tastensäule */
.touch-on #killfeed { top: calc(136px + var(--st)); left: calc(10px + var(--sl)); right: auto; align-items: flex-start; gap: 4px; }
.touch-on .kf { font-size: 11px; padding: 4px 8px; }
.touch-on .kf:nth-last-child(n+4) { display: none; }
.touch-on #fps { left: calc(10px + var(--sl)); top: calc(116px + var(--st)); }
.touch-on #protect { top: calc(48px + var(--st)); font-size: 12px; padding: 4px 10px; }
.touch-on #banner { top: 18%; }
.touch-on #banner-main { font-size: 34px; }
.touch-on #banner-sub { font-size: 12.5px; max-width: 70vw; }
/* Hinweis zu Waffenwand und Lootbox steht am Handy an der Nehmen-Taste */
.touch-on #prompt { display: none !important; }
.touch-on #respawn .rs-num { font-size: 72px; }
.touch-on #scoreboard { top: calc(48px + var(--st)); max-height: calc(100dvh - 64px); overflow: auto; z-index: 6; pointer-events: auto; }
.touch-on #heal-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.touch-on #heal-ring svg { width: 64px; height: 64px; }
.touch-on #crosshair { display: block; }

/* Flaches Querformat (unter 360 px Höhe, ältere kleine Handys): kleinere Säule, damit Granate und Fähigkeit im Bild
   bleiben; Hieb eine Reihe höher und schmalere Waffenplätze, damit unten nichts zusammenstößt */
@media (orientation: landscape) and (max-height: 359px) {
  .tc { --stk: 96px; --sx: 64px; --sy: 24px; --fg: 8px; }
  .tc-melee { --y: calc(var(--sy) + var(--row)); }
  .tc-slot { width: 54px; }
  .tc-slot .a { font-size: 12px; }
}

/* Hochformat: beide Sticks unten nebeneinander, Feuertaste über dem Blick-Stick; Springen und Ducken zwischen den
   Sticks, darüber zwei Spalten links neben der Feuertaste (Nachladen und Zielen, Granate und Fähigkeit), Nehmen und
   Hieb am linken Rand. Alles bleibt unter dem Fadenkreuz. */
@media (orientation: portrait) {
  .tc { --sx: 24px; --sy: calc(20px + 44px * var(--k)); } /* über der Waffenleiste */
  .tc-move { width: 48%; height: 46%; }
  .tc-crouch { --x: calc(50% - var(--bs) / 2); --y: var(--sy); }
  .tc-jump { --x: calc(50% - var(--bs) / 2); --y: calc(var(--sy) + var(--row)); }
  .tc-reload, .tc-nade { --y: calc(var(--sy) + var(--stk) + var(--fg)); }
  .tc-ads, .tc-ability { --y: calc(var(--sy) + var(--stk) + var(--fg) + var(--row)); }
  .tc-nade, .tc-ability { --x: calc(var(--ca) + var(--row)); }
  .tc-use, .tc-melee { right: auto; left: calc(var(--sx) + var(--sl)); }
  .tc-melee { --y: calc(var(--sy) + var(--stk) + var(--fg)); }
  .tc-use { --y: calc(var(--sy) + var(--stk) + var(--fg) + var(--row)); }
  .tc-btn.tc-use .tc-label { left: 0; right: auto; top: auto; bottom: calc(100% + 8px); transform: none; text-align: left; }
  /* Waffenleiste unten mittig unter den Sticks, nie auf Höhe des Fadenkreuzes */
  .tc-slots { left: 50%; transform: translateX(-50%); bottom: calc(8px + var(--sb)); }
  .touch-on .sb-name { display: none; }
  .touch-on .scorebar { transform: translateX(-50%) scale(0.8); }
  .touch-on .hud-bl { top: calc(50px + var(--st)); }
  .tc-med, .tc-buy { top: calc(108px + var(--st)); }
  .touch-on #killfeed { top: calc(56px + var(--st)); left: auto; right: calc(10px + var(--sr)); align-items: flex-end; }
  .touch-on #fps { left: calc(10px + var(--sl)); top: calc(160px + var(--st)); }
  .touch-on #banner { top: 24%; }
}

/* Menüs am Handy: deckende Felder statt teurer Hintergrund-Unschärfe über dem 3D-Bild, Höhe nach sichtbarer
   Fläche (dvh), Knöpfe am Fuß der Felder bleiben immer erreichbar, Notch und Home-Leiste bleiben frei */
.is-touch .screen { padding: max(16px, var(--st)) max(16px, var(--sr)) max(16px, var(--sb)) max(16px, var(--sl)); }
.is-touch #menu .home-shell { padding-left: var(--sl); padding-right: var(--sr); padding-bottom: var(--sb); }
/* Figurenwahl: Bot-Einstellungen vor dem Namen, damit sie über der Knopfleiste stehen */
.is-touch #select .panel { display: flex; flex-direction: column; }
.is-touch #select #bot-options { order: 3; }
.is-touch #select .select-options:not(#bot-options) { order: 4; }
.is-touch #select .panel .actions { order: 5; }
.is-touch .panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18,17,22,0.95); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overscroll-behavior: contain; touch-action: pan-y; }
.is-touch .panel .actions { position: sticky; bottom: -22px; margin: 12px -22px -22px; padding: 12px 22px calc(14px + var(--sb)); background: linear-gradient(rgba(18,17,22,0), rgba(18,17,22,0.97) 26%); z-index: 2; }
.is-touch .btn { min-height: 46px; }
.is-touch .panel.options { height: min(700px, calc(100dvh - 24px)); }
.is-touch #select .panel { background: rgba(18,17,22,0.93); }
@media (max-height: 520px) and (orientation: landscape) {
  .is-touch .panel .actions { bottom: -10px; margin: 8px -12px -10px; padding: 8px 12px calc(8px + var(--sb)); }
  .is-touch #select .panel { max-height: calc(100dvh - 16px); }
  .is-touch #select .select-options label { font-size: 12px; }
  .is-touch #select .select-options select, .is-touch #select .select-options input { padding: 7px 10px; }
  .is-touch #select .actions .btn { min-height: 40px; padding: 8px 14px; }
}
@media (max-width: 820px) {
  .is-touch .panel .actions { bottom: -14px; margin: 10px -14px -12px; padding: 10px 14px calc(12px + var(--sb)); }
}
@media (prefers-reduced-motion: reduce) {
  .tc-btn, .tc-btn.off, .tc-stick { transition: none; }
  .tc-reload.busy svg, .tc-med.hot, .rotate-hint .ph { animation: none; }
}