/* ========================================
   styles.css — Reorganized
   ======================================== */


/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  --app-author:'ぶんじカンパニー';
  --spot-emoji-size:56px;
  --spot-bubble-tail:10px;
  --spot-outline-w: 2px;
  --spot-outline-gap: 0px;
  --spot-outline-color: rgba(126, 126, 126, 0.45);
  --spot-ui-ox: 0px;
  --spot-ui-oy: 0px;
  --trueboss-ring-inner-px: 46px;
  --trueboss-ring-outer-px: 54px;
  --trueboss-ring-inner-stroke: 4px;
  --trueboss-ring-outer-stroke: 6px;
  --title-locate-dex-final-gap: 10px;
  --title-dialog-gap: 10px;
}


/* ========================================
   Reset / Base
   ======================================== */

#map {
  height:100dvh;
  --spot-scale: 1;
}

html, body, #map, .leaflet-container, .hud, .controls, .addr, .mobile-ui, .modal-overlay, .modal-dialog, .lb-box, .stick, .fetch-in {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

html,body {
  height:100%;
  margin:0;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}


/* ========================================
   Leaflet Overrides
   ======================================== */

.leaflet-marker-icon {
  background:transparent;
  border:none;
  box-shadow:none;
}

body.trueboss-intro-active .leaflet-marker-icon.enemy:not(.trueboss-icon) {
  display:none !important;
}

body.trueboss-intro-active .leaflet-marker-icon.item {
  display:none !important;
}

body.trueboss-intro-active .leaflet-pane.leaflet-spotPane-pane, body.trueboss-intro-active .leaflet-pane.leaflet-bulletPane-pane, body.trueboss-intro-active .leaflet-pane.leaflet-fxPane-pane, body.trueboss-intro-active .leaflet-pane.leaflet-overlayTilePane-pane {
  display:none !important;
}


/* ========================================
   HUD & Controls
   ======================================== */

#addrInput {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: inherit;
  line-height: 1.3;
  min-height: 28px;
}

#addrInput::placeholder {
  font-size:10px;
}

.addr {
  display:flex;
  gap:6px;
  align-items:center;
  margin-top:6px;
}

.addr button .btn-ico {
  display:inline-block;
  transform:scale(1.2);
  transform-origin:center;
  line-height:1;
  vertical-align:middle;
}

.audio-toggle {
  position:static;
  z-index:auto;
}

