:root{
  /* Clean, professional light theme — the default. Nothing thematic lives here. */
  --bg: #f5f6fa;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --line: rgba(20,20,45,0.12);
  --line-strong: rgba(20,20,45,0.22);
  --text: #1b1d27;
  --text-dim: #6a6f80;
  --accent: #6c5ce7;
  --accent-soft: #8a7cf0;
  --metal: #9aa0ab;
  --metal-bright: #c7ccd4;
  --red: #c0392b;
  --red-soft: #d9483a;
  --gold: #b8860b;
  --gold-soft: #caa23a;
  --gold-bright: #d9b65a;
  --aurora: #b8860b;
  --easy: #b8860b;
  --skill: #8a6a1f;
  --enemy: #d9483a;
  --unplayable: #8a2f22;
  --win: #b8860b;
}
/* The dark theme — everything thematic (leather, gold hardware, corset
   lacing, the choker/harness crests) lives behind this attribute so the
   default site stays plain. Toggled via app.js. */
:root[data-theme="dark"]{
  --bg: #020102;
  --bg-panel: #070409;
  --bg-card: #0c0710;
  --line: rgba(120,40,70,0.22);
  --line-strong: rgba(120,40,70,0.45);
  --text: #ded0da;
  --text-dim: #8c7789;
  --accent: #7d2140;
  --accent-soft: #c14568;
  --metal: #a89aa3;
  --metal-bright: #cfc2c9;
  --red: #5c0f1e;
  --red-soft: #d43a56;
  --gold: #b8945c;
  --gold-soft: #ddbb7e;
  --gold-bright: #e8cf95;
  --aurora: #d4af6a;
  --easy: #d4af6a;
  --skill: #a3823f;
  --enemy: #d43a56;
  --unplayable: #3d0a12;
  --win: #e8cf95;
  /* The choker's own language, repeated as a tile: a dark leather strap with
     gold piping along both edges and an evenly spaced metal stud. */
  --lace-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Crect x='0' y='3' width='40' height='10' fill='%23150a10'/%3E%3Cline x1='0' y1='3' x2='40' y2='3' stroke='%23ddbb7e' stroke-width='1' opacity='0.55'/%3E%3Cline x1='0' y1='13' x2='40' y2='13' stroke='%23ddbb7e' stroke-width='1' opacity='0.55'/%3E%3Ccircle cx='20' cy='8' r='2.6' fill='%23cfc2c9'/%3E%3C/svg%3E");
  --lace-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='40'%3E%3Crect x='3' y='0' width='10' height='40' fill='%23150a10'/%3E%3Cline x1='3' y1='0' x2='3' y2='40' stroke='%23ddbb7e' stroke-width='1' opacity='0.55'/%3E%3Cline x1='13' y1='0' x2='13' y2='40' stroke='%23ddbb7e' stroke-width='1' opacity='0.55'/%3E%3Ccircle cx='8' cy='20' r='2.6' fill='%23cfc2c9'/%3E%3C/svg%3E");
  /* A wallpaper tile built from the choker and harness's own path data
     (just scaled down and repositioned), so the wallpaper is the same
     artwork, not a redrawn approximation. */
  --wallpaper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Cg transform='translate(20,20)'%3E%3Cpath d='M10,28 Q100,4 190,28' fill='none' stroke='%23150a10' stroke-width='15' stroke-linecap='round'/%3E%3Cpath d='M10,21.5 Q100,-2.5 190,21.5' fill='none' stroke='%23ddbb7e' stroke-width='1.1' opacity='0.55'/%3E%3Cpath d='M10,34.5 Q100,10.5 190,34.5' fill='none' stroke='%23ddbb7e' stroke-width='1.1' opacity='0.55'/%3E%3Ccircle cx='10' cy='28' r='4' fill='%23cfc2c9'/%3E%3Ccircle cx='190' cy='28' r='4' fill='%23cfc2c9'/%3E%3Ccircle cx='37' cy='21.9' r='2.6' fill='%23cfc2c9'/%3E%3Ccircle cx='64' cy='17.9' r='2.6' fill='%23cfc2c9'/%3E%3Ccircle cx='136' cy='17.9' r='2.6' fill='%23cfc2c9'/%3E%3Ccircle cx='163' cy='21.9' r='2.6' fill='%23cfc2c9'/%3E%3Crect x='90' y='9' width='20' height='13' rx='2' fill='%23150a10' stroke='%23ddbb7e' stroke-width='1.2'/%3E%3Crect x='96' y='19' width='8' height='7' rx='1.5' fill='%23150a10' stroke='%23ddbb7e' stroke-width='1'/%3E%3Ccircle cx='100' cy='35' r='9' fill='none' stroke='%23ddbb7e' stroke-width='3.2'/%3E%3C/g%3E%3Cg transform='translate(210,150)'%3E%3Cpath d='M10,8 L80,30' fill='none' stroke='%23150a10' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M150,8 L80,30' fill='none' stroke='%23150a10' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M80,30 L80,74' fill='none' stroke='%23150a10' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M8.2,13.7 L78.2,35.7' fill='none' stroke='%23ddbb7e' stroke-width='1.1' opacity='0.55'/%3E%3Cpath d='M11.8,2.3 L81.8,24.3' fill='none' stroke='%23ddbb7e' stroke-width='1.1' opacity='0.55'/%3E%3Cpath d='M148.2,2.3 L78.2,24.3' fill='none' stroke='%23ddbb7e' stroke-width='1.1' opacity='0.55'/%3E%3Cpath d='M151.8,13.7 L81.8,35.7' fill='none' stroke='%23ddbb7e' stroke-width='1.1' opacity='0.55'/%3E%3Cpath d='M74,30 L74,74' fill='none' stroke='%23ddbb7e' stroke-width='1.1' opacity='0.55'/%3E%3Cpath d='M86,30 L86,74' fill='none' stroke='%23ddbb7e' stroke-width='1.1' opacity='0.55'/%3E%3Ccircle cx='10' cy='8' r='3.4' fill='%23cfc2c9'/%3E%3Ccircle cx='150' cy='8' r='3.4' fill='%23cfc2c9'/%3E%3Ccircle cx='80' cy='74' r='3.4' fill='%23cfc2c9'/%3E%3Crect x='71' y='21' width='18' height='18' rx='2' transform='rotate(45 80 30)' fill='%23150a10' stroke='%23ddbb7e' stroke-width='1.2'/%3E%3Ccircle cx='80' cy='30' r='7.5' fill='none' stroke='%23ddbb7e' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', ui-sans-serif, system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
[data-theme="dark"] body{
  background: radial-gradient(1000px 520px at 12% -14%, #100309 0%, transparent 62%),
              radial-gradient(900px 480px at 108% -6%, #0e0409 0%, transparent 58%),
              radial-gradient(1200px 700px at 50% 110%, #0a0307 0%, transparent 65%),
              var(--bg);
}
a{ color: var(--accent-soft); }

/* Leather grain and wetlook gloss — dark theme only, absent by default */
[data-theme="dark"] body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.02) 50%, transparent 62%),
    linear-gradient(115deg, transparent 70%, rgba(120,40,70,0.06) 80%, transparent 92%);
}
main, header, footer, .lattice-divider, .lace-trim{ position:relative; z-index:2; }

/* Cursor spotlight, the stitched viewport frame, and the choker/harness
   wallpaper — all dark theme only */
#spotlight, .wallpaper{ display:none; }
[data-theme="dark"] #spotlight{
  display:block; position:fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(circle 280px at var(--mx,50%) var(--my,15%), rgba(212,58,86,0.14), transparent 70%);
}
[data-theme="dark"] .wallpaper{
  display:block; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: var(--wallpaper);
  background-repeat: repeat;
  background-size: 400px 260px;
  opacity: 0.12;
  /* fade out toward the middle, where readable content usually sits, and
     show more of the pattern out toward the margins */
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at center, transparent 0%, black 70%);
          mask-image: radial-gradient(ellipse 55% 50% at center, transparent 0%, black 70%);
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius:2px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent-soft); }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: rgba(120,40,70,0.4); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: rgba(120,40,70,0.65); }

