@charset "UTF-8";
/* ==========================================================================
   Emoji Meaning - Material 3
   --------------------------------------------------------------------------
   Replaces css/style.css (262 KB of Bootstrap plus an unused gaming template)
   with a self-contained Material 3 implementation covering only the classes
   the templates actually use.

   Ground is pure white and body text is black, so AdSense units sit on the
   same background as the content rather than glaring out of a dark page.

   Contents
     1. Tokens          colour roles, type scale, shape, elevation, spacing
     2. Reset
     3. Layout          container and the grid subset the templates use
     4. Utilities       the spacing / flex / text helpers in use
     5. Components      nav, cards, buttons, emoji grid, article, FAQ, footer
     6. Ads
     7. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* --- Colour roles -------------------------------------------------------
     Tonal palette generated from an emoji-yellow seed, which keeps the accent
     tied to the brand while staying legible on white. */
  --md-primary:              #7a5900;
  --md-on-primary:           #ffffff;
  --md-primary-container:    #ffdf99;
  --md-on-primary-container: #261a00;

  --md-secondary:            #6b5d3f;
  --md-secondary-container:  #f5e0bb;
  --md-on-secondary-container:#241a04;

  --md-error:                #ba1a1a;
  --md-on-error:             #ffffff;

  /* Ground and text: white and black, for ad blending. */
  --md-surface:              #ffffff;
  --md-on-surface:           #000000;
  --md-surface-container:    #f7f4ef;
  --md-surface-container-low:#faf8f4;
  --md-surface-container-high:#f0ece5;
  --md-on-surface-variant:   #4c4639;
  --md-outline:              #7e7667;
  --md-outline-variant:      #d0c8b6;
  --md-inverse-surface:      #1c1b18;
  --md-inverse-on-surface:   #f4f0e7;

  --md-scrim:                rgba(0, 0, 0, .32);

  /* --- Type scale --------------------------------------------------------- */
  --md-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "Helvetica Neue", Arial, "Noto Sans", sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

  --md-display-l: 3.5rem;
  --md-headline-l: 2rem;
  --md-headline-m: 1.75rem;
  --md-headline-s: 1.5rem;
  --md-title-l: 1.375rem;
  --md-title-m: 1rem;
  --md-body-l: 1rem;
  --md-body-m: .875rem;
  --md-label-l: .875rem;
  --md-label-s: .6875rem;

  /* --- Shape -------------------------------------------------------------- */
  --md-shape-xs: 4px;
  --md-shape-s:  8px;
  --md-shape-m:  12px;
  --md-shape-l:  16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* --- Elevation ---------------------------------------------------------- */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  /* --- Spacing: 4dp grid --------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --md-motion: 200ms cubic-bezier(.2, 0, 0, 1);

  color-scheme: light;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--md-font);
  font-size: var(--md-body-l);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
img { border-radius: var(--md-shape-s); }

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--md-on-surface);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--md-headline-l); }
h2, .h2 { font-size: var(--md-headline-m); }
h3, .h3 { font-size: var(--md-headline-s); }
h4, .h4 { font-size: var(--md-title-l); }
h5, .h5 { font-size: var(--md-title-m); font-weight: 600; }
h6, .h6 { font-size: var(--md-label-l); font-weight: 600; }

p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
li { margin-bottom: var(--sp-1); }

hr {
  border: 0;
  border-top: 1px solid var(--md-outline-variant);
  margin: var(--sp-4) 0;
}

code {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--md-surface-container);
  padding: 1px 5px;
  border-radius: var(--md-shape-xs);
}

:focus-visible {
  outline: 3px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--md-shape-xs);
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--sp-3) * -1);
}
.row > * {
  padding-inline: var(--sp-3);
  width: 100%;
  min-width: 0;   /* lets flex children shrink instead of overflowing */
}

/* Grid subset. Mobile-first: base col-N applies at every width, the
   breakpoint variants take over further down in section 7. */
.col-4  { width: 33.3333%; }
.col-6  { width: 50%; }

.gy-2 > * { margin-bottom: var(--sp-2); }
.gy-3 > * { margin-bottom: var(--sp-3); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }

.sticky-top { position: sticky; top: var(--sp-4); }

/* ==========================================================================
   4. Utilities
   ========================================================================== */

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.align-items-center { align-items: center; }
.w-100 { width: 100%; }
.m-auto { margin: auto; }
.ms-auto { margin-inline-start: auto; }
.ml-auto { margin-inline-start: auto; }

.mt-1 { margin-top: var(--sp-1); }   .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--sp-2); }   .mb-1 { margin-bottom: var(--sp-1); }
.mt-3 { margin-top: var(--sp-4); }   .mb-2 { margin-bottom: var(--sp-2); }
.mt-4 { margin-top: var(--sp-6); }   .mb-3 { margin-bottom: var(--sp-4); }
.mt-5 { margin-top: var(--sp-10); }  .mb-4 { margin-bottom: var(--sp-6); }

.my-1 { margin-block: var(--sp-1); }
.my-2 { margin-block: var(--sp-2); }
.my-3 { margin-block: var(--sp-4); }
.my-4 { margin-block: var(--sp-6); }
.my-5 { margin-block: var(--sp-10); }

.m-1 { margin: var(--sp-1); }
.m-2 { margin: var(--sp-2); }
.me-2 { margin-inline-end: var(--sp-2); }
.me-4 { margin-inline-end: var(--sp-6); }
.ms-3 { margin-inline-start: var(--sp-4); }
.mx-1 { margin-inline: var(--sp-1); }