.controls {
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.controls button,.addr button {
  cursor:pointer;
  border:1px solid #ddd;
  background:#fff;
  padding:4px 8px;
  border-radius:8px;
  box-sizing:border-box;
  line-height:1.3;
  min-height:28px;
}

.hud {
  position:absolute;
  left:10px;
  top:10px;
  z-index:1000;
  background:#fffE;
  padding:8px 10px;
  border-radius:12px;
  font:12px/1.3 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  box-shadow:0 4px 16px #0002;
}

.hud .addr {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-inline-count {
  font-weight:900;
  font-size:22px;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.hud-inline-count .hud-ico {
  display:inline-block;
  font-size:0.9em;
  line-height:1;
  transform:translateY(1px);
}

.hud-inline-label {
  font-weight:800;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.hud-inline-time {
  font-variant-numeric:tabular-nums;
  color:#d32f2f;
  font-weight:900;
  font-size:24px;
}

.hud-inline-time, #enemyCountHudN {
  font-feature-settings:"tnum" 1, "lnum" 1;
}

.hud-spotlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hud-spotlist-btn:active {
  transform: translateY(1px);
}

.hud-spotlist-btn:focus {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}

.hud-spotlist-btn:hover {
  background: rgba(0,0,0,0.5);
}

.ov-toggle {
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
  border:none;
  background:#fff;
  box-shadow:0 2px 8px #0001;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.ov-toggle .btn-ico {
  font-size:16px;
}

.ov-toggle.on {
  background:#eaffea;
  border-color:#2a6;
}

.title-top-actions .audio-toggle {
  width:44px;
  min-width:40px;
  max-width:48px;
  padding:10px 0;
  background:#fff;
  color:#111;
  border:1px solid #ddd;
  box-shadow:0 2px 6px #0001;
}

.title-top-actions .audio-toggle .btn-ico {
  display:inline-block;
  transform:scale(1.2);
  transform-origin:center;
  line-height:1;
}

body.extra-mode .hud-inline-time {
  color:#9c27b0;
}

body.spotlist-focus .hud, body.spotlist-focus .mobile-ui, body.spotlist-focus #pauseBanner {
  display:none !important;
}


/* ========================================
   Modal (共通)
   ======================================== */

.modal-dialog {
  background:#fff;
  border-radius:16px;
  padding:20px 22px;
  width:min(92vw,270px);
  box-shadow:0 10px 30px #0004;
  text-align:center;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:12px;
  min-height:150px;
}

.modal-dialog button {
  cursor:pointer;
  border:none;
  border-radius:10px;
  padding:10px 10px;
  background:#1e88e5;
  color:#fff;
  font-weight:600;
  font-size:calc(1em + 4px);
}

.modal-dialog button:focus,
.modal-dialog input:focus {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(0,0,0,0.4);
}

.modal-dialog h1 {
  font-size:calc(2em - 2px);
  margin:0 0 -2px;
  line-height:1.1;
}

.modal-dialog p {
  font-size:calc(1em + 2px);
  margin:2px 0;
}

.modal-dialog p:first-of-type {
  margin-top:0;
  margin-bottom:0;
  line-height:1.15;
}

.modal-dialog,.modal-dialog * {
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.modal-overlay {
  position:fixed;
  inset:0;
  background:#0007;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}


/* ========================================
   Character (自キャラ)
   ======================================== */

.char-death-bubble {
  position:absolute;
  left: 30px;
  top: 0px;
  display:none;
  pointer-events:none;
  user-select:none;
  font-size:12px;
  line-height:1;
  padding:4px 6px;
  border-radius:10px;
  border:1px solid #111;
  background:#fff;
  color:#111;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  white-space:nowrap;
  z-index:9999;
}

.char-death-bubble::after {
  content:"";
  position:absolute;
  width:0;
  height:0;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-left: none;
  border-right: 6px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-bottom-color: transparent;
  filter: drop-shadow(-1px 0 0 #111);
}

.char-emoji {
  font-size:32px;
  line-height:1;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #0006);
  display:flex;
  align-items:center;
  justify-content:center;
}

.char-img {
  width:32px;
  height:32px;
  display:block;
  object-fit:contain;
  image-rendering:auto;
}

.stuck-label,.char-label {
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  background:#fffE;
  border:1px solid #ddd;
  border-radius:10px;
  padding:2px 6px 3px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  display:none;
  text-align:center;
}

.char-label {
  color:#1976d2;
  flex-direction:column;
  align-items:center;
  gap:1px;
  min-width:22px;
  transform: translateX(-50%) scale(0.5);
  transform-origin: center;
}

.char-label .lbl-ico {
  display:block;
  font-size:10px;
  line-height:1;
  opacity:.95;
  margin-bottom:1px;
}

.char-label .lbl-num {
  display:block;
  font-size:12px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.char-pref {
  position:absolute;
  top: 34px;
  left:50%;
  transform: translateX(-50%) scale(0.5);
  background:#fffE;
  border:1px solid #ddd;
  border-radius:10px;
  padding:2px 6px 3px;
  font-size:20px;
  font-weight:800;
  line-height:1;
  display:none;
  white-space:nowrap;
  pointer-events:none;
  transform-origin: center;
}

.char-ring {
  width:36px;
  height:36px;
  border:2px solid #2196f3ee;
  box-shadow:0 0 0 6px #2196f355;
}

.char-ring, .enemy-ring {
  animation: none !important;
}

.char-ring,.enemy-ring,.item-ring {
  position:absolute;
  border-radius:50%;
  animation:pulse 1.6s ease-out infinite;
  pointer-events:none;
}

.char-root,.enemy-root,.item-root {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%, -50%);
}

.char-root {
  --rot: 0deg;
  transform: translate(-50%, -50%) scale(2);
  transform-origin: center;
  --rotInv: 0deg;
}

.char-root.mono .char-emoji {
  filter: grayscale(1) saturate(0) contrast(0.95) brightness(1.65)
          drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #0003);
  opacity: 0.85;
}

.char-rot {
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(var(--rot));
  transform-origin: center;
}

.char.player-upflip .char-img {
  transform: scaleY(-1);
  transform-origin: center;
}

body.player-dead .char-death-bubble {
  display:block;
}

/* 上空モード突入：その場で小→大に拡大して出現 */
.char.orbit-liftoff .char-root {
  animation: orbitLiftoff 500ms ease-out forwards;
}
@keyframes orbitLiftoff {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(2.3); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2);   opacity: 1; }
}

/* 上空モード帰還：その場で大→小に縮小して消える */
.char.orbit-landing .char-root {
  animation: orbitLanding 500ms ease-in forwards;
}
@keyframes orbitLanding {
  0%   { transform: translate(-50%, -50%) scale(2);   opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(2.3); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
}


/* ========================================
   Enemy (敵)
   ======================================== */

.enemy-emoji {
  font-size:32px;
  line-height:1;
  filter:none;
}

.enemy-ring {
  width:36px;
  height:36px;
  border:2px solid #f44336ee;
  display: none !important;
}

.enemy-root {
  transform: translate(-50%, -50%) scale(2) !important;
  transform-origin: center;
  --rot: 0deg;
  --rotInv: 0deg;
  transition: opacity 700ms ease;
}

.enemy-root .enemy-float-bubble {
  position:absolute;
  left: calc(100% + -3px);
  top: -6px;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  font-size:12px;
  line-height:1;
  padding:4px 6px;
  border-radius:10px;
  border:1px solid #111;
  background:#fff;
  color:#111;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  opacity:0;
  transform: rotate(var(--rotInv, 0deg));
}

.enemy-root .enemy-float-bubble.is-show {
  opacity:1;
  transform: rotate(var(--rotInv, 0deg));
}

.enemy-root .enemy-float-bubble::after {
  content:"";
  position:absolute;
  width:0;
  height:0;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-left: none;
  border-right: 6px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  filter: drop-shadow(-1px 0 0 #111);
}

.enemy-root .enemy-hp {
  position:absolute;
  right:-8px;
  bottom:-8px;
  left:auto;
  top:auto;
  transform:none;
  font:700 11px/1 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(0,0,0,.65);
  color:#fff;
  white-space:nowrap;
  pointer-events:none;
}

.enemy-root .stuck-label {
  top: -9px;
  transform: translateX(-50%) scale(0.5) !important;
  transform-origin: center;
}

.enemy-root.bigboss {
  transform: translate(-50%, -50%) scale(4) !important;
  transform-origin: center;
}

.enemy-root.bigboss .enemy-emoji {
  text-shadow:
    -1px -1px 0 #000,
     1px  1px 0 #000;
}

.enemy-root.boss .enemy-emoji {
  font-size: 34px;
}

.enemy-root.boss .enemy-ring {
  transform: scale(1.35);
  opacity: .95;
}

.enemy-root.enemy-warp-out {
  opacity: 0;
}

.enemy-root.mob .enemy-emoji, .enemy-root.ufo .enemy-emoji {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.enemy-root.trueboss {
  transform: translate(-50%, -50%) translateY(-1px) scale(2) !important;
  transform-origin: center;
}

.enemy-root.trueboss .enemy-ring {
  width: var(--trueboss-ring-inner-px) !important;
  height: var(--trueboss-ring-inner-px) !important;
  border:3px solid rgba(244,67,54,.95);
  box-shadow:0 0 0 10px rgba(244,67,54,.18), 0 0 20px rgba(244,67,54,.55);
  animation: truebossPulse 1.15s ease-out infinite !important;
  display: block !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
  border-width: var(--trueboss-ring-inner-stroke) !important;
}

.enemy-root.trueboss .enemy-ring::before {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:2px solid rgba(244,67,54,.55);
  box-shadow:0 0 18px rgba(244,67,54,.35);
  animation: truebossPulseOuter 1.15s ease-out infinite !important;
  width: var(--trueboss-ring-outer-px) !important;
  height: var(--trueboss-ring-outer-px) !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
  border-width: var(--trueboss-ring-outer-stroke) !important;
}

body.spotlist-focus .bullet-canvas, body.spotlist-focus .bullet, body.spotlist-focus .enemy-root, body.spotlist-focus .item-root {
  display:none !important;
}


/* ========================================
   Bullet (弾)
   ======================================== */

.bullet {
  --rot: 0deg;
  --sx: 1.0;
  position: relative;
  overflow: visible;
  width: 72px;
  height: 12px;
  border-radius: 8px;
  transform: rotate(var(--rot)) scaleX(var(--sx));
  transform-origin: center;
  background: linear-gradient(
    90deg,
    rgba(255, 60, 60, 0.00) 0%,
    rgba(255, 70, 70, 0.70) 18%,
    rgba(255, 70, 70, 0.55) 55%,
    rgba(255, 255, 255, 1.00) 78%,
    rgba(255, 255, 255, 0.55) 100%
  );
  box-shadow:
    0 0 6px rgba(255,255,255,0.85),
    0 0 10px rgba(255, 80, 80, 0.55);
  pointer-events: none;
}

.bullet-icon {
  background: transparent !important;
  border: none !important;
}

.bullet.bullet-text {
  width: 72px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(calc(var(--rot) + 180deg)) scale(var(--sx));
}

.bullet.bullet-text .bullet-txt {
  font: 900 18px/1 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow:
    0 0 2px rgba(255,255,255,0.95),
    0 0 10px rgba(255,70,70,0.7);
  -webkit-text-stroke: 1px rgba(255,70,70,0.8);
}

.bullet.bullet-text::before, .bullet.bullet-text::after {
  content: none;
}

.bullet::after {
  content:"";
  position:absolute;
  left:-64px;
  top:50%;
  transform: translateY(-50%);
  width:92px;
  height:24px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 50, 50, 0.00) 0%,
    rgba(255, 80, 80, 0.42) 55%,
    rgba(255, 50, 50, 0.00) 100%
  );
  filter: none;
  opacity: 0.55;
}

.bullet::before {
  content:"";
  position:absolute;
  right:-3px;
  top:50%;
  transform: translateY(-50%) translateZ(0);
  width:16px;
  height:10px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 70% 50%, rgba(255,255,255,1) 0 2px, rgba(255,255,255,0) 3px),
    rgba(255,255,255,1);
  outline: 2px solid rgba(255,255,255,0.85);
  box-shadow: none;
  filter: none;
  opacity: 1;
  pointer-events:none;
}

body.pause-active .bullet-canvas {
  display:none !important;
}

body.trueboss-intro-active .bullet-canvas {
  display:none !important;
}


/* ========================================
   Item (アイテム)
   ======================================== */

.item-bolt .item-emoji {
  display: inline-block;
  transform: rotate(20deg);
  transform-origin: center;
}

.item-emoji {
  font-size: 56px !important;
  line-height: 1;
  filter: none !important;
  position: relative;
  z-index: 2;
}

.item-ring {
  width: var(--item-ring-size);
  height: var(--item-ring-size);
  border: 4px solid #4caf50ee !important;
  --item-ring-size: 74px;
  --item-ring-ox: -4px;
  --item-ring-oy: -4px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(var(--item-ring-size) * -0.5 + var(--item-ring-ox));
  margin-top:  calc(var(--item-ring-size) * -0.5 + var(--item-ring-oy));
  z-index: 0;
  pointer-events: none;
  background: transparent !important;
}

.item-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  z-index: -1;
}

.item-root {
  transform: translate(-50%, -50%) !important;
  transform-origin: center;
  position: relative;
}

.item-root.item-gun .item-emoji, .item-root.item-antenna .item-emoji, .item-root.item-rocket .item-emoji, .item-root.item-bolt .item-emoji, .item-root.item-yinyang .item-emoji {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.item-root.item-warp .item-ring {
  animation-duration: 1.0s;
}


/* ========================================
   Fellow (仲間)
   ======================================== */

.fellow-emoji,.fellow-pickup-emoji {
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  line-height:1;
  border-radius:999px;
  background:rgba(255,255,255,0.85);
}

.fellow-img,.fellow-pickup-img {
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:999px;
}

.fellow-inner {
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fellow-pickup-inner {
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fellow-pickup-ring {
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:0 0 0 3px rgba(80,255,120,0.95), 0 0 10px rgba(80,255,120,0.55);
  pointer-events:none;
}

.fellow-pickup-root {
  width:64px;
  height:64px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fellow-ring {
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:0 0 0 3px rgba(80,180,255,0.95), 0 0 10px rgba(80,180,255,0.55);
  pointer-events:none;
}

.fellow-root {
  width:64px;
  height:64px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fellow-root.is-left .fellow-img {
  transform: scaleX(-1);
}

.fellow-special-badge {
  position:absolute;
  top:-6px;
  right:-6px;
  font-size:14px;
  line-height:1;
  pointer-events:none;
  z-index:10;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}


/* ========================================
   Spot (観光地)
   ======================================== */

.leaflet-tooltip.spot-tooltip {
  border-radius:12px;
  border:none;
  background:#fff;
  box-shadow:0 6px 20px #0003;
  padding:8px 10px;
  color:#111;
  font:12px/1.35 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  max-width:320px;
  white-space:normal;
}

.leaflet-tooltip.spot-tooltip .spot-tip-fact {
  font-size: 11px;
  line-height: 1.25;
  color: #333;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
}

.leaflet-tooltip.spot-tooltip .spot-tip-facts {
  margin: 6px 0 6px;
  display: grid;
  gap: 3px;
}

.leaflet-tooltip.spot-tooltip .spot-tip-meta {
  font-size:11px;
  color:#555;
  box-sizing:border-box;
  min-width:240px;
  max-width:240px;
  width:max-content;
  word-break:normal;
  overflow-wrap:anywhere;
}

.leaflet-tooltip.spot-tooltip .spot-tip-title {
  font-weight:700;
  margin-bottom:2px;
}

.spot {
  pointer-events:auto;
  position: relative;
}

.spot .spot-bubble {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  transform: translate(-50%, calc(-100% - (var(--spot-emoji-size) / 2))) !important;
  white-space:normal;
  text-align:center;
  font:12px/1.15 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding:4px 8px;
  border-radius:12px;
  background:#fff;
  border:none;
  box-shadow:0 2px 10px #0002;
  color:#111;
  text-shadow:0 1px 0 #fff;
  display:inline-block;
  box-sizing:border-box;
  min-width:50px;
  width:max-content;
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict;
  max-width:70px;
  pointer-events:none;
  bottom:auto !important;
  transform-origin: 50% 100% !important;
}

.spot .spot-bubble.is-hidden {
  display:none !important;
}

.spot .spot-bubble::after {
  content:'';
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#fff;
  filter:drop-shadow(0 1px 0 #0001);
}

.spot .spot-emoji {
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  line-height:1;
  width:56px;
  height:56px;
  border-radius:999px;
  background:#fff;
  border:none;
  box-shadow:0 2px 10px #0002;
  transform: translate(-50%,-50%) scale(var(--spot-scale, 1)) !important;
  position:absolute;
  overflow:visible;
  isolation:isolate;
  transform-origin: 50% 50% !important;
  left:0 !important;
  top:0 !important;
}

.spot .spot-emoji .spot-ring {
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--spot-emoji-size, 56px) + 10px);
  height:calc(var(--spot-emoji-size, 56px) + 10px);
  border-radius:999px;
  border:3px solid rgba(255, 235, 59, 0.95);
  box-shadow:
    
    inset 0 0 0 1px rgba(255, 255, 255, 1),
    inset 0 0 14px rgba(200, 200, 200, 0.55),

    
    0 0 0 6px rgba(255, 255, 255, 0.35),
    0 0 18px 6px rgba(220, 220, 220, 0.45),

    
    0 0 22px 8px rgba(0, 0, 0, 0.15);
  transform:translate(-50%,-50%) scale(.85);
  transform-origin:center;
  animation:spotPulse 1.6s ease-out infinite;
  pointer-events:none;
  z-index:-1;
  border-color: rgba(255, 255, 255, 0.95);
}

.spot .spot-emoji::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + (var(--spot-outline-gap) * 2));
  height: calc(100% + (var(--spot-outline-gap) * 2));
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: var(--spot-outline-w) solid var(--spot-outline-color);
  pointer-events: none;
}

.spot .spot-ui {
  transform: translate(var(--spot-ui-ox), var(--spot-ui-oy));
  position:absolute;
  left:0;
  top:0;
}

.spot-bubble {
  box-shadow: none !important;
}

.spot-cluster {
  pointer-events:auto;
}

.spot-cluster .spot-cluster-core {
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.92);
  border:none;
  box-shadow:0 2px 10px #0002;
  color:#111;
  transform:translate(-50%,-100%) scale(var(--spot-scale, 1));
  transform-origin: 50% 100%;
  white-space:nowrap;
}

.spot-cluster .spot-cluster-count {
  font:700 14px/1 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.spot-cluster .spot-cluster-emoji {
  font-size:18px;
  line-height:1;
}

.spot-detail {
  width:130px;
  box-sizing:border-box;
  pointer-events:auto;
}

.spot-detail .spot-detail-desc {
  font:11px/1.35 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#111;
  white-space:normal;
  overflow-wrap:anywhere;
}

.spot-detail .spot-detail-inner {
  background:#fff;
  border:none;
  border-radius:12px;
  padding:8px 8px;
  box-shadow:none;
}

.spot-detail .spot-detail-inner, .spot-detail.is-collected .spot-detail-inner {
  background: rgba(255, 255, 255, 0.95) !important;
}

.spot-detail .spot-detail-title {
  font:12px/1.2 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;
  color:#111;
  margin:0 0 6px 0;
}

.spot-detail.is-collected .spot-detail-inner {
  background: rgba(170, 170, 170, 0.85) !important;
  border-color: rgba(0,0,0,0.18) !important;
}

.spot-detail.is-hidden {
  display:none;
}

.spot-emoji {
  box-shadow: none !important;
}

.spot-ring {
  display: none !important;
  animation: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

.spot.is-collected {
  --spot-outline-color: #777;
}

.spot.is-collected .spot-bubble {
  background: rgba(220, 220, 220, 0.72) !important;
  color: #000 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important;
  border-color: rgba(0,0,0,0.18) !important;
  border: none !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.spot.is-collected .spot-bubble::after {
  border-top-color: rgba(220, 220, 220, 0.72) !important;
  filter: none !important;
}

.spot.is-collected .spot-emoji {
  background: rgba(170, 170, 170, 0.85) !important;
  border-color: rgba(0,0,0,0.18) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
}

.spot.is-collected .spot-emoji .spot-ring {
  animation: none !important;
  opacity: 0.28 !important;
  transform: translate(-50%,-50%) scale(1.0) !important;
  border-color: rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
}

.spot.is-collected .spot-emoji::after {
  border-color: #777 !important;
  border-width: 2px !important;
}

.spot.tail-no-overlap .spot-bubble {
  bottom: calc((var(--spot-emoji-size) / 2) + var(--spot-bubble-tail)) !important;
  transform: translate(-50%, calc(-100% - (var(--spot-emoji-size) / 2) - var(--spot-bubble-tail))) !important;
}

body.trueboss-intro-active .spot, body.trueboss-intro-active .spot-cluster {
  display:none !important;
}

body.trueboss-intro-active .spot-bubble {
  display:none !important;
}

body.trueboss-intro-active .spot-detail, body.trueboss-intro-active .spot-tooltip, body.trueboss-intro-active .leaflet-tooltip, body.trueboss-intro-active .leaflet-tooltip-pane, body.trueboss-intro-active .leaflet-popup-pane {
  display: none !important;
}


/* ========================================
   Spot List Modal
   ======================================== */

#spotListBackBtn.spotlist-back-btn {
  position:fixed;
  top:10px;
  right:10px;
  z-index:200000 !important;
  width:72px !important;
  height:72px !important;
  border-radius:50% !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:34px !important;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
  isolation:isolate;
  font-weight:800;
  color:#111;
  opacity:0;
  pointer-events:none;
}

#spotListBackBtn.spotlist-back-btn::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  border-radius:50%;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 3px 10px #0003;
  z-index:-1;
}

#spotListBackBtn.spotlist-back-btn:active {
  transform:scale(0.98);
}

#spotListModal {
  z-index: 2600;
}

#spotListModal #spotListTitle {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 -2px;
}

#spotListModal .spotlist-body {
  max-height: min(60vh, 460px);
  overflow: auto;
  padding-right: 6px;
  width: 100%;
  height: min(60vh, 460px);
}