header{
  padding: 28px clamp(20px,3vw,48px) 14px;
}
/* the choker and harness crests only exist in the dark theme */
.collar, .harness{ display:none; }
[data-theme="dark"] .collar{ display:block; margin: 0 0 4px; opacity: 0.9; }
[data-theme="dark"] .harness{ display:block; margin: 0 0 6px; opacity: 0.9; }
/* the padlock that replaces the plain dot on the "almost unplayable" indicator */
.lock-icon{ display:none; }
[data-theme="dark"] .lock-icon{ display:inline-flex; align-items:center; }
[data-theme="dark"] .swatch.lockable{ display:none; }
.eyebrow{ display:flex; align-items:center; gap:10px; color: var(--accent-soft); font-size: 12px; letter-spacing: .16em; font-weight:600; margin-bottom: 6px; text-transform:uppercase;}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background: var(--red-soft);
  box-shadow: 0 0 10px 2px rgba(212,58,86,0.5);
  animation: flicker 2.6s ease-in-out infinite;
}
@keyframes flicker{
  0%, 100%{ opacity:1; box-shadow: 0 0 8px 1px rgba(212,58,86,0.55); }
  50%{ opacity:.72; box-shadow: 0 0 5px 1px rgba(212,58,86,0.3); }
}
h1{
  font-family: 'Cinzel', 'Segoe UI', serif;
  font-size: 32px;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
[data-theme="dark"] h1{
  letter-spacing: 0.035em;
  /* a thin seam of gold between the ivory lead-in and the wine tail, not a wash of it */
  background: linear-gradient(120deg, #e2d2da 8%, var(--gold-soft) 46%, var(--accent-soft) 68%, var(--red-soft) 100%);
  -webkit-background-clip: text; background-clip:text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(212,58,86,0.28));
}
header p{ color: var(--text-dim); margin: 0; max-width: 620px; line-height:1.5; font-size:14px;}

/* Dividers — a plain thin line by default, the studded leather strap in dark mode */
.lattice-divider{
  height: 2px; opacity: 1;
  background-image: none;
  background-color: var(--line);
}
.lattice-divider.edged{
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.lattice-divider.thin{ height:1px; }
.lattice-divider.wrap{ margin: 0 clamp(20px,3vw,48px); }
[data-theme="dark"] .lattice-divider{
  height: 16px; opacity: 0.95;
  background-color: transparent;
  background-image: var(--lace-h);
  background-repeat: repeat-x;
  background-size: 40px 16px;
}
[data-theme="dark"] .lattice-divider.thin{ height:11px; opacity:.75; background-size: 28px 11px; }

.lace-trim{ height: 1px; background-color: var(--line); background-image:none; }
[data-theme="dark"] .lace-trim{
  height: 11px; opacity: 0.8;
  background-color: transparent;
  background-image: var(--lace-h);
  background-repeat: repeat-x;
  background-size: 28px 11px;
}

nav.tabs{ display:none; } /* removed, kept selector inert in case of stray references */

main{
  display:grid; grid-template-columns: minmax(0,2fr) 16px minmax(320px,1fr);
  gap: 16px; align-items:start;
  padding: 18px clamp(20px,3vw,48px) 40px;
}
.col-seam{
  align-self: stretch;
  background-image: none;
  background: linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat;
}
[data-theme="dark"] .col-seam{
  background-color: transparent;
  background-image: var(--lace-v);
  background-repeat: repeat-y;
  background-size: 16px 40px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
@media (max-width: 880px){
  main{ grid-template-columns: 1fr; }
  .col-seam{ display:none; }
  .col-history{ order:-1; }
}

.col-history{
  position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y:auto;
  padding-right: 4px;
}
@media (max-width: 880px){
  .col-history{ position:static; max-height:none; }
}

h2.col-title{
  font-family:'Cinzel','Segoe UI',serif; font-size:15px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--accent-soft); margin: 0 0 10px;
}

.toolbar{
  display:flex; gap: 12px; flex-wrap:wrap; align-items:center; margin-bottom: 18px;
}
.search-wrap{ position:relative; flex: 1 1 260px; }
.search-wrap input{
  width:100%; background: var(--bg-panel); border:1px solid var(--line); color:var(--text);
  padding: 11px 14px 11px 38px; border-radius:4px; font-size:14.5px; outline:none;
  transition: border-color .15s;
}
.search-wrap input:focus{ border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(108,92,231,0.18); }
[data-theme="dark"] .search-wrap input:focus{ box-shadow: 0 0 0 3px rgba(212,58,86,0.18), inset 0 0 12px rgba(0,0,0,0.4); }
.search-wrap svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.5; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line);
  background: var(--bg-panel); color: var(--text-dim);
  padding: 7px 13px; border-radius: 3px; font-size: 12px; text-transform:uppercase; letter-spacing:.05em;
  font-weight:600; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:7px;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
[data-theme="dark"] .chip{
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  border-top:1px dashed rgba(184,148,92,0.4); border-bottom:1px dashed rgba(184,148,92,0.4);
}
.chip .swatch{
  width:8px; height:8px; border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px var(--bg-panel), 0 0 0 3px rgba(168,154,163,0.5);
}
.chip.active{
  color: var(--text); border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor, 0 0 12px -2px currentColor;
}
[data-theme="dark"] .chip.active{ border-left-color: currentColor; border-right-color: currentColor; }
.chip:hover{ color: var(--text); border-color: var(--line-strong); }

.count-line{ color: var(--text-dim); font-size:13px; margin: 0 0 14px; }

.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap:10px;
}
.card{
  background: var(--bg-card); border:1px solid var(--line); border-radius: 6px;
  padding: 14px 16px; cursor:pointer;
  transition: border-color .15s, box-shadow .15s;
  position:relative; overflow:hidden;
}
.card:hover{ border-color: var(--line-strong); box-shadow: 0 10px 26px -14px rgba(0,0,0,.25); }
[data-theme="dark"] .card:hover{ animation: card-glow-pulse 1.8s ease-in-out infinite; box-shadow:none; }
@keyframes card-glow-pulse{
  0%, 100%{ box-shadow: 0 10px 26px -14px rgba(0,0,0,.75), 0 0 16px -6px rgba(212,58,86,0.35); }
  50%{ box-shadow: 0 10px 26px -14px rgba(0,0,0,.75), 0 0 24px -4px rgba(212,58,86,0.6); }
}
.card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--card-color, var(--line));
}
[data-theme="dark"] .card::before{
  /* the difficulty bar, with a small rivet-like highlight near the top */
  background:
    radial-gradient(circle 2.5px at 50% 11px, rgba(255,255,255,0.9), rgba(255,255,255,0) 75%),
    var(--card-color, var(--line));
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.09) 50%, transparent 58%);
  background-size: 260% 260%; background-position: -30% -30%;
  opacity:0; transition: opacity .2s ease, background-position .6s ease;
}
.card:hover::after{ opacity:1; background-position: 130% 130%; }
.card .cname{ font-size: 15px; font-weight:600; margin-bottom:4px; font-family:'Cinzel','Segoe UI',serif; letter-spacing:0.01em; }
.card .ctag{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
.card .clevel{ margin-top:8px; font-size:11.5px; color:var(--text-dim); }

.empty{ color:var(--text-dim); padding: 40px 0; text-align:center; font-size:14px; }

/* Detail / match popups */
.overlay{
  position:fixed; inset:0; background: rgba(20,20,30,.45); backdrop-filter: blur(2px);
  display:none; align-items:flex-start; justify-content:center; padding: 40px 20px; z-index:50; overflow-y:auto;
}
[data-theme="dark"] .overlay{ background: rgba(5,3,2,.88); }
.overlay.active{ display:flex; }
.panel{
  background: var(--bg-panel); border:1px solid var(--line-strong); border-radius:6px;
  max-width: 760px; width:100%; padding: 32px 34px 36px; position:relative;
  box-shadow: 0 30px 90px -30px rgba(0,0,0,.35);
}
[data-theme="dark"] .panel{
  border-radius:2px;
  animation: ember-glow 6s ease-in-out infinite;
}
@keyframes ember-glow{
  0%, 100%{ box-shadow: 0 30px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5), 0 0 30px -12px rgba(212,58,86,0.18); }
  50%{ box-shadow: 0 30px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5), 0 0 46px -10px rgba(212,58,86,0.36); }
}
.panel.wide{ max-width: 700px; }
/* corner rivets — dark theme hardware only */
.panel::before, .panel::after{ content:none; }
[data-theme="dark"] .panel::before, [data-theme="dark"] .panel::after{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle at 35% 35%, var(--gold-soft), var(--gold) 70%, #241a10 100%);
  box-shadow: 0 0 0 2px #0b0610, 0 0 0 3px var(--line-strong), 0 0 5px rgba(0,0,0,.7);
}
[data-theme="dark"] .panel::before{ top:12px; left:12px; }
[data-theme="dark"] .panel::after{ top:12px; right:12px; }
/* the leather strap-and-buckle header on every panel — dark theme only */
.panel-strap{ display:none; }
[data-theme="dark"] .panel-strap{
  display:flex; align-items:center; transform-origin:center;
  height: 22px; margin: -32px -34px 18px; padding-left: 40px;
  background:
    linear-gradient(var(--gold-soft), var(--gold-soft)) top / 100% 2px no-repeat,
    linear-gradient(var(--gold-soft), var(--gold-soft)) bottom / 100% 2px no-repeat,
    radial-gradient(circle 2.6px at center, var(--metal-bright) 99%, transparent 100%) center / 44px 22px repeat-x,
    linear-gradient(180deg, #1c0f16, #0e0710);
  border-bottom: 1px solid var(--line-strong);
  opacity: 0.92;
  /* the cinch-in and buckle-drop entrance is driven by GSAP (see animatePanelEntrance in app.js) */
}
.buckle{ display:none; }
[data-theme="dark"] .buckle{
  display:inline-block; position:relative; width:22px; height:14px;
  border: 2px solid var(--gold-soft); border-radius:2px;
  background: linear-gradient(90deg, transparent 42%, var(--gold-soft) 42% 58%, transparent 58%), rgba(0,0,0,0.3);
  box-shadow: 0 0 4px rgba(0,0,0,.6);
}
.panel .close{
  position:absolute; top:15px; right:16px; background:none; border:none; color:var(--text-dim);
  cursor:pointer; font-size:19px; line-height:1; padding:6px; z-index:1;
}
[data-theme="dark"] .panel .close{ color: var(--metal-bright); }
.panel .close:hover{ color:var(--red-soft); }
.panel h2{ margin: 0 0 4px; font-size:23px; font-family:'Cinzel','Segoe UI',serif; letter-spacing:0.01em; }
.panel .badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom: 18px; padding: 4px 10px; border-radius:4px; border:1px solid var(--line);
  position:relative; overflow:hidden;
}
[data-theme="dark"] .panel .badge{ padding: 4px 10px 4px 16px; }
/* the staggered reveal of h2 / badge / sections / meta-row / scoreboard / chart-wrap
   is driven by GSAP (see animatePanelEntrance in app.js) */
