:root{
  --c-navy:#001F66;
  --c-blue:#0033A8;
  --c-cyan:#0ACEFF;
  --c-purple:#9934B7;
  --c-deeppurple:#5D1F6F;
  --c-ink:#0b1020;
}

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: transparent;
  color: var(--c-ink);
}
.container {
  max-width: 600px;
  margin: auto;
  padding: 1rem;
  background: rgba(255,255,255,0.72);
  border-radius: 14px;
  border: 1px solid rgba(0,31,102,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
}
.glow-text {
  color: var(--c-navy);
  text-align: center;
  text-shadow:
    0 0 10px rgba(255,255,255,0.65),
    0 0 18px rgba(10,206,255,0.25);
}
.input-area {
  text-align: center;
  margin: 1.5rem 0;
}
input[type="number"] {
  padding: 0.5rem;
  width: 80%;
  max-width: 300px;
  font-size: 16px;
}
button {
  margin-top: 0.8rem;
  padding: 0.55rem 1.05rem;
  background: var(--c-blue);
  color: rgba(255,255,255,0.96);
  border: 1px solid rgba(10,206,255,0.55);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.18),
    0 0 0 2px rgba(0,31,102,0.10),
    0 0 18px rgba(10,206,255,0.18);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  cursor: pointer;
}
#resultBox {
  margin-top: 1.5rem;
  text-align: center;
  padding: 1rem;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  transition: opacity 0.8s ease;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(153,52,183,0.18);
}
.rank-desc span {
  display: block;
  text-align: left;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.rank-fancy {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 0.7rem;
  text-align: center !important;
  transition: color 0.3s, text-shadow 0.3s;
  letter-spacing: 0.02em;
}
.rank-cards-scroll {
  display: flex;
  overflow-x: auto;
  padding: 1rem 0;
  gap: 1rem;
}
.rank-card {
  flex: 0 0 auto;
  padding: 0.8rem;
  border-radius: 12px;
  min-width: 140px;
  text-align: left;
  font-size: 0.95rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: background 0.5s ease;
}
.usdt-value, .soul-ratio {
  margin-top: 0.5rem;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  text-align: center;
}
.progress-container {
  margin: 1rem 0;
}
.progress-label {
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 0.3rem;
}
.progress-bar {
  position: relative;
  width: 100%;
  height: 16px;
  background: rgba(0,31,102,0.10);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,31,102,0.14);
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--c-cyan);
  transition: width 0.8s ease;
}
.progress-percent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  line-height: 16px;
  color: #333;
}
.rank-card.glow {
  animation: cardGlow 1.2s ease-out;
  box-shadow:
    0 8px 36px 12px rgba(255, 220, 120, 0.65),
    0 0 16px 8px #fff,
    0 0 0 2px #ffd700;
  position: relative;
  z-index: 2;
}
@keyframes cardGlow {
  0%   { box-shadow: 0 8px 36px 12px rgba(255, 220, 120, 0.85), 0 0 18px 9px #fff; }
  40%  { box-shadow: 0 18px 52px 22px rgba(255,255,180,0.98), 0 0 28px 16px #fff; }
  80%  { box-shadow: 0 8px 36px 12px rgba(255, 220, 120, 0.65), 0 0 16px 8px #fff, 0 0 0 2px #ffd700;}
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0);}
}
#effectOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 60%);
}
@keyframes glowEffect {
  0% { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2); }
}
footer {
  margin-top: 2rem;
  font-size: 0.9rem;
  text-align: center;
  color: #666;
  line-height: 1.6;
}
.footer-rate {
  font-weight: bold;
  font-size: 0.95rem;
  margin-top: 2px;
  display: block;
}

/* __EXTRA_SCENARIO_STYLES__ */

.info-box {
  background: #eef7ff;
  border: 1px solid #cfe8ff;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0 1.2rem 0;
  text-align: center;
  font-weight: 600;
}

.scenario {
  background: #f7f7ff;
  border: 1px solid #e0e0ff;
  border-radius: 12px;
  padding: 1rem;
  margin: 0.8rem 0 1.5rem 0;
}
.scenario-label {
  display: block;
  margin-bottom: 0.6rem;
}
.scenario input[type="number"] {
  display: block;
  width: 100%;
  max-width: 240px;
  margin-top: 0.25rem;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}
#calcScenarioBtn {
  margin-top: 0.4rem;
}
.scenario-result {
  margin-top: 0.8rem;
  font-weight: bold;
}

.soul-fire { text-align: center; font-weight: 700; margin-top: 6px; }


