/* =========================================================================
   Ore Odyssey — Web Portal design system
   Mirrors the in-game tokens (style.css) so portal + game feel like one product.
   Fonts: Cinzel (headings), Lustria (body) — loaded via Google Fonts in layout.
   ========================================================================= */

:root{
  --bg-dark:#0a0b10;
  --bg-panel:#1c1e26;
  --bg-panel-2:#15171e;
  --bg-hover:#2a2d3a;
  --accent-primary:#d4af37;        /* ancient gold  */
  --accent-secondary:#a61a1a;      /* imperial crimson */
  --accent-bronze:#cd7f32;
  --text-main:#f4ecd8;             /* aged parchment */
  --text-muted:#bdb293;            /* slightly brightened for 4.5:1 on panels */
  --border-color:#3e3a32;
  --success:#2ecc71;
  --danger:#e74c3c;
  --gold-glow:0 0 10px rgba(212,175,55,.30);

  --radius:10px;
  --radius-sm:6px;
  --maxw:1140px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(212,175,55,.06), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(166,26,26,.06), transparent 55%),
    var(--bg-dark);
  color:var(--text-main);
  font-family:'Lustria', Georgia, serif;
  font-size:16px;
  line-height:1.6;
  min-height:100dvh;
}

h1,h2,h3,h4{ font-family:'Cinzel', serif; font-weight:700; letter-spacing:.02em; line-height:1.2; margin:0 0 .5em; }
h1{ font-size:clamp(2rem,5vw,3.25rem); }
h2{ font-size:clamp(1.5rem,3vw,2.25rem); }
a{ color:var(--accent-primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin:0 0 1rem; }
img{ max-width:100%; display:block; }

/* ---- Focus & accessibility ---- */
:focus-visible{ outline:3px solid var(--accent-primary); outline-offset:2px; border-radius:4px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent-primary); color:#1a1206; padding:.5rem 1rem; z-index:1000; }
.skip-link:focus{ left:8px; top:8px; }

/* ---- Layout helpers ---- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-6); }
.section{ padding-block:var(--space-12); }
.grid{ display:grid; gap:var(--space-6); }
.muted{ color:var(--text-muted); }
.center{ text-align:center; }
.tabnum{ font-variant-numeric:tabular-nums; }

/* ---- Top navigation ---- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(10,11,16,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-color);
}
.site-header .container{ display:flex; align-items:center; gap:var(--space-6); height:64px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:'Cinzel',serif; font-weight:700;
  font-size:1.15rem; color:var(--text-main); text-shadow:var(--gold-glow); }
.brand:hover{ text-decoration:none; }
.brand .logo{ width:34px; height:34px; border-radius:8px; border:1px solid var(--accent-bronze); }
.nav-links{ display:flex; align-items:center; gap:var(--space-2); margin-left:auto; }
.nav-links a{ color:var(--text-main); padding:.5rem .75rem; border-radius:var(--radius-sm); min-height:44px;
  display:inline-flex; align-items:center; }
.nav-links a:hover{ background:var(--bg-hover); text-decoration:none; }
.nav-links a[aria-current="page"]{ color:var(--accent-primary); }
/* Buttons styled as nav links keep their own foreground (e.g. dark text on the
   gold primary button) instead of inheriting the nav link colour. */
.nav-links a.btn{ color:var(--b-fg); }
.nav-links a.btn:hover{ text-decoration:none; }
/* Higher specificity than .btn (the toggle is also a .btn, defined later in the
   file) so it stays hidden on desktop. */
.btn.nav-toggle{ display:none; }

/* ---- Buttons ---- */
.btn{
  --b-bg:var(--bg-hover); --b-fg:var(--text-main); --b-bd:var(--border-color);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.6rem 1.15rem; border-radius:var(--radius-sm);
  border:1px solid var(--b-bd); background:var(--b-bg); color:var(--b-fg);
  font-family:'Cinzel',serif; font-weight:600; font-size:.95rem; cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary{ --b-bg:linear-gradient(180deg,#e6c252,#c79a2c); --b-fg:#1a1206; --b-bd:#caa233;
  box-shadow:var(--gold-glow); }
.btn-danger{ --b-bg:transparent; --b-fg:var(--danger); --b-bd:var(--danger); }
.btn-ghost{ --b-bg:transparent; }
.btn-block{ width:100%; }
.btn .spinner{ width:16px; height:16px; border:2px solid rgba(0,0,0,.25); border-top-color:currentColor;
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Cards / panels ---- */
.panel{
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--border-color); border-radius:var(--radius);
  padding:var(--space-6);
}
.panel-pad-lg{ padding:var(--space-8); }

/* ---- Hero (landing) ---- */
.hero{ position:relative; overflow:hidden; padding-block:var(--space-12); }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-8); align-items:center; }
.hero .eyebrow{ color:var(--accent-bronze); font-family:'Cinzel',serif; letter-spacing:.18em;
  text-transform:uppercase; font-size:.8rem; }
.hero h1 .accent{ color:var(--accent-primary); text-shadow:var(--gold-glow); }
.hero-art{ border-radius:var(--radius); border:1px solid var(--accent-bronze);
  box-shadow:0 20px 60px rgba(0,0,0,.5); aspect-ratio:4/3; object-fit:cover; width:100%; }
.cta-row{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6); }

