/* /Components/ARMonsterBattle.razor.rz.scp.css */
/* ================================================
   FÖRENKLAD COMBAT - Simple Timer + Co-op
   ================================================ */

/* Monster Health Bar */
.monster-health[b-vcyinpjkh3] {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 25px;
    padding: 10px;
    margin: 15px 0;
    border: 3px solid #FF6B35;
}

.health-bar[b-vcyinpjkh3] {
    position: relative;
    height: 45px;
    background: linear-gradient(90deg, #00FF00, #90EE90);
    border-radius: 20px;
    transition: width 0.3s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

.health-bar.low[b-vcyinpjkh3] {
    background: linear-gradient(90deg, #FF0000, #FF6B6B);
    animation: pulse-b-vcyinpjkh3 0.5s ease-in-out infinite;
}

.health-text[b-vcyinpjkh3] {
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 1),
        0 2px 5px rgba(0, 0, 0, 0.8);
    z-index: 10;
    position: relative;
}

/* Attack Button Container */
.attack-button-container[b-vcyinpjkh3] {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* Attack Button (när redo) */
.btn-attack-monster[b-vcyinpjkh3] {
    background: linear-gradient(135deg, #FF6B35, #FF0000);
    color: white;
    border: none;
    padding: 20px 50px;
    font-size: 1.8rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.6);
    transition: all 0.3s;
  animation: pulse-b-vcyinpjkh3 2s ease-in-out infinite;
}

.btn-attack-monster:hover[b-vcyinpjkh3] {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.8);
}

.btn-attack-monster:active[b-vcyinpjkh3] {
    transform: scale(0.95);
}

/* Simple Cooldown Timer */
.cooldown-simple[b-vcyinpjkh3] {
    background: rgba(0, 0, 0, 0.9);
    border: 3px solid #FF6B35;
    border-radius: 50px;
    padding: 20px 50px;
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cooldown-icon[b-vcyinpjkh3] {
    font-size: 2rem;
    animation: pulse-b-vcyinpjkh3 1s ease-in-out infinite;
}

.cooldown-time[b-vcyinpjkh3] {
    font-size: 1.8rem;
    font-weight: bold;
    color: #FF6B35;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.8);
}

/* Co-op Attack Notification */
.coop-attack-notification[b-vcyinpjkh3] {
    position: fixed;
    top: 150px;
  left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 107, 53, 0.95);
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: bold;
 z-index: 999;
  animation: slideDown-b-vcyinpjkh3 0.3s ease-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ================================================
   ✅ NYA: ESCAPE/FLY FUNCTIONALITY
   ================================================ */

/* Escape Button Container */
.escape-button-container[b-vcyinpjkh3] {
    position: fixed;
  bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Escape Button */
.btn-escape-monster[b-vcyinpjkh3] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border: 3px solid #FF6B35;
    padding: 15px 40px;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
    transition: all 0.3s;
animation: escapePulse-b-vcyinpjkh3 1.5s ease-in-out infinite;
}

.btn-escape-monster:hover:not(:disabled)[b-vcyinpjkh3] {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.7);
}

.btn-escape-monster:active:not(:disabled)[b-vcyinpjkh3] {
    transform: scale(0.95);
}

.btn-escape-monster:disabled[b-vcyinpjkh3] {
  opacity: 0.7;
    cursor: not-allowed;
  animation: none;
}

.btn-escape-monster.escaping[b-vcyinpjkh3] {
    background: linear-gradient(135deg, #90EE90, #00FF00);
    animation: escapeRunning-b-vcyinpjkh3 0.3s ease-in-out infinite;
}

/* Escape Progress Bar (small, under button) */
.escape-progress-bar[b-vcyinpjkh3] {
  width: 200px;
    height: 8px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    border: 2px solid #FFD700;
    overflow: hidden;
}

.escape-progress-fill[b-vcyinpjkh3] {
    height: 100%;
    background: linear-gradient(90deg, #00FF00, #90EE90);
    border-radius: 8px;
transition: width 0.3s ease-out;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

/* Escape Warning Overlay */
.escape-warning-overlay[b-vcyinpjkh3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    animation: fadeIn-b-vcyinpjkh3 0.3s ease;
}

.escape-warning-card[b-vcyinpjkh3] {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.95), rgba(255, 0, 0, 0.95));
    border: 5px solid #FFD700;
    border-radius: 30px;
    padding: 40px;
 max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 60px rgba(255, 215, 0, 0.8);
    animation: scaleIn-b-vcyinpjkh3 0.4s ease-out;
}

.escape-icon[b-vcyinpjkh3] {
    font-size: 5rem;
 margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
}

.escape-title[b-vcyinpjkh3] {
    font-family: 'Creepster', cursive;
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.escape-text[b-vcyinpjkh3] {
    font-size: 1.2rem;
    color: white;
 margin-bottom: 25px;
    line-height: 1.6;
}

.escape-text strong[b-vcyinpjkh3] {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* Large Escape Progress Bar (in warning dialog) */
.escape-progress-bar-large[b-vcyinpjkh3] {
    position: relative;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 25px;
    border: 3px solid #FFD700;
    overflow: hidden;
    margin-bottom: 20px;
}

.escape-progress-fill-large[b-vcyinpjkh3] {
    height: 100%;
    background: linear-gradient(90deg, #00FF00, #90EE90, #FFD700);
    border-radius: 22px;
    transition: width 0.3s ease-out;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
    animation: progressGlow-b-vcyinpjkh3 0.5s ease-in-out infinite;
}

.escape-progress-text[b-vcyinpjkh3] {
    position: absolute;
  top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1);
    z-index: 10;
}

.escape-music-hint[b-vcyinpjkh3] {
    font-size: 1.1rem;
    color: #90EE90;
    font-style: italic;
    margin-top: 10px;
    text-shadow: 0 0 10px rgba(144, 238, 144, 0.8);
}

/* Animations */
@keyframes pulse-b-vcyinpjkh3 {
    0%, 100% {
  opacity: 1;
     transform: scale(1);
    }
  50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes slideDown-b-vcyinpjkh3 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
opacity: 1;
        transform: translateX(-50%) translateY(0);
 }
}

@keyframes escapePulse-b-vcyinpjkh3 {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 12px 35px rgba(255, 215, 0, 0.8);
    }
}

@keyframes escapeRunning-b-vcyinpjkh3 {
    0%, 100% {
        transform: translateX(-2px);
    }
 50% {
   transform: translateX(2px);
    }
}

@keyframes progressGlow-b-vcyinpjkh3 {
    0%, 100% {
        box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
    }
    50% {
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

@keyframes fadeIn-b-vcyinpjkh3 {
    from {
        opacity: 0;
    }
    to {
      opacity: 1;
    }
}

@keyframes scaleIn-b-vcyinpjkh3 {
    from {
   transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
    opacity: 1;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .health-text[b-vcyinpjkh3] {
        font-size: 1.1rem;
    }
    
 .health-bar[b-vcyinpjkh3] {
        height: 40px;
    }
    
 .btn-attack-monster[b-vcyinpjkh3] {
 padding: 15px 40px;
        font-size: 1.5rem;
 }
    
    .cooldown-simple[b-vcyinpjkh3] {
 padding: 15px 40px;
    }
    
    .cooldown-time[b-vcyinpjkh3] {
        font-size: 1.5rem;
    }
  
    .coop-attack-notification[b-vcyinpjkh3] {
  font-size: 1rem;
      padding: 10px 20px;
    }
    
    .btn-escape-monster[b-vcyinpjkh3] {
     padding: 12px 30px;
   font-size: 1.1rem;
    }
    
    .escape-progress-bar[b-vcyinpjkh3] {
        width: 150px;
    }
    
    .escape-warning-card[b-vcyinpjkh3] {
        padding: 30px 20px;
    }
    
    .escape-icon[b-vcyinpjkh3] {
        font-size: 3.5rem;
  }
    
    .escape-title[b-vcyinpjkh3] {
        font-size: 1.8rem;
}
    
    .escape-text[b-vcyinpjkh3] {
        font-size: 1rem;
    }
    
    .escape-progress-bar-large[b-vcyinpjkh3] {
        height: 40px;
    }
    
    .escape-progress-text[b-vcyinpjkh3] {
   font-size: 1.2rem;
    }
    
    .escape-music-hint[b-vcyinpjkh3] {
        font-size: 0.95rem;
    }
}
/* /Components/JoinGamePopup.razor.rz.scp.css */
/* Join Game Popup */
.join-overlay[b-gix2rait85] {
    position: fixed;
    top: 0;
  left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2500;
    display: none;
 align-items: center;
    justify-content: center;
 padding: 1rem;
}

.join-overlay.visible[b-gix2rait85] {
    display: flex;
animation: fadeIn 0.3s ease;
}

.join-popup[b-gix2rait85] {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(10, 10, 10, 0.95));
    border: 3px solid var(--halloween-green);
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 0 50px rgba(57, 255, 20, 0.5);
    animation: slideUp-b-gix2rait85 0.3s ease;
}

@keyframes slideUp-b-gix2rait85 {
    from {
  transform: translateY(30px);
 opacity: 0;
    }
 to {
        transform: translateY(0);
  opacity: 1;
    }
}

.join-title[b-gix2rait85] {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: var(--halloween-green);
    text-align: center;
    margin-bottom: 1.5rem;
  text-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
}

.join-title i[b-gix2rait85] {
    margin-right: 0.5rem;
}

/* Form Styles */
.join-form[b-gix2rait85] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-group[b-gix2rait85] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-gix2rait85] {
    font-family: 'Eater', cursive;
    font-size: 1.1rem;
    color: var(--halloween-green);
}

.join-input[b-gix2rait85] {
    width: 100%;
    padding: 0.9rem;
    font-size: 1.1rem;
    font-family: 'Eater', cursive;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--halloween-green);
 border-radius: 10px;
    color: var(--ghost-white);
    transition: all 0.3s ease;
}

.join-input:focus[b-gix2rait85] {
    outline: none;
    border-color: var(--halloween-orange);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
}

.form-hint[b-gix2rait85] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 0.3rem;
}

.error-message[b-gix2rait85] {
    background: rgba(255, 0, 0, 0.2);
    border: 2px solid var(--blood-red);
    border-radius: 10px;
    padding: 0.8rem;
    color: #ff4444;
    font-family: 'Eater', cursive;
    text-align: center;
}

/* Action Buttons */
.join-actions[b-gix2rait85] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
}

.btn-join[b-gix2rait85] {
    background: linear-gradient(135deg, var(--halloween-green), #2dc437);
    color: #000;
    padding: 1rem;
    font-size: 1.1rem;
    font-family: 'Eater', cursive;
    font-weight: bold;
    border: none;
    border-radius: 12px;
  cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.4);
}

.btn-join:active:not(:disabled)[b-gix2rait85] {
    transform: scale(0.98);
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.7);
}

.btn-join:disabled[b-gix2rait85] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-gix2rait85] {
    background: rgba(255, 0, 0, 0.2);
    color: #ff4444;
    padding: 0.8rem;
    font-size: 1rem;
    font-family: 'Eater', cursive;
    border: 2px solid var(--blood-red);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:active[b-gix2rait85] {
    transform: scale(0.98);
  background: rgba(255, 0, 0, 0.3);
}

/* Connected State */
.connected-info[b-gix2rait85] {
    text-align: center;
}

.success-icon[b-gix2rait85] {
    font-size: 4rem;
    color: var(--halloween-green);
    margin-bottom: 1rem;
    animation: successPulse-b-gix2rait85 1.5s ease-in-out infinite;
}

@keyframes successPulse-b-gix2rait85 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.connected-info h3[b-gix2rait85] {
 font-family: 'Creepster', cursive;
    font-size: 1.8rem;
    color: var(--halloween-green);
    margin-bottom: 1rem;
}

.connected-info p[b-gix2rait85] {
    font-size: 1.1rem;
    color: var(--ghost-white);
    margin-bottom: 0.5rem;
}

.connected-info strong[b-gix2rait85] {
    color: var(--halloween-green);
}

.player-count[b-gix2rait85] {
    background: rgba(57, 255, 20, 0.1);
    border: 2px solid rgba(57, 255, 20, 0.3);
    border-radius: 10px;
    padding: 0.8rem;
    margin: 1rem 0;
    font-family: 'Eater', cursive;
}

.btn-disconnect[b-gix2rait85] {
    background: rgba(255, 107, 53, 0.2);
    color: var(--halloween-orange);
    padding: 0.9rem;
    font-size: 1rem;
    font-family: 'Eater', cursive;
    border: 2px solid var(--halloween-orange);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.btn-disconnect:active[b-gix2rait85] {
    transform: scale(0.98);
    background: rgba(255, 107, 53, 0.3);
}

/* Responsive */
@media (max-width: 480px) {
    .join-popup[b-gix2rait85] {
  padding: 1.5rem;
    }
    
    .join-title[b-gix2rait85] {
    font-size: 1.6rem;
    }
    
    .join-input[b-gix2rait85] {
        padding: 0.8rem;
        font-size: 1rem;
    }
}
/* /Components/QRScannerPopup.razor.rz.scp.css */
/* QR Scanner Overlay */
.qr-scanner-overlay[b-y4j8f07swf] {
    position: fixed;
 top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.98);
    z-index: 3000;
  display: none;
    align-items: center;
justify-content: center;
    padding: 1rem;
}

.qr-scanner-overlay.visible[b-y4j8f07swf] {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.qr-scanner-popup[b-y4j8f07swf] {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Scanner Header */
.scanner-header[b-y4j8f07swf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 107, 53, 0.1);
    border: 2px solid var(--halloween-orange);
    border-radius: 15px;
}

.scanner-header h2[b-y4j8f07swf] {
    font-family: 'Eater', cursive;
    color: var(--halloween-orange);
  margin: 0;
    font-size: 1.5rem;
}

.scanner-close[b-y4j8f07swf] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.3);
  border: 2px solid var(--blood-red);
    color: var(--blood-red);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
  align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.scanner-close:active[b-y4j8f07swf] {
  transform: scale(0.9);
    background: rgba(255, 0, 0, 0.5);
}

/* Video Container */
.scanner-video-container[b-y4j8f07swf] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
  background: #000;
  border-radius: 15px;
    overflow: hidden;
    border: 3px solid var(--halloween-green);
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.4);
}

