h6.tagsicon { font-size: 16px; }

.uk-button-success { color: #2b592d; }
.alert-message .jp_link { color: #050505; font-weight: 700; }

#jc span.reactions-trigger + span.reactions-given, #jc div.react-box + span.reactions-given {
    border-left: 1px solid #666;
}

#jc #comments .comment-body {
font-size: 16px; 
line-height: 20px;
}

@media only screen and (max-width : 800px) {
.jcomment-container-form {
    margin: 10px !important;
}
}



.uk-accordion { backdrop-filter: blur(5px); }
.uk-accordion-content {padding: 20px 20px 40px 20px; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); }


#phpbb .quick-login  { display: none;}

#phpbb .postprofile .avatar img {
border-radius: 8px;
}

#phpbb .headerspace input.inputbox { color: #ccc !important; }

footer hr, .uk-offcanvas-bar hr {
    border-top: 1px solid rgba(255, 255, 255, .15) !important;
}

.uk-offcanvas-bar input#searchval { max-width: 314px !important;}
.uk-navbar input.uk-search-input { max-width: 220px !important; padding-right: 0px !important;}

fieldset {
    border-width: 1px !important;
    border-color: #44454f !important;
    background-color: #121212 !important;
    border-radius: 8px !important;
}

joomla-alert {
    max-width: 1600px;
    text-align: center;
    margin: auto;
}

div#system-message-container { background-color: #000 !important;}


