:root{
  --bg: #0b0f17;
  --panel: rgba(255,255,255,0.06);
  --panel-strong: rgba(255,255,255,0.12);
  --text: #e9f0ff;
  --muted: #9fb2d0;
  --accent: #7c5cff;
  --accent-2: #00f5d4;
  --accent-3: #ff7ce5;
  --success: #35d49a;
  --danger: #ff5c8a;
  --warning: #ffd166;
  --chip: rgba(255,255,255,0.12);
  --shadow: 0 12px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  user-select: none;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, #10192a 0%, #0b0f17 40%, #06070a 100%);
  overflow:hidden;
}

/* App fade-in when ready */
.app{ opacity:0; transition: opacity .35s ease }
.app.ready{ opacity:1 }

/* Background glow & twinkles */
.app::before{
  content:"";
  position:fixed;
  inset: -40% -40% -40% -40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,92,255,0.18), transparent 25%),
    radial-gradient(circle at 80% 30%, rgba(0,245,212,0.14), transparent 30%),
    radial-gradient(circle at 40% 80%, rgba(255,124,229,0.12), transparent 35%);
  filter: blur(50px);
  z-index:-2;
}
.app::after{
  content:"";
  position:fixed;
  inset:0;
  background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.2), transparent),
                    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.15), transparent),
                    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.18), transparent),
                    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.12), transparent);
  animation: twinkle 8s linear infinite;
  opacity:0.5;
  z-index:-1;
}
@keyframes twinkle{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

/* Loader overlay */
.loader{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(1200px 800px at 10% 10%, #10192a 0%, #0b0f17 40%, #06070a 100%);
  display:grid; place-items:center;
  transition: opacity .35s ease, visibility .35s ease;
}
.loader.hide{ opacity:0; visibility:hidden; pointer-events:none }
.loader-card{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:20px 18px;
  box-shadow: var(--shadow);
  width:min(520px, 92%);
  display:grid; gap:10px; justify-items:center;
}
.spinner{
  width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.22);
  border-top-color: var(--accent-2);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }
.loader-title{
  font-family: Orbitron, Inter, system-ui;
  font-weight:800; letter-spacing:0.02em; font-size:20px;
}
.loader-tip{
  color: var(--muted);
  text-align:center;
  min-height:20px;
}
.loader-progress{ width:100% }
.lp-bar{
  width:100%; height:8px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
}
.lp-bar > i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .25s ease;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  user-select:none;
  cursor:pointer;
}
.brand .logo{font-size:28px; filter: drop-shadow(0 2px 6px rgba(124,92,255,0.6));}
.brand h1{
  font-family: Orbitron, Inter, system-ui;
  margin:0;
  letter-spacing:0.5px;
  font-weight:800;
  text-transform:uppercase;
  background-image: linear-gradient(90deg, #fff, #9fb2d0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stats{
  display:flex;
  align-items:center;
  gap:24px;
}
.currency, .rate{
  display:flex;
  align-items:baseline;
  gap:12px;
  background: var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px 12px;
  box-shadow: var(--shadow);
}
.label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.1em}
.value{font-family: Orbitron, Inter; font-weight:800;}