.scanner-video[b-y4j8f07swf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scanner Frame */
.scanner-frame[b-y4j8f07swf] {
    position: absolute;
    top: 50%;
 left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
 height: 70%;
    pointer-events: none;
}

.corner[b-y4j8f07swf] {
    position: absolute;
    width: 40px;
  height: 40px;
    border: 4px solid var(--halloween-green);
animation: cornerPulse-b-y4j8f07swf 2s ease-in-out infinite;
}

.corner.top-left[b-y4j8f07swf] {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-radius: 10px 0 0 0;
}

.corner.top-right[b-y4j8f07swf] {
  top: 0;
    right: 0;
  border-left: none;
    border-bottom: none;
    border-radius: 0 10px 0 0;
}

.corner.bottom-left[b-y4j8f07swf] {
    bottom: 0;
  left: 0;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 10px;
}

.corner.bottom-right[b-y4j8f07swf] {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-radius: 0 0 10px 0;
}

@keyframes cornerPulse-b-y4j8f07swf {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
    }
    50% {
  opacity: 0.6;
        box-shadow: 0 0 20px rgba(57, 255, 20, 0.8);
    }
}

/* Scanner Info */
.scanner-info[b-y4j8f07swf] {
  text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.scanner-info p[b-y4j8f07swf] {
    color: var(--ghost-white);
    margin: 0.5rem 0;
}

.status-info[b-y4j8f07swf] {
  color: var(--halloween-green);
}

.status-success[b-y4j8f07swf] {
    color: var(--halloween-green);
    font-weight: bold;
    animation: pulse 1s ease-in-out infinite;
}

.status-error[b-y4j8f07swf] {
    color: var(--blood-red);
}

/* Scanned Result */
.scanned-result[b-y4j8f07swf] {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(57, 255, 20, 0.1);
    border-radius: 10px;
    animation: fadeIn 0.5s ease;
}

.scanned-result h3[b-y4j8f07swf] {
    font-family: 'Creepster', cursive;
color: var(--halloween-green);
    margin-bottom: 1rem;
  font-size: 1.5rem;
}

.code-display[b-y4j8f07swf] {
    font-family: 'Courier New', monospace;
  background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border-radius: 10px;
    color: var(--halloween-green);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    word-break: break-all;
}

/* ✅ HYBRID: Completion Results */
.completion-result[b-y4j8f07swf] {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 10px;
    animation: fadeIn 0.5s ease;
}

.completion-result.success[b-y4j8f07swf] {
    background: rgba(57, 255, 20, 0.1);
    border: 2px solid var(--halloween-green);
}

.completion-result.error[b-y4j8f07swf] {
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid var(--blood-red);
}

/* First Finder */
.first-finder[b-y4j8f07swf] {
    animation: goldPulse-b-y4j8f07swf 1s ease-in-out 3;
}

.first-finder i[b-y4j8f07swf] {
    font-size: 4rem;
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    animation: trophySpin-b-y4j8f07swf 2s ease-in-out;
}

.first-finder h3[b-y4j8f07swf] {
    font-family: 'Creepster', cursive;
    color: #FFD700;
    font-size: 1.8rem;
 margin: 1rem 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.first-finder .points[b-y4j8f07swf] {
    font-size: 2rem;
font-family: 'Creepster', cursive;
color: var(--halloween-green);
    margin: 0.5rem 0;
}

.first-finder .coins[b-y4j8f07swf] {
    font-size: 1.5rem;
    font-family: 'Creepster', cursive;
    color: #FFD700;
  margin: 0.5rem 0;
}

/* Follower */
.follower i[b-y4j8f07swf] {
    font-size: 3rem;
    color: #4169E1;
    margin-bottom: 1rem;
}

.follower h3[b-y4j8f07swf] {
    font-family: 'Creepster', cursive;
 color: var(--halloween-green);
    font-size: 1.5rem;
    margin: 1rem 0;
}

.follower .points[b-y4j8f07swf],
.follower .coins[b-y4j8f07swf] {
    font-size: 1.5rem;
    font-family: 'Eater', cursive;
    color: var(--halloween-green);
    margin: 0.5rem 0;
}

.follower .discoverer[b-y4j8f07swf] {
    font-family: 'Eater', cursive;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1rem;
    font-size: 1rem;
}

.follower .discoverer strong[b-y4j8f07swf] {
    color: #FFD700;
}

.follower .time-ago[b-y4j8f07swf] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.5rem;
}

/* Error Result */
.error-result i[b-y4j8f07swf] {
    font-size: 4rem;
    color: var(--blood-red);
    margin-bottom: 1rem;
}

.error-result h3[b-y4j8f07swf] {
    font-family: 'Creepster', cursive;
    color: var(--blood-red);
    font-size: 1.5rem;
    margin: 1rem 0;
}

.error-result p[b-y4j8f07swf] {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

/* Animations */
@keyframes goldPulse-b-y4j8f07swf {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes trophySpin-b-y4j8f07swf {
    0% {
        transform: rotate(0deg) scale(0);
  opacity: 0;
    }
50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}
/* /Components/RadarPopup.razor.rz.scp.css */
/* Radar Overlay */
.radar-overlay[b-9vsgrg93sg] {
    position: fixed;
    top: 80px; /* ✅ FIX: Börjar under top-header (header är ~70px hög) */
    left: 0;
    right: 0;
    bottom: 0;
  background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
  display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    padding-top: 0.5rem; /* ✅ Mindre padding eftersom vi har top: 80px */
    overflow-y: auto; /* ✅ Scrollbar om innehållet är för högt */
}

.radar-overlay.visible[b-9vsgrg93sg] {
    display: flex;
    animation: fadeIn-b-9vsgrg93sg 0.3s ease;
}

.radar-header[b-9vsgrg93sg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin-bottom: 1rem;
    margin-top: 0.5rem; /* ✅ Lite marginal från toppen */
    z-index: 10;
    flex-shrink: 0; /* ✅ Förhindrar att headern krymps */
}

.radar-header h3[b-9vsgrg93sg] {
    font-family: 'Creepster', cursive;
    font-size: 1.8rem;
    color: var(--halloween-green);
    text-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
    margin: 0;
}

.radar-close[b-9vsgrg93sg] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.3);
  border: 2px solid var(--blood-red);
    color: var(--blood-red);
    font-size: 1.2rem;
  cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-close:active[b-9vsgrg93sg] {
    transform: scale(0.9);
    background: rgba(255, 0, 0, 0.5);
}

/* 🗺️ Leaflet Map Container */
.leaflet-map-container[b-9vsgrg93sg] {
    width: 100%;
  max-width: 600px;
    height: 400px;
    border: 3px solid var(--halloween-green);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(57, 255, 20, 0.4);
    position: relative; /* ✅ Viktigt: För att off-screen indicators ska positioneras relativt till kartan */
}

/* ✅ NEW: Off-screen indicators container */
.off-screen-indicators[b-9vsgrg93sg] {
    position: absolute;
    top: 0;
    left: 0;
width: 100%;
    height: 100%;
pointer-events: none;
    z-index: 1000; /* ✅ Ovanpå kartan men under controls */
}

/* ✅ NEW: Off-screen indicator (spelare utanför kartan) */
.off-screen-indicator[b-9vsgrg93sg] {
  position: absolute;
    width: 32px;
height: 32px;
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.9), rgba(65, 105, 225, 0.7));
    border: 2px solid #4169E1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 0 15px rgba(65, 105, 225, 0.8), 
      inset 0 0 10px rgba(255, 255, 255, 0.3);
    animation: offScreenPulse-b-9vsgrg93sg 2s ease-in-out infinite;
    pointer-events: auto;
    cursor: pointer;
}

.off-screen-indicator.monster-indicator[b-9vsgrg93sg] {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(255, 0, 0, 0.7));
    border-color: #FF0000;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
}

.off-screen-indicator i[b-9vsgrg93sg] {
    font-size: 0.9rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.distance-label[b-9vsgrg93sg] {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
 font-family: 'Eater', cursive;
    color: #4169E1;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9),
         0 0 10px rgba(65, 105, 225, 0.5);
    white-space: nowrap;
    font-weight: bold;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}

@keyframes offScreenPulse-b-9vsgrg93sg {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 15px rgba(65, 105, 225, 0.8),
      inset 0 0 10px rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
     box-shadow: 0 0 25px rgba(65, 105, 225, 1),
      inset 0 0 15px rgba(255, 255, 255, 0.5);
    }
}

/* Override Leaflet default styles */
.leaflet-map-container .leaflet-container[b-9vsgrg93sg] {
    background: #1a1a1a;
}

.leaflet-map-container .leaflet-tile[b-9vsgrg93sg] {
    filter: brightness(0.7) contrast(1.2); /* Darkened map for Halloween theme */
}

/* Player Arrow Icon */
.player-arrow-icon[b-9vsgrg93sg] {
    background: transparent !important;
    border: none !important;
}

.player-arrow[b-9vsgrg93sg] {
    transition: transform 0.3s ease;
}

/* Target Arrow (on map edge) */
.target-arrow[b-9vsgrg93sg] {
    font-family: 'Eater', cursive;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: targetPulse-b-9vsgrg93sg 1.5s ease-in-out infinite;
}

@keyframes targetPulse-b-9vsgrg93sg {
    0%, 100% {
   transform: translateX(-50%) scale(1);
    }
    50% {
    transform: translateX(-50%) scale(1.1);
    }
}

/* Radar Info */
.radar-info[b-9vsgrg93sg] {
    width: 100%;
    max-width: 600px;
margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    z-index: 10;
}

.info-item[b-9vsgrg93sg] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background: rgba(57, 255, 20, 0.1);
    border: 2px solid rgba(57, 255, 20, 0.3);
    border-radius: 10px;
    font-family: 'Eater', cursive;
    color: var(--ghost-white);
}

.info-item i[b-9vsgrg93sg] {
    font-size: 1.3rem;
    color: var(--halloween-green);
}

.info-item.target-info i[b-9vsgrg93sg] {
    color: var(--halloween-orange);
}

.info-item.players-info i[b-9vsgrg93sg] {
    color: #4169E1;
}

.info-item.monsters-info[b-9vsgrg93sg] {
    background: rgba(255, 0, 0, 0.1);
border-color: rgba(255, 0, 0, 0.4);
    animation: monsterWarning-b-9vsgrg93sg 2s ease-in-out infinite;
}

.info-item.monsters-info i[b-9vsgrg93sg] {
    color: #FF0000;
}

@keyframes monsterWarning-b-9vsgrg93sg {
  0%, 100% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    }
}

.info-item span[b-9vsgrg93sg] {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 480px) {
    .radar-overlay[b-9vsgrg93sg] {
        top: 70px; /* ✅ Lite mindre top på mobil */
    padding: 0.5rem;
    }

    .leaflet-map-container[b-9vsgrg93sg] {
        height: 300px; /* ✅ Mindre höjd på mobil */
 max-width: 100%;
    }
  
    .radar-header[b-9vsgrg93sg] {
  margin-top: 0.25rem;
    }
    
.radar-header h3[b-9vsgrg93sg] {
     font-size: 1.5rem;
    }
    
    .info-item[b-9vsgrg93sg] {
        padding: 0.6rem;
    }
    
    .info-item span[b-9vsgrg93sg] {
        font-size: 0.9rem;
    }
}

