/* ==========================================================================
   BUMP-UP.NET — Apple-Style Frosted Glass Theme (Mint/Teal)
   Tailwind-friendly. Paste as /public/css/theme.css
   ========================================================================== */

/* Base */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #0E1013;                 /* deep charcoal */
  color: #ECF8F6;                       /* mint-tinted white */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  /* Page surfaces */
  --bg: #0E1013;
  --bg-2: #11161B;

  /* Ink */
  --ink: #ECF8F6;
  --ink-dim: #B9CAC7;

  /* Brand (mint/teal) */
  --mint-1: #69F0E0;        /* highlight */
  --mint-2: #2EC9C5;        /* body */
  --mint-3: #188C9D;        /* depth */
  --brand:  #42D8D0;

  /* States */
  --ok: #22C55E;
  --warn: #F59E0B;
  --danger: #EF4444;
  --info: #5CC7E6;

  /* Glass core */
  --glass-bg: rgba(255,255,255,0.04);   /* base milky wash (more transparent) */
  --glass-tint: rgba(73,216,210,0.10);  /* mint tint */
  --glass-spec: rgba(255,255,255,0.18); /* specular highlight */
  --glass-border: rgba(255,255,255,0.30);
  --glass-border-2: rgba(255,255,255,0.08);
  --glass-blur: 22px;                   /* strong frost */
  --glass-sat: 170%;                    /* rich saturation */

  /* Elevation */
  --elev-1: 0 8px 28px rgba(0,0,0,0.32);
  --elev-2: 0 14px 40px rgba(0,0,0,0.40);
  --elev-3: 0 20px 64px rgba(0,0,0,0.50);

  /* Radii */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Motion */
  --t-fast: 120ms;
  --t-mid: 220ms;
  --t-slow: 360ms;

  /* Subtle noise */
  --noise: radial-gradient(1px 1px at 25% 15%, rgba(255,255,255,0.06) 0, transparent 60%),
           radial-gradient(1px 1px at 75% 85%, rgba(255,255,255,0.05) 0, transparent 60%);
}

@media (prefers-color-scheme: light) {
  :root { --bg: #0E1013; } /* stay dark site-wide */
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
a { color: var(--ink); text-decoration: none; }
a:hover { opacity: .9; }
hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 16px 0; }

.muted { color: var(--ink-dim); }
.text-dim { color: var(--ink-dim); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* Focus ring */
:focus-visible { outline: 2px solid color-mix(in oklab, var(--mint-1) 65%, var(--mint-2)); outline-offset: 2px; border-radius: 8px; }

/* Motion respect */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ==========================================================================
   GLASS PRIMITIVE
   ========================================================================== */
.glass-base {
  position: relative;
  background:
    linear-gradient(180deg, var(--glass-spec), transparent 35%),  /* specular */
    linear-gradient(0deg, var(--glass-tint), transparent),        /* mint tint */
    var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border-2);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  overflow: hidden;
}
.glass-base::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--glass-border), inset 0 0 0 9999px rgba(255,255,255,0.01);
}
.glass-base::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: var(--noise); opacity: .25;
}
.glass-hover { transition: transform var(--t-mid), box-shadow var(--t-mid), background var(--t-mid); }
.glass-hover:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }

/* ==========================================================================
   HEADER / FOOTER
   ========================================================================== */
.header-glass {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 0;
  border-left: none; border-right: none; border-top: none;
  backdrop-filter: blur(24px) saturate(calc(var(--glass-sat) + 20%));
  -webkit-backdrop-filter: blur(24px) saturate(calc(var(--glass-sat) + 20%));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00)),
    linear-gradient(0deg, rgba(12,16,20,0.55), rgba(12,16,20,0.55)),
    var(--glass-bg);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.50),
    0 0 46px rgba(73,216,210,0.16); /* mint underglow */
}
.header-brand {
  font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(90deg, var(--mint-1), var(--mint-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.header-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 12px;
  color: var(--ink); opacity: .86;
  transition: background var(--t-mid), opacity var(--t-fast), transform var(--t-fast);
}
.header-nav a:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  opacity: 1; transform: translateY(-1px);
}

.footer-glass {
  margin-top: 40px; padding: 18px 14px; display: grid; place-items: center;
  border-radius: 0; border-left: none; border-right: none; border-bottom: none;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  background:
    linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00)),
    linear-gradient(180deg, rgba(12,16,20,0.52), rgba(12,16,20,0.52)),
    var(--glass-bg);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 -14px 40px rgba(0,0,0,0.48),
    0 0 40px rgba(73,216,210,0.14);
}