#spotListModal .spotlist-dialog {
  width: min(92vw, 330px);
  text-align: center;
  justify-items: stretch;
}

#spotListModal .spotlist-dialog h2, #spotListModal .spotlist-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#spotListModal .spotlist-filter {
  width: min(46vw, 120px);
  max-width: 120px;
  height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.18);
  color: inherit;
  font-size: 14px;
  outline: none;
}

#spotListModal .spotlist-filter::placeholder {
  opacity: 0.7;
}

#spotListModal .spotlist-filter:focus {
  border-color: rgba(255,255,255,0.45);
}

#spotListModal .spotlist-footer .btn, #spotListModal .spotlist-actions .btn {
  margin-left: auto;
  margin-right: auto;
}

#spotListModal .spotlist-footer, #spotListModal .spotlist-actions {
  display: flex;
  justify-content: center;
}

#spotListModal .spotlist-name {
  text-align: left;
}

#spotListModal .spotlist-row.is-selected {
  outline: 2px solid #1e88e5;
  outline-offset: -2px;
  background: #e3f2fd;
}

#spotListModal .spotlist-scroll, #spotListModal .spotlist-list, #spotListModal .spotlist-items {
  text-align: left;
}

#spotListModal .spotlist-summary {
  margin: 0;
  font-size: 16px;
  opacity: 0.95;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: #1e5bd6;
  font-weight: 700;
}