/* ✅ Desktop-specifik fix */
@media (min-width: 768px) {
    .radar-overlay[b-9vsgrg93sg] {
        padding: 2rem;
        padding-top: 1rem;
    }

    .radar-header[b-9vsgrg93sg] {
        margin-top: 1rem;
    }
}
@keyframes fadeIn-b-9vsgrg93sg {
 from {
  opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* /Components/ResumeGameDialog.razor.rz.scp.css */
/* ================================================
   RESUME GAME DIALOG
   ================================================ */

.resume-overlay[b-sbbu1egpjr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* ✅ Sänkt från 9999 → 2000 (under HUD som har 3000) */
    padding: 1rem;
    animation: fadeIn-b-sbbu1egpjr 0.3s ease;
}

.resume-dialog[b-sbbu1egpjr] {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(40, 20, 0, 0.98));
    border: 3px solid #ff6b00;
    border-radius: 15px;
    padding: 2rem;
    max-width: 500px;
width: 100%;
    max-height: 90vh; /* ✅ NYTT: Begränsa höjd */
    overflow-y: auto; /* ✅ NYTT: Scrollbart om för mycket innehåll */
    box-shadow: 0 10px 50px rgba(255, 107, 0, 0.5),
         0 0 100px rgba(255, 107, 0, 0.3);
    animation: slideUp-b-sbbu1egpjr 0.3s ease;
}

.resume-header[b-sbbu1egpjr] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.resume-header i[b-sbbu1egpjr] {
  font-size: 3rem;
    color: #ff6b00;
    margin-bottom: 0.5rem;
    display: block;
    animation: bounce-b-sbbu1egpjr 1s infinite;
}

.resume-header h2[b-sbbu1egpjr] {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: #ff9933;
    text-shadow: 2px 2px 4px #000;
    margin: 0;
}

/* ================================================
   RESUME CONTENT
   ================================================ */

.resume-content[b-sbbu1egpjr] {
    margin-bottom: 1.5rem;
}

.resume-message[b-sbbu1egpjr] {
    text-align: center;
    color: #ccc;
    font-size: 1.1rem;
margin-bottom: 1rem;
}

.resume-stats[b-sbbu1egpjr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.resume-stat[b-sbbu1egpjr] {
    background: rgba(255, 107, 0, 0.1);
  border: 2px solid rgba(255, 107, 0, 0.3);
    border-radius: 10px;
    padding: 1rem;
 display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.resume-stat i[b-sbbu1egpjr] {
    font-size: 1.5rem;
    color: #ff6b00;
}

.stat-label[b-sbbu1egpjr] {
    font-size: 0.9rem;
  color: #999;
}

.stat-value[b-sbbu1egpjr] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ff9933;
}

.stat-value.low-health[b-sbbu1egpjr] {
    color: #ff3333;
    animation: pulse-b-sbbu1egpjr 1s infinite;
}

/* ================================================
   HEALTH WARNING
   ================================================ */

.health-warning[b-sbbu1egpjr] {
    background: rgba(255, 51, 51, 0.2);
    border: 2px solid rgba(255, 51, 51, 0.5);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    margin-top: 1rem;
}

.health-warning i[b-sbbu1egpjr] {
 font-size: 2rem;
  color: #ff3333;
  display: block;
    margin-bottom: 0.5rem;
    animation: pulse-b-sbbu1egpjr 1s infinite;
}

.health-warning p[b-sbbu1egpjr] {
    color: #ffaa99;
    margin: 0;
    font-size: 1rem;
}

/* ================================================
   RESUME ACTIONS
   ================================================ */

.resume-actions[b-sbbu1egpjr] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.resume-actions .btn[b-sbbu1egpjr] {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-resume[b-sbbu1egpjr] {
    background: linear-gradient(135deg, #00c853, #00e676);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 200, 83, 0.4);
}

.btn-resume:hover[b-sbbu1egpjr] {
    background: linear-gradient(135deg, #00e676, #00ff88);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.6);
}

.btn-heal[b-sbbu1egpjr] {
    background: linear-gradient(135deg, #ff3366, #ff5588);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 51, 102, 0.4);
}

.btn-heal:hover[b-sbbu1egpjr] {
    background: linear-gradient(135deg, #ff5588, #ff77aa);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 51, 102, 0.6);
}

.btn-restart[b-sbbu1egpjr] {
    background: linear-gradient(135deg, #ff6b00, #ff8800);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
}

.btn-restart:hover[b-sbbu1egpjr] {
    background: linear-gradient(135deg, #ff8800, #ffaa00);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.6);
}

/* ================================================
   RESUME HINT
   ================================================ */

.resume-hint[b-sbbu1egpjr] {
    text-align: center;
    color: #999;
    font-size: 0.9rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

.resume-hint i[b-sbbu1egpjr] {
    color: #ff6b00;
}

/* ================================================
   ANIMATIONS
   ================================================ */

@keyframes fadeIn-b-sbbu1egpjr {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-sbbu1egpjr {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounce-b-sbbu1egpjr {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-b-sbbu1egpjr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
    .resume-overlay[b-sbbu1egpjr] {
        padding: 0.5rem; /* ✅ Mindre padding på mobil */
        align-items: flex-start; /* ✅ Börja högst upp istället för center */
        padding-top: 80px; /* ✅ Utrymme för HUD */
    }

    .resume-dialog[b-sbbu1egpjr] {
   padding: 1rem; /* ✅ Mindre padding */
        max-height: calc(100vh - 160px); /* ✅ Ta hänsyn till HUD (80px) + bottom menu (80px) */
        margin: 0; /* ✅ Ta bort margin */
    }

    .resume-header[b-sbbu1egpjr] {
        margin-bottom: 1rem;
    }

    .resume-header i[b-sbbu1egpjr] {
   font-size: 2rem; /* ✅ Mindre ikon */
    }

    .resume-header h2[b-sbbu1egpjr] {
      font-size: 1.3rem; /* ✅ Mindre rubrik */
    }

    .resume-message[b-sbbu1egpjr] {
        font-size: 0.9rem; /* ✅ Mindre text */
        margin-bottom: 0.8rem;
    }

 .resume-stats[b-sbbu1egpjr] {
      grid-template-columns: repeat(2, 1fr); /* ✅ Behåll 2 kolumner */
        gap: 0.5rem;
    }

    .resume-stat[b-sbbu1egpjr] {
        padding: 0.6rem; /* ✅ Mindre padding */
 }

    .resume-stat i[b-sbbu1egpjr] {
        font-size: 1.2rem;
    }

    .stat-value[b-sbbu1egpjr] {
 font-size: 1.2rem;
    }

    .health-warning[b-sbbu1egpjr] {
        padding: 0.8rem;
        margin-top: 0.8rem;
    }

    .health-warning i[b-sbbu1egpjr] {
        font-size: 1.5rem;
}

    .health-warning p[b-sbbu1egpjr] {
        font-size: 0.9rem;
    }

    .resume-actions[b-sbbu1egpjr] {
        gap: 0.6rem;
    }

    .resume-actions .btn[b-sbbu1egpjr] {
        font-size: 0.9rem;
  padding: 0.8rem;
    }

    .resume-hint[b-sbbu1egpjr] {
        font-size: 0.8rem;
  margin-top: 0.8rem;
    }
}

@media (max-width: 480px) {
    .resume-overlay[b-sbbu1egpjr] {
        padding-top: 70px; /* ✅ Ännu mindre för små skärmar */
    }

.resume-dialog[b-sbbu1egpjr] {
   max-height: calc(100vh - 140px);
     padding: 0.8rem;
    }

    .resume-header h2[b-sbbu1egpjr] {
      font-size: 1.1rem;
    }

    .resume-stats[b-sbbu1egpjr] {
        gap: 0.4rem;
    }

    .resume-stat[b-sbbu1egpjr] {
        padding: 0.5rem;
    }

    .stat-label[b-sbbu1egpjr] {
        font-size: 0.8rem;
    }

    .stat-value[b-sbbu1egpjr] {
     font-size: 1rem;
 }

    .resume-actions .btn[b-sbbu1egpjr] {
        font-size: 0.85rem;
        padding: 0.7rem;
    }
}
/* /Components/TeamNotifications.razor.rz.scp.css */
/* Team Notifications */
.team-notifications[b-citrpo02w9] {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
}

.team-notification[b-citrpo02w9] {
    background: rgba(57, 255, 20, 0.95);
    border: 2px solid var(--halloween-green);
    border-radius: 10px;
    padding: 15px 20px;
    color: #000;
    font-family: 'Eater', cursive;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
    backdrop-filter: blur(10px);
}

.team-notification.first-find[b-citrpo02w9] {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-color: #FFD700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    animation: goldGlow-b-citrpo02w9 2s ease-in-out infinite;
}

.team-notification.follow-find[b-citrpo02w9] {
    background: rgba(65, 105, 225, 0.95);
    border-color: #4169E1;
    color: white;
    box-shadow: 0 0 20px rgba(65, 105, 225, 0.6);
}

.team-notification.riddle-solved[b-citrpo02w9] {
    background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
    border-color: #9C27B0;
    color: white;
    box-shadow: 0 0 25px rgba(156, 39, 176, 0.7);
    animation: brainPulse-b-citrpo02w9 2s ease-in-out infinite;
}

/* ✅ NY: BOSS WARNING STYLE */
.team-notification.boss-warning[b-citrpo02w9] {
    background: linear-gradient(135deg, #FF4500 0%, #8B0000 100%);
    border: 3px solid #FFD700;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 0 40px rgba(255, 69, 0, 1);
    animation: bossWarningPulse-b-citrpo02w9 1s ease-in-out infinite;
    white-space: pre-line; /* Tillåt line breaks i meddelandet */
}

.team-notification i[b-citrpo02w9] {
    margin-right: 10px;
    font-size: 1.2rem;
}

.team-notification strong[b-citrpo02w9] {
    color: inherit;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes slideInRight-b-citrpo02w9 {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut-b-citrpo02w9 {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
transform: translateX(400px);
    opacity: 0;
    }
}

@keyframes goldGlow-b-citrpo02w9 {
    0%, 100% {
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  }
    50% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 1);
    }
}

@keyframes brainPulse-b-citrpo02w9 {
    0%, 100% {
        box-shadow: 0 0 25px rgba(156, 39, 176, 0.7);
    }
    50% {
    box-shadow: 0 0 40px rgba(156, 39, 176, 1);
  }
}

/* ✅ NY: BOSS WARNING ANIMATION */
@keyframes bossWarningPulse-b-citrpo02w9 {
    0%, 100% {
   box-shadow: 0 0 40px rgba(255, 69, 0, 1);
        transform: scale(1);
    }
    50% {
    box-shadow: 0 0 60px rgba(255, 69, 0, 1), 0 0 80px rgba(255, 215, 0, 0.8);
        transform: scale(1.05);
    }
}

.slide-in[b-citrpo02w9] {
    animation: slideInRight-b-citrpo02w9 0.5s ease-out;
}

.fade-out[b-citrpo02w9] {
    animation: fadeOut-b-citrpo02w9 0.5s ease-in forwards;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .team-notifications[b-citrpo02w9] {
      top: 80px;
        right: 10px;
     left: 10px;
        max-width: none;
    }
    
    .team-notification[b-citrpo02w9] {
      padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    .team-notification i[b-citrpo02w9] {
     font-size: 1rem;
    }
}
/* /Pages/Admin.razor.rz.scp.css */
/* Admin Container */
.admin-container[b-bmsa8jiag5] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

.admin-container h1[b-bmsa8jiag5] {
    font-family: 'Creepster', cursive;
    font-size: 2.5rem;
    color: var(--halloween-orange);
text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.subtitle[b-bmsa8jiag5] {
    text-align: center;
    color: var(--ghost-white);
    opacity: 0.8;
    margin-bottom: 2rem;
}

/* Unlock Section */
.unlock-section[b-bmsa8jiag5] {
    max-width: 400px;
    margin: 4rem auto;
    padding: 2rem;
 background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--halloween-green);
    border-radius: 15px;
    text-align: center;
}

.unlock-section h2[b-bmsa8jiag5] {
  font-family: 'Eater', cursive;
    color: var(--halloween-green);
    margin-bottom: 1rem;
}

/* Admin Content */
.admin-content[b-bmsa8jiag5] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.admin-section[b-bmsa8jiag5] {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 15px;
    padding: 2rem;
}

.admin-section h2[b-bmsa8jiag5] {
    font-family: 'Eater', cursive;
    color: var(--halloween-orange);
    margin-bottom: 1.5rem;
}

/* Game Code Section */
.game-code-section[b-bmsa8jiag5] {
    text-align: center;
    border-color: var(--halloween-green);
    background: rgba(57, 255, 20, 0.05);
}

.game-code-input[b-bmsa8jiag5] {
    text-transform: uppercase;
    font-size: 1.3rem;
    text-align: center;
    font-weight: bold;
}

/* Setup Header */
.setup-header[b-bmsa8jiag5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(57, 255, 20, 0.1);
  border-color: var(--halloween-green);
}

.setup-info h2[b-bmsa8jiag5] {
 margin-bottom: 0.5rem;
    color: var(--halloween-green);
}

.setup-info p[b-bmsa8jiag5] {
    color: rgba(255, 255, 255, 0.8);
 margin: 0.3rem 0;
 font-size: 0.9rem;
}

/* Upload Section */
.upload-section[b-bmsa8jiag5] {
    background: rgba(57, 255, 20, 0.05);
    border-color: var(--halloween-green);
    text-align: center;
}

.upload-status[b-bmsa8jiag5] {
    min-height: 50px;
 margin: 1rem 0;
}

.status-info[b-bmsa8jiag5] {
    color: var(--halloween-green);
    font-family: 'Eater', cursive;
}

.status-success[b-bmsa8jiag5] {
    color: var(--halloween-green);
    font-family: 'Eater', cursive;
    font-weight: bold;
    animation: pulse 1s ease-in-out 3;
}

.status-error[b-bmsa8jiag5] {
  color: var(--blood-red);
    font-family: 'Eater', cursive;
}

/* Location Card */
.location-card[b-bmsa8jiag5] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.location-card h3[b-bmsa8jiag5] {
    font-family: 'Eater', cursive;
    color: var(--halloween-green);
  margin-bottom: 1rem;
}

/* Form Elements */
.form-group[b-bmsa8jiag5] {
    margin-bottom: 1.5rem;
}

.form-group label[b-bmsa8jiag5] {
    display: block;
  font-family: 'Eater', cursive;
  color: var(--halloween-green);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.admin-input[b-bmsa8jiag5],
.admin-textarea[b-bmsa8jiag5] {
    width: 100%;
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 10px;
    color: var(--ghost-white);
    font-size: 1rem;
    font-family: inherit;
}

.admin-input:focus[b-bmsa8jiag5],
.admin-textarea:focus[b-bmsa8jiag5] {
    outline: none;
 border-color: var(--halloween-orange);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

.admin-textarea[b-bmsa8jiag5] {
    resize: vertical;
    min-height: 100px;
}

.hint-text[b-bmsa8jiag5] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 0.5rem;
}

/* GPS Display */
.gps-display[b-bmsa8jiag5] {
    background: rgba(57, 255, 20, 0.1);
    border: 2px solid var(--halloween-green);
  border-radius: 10px;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    color: var(--halloween-green);
    margin-bottom: 1rem;
}

/* QR Section */
.qr-section[b-bmsa8jiag5] {
text-align: center;
    padding: 1.5rem;
background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
    margin-top: 1rem;
}

.qr-section h4[b-bmsa8jiag5] {
    color: var(--halloween-orange);
    margin-bottom: 1rem;
}

.qr-code-display[b-bmsa8jiag5] {
    display: inline-block;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    margin: 1rem 0;
}

/* Buttons */
.btn[b-bmsa8jiag5] {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Eater', cursive;
  cursor: pointer;
    transition: all 0.3s ease;
  font-weight: bold;
}

.btn:disabled[b-bmsa8jiag5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-bmsa8jiag5] {
    background: linear-gradient(135deg, var(--halloween-orange), #ff8c00);
    color: #000;
}

.btn-primary:not(:disabled):hover[b-bmsa8jiag5] {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
}

.btn-secondary[b-bmsa8jiag5] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--ghost-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover[b-bmsa8jiag5] {
    background: rgba(255, 255, 255, 0.2);
}

.btn-success[b-bmsa8jiag5] {
    background: linear-gradient(135deg, var(--halloween-green), #2dc437);
    color: #000;
}

.btn-info[b-bmsa8jiag5] {
    background: linear-gradient(135deg, #4169e1, #6495ed);
    color: #fff;
}

.btn-back[b-bmsa8jiag5] {
 background: rgba(255, 0, 0, 0.2);
    color: #ff4444;
    border: 2px solid var(--blood-red);
}

/* Large Buttons */
.btn-large[b-bmsa8jiag5] {
    padding: 1.2rem 2rem;
    font-size: 1.2rem;
}

/* Navigation Buttons */
.navigation-buttons[b-bmsa8jiag5] {
  display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.navigation-buttons .btn[b-bmsa8jiag5] {
    flex: 1;
}

/* Export Buttons */
.export-buttons[b-bmsa8jiag5] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.export-buttons .btn[b-bmsa8jiag5] {
    flex: 1;
}

/* Error Message */
.error-message[b-bmsa8jiag5] {
    background: rgba(255, 0, 0, 0.2);
    border: 2px solid var(--blood-red);
    border-radius: 10px;
    padding: 0.8rem;
    color: #ff4444;
    margin-top: 1rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-container[b-bmsa8jiag5] {
    padding: 1rem;
    }

    .admin-container h1[b-bmsa8jiag5] {
        font-size: 2rem;
    }

    .admin-section[b-bmsa8jiag5] {
        padding: 1.5rem;
    }

    .export-buttons[b-bmsa8jiag5] {
        flex-direction: column;
    }

    .navigation-buttons[b-bmsa8jiag5] {
        flex-direction: column;
    }
}

/* 🗺️ Admin Map Section */
.map-section[b-bmsa8jiag5] {
    background: rgba(57, 255, 20, 0.05);
    border-color: var(--halloween-green);
}

.admin-map-container[b-bmsa8jiag5] {
    width: 100%;
    height: 500px;
    border: 3px solid var(--halloween-green);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.3);
    margin-bottom: 1rem;
}

.map-controls[b-bmsa8jiag5] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.map-controls .btn[b-bmsa8jiag5] {
    flex: 1;
    max-width: 250px;
}

/* Responsive map */
@media (max-width: 768px) {
    .admin-map-container[b-bmsa8jiag5] {
    height: 400px;
    }

    .map-controls[b-bmsa8jiag5] {
   flex-direction: column;
    }

  .map-controls .btn[b-bmsa8jiag5] {
        max-width: 100%;
    }
}

/* ================================================
   ✅ NY: SAVED HUNTS LIST
   ================================================ */

.saved-hunts-section[b-bmsa8jiag5] {
    background: rgba(57, 255, 20, 0.05);
    border: 2px solid var(--halloween-green);
  border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.saved-hunts-section h3[b-bmsa8jiag5] {
    font-family: 'Eater', cursive;
    color: var(--halloween-green);
    margin-bottom: 1rem;
    text-align: center;
}

.loading-text[b-bmsa8jiag5] {
    text-align: center;
    color: var(--halloween-green);
    font-family: 'Eater', cursive;
    padding: 2rem;
}

.hunts-list[b-bmsa8jiag5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}

.hunt-card[b-bmsa8jiag5] {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hunt-card.complete[b-bmsa8jiag5] {
    border-color: var(--halloween-green);
    background: rgba(57, 255, 20, 0.05);
}

.hunt-card.incomplete[b-bmsa8jiag5] {
 border-color: rgba(255, 165, 0, 0.5);
    background: rgba(255, 165, 0, 0.05);
}

.hunt-card:hover[b-bmsa8jiag5] {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(255, 107, 53, 0.3);
}

.hunt-info[b-bmsa8jiag5] {
    flex: 1;
}

.hunt-info h4[b-bmsa8jiag5] {
    font-family: 'Creepster', cursive;
 color: var(--halloween-orange);
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
}

.hunt-info p[b-bmsa8jiag5] {
    color: rgba(255, 255, 255, 0.8);
    margin: 0.3rem 0;
    font-size: 0.9rem;
}

.hunt-info p i[b-bmsa8jiag5] {
    color: var(--halloween-green);
    margin-right: 0.5rem;
}

.status-badge[b-bmsa8jiag5] {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-family: 'Eater', cursive;
    margin-top: 0.5rem;
}

.status-badge.complete[b-bmsa8jiag5] {
    background: rgba(57, 255, 20, 0.2);
color: var(--halloween-green);
    border: 1px solid var(--halloween-green);
}

.status-badge.incomplete[b-bmsa8jiag5] {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid #ffa500;
}

.hunt-actions[b-bmsa8jiag5] {
    display: flex;
    gap: 0.5rem;
}

.btn-small[b-bmsa8jiag5] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    flex: 1;
}

.btn-danger[b-bmsa8jiag5] {
    background: rgba(255, 0, 0, 0.2);
    color: var(--blood-red);
    border: 2px solid var(--blood-red);
    flex: 0 0 auto;
    padding: 0.5rem 0.8rem;
}

.btn-danger:hover[b-bmsa8jiag5] {
    background: rgba(255, 0, 0, 0.4);
    transform: scale(1.05);
}

/* Responsive hunts list */
@media (max-width: 768px) {
    .hunts-list[b-bmsa8jiag5] {
        grid-template-columns: 1fr;
        max-height: 300px;
    }
    
    .hunt-card[b-bmsa8jiag5] {
        padding: 0.8rem;
    }
}

/* ================================================
   ✅ NY: SELECTED LOCATION CARD
   ================================================ */

.selected-location-card[b-bmsa8jiag5] {
    background: rgba(57, 255, 20, 0.1);
    border: 3px solid var(--halloween-green);
    border-radius: 15px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    animation: slideDown-b-bmsa8jiag5 0.3s ease-out;
}

@keyframes slideDown-b-bmsa8jiag5 {
    from {
  opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
  transform: translateY(0);
    }
}

.selected-location-header[b-bmsa8jiag5] {
    display: flex;
    justify-content: space-between;
 align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(57, 255, 20, 0.3);
}

.selected-location-header h3[b-bmsa8jiag5] {
    font-family: 'Eater', cursive;
  color: var(--halloween-green);
    margin: 0;
    font-size: 1.3rem;
}

.btn-close[b-bmsa8jiag5] {
    background: rgba(255, 0, 0, 0.2);
    color: var(--blood-red);
    border: 2px solid var(--blood-red);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0;
    transition: all 0.3s ease;
}

.btn-close:hover[b-bmsa8jiag5] {
    background: rgba(255, 0, 0, 0.4);
    transform: rotate(90deg);
}

.selected-location-content[b-bmsa8jiag5] {
    display: grid;
  grid-template-columns: 1fr 1fr;
 gap: 2rem;
    align-items: start;
}

.location-info-column[b-bmsa8jiag5] {
    display: flex;
 flex-direction: column;
    gap: 0.5rem;
}

.location-info-column p[b-bmsa8jiag5] {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.location-info-column p strong[b-bmsa8jiag5] {
    color: var(--halloween-green);
    font-family: 'Eater', cursive;
}

.location-clue[b-bmsa8jiag5] {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(57, 255, 20, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 0.5rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
}

.location-qr-column[b-bmsa8jiag5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.selected-qr-display[b-bmsa8jiag5] {
    background: white;
  padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    min-height: 250px;
    min-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-qr-column .btn[b-bmsa8jiag5] {
    width: 100%;
    max-width: 250px;
}

/* Responsive selected location */
@media (max-width: 768px) {
    .selected-location-content[b-bmsa8jiag5] {
    grid-template-columns: 1fr;
   gap: 1.5rem;
    }

    .selected-qr-display[b-bmsa8jiag5] {
        min-height: 200px;
        min-width: 200px;
    }

    .location-qr-column .btn[b-bmsa8jiag5] {
        max-width: 100%;
    }
}

/* ================================================
   ✅ NY: AUTO-GENERATE SECTION
   ================================================ */

.auto-generate-section[b-bmsa8jiag5] {
    background: rgba(57, 255, 20, 0.1);
    border: 2px solid var(--halloween-green);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    animation: pulseGlow-b-bmsa8jiag5 2s ease-in-out infinite;
}

@keyframes pulseGlow-b-bmsa8jiag5 {
    0%, 100% {
        box-shadow: 0 0 15px rgba(57, 255, 20, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(57, 255, 20, 0.6);
    }
}

.auto-generate-section .btn[b-bmsa8jiag5] {
    margin-bottom: 1rem;
}

.auto-generate-section .hint-text[b-bmsa8jiag5] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.auto-generate-section .hint-text strong[b-bmsa8jiag5] {
    color: var(--halloween-green);
    font-weight: bold;
}

/* ================================================
   NY: IMAGE UPLOAD
   ================================================ */

.location-image-preview[b-bmsa8jiag5] {
    margin: 1rem 0;
    border: 2px solid rgba(57, 255, 20, 0.3);
 border-radius: 10px;
    overflow: hidden;
    max-width: 400px;
}

.location-image-preview img[b-bmsa8jiag5] {
    width: 100%;
    height: auto;
    display: block;
}

.image-upload-input[b-bmsa8jiag5] {
  width: 100%;
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 107, 53, 0.5);
    border-radius: 10px;
    color: var(--ghost-white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-upload-input:hover[b-bmsa8jiag5] {
    border-color: var(--halloween-orange);
    background: rgba(255, 107, 53, 0.1);
}

/* ================================================
   ✅ NY: LOCATION MARKER ICONS (för Leaflet-kartan)
   ================================================ */

/* Location Marker Style */
.location-marker[b-bmsa8jiag5] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--halloween-orange), #ff8c00);
    border: 3px solid white;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.location-marker:hover[b-bmsa8jiag5] {
    transform: rotate(-45deg) scale(1.2);
    box-shadow: 0 6px 15px rgba(255, 107, 53, 0.7);
}

.marker-number[b-bmsa8jiag5] {
    transform: rotate(45deg);
    color: white;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Eater', cursive;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Admin Player Icon */
.admin-player-icon[b-bmsa8jiag5] {
    animation: playerPulse-b-bmsa8jiag5 2s ease-in-out infinite;
}

@keyframes playerPulse-b-bmsa8jiag5 {
    0%, 100% {
   transform: scale(1);
    }
    50% {
   transform: scale(1.1);
    }
}

/* Location Popup Styles */
.location-popup[b-bmsa8jiag5] {
    font-family: 'Arial', sans-serif;
  min-width: 200px;
}

.location-popup h4[b-bmsa8jiag5] {
    font-family: 'Creepster', cursive;
    color: var(--halloween-orange);
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
}

.location-popup p[b-bmsa8jiag5] {
    margin: 0.3rem 0;
    color: #333;
}

.location-popup .coords[b-bmsa8jiag5] {
    font-family: 'Courier New', monospace;
 font-size: 0.85rem;
    color: #666;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    border-radius: 5px;
    margin: 0.5rem 0;
}

.location-popup .qr-id[b-bmsa8jiag5] {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #999;
}

.popup-btn[b-bmsa8jiag5] {
    display: block;
    width: 100%;
    padding: 0.6rem;
    margin: 0.5rem 0;
    border: none;
    border-radius: 5px;
    font-family: 'Eater', cursive;
 font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.popup-btn.primary[b-bmsa8jiag5] {
    background: linear-gradient(135deg, var(--halloween-orange), #ff8c00);
    color: white;
}

.popup-btn.primary:hover[b-bmsa8jiag5] {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.5);
}

.popup-btn.delete[b-bmsa8jiag5] {
    background: rgba(255, 0, 0, 0.2);
 color: var(--blood-red);
    border: 2px solid var(--blood-red);
}

.popup-btn.delete:hover[b-bmsa8jiag5] {
    background: rgba(255, 0, 0, 0.4);
}
/* /Pages/Demo.razor.rz.scp.css */
/* SVG Icon Containers - BEGRÄNSAT till 40x40px! */
.pumpkin-icon[b-3kufkswh0m],
.ghost-icon[b-3kufkswh0m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;  /* ✅ BEGRÄNSAT från 50px */
    height: 40px; /* ✅ BEGRÄNSAT från 50px */
    flex-shrink: 0; /* ✅ Låt inte växa */
}

.pumpkin-icon img[b-3kufkswh0m],
.ghost-icon img[b-3kufkswh0m] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Icon Animations */
.pumpkin-icon[b-3kufkswh0m] {
    animation: pumpkinBob-b-3kufkswh0m 2s ease-in-out infinite;
}

.ghost-icon[b-3kufkswh0m] {
    animation: ghostFloat-b-3kufkswh0m 3s ease-in-out infinite;
}

@keyframes pumpkinBob-b-3kufkswh0m {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes ghostFloat-b-3kufkswh0m {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-15px) rotate(-2deg); }
}

/* ================================================
   DEMO HUD - KOPIERAT FRÅN MULTIPLAYER
   ================================================ */

.game-hud[b-3kufkswh0m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(8px);
    padding: 0.8rem 1rem;
    border-bottom: 2px solid rgba(255, 107, 53, 0.2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hud-stats[b-3kufkswh0m] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
    align-items: center;
    flex-wrap: wrap;
}

.hud-stat[b-3kufkswh0m] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    font-family: 'Eater', cursive;
transition: all 0.3s ease;
    min-width: 80px;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.hud-stat i[b-3kufkswh0m] {
    font-size: 1.2rem;
}

.hud-stat span[b-3kufkswh0m] {
    font-size: 1.3rem;
    font-weight: bold;
}

.hud-stat.health[b-3kufkswh0m] {
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff4444;
}

.hud-stat.health.low[b-3kufkswh0m] {
    animation: hudHealthWarning-b-3kufkswh0m 1s ease-in-out infinite;
  border-color: rgba(255, 0, 0, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
}

@keyframes hudHealthWarning-b-3kufkswh0m {
    0%, 100% {
     transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
}

.hud-stat.coins[b-3kufkswh0m] {
    border-color: rgba(255, 215, 0, 0.3);
 color: #FFD700;
}

.hud-stat.score[b-3kufkswh0m] {
 border-color: rgba(255, 107, 53, 0.3);
    color: var(--halloween-orange);
}

/* ✅ DEMO MODE BADGE */
.demo-mode-badge[b-3kufkswh0m] {
    padding: 0.5rem 1rem;
    background: rgba(138, 43, 226, 0.3);
    border: 2px solid #8B2BE2;
    border-radius: 20px;
    color: #DA70D6;
    font-family: 'Eater', cursive;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
 gap: 0.5rem;
    animation: demoPulse-b-3kufkswh0m 2s ease-in-out infinite;
}

@keyframes demoPulse-b-3kufkswh0m {
    0%, 100% {
        box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(138, 43, 226, 0.6);
    }
}

/* ✅ MINI RADAR - DEMO VERSION */
.mini-radar[b-3kufkswh0m] {
    position: relative;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(0, 255, 0, 0.1), rgba(0, 0, 0, 0.8));
    border: 2px solid var(--halloween-green);
    border-radius: 50%;
    cursor: pointer;
 transition: all 0.3s ease;
  overflow: hidden;
    flex-shrink: 0;
}

.mini-radar.demo-radar[b-3kufkswh0m] {
    border-color: #8B2BE2;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.1), rgba(0, 0, 0, 0.8));
    cursor: default;
}

.mini-radar:hover:not(.demo-radar)[b-3kufkswh0m] {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
}

.mini-radar-circle[b-3kufkswh0m] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 50%;
    pointer-events: none;
}

.mini-radar-circle:nth-child(1)[b-3kufkswh0m] {
    width: 30%;
    height: 30%;
}

.mini-radar-circle:nth-child(2)[b-3kufkswh0m] {
    width: 60%;
    height: 60%;
}

.mini-radar-directions[b-3kufkswh0m] {
    position: absolute;
    inset: 0;
 pointer-events: none;
}

.radar-direction[b-3kufkswh0m] {
    position: absolute;
    font-size: 8px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.radar-direction.north[b-3kufkswh0m] {
    top: 8px;
  left: 50%;
    transform: translateX(-50%);
    color: #ff0000;
}

.radar-direction.east[b-3kufkswh0m] {
    right: 8px;
    top: 50%;
  transform: translateY(-50%);
}

.radar-direction.south[b-3kufkswh0m] {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.radar-direction.west[b-3kufkswh0m] {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.mini-blip[b-3kufkswh0m] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
}

.mini-blip.player-blip[b-3kufkswh0m] {
    background: #00FF00;
    box-shadow: 0 0 8px #00FF00;
    width: 8px;
    height: 8px;
}

.mini-blip.target-blip[b-3kufkswh0m] {
    background: #FF6B35;
    box-shadow: 0 0 8px #FF6B35;
    animation: targetPulse-b-3kufkswh0m 1.5s ease-in-out infinite;
}

.mini-blip.monster-blip[b-3kufkswh0m] {
    background: #FF0000;
    box-shadow: 0 0 8px #FF0000;
    animation: monsterPulse-b-3kufkswh0m 1s ease-in-out infinite;
}

@keyframes targetPulse-b-3kufkswh0m {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
     opacity: 1;
    }
    50% {
  transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.7;
    }
}

@keyframes monsterPulse-b-3kufkswh0m {
  0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* ✅ MULTIPLAYER BUTTON - DEMO (UTGRÅAD) */
.hud-multiplayer-btn[b-3kufkswh0m] {
    position: relative;
    background: rgba(65, 105, 225, 0.2);
    border: 2px solid #4169E1;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4169E1;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.hud-multiplayer-btn.demo-disabled[b-3kufkswh0m] {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.demo-lock[b-3kufkswh0m] {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #FF0000;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

/* ✅ RESPONSIVE HUD */
@media (max-width: 768px) {
    .hud-stats[b-3kufkswh0m] {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .hud-stat[b-3kufkswh0m] {
      min-width: 70px;
        padding: 0.4rem 0.8rem;
    }

    .mini-radar[b-3kufkswh0m] {
    width: 60px;
        height: 60px;
    }

    .hud-multiplayer-btn[b-3kufkswh0m] {
        width: 50px;
        height: 50px;
   font-size: 1.2rem;
    }

    .demo-mode-badge[b-3kufkswh0m] {
        font-size: 0.75rem;
     padding: 0.4rem 0.8rem;
    }
}

/* ================================================
   GAME CONTAINER & MAIN AREA
   ================================================ */

.game-container[b-3kufkswh0m] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 75px 1rem 70px 1rem;
    min-height: 100vh;
}

.game-main[b-3kufkswh0m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ================================================
   GAME TITLE
   ================================================ */

.game-title[b-3kufkswh0m] {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: var(--halloween-orange);
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    margin-bottom: 1rem;
    text-align: center;
    animation: titleFloat-b-3kufkswh0m 3s ease-in-out infinite;
    display: flex;
 align-items: center;
    justify-content: center;
    gap: 1rem;
}

@keyframes titleFloat-b-3kufkswh0m {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* ================================================
   RIDDLE & CLUE CARDS
================================================ */

.riddle-card[b-3kufkswh0m],
.clue-card[b-3kufkswh0m] {
    background: rgba(10, 10, 10, 0.8);
    border: 3px solid var(--halloween-orange);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.3),
      inset 0 0 20px rgba(255, 107, 53, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.riddle-card:hover[b-3kufkswh0m],
.clue-card:hover[b-3kufkswh0m] {
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.5),
             inset 0 0 30px rgba(255, 107, 53, 0.2);
    transform: translateY(-5px);
}

.riddle-header[b-3kufkswh0m] {
    text-align: center;
    margin-bottom: 0.8rem;
}

.riddle-number[b-3kufkswh0m] {
    font-family: 'Eater', cursive;
font-size: 1rem;
    color: var(--halloween-green);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

.riddle-text[b-3kufkswh0m] {
    font-family: 'Eater', cursive;
    font-size: 1.15rem;
    color: #ff4444;
    text-align: center;
    white-space: pre-line;
    line-height: 1.35;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(255, 68, 68, 0.5),
        0 0 30px rgba(255, 68, 68, 0.3);
}

.clue-text[b-3kufkswh0m] {
    font-family: 'Eater', cursive;
    font-size: 1.1rem;
    color: var(--halloween-green);
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

/* ================================================
   INPUT & BUTTONS
   ================================================ */

.answer-input[b-3kufkswh0m],
.clue-input[b-3kufkswh0m] {
 width: 100%;
    padding: 0.9rem;
    font-size: 1rem;
    font-family: 'Eater', cursive;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--halloween-purple);
    border-radius: 10px;
    color: var(--ghost-white);
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
}

.answer-input:focus[b-3kufkswh0m],
.clue-input:focus[b-3kufkswh0m] {
    outline: none;
    border-color: var(--halloween-orange);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.answer-section-inline[b-3kufkswh0m] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.answer-section-inline .answer-input[b-3kufkswh0m] {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

.answer-section-inline .answer-input[b-3kufkswh0m] {
        width: 100%;
    }
}

/* ================================================
   DEMO WELCOME SCREEN
   ================================================ */

.demo-welcome[b-3kufkswh0m] {
    max-width: 600px;
    margin: 2rem auto;
    animation: fadeIn-b-3kufkswh0m 0.5s ease;
}

@keyframes fadeIn-b-3kufkswh0m {
    from {
        opacity: 0;
     transform: translateY(20px);
    }
    to {
   opacity: 1;
        transform: translateY(0);
    }
}

.demo-content[b-3kufkswh0m] {
    background: rgba(10, 10, 10, 0.8);
    border: 3px solid #8B2BE2;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 0 40px rgba(138, 43, 226, 0.4),
      inset 0 0 20px rgba(138, 43, 226, 0.1);
    backdrop-filter: blur(10px);
}

.demo-welcome-title[b-3kufkswh0m] {
    font-family: 'Creepster', cursive;
    font-size: 2.5rem;
    color: #DA70D6;
 text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(138, 43, 226, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.demo-intro[b-3kufkswh0m] {
    text-align: center;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.demo-features-list[b-3kufkswh0m] {
    display: flex;
  flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.demo-feature[b-3kufkswh0m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(138, 43, 226, 0.1);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.demo-feature:hover[b-3kufkswh0m] {
    background: rgba(138, 43, 226, 0.2);
  transform: translateX(5px);
}

.demo-feature.disabled[b-3kufkswh0m] {
    opacity: 0.5;
    border-color: rgba(255, 0, 0, 0.3);
}

.demo-feature i[b-3kufkswh0m] {
    font-size: 1.5rem;
    color: #DA70D6;
}

.demo-feature.disabled i[b-3kufkswh0m] {
    color: #ff4444;
}

.demo-feature span[b-3kufkswh0m] {
    font-family: 'Eater', cursive;
    font-size: 1rem;
    color: var(--ghost-white);
}

.demo-notice[b-3kufkswh0m] {
    background: rgba(65, 105, 225, 0.2);
    border: 2px solid #4169E1;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.demo-notice i[b-3kufkswh0m] {
    font-size: 1.5rem;
    color: #6495ED;
}

.demo-notice p[b-3kufkswh0m] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.btn-large[b-3kufkswh0m] {
    padding: 1.2rem 2rem;
    font-size: 1.2rem;
    width: 100%;
    margin-bottom: 1rem;
}

/* ================================================
   VICTORY & COMPLETE SCREENS
   ================================================ */

.victory-screen[b-3kufkswh0m] {
 max-width: 600px;
    margin: 2rem auto;
}

.victory-content[b-3kufkswh0m] {
    background: rgba(10, 10, 10, 0.9);
    border: 3px solid var(--halloween-orange);
    border-radius: 20px;
  padding: 2rem;
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.5);
    text-align: center;
}

.victory-title[b-3kufkswh0m] {
    font-family: 'Creepster', cursive;
    font-size: 2.5rem;
  color: var(--halloween-orange);
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(255, 107, 53, 0.8);
}

.victory-message[b-3kufkswh0m] {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.final-stats[b-3kufkswh0m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.final-stat[b-3kufkswh0m] {
    background: rgba(255, 107, 53, 0.1);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 10px;
    padding: 1rem;
}

.final-stat-label[b-3kufkswh0m] {
    display: block;
    font-family: 'Eater', cursive;
    font-size: 0.9rem;
    color: var(--halloween-orange);
    margin-bottom: 0.5rem;
}

.final-stat-value[b-3kufkswh0m] {
    display: block;
  font-family: 'Creepster', cursive;
    font-size: 1.8rem;
    color: var(--ghost-white);
}

.demo-cta[b-3kufkswh0m] {
    background: rgba(57, 255, 20, 0.1);
    border: 2px solid var(--halloween-green);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.demo-cta h3[b-3kufkswh0m] {
    font-family: 'Creepster', cursive;
    font-size: 1.5rem;
    color: var(--halloween-green);
    margin-bottom: 0.5rem;
}

.demo-cta p[b-3kufkswh0m] {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* ================================================
   SHOP POPUP (DEMO VERSION)
   ================================================ */

.shop-overlay[b-3kufkswh0m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    animation: fadeIn-b-3kufkswh0m 0.3s ease;
}

.shop-popup[b-3kufkswh0m] {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(40, 20, 0, 0.98));
    border: 3px solid var(--halloween-orange);
    border-radius: 15px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 50px rgba(255, 107, 0, 0.5);
position: relative;
}

.shop-close[b-3kufkswh0m] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 0, 0, 0.2);
    border: 2px solid #ff3333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
 align-items: center;
    justify-content: center;
    color: #ff3333;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shop-close:hover[b-3kufkswh0m] {
    background: rgba(255, 0, 0, 0.4);
    transform: scale(1.1);
}

.shop-title[b-3kufkswh0m] {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: var(--halloween-orange);
    text-align: center;
    margin-bottom: 1.5rem;
}

.demo-shop-notice[b-3kufkswh0m] {
background: rgba(57, 255, 20, 0.2);
    border: 2px solid var(--halloween-green);
 border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
  display: flex;
    align-items: center;
    justify-content: center;
  gap: 0.5rem;
}

.demo-shop-notice i[b-3kufkswh0m] {
    font-size: 1.5rem;
    color: var(--halloween-green);
}

.demo-shop-notice p[b-3kufkswh0m] {
    margin: 0;
    font-family: 'Eater', cursive;
    color: var(--halloween-green);
}

.shop-items[b-3kufkswh0m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shop-item[b-3kufkswh0m] {
    background: rgba(255, 107, 0, 0.1);
    border: 2px solid rgba(255, 107, 0, 0.3);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.item-icon[b-3kufkswh0m] {
    font-size: 2rem;
    color: var(--halloween-orange);
    flex-shrink: 0;
}

.item-info[b-3kufkswh0m] {
    flex: 1;
}

.item-info h4[b-3kufkswh0m] {
    color: var(--halloween-orange);
    margin: 0 0 0.3rem 0;
    font-family: 'Eater', cursive;
}

.item-info p[b-3kufkswh0m] {
    color: #ccc;
    font-size: 0.9rem;
    margin: 0;
}

.btn-buy[b-3kufkswh0m] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
    font-family: 'Eater', cursive;
}

.btn-buy.demo-free[b-3kufkswh0m] {
    background: linear-gradient(135deg, var(--halloween-green), #2dc437);
}

.btn-buy:hover:not(:disabled)[b-3kufkswh0m] {
    transform: scale(1.05);
}

/* ================================================
   RESPONSIVE DEMO
   ================================================ */

@media (max-width: 768px) {
    .demo-welcome-title[b-3kufkswh0m] {
    font-size: 2rem;
    }

    .demo-intro[b-3kufkswh0m] {
        font-size: 1rem;
    }

    .demo-content[b-3kufkswh0m] {
 padding: 1.5rem;
    }

    .shop-popup[b-3kufkswh0m] {
        padding: 1.5rem;
        max-height: calc(100vh - 160px);
    }

    .shop-item[b-3kufkswh0m] {
        flex-direction: column;
  text-align: center;
    }

    .btn-buy[b-3kufkswh0m] {
        width: 100%;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* /Pages/Index.razor.rz.scp.css */
/* ================================================
   HOME PAGE - Halloween Skattjakt 2025
   ================================================ */

.home-container[b-26d55z6ie2] {
    min-height: 100vh;
    display: flex;
    align-items: center;
 justify-content: center;
    padding: 2rem 1rem;
  position: relative;
    z-index: 10;
}

.home-content[b-26d55z6ie2] {
    max-width: 900px;
width: 100%;
    text-align: center;
}

/* ================================================
   HOME TITLE
   ================================================ */

.home-title[b-26d55z6ie2] {
    font-family: 'Creepster', cursive;
    font-size: 3.5rem;
    color: #ff6b00;
    text-shadow: 0 0 20px #ff6b00,
        0 0 40px #ff0000,
  3px 3px 8px #000;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    animation: glow-b-26d55z6ie2 2s ease-in-out infinite alternate;
}

.pumpkin-icon[b-26d55z6ie2],
.ghost-icon[b-26d55z6ie2] {
    width: 60px;
    height: 60px;
    display: inline-block;
}

.pumpkin-icon img[b-26d55z6ie2],
.ghost-icon img[b-26d55z6ie2] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px #ff6b00);
}

.home-subtitle[b-26d55z6ie2] {
    font-size: 1.2rem;
    color: #ff9933;
    margin-bottom: 3rem;
    font-style: italic;
}

/* ================================================
   MODE SELECTION
   ================================================ */

.mode-selection[b-26d55z6ie2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.mode-card[b-26d55z6ie2] {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(40, 20, 0, 0.95));
    border: 2px solid #ff6b00;
    border-radius: 15px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  overflow: hidden;
}

.mode-card[b-26d55z6ie2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 107, 0, 0.1) 0%, transparent 70%);
    opacity: 0;
  transition: opacity 0.3s ease;
}

.mode-card:hover[b-26d55z6ie2] {
    transform: translateY(-10px) scale(1.05);
border-color: #ffaa00;
    box-shadow: 0 10px 40px rgba(255, 107, 0, 0.5),
  0 0 60px rgba(255, 107, 0, 0.3);
}

.mode-card:hover[b-26d55z6ie2]::before {
    opacity: 1;
}

/* ================================================
   MODE ICONS
   ================================================ */

.mode-icon[b-26d55z6ie2] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
}

.demo-icon[b-26d55z6ie2] {
    background: linear-gradient(135deg, #4a1a8a, #6b2fb5);
    color: #fff;
  box-shadow: 0 0 20px rgba(107, 47, 181, 0.5);
}

.multiplayer-icon[b-26d55z6ie2] {
    background: linear-gradient(135deg, #1a8a4a, #2fb56b);
    color: #fff;
    box-shadow: 0 0 20px rgba(47, 181, 107, 0.5);
}

.mode-card:hover .mode-icon[b-26d55z6ie2] {
    transform: scale(1.1) rotate(5deg);
    animation: bounce-b-26d55z6ie2 0.6s ease;
}

/* ================================================
   MODE TEXT
   ================================================ */

.mode-title[b-26d55z6ie2] {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: #ff9933;
    margin-bottom: 1rem;
  text-shadow: 2px 2px 4px #000;
}

.mode-description[b-26d55z6ie2] {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* ================================================
   MODE FEATURES
   ================================================ */

.mode-features[b-26d55z6ie2] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.feature[b-26d55z6ie2] {
    background: rgba(255, 107, 0, 0.1);
    padding: 0.5rem 1rem;
  border-radius: 20px;
font-size: 0.9rem;
    color: #ff9933;
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.feature i[b-26d55z6ie2] {
    margin-right: 0.3rem;
}

/* ================================================
   MODE BUTTONS
   ================================================ */

.mode-button[b-26d55z6ie2] {
    width: 100%;
padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.mode-button i[b-26d55z6ie2] {
  margin-right: 0.5rem;
}

.demo-button[b-26d55z6ie2] {
    background: linear-gradient(135deg, #6b2fb5, #8b4fc5);
    color: #fff;
    box-shadow: 0 4px 15px rgba(107, 47, 181, 0.4);
}

.demo-button:hover[b-26d55z6ie2] {
    background: linear-gradient(135deg, #8b4fc5, #ab6fd5);
    box-shadow: 0 6px 25px rgba(107, 47, 181, 0.6);
    transform: translateY(-2px);
}

.multiplayer-button[b-26d55z6ie2] {
    background: linear-gradient(135deg, #2fb56b, #4fc58b);
    color: #fff;
    box-shadow: 0 4px 15px rgba(47, 181, 107, 0.4);
}

.multiplayer-button:hover[b-26d55z6ie2] {
    background: linear-gradient(135deg, #4fc58b, #6fd5ab);
    box-shadow: 0 6px 25px rgba(47, 181, 107, 0.6);
    transform: translateY(-2px);
}

/* ================================================
   HOME INFO
   ================================================ */

.home-info[b-26d55z6ie2] {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 107, 0, 0.3);
}

.info-item[b-26d55z6ie2] {
    display: flex;
    align-items: center;
  gap: 0.5rem;
    color: #999;
    font-size: 0.9rem;
}

.info-item i[b-26d55z6ie2] {
  color: #ff6b00;
    font-size: 1.2rem;
}

/* ================================================
   ADMIN LINK
   ================================================ */

.admin-link[b-26d55z6ie2] {
  margin-top: 3rem;
    opacity: 0.3;
  transition: opacity 0.3s ease;
}

.admin-link:hover[b-26d55z6ie2] {
  opacity: 1;
}

.admin-link a[b-26d55z6ie2] {
    color: #666;
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.admin-link a:hover[b-26d55z6ie2] {
 color: #ff6b00;
}

/* ================================================
   HOME DECORATIONS
   ================================================ */

.home-decorations[b-26d55z6ie2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  z-index: 1;
    overflow: hidden;
}

/* ================================================
   ANIMATIONS
   ================================================ */

@keyframes glow-b-26d55z6ie2 {
    from {
        text-shadow: 0 0 20px #ff6b00,
        0 0 40px #ff0000,
         3px 3px 8px #000;
    }
    to {
        text-shadow: 0 0 30px #ff8800,
    0 0 60px #ff4400,
               3px 3px 8px #000;
  }
}

@keyframes bounce-b-26d55z6ie2 {
    0%, 100% { transform: scale(1.1) rotate(5deg); }
    50% { transform: scale(1.2) rotate(-5deg); }
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 768px) {
    .home-title[b-26d55z6ie2] {
        font-size: 2.5rem;
      gap: 0.5rem;
  }

    .pumpkin-icon[b-26d55z6ie2],
    .ghost-icon[b-26d55z6ie2] {
        width: 40px;
        height: 40px;
    }

    .home-subtitle[b-26d55z6ie2] {
        font-size: 1rem;
    }

    .mode-selection[b-26d55z6ie2] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .mode-card[b-26d55z6ie2] {
        padding: 1.5rem;
    }

    .mode-icon[b-26d55z6ie2] {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .mode-title[b-26d55z6ie2] {
        font-size: 1.5rem;
    }

    .mode-button[b-26d55z6ie2] {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
    }

    .home-info[b-26d55z6ie2] {
        gap: 1rem;
    }

    .info-item[b-26d55z6ie2] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .home-container[b-26d55z6ie2] {
  padding: 1rem 0.5rem;
    }

    .home-title[b-26d55z6ie2] {
        font-size: 2rem;
    }

    .mode-features[b-26d55z6ie2] {
        gap: 0.5rem;
  }

    .feature[b-26d55z6ie2] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}
/* /Pages/Multiplayer.razor.rz.scp.css */
/* Game Container */
.game-container[b-b3h0zjhs4k] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 75px 1rem 70px 1rem;
    min-height: 100vh;
}

/* Fixed HUD at Top */
.game-hud[b-b3h0zjhs4k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000; /* ✅ Ökat från 999 → 3000 så HUD alltid visas ovanför overlays */
    background: rgba(10, 10, 10, 0.6); /* ✅ Mer transparent (var 0.85) */
    backdrop-filter: blur(8px); /* ✅ Ökat blur för bättre läsbarhet (var 10px) */
    padding: 0.8rem 1rem;
    border-bottom: 2px solid rgba(255, 107, 53, 0.2); /* ✅ Mer transparent border (var 0.3) */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); /* ✅ Mjukare shadow (var 0.5) */
}

.hud-stats[b-b3h0zjhs4k] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    max-width: 600px;
    margin: 0 auto;
    align-items: center;
}

.hud-stat[b-b3h0zjhs4k] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03); /* ✅ Mer transparent (var 0.05) */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08); /* ✅ Mer transparent (var 0.1) */
    font-size: 1rem;
    font-family: 'Eater', cursive;
    transition: all 0.3s ease;
 min-width: 80px;
    justify-content: center;
    backdrop-filter: blur(5px); /* ✅ Lagt till glaseffekt */
}

.hud-stat i[b-b3h0zjhs4k] {
    font-size: 1.2rem;
}

.hud-stat span[b-b3h0zjhs4k] {
    font-size: 1.3rem;
    font-weight: bold;
}

.hud-stat.health[b-b3h0zjhs4k] {
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff4444;
}

.hud-stat.health.low[b-b3h0zjhs4k] {
    animation: hudHealthWarning-b-b3h0zjhs4k 1s ease-in-out infinite;
    border-color: rgba(255, 0, 0, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
}

@keyframes hudHealthWarning-b-b3h0zjhs4k {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.hud-stat.coins[b-b3h0zjhs4k] {
    border-color: rgba(255, 215, 0, 0.3);
    color: #FFD700;
}

.hud-stat.score[b-b3h0zjhs4k] {
    border-color: rgba(255, 107, 53, 0.3);
    color: var(--halloween-orange);
}

.hud-achievements[b-b3h0zjhs4k] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hud-achievement[b-b3h0zjhs4k] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.3);
    font-size: 1rem;
    color: #FFD700;
}

/* Mini Radar Widget - NEW! */
.mini-radar[b-b3h0zjhs4k] {
    position: relative;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(0, 255, 0, 0.1), rgba(0, 0, 0, 0.8));
 border: 2px solid var(--halloween-green);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.mini-radar:hover[b-b3h0zjhs4k] {
    transform: scale(1.05);
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
}

.mini-radar-circle[b-b3h0zjhs4k] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(57, 255, 20, 0.3);
border-radius: 50%;
    pointer-events: none;
}

.mini-radar-circle:nth-child(1)[b-b3h0zjhs4k] {
    width: 30%;
    height: 30%;
}

.mini-radar-circle:nth-child(2)[b-b3h0zjhs4k] {
    width: 60%;
  height: 60%;
}

/* ✅ REMOVED: .mini-radar-scan animation - tar bort snurrande pinnen */

/* ✅ NEW: Kompass med väderstreck */
.mini-radar-compass[b-b3h0zjhs4k] {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
 height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #ff0000;
    text-shadow: 0 0 3px rgba(255, 0, 0, 0.8);
    pointer-events: none;
    z-index: 10;
    transition: transform 0.3s ease;
}

.mini-radar-compass[b-b3h0zjhs4k]::before {
    content: 'N';
}

/* Väderstrecksindikatorer */
.mini-radar-directions[b-b3h0zjhs4k] {
  position: absolute;
    inset: 0;
    pointer-events: none;
}

.radar-direction[b-b3h0zjhs4k] {
 position: absolute;
    font-size: 8px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
 text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.radar-direction.north[b-b3h0zjhs4k] {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: #ff0000;
}

.radar-direction.east[b-b3h0zjhs4k] {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.radar-direction.south[b-b3h0zjhs4k] {
  bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.radar-direction.west[b-b3h0zjhs4k] {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.mini-blip[b-b3h0zjhs4k] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
}

.mini-blip.player-blip[b-b3h0zjhs4k] {
    background: #00FF00;
    box-shadow: 0 0 8px #00FF00;
    width: 8px;
    height: 8px;
}

.mini-blip.target-blip[b-b3h0zjhs4k] {
    background: #FF6B35;
 box-shadow: 0 0 8px #FF6B35;
    animation: targetPulse-b-b3h0zjhs4k 1.5s ease-in-out infinite;
}

.mini-blip.monster-blip[b-b3h0zjhs4k] {
    background: #FF0000;
  box-shadow: 0 0 8px #FF0000;
  animation: monsterPulse-b-b3h0zjhs4k 1s ease-in-out infinite;
}

.mini-blip.friend-blip[b-b3h0zjhs4k] {
    background: #4169E1;
    box-shadow: 0 0 6px #4169E1;
}

@keyframes targetPulse-b-b3h0zjhs4k {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
   opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
   opacity: 0.7;
    }
}

@keyframes monsterPulse-b-b3h0zjhs4k {
    0%, 100% {
   transform: translate(-50%, -50%) scale(1);
    }
50% {
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Header Styles */
.game-header[b-b3h0zjhs4k] {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.game-title[b-b3h0zjhs4k] {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: var(--halloween-orange);
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    margin-bottom: 1rem;
    text-align: center;
    animation: titleFloat 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* SVG Icon Containers */
.pumpkin-icon[b-b3h0zjhs4k],
.ghost-icon[b-b3h0zjhs4k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.pumpkin-icon img[b-b3h0zjhs4k],
.ghost-icon img[b-b3h0zjhs4k] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Icon Animations */
.pumpkin-icon[b-b3h0zjhs4k] {
    animation: pumpkinBob-b-b3h0zjhs4k 2s ease-in-out infinite;
}

.ghost-icon[b-b3h0zjhs4k] {
    animation: ghostFloat-b-b3h0zjhs4k 3s ease-in-out infinite;
}

@keyframes pumpkinBob-b-b3h0zjhs4k {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes ghostFloat-b-b3h0zjhs4k {
    0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-15px) rotate(-2deg); }
}

/* Stats Container */
.stats-container[b-b3h0zjhs4k] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat[b-b3h0zjhs4k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    min-width: 120px;
    justify-content: center;
}

.stat:active[b-b3h0zjhs4k] {
    transform: scale(0.98);
}

.stat-icon[b-b3h0zjhs4k] {
    font-size: 2rem;
}

.stat-value[b-b3h0zjhs4k] {
    font-family: 'Eater', cursive;
    font-size: 2rem;
    font-weight: bold;
}

.health-stat[b-b3h0zjhs4k] {
    border-color: rgba(255, 0, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
}

.health-stat .stat-value[b-b3h0zjhs4k] {
    color: #ff4444;
}

.health-stat.low-health[b-b3h0zjhs4k] {
    animation: healthWarning-b-b3h0zjhs4k 1s ease-in-out infinite;
    border-color: rgba(255, 0, 0, 0.8);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
}

@keyframes healthWarning-b-b3h0zjhs4k {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.coins-stat[b-b3h0zjhs4k] {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.coins-stat .stat-value[b-b3h0zjhs4k] {
    color: #FFD700;
}

.score-stat[b-b3h0zjhs4k] {
    border-color: rgba(255, 107, 53, 0.3);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.2);
}

.score-stat .stat-value[b-b3h0zjhs4k] {
    color: var(--halloween-orange);
}

/* Achievements Display */
.achievements-display[b-b3h0zjhs4k] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.achievement-badge[b-b3h0zjhs4k] {
    font-size: 2.5rem;
    padding: 0.5rem;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.3);
    animation: badgePulse-b-b3h0zjhs4k 2s ease-in-out infinite;
    cursor: help;
    transition: all 0.3s ease;
    min-width: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement-badge:hover[b-b3h0zjhs4k],
.achievement-badge:active[b-b3h0zjhs4k] {
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

@keyframes badgePulse-b-b3h0zjhs4k {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

/* Main Game Area */
.game-main[b-b3h0zjhs4k] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Card Styles */
.riddle-card[b-b3h0zjhs4k],
.clue-card[b-b3h0zjhs4k] {
    background: rgba(10, 10, 10, 0.8);
    border: 3px solid var(--halloween-orange);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.3),
                inset 0 0 20px rgba(255, 107, 53, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.riddle-card:hover[b-b3h0zjhs4k],
.clue-card:hover[b-b3h0zjhs4k] {
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.5),
                inset 0 0 30px rgba(255, 107, 53, 0.2);
    transform: translateY(-5px);
}

/* Riddle Styles */
.riddle-header[b-b3h0zjhs4k] {
    text-align: center;
    margin-bottom: 0.8rem;
}

.riddle-number[b-b3h0zjhs4k] {
    font-family: 'Eater', cursive;
    font-size: 1rem;
    color: var(--halloween-green);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

.riddle-text[b-b3h0zjhs4k] {
    font-family: 'Eater', cursive;
    font-size: 1.15rem;
    color: #ff4444;
    text-align: center;
    white-space: pre-line;
    line-height: 1.35;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(255, 68, 68, 0.5),
                 0 0 30px rgba(255, 68, 68, 0.3);
    animation: textGlow-b-b3h0zjhs4k 3s ease-in-out infinite;
}

@keyframes textGlow-b-b3h0zjhs4k {
    0%, 100% {
        text-shadow: 0 0 15px rgba(255, 68, 68, 0.5),
     0 0 30px rgba(255, 68, 68, 0.3);
    }
    50% {
        text-shadow: 0 0 25px rgba(255, 68, 68, 0.8),
  0 0 50px rgba(255, 68, 68, 0.5);
    }
}

.clue-text[b-b3h0zjhs4k] {
    font-family: 'Eater', cursive;
    font-size: 1.1rem;
    color: var(--halloween-green);
    text-align: center;
 margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

/* Input Styles */
.answer-input[b-b3h0zjhs4k],
.clue-input[b-b3h0zjhs4k] {
    width: 100%;
    padding: 0.9rem;
font-size: 1rem;
    font-family: 'Eater', cursive;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--halloween-purple);
    border-radius: 10px;
    color: var(--ghost-white);
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
    -webkit-appearance: none;
 appearance: none;
}

.answer-input:focus[b-b3h0zjhs4k],
.clue-input:focus[b-b3h0zjhs4k] {
    outline: none;
    border-color: var(--halloween-orange);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

/* Button Styles */
.btn[b-b3h0zjhs4k] {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-family: 'Eater', cursive;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
justify-content: center;
    gap: 0.3rem;
}

.btn:active[b-b3h0zjhs4k] {
    transform: scale(0.95);
}

.btn:disabled[b-b3h0zjhs4k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn i[b-b3h0zjhs4k] {
    font-size: 0.9rem;
}

.btn-guess[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, var(--halloween-orange), var(--pumpkin-orange));
    color: var(--halloween-black);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
    width: 100%;
}

.btn-guess:active:not(:disabled)[b-b3h0zjhs4k] {
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.7);
}

.btn-confirm[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, #00c853, #00e676);
    color: white;
  padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

.btn-confirm:hover[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, #00e676, #00ff88);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 200, 83, 0.5);
}

.btn-confirm:active[b-b3h0zjhs4k] {
    transform: translateY(0);
}

.btn-qr[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, #6b2fb5, #8b4fc5);
    color: white;
    padding: 0.8rem 1.5rem;
  border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(107, 47, 181, 0.3);
}

.btn-qr:hover[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, #8b4fc5, #ab6fd5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(107, 47, 181, 0.5);
}

.btn-qr:active[b-b3h0zjhs4k] {
    transform: translateY(0);
}

.btn-qr i[b-b3h0zjhs4k] {
    font-size: 1.2rem;
}

/* Answer section - inline layout */
.answer-section-inline[b-b3h0zjhs4k] {
  display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.answer-section-inline .clue-input[b-b3h0zjhs4k] {
    flex: 1;
    min-width: 200px;
}

.answer-section-inline .btn-confirm[b-b3h0zjhs4k],
.answer-section-inline .btn-qr[b-b3h0zjhs4k] {
    flex-shrink: 0;
}

@media (max-width: 768px) {
 .answer-section-inline[b-b3h0zjhs4k] {
   flex-direction: column;
    }
    
    .answer-section-inline .clue-input[b-b3h0zjhs4k],
    .answer-section-inline .btn-confirm[b-b3h0zjhs4k],
    .answer-section-inline .btn-qr[b-b3h0zjhs4k] {
        width: 100%;
    }
}

/* Bottom Menu - Full width with 4 buttons */
.bottom-menu[b-b3h0zjhs4k] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3000; /* ✅ Matchar desktop */
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(10px);
    padding: 0.6rem;
    border-top: 2px solid rgba(255, 107, 53, 0.3);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-evenly;
    gap: 0.5rem;
}

.menu-btn[b-b3h0zjhs4k] {
    display: flex;
  flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 107, 53, 0.1);
    border: 2px solid var(--halloween-orange);
 border-radius: 12px;
  color: var(--halloween-orange);
    font-family: 'Eater', cursive;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    max-width: 90px;
}

.menu-btn i[b-b3h0zjhs4k] {
    font-size: 1.2rem;
}

.menu-btn:disabled[b-b3h0zjhs4k] {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(255, 107, 53, 0.3);
}

.menu-btn:active:not(:disabled)[b-b3h0zjhs4k] {
transform: scale(0.95);
    background: rgba(255, 107, 53, 0.2);
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

/* Clue popup content */
.clue-popup-content[b-b3h0zjhs4k] {
    text-align: center;
}

.clue-popup-text[b-b3h0zjhs4k] {
    font-family: 'Eater', cursive;
    font-size: 1.3rem;
    color: var(--halloween-green);
    margin-bottom: 1.5rem;
line-height: 1.5;
    text-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

.clue-popup-hint[b-b3h0zjhs4k] {
    font-size: 1rem;
    color: var(--halloween-orange);
    font-style: italic;
    opacity: 0.9;
}

/* Animations */
@keyframes fadeIn-b-b3h0zjhs4k {
    from {
        opacity: 0;
    }
    to {
    opacity: 1;
    }
}

.fade-in[b-b3h0zjhs4k] {
    animation: fadeIn-b-b3h0zjhs4k 0.5s ease-in;
}

.shake[b-b3h0zjhs4k] {
    animation: shake-b-b3h0zjhs4k 0.5s ease-in-out;
}

@keyframes shake-b-b3h0zjhs4k {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

/* ================================================
   SHOP & POPUP OVERLAYS
   ================================================ */

.shop-overlay[b-b3h0zjhs4k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
 z-index: 2000; /* ✅ Under HUD (3000) */
    padding: 1rem;
    animation: fadeIn-b-b3h0zjhs4k 0.3s ease;
}

.shop-popup[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(40, 20, 0, 0.98));
    border: 3px solid var(--halloween-orange);
    border-radius: 15px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 50px rgba(255, 107, 0, 0.5);
    animation: slideUp-b-b3h0zjhs4k 0.3s ease;
    position: relative;
}

@keyframes slideUp-b-b3h0zjhs4k {
    from {
     transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.shop-close[b-b3h0zjhs4k] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 0, 0, 0.2);
    border: 2px solid #ff3333;
    border-radius: 50%;
    width: 40px;
height: 40px;
    display: flex;
align-items: center;
    justify-content: center;
    color: #ff3333;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shop-close:hover[b-b3h0zjhs4k] {
  background: rgba(255, 0, 0, 0.4);
    transform: scale(1.1);
}

.shop-title[b-b3h0zjhs4k] {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: var(--halloween-orange);
    text-align: center;
    margin-bottom: 1.5rem;
}

.shop-items[b-b3h0zjhs4k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shop-item[b-b3h0zjhs4k] {
    background: rgba(255, 107, 0, 0.1);
    border: 2px solid rgba(255, 107, 0, 0.3);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.item-icon[b-b3h0zjhs4k] {
    font-size: 2rem;
    color: var(--halloween-orange);
    flex-shrink: 0;
}

.item-info[b-b3h0zjhs4k] {
    flex: 1;
}

.item-info h4[b-b3h0zjhs4k] {
    color: var(--halloween-orange);
    margin-bottom: 0.3rem;
}

.item-info p[b-b3h0zjhs4k] {
    color: #ccc;
    font-size: 0.9rem;
}

.btn-buy[b-b3h0zjhs4k] {
  background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}

.btn-buy:hover:not(:disabled)[b-b3h0zjhs4k] {
    transform: scale(1.05);
}

.btn-buy:disabled[b-b3h0zjhs4k] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Mobile responsive for popups */
@media (max-width: 768px) {
    .shop-overlay[b-b3h0zjhs4k] {
    padding: 0.5rem;
  align-items: flex-start;
        padding-top: 80px; /* ✅ Utrymme för HUD */
    }

    .shop-popup[b-b3h0zjhs4k] {
        padding: 1.5rem;
        max-height: calc(100vh - 160px); /* ✅ Ta hänsyn till HUD + bottom menu */
 }

    .shop-title[b-b3h0zjhs4k] {
    font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .shop-item[b-b3h0zjhs4k] {
        flex-direction: column;
        text-align: center;
    }

  .btn-buy[b-b3h0zjhs4k] {
      width: 100%;
    }
}

@media (max-width: 480px) {
    .shop-overlay[b-b3h0zjhs4k] {
      padding-top: 70px;
    }

    .shop-popup[b-b3h0zjhs4k] {
padding: 1rem;
  max-height: calc(100vh - 140px);
    }

    .shop-title[b-b3h0zjhs4k] {
      font-size: 1.3rem;
    }

    .shop-close[b-b3h0zjhs4k] {
        width: 35px;
height: 35px;
        font-size: 1.2rem;
    }
}

/* ================================================
   MULTIPLAYER BUTTON & SERVER BEACON
   ================================================ */

.hud-multiplayer-btn[b-b3h0zjhs4k] {
    position: relative;
  background: rgba(65, 105, 225, 0.2);
    border: 2px solid #4169E1;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4169E1;
    font-size: 1.5rem;
    cursor: pointer;
  transition: all 0.3s ease;
    flex-shrink: 0;
}

.hud-multiplayer-btn.connected[b-b3h0zjhs4k] {
    background: rgba(65, 105, 225, 0.4);
  border-color: #6495ED;
    box-shadow: 0 0 20px rgba(65, 105, 225, 0.5);
}

.hud-multiplayer-btn:hover[b-b3h0zjhs4k],
.hud-multiplayer-btn:active[b-b3h0zjhs4k] {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(65, 105, 225, 0.7);
}

.player-badge[b-b3h0zjhs4k] {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FFD700;
    color: #000;
 border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    border: 2px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* ✅ NEW: Server Status Beacon */
.server-beacon[b-b3h0zjhs4k] {
    position: absolute;
    top: 3px;
    left: 3px;
 width: 10px;
    height: 10px;
    border-radius: 50%;
  transition: all 0.3s ease;
}

.server-beacon.online[b-b3h0zjhs4k] {
    background: #00FF00;
    box-shadow: 0 0 8px #00FF00,
      0 0 15px rgba(0, 255, 0, 0.5);
    animation: beaconPulse-b-b3h0zjhs4k 2s ease-in-out infinite;
}

.server-beacon.offline[b-b3h0zjhs4k] {
    background: #FF0000;
    box-shadow: 0 0 8px #FF0000,
    0 0 15px rgba(255, 0, 0, 0.5);
    animation: beaconBlink-b-b3h0zjhs4k 1s ease-in-out infinite;
}

@keyframes beaconPulse-b-b3h0zjhs4k {
    0%, 100% {
   opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

@keyframes beaconBlink-b-b3h0zjhs4k {
  0%, 100% {
        opacity: 1;
    }
    50% {
    opacity: 0.3;
    }
}

/* Server status styling for button itself */
.hud-multiplayer-btn.server-online[b-b3h0zjhs4k] {
    /* Green tint when server is online */
}

.hud-multiplayer-btn.server-offline[b-b3h0zjhs4k] {
    opacity: 0.6;
    border-color: rgba(255, 0, 0, 0.5);
}

/* ================================================
   ✅ NYA: MYSTERY CHEST POPUP
   ================================================ */

.mystery-chest-overlay[b-b3h0zjhs4k] {
  position: fixed;
  top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    padding: 1rem;
    animation: fadeIn-b-b3h0zjhs4k 0.3s ease;
}

.mystery-chest-popup[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, rgba(40, 20, 0, 0.98), rgba(60, 30, 0, 0.98));
    border: 4px solid #FFD700;
    border-radius: 20px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 10px 60px rgba(255, 215, 0, 0.6),
      0 0 100px rgba(255, 215, 0, 0.3);
    animation: chestAppear-b-b3h0zjhs4k 0.5s ease;
    position: relative;
    text-align: center;
}

@keyframes chestAppear-b-b3h0zjhs4k {
    from {
   transform: scale(0.8) translateY(50px);
        opacity: 0;
 }
    to {
        transform: scale(1) translateY(0);
     opacity: 1;
    }
}

.popup-close[b-b3h0zjhs4k] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 0, 0, 0.3);
 border: 2px solid #ff4444;
    border-radius: 50%;
  width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4444;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.popup-close:hover[b-b3h0zjhs4k] {
    background: rgba(255, 0, 0, 0.5);
    transform: scale(1.1);
}

.chest-icon[b-b3h0zjhs4k] {
    font-size: 5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

.chest-discovery h2[b-b3h0zjhs4k],
.chest-treasure h2[b-b3h0zjhs4k],
.chest-mimic h2[b-b3h0zjhs4k] {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
color: #FFD700;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.chest-distance[b-b3h0zjhs4k] {
 font-size: 1.2rem;
    color: var(--halloween-green);
    margin-bottom: 0.5rem;
}

.chest-warning[b-b3h0zjhs4k] {
    font-size: 1.1rem;
    color: var(--halloween-orange);
    margin-bottom: 1rem;
    font-weight: bold;
}

.chest-hint[b-b3h0zjhs4k] {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.chest-buttons[b-b3h0zjhs4k] {
    display: flex;
    gap: 1rem;
 justify-content: center;
}

.btn-open-chest[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 1rem 2rem;
 border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: bold;
  cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
}

.btn-open-chest:hover:not(:disabled)[b-b3h0zjhs4k] {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(255, 215, 0, 0.8);
}

.btn-open-chest:disabled[b-b3h0zjhs4k] {
    opacity: 0.6;
    cursor: wait;
}

.btn-skip-chest[b-b3h0zjhs4k] {
    background: rgba(255, 255, 255, 0.1);
  color: #fff;
    padding: 1rem 2rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-skip-chest:hover[b-b3h0zjhs4k] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Treasure Result */
.treasure-icon[b-b3h0zjhs4k] {
    font-size: 6rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9));
}

.treasure-reward[b-b3h0zjhs4k] {
    font-size: 1.5rem;
    color: #FFD700;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.treasure-message[b-b3h0zjhs4k] {
    font-size: 1.2rem;
    color: var(--halloween-green);
    font-style: italic;
}

/* Mimic Result */
.mimic-icon[b-b3h0zjhs4k] {
    font-size: 6rem;
    margin-bottom: 1rem;
    animation: mimicShake-b-b3h0zjhs4k 0.5s ease infinite;
    filter: drop-shadow(0 0 30px rgba(255, 0, 0, 0.9));
}

@keyframes mimicShake-b-b3h0zjhs4k {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.mimic-message[b-b3h0zjhs4k] {
    font-size: 1.3rem;
    color: #ff4444;
    font-weight: bold;
    animation: textPulse-b-b3h0zjhs4k 1s ease infinite;
}

@keyframes textPulse-b-b3h0zjhs4k {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ================================================
   ✅ NYA: BOSS WARNING OVERLAY
   ================================================ */

.boss-warning-overlay[b-b3h0zjhs4k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2800;
    animation: fadeIn-b-b3h0zjhs4k 0.5s ease;
    pointer-events: none;
}

.boss-warning-card[b-b3h0zjhs4k] {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.95), rgba(255, 69, 0, 0.95));
    border: 5px solid #FF4500;
    border-radius: 25px;
    padding: 3rem;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 10px 80px rgba(255, 69, 0, 0.8),
     0 0 150px rgba(255, 69, 0, 0.5),
          inset 0 0 50px rgba(255, 69, 0, 0.3);
    animation: bossAppear-b-b3h0zjhs4k 0.6s ease, bossShake-b-b3h0zjhs4k 0.1s ease 0.6s infinite;
    text-align: center;
}

@keyframes bossAppear-b-b3h0zjhs4k {
    from {
        transform: scale(0) rotate(-180deg);
   opacity: 0;
    }
    to {
     transform: scale(1) rotate(0deg);
        opacity: 1;
  }
}

@keyframes bossShake-b-b3h0zjhs4k {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.boss-icon[b-b3h0zjhs4k] {
    font-size: 8rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 40px rgba(255, 69, 0, 1));
    animation: bossPulse-b-b3h0zjhs4k 1.5s ease infinite;
}

@keyframes bossPulse-b-b3h0zjhs4k {
    0%, 100% {
transform: scale(1);
        filter: drop-shadow(0 0 40px rgba(255, 69, 0, 1));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 60px rgba(255, 69, 0, 1));
    }
}

.boss-title[b-b3h0zjhs4k] {
    font-family: 'Creepster', cursive;
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 30px rgba(255, 215, 0, 1),
      0 0 60px rgba(255, 69, 0, 0.8);
    animation: titleFlicker-b-b3h0zjhs4k 0.1s ease infinite;
}

@keyframes titleFlicker-b-b3h0zjhs4k {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

.boss-message[b-b3h0zjhs4k] {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1.5rem;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

.boss-hint[b-b3h0zjhs4k] {
    font-size: 1.1rem;
    color: var(--halloween-orange);
    line-height: 1.8;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mystery-chest-popup[b-b3h0zjhs4k] {
        padding: 1.5rem;
    }

    .chest-icon[b-b3h0zjhs4k],
    .treasure-icon[b-b3h0zjhs4k],
  .mimic-icon[b-b3h0zjhs4k] {
    font-size: 4rem;
    }

    .chest-discovery h2[b-b3h0zjhs4k],
    .chest-treasure h2[b-b3h0zjhs4k],
    .chest-mimic h2[b-b3h0zjhs4k] {
        font-size: 1.5rem;
    }

    .chest-buttons[b-b3h0zjhs4k] {
    flex-direction: column;
    }

    .btn-open-chest[b-b3h0zjhs4k],
    .btn-skip-chest[b-b3h0zjhs4k] {
        width: 100%;
    }

    .boss-warning-card[b-b3h0zjhs4k] {
        padding: 2rem;
    }

    .boss-icon[b-b3h0zjhs4k] {
        font-size: 5rem;
    }

    .boss-title[b-b3h0zjhs4k] {
        font-size: 1.8rem;
    }

    .boss-message[b-b3h0zjhs4k] {
    font-size: 1.1rem;
    }

    .boss-hint[b-b3h0zjhs4k] {
        font-size: 0.95rem;
    }
}