/* Dream section title styles */
.dream-title {
  font-size: 1.6rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.9) 0%, rgba(230,245,255,0.8) 45%, rgba(210,230,255,0.6) 100%);
  box-shadow: 0 0 24px rgba(120,160,255,0.55), 0 0 8px rgba(255,255,255,0.9) inset;
  margin-top: 1rem;
  margin-bottom: 0.6rem;
}

/* Align scenario labels & inputs centered */
.scenario .scenario-label { text-align: center; }
.scenario .scenario-label input { text-align: center; margin-left: auto; margin-right: auto; }


.ratio-highlight{color:#d90429;font-weight:700;font-size:1.35em;margin:0 .15em;}


/* === Breathing glow for the red ratio number === */
@keyframes glowPulse {
  0%   { text-shadow: 0 0 0 rgba(217, 4, 41, 0.00), 0 0 0 rgba(217, 4, 41, 0.00); }
  50%  { text-shadow: 0 0 10px rgba(217, 4, 41, 0.60), 0 0 20px rgba(217, 4, 41, 0.35); }
  100% { text-shadow: 0 0 0 rgba(217, 4, 41, 0.00), 0 0 0 rgba(217, 4, 41, 0.00); }
}
.ratio-highlight {
  animation: glowPulse 2.2s ease-in-out infinite;
  will-change: filter, transform;
}
@media (prefers-reduced-motion: reduce) {
  .ratio-highlight { animation: none; }
}

/* === Responsive sizing for top two lines === */
#mcapRatio > div:first-child { line-height: 1.25; }
#liveRates { line-height: 1.25; }

@media (max-width: 600px) {
  #mcapRatio > div:first-child { font-size: 0.95rem; }
  #liveRates { font-size: 0.90rem; }
  .ratio-highlight { font-size: 1.15em; }
}
@media (max-width: 400px) {
  #mcapRatio > div:first-child { font-size: 0.90rem; }
  #liveRates { font-size: 0.85rem; }
  .ratio-highlight { font-size: 1.1em; }
}


/* === Added: Stronger breathing glow for main title === */
.breath-strong {
  font-size: clamp(22px, 5.6vw, 40px);
  letter-spacing: 0.02em;
  white-space: normal;
  word-break: keep-all;
}
.breath-strong wbr { display: inline; }

@keyframes textBreath {
  0%   { text-shadow: 0 0 10px rgba(120,255,140,0.6), 0 0 18px rgba(120,255,200,0.4); }
  50%  { text-shadow: 0 0 16px rgba(120,255,160,0.95), 0 0 30px rgba(120,255,220,0.75); }
  100% { text-shadow: 0 0 10px rgba(120,255,140,0.6), 0 0 18px rgba(120,255,200,0.4); }
}
.glow-text.breath-strong { animation: textBreath 3.2s ease-in-out infinite; }

/* === Added: Dream section breathing background === */
@keyframes dreamBreath {
  0%   { box-shadow: 0 0 18px rgba(120,160,255,0.40), 0 0 6px rgba(255,255,255,0.85) inset; }
  50%  { box-shadow: 0 0 32px rgba(120,160,255,0.75), 0 0 10px rgba(255,255,255,1.0) inset; }
  100% { box-shadow: 0 0 18px rgba(120,160,255,0.40), 0 0 6px rgba(255,255,255,0.85) inset; }
}
.dream-title { animation: dreamBreath 3.8s ease-in-out infinite; }

/* === Mobile query panel light-blue background === */
@media (max-width: 600px) {
  .input-area { 
    background: #e6f4ff;
    border: 1px solid #cfe8ff;
    border-radius: 12px;
    padding: 0.9rem 0.8rem;
  }
  .scenario {
    background: #e6f4ff;
    border: 1px solid #cfe8ff;
  }
  .container {
    padding: 0.8rem;
  }
}

/* Keep info box content on single lines on small screens to avoid ugly wraps */
@media (max-width: 480px) {
  #mcapRatio > div:first-child,
  #liveRates {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Positive/negative coloring for scenario delta */
.scenario-result .delta-positive { color: #c1121f; font-weight: 800; }
.scenario-result .delta-negative { color: #2a9d8f; font-weight: 800; }


/* === Soft glow colors for scenario delta === */
@keyframes softRedGlow {
  0% { text-shadow: 0 0 6px rgba(255, 99, 99, 0.35), 0 0 10px rgba(255, 120, 120, 0.25); }
  50% { text-shadow: 0 0 14px rgba(255, 120, 120, 0.85), 0 0 22px rgba(255, 150, 150, 0.60); }
  100% { text-shadow: 0 0 6px rgba(255, 99, 99, 0.35), 0 0 10px rgba(255, 120, 120, 0.25); }
}
@keyframes softGreenGlow {
  0% { text-shadow: 0 0 6px rgba(80, 200, 160, 0.35), 0 0 10px rgba(120, 230, 190, 0.25); }
  50% { text-shadow: 0 0 14px rgba(120, 230, 190, 0.85), 0 0 22px rgba(150, 245, 210, 0.60); }
  100% { text-shadow: 0 0 6px rgba(80, 200, 160, 0.35), 0 0 10px rgba(120, 230, 190, 0.25); }
}
.scenario-result .delta-positive { color: #e56a73; font-weight: 800; animation: softRedGlow 2.6s ease-in-out infinite; }
.scenario-result .delta-negative { color: #55c3a0; font-weight: 800; animation: softGreenGlow 2.6s ease-in-out infinite; }

/* === Make liveRates show on two lines on small screens === */
#liveRates .mbr { display: none; }
@media (max-width: 480px) {
  #liveRates .mbr { display: block; height: 0; }
}


.progress-tip{
  margin-top: 6px;
  text-align: center;
  font-size: clamp(12px, 2.6vw, 14px);
  color: #444;
}
.progress-number{ font-weight: 800; }

.tip-line1{line-height:1.35;}
.tip-line2{margin-top:2px;opacity:.9;}

.need-strong{ font-weight: 800; font-size: 1.15em; }
@media (max-width:480px){ .need-strong{ font-size: 1.2em; } }


/* === vNext: Animated Cosmos Background === */
#cosmos{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  transform: translateZ(0);
}

body{
  min-height: 100vh;
  background: radial-gradient(circle at 20% 10%, rgba(120,80,255,0.35), transparent 40%),
              radial-gradient(circle at 80% 30%, rgba(0,200,255,0.25), transparent 45%),
              radial-gradient(circle at 50% 80%, rgba(255,120,0,0.18), transparent 50%),
              linear-gradient(180deg, #070616, #0b1230 55%, #05040f);
  color: #eaf0ff;
}

/* keep content above canvas */
.container{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Result box: use dark text for readability on light card background */
#resultBox,
#resultBox .rank-desc,
#resultBox .usdt-value,
#resultBox .soul-ratio,
#resultBox .progress-label,
#resultBox .progress-percent,
#resultBox .progress-tip,
#resultBox #rankTitle{
  color: #111;
}
#resultBox .glow-text{
  color: #111;
  text-shadow: none;
}

/* === Share dock (mobile fixed bottom) === */
.share-dock{
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 14px;
  padding: 10px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(10, 12, 30, 0.55);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.share-btn{
  margin: 0;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  font-weight: 700;
}

.share-btn.secondary{
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}

.share-link{
  grid-column: span 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.6rem;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  font-weight: 600;
}

@media (max-width: 640px){
  .share-dock{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    margin: 0;
  }
  .container{
    padding-bottom: 110px; /* avoid being covered by dock */
  }

  /* Mobile: remove the light "frame" so the cosmos background is visible like PC */
  .container{
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
  }

  /* Keep key sections readable while still letting the starfield show through */
  .input-area,
  .info-box,
  #resultBox{
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.08);
  }
}

/* === Badge & Share card mode === */
.badge-area{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(255,255,255,0.75);
  color: #1b1e3a;
  border: 1px solid rgba(0,0,0,0.08);
}

.badge .badge-icon{
  filter: drop-shadow(0 2px 10px rgba(255,255,255,0.6));
}

.share-watermark{
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.4;
  white-space: pre-line;
}

/* Share mode: show only the card-like result box */
body.share-mode .input-area,
body.share-mode #rate-info,
body.share-mode .evo-title,
body.share-mode #rankCards,
body.share-mode .dream-title,
body.share-mode .info-box,
body.share-mode footer{
  display:none !important;
}

footer .footer-links{
  font-size: 12px;
  opacity: 0.9;
}
footer .footer-links a{
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}
footer .footer-links a:hover{ text-decoration: underline; }

body.share-mode .container{
  background: transparent;
  box-shadow: none;
}

body.share-mode #resultBox{
  max-width: 560px;
  margin: 18px auto 0;
  border-radius: 18px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.35);
}



h1.glow-text{
  color: rgba(255,255,255,0.95);
  text-shadow:
    0 0 14px rgba(255,255,255,0.78),
    0 0 26px rgba(10,206,255,0.42),
    0 0 36px rgba(153,52,183,0.22);
}

label{ color: var(--c-navy); font-weight: 700; }

button:hover{
  background: var(--c-deeppurple);
  border-color: rgba(153,52,183,0.70);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.22),
    0 0 18px rgba(153,52,183,0.22),
    0 0 26px rgba(10,206,255,0.20);
  transform: translateY(-1px);
}
button:active{ transform: translateY(0px) scale(0.99); background: var(--c-navy); }
button:focus-visible{ outline: 3px solid rgba(10,206,255,0.55); outline-offset: 2px; }


/* === Brand text palette helpers (even distribution) === */
.container{ color: var(--c-ink); }

.brand-text{
  font-weight: 800;
  text-shadow:
    0 0 10px rgba(255,255,255,0.60),
    0 0 18px rgba(10,206,255,0.20);
}
.brand-text-soft{
  font-weight: 700;
  text-shadow:
    0 0 8px rgba(255,255,255,0.55),
    0 0 14px rgba(153,52,183,0.14);
}

/* 5-colour rotation */
.brand-1{ color: var(--c-navy); }
.brand-2{ color: var(--c-blue); }
.brand-3{ color: var(--c-cyan); }
.brand-4{ color: var(--c-purple); }
.brand-5{ color: var(--c-deeppurple); }

/* Apply brand colours to the initial (pre-calc) headings/labels */
.input-area label{ color: var(--c-blue); font-weight: 800; text-shadow: 0 0 10px rgba(255,255,255,0.55), 0 0 16px rgba(0,51,168,0.25); }
.evo-title{ color: var(--c-cyan); text-shadow: 0 0 10px rgba(255,255,255,0.65), 0 0 18px rgba(10,206,255,0.30); }
.dream-title{ color: var(--c-purple); }
#mcapTitle{ color: var(--c-navy); font-weight: 800; }
#snekAdaMcap{ color: var(--c-deeppurple); font-weight: 800; text-shadow: 0 0 10px rgba(255,255,255,0.55), 0 0 16px rgba(93,31,111,0.20); }

/* Share watermark placement at very bottom of card */
.share-watermark{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.10);
  font-size: 12px;
  line-height: 1.25;
  opacity: 0.88;
  white-space: pre-line;
}

