:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #6f8fa8;
  touch-action: none;
}

body {
  position: fixed;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
}

#game, canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hidden { display: none !important; }

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: radial-gradient(circle at center, rgba(25, 30, 40, .6), rgba(4, 6, 9, .94));
  z-index: 20;
}

.panel {
  width: min(680px, 100%);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto 0;
  padding: 26px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(14, 18, 24, .92);
  box-shadow: 0 20px 80px rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  opacity: .65;
}

h1 {
  margin: 8px 0 6px;
  font-size: clamp(28px, 7vw, 48px);
}

p {
  margin: 0 0 20px;
  opacity: .72;
}

.name-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  opacity: .75;
}

.name-input {
  width: 100%;
  height: 48px;
  margin-bottom: 16px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  outline: none;
  color: #fff;
  background: #10151b;
  font: inherit;
}

.name-input:focus {
  border-color: rgba(120,180,255,.7);
}

.weapon-grid {
  display: grid;
  gap: 12px;
  max-height: 42vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 2px;
}

.weapon-card {
  min-height: 74px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  color: #fff;
  background: #171c23;
}

.weapon-card:active { transform: scale(.985); }
.loadout-slot-picker { display: flex; gap: 8px; margin: 10px 0 7px; }
.loadout-slot { flex: 1; min-height: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: #fff; background: #171c23; font: inherit; font-weight: 800; }
.loadout-slot.active { border-color: #83b8ff; background: #254b76; }
.loadout-selection-status { margin: 0 0 10px; font-size: 13px; opacity: .8; }
.weapon-card.selected-primary { border: 2px solid #68a8ff; }
.weapon-card.selected-secondary { box-shadow: inset 0 0 0 2px #f0bd55; }
.weapon-card.editing-slot { background: #263648; }
.start-game-button { width: 100%; min-height: 48px; margin-top: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff; background: #24623c; font: inherit; font-weight: 900; }

.weapon-card strong,
.weapon-card span {
  display: block;
}

.weapon-card strong { font-size: 18px; }
.weapon-card span { margin-top: 4px; opacity: .62; }

#hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

#hud.layout-editing {
  pointer-events: auto !important;
}

#topHud {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13px;
  text-shadow: 0 2px 6px #000;
}

#healthHud {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 150px;
  pointer-events: auto;
  touch-action: none;
}

#healthBar {
  width: 110px;
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
}

#healthBarFill {
  width: 100%;
  height: 100%;
  background: #55d66f;
  transition: width .12s linear, background .12s linear;
}

#scopeOverlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle min(29vmin, 38vw) at center, transparent 0 98%, #000 100%);
}
#scopeOverlay::after {
  content: "";
  position: absolute;
  width: min(58vmin, 76vw);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(0,0,0,.95);
  border-radius: 50%;
  box-shadow: 0 0 0 200vmax rgba(0,0,0,.08);
}

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  line-height: 1;
  opacity: .92;
  pointer-events: none;
  user-select: none;
}
#crosshair.weapon-pickaxe {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.96);
  width: 84px;
  height: 36px;
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255,255,255,.96);
  text-shadow: 0 0 3px rgba(0,0,0,.95);
}
#crosshair.weapon-pickaxe::before,
#crosshair.weapon-pickaxe::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 11px;
  height: 30px;
  border-top: 2px solid rgba(255,255,255,.95);
  border-bottom: 2px solid rgba(255,255,255,.95);
  filter: drop-shadow(0 0 2px rgba(0,0,0,.95));
}
#crosshair.weapon-pickaxe::before {
  left: 0;
  border-left: 2px solid rgba(255,255,255,.95);
}
#crosshair.weapon-pickaxe::after {
  right: 0;
  border-right: 2px solid rgba(255,255,255,.95);
}
#crosshair.weapon-pistol { font-size: 30px; font-weight: 500; }
#crosshair.weapon-rifle { font-size: 28px; font-weight: 300; }
#crosshair.weapon-smg { font-size: 28px; font-weight: 500; }
#crosshair.weapon-shotgun {
  width: 24px; height: 24px; display: grid; place-items: center;
  font-size: 22px; line-height: 1;
}
#crosshair.weapon-marksman { font-size: 28px; font-weight: 300; }
#crosshair.weapon-sniper { font-size: 20px; font-weight: 300; }
body:has(#scopeOverlay:not(.hidden)) #crosshair { opacity: .92 !important; }
#crosshair.weapon-switch-blocked { visibility: hidden !important; opacity: 0 !important; }

#ammoHud {
  pointer-events: auto;
  position: absolute;
  right: 14px;
  bottom: calc(164px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 800;
  text-shadow: 0 2px 6px #000;
}

#reloadButton {
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  padding: 8px 11px;
  color: #fff;
  background: rgba(15,18,22,.82);
  font-weight: 800;
}

