:root{
    --bg: #0f0f14;
    --card-bg: #1a1a22;
    --text: #ffffff;
    --subtext: #aaa;
    --input-bg: #111119;
    --button-bg: #2a2a38;
    --button-bg-hover: #44445c;
    --tooltip-bg: #222233;
    --tooltip-text: #ffffff;
    --tooltip-border: rgba(255,255,255,0.6);
  }
  
  /* Light theme overrides */
  body.theme-light{
    --bg: #f3f4f7;
    --card-bg: #ffffff;
    --text: #11141a;
    --subtext: #555;
    --input-bg: #e7e9f0;
    --button-bg: #dde0ea;
    --button-bg-hover: #c9cde0;
    --tooltip-bg: #111827;             /* darker bubble on light bg */
    --tooltip-text: #f9fafb;
    --tooltip-border: rgba(0,0,0,0.75);
  }
  
  
  body{
    background:var(--bg);
    font-family:Segoe UI,Arial;
    color:var(--text);
    text-align:center;
    margin:0;
  }
  

  h1{
    margin:20px 0;
    color:var(--text);
  }
  

#two-x-bar{
margin-top:8px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
flex-wrap:wrap;
font-size:14px;
}

.two-x-btn{
border:1px solid rgba(255,255,255,0.2);
opacity:0.6;
}

.two-x-btn.active{
border-color:#fff;
opacity:1;
}

#container{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
padding:20px 20px 40px;
}

.card{
    background:var(--card-bg);
    border-radius:12px;
    width:290px;
    padding:16px;
    box-shadow:0 6px 18px rgba(0,0,0,0.6);
    transition:box-shadow 0.2s, transform 0.2s;
    display:flex;
    flex-direction:column;
    align-items:center;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
}
/* Side border color pulse keyframes */
@keyframes sidePulseAncient{
    0%{ border-color:rgba(34,165,255,0.0); }
    40%{ border-color:rgba(34,165,255,1.0); }
    100%{ border-color:rgba(34,165,255,0.0); }
  }
  @keyframes sidePulseVoid{
    0%{ border-color:rgba(199,125,255,0.0); }
    40%{ border-color:rgba(199,125,255,1.0); }
    100%{ border-color:rgba(199,125,255,0.0); }
  }
  @keyframes sidePulseSacred{
    0%{ border-color:rgba(255,182,72,0.0); }
    40%{ border-color:rgba(255,182,72,1.0); }
    100%{ border-color:rgba(255,182,72,0.0); }
  }
  @keyframes sidePulsePrimal{
    0%{ border-color:rgba(255,75,75,0.0); }
    40%{ border-color:rgba(255,75,75,1.0); }
    100%{ border-color:rgba(255,75,75,0.0); }
  }
  
  /* Default: faint side color so it’s always tinted a bit */
  .card-ancient{
    border-left-color:rgba(34,165,255,0.25);
    border-right-color:rgba(34,165,255,0.25);
  }
  .card-void{
    border-left-color:rgba(199,125,255,0.25);
    border-right-color:rgba(199,125,255,0.25);
  }
  .card-sacred{
    border-left-color:rgba(255,182,72,0.25);
    border-right-color:rgba(255,182,72,0.25);
  }
  .card-primal{
    border-left-color:rgba(255,75,75,0.25);
    border-right-color:rgba(255,75,75,0.25);
  }
  
  /* On hover: animate ONLY the side border colors */
  .card-ancient:hover{
    animation:sidePulseAncient 0.7s ease-out;
  }
  .card-void:hover{
    animation:sidePulseVoid 0.7s ease-out;
  }
  .card-sacred:hover{
    animation:sidePulseSacred 0.7s ease-out;
  }
  .card-primal:hover{
    animation:sidePulsePrimal 0.7s ease-out;
  }
  
h2{
margin:0 0 8px;
font-size:20px;
}

.shard-ancient{
color:#22a5ff;
}

.shard-void{
color:#c77dff;
}

.shard-sacred{
color:#ffb648;
}

.shard-primal{
color:#ff4b4b;
}