#spotListModal .spotlist-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

#spotListModal.spotlist-variant-dex {
  background:#0007;
}

#spotListModal.spotlist-variant-dex .modal-dialog {
  background: rgba(230, 245, 255, 0.96);
  border: 1px solid rgba(30, 120, 200, 0.35);
}

#spotListModal.spotlist-variant-dex .spotlist-filter {
  border-color: rgba(13, 71, 161, 0.35);
}

#spotListModal.spotlist-variant-dex .spotlist-pref {
  color: rgba(13, 71, 161, 0.85);
}

#spotListModal.spotlist-variant-dex .spotlist-row {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

#spotListModal.spotlist-variant-dex .spotlist-summary {
  color: #0d47a1;
  font-weight: 800;
}

.spotlist-loading {
  padding: 10px 0;
  opacity: 0.85;
  font-size: 14px;
}

.spotlist-mark {
  width: 1.6em;
  text-align: center;
  flex: 0 0 1.6em;
  opacity: 0.95;
}

.spotlist-name {
  flex: 1 1 auto;
  word-break: break-word;
  font-size: 14px;
}

.spotlist-name small {
  display: block;
  opacity: 0.75;
  font-size: 12px;
  margin-top: 2px;
}

.spotlist-pref {
  opacity: 0.75;
  font-size: 12px;
  margin-left: 6px;
  white-space: nowrap;
}

.spotlist-row {
  display: flex;
  align-items: flex-start;
  gap: 0px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.spotlist-row.is-got .spotlist-name {
  opacity: 1;
}

.spotlist-row.is-miss .spotlist-name {
  opacity: 0.75;
}

.spotlist-row:last-child {
  border-bottom: none;
}

body.spotlist-focus #spotListBackBtn.spotlist-back-btn {
  opacity:1;
  pointer-events:auto;
}

body.spotlist-open #map {
  pointer-events:none;
}


/* ========================================
   Title Screen
   ======================================== */

#titleAchievementsBtn {
  background: #F57F17;
  color: #fff;
  border: 1px solid #E65100;
  font-weight: 800;
}

#titleAchievementsBtn:active {
  filter: brightness(0.98);
}

#titleAchievementsBtn:hover {
  filter: brightness(1.06);
}

#titleAddrInput {
  margin-top: -6px;
}

#titleModal .title-dex {
  margin-top: 10px;
}

#titleNewGameBtn {
  background: #E85AA6;
  border-color: #E85AA6;
  color: #fff;
}

#titleNewGameBtn:active {
  background: #C7468B;
  border-color: #C7468B;
}

#titleNewGameBtn:hover {
  background: #D84E98;
  border-color: #D84E98;
}

#titleRankingBtn {
  background: #7b5ea7;
  color: #fff;
  border: 1px solid #5e4080;
  font-weight: 800;
}

#titleRankingBtn:active {
  filter: brightness(0.98);
}

#titleRankingBtn:hover {
  filter: brightness(1.06);
}

#titleSaveInfo {
  margin-top: -6px;
}

#titleSpotDexBtn {
  margin-top: 0 !important;
  background: #2e7d32;
  color: #fff;
  border: 1px solid #1b5e20;
  font-weight: 800;
}

#titleSpotDexBtn:active {
  filter: brightness(0.98);
}

#titleSpotDexBtn:hover {
  filter: brightness(1.06);
}

.countdown-banner {
  position:fixed;
  left:50%;
  top:36%;
  transform:translate(-50%,-50%);
  z-index:2600;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:72px;
  line-height:1;
  color: #fff;
  text-shadow:
    0 3px 18px rgba(0,0,0,.85),
    0 0 3px rgba(0,0,0,.95),
    1px 0 0 rgba(0,0,0,.95),
    -1px 0 0 rgba(0,0,0,.95),
    0 1px 0 rgba(0,0,0,.95),
    0 -1px 0 rgba(0,0,0,.95);
  background: rgba(0,0,0,.45);
  padding: 10px 16px;
  border-radius: 24px;
  backdrop-filter: blur(3px);
  pointer-events:none;
}

.title-addr-row {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}
.title-addr {
  flex: 1;
  min-width: 0;
  border:1px solid #ddd;
  border-radius:8px;
  padding:4px 12px;
  box-sizing:border-box;
  font:inherit;
  font-size:16px;
  line-height:1.3;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.title-addr-note {
  width: 100%;
  text-align: left;
  font-size: 12px;
  line-height: 1.25;
  opacity: 0.9;
  margin: 4px 2px 2px;
  margin-top: -8px;
}

.title-addr::placeholder {
  font-size:14px;
  opacity:0.75;
}

.title-btn-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: calc(var(--title-locate-dex-final-gap) - var(--title-dialog-gap));
}

.title-btn-row .btn {
  flex: 1;
  margin-top: 0 !important;
  font-size: 0.78em !important;
  padding: 7px 4px !important;
  white-space: nowrap;
}

