/* ═══════════════════════════════════════════════════════════════════
   ANCHOR SHELL — unified top-bar + bottom-nav + achievement-toast
   Used by: today, read, plan, community, you, founding-reader, index
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --shell-bg: var(--bg, #F5EFE3);
  --shell-border: var(--border, rgba(30,30,30,0.08));
  --shell-text: var(--text, #1A1A1A);
  --shell-text-muted: var(--text-muted, #6B6B6B);
  --shell-accent: var(--accent, #1E3A5F);
  --shell-accent-soft: var(--accent-soft, #2E5A8F);
  --shell-gold: #B8893A;
  --shell-silver: #A8B0B8;
  --shell-bronze: #A8763A;
  --shell-platinum: linear-gradient(135deg, #E8D5B7 0%, #C9A876 50%, #8B6F3A 100%);
  --shell-height-top: 56px;
  --shell-height-bottom: 60px;
  --shell-safe-top: env(safe-area-inset-top, 0px);
  --shell-safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark-DISABLED"]{
  --shell-bg: #1A1F2B;
  --shell-border: rgba(255,255,255,0.08);
  --shell-text: #E8E4DA;
  --shell-text-muted: #8A8A8A;
  --shell-accent: #6B9BD8;
  --shell-accent-soft: #5B8BC8;
}

/* ── Body padding so content doesn't hide behind bars ── */
body.has-shell{
  padding-top: calc(var(--shell-height-top) + var(--shell-safe-top));
  padding-bottom: calc(var(--shell-height-bottom) + var(--shell-safe-bottom));
}

/* ═══════════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════════ */
.shell-top{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--shell-height-top) + var(--shell-safe-top));
  padding-top: var(--shell-safe-top);
  background: var(--shell-bg);
  border-bottom: 1px solid var(--shell-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: 16px;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--shell-bg) 94%, transparent);
}

.shell-brand{
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--shell-text);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.01em;
}
.shell-brand img{ width: 28px; height: 28px; }

.shell-wallet{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--shell-accent);
  color: #F5EFE3;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms, background 120ms;
  font-family: inherit;
}
.shell-wallet:hover{ background: var(--shell-accent-soft); transform: translateY(-1px); }
.shell-wallet:active{ transform: translateY(0); }
.shell-wallet svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.shell-wallet.connected{
  background: transparent;
  color: var(--shell-text);
  border: 1px solid var(--shell-border);
  gap: 10px;
}
.shell-wallet.connected:hover{ background: color-mix(in srgb, var(--shell-text) 5%, transparent); }

.shell-wallet .wallet-level-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--shell-accent);
}
.shell-wallet.connected .wallet-level-dot{
  background: linear-gradient(135deg, #B8893A, #E8D5B7);
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAV (5 tabs)
   ═══════════════════════════════════════════════════════════════════ */
.shell-bottom{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--shell-height-bottom) + var(--shell-safe-bottom));
  padding-bottom: var(--shell-safe-bottom);
  background: color-mix(in srgb, var(--shell-bg) 96%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--shell-border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 100;
}

.shell-tab{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--shell-text-muted);
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  padding: 6px 4px 0;
  transition: color 120ms, transform 120ms;
  -webkit-tap-highlight-color: transparent;
}
.shell-tab svg{
  width: 22px; height: 22px;
  stroke: currentColor; stroke-width: 2;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke-width 120ms;
}
.shell-tab:active{ transform: scale(0.94); }
.shell-tab.active{ color: var(--shell-accent); }
.shell-tab.active svg{ stroke-width: 2.4; }
.shell-tab.active .shell-tab-label{ font-weight: 600; }