/* ==========================================================================
   CARDS / CHIPS
   ========================================================================== */
.card-glass {
  border-radius: var(--r-lg);
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.00)),
    linear-gradient(0deg, var(--glass-tint), transparent),
    var(--glass-bg);
  border: 1px solid var(--glass-border-2);
  box-shadow: var(--elev-1);
}
.card-glass.is-hoverable { transition: transform var(--t-mid), box-shadow var(--t-mid), background var(--t-mid); }
.card-glass.is-hoverable:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.00)),
    linear-gradient(0deg, var(--glass-tint), transparent),
    var(--glass-bg);
}

.display-chip {
  border-radius: 999px; padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.00)),
    var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
}

/* ==========================================================================
   BUTTONS — true glass with mint halo on hover
   ========================================================================== */
.btn-glass {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-weight: 600; font-size: .95rem; line-height: 1;
  color: var(--ink);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)),
    linear-gradient(0deg, rgba(73,216,210,0.10), transparent),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 8px 22px rgba(0,0,0,0.35);
  transition:
    transform var(--t-fast),
    box-shadow var(--t-mid),
    background var(--t-mid),
    outline-color var(--t-fast),
    opacity var(--t-fast);
  cursor: pointer;
}
.btn-glass:hover,
.btn-glass:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 10px 28px rgba(0,0,0,0.40),
    0 0 0 1px rgba(73,216,210,0.45),  /* thin ring */
    0 0 28px rgba(73,216,210,0.30),   /* halo */
    0 0 56px rgba(73,216,210,0.22);   /* wide halo */
}
.btn-glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 120% at 50% -20%, rgba(105,240,224,0.26), transparent 60%);
  opacity: 0; transition: opacity var(--t-mid);
}
.btn-glass:hover::after,
.btn-glass:focus-visible::after { opacity: 1; }

.btn-glass:active { transform: translateY(0); }

.btn-glass.is-solid {
  color: #062126;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.00)),
    linear-gradient(135deg,
      color-mix(in oklab, var(--mint-1) 50%, transparent),
      color-mix(in oklab, var(--mint-2) 50%, transparent)),
    rgba(255,255,255,0.05);
  border-color: color-mix(in oklab, var(--mint-2) 55%, rgba(255,255,255,0.16));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 12px 30px rgba(0,0,0,0.42),
    0 0 32px rgba(73,216,210,0.32);
}
.btn-glass.is-danger {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00)),
    linear-gradient(135deg, color-mix(in oklab, var(--danger) 36%, transparent),
                           color-mix(in oklab, #ff7b7b 28%, transparent));
  border-color: color-mix(in oklab, var(--danger) 50%, rgba(255,255,255,0.16));
}
.btn-glass.is-ok {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00)),
    linear-gradient(135deg, color-mix(in oklab, var(--ok) 38%, transparent),
                           color-mix(in oklab, #90ee90 24%, transparent));
  border-color: color-mix(in oklab, var(--ok) 50%, rgba(255,255,255,0.16));
}

.btn-glass[disabled], .btn-glass.is-disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-glass.is-active {
  box-shadow:
    0 0 0 2px var(--ok),
    0 0 18px var(--ok),
    0 10px 28px rgba(0,0,0,0.38),
    0 0 26px rgba(73,216,210,0.28);
}

/* Icon-only buttons */
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 12px; }
.icon-btn svg { width: 18px; height: 18px; }

