/* Complete styles.css (your original file with added emoji fallback for flags,
   scrollbar-gutter, light/dark theme variables and back-to-top styles) */

/* Root variables (dark defaults) */
:root{
  --bg-0: #041025;            /* page top background (dark) */
  --bg-1: #071229;            /* page bottom background (dark) */
  --muted: #9fb0c8;
  --text: #e7f1fb;
  --accent-1: #06b6d4;
  --accent-2: #7c3aed;
  --radius: 12px;
  --gap: 12px;
  --max-width: 1100px;
  --card-min-height: 130px;
  --shadow: 0 6px 18px rgba(3,8,20,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  --success: #6ee7b7;

  /* footer sizing + spacing between content and footer */
  --footer-height: clamp(48px, 7vh, 64px);
  --footer-gap: 28px;
  --scrollbar-space: 0px;
}

/* Light theme overrides */
:root[data-theme="light"],
html[data-theme="light"] {
  --bg-0: #f6f8fb;
  --bg-1: #ffffff;
  --muted: #4b5563;
  --text: #071029;
  --accent-1: #0ea5a4;
  --accent-2: #f59e0b;
  --shadow: 0 6px 18px rgba(10,10,12,0.06), inset 0 1px 0 rgba(0,0,0,0.02);
  --success: #059669;
}

/* Base */
/* Reserve gutter for scrollbar to prevent layout shift when page length changes */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll; /* fallback: reserve space for vertical scrollbar */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  font-size: clamp(14px, 1.2vw + 10px, 16px);
  -webkit-text-size-adjust:100%;

  /* ensure content never sits beneath footer */
  padding-bottom: calc(var(--footer-height) + var(--footer-gap) + env(safe-area-inset-bottom, 0px));
}

/* Container */
.container{ max-width: var(--max-width); margin:0 auto; padding:18px; }

/* Main bottom padding so last row stays above footer */
#main { padding-bottom: calc(var(--footer-height) + var(--footer-gap)); }

/* Utility */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* Focus styles for keyboard users */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid rgba(6,182,212,0.14);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(2,6,23,0.7), rgba(2,6,23,0.5));
  backdrop-filter: blur(6px);
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  /* compensate for potential scrollbar-space if needed */
  padding-right: var(--scrollbar-space, 0px);
}
.header-inner{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}

/* Logo */
.logo{
  font-family: Poppins, Inter, sans-serif;
  font-weight:600;
  font-size: clamp(1rem, 1.2vw + 0.2rem, 1.15rem);
  color: var(--text);
  text-decoration:none;
  letter-spacing:0.3px;
  position: relative;
  padding:6px 10px;
  border-radius:10px;
  z-index:2;
  overflow:visible;
}
.logo::before{
  content: '';
  position: absolute;
  left: -20%;
  top: -30%;
  width: 160%;
  height: 160%;
  background: linear-gradient(90deg, rgba(6,182,212,0.12), rgba(124,58,237,0.12));
  filter: blur(24px) saturate(1.0);
  border-radius: 40%;
  transform-origin: center;
  opacity: 0.9;
  z-index: -1;
  animation: blob 7.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes blob{
  0% { transform: translate(0,0) scale(1); }
  25% { transform: translate(6px,-6px) scale(1.03); }
  50% { transform: translate(-6px,6px) scale(0.98); }
  75% { transform: translate(4px,-4px) scale(1.02); }
  100% { transform: translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .logo::before { animation: none; }
}

/* Theme toggle button (in header) */
.theme-toggle{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, transform .12s ease;
  flex: 0 0 auto;
  margin-left: 12px;
}
.theme-toggle:hover{
  background: rgba(255,255,255,0.03);
  color: var(--text);
}
.theme-icon{
  display: block;
  width: 18px;
  height: 18px;
  transition: transform .25s ease;
  transform-origin: center;
}

/* When in light mode, tweak header background to suit light theme */
:root[data-theme="light"] .site-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.95));
  border-bottom-color: rgba(3,8,20,0.06);
}

