/* PERAPERA: brand colors from the Nihongoism guidelines (signature Brick), rounded Japanese face per the word cloud. */
/* The components render into the page, not a shadow root, so this one file styles everything. */
:root {
  --brick: #98342c;
  --green: #3f7f5c;
  --ink: #2b2420;
  --ink-2: #5c534d;
  --ink-3: #b9b0a8;
  --paper: #fbf8f3;
  --paper-2: #f3ece2;
  --font-ja: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif: Alegreya, Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #ece6de; --ink-2: #bdb4aa; --ink-3: #5a524c; --paper: #1d1917; --paper-2: #2a2421; }
}
html { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.5; }
body { margin: 0; }
main { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
a { color: var(--brick); }
h1, h2 { font-family: var(--font-serif); font-weight: 700; line-height: 1.15; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; }
[lang="ja"] { font-family: var(--font-ja); }
.small { font-size: .85rem; opacity: .7; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 600; opacity: .7; margin: 0 0 .3rem; }
.hint { font-size: .95rem; opacity: .65; }

.site-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 1.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--paper-2); }
.brand { text-decoration: none; color: inherit; font-size: 1.3rem; }
.brand-ja { font-family: var(--font-ja); font-weight: 700; }
.brand-en { font-family: var(--font-serif); font-weight: 700; letter-spacing: .12em; }
.dev-badge { align-self: center; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: #fff; background: #1f6fb2; padding: .15rem .45rem; border-radius: .3rem; }
.brand-en em { font-style: italic; font-weight: 700; letter-spacing: 0; color: var(--brick); }
.site-header nav { display: flex; gap: 1.1rem; margin-left: auto; }
.site-header nav a { position: relative; display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; font-weight: 600; border-radius: .4rem; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--brick); }
.site-header .icon { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-header .icon .fill { fill: color-mix(in srgb, var(--brick) 18%, transparent); }
.site-header .icon .dot { fill: currentColor; stroke: none; }
.site-header .new { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1; color: #fff; background: var(--brick); border-radius: 999px; padding: .15rem .35rem; }
/* Phones: the menu takes its own row, spread edge to edge, each icon above its label. */
@media (max-width: 600px) {
  .site-header { padding-bottom: .6rem; }
  .site-header nav { width: 100%; margin-left: 0; justify-content: space-between; gap: 0; }
  .site-header nav a { flex-direction: column; gap: .15rem; font-size: .78rem; padding: .2rem .3rem; }
  .site-header .icon { width: 1.6rem; height: 1.6rem; }
  .site-header .new { position: absolute; top: -.35rem; right: -.4rem; }
}
.site-footer { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; border-top: 1px solid var(--paper-2); font-size: .95rem; text-align: center; }
.newsletter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.5rem; }

/* Buttons: an outlined pill in brick; .filled for the main action. Also used on links. */
.button { display: inline-block; font: inherit; font-weight: 600; padding: .55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--brick); background: none; color: var(--brick); text-decoration: none; cursor: pointer; }
.button:hover, .button.filled { background: var(--brick); color: #fff; }
/* Filter chips: toggle buttons in a row. */
.chip { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .9rem; padding: .25rem .8rem; border-radius: 999px; border: 1.5px solid var(--ink-3); background: none; color: inherit; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--brick); color: #fff; border-color: transparent; }

.hero { text-align: center; padding: 1rem 0 2rem; }
pp-wotd { display: block; }
/* Hide the build-time word until the browser has swapped in today's, so a stale word never flashes. */
/* The delayed reveal is a backstop in case the script never loads. */
.js pp-wotd:not([ready]) .wotd { visibility: hidden; animation: pp-wotd-reveal 0s 1.5s forwards; }
@keyframes pp-wotd-reveal { to { visibility: visible; } }
.wotd { display: block; text-decoration: none; color: inherit; margin: .5rem auto 1.2rem; }
.wotd-kana { display: block; font-family: var(--font-ja); font-weight: 700; font-size: clamp(3rem, 12vw, 5.5rem); line-height: 1.1; color: var(--brick); }
.wotd-gloss { display: block; font-family: var(--font-serif); font-size: 1.4rem; }
.lede { max-width: 34rem; margin: 0 auto 1.2rem; font-size: 1.1rem; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* Word cards: the static pages and the Browse and Search components all write this markup. */
.word-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.word-grid a { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .8rem; border-radius: .6rem; text-decoration: none; color: inherit; background: var(--paper-2); border: 1px solid transparent; }
.word-grid a:hover { border-color: var(--brick); }
.word-grid a.post { border-left: 4px solid var(--brick); }
.word-grid .kana { font-family: var(--font-ja); font-weight: 700; font-size: 1.35rem; }
.word-grid .gloss { font-size: .9rem; }
.word-grid .relation { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brick); margin-top: .2rem; }

/* Family grid on a word page: across, the shapes of one root; down, light and heavy. Scrolls sideways on a phone. */
.family-scroll { overflow-x: auto; }
.family-grid { border-collapse: separate; border-spacing: .4rem; margin: 0 -.4rem; }
.family-grid th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 600; text-align: left; white-space: nowrap; }
.family-grid thead th { font-family: var(--font-ja); text-transform: none; letter-spacing: 0; font-size: .9rem; }
.family-grid td { vertical-align: top; min-width: 7.5rem; }
.family-grid .member { display: flex; flex-direction: column; padding: .45rem .6rem; border-radius: .5rem; text-decoration: none; color: inherit; background: var(--paper-2); border: 1px solid transparent; }
.family-grid .member + .member { margin-top: .35rem; }
.family-grid a.member:hover { border-color: var(--brick); }
.family-grid a.member.post { border-left: 4px solid var(--brick); }
.family-grid .here { background: none; border-color: var(--brick); }
.family-grid .kana { font-weight: 700; font-size: 1.2rem; }
.family-grid .gloss { font-size: .8rem; color: var(--ink-2); }
.word-list { columns: 2; font-size: .95rem; }

