:root{
    --bg:#0c0e12;
    --bg-raised:#12151b;
    --panel:#171b22;
    --panel-2:#1d222b;
    --hairline:#2a2f38;
    --text:#e8e6df;
    --text-muted:#8b93a1;
    --text-faint:#5a6070;
    --gold:#c9a227;
    --gold-bright:#e0bd4a;
    --crimson:#b23a3a;
    --crimson-bright:#d24d4d;
    --moss:#4c7a5b;
    --moss-bright:#67a67d;
    --shadow: 0 10px 30px rgba(0,0,0,0.45);
    --radius: 10px;
    --serif: 'Cinzel', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(201,162,39,0.06), transparent 60%),
      radial-gradient(1000px 500px at 100% 0%, rgba(178,58,58,0.05), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:var(--sans);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;}
  button{font-family:inherit;}

  ::selection{background:rgba(201,162,39,0.3);}

  /* subtle rule texture at page top */
  .crest-line{
    height:2px;
    background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
    opacity:0.55;
  }

  /* ---------- NAV ---------- */
  header.topbar{
    position:sticky; top:0; z-index:40;
    background:rgba(12,14,18,0.86);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--hairline);
  }
  .topbar-inner{
    max-width:1180px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    gap:16px;
  }
  .wordmark{
    display:flex; align-items:center; gap:10px;
    font-family:var(--serif);
    letter-spacing:0.06em;
    font-weight:600;
    font-size:1.05rem;
    white-space:nowrap;
  }
  .wordmark .crest{
    width:26px; height:26px; flex:none;
    display:grid; place-items:center;
  }
  .wordmark small{
    display:block; font-family:var(--sans); font-weight:500;
    letter-spacing:0.12em; font-size:0.58rem; color:var(--text-faint);
    text-transform:uppercase; margin-top:2px;
  }

  nav.tabs{
    display:flex; gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  nav.tabs::-webkit-scrollbar{display:none;}
  .tab-btn{
    background:transparent; border:1px solid transparent;
    color:var(--text-muted);
    padding:8px 14px;
    border-radius:8px;
    font-size:0.86rem; font-weight:600;
    letter-spacing:0.02em;
    cursor:pointer;
    white-space:nowrap;
    transition:color .15s ease, background .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{color:var(--text);}
  .tab-btn.active{
    color:var(--gold-bright);
    background:rgba(201,162,39,0.08);
    border-color:rgba(201,162,39,0.35);
  }

  .topbar-right{display:flex; align-items:center; gap:10px;}

  .status-pill{
    display:flex; align-items:center; gap:6px;
    font-size:0.72rem; color:var(--text-muted);
    border:1px solid var(--hairline);
    padding:5px 10px; border-radius:999px;
    cursor:pointer; user-select:none;
    background:var(--panel);
  }
  .status-dot{width:7px; height:7px; border-radius:50%; background:var(--text-faint); transition:background .2s;}
  .status-dot.ok{background:var(--moss-bright); box-shadow:0 0 8px rgba(103,166,125,0.7);}
  .status-dot.bad{background:var(--crimson-bright); box-shadow:0 0 8px rgba(210,77,77,0.7);}
  .status-dot.pending{background:var(--gold-bright); animation:pulse 1.2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

  .gear-btn{
    width:34px; height:34px; border-radius:8px;
    border:1px solid var(--hairline); background:var(--panel);
    color:var(--text-muted); cursor:pointer;
    display:grid; place-items:center;
    transition:color .15s, border-color .15s;
  }
  .gear-btn:hover{color:var(--gold-bright); border-color:rgba(201,162,39,0.4);}

  /* settings popover */
  .settings-pop{
    position:absolute; right:20px; top:60px;
    width:min(340px, 90vw);
    background:var(--panel-2);
    border:1px solid var(--hairline);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    display:none;
    z-index:50;
  }
  .settings-pop.open{display:block;}
  .settings-pop label{
    display:block; font-size:0.72rem; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px;
  }
  .settings-pop input{
    width:100%; background:var(--bg-raised); border:1px solid var(--hairline);
    color:var(--text); border-radius:6px; padding:8px 10px; font-size:0.85rem;
    font-family:var(--mono);
  }
  .settings-pop .hint{font-size:0.72rem; color:var(--text-faint); margin-top:8px; line-height:1.5;}
  .settings-pop .row-btns{display:flex; gap:8px; margin-top:12px;}

  /* ---------- LAYOUT ---------- */
  main{max-width:1180px; margin:0 auto; padding:28px 20px 80px;}
  .view{display:none; animation:fadeUp .35s ease both;}
  .view.active{display:block;}
  @keyframes fadeUp{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .view{animation:none;}
    .status-dot.pending{animation:none;}
  }

  section.hero{
    position:relative;
    padding:44px 28px 36px;
    border-radius:16px;
    border:1px solid var(--hairline);
    background:
      linear-gradient(180deg, rgba(201,162,39,0.05), transparent 55%),
      var(--panel);
    overflow:hidden;
    margin-bottom:28px;
  }
  section.hero::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(circle at 1px 1px, rgba(201,162,39,0.15) 1px, transparent 1.5px);
    background-size: 22px 22px;
    opacity:0.35;
    pointer-events:none;
  }
  .hero-eyebrow{
    font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--gold-bright); font-weight:600; margin-bottom:10px;
    position:relative;
  }
  .hero h1{
    font-family:var(--serif);
    font-size:clamp(1.6rem, 4vw, 2.5rem);
    margin:0 0 10px;
    line-height:1.15;
    position:relative;
  }
  .hero p.sub{
    color:var(--text-muted); max-width:520px; margin:0 0 22px;
    font-size:0.95rem; line-height:1.6;
    position:relative;
  }

  .search-row{
    display:flex; gap:10px; flex-wrap:wrap; position:relative;
  }
  .search-row input[type=text]{
    flex:1; min-width:220px;
    background:var(--bg-raised);
    border:1px solid var(--hairline);
    color:var(--text);
    padding:13px 16px;
    border-radius:8px;
    font-size:0.95rem;
    font-family:var(--mono);
    transition:border-color .15s;
  }
  .search-row input[type=text]:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,0.15);}

  .btn{
    border:none; cursor:pointer; border-radius:8px;
    padding:13px 20px; font-weight:600; font-size:0.9rem;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .12s ease, filter .12s ease, background .15s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-gold{background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#1a1300;}
  .btn-gold:hover{filter:brightness(1.08);}
  .btn-ghost{background:var(--panel-2); color:var(--text); border:1px solid var(--hairline);}
  .btn-ghost:hover{border-color:var(--gold);}
  .btn:disabled{opacity:0.5; cursor:not-allowed; filter:none;}
  .btn-sm{padding:8px 14px; font-size:0.8rem;}

  .recent-chips{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; position:relative;}
  .chip{
    font-family:var(--mono); font-size:0.75rem; color:var(--text-muted);
    border:1px solid var(--hairline); background:var(--bg-raised);
    padding:6px 10px; border-radius:999px; cursor:pointer;
  }
  .chip:hover{color:var(--gold-bright); border-color:var(--gold);}

  /* ---------- PLAYER CARD ---------- */
  .player-card{
    display:flex; gap:22px; align-items:center;
    background:var(--panel); border:1px solid var(--hairline);
    border-radius:16px; padding:24px; margin-bottom:24px;
    flex-wrap:wrap;
  }
  .shield-frame{
    width:88px; height:96px; flex:none;
    clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%);
    background:linear-gradient(160deg, var(--gold), #7a611a);
    display:grid; place-items:center;
    padding:3px;
  }
  .shield-frame .inner{
    width:100%; height:100%;
    clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%);
    background:var(--panel-2);
    display:grid; place-items:center;
    overflow:hidden;
  }
  .shield-frame img{width:100%; height:100%; object-fit:cover;}
  .shield-frame .initials{font-family:var(--serif); font-size:1.6rem; color:var(--gold-bright);}

  .player-meta h2{font-family:var(--serif); margin:0 0 6px; font-size:1.4rem;}
  .player-meta .tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
  .tag{
    font-size:0.72rem; font-weight:600; letter-spacing:0.03em;
    padding:4px 10px; border-radius:999px; border:1px solid var(--hairline);
    color:var(--text-muted); background:var(--bg-raised);
  }
  .tag.gold{color:var(--gold-bright); border-color:rgba(201,162,39,0.4);}
  .player-meta .pid{font-family:var(--mono); font-size:0.78rem; color:var(--text-faint);}
  .level-badge-img{height:34px; margin-top:6px;}

  /* ---------- generic panel/card ---------- */
  .panel{
    background:var(--panel); border:1px solid var(--hairline);
    border-radius:14px; padding:20px;
  }
  .panel + .panel{margin-top:20px;}
  .panel h3{
    font-family:var(--serif); font-size:1.05rem; margin:0 0 4px;
  }
  .panel .desc{color:var(--text-muted); font-size:0.85rem; margin:0 0 18px;}

  .filters-row{
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;
  }
  .field{display:flex; flex-direction:column; gap:6px; min-width:130px;}
  .field label{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint);}
  .field input, .field select{
    background:var(--bg-raised); border:1px solid var(--hairline); color:var(--text);
    padding:9px 10px; border-radius:6px; font-size:0.85rem; font-family:var(--sans);
  }
  .field input:focus, .field select:focus{outline:none; border-color:var(--gold);}

  /* match cards */
  .match-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px;}
  .match-card{
    background:var(--panel-2); border:1px solid var(--hairline); border-radius:12px;
    padding:16px; position:relative; overflow:hidden;
  }
  .match-card .season-tag{font-size:0.68rem; color:var(--text-faint); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:10px;}
  .match-vs{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .match-side{text-align:center; flex:1;}
  .match-side .k{font-family:var(--serif); font-size:1.3rem;}
  .match-side .role{font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; color:var(--text-muted);}
  .vs-divider{font-family:var(--serif); color:var(--text-faint); font-size:0.85rem; padding:0 6px;}
  .result-strip{
    margin-top:14px; display:flex; align-items:center; justify-content:space-between;
    padding-top:12px; border-top:1px solid var(--hairline);
  }
  .result-badge{
    font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    padding:4px 10px; border-radius:999px;
  }
  .result-badge.captured{background:rgba(178,58,58,0.18); color:var(--crimson-bright); border:1px solid rgba(178,58,58,0.4);}
  .result-badge.defended{background:rgba(76,122,91,0.18); color:var(--moss-bright); border:1px solid rgba(76,122,91,0.4);}
  .match-card .date{font-size:0.72rem; color:var(--text-faint); font-family:var(--mono);}

  .pagination{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px;}
  .pagination span{font-size:0.82rem; color:var(--text-muted); font-family:var(--mono);}

  /* gift codes */
  .stat-strip{display:flex; gap:24px; margin-bottom:18px; flex-wrap:wrap;}
  .stat{display:flex; flex-direction:column;}
  .stat .num{font-family:var(--serif); font-size:1.6rem; color:var(--gold-bright);}
  .stat .lbl{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint);}

  .code-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px;}
  .code-card{
    background:var(--panel-2); border:1px solid var(--hairline); border-radius:12px;
    padding:16px; display:flex; flex-direction:column; gap:10px;
  }
  .code-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
  .code-str{font-family:var(--mono); font-size:1.05rem; letter-spacing:0.03em; color:var(--gold-bright); word-break:break-all;}
  .code-meta{font-size:0.72rem; color:var(--text-faint);}
  .copy-btn{
    background:var(--bg-raised); border:1px solid var(--hairline); color:var(--text-muted);
    border-radius:6px; padding:6px 10px; font-size:0.72rem; cursor:pointer; white-space:nowrap;
  }
  .copy-btn:hover{color:var(--gold-bright); border-color:var(--gold);}
  .copy-btn.copied{color:var(--moss-bright); border-color:var(--moss-bright);}

  /* kingdom tracker table */
  .table-wrap{overflow-x:auto;}
  table.kt{width:100%; border-collapse:collapse; font-size:0.85rem;}
  table.kt th{
    text-align:left; padding:10px 12px; color:var(--text-faint);
    text-transform:uppercase; font-size:0.68rem; letter-spacing:0.06em;
    border-bottom:1px solid var(--hairline);
  }
  table.kt td{padding:12px; border-bottom:1px solid var(--hairline); color:var(--text);}
  table.kt tr:last-child td{border-bottom:none;}
  .verified-check{color:var(--moss-bright); font-weight:700;}
  .exclusive-tag{color:var(--gold-bright); font-size:0.72rem; font-weight:600;}

  /* states */
  .empty-state, .error-state, .loading-state{
    text-align:center; padding:40px 20px; color:var(--text-muted);
  }
  .error-state{color:var(--crimson-bright);}
  .error-state .code{font-family:var(--mono); font-size:0.75rem; color:var(--text-faint); margin-top:6px;}
  .loading-state .spinner{
    width:26px; height:26px; border-radius:50%;
    border:3px solid var(--hairline); border-top-color:var(--gold);
    margin:0 auto 14px; animation:spin 0.8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  footer{
    max-width:1180px; margin:0 auto; padding:20px 20px 40px;
    color:var(--text-faint); font-size:0.75rem;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

  /* ---------- GAME REFERENCE ---------- */
  section.hero.hero-compact{padding:28px 28px 24px; margin-bottom:20px;}
  section.hero.hero-compact h1{font-size:clamp(1.3rem, 3vw, 1.9rem);}
  section.hero.hero-compact .sub{max-width:640px;}
  section.hero.hero-compact .sub a{color:var(--gold-bright); text-decoration:underline;}

  .ref-pills{
    display:flex; gap:8px; flex-wrap:wrap;
    margin-bottom:18px;
  }
  .ref-pill{
    display:flex; align-items:center; gap:7px;
    background:var(--panel); border:1px solid var(--hairline);
    color:var(--text-muted); padding:8px 14px; border-radius:999px;
    font-size:0.82rem; font-weight:600; cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
  }
  .ref-pill:hover{color:var(--text); border-color:rgba(201,162,39,0.4);}
  .ref-pill.active{
    color:var(--gold-bright); background:rgba(201,162,39,0.1);
    border-color:rgba(201,162,39,0.45);
  }
  .ref-pill.disabled{opacity:0.45; cursor:not-allowed;}
  .ref-pill .dot{width:6px; height:6px; border-radius:50%; flex:none;}
  .ref-pill .dot.st-verified{background:var(--moss-bright);}
  .ref-pill .dot.st-sourced{background:var(--gold-bright);}
  .ref-pill .dot.st-community{background:var(--text-faint);}
  .ref-pill .dot.st-soon{background:var(--crimson-bright);}

  .ref-panel-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:16px; flex-wrap:wrap; margin-bottom:14px;
  }
  .ref-filter{
    background:var(--bg-raised); border:1px solid var(--hairline); color:var(--text);
    padding:9px 12px; border-radius:6px; font-size:0.85rem; min-width:200px;
  }
  .ref-filter:focus{outline:none; border-color:var(--gold);}

  .provenance-row{
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;
  }
  .prov-badge{
    font-size:0.68rem; font-weight:600; letter-spacing:0.02em;
    padding:4px 10px; border-radius:999px; border:1px solid var(--hairline);
    color:var(--text-muted); background:var(--bg-raised);
    text-transform:none;
  }
  .prov-badge.verified{color:var(--moss-bright); border-color:rgba(76,122,91,0.4);}
  .prov-badge.sourced{color:var(--gold-bright); border-color:rgba(201,162,39,0.4);}
  .prov-badge.unconfirmed{color:var(--crimson-bright); border-color:rgba(178,58,58,0.4);}

  table.ref-table{width:100%; border-collapse:collapse; font-size:0.83rem;}
  table.ref-table th{
    text-align:left; padding:10px 12px; color:var(--text-faint);
    text-transform:uppercase; font-size:0.66rem; letter-spacing:0.05em;
    border-bottom:1px solid var(--hairline); white-space:nowrap;
  }
  table.ref-table td{padding:11px 12px; border-bottom:1px solid var(--hairline); color:var(--text); vertical-align:top;}
  table.ref-table tr:last-child td{border-bottom:none;}
  table.ref-table tr:hover td{background:rgba(255,255,255,0.02);}

  @media (max-width:640px){
    .topbar-inner{flex-wrap:wrap;}
    section.hero{padding:30px 18px;}
    .player-card{padding:18px;}
    .filters-row{flex-direction:column;}
    .field{width:100%;}
    footer{flex-direction:column;}
    .ref-panel-head{flex-direction:column;}
    .ref-filter{width:100%;}
  }