/* ---- Feature cards ---- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.feature .icon{ width:44px; height:44px; color:var(--accent-primary); margin-bottom:.6rem; }
.feature h3{ font-size:1.15rem; margin-bottom:.25rem; }

/* ---- Leaderboard / Hall of Fame ---- */
.lb-table{ width:100%; border-collapse:collapse; }
.lb-table caption{ text-align:left; color:var(--text-muted); padding-bottom:.5rem; }
.lb-table th, .lb-table td{ padding:.75rem .9rem; border-bottom:1px solid var(--border-color); text-align:left; }
.lb-table thead th{ font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); }
.lb-table tbody tr:hover{ background:var(--bg-hover); }
.lb-table .col-rank{ width:64px; text-align:center; font-family:'Cinzel',serif; }
.lb-rank-medal{ font-size:1.25rem; }
.lb-rank-1{ color:#ffd75e; } .lb-rank-2{ color:#cfd2da; } .lb-rank-3{ color:#cd7f32; }
.lb-player{ display:flex; align-items:center; gap:.6rem; }
.lb-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.lb-avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-hover); border:1px solid var(--border-color); font-size:1.1rem;
  overflow:hidden; flex:0 0 auto; }
.lb-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.admin-avatar{ width:22px; height:22px; border-radius:50%; object-fit:cover; vertical-align:middle; }

/* Hall of Fame "Main Pet" cell + hover tooltip (pet options). */
.lb-pet{ position:relative; display:inline-flex; align-items:center; gap:.4rem; cursor:help; outline:none; }
.lb-pet-emoji{ font-size:1.15rem; line-height:1; }
.lb-pet-name{ font-weight:600; }
/* position:fixed so the tooltip floats OVER the table instead of being clipped
   by the panel's horizontal scroll. Coordinates are set by JS on hover/focus. */
.lb-pet-tip{ position:fixed; z-index:1000; min-width:190px; max-width:min(90vw,320px);
  display:none; flex-direction:column; gap:.2rem; padding:.6rem .7rem;
  background:var(--bg-panel); border:1px solid var(--accent-bronze); border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.55); white-space:normal; text-align:left; pointer-events:none; }
.lb-pet-tip.is-open{ display:flex; }
.lb-pet-tip-head{ font-family:'Cinzel',serif; color:var(--accent-primary); font-size:.85rem; margin-bottom:.15rem; }
.lb-pet-meta{ color:var(--text-muted); font-size:.75rem; }
.lb-pet-opt{ color:#2ecc71; font-size:.8rem; font-weight:700; }
.lb-table tr.is-me{ outline:2px solid var(--accent-primary); outline-offset:-2px; }
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border-radius:999px;
  font-size:.78rem; font-family:'Cinzel',serif; border:1px solid var(--accent-bronze); color:var(--accent-primary); }
