*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #000;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- Organiser page --- */

.organiser-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px 24px 90px;
  text-align: center;
  background:
    repeating-linear-gradient(
      45deg,
      #0a0a2e,
      #0a0a2e 20px,
      #10103a 20px,
      #10103a 40px
    );
}

.organiser-container::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 70' preserveAspectRatio='none'%3E%3Cpath d='M0,70 L0,45 Q4,12 8,45 Q12,20 16,42 Q20,8 24,40 Q28,18 32,44 Q36,6 40,38 Q44,22 48,46 Q52,10 56,42 Q60,16 64,44 Q68,4 72,36 Q76,20 80,46 Q84,8 88,40 Q92,24 96,48 Q100,12 104,42 Q108,18 112,44 Q116,6 120,38 Q124,26 128,48 Q132,10 136,40 Q140,20 144,46 Q148,4 152,36 Q156,22 160,44 Q164,8 168,42 Q172,16 176,46 Q180,10 184,38 Q188,24 192,48 Q196,6 200,40 Q204,18 208,44 Q212,12 216,42 Q220,4 224,36 Q228,22 232,46 Q236,8 240,40 Q244,20 248,48 Q252,14 256,42 Q260,6 264,38 Q268,18 272,44 Q276,10 280,46 Q284,24 288,40 Q292,4 296,36 Q300,16 304,44 Q308,8 312,42 Q316,22 320,48 Q324,12 328,40 Q332,6 336,38 Q340,20 344,46 Q348,10 352,42 Q356,18 360,44 Q364,4 368,36 Q372,24 376,48 Q380,8 384,40 Q388,16 392,46 Q396,12 400,38 Q404,22 408,44 Q412,6 416,42 Q420,18 424,40 Q428,10 432,48 Q436,4 440,36 Q444,20 448,46 Q452,14 456,42 Q460,8 464,44 Q468,24 472,38 Q476,6 480,46 Q484,16 488,40 Q492,10 496,48 Q500,22 504,42 Q508,4 512,36 Q516,18 520,44 Q524,12 528,40 Q532,8 536,46 Q540,20 544,38 Q548,6 552,42 Q556,24 560,48 Q564,10 568,44 Q572,16 576,40 Q580,4 584,36 Q588,22 592,46 Q596,8 600,42 Q604,18 608,38 Q612,12 616,44 Q620,6 624,48 Q628,20 632,40 Q636,10 640,46 Q644,24 648,42 Q652,4 656,36 Q660,16 664,44 Q668,8 672,40 Q676,22 680,48 Q684,14 688,38 Q692,6 696,42 Q700,18 704,46 Q708,10 712,40 Q716,4 720,36 Q724,20 728,44 Q732,12 736,48 Q740,8 744,42 Q748,24 752,38 Q756,6 760,46 Q764,16 768,40 Q772,10 776,44 Q780,22 784,36 Q788,4 792,42 Q796,18 800,40 L800,70 Z' fill='%232e7d32'/%3E%3Cpath d='M0,70 L0,50 Q5,28 10,50 Q15,22 20,48 Q25,30 30,52 Q35,18 40,46 Q45,26 50,50 Q55,20 60,48 Q65,32 70,54 Q75,22 80,50 Q85,28 90,48 Q95,16 100,46 Q105,30 110,52 Q115,24 120,50 Q125,20 130,48 Q135,32 140,54 Q145,18 150,46 Q155,26 160,50 Q165,22 170,52 Q175,30 180,48 Q185,16 190,50 Q195,28 200,46 Q205,24 210,52 Q215,20 220,48 Q225,32 230,54 Q235,18 240,50 Q245,26 250,46 Q255,22 260,52 Q265,30 270,48 Q275,16 280,50 Q285,28 290,54 Q295,24 300,46 Q305,20 310,50 Q315,32 320,48 Q325,18 330,52 Q335,26 340,50 Q345,22 350,46 Q355,30 360,54 Q365,16 370,48 Q375,28 380,50 Q385,24 390,52 Q395,20 400,46 Q405,32 410,50 Q415,18 420,48 Q425,26 430,54 Q435,22 440,50 Q445,30 450,46 Q455,16 460,52 Q465,28 470,48 Q475,24 480,50 Q485,20 490,54 Q495,32 500,46 Q505,18 510,50 Q515,26 520,48 Q525,22 530,52 Q535,30 540,50 Q545,16 550,46 Q555,28 560,54 Q565,24 570,48 Q575,20 580,50 Q585,32 590,52 Q595,18 600,46 Q605,26 610,50 Q615,22 620,48 Q625,30 630,54 Q635,16 640,50 Q645,28 650,46 Q655,24 660,52 Q665,20 670,48 Q675,32 680,50 Q685,18 690,54 Q695,26 700,46 Q705,22 710,50 Q715,30 720,48 Q725,16 730,52 Q735,28 740,50 Q745,24 750,46 Q755,20 760,54 Q765,32 770,48 Q775,18 780,50 Q785,26 790,52 Q795,22 800,46 L800,70 Z' fill='%2343a047'/%3E%3Cpath d='M0,70 L0,55 Q6,38 12,55 Q18,34 24,54 Q30,40 36,56 Q42,32 48,52 Q54,38 60,56 Q66,34 72,54 Q78,42 84,58 Q90,36 96,54 Q102,40 108,56 Q114,32 120,52 Q126,38 132,58 Q138,36 144,54 Q150,42 156,56 Q162,34 168,52 Q174,38 180,58 Q186,32 192,54 Q198,40 204,56 Q210,36 216,52 Q222,42 228,58 Q234,34 240,54 Q246,38 252,56 Q258,32 264,52 Q270,40 276,58 Q282,36 288,54 Q294,42 300,56 Q306,34 312,52 Q318,38 324,58 Q330,32 336,54 Q342,40 348,56 Q354,36 360,52 Q366,42 372,58 Q378,34 384,54 Q390,38 396,56 Q402,32 408,52 Q414,40 420,58 Q426,36 432,54 Q438,42 444,56 Q450,34 456,52 Q462,38 468,58 Q474,32 480,54 Q486,40 492,56 Q498,36 504,52 Q510,42 516,58 Q522,34 528,54 Q534,38 540,56 Q546,32 552,52 Q558,40 564,58 Q570,36 576,54 Q582,42 588,56 Q594,34 600,52 Q606,38 612,58 Q618,32 624,54 Q630,40 636,56 Q642,36 648,52 Q654,42 660,58 Q666,34 672,54 Q678,38 684,56 Q690,32 696,52 Q702,40 708,58 Q714,36 720,54 Q726,42 732,56 Q738,34 744,52 Q750,38 756,58 Q762,32 768,54 Q774,40 780,56 Q786,36 792,52 Q796,42 800,56 L800,70 Z' fill='%2366bb6a'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Butterflies */