/* Search */
.search-wrap{ flex:1; max-width:640px; margin-left:12px; min-width:0; }
input[type="search"]{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  outline:none;
  transition: box-shadow .18s ease, transform .12s ease;
  font-size:0.95rem;
}
:root[data-theme="light"] input[type="search"]{
  border-color: rgba(3,8,20,0.06);
  background: rgba(2,6,23,0.02);
  color: var(--text);
}
input[type="search"]::placeholder{ color: var(--muted); }
input[type="search"]:focus{
  box-shadow: 0 6px 20px rgba(6,182,212,0.08);
  transform: translateY(-1px);
  border-color: rgba(6,182,212,0.18);
}

/* Category bar */
.category-bar{
  display:flex;
  gap:10px;
  padding:10px 18px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.category-bar button{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.035);
  color: var(--muted);
  padding:7px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:0.9rem;
  transition: all .12s ease;
  white-space:nowrap;
}
:root[data-theme="light"] .category-bar button{
  border: 1px solid rgba(3,8,20,0.06);
}
.category-bar button:hover{ transform: translateY(-2px); color:var(--text); border-color: rgba(255,255,255,0.06) }
.category-bar button.active{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: #021018;
  box-shadow: 0 6px 22px rgba(124,58,237,0.12);
  border: none;
  font-weight:600;
}

/* Controls */
.controls{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; color:var(--muted); font-size:0.95rem; flex-wrap:wrap; }
.help{ color:var(--muted); font-size:0.9rem; }

/* Grid layout (compact) */
.grid{
  display:grid;
  gap: var(--gap);
  margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 16vw, 200px), 1fr));
}

/* Card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: calc(var(--radius) - 2px);
  padding: 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,0.03);
  min-height: var(--card-min-height);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: var(--shadow);
}
:root[data-theme="light"] .card{
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
  border:1px solid rgba(3,8,20,0.04);
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 36px rgba(2,6,23,0.6), 0 6px 14px rgba(0,0,0,0.35);
}

/* Symbol char in card */
.char{
  font-size: clamp(26px, 4.2vw, 48px);
  height: auto;
  min-height: 48px;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
:root[data-theme="light"] .char {
  text-shadow: none;
}

/* Name text */
.name{
  font-size: 0.95rem;
  color: var(--muted);
  text-align:center;
  font-weight:600;
  width:100%;
  word-wrap:break-word;
  margin-bottom: 4px;
}

/* Actions */
.card .actions{
  display:flex;
  gap:8px;
  margin-top:auto;
  width:100%;
  justify-content:center;
  align-items:center;
  padding-top:6px;
}

/* Buttons */
button { font: inherit; -webkit-tap-highlight-color: transparent; }

/* Preview button — vertical spacing preserved, horizontal spacing reduced */
button.btn.preview{
  /* keep vertical padding same as original so top/bottom distance is unchanged */
  padding: 9px 10px;     /* vertical 9px (unchanged), horizontal reduced from 14px -> 10px */
  border-radius:10px;
  border:0;
  cursor:pointer;
  background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color: #021018;
  font-weight:600;
  font-size:0.92rem;
  box-shadow: 0 8px 20px rgba(6,182,212,0.08);
  min-height:40px;       /* ensure button height matches original */
  line-height:1;
  display:inline-flex;   /* keeps text vertically centered */
  align-items:center;
  justify-content:center;
}
button.btn.preview:hover{ transform: translateY(-3px); }

/* Copy icon button (card) */
button.btn.copy-icon{
  width:40px;
  height:40px;
  padding:6px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.06);
  color: var(--muted);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  flex: 0 0 auto;
}
button.btn.copy-icon:hover{ transform: translateY(-3px); background: rgba(255,255,255,0.06); color: var(--text); }
button.btn.copy-icon svg{ width:18px; height:18px; display:block; }

/* Copied temporary state */
button.btn.copy-icon.copied-temp{
  color: var(--success);
  background: rgba(110,231,183,0.06);
  border-color: rgba(110,231,183,0.12);
}

