:root {
  --teal: #0D6E6E; --teal-dark: #0A5555; --coral: #FF6B5B; --cream: #FAF8F5;
  --charcoal: #2D2D2D; --sage: #E8F0EC; --gold: #E8B84A; --white: #FFFFFF; --border: #E4DED4;
  --ink-strong: #4A453F; --ink-soft: #6B655D;
}
* { box-sizing:border-box; margin:0; }
body { font-family:'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--cream); color:var(--charcoal); min-height:100dvh; display:flex; justify-content:center; padding:24px 16px 40px; }
#app { width:100%; max-width:880px; }
.head { text-align:center; margin-bottom:22px; }
.head h1 { font-size:1.9rem; font-weight:800; color:var(--charcoal); }
.head h1 .dot { color:var(--coral); }
.head .sub { color:var(--ink-soft); margin-top:8px; font-size:.95rem; line-height:1.5; font-weight:600; }
.sub strong { color:var(--teal); }
.stage { display:flex; gap:18px; }
.stage .card { flex:1; }
.head.compact { margin-bottom:14px; }
.turn { color:var(--ink-soft); font-size:.92rem; font-weight:600; }
.turn strong { color:var(--teal); }
.card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:0 0 18px; text-align:center; display:flex; flex-direction:column; gap:9px; overflow:hidden; box-shadow:0 1px 3px rgba(45,45,45,.06); min-width:0; }
.card.champion { border:2px solid var(--teal); box-shadow:0 6px 20px rgba(13,110,110,.16); }
.badge { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding-top:13px; }
.card.champion .badge { color:var(--teal); }

/* photo: a soft placeholder that pulses ONLY while the image is downloading, then gets
   out of the way completely (it used to be a sweeping shimmer that kept animating on top
   of the loaded photo — fixed 2026-10-11). Collapses to the emoji if the image fails. */
.photo-wrap { position:relative; width:100%; height:180px; background:var(--sage); overflow:hidden; }
.photo-wrap::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.5); animation:pulse 1.3s ease-in-out infinite; }
.photo-wrap.loaded::after, .photo-wrap.broken::after { display:none; animation:none; }
@keyframes pulse { 0%,100% { opacity:.22; } 50% { opacity:.85; } }
@media (prefers-reduced-motion: reduce) { .photo-wrap::after { animation:none; opacity:.4; } }
.photo { position:relative; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .3s ease; }
.photo.loaded { opacity:1; }

