/* MAGIC TRIANGLE - ENHANCED WITH HOVER DETAILS */

/* Floating Background Symbols */
.triangle-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.floating-symbol {
  position: absolute;
  font-size: 40px;
  opacity: 0.15;
  animation: floatSymbol 8s ease-in-out infinite;
}

.symbol-1 {
  top: 10%;
  left: 15%;
  animation-delay: 0s;
}

.symbol-2 {
  top: 20%;
  right: 10%;
  animation-delay: 2s;
}

.symbol-3 {
  bottom: 15%;
  left: 20%;
  animation-delay: 4s;
}

.symbol-4 {
  bottom: 25%;
  right: 15%;
  animation-delay: 6s;
}

@keyframes floatSymbol {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.15;
  }
  50% {
    transform: translateY(-30px) rotate(180deg);
    opacity: 0.3;
  }
}

/* Triangle SVG */
.magic-triangle-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  z-index: 2;
  pointer-events: none;
}

.triangle-path {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawTriangle 3s ease-out forwards;
}

@keyframes drawTriangle {
  to {
    stroke-dashoffset: 0;
  }
}

.center-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawLine 2s ease-out forwards, pulseLine 3s ease-in-out infinite;
  animation-delay: 0s, 2s;
  stroke-width: 3;
  opacity: 0.8;
}

.line-top {
  animation-delay: 1s, 3s;
  stroke-width: 3;
  opacity: 0.9;
}

/* Desktop - removed conflicting rules, handled at end of file */

.line-left {
  animation-delay: 1.5s, 3.5s;
}

.line-right {
  animation-delay: 2s, 4s;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pulseLine {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.center-ring {
  animation: rotateRing 10s linear infinite;
  transform-origin: center;
}

@keyframes rotateRing {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.center-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.8;
    r: 35;
  }
  50% {
    opacity: 1;
    r: 40;
  }
}

/* Power Points - Compact View */
.power-point {
  position: absolute;
  z-index: 10;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.point-top {
  top: 17%;
  left: 50%;
  transform: translate(-50%, -100%);
}

.point-left {
  top: 77%;
  left: 17%;
  transform: translate(-50%, -50%);
}

.point-right {
  top: 77%;
  left: 83%;
  transform: translate(-50%, -50%);
}

.power-compact {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(15px);
  border: 3px solid rgba(212, 175, 55, 0.5);
  border-radius: 20px;
  padding: 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  min-width: 200px;
  position: relative;
  z-index: 5;
}

/* Removed - hover now handled inside @media queries */

.power-icon-svg {
  margin: 0 auto 15px;
  filter: drop-shadow(0 5px 15px rgba(212, 175, 55, 0.5));
  animation: iconFloat 3s ease-in-out infinite;
}

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

.power-compact h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #D4AF37;
  margin-bottom: 8px;
  font-weight: 600;
}

.power-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Power Details - DESKTOP HOVER ENABLED */
@media (min-width: 769px) {
  .power-details {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 380px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(212, 175, 55, 0.6);
    border-radius: 20px;
    padding: 0;
    margin-top: 15px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 6;
    pointer-events: none;
  }

  /* ENABLE HOVER: Show details on hover */
  .power-point:hover .power-details {
    max-height: 600px;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    z-index: 200 !important;
  }

  .power-point:hover {
    z-index: 150 !important;
  }

  .power-point:hover .power-compact {
    z-index: 200 !important;
  }

  /* Position adjustments */
  .point-top .power-details {
    top: 100%;
  }

  .point-left .power-details,
  .point-right .power-details {
    top: auto;
    bottom: 100%;
    transform: translateX(-50%) translateY(-20px);
  }

  .point-left:hover .power-details,
  .point-right:hover .power-details {
    max-height: 600px !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
    z-index: 200 !important;
  }

  .point-left:hover,
  .point-right:hover {
    z-index: 150 !important;
  }

  .point-left:hover .power-compact,
  .point-right:hover .power-compact {
    z-index: 200 !important;
  }

  /* Ensure bottom cards are hoverable */
  .point-left,
  .point-right {
    pointer-events: auto !important;
  }

  .point-left .power-compact,
  .point-right .power-compact {
    pointer-events: auto !important;
  }

  /* Hover effect on cards */
  .power-compact:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(212, 175, 55, 0.9);
    transform: scale(1.05);
    box-shadow: 0 15px 50px rgba(212, 175, 55, 0.4);
    cursor: pointer;
    z-index: 150 !important;
  }
}