#fullscreenButton {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  top: calc(48px + env(safe-area-inset-top));
  z-index: 10030;
  display: block;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 42px;
  color: #fff;
  background: rgba(15,18,22,.9);
}

#message {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  text-shadow: 0 2px 8px #000;
  white-space: nowrap;
}

#touchUi {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

#movePad {
  position: absolute;
  left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 170px;
  height: 170px;
  border: 2px solid rgba(255,255,255,.20);
  border-radius: 50%;
  background: rgba(20,24,30,.52);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.20);
  pointer-events: auto;
  touch-action: none;
}

#movePad::before {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 50%;
  pointer-events: none;
}

#moveKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: rgba(95,105,120,.82);
  box-shadow: 0 4px 14px rgba(0,0,0,.30);
  pointer-events: none;
}

#jumpButton {
  position: absolute;
  right: 146px;
  bottom: calc(58px + env(safe-area-inset-bottom));
  width: 82px;
  height: 82px;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(35,85,140,.78);
  font-weight: 800;
  letter-spacing: .05em;
  pointer-events: auto;
  touch-action: none;
}

#jumpButton:active { background: rgba(60,110,170,.9); }

#crouchButton {
  position: absolute;
  right: 228px;
  bottom: calc(58px + env(safe-area-inset-bottom));
  width: 82px;
  height: 82px;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(70,70,85,.80);
  font-weight: 800;
  letter-spacing: .04em;
  pointer-events: auto;
  touch-action: none;
}

#crouchButton:active { background: rgba(95,95,115,.92); }

#reloadTouchButton {
  position: absolute;
  right: 162px;
  bottom: calc(154px + env(safe-area-inset-bottom));
  width: 82px;
  height: 52px;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 14px;
  color: #fff;
  background: rgba(25,35,45,.80);
  font-weight: 800;
  letter-spacing: .04em;
  pointer-events: auto;
  touch-action: none;
}

#switchWeaponButton {
  position: absolute;
  right: 310px;
  bottom: calc(140px + env(safe-area-inset-bottom));
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 14px;
  background: rgba(38, 52, 70, .72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: pre-line;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#switchWeaponButton:active { background: rgba(65, 95, 130, .95); }
#scopeButton {
  position: absolute; right: 220px; bottom: calc(220px + env(safe-area-inset-bottom));
  width: 68px; height: 68px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px;
  background: rgba(35, 65, 95, .88); color: #fff; font-size: 12px; font-weight: 800;
  line-height: 1.2; white-space: pre-line; pointer-events: auto; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
#scopeButton:active { background: rgba(65, 105, 150, .98); }
#fireButton {
  position: absolute;
  right: 20px;
  bottom: calc(32px + env(safe-area-inset-bottom));
  width: 112px;
  height: 112px;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(140,30,30,.72);
  font-weight: 800;
  letter-spacing: .08em;
  pointer-events: auto;
  touch-action: none;
}

@media (min-width: 900px) {
  #touchUi { opacity: .38; }
  #movePad { left: 28px; bottom: 28px; }
  #jumpButton { right: 160px; bottom: 58px; }
  #switchWeaponButton { right: 310px; bottom: 140px; }
  #scopeButton { right: 220px; bottom: 220px; }
  #fireButton { right: 28px; bottom: 28px; }
}


/* Mobile FPS is designed for landscape play. */
@media (orientation: portrait) and (max-width: 900px) {
  #game,
  #hud,
  #touchUi {
    display: none !important;
  }

  body::before {
    content: "スマホを横向きにしてください";
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    background: #080a0d;
    color: #fff;
  }

  body::after {
    content: "↻";
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%) rotate(90deg);
    font-size: 58px;
    color: #fff;
  }
}

