/* CHAOS ARENA - Touch-Steuerung (nur aktiv mit body.touch bzw. #touch) */
body.touch, body.touch * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch input { -webkit-user-select: text; user-select: text; }
body.touch { touch-action: manipulation; overscroll-behavior: none; }
body.touch canvas { touch-action: none; }

#touch { --g: 2.6vmin; --fs: clamp(92px, 23vmin, 150px); --bs: calc(var(--fs) * .62); --gp: 1.4vmin;
  position: fixed; inset: 0; z-index: 15; pointer-events: none; touch-action: none; font-family: 'Trebuchet MS', system-ui, sans-serif; color: #fff; }
#touch > * { touch-action: none; }
#tzL, #tzR { position: absolute; top: 0; bottom: 0; pointer-events: auto; }
#tzL { left: 0; width: 45%; }
#tzR { right: 0; width: 55%; }

/* Joystick */
#joyGhost { position: absolute; left: calc(env(safe-area-inset-left) + 9vmin); bottom: calc(env(safe-area-inset-bottom) + 10vmin);
  width: 20vmin; height: 20vmin; max-width: 150px; max-height: 150px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.28); pointer-events: none; }
#touch.joying #joyGhost { opacity: 0; }
#joyBase { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12);
  pointer-events: none; opacity: 0; will-change: transform; }
#joyBase.on { opacity: 1; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b9f6ff); border: 3px solid var(--cyan); box-shadow: 0 3px 8px rgba(0,0,0,.5); will-change: transform; }

/* Aktionsbuttons */
.tb { position: absolute; width: var(--bs); height: var(--bs); border-radius: 50%; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: rgba(40,20,90,.55); border: 3px solid rgba(255,255,255,.75); box-shadow: 0 4px 10px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); text-shadow: 0 2px 3px rgba(0,0,0,.7); }
.tb .i { font-size: calc(var(--bs) * .38); line-height: 1; }
.tb .l { font-size: calc(var(--bs) * .17); font-weight: 900; letter-spacing: .5px; margin-top: 2px; }
.tb.on { transform: scale(.9); background: rgba(255,230,109,.55); border-color: var(--yellow); }
.tb.fire { width: var(--fs); height: var(--fs); right: calc(env(safe-area-inset-right) + var(--g)); bottom: calc(env(safe-area-inset-bottom) + var(--g));
  background: rgba(255,60,90,.5); border-color: #ffd0d8; }
.tb.fire .i { font-size: calc(var(--fs) * .42); } .tb.fire .l { font-size: calc(var(--fs) * .13); }
.tb.fire.on { background: rgba(255,60,90,.85); }
.tb.fire.auto { border-color: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
#tbJump { right: calc(env(safe-area-inset-right) + var(--g) + var(--fs) + var(--gp)); bottom: calc(env(safe-area-inset-bottom) + var(--g) + var(--fs) * .05); background: rgba(60,200,120,.45); }
#tbDash { right: calc(env(safe-area-inset-right) + var(--g) + var(--fs) * .19); bottom: calc(env(safe-area-inset-bottom) + var(--g) + var(--fs) + var(--gp)); background: rgba(0,200,255,.4); }
#tbDash.cd { opacity: .45; }
#tbP1 { right: calc(env(safe-area-inset-right) + var(--g) + var(--fs) + var(--gp)); bottom: calc(env(safe-area-inset-bottom) + var(--g) + var(--fs) * .05 + var(--bs) + var(--gp)); }
#tbP2 { right: calc(env(safe-area-inset-right) + var(--g) + var(--fs) + var(--gp) * 2 + var(--bs)); bottom: calc(env(safe-area-inset-bottom) + var(--g) + var(--fs) * .05); }
#tbChar { right: calc(env(safe-area-inset-right) + var(--g) + var(--fs) * .19); bottom: calc(env(safe-area-inset-bottom) + var(--g) + var(--fs) + var(--gp) * 2 + var(--bs)); background: rgba(255,170,0,.4); }
.tb.pw { background: rgba(160,80,255,.45); }

/* Utility-Leiste oben links */
#tUtil { position: absolute; left: calc(env(safe-area-inset-left) + 8px); top: calc(env(safe-area-inset-top) + 22px); display: flex; gap: 8px; pointer-events: none; }
.tu { pointer-events: auto; min-width: 54px; height: 54px; padding: 0 6px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(20,10,50,.6); border: 2px solid rgba(255,255,255,.5); font-size: 22px; line-height: 1; text-shadow: 0 2px 3px rgba(0,0,0,.7); }
.tu small { font-size: 8px; font-weight: bold; margin-top: 3px; letter-spacing: .5px; }
.tu.on { background: rgba(255,230,109,.5); } .tu.lit { border-color: var(--yellow); background: rgba(90,40,120,.85); }
#tbReady { background: rgba(0,200,83,.6); border-color: #b9f6ca; animation: tpulse .8s ease-in-out infinite alternate; }
@keyframes tpulse { from { transform: scale(1); } to { transform: scale(1.1); } }

/* Emote-Menue */
#tEmote { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px;
  background: rgba(20,10,50,.85); border: 3px solid var(--pink); border-radius: 22px; pointer-events: auto; }
.te { min-width: 96px; padding: 18px 10px; text-align: center; border-radius: 16px; background: rgba(255,255,255,.14); font-weight: 900; font-size: 20px; }
.te.on { background: var(--yellow); color: #2a0a3a; }

/* Optionen */
#tSet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 88vw); max-height: 90vh; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
  background: rgba(20,10,50,.92); border: 3px solid var(--cyan); border-radius: 20px; pointer-events: auto; touch-action: pan-y; }
#tSet h3 { margin: 0; color: var(--yellow); font-family: 'Arial Black', sans-serif; }
#tSet label { display: flex; flex-direction: column; gap: 6px; font-weight: bold; font-size: 15px; }
#tSet label.row { flex-direction: row; align-items: center; gap: 10px; }
#tSet input[type=range] { width: 100%; height: 34px; touch-action: pan-x; }
#tSet input[type=checkbox] { width: 26px; height: 26px; }
#tSet .btns { display: flex; gap: 10px; }
#tSet button { flex: 1; padding: 14px; border: 0; border-radius: 12px; font-size: 17px; font-weight: 900; background: linear-gradient(180deg, #ffe66d, #ffb703); color: #2a0a3a; }
#tSet small { opacity: .8; font-size: 12px; }

/* Hochformat-Hinweis */
#tRotate { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
  background: rgba(20,10,50,.96); font-size: 22px; font-weight: bold; }
