: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 with shimmer placeholder; fades in once loaded; collapses to emoji if it fails */
.photo-wrap { position:relative; width:100%; height:180px; background:var(--sage); overflow:hidden; }
.photo-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
.photo-wrap.broken::after { display:none; }
@keyframes shimmer { 0%{background-position:120% 0;} 100%{background-position:-120% 0;} }
.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) ---------- */
.form.wide { max-width:720px; }
.cats { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; 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) {
  .cats { grid-template-columns:1fr 1fr; gap:6px; }
  .chip { padding:8px; font-size:.76rem; gap:6px; }
  .chip input { width:14px; height:14px; }
  .chip .chip-emoji { font-size:1rem; }
}

/* ---------- mode switch + "one from each" browse list ---------- */
.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; }
}