@media (max-width: 900px) {
  .overlay {
    padding: 8px;
    place-items: start center;
  }

  .panel {
    width: min(760px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 14px;
    margin: 0 auto;
    border-radius: 18px;
    overflow-y: auto;
  }

  .weapon-grid {
    max-height: 36vh;
    gap: 6px;
  }

  h1 {
    margin: 4px 0;
    font-size: clamp(20px, 5vw, 28px);
  }

  p {
    margin-bottom: 9px;
    font-size: 11px;
    line-height: 1.25;
  }

  .name-label {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .name-input {
    height: 38px;
    margin-bottom: 9px;
    padding: 0 10px;
    font-size: 14px;
  }

  .weapon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .weapon-card {
    min-height: 64px;
    padding: 8px 7px;
    border-radius: 12px;
  }

  .weapon-card strong {
    font-size: 13px;
    line-height: 1.15;
  }

  .weapon-card span {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.15;
  }

  #movePad {
    left: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 150px;
    height: 150px;
  }

  #moveKnob {
    width: 58px;
    height: 58px;
  }

  #switchWeaponButton {
    right: 310px;
    bottom: calc(140px + env(safe-area-inset-bottom));
  }
  #scopeButton { right: 220px; bottom: calc(220px + env(safe-area-inset-bottom)); }
  #fireButton {
    right: 14px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 100px;
    height: 100px;
  }

  #jumpButton {
    right: 128px;
    bottom: calc(48px + env(safe-area-inset-bottom));
    width: 72px;
    height: 72px;
  }

  #crouchButton {
    right: 208px;
    bottom: calc(48px + env(safe-area-inset-bottom));
    width: 72px;
    height: 72px;
  }

  #reloadTouchButton {
    right: 128px;
    bottom: calc(128px + env(safe-area-inset-bottom));
    width: 72px;
    height: 44px;
  }

  #ammoHud {
    right: 14px;
    bottom: calc(130px + env(safe-area-inset-bottom));
    font-size: 14px;
  }

  #reloadButton {
    display: none;
  }

  #fullscreenButton {
    top: calc(78px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 10030;
  }
}

@media (min-width: 900px) {
  #touchUi { opacity: .38; }
  #movePad { left: 28px; bottom: 28px; width: 170px; height: 170px; }
  #jumpButton { right: 160px; bottom: 58px; }
  #reloadTouchButton { display: none; }
  #crouchButton {
    right: 238px;
    bottom: 58px;
  }
  #switchWeaponButton { right: 310px; bottom: 140px; }
  #scopeButton { right: 220px; bottom: 220px; }
  #fireButton { right: 28px; bottom: 28px; }
}


/* Prevent accidental double-tap zoom on mobile controls. */
button,
input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#zoomResetButton {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 10001;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  background: rgba(15,18,22,.92);
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}


/* Game settings */
#settingsButton {
  position: absolute;
  top: calc(120px + env(safe-area-inset-top));
  right: 12px;
  z-index: 10002;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 8px 12px;
  color: #fff;
  background: rgba(15,18,22,.82);
  font-weight: 800;
}

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0,0,0,.68);
  touch-action: auto;
  overflow: auto;
}

.settings-panel {
  width: min(520px, calc(100vw - 28px));
  max-height: min(90vh, 720px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(14,18,24,.97);
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-header h2 {
  margin: 0;
}

.settings-panel button {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  background: #171c23;
  font-weight: 700;
}

.setting-row {
  display: block;
  margin-top: 20px;
}

.setting-row > span,
.setting-section > strong {
  display: block;
  margin-bottom: 8px;
}

#sensitivitySlider,
#jumpButtonSizeSlider,
#movePadSizeSlider,
#fireButtonSizeSlider,
#switchWeaponButtonSizeSlider,
#scopeButtonSizeSlider {
  width: 100%;
  accent-color: #6ea8ff;
}

.look-toggle-row {
  cursor: pointer;
}
.look-toggle-row > span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
}
.look-toggle-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #6ea8ff;
}

.setting-section {
  margin-top: 22px;
}

.setting-section p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.setting-status {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(100,160,255,.12);
  color: #bcd8ff;
  font-size: 12px;
}

#touchUi.layout-editing > * {
  outline: 2px dashed rgba(255,255,255,.6);
  cursor: move;
}

/* HUD/UI elements outside touchUi can also be moved in layout editing mode. */
.layout-editing-target {
  outline: 2px dashed rgba(255,255,255,.6) !important;
  cursor: move !important;
  pointer-events: auto !important;
  touch-action: none !important;
  z-index: 10007 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#touchUi.layout-editing {
  pointer-events: auto;
}

@media (max-width: 900px) {
  #settingsButton {
    top: calc(128px + env(safe-area-inset-top));
    right: 12px;
  }

  .settings-panel {
    padding: 16px;
  }
}


/* Button layout editor */
#layoutEditDoneButton {
  position: fixed;
  left: 50%;
  bottom: max(18px, calc(18px + env(safe-area-inset-bottom)));
  transform: translateX(-50%);
  z-index: 10006;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 10px 16px;
  color: #fff;
  background: rgba(15,18,22,.94);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  font-weight: 800;
  pointer-events: auto;
}
#touchUi.layout-editing {
  z-index: 10005;
  pointer-events: auto;
}
#touchUi.layout-editing > * {
  touch-action: none !important;
}

#respawnPanel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 230px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  background: rgba(8,10,14,.9);
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  pointer-events: auto;
}
#respawnText {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 800;
}
#respawnButton {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: #fff;
  background: #202832;
  font-weight: 800;
}
#respawnButton:disabled { opacity: .45; cursor: not-allowed; }