#tRotate .ic { font-size: 64px; }
#tRotate button { padding: 12px 20px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 900; background: rgba(255,255,255,.2); color: #fff; }
#tMenuHint { font-size: 12px; opacity: .85; text-align: center; }

/* HUD-Anpassungen auf Touch */
body.touch #tips { font-size: 10px; opacity: .45; bottom: calc(env(safe-area-inset-bottom) + 2px); }
body.touch #topbar { top: calc(env(safe-area-inset-top) + 4px); }
body.touch #timer { font-size: 28px; }
body.touch #killfeed { top: calc(env(safe-area-inset-top) + 6px); right: calc(env(safe-area-inset-right) + 8px); max-width: 34vw; gap: 2px; }
body.touch #killfeed div { font-size: 11px; padding: 2px 8px; border-radius: 8px; }
body.touch #stats { left: calc(env(safe-area-inset-left) + 8px); top: calc(env(safe-area-inset-top) + 4px); }
body.touch #bl { left: calc(env(safe-area-inset-left) + 14px); bottom: calc(env(safe-area-inset-bottom) + 12px); width: min(230px, 30vw); }
body.touch #myname { font-size: 15px; }
body.touch #hpbar { height: 22px; }
body.touch #dashbar { display: none; }
body.touch #br { right: auto; left: calc(env(safe-area-inset-left) + 14px); bottom: calc(env(safe-area-inset-bottom) + 76px); text-align: left; display: flex; align-items: center; gap: 8px; }
body.touch #wemoji { font-size: 34px; } body.touch #wammo { font-size: 24px; } body.touch #wname { font-size: 12px; }
body.touch #warmup { top: 66px; padding: 8px 16px; max-width: 70vw; }
body.touch #wuTitle { font-size: 16px; }
body.touch #eventBanner { top: 62px; font-size: 15px; }
body.touch .sb { min-width: 0; width: min(420px, 80vw); }