.detail-header {
  padding: 25px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-header h4 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #D4AF37;
  margin: 0;
}

.detail-badge {
  padding: 6px 15px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  font-size: 12px;
  color: #D4AF37;
  font-weight: 600;
}

.detail-content {
  padding: 20px 25px;
}

.detail-row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.detail-row strong {
  display: block;
  font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
  font-weight: 600;
}

.detail-row p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}

/* Triangle Center Label - Shows on hover (desktop only) */
@media (min-width: 769px) {
  .triangle-center-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 100;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .triangle-center-clickable:hover ~ .triangle-center-label {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 100;
  }
}

@media (max-width: 768px) {
  .triangle-center-label {
    display: none !important;
  }
}

.center-label-content {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  padding: 25px 35px;
  border-radius: 20px;
  border: 3px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 20px 60px rgba(212, 175, 55, 0.3);
  animation: labelGlow 2s ease-in-out infinite;
}

@keyframes labelGlow {
  0%, 100% {
    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: 0 25px 70px rgba(212, 175, 55, 0.5);
  }
}

.center-label-content h4 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #D4AF37;
  margin-bottom: 10px;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.5);
}

.center-label-content p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-style: italic;
}

/* Center Magic Globe - Always visible */
.triangle-center-clickable {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95px;
  height: 95px;
  z-index: 25;
  cursor: pointer;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.9), rgba(212, 175, 55, 0.7), rgba(255, 165, 0, 0.5));
  border: 3px solid rgba(255, 215, 0, 0.6);
  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.6),
    0 0 60px rgba(212, 175, 55, 0.4),
    inset 0 0 30px rgba(255, 215, 0, 0.3);
  animation: globePulse 3s ease-in-out infinite, globeRotate 10s linear infinite;
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle-center-clickable::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 30%;
  height: 30%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
  border-radius: 50%;
  filter: blur(8px);
  animation: shimmer 2s ease-in-out infinite;
}

.triangle-center-clickable::after {
  content: '🔮';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 45px;
  opacity: 0.9;
  filter: drop-shadow(0 5px 15px rgba(212, 175, 55, 0.6));
  animation: iconFloatSubtle 3s ease-in-out infinite;
}

@keyframes iconFloatSubtle {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-5px);
  }
}

/* Center Globe Hover - Desktop only */
@media (min-width: 769px) {
  .triangle-center-clickable:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow:
      0 0 40px rgba(212, 175, 55, 0.8),
      0 0 80px rgba(212, 175, 55, 0.6),
      inset 0 0 40px rgba(255, 215, 0, 0.5);
    border-color: rgba(255, 215, 0, 0.9);
    cursor: pointer;
  }
}

@media (max-width: 768px) {
  .triangle-center-clickable:hover {
    transform: translate(-50%, -50%);
  }
}

@keyframes globePulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(212, 175, 55, 0.6),
      0 0 60px rgba(212, 175, 55, 0.4),
      inset 0 0 30px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 40px rgba(212, 175, 55, 0.8),
      0 0 80px rgba(212, 175, 55, 0.6),
      inset 0 0 40px rgba(255, 215, 0, 0.5);
  }
}

@keyframes globeRotate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(30deg);
  }
}