.p-2 { padding: var(--sp-2); }
.p-3 { padding: var(--sp-4); }
.pt-2 { padding-top: var(--sp-2); }
.py-2 { padding-block: var(--sp-2); }
.py-3 { padding-block: var(--sp-4); }
.py-4 { padding-block: var(--sp-6); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-capitalize { text-transform: capitalize; }
.text-decoration-none { text-decoration: none; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-sm, .small { font-size: var(--md-body-m); }
.text-secondary { color: var(--md-on-surface-variant); }
.text-white { color: var(--md-on-surface); }   /* page is light; keep contrast */
.fw-light { font-weight: 400; }
.semibold { font-weight: 600; }
.list-unstyled { list-style: none; padding-left: 0; }
.img-fluid { width: 100%; height: auto; }
.rounded { border-radius: var(--md-shape-m); }
.rounded-top { border-radius: var(--md-shape-m) var(--md-shape-m) 0 0; }

.fs-1 { font-size: 2.25rem; line-height: 1.2; }
.fs-3 { font-size: var(--md-headline-s); }
.fs-4 { font-size: var(--md-title-l); }

.reset-anchor { color: var(--md-on-surface-variant); }
.reset-anchor:hover { color: var(--md-primary); }

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- Top app bar --------------------------------------------------------- */
.header {
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  position: sticky;
  top: 0;
  z-index: 50;
}
.navbar { padding-block: var(--sp-2); }
.navbar > .container { display: flex; align-items: center; gap: var(--sp-3); }
.navbar-brand { display: inline-flex; align-items: center; padding: 0; }
.navbar-brand img { border-radius: 0; }
.navbar-nav { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-item { margin: 0; }

.nav-link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--md-on-surface-variant);
  font-size: var(--md-label-l);
  font-weight: 500;
  border-radius: var(--md-shape-full);
  transition: background var(--md-motion), color var(--md-motion);
}
.nav-link:hover {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  text-decoration: none;
}
.nav-link .icon { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* Icon button */
.nav_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--md-on-surface-variant);
  border-radius: var(--md-shape-full);
  cursor: pointer;
  transition: background var(--md-motion);
}
.nav_btn:hover { background: var(--md-surface-container); }
.nav_btn svg { width: 24px; height: 24px; }

/* Collapsible nav (no Bootstrap JS) */
.navbar-collapse.collapse:not(.show) { display: none; }
.navbar-collapse { flex-basis: 100%; }

/* --- Search -------------------------------------------------------------- */
/* Centred, capped at 1000px so it stays a focal point on wide screens
   without stretching to the full 1200px container. */
.search_box {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  margin-block: var(--sp-5);
}
.search_box form { width: 100%; }
.search_box form { display: flex; }
.formcontrol {
  flex: 1;
  min-width: 0;
  padding: var(--sp-4);
  font-size: var(--md-body-l);
  font-family: inherit;
  color: var(--md-on-surface);
  background: var(--md-surface-container);
  border: 1px solid transparent;
  border-radius: var(--md-shape-full) 0 0 var(--md-shape-full);
  padding-inline-start: var(--sp-6);
}
.formcontrol::placeholder { color: var(--md-on-surface-variant); }
.formcontrol:focus {
  outline: none;
  border-color: var(--md-primary);
  background: var(--md-surface);
}
.btn_search {
  padding-inline: var(--sp-6);
  border: 0;
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  border-radius: 0 var(--md-shape-full) var(--md-shape-full) 0;
  cursor: pointer;
}
.btn_search:hover { background: var(--md-surface-container-high); }

/* --- Buttons ------------------------------------------------------------- */
.btn, .button, .cpbtn, .btn_type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: var(--sp-2) var(--sp-6);
  font-family: inherit;
  font-size: var(--md-label-l);
  font-weight: 500;
  line-height: 1.2;
  border: 0;
  border-radius: var(--md-shape-full);
  cursor: pointer;
  transition: background var(--md-motion), box-shadow var(--md-motion);
}
.btn-dark, .button {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.btn-dark:hover, .button:hover {
  background: var(--md-primary);
  box-shadow: var(--md-elev-1);
  text-decoration: none;
  color: var(--md-on-primary);
}
.btn-warning { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.btn-sm { min-height: 32px; padding: var(--sp-1) var(--sp-4); font-size: var(--md-label-s); }
.btn-lg { min-height: 48px; padding: var(--sp-3) var(--sp-8); font-size: var(--md-body-l); }

/* Tonal buttons: the grid/list toggle and variant chips */
.btn_type, .cpbtn {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  margin-inline-end: var(--sp-2);
  margin-block: var(--sp-1);
}
.btn_type:hover, .cpbtn:hover { box-shadow: var(--md-elev-1); }

/* --- Cards --------------------------------------------------------------- */
.block_dark, .content_box, .blog_home_list, .post_list, .cat_list {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
  color: var(--md-on-surface);
}
.block_dark { padding: var(--sp-4); }
.block_dark_inner {
  background: var(--md-surface-container);
  border-radius: var(--md-shape-m);
  padding: var(--sp-2);
}
.content_box { padding: var(--sp-6); }

.bg_dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background: var(--md-surface-container);
  border-radius: var(--md-shape-m);
  text-decoration: none;
  transition: background var(--md-motion), transform var(--md-motion);
}
.bg_dark:hover { background: var(--md-primary-container); transform: translateY(-2px); }

.bb1 {
  border-bottom: 1px solid var(--md-outline-variant);
  padding-bottom: var(--sp-2);
}

/* Category list item */
.cat_list {
  display: block;
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  color: var(--md-on-surface);
  transition: background var(--md-motion), border-color var(--md-motion);
}
.cat_list:hover {
  background: var(--md-surface-container);
  border-color: var(--md-primary);
  text-decoration: none;
}

/* Blog cards */
.post_list {
  display: block;
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  color: var(--md-on-surface);
}
.post_list:hover { background: var(--md-surface-container); text-decoration: none; }
.post_list img { object-fit: cover; }

.blog_home_list { overflow: hidden; height: 100%; }
.blog_home_list a { color: var(--md-on-surface); }
.blog_home_list a:hover { text-decoration: none; }
.blog_home_list .image-wrapper { aspect-ratio: 16 / 9; overflow: hidden; }
.blog_home_list .image-wrapper img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
.blog_home_list_title {
  padding: var(--sp-3);
  font-size: var(--md-body-m);
  font-weight: 500;
}
.blog_list { margin-bottom: var(--sp-6); }

/* --- The emoji hero ------------------------------------------------------ */
.emoji_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--md-primary-container);
  border-radius: var(--md-shape-xl);
  text-align: center;
}
.emoji_box #emoji {
  font-size: clamp(4rem, 18vw, 6rem);
  line-height: 1.1;
}
#copyButton { min-width: 120px; }

