/* =========================================================================
   Shared OopsRead theme for every page and quiz. See DESIGN.md for the rules.
   Load after the Google Fonts link:
   https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=Caveat:wght@600&display=swap
   ========================================================================= */

:root{
  /* neutrals */
  --bg:#ffffff;
  --surface:#f5f5f5;        /* quiet panels, dead/disabled cards (neutral grey, never cream) */
  --ink:#202020;            /* text, strong lines, primary buttons (spec: #202020) */
  --ink-2:#525252;          /* secondary text */
  --ink-3:#8a8a8a;          /* hints, placeholders (large text only) */
  --line:#e5e5e5;           /* hairlines between cards */

  /* the five block colours from the reference, plus green for FREE */
  --pink:#ff4d8d;
  --yellow:#ffc21a;
  --orange:#ff5a1f;
  --blue:#3d7eff;
  --stone:#d4d4d4;          /* neutral grey: dead jobs, disabled states (not a category colour) */
  --violet:#9566ff;
  --green:#22c55e;
  --orange-ink:#c2410c;     /* orange that passes contrast as small text on white */
  --blue-ink:#1d4ed8;

  /* type */
  --font:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans JP",sans-serif;
  --font-display:"Space Grotesk","Noto Sans SC","Noto Sans JP","Noto Sans KR",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-hand:"Caveat","ZCOOL KuaiLe","Zen Maru Gothic","Gaegu","Comic Sans MS",cursive;

  /* shape and space */
  --radius:6px;             /* spec: 4–6px, keeps the blocky look */
  --gap:12px;               /* card gap: 10–12px phones, 16–20px desktop */
  --border:1.5px solid var(--ink);
  --gutter:16px;
  --max:1120px;
  --shadow-pop:4px 4px 0 var(--ink);
}
@media (min-width:720px){ :root{ --gutter:32px; --gap:18px; } }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:800px}

/* ---------- header ---------- */
.site-head{border-bottom:var(--border);background:var(--bg)}
.site-head .wrap{display:flex;align-items:stretch;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding-right:20px}
.logo .mark{display:grid;place-items:center;width:32px;height:32px;background:var(--ink);color:var(--yellow);font-size:20px;font-weight:800;border-radius:var(--radius)}
.logo .play{color:var(--orange)}
.head-cell{display:none;align-items:center;padding:0 20px;border-left:1px solid var(--ink);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.head-end{margin-left:auto;display:flex;align-items:center;gap:8px}
@media (min-width:720px){ .head-cell{display:flex} }
@media (max-width:420px){ .logo{padding-right:6px;font-size:19px;gap:8px} .logo .mark{width:28px;height:28px;font-size:17px} .head-end{gap:6px} .lang-btn{padding:6px 9px} }
.lang{display:flex}
.lang:empty{display:none}
.lang-select{appearance:none;-webkit-appearance:none;font:inherit;font-size:12px;font-weight:700;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23202020' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;border:1.5px solid var(--ink);border-radius:999px;padding:7px 28px 7px 12px;min-height:34px;cursor:pointer}
.lang-btn{white-space:nowrap;border:0;background:var(--bg);padding:6px 11px;font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer;min-height:32px}
.lang-btn.on{background:var(--ink);color:#fff}

/* ---------- type ---------- */
.display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;font-size:clamp(34px,7.5vw,64px)}
.display em{font-style:normal;color:var(--orange)}
.h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(22px,4vw,28px);line-height:1.1}
.label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.lead{font-size:17px;color:var(--ink-2);max-width:56ch}
.hand{font-family:var(--font-hand);font-size:26px;line-height:1.1;color:var(--ink)}
.marker{background:linear-gradient(transparent 55%,var(--yellow) 55%);padding:0 2px}

/* ---------- tags ---------- */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius);color:var(--ink);background:var(--stone);line-height:1}
.tag-free{background:var(--green)}
.tag-premium{background:var(--yellow)}
.tag-duo{background:var(--pink)}
.tag-new{background:var(--blue);color:#fff}
.tag-outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.tag-pink{background:var(--pink)} .tag-yellow{background:var(--yellow)} .tag-orange{background:var(--orange)} .tag-blue{background:var(--blue)} .tag-violet{background:var(--violet)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:var(--border);border-radius:var(--radius);background:var(--bg);color:var(--ink);font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-pop)}
.btn:active{transform:none;box-shadow:none}
.btn-primary{background:var(--ink);color:#fff}
.btn-yellow{background:var(--yellow)}
.btn-pill{border-radius:999px}
.btn-round{width:46px;padding:0;border-radius:50%}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-sm{min-height:34px;padding:0 12px;font-size:12px;white-space:nowrap}

/* sign-in dialog */
dialog.sheet{margin:auto;width:min(440px,calc(100% - 32px));padding:24px;border:var(--border);border-radius:var(--radius);background:var(--bg);color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
dialog.sheet::backdrop{background:rgba(20,20,20,.35)}
.sheet-text{color:var(--ink-2);margin:10px 0 18px}
.sheet-form{display:grid;gap:8px}
.sheet-msg{min-height:1.4em;font-size:14px;font-weight:600;color:var(--orange-ink)}
.sheet-msg.ok{color:var(--blue-ink)}
@media (max-width:719px){ dialog.sheet{margin:auto auto 0;width:100%;max-width:none;box-shadow:none;border-width:1.5px 0 0} }

/* ---------- chips (filters) ---------- */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--bg);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);color:#fff}