.title-credits {
  width:100%;
  text-align:left;
  font-size:12px;
  line-height:1.3;
  margin-top:2px;
  opacity:0.95;
}

.title-dialog {
  width:min(92vw,344px);
  padding:28px 18px 18px;
  gap:10px;
}

.title-dialog .btn {
  width:100%;
}

.title-dialog .btn.is-disabled,.title-dialog .btn:disabled {
  background:#bdbdbd !important;
  color:#fff !important;
  cursor:not-allowed;
  opacity:0.95;
}

.title-dialog .btn.primary {
  background:#1e88e5;
  color:#fff;
}

.title-dialog .btn:not(.primary) {
  background:#1976d2;
  color:#fff;
}

.title-dialog .title-main {
  font-size: clamp(27px, 4.6vw, 27px);
  line-height: 1.05;
}

.title-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:16px;
}

.title-howto {
  display:inline-block;
  color:#1565c0;
  text-decoration:underline;
  font-weight:800;
  font-size:calc(1em + 2px);
  margin-top:2px;
}

.title-main {
  font-size:calc(2em + 8px);
  font-weight:900;
  line-height:1.05;
}

.title-main.title-main-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding-left: 6px;
  padding-right: 6px;
  max-width: 100%;
  box-sizing: border-box;
}

.title-main.title-main-row .title-main-text {
  display:inline-block;
  white-space:nowrap;
}

.title-main.title-main-row .title-mascot {
  width: clamp(40px, 8.5vw, 52px);
  height: clamp(40px, 8.5vw, 52px);
  object-fit:contain;
  flex:0 0 auto;
}

.title-main.title-main-row .title-mascot-right {
  transform:scaleX(-1);
}

.title-modal {
  z-index:2500;
}

.title-name {
  text-align:center;
}

.title-save-line {
  font-size:12px;
  line-height:1.35;
  margin:1px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.title-saveinfo {
  width:93%;
  text-align:left;
  border:1px solid #e0e0e0;
  border-radius:12px;
  padding:8px 10px;
  background:#fafafa;
}

.title-sub {
  font-size:calc(1em + 4px);
  font-weight:800;
  line-height:1.15;
  margin-top:2px;
}

.title-top-actions {
  display:flex;
  gap:8px;
  align-items:stretch;
  justify-content:center;
  width:100%;
}

.title-top-actions .btn {
  flex:1;
  min-width:0;
}

.title-top-actions .title-howto-btn {
  width:44px;
  min-width:40px;
  max-width:48px;
  padding:10px 0;
  background:#fff;
  color:#111;
  border:1px solid #ddd;
  box-shadow:0 2px 6px #0001;
}

.title-wide {
  width:100%;
}


/* ========================================
   Checkpoint Modal
   ======================================== */

#checkpointModal .cp-btns {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:8px;
}

#checkpointModal .cp-btns button.danger {
  background:#e53935;
}

#checkpointModal .cp-btns button.secondary {
  background:#f0f0f0;
  color:#111;
}

#checkpointModal .cp-note {
  font-size:12px;
  opacity:.75;
  margin-top:8px;
  line-height:1.35;
  text-align:left;
}

#checkpointModal .modal-dialog {
  max-width:min(520px, calc(100vw - 36px));
  white-space:normal;
}


/* ========================================
   True Boss Intro
   ======================================== */

#infoModal.trueboss-intro .modal-body {
  max-height: 45vh;
  overflow: auto;
}

#infoModal.trueboss-intro .modal-dialog {
  transform: translateY(-30vh);
  width: min(92vw, 380px);
  min-height: 120px;
  padding: 18px 20px;
}

/* ========================================
   Tutorial Slideshow (紙芝居)
   ======================================== */

.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tut-overlay.tut-visible { opacity: 1; }
.tut-overlay.tut-fade-out { opacity: 0; }

.tut-container {
  width: min(92vw, 380px);
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.tut-slides { position: relative; min-height: 220px; }

.tut-slide {
  display: none;
  animation: tutFadeIn 0.25s ease;
}
.tut-slide.active { display: block; }
@keyframes tutFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.tut-slide h2 {
  font-size: 1.35em;
  margin: 0 0 12px;
  color: #2a5a8a;
  line-height: 1.2;
}

.tut-body p {
  font-size: 0.95em;
  line-height: 1.4;
  margin: 2px 0;
  color: #333;
}
.tut-body .tut-spacer {
  font-size: 0.5em;
  margin: 0;
}

.tut-em {
  color: #d32f2f;
  font-weight: 800;
}

/* ナビゲーション */
.tut-nav {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.tut-dots {
  display: flex;
  gap: 8px;
}
.tut-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.2s;
}
.tut-dot.active { background: #4a90d9; }

.tut-btns {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.tut-btns button {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 1em;
  font-weight: 600;
  transition: background 0.15s, transform 0.1s;
}
.tut-btns button:active { transform: scale(0.96); }

.tut-next {
  background: #4a90d9;
  color: #fff;
  flex: 1;
  max-width: 160px;
}
.tut-next:hover { background: #3a7bc0; }
.tut-next.tut-start {
  background: #e8534a;
  max-width: 200px;
}
.tut-next.tut-start:hover { background: #d04038; }

.tut-prev {
  background: #e8e8e8;
  color: #555;
}
.tut-prev:hover { background: #ddd; }

.tut-skip {
  background: transparent;
  color: #999;
  font-weight: 400;
  font-size: 0.9em;
  padding: 10px 12px;
}
.tut-skip:hover { color: #666; }

.tut-page {
  text-align: center;
  font-size: 0.8em;
  color: #aaa;
  margin-top: 4px;
}


/* ========================================
   Game Over Modal
   ======================================== */

#gameOverModal .gc-stats {
  font-size: 14px;
  line-height: 1.15;
  opacity: 0.95;
  margin: 8px 0 12px;
}

#gameOverModal .gc-stats .gc-row {
  margin: 2px 0;
}

#gameOverModal .go-kills, #gameOverModal #goTime, #gameOverModal #goContinue {
  margin: 0;
  line-height: 0.9;
}

#gameOverModal .go-row {
  margin: 1px 0;
  line-height: 0.95;
}

#gameOverModal .modal-dialog {
  transform: translateY(clamp(-200px, -8vh, -200px));
}


/* ========================================
   Game Clear Modal
   ======================================== */

#gameClearModal {
  opacity: 0;
  transition: opacity 3000ms ease;
  will-change: opacity;
  z-index: 99995;
}

#gameClearModal .gc-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

#gameClearModal .gc-btn-grid button {
  white-space: nowrap;
  width: 100%;
  font-size: 1em !important;
  padding: 12px 8px !important;
  box-sizing: border-box;
}

#gameClearModal .gc-message {
  margin: 8px 0 0px;
  line-height: 1.15;
}

#gameClearModal .gc-stats {
  font-size: 14px;
  line-height: 1.15;
  opacity: 0.95;
  margin: 8px 0 12px;
}

#gameClearModal .gc-stats .gc-row {
  margin: 2px 0;
}

#gameClearModal .modal-dialog {
  width: min(92vw, 330px);
  transform: translateY(calc(var(--gc-y, 0px) + 18px)) scale(0.98);
  gap: 6px;
  --gc-y: clamp(-200px, -8vh, -200px);
  opacity: 0;
  transition: transform 3000ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 3000ms ease;
  will-change: transform, opacity;
}

#gameClearModal.is-open {
  opacity: 1;
}

#gameClearModal.is-open .modal-dialog {
  transform: translateY(var(--gc-y, 0px)) scale(1);
  opacity: 1;
}


/* ========================================
   Warp FX
   ======================================== */

.warp-fx {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 99999;
}

.warp-fx-inner {
  font-size: 96px;
  line-height: 1;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35));
  transform-origin: center;
}