/* You-tab has level indicator */
.shell-tab .you-level-chip{
  position: absolute;
  top: 4px;
  margin-left: 16px;
  background: var(--shell-accent);
  color: #F5EFE3;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 14px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   ACHIEVEMENT TOAST (PSN/Xbox style)
   ═══════════════════════════════════════════════════════════════════ */
.shell-ach-toast{
  position: fixed;
  top: calc(var(--shell-height-top) + var(--shell-safe-top) + 12px);
  left: 50%;
  transform: translate(-50%, -80px);
  opacity: 0;
  transition: transform 400ms cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 300ms;
  z-index: 1000;
  pointer-events: none;
  width: min(92%, 420px);
}
.shell-ach-toast.show{
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.shell-ach-card{
  background: var(--shell-bg);
  border: 1px solid var(--shell-border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.shell-ach-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--tier-color, var(--shell-accent));
}
.shell-ach-card[data-tier="bronze"]{ --tier-color: #A8763A; }
.shell-ach-card[data-tier="silver"]{ --tier-color: #A8B0B8; }
.shell-ach-card[data-tier="gold"]{ --tier-color: #B8893A; }
.shell-ach-card[data-tier="platinum"]{ --tier-color: linear-gradient(90deg, #E8D5B7, #C9A876, #8B6F3A); }
.shell-ach-card[data-tier="levelup"]{ --tier-color: linear-gradient(90deg, #6B9BD8, #8DB0E0); }

.shell-ach-icon{
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tier-color);
  color: #F5EFE3;
  flex-shrink: 0;
}
.shell-ach-icon svg{ width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.shell-ach-body{ flex: 1; min-width: 0; }
.shell-ach-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shell-text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.shell-ach-title{
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--shell-text);
  line-height: 1.15;
}
.shell-ach-quote{
  font-size: 11px;
  color: var(--shell-text-muted);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.3;
}
.shell-ach-points{
  font-size: 13px;
  font-weight: 700;
  color: var(--shell-text);
  white-space: nowrap;
  flex-shrink: 0;
}
.shell-ach-points.gold{ color: #B8893A; }
.shell-ach-points.platinum{ color: #C9A876; }

/* Level-up special: rays + pulse */
.shell-ach-card[data-tier="levelup"] .shell-ach-icon{
  animation: levelup-pulse 900ms ease-out;
}
@keyframes levelup-pulse{
  0%{ transform: scale(0.5); opacity: 0; }
  40%{ transform: scale(1.15); opacity: 1; }
  100%{ transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   WALLET CONNECT MODAL
   ═══════════════════════════════════════════════════════════════════ */
.shell-modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.shell-modal-backdrop.show{ display: flex; }
@media (min-width: 640px){
  .shell-modal-backdrop.show{ align-items: center; }
}

.shell-modal{
  background: var(--shell-bg);
  border-radius: 18px 18px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px;
  padding-bottom: calc(20px + var(--shell-safe-bottom));
  animation: modalSlide 280ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@media (min-width: 640px){
  .shell-modal{ border-radius: 18px; margin: 16px; }
}
@keyframes modalSlide{
  from{ transform: translateY(20px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.shell-modal h3{
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--shell-text);
}

.shell-wallet-option{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--shell-border);
  border-radius: 12px;
  background: transparent;
  color: var(--shell-text);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 10px;
  font-family: inherit;
  transition: border-color 120ms, background 120ms;
}
.shell-wallet-option:hover{
  border-color: var(--shell-accent);
  background: color-mix(in srgb, var(--shell-accent) 4%, transparent);
}
.shell-wallet-option .wallet-icon{
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--shell-accent);
  color: #F5EFE3;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RANK BADGE (used in mainchat, leaderboard, anywhere)
   ═══════════════════════════════════════════════════════════════════ */
.rank-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shell-accent) 10%, transparent);
  color: var(--shell-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in srgb, var(--shell-accent) 20%, transparent);
}
.rank-badge.l1{ color: #6B6B6B; background: color-mix(in srgb, #6B6B6B 10%, transparent); border-color: color-mix(in srgb, #6B6B6B 20%, transparent); }
.rank-badge.l2{ color: #5B8BC8; background: color-mix(in srgb, #5B8BC8 10%, transparent); border-color: color-mix(in srgb, #5B8BC8 20%, transparent); }
.rank-badge.l3{ color: #1E3A5F; }
.rank-badge.l4{ color: #7B5B2F; background: color-mix(in srgb, #B8893A 12%, transparent); border-color: color-mix(in srgb, #B8893A 25%, transparent); }
.rank-badge.l5{ color: #B8893A; background: color-mix(in srgb, #B8893A 15%, transparent); border-color: color-mix(in srgb, #B8893A 30%, transparent); }
.rank-badge.l6{ color: #A8763A; background: color-mix(in srgb, #A8763A 18%, transparent); border-color: color-mix(in srgb, #A8763A 35%, transparent); }
.rank-badge.l7{ background: linear-gradient(135deg, color-mix(in srgb, #E8D5B7 25%, transparent), color-mix(in srgb, #B8893A 25%, transparent)); color: #7B5B2F; border-color: #B8893A; }
.rank-badge.l8{ background: linear-gradient(135deg, #E8D5B7, #C9A876, #8B6F3A); color: #F5EFE3; border-color: #8B6F3A; }


/* ═══════════════════════════════════════════════════════════════════
   SHELL-WELLE1 2026-05-02 — small-screen & connected-wallet rules
   ═══════════════════════════════════════════════════════════════════ */

/* Small phones (≤360px): tighter tabs so 5 fit on screen */
@media (max-width: 380px){
  .shell-bottom{
    grid-template-columns: repeat(5, 1fr);
  }
  .shell-tab{
    font-size: 9px;
    padding: 4px 2px 0;
    gap: 2px;
    min-width: 0;
  }
  .shell-tab svg{ width: 20px; height: 20px; }
  .shell-tab-label{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .shell-top{
    padding-left: 12px;
    padding-right: 12px;
  }
  .shell-brand{ font-size: 17px; gap: 6px; }
  .shell-brand img{ width: 24px; height: 24px; }
  .shell-wallet{
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Extra-small (≤340px): hide some text */
@media (max-width: 340px){
  .shell-tab-label{ font-size: 8.5px; }
  .shell-wallet span{ display: none; }
  .shell-wallet{ padding: 6px 8px; gap: 0; }
}

/* Global rule: any .wallet-btn / [data-connect-wallet] gets hidden
   when <body> has class "wallet-connected". Inline buttons on pages
   (e.g., founding-reader Connect) fall under this rule. */
body.wallet-connected .wallet-btn,
body.wallet-connected [data-connect-wallet],
body.wallet-connected .connect-wallet-inline{
  display: none !important;
}

/* Defensive: keep shell-wallet visible in top-bar (it shows connected state) */
body.wallet-connected .shell-top .shell-wallet{
  display: flex !important;
}