.buffs{display:flex; gap:8px; align-items:center; min-height:32px}
.chip{
  background: var(--chip);
  border:1px solid rgba(255,255,255,0.1);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.chip .bar{
  width:60px; height:6px; background:rgba(255,255,255,0.1);
  border-radius:999px; overflow:hidden;
}
.chip .bar > i{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.main.threecol{
  display:grid;
  grid-template-columns: 0.95fr 1.1fr 0.95fr;
  gap:16px;
  height: calc(100vh - 120px);
  padding:16px 20px;
}
.col{min-height:0; overflow:auto; padding-bottom:10px}

.big-card{ padding:16px; }
.glass{
  background: var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  box-shadow: var(--shadow);
}

/* Square rounded big button */
.big-button{
  width:100%;
  height:320px;
  border:none;
  position:relative;
  cursor:pointer;
  display:grid; place-items:center;
  font-family: Orbitron, Inter;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.big-button.square{
  border-radius:28px;
  background:
    radial-gradient(60% 50% at 30% 25%, rgba(255,255,255,0.3), transparent 60%),
    radial-gradient(50% 60% at 70% 75%, rgba(0,245,212,0.18), transparent 60%),
    linear-gradient(160deg, rgba(124,92,255,0.6), rgba(124,92,255,0.28) 40%, rgba(0,0,0,0.2) 75%);
  box-shadow: inset 0 -10px 30px rgba(0,0,0,0.35), 0 22px 50px rgba(0,0,0,0.45);
}
.big-button .shine{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(40% 30% at 35% 25%, rgba(255,255,255,0.35), transparent 60%);
}
.big-button:active{ transform: translateY(1px) scale(0.998); filter: saturate(1.05); box-shadow: inset 0 -6px 22px rgba(0,0,0,0.45), 0 12px 24px rgba(0,0,0,0.35)}
.big-button .txt-mid{ font-size:72px; filter: drop-shadow(0 10px 26px rgba(124,92,255,0.6)); }
.big-button .txt-bot{ position:absolute; bottom:16px; font-size:14px; opacity:0.85; color: #ffffff }

.info-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:14px;
}
.info-item{
  background: var(--panel-strong); border:1px solid rgba(255,255,255,0.08); padding:10px 12px; border-radius:12px;
}
.info-item .k{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em}
.info-item .v{font-family: Orbitron; font-weight:800; margin-top:4px}

.panel{ padding:12px }
.panel.tight{ padding:8px }

.log{
  max-height:240px;
  overflow:auto;
  font-size:12px;
  color:var(--muted);
  margin-top: 12px;
}
.log .entry{ padding:4px 0; border-bottom:1px dashed rgba(255,255,255,0.06); }
.log .entry:last-child{ border-bottom:none }

.center-tabs{ display:flex; gap:8px; flex-wrap:wrap }
.ctab{
  background: var(--panel);
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
}
.ctab.active{ background: linear-gradient(90deg, rgba(124,92,255,0.5), rgba(0,245,212,0.3)); }
.ctab.secret{ background: linear-gradient(90deg, rgba(255,124,229,0.35), rgba(124,92,255,0.35)); }
.hidden{ display:none !important }

.tabpanes{
  margin-top:8px;
  background: var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:12px;
  min-height:320px;
}
.tabpane{ display:none }
.tabpane.active{ display:block }

.upgrades-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:10px;
}
.upg-card{
  display:grid; grid-template-columns: 44px 1fr auto; gap:10px; align-items:center;
  padding:10px; border-radius:12px; background: var(--panel-strong); border:1px solid rgba(255,255,255,0.08);
}
.upg-card .icon{ width:44px; height:44px; display:grid; place-items:center; font-size:22px; border-radius:10px;
  background: linear-gradient(145deg, rgba(124,92,255,0.25), rgba(0,245,212,0.25)); }
.upg-card .title{ font-weight:800 }
.upg-card .sub{ font-size:12px; color:var(--muted) }

/* Minigames */
.minigames-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:12px }
.minigame-card{ padding:12px; position:relative }
.mg-head{ display:flex; align-items:center; justify-content:space-between }
.badge.req{
  background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.12);
  padding:4px 8px; border-radius:999px; font-size:11px; color:var(--muted);
}
.status{ color:var(--muted); font-size:12px }

.sequence{
  display:grid; grid-template-columns: repeat(2, 80px); gap:10px; justify-content:start; margin:10px 0 10px;
}
.seq{
  width:80px; height:80px; border-radius:10px; border:1px solid rgba(255,255,255,0.1); cursor:pointer;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);
  transition: transform .05s ease, box-shadow .1s ease, filter .1s ease;
}
.seq:active{ transform: scale(0.98) }
.s1{ background: radial-gradient(60px 60px at 40% 40%, rgba(124,92,255,0.7), rgba(124,92,255,0.18)); }
.s2{ background: radial-gradient(60px 60px at 60% 40%, rgba(0,245,212,0.7), rgba(0,245,212,0.18)); }
.s3{ background: radial-gradient(60px 60px at 40% 60%, rgba(255,124,229,0.7), rgba(255,124,229,0.18)); }
.s4{ background: radial-gradient(60px 60px at 60% 60%, rgba(255,209,102,0.7), rgba(255,209,102,0.18)); }
.seq.glow{ filter: brightness(1.8) saturate(1.3) }