.warp-pulse {
  background: transparent !important;
}

.warp-pulse .warp-pulse-inner {
  font-size: 72px;
  line-height: 1;
  transform-origin: center;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.35));
  animation: warpPulseIn 900ms ease-out both;
}

.warp-pulse.warp-out .warp-pulse-inner {
  animation-name: warpPulseOut;
}

body.warp-in .warp-fx-inner {
  animation: warpInSpin 650ms ease-in-out both;
}

body.warp-out .warp-fx, body.warp-in .warp-fx {
  display: flex;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.20) 35%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.55) 100%);
  backdrop-filter: blur(2px);
}

body.warp-out .warp-fx-inner {
  animation: warpOutSpin 700ms ease-in-out both;
}


/* ========================================
   Damage Popup FX（SP砲ダメージ吹き出し）
   ======================================== */

.damage-popup {
  pointer-events: none;
  overflow: visible;
}

.damage-popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #ffe040;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0    0  6px rgba(255, 100, 0, 0.7);
  white-space: nowrap;
  animation: damagePopup 1200ms ease-out forwards;
}

@keyframes damagePopup {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(1);
  }
}

/* ========================================
   Explosion FX
   ======================================== */

.explosion-pop {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
  filter: blur(0px);
  animation: explosionPop 650ms ease-out forwards;
  pointer-events: none;
}

.trueboss-explosion {
  pointer-events: none;
}

.trueboss-explosion .tbx {
  width: 260px;
  height: 260px;
  display: block;
  position: relative;
}

.trueboss-explosion .tbx-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  transform-origin: center;
  font-size: 140px;
  line-height: 1;
  opacity: 0;
  filter: blur(0px);
  animation: trueBossBoomCore 1150ms cubic-bezier(.1,.7,.2,1) forwards;
}

.trueboss-explosion .tbx-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.5);
  border: 6px solid rgba(255,255,255,0.95);
  box-shadow: 0 0 26px rgba(255,255,255,0.85);
  opacity: 0;
  animation: trueBossBoomRing 900ms ease-out forwards;
}

.trueboss-explosion .tbx-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7) rotate(0deg);
  transform-origin: center;
  font-size: 96px;
  opacity: 0;
  filter: blur(0px);
  animation: trueBossBoomSparks 980ms ease-out forwards;
}

body.pause-active .explosion-pop {
  animation-play-state: paused !important;
}


/* ========================================
   Screen Flash & Map Shake
   ======================================== */

.leaflet-container.map-shake {
  animation: mapShake 720ms linear;
}

.screen-flash {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}

.screen-flash.on {
  animation: screenFlash 180ms ease-out;
}


/* ========================================
   Pause
   ======================================== */

.pause-banner {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index: 25000;
  display:none;
  pointer-events:none;
  padding:14px 18px;
  border-radius:44px;
  border:none;
  background:rgba(255,255,255,0.78);
  box-shadow:0 10px 40px rgba(0,0,0,0.20);
  font-size:64px;
  font-weight:900;
  letter-spacing:0.10em;
  line-height:1;
  color:#111;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.8),
    0 10px 30px rgba(0,0,0,0.25);
  animation: pauseBlink 1.05s steps(1,end) infinite;
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

body.pause-active .pause-banner {
  display:block;
}


/* ========================================
   Mobile UI (Joystick / Buttons)
   ======================================== */

.fetch-in {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid #ddd;
  background:#fff;
  box-shadow:0 3px 8px #0003;
  font-size:24px;
  z-index:2;
}

.fetch-in .rtb-ico {
  display:inline-block;
  transform:scale(1.3);
  transform-origin:center;
  line-height:1;
  vertical-align:middle;
}

.lb-box {
  position:absolute;
  left:10px;
  bottom:12px;
  z-index:1100;
}

.lb-btn {
  cursor:pointer;
  position:relative;
  width:68px;
  height:68px;
  border:none;
  background:transparent;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  touch-action:manipulation;
}

.lb-btn .lb-ico {
  display:inline-block;
  transform:scale(1.25);
  transform-origin:center;
  line-height:1;
  vertical-align:middle;
}

.lb-btn::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 3px 8px #0003;
  z-index:-1;
}

.mobile-ui {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1200;
}

.shoot-btn {
  cursor:pointer;
  position:relative;
  width:80px;
  height:80px;
  border:none;
  background:transparent;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  touch-action:manipulation;
}

.shoot-btn .btn-ico {
  display:inline-block;
  transform:translateY(-2px);
}

.shoot-btn, .fetch-in {
  touch-action:none;
}

.shoot-btn.on {
  outline:3px solid #0af;
  outline-offset:0px;
}

.shoot-btn::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:80px;
  height:80px;
  border-radius:50%;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 3px 8px #0003;
  z-index:-1;
}

.shoot-btn:active {
  transform:scale(0.98);
}

.shoot-wrap {
  position:absolute;
  left:6px;
  bottom:8px;
  pointer-events:auto;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
}

.shoot-wrap .spc-btn {
  margin-left:10px;
}

.spc-btn {
  cursor:pointer;
  position:relative;
  width:80px;
  height:80px;
  border:none;
  background:transparent;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.spc-btn .spc-inner {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.spc-btn .spc-label {
  font-weight:900;
  font-size:22px;
  line-height:1;
  color:#111;
  text-shadow: 0 2px 10px rgba(0,0,0,0.10);
}

.spc-btn .spc-n {
  font-weight:900;
  font-size:28px;
  line-height:1;
  color:#111;
  text-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.spc-btn.ready::after {
  opacity:0.80;
}

.spc-btn.ready::before {
  outline:3px solid #222;
  outline-offset:0px;
  box-shadow:
    0 3px 8px #0003,
    0 0 30px rgba(106,27,154,0.78),
    inset 0 0 0 3px rgba(106,27,154,0.28);
}

.spc-btn::after {
  content:'';
  position:absolute;
  inset:8px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:0.55;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.18) 0 2.2px, transparent 2.3px 100%),
    radial-gradient(circle at 50% 50%, transparent 0 24px, rgba(0,0,0,0.16) 24px 25px, transparent 25px 100%),
    linear-gradient(rgba(0,0,0,0.14), rgba(0,0,0,0.14)) 50% 50%/2px 100% no-repeat,
    linear-gradient(90deg, rgba(0,0,0,0.14), rgba(0,0,0,0.14)) 50% 50%/100% 2px no-repeat,
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.05) 0, transparent 62%);
}

.spc-btn::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 3px 8px #0003;
}

.spc-btn:active {
  transform:translateY(1px);
}

.spc-btn[disabled] {
  opacity:0.35;
  pointer-events:none;
}

/* ==============================
   🛰 地球上空ボタン（orbit-view）
   ============================== */
.orbit-view-btn {
  appearance: none;
  box-sizing: border-box;
  border: 2px solid rgba(100,200,255,.5);
  border-radius: 50%;
  width: 84px;
  height: 84px;
  min-width: 84px;
  max-width: 84px;
  overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #1a2a4a, #0b1428);
  color: #e8eef7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.2), 0 0 10px rgba(0,120,255,.25);
  transition: opacity .25s, transform .15s;
  z-index: 1200;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 0;
}
.orbit-view-btn .orbit-view-ico {
  font-size: 34px;
  line-height: 1;
}
.orbit-view-btn .orbit-view-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .85;
}
.orbit-view-btn:active {
  transform: scale(.92);
}

/* 真のボス出現時の点滅アニメーション */
.orbit-view-btn.blink {
  animation: orbitBlink 0.7s ease-in-out infinite alternate;
}
@keyframes orbitBlink {
  0%   { border-color: rgba(255,80,80,.9); box-shadow: 0 0 14px 4px rgba(255,60,60,.5); }
  100% { border-color: rgba(100,200,255,.5); box-shadow: 0 0 6px 1px rgba(0,120,255,.25); }
}