/* ==========================================================================
   UNLOCKS / DISPLAY FX
   ========================================================================== */
.display-line { display: inline-block; font-size: 1.15rem; line-height: 1.1; letter-spacing: .2px; }
.display-username { font-size: 1.85rem; font-weight: 800; }

.color-cube { width: 18px; height: 18px; border-radius: 6px; box-shadow: 0 0 12px currentColor; }

.unlock-tile {
  border-radius: var(--r-lg);
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.00)),
    linear-gradient(0deg, var(--glass-tint), transparent),
    var(--glass-bg);
  border: 1px solid var(--glass-border-2);
  backdrop-filter: blur(16px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
  box-shadow: var(--elev-1);
  transition: transform var(--t-mid), box-shadow var(--t-mid), background var(--t-mid);
}
.unlock-tile:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--elev-2),
    0 0 22px rgba(73,216,210,0.18),
    0 0 44px rgba(73,216,210,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.00)),
    linear-gradient(0deg, var(--glass-tint), transparent),
    var(--glass-bg);
}
.unlock-tile .meta { font-size: .8rem; color: var(--ink-dim); }

.locked   { color: #f87171; }
.unlocked { color: #4ade80; }
.ready    { color: #fbbf24; }

/* ==========================================================================
   TOASTS
   ========================================================================== */
#toast-area { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 10px; }
.toast-glass {
  border-radius: var(--r-md);
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00)),
    var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--elev-2);
  transition: transform var(--t-mid), opacity var(--t-mid);
}
.toast-glass.enter { transform: translateY(8px); opacity: 0; }
.toast-glass.show  { transform: translateY(0);   opacity: 1; }
.toast-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; }

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-mid);
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal-panel {
  position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.98);
  width: min(720px, 92vw); padding: 16px;
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.00)),
    linear-gradient(0deg, var(--glass-tint), transparent),
    var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(20px) saturate(calc(var(--glass-sat) + 10%));
  -webkit-backdrop-filter: blur(20px) saturate(calc(var(--glass-sat) + 10%));
  box-shadow: var(--elev-3);
  opacity: 0; transition: transform var(--t-mid), opacity var(--t-mid);
}
.modal-backdrop.is-open + .modal-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* ==========================================================================
   RINGS / BADGES / AVATARS
   ========================================================================== */
.ring-ok    { box-shadow: 0 0 0 2px var(--ok),   0 0 20px var(--ok); }
.ring-warn  { box-shadow: 0 0 0 2px var(--warn), 0 0 20px var(--warn); }
.ring-brand { box-shadow: 0 0 0 2px var(--mint-2), 0 0 20px var(--mint-2); }

.badge-icon {
  width: 24px; height: 24px; border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00)),
    var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.14);
  display: inline-grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.30);
}
.badge-icon img { display: block; width: 20px; height: 20px; }

/* ==========================================================================
   TEXT EFFECTS HELPERS
   ========================================================================== */
.text-stroke-light { -webkit-text-stroke: 1px rgba(255,255,255,.28); text-stroke: 1px rgba(255,255,255,.28); }
.text-stroke-dark  { -webkit-text-stroke: 1px rgba(0,0,0,.42);      text-stroke: 1px rgba(0,0,0,.42); }

.neon-mint  { text-shadow: 0 2px 16px rgba(105,240,224,.34), 0 0 30px rgba(66,216,208,.28); color: #DFFFFA; }
.neon-lime  { text-shadow: 0 0 28px #39ff14, 0 0 12px #39ff14; color: #d9ffd4; }
.neon-violet{ text-shadow: 0 0 18px #8b5cf6, 0 0 8px #8b5cf6; color: #c4b5fd; }
.neon-pink  { text-shadow: 0 0 28px #ff3ea5, 0 0 12px #ff3ea5; color: #ffc2e6; }

/* ==========================================================================
   LAYOUT HELPERS / GRIDS
   ========================================================================== */
.container-narrow { width: min(960px, 92vw); margin-inline: auto; }
.container-wide   { width: min(1240px, 92vw); margin-inline: auto; }

.grid-auto-min {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* ==========================================================================
   PROGRESS / TABLES / FORMS
   ========================================================================== */
.progress-wrap {
  height: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00)),
    var(--glass-bg);
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden; backdrop-filter: blur(12px);
}
.progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--mint-1), var(--mint-2));
  transition: width var(--t-slow) ease;
}