/* Hold 'n Release */
.holdbar{
  position:relative; height:22px; border-radius:999px; background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12); overflow:hidden; margin:8px 0 8px;
}
.hold-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.hold-target{
  position:absolute; top:2px; bottom:2px; width:10%;
  left:60%; border-radius:999px;
  background: linear-gradient(90deg, rgba(255,209,102,0.6), rgba(255,124,229,0.6));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);
}

/* Type-O-Tron */
.typeo .prompt{
  padding:8px 10px; border-radius:10px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); min-height:40px; margin-bottom:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
}
.type-input{
  width:100%; border-radius:10px; border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05); color:#fff; padding:8px 10px; outline:none;
}

/* Generic rows and buttons */
.list{ display:flex; flex-direction:column; gap:10px }
.row{
  display:grid;
  grid-template-columns: 44px 1.3fr 0.8fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  background: var(--panel-strong);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
}
.row .icon{
  width:44px; height:44px; display:grid; place-items:center; border-radius:10px;
  background: linear-gradient(145deg, rgba(124,92,255,0.2), rgba(0,245,212,0.2));
  font-size:22px;
}
.row .title{ font-weight:800 }
.row .sub{ color:var(--muted); font-size:12px }
.row .controls{ display:flex; gap:8px; align-items:center; justify-content:flex-end }

/* Button animations and states */
.btn{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#0b0f17;
  border:none; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:800; letter-spacing:0.02em;
  box-shadow: 0 8px 20px rgba(0,245,212,0.25);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(0,245,212,0.2) }
.btn.secondary{
  background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
  color:#fff; border:1px solid rgba(255,255,255,0.12); box-shadow:none;
}
.btn.danger{
  background: linear-gradient(90deg, var(--danger), #ff9cb5);
  color:#19020a;
}
.btn:disabled{
  opacity:0.35; filter: grayscale(0.5) brightness(0.9); cursor:not-allowed;
  transform:none; box-shadow:none;
}

/* Affordable pulse cue */
@keyframes pulse-available{
  0%{ box-shadow: 0 0 0 0 rgba(0,245,212,0.0) }
  50%{ box-shadow: 0 0 0 8px rgba(0,245,212,0.08) }
  100%{ box-shadow: 0 0 0 0 rgba(0,245,212,0.0) }
}
.btn.pulse{ animation: pulse-available 1.6s ease-in-out infinite }

/* Store */
.store-title{ margin:8px 0 6px }
.store-controls{ display:flex; gap:8px; margin-bottom:8px }
.store{ display:flex; flex-direction:column; gap:8px }

/* Active quantity visual */
.store-controls .qty.active{
  background: linear-gradient(90deg, rgba(124,92,255,0.6), rgba(0,245,212,0.5));
  color:#071018;
  border-color: rgba(255,255,255,0.2);
}

/* Achievements */
.achievements-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px;
}
.ach {
  padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
  /* Existing background kept as base; we’ll transition to a bluer accent */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02)
  );
  transform: translateZ(0) scale(1);
  transition:
    transform 360ms cubic-bezier(.25,.85,.25,1),
    box-shadow 420ms ease,
    background 420ms ease,
    filter 420ms ease;
  will-change: transform;
  backface-visibility: hidden;
}
.ach::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      180deg,
      rgba(142,175,255,0.42) 0%,
      rgba(60,85,130,0.10) 60%,
      rgba(25,40,70,0.30) 100%
    );
  transition: opacity 500ms ease;
}

