:root {
    --bg-deep:    #07080f;
    --bg-card:    #0d0f1c;
    --bg-panel:   #111428;
    --accent-gold:   #f0c040;
    --accent-blue:   #3a8fff;
    --accent-cyan:   #00e5ff;
    --accent-purple: #8b5cf6;
    --text-primary:   #e8eaf6;
    --text-secondary: #7986cb;
    --text-dim:       #3949ab;
    --border-subtle:  rgba(90,110,200,0.18);
    --border-glow:    rgba(58,143,255,0.4);
    --glow-blue: 0 0 20px rgba(58,143,255,0.5), 0 0 60px rgba(58,143,255,0.15);
    --glow-gold: 0 0 20px rgba(240,192,64,0.5), 0 0 60px rgba(240,192,64,0.1);
    --nav-bg: rgba(7,8,15,0.88);
    --font-display: 'Bebas Neue', sans-serif;
    --font-ui:      'Rajdhani', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --nav-h: 64px;
    --radius: 12px;
    --radius-lg: 20px;
  }

  /* ── THEME: CRIMSON — red on black ── */
  [data-theme="crimson"] {
    --bg-deep:       #0a0000;
    --bg-card:       #110000;
    --bg-panel:      #180000;
    --accent-gold:   #ff2020;
    --accent-blue:   #cc0000;
    --accent-cyan:   #ff4444;
    --accent-purple: #990000;
    --text-primary:   #fff0f0;
    --text-secondary: #cc4444;
    --text-dim:       #661111;
    --border-subtle:  rgba(200,0,0,0.22);
    --border-glow:    rgba(255,30,30,0.5);
    --glow-blue: 0 0 20px rgba(220,0,0,0.6), 0 0 60px rgba(220,0,0,0.2);
    --glow-gold: 0 0 20px rgba(255,40,40,0.6), 0 0 60px rgba(255,40,40,0.15);
    --nav-bg: rgba(10,0,0,0.92);
  }
  [data-theme="crimson"] #starfield {
    background:
      radial-gradient(ellipse at 20% 30%, rgba(200,0,0,0.1) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 70%, rgba(150,0,0,0.07) 0%, transparent 60%),
      var(--bg-deep);
  }

  /* ── THEME: DHL — yellow + blue accents on near-black ── */
  [data-theme="dhl"] {
    --bg-deep:       #111008;
    --bg-card:       #1a180a;
    --bg-panel:      #22200c;
    --accent-gold:   #ffcc00;
    --accent-blue:   #1565c0;
    --accent-cyan:   #ffdd33;
    --accent-purple: #0d47a1;
    --text-primary:   #fffde0;
    --text-secondary: #b8a000;
    --text-dim:       #665c00;
    --border-subtle:  rgba(255,204,0,0.2);
    --border-glow:    rgba(255,204,0,0.5);
    --glow-blue: 0 0 20px rgba(255,204,0,0.55), 0 0 60px rgba(255,204,0,0.18);
    --glow-gold: 0 0 20px rgba(255,220,0,0.6), 0 0 60px rgba(255,220,0,0.2);
    --nav-bg: rgba(17,16,8,0.94);
  }
  /* DHL-specific overrides — yellow rows, blue value text like the reference card */
  [data-theme="dhl"] .qcard { background: #1a180a; border-color: rgba(255,204,0,0.2); }
  [data-theme="dhl"] .qcard-img { background: #22200c; }
  [data-theme="dhl"] .qcard-body { background: #ffcc00; border-radius: 0 0 var(--radius) var(--radius); }
  [data-theme="dhl"] .qcard-cat  { color: #555200; }
  [data-theme="dhl"] .qcard-name { color: #111000; }
  [data-theme="dhl"] .srow  { border-bottom-color: rgba(0,0,0,0.1); }
  [data-theme="dhl"] .skey  { color: #444100; }
  [data-theme="dhl"] .sval  { color: #1565c0; }
  [data-theme="dhl"] .sunit { color: #555200; }
  [data-theme="dhl"] .grade-badge  { color: #111000; background: rgba(255,204,0,0.9); border-color: rgba(0,0,0,0.2); text-shadow: none; }
  [data-theme="dhl"] .country-badge { background: #1565c0; border-color: #0d47a1; color: #fff; }
  /* DHL modal */
  [data-theme="dhl"] .modal-box { background: #1a180a; }
  [data-theme="dhl"] .modal-img  { background: #22200c; }
  [data-theme="dhl"] .modal-body { background: #ffcc00; }
  [data-theme="dhl"] .modal-title { color: #111000; }
  [data-theme="dhl"] .modal-meta-grid .meta-label { color: #555200; }
  [data-theme="dhl"] .modal-meta-grid .meta-val   { color: #111000; }
  [data-theme="dhl"] .modal-info-box { background: rgba(21,101,192,.1); border-left-color: #1565c0; color: #222100; }
  [data-theme="dhl"] .modal-divider { background: rgba(0,0,0,0.15); }
  [data-theme="dhl"] .mstat { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.12); }
  [data-theme="dhl"] .mstat .key { color: #555200; }
  [data-theme="dhl"] .mstat .val { color: #1565c0; }
  [data-theme="dhl"] .mstat .unit { color: #444100; }
  /* DHL nav & sidebar */
  [data-theme="dhl"] .nav-logo       { color: #ffcc00; }
  [data-theme="dhl"] .nav-logo span  { color: #998800; }
  [data-theme="dhl"] .nav-links li a { color: #998800; }
  [data-theme="dhl"] .nav-links li a:hover,
  [data-theme="dhl"] .nav-links li a.active { color: #ffcc00; }
  [data-theme="dhl"] .nav-links li a::after { background: #1565c0; }
  [data-theme="dhl"] .year-btn       { color: #998800; }
  [data-theme="dhl"] .year-btn.active { color: #ffcc00; background: rgba(255,204,0,.08); }
  [data-theme="dhl"] .coll-btn       { color: #665c00; }
  [data-theme="dhl"] .coll-btn.active { color: #1565c0; border-left-color: #1565c0; }
  /* DHL home */
  [data-theme="dhl"] .home-title     { color: #ffcc00; }
  [data-theme="dhl"] .home-title .gold { color: #ffdd33; text-shadow: var(--glow-gold); }
  [data-theme="dhl"] .home-title .home-by { color: #998800; }
  [data-theme="dhl"] .home-subtitle  { color: #998800; }
  [data-theme="dhl"] .home-badge     { color: #ffcc00; border-color: rgba(255,204,0,.35); background: rgba(255,204,0,.06); }
  [data-theme="dhl"] .stat-num       { color: #ffcc00; text-shadow: var(--glow-gold); }
  [data-theme="dhl"] .stat-label     { color: #998800; }
  [data-theme="dhl"] .btn-primary    { background: linear-gradient(135deg, #ffcc00, #e6a800); color: #111000; box-shadow: 0 4px 24px rgba(255,204,0,.35); }
  [data-theme="dhl"] .btn-secondary  { color: #ffcc00; border-color: rgba(255,204,0,.4); }
  /* DHL database */
  [data-theme="dhl"] .db-header h1   { color: #ffcc00; }
  [data-theme="dhl"] .db-header h1 span { color: #1565c0; }
  [data-theme="dhl"] .db-header p    { color: #998800; }
  [data-theme="dhl"] .breadcrumb     { color: #665c00; }
  [data-theme="dhl"] .coll-card      { background: #22200c; }
  [data-theme="dhl"] .coll-card h3   { color: #ffcc00; }
  [data-theme="dhl"] .coll-card p    { color: #998800; }
  [data-theme="dhl"] .filter-btn     { color: #998800; background: #22200c; }
  [data-theme="dhl"] .filter-btn.on  { color: #1565c0; border-color: #1565c0; background: rgba(21,101,192,.1); }
  [data-theme="dhl"] #starfield {
    background:
      radial-gradient(ellipse at 20% 30%, rgba(255,204,0,0.07) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 70%, rgba(21,101,192,0.06) 0%, transparent 60%),
      var(--bg-deep);
  }
  /* Swatch updates */
  .swatch-crimson { background: linear-gradient(135deg, #0a0000 50%, #cc0000 100%); }
  .swatch-dhl     { background: linear-gradient(135deg, #111008 40%, #ffcc00 70%, #1565c0 100%); }
  .theme-btn {
    margin-left: 16px;
    background: none; border: 1px solid var(--border-subtle);
    border-radius: 8px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary);
    transition: border-color .2s, color .2s, background .2s;
    position: relative; flex-shrink: 0;
  }
  .theme-btn:hover { border-color: var(--accent-blue); color: var(--text-primary); background: rgba(255,255,255,.05); }
  .theme-btn svg { width:18px; height:18px; transition: transform .4s ease; }
  .theme-btn:hover svg { transform: rotate(60deg); }

  .theme-panel {
    display: none; position: absolute; top: calc(var(--nav-h) + 8px); right: 40px;
    background: var(--bg-card); border: 1px solid var(--border-glow);
    border-radius: var(--radius); padding: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5), var(--glow-blue);
    z-index: 1100; min-width: 180px;
    animation: fadeUp .2s ease;
  }
  .theme-panel.open { display: block; }
  .theme-panel-label { font-family: var(--font-ui); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--text-dim); padding: 4px 8px 8px; }
  .theme-option {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 7px; cursor: pointer;
    transition: background .18s;
    font-family: var(--font-ui); font-size: .88rem; font-weight: 600;
    letter-spacing: .06em; color: var(--text-secondary);
    border: none; background: none; width: 100%; text-align: left;
  }
  .theme-option:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
  .theme-option.active { color: var(--accent-cyan); background: rgba(58,143,255,.08); }
  .theme-option .swatch {
    width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.15);
  }
  .swatch-default { background: linear-gradient(135deg, #07080f 50%, #3a8fff 100%); }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--bg-deep); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }

  /* STARFIELD */
  #starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 20% 30%, rgba(58,143,255,0.06) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 70%, rgba(139,92,246,0.05) 0%, transparent 60%), var(--bg-deep); }
  #starfield::before { content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6) 0%, transparent 100%),
      radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 45% 90%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 92% 50%, rgba(255,255,255,0.6) 0%, transparent 100%),
      radial-gradient(2px 2px at 60% 30%, rgba(200,220,255,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.4) 0%, transparent 100%);
    animation: twinkle 6s ease-in-out infinite alternate; }
  @keyframes twinkle { 0%{opacity:.5} 100%{opacity:1} }

  /* NAV */
  nav { position: sticky; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; padding: 0 40px; background: var(--nav-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
  .nav-logo { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.08em; color: var(--accent-gold); text-shadow: var(--glow-gold); margin-right: auto; cursor: pointer; user-select: none; }
  .nav-logo span { color: var(--text-secondary); font-size: 0.9rem; display: block; letter-spacing: 0.2em; font-family: var(--font-ui); font-weight: 500; margin-top: -4px; }
  .nav-links { display: flex; gap: 4px; list-style: none; }
  .nav-links li a { display: block; padding: 8px 18px; font-family: var(--font-ui); font-size: .95rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); text-decoration: none; border-radius: 6px; transition: color .2s, background .2s; position: relative; }
  .nav-links li a::after { content: ''; position: absolute; bottom: 4px; left: 50%; right: 50%; height: 2px; background: var(--accent-blue); transition: left .25s, right .25s; border-radius: 2px; }
  .nav-links li a:hover { color: var(--text-primary); background: rgba(58,143,255,0.08); }
  .nav-links li a:hover::after, .nav-links li a.active::after { left: 18px; right: 18px; }
  .nav-links li a.active { color: var(--accent-cyan); }

  /* SECTIONS */
  .section { display: none; position: relative; z-index: 1; }
  .section.active { display: block; animation: fadeUp .4s ease; }
  @keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

  /* HOME */
  #home { display:none; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding: 80px 24px 80px; min-height:calc(100vh - var(--nav-h)); }
  #home.active { display:flex; }
  .home-badge { font-family: var(--font-ui); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent-cyan); border:1px solid rgba(0,229,255,.3); padding:6px 16px; border-radius:100px; margin-bottom:28px; background:rgba(0,229,255,.05); }
  .home-title { font-family:var(--font-display); font-size:clamp(3.5rem,9vw,7rem); line-height:.92; letter-spacing:.02em; color:var(--text-primary); margin-bottom:24px; }
  .home-title .gold { color:var(--accent-gold); text-shadow:var(--glow-gold); }
  .home-title .home-by { font-family:var(--font-body); font-size:clamp(.9rem,2vw,1.3rem); font-weight:300; letter-spacing:.25em; color:var(--text-secondary); text-shadow:none; text-transform:none; display:block; margin-top:6px; }
  .home-subtitle { font-weight:300; font-size:clamp(1rem,2.5vw,1.25rem); color:var(--text-secondary); max-width:540px; margin-bottom:48px; line-height:1.7; }
  .home-ctas { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
  .btn-primary { font-family:var(--font-ui); font-weight:700; font-size:.9rem; letter-spacing:.15em; text-transform:uppercase; padding:14px 32px; border-radius:8px; border:none; background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color:#fff; cursor:pointer; box-shadow:0 4px 24px rgba(58,143,255,.35); transition:transform .2s, box-shadow .2s; }
  .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(58,143,255,.5); }
  .btn-secondary { font-family:var(--font-ui); font-weight:600; font-size:.9rem; letter-spacing:.15em; text-transform:uppercase; padding:13px 28px; border-radius:8px; border:1px solid var(--border-glow); background:transparent; color:var(--accent-blue); cursor:pointer; transition:all .2s; }
  .btn-secondary:hover { background:rgba(58,143,255,.08); border-color:var(--accent-blue); color:var(--text-primary); }
  .home-stats { display:flex; gap:60px; margin-top:80px; border-top:1px solid var(--border-subtle); padding-top:40px; flex-wrap:wrap; justify-content:center; }
  .stat-item { text-align:center; }
  .stat-num { font-family:var(--font-display); font-size:2.8rem; color:var(--accent-gold); letter-spacing:.05em; text-shadow:var(--glow-gold); }
  .stat-num.loading { font-size:1.6rem; letter-spacing:.2em; animation: loadingPulse 1.6s ease-in-out infinite; }
  @keyframes loadingPulse { 0%,100%{opacity:.25} 50%{opacity:.85} }
  .stat-label { font-family:var(--font-ui); font-size:.75rem; letter-spacing:.2em; color:var(--text-secondary); text-transform:uppercase; }

  /* DATABASE */
  #database { padding:0; }
  #database.active { display:flex; flex-direction:column; height:100vh; }

  .db-header { padding: 24px 40px 16px; border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
  .db-header h1 { font-family:var(--font-display); font-size:2.6rem; letter-spacing:.05em; }
  .db-header h1 span { color:var(--accent-blue); }
  .db-header p { color:var(--text-secondary); font-size:.88rem; margin-top:3px; }

  /* LOADER BAR */
  .loader-bar { display:none; align-items:center; gap:14px; padding:10px 40px; border-bottom:1px solid var(--border-subtle); background:rgba(58,143,255,.03); flex-shrink:0; flex-wrap:wrap; }
  .loader-bar label { font-family:var(--font-ui); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); white-space:nowrap; }
  .loader-bar input[type=file] { font-size:.8rem; color:var(--text-secondary); cursor:pointer; }
  .loader-bar input[type=file]::file-selector-button { font-family:var(--font-ui); font-weight:600; font-size:.72rem; letter-spacing:.1em; padding:5px 12px; border-radius:5px; border:1px solid var(--border-glow); background:rgba(58,143,255,.1); color:var(--accent-blue); cursor:pointer; margin-right:10px; transition:background .2s; }
  .loader-bar input[type=file]::file-selector-button:hover { background:rgba(58,143,255,.2); }
  .loaded-tag { font-family:var(--font-ui); font-size:.7rem; letter-spacing:.1em; padding:3px 10px; border-radius:100px; background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.2); color:var(--accent-cyan); }

  /* IMAGE PATH BAR */
  .imgpath-bar { display:flex; align-items:center; gap:10px; padding:8px 40px; border-bottom:1px solid var(--border-subtle); background:rgba(240,192,64,.02); flex-shrink:0; }
  .imgpath-bar label { font-family:var(--font-ui); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-gold); white-space:nowrap; }
  .imgpath-bar input { flex:1; font-size:.8rem; padding:5px 10px; background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:5px; color:var(--text-primary); outline:none; transition:border-color .2s; font-family:var(--font-body); }
  .imgpath-bar input:focus { border-color:var(--accent-gold); }
  .imgpath-bar small { font-size:.7rem; color:var(--text-dim); white-space:nowrap; }

  /* TOOLBAR */
  .db-toolbar { display:flex; gap:8px; align-items:center; padding:12px 40px; border-bottom:1px solid var(--border-subtle); flex-wrap:wrap; flex-shrink:0; }
  .toolbar-row2 { display:contents; } /* desktop: buttons flow inline with rest of toolbar */
  .search-box { flex:0 1 260px; min-width:160px; position:relative; }
  .search-box input { width:100%; padding:8px 12px 8px 38px; background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:8px; color:var(--text-primary); font-family:var(--font-body); font-size:.78rem; outline:none; transition:border-color .2s; }
  .search-box input:focus { border-color:var(--accent-blue); }
  .search-box input::placeholder { color:var(--text-secondary); }
  .search-box svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.4; }
  .filter-btn { font-family:var(--font-ui); font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:6px; border:1px solid var(--border-subtle); background:var(--bg-panel); color:var(--text-secondary); cursor:pointer; transition:all .2s; white-space:nowrap; }
  .filter-btn:hover, .filter-btn.on { border-color:var(--accent-blue); color:var(--accent-blue); background:rgba(58,143,255,.08); }

  /* LAYOUT */
  .db-layout { display:flex; flex:1; overflow:hidden; }

  /* SIDEBAR */
  .db-sidebar { width:205px; flex-shrink:0; border-right:1px solid var(--border-subtle); overflow-y:auto; padding:10px 0; }
  .db-sidebar::-webkit-scrollbar { width:3px; }
  .db-sidebar::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:3px; }
  .sidebar-label { font-family:var(--font-ui); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--text-dim); padding:5px 16px 2px; margin-top:4px; display:flex; align-items:center; justify-content:space-between; }
  .sidebar-sort-btn { background:none; border:none; cursor:pointer; color:var(--text-dim); padding:0 4px; font-size:.75rem; line-height:1; transition:color .18s; flex-shrink:0; }
  .sidebar-sort-btn:hover { color:var(--accent-blue); }
  .year-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:7px 16px; background:none; border:none; cursor:pointer; font-family:var(--font-ui); font-size:.9rem; font-weight:600; letter-spacing:.04em; color:var(--text-secondary); transition:color .18s, background .18s; text-align:left; }
  .year-btn:hover { color:var(--text-primary); background:rgba(58,143,255,.06); }
  .year-btn.active { color:var(--accent-cyan); background:rgba(0,229,255,.06); }
  .year-btn .badge { font-size:.6rem; background:rgba(58,143,255,.15); color:var(--text-secondary); padding:2px 6px; border-radius:100px; }
  .year-collections { display:none; }
  .year-collections.open { display:block; }
  .coll-btn { display:block; width:calc(100% - 12px); margin-left:12px; padding:5px 8px 5px 16px; background:none; border:none; border-left:2px solid transparent; cursor:pointer; font-size:.78rem; color:var(--text-dim); text-align:left; transition:color .18s, border-color .18s, background .18s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-body); }
  .coll-btn:hover { color:var(--text-secondary); border-left-color:var(--border-glow); }
  .coll-btn.active { color:var(--accent-blue); border-left-color:var(--accent-blue); background:rgba(58,143,255,.05); }

  /* MAIN */
  .db-main { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
  .db-main::-webkit-scrollbar { width:4px; }
  .db-main::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:4px; }

  .breadcrumb { display:flex; align-items:center; gap:8px; padding:10px 22px; font-family:var(--font-ui); font-size:.76rem; letter-spacing:.08em; color:var(--text-dim); border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
  .breadcrumb span { cursor:pointer; transition:color .15s; }
  .breadcrumb span:hover { color:var(--accent-blue); }
  .breadcrumb .sep { color:var(--border-glow); }
  .breadcrumb .current { color:var(--text-primary); cursor:default; }
  .bc-play-btn { margin-left:6px; padding:2px 10px; font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.08em; color:var(--bg-base); background:var(--accent-cyan); border:none; border-radius:20px; cursor:pointer; transition:background .15s, transform .1s; vertical-align:middle; }
  .bc-play-btn:hover { background:var(--accent-blue); transform:scale(1.05); }

  /* COLLECTION GRID — portrait cards */
  .coll-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; padding:20px; }
  .coll-card { background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .22s, border-color .22s, box-shadow .22s; display:flex; flex-direction:column; }
  .coll-card:hover { transform:translateY(-4px); border-color:var(--accent-blue); box-shadow:0 8px 28px rgba(58,143,255,.12); }
  /* Portrait image — aspect ratio of a real Quartett card */
  .coll-card .cimg { width:100%; aspect-ratio:5/7; overflow:hidden; background:var(--bg-card); position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .coll-card .cimg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
  .coll-card .cimg .cimg-fallback { font-size:2.5rem; color:var(--text-dim); }
  .coll-card .icon-body { padding:8px 12px 10px; display:flex; flex-direction:column; gap:3px; }
  .coll-card h3 { font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--text-primary); }
  .coll-card p { font-size:.7rem; color:var(--text-secondary); }
  .coll-card .cnt { font-family:var(--font-ui); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); margin-top:2px; }

  /* CARD GRID — Quartett layout: two super-columns of 4, rows by number */
  .card-grid {
    display: grid;
    /* Cap card columns so images don't balloon on ultra-wide screens */
    grid-template-columns: repeat(4, minmax(130px, 200px)) 32px repeat(4, minmax(130px, 200px));
    gap: 12px;
    padding: 20px;
    animation: fadeUp .3s ease;
  }
  /* The spacer column between the two super-columns */
  .card-grid-divider { grid-column:5; grid-row:1/-1; }

  /* QUARTETT CARD */
  .qcard { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius); overflow:hidden; cursor:pointer; position:relative; transition:transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s, border-color .3s; display:flex; flex-direction:column; }
  .qcard::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 55%); pointer-events:none; border-radius:inherit; }
  .qcard:hover { transform:translateY(-6px) scale(1.03); box-shadow:0 16px 48px rgba(58,143,255,.25), 0 0 0 1px var(--accent-blue); border-color:var(--accent-blue); }

  /* aspect-ratio drives the height — no max-height needed (grid columns are already capped) */
  .qcard-img { width:100%; aspect-ratio:10/6.54; overflow:hidden; background:var(--bg-panel); position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .qcard-img img {
    position: absolute;
    /* Scale up so the full image is larger than the container, then we shift to show only the crop region */
    width:  calc(100% / 0.8787);   /* inverse of visible width fraction */
    height: calc(100% / 0.3495);   /* inverse of visible height fraction */
    object-fit: fill;
    display: none;
    /* Shift: move left by left-crop%, move up by top-crop% of the scaled image */
    left: calc(-6.36%  / 0.8787);
    top:  calc(-12.97% / 0.3495);
    transition: none;
  }
  .qcard-img img.loaded { display:block; }
  .qcard:hover .qcard-img img { transform: scale(1.04); transform-origin: center center; }
  .qcard-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; font-size:2rem; color:var(--text-dim); gap:4px; position:absolute; inset:0; }
  .qcard-placeholder span { font-family:var(--font-ui); font-size:.55rem; letter-spacing:.15em; color:var(--text-dim); }

  /* grade top-left, country top-right */
  .grade-badge { position:absolute; top:7px; left:7px; z-index:2; font-family:var(--font-display); font-size:1rem; color:var(--accent-gold); text-shadow:var(--glow-gold); background:rgba(7,8,15,.8); padding:1px 7px; border-radius:4px; border:1px solid rgba(240,192,64,.25); }
  .country-badge { position:absolute; top:7px; right:7px; z-index:2; font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.1em; padding:2px 7px; border-radius:4px; background:rgba(7,8,15,.8); border:1px solid var(--border-glow); color:var(--accent-cyan); display:none; }

  .qcard-body { padding:9px 10px 10px; flex:1; background:var(--bg-card); display:flex; flex-direction:column; }
  .qcard-body-row { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin-bottom:2px; flex-wrap:wrap; }
  .qcard-cat { font-family:var(--font-ui); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); flex:1 1 0; min-width:0; word-break:break-word; }
  .qcard-grade { font-family:var(--font-display); font-size:.85rem; color:var(--accent-gold); text-shadow:var(--glow-gold); letter-spacing:.02em; flex-shrink:0; margin-left:auto; }
  .qcard-name { font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--text-primary); line-height:1.15; margin-bottom:7px; }
  .qcard-stats { display:none; }
  .srow { display:flex; justify-content:space-between; align-items:center; padding:2px 0; border-bottom:1px solid rgba(90,110,200,.07); font-size:.65rem; }
  .srow:last-child { border:none; }
  .skey { color:var(--text-dim); font-family:var(--font-ui); letter-spacing:.05em; }
  .sval { color:var(--accent-cyan); font-weight:600; font-family:var(--font-ui); }
  .sunit { color:var(--text-dim); font-size:.58rem; margin-left:2px; }

  /* EMPTY STATE */
  .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:300px; color:var(--text-secondary); gap:10px; font-family:var(--font-ui); }
  .empty-state .big { font-size:2.5rem; }
  .empty-state h3 { font-size:1.05rem; letter-spacing:.08em; color:var(--text-primary); }
  .empty-state p { font-size:.8rem; color:var(--text-dim); text-align:center; max-width:260px; }

  /* MODAL */
  .modal-overlay { display:none; position:fixed; inset:0; z-index:2000; background:rgba(7,8,15,.92); backdrop-filter:blur(14px); align-items:center; justify-content:center; padding:20px; }
  .modal-overlay.open { display:flex; animation:fadeIn .22s ease; }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  /* Nav arrows positioned just outside the modal box edges */
  .modal-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(15,18,40,.9); border:1px solid var(--border-glow); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-primary); font-size:1.4rem; transition:background .2s, border-color .2s, opacity .2s; z-index:2100; user-select:none; }
  .modal-nav:hover { background:rgba(58,143,255,.3); border-color:var(--accent-blue); }
  .modal-nav.prev { left:-60px; }
  .modal-nav.next { right:-60px; }
  .modal-nav.dim { opacity:0.25; pointer-events:none; }
  /* Wrapper needed so arrows can be positioned relative to the modal box */
  .modal-wrapper { position:relative; display:flex; align-items:center; max-width:880px; width:100%; }
  .modal-box { background:var(--bg-card); border:1px solid var(--border-glow); border-radius:var(--radius-lg); width:100%; box-shadow:0 32px 80px rgba(0,0,0,.6), var(--glow-blue); overflow:hidden; animation:slideUp .28s cubic-bezier(.2,.8,.3,1); display:flex; align-items:stretch; position:relative; height:520px; }
  @keyframes slideUp { from{transform:translateY(28px) scale(.96)} to{transform:none} }
  /* 3. No letterbox bars — bg matches card image background */
  .modal-img { width:325px; flex-shrink:0; background:#1a1a1a; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .modal-img img { width:100%; height:100%; object-fit:contain; display:none; }
  .modal-img img.loaded { display:block; }
  .modal-img .pholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:3.5rem; color:var(--text-dim); gap:6px; }
  .modal-img .pholder span { font-family:var(--font-ui); font-size:.65rem; letter-spacing:.15em; color:var(--text-dim); }
  .modal-close { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.08); border:1px solid var(--border-subtle); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); font-size:.9rem; transition:background .2s, color .2s; z-index:10; }
  .modal-close:hover { background:rgba(255,255,255,.15); color:var(--text-primary); }
  .modal-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; margin-bottom:16px; }
  .modal-meta-grid .meta-item { display:flex; flex-direction:column; gap:2px; }
  .modal-meta-grid .meta-label { font-family:var(--font-ui); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); }
  .modal-meta-grid .meta-val   { font-family:var(--font-ui); font-size:.95rem; font-weight:700; letter-spacing:.06em; color:var(--text-secondary); text-transform:uppercase; }
  .modal-body { flex:1; padding:28px 32px 28px 44px; overflow-y:auto; }
  .modal-title { font-family:var(--font-display); font-size:2.1rem; letter-spacing:.03em; line-height:1; color:var(--text-primary); margin-bottom:6px; white-space:nowrap; overflow:hidden; }
  .modal-sub { color:var(--text-secondary); font-size:.9rem; margin-bottom:10px; }
  .modal-info-box { color:var(--text-secondary); font-size:.82rem; font-style:italic; margin-bottom:8px; padding:6px 10px; background:rgba(58,143,255,.05); border-left:2px solid var(--accent-blue); border-radius:0 6px 6px 0; line-height:1.4; white-space:nowrap; overflow:hidden; }
  .modal-divider { height:1px; background:var(--border-subtle); margin:16px 0; }
  .modal-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .mstat { background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:8px; padding:5px 12px; height:50px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
  .mstat .key { font-family:var(--font-ui); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:2px; }
  .mstat .val { font-family:var(--font-ui); font-size:1.05rem; font-weight:700; color:var(--accent-cyan); }
  .mstat .unit { font-size:.7rem; color:var(--text-secondary); margin-left:3px; }

  /* OTHER SECTIONS */
  .placeholder-section { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - var(--nav-h)); text-align:center; padding:60px 24px; }
  .placeholder-section h2 { font-family:var(--font-display); font-size:3rem; margin-bottom:12px; }
  .placeholder-section p { color:var(--text-secondary); max-width:380px; }
  .coming-badge { font-family:var(--font-ui); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent-purple); border:1px solid rgba(139,92,246,.3); padding:6px 16px; border-radius:100px; margin-bottom:22px; background:rgba(139,92,246,.05); }

  ::-webkit-scrollbar { width:5px; }
  ::-webkit-scrollbar-track { background:var(--bg-deep); }
  ::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:4px; }

  /* IMAGE LIGHTBOX */
  #imgLightbox {
    display: none; position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,.94); align-items: center; justify-content: center;
    cursor: zoom-out;
  }
  #imgLightbox.open { display: flex; animation: fadeIn .18s ease; }
  #imgLightbox img {
    max-width: 90vw; max-height: 90vh;
    object-fit: contain; border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,.8);
    pointer-events: none;
  }
  /* Desktop: cap at 2× modal-img width (~650px) */
  @media(min-width:681px) {
    #imgLightbox img { max-width: 650px; max-height: 85vh; }
  }
  /* Modal image is clickable */
  .modal-img { cursor: zoom-in; }
  #reportBugBtn {
    position: fixed; bottom: 20px; right: 20px; z-index: 900;
    font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 9px 16px; border-radius: 8px;
    border: 1px solid rgba(139,92,246,.4);
    background: rgba(139,92,246,.12); color: var(--accent-purple);
    cursor: pointer; transition: all .2s, opacity .3s, transform .3s;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(139,92,246,.2);
    opacity: 0; pointer-events: none; transform: translateY(8px);
  }
  #reportBugBtn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  #reportBugBtn:hover { background: rgba(139,92,246,.26); border-color: var(--accent-purple); color: var(--text-primary); box-shadow: 0 6px 28px rgba(139,92,246,.35); }

  .report-overlay {
    display: none; position: fixed; inset: 0; z-index: 3000;
    background: rgba(7,8,15,.85); backdrop-filter: blur(10px);
    align-items: center; justify-content: center;
  }
  .report-overlay.open { display: flex; animation: fadeIn .2s ease; }
  .report-box {
    background: var(--bg-card); border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg); padding: 28px 32px;
    width: 100%; max-width: 420px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), var(--glow-blue);
    animation: slideUp .25s cubic-bezier(.2,.8,.3,1);
  }
  .report-box h3 {
    font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .05em;
    color: var(--text-primary); margin-bottom: 20px;
  }
  .report-step { display: none; }
  .report-step.active { display: block; }
  .report-field { margin-bottom: 14px; }
  .report-field label {
    display: block; font-family: var(--font-ui); font-size: .68rem;
    letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
    margin-bottom: 5px;
  }
  .report-field select, .report-field textarea, .report-field input[type=text] {
    width: 100%; background: var(--bg-panel);
    border: 1px solid var(--border-subtle); border-radius: 7px;
    color: var(--text-primary); font-family: var(--font-body); font-size: .85rem;
    padding: 8px 11px; outline: none; transition: border-color .2s;
    appearance: none; box-sizing: border-box;
  }
  .report-field select:focus, .report-field textarea:focus, .report-field input[type=text]:focus { border-color: var(--accent-blue); }
  .report-field textarea { resize: vertical; min-height: 72px; }
  .report-actions { display: flex; gap: 10px; margin-top: 20px; }
  .report-btn-primary {
    flex: 1; font-family: var(--font-ui); font-weight: 700; font-size: .82rem;
    letter-spacing: .12em; text-transform: uppercase; padding: 10px;
    border-radius: 7px; border: none;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    color: #fff; cursor: pointer;
    box-shadow: 0 4px 16px rgba(139,92,246,.35); transition: opacity .2s;
  }
  .report-btn-primary:hover { opacity: .85; }
  .report-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
  .report-btn-secondary {
    font-family: var(--font-ui); font-weight: 600; font-size: .82rem;
    letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px;
    border-radius: 7px; border: 1px solid var(--border-subtle);
    background: transparent; color: var(--text-secondary); cursor: pointer;
    transition: all .2s;
  }
  .report-btn-secondary:hover { border-color: var(--border-glow); color: var(--text-primary); }
  /* Review panel */
  .report-review {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 4px;
  }
  .report-review-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 5px 0;
    border-bottom: 1px solid rgba(90,110,200,.08); font-size: .8rem;
  }
  .report-review-row:last-child { border-bottom: none; }
  .report-review-row .rr-key {
    font-family: var(--font-ui); font-size: .64rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--text-dim); white-space: nowrap; flex-shrink: 0;
  }
  .report-review-row .rr-val {
    font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
    color: var(--text-secondary); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 65%;
  }
  .report-review-row .rr-val.rr-desc {
    white-space: normal; text-align: right; font-weight: 400; font-size: .78rem; color: var(--text-primary);
  }
  .report-status { font-family: var(--font-ui); font-size: .78rem; margin-top: 10px; text-align: center; min-height: 1.2em; letter-spacing: .05em; }

  /* ── MOBILE ── */
  @media(max-width:680px) {

    /* Home — tighter spacing so stats fit on screen */
    #home { padding: 32px 20px 40px; gap: 0; }
    .home-badge { margin-bottom: 14px; font-size: .65rem; padding: 5px 12px; }
    .home-title { font-size: clamp(2.4rem, 11vw, 3.8rem); margin-bottom: 12px; }
    .home-title .home-by { font-size: .8rem; margin-top: 4px; }
    .home-subtitle { font-size: .88rem; margin-bottom: 24px; }
    .home-ctas { gap: 10px; }
    .btn-primary, .btn-secondary { padding: 10px 20px; font-size: .78rem; }
    .home-stats { gap: 28px; margin-top: 32px; padding-top: 24px; }
    .stat-num { font-size: 2rem; }
    .stat-label { font-size: .65rem; }

    /* Nav — tighter, hide subtitle */
    nav { padding:0 12px; gap:6px; }
    .nav-logo { font-size:1.3rem; }
    .nav-logo span { display:none; }
    .nav-links li a { padding:5px 7px; font-size:.68rem; letter-spacing:.06em; }
    .theme-btn { width:30px; height:30px; margin-left:6px; }

    /* Database section fills viewport cleanly */
    #database.active { height:100dvh; }

    /* db-header — slim */
    .db-header { padding:24px 14px 10px; }
    .db-header h1 { font-size:1.6rem; }
    .db-header p  { font-size:.75rem; }

    /* imgpath-bar — compact */
    .imgpath-bar { padding:6px 14px; }
    .imgpath-bar small { display:none; }

    /* Toolbar — search full-width, filter buttons scroll horizontally */
    .db-toolbar {
      padding:8px 14px; gap:6px; flex-wrap:wrap; overflow-x:visible;
    }
    .db-toolbar::-webkit-scrollbar { display:none; }
    .search-box { min-width:0; flex:1 1 120px; }
    .filter-btn { flex-shrink:0; padding:5px 10px; font-size:.68rem; }
    /* Second row: country + clear buttons fill the full width on mobile */
    .toolbar-row2 {
      display:flex;
      width:100%;
      gap:6px;
    }
    .toolbar-row2 .sort-btn {
      flex:1;
      justify-content:center;
    }

    /* Sidebar — hidden on mobile */
    .db-layout { flex-direction:column; }
    .db-sidebar {
      display:none !important;
    }


    /* Card grid — 4 columns, no divider gap column */
    .card-grid {
      grid-template-columns: repeat(4, 1fr) !important;
      gap:6px; padding:8px;
    }
    /* Hide the blank divider cell on mobile — it would break the 4-col layout */
    .card-grid-divider { display:none !important; }

    /* Smaller card body text */
    .qcard-body { padding:5px 6px 6px; }
    .qcard-name { font-size:.68rem; margin-bottom:3px; }
    .qcard-cat  { font-size:.5rem; }
    .grade-badge { font-size:.72rem; padding:0 4px; top:4px; left:4px; }

    /* Collection grid — 3 cols */
    .coll-grid { grid-template-columns:repeat(3,1fr); gap:8px; padding:10px; }

    /* Breadcrumb slim */
    .breadcrumb { padding:6px 14px; font-size:.68rem; }

    /* Modal — vertical stack */
    .modal-overlay { padding:0; align-items:flex-end; }
    .modal-wrapper { max-width:100%; width:100%; }
    .modal-box {
      flex-direction:column; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
      max-height:92dvh; overflow-y:auto; height:auto;
    }
    .modal-img { width:100%; height:200px; flex-shrink:0; }
    .modal-body { padding:16px 18px 24px; }
    .modal-title { font-size:1.6rem !important; }
    .modal-nav.prev { left:-8px; }
    .modal-nav.next { right:-8px; }
    .modal-nav { width:36px; height:36px; font-size:1.1rem; }
    .modal-stats-grid { grid-template-columns:1fr 1fr; gap:5px; }
    .mstat { height:44px; padding:4px 10px; }

    /* Hide modal prev/next arrows — swipe handles navigation */
    .modal-nav { display:none !important; }

    /* Hide filter buttons in toolbar — too cramped on mobile */
    .filter-btn { display:none !important; }

    .report-box { padding:22px 20px; margin:12px; border-radius:var(--radius); }
  }
  .qcard-sort-stat { font-family:var(--font-ui); font-size:.9rem; font-weight:700; color:var(--accent-cyan); letter-spacing:.02em; margin-top:auto; padding-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:baseline; gap:2px; }
  .qcard-sort-stat strong { font-weight:700; }
  .qcard-sort-stat .sstat-label { display:none; }
  .qcard-sort-stat .sunit { font-size:.68rem; color:var(--text-secondary); margin-left:1px; }
  .search-sort-btns { display:flex; }
  .sort-btn {
    font-family:var(--font-ui); font-size:.72rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    padding:5px 10px; border-radius:6px; cursor:pointer; transition:all .18s;
    border:1px solid var(--border-subtle);
    background:rgba(255,255,255,.04); color:var(--text-dim);
    white-space:nowrap;
  }
  .sort-btn.on {
    border-color:var(--border-glow); background:rgba(58,143,255,.12);
    color:var(--accent-blue);
  }

  /* ── COUNTRY MAP ── */
  #countryMapBtn { background: rgba(0,229,255,.06); border-color: rgba(0,229,255,.25); color: var(--accent-cyan); }
  #countryMapBtn:hover { background: rgba(0,229,255,.14); border-color: var(--accent-cyan); }
  #cmap-svg { touch-action: none; }
  @media(max-width:680px) {
    /* ── end mobile ── */
  }

  /* SEARCH RESULTS GRID */
  .search-results-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:12px; padding:8px 20px 20px; animation:fadeUp .3s ease;
  }
  @media(max-width:680px) {
    .search-results-grid { grid-template-columns:repeat(4,1fr); gap:6px; padding:6px 10px 16px; }
  }
/* ── GAME ─────────────────────────────────────────────────── */

.game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.5rem 2rem;
  min-height: 80vh;
  position: relative;
  user-select: none;
}

/* Score bar */
.game-scorebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 700px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  gap: 0.5rem;
}
.game-score-side {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.game-score-label {
  font-size: 0.75rem;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.game-score-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-accent, #4fc3f7);
  line-height: 1;
}
.game-score-cards {
  font-size: 0.7rem;
  opacity: 0.45;
}
.game-score-mid {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.8;
  padding: 0 0.5rem;
}

/* Arena */
.game-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 700px;
}

.game-card-slot {
  flex: 1;
  max-width: 260px;
  aspect-ratio: 670/1068;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.game-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Card back: decorative pattern */
.game-card-back {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 14px
    ),
    linear-gradient(160deg, #1a2a3a 0%, #0d1520 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-card-back::after {
  content: "?";
  font-size: 4rem;
  opacity: 0.12;
  font-weight: 900;
}

.game-card-front {
  width: 100%;
  height: 100%;
}

.game-card-img-wrap {
  width: 100%;
  height: 100%;
}

/* VS */
.game-vs {
  font-size: 1.1rem;
  font-weight: 800;
  opacity: 0.3;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

/* Invisible clickable attribute zones on player card */
.game-attr-zone {
  box-sizing: border-box;
  border-radius: 3px;
  transition: background 0.15s, border 0.15s;
  border: 2px solid transparent;
  /* invisible by default */
  background: transparent;
}
.game-attr-zone:hover {
  background: rgba(79, 195, 247, 0.18);
  border-color: rgba(79, 195, 247, 0.5);
}
.game-attr-zone--active {
  background: rgba(79, 195, 247, 0.22);
  border-color: rgba(79, 195, 247, 0.75) !important;
}

/* H/L button row */
.game-hl-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.game-chosen-attr {
  font-size: 0.8rem;
  opacity: 0.65;
  margin-right: 0.25rem;
}

/* Buttons */
.game-btn {
  padding: 0.55rem 1.4rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: filter 0.15s, transform 0.1s;
}
.game-btn:hover  { filter: brightness(1.15); transform: translateY(-1px); }
.game-btn:active { transform: translateY(0); }
.game-btn--high {
  background: var(--clr-accent, #4fc3f7);
  color: #000;
}
.game-btn--low {
  background: #e57373;
  color: #fff;
}

/* Result overlay */
.game-result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 50;
  border-radius: 12px;
  animation: gameFadeIn 0.2s ease;
}
@keyframes gameFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.game-result-box {
  text-align: center;
  padding: 2rem 2.5rem;
  background: rgba(20, 28, 40, 0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.game-result-icon {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}
.game-result-win  { color: #66bb6a; }
.game-result-lose { color: #ef5350; }
.game-result-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.game-result-detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  opacity: 0.75;
}
.game-result-field {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  opacity: 0.6;
}

/* Mobile tweaks */
@media (max-width: 540px) {
  .game-arena     { gap: 0.75rem; }
  .game-card-slot { max-width: 44vw; }
  .game-scorebar  { font-size: 0.8rem; }
}

</style>