/* ============================================================
   base.css — Reset, Body, Global Element Styles
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, [role="button"] { outline: none; }
button:focus-visible { outline: 2px solid rgba(162,155,254,0.5); outline-offset: 2px; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 8%, var(--bg-grad-a) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 85%, var(--bg-grad-b) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, var(--bg-grad-c) 0%, transparent 70%);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

/* ── SCROLLBAR STYLING ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(162,155,254,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(162,155,254,0.4); }

/* ── SELECTION COLOR ────────────────────────────────────────────────────── */
::selection { background: rgba(162,155,254,0.25); color: var(--text); }

/* ── LIGHT THEME OVERRIDES ── */
[data-theme="light"] body {
  color: var(--text);
  background-image:
    radial-gradient(ellipse at 15% 8%, rgba(108,99,232,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 85%, rgba(13,150,105,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(91,83,214,0.03) 0%, transparent 70%);
}

/* ── FLAG EMOJI — always visible at full resolution ────────── */
/* Prevents browser from scaling down emoji flags on small screens */
.flag-icon,
.case-card-thumb span,
.subcat-thumb span,
.inv-thumb span {
  font-variant-emoji: emoji;
  -webkit-font-feature-settings: 'liga' 1;
  text-rendering: optimizeLegibility;
  display: inline-block;
  line-height: 1;
}

/* Ensure emoji render as colorful images, not text symbols */
@font-face {
  font-family: 'EmojiFont';
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'),
       local('Noto Color Emoji'), local('Android Emoji');
}

/* Card thumb containers — consistent sizing */
.case-card-thumb {
  container-type: inline-size;
}

/* Light theme card surface override */
[data-theme="light"] .case-card-v2 {
  background: #ffffff;
  border-color: rgba(0,180,200,0.18);
}
[data-theme="light"] .case-card-v2:hover {
  border-color: rgba(0,137,123,0.45);
  box-shadow: 0 0 0 1px rgba(0,137,123,0.12), 0 8px 28px rgba(0,0,0,0.12);
}

/* Light mode: card body text readable */
[data-theme="light"] .case-card-title { color: #071520; }
[data-theme="light"] .case-card-meta  { color: #4a6a80; }