/* --- Emoji grid / list --------------------------------------------------- */
.emoji_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.emoji_grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-1);
  background: var(--md-surface-container-low);
  border: 1px solid transparent;
  border-radius: var(--md-shape-m);
  color: var(--md-on-surface);
  text-align: center;
  transition: background var(--md-motion), border-color var(--md-motion), transform var(--md-motion);
}
.emoji_grid a:hover {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  text-decoration: none;
  transform: translateY(-2px);
}
.emoji_grid #title, .emoji_grid span:last-child {
  font-size: var(--md-label-s);
  line-height: 1.3;
  color: var(--md-on-surface-variant);
  overflow-wrap: anywhere;
}

.emoji_list { display: block; margin-bottom: var(--sp-6); }
.emoji_list a {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
}
.emoji_list a:hover { background: var(--md-surface-container); text-decoration: none; }
.emoji_list #title, .emoji_list span:last-child { font-size: var(--md-body-m); }

/* --- Written article ----------------------------------------------------- */
.lead-summary {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--md-on-surface-variant);
  margin-bottom: var(--sp-6);
}
.emoji-article { max-width: 68ch; }
.emoji-section { margin-bottom: var(--sp-8); }
.emoji-section h2 {
  font-size: var(--md-headline-s);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--md-outline-variant);
}
.emoji-section ul { padding-left: var(--sp-5); }
.emoji-section li { margin-bottom: var(--sp-2); }
.emoji-section strong { font-weight: 600; }

/* --- FAQ ----------------------------------------------------------------- */
.emoji-faq { margin-bottom: var(--sp-8); }
.emoji-faq h2 { font-size: var(--md-headline-s); margin-bottom: var(--sp-4); }
.faq-item {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-m);
  margin-bottom: var(--sp-2);
  background: var(--md-surface);
  overflow: hidden;
}
.faq-item summary {
  padding: var(--sp-4);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: flex-start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--md-on-surface-variant);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { background: var(--md-surface-container); }
.faq-item p {
  padding: 0 var(--sp-4) var(--sp-4);
  margin: 0;
  color: var(--md-on-surface-variant);
}

/* Legacy "Read More" box, for pages not yet rewritten */
.description_box { position: relative; max-height: 220px; overflow: hidden; }
.description_box.active { max-height: none; }
.description_box .button { margin-top: var(--sp-3); }

/* Platform image gallery, for pages not yet rewritten */
.item { display: none; }
.item.visible { display: block; }

/* --- Footer -------------------------------------------------------------- */
footer {
  margin-top: var(--sp-12);
  background: var(--md-surface-container);
  border-top: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface-variant);
}
footer .text-white { color: var(--md-on-surface-variant); }
footer a { color: var(--md-on-surface-variant); }
footer a:hover { color: var(--md-primary); }
footer .h6 { color: var(--md-on-surface); }

.social_links { margin-top: var(--sp-4); }
.social { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.social_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-shape-full);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  transition: background var(--md-motion), color var(--md-motion);
}
.social_link:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }

.copyrights {
  border-top: 1px solid var(--md-outline-variant);
  font-size: var(--md-body-m);
}
.copyrights .text-white { color: var(--md-on-surface-variant); }

.updateRow { line-height: 1.7; }
.updateRow img { border-radius: var(--md-shape-m); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--md-outline-variant);
  text-align: left;
}

/* ==========================================================================
   6. Ads
   --------------------------------------------------------------------------
   No fixed heights. An unfilled slot should collapse rather than leave a hole,
   which is what pushed the h1 below the fold on mobile before.
   ========================================================================== */

.ad-unit { margin-block: var(--sp-6); text-align: center; overflow: hidden; }
.ad-unit ins { display: block; }
.ad-placeholder:empty { display: none; }
.ad-unit--header { margin-top: var(--sp-4); }

/* ==========================================================================
   7. Responsive
   --------------------------------------------------------------------------
   Mobile-first: everything above is the small-screen layout, these widen it.
   ========================================================================== */

@media (min-width: 576px) {
  .col-sm-1 { width: 8.3333%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.3333%; }
  .col-sm-5 { width: 41.6667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.3333%; }
  .col-sm-8 { width: 66.6667%; }
  .text-lg-start { text-align: left; }
}

@media (min-width: 768px) {
  .col-md-4 { width: 33.3333%; }
  .col-md-5 { width: 41.6667%; }
  .col-md-6 { width: 50%; }
  .col-md-8 { width: 66.6667%; }
  .mt-md-0 { margin-top: 0; }
  .pt-md-0 { padding-top: 0; }
  .float-md-end { float: inline-end; }
  .text-md-end { text-align: right; }
  .p-lg-5 { padding: var(--sp-10); }
}

@media (min-width: 992px) {
  .col-lg-4 { width: 33.3333%; }
  .col-lg-6 { width: 50%; }
  .col-lg-8 { width: 66.6667%; }
  .order-1 { order: 1; }
  .order-lg-0 { order: 0; }

  /* Nav is always visible on desktop; the toggle is mobile-only. */
  .navbar-expand-lg .navbar-collapse.collapse:not(.show) { display: flex !important; }
  .navbar-collapse { flex-basis: auto; }
  .hide_on_pc { display: none !important; }
}

@media (max-width: 991.98px) {
  .navbar > .container { flex-wrap: wrap; }

  /* Keep the logo and the icon buttons on one row; the menu drops below.
     The brand carries .ml-auto for the desktop layout, which would otherwise
     centre it and push the buttons onto a second line here. */
  .navbar-brand.navbar-nav {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
  .navbar-brand img { max-height: 34px; width: auto; }

  .navbar-collapse { order: 3; }
  .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%;
    padding-block: var(--sp-2);
  }
  .nav-link { padding: var(--sp-3) var(--sp-4); }
  .navbar-collapse .nav-item { border-bottom: 1px solid var(--md-outline-variant); }
  .navbar-collapse .nav-item:last-child { border-bottom: 0; }
}