/* === Mobile UI refinements === */
.input-area label{
  display:block;
  margin-bottom: 8px;
  font-weight: 700;
}
.input-area input[type="number"]{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}
button:active{ transform: translateY(1px) scale(0.99); }

@media (max-width: 520px){
  .input-area{
    margin: 1rem 0;
  }
  .input-area input[type="number"]{
    width: 100%;
    max-width: none;
    font-size: 18px;
    padding: 0.75rem 0.9rem;
  }
  #calculateBtn{
    width: 100%;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
  }
  .rank-fancy{ font-size: 1.85rem; }
  .rank-card{ min-width: 132px; }
}

/* === Achievement-style badge (rarity + shine) === */
.badge{
  position: relative;
  overflow: hidden;
}
.badge-main{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.badge-title{
  font-weight: 800;
}
.rarity-pill{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.65);
}
.badge-shine{
  position: absolute;
  top: -40%;
  left: -30%;
  width: 80px;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: rotate(18deg);
  animation: badgeShine 2.6s ease-in-out infinite;
  opacity: 0.55;
  pointer-events: none;
}
@keyframes badgeShine{
  0% { transform: translateX(-80px) rotate(18deg); opacity: 0.0; }
  20%{ opacity: 0.55; }
  55%{ opacity: 0.55; }
  100%{ transform: translateX(520px) rotate(18deg); opacity: 0.0; }
}