.jp-gradient { color: #1ab4e5;
  background-image: linear-gradient(45deg, #46fcff , #1ab4e5 67%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: -7px;
    filter: drop-shadow(1px 1px #000);
    
}

.uk-button-custom { font-weight: 700; }


#dynamicimage .placeholder { background-color: #000; }

.uk-card { backdrop-filter: blur(5px); }

.uk-overlay-primary { border-radius: 0 8px 0 8px; }




.bg-info { background-color: #0a9fbd !important; }

.visually-hidden { display:none; }


.profile-edit {max-width: 960px; margin: 0 auto; }


body { .tm-header-overlay {position: relative;} }

/* Floating Action Button (FAB) - lighter glass style */
.planet-fab{
  width:92px; height:92px; border-radius:50%;
  background:rgba(0,0,0,0.4); /* lighter transparency */
  border:2px solid rgba(87,64,113,0.8);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:inline-flex; align-items:center; justify-content:center;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:1020;
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(87,64,113,.0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor:pointer;
}

/* SVG inside */
.planet-fab > img{
  width:80%; height:80%; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* Hover/Focus effects */
.planet-fab:hover,
.planet-fab:focus-visible{
  transform:translateY(-2px) scale(1.03);
  background:rgba(0,0,0,0.55); /* slightly darker on hover */
  border-color:#6a54a0;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 16px rgba(87,64,113,.45);
  outline:none;
}

/* Active tap */
.planet-fab:active{ transform:translateY(0) scale(.98); }

/* Subtle idle glow */
@keyframes planetPulse {
  0%,100% { box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 rgba(87,64,113,0); }
  50%     { box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 10px rgba(87,64,113,.25); }
}
.planet-fab{ animation:planetPulse 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .planet-fab{ transition:none; animation:none; }
}

@media (max-width:480px){
  .planet-fab{ width:72px; height:72px; }
}

  .planet-tip {
    cursor: pointer;
    transition: color .3s ease, text-shadow .3s ease, transform .3s ease, font-weight .3s ease;
  }
  .planet-tip:hover, .planet-tip:focus {
    color: #fff;
   
    font-weight: 700;
  }
  .planet-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  }
  .planet-drop {
    width: 420px;
    max-width: 95vw;
  }
  .planet-drop .uk-card {
    background: rgba(0,0,0,1);
    border: 1px solid rgba(73,230,242,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    border-radius: 8px;
    color: #eee;
  }
  .planet-title {
    text-align: center;
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .03em;
  }
  .planet-media {
    position: relative;
    width: 320px;
    max-width: 100%;
    margin: 0 auto 10px;
  }
  .planet-media video,
  .planet-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
  }
  .planet-stats .uk-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
      font-size: 0.8rem;
  }
  .planet-stats .uk-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  }
 .planet-stats .uk-padding-small { padding: 4px;
  }
  .planet-stats strong {
    color: #49e6f2;
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
  }
  .planet-drop .planet-lore {
    font-size: 0.8rem;
    line-height: 1.45;
    margin-top: 6px;
  }
  .planet-actions .uk-button {
    border-radius: 6px;
  }
  .uk-drop.uk-open {
    animation-duration: 0.25s !important;
  }

/* Colors */
:root {
    --jp-border-normal: #2D2E34;
    --jp-border-hover: #676b7a; /* your new brighter hover color */
}

/* Flash animation (ends at hover color) */
@keyframes jp-border-flash {
    0% {
        border-color: var(--jp-border-normal);
    }
    20% {
        border-color: #ffffff; /* quick flash */
    }
    100% {
        border-color: var(--jp-border-hover); /* stay brighter on hover */
    }
}

/* UK card version */
.uk-card-default {
    border: 1px solid var(--jp-border-normal);
    transition: border-color 0.2s;
}

.uk-card-default:hover {
    border-color: var(--jp-border-hover);
    animation: jp-border-flash 0.25s ease-out;
}

/* Reusable class */
.jp-flash {
    border: 1px solid var(--jp-border-normal);
    transition: border-color 0.2s;
}

.jp-flash:hover {
    border-color: var(--jp-border-hover);
    animation: jp-border-flash 0.25s ease-out;
}


.uk-button {
    border: 1px solid var(--jp-border-normal);
    transition: border-color 0.2s;
}

.uk-button:hover {
    border-color: var(--jp-border-hover);
    animation: jp-border-flash 0.25s ease-out;
}

.planet-fab {
    border: 1px solid var(--jp-border-normal);
    transition: border-color 0.2s;
}

.planet-fab:hover {
    border-color: var(--jp-border-hover);
    animation: jp-border-flash 0.25s ease-out;
}


/* ==============================
   Supporter Spectrum – Base
   ============================== */

.supporter-spectrum {
  /* optional tweaks */
}

/* Make sure uk-progress behaves nicely inside the module */
.supporter-spectrum .uk-progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

/* ==============================
   Heat Meter Colors (Blue → Red)
   With subtle pulse animation
   ============================== */

/* Tier 0 – Blue (low support) */
.heat-tier-0::-webkit-progress-value {
  background-color: #4a6cf7;
  animation: heatPulse0 2.8s ease-in-out infinite;
}
.heat-tier-0::-moz-progress-bar {
  background-color: #4a6cf7;
  animation: heatPulse0 2.8s ease-in-out infinite;
}

/* Tier 1 – Light Cyan */
.heat-tier-1::-webkit-progress-value {
  background-color: #4fc3f7;
  animation: heatPulse1 2.6s ease-in-out infinite;
}
.heat-tier-1::-moz-progress-bar {
  background-color: #4fc3f7;
  animation: heatPulse1 2.6s ease-in-out infinite;
}

/* Tier 2 – Green */
.heat-tier-2::-webkit-progress-value {
  background-color: #81c784;
  animation: heatPulse2 2.4s ease-in-out infinite;
}
.heat-tier-2::-moz-progress-bar {
  background-color: #81c784;
  animation: heatPulse2 2.4s ease-in-out infinite;
}

/* Tier 3 – Yellow */
.heat-tier-3::-webkit-progress-value {
  background-color: #fdd835;
  animation: heatPulse3 2.2s ease-in-out infinite;
}
.heat-tier-3::-moz-progress-bar {
  background-color: #fdd835;
  animation: heatPulse3 2.2s ease-in-out infinite;
}

/* Tier 4 – Orange */
.heat-tier-4::-webkit-progress-value {
  background-color: #fb8c00;
  animation: heatPulse4 2s ease-in-out infinite;
}
.heat-tier-4::-moz-progress-bar {
  background-color: #fb8c00;
  animation: heatPulse4 2s ease-in-out infinite;
}

/* Tier 5 – Red (max support) */
.heat-tier-5::-webkit-progress-value {
  background-color: #e53935;
  animation: heatPulse5 1.8s ease-in-out infinite;
}
.heat-tier-5::-moz-progress-bar {
  background-color: #e53935;
  animation: heatPulse5 1.8s ease-in-out infinite;
}

/* ==============================
   Hover glow / sparks for top tiers
   (4 & 5 only)
   ============================== */

.supporter-spectrum progress.heat-tier-4:hover::-webkit-progress-value,
.supporter-spectrum progress.heat-tier-5:hover::-webkit-progress-value {
  box-shadow:
    0 0 6px rgba(255, 210, 140, 0.7),
    0 0 14px rgba(255, 140, 0, 0.6);
}

.supporter-spectrum progress.heat-tier-4:hover::-moz-progress-bar,
.supporter-spectrum progress.heat-tier-5:hover::-moz-progress-bar {
  box-shadow:
    0 0 6px rgba(255, 210, 140, 0.7),
    0 0 14px rgba(255, 140, 0, 0.6);
}

/* You can add a tiny "flicker" in brightness for top tiers as well */
.supporter-spectrum progress.heat-tier-5:hover::-webkit-progress-value {
  animation-duration: 1.5s; /* a little more intense when hovered */
}
.supporter-spectrum progress.heat-tier-5:hover::-moz-progress-bar {
  animation-duration: 1.5s;
}

/* ==============================
   Keyframes – subtle color pulse
   ============================== */

@keyframes heatPulse0 {
  0%, 100% { background-color: #4a6cf7; }
  50%      { background-color: #6f82ff; }
}

@keyframes heatPulse1 {
  0%, 100% { background-color: #4fc3f7; }
  50%      { background-color: #7fd7ff; }
}

@keyframes heatPulse2 {
  0%, 100% { background-color: #81c784; }
  50%      { background-color: #9bdb9e; }
}

@keyframes heatPulse3 {
  0%, 100% { background-color: #fdd835; }
  50%      { background-color: #ffe263; }
}

@keyframes heatPulse4 {
  0%, 100% { background-color: #fb8c00; }
  50%      { background-color: #ffad42; }
}

@keyframes heatPulse5 {
  0%, 100% { background-color: #e53935; }
  50%      { background-color: #ff5c5c; }
}