#minimap {
  box-sizing: border-box;
  position: absolute;
  top: max(12px, calc(12px + env(safe-area-inset-top)));
  right: 12px;
  width: 180px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 14px;
  background: rgba(8,12,16,.72);
  box-shadow: 0 5px 20px rgba(0,0,0,.35);
}
#minimap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#minimap > span {
  position: absolute;
  left: 7px;
  top: 5px;
  font-size: 9px;
  font-weight: 800;
  opacity: .65;
}
@media (max-width: 900px) {
  #minimap { width: 125px; height: auto; }
  #healthBar { width: 82px; }
  #healthHud { min-width: 125px; gap: 5px; }
  #respawnPanel { min-width: 210px; }
}

#invulnerabilityHud {
  position: fixed;
  left: 50%;
  top: max(58px, calc(58px + env(safe-area-inset-top)));
  transform: translateX(-50%);
  z-index: 10003;
  padding: 7px 14px;
  border: 1px solid rgba(110, 200, 255, .7);
  border-radius: 999px;
  background: rgba(35, 120, 190, .78);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 1px 4px #000;
  box-shadow: 0 0 18px rgba(80, 190, 255, .45);
  pointer-events: none;
}

#mapChangeCountdown {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 10020;
  max-width: min(90vw, 520px);
  padding: 12px 20px;
  border: 1px solid rgba(255, 205, 105, .85);
  border-radius: 12px;
  background: rgba(15, 18, 23, .92);
  color: #fff2c7;
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 6px #000;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  pointer-events: none;
}
#mapChangeCountdown.hidden { display: none !important; }

#connectionStatus {
  position: absolute;
  top: max(10px, calc(10px + env(safe-area-inset-top)));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10004;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(10,14,18,.78);
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 1px 4px #000;
}
#connectionStatus.connected {
  opacity: .65;
}
#connectionStatus.disconnected {
  background: rgba(100,45,45,.88);
  color: #ffd0d0;
}
.settings-group {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.settings-group:first-of-type {
  margin-top: 18px;
}
.settings-group-title {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}
.settings-group .setting-section:first-of-type {
  margin-top: 12px;
}

#hitFlash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  background: rgba(210, 25, 25, .28);
}
#hitFlash.active {
  animation: hitFlash .22s ease-out;
}
@keyframes hitFlash {
  0% { opacity: .9; }
  100% { opacity: 0; }
}

#damageNumbers {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
}
.damage-number {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 5px #000, 0 0 8px rgba(255,255,255,.4);
  animation: damageNumber .65s ease-out forwards;
}
.damage-number.head {
  color: #ffd35a;
  font-size: 24px;
}
.damage-number.critical {
  color: #ffb52e;
}
@keyframes damageNumber {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(.8); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1.05); }
}

#killLog {
  position: fixed;
  top: max(48px, calc(48px + env(safe-area-inset-top)));
  right: 12px;
  z-index: 10002;
  width: min(300px, 38vw);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.kill-entry {
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(7, 10, 14, .78);
  border: 1px solid rgba(255,255,255,.12);
  color: #eee;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 3px #000;
  animation: killEntry .22s ease-out;
}
.kill-entry.mine {
  border-color: rgba(110, 190, 255, .5);
}
.kill-entry.death {
  border-color: rgba(240, 90, 90, .5);
}
.kill-entry .killer {
  color: #75baff;
}
.kill-entry .victim {
  color: #ff8585;
}
@keyframes killEntry {
  from { opacity: 0; transform: translateX(15px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 900px) {
  #killLog {
    top: max(44px, calc(44px + env(safe-area-inset-top)));
    width: min(230px, 42vw);
  }
  .kill-entry {
    font-size: 10px;
    padding: 6px 8px;
  }
}


/* HUD layout editor: allow MAP and HP bar to receive drag events directly. */
#hud.layout-editing #topHud,
#hud.layout-editing #healthHud,
#hud.layout-editing #minimap,
#hud.layout-editing #fullscreenButton,
#hud.layout-editing #reloadButton,
#hud.layout-editing #ammoHud {
  pointer-events: auto !important;
  touch-action: none !important;
}

#hud.layout-editing #minimap canvas {
  pointer-events: none !important;
}

#hud.layout-editing #healthHud,
#hud.layout-editing #minimap {
  cursor: move !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}


/* 配置編集時は残弾表示とリロードボタンを一体としてドラッグする。 */
#ammoHud.layout-editing-target {
  cursor: move !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: auto !important;
  touch-action: none !important;
}


/* コントローラー操作時はタッチ用操作ボタンだけを隠し、HUDは表示する。 */
body.controller-mode #touchUi {
  display: none !important;
}

body.controller-mode #hud {
  pointer-events: none !important;
}

/* UI編集時はコントローラー接続中でもタッチUIを表示して配置を変更できる。 */
body.controller-mode #touchUi.layout-editing {
  display: block !important;
}

/* 設定ボタンはbody直下なのでコントローラー操作中も表示される。 */
body.controller-mode #settingsButton {
  display: block !important;
  pointer-events: auto !important;
}


/* Mode selection screen */
.mode-grid { display: grid; gap: 12px; margin: 18px 0; }
.mode-card {
  display: block; width: 100%; min-height: 112px; padding: 20px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
  color: #fff; background: #171c23; text-align: left; font: inherit;
}
.mode-card:active { transform: scale(.99); }
.mode-card strong, .mode-card span { display: block; }
.mode-card strong { font-size: 22px; margin-bottom: 8px; }
.mode-card span { opacity: .72; line-height: 1.5; }
.mode-back-button {
  width: 100%; min-height: 44px; border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; color: #fff; background: #252c35; font: inherit; font-weight: 700;
}


/* Area capture mode UI */
.area-queue-panel, .area-result-panel { width: min(520px, 100%); }
.area-queue-progress { height: 10px; overflow: hidden; border-radius: 999px; background: #2a3038; margin: 18px 0 10px; }
#areaQueueProgressFill { width: 0%; height: 100%; background: linear-gradient(90deg, #52a8ff, #71dcff); transition: width .2s linear; }
.area-queue-count { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
#areaQueueCount { font-size: 20px; font-weight: 900; }
#areaQueueTime { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
#areaQueueMessage { min-height: 42px; line-height: 1.5; }
.area-queue-panel #cancelAreaQueueButton { margin-top: 8px; }

.area-hud {
  position: fixed;
  z-index: 4;
  top: calc(max(82px, calc(82px + env(safe-area-inset-top))) + var(--layout-y, 0px));
  left: calc(50% + var(--layout-x, 0px));
  transform: translateX(-50%) scale(var(--area-hud-scale, 1));
  transform-origin: top center;
  width: min(420px, 54vw);
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: #fff;
  background: rgba(9,14,20,.82);
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  pointer-events: none;
}
.area-hud-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12px; }
#areaTeamLabel { font-weight: 800; opacity: .85; }
.area-progress-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 43px; gap: 7px; align-items: center; margin: 5px 0; font-size: 10px; font-weight: 900; }
.area-progress-row.blue > span { color: #79bdff; }
.area-progress-row.red > span { color: #ff8989; }
.area-progress-track { height: 12px; border-radius: 999px; overflow: hidden; background: #2a3038; border: 1px solid rgba(255,255,255,.12); }
.area-progress-fill { height: 100%; width: 0%; transition: width .15s linear; }
#areaBlueFill { background: linear-gradient(90deg, #1f73cf, #6dc3ff); }
#areaRedFill { background: linear-gradient(90deg, #bc3737, #ff8d8d); }
.area-progress-row > strong { text-align: right; font-variant-numeric: tabular-nums; }
.area-capture-status { margin-top: 6px; text-align: center; font-size: 11px; font-weight: 800; color: #ffe8a3; }
.area-result-score { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.area-result-score > div { padding: 18px; border-radius: 12px; background: rgba(255,255,255,.06); text-align: center; }
.area-result-score span, .area-result-score strong { display: block; }
.area-result-score span { font-size: 12px; letter-spacing: .12em; opacity: .7; }
.area-result-score strong { margin-top: 6px; font-size: 30px; font-variant-numeric: tabular-nums; }
.area-result-score > div:first-child span { color: #79bdff; }
.area-result-score > div:last-child span { color: #ff8989; }
.area-result-kd { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 16px; margin-bottom: 14px; border-radius: 12px; background: rgba(255,255,255,.04); }
.area-result-kd span { opacity: .72; }
.area-result-kd strong { font-variant-numeric: tabular-nums; }
#areaResultCloseButton { margin-top: 8px; }

@media (max-width: 620px) {
  .area-hud { top: calc(max(76px, calc(76px + env(safe-area-inset-top))) + var(--layout-y, 0px)); width: min(390px, 72vw); padding: 7px 9px; }
  .area-hud-header { font-size: 10px; margin-bottom: 4px; }
  .area-progress-row { grid-template-columns: 34px minmax(0,1fr) 38px; gap: 4px; font-size: 9px; }
  .area-progress-track { height: 10px; }
  .area-capture-status { font-size: 9px; margin-top: 4px; }
  .area-result-score > div { padding: 14px 8px; }
  .area-result-score strong { font-size: 25px; }
}

/* Pixel-art player skin editor */
.skin-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(5, 8, 13, .94);
  color: #f2f5fa;
  overflow: auto;
}
.skin-editor-overlay.hidden { display: none !important; }
.skin-editor-panel {
  width: min(900px, 100%);
  max-height: 96dvh;
  overflow: auto;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: #141a22;
  box-shadow: 0 16px 60px rgba(0,0,0,.45);
}
.skin-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.skin-editor-header h2 {
  margin: 3px 0 0;
  font-size: clamp(18px, 3vh, 26px);
}
.skin-editor-header button,
.skin-tool-buttons button,
.skin-utility-buttons button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  color: #eff4fa;
  background: #28313d;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}
.skin-editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(190px, .9fr);
  align-items: start;
  gap: clamp(12px, 2vw, 22px);
}
.skin-editor-drawing { min-width: 0; }
.skin-canvas-stack {
  position: relative;
  width: min(46vh, 300px, 42vw);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #657486;
  border-radius: 4px;
  background-color: #d3d9df;
  background-image: linear-gradient(45deg, #aeb8c4 25%, transparent 25%),
                    linear-gradient(-45deg, #aeb8c4 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #aeb8c4 75%),
                    linear-gradient(-45deg, transparent 75%, #aeb8c4 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#skinCanvas, #skinGuideCanvas { display: none !important; }
#skin3DCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.skin-3d-stage { background: #202a36; }
#skin3DCanvas:active { cursor: crosshair; }
.skin-canvas-caption {
  margin-top: 6px;
  text-align: center;
  color: #aab7c6;
  font-size: 11px;
}
.skin-editor-status {
  min-height: 32px;
  margin: 8px 0;
  padding: 7px 9px;
  border-radius: 8px;
  color: #d9e8f8;
  background: rgba(98, 161, 220, .12);
  font-size: 12px;
}
.skin-atlas-help {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 8px;
  color: #aebac8;
  font-size: 10px;
  line-height: 1.4;
}
.skin-atlas-help strong,
.skin-atlas-help span:last-child { grid-column: 1 / -1; }
.skin-atlas-help strong { color: #eef4fc; font-size: 11px; }
.skin-editor-tools { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.skin-tool-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.skin-tool-section > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #e9eef5;
  font-size: 12px;
}
.skin-tool-section > strong span { color: #9fbedf; }
.skin-tool-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.skin-tool-buttons button { padding: 6px 3px; }
.skin-tool-buttons button.active {
  border-color: #7cc4ff;
  background: #23547d;
  box-shadow: inset 0 0 0 1px rgba(124,196,255,.2);
}
.skin-color-row { flex-direction: row; align-items: center; justify-content: space-between; }
#skinColor {
  width: 54px;
  height: 34px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: #202833;
}
#skinBrushSize { width: 100%; accent-color: #76bfff; }
.skin-preview-section { align-items: center; }
.skin-preview-section strong { align-self: stretch; }
#skinPreview {
  display: block;
  width: 96px;
  height: 144px;
  image-rendering: pixelated;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 5px;
  background-color: #26313d;
  background-image: linear-gradient(45deg, #303d4c 25%, transparent 25%),
                    linear-gradient(-45deg, #303d4c 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #303d4c 75%),
                    linear-gradient(-45deg, transparent 75%, #303d4c 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.skin-utility-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skin-save-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid #6cb9ff;
  border-radius: 10px;
  color: #fff;
  background: #1c5e91;
  font: inherit;
  font-weight: 850;
}
.skin-save-button:active { transform: scale(.99); }

@media (max-width: 620px) {
  .skin-editor-panel { padding: 9px; }
  .skin-editor-workspace { grid-template-columns: minmax(0, 1fr) minmax(140px, .85fr); gap: 8px; }
  .skin-canvas-stack { width: min(44vh, 260px, 43vw); }
  .skin-tool-section { padding: 6px; gap: 5px; }
  .skin-tool-buttons button { font-size: 10px; }
  .skin-atlas-help { font-size: 9px; }
}
@media (max-height: 480px) {
  .skin-editor-header { margin-bottom: 6px; }
  .skin-editor-header h2 { font-size: 17px; }
  .skin-editor-workspace { gap: 8px; }
  .skin-canvas-stack { width: min(40vh, 240px, 40vw); }
  .skin-editor-tools { gap: 5px; }
  .skin-tool-section { padding: 5px 7px; }
  #skinPreview { width: 64px; height: 96px; }
  .skin-atlas-help { font-size: 8px; gap: 1px 6px; }
  .skin-editor-status { min-height: 24px; margin: 4px 0; padding: 4px 6px; font-size: 10px; }
}


/* Make the skin editor entry point unmistakable on desktop and mobile. */
/* Prominent navigation actions and skin-change action in settings. */
.settings-skin-action.settings-nav-action { margin: 10px 0; }
.settings-skin-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 20px;
  padding: 14px;
  border: 1px solid rgba(110, 185, 255, .45);
  border-radius: 12px;
  background: rgba(35, 91, 139, .18);
}
.settings-skin-action > div { min-width: 0; }
.settings-skin-action strong {
  display: block;
  margin-bottom: 5px;
  color: #f2f8ff;
}
.settings-skin-action p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: .78;
}
.settings-panel button.settings-skin-change-button {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 10px 18px;
  border: 2px solid #9bd2ff;
  border-radius: 10px;
  color: #fff;
  background: #155b91;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.settings-panel button.settings-skin-change-button:hover {
  background: #1c70ad;
}
@media (max-width: 420px) {
  .settings-skin-action { align-items: stretch; flex-direction: column; }
  .settings-panel button.settings-skin-change-button { width: 100%; }
}


/* Settings category tabs */
.settings-panel {
  width: min(700px, calc(100vw - 28px));
  max-height: min(94dvh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  flex: 0 0 auto;
  margin: 14px 0 4px;
  padding: 5px 0 9px;
  background: rgba(14, 18, 24, .98);
}
.settings-tab {
  min-width: 0;
  min-height: 42px;
  padding: 7px 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #ccd5df;
  background: #1b222c;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.settings-tab.active {
  color: #fff;
  border-color: #73baff;
  background: #244f75;
  box-shadow: inset 0 0 0 1px rgba(115,186,255,.15);
}
.settings-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0 2px 4px;
}
.settings-tab-panel[hidden] { display: none !important; }
.settings-tab-panel .settings-group { margin-top: 10px; }
.settings-tab-panel .settings-group:first-child { margin-top: 8px; }
.settings-footer {
  flex: 0 0 auto;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.keybind-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.keybind-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  font-size: 12px;
}
.keybind-row > span { min-width: 0; }
.keybind-row button {
  flex: 0 0 auto;
  max-width: 65%;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #eef6ff;
  background: #263543;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.keybind-row button.waiting-for-key {
  border-color: #ffd06a;
  background: #57431c;
}
@media (max-width: 560px) {
  .settings-panel { padding: 12px; }
  .settings-tabs { gap: 4px; }
  .settings-tab { font-size: 10px; padding: 6px 2px; min-height: 40px; }
  .keybind-grid { grid-template-columns: 1fr; }
  .keybind-row { font-size: 12px; }
}


/* Stable settings geometry and per-device view sensitivity controls. */
.settings-panel {
  height: min(94dvh, 900px);
  max-height: min(94dvh, 900px);
}
#touchSensitivitySlider,
#controllerSensitivitySlider,
#mouseSensitivitySlider {
  width: 100%;
  accent-color: #6ea8ff;
}


/* UI編集時はエリア進行率HUDもドラッグ可能にする。 */
.area-hud.layout-editing-target {
  pointer-events: auto !important;
  touch-action: none !important;
  cursor: move !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  outline: 2px dashed rgba(110, 190, 255, .9);
  outline-offset: 3px;
}


/* インベントリーボタンと装備画面 */
#inventoryButton {
  position: absolute;
  right: 310px;
  bottom: calc(230px + env(safe-area-inset-bottom));
  min-width: 88px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 12px;
  background: rgba(28, 48, 67, .88);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#inventoryButton:active { background: rgba(65, 95, 130, .95); }
.charm-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 18px; max-height: 42vh; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 2px; }
.charm-card {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 74px;
  padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  color: #fff; background: rgba(255,255,255,.045); text-align: left; font: inherit;
}
.charm-card strong { font-size: 15px; }
.charm-card span { font-size: 12px; opacity: .7; line-height: 1.45; }
.charm-card.selected-charm { border-color: #75baff; background: rgba(65,125,190,.2); box-shadow: inset 0 0 0 1px rgba(117,186,255,.25); }

.inventory-panel { width: min(620px, 100%); }
.inventory-section { margin-top: 18px; }
.inventory-section h2 { margin: 0 0 10px; font-size: 16px; }
.inventory-weapon-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inventory-weapon-card, .inventory-mod-grid > div {
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.inventory-weapon-card.active { border-color: #75baff; background: rgba(65, 125, 190, .15); }
.inventory-weapon-card span, .inventory-mod-grid span { font-size: 12px; opacity: .65; }
.inventory-weapon-card button, .inventory-mod-grid button {
  min-height: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px;
  background: #253648; color: #fff; font: inherit; font-size: 12px; font-weight: 700;
}
.inventory-weapon-card button:disabled, .inventory-mod-grid button:disabled { opacity: .45; }
.inventory-mod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { #inventoryButton { right: 310px; bottom: 230px; } }
@media (max-width: 520px) {
  .inventory-weapon-slots, .inventory-mod-grid { grid-template-columns: 1fr; }
  .inventory-panel { padding: 14px; }
}


/* Bow charge progress */
#bowChargeHud { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); width: min(260px, 58vw); padding: 8px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 8px; background: rgba(10,16,24,.78); color: #fff; text-align: center; font-size: 12px; z-index: 12; pointer-events: none; }
#bowChargeHud.hidden { display: none; }
.bow-charge-track { width: 100%; height: 10px; margin-top: 6px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.2); }
#bowChargeFill { width: 0%; height: 100%; background: linear-gradient(90deg, #d9b56d, #ffe8a5); transition: width 30ms linear; }

/* Duel mode */
.duel-mode-card { border-color: rgba(236,190,91,.65); }
.duel-panel { width:min(620px,calc(100vw - 28px)); max-height:min(86vh,760px); overflow-y:auto; }
.duel-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.duel-actions>button { flex:1 1 180px; }
.duel-room-list { display:grid; gap:10px; margin:18px 0; text-align:left; }
.duel-room-card { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(255,255,255,.055); color:#fff; }
.duel-room-card strong,.duel-room-card span { display:block; }
.duel-room-card span { margin-top:4px; color:rgba(255,255,255,.72); font-size:12px; }
.duel-room-card button { flex:0 0 auto; padding:9px 14px; border:0; border-radius:8px; background:#e9bd61; color:#171717; font-weight:800; }
.duel-field { display:grid; gap:8px; margin:18px 0; text-align:left; font-weight:700; }
.duel-field select { width:100%; padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,.25); background:#172332; color:#fff; font:inherit; }
.duel-status { min-height:1.4em; color:#f0cc78; }
.duel-score-hud { position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:20; min-width:210px; padding:10px 18px; border:1px solid rgba(255,255,255,.35); border-radius:12px; background:rgba(8,13,20,.82); color:#fff; text-align:center; pointer-events:none; }
.duel-score-hud>div { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.duel-score-hud strong { font-size:23px; font-variant-numeric:tabular-nums; }
.duel-score-hud small { display:block; margin-top:2px; color:rgba(255,255,255,.75); }
.duel-score-hud.hidden { display:none; }
.duel-result-score { display:flex; justify-content:center; align-items:center; gap:18px; margin:20px 0; font-size:34px; font-variant-numeric:tabular-nums; }
.duel-result-score strong { min-width:52px; padding:8px; border-radius:10px; background:rgba(255,255,255,.08); }
@media(max-width:520px){.duel-panel{padding:16px}.duel-room-card{align-items:flex-start}.duel-score-hud{top:58px;min-width:170px;padding:7px 12px}}


/* Ultimate ability control */
#ultimateButton {
  position: absolute; display: grid; place-items: center; border-radius: 50%;
  /* #touchUi disables pointer events globally; explicitly re-enable this control. */
  pointer-events: auto; z-index: 18;
  border: 3px solid rgba(255,255,255,.72); color: #fff; font-weight: 950;
  font-size: 14px; letter-spacing: .04em; background:
    radial-gradient(circle, rgba(17,28,43,.96) 58%, transparent 60%),
    conic-gradient(#55d9ff var(--ultimate-progress, 0%), rgba(255,255,255,.18) 0);
  box-shadow: 0 3px 14px rgba(0,0,0,.45); z-index: 15;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#ultimateButton:disabled { opacity: .72; filter: saturate(.55); }
#ultimateButton.ultimate-pressed { transform: scale(.92); filter: brightness(1.35); box-shadow: 0 0 24px rgba(70,205,255,.9); }
#ultimateButton:not(:disabled) { border-color: #8be7ff; box-shadow: 0 0 18px rgba(70,205,255,.55); }
.ultimate-card { border-color: rgba(78,190,235,.3); }


#healthBar { position: relative; overflow: hidden; }
#shieldBarFill { position:absolute; inset:0 auto 0 0; width:0%; background:rgba(80,205,255,.82); border-right:1px solid rgba(225,250,255,.95); pointer-events:none; z-index:2; }
#ultimateMapPicker { pointer-events: auto; z-index: 10020; }
.ultimate-map-panel { width:min(760px,calc(100vw - 24px)); }
#ultimateMapCanvas { display:block; width:100%; max-height:58vh; object-fit:contain; margin:12px auto; border:1px solid rgba(255,255,255,.2); border-radius:10px; touch-action:manipulation; }
#ultimateMapCancel { width:100%; min-height:42px; }

/* Shield damage numbers use the same blue as the shield HUD. */
.damage-number.shield-damage { color: #72c8ff; }
.damage-number.health-damage { color: #ffffff; }
/* HPダメージは白、ヘッドショット時は黄色を優先する。 */
.damage-number.health-damage.head,
.damage-number.health-damage.critical,
.damage-number.shield-damage.head,
.damage-number.shield-damage.critical { color: #ffb52e; }