/* buckle cap — a darker strap end with a small metal pin, dark theme only */
.panel .badge::before, .rank-badge::before, .panel .badge::after, .rank-badge::after{ content:none; }
[data-theme="dark"] .panel .badge::before, [data-theme="dark"] .rank-badge::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:11px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.15));
  border-right: 1px solid rgba(0,0,0,0.4);
}
[data-theme="dark"] .panel .badge::after, [data-theme="dark"] .rank-badge::after{
  content:""; position:absolute; left:5px; top:50%; transform:translateY(-50%);
  width:3px; height:3px; border-radius:50%; background: var(--metal-bright);
  box-shadow: 0 0 2px rgba(0,0,0,.7);
}
.section{ margin-bottom: 18px; }
.section h3{
  font-size: 12px; text-transform:uppercase; letter-spacing:.1em; color: var(--accent-soft);
  margin: 0 0 8px; font-weight:600;
}
.section p, .section li{ font-size: 14.5px; line-height:1.55; color: var(--text); margin:0 0 6px; }
.ability-row{ display:grid; grid-template-columns: 28px 1fr; gap:10px; margin-bottom:8px; }
.ability-row .k{
  width:28px; height:28px; border-radius:3px; background: var(--bg-card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:var(--accent-soft);
}
.meta-row{ display:flex; gap: 22px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--line); margin-top: 6px;}
.meta-row div{ font-size:13px; }
.meta-row .label{ color:var(--text-dim); display:block; margin-bottom:2px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;}