.word-header { margin-bottom: 1.5rem; }
.word-header.has-picture { display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: start; }
.word-header.has-picture > :not(.word-picture) { grid-column: 1; }
.word-picture { grid-column: 2; grid-row: 1 / span 4; width: 13rem; height: auto; border-radius: 1rem; }
@media (max-width: 600px) { .word-picture { width: 7.5rem; } }.word-kana { font-family: var(--font-ja); font-weight: 700; font-size: clamp(3rem, 12vw, 5rem); margin: 0; line-height: 1.1; color: var(--brick); }
.word-kana .alt { font-size: .45em; opacity: .5; font-weight: 500; }
.word-gloss { font-family: var(--font-serif); font-size: 1.6rem; margin: .3rem 0 .8rem; }
.post-card { background: var(--paper-2); border-left: 4px solid var(--brick); padding: .8rem 1rem; border-radius: .4rem; margin: 1.2rem 0; }
.post-card a { font-family: var(--font-serif); font-size: 1.15rem; }
.senses ol { padding-left: 1.4rem; }
.senses li { margin: .35rem 0; }
.senses li.non-mimetic { opacity: .65; }
.senses .info { opacity: .7; margin-left: .3rem; }
.senses .tags { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-left: .5rem; }
.example p { margin: .15rem 0; }
.example p[lang="ja"] { font-size: 1.3rem; }
pp-star button { font: inherit; font-size: 1.1rem; padding: .3rem .9rem; border-radius: 999px; border: 1.5px solid currentColor; background: none; color: inherit; cursor: pointer; opacity: .75; }
pp-star button:hover, pp-star button[aria-pressed="true"] { opacity: 1; }
pp-star button[aria-pressed="true"] { background: var(--brick); color: #fff; border-color: transparent; }
pp-star .small { margin-left: .6rem; }

/* Browse and Search */
pp-browse, pp-search { display: block; }
pp-browse .filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
pp-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.4rem; padding: .7rem 1rem; border: 2px solid var(--ink-3); border-radius: .6rem; background: var(--paper); color: inherit; }
pp-search input:focus { outline: none; border-color: var(--brick); }