/* ---------- inputs ---------- */
.input{width:100%;min-height:54px;padding:0 16px;font-size:17px;border:var(--border);border-radius:var(--radius);background:var(--bg);outline:none}
.input::placeholder{color:var(--ink-3)}
.input:focus{box-shadow:var(--shadow-pop)}

/* ---------- cards ---------- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.card-strong{border:var(--border)}
.tile{position:relative;display:flex;flex-direction:column;min-height:220px;padding:20px;color:var(--ink);text-decoration:none;border-radius:var(--radius)}
.tile .letter{font-family:var(--font-display);font-size:72px;font-weight:700;line-height:.8}
.tile .name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:18px}
.tile .go{margin-top:auto;font-size:22px}

/* colour fills, for tiles and card art */
.bg-pink{background:var(--pink)} .bg-yellow{background:var(--yellow)} .bg-orange{background:var(--orange)} .bg-blue{background:var(--blue)} .bg-stone{background:var(--stone)} .bg-violet{background:var(--violet)} .bg-green{background:var(--green)}

/* quiz card: colour art on top, white body below */
.qcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .12s,box-shadow .12s,border-color .12s}
a.qcard:hover{border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:var(--shadow-pop)}
.qcard-art{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-bottom:1px solid var(--line)}
.qcard-art .tags{position:absolute;top:10px;left:10px;right:10px;z-index:1}
.qcard-art .tag{box-shadow:inset 0 0 0 1.5px var(--ink)}
.qcard-art .illo{width:50%;max-height:72%;margin-top:18px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))}
.qcard-art .ph{font-size:96px;font-weight:900;line-height:1;color:var(--ink);opacity:.9}
.tile .ico .illo{width:96px;height:96px;object-fit:contain}
.qcard-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.qcard-title{font-size:17px;font-weight:800;line-height:1.25}
.qcard-blurb{font-size:14px;color:var(--ink-2)}
.qcard-meta{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.qcard.soon .qcard-art .illo,.qcard.soon .qcard-art .ph{opacity:.55}
.qcard.soon{cursor:default}

/* =========================================================================
   Quiz cards (spec: one record per quiz, three components)
   .qc-large  Featured / editor's pick   ~2:3 feel, big initial + hook + big art
   .qc-medium Standard / New & popular    ~4:5, title + small art + hook
   .qc-small  Compact / catalogue, search horizontal row ~3:1
   The card colour comes from the quiz record via --c.
   ========================================================================= */
.qc{position:relative;display:flex;color:var(--ink);text-decoration:none;border-radius:var(--radius);background:var(--c,#eee);transition:transform .18s ease,box-shadow .18s ease}
a.qc:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(32,32,32,.45)}
.qc .go{display:inline-grid;place-items:center;width:28px;height:28px;transition:transform .18s ease}
.qc .go svg{width:20px;height:20px}
a.qc:hover .go{transform:translate(3px,-3px)}
.qc .meta{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.qc .hook{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.qc .art{display:block;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.08))}
.qc .ph{font-family:var(--font-display);font-weight:700;line-height:.8;opacity:.9}
.qc .pills{display:flex;flex-wrap:wrap;gap:5px}
.qc .pill{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:4px;background:rgba(255,255,255,.85);color:var(--ink)}
.qc .pill.soon{background:var(--ink);color:#fff}
.qc[aria-disabled="true"]{cursor:default}

.qc-large{flex-direction:column;gap:18px;padding:24px;min-height:540px}
.qc-large .head{display:flex;gap:14px;align-items:flex-start}
.qc-large .initial{font-family:var(--font-display);font-weight:700;font-size:clamp(96px,12vw,140px);line-height:.74;letter-spacing:-.04em}
.qc-large .name{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,36px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.qc-large .hook{font-size:13px;margin-top:12px;line-height:1.45}
.qc-large .stage{flex:1;display:grid;place-items:center;min-height:220px}
.qc-large .art{width:min(320px,78%);max-height:320px}
.qc-large .ph{font-size:180px}
.qc-large .foot{display:flex;justify-content:space-between;align-items:center}
.qc-large .end{display:flex;align-items:center;gap:8px}

.qc-medium{flex-direction:column;gap:10px;padding:14px;min-height:250px;min-width:0}
@media (min-width:720px){ .qc-medium{padding:18px;aspect-ratio:4/5;min-height:300px} }
.qc-medium .name{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,24px);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
.qc-medium .stage{flex:1;display:grid;place-items:center;min-height:0}
.qc-medium .art{width:min(160px,72%);max-height:150px}
.qc-medium .ph{font-size:110px}
.qc-medium .hook{font-size:11px;line-height:1.4}
.qc-medium .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.qc-medium .end{display:flex;align-items:center;gap:6px;flex:none}

.qc-list{display:grid;gap:0 var(--gap);border-top:1px solid var(--line)}
@media (min-width:860px){ .qc-list{grid-template-columns:1fr 1fr} }
.qc-small{background:#fff;align-items:center;gap:14px;padding:12px 6px;border-radius:0;border-bottom:1px solid var(--line)}
a.qc-small:hover{transform:none;box-shadow:none;background:#fafafa}
.qc-small .tile-ic{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:var(--radius);background:var(--c)}
.qc-small .art{width:46px;height:46px}
.qc-small .ph{font-size:30px}
.qc-small .txt{flex:1;min-width:0}
.qc-small .name{font-weight:600;font-size:15px;line-height:1.3}
.qc-small .meta{margin-top:3px;color:var(--ink-2);font-size:11px}
.qc-small .pills{margin-top:5px}
.qc-small .pill{background:var(--surface)}

/* taped paper note */
.note{position:relative;background:var(--surface);padding:22px 18px 18px;border-radius:var(--radius);box-shadow:0 1px 0 var(--line)}
.note::before{content:"";position:absolute;top:-10px;left:50%;width:84px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(92,196,127,.55)}

/* decorative asterisk; put an inline SVG or the ✳ glyph inside */
.spark{display:inline-block;color:var(--pink);width:40px;height:40px;line-height:0}
.spark svg{width:100%;height:100%}

/* ---------- footer ---------- */
.site-foot{margin-top:auto;border-top:var(--border)}
.site-foot .wrap{display:grid;gap:0;padding:0}
.foot-block{padding:24px var(--gutter)}
.foot-yellow{background:var(--yellow)}
.foot-small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
@media (min-width:720px){ .site-foot .wrap{grid-template-columns:1fr 1fr;padding:0 var(--gutter)} }

/* ---------- Chinese / Japanese / Korean ---------- */
/* no fake italics or wide letter-spacing on CJK; slightly looser line-height */
:lang(zh) .display,:lang(ja) .display,:lang(ko) .display{line-height:1.12;letter-spacing:0}
:lang(ja) h1,:lang(ko) h1,:lang(zh) h1{letter-spacing:-.01em}
:lang(zh) em,:lang(ja) em,:lang(ko) em{font-style:normal}
:lang(zh) .label,:lang(zh) .tag,:lang(zh) .chip,:lang(zh) .btn,:lang(ja) .label,:lang(ja) .tag,:lang(ja) .chip,:lang(ja) .btn,:lang(ko) .label,:lang(ko) .tag,:lang(ko) .chip,:lang(ko) .btn{letter-spacing:.02em}
:lang(zh) body,:lang(ja) body{line-height:1.7}
:lang(ko) body{line-height:1.65;word-break:keep-all}

/* ---------- motion ---------- */
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }


/* ---------- phones: comfortable tap targets (40px+) without changing the desktop look ---------- */
.qc .pill{font-size:11px}
@media (max-width:719px){
  .btn-sm{min-height:40px}
  .chip{min-height:40px}
  .lang-select{min-height:40px}
  body a.tag{min-height:34px;padding:0 12px;font-size:12px}
  body .sharerow a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px}
  body .sharerow{gap:8px}
}
@media (max-width:719px){
  body .sharerow a{min-width:44px;justify-content:center}
  body #pretend{min-height:40px}
}