.ach:hover:not(.locked) {
  transform: scale(1.025);
  background:
    linear-gradient(
      180deg,
      rgba(180,210,255,0.30) 0%,
      rgba(70,95,150,0.12) 55%,
      rgba(30,45,75,0.24) 100%
    );
  box-shadow:
    0 6px 18px -6px rgba(24,32,50,0.65),
    0 0 0 1px rgba(130,160,255,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  filter: saturate(1.05);
}

.ach:hover:not(.locked)::before {
  opacity: 1;
}

.ach:hover:not(.locked),
.ach:focus-visible:not(.locked) {
  transform: translateZ(0) scale(1.045);
  box-shadow:
    0 6px 18px -6px rgba(20,30,55,0.65),
    0 0 0 1px rgba(130,160,255,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  background:
    linear-gradient(
      180deg,
      rgba(180,210,255,0.28) 0%,
      rgba(65,90,140,0.12) 55%,
      rgba(28,42,70,0.24) 100%
    );
  filter: saturate(1.04);
}

.ach:active:not(.locked) {
  /* Slight press feedback */
  transform: translateZ(0) scale(1.02);
  transition-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  .ach,
  .ach:hover:not(.locked),
  .ach:focus-visible:not(.locked) {
    transition: background 250ms ease, box-shadow 250ms ease, filter 250ms ease;
    transform: none;
  }
}

.ach.locked {
  filter: grayscale(0.5) opacity(.75);
  transition:
    background 500ms ease,
    filter 400ms ease;
  transform: translateZ(0) scale(1);
}

.ach.locked:hover {
  /* Keep locked ones from scaling to emphasize difference */
  transform: none;
  filter: grayscale(0.5) opacity(.85);
  background:
    linear-gradient(
      180deg,
      rgba(150,160,185,0.18),
      rgba(70,80,105,0.08)
    );
}

@media (prefers-reduced-motion: reduce) {
  .ach,
  .ach::before {
    transition: background 250ms ease, box-shadow 300ms ease, filter 300ms ease;
  }
  .ach:hover:not(.locked) {
    transform: none;
  }
}
.ach .name{ font-weight:800 }
.ach .desc{ color:var(--muted); font-size:12px }
.ach .badge{
  position:absolute; top:10px; right:10px;
  padding:4px 8px; border-radius:999px; font-size:11px; background: var(--chip); border:1px solid rgba(255,255,255,0.12);
}

/* Lore */
.lore-list{ display:flex; flex-direction:column; gap:10px }
.lore-entry{
  padding:10px; border-radius:12px; background: var(--panel-strong); border:1px solid rgba(255,255,255,0.08);
}
.lore-entry .title{ font-weight:800 }
.lore-entry .text{ color:var(--muted); margin-top:6px; line-height:1.4 }

/* Ascension */
.ascension .asc-stats{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:8px; margin:8px 0;
}
.ascension .k{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em }
.ascension .v{ font-family: Orbitron; font-weight:800 }
.tree-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:10px;
}
.node{
  padding:10px; border-radius:12px; background: var(--panel-strong); border:1px solid rgba(255,255,255,0.12);
  display:grid; grid-template-columns: 44px 1fr auto; gap:10px; align-items:center;
}
.node .icon{ width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background: linear-gradient(145deg, rgba(124,92,255,0.25), rgba(0,245,212,0.25)); font-size:22px }
.node .name{ font-weight:800 }
.node .desc{ font-size:12px; color:var(--muted) }
.node .cost{ font-size:12px; color:#ffd166; text-align:right; margin-bottom:6px }
.node.locked{ opacity:0.6; filter: grayscale(0.4) }

.settings-grid{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px }
.savearea{ width:100%; min-height:120px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color:#fff; padding:10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; }

.options{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:10px }
.opt{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--panel-strong); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:8px 10px;
}

/* Styled selects */
.custom-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px 34px 8px 10px;
  font-weight: 700;
  box-shadow: none;
  position: relative;
}
.custom-select:hover{ filter: brightness(1.05) }
.custom-select:focus{ outline: 2px solid rgba(124,92,255,0.65); outline-offset: 2px }

/* Arrow */
.custom-select{
  background-image:
    linear-gradient(180deg, rgba(124,92,255,0.8), rgba(0,245,212,0.7));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Provide a wrapper look by aligning right side with an arrow-like indicator */
.opt .custom-select{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  position: relative;
}
.opt .custom-select::after{
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 0; height: 0;
  pointer-events: none;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #cfd8ff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

/* Pretty music slider */
#musicVolume{ appearance: none; width: 56%; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); outline: none; position: relative; }
#musicVolume::-webkit-slider-runnable-track{ height:8px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) }
#musicVolume::-moz-range-track{ height:8px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) }
#musicVolume::-webkit-slider-thumb{ appearance:none; margin-top:-6px; width:20px; height:20px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #fff, #c9d2ff); border:2px solid #8ea0ff; box-shadow: 0 6px 16px rgba(124,92,255,0.45), 0 0 0 4px rgba(124,92,255,0.18) }
#musicVolume::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #fff, #c9d2ff); border:2px solid #8ea0ff; box-shadow: 0 6px 16px rgba(124,92,255,0.45), 0 0 0 4px rgba(124,92,255,0.18) }
#musicVolume:active::-webkit-slider-thumb{ transform: scale(1.06) }
#musicVolume:active::-moz-range-thumb{ transform: scale(1.06) }
#musicVolume:hover{ filter: brightness(1.05) }
#musicVolume + #musicVolumeLabel{
  margin-left: 8px;
  color: var(--muted);
  font-weight: 700;
  display: inline-block;
  width: 48px; /* fits up to 100% */
  text-align: right;
  font-variant-numeric: tabular-nums; /* fixed-width digits */
  font-feature-settings: 'tnum' 1; /* Safari/Chrome */
}

/* Target Tap styles */
.target-area{ position: relative; height: 180px; border-radius: 12px; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); margin: 8px 0; overflow: hidden; }
.target-dot{ position:absolute; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 35%, #fff, #ffd166); box-shadow: 0 8px 18px rgba(255,209,102,0.45);
  transition: transform 80ms ease; }
.target-dot:active{ transform: scale(0.94) }

.bottombar{
  height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px);
}
.sep{margin:0 8px; opacity:0.6}