@media (max-width: 575.98px) {
  :root { --md-headline-l: 1.625rem; --md-headline-m: 1.375rem; --md-headline-s: 1.1875rem; }
  .container { padding-inline: var(--sp-3); }
  .content_box { padding: var(--sp-4); }
  .emoji_grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .emoji_box { padding: var(--sp-4); border-radius: var(--md-shape-l); }
  .fs-1 { font-size: 1.875rem; }
  .row { margin-inline: calc(var(--sp-2) * -1); }
  .row > * { padding-inline: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .header, footer, .ad-unit, .nav_btn, .search_box { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   8. Games and tools
   ========================================================================== */

.crumbs {
  font-size: var(--md-body-m);
  color: var(--md-on-surface-variant);
  padding-block: var(--sp-3);
}
.crumbs a { color: var(--md-on-surface-variant); }
.crumbs a:hover { color: var(--md-primary); }
.crumbs span { margin-inline: var(--sp-1); }

/* --- Shell --------------------------------------------------------------- */
.game {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.game__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--md-body-m);
  color: var(--md-on-surface-variant);
  margin-bottom: var(--sp-2);
}
.game__stat b { color: var(--md-on-surface); font-variant-numeric: tabular-nums; }

.game__progress {
  height: 4px;
  background: var(--md-surface-container-high);
  border-radius: var(--md-shape-full);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.game__progress-fill {
  height: 100%;
  width: 0;
  background: var(--md-primary);
  border-radius: var(--md-shape-full);
  transition: width var(--md-motion);
}

.game__stage { text-align: center; }
.game__stage--hidden { display: none; }

.game__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.game__controls .btn_type { margin: 0; }
.btn_type.is-active {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

/* --- Quiz ---------------------------------------------------------------- */
.quiz__emoji, .guess__emoji {
  font-size: clamp(3.5rem, 16vw, 5rem);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.quiz__prompt {
  font-size: var(--md-title-m);
  color: var(--md-on-surface-variant);
  margin-bottom: var(--sp-4);
}
.quiz__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.quiz__option {
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit;
  font-size: var(--md-body-m);
  font-weight: 500;
  text-align: center;
  background: var(--md-surface);
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-m);
  cursor: pointer;
  transition: background var(--md-motion), border-color var(--md-motion);
}
.quiz__option:hover:not(:disabled) {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
}
.quiz__option:disabled { cursor: default; opacity: .85; }
.quiz__option.is-correct {
  background: #d7f2de;
  border-color: #1d7a4d;
  color: #0d3f26;
  opacity: 1;
}
.quiz__option.is-wrong {
  background: #fbe0de;
  border-color: var(--md-error);
  color: #5f1412;
  opacity: 1;
}

.quiz__feedback {
  min-height: 1.6em;
  margin: var(--sp-3) 0 0;
  font-size: var(--md-body-m);
  color: var(--md-on-surface-variant);
}
.quiz__feedback.is-correct { color: #1d7a4d; font-weight: 500; }
.quiz__feedback.is-wrong { color: var(--md-error); }

/* --- Guess and puzzle ---------------------------------------------------- */
.guess__category {
  display: inline-block;
  font-size: var(--md-label-s);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--md-shape-full);
}
.puzzle__meta {
  color: var(--md-on-surface-variant);
  font-size: var(--md-body-m);
  margin-bottom: var(--sp-3);
}
.puzzle__meta b { color: var(--md-on-surface); }

.guess__label {
  display: block;
  font-size: var(--md-body-m);
  font-weight: 500;
  text-align: left;
  margin-bottom: var(--sp-2);
}
.guess__input {
  border-radius: var(--md-shape-m);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  padding-inline-start: var(--sp-4);
}
.guess__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-3);
}
.guess__actions .btn_type { margin: 0; }

.puzzle__clues {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.puzzle__clues li {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-m);
  padding: var(--sp-3);
  font-size: var(--md-body-l);
  margin: 0;
}

/* --- Match --------------------------------------------------------------- */
.match__board {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--sp-3);
}
.match__board--12 { grid-template-columns: repeat(6, 1fr); }

.match__card {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.25rem, 6vw, 2rem);
  background: var(--md-primary-container);
  border: 1px solid transparent;
  border-radius: var(--md-shape-m);
  cursor: pointer;
  padding: 0;
  transition: background var(--md-motion), transform var(--md-motion);
}
.match__card:hover:not(.is-done) { transform: translateY(-2px); }
.match__face { opacity: 0; transition: opacity 120ms linear; }
.match__card.is-open .match__face,
.match__card.is-done .match__face { opacity: 1; }
.match__card.is-open { background: var(--md-surface); border-color: var(--md-primary); }
.match__card.is-done {
  background: #d7f2de;
  border-color: #1d7a4d;
  cursor: default;
}

/* --- Translator ---------------------------------------------------------- */
.translator__box {
  width: 100%;
  min-height: 110px;
  padding: var(--sp-4);
  font-family: inherit;
  font-size: var(--md-body-l);
  line-height: 1.6;
  color: var(--md-on-surface);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-m);
  resize: vertical;
}
.translator__box--out {
  background: var(--md-surface-container);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: none;
}
.translator__meta {
  font-size: var(--md-body-m);
  color: var(--md-on-surface-variant);
  margin-block: var(--sp-2);
}

/* --- Game cards ---------------------------------------------------------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.game-grid--large { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
  color: var(--md-on-surface);
  transition: background var(--md-motion), border-color var(--md-motion), transform var(--md-motion);
}
.game-card:hover {
  background: var(--md-surface-container-low);
  border-color: var(--md-primary);
  text-decoration: none;
  transform: translateY(-2px);
}
.game-card__icon { font-size: 2rem; line-height: 1; }
.game-card__title { font-weight: 600; }
.game-card__blurb { font-size: var(--md-body-m); color: var(--md-on-surface-variant); }
.game-card__tag {
  position: absolute;
  top: var(--sp-3);
  inset-inline-end: var(--sp-3);
  font-size: var(--md-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--md-on-surface-variant);
}

@media (max-width: 575.98px) {
  .game { padding: var(--sp-3); }
  .quiz__options { grid-template-columns: 1fr; }
  .match__board--12 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   9. New emoji releases
   ========================================================================== */