@keyframes shimmer {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Desktop/Mobile text toggle */
.mobile-only {
  display: none;
}

.desktop-only {
  display: inline;
}

/* ============================================
   MOBILE TRIANGLE - COMPLETE REBUILD
   ============================================ */
@media (max-width: 768px) {

  /* Show/hide text */
  .mobile-only { display: inline !important; }
  .desktop-only { display: none !important; }

  /* Section setup */
  #magic-triangle {
    padding: 40px 15px 50px 15px !important;
    overflow: visible !important;
    width: 100% !important;
    position: relative !important;
    z-index: auto !important;
  }

  #magic-triangle .section-title-center {
    font-size: 26px !important;
    padding: 0 10px !important;
    margin-bottom: 8px !important;
  }

  #magic-triangle .section-subtitle-center {
    font-size: 13px !important;
    padding: 0 10px !important;
    margin-bottom: 35px !important;
  }

  /* Triangle container */
  .triangle-container {
    position: relative !important;
    width: 100% !important;
    max-width: 340px !important;
    height: 400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* SHOW Triangle - visible and centered */
  .magic-triangle-svg {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 280px !important;
    height: 280px !important;
    z-index: 20 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Stop all SVG animations */
  .magic-triangle-svg * {
    animation: none !important;
    animation-play-state: paused !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  /* Show the triangle lines fully */
  .magic-triangle-svg .triangle-path {
    opacity: 0.9 !important;
    visibility: visible !important;
    display: block !important;
    stroke: url(#goldGradient) !important;
    stroke-width: 3 !important;
  }

  .magic-triangle-svg .center-line,
  .magic-triangle-svg line {
    opacity: 0.9 !important;
    visibility: visible !important;
    display: inline !important;
    stroke: url(#goldGradient) !important;
    stroke-width: 3 !important;
  }

  .magic-triangle-svg circle {
    opacity: 0.9 !important;
    visibility: visible !important;
    display: block !important;
    stroke: url(#goldGradient) !important;
    stroke-width: 3 !important;
  }

  /* Ensure top line is specifically visible */
  .magic-triangle-svg .line-top,
  .magic-triangle-svg line:first-of-type {
    opacity: 0.8 !important;
    visibility: visible !important;
    display: inline !important;
    stroke: #FFD700 !important;
    stroke-width: 3 !important;
    pointer-events: none !important;
  }

  /* Hide decorative elements BUT KEEP GLOBE */
  .triangle-bg-elements,
  .floating-symbol,
  .triangle-center-label {
    display: none !important;
    visibility: hidden !important;
  }

  /* SHOW the center globe on mobile */
  .triangle-center-clickable {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70px !important;
    height: 70px !important;
    z-index: 25 !important;
  }

  .triangle-center-clickable::after {
    font-size: 35px !important;
  }

  /* ========================================
     POWER CARDS - At triangle corners
     ======================================== */

  .power-point {
    position: absolute !important;
    z-index: 15 !important;
  }

  /* Position at TRIANGLE VERTICES for mobile - TOP box: BOTTOM CENTER aligned, others: TOP CENTER aligned */
  .point-top {
    top: 97px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-100px) !important;
  }

  .point-left {
    top: 284px !important;
    bottom: auto !important;
    left: 19.8% !important;
    transform: translateX(-50%) !important;
  }

  .point-right {
    top: 284px !important;
    bottom: auto !important;
    left: 80.2% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Force consistent styling for all boxes */
  .point-top .power-compact,
  .point-left .power-compact,
  .point-right .power-compact {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 2px solid #D4AF37 !important;
    opacity: 1 !important;
  }

  .point-top .power-compact h3,
  .point-left .power-compact h3,
  .point-right .power-compact h3 {
    color: #FFD700 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }

  .point-top .power-tagline,
  .point-left .power-tagline,
  .point-right .power-tagline {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
  }

  .point-top .power-icon-svg svg,
  .point-left .power-icon-svg svg,
  .point-right .power-icon-svg svg {
    opacity: 1 !important;
  }

  .point-top .power-icon-svg svg circle,
  .point-top .power-icon-svg svg line,
  .point-top .power-icon-svg svg path,
  .point-left .power-icon-svg svg circle,
  .point-left .power-icon-svg svg line,
  .point-left .power-icon-svg svg path,
  .point-right .power-icon-svg svg circle,
  .point-right .power-icon-svg svg line,
  .point-right .power-icon-svg svg path {
    stroke: #D4AF37 !important;
    fill: #D4AF37 !important;
    opacity: 1 !important;
  }

  .point-top .power-icon-svg svg circle[fill="none"],
  .point-left .power-icon-svg svg circle[fill="none"],
  .point-right .power-icon-svg svg circle[fill="none"] {
    fill: none !important;
  }

  /* Compact card design - SQUARE for mobile */
  .power-point .power-compact {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    padding: 10px 8px !important;
    background: rgba(0, 0, 0, 0.95) !important;
    border: 2px solid #D4AF37 !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(212, 175, 55, 0.3) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
    overflow: visible !important;
    backdrop-filter: blur(5px) !important;
  }

  .power-compact:active {
    transform: scale(0.94) !important;
    background: rgba(255, 215, 0, 0.15) !important;
  }

  /* Add tap indicator text */
  .power-compact::after {
    content: 'TAP' !important;
    display: block !important;
    font-size: 7.5px !important;
    color: rgba(255, 215, 0, 0.6) !important;
    margin-top: 2px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* Icon */
  .power-icon-svg {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .power-icon-svg svg {
    width: 38px !important;
    height: 38px !important;
    display: block !important;
  }

  /* Ensure all icons render consistently */
  .power-icon-svg svg circle,
  .power-icon-svg svg line,
  .power-icon-svg svg path,
  .power-icon-svg svg polygon {
    vector-effect: non-scaling-stroke !important;
  }

  /* Text */
  .power-compact h3 {
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    color: #FFD700 !important;
    font-weight: 700 !important;
    text-align: center !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .power-tagline {
    font-size: 8.5px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  }

  /* ========================================
     MODAL - CLICK TO OPEN DESIGN
     ======================================== */

  /* Modal backdrop - hidden by default */
  .modal-backdrop-mobile {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }

  .modal-backdrop-mobile.active {
    display: block !important;
    opacity: 1 !important;
  }

  /* Hidden by default - CENTERED FULLSCREEN MODAL */
  .power-point .power-details,
  .point-top .power-details,
  .point-left .power-details,
  .point-right .power-details {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
    width: calc(100vw - 30px) !important;
    max-width: 400px !important;
    max-height: 80vh !important;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f3460 100%) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(212, 175, 55, 0.6) !important;
    border-radius: 20px !important;
    z-index: 10000 !important;
    overflow: visible !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 215, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Visible when expanded - scales and fades in at center */
  .power-point.expanded .power-details,
  .point-top.expanded .power-details,
  .point-left.expanded .power-details,
  .point-right.expanded .power-details,
  /* HIGHER SPECIFICITY - must override base rules */
  .power-point.power-point.expanded .power-details,
  .point-top.point-top.expanded .power-details,
  .point-left.point-left.expanded .power-details,
  .point-right.point-right.expanded .power-details {
    display: block !important;
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f3460 100%) !important;
  }

  /* Remove drag handle for centered modal */
  .power-point .power-details::before {
    display: none !important;
  }

  /* Header */
  .power-point .detail-header,
  .point-top .detail-header,
  .point-left .detail-header,
  .point-right .detail-header {
    padding: 20px 20px 16px 20px !important;
    background: rgba(255, 215, 0, 0.15) !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 20px 20px 0 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }

  .power-point .detail-header h4,
  .point-top .detail-header h4,
  .point-left .detail-header h4,
  .point-right .detail-header h4 {
    font-size: 20px !important;
    margin: 0 !important;
    padding-right: 50px !important;
    color: #FFD700 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .power-point .detail-badge,
  .point-top .detail-badge,
  .point-left .detail-badge,
  .point-right .detail-badge {
    font-size: 11px !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    border-radius: 15px !important;
    color: #000 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Content - scrollable area */
  .power-point .detail-content,
  .point-top .detail-content,
  .point-left .detail-content,
  .point-right .detail-content {
    padding: 20px 20px 30px 20px !important;
    max-height: calc(80vh - 140px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Custom scrollbar */
  .power-point .detail-content::-webkit-scrollbar {
    width: 6px !important;
  }

  .power-point .detail-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
  }

  .power-point .detail-content::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5) !important;
    border-radius: 10px !important;
  }

  .power-point .detail-row,
  .point-top .detail-row,
  .point-left .detail-row,
  .point-right .detail-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    align-items: flex-start !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .power-point .detail-row:last-child,
  .point-top .detail-row:last-child,
  .point-left .detail-row:last-child,
  .point-right .detail-row:last-child {
    margin-bottom: 0 !important;
  }

  .power-point .detail-icon,
  .point-top .detail-icon,
  .point-left .detail-icon,
  .point-right .detail-icon {
    font-size: 26px !important;
    width: 32px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .power-point .detail-row > div,
  .point-top .detail-row > div,
  .point-left .detail-row > div,
  .point-right .detail-row > div {
    flex: 1 !important;
  }

  .power-point .detail-row strong,
  .point-top .detail-row strong,
  .point-left .detail-row strong,
  .point-right .detail-row strong {
    display: block !important;
    font-size: 15px !important;
    margin-bottom: 5px !important;
    color: #FFD700 !important;
    font-weight: 700 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .power-point .detail-row p,
  .point-top .detail-row p,
  .point-left .detail-row p,
  .point-right .detail-row p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: #FFFFFF !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Close button - Centered on top edge of modal, much smaller */
  .power-modal-close {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    bottom: auto !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    border: 2px solid rgba(212, 175, 55, 0.8) !important;
    border-radius: 50% !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    z-index: 10001 !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .power-modal-close:active {
    transform: scale(0.9) !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4) !important;
  }

  /* Active card indicator */
  .power-point.expanded .power-compact {
    border-color: #FFD700 !important;
    background: rgba(255, 215, 0, 0.2) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
  }

}

/* CRITICAL FIX - Force top line visible on ALL screen sizes */
.line-top,
line.line-top,
.center-line.line-top,
svg line.line-top {
  visibility: visible !important;
  display: inline !important;
  pointer-events: none !important;
}

/* Desktop specific override - FIX DISPLAY BLOCK FROM MOBILE */
@media (min-width: 769px) {
  /* Ensure SVG is above power cards */
  .magic-triangle-svg {
    z-index: 100 !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  /* Top line with ID - force inline for desktop */
  #top-center-line {
    display: inline !important;
    visibility: visible !important;
    opacity: 0.8 !important;
  }

  /* Keep power cards below SVG */
  .power-point {
    z-index: 10 !important;
  }
}

/* Mobile - top line visible and block hover */
@media (max-width: 768px) {
  #top-center-line {
    display: inline !important;
    visibility: visible !important;
    opacity: 0.9 !important;
  }

  /* Explicitly block hover on mobile when NOT expanded */
  .power-point:not(.expanded):hover .power-details,
  .point-top:not(.expanded):hover .power-details,
  .point-left:not(.expanded):hover .power-details,
  .point-right:not(.expanded):hover .power-details {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .power-point:not(.expanded):hover .power-compact {
    transform: none !important;
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: #D4AF37 !important;
  }
}

/* DESKTOP HOVER FORCE - Highest priority */
@media (min-width: 769px) {
  section#magic-triangle .power-point:hover .power-details,
  section#magic-triangle .point-top:hover .power-details,
  section#magic-triangle .point-left:hover .power-details,
  section#magic-triangle .point-right:hover .power-details {
    display: block !important;
    max-height: 600px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 200 !important;
  }

  section#magic-triangle .point-top:hover .power-details {
    transform: translateX(-50%) translateY(0) !important;
  }

  section#magic-triangle .point-left:hover .power-details,
  section#magic-triangle .point-right:hover .power-details {
    transform: translateX(-50%) translateY(0) !important;
  }

  section#magic-triangle .power-point:hover,
  section#magic-triangle .point-left:hover,
  section#magic-triangle .point-right:hover {
    z-index: 150 !important;
  }
}