*{ box-sizing:border-box; }
html{ height:100%; }
body{ min-height:100%; }

/* Prevent 100vw/transform backgrounds from creating horizontal scrollbars */
html, body{ overflow-x: hidden; }

body{
  margin:0;
  background-color: var(--bg-main);

  /* JS sets a subtle repeating noise texture via background-image */
  background-image: var(--bg-main-img);
  background-repeat: repeat;
  background-size: 320px 320px;
  background-attachment: fixed;

  color: var(--text);
  /* CJK fallback (PingFang SC / Microsoft YaHei) ahead of the generic
     sans-serif: zh-CN UI text needs real glyph coverage, and a self-hosted
     or system stack avoids adding another Google Fonts dependency on top of
     Nunito's — see CLAUDE.md's zh-CN localization notes. */
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* ── Site-wide warm paper grid, shared with tools/index.php and home. ── */
body{
  --site-paper-background-image:
    repeating-linear-gradient(2deg, rgba(115, 91, 59, .018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(91deg, rgba(255,255,255,.15) 0 1px, transparent 1px 11px),
    radial-gradient(ellipse at 16% 19%, rgba(230, 174, 47, .055) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 78% 67%, rgba(91, 70, 43, .04) 0 .8px, transparent 1.5px),
    linear-gradient(105deg, rgba(255,255,255,.08), transparent 38%, rgba(126,98,62,.025));
  background-image:
    var(--site-paper-background-image);
  background-color: #FBF6E9;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, 23px 21px, 31px 29px, 100% 100%;
  background-attachment: fixed;
}

a { color: #108bff; }
button, input{ font: inherit; }
[hidden]{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.token-img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ── Bilingual product titles (zh-CN pilot) ──
   Shared secondary line for a product's own heading/card title: see
   php/product_names.php's lingadoo_product_title_html(). Sized in `em` so it
   scales correctly under whichever heading class sets the primary line's
   font-size (gp-title, tool-card-title, game-page-title, #drill-title, ...)
   without this rule needing to know that size itself. Only ever rendered
   when the resolved locale actually has a Chinese name distinct from the
   English one — English rendering is untouched. */
.product-title-original{
  display: block;
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.58;
  margin-top: 0.2em;
}