/* Local fonts: Playfair Display (display) and Manrope (text), SIL Open Font License, see fonts/OFL-*.txt */
@font-face { font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/manrope-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Playfair Display"; font-style:italic; font-weight:400 800; font-display:swap;
  src:url("fonts/playfair-display-italic-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Playfair Display"; font-style:italic; font-weight:400 800; font-display:swap;
  src:url("fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/playfair-display-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/playfair-display-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --bg:#f4f4f5; --card:#fff; --fg:#18181b; --muted:#71717a; --border:#e4e4e7; --accent:#71717a; --gold:#9a7425;
        --font-display:"Playfair Display", Georgia, "Times New Roman", serif; --font-text:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111113; --card:#1c1c1f; --fg:#f4f4f5; --muted:#a1a1aa; --border:#2a2a2e; --gold:#c9a54b; }
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; justify-content:center; background:var(--bg); color:var(--fg);
       font:16px/1.55 var(--font-text); padding:24px 16px; }
main { width:100%; max-width:560px; text-align:center; }
.brand { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 18px; }
.brand img { width:48px; height:48px; }
h1 { font-family:var(--font-display); font-size:2.2rem; font-weight:700; letter-spacing:-.01em; margin:0; line-height:1; }
h1 span { color:var(--gold); font-style:italic; font-weight:500; }

/* Wheel */
.wheel-wrap { position:relative; width:min(320px, 82vw); aspect-ratio:1; margin:0 auto; }
.wheel { width:100%; height:100%; overflow:visible; }
#wheel { transform-origin:150px 150px; transition:transform 3.2s cubic-bezier(.15,.7,.2,1); }
#wheel path { stroke:var(--bg); stroke-width:2; cursor:pointer; }
#wheel text { fill:#fff; font-family:var(--font-display); font-size:15px; font-weight:700; pointer-events:none; letter-spacing:.02em; }
.pointer { fill:var(--fg); }
.hub { position:absolute; left:50%; top:50%; width:30%; aspect-ratio:1; transform:translate(-50%,-50%);
       border-radius:50%; border:3px solid var(--gold); box-shadow:0 0 0 4px var(--bg); background:var(--card); color:var(--fg);
       font-family:var(--font-display); font-size:1.2rem; font-weight:700; cursor:pointer; transition:transform .1s; }
.hub:hover:not(:disabled) { transform:translate(-50%,-50%) scale(1.05); }
.hub:disabled { cursor:wait; }
.hub:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* Direct choice and filters */
.direct { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.direct button { padding:8px 16px; font-family:var(--font-display); font-size:.95rem; font-weight:600; color:#fff; background:var(--btn, #555);
                 border:0; border-radius:999px; cursor:pointer; transition:transform .1s, filter .15s; }
.direct button:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); }
.direct button:disabled { opacity:.4; cursor:not-allowed; }
.filters { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; margin:14px 0 18px; font-size:.85rem; color:var(--muted); }
.filters label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.filters input { accent-color:var(--accent); width:16px; height:16px; }

/* Result */
.card { background:var(--card); border:2px solid var(--border); border-top:8px solid var(--accent); border-radius:16px;
        padding:22px; min-height:150px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px;
        transition:border-color .3s, box-shadow .3s; }
.card.hit { box-shadow:0 8px 32px -12px var(--accent); }
.card img { max-width:100%; max-height:260px; min-height:60px; border-radius:10px; object-fit:cover; background:var(--bg); }
.card a.title { color:var(--fg); font-family:var(--font-display); font-size:1.45rem; font-weight:700; line-height:1.25; text-decoration:none; word-break:break-word; }
.card a.title:hover { text-decoration:underline; }
.card small { color:var(--muted); }
.card .note { font-size:.8rem; color:var(--muted); font-style:italic; }
.card .badge { display:inline-block; font-family:var(--font-text); font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
               color:#fff; background:var(--accent); border-radius:999px; padding:2px 10px; }
.card .error { color:#dc2626; }
.hint { font-size:.75rem; color:var(--muted); margin:8px 0 0; }

/* History */
.history { margin-top:24px; text-align:left; }
.history-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.history h2 { font-family:var(--font-text); font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin:0; }
.ghost { background:none; border:0; color:var(--muted); font-size:.8rem; cursor:pointer; padding:4px 6px; border-radius:6px; }
.ghost:hover { color:var(--fg); background:var(--card); }
.history-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; }
.tile { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-top:4px solid var(--c, #777);
        border-radius:0; padding:0; cursor:pointer; text-align:left; color:var(--fg); overflow:hidden; font:inherit; }
.tile:hover { border-color:var(--c, #777); }
.tile .thumb { width:100%; aspect-ratio:1; object-fit:cover; background:var(--bg); display:flex; align-items:center;
               justify-content:center; color:var(--c, #777); font-family:var(--font-display); font-weight:700; font-size:1.6rem; }
.tile span { font-size:.7rem; line-height:1.25; margin:5px 6px; max-height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

footer { margin-top:28px; color:var(--muted); font-size:.8rem; line-height:1.7; }
footer a { color:inherit; text-decoration-color:var(--gold); text-underline-offset:3px; }
footer a:hover { color:var(--fg); }

@media (prefers-reduced-motion: reduce) {
  #wheel { transition:none; }
  .card, .direct button, .hub { transition:none; }
}

@media (hover: none) {
  .hint { display:none; }
}

/* Language picker */
.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; }
.topbar { display:flex; justify-content:flex-end; margin:-8px 0 4px; }
.lang-select select { appearance:none; -webkit-appearance:none; font:inherit; font-size:.8rem; font-weight:600; color:var(--muted);
  background:transparent; border:1px solid var(--border); border-radius:999px; padding:5px 28px 5px 12px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px; background-repeat:no-repeat; }
.lang-select select:hover { color:var(--fg); border-color:var(--gold); }
.lang-select select option { color:#18181b; background:#fff; }

/* Clean line breaks: no single word alone on the last line */
h1, .card a.title, .card small, .card .note, .hint, footer p, .filters label { text-wrap:balance; }
.card a.title, .card small, .card .note { max-width:42ch; }
footer { max-width:46ch; margin-left:auto; margin-right:auto; }
footer p { margin:0 0 4px; }
.filters label { white-space:nowrap; }