.rare-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Redesigned golden "button" */
.rare-orb{
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 18px; /* matches the square button feel */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, #ffe69a 0%, #ffd166 42%, #f3b700 70%, #b68000 100%);
  box-shadow:
    inset 0 -10px 22px rgba(0,0,0,0.35),
    0 14px 28px rgba(0,0,0,0.35);
  border: 3px solid #ffec99;
  display: grid;
  place-items: center;
  pointer-events: auto; /* clickable despite parent being none */
  cursor: pointer;

  /* Animation: spawn pop-in + gentle bob */
  transform: scale(0);
  opacity: 0;
  animation:
    orbPopIn 700ms cubic-bezier(0.2, 0.9, 0.25, 1.1) forwards,
    orbBob 6s ease-in-out infinite 200ms;
  will-change: transform, opacity, filter;
  transition: filter 120ms ease;
}

/* Moving shine sweep layer */
.rare-orb::before{
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: inherit;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Soft top gloss */
.rare-orb::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 45%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Hover/active keep subtle motion */
.rare-orb:hover{ filter: saturate(1.06) brightness(1.02) }
.rare-orb:active{
  filter: saturate(1.08) brightness(1.03);
  box-shadow:
    inset 0 -6px 18px rgba(0,0,0,0.45),
    0 10px 22px rgba(0,0,0,0.3);
}

/* Despawn: reverse animation (scale down and fade) */
.rare-orb.despawn{
  animation:
    orbDespawn 450ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Keyframes */
@keyframes orbPopIn{
  0%   { transform: scale(0); opacity: 0 }
  60%  { transform: scale( calc(var(--target-scale, 1)) ); opacity: 1 }
  100% { transform: scale( calc(var(--target-scale, 1)) ); opacity: 1 }
}

@keyframes orbDespawn{
  0%   { transform: scale( calc(var(--target-scale, 1)) ); opacity: 1 }
  100% { transform: scale(0); opacity: 0 }
}

@keyframes orbBob{
  0%   { transform: translateY(0) scale( calc(var(--target-scale, 1)) ) }
  50%  { transform: translateY(-6px) scale( calc(var(--target-scale, 1)) ) }
  100% { transform: translateY(0) scale( calc(var(--target-scale, 1)) ) }
}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(140%);
  padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.25));
  color:#fff; backdrop-filter: blur(8px);
  transition: transform .25s ease;
  z-index: 5;
}
.toast.show{ transform:translateX(-50%) translateY(0) }

.floating{
  position:absolute; pointer-events:none; color:#fff; font-weight:800; text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  animation: floatUp .8s ease-out forwards;
}
@keyframes floatUp{
  0%{ opacity:0; transform: translateY(10px) scale(0.8) }
  20%{ opacity:1 }
  100%{ opacity:0; transform: translateY(-30px) scale(1) }
}

