/* touch controls (phones and tablets) */
#touch { display: none; position: absolute; inset: 0; pointer-events: none; }
.touch #touch { display: block; }
.touch #screen-game { touch-action: none; -webkit-touch-callout: none; }
.touch .plate, .touch #score, .touch #toast { pointer-events: none; }

/* smaller life bars on phones, to leave the screen free */
.touch .plate { gap: 6px; width: min(30vw, 260px); }
.touch .plate img { width: 42px; height: 42px; border-width: 2px; }
.touch .pname { font-size: 14px; margin-bottom: 3px; }
.touch .pname b { font-size: 13px; }
.touch .bar { height: 11px; border-width: 1.5px; }
.touch .plate.second { top: 62px; }
.touch #timer, .touch #score { transform: translate(-50%, -50%); }   /* position and font-size come from the layout */
.touch #weapon-panel { right: auto; bottom: auto; transform: translate(-50%, -50%); text-align: center; }   /* font-size comes from the layout */
.touch #ammo { font-size: 1em; line-height: 1.1; }
.touch #reload-note { height: auto; min-height: 1.2em; font-size: .5em; }
.touch #slots { display: none; }
#touch-look { position: absolute; inset: 0; pointer-events: auto; }
.tctl { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; border-radius: 50%; }
#joy-zone { position: absolute; left: 0; top: 0; height: 100%; pointer-events: auto; touch-action: none; }
#joystick { pointer-events: none; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .35); }
#joystick i { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%; background: rgba(224, 24, 45, .75); border: 2px solid #fff; }
.tbtn { display: flex; align-items: center; justify-content: center; padding: 0; border: 2px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .45); color: #fff; }
.tbtn#t-weapon svg { width: 86%; height: auto; }
.tbtn#t-fire svg { transform: rotate(-45deg); }   /* the bullet stands diagonal like a \ */
.tbtn svg { width: 52%; height: 52%; fill: currentColor; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); pointer-events: none; }
.tbtn.down { background: var(--accent); }
#t-fire { background: rgba(224, 24, 45, .55); }
#t-scope { display: none; }
.sniper #t-scope, .hud-editing #t-scope { display: flex; }
.scoped #t-scope svg { display: none; }

/* The cancel cross is two bars, so it is centered exactly (a text glyph is not) */
.scoped #t-scope::before, .scoped #t-scope::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 4px; border-radius: 2px; background: currentColor; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.scoped #t-scope::before { transform: translate(-50%, -50%) rotate(45deg); }
.scoped #t-scope::after { transform: translate(-50%, -50%) rotate(-45deg); }
#weapon-menu { position: absolute; display: none; gap: 8px; pointer-events: auto; }
#weapon-menu.open { display: flex; }
.wslot { width: 76px; height: 64px; padding: 4px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 12px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; font-weight: 800; }
.wslot svg { width: 100%; height: 26px; fill: #fff; display: block; }
.wslot b { color: var(--accent); }
.wslot.active { background: var(--accent); border-color: #fff; }
.wslot.active b { color: #fff; }

/* layout editor (opened from the pause menu) */
#touch .tctl { opacity: var(--touch-opacity, 1); }
#hud-editor { display: none; position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
.hud-editing #hud-editor { display: block; }
.hud-editing #touch { background: rgba(0, 0, 0, .55); }
.hud-editing #weapon-menu { display: none; }
#touch .selected, #killfeed.selected { outline: 3px dashed #fff; outline-offset: 4px; }

/* fixed width: the layout must not change when the bar is moved */
#hud-bar { position: absolute; top: 6px; touch-action: none; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 270px; max-width: calc(100vw - 12px); padding: 6px 12px 10px;border-radius: 12px; background: rgba(10, 0, 3, .9); border: 1px solid var(--accent); font-size: 12px; font-weight: 800; }
#hud-grip { font-style: normal; font-size: 18px; line-height: 1; text-align: center; opacity: .6; cursor: grab; }
#hud-buttons { display: flex; gap: 12px; margin-top: 14px; }   /* keeps a stray touch on a slider away from the buttons */
#hud-buttons button { flex: 1; }
#hud-sliders { display: flex; flex-direction: column; gap: 12px; }
#hud-bar label { display: flex; flex-direction: column; align-items: stretch; gap: 0; }   /* the text sits right on top of its slider */
#hud-bar input { width: 100%; height: 28px; margin: 0; accent-color: var(--accent); }
#hud-bar button { border: 2px solid #fff; border-radius: 10px; background: transparent; color: #fff; font-weight: 800; font-size: 12px; padding: 4px 12px; }
#hud-bar #hud-done { background: var(--accent); border-color: var(--accent); }
#hud-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; width: max-content; max-width: 90vw; text-align: center; font-size: 12px; font-weight: 800; opacity: .85; text-shadow: 0 2px 0 #000; }