/* ============================================================
   TOWER CRAWLER — Shared Codex Theme
   Bloody parchment · dark-fantasy grimoire
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cinzel+Decorative:wght@700;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --bg:#14100b; --bg-deep:#0d0a06;
  --surface:#1e1710; --surface-2:#271e15; --surface-3:#31261a;
  --ink:#ede0c4; --ink-dim:#c2ae8b; --ink-faint:#9c8963;
  --blood:#7c1519; --blood-mid:#a3282a; --blood-bright:#dd5646; --blood-glow:#ef6b57;
  --gold:#cfa650; --gold-bright:#e6c66d; --gold-dim:#8a6d2f;
  --rule:#5c462c; --rule-faint:#3a2c1a;

  /* legacy aliases — keep any inline var() references resolving */
  --parchment:#14100b; --parchment-dark:#0d0a06; --parchment-shadow:#0d0a06; --parchment-deep:#271e15;
  --ink-faded:#c2ae8b; --text-dim:#9c8963; --ink-rule:#5c462c; --gold-leaf:#cfa650;
  --wax-common:#7a6f57; --wax-uncommon:#4a7a44; --wax-rare:#3f6b9a; --wax-sr:#7a4a8a; --wax-ssr:#c99a3c;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'EB Garamond', Georgia, serif;
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 60% 45% at 14% -6%, rgba(207,166,80,0.06), transparent 60%),
    radial-gradient(ellipse 55% 45% at 93% 10%, rgba(124,21,25,0.16), transparent 55%),
    radial-gradient(ellipse 52% 42% at 80% 90%, rgba(124,21,25,0.09), transparent 60%),
    radial-gradient(ellipse 42% 36% at 28% 96%, rgba(207,166,80,0.05), transparent 62%),
    radial-gradient(circle at 50% 38%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.58) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed;
  min-height:100vh;
}

/* ---------- Topbar ---------- */
.topbar{
  border-bottom:2px solid var(--rule);
  box-shadow:0 2px 0 rgba(124,21,25,0.35), 0 8px 22px rgba(0,0,0,0.5);
  background:linear-gradient(180deg, rgba(124,21,25,0.18), rgba(13,10,6,0.55));
  padding:16px 26px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:10; backdrop-filter:blur(3px);
}
.topbar h1{
  font-family:'Cinzel Decorative', serif; font-weight:900; font-size:20px;
  letter-spacing:0.12em; color:var(--gold-bright); margin:0;
  text-shadow:0 1px 0 #000, 0 0 14px rgba(124,21,25,0.6);
}
.topbar a.index-btn, .nav-arrows a{
  font-family:'Cinzel', serif; font-weight:600; font-size:12px; letter-spacing:0.08em;
  color:var(--gold); border:1px solid var(--rule); padding:6px 14px;
  text-decoration:none; text-transform:uppercase; background:var(--surface-2);
  transition:all 0.14s ease;
}
.topbar a.index-btn:hover, .nav-arrows a:hover{
  background:var(--blood); color:var(--ink); border-color:var(--blood-bright);
  box-shadow:0 0 12px rgba(221,86,70,0.4);
}

/* ---------- Site-wide nav dropdown ---------- */
.nav-dropdown{ position:relative; z-index:20; }
.nav-toggle{
  font-family:'Cinzel', serif; font-size:18px; background:none; border:1px solid var(--rule);
  color:var(--gold); padding:5px 10px; cursor:pointer; transition:all 0.14s ease;
  line-height:1;
}
.nav-toggle:hover{ border-color:var(--gold-dim); color:var(--gold-bright); }
.nav-dropdown.open .nav-toggle{ background:var(--surface-2); border-color:var(--gold-dim); }
.nav-menu{
  display:none; position:absolute; top:100%; left:0; margin-top:6px; min-width:220px;
  background:var(--surface); border:1px solid var(--rule);
  box-shadow:0 8px 24px rgba(0,0,0,0.6); flex-direction:column;
}
.nav-dropdown.open .nav-menu{ display:flex; }
.nav-menu a{
  font-family:'Cinzel', serif; font-size:13px; font-weight:600; letter-spacing:0.04em;
  color:var(--ink-dim); text-decoration:none; padding:10px 16px;
  border-bottom:1px solid var(--rule-faint); transition:all 0.12s ease;
}
.nav-menu a:last-child{ border-bottom:none; }
.nav-menu a:hover{ background:var(--surface-2); color:var(--gold-bright); }
.nav-menu a.current{ color:var(--gold); background:rgba(124,21,25,0.15); }
.topbar .count{ color:var(--ink-dim); font-size:14px; font-style:italic; }
.nav-arrows{ display:flex; gap:8px; }
.nav-arrows a.disabled{ opacity:0.3; pointer-events:none; }

#status{ padding:60px 24px; text-align:center; color:var(--ink-dim); font-style:italic; font-size:18px; }

main{ max-width:920px; margin:0 auto; padding:30px 20px 110px; }

/* ---------- Panels / sections ---------- */
.zone-block, section, .hero{
  border:1px solid var(--rule);
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(207,166,80,0.07), inset 0 0 70px rgba(0,0,0,0.34), 0 6px 18px rgba(0,0,0,0.42);
  margin-bottom:14px; position:relative;
}

.zone-row{
  display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:16px;
  padding:16px 20px; cursor:pointer; user-select:none;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(90deg, rgba(124,21,25,0.14), transparent 70%);
}
.zone-row:hover{ background:linear-gradient(90deg, rgba(124,21,25,0.24), rgba(124,21,25,0.04) 70%); }
.zone-chevron{ font-size:15px; color:var(--blood-bright); transition:transform 0.15s ease; }
.zone-block.open .zone-chevron{ transform:rotate(90deg); }
.zone-name-block{ display:flex; flex-direction:column; gap:3px; }
.zone-name{
  font-family:'Cinzel', serif; font-weight:700; font-size:20px; letter-spacing:0.05em;
  color:var(--gold-bright); text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.zone-range{ font-size:13px; font-style:italic; color:var(--ink-dim); letter-spacing:0.04em; }
.zone-thumbs{ display:flex; gap:6px; flex-wrap:wrap; max-width:260px; justify-content:flex-end; }
.zone-thumbs img{ width:34px; height:34px; object-fit:cover; border:1px solid var(--rule); }
.zone-thumbs .no-img{ width:34px; height:34px; background:var(--bg-deep); border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--ink-faint); }

.floor-list{ display:none; }
.zone-block.open .floor-list{ display:block; }

.col-headers{
  display:grid; grid-template-columns:55px 1fr 100px 100px 90px 55px; padding:9px 20px;
  font-family:'Cinzel', serif; font-size:10px; letter-spacing:0.12em;
  color:var(--gold); text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--rule);
}

.floor-row{
  display:grid; grid-template-columns:55px 1fr 100px 100px 90px 55px; align-items:center;
  padding:13px 20px; border-top:1px solid var(--rule-faint);
}
.floor-row.boss{ background:linear-gradient(90deg, rgba(124,21,25,0.22), transparent 75%); border-left:4px solid var(--blood-bright); }
.f-num{ font-family:'Cinzel', serif; font-weight:700; color:var(--ink); font-size:17px; }
.floor-row.boss .f-num{ color:var(--blood-bright); }
.f-name{ font-family:'EB Garamond', serif; font-weight:600; font-size:17px; color:var(--ink); }
.f-encounter, .f-type, .f-tier{ font-size:14px; color:var(--ink-dim); font-style:italic; }
.f-boss-mark{ text-align:center; font-size:16px; color:var(--blood-bright); }

.cover-row{ grid-column:1 / -1; padding:8px 0 4px; }
.cover-placeholder{ height:4px; background:repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 12px); opacity:0.4; }
.cover-image{ width:100%; max-height:200px; object-fit:cover; border:1px solid var(--rule); }

.creature-list{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; margin-top:8px; border-top:1px solid var(--rule-faint); }
.creature-tag, .creature-row-table{
  display:flex; align-items:center; gap:8px; background:var(--surface-2);
  border:1px solid var(--rule); padding:3px 11px 3px 3px; text-decoration:none; color:inherit;
  transition:all 0.14s ease;
}
.creature-tag:hover, .creature-row-table:hover{ background:var(--surface-3); border-color:var(--blood-bright); box-shadow:0 0 10px rgba(124,21,25,0.35); }
.creature-tag:hover .cn, .creature-row-table:hover .c-name{ color:var(--blood-bright); }
.creature-tag img, .creature-row-table img{ width:40px; height:40px; object-fit:cover; border:1px solid var(--rule); }
.creature-tag .no-img, .creature-row-table .no-img{ width:40px; height:40px; background:var(--bg-deep); border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--ink-faint); }
.creature-tag .cn, .c-name{ font-size:15px; font-weight:600; color:var(--ink); }
.creature-tag .cs, .c-sub{ font-size:12px; color:var(--ink-dim); font-style:italic; }

.empty-mark, .pending-note{ font-size:14px; color:var(--ink-faint); font-style:italic; letter-spacing:0.04em; }

/* ---------- Wax-seal rarity badges (signature element) ---------- */
.tier-seal{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:3px; font-family:'Cinzel', serif; font-size:9px; font-weight:700;
  color:#f6edd6; position:relative;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.5);
  text-shadow:0 1px 1px rgba(0,0,0,0.7);
}
.tier-seal.tier-C{ background:linear-gradient(160deg, #6b6352, #4a4336); border-color:#5c5548; }
.tier-seal.tier-UC{ background:linear-gradient(160deg, #4a7a44, #2e5428); border-color:#3d6838; }
.tier-seal.tier-R{ background:linear-gradient(160deg, #3f6b9a, #274a6e); border-color:#356088; }
.tier-seal.tier-SR{ background:linear-gradient(160deg, #7a4a8a, #553268); border-color:#6a3f7a; }
.tier-seal.tier-SSR{ background:linear-gradient(160deg, #c99a3c, #8a6d2f); border-color:#b88c38; box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.5), 0 0 10px rgba(207,166,80,0.5); }

.tier-badge{ font-family:'Cinzel', serif; font-size:10px; font-weight:700; padding:2px 8px; letter-spacing:0.04em; color:#f6edd6; text-shadow:0 1px 1px rgba(0,0,0,0.5); }
.tier-badge.tier-C{ background:var(--wax-common); }
.tier-badge.tier-UC{ background:var(--wax-uncommon); }
.tier-badge.tier-R{ background:var(--wax-rare); }
.tier-badge.tier-SR{ background:var(--wax-sr); }
.tier-badge.tier-SSR{ background:var(--wax-ssr); }

/* ---------- Type tags ---------- */
.type-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.type-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Cinzel', serif; font-size:12px; font-weight:600; padding:5px 12px;
  border:1px solid var(--rule); color:var(--gold); text-transform:uppercase; letter-spacing:0.06em;
  text-decoration:none; background:var(--surface-2); transition:all 0.14s ease;
}
/* ALL type tags share one frame — primary, secondary and tertiary look identical */
.type-tag, .type-tag.secondary, .type-tag.tertiary{ border-style:solid; }
.type-tag:hover{ background:var(--blood); color:var(--ink); border-color:var(--blood-bright); }
/* Type medallion inside a tag */
.tt-med{ width:34px; height:34px; object-fit:contain; display:block; flex-shrink:0; }

/* Type chip (codex cards) */
.type-chip{ display:inline-flex; align-items:center; gap:6px; }
.type-chip img{ width:30px; height:30px; object-fit:contain; display:block; flex-shrink:0; }
.type-chip .tcn{ font-style:italic; }

/* ---------- Hero (creature / floor detail) ---------- */
.hero{ padding:26px; }
.hero.split{ display:grid; grid-template-columns:220px 1fr; gap:26px; }
.hero img{ width:100%; aspect-ratio:1; object-fit:cover; background:var(--bg-deep); border:1px solid var(--rule); }
.hero .no-img{ width:100%; aspect-ratio:1; background:var(--bg-deep); border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:13px; font-style:italic; }
.hero h2{ font-family:'Cinzel Decorative', serif; font-size:34px; margin:0 0 8px; color:var(--gold-bright); letter-spacing:0.02em; text-shadow:0 2px 4px rgba(0,0,0,0.6); }

/* ---------- Creature detail page: image-first stacked layout ---------- */
.creature-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 26px; }
.creature-img-wrap{ width:100%; max-width:400px; margin-bottom:24px; }
.creature-img-wrap img{
  width:100%; aspect-ratio:1; object-fit:cover;
  background:#1c1610;
  border:1px solid var(--rule);
  box-shadow:0 8px 28px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.3);
}
.creature-img-wrap .no-img{
  width:100%; aspect-ratio:1;
  background:#1c1610;
  border:1px dashed var(--rule);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:14px; font-style:italic;
  box-shadow:0 8px 28px rgba(0,0,0,0.5);
}
.creature-info{ width:100%; max-width:500px; }
.creature-info .type-tags{ justify-content:center; }
.creature-info .floor-chip-row{ justify-content:center; }
.hero.boss{ border-color:rgba(221,86,70,0.45); background:linear-gradient(135deg, rgba(124,21,25,0.2), var(--surface)); }
.boss-tag{ font-family:'Cinzel', serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--blood-bright); border:1px solid var(--blood-bright); padding:2px 10px; margin-left:10px; vertical-align:middle; }

.f-num-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Cinzel Decorative', serif; font-weight:900; font-size:28px;
  color:var(--ink); background:var(--surface-3); border:1px solid var(--gold-dim);
  width:60px; height:60px; margin-bottom:16px; box-shadow:inset 0 0 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
}
.hero.boss .f-num-badge{ background:var(--blood); border-color:var(--blood-bright); color:var(--ink); }

.meta-line{ font-size:15px; color:var(--ink-dim); margin-bottom:6px; font-style:italic; }
.meta-line b{ color:var(--ink); font-weight:600; font-style:normal; }
.meta-link{
  color:var(--gold); font-weight:600; font-style:normal; text-decoration:none;
  border-bottom:1px solid var(--rule-faint); padding-bottom:1px; transition:all 0.14s ease;
}
.meta-link:hover{ color:var(--blood-bright); border-color:var(--blood-bright); }

/* ---------- Section blocks ---------- */
section{ margin-top:24px; }
section h3{
  font-family:'Cinzel', serif; font-size:14px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-bright); margin:0; padding:12px 18px;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(90deg, rgba(124,21,25,0.16), transparent 70%);
}
.section-body{ padding:18px; }

/* ---------- Grade bars ---------- */
.grade-row{ display:grid; grid-template-columns:100px 1fr 34px; align-items:center; gap:10px; margin-bottom:10px; font-size:14px; font-weight:600; color:var(--ink); }
.grade-bar-bg{ height:10px; background:var(--bg-deep); border:1px solid var(--rule); }
.grade-bar-fill{ height:100%; background:linear-gradient(90deg, var(--blood), var(--gold)); box-shadow:0 0 8px rgba(207,166,80,0.35); }

/* ---------- Data tables ---------- */
table.data-table{ width:100%; border-collapse:collapse; font-size:15px; }
table.data-table th, table.data-table td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--rule-faint); }
table.data-table th{ font-family:'Cinzel', serif; color:var(--gold); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:0.08em; }
table.data-table td{ font-style:italic; color:var(--ink-dim); }
table.data-table td.filled{ color:var(--ink); font-style:normal; }

/* ---------- Evolution line ---------- */
.evo-line{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.evo-node{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--ink-dim); opacity:0.6; }
.evo-node.current{ opacity:1; color:var(--ink); }
.evo-node.linkable:hover{ opacity:1; color:var(--ink); }
.evo-node img, .evo-node .no-img-sm{ width:60px; height:60px; object-fit:cover; border:1px solid var(--rule); background:var(--bg-deep); }
.evo-node .no-img-sm{ display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--ink-faint); border-style:dashed; }
.evo-node span{ font-size:14px; font-weight:600; }
.evo-arrow{ color:var(--blood-bright); font-size:18px; }

.mutant-box{ display:flex; gap:18px; align-items:center; }
.mutant-placeholder{ width:100px; height:100px; border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:12px; text-align:center; font-style:italic; }
.mutant-art{ width:190px; height:auto; flex:0 0 auto; border:1px solid #7a4a8a; background:var(--surface-2); box-shadow:0 0 12px rgba(163,53,238,0.28); }

.floor-chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.floor-chip{
  font-family:'Cinzel', serif; font-size:13px; font-weight:600; border:1px solid var(--rule);
  color:var(--gold); padding:3px 11px; text-decoration:none; background:var(--surface-2); transition:all 0.14s ease;
}
.floor-chip:hover{ background:var(--blood); color:var(--ink); border-color:var(--blood-bright); }

/* ---------- Type page grid ---------- */
.type-hero{ padding:26px; text-align:center; }
.type-hero h2{ font-family:'Cinzel Decorative', serif; font-size:36px; margin:0; color:var(--gold-bright); text-transform:uppercase; letter-spacing:0.06em; text-shadow:0 2px 4px rgba(0,0,0,0.6); }
.type-hero p{ font-style:italic; color:var(--ink-dim); margin:6px 0 0; }
.type-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; padding:18px; }
.type-card{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:var(--ink); border:1px solid var(--rule); background:var(--surface-2); padding:14px 10px; transition:all 0.14s ease; }
.type-card:hover{ border-color:var(--blood-bright); background:var(--surface-3); box-shadow:0 0 10px rgba(124,21,25,0.3); }
.type-card img{ width:72px; height:72px; object-fit:cover; border:1px solid var(--rule); background:var(--bg-deep); }
.type-card .no-img{ width:72px; height:72px; background:var(--bg-deep); border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--ink-faint); }
.type-card .tc-name{ font-family:'Cinzel', serif; font-weight:600; font-size:14px; text-align:center; color:var(--ink); }
.type-card .tc-sub{ font-size:12px; color:var(--ink-dim); font-style:italic; }

@media (max-width:700px){
  .col-headers, .floor-row{ grid-template-columns:40px 1fr 50px; }
  .f-tier, .f-type{ display:none; }
  .hero.split{ grid-template-columns:140px 1fr; }
}

/* ============ System pages (Other Systems subpages) ============ */
.sp-wrap{ max-width:820px; margin:0 auto; padding:24px 18px 90px; }
.sp-wrap h2{ font-family:'Cinzel',serif; font-size:18px; color:var(--gold); margin:26px 0 8px; }
.sp-wrap h3{ font-family:'Cinzel',serif; font-size:14px; color:var(--gold-dim); margin:18px 0 6px; }
.sp-wrap h4{ font-family:'Cinzel',serif; font-size:12.5px; color:var(--ink); margin:14px 0 4px; letter-spacing:0.03em; }
.sp-wrap p{ font-size:14px; color:var(--ink-dim); line-height:1.6; margin:6px 0; }
.sp-wrap code{ background:var(--surface-2); padding:1px 5px; border-radius:3px; color:var(--ink); font-size:13px; }
.sp-wrap a{ color:var(--gold); }
.sp-crumb{ font-size:12px; color:var(--ink-faint); margin-bottom:4px; }
.sp-crumb a{ color:var(--gold-dim); text-decoration:none; }
.sp-crumb a:hover{ color:var(--gold-bright); }
.sp-lead{ font-size:14.5px; color:var(--ink-dim); line-height:1.6; }
.sp-wrap table{ border-collapse:collapse; width:100%; margin:10px 0; }
.sp-wrap th{ font-family:'Cinzel',serif; font-size:11px; color:var(--gold); border-bottom:1px solid var(--gold); padding:6px 8px; text-align:center; }
.sp-wrap td{ border-bottom:1px solid var(--rule); padding:5px 8px; color:var(--ink-dim); font-size:13px; text-align:center; }
.sp-wrap td.lbl{ text-align:left; color:var(--ink); }
.sp-rules{ list-style:none; padding:0; margin:10px 0; }
.sp-rules li{ position:relative; padding:8px 12px 8px 30px; border-left:2px solid var(--gold-dim); background:var(--surface); margin-bottom:6px; font-size:13.5px; color:var(--ink-dim); line-height:1.5; }
.sp-rules li::before{ content:'\25B8'; position:absolute; left:11px; top:8px; color:var(--gold); }
.sp-rules li strong{ color:var(--ink); }
.sp-note{ background:var(--surface-2); border-left:3px solid var(--gold); padding:8px 14px; margin:12px 0; font-size:13px; color:var(--ink-dim); }
.sp-chart{ background:var(--surface); border:1px solid var(--rule); padding:14px; margin:14px 0; }
.sp-chart canvas{ width:100%; height:auto; display:block; }
.sp-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:680px){ .sp-two{ grid-template-columns:1fr; } }
.sp-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:12px 0; }
.sp-tile{ background:var(--surface); border:1px solid var(--rule); padding:14px 16px; }
.sp-tile h4{ margin:0 0 6px; color:var(--gold-dim); }
.sp-tile p{ margin:0; font-size:12.5px; }