/* History panel */
.placeholder{
  background: var(--bg-card); border:1px solid var(--line); border-radius:6px; padding: 20px 22px;
}
.placeholder p{ color: var(--text-dim); font-size:13.5px; line-height:1.6; }
.placeholder code{ background: var(--bg-panel); padding:2px 6px; border-radius:3px; font-size:12.5px; border:1px solid var(--line);}
.leash-loader{ display:none; }
[data-theme="dark"] .leash-loader{
  display:inline-block; width:36px; height:9px; vertical-align:middle; margin-right:8px;
  background-image: var(--lace-h); background-repeat:repeat-x; background-size:18px 9px;
  animation: leash-pull 0.6s linear infinite;
}
@keyframes leash-pull{ from{ background-position:0 0; } to{ background-position:-18px 0; } }
.form-row{ display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 14px; }
.form-row input, .form-row select{
  background: var(--bg-panel); border:1px solid var(--line); color:var(--text); padding:9px 11px;
  border-radius:4px; font-size:13.5px; outline:none;
}
.form-row input{ flex:1 1 140px; }
.form-row button{
  background: var(--accent);
  border:1px solid var(--line-strong); color:#ffffff;
  padding:9px 18px; border-radius:4px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
  transition: background .15s, box-shadow .15s;
  display:inline-flex; align-items:center; gap:9px;
}
[data-theme="dark"] .form-row button{
  background: linear-gradient(180deg, var(--accent) 0%, #4a1327 100%);
  color:#f2e6ec;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px -8px rgba(0,0,0,0.7);
}
/* a tiny belt-buckle glyph — dark theme only */
.form-row button::before{ content:none; }
[data-theme="dark"] .form-row button::before{
  content:""; display:inline-block; flex-shrink:0; width:15px; height:10px;
  border:1.5px solid currentColor; border-radius:1px;
  background: linear-gradient(90deg, transparent 42%, currentColor 42% 58%, transparent 58%);
}
.form-row button:hover{ background: var(--accent-soft); }
[data-theme="dark"] .form-row button:hover{
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 100%); color:#1a0a12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 18px -2px rgba(212,58,86,0.55);
}
.result-box{
  background: var(--bg-panel); border:1px dashed var(--line); border-radius:4px; padding:14px;
  font-size:13px; color:var(--text-dim); margin-top: 0; min-height: 44px;
}
.match-card{
  display:flex; align-items:center; gap:12px; background: var(--bg-card); border:1px solid var(--line);
  border-radius:4px; padding:11px 13px; margin-top:9px; border-left: 3px solid var(--line);
  cursor:pointer; flex-wrap:wrap; position:relative; overflow:hidden;
  transition: border-color .15s;
}
.match-card:hover{ border-color: var(--line-strong); }
.match-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.07) 50%, transparent 58%);
  background-size: 260% 260%; background-position: -30% -30%;
  opacity:0; transition: opacity .2s ease, background-position .6s ease;
}
.match-card:hover::after{ opacity:1; background-position: 130% 130%; }
.match-card.win{ border-left-color: var(--win); }
.match-card.loss{ border-left-color: var(--enemy); }
[data-theme="dark"] .match-card.win{ box-shadow: inset 3px 0 8px -5px rgba(232,207,149,0.6); }
[data-theme="dark"] .match-card.loss{ box-shadow: inset 3px 0 8px -5px rgba(212,58,86,0.6); }
.match-card .mc-result{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; width:34px; flex-shrink:0; }
.match-card.win .mc-result{ color: var(--win); }
.match-card.loss .mc-result{ color: var(--enemy); }
.match-card .mc-champ{ font-weight:600; font-size:13.5px; }
.match-card .mc-kda{ font-size:12px; color: var(--text-dim); }
.match-card .mc-meta{ font-size:11px; color: var(--text-dim); flex-basis:100%; }
.match-card .mc-vs{
  font-size:12px; color: var(--accent-soft); cursor:pointer; text-decoration: underline;
  text-decoration-style: dotted; background:none; border:none; padding:0; font-family:inherit;
}
.match-card .mc-vs:hover{ color: var(--red-soft); }
.match-card .mc-icon{
  width:30px; height:30px; border-radius:4px; flex-shrink:0; border:1px solid var(--line);
}
.match-card .mc-caret{ color: var(--text-dim); font-size:13px; flex-shrink:0; margin-left:auto; opacity:.6; }
.match-card:hover .mc-caret{ color: var(--accent-soft); opacity:1; }