.butterfly {
  position: fixed;
  bottom: 60px;
  font-size: 20px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.85;
}

.butterfly-1 {
  left: 15%;
  animation: flutter-1 8s ease-in-out infinite;
}

.butterfly-2 {
  left: 55%;
  animation: flutter-2 11s ease-in-out infinite;
}

.butterfly-3 {
  left: 80%;
  animation: flutter-3 9s ease-in-out infinite;
}

@keyframes flutter-1 {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  25% { transform: translate(12px, -18px) rotate(8deg); }
  50% { transform: translate(-8px, -28px) rotate(-3deg); }
  75% { transform: translate(6px, -12px) rotate(10deg); }
}

@keyframes flutter-2 {
  0%, 100% { transform: translate(0, 0) rotate(4deg); }
  20% { transform: translate(-14px, -22px) rotate(-6deg); }
  45% { transform: translate(10px, -34px) rotate(8deg); }
  70% { transform: translate(-6px, -16px) rotate(-10deg); }
}

@keyframes flutter-3 {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  30% { transform: translate(10px, -24px) rotate(6deg); }
  60% { transform: translate(-12px, -20px) rotate(-4deg); }
  85% { transform: translate(4px, -30px) rotate(12deg); }
}

.organiser-container h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.organiser-container h2 {
  font-size: 18px;
  font-weight: 400;
  color: #aaa;
  margin-bottom: 32px;
}

.organiser-container .subtitle {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.btn-primary {
  background: #4f6df5;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 12px;
  transition: background 0.2s;
}

.btn-primary:active {
  background: #3a56d4;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 10px;
  transition: background 0.2s;
}

.btn-secondary:active {
  background: rgba(255, 255, 255, 0.2);
}

.corner-list {
  list-style: none;
  width: 100%;
  max-width: 320px;
  margin: 16px 0;
  text-align: left;
}

.corner-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: #ccc;
}

.corner-list .undo-link {
  color: #f55;
  font-size: 12px;
  cursor: pointer;
  background: none;
  text-decoration: underline;
}

.gps-live {
  font-size: 14px;
  color: #ccc;
  margin: 12px 0;
}

.gps-accuracy {
  font-size: 13px;
  margin: 4px 0 16px;
}