.emoji { font-size:2.4rem; line-height:1; min-height:2.4rem; }
h2 { font-size:1.15rem; line-height:1.3; font-weight:700; color:var(--charcoal); padding:0 14px; }
.meta { color:var(--ink-strong); font-size:.88rem; line-height:1.55; padding:0 14px; }
button { margin-top:auto; background:var(--teal); color:#fff; border:0; border-radius:999px; padding:12px 20px; font-size:1rem; font-weight:800; cursor:pointer; transition:background .15s, transform .15s, box-shadow .15s; margin-left:14px; margin-right:14px; }
button:hover { background:var(--teal-dark); transform:translateY(-1px); box-shadow:0 4px 14px rgba(13,110,110,.35); }
.status { text-align:center; color:var(--ink-soft); margin-top:12px; min-height:1.3em; font-weight:600; font-size:.9rem; }
.winner-card { max-width:380px; border:2px solid var(--teal); margin:0 auto; }
.winner-card .badge { color:var(--teal); }
.form { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:26px 22px; max-width:440px; margin:18px auto 0; display:flex; flex-direction:column; gap:14px; text-align:center; box-shadow:0 1px 3px rgba(45,45,45,.06); }
.form label { display:flex; flex-direction:column; gap:6px; text-align:left; color:var(--ink-soft); font-size:.85rem; font-weight:700; }
.form input { background:var(--cream); border:1px solid var(--border); border-radius:10px; color:var(--charcoal); padding:11px 12px; font-size:1rem; font-family:inherit; }
.form input:focus { outline:2px solid var(--teal); background:var(--white); }
.hint { color:var(--ink-soft); font-size:.85rem; line-height:1.55; font-weight:600; }
button.primary { margin-top:4px; }
.final { justify-content:center; gap:18px; }
.details { color:var(--teal); font-weight:700; font-size:.9rem; text-decoration:none; padding:0 14px; }
.details:hover { text-decoration:underline; }

/* ---------- category picker (step 2, after the name) — a LIST, one row per category ---------- */
.form.wide { max-width:720px; }
.cats { display:flex; flex-direction:column; gap:6px; margin:2px 0 4px; }
.chip { display:flex; align-items:center; gap:8px; background:var(--cream); border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-weight:700; font-size:.9rem; color:var(--charcoal); cursor:pointer; text-align:left; transition:opacity .15s, border-color .15s; }
.chip:hover { border-color:var(--teal); }
.chip input { width:17px; height:17px; accent-color:var(--teal); flex:0 0 auto; }
.chip .chip-emoji { font-size:1.15rem; line-height:1; }
.chip .chip-name { flex:1 1 auto; }
.chip .chip-n { color:var(--ink-soft); font-size:.78rem; font-weight:800; }
.chip.off { opacity:.42; }
.cat-actions { display:flex; gap:8px; justify-content:center; }
button.mini { background:var(--sage); color:var(--teal); border:1px solid var(--border); border-radius:999px; padding:7px 14px; font-size:.85rem; font-weight:800; margin:0; }
button.mini:hover { background:var(--white); transform:none; box-shadow:none; }
button.primary:disabled { background:var(--border); color:var(--ink-soft); cursor:not-allowed; transform:none; box-shadow:none; }
@media (max-width: 700px) {
  .chip { padding:9px 10px; font-size:.82rem; gap:7px; }
  .chip input { width:16px; height:16px; }
  .chip .chip-emoji { font-size:1.05rem; }
}

/* ---------- the two ways to play (step 3) ---------- */
.modebtn { display:block; width:100%; text-align:left; background:var(--white); color:var(--charcoal); border:1px solid var(--border); border-radius:14px; padding:16px 18px; font-size:1rem; font-weight:800; margin:0; line-height:1.35; box-shadow:0 1px 3px rgba(45,45,45,.06); }
.modebtn:hover { border-color:var(--teal); background:var(--sage); }
.modebtn .mode-sub { display:block; font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-top:5px; }
.skipwrap { text-align:center; margin-top:10px; }
.skipwrap button { margin:0; }

/* ---------- mode switch + list-mode browse rows ---------- */
.mode { display:flex; gap:8px; margin-bottom:4px; }
.mode button { flex:1 1 0; background:var(--white); color:var(--ink-soft); border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:.85rem; font-weight:800; margin:0; text-align:left; line-height:1.3; }
.mode button.on { border:2px solid var(--teal); color:var(--teal); background:var(--sage); }
.mode .mode-sub { display:block; font-size:.7rem; font-weight:600; color:var(--ink-soft); margin-top:3px; }
.rows { display:flex; flex-direction:column; gap:8px; }
.rowitem { display:flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--border); border-radius:12px; padding:8px 10px; text-align:left; box-shadow:0 1px 3px rgba(45,45,45,.06); }
.rowitem.chosen { border:2px solid var(--teal); }
.thumb { width:54px; height:54px; border-radius:9px; flex:0 0 auto; overflow:hidden; background:var(--sage); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-emoji { display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.row-txt { flex:1 1 auto; min-width:0; }
.row-txt h3 { font-size:.9rem; font-weight:700; line-height:1.25; }
.row-txt .meta { font-size:.74rem; padding:0; line-height:1.35; }
.row-txt .details { font-size:.74rem; padding:0; }
button.rowpick { flex:0 0 auto; background:var(--teal); color:#fff; border:0; border-radius:999px; padding:9px 15px; font-size:.82rem; font-weight:800; margin:0; }
.catfoot { padding:14px 16px; }
.catbar { display:flex; gap:8px; justify-content:space-between; align-items:center; }
button.mini.skip { background:var(--white); color:var(--coral); border-color:var(--coral); }
.picksum { font-size:1rem; font-weight:800; color:var(--charcoal); }
.pickrow { font-size:.88rem; line-height:1.5; }
@media (max-width: 700px) {
  .mode { flex-direction:column; gap:6px; }
  .mode button { padding:9px 10px; font-size:.78rem; }
  .rowitem { gap:8px; padding:7px 8px; }
  .thumb { width:44px; height:44px; }
  .row-txt h3 { font-size:.8rem; }
  .row-txt .meta, .row-txt .details { font-size:.68rem; }
  button.rowpick { padding:9px 11px; font-size:.75rem; }
  .catbar { flex-direction:column-reverse; gap:6px; }
  .catbar button { width:100%; }
}

/* ---------- mobile: cards STACKED up/down, both fit ONE screen ---------- */
@media (max-width: 700px) {
  body { padding:10px 8px 14px; }
  .head { margin-bottom:8px; }
  .head h1 { font-size:1.25rem; }
  .head .sub { font-size:.76rem; margin-top:3px; }
  .head.compact { margin-bottom:6px; }
  .turn { font-size:.76rem; }
  .stage { flex-direction:column; gap:8px; }
  .card { gap:5px; border-radius:12px; padding-bottom:10px; }
  .badge { font-size:.55rem; letter-spacing:.04em; padding-top:7px; }
  .photo-wrap { height:clamp(110px, 24vh, 190px); }
  h2 { font-size:.9rem; line-height:1.25; padding:0 8px; }
  .meta { font-size:.72rem; line-height:1.4; padding:0 8px; }
  .details { font-size:.72rem; padding:0 8px; }
  button { font-size:.85rem; padding:10px 8px; margin:6px 8px 0; }
  .status { font-size:.75rem; margin-top:8px; }
  .emoji { font-size:1.6rem; min-height:1.6rem; }
  .form { padding:18px 14px; margin-top:12px; }
  .winner-card { max-width:100%; }

  /* --- DYNAMIC FIT: only while duelling. The page is locked to one viewport,
         the two cards split the leftover height, and the photo (the only elastic
         element) absorbs the slack and shrinks before anything else moves. Text is
         line-clamped so the two buttons can never be pushed off screen.
         Start / final screens keep normal scrolling. --- */
  body.playing { height:100dvh; overflow:hidden; }
  body.playing #app { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  body.playing .head, body.playing .status { flex:0 0 auto; }
  body.playing .status { margin-top:6px; }
  body.playing .stage { flex:1 1 auto; min-height:0; }
  body.playing .stage .card { flex:1 1 0; min-height:0; overflow:hidden; }
  body.playing .photo-wrap { flex:1 1 auto; min-height:0; height:auto; }
  body.playing .badge, body.playing h2, body.playing .meta,
  body.playing .details, body.playing button, body.playing .emoji { flex:0 0 auto; }
  body.playing h2 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  body.playing .meta { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}