/* Halfwidth Katakana marks (U+FF9E/U+FF9F and friends) are Script=Common, so
   itemization leaves them in the preceding character's script run: "(" + ﾟ is
   one run, and a run resolves to one font and shapes as a unit — Chrome reports
   a single advance for that pair, and two for "οﾟ". Nothing attaches the mark to
   the parenthesis; U+FF9F is a spacing modifier letter (gc=Lm), not a combining
   mark. It simply never gets a font decision of its own, so a run whose font
   lacks it paints .notdef. That is why only the first eye of (ﾟοﾟ) boxed: the
   second follows Greek ο, which ends the run, so the mark opens its own and
   falls back independently. Naming Japanese families ahead of the generic keeps
   such a face in a font that actually covers them.

   That stack is scoped to the faces that need it, never to every face: a face
   built from characters the generic already covers — (◕‿◕) is U+25D5 + U+203F —
   re-shapes with Japanese proportional metrics and its glyphs collapse onto each
   other. card-core.js adds .kaomoji-katakana to a face whose text carries a
   halfwidth Katakana character (U+FF61-U+FF9F, a block no generic sans covers),
   and only that face switches stacks. */
:root {
  --catalog-card-width: 210px;
  --card-ink: #171a18;
  --card-line: #c8d0c4;
  --card-muted: #626b64;
  --card-focus: #006a60;
  --kaomoji-font: sans-serif;
  --kaomoji-katakana-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  /* Same coverage for the monospace surfaces that quote raw kaomoji source:
     ui-monospace still wins for ASCII, but the mark has somewhere to land. */
  --kaomoji-mono-font: ui-monospace, "Noto Sans Mono CJK JP",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, monospace;
}
.kaomoji,
.sticker-face,
.face {
  font-family: var(--kaomoji-font);
}
/* Rebinding the token, rather than font-family, keeps this working on the
   surfaces whose own stylesheet sets `font:` with var(--kaomoji-font) and would
   otherwise out-cascade a font-family rule from here. */
.kaomoji-katakana {
  --kaomoji-font: var(--kaomoji-katakana-font);
}

/* One way to write "this character, and the number Unicode gave it". Every
   surface that names a code point uses this pair rather than splitting the two
   across columns: the glyph carries .kaomoji so the face machinery gives it the
   covering font, and both halves stay selectable. card-core.js builds the same
   markup for generated tables. */
.codepoint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  vertical-align: top;
}
.codepoint + .codepoint {
  margin-left: .55em;
}
.codepoint .cp-glyph {
  font-size: 1.35rem;
  line-height: 1.15;
  white-space: nowrap;
}
.codepoint .cp-code {
  font: 11px/1.2 var(--kaomoji-mono-font);
  color: #626b64;
  white-space: nowrap;
}
/* A character shown as a specimen rather than used as punctuation. Prose needs
   the distinction the way code needs backticks — and the mono stack has no glyph
   for a combining mark, so specimens take the covering font. */