.scoreboard{ display:flex; flex-direction:column; gap:10px; }
.sb-team{ display:flex; flex-direction:column; gap:4px; }
.sb-team:first-child{ padding-bottom:8px; border-bottom:1px dashed var(--line); }
.sb-row{
  display:grid; grid-template-columns: 26px 40px 20px 1fr 60px 55px 45px auto;
  align-items:center; gap:8px; padding:4px 6px; border-radius:3px; font-size:12px;
}
.sb-row.sb-me{ background: rgba(108,92,231,0.12); }
[data-theme="dark"] .sb-row.sb-me{ background: rgba(125,33,64,0.18); }
.sb-champ-icon{ width:24px; height:24px; border-radius:4px; }
.sb-spells{ display:flex; gap:2px; }
.sb-spell{ width:17px; height:17px; border-radius:2px; background: var(--bg-card); }
.sb-rune{ width:18px; height:18px; border-radius:50%; background: var(--bg-card); }
.sb-name{ color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-kda{ color: var(--text); }
.sb-cs, .sb-gold{ color: var(--text-dim); }
.sb-items{ display:flex; gap:2px; }
.sb-item{ width:18px; height:18px; border-radius:3px; background: var(--bg-card); }
.sb-item-empty{ display:inline-block; border:1px solid var(--line); }

.chart-wrap{ margin-top:14px; }
.chart-status{ color: var(--text-dim); font-size:12px; }

/* Rank badges */
#summoner-status{ display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 14px; }
.rank-badge{
  display:flex; align-items:center; gap:7px; background: var(--bg-card); border:1px solid var(--line);
  border-radius:4px; padding:6px 11px; font-size:12px; position:relative; overflow:hidden;
}
[data-theme="dark"] .rank-badge{ padding:6px 11px 6px 18px; }
.rank-badge .rq{ color: var(--text-dim); font-size:10px; text-transform:uppercase; letter-spacing:.03em; }
.rank-badge .rt{ font-weight:600; }
.rank-badge .rlp{ color: var(--gold); }
[data-theme="dark"] .rank-badge .rlp{ color: var(--gold-soft); }
.rank-badge .rwl{ color: var(--text-dim); font-size:11px; }