/* 地球上空ビュー中（ボタンが「戻る」状態） */
.orbit-view-btn.in-orbit {
  border-color: rgba(255,200,60,.7);
  background: radial-gradient(circle at 40% 35%, #2a2210, #1a1408);
  box-shadow: 0 2px 10px rgba(255,180,0,.3);
}

.stick {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid #ddd;
  box-shadow:0 4px 12px #0003;
  background:radial-gradient(circle,transparent 26%,#fffE 26% 62%,transparent 62%);
  z-index:1;
  touch-action:none;
}

.stick-wrap {
  position:absolute;
  right:4px;
  bottom:8px;
  width:180px;
  height:180px;
  pointer-events:auto;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}


/* ========================================
   Ending FX
   ======================================== */

.ending-fx {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 99990;
}


/* ========================================
   Big Boss Indicators
   ======================================== */

#bigboss-indicators {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1100;
  overflow:hidden;
}

.bigboss-ind-arrow {
  font-size:11px;
  line-height:1;
  color:#ffbbbb;
  display:inline-block;
  transform:rotate(var(--bigboss-ind-angle,0deg));
  transition:transform 0.15s linear;
}

.bigboss-ind-emoji {
  font-size:20px;
  line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.bigboss-indicator {
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:3px;
  background:rgba(140,0,0,0.88);
  border:2px solid rgba(255,90,90,0.95);
  border-radius:20px;
  padding:4px 8px 4px 5px;
  box-shadow:0 2px 10px rgba(0,0,0,0.75);
  animation:bigboss-ind-pulse 1.4s ease-in-out infinite;
}


/* ========================================
   Achievements (実績)
   ======================================== */

#achievementsClearBtn {
  font-size: 0.85em !important;
  padding: 2px 8px !important;
  min-height: 0 !important;
  line-height: 1.4;
  background: #eeeeee !important;
  color: #757575 !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 6px !important;
  font-weight: normal !important;
  cursor: pointer;
  flex-shrink: 0;
}

#achievementsClearBtn:hover {
  background: #e0e0e0 !important;
  color: #424242 !important;
  border-color: #9e9e9e !important;
}

#achievementsModal {
  z-index: 2700;
}

#achievementsModal .achievements-dialog {
  width: min(92vw, 330px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 22px;
}

.achievement-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #f5f5f5;
  transition: background 0.15s;
}

.achievement-row-badge {
  font-size: 1.1em;
  flex-shrink: 0;
}

.achievement-row-desc {
  font-size: 0.78em;
  color: #666;
  margin-top: 2px;
}

.achievement-row-emoji {
  font-size: 1.8em;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.achievement-row-info {
  flex: 1;
  min-width: 0;
}

.achievement-row-title {
  font-weight: 800;
  font-size: 0.95em;
  color: #333;
}

.achievement-row.is-locked {
  opacity: 0.45;
}

.achievement-row.is-unlocked {
  background: #fff8e1;
  border: 1px solid #ffe082;
}

.achievement-row.is-unlocked .achievement-row-title {
  color: #e65100;
}

.achievement-row.is-unlocked:focus {
  background: #fff3cd;
  box-shadow: 0 0 0 2px #e65100;
}

.achievement-row:focus {
  outline: none;
  box-shadow: 0 0 0 2px #1976d2;
  background: #e3f2fd;
}

.achievement-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,20,0,0.92);
  color: #fff;
  border: 1.5px solid #FFD54F;
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  pointer-events: none;
  white-space: nowrap;
  animation: toast-in 0.3s ease;
}

.achievement-toast-emoji {
  font-size: 1.8em;
}

.achievement-toast-label {
  font-size: 0.72em;
  color: #FFD54F;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.achievement-toast-title {
  font-size: 1em;
  font-weight: 800;
  color: #fff;
}

.achievements-body {
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding-right: 6px;
}

.achievements-clear-dialog {
  background: #fff;
  border-radius: 14px;
  padding: 24px 22px 18px;
  width: min(88vw, 300px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}

.achievements-clear-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.achievements-clear-dialog-text {
  font-size: 0.95em;
  font-weight: 700;
  color: #333;
  margin: 0;
  line-height: 1.6;
}

.achievements-clear-dialog-text small {
  font-size: 0.82em;
  font-weight: 400;
  color: #888;
}

.achievements-clear-no {
  padding: 8px 18px;
  background: #fff;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.9em;
  cursor: pointer;
}

.achievements-clear-no:hover {
  background: #f5f5f5;
}

.achievements-clear-overlay {
  z-index: 2800;
  background: rgba(0,0,0,0.55);
}

.achievements-clear-yes {
  padding: 8px 18px;
  background: #c62828;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 700;
  cursor: pointer;
}

.achievements-clear-yes:hover {
  background: #b71c1c;
}

.achievements-summary {
  font-size: 0.85em;
  color: #888;
  margin: 6px 0 10px;
  text-align: center;
}

.achievements-summary-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}


/* ========================================
   Ranking (ランキング)
   ======================================== */

.gc-ranking-reg-btn {
  background: #43a047 !important;
  color: #fff !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.gc-ranking-reg-btn:disabled {
  background: #aaa !important;
  cursor: default !important;
}

.gc-ranking-view-btn {
  background: #7b5ea7 !important;
  color: #fff !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.ranking-empty {
  text-align: center;
  padding: 20px;
  color: #888;
}

.ranking-loading {
  text-align: center;
  color: #888;
  font-size: 0.9em;
  padding: 16px 0;
}

.ranking-nickname-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ranking-nickname-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 1em;
  border: 2px solid #ccc;
  border-radius: 10px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.ranking-nickname-input:focus {
  border-color: #1e88e5;
  outline: 3px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.35);
}

.ranking-kbd-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  padding: 0;
  margin-top: -7px;
  font-size: 0.9em;
  line-height: 1;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: default;
  -webkit-user-select: none;
  user-select: none;
}

.ranking-kbd-btn:active {
  background: #e0e0e0;
}