.table-glass {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)),
    var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(14px);
}
.table-glass th, .table-glass td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.table-glass thead th {
  text-align: left; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00));
}
.table-glass tbody tr:hover { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)); }

.input-glass {
  width: 100%; padding: 10px 12px; color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00)),
    var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  outline: none; backdrop-filter: blur(12px);
  transition: border-color var(--t-mid), box-shadow var(--t-mid), background var(--t-mid);
}
.input-glass::placeholder { color: color-mix(in oklab, var(--ink) 55%, transparent); }
.input-glass:focus {
  border-color: color-mix(in oklab, var(--mint-2) 60%, rgba(255,255,255,0.16));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-2) 35%, transparent);
}

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch .track {
  width: 44px; height: 24px; border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.00)),
    var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.14);
  position: relative; transition: background var(--t-mid), border-color var(--t-mid);
  backdrop-filter: blur(10px);
}
.switch .thumb {
  position: absolute; top: 50%; left: 4px; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 999px;
  background: linear-gradient(180deg, #fff, #cfe9e6);
  box-shadow: 0 2px 10px rgba(0,0,0,0.30);
  transition: left var(--t-mid);
}
.switch input:checked + .track { border-color: var(--ok); }
.switch input:checked + .track .thumb { left: 22px; }

/* ==========================================================================
   BRAND HALO BACKGROUND (optional)
   ========================================================================== */
.brand-bg {
  background:
    radial-gradient(600px 300px at 10% 0%, rgba(105,240,224,0.18), transparent 60%),
    radial-gradient(500px 300px at 90% 0%, rgba(46,201,197,0.18), transparent 60%),
    var(--bg);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
  .header-nav a { padding: 6px 8px; }
  .display-username { font-size: 1.55rem; }
  .display-line { font-size: 1.05rem; }
  .btn-glass { padding: 9px 12px; }
}

/* ==========================================================================
   PAGE HOOKS
   ========================================================================== */
#unlocks-root { padding-top: 10px; }
#paymentModal .modal-panel { width: min(560px, 92vw); }
.wall-card { min-height: 120px; }

/* End — Apple Glass x Mint (more transparent panes + hover halo buttons) */

/* Shared finishing and accessibility. */
:root { --brand-1:#69f0e0; --brand-2:#a78bfa; --brand-ring:#42d8d0; }
:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
button:disabled { opacity:.45; cursor:not-allowed; }
dialog { background:#161b22; max-height:90vh; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.75); backdrop-filter:blur(6px); }
.post-message { overflow-wrap:anywhere; }
.card { background:var(--bg-2); border:1px solid rgba(255,255,255,.09); border-radius:16px; }
.input { max-width:100%; background:#0e1013; color:var(--ink); border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:.65rem .8rem; }
:root { --card:var(--bg-2); --muted:var(--ink-dim); --border:rgba(255,255,255,.1); }
#publicName, #previewName, #uidBox { overflow-wrap:anywhere; min-width:0; }
#publicName { font-size:1rem; }
#userMenuLabel { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#changeNameBtn { flex-shrink:0; margin-left:8px; }
.muted { color:var(--ink-dim); }
@media(max-width:480px){ footer nav { flex-wrap:wrap; gap:.75rem !important; } .auth-card{margin:1.5rem 0;} }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important;} }

.medal-art { display:flex; align-items:center; justify-content:center; height:180px; margin:10px 0 4px; }
.medal-image { display:block; width:160px; height:160px; object-fit:contain; flex-shrink:0; }
.tile.medal-tile { display:flex; flex-direction:column; padding:20px; background:linear-gradient(155deg,#171922,#11141b); border:1px solid rgba(167,139,250,.16); }
.tile.medal-tile.locked { opacity:1; filter:none; color:var(--ink); }
.medal-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.medal-category { color:#a5a1b8; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.medal-name { text-align:center; color:#f2ecff; font-size:16px; font-weight:800; line-height:1.4; min-height:23px; }
.medal-requirement { text-align:center; color:#b8b9c7; font-size:12px; line-height:1.6; min-height:40px; margin:6px 0 20px; }
.medal-progress-label { display:flex; justify-content:space-between; gap:8px; color:#aaa6bb; font-size:10px; margin-bottom:7px; }
.medal-progress { height:4px; border-radius:10px; background:#2c2939; overflow:hidden; }
.medal-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a78bfa,#69f0e0); }
.medal-action { display:flex; align-items:center; justify-content:center; min-height:54px; padding-top:16px; margin-top:auto; }
.medal-action .btn-glass { width:100%; padding:8px 12px; font-size:12px; }
.medal-locked-note { color:#898798; text-align:center; font-size:10px; }
#badgesGrid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }

#brandLink, footer a[aria-label="Go to Walls"] { white-space:nowrap; flex-shrink:0; }
#siteHeader summary { white-space:nowrap; }
#siteHeader > div { gap:8px; }

.badge-option-icon { width:36px; height:36px; object-fit:contain; flex-shrink:0; }

.badge-tier { object-fit:contain; }
.tier-ink-bronze { color:#dfa574; }.tier-ink-silver { color:#d6e1ee; }.tier-ink-gold { color:#f7d46c; }.tier-ink-diamond { color:#9beaff; }.tier-ink-black { color:#c2b8ed; }
.tier-name { font-weight:800; }
.tile.tier-card-bronze { background:linear-gradient(145deg,#211b18,#121317); border-color:#c48a543b; }
.tile.tier-card-silver { background:linear-gradient(145deg,#1b2029,#12151c); border-color:#c0ccdf3b; }
.tile.tier-card-gold { background:linear-gradient(145deg,#242014,#15140f); border-color:#e5bc5044; }
.tile.tier-card-diamond { background:linear-gradient(145deg,#14242d,#10161f); border-color:#8ee9ff44; }
.tile.tier-card-black { background:linear-gradient(145deg,#131119,#08090e); border-color:#9e8ccd66; }
.tier-card-bronze .medal-progress > span { background:linear-gradient(90deg,#9e5e36,#efc595); }
.tier-card-silver .medal-progress > span { background:linear-gradient(90deg,#8694ad,#edf4ff); }
.tier-card-gold .medal-progress > span { background:linear-gradient(90deg,#b68c23,#ffe295); }
.tier-card-diamond .medal-progress > span { background:linear-gradient(90deg,#55bace,#d3fcff); }
.tier-card-black .medal-progress > span { background:linear-gradient(90deg,#514263,#ddd3f4); }
.tier-collection { padding:22px; border:1px solid #a78bfa22; border-radius:16px; background:#12151c; margin-bottom:24px; }
@media(max-width:520px){.tier-collection{padding:16px 12px}}

/* Special medals carry their own fixed material; symbols stay ivory. */
.badge-tier.badge-special { filter:none; }
.medal-story { font-size:12px; color:var(--muted); line-height:1.5; margin:4px 0 10px; min-height:36px; }
.difficulty-legend { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:18px; font-size:12px; }
.difficulty-legend span { display:flex; align-items:center; gap:7px; }
.difficulty-legend i { width:16px; height:16px; border-radius:50%; border:1px solid #ffffff44; box-shadow:inset 0 1px 2px #ffffff66; }
.difficulty-bronze { background:#b87948; }.difficulty-silver { background:#b4c4d7; }.difficulty-gold { background:#e2b747; }.difficulty-diamond { background:#8ee8f7; }.difficulty-black { background:#222330; }