.counter-input{
    margin-top:8px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:4px;
    flex-wrap:nowrap;          /* keep everything on one line */
  }
  
  .counter-input button{
    flex:0 0 auto;             /* don’t stretch */
  }
  
  .counter-input input[type=number]{
    flex:0 0 auto;
  }
  

.counter-input input[type=number]{
    width:80px;
    padding:4px 6px;
    border-radius:4px;
    border:1px solid #444;
    background:var(--input-bg);
    color:var(--text);
    text-align:center;
  }
  

/* Hide default number input arrows; we have our own +/- controls */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
 -webkit-appearance:none;
 margin:0;
}

input[type=number]{
 -moz-appearance:textfield;
}

.counter{
font-size:32px;
font-weight:bold;
margin:10px 0;
}

.small-counter{
font-size:24px;
}

.percent{
font-size:22px;
font-weight:bold;
}

.small-percent{
font-size:16px;
}

.substat{
    font-size:14px;
    color:var(--subtext);
    margin-top:4px;
  }
  

.primal-panel{
    width:100%;
    padding:4px 6px; /* smaller padding to reduce height */
    border-top:1px solid rgba(255,255,255,0.1);
  }
  
  .primal-panel:first-of-type{
    border-top:none;
    border-bottom:1px solid rgba(255,255,255,0.15);
    margin-bottom:2px; /* less gap between Mythical and Legendary */
  }
  
  .primal-panel h3{
    margin:2px 0;
    font-size:14px;
  }
  
  .primal-panel .counter{
    margin:4px 0;
    font-size:24px;
  }
  
  .primal-panel .percent{
    margin:2px 0;
    font-size:16px;
  }
  
  .primal-panel button{
    margin-top:4px;
    padding:4px 8px;
    font-size:12px;
  }
  

  button{
    margin:4px;
    padding:6px 10px;
    border:none;
    border-radius:6px;
    background:var(--button-bg);
    color:var(--text);
    cursor:pointer;
    font-weight:bold;
  }
  
  button:hover{
    background:var(--button-bg-hover);
  }
  

#reset-all{
margin-top:8px;
}

/* Mobile-friendly tweaks */
@media (max-width:600px){
 #container{
  flex-direction:column;
  align-items:center;
 }
 .card{
  width:90%;
  max-width:360px;
 }
 button{
  min-width:64px;
 }
}
.tooltip-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:6px;
    width:16px;
    height:16px;
    border-radius:50%;
    border:1px solid var(--tooltip-border);
    font-size:11px;
    cursor:default;
    position:relative;
    color:var(--text);          /* was var(--tooltip-text) */
    background:transparent;
  }
  
  /* Bubble */
  .tooltip-icon::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    bottom:125%;
    transform:translateX(-50%);
    background:var(--tooltip-bg);
    color:var(--tooltip-text);
    padding:6px 8px;
    border-radius:6px;
    font-size:12px;
    line-height:1.3;
    white-space:normal;
    width:220px;
    max-width:260px;
    box-shadow:0 4px 10px rgba(0,0,0,0.6);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.15s ease-out;
    z-index:50;
  }
  
  /* Little arrow */
  .tooltip-icon::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:115%;
    transform:translateX(-50%);
    border-width:6px;
    border-style:solid;
    border-color:var(--tooltip-bg) transparent transparent transparent;
    opacity:0;
    transition:opacity 0.15s ease-out;
  }
  
  /* Show on hover */
  .tooltip-icon:hover::after,
  .tooltip-icon:hover::before{
    opacity:1;
  }
  
  #toast{
    position:fixed;
    top:16px;
    left:16px;
  
    /* Outer box = darker green, adds outer glow */
    background:#0e3a22; /* dark green frame */
    padding:3px;        /* space for the inner border box */
    border-radius:10px;
    box-shadow:0 0 12px rgba(0,0,0,0.8); /* darker outer glow/shadow */
  
    opacity:0;
    pointer-events:none;
    transition:opacity 0.6s ease-out, transform 0.6s ease-out;
    z-index:999;
  }
  
  #toast.show{
    opacity:1;
    transform:translateY(2px);
  }
  
  /* Inner box = neon background + thick lighter border */
  .toast-inner{
    background:#19ff7a;
    color:#0b5e32;
    padding:3px 16px;          /* was 8px 16px: less vertical padding, same horizontal */
    border-radius:6px;
  
    border:4px solid #000000;
    box-shadow:inset 0 0 8px 2px rgba(6,40,24,0.95);
  
    font-size:14px;
    font-weight:bold;
    font-family:Segoe UI, Arial, sans-serif;
    white-space:nowrap;
  }
  
  /* QoL: Mobile‑friendly hit areas */