.badge-ng{ border-color:#7a5cff; color:#b6a6ff; }
.status-pill{ display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.75rem;
  border:1px solid var(--border-color); }
.status-active{ color:var(--success); border-color:rgba(46,204,113,.5); }
.status-banned{ color:var(--danger); border-color:rgba(231,76,60,.5); }
.status-completed{ color:var(--success); }
.status-refunded{ color:var(--text-muted); }
.status-flagged{ color:var(--accent-primary); }
.status-pending{ color:var(--accent-bronze); }

/* ---- Forms ---- */
.auth-wrap{ max-width:440px; margin:var(--space-12) auto; }
.field{ margin-bottom:var(--space-4); }
.field label{ display:block; font-family:'Cinzel',serif; font-size:.85rem; margin-bottom:.35rem; }
.field .req{ color:var(--accent-primary); }
.input{
  width:100%; min-height:44px; padding:.65rem .8rem; font-size:1rem; font-family:'Lustria',serif;
  background:var(--bg-panel-2); color:var(--text-main);
  border:1px solid var(--border-color); border-radius:var(--radius-sm);
}
.input:focus{ border-color:var(--accent-primary); }
.input-group{ display:flex; }
.input-group .input{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group .pw-toggle{ border-left:0; border-top-left-radius:0; border-bottom-left-radius:0;
  min-width:48px; }
.field-error{ color:var(--danger); font-size:.85rem; margin-top:.3rem; min-height:1.1em; }
.helper{ color:var(--text-muted); font-size:.85rem; margin-top:.3rem; }
.form-alert{ padding:.7rem .9rem; border-radius:var(--radius-sm); margin-bottom:var(--space-4);
  border:1px solid; }
.form-alert.error{ color:var(--danger); border-color:rgba(231,76,60,.5); background:rgba(231,76,60,.08); }
.form-alert.success{ color:var(--success); border-color:rgba(46,204,113,.5); background:rgba(46,204,113,.08); }
.divider{ display:flex; align-items:center; gap:1rem; color:var(--text-muted);
  margin:var(--space-6) 0; font-size:.85rem; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--border-color); }
.gsi-wrap{ display:flex; justify-content:center; }

/* ---- Dashboard ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-4); }
.stat-card .num{ font-family:'Cinzel',serif; font-size:2rem; color:var(--accent-primary);
  text-shadow:var(--gold-glow); font-variant-numeric:tabular-nums; }
.stat-card .label{ color:var(--text-muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }

/* ---- Admin shell ---- */
.admin{ display:grid; grid-template-columns:230px 1fr; min-height:calc(100dvh - 64px); }
.admin-side{ border-right:1px solid var(--border-color); padding:var(--space-6) var(--space-4); background:var(--bg-panel-2); }
.admin-side a{ display:flex; align-items:center; gap:.6rem; color:var(--text-main);
  padding:.6rem .75rem; border-radius:var(--radius-sm); min-height:44px; }
.admin-side a:hover{ background:var(--bg-hover); text-decoration:none; }
.admin-side a.active{ background:var(--bg-hover); color:var(--accent-primary); }
.admin-main{ padding:var(--space-8); overflow-x:auto; }
.admin-tab{ display:none; }
.admin-tab.active{ display:block; }
.toolbar{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--space-6); }
.toolbar .input{ max-width:280px; }

.data-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.data-table th, .data-table td{ padding:.6rem .7rem; border-bottom:1px solid var(--border-color); text-align:left;
  white-space:nowrap; }
.data-table thead th{ font-family:'Cinzel',serif; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-muted); }
.row-actions{ display:flex; gap:.35rem; }
.btn-sm{ min-height:34px; padding:.3rem .6rem; font-size:.82rem; }
.pager{ display:flex; gap:.5rem; align-items:center; margin-top:var(--space-4); }
.empty-state{ text-align:center; color:var(--text-muted); padding:var(--space-12); }

/* ---- Footer ---- */
.site-footer{ border-top:1px solid var(--border-color); margin-top:var(--space-12);
  padding-block:var(--space-8); color:var(--text-muted); }
.site-footer .container{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; }

/* ---- Modal ---- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none;
  align-items:center; justify-content:center; z-index:100; padding:1rem; }
.modal-backdrop.open{ display:flex; }
.modal{ background:var(--bg-panel); border:1px solid var(--accent-bronze); border-radius:var(--radius);
  max-width:480px; width:100%; padding:var(--space-6); box-shadow:0 20px 60px rgba(0,0,0,.6); }

/* ---- Responsive ---- */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; }
  .features{ grid-template-columns:1fr; }
  .admin{ grid-template-columns:1fr; }
  .admin-side{ border-right:0; border-bottom:1px solid var(--border-color);
    display:flex; gap:.4rem; overflow-x:auto; }
  .admin-side a{ white-space:nowrap; }
  .nav-links{ position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--bg-panel); border-bottom:1px solid var(--border-color); padding:.5rem;
    display:none; }
  .nav-links.open{ display:flex; }
  .btn.nav-toggle{ display:inline-flex; margin-left:auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}