/* Cloud: words colored by shape, sized in five tiers by frequency. */
pp-cloud { display: block; --doubled: #2a5c8c; --tto: #c1462b; --ri: #3f7f5c; --n: #7a5195; --other: var(--ink-2); }
@media (prefers-color-scheme: dark) {
  pp-cloud { --doubled: #7fb2e5; --tto: #f0785c; --ri: #72c598; --n: #bc96dc; }
}
pp-cloud .controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
pp-cloud .chip[aria-pressed="true"] { background: none; color: inherit; border-color: var(--ink-2); font-weight: 600; }
pp-cloud .chip .dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: currentColor; }
pp-cloud .shuffle { margin-left: auto; }
pp-cloud .hint { margin: .6rem 0 0; }
pp-cloud .cloud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .15rem 1.1rem; padding: 1.8rem .3rem 2rem; }
pp-cloud .cloud a { text-decoration: none; line-height: 1.2; border-radius: .3rem; transition: opacity .18s, transform .18s; }
pp-cloud .cloud a:hover { transform: translateY(-2px); }
pp-cloud .cloud a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
pp-cloud .cloud a.post { text-decoration: underline 2px var(--brick); text-underline-offset: .3em; }
pp-cloud .cloud a.dim { opacity: .15; }
pp-cloud .reduplicated { color: var(--doubled); }
pp-cloud .tto { color: var(--tto); }
pp-cloud .ri { color: var(--ri); }
pp-cloud .n { color: var(--n); }
pp-cloud .other { color: var(--other); }
pp-cloud .s1 { font-size: clamp(.95rem, 1.7vw, 1.15rem); font-weight: 500; }
pp-cloud .s2 { font-size: clamp(1.1rem, 2.1vw, 1.45rem); font-weight: 500; }
pp-cloud .s3 { font-size: clamp(1.35rem, 2.7vw, 1.85rem); font-weight: 500; }
pp-cloud .s4 { font-size: clamp(1.65rem, 3.5vw, 2.45rem); font-weight: 700; }
pp-cloud .s5 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; }
pp-cloud .readout { position: sticky; bottom: .8rem; display: grid; grid-template-columns: auto 1fr; gap: .1rem 1.3rem; align-items: baseline; background: var(--paper-2); border-radius: .7rem; padding: .9rem 1.2rem; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
pp-cloud .readout .kana { grid-row: 1 / span 2; align-self: center; font-weight: 700; font-size: 2rem; line-height: 1.15; text-decoration: none; }
pp-cloud .readout .gloss { font-family: var(--font-serif); font-size: 1.15rem; }
pp-cloud .readout .meta { grid-column: 2; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
/* On touch screens a tap goes straight to the word, so the hover readout has nothing to show. */
@media (hover: none) { pp-cloud .readout { display: none; } }
@media (prefers-reduced-motion: reduce) { pp-cloud .cloud a { transition: none; } pp-cloud .cloud a:hover { transform: none; } }

/* Games: the list on /play/, and the shell every game renders inside (.game). */
.game-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .7rem; }
.game-list a { display: block; padding: 1rem 1.2rem; border-radius: .7rem; background: var(--paper-2); color: inherit; text-decoration: none; border: 1.5px solid transparent; }
.game-list a:hover { border-color: var(--brick); }
.game-name { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; color: var(--brick); }
.game-blurb { display: block; }
.game-go { display: inline-block; margin-top: .6rem; padding: .3rem 1rem; border-radius: 999px; background: var(--brick); color: #fff; font-weight: 600; font-size: .9rem; }
.game .bar { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; opacity: .75; margin-bottom: 1rem; }
.game .progress { height: 4px; background: var(--paper-2); border-radius: 2px; margin-bottom: 1.5rem; overflow: hidden; }
.game .progress span { display: block; height: 100%; background: var(--brick); transition: width .25s; }
.game .prompt { text-align: center; margin: 1rem 0 1.5rem; }
.game .prompt .kana { display: block; font-weight: 700; font-size: clamp(2.8rem, 11vw, 4.5rem); line-height: 1.1; color: var(--brick); }
.game .options { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 600px) { .game .options { grid-template-columns: 1fr 1fr; } }
.game .options button { position: relative; width: 100%; height: 100%; text-align: left; font: inherit; font-family: var(--font-serif); font-size: 1.15rem; padding: .8rem 1rem .8rem 2.6rem; border-radius: .6rem; border: 1.5px solid transparent; background: var(--paper-2); color: inherit; cursor: pointer; }
.game .options .key { position: absolute; left: .9rem; top: .85rem; font-family: var(--font-sans); font-size: .8rem; opacity: .5; }
.game .options button:hover:not(:disabled) { border-color: var(--brick); }
.game .options button:disabled { cursor: default; }
.game .options button.right { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--paper-2)); }
.game .options button.wrong { border-color: var(--brick); background: color-mix(in srgb, var(--brick) 12%, var(--paper-2)); }
.game .options button.faded { opacity: .45; }
.game .after { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.2rem; min-height: 2.6rem; }
.game .verdict { font-weight: 600; }
.game .next { margin-left: auto; }
.game .summary { text-align: center; }
.game .summary .big { font-family: var(--font-serif); font-size: 3rem; font-weight: 700; margin: .5rem 0 0; }
.game .summary .best { opacity: .7; margin: 0 0 1.5rem; }
.game .summary ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; text-align: left; }
.game .summary li a { display: block; padding: .5rem .7rem; border-radius: .5rem; border-left: 4px solid var(--green); background: var(--paper-2); color: inherit; text-decoration: none; }
.game .summary li.missed a { border-left-color: var(--brick); }
.game .summary .kana { font-weight: 700; font-size: 1.2rem; margin-right: .4rem; }
.game .summary .gloss { display: block; font-size: .85rem; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .game .progress span { transition: none; } }