/* Base buttons: larger, easier to tap */
button,
#profile-bar button,
#two-x-bar button {
  padding:8px 14px;      /* was 6px 10px */
  min-height:36px;       /* gives ~36px tall hit area on desktop */
}

/* Primal panel buttons: still compact but more tappable */
.primal-panel button{
  padding:6px 10px;      /* was 4px 8px */
  min-height:32px;
  font-size:12px;
}

/* Mobile-only: extra comfy touch targets */
@media (max-width:600px){
  button,
  #profile-bar button,
  #two-x-bar button {
    padding:10px 18px;
    min-height:44px;     /* hits the 44px recommended touch target */
    min-width:72px;
  }

  .counter-input{
    gap:6px;
  }
}

.card.pulse{
    animation:pulse-card 0.45s ease-out;
  }
  
  @keyframes pulse-card{
    0%{ transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,0.6); }
    40%{ transform:scale(1.02); box-shadow:0 10px 24px rgba(0,0,0,0.9); }
    100%{ transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,0.6); }
  }
  /* QoL: Top control buttons under title */
#top-controls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
  }
  
  #theme-toggle,
  #reset-all,
  #toggle-2x{
    min-width:120px;
  }
  
  #toggle-2x{
    background:linear-gradient(135deg, #19ff7a, #2edfc1);
    color:#022314;
    box-shadow:0 0 10px rgba(46,223,193,0.6);
  }
  
  #toggle-2x:hover{
    box-shadow:0 0 14px rgba(46,223,193,0.85);
  }
  
  @media (max-width:600px){
    #top-controls{
      flex-direction:column;
      align-items:center;
    }
  
    #theme-toggle,
    #reset-all,
    #toggle-2x{
      width:80%;
      max-width:260px;
    }
    
  }
  
  #bottom-links{
    margin-top:24px;
    margin-bottom:16px;
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
  }
  
  #projects-box,
  #joint-box{
    background:var(--card-bg);
    border-radius:10px;
    padding:8px 12px;
    box-shadow:0 4px 10px rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  #joint-box span{
    font-size:14px;
    color:var(--subtext);
  }
  
  #buy-joint-link{
    font-size:14px;
    font-weight:bold;
    color:#ffb648;
    text-decoration:none;
  }
  
  #buy-joint-link:hover{
    color:#ffd27f;
    text-decoration:underline;
  }
  #reset-all {
    color: #ffffff;
    background-color: #ff4444;
  }
  
  #creator-mark{
    margin-top:8px;
    margin-bottom:16px;
    font-size:12px;
    color:var(--subtext);
    text-align:center;
  }
  
  #projects-grid{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
  }
  
  /* Big cards */
  .project-card{
    width:220px;
    height:120px;
    border-radius:12px;
    background:var(--card-bg);
    box-shadow:0 4px 12px rgba(0,0,0,0.65);
    text-decoration:none;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    transition:transform 0.15s ease-out, box-shadow 0.15s ease-out, filter 0.15s ease-out;
  }
  
  /* Clickable project (link) */
  a.project-card{
    cursor:pointer;
  }
  
  /* Inner content */
  .project-card-inner{
    text-align:center;
    padding:8px 10px;
  }
  
  /* Title/subtitle text */
  .project-title{
    font-size:16px;
    font-weight:bold;
    margin-bottom:4px;
  }
  
  .project-subtitle{
    font-size:13px;
    color:var(--subtext);
  }
  
  /* Hover effect only for real (link) cards */
  a.project-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,0.85);
    filter:brightness(1.03);
  }
  
  /* Future / placeholder boxes */
  .project-card-future{
    opacity:0.7;
    border:1px dashed rgba(255,255,255,0.3);
  }
  
  /* Light theme tweak for future boxes */
  body.theme-light .project-card-future{
    border-color:rgba(0,0,0,0.25);
  }