.version-table { width: 100%; border-collapse: collapse; font-size: var(--md-body-m); }
.version-table th,
.version-table td {
  padding: var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
}
.version-table thead th {
  font-size: var(--md-label-s);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
}
.version-table td.num { font-variant-numeric: tabular-nums; }
.version-table tbody tr:last-child td { border-bottom: 0; }

.release { margin-block: var(--sp-8); scroll-margin-top: 80px; }
.release h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--md-outline-variant);
}
.release__count {
  font-size: var(--md-label-s);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--md-shape-full);
}
.release__meta { color: var(--md-on-surface-variant); font-size: var(--md-body-m); }
.release__meta strong { color: var(--md-on-surface); }

.release__list {
  list-style: none;
  margin: var(--sp-4) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2);
}
.release__item { margin: 0; }

.release__link {
  display: flex;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-3);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-m);
  color: var(--md-on-surface);
  transition: background var(--md-motion), border-color var(--md-motion), transform var(--md-motion);
}
.release__link:hover {
  background: var(--md-surface-container-low);
  border-color: var(--md-primary);
  text-decoration: none;
  transform: translateY(-2px);
}

.release__emoji {
  flex: 0 0 auto;
  font-size: 2rem;
  line-height: 1.2;
}
.release__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.release__name { font-weight: 600; }
.release__desc {
  font-size: var(--md-body-m);
  color: var(--md-on-surface-variant);
  overflow-wrap: anywhere;
}
.release__code {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--md-label-s);
  color: var(--md-outline);
  letter-spacing: .02em;
}

@media (max-width: 575.98px) {
  .release__list { grid-template-columns: 1fr; }
  .version-table th, .version-table td { padding: var(--sp-2); }
}

/* ==========================================================================
   10. Refined tokens
   --------------------------------------------------------------------------
   Overrides the section 1 values. Larger type, a warmer neutral ramp, softer
   shadows and a secondary accent, so the page reads less flat without losing
   the white ground the ads need.
   ========================================================================== */

:root {
  --md-primary:              #7a4b00;
  --md-primary-container:    #ffe1ad;
  --md-on-primary-container: #2a1800;

  /* Secondary accent, used sparingly for "new" and highlight states. */
  --md-accent:               #b3261e;
  --md-accent-container:     #ffe4e0;

  /* Neutrals carry a slight warm bias so white surfaces sit on something,
     rather than the page being one flat sheet. */
  --md-surface:              #ffffff;
  --md-on-surface:           #14100b;
  --md-surface-container-low:#fdfbf7;
  --md-surface-container:    #f7f3ec;
  --md-surface-container-high:#efe9df;
  --md-on-surface-variant:   #57503f;
  --md-outline-variant:      #e4ddcf;

  --md-headline-l: 2.5rem;
  --md-headline-m: 1.875rem;
  --md-headline-s: 1.5rem;

  /* Softer, wider shadows read as depth rather than as a hard edge. */
  --md-elev-1: 0 1px 2px rgba(20,16,11,.05), 0 1px 3px rgba(20,16,11,.06);
  --md-elev-2: 0 2px 4px rgba(20,16,11,.05), 0 8px 20px -8px rgba(20,16,11,.14);
  --md-elev-3: 0 4px 8px rgba(20,16,11,.05), 0 16px 32px -12px rgba(20,16,11,.18);
}

body { line-height: 1.65; }

h1, h2, h3 { letter-spacing: -.015em; }

/* ==========================================================================
   11. Hero
   ========================================================================== */

.hero {
  background:
    radial-gradient(900px 340px at 50% -140px, var(--md-primary-container) 0%, transparent 70%),
    var(--md-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  padding-block: clamp(var(--sp-8), 7vw, 72px) var(--sp-10);
  text-align: center;
}

.hero__title {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}
.hero__sub {
  max-width: 60ch;
  margin: 0 auto var(--sp-6);
  font-size: clamp(1rem, 2vw, 1.1875rem);
  color: var(--md-on-surface-variant);
}

.hero__search {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
  max-width: 1200px;   /* as requested */
  margin: 0 auto;
}
.hero__input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-4) var(--sp-6);
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--md-on-surface);
  background: var(--md-surface);
  border: 1.5px solid var(--md-outline-variant);
  border-radius: var(--md-shape-full);
  box-shadow: var(--md-elev-1);
  transition: border-color var(--md-motion), box-shadow var(--md-motion);
}
.hero__input::placeholder { color: var(--md-on-surface-variant); opacity: .75; }
.hero__input:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: var(--md-elev-2);
}
.hero__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  font-family: inherit;
  font-size: var(--md-label-l);
  font-weight: 600;
  color: var(--md-on-primary);
  background: var(--md-primary);
  border: 0;
  border-radius: var(--md-shape-full);
  cursor: pointer;
  transition: box-shadow var(--md-motion), transform var(--md-motion);
}
.hero__submit:hover { box-shadow: var(--md-elev-2); transform: translateY(-1px); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-6);
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  font-size: var(--md-body-m);
  color: var(--md-on-surface-variant);
}
.hero__stats li { margin: 0; }
.hero__stats b { color: var(--md-on-surface); font-weight: 600; }

/* ==========================================================================
   12. Home blocks
   ========================================================================== */

.home-block { margin-block: clamp(var(--sp-8), 6vw, 56px); }
.home-block__head { margin-bottom: var(--sp-5); }
.home-block__head h2 { margin-bottom: var(--sp-1); }
.home-block__head p { color: var(--md-on-surface-variant); margin: 0; }
.home-block__more { margin-top: var(--sp-4); font-weight: 500; }

/* --- Tap-to-copy strip --------------------------------------------------- */
.copy-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--sp-2);
}
.copy-chip {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-m);
  cursor: pointer;
  padding: 0;
  transition: background var(--md-motion), transform var(--md-motion), border-color var(--md-motion);
}
.copy-chip:hover {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  transform: translateY(-3px);
}
.copy-chip.is-copied {
  background: #d7f2de;
  border-color: #1d7a4d;
  transform: scale(.94);
}

/* --- Category cards ------------------------------------------------------ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.cat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon meta" "preview preview";
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-4);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
  color: var(--md-on-surface);
  transition: border-color var(--md-motion), box-shadow var(--md-motion), transform var(--md-motion);
}
.cat-card:hover {
  border-color: var(--md-primary);
  box-shadow: var(--md-elev-2);
  transform: translateY(-3px);
  text-decoration: none;
}
.cat-card__icon { grid-area: icon; font-size: 2rem; line-height: 1; }
.cat-card__meta { grid-area: meta; display: flex; flex-direction: column; min-width: 0; }
.cat-card__name { font-weight: 600; }
.cat-card__count { font-size: var(--md-body-m); color: var(--md-on-surface-variant); }
.cat-card__preview {
  grid-area: preview;
  margin-top: var(--sp-2);
  font-size: 1.125rem;
  letter-spacing: .12em;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
}

/* --- New emoji cards ----------------------------------------------------- */
.new-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.new-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
  color: var(--md-on-surface);
  transition: border-color var(--md-motion), box-shadow var(--md-motion), transform var(--md-motion);
}
.new-card:hover {
  border-color: var(--md-primary);
  box-shadow: var(--md-elev-2);
  transform: translateY(-3px);
  text-decoration: none;
}
.new-card__emoji { font-size: 2.25rem; line-height: 1; }
.new-card__name { font-size: var(--md-body-m); font-weight: 500; }

/* --- Question list ------------------------------------------------------- */
.ask-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2);
}
.ask-list li { margin: 0; }
.ask-list a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-m);
  color: var(--md-on-surface);
  font-weight: 500;
  transition: background var(--md-motion), border-color var(--md-motion);
}
.ask-list a::after { content: " →"; color: var(--md-on-surface-variant); }
.ask-list a:hover {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  text-decoration: none;
}

/* --- Blog cards ---------------------------------------------------------- */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
  overflow: hidden;
  color: var(--md-on-surface);
  transition: border-color var(--md-motion), box-shadow var(--md-motion), transform var(--md-motion);
}
.blog-card:hover {
  border-color: var(--md-primary);
  box-shadow: var(--md-elev-2);
  transform: translateY(-3px);
  text-decoration: none;
}
.blog-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--md-surface-container); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.blog-card__title { padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: var(--md-body-m); }

/* ==========================================================================
   13. Toast
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  transform: translate(-50%, 16px);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--md-body-m);
  font-weight: 500;
  color: var(--md-inverse-on-surface);
  background: var(--md-inverse-surface);
  border-radius: var(--md-shape-full);
  box-shadow: var(--md-elev-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-motion), transform var(--md-motion);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   14. Component polish
   ========================================================================== */

/* Cards across the site get the same lift, so the language is consistent. */
.emoji_grid a:hover,
.game-card:hover,
.release__link:hover { box-shadow: var(--md-elev-2); }

.emoji_box {
  background:
    radial-gradient(120% 120% at 50% 0%, var(--md-surface) 0%, var(--md-primary-container) 100%);
  box-shadow: var(--md-elev-1);
}

.header { box-shadow: 0 1px 0 var(--md-outline-variant); border-bottom: 0; }

.faq-item { transition: border-color var(--md-motion); }
.faq-item[open] { border-color: var(--md-primary); }

.lead-summary { font-size: 1.125rem; }

@media (max-width: 767.98px) {
  .hero { padding-block: var(--sp-6) var(--sp-8); }
  .hero__search { flex-direction: column; }
  .hero__submit { justify-content: center; }
  .copy-strip { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  .copy-chip { font-size: 1.5rem; }
  .cat-grid, .new-grid, .ask-list { grid-template-columns: 1fr 1fr; }
  .ask-list { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .cat-grid, .new-grid { grid-template-columns: 1fr; }
}

/* The hero search must measure a true 1200px, so its container is widened by
   exactly the horizontal padding the default container applies. */
.hero > .container { max-width: calc(1200px + var(--sp-4) * 2); }

/* Collapse ad slots AdSense could not fill.
   Google sets data-ad-status="unfilled" on the <ins> when no ad is returned;
   without this the slot still reserves its height and leaves a blank hole in
   the page. Hiding an *unfilled* unit is the documented behaviour - filled
   units are never touched. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-unit:has(ins[data-ad-status="unfilled"]) { margin-block: 0; }

/* ==========================================================================
   15. Site-wide search, similar emoji, hover previews
   ========================================================================== */

/* The header search now uses the hero component, so it needs the same width
   treatment: a true 1200px, centred, on every page. */
.search_box {
  max-width: none;
  margin-inline: 0;
  margin-block: var(--sp-5);
}
.search_box .hero__search { max-width: 1200px; margin-inline: auto; }

/* --- Similar emoji ------------------------------------------------------- */
.similar { margin-top: var(--sp-8); }
.similar__title {
  font-size: var(--md-headline-s);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--md-outline-variant);
}
.similar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp-2);
}
.similar__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-m);
  color: var(--md-on-surface);
  transition: border-color var(--md-motion), box-shadow var(--md-motion), transform var(--md-motion);
}
.similar__card:hover {
  border-color: var(--md-primary);
  box-shadow: var(--md-elev-2);
  transform: translateY(-3px);
  text-decoration: none;
}
.similar__emoji { font-size: 2rem; line-height: 1; }
.similar__name {
  font-size: var(--md-label-s);
  line-height: 1.35;
  color: var(--md-on-surface-variant);
  overflow-wrap: anywhere;
}
.similar__more { margin-top: var(--sp-4); font-weight: 500; }

/* --- Hover preview ------------------------------------------------------- */
.copy-chip { position: relative; }

.emoji-pop {
  position: fixed;
  z-index: 300;
  width: min(320px, calc(100vw - 32px));
  padding: var(--sp-4);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
  box-shadow: var(--md-elev-3);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.emoji-pop.is-visible { opacity: 1; transform: translateY(0); }
.emoji-pop__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.emoji-pop__emoji { font-size: 2.5rem; line-height: 1; }
.emoji-pop__name { font-weight: 600; font-size: 1.0625rem; }
.emoji-pop__meta { font-size: var(--md-label-s); color: var(--md-on-surface-variant); }
.emoji-pop__desc {
  margin: 0;
  font-size: var(--md-body-m);
  line-height: 1.55;
  color: var(--md-on-surface-variant);
}
.emoji-pop__hint {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--md-label-s);
  color: var(--md-outline);
}

/* Touch devices have no hover; the tap-to-copy behaviour is the interaction. */
@media (hover: none) {
  .emoji-pop { display: none; }
}

/* The site-wide search sits in its own wrapper rather than .container, so it
   can measure a true 1200px like the hero search instead of losing 32px to
   container padding. */
.search-wrap {
  width: 100%;
  padding-inline: var(--sp-4);
  margin-inline: auto;
  max-width: calc(1200px + var(--sp-4) * 2);
}

/* ==========================================================================
   16. Emoji the device cannot render yet
   --------------------------------------------------------------------------
   New releases reach phones months after Unicode approves them, so a brand-new
   emoji draws as an empty box. Rather than leave what looks like a broken
   page, mark the tile and let the name carry it.
   ========================================================================== */

/* The badge is part of the card's flow, not floated over it. Absolutely
   positioning it covered the emoji's name, which is the one piece of
   information that still works when the glyph does not. */
.emoji-unsupported {
  position: relative;
  padding-bottom: var(--sp-6);
}

.emoji-unsupported .similar__emoji,
.emoji-unsupported .new-card__emoji,
.emoji-unsupported .release__emoji,
.emoji-unsupported #emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  color: var(--md-on-surface-variant);
  opacity: .45;
}

.emoji-unsupported::after {
  content: "Not on this device yet";
  position: absolute;
  left: 50%;
  bottom: var(--sp-2);
  transform: translateX(-50%);
  max-width: calc(100% - var(--sp-3));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  padding: 2px 7px;
  border-radius: var(--md-shape-full);
}

/* The detail-page hero has room for the full sentence. */
.emoji_box.emoji-unsupported {
  padding-bottom: var(--sp-8);
}
.emoji_box.emoji-unsupported::after {
  content: "Not supported on this device yet";
  font-size: var(--md-label-s);
  bottom: var(--sp-3);
}

/* The home strip tiles are square and tiny; a dot in the corner is all that
   fits without covering the emoji. */
.copy-chip.emoji-unsupported { padding-bottom: 0; }
.copy-chip.emoji-unsupported::after {
  content: "NEW";
  left: auto;
  right: 3px;
  bottom: 3px;
  transform: none;
  font-size: 7.5px;
  padding: 1px 4px;
}

/* ==========================================================================
   17. Dark theme
   --------------------------------------------------------------------------
   Three states, as browsers actually present them:
     - no choice stored  -> follow the device via prefers-color-scheme
     - data-theme="dark" -> dark regardless of the device
     - data-theme="light"-> light regardless of the device
   Only tokens are redefined; every component reads them, so nothing else needs
   a dark variant.
   ========================================================================== */

:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary:              #ffb951;
    --md-on-primary:           #452b00;
    --md-primary-container:    #5e3f00;
    --md-on-primary-container: #ffdea6;

    --md-accent:               #ffb4ab;
    --md-accent-container:     #5c1a16;

    --md-surface:              #16130e;
    --md-on-surface:           #ece1d4;
    --md-surface-container-low:#1e1a14;
    --md-surface-container:    #241f18;
    --md-surface-container-high:#2f2921;
    --md-on-surface-variant:   #b3a894;
    --md-outline:              #8a7f6b;
    --md-outline-variant:      #3a342a;

    --md-inverse-surface:      #ece1d4;
    --md-inverse-on-surface:   #35302a;

    --md-elev-1: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
    --md-elev-2: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.6);
    --md-elev-3: 0 4px 8px rgba(0,0,0,.45), 0 16px 32px -12px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --md-primary:              #ffb951;
  --md-on-primary:           #452b00;
  --md-primary-container:    #5e3f00;
  --md-on-primary-container: #ffdea6;

  --md-accent:               #ffb4ab;
  --md-accent-container:     #5c1a16;

  --md-surface:              #16130e;
  --md-on-surface:           #ece1d4;
  --md-surface-container-low:#1e1a14;
  --md-surface-container:    #241f18;
  --md-surface-container-high:#2f2921;
  --md-on-surface-variant:   #b3a894;
  --md-outline:              #8a7f6b;
  --md-outline-variant:      #3a342a;

  --md-inverse-surface:      #ece1d4;
  --md-inverse-on-surface:   #35302a;

  --md-elev-1: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
  --md-elev-2: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.6);
  --md-elev-3: 0 4px 8px rgba(0,0,0,.45), 0 16px 32px -12px rgba(0,0,0,.7);
}

/* Status colours need their own dark steps - the light ones are unreadable
   on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .quiz__option.is-correct,
  :root:not([data-theme="light"]) .match__card.is-done,
  :root:not([data-theme="light"]) .copy-chip.is-copied {
    background: #16391f;
    border-color: #6fd39b;
    color: #c6f0d5;
  }
  :root:not([data-theme="light"]) .quiz__option.is-wrong {
    background: #3a1a17;
    border-color: #ff9a90;
    color: #ffd9d4;
  }
  :root:not([data-theme="light"]) .quiz__feedback.is-correct { color: #6fd39b; }
}
:root[data-theme="dark"] .quiz__option.is-correct,
:root[data-theme="dark"] .match__card.is-done,
:root[data-theme="dark"] .copy-chip.is-copied {
  background: #16391f;
  border-color: #6fd39b;
  color: #c6f0d5;
}
:root[data-theme="dark"] .quiz__option.is-wrong {
  background: #3a1a17;
  border-color: #ff9a90;
  color: #ffd9d4;
}
:root[data-theme="dark"] .quiz__feedback.is-correct { color: #6fd39b; }

/* The hero gradient needs a softer stop in dark, or it glows. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background:
      radial-gradient(900px 340px at 50% -160px, rgba(255,185,81,.16) 0%, transparent 70%),
      var(--md-surface);
  }
}
:root[data-theme="dark"] .hero {
  background:
    radial-gradient(900px 340px at 50% -160px, rgba(255,185,81,.16) 0%, transparent 70%),
    var(--md-surface);
}

/* The logo is a bright PNG on white; give it a touch of breathing room in dark
   rather than letting it sit as a glowing block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar-brand img { filter: brightness(.96); }
}
:root[data-theme="dark"] .navbar-brand img { filter: brightness(.96); }

/* ==========================================================================
   18. Theme toggle
   ========================================================================== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface-variant);
  border-radius: var(--md-shape-full);
  cursor: pointer;
  transition: background var(--md-motion), color var(--md-motion), border-color var(--md-motion);
}
.theme-toggle:hover {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  border-color: var(--md-primary);
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ==========================================================================
   19. Navigation
   ========================================================================== */

.header {
  background: color-mix(in srgb, var(--md-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 var(--md-outline-variant);
}
@supports not (backdrop-filter: blur(1px)) {
  .header { background: var(--md-surface); }
}

.navbar { padding-block: var(--sp-3); }
.navbar > .container { gap: var(--sp-4); }

.navbar-brand img { height: 38px; width: auto; }

.navbar-nav { gap: 2px; align-items: center; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  border-radius: var(--md-shape-full);
  white-space: nowrap;
  transition: background var(--md-motion), color var(--md-motion);
}
.nav-link:hover {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}
/* Current section gets a quiet underline rather than a heavy fill. */
.nav-link[aria-current="page"] {
  color: var(--md-on-surface);
  background: var(--md-primary-container);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
}

@media (min-width: 992px) {
  .navbar-collapse { flex-basis: auto; margin-inline-start: var(--sp-4); }
  .nav-actions { margin-inline-start: 0; }
}

@media (max-width: 991.98px) {
  .navbar > .container { gap: var(--sp-2); }
  .navbar-collapse {
    order: 3;
    margin-top: var(--sp-2);
    border-top: 1px solid var(--md-outline-variant);
  }
  .navbar-collapse .navbar-nav { gap: 0; align-items: stretch; }
  .navbar-collapse .nav-link { border-radius: var(--md-shape-m); }
}

/* ==========================================================================
   20. Blog listing
   ========================================================================== */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
  overflow: hidden;
  color: var(--md-on-surface);
  height: 100%;
  transition: border-color var(--md-motion), box-shadow var(--md-motion), transform var(--md-motion);
}
.post-card:hover {
  border-color: var(--md-primary);
  box-shadow: var(--md-elev-2);
  transform: translateY(-3px);
  text-decoration: none;
}
.post-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--md-surface-container);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 400ms cubic-bezier(.2,0,0,1);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}
.post-card__tag {
  align-self: flex-start;
  font-size: var(--md-label-s);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  padding: 2px var(--sp-2);
  border-radius: var(--md-shape-full);
}
.post-card__title { font-weight: 600; line-height: 1.35; }
.post-card__meta {
  margin-top: auto;
  font-size: var(--md-body-m);
  color: var(--md-on-surface-variant);
}

/* ==========================================================================
   21. Empty state
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-l);
}
.empty-state__icon { font-size: 3rem; display: block; margin-bottom: var(--sp-3); }
.empty-state ul {
  display: inline-block;
  text-align: left;
  color: var(--md-on-surface-variant);
  margin-bottom: var(--sp-4);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}
.pagination__count {
  width: 100%;
  text-align: center;
  margin: 0 0 var(--sp-2);
  font-size: var(--md-body-m);
  color: var(--md-on-surface-variant);
}
.pagination .btn { margin: 0 !important; }
.pagination .btn[disabled] {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  opacity: 1;
  cursor: default;
}

/* ==========================================================================
   22. Bundled emoji fonts
   --------------------------------------------------------------------------
   Two subsets of Noto Color Emoji (SIL Open Font License), covering the glyphs
   installed system fonts do not have:

     emoji-new    107 KB - the 64 emoji from Emoji 15.0 onward, too recent for
                  any shipped system font
     emoji-flags  1.9 MB - the 270 country flags. Windows has never shipped
                  flag glyphs at all, so Chrome and Edge there render the
                  regional-indicator letters ("AO", "BF") instead of a flag

   They are separate files on purpose. The flag set is large, and an emoji page
   showing no flag must not pay for it. Each unicode-range lists only codepoints
   unique to that set - joiners and variation selectors are excluded, since they
   appear in ordinary emoji and would pull a font down on nearly every page.
   ========================================================================== */

@font-face {
  font-family: "Emoji Latest";
  src: url("/assets/fonts/emoji-new.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  unicode-range: U+1F6D8, U+1F6DC, U+1FA75-1FA77, U+1FA87-1FA8A, U+1FA8E-1FA8F, U+1FAAD-1FAAF, U+1FABB-1FABF, U+1FAC6, U+1FAC8, U+1FACD-1FACF, U+1FADA-1FADC, U+1FADF, U+1FAE8-1FAEA, U+1FAEF, U+1FAF7-1FAF8;
}

@font-face {
  font-family: "Emoji Latest";
  src: url("/assets/fonts/emoji-flags.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  unicode-range: U+1F1E6-1F1FF, U+E0030-E0039, U+E0061-E007A, U+E007F;
}

/* Listed first so it wins for those codepoints only; everything else falls
   through to the normal stack. */
:root {
  --md-font: "Emoji Latest", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "Helvetica Neue", Arial, "Noto Sans", sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}