.gps-accuracy.good { color: #4caf50; }
.gps-accuracy.fair { color: #ff9800; }
.gps-accuracy.poor { color: #f44336; }

.area-canvas {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin: 16px 0;
}

.theme-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 auto 20px;
  max-width: 320px;
  width: 100%;
}

.theme-selector button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #aaa;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.theme-icon {
  font-size: 18px;
  line-height: 1;
}

.theme-selector button.active {
  background: #4f6df5;
  color: #fff;
  border-color: #4f6df5;
}

.count-selector {
  display: flex;
  gap: 0;
  margin: 16px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.count-selector button {
  flex: 1;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.05);
  color: #aaa;
  font-size: 16px;
  font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.15s, color 0.15s;
}

.count-selector button:last-child {
  border-right: none;
}

.count-selector button.active {
  background: #4f6df5;
  color: #fff;
}

.share-section {
  width: 100%;
  max-width: 360px;
}

.share-url {
  background: rgba(255, 255, 255, 0.08);
  padding: 12px;
  border-radius: 8px;
  font-size: 11px;
  color: #aaa;
  word-break: break-all;
  margin: 16px 0;
  text-align: left;
}

.share-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 16px 0;
}

.qr-hint {
  margin-top: 32px;
  font-size: 13px;
  color: #999;
  max-width: 260px;
  line-height: 1.4;
}

.qr-container {
  margin: 12px auto 0;
  display: flex;
  justify-content: center;
}

.qr-container canvas {
  border-radius: 8px;
}

.validation-warning {
  background: rgba(255, 152, 0, 0.15);
  border: 1px solid rgba(255, 152, 0, 0.4);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 13px;
  color: #ffb74d;
  text-align: left;
}

/* --- Player page --- */

.player-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#camera-feed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#debug-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  z-index: 0;
  display: none;
}

#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* HUD */

.hud {
  position: fixed;
  z-index: 10;
}

.hud-bar {
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-weight: 600;
}

.hud-bar .score { color: #4caf50; }
.hud-bar .remaining { color: #aaa; }

#radar-canvas {
  position: fixed;
  bottom: 20px;
  left: 16px;
  z-index: 10;
  border-radius: 50%;
}

#collect-btn {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 10;
  background: rgba(76, 175, 80, 0.85);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: 16px;
  display: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

#collect-btn:active {
  background: rgba(56, 142, 60, 0.9);
  transform: scale(0.95);
}

/* Hostile warning */

.hostile-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  box-shadow: inset 0 0 80px 30px rgba(244, 67, 54, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
}

.hostile-vignette.active {
  animation: vignette-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes vignette-pulse {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

#hostile-countdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font-size: 72px;
  font-weight: 800;
  color: #f44336;
  text-shadow: 0 0 20px rgba(244, 67, 54, 0.8);
  display: none;
}

/* Score feedback */

.score-popup {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  font-size: 28px;
  font-weight: 800;
  pointer-events: none;
  animation: score-float 1s ease-out forwards;
}

.score-popup.positive { color: #4caf50; }
.score-popup.negative { color: #f44336; }

@keyframes score-float {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}

/* GPS weak banner */

#gps-banner {
  position: fixed;
  top: 44px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 6px;
  background: rgba(255, 152, 0, 0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  z-index: 12;
  display: none;
}

/* State screens (loading, acquiring, error, complete) */

.state-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  text-align: center;
  padding: 24px;
}

.state-screen.transparent-bg {
  background: rgba(0, 0, 0, 0.75);
}

.state-screen.solid-bg {
  background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4e 100%);
  overflow-y: auto;
}

.state-screen h1 {
  font-size: 28px;
  margin-bottom: 16px;
}

.state-screen p {
  font-size: 16px;
  color: #aaa;
  margin-bottom: 24px;
  max-width: 300px;
}

.state-screen .accuracy-text {
  font-size: 14px;
  color: #888;
  margin-top: 8px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #4f6df5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Game complete overlay */

.complete-stats {
  width: 100%;
  max-width: 280px;
  margin: 16px 0;
  text-align: left;
}

.complete-stats .stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15px;
}

.complete-stats .stat-label { color: #aaa; }
.complete-stats .stat-value { font-weight: 700; }
.complete-stats .stat-value.positive { color: #4caf50; }
.complete-stats .stat-value.negative { color: #f44336; }

.final-score {
  font-size: 48px;
  font-weight: 800;
  margin: 16px 0;
}

/* Debug mode */

#debug-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 30;
  overflow-y: auto;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #0f0;
  display: none;
}

#debug-map {
  position: fixed;
  top: 50px;
  left: 10px;
  z-index: 25;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  display: none;
}

.debug-heading {
  position: fixed;
  bottom: 160px;
  left: 16px;
  z-index: 25;
  font-size: 12px;
  color: #0f0;
  font-family: 'Courier New', monospace;
  display: none;
}