.lit {
  padding: 0 .28em;
  border: 1px solid var(--card-line);
  border-radius: 2px;
  background: white;
  font-family: var(--kaomoji-katakana-font);
  white-space: nowrap;
}
.codepoint-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.kaomoji-combining-eye {
  position: relative;
  display: inline-block;
}
.kaomoji-combining-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.kaomoji-combining-eye::after {
  content: "";
  position: absolute;
  left: 50%;
  top: .2em;
  width: .42em;
  height: .28em;
  border: .07em solid currentColor;
  border-radius: 50%;
  clip-path: inset(50% 0 0);
  transform: translateX(-50%);
  pointer-events: none;
}
.kaomoji-combining-eye.inverted::after {
  top: .34em;
  clip-path: inset(0 0 50%);
}
.kaomoji-combining-eye.grave::after,
.kaomoji-combining-eye.acute::after {
  top: .05em;
  width: .38em;
  height: .07em;
  border: 0;
  border-radius: 1em;
  clip-path: none;
  background: currentColor;
}
.kaomoji-combining-eye.grave::after {
  transform: translateX(-50%) rotate(38deg);
}
.kaomoji-combining-eye.acute::after {
  transform: translateX(-50%) rotate(-38deg);
}
.kaomoji-raw {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: .25rem;
  color: #4f5952;
  font: 600 .65rem/1.25 ui-monospace, monospace;
  white-space: pre;
}
.kaomoji-raw-label {
  color: #626b64;
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kaomoji-raw code {
  color: #171a18;
  font: inherit;
  user-select: text;
}

/* Both collection surfaces overlay the two faces in one grid cell. Give that
   shared flip stage a stable size so a long model list cannot resize one card. */
.sticker-inner {
  width: 100%;
  aspect-ratio: 5 / 7;
}
.sticker-back {
  overflow: auto;
}

/* Canonical collection card. Personal and public catalogs both render this
   structure through KaomojoCards.renderCollectionCard(). */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 22px 18px;
  padding: 16px 10px 22px;
}
.sticker {
  --card-accent: #bde7ff;
  --card-accent-deep: #277e94;
  --card-header-padding: 1px 0 1px 7px;
  --card-name-size: .9rem;
  --card-domain-margin: -1px 0 -1px;
  --card-domain-padding: 1px 7px;
  --card-domain-size: .68rem;
  --card-domain-border: color-mix(in srgb,var(--card-accent-deep) 50%,var(--card-ink));
  --card-domain-color: color-mix(in srgb,var(--card-accent-deep) 66%,var(--card-ink));
  --card-domain-background: color-mix(in srgb,var(--card-accent-deep) 12%,var(--card-accent) 53%,white 35%);
  --card-outer-border-width: 1px;
  --card-outer-outline-width: 1px;
  --card-outer-outline-offset: -1px;
  --card-rotation: 0deg;
  --card-texture-x: 0px;
  --card-texture-y: 0px;
  --card-texture-x-alt: 0px;
  --card-texture-y-alt: 0px;
  --card-shadow: 0 10px 24px rgba(23,26,24,.2);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 900px;
  transform: rotate(var(--card-rotation));
  transition: transform .16s ease;
}
.sticker[data-rarity="common"] { --card-accent:#dce8c8; --card-accent-deep:#667f47; }
.sticker[data-rarity="uncommon"] { --card-accent:#cdeeb6; --card-accent-deep:#477d31; }
.sticker[data-rarity="rare"] { --card-accent:#bde7ff; --card-accent-deep:#277e94; }
.sticker[data-rarity="mythic"] { --card-accent:#dfc9f4; --card-accent-deep:#755395; }
.sticker[data-rarity="legendary"] { --card-accent:#ffe185; --card-accent-deep:#8d6512; }
.sticker[data-vibe="joyful"] { --card-accent:#ffe58f; --card-accent-deep:#8d6512; }
.sticker[data-vibe="playful"] { --card-accent:#ffc9e7; --card-accent-deep:#9b3f73; }
.sticker[data-vibe="triumphant"] { --card-accent:#ffd36e; --card-accent-deep:#8b5510; }
.sticker[data-vibe="loving"] { --card-accent:#ffbfd0; --card-accent-deep:#a43d5b; }
.sticker[data-vibe="calm"] { --card-accent:#bfe9dc; --card-accent-deep:#267565; }
.sticker[data-vibe="sleepy"] { --card-accent:#d8d3f4; --card-accent-deep:#625a91; }
.sticker[data-vibe="sad"] { --card-accent:#bcdcf4; --card-accent-deep:#376f98; }
.sticker[data-vibe="anxious"] { --card-accent:#d7e0c1; --card-accent-deep:#64754b; }
.sticker[data-vibe="angry"] { --card-accent:#ffb5a8; --card-accent-deep:#9c3828; }
.sticker[data-vibe="surprised"] { --card-accent:#c8eaff; --card-accent-deep:#327897; }
.sticker[data-vibe="mysterious"] { --card-accent:#d9c2ed; --card-accent-deep:#70508c; }
.sticker[data-vibe="neutral"] { --card-accent:#dddcd3; --card-accent-deep:#66665e; }
.sticker:hover,
.sticker:focus-within { z-index: 1; transform: rotate(0) translateY(-3px); }
.sticker:focus-visible { outline: 3px solid var(--card-focus); outline-offset: 4px; }
.sticker-inner { display: grid; transform-style: preserve-3d; }
.sticker-side {
  position: relative;
  grid-area: 1/1;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  overflow: hidden;
  background-color: #fffdf6;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23,26,24,.12) .8px, transparent 1px),
    radial-gradient(circle at 5px 4px, rgba(0,106,96,.05) .7px, transparent .9px);
  background-size: 8px 8px, 13px 13px;
  background-position: var(--card-texture-x) var(--card-texture-y), var(--card-texture-x-alt) var(--card-texture-y-alt);
  border: var(--card-outer-border-width) solid var(--card-ink);
  outline: var(--card-outer-outline-width) solid var(--card-ink);
  outline-offset: var(--card-outer-outline-offset);
  border-radius: 0;
  box-shadow: var(--card-shadow);
  backface-visibility: hidden;
  transition: transform .46s cubic-bezier(.2,.75,.25,1), box-shadow .16s ease;
}
.sticker:nth-child(4n) .sticker-side { background-color: #f7ffd9; }
.sticker:nth-child(5n) .sticker-side { background-color: #eef9ff; }
.sticker:nth-child(3n) .sticker-side {
  background-image:
    repeating-linear-gradient(2deg, transparent 0 5px, rgba(23,26,24,.07) 5px 6px),
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.55) 0 1px, transparent 1.4px);
  background-size: auto, 10px 7px;
  background-position: 0 var(--card-texture-y), var(--card-texture-x) var(--card-texture-y);
}
.sticker:nth-child(3n + 2) .sticker-side {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,106,96,.055) 8px 9px),
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(23,26,24,.045) 11px 12px);
  background-position: var(--card-texture-x) var(--card-texture-y), var(--card-texture-x-alt) var(--card-texture-y-alt);
}
.sticker:hover .sticker-side,
.sticker:focus-within .sticker-side { box-shadow:0 14px 28px rgba(23,26,24,.24); }
.sticker-front { display:flex; flex-direction:column; transform: rotateY(0); }
.sticker-back { transform: rotateY(180deg); }
.sticker.is-flipped .sticker-front { transform: rotateY(-180deg); }
.sticker.is-flipped .sticker-back { transform: rotateY(0); }
.sticker-serial { display:flex; align-items:stretch; justify-content:space-between; gap:8px; min-width:0; margin:-10px -10px 0; padding:var(--card-header-padding); border:0; border-bottom:1px solid color-mix(in srgb,var(--card-accent-deep) 62%,var(--card-ink)); border-radius:0; background:color-mix(in srgb,var(--card-accent) 72%,white); }
.sticker-identity { min-width:0; padding:0 4px; font-family:Fredoka,system-ui,sans-serif; }
.catalog-number { display:grid; place-items:center; color:var(--card-accent-deep); font:700 .68rem "IBM Plex Mono",monospace; }
.sticker-name { display:block; width:100%; overflow:hidden; color:var(--card-ink); font-size:var(--card-name-size); line-height:1.1; white-space:nowrap; }
.card-domain { display:grid; place-items:center; align-self:stretch; margin:var(--card-domain-margin); padding:var(--card-domain-padding); border-left:1px solid var(--card-domain-border); color:var(--card-domain-color); background:var(--card-domain-background); font:800 var(--card-domain-size) "IBM Plex Mono",monospace; letter-spacing:-.02em; white-space:nowrap; }
.card-marks { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.integrity-mark { display:inline-grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border:1px solid currentColor; border-radius:50%; color:#7d3b21; background:#fff7e8; font:700 13px/1 system-ui,sans-serif; }
.rarity[data-card-tooltip], .integrity-mark[data-card-tooltip] { cursor:help; }
.rarity[data-card-tooltip]:focus-visible, .integrity-mark[data-card-tooltip]:focus-visible { outline:2px solid #171a18; outline-offset:2px; }
.card-tooltip { position:fixed; z-index:10000; width:max-content; max-width:min(280px,calc(100vw - 16px)); padding:7px 9px; border:1px solid #171a18; border-radius:7px; color:#fffdf6; background:#171a18; box-shadow:0 3px 10px rgb(0 0 0 / 22%); font:700 12px/1.35 system-ui,sans-serif; text-align:left; pointer-events:none; }
.card-tooltip[hidden] { display:none; }
.sticker-art { display:flex; flex:1 1 auto; align-items:center; justify-content:center; min-width:0; min-height:80px; padding:4px 6px; overflow:hidden; border:2px solid var(--card-ink); border-radius:0; background:linear-gradient(145deg,rgba(255,255,255,.88),color-mix(in srgb,var(--card-accent) 68%,white)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.65),inset 0 -14px 24px color-mix(in srgb,var(--card-accent) 35%,transparent); }
.sticker[data-custom-background] .sticker-art {
  background-image:var(--card-art-image);
  background-position:center;
  background-size:cover;
}
.sticker[data-dark-face] .sticker-face {
  color:#fff;
  text-shadow:
    -1px -1px 0 rgba(9,12,40,.92),
    1px -1px 0 rgba(9,12,40,.92),
    -1px 1px 0 rgba(9,12,40,.92),
    1px 1px 0 rgba(9,12,40,.92),
    0 2px 5px rgba(9,12,40,.88),
    0 0 10px rgba(9,12,40,.48);
}
.sticker-face { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; width:100%; min-height:68px; overflow:hidden; padding:4px 0; white-space:nowrap; font:clamp(1.7rem,2.4vw,2.25rem)/1.25 var(--kaomoji-font); }
.kaomoji-rendered { display:block; max-width:100%; white-space:nowrap; }
.sticker-face.compact { font-size:1.5rem; }
.sticker-face.tiny { font-size:1.15rem; }
.sticker-meta { display:grid; gap:2px; padding:5px 6px; border:1px solid color-mix(in srgb,var(--card-accent-deep) 30%,var(--card-line)); border-radius:0; background:rgba(255,255,255,.58); color:var(--card-muted); font-size:.72rem; }
.sticker-meta strong { color:var(--card-ink); }
.sticker-context { color:var(--card-ink); font-size:.85rem; }
.sticker-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:5px; border-top:1px solid color-mix(in srgb,var(--card-accent-deep) 32%,var(--card-line)); }
.rarity { display:inline-grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border:1px solid var(--card-accent-deep); border-radius:50%; background:color-mix(in srgb,var(--card-accent) 66%,white); font:17px/1 sans-serif; }
.sticker-count { font:700 .82rem Fredoka,system-ui,sans-serif; }
.sticker-back h3 { margin:0; padding:2px 4px; overflow:hidden; font:700 .9rem/1.1 Fredoka,system-ui,sans-serif; white-space:nowrap; }
.model-breakdown { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:6px; }
.model-row { display:grid; grid-template-rows:minmax(0,1fr) auto; align-items:center; justify-items:center; gap:3px; min-width:0; min-height:54px; padding:5px 4px; border:1px solid var(--card-line); border-radius:5px; background:rgba(255,255,255,.52); text-align:center; }
.model-row span:first-child { align-self:center; max-width:100%; overflow-wrap:anywhere; font-size:.66rem; line-height:1.05; }
.model-row strong { font-size:.8rem; line-height:1; font-variant-numeric:tabular-nums; }
.card-actions { display:flex; align-items:center; justify-content:center; gap:7px; text-align:center; }
.sticker-empty,.empty { grid-column:1/-1; color:var(--card-muted); }
@media (max-width:980px) { .sticker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .sticker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding-inline:10px; } }
@media (max-width:480px) { .sticker-grid { grid-template-columns:1fr; } }

.sticker-side::after {
  content: "";
  position: absolute;
  inset: -25% -55%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 34%, rgba(255,255,255,.08) 41%, rgba(255,255,255,.72) 49%, rgba(217,255,95,.2) 53%, transparent 62%);
  transform: translateX(-62%);
}
.sticker:hover .sticker-side::after {
  animation: card-foil-glint .7s cubic-bezier(.2,.72,.25,1) both;
}
@keyframes card-foil-glint {
  from { transform: translateX(-62%); }
  to { transform: translateX(62%); }
}
@media (prefers-reduced-motion: reduce) {
  .sticker-side::after { display: none; }
}