.badge.rarity-common .rarity-pill{ background: rgba(220,228,238,0.85); }
.badge.rarity-rare .rarity-pill{ background: rgba(10,206,255,0.22); border-color: rgba(10,206,255,0.35); }
.badge.rarity-epic .rarity-pill{ background: rgba(127,70,255,0.20); border-color: rgba(127,70,255,0.35); }
.badge.rarity-legendary .rarity-pill{ background: rgba(255,184,77,0.24); border-color: rgba(255,184,77,0.40); }
.badge.rarity-mythic .rarity-pill{ background: rgba(255,77,216,0.22); border-color: rgba(255,77,216,0.40); }

@media (prefers-reduced-motion: reduce){
  .badge-shine{ animation: none; }
}

/* === Share card mode: focus on the result card === */
body.share-mode .input-area,
body.share-mode .evo-title,
body.share-mode #rankCards,
body.share-mode .dream-title,
body.share-mode #mcapRatio,
body.share-mode footer{
  display: none !important;
}

body.share-mode .container{
  max-width: 720px;
  padding: 12px;
}

body.share-mode #resultBox{
  margin-top: 0;
  min-height: 520px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 24px 70px rgba(0,0,0,0.28), 0 0 0 2px rgba(10,206,255,0.10);
}

@media (max-width: 640px){
  body.share-mode #resultBox{
    min-height: 560px;
  }
  body.share-mode .share-dock{
    position: fixed;
  }
}