@media (max-width: 1240px){
  .main.threecol{ grid-template-columns: 1fr; height:auto; min-height: calc(100vh - 120px); }
  body{ overflow:auto }
  .big-button{ height:280px }
}

/* Buff tooltip (follows cursor; stays outside buff bar) */
.buff-tooltip {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(25, 28, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #eaeef7;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  pointer-events: none; /* don't steal the pointer */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 120ms ease, transform 120ms ease;
  font-size: 13px;
  line-height: 1.35;
}
.buff-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
.buff-tooltip .tt-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.buff-tooltip .tt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.95;
}
.buff-tooltip .tt-badge {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 12px;
  background: linear-gradient(90deg, var(--accent, #00f5d4), #6c5ce7);
  color: #0c0f14;
  font-weight: 700;
}
.buff-tooltip .tt-note {
  margin-top: 6px;
  opacity: 0.8;
  font-size: 12px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.stats-row .k { opacity: 0.8; }
.stats-row .v { font-weight: 600; }

#ctab-rng { padding:10px; }
.rng-section.hidden { display:none; }
.rng-aura-card { border:1px solid #333; padding:6px; width:140px; font-size:12px; border-radius:6px; position:relative; background:#1d1d1d; }
.rng-aura-card.locked { filter:grayscale(1) opacity(.5); }
.rng-aura-grid { display:flex; flex-wrap:wrap; gap:6px; max-height:420px; overflow:auto; }
.rng-gauntlet { display:flex; align-items:center; gap:6px; margin:4px 0; }
.rng-pot { display:flex; align-items:center; gap:6px; margin:4px 0; }
.rng-active-potion { color:#ffec66; font-weight:bold; }
body[class*="aura-"]::before {
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.05), transparent 65%);
  mix-blend-mode:screen;
  animation:auraPulse 8s linear infinite;
}
@keyframes auraPulse {
  0%,100% { opacity:0.4; }
  50% { opacity:0.7; }
}
/* Example per-aura color glows */
body.aura-common { box-shadow: inset 0 0 50vmax 0 rgba(255,255,255,0.04); }
body.aura-divinus { box-shadow: inset 0 0 50vmax 0 rgba(255,230,140,0.08); }
body.aura-equinox { box-shadow: inset 0 0 55vmax 0 rgba(255,102,255,0.12); }

.rng-tabs {
  display: flex;
  gap: 10px;
  margin: 0 0 12px 0;
  flex-wrap: wrap;
}

.rng-tabs .rngSub {
  position: relative;
  appearance: none;
  border: 1px solid #2d2f36;
  background:
    linear-gradient(145deg, #262a31, #1d2025);
  color: #d5d9e2;
  padding: 8px 18px;
  font-size: 14px;
  line-height: 1.1;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  user-select: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 0 rgba(120,195,255,0.35),
    0 4px 10px -3px rgba(0,0,0,0.5);
}

.rng-tabs .rngSub:hover:not(.active) {
  background:
    linear-gradient(145deg, #2d323b, #23272e);
  color: #ffffff;
}

.rng-tabs .rngSub:active:not(.active) {
  transform: translateY(1px);
  background:
    linear-gradient(145deg, #22262c, #1a1d22);
}

.rng-tabs .rngSub.active {
  background:
    linear-gradient(150deg, #3d78ff 0%, #7847ff 55%, #b339ff 100%);
  color: #ffffff;
  border-color: #5d83ff;
  box-shadow:
    0 0 0 1px rgba(120,140,255,0.35),
    0 4px 14px -2px rgba(80,120,255,0.55),
    0 0 24px -6px rgba(180,70,255,0.7);
}

.rng-tabs .rngSub.active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #66d8ff, #b573ff 55%, #ff7df3);
  box-shadow: 0 0 6px 2px rgba(140,110,255,0.5);
  pointer-events: none;
}

.rng-tabs .rngSub:focus-visible {
  outline: 2px solid #6aa7ff;
  outline-offset: 2px;
}

/* Small screen tightening */
@media (max-width: 640px) {
  .rng-tabs .rngSub {
    padding: 6px 14px;
    font-size: 13px;
  }
}