/* extinction.meme · Japanese mode (日本語モード). Linked on every page, but everything below only applies under
   html[data-lang="ja"] / html[lang="ja"] (set by theme.js before first paint), so English visitors never download
   the Japanese fonts. Fonts: SIL OFL 1.1 (licences in /fonts/OFL-*.txt), subset by tools/i18n_extract.py --fonts,
   which also rewrites the hashed file names below. The unicode-range keeps Latin text in the site's own fonts. */

@font-face { font-family: "XM Mochiy"; src: url(/fonts/MochiyPopOne-ja-5a941de9.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "XM ZenMaru"; src: url(/fonts/ZenMaruGothic-500-ja-83def802.woff2) format("woff2"); font-weight: 100 500; font-display: swap; unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "XM Yomogi"; src: url(/fonts/Yomogi-ja-b4e61c73.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF; }

/* ---------- no flash of English: the page stays invisible until i18n.js has translated it ----------
   failsafe: it shows itself after 1.2 s even if a script never runs (the delay survives the site's
   reduced-motion / calm rules, which only shorten animation-duration) */
html[data-lang="ja"]:not(.i18n-ready) body { opacity: 0; animation: xm-i18n-failsafe 0s linear 1.2s forwards; }
@keyframes xm-i18n-failsafe { to { opacity: 1; } }

/* ---------- type ---------- */
html[lang="ja"] {
  --display: "XM Mochiy", "Bagel Fat One", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", sans-serif;
  --hand: "XM Yomogi", "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --body: "XM ZenMaru", "Comic Neue", "Hiragino Maru Gothic ProN", "Comic Sans MS", "Chalkboard SE", sans-serif;
}
/* palt = proportional kana, the usual japanese web setting (full-width kana look gappy in buttons otherwise) */
html[lang="ja"] body { line-height: 1.65; line-break: strict; word-break: auto-phrase; overflow-wrap: break-word; font-feature-settings: "palt"; }
@media (max-width: 760px) { html[lang="ja"] .tabs a { padding: 5px 8px; font-size: 14px; } }
@media (max-width: 400px) { html[lang="ja"] .tabs a { padding: 5px 6px; font-size: 13px; } }
/* tight english line-heights clip japanese when a heading wraps */
html[lang="ja"] :is(h1, h2, h3, .note b, .empty p, .view-head p, .realq p, .hero-sub, .welcome-sub, .count-line, .tier-note, .card .ttl, .tile .cap span, .mm-step-h, .mm-tip, .mm-meter-msg) { line-height: 1.3; }
/* japanese handwriting reads big: bring the --hand headings down a notch */
html[lang="ja"] .diary h2 { font-size: 40px; }
html[lang="ja"] .hero-sub { font-size: clamp(22px, 3.6vw, 34px); }
html[lang="ja"] .view-head p { font-size: 22px; }
html[lang="ja"] .note b, html[lang="ja"] .make-cta p, html[lang="ja"] .empty p { font-size: 25px; }
html[lang="ja"] .rule h2, html[lang="ja"] dialog.dlg h2 { font-size: 30px; }
html[lang="ja"] .card .ttl, html[lang="ja"] .lb-title { font-size: 23px; }
html[lang="ja"] .tile .cap span { font-size: 17px; }
html[lang="ja"] .mm-title { font-size: clamp(32px, 5vw, 44px); }
html[lang="ja"] .mm-step-h { font-size: 22px; }
html[lang="ja"] .mm-tip, html[lang="ja"] .mm-meter-msg { font-size: 18px; }
/* the glut promo is a flex row of bare text pieces; in japanese they must flow as one sentence */
html[lang="ja"] .glut-cta { display: block; line-height: 1.7; }
html[lang="ja"] .glut-cta .btn { display: flex; width: fit-content; margin: 10px 0 0; }
/* 傍点: japanese emphasis dots instead of italics */
html[lang="ja"] em { font-style: normal; -webkit-text-emphasis: filled sesame; text-emphasis: filled sesame; -webkit-text-emphasis-position: over right; text-emphasis-position: over right; }

/* ---------- a katakana reading (読み仮名) under the big logo, a subtitle under the small one ---------- */
html[lang="ja"] .hero-title::after {
  content: "エクスティンクション・ミーム"; display: block; margin: .3em 0 0;
  font: 400 clamp(11px, 1.7vw, 19px)/1.2 "XM Mochiy", sans-serif; letter-spacing: .32em; text-indent: .32em;
  color: var(--ink-soft); -webkit-text-stroke: 0; text-shadow: none; animation: none;
}
html[lang="ja"] .logo > span { position: relative; }
html[lang="ja"] .logo > span::after {
  content: "ぜつめつミーム置き場"; position: absolute; left: 1px; top: calc(100% + 2px);
  font: 400 10px/1 "XM Mochiy", sans-serif; letter-spacing: .14em; color: var(--hot); white-space: nowrap; pointer-events: none;
}

/* ---------- 判子: a little red "無料" (free) stamp on the "pls steal these memes" note ---------- */
html[lang="ja"] #steal-h::after {
  content: "無料"; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0 0 0 10px; vertical-align: middle;
  font: 400 14px/1 "XM Mochiy", sans-serif; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0;
  color: #e5352b; border: 2.5px solid #e5352b; border-radius: 50%; transform: rotate(-12deg); opacity: .88;
  -webkit-text-stroke: 0; text-shadow: none;
}

/* ---------- 桜: falling petals (only with "sparkles" on; never in calm mode or with reduced motion) ---------- */
/* above the page (under the header, toasts and dialogs), never catching a click */
.xm-sakura { position: fixed; inset: 0; z-index: 25; overflow: hidden; pointer-events: none; contain: strict; }
html:not([lang="ja"]) .xm-sakura, html[data-calm] .xm-sakura { display: none; }
@media (prefers-reduced-motion: reduce) { .xm-sakura { display: none; } }
.xm-sakura i {
  position: absolute; top: -28px; left: 50%; width: 15px; height: 12px; border-radius: 15px 1px 15px 1px;
  background: linear-gradient(135deg, #fff8fb 0%, #ffc2dc 45%, #ff86bb 100%); box-shadow: inset 0 0 0 1px rgba(214, 60, 132, .5);
  -webkit-mask-image: radial-gradient(circle at 100% 0, transparent 2.6px, #000 3.2px); mask-image: radial-gradient(circle at 100% 0, transparent 2.6px, #000 3.2px); /* the little notch at a sakura petal tip */
  opacity: .82; will-change: transform; animation: xm-fall 14s linear infinite;
}
:root[data-theme="dark"] .xm-sakura i { opacity: .6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xm-sakura i { opacity: .6; } }
.xm-sakura i:nth-child(1)  { left: 4%;  animation-duration: 15s; animation-delay: -2s; }
.xm-sakura i:nth-child(2)  { left: 13%; animation-duration: 19s; animation-delay: -11s; transform: scale(.8); width: 10px; height: 8px; }
.xm-sakura i:nth-child(3)  { left: 22%; animation-duration: 13s; animation-delay: -6s; }
.xm-sakura i:nth-child(4)  { left: 31%; animation-duration: 17s; animation-delay: -14s; width: 11px; height: 9px; }
.xm-sakura i:nth-child(5)  { left: 42%; animation-duration: 21s; animation-delay: -3s; width: 9px; height: 7px; }
.xm-sakura i:nth-child(6)  { left: 51%; animation-duration: 14s; animation-delay: -9s; }
.xm-sakura i:nth-child(7)  { left: 60%; animation-duration: 18s; animation-delay: -16s; width: 15px; height: 11px; }
.xm-sakura i:nth-child(8)  { left: 69%; animation-duration: 16s; animation-delay: -5s; width: 10px; height: 8px; }
.xm-sakura i:nth-child(9)  { left: 77%; animation-duration: 20s; animation-delay: -12s; }
.xm-sakura i:nth-child(10) { left: 85%; animation-duration: 15s; animation-delay: -8s; width: 12px; height: 9px; }
.xm-sakura i:nth-child(11) { left: 92%; animation-duration: 22s; animation-delay: -18s; width: 9px; height: 7px; }
.xm-sakura i:nth-child(12) { left: 97%; animation-duration: 17s; animation-delay: -1s; }
.xm-sakura i:nth-child(even) { animation-name: xm-fall-b; }
@keyframes xm-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg); }
  25%  { transform: translate3d(-26px, 27vh, 0) rotate(70deg) rotateY(170deg); }
  50%  { transform: translate3d(12px, 54vh, 0) rotate(150deg) rotateY(340deg); }
  75%  { transform: translate3d(-18px, 81vh, 0) rotate(230deg) rotateY(520deg); }
  100% { transform: translate3d(4px, calc(100vh + 56px), 0) rotate(310deg) rotateY(700deg); }
}
@keyframes xm-fall-b {
  0%   { transform: translate3d(0, 0, 0) rotate(20deg) rotateX(0deg); }
  30%  { transform: translate3d(22px, 30vh, 0) rotate(-40deg) rotateX(180deg); }
  60%  { transform: translate3d(-14px, 60vh, 0) rotate(-110deg) rotateX(360deg); }
  100% { transform: translate3d(16px, calc(100vh + 56px), 0) rotate(-200deg) rotateX(620deg); }
}

/* ---------- privacy page: "the English version is the one that counts" ---------- */
.xm-ja-note { margin: 0 0 14px; padding: 8px 12px; border: 2px dashed var(--pink); border-radius: 12px; background: var(--well); font-size: 14px; line-height: 1.6; }
.xm-ja-en { margin: 0; padding: 0; border: 0; background: none; color: var(--hot); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.xm-ja-en:hover { color: var(--ink); }