/* ---- カスタムオンスクリーンキーボード ---- */
.soft-kbd {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
.soft-kbd-row {
  display: flex;
  justify-content: center;
  gap: 2px;
  width: 100%;
}
.soft-kbd-key {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #f9f9f9;
  font-size: 0.78em;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.soft-kbd-key:active {
  background: #ddd;
}
.soft-kbd-key:focus {
  outline: 2px solid #fff;
  outline-offset: -1px;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.5);
  z-index: 1;
  position: relative;
}
.soft-kbd-mode-btn:focus {
  outline: 2px solid #fff;
  outline-offset: 0px;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.5);
  z-index: 1;
  position: relative;
}
.soft-kbd-key.wide {
  flex: 1.4 1 0;
  font-size: 0.7em;
}
.soft-kbd-key.space {
  flex: 3 1 0;
}
.soft-kbd-mode-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 2px;
}
.soft-kbd-mode-btn {
  padding: 3px 8px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #eee;
  font-size: 0.72em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.soft-kbd-mode-btn.active {
  background: #1e88e5;
  color: #fff;
  border-color: #1e88e5;
}

.ranking-reg-desc {
  font-size: 0.88em;
  color: #555;
  margin: 0;
  line-height: 1.4;
}

.ranking-reg-overlay {
  z-index: 99998;
}
.ranking-reg-dialog {
  width: min(96vw, 400px) !important;
  gap: 10px !important;
  padding: 16px 10px !important;
  overflow: hidden;
}

.ranking-reg-msg {
  font-size: 0.88em;
  min-height: 1.2em;
  color: #555;
}

.ranking-reg-msg.error {
  color: #c62828;
  font-weight: 600;
}

.ranking-reg-msg.success {
  color: #2e7d32;
  font-weight: 600;
}

.ranking-reg-overlay .ranking-reg-dialog, .ranking-view-overlay .ranking-view-dialog {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ranking-reg-overlay.is-open .ranking-reg-dialog, .ranking-view-overlay.is-open .ranking-view-dialog {
  opacity: 1;
  transform: translateY(0);
}

.ranking-reg-title {
  font-size: 1.2em;
  margin: 0;
  font-weight: 700;
}

.ranking-row-even {
  background: #f5f5f5;
}

.ranking-sort-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  width: 100%;
  margin-bottom: 4px;
}

.ranking-sort-btn {
  padding: 3px 7px !important;
  font-size: 0.68em !important;
  font-weight: 600;
  border: 1px solid #bbb !important;
  border-radius: 20px !important;
  background: #f5f5f5 !important;
  color: #444 !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.ranking-sort-btn.active {
  background: #1e88e5 !important;
  border-color: #1565c0 !important;
  color: #fff !important;
}

.ranking-sort-btn:hover {
  background: #e3f2fd !important;
  border-color: #90caf9 !important;
  color: #1565c0 !important;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.73em;
  min-width: 380px;
}

.ranking-table tbody tr {
  border-bottom: 1px solid #eee;
}

.ranking-table tbody tr:hover {
  background: #e3f2fd !important;
}

.ranking-table td {
  padding: 4px 3px;
  text-align: center;
  white-space: nowrap;
}

.ranking-table thead th {
  background: #1e88e5;
  color: #fff;
  padding: 5px 3px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}

.ranking-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ranking-view-dialog {
  width: min(98vw, 600px) !important;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  gap: 8px !important;
  padding: 16px 8px !important;
}

.ranking-view-overlay {
  z-index: 99998 !important;
  align-items: flex-start !important;
  padding: 16px 0 !important;
  overflow-y: auto !important;
}

.ranking-view-sub {
  font-size: 0.82em;
  color: #777;
  margin: 0;
}

.ranking-view-title {
  font-size: 1.25em;
  margin: 0;
  font-weight: 700;
}

.rk-date {
  color: #666;
  font-size: 0.9em;
  padding-right: 1px !important;
}

.rk-kills {
  text-align: left;
  padding-left: 1px !important;
  padding-right: 1px !important;
}

.rk-nick {
  font-weight: 600;
  text-align: left;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rk-rank {
  font-weight: 700;
  font-size: 1.05em;
}

.rk-spots {
  padding-left: 1px !important;
}

.rk-time {
  font-family: monospace;
  font-size: 1.05em;
  font-weight: 700;
  color: #1565c0;
}


/* ========================================
   Misc
   ======================================== */

#enemyCountHudN {
  font-variant-numeric:tabular-nums;
  font-size:0.96em;
  font-weight:inherit;
}

#goTime {
  margin-top:0;
}

#spawnEnemyBtn {
  background:#1e88e5;
  color:#fff;
  font-weight:800;
  border:1px solid #1669c1;
  box-shadow:0 3px 8px #1e88e555;
  font-size:14px;
}

.stuck-label {
  color:#d32f2f;
}


/* ========================================
   Animations (@keyframes)
   ======================================== */

@keyframes pulse {
  0%{transform:scale(.85);opacity:.95}70%{transform:scale(1.25);opacity:.2}100%{transform:scale(1.25);opacity:0}
}

@keyframes explosionPop {
  0%   { opacity: 0;   transform: scale(0.6); filter: blur(0px); }
  15%  { opacity: 1;   transform: scale(1.0); filter: blur(0px); }
  100% { opacity: 0;   transform: scale(2.2); filter: blur(0px); }
}

@keyframes screenFlash {
  0%   { opacity: 0; }
  35%  { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes pauseBlink {
  0%{ opacity:1; transform:translate(-50%,-50%) scale(1.00); }
  50%{ opacity:0.18; transform:translate(-50%,-50%) scale(0.98); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1.00); }
}

@keyframes spotPulse {
  0%   { transform:translate(-50%,-50%) scale(.85); opacity:.95; }
  70%  { transform:translate(-50%,-50%) scale(1.25); opacity:.20; }
  100% { transform:translate(-50%,-50%) scale(1.25); opacity:0; }
}

@keyframes truebossPulse {
  0%   { transform:scale(.75); opacity:1; }
  60%  { transform:scale(1.25); opacity:.30; }
  100% { transform:scale(1.35); opacity:0; }
}

@keyframes truebossPulseOuter {
  0%   { transform:scale(.85); opacity:.85; }
  70%  { transform:scale(1.35); opacity:.18; }
  100% { transform:scale(1.45); opacity:0; }
}

@keyframes warpOutSpin {
  0%   { transform: scale(0.7) rotate(0deg); opacity: 0.0; }
  15%  { opacity: 1.0; }
  100% { transform: scale(2.4) rotate(720deg); opacity: 0.0; }
}

@keyframes warpInSpin {
  0%   { transform: scale(2.4) rotate(-540deg); opacity: 0.0; }
  25%  { opacity: 1.0; }
  100% { transform: scale(0.8) rotate(0deg); opacity: 0.0; }
}

@keyframes warpPulseIn {
  0%   { transform: scale(0.3) rotate(-180deg); opacity: 0.0; }
  20%  { opacity: 1.0; }
  100% { transform: scale(1.3) rotate(120deg); opacity: 0.0; }
}

@keyframes warpPulseOut {
  0%   { transform: scale(1.2) rotate(0deg); opacity: 0.0; }
  20%  { opacity: 1.0; }
  100% { transform: scale(0.2) rotate(360deg); opacity: 0.0; }
}

@keyframes trueBossBoomCore {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.25); filter: blur(0px); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(0.95); }
  45%  { opacity: 1; transform: translate(-50%, -50%) scale(1.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); filter: blur(0px); }
}

@keyframes trueBossBoomRing {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6.2); }
}

@keyframes trueBossBoomSparks {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8) rotate(250deg); }
}

@keyframes mapShake {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  10%  { transform: translate3d(-4px, 2px, 0) rotate(-0.25deg); }
  20%  { transform: translate3d(5px, -3px, 0) rotate(0.28deg); }
  30%  { transform: translate3d(-6px, -2px, 0) rotate(-0.35deg); }
  40%  { transform: translate3d(6px, 4px, 0) rotate(0.32deg); }
  55%  { transform: translate3d(-5px, 3px, 0) rotate(-0.25deg); }
  70%  { transform: translate3d(4px, -2px, 0) rotate(0.18deg); }
  85%  { transform: translate3d(-2px, 1px, 0) rotate(-0.12deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

@keyframes bigboss-ind-pulse {
  0%,100%{opacity:1;box-shadow:0 2px 10px rgba(0,0,0,0.75),0 0 0 0 rgba(255,60,60,0.5)}
  50%{opacity:0.85;box-shadow:0 2px 10px rgba(0,0,0,0.75),0 0 0 7px rgba(255,60,60,0)}
}

@keyframes toast-in {
  from{ opacity:0; transform: translateX(-50%) translateY(12px); }
  to{   opacity:1; transform: translateX(-50%) translateY(0); }
}


/* ========================================
   Media Queries
   ======================================== */

@media (pointer: coarse) {
  #padFetch.lb-btn {
    width:96px;
    height:96px;
  }
  .spc-btn .spc-label {
    font-size:24px;
  }
  .spc-btn .spc-n {
    font-size:28px;
  }
  .spc-btn::after {
    inset:9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gameClearModal {
    transition: opacity 300ms linear;
  }
  #gameClearModal .modal-dialog {
    opacity: 0;
    transform: translateY(calc(var(--gc-y, 0px) + 6px)) scale(0.995);
    transition:
      opacity 300ms linear,
      transform 450ms linear;
  }
  #gameClearModal.is-open .modal-dialog {
    opacity: 1;
    transform: translateY(var(--gc-y, 0px)) scale(1);
  }
}