/* Footer fixed to bottom, full width */
.site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-height);
  z-index: 80;
  background: linear-gradient(180deg, rgba(2,6,23,0.85), rgba(2,6,23,0.92));
  border-top: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-bottom, 0px) + 6px) 12px;
}
:root[data-theme="light"] .site-footer{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.95));
  border-top-color: rgba(3,8,20,0.06);
}

/* Footer inner container */
.footer-inner{
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 6px 18px;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* ---------------------------
   MODAL / PREVIEW (SMALLER)
   --------------------------- */

/* Modal container */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 18px;
}
.modal.show{ display:flex; }

/* Backdrop */
.modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,0.6);
  backdrop-filter: blur(4px);
}

/* Modal content: cap width & height to be smaller on phones/large devices */
.modal-content{
  position: relative;
  background: linear-gradient(180deg,#071229,#071226);
  border-radius: 12px;
  padding: 14px;
  max-width: min(540px, calc(100% - 36px));
  width: 100%;
  max-height: calc(100vh - 72px);
  overflow: hidden;
  border:1px solid rgba(255,255,255,0.03);
  z-index: 61;
  box-shadow: 0 24px 48px rgba(2,6,23,0.6);
  -webkit-overflow-scrolling: touch;
}
:root[data-theme="light"] .modal-content{
  background: linear-gradient(180deg,#ffffff,#fbfbfe);
  border:1px solid rgba(3,8,20,0.04);
  box-shadow: 0 10px 30px rgba(3,8,20,0.06);
}

/* Scrollable inner wrapper for very small/narrow viewports */
.modal-content .scroll-wrap{
  overflow: auto;
  max-height: calc(100vh - 120px);
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}

/* Modal body: default row layout but will stack on small screens */
.modal-body{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
}

/* Preview square: much smaller upper limit and tighter clamping */
.modal-char{
  aspect-ratio: 1 / 1;
  width: clamp(72px, 16vw, 140px);
  min-width: 72px;
  max-width: 160px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: clamp(28px, 7.5vw, 64px);
  line-height: 1;
  padding: 8px;
  flex: 0 0 auto;
}

/* Metadata column */
.modal-meta{
  flex: 1 1 200px;
  min-width: 140px;
  color: var(--text);
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.modal-meta h2{
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}
.modal-name{
  color: var(--muted);
  margin: 0;
  font-size: 0.92rem;
  word-break: break-word;
  white-space: normal;
}

/* Modal actions (copy/download) */
.modal-actions{
  display:flex;
  gap:10px;
  margin-top:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.btn.modal-icon{
  width:44px;
  height:44px;
  padding:8px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  color: var(--muted);
}
.btn.modal-icon:hover{ transform: translateY(-3px); background: rgba(255,255,255,0.04); color: var(--text); }
.btn.modal-icon svg{ width:20px; height:20px; display:block; }
.btn.modal-icon.success{ color: var(--success); background: rgba(110,231,183,0.06); border-color: rgba(110,231,183,0.12); }

/* Close button */
.modal-close{
  position: absolute;
  right: 10px;
  top: 8px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 62;
  padding: 6px;
  border-radius: 8px;
}
.modal-close:focus-visible{ outline: 2px solid rgba(6,182,212,0.18); outline-offset: 3px; }

/* Small screen modal adjustments (stacked layout) */
@media (max-width: 520px) {
  .modal-content{
    max-width: calc(100% - 20px);
    max-height: calc(100vh - 36px);
    padding: 12px;
    border-radius: 10px;
  }

  .modal-body{
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
  }

  .modal-meta{
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .modal-actions{
    justify-content: center;
    width: 100%;
  }

  .modal-char{
    width: clamp(72px, 28vw, 120px);
    font-size: clamp(26px, 10vw, 56px);
    padding: 6px;
  }

  .modal-close{
    right: 8px;
    top: 8px;
  }
}

/* Very short viewports: keep modal visible above footer */
@media (max-height: 640px) {
  .modal-content{ max-height: calc(100vh - (var(--footer-height) + 48px)); }
}

/* Large screens tweaks */
@media (min-width: 1024px){
  .grid{ grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 13.5vw, 200px), 1fr)); }
  .container{ padding:20px 28px; }
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* High contrast tweak */
@media (prefers-contrast: more) {
  .category-bar button { border-color: rgba(255,255,255,0.12); color: var(--text); }
  .card { border-color: rgba(255,255,255,0.08); }
  .site-footer { border-top-color: rgba(255,255,255,0.08); }
}

/* Footer wrapping on very narrow devices */
.footer-inner > * { white-space: nowrap; }
@media (max-width: 420px) {
  .footer-inner > * { white-space: normal; text-align:center; }
}

/* ----------------------
   TOAST (simple styles)
   ---------------------- */
.symbol-toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  bottom: calc(var(--footer-height) + 14px);
  background: rgba(2,6,23,0.9);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  font-size: 0.95rem;
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  z-index: 200;
  pointer-events: none;
}
.symbol-toast.visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.symbol-toast.toast-success{
  border-color: rgba(110,231,183,0.12);
}

/* ----------------------
   BACK-TO-TOP BUTTON
   ---------------------- */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: calc(var(--footer-height) + 18px); /* sits above the footer */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: #021018;
  border: none;
  box-shadow: 0 8px 22px rgba(2,6,23,0.35);
  cursor: pointer;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .12s ease;
  z-index: 120;
}
.back-to-top svg { width: 18px; height: 18px; display:block; }
.back-to-top:hover { transform: translateY(0) scale(1); box-shadow: 0 12px 30px rgba(2,6,23,0.42); }

/* visible state */
.back-to-top.visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* focus styles */
.back-to-top:focus-visible{
  outline: 3px solid rgba(6,182,212,0.16);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Respect light theme */
:root[data-theme="light"] .back-to-top{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: #021018;
  box-shadow: 0 8px 20px rgba(3,8,20,0.08);
}

/* mobile adjust (avoid safe area overlap) */
@media (max-width: 520px){
  .back-to-top {
    right: 14px;
    bottom: calc(var(--footer-height) + 12px);
    width: 42px;
    height: 42px;
  }
}

/* ----------------------
   EMOJI / FLAG FALLBACK
   ---------------------- */
/* Force emoji fallback fonts for flag characters so color emoji render reliably */
.char.flag,
.modal-char.flag {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", "Poppins",
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color", sans-serif;
  font-size: clamp(28px, 6.4vw, 64px);
  letter-spacing: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Also ensure normal symbol chars keep original sizing */
.char { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* container for header small actions (theme toggle + discord icon) */
.header-actions{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-left: 12px;
}

/* Discord link styling */
.discord-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:6px;
  border-radius:10px;
  color: #7289da; /* Discord brand-ish color */
  background: transparent;
  text-decoration: none;
  transition: background .14s ease, transform .12s ease, color .12s ease;
  flex: 0 0 auto;
}
.discord-link:hover{
  background: rgba(114,137,218,0.08);
  color: #5865F2;
  transform: translateY(-2px);
}
.discord-link:active{ transform: translateY(0); }
.discord-link:focus-visible{
  outline: 3px solid rgba(88,101,242,0.18);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Make the inline svg icon inherit color */
.discord-link .social-icon{
  width:18px;
  height:18px;
  display:block;
  color: currentColor;
  fill: currentColor;
}

/* Respect light theme (tweak color to keep contrast) */
:root[data-theme="light"] .discord-link{
  color: #4f5bd5;
}
:root[data-theme="light"] .discord-link:hover{
  background: rgba(79,91,213,0.08);
  color: #3b3fbf;
}

/* Small screens: slightly smaller */
@media (max-width: 420px){
  .discord-link, .theme-toggle {
    width: 36px;
    height: 36px;
  }
  .discord-link .social-icon, .theme-icon { width:16px; height:16px; }
}

/* Hide Preview button when width ≤320px OR height ≤600px */
@media (max-width: 320px), (max-height: 600px) {
  .card .btn.preview,
  button.btn.preview {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* End of styles.css */