/* ═══════════════════════════════════════════════
   THE MIDNIGHT ARCHIVES — MAIN STYLESHEET
   Pixel-art dark fantasy aesthetic.
   ═══════════════════════════════════════════════ */
:root {
  --ink: #0a0a0f;
  --deep: #12101a;
  --shadow: #1a1726;
  --vellum: #e8dfc8;
  --vellum-dim: #b8aa8e;
  --gold: #c9a84c;
  --gold-bright: #f0c060;
  --red: #8b1a1a;
  --blue: #1a3a5c;
  --green: #1a4a2a;
  --noir: #2a1a3a;
  --inkdust-color: #4fc3f7;
  --obsidian-color: #ce93d8;
  --common: #9e9e9e;
  --uncommon: #4caf50;
  --rare: #2196f3;
  --legendary: #ff9800;
  --radius: 0px;
  --trans: 0.15s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  background: var(--ink);
  color: var(--vellum);
  font-family: 'EB Garamond', monospace;
  min-height: 100vh;
  overflow-x: hidden;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

body::before {
  content:'';
  position:fixed;inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(0,0,0,.02) 4px, rgba(0,0,0,.02) 5px);
  pointer-events:none;z-index:0;
}

/* ── GLOBAL PIXEL OVERLAYS ─────────────────────── */
.pixel-grid {
  position:fixed; inset:0; pointer-events:none; z-index:9998;
  background-image:
    linear-gradient(transparent 0px, rgba(0,0,0,.03) 0px, transparent 1px),
    linear-gradient(90deg, transparent 0px, rgba(0,0,0,.03) 0px, transparent 1px);
  background-size: 4px 4px;
}
.scanlines {
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.015) 3px, rgba(0,0,0,.015) 4px);
}

/* ── BLOCKY GLOBAL OVERRIDES ──────────────────── */
* { -ms-interpolation-mode:nearest-neighbor; }
a, button, input, textarea, select, th, td, .btn, .action-btn, .tome-card, .game-card, .wing-card, .store-item, .story-card, .patch-note, .auth-box, .encounter-bubble, .modal-box, .profile-header, .tome-ritual-card { border-radius:0 !important; }
.btn, .action-btn, .ftab, .cur, .tome-cost, .tome-ritual-cost, .store-price { border-radius:1px !important; }
.game-card-inner { border-radius:0 !important; }

h1, h2, h3, h4, h5, h6, .nav-logo, .nav-links a, .uname, .cur, .btn, .action-btn, .tome-name, .tome-ritual-name, .card-name, .wing-name, .auth-logo, .hero-title, .result-title, .story-title, .story-reader-title, .profile-title, .store-amount, .section-label, .patch-version, .patch-title, .modal-title, .page-title, .phase-rune, .turn-badge, .zone-label-text, .hand-label, .status-rune, .hud-name, .timer-rune, .pt-step, .mystery-slot, .grave-title, .discard-title, .pity-orb-header, .rates-title, .tomes-label, .ritual-title, .ritual-runes, .casting-text, .pull-shard-note, .reveal-btn, .currency-orb-label { font-family: 'Cinzel', monospace !important; }
.hero-eyebrow, .player-page-mark, .enemy-page-mark, .spine-label { font-family: 'Cinzel', monospace !important; }
.hero-tagline, .ritual-subtitle, .story-body, .card-effect, .enc-tt-desc, .patch-content, .auth-sub, .event-ends, .pity-note { font-family: 'EB Garamond', monospace !important; }

/* ── PARTICLES ── */
.particles { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
.particle {
  position:absolute;bottom:-20px;width:3px;height:3px;border-radius:50%;
  background:var(--gold);
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:1}
  90%{opacity:.6}
  100%{transform:translateY(-100vh) scale(0.3);opacity:0}
}

/* ── NAV ── */
.main-nav {
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,15,0.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,168,76,0.18);
  display:flex;align-items:center;gap:1rem;
  padding:0 2rem;height:62px;
}
.nav-logo {
  font-family:'Cinzel Decorative',serif;
  font-size:1rem;color:var(--gold);
  text-decoration:none;text-shadow:0 0 20px rgba(201,168,76,0.4);
  margin-right:auto;flex-shrink:0;letter-spacing:.04em;
}
.nav-links { display:flex;gap:.15rem;list-style:none;align-items:center; }
.nav-links a {
  color:var(--vellum-dim);
  font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  padding:.45rem .8rem;border-radius:4px;
  transition:color var(--trans),background var(--trans);
  position:relative;
}
.nav-links a:hover,.nav-links a.active { color:var(--gold);background:rgba(201,168,76,0.08); }
.badge {
  position:absolute;top:-4px;right:-2px;
  background:var(--red);color:#fff;
  font-size:.6rem;font-family:'Cinzel',serif;
  border-radius:10px;padding:1px 5px;min-width:16px;text-align:center;
}
.nav-right { display:flex;align-items:center;gap:1rem; }
.currency-bar { display:flex;gap:.6rem; }
.cur {
  display:flex;align-items:center;gap:.35rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;padding:.25rem .75rem;
  font-family:'Cinzel',serif;font-size:.78rem;
}
.cur.inkdust { border-color:rgba(79,195,247,.3);color:var(--inkdust-color); }
.cur.obsidian { border-color:rgba(206,147,216,.3);color:var(--obsidian-color); }

.nav-user { position:relative;cursor:pointer;display:flex;align-items:center;gap:.5rem; }
.avatar { font-size:1.3rem; }
.uname { font-family:'Cinzel',serif;font-size:.75rem;color:var(--vellum-dim); }
.user-menu {
  display:none;position:absolute;top:110%;right:0;
  background:var(--deep);border:1px solid rgba(201,168,76,.25);
  border-radius:var(--radius);min-width:160px;z-index:200;
  box-shadow:0 8px 32px rgba(0,0,0,.6);overflow:hidden;
}
.user-menu.open { display:block; }
.user-menu a,.menu-logout {
  display:block;padding:.7rem 1rem;
  font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.05em;
  color:var(--vellum-dim);text-decoration:none;background:none;border:none;
  width:100%;text-align:left;cursor:pointer;
  transition:background var(--trans),color var(--trans);
}
.user-menu a:hover,.menu-logout:hover { background:rgba(201,168,76,.1);color:var(--gold); }

/* ── FLASH ── */
.flash {
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:500;
  padding:.8rem 1.4rem;border-radius:var(--radius);
  font-family:'Cinzel',serif;font-size:.8rem;
  animation:fadeFlash 4s forwards;
  max-width:360px;box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.flash.success { background:rgba(26,74,42,.95);border:1px solid var(--uncommon);color:#8e8; }
.flash.error   { background:rgba(74,26,26,.95);border:1px solid var(--red);color:#e88; }
@keyframes fadeFlash { 0%{opacity:0;transform:translateY(10px)} 10%{opacity:1;transform:translateY(0)} 80%{opacity:1} 100%{opacity:0;transform:translateY(-5px)} }

/* ── EVENT BANNER ── */
.event-banner {
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem 2rem;border-bottom:1px solid rgba(201,168,76,.15);
  font-size:.82rem;
}
.event-ends { font-size:.73rem;color:var(--vellum-dim);font-style:italic; }

/* ── MAINTENANCE ── */
.maintenance { min-height:100vh;display:flex;align-items:center;justify-content:center; }
.maintenance-inner { text-align:center;padding:3rem; }
.maintenance-inner h1 { font-family:'Cinzel Decorative',serif;color:var(--gold);margin:1rem 0; }

/* ── LAYOUT ── */
.main-content { position:relative;z-index:1;min-height:calc(100vh - 62px - 60px); }
.game-footer {
  border-top:1px solid rgba(201,168,76,.1);
  padding:1rem 2rem;text-align:center;
  font-size:.82rem;color:var(--vellum-dim);
  display:flex;flex-direction:column;gap:.3rem;
}
.container { max-width:1200px;margin:0 auto;padding:0 2rem; }
.container-sm { max-width:800px;margin:0 auto;padding:0 2rem; }

/* ── PAGE HEADER ── */
.page-header { padding:3rem 2rem 1.5rem;text-align:center; }
.page-title {
  font-family:'Cinzel Decorative',serif;font-size:2rem;
  color:var(--gold);margin-bottom:.4rem;
  text-shadow:0 0 30px rgba(201,168,76,.25);
}
.page-sub { color:var(--vellum-dim);font-style:italic;font-size:1rem; }

/* ── BUTTONS ── */
.btn {
  font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.7rem 1.8rem;border-radius:3px;
  cursor:pointer;transition:all var(--trans);border:none;display:inline-block;
  text-decoration:none;
}
.btn-primary { background:var(--gold);color:var(--ink); }
.btn-primary:hover { background:var(--gold-bright);transform:translateY(-1px); }
.btn-secondary { background:transparent;color:var(--vellum);border:1px solid rgba(232,223,200,.3); }
.btn-secondary:hover { border-color:var(--gold);color:var(--gold); }
.btn-danger { background:rgba(139,26,26,.8);color:#fff;border:1px solid var(--red); }
.btn-danger:hover { background:var(--red); }
.btn-sm { padding:.4rem 1rem;font-size:.7rem; }
.btn-block { display:block;width:100%;text-align:center; }

/* ── CARDS ── */
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:1rem;padding:1rem 2rem 3rem;max-width:1300px;margin:0 auto;
}
.game-card {
  border-radius:8px;overflow:hidden;cursor:pointer;
  transition:transform .2s,box-shadow .2s;position:relative;
  text-decoration:none;
}
.game-card:hover { transform:translateY(-5px) scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.5); }
.game-card-inner {
  padding:1rem;height:100%;
  border:1px solid rgba(255,255,255,.06);border-radius:8px;
  display:flex;flex-direction:column;gap:.45rem;min-height:210px;
}
.faction-bestiary .game-card-inner { background:linear-gradient(135deg,#1a0808,#2d1010);border-color:rgba(139,26,26,.45); }
.faction-academy .game-card-inner  { background:linear-gradient(135deg,#080e1a,#101828);border-color:rgba(41,128,185,.4); }
.faction-fairytales .game-card-inner{ background:linear-gradient(135deg,#08140a,#102014);border-color:rgba(39,174,96,.4); }
.faction-noir .game-card-inner     { background:linear-gradient(135deg,#100818,#1a1028);border-color:rgba(142,68,173,.4); }
.faction-universal .game-card-inner{ background:linear-gradient(135deg,#141414,#1e1e1e);border-color:rgba(150,150,150,.3); }

.card-top { display:flex;align-items:center;justify-content:space-between; }
.card-cost {
  width:28px;height:28px;border-radius:50%;
  background:rgba(201,168,76,.2);border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:.85rem;color:var(--gold);flex-shrink:0;
}
.card-rarity { font-size:.62rem;letter-spacing:.1em;font-family:'Cinzel',serif;text-transform:uppercase; }
.rarity-common    { color:var(--common); }
.rarity-uncommon  { color:var(--uncommon); }
.rarity-rare      { color:var(--rare); }
.rarity-legendary { color:var(--legendary); }

.card-art {
  width:100%;height:80px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;background:rgba(0,0,0,.2);overflow:hidden;
}
.card-art img { width:100%;height:100%;object-fit:cover; }
.card-name { font-family:'Cinzel',serif;font-size:.82rem;color:var(--vellum);line-height:1.2; }
.card-type { font-size:.7rem;color:var(--vellum-dim);font-style:italic; }
.card-stats { display:flex;gap:.5rem;font-family:'Cinzel',serif;font-size:.8rem; }
.stat-t { color:#e88; }
.stat-f { color:#8e8; }
.card-effect { font-size:.77rem;color:var(--vellum-dim);line-height:1.4;flex:1;border-top:1px solid rgba(255,255,255,.06);padding-top:.45rem;margin-top:auto; }
.owned-badge { position:absolute;top:6px;left:6px;background:var(--gold);color:var(--ink);font-size:.55rem;font-family:'Cinzel',serif;padding:2px 6px;border-radius:3px; }

/* ── FACTION FILTER TABS ── */
.faction-tabs { display:flex;justify-content:center;gap:.4rem;padding:.8rem 2rem 1rem;flex-wrap:wrap; }
.ftab {
  padding:.45rem 1.1rem;border-radius:3px;border:1px solid transparent;
  font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.08em;
  cursor:pointer;transition:all var(--trans);background:rgba(255,255,255,.04);
  color:var(--vellum-dim);text-decoration:none;
}
.ftab[data-f="all"].active     { background:rgba(201,168,76,.15);color:var(--gold);border-color:var(--gold); }
.ftab[data-f="bestiary"].active{ background:rgba(139,26,26,.25);color:#e88;border-color:#c0392b; }
.ftab[data-f="academy"].active  { background:rgba(26,58,92,.4);color:#8af;border-color:#2980b9; }
.ftab[data-f="fairytales"].active{ background:rgba(26,74,42,.4);color:#8e8;border-color:#27ae60; }
.ftab[data-f="noir"].active    { background:rgba(42,26,58,.4);color:#c8a;border-color:#8e44ad; }
.ftab[data-f="universal"].active{ background:rgba(80,80,80,.2);color:#ccc;border-color:#888; }
.ftab:hover { border-color:rgba(201,168,76,.4);color:var(--gold); }

/* ── FORMS ── */
.form-group { margin-bottom:1.2rem; }
.form-label { display:block;font-family:'Cinzel',serif;font-size:.75rem;letter-spacing:.08em;color:var(--vellum-dim);margin-bottom:.4rem;text-transform:uppercase; }
.form-control {
  width:100%;padding:.7rem 1rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);color:var(--vellum);
  font-family:'EB Garamond',serif;font-size:1rem;
  transition:border-color var(--trans);
}
.form-control:focus { outline:none;border-color:var(--gold); }
.form-control option { background:var(--deep); }
textarea.form-control { resize:vertical;min-height:100px; }
.form-error { color:#e88;font-size:.8rem;margin-top:.3rem; }
.form-hint  { color:var(--vellum-dim);font-size:.8rem;margin-top:.3rem;font-style:italic; }

/* ── AUTH PAGES ── */
.auth-wrap { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem; }
.auth-box {
  background:rgba(18,16,26,.95);border:1px solid rgba(201,168,76,.2);
  border-radius:10px;padding:2.5rem;width:100%;max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.auth-logo { font-family:'Cinzel Decorative',serif;font-size:1.5rem;color:var(--gold);text-align:center;margin-bottom:.4rem; }
.auth-sub  { text-align:center;color:var(--vellum-dim);font-style:italic;margin-bottom:2rem;font-size:.9rem; }
.auth-footer { text-align:center;margin-top:1.5rem;font-size:.85rem;color:var(--vellum-dim); }
.auth-footer a { color:var(--gold); }

/* ── HERO (HOME) ── */
.hero { min-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem; }
.hero-eyebrow { font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:1.2rem; }
.hero-title { font-family:'Cinzel Decorative',serif;font-size:clamp(2.2rem,5.5vw,4.5rem);line-height:1.1;color:var(--vellum);text-shadow:0 0 40px rgba(201,168,76,.25);margin-bottom:.8rem; }
.hero-title span { color:var(--gold);display:block; }
.hero-tagline { font-style:italic;font-size:1.1rem;color:var(--vellum-dim);max-width:480px;margin:0 auto 2.5rem;line-height:1.6; }
.hero-btns { display:flex;gap:1rem;flex-wrap:wrap;justify-content:center; }
.hero-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:500px;width:100%;margin-top:4rem; }
.stat-box { background:rgba(255,255,255,.03);border:1px solid rgba(201,168,76,.1);border-radius:var(--radius);padding:1.2rem; }
.stat-num { font-family:'Cinzel Decorative',serif;font-size:1.8rem;color:var(--gold); }
.stat-lbl { font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.1em;color:var(--vellum-dim);text-transform:uppercase;margin-top:.2rem; }

/* ── EXPLORE MAP ── */
.world-map { padding:1.5rem 2rem 3rem;max-width:1200px;margin:0 auto; }
.wings-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem; }
.wing-card {
  border-radius:8px;border:1px solid;padding:1.5rem;cursor:pointer;
  transition:all .2s;position:relative;overflow:hidden;text-decoration:none;display:block;
}
.wing-card[data-wing="bestiary"]   { background:linear-gradient(135deg,#110505,#1f0a0a);border-color:rgba(192,57,43,.45); }
.wing-card[data-wing="academy"]    { background:linear-gradient(135deg,#050811,#0a1220);border-color:rgba(41,128,185,.45); }
.wing-card[data-wing="fairytales"] { background:linear-gradient(135deg,#060f07,#0c1a0e);border-color:rgba(39,174,96,.45); }
.wing-card[data-wing="noir"]       { background:linear-gradient(135deg,#0a0611,#13091f);border-color:rgba(142,68,173,.45); }
.wing-card[data-wing="cursed"]     { background:linear-gradient(135deg,#111,#1a1a1a);border-color:rgba(100,100,100,.35);opacity:.65;cursor:not-allowed; }
.wing-card:not([data-wing="cursed"]):hover { transform:translateY(-3px);filter:brightness(1.12);box-shadow:0 8px 30px rgba(0,0,0,.4); }
.wing-icon { font-size:2.4rem;margin-bottom:.7rem; }
.wing-name { font-family:'Cinzel',serif;font-size:1rem;color:var(--vellum);margin-bottom:.25rem; }
.wing-theme { font-size:.8rem;color:var(--vellum-dim);font-style:italic;margin-bottom:1rem; }
.wing-progress { display:flex;gap:.3rem; }
.prog-node {
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  transition:all .15s;
}
.prog-node.done { background:var(--gold);border-color:var(--gold); }
.prog-node.boss { background:rgba(192,57,43,.5);border-color:#c0392b; }
.prog-node.boss.done { background:#c0392b; }
.locked-tag { font-family:'Cinzel',serif;font-size:.68rem;color:var(--vellum-dim);margin-top:.8rem; }

/* ── ENCOUNTER MAP (Wing View) ── */
.map-container { position:relative;width:100%;margin:0 auto;max-width:900px; }
.map-bg {
  width:100%;min-height:460px;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#0d0d1a,#1a1030);
  border:1px solid rgba(201,168,76,.15);position:relative;
}
.map-path { position:absolute;inset:0;pointer-events:none; }
.encounter-bubble {
  position:absolute;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(201,168,76,.5);
  background:rgba(10,10,15,.85);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;cursor:pointer;
  transition:all .2s;z-index:10;
}
.encounter-bubble:hover { transform:translate(-50%,-50%) scale(1.2);border-color:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.4); }
.encounter-bubble.completed { border-color:var(--gold);background:rgba(201,168,76,.15); }
.encounter-bubble.boss-node { border-color:#c0392b;box-shadow:0 0 15px rgba(192,57,43,.3); }
.encounter-bubble.boss-node:hover { box-shadow:0 0 25px rgba(192,57,43,.6); }

/* Encounter tooltip */
.enc-tooltip {
  position:absolute;bottom:115%;left:50%;transform:translateX(-50%);
  background:rgba(10,10,15,.97);border:1px solid rgba(201,168,76,.35);
  border-radius:6px;padding:.8rem 1rem;width:220px;pointer-events:none;
  opacity:0;transition:opacity .15s;z-index:50;
  box-shadow:0 8px 30px rgba(0,0,0,.7);
}
.enc-tooltip::after { content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(201,168,76,.35); }
.encounter-bubble:hover .enc-tooltip { opacity:1; }
.enc-tt-name { font-family:'Cinzel',serif;font-size:.82rem;color:var(--vellum);margin-bottom:.2rem; }
.enc-tt-diff { font-size:.7rem;color:var(--gold);margin-bottom:.3rem; }
.enc-tt-desc { font-size:.75rem;color:var(--vellum-dim);line-height:1.4; }
.enc-tt-reward { font-size:.72rem;color:var(--inkdust-color);margin-top:.4rem; }
.enc-tt-done { font-size:.68rem;color:var(--uncommon);margin-top:.2rem; }

/* ── GACHA / RITUAL ── */
.ritual-wrap { max-width:900px;margin:0 auto;padding:0 2rem 3rem; }
.pity-track { background:rgba(255,255,255,.03);border:1px solid rgba(201,168,76,.15);border-radius:8px;padding:1.2rem 1.5rem;margin-bottom:1.5rem; }
.pity-info { display:flex;justify-content:space-between;margin-bottom:.5rem;font-family:'Cinzel',serif;font-size:.73rem;color:var(--vellum-dim); }
.pity-bar { height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden; }
.pity-fill { height:100%;background:linear-gradient(90deg,var(--gold),var(--legendary));border-radius:3px;transition:width .5s; }
.pity-note { font-size:.72rem;color:var(--vellum-dim);margin-top:.4rem;font-style:italic; }

.tomes-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-top:.5rem; }
.tome-card {
  background:rgba(255,255,255,.03);border:1px solid rgba(201,168,76,.15);
  border-radius:8px;padding:1.5rem;text-align:center;cursor:pointer;
  transition:all .2s;
}
.tome-card:hover { border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.4); }
.tome-icon { font-size:3rem;margin-bottom:.7rem; }
.tome-name { font-family:'Cinzel',serif;font-size:.9rem;color:var(--vellum);margin-bottom:.35rem; }
.tome-desc { font-size:.8rem;color:var(--vellum-dim);margin-bottom:1rem;line-height:1.4; }
.tome-cost { display:inline-flex;align-items:center;gap:.35rem;font-family:'Cinzel',serif;font-size:.82rem;padding:.35rem .9rem;border-radius:20px;border:1px solid; }
.tome-cost.ink { color:var(--inkdust-color);border-color:rgba(79,195,247,.4);background:rgba(79,195,247,.08); }
.tome-cost.obs { color:var(--obsidian-color);border-color:rgba(206,147,216,.4);background:rgba(206,147,216,.08); }

.rate-table { background:rgba(255,255,255,.03);border:1px solid rgba(201,168,76,.12);border-radius:8px;padding:1.2rem;margin-top:1.5rem; }
.rate-row { display:flex;align-items:center;gap:1rem;margin-bottom:.55rem; }
.rate-row:last-child { margin-bottom:0; }
.rate-label { font-family:'Cinzel',serif;font-size:.72rem;width:80px;flex-shrink:0; }
.rate-track { flex:1;height:7px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden; }
.rate-fill { height:100%;border-radius:3px; }
.rate-pct { font-family:'Cinzel',serif;font-size:.78rem;width:35px;text-align:right;flex-shrink:0; }

/* ── PULL MODAL ── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px); }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--deep);border:1px solid rgba(201,168,76,.3);border-radius:12px;padding:2rem;max-width:720px;width:92%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.8); }
.modal-title { font-family:'Cinzel Decorative',serif;font-size:1.3rem;color:var(--gold);text-align:center;margin-bottom:1.5rem; }
.pull-grid { display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:1.5rem; }
.pull-card {
  width:92px;padding:.6rem;border-radius:6px;text-align:center;border:1px solid rgba(255,255,255,.1);
  animation:cardFlip .5s ease both;
}
@keyframes cardFlip { from{opacity:0;transform:scale(.7) rotateY(90deg)} to{opacity:1;transform:scale(1) rotateY(0)} }
.pull-card.common   { background:rgba(158,158,158,.1);border-color:rgba(158,158,158,.3); }
.pull-card.uncommon { background:rgba(76,175,80,.1);border-color:rgba(76,175,80,.4); }
.pull-card.rare     { background:rgba(33,150,243,.12);border-color:rgba(33,150,243,.5);box-shadow:0 0 12px rgba(33,150,243,.18); }
.pull-card.legendary{ background:rgba(255,152,0,.15);border-color:rgba(255,152,0,.6);box-shadow:0 0 22px rgba(255,152,0,.3); }
.pull-icon { font-size:2rem; }
.pull-name { font-family:'Cinzel',serif;font-size:.6rem;color:var(--vellum);margin-top:.3rem;line-height:1.2; }
.pull-rar  { font-size:.58rem;font-family:'Cinzel',serif;margin-top:.15rem; }
.pull-dupe { font-size:.55rem;color:var(--obsidian-color);margin-top:.1rem; }

/* ── CHRONICLE / STORIES ── */
.chronicle-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;padding:1rem 2rem 3rem;max-width:1200px;margin:0 auto; }
.story-card {
  background:rgba(255,255,255,.03);border:1px solid rgba(201,168,76,.12);
  border-radius:8px;padding:1.4rem;cursor:pointer;text-decoration:none;display:block;
  transition:all .2s;position:relative;overflow:hidden;
}
.story-card::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,168,76,.03),transparent);pointer-events:none; }
.story-card:hover { border-color:rgba(201,168,76,.35);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.4); }
.story-card.unread { border-color:rgba(201,168,76,.3); }
.story-tone { display:inline-block;font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;border-radius:3px;margin-bottom:.7rem; }
.tone-triumphant { background:rgba(39,174,96,.15);color:var(--uncommon); }
.tone-tragic      { background:rgba(139,26,26,.2);color:#e88; }
.tone-pyrrhic     { background:rgba(201,168,76,.12);color:var(--gold); }
.tone-mysterious  { background:rgba(142,68,173,.15);color:#c8a; }
.story-title { font-family:'Cinzel',serif;font-size:1rem;color:var(--vellum);margin-bottom:.4rem;line-height:1.3; }
.story-chapter { font-size:.75rem;color:var(--vellum-dim);font-style:italic;margin-bottom:.8rem; }
.story-preview { font-size:.85rem;color:var(--vellum-dim);line-height:1.5; }
.story-meta { display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.06);font-size:.72rem;color:var(--vellum-dim);font-family:'Cinzel',serif; }
.unread-dot { width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;margin-right:.4rem; }

/* ── STORY READER ── */
.story-reader { max-width:680px;margin:0 auto;padding:2rem 2rem 4rem; }
.story-reader-header { text-align:center;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(201,168,76,.15); }
.story-reader-title { font-family:'Cinzel Decorative',serif;font-size:1.8rem;color:var(--gold);margin-bottom:.5rem; }
.story-reader-chapter { font-style:italic;color:var(--vellum-dim); }
.story-body { font-size:1.05rem;line-height:1.9;color:var(--vellum); }
.story-body p { margin-bottom:1.4rem; }
.story-body p:first-child::first-letter { font-family:'Cinzel Decorative',serif;font-size:3rem;float:left;line-height:1;margin-right:.1em;color:var(--gold); }

/* ── STORE ── */
.store-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.3rem;margin-top:1rem; }
.store-item {
  background:rgba(255,255,255,.03);border:1px solid rgba(206,147,216,.18);
  border-radius:8px;padding:1.5rem;text-align:center;cursor:pointer;
  transition:all .2s;position:relative;
}
.store-item:hover { border-color:var(--obsidian-color);transform:translateY(-2px); }
.store-item.featured { border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.04); }
.store-badge { position:absolute;top:-9px;right:12px;background:var(--gold);color:var(--ink);font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.08em;padding:2px 8px;border-radius:10px;text-transform:uppercase; }
.store-icon { font-size:2.5rem;margin-bottom:.7rem; }
.store-amount { font-family:'Cinzel',serif;font-size:1.4rem;color:var(--obsidian-color);margin-bottom:.2rem; }
.store-bonus { font-size:.75rem;color:var(--uncommon);margin-bottom:.9rem;min-height:1.1rem; }
.store-price { font-family:'Cinzel',serif;font-size:1rem;color:var(--vellum);padding:.5rem 1.1rem;background:rgba(255,255,255,.06);border-radius:20px;display:inline-block;transition:background .2s; }
.store-item:hover .store-price { background:rgba(206,147,216,.15); }

/* ── CALLOUT ── */
.callout { background:rgba(201,168,76,.06);border-left:3px solid var(--gold);padding:1rem 1.2rem;border-radius:0 6px 6px 0;margin:1rem 0;font-style:italic;color:var(--vellum);line-height:1.6; }

/* ── TABLES ── */
.data-table { width:100%;border-collapse:collapse;font-size:.88rem; }
.data-table th { font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-align:left;padding:.6rem .8rem;border-bottom:1px solid rgba(201,168,76,.25); }
.data-table td { padding:.55rem .8rem;border-bottom:1px solid rgba(255,255,255,.05);color:var(--vellum-dim);vertical-align:middle; }
.data-table tr:hover td { background:rgba(255,255,255,.02); }

/* ── BATTLE RESULT MODAL ── */
.battle-result { text-align:center;padding:1rem 0; }
.result-icon { font-size:4rem;margin-bottom:1rem; }
.result-title { font-family:'Cinzel Decorative',serif;font-size:1.8rem;margin-bottom:.5rem; }
.result-title.victory { color:var(--gold); }
.result-title.defeat  { color:#e88; }
.result-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0; }
.rs-item { background:rgba(255,255,255,.04);border-radius:6px;padding:.8rem; }
.rs-val { font-family:'Cinzel',serif;font-size:1.2rem;color:var(--gold); }
.rs-lbl { font-size:.72rem;color:var(--vellum-dim);font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:.05em; }

/* ── SECTION LABEL ── */
.section-label { font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.7;margin:1.8rem 0 .8rem; }

/* ── PROFILE ── */
.profile-wrap { max-width:900px;margin:0 auto;padding:1rem 2rem 3rem; }
.profile-header { display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;padding:1.5rem;background:rgba(255,255,255,.03);border:1px solid rgba(201,168,76,.15);border-radius:8px; }
.profile-avatar { font-size:3.5rem; }
.profile-title { font-family:'Cinzel Decorative',serif;font-size:1.4rem;color:var(--gold); }
.profile-sub { color:var(--vellum-dim);font-style:italic;margin-top:.2rem; }
.profile-stats { display:flex;gap:2rem;margin-top:.8rem; }
.ps { text-align:center; }
.ps-val { font-family:'Cinzel',serif;font-size:1.2rem;color:var(--vellum); }
.ps-lbl { font-size:.68rem;color:var(--vellum-dim);font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:.06em; }

/* ── PATCH NOTES ── */
.patch-note { background:rgba(255,255,255,.03);border:1px solid rgba(201,168,76,.12);border-radius:8px;padding:1.5rem;margin-bottom:1.2rem; }
.patch-version { font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.12em;color:var(--gold);text-transform:uppercase; }
.patch-title { font-family:'Cinzel',serif;font-size:1.1rem;color:var(--vellum);margin:.3rem 0; }
.patch-content { font-size:.9rem;color:var(--vellum-dim);line-height:1.7;white-space:pre-line; }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .main-nav { padding:0 1rem;flex-wrap:wrap;height:auto;min-height:62px; }
  .nav-links { display:none; }
  .card-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr));padding:.8rem; }
  .tomes-grid { grid-template-columns:1fr 1fr; }
  .profile-stats { gap:1rem; }
  .result-stats { grid-template-columns:1fr; }
}
@media(max-width:480px){
  .tomes-grid { grid-template-columns:1fr; }
  .hero-stats { grid-template-columns:1fr; }
  .pull-grid .pull-card { width:80px; }
}