/* ──────────────────────────────────────────────────────────────────────
   collect.css - shared styling for "name-them-all" COLLECT challenges
   (The Number 10s, The Goalkeepers' Union, …). Each page sets --accent
   inline and provides window.COLLECT_CONFIG; collect.js drives the UI.
   ────────────────────────────────────────────────────────────────────── */
:root {
  --accent:#1F6B3A; --accent-dk:#16502b; --gold:#c8a14a;
  --ink:#181410; --ink-soft:rgba(24,20,16,.55);
  --page:#f6f1e6; --page-edge:#e3d9c4; --radius:4px;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Archivo",system-ui,sans-serif; background:#d9d0be; color:var(--ink); -webkit-font-smoothing:antialiased; }
.hub { max-width:480px; margin:0 auto; min-height:100dvh; background:var(--page); }

.hub-header { background:var(--accent); padding:22px 20px 18px; color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.12); }
.hub-header a.back { font-family:"Archivo"; font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.7); text-decoration:none; }
.hub-header a.back:hover { color:#fff; }
.kicker { display:block; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:12px 0 5px; }
.kicker a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(200,161,74,.5); padding-bottom:1px; }
.hub-header h1 { font-family:"Archivo Black"; font-size:25px; line-height:1.04; }
.hub-sub { font-size:12.5px; color:rgba(255,255,255,.8); margin-top:7px; line-height:1.4; }

.progress-wrap { margin-top:14px; }
.progress-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.progress-count { font-family:"Archivo Black"; font-size:15px; color:#fff; }
.progress-count b { color:var(--gold); }
.progress-timer { font-family:"JetBrains Mono",monospace; font-size:12px; color:rgba(255,255,255,.75); }
.progress-bar { height:7px; background:rgba(255,255,255,.18); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; width:0; background:var(--gold); transition:width .3s ease; }

.guess-dock { position:sticky; top:0; z-index:15; padding:12px 16px; background:var(--page); border-bottom:1px solid var(--page-edge); }
.guess-dock.stuck { box-shadow:0 4px 10px rgba(0,0,0,.06); }
.lg-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 16px; background:#efe7d4; color:var(--ink); text-decoration:none; font-family:"JetBrains Mono",monospace; font-size:11px; border-bottom:1px solid var(--page-edge); }
.lg-bar b { font-family:"Archivo Black",system-ui,sans-serif; }
.lg-bar .arr { color:var(--accent); font-family:"Archivo Black",system-ui,sans-serif; }
.challenge-friends { width:100%; font-family:"Archivo Black",system-ui,sans-serif; font-size:13px; letter-spacing:.01em; color:var(--ink); background:var(--gold); border:none; padding:11px; border-radius:var(--radius); cursor:pointer; margin-bottom:9px; }
.challenge-friends:hover { filter:brightness(1.05); }
.guess-form { display:flex; gap:8px; position:relative; }
.suggestions { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; background:#fff; border:1.5px solid var(--page-edge); border-radius:var(--radius); box-shadow:0 8px 22px rgba(0,0,0,.14); overflow:hidden; max-height:288px; overflow-y:auto; }
.suggestions:empty { display:none; }
.suggestions li { list-style:none; display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; font-size:14px; border-bottom:1px solid #f1ebdd; }
.suggestions li:last-child { border-bottom:none; }
.suggestions li.active, .suggestions li:hover { background:#f4eedd; }
.suggestions li .s-flag { font-size:15px; }
.suggestions li .s-name { font-weight:700; }
.suggestions li .s-nat { margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink-soft); }
.suggestions li.found { opacity:.5; }
.suggestions li.found .s-name::after { content:" ✓"; color:var(--accent); }
#guessInput { flex:1; font-family:"Archivo"; font-size:15px; padding:12px 13px; border:1.5px solid var(--page-edge); border-radius:var(--radius); background:#fff; color:var(--ink); }
#guessInput:focus { outline:none; border-color:var(--accent); }
#guessBtn { font-family:"Archivo Black"; font-size:13px; letter-spacing:.02em; color:#fff; background:var(--accent); border:none; padding:0 18px; border-radius:var(--radius); cursor:pointer; }
#guessBtn:hover { background:var(--accent-dk); }
.feedback { min-height:17px; margin-top:7px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.02em; }
.feedback.ok { color:var(--accent); }
.feedback.dup { color:var(--gold); }
.feedback.no { color:#b04632; }

.body { padding:8px 16px 28px; }
.group { margin-top:16px; }
.group.flat { margin-top:6px; }
.group-head { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--page-edge); padding-bottom:5px; margin-bottom:8px; }
.group-name { font-family:"Archivo Black"; font-size:15px; }
.group-tally { font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-soft); }
.group-tally b { color:var(--accent); }
.slots { display:flex; flex-direction:column; gap:5px; }
.slot { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--radius); border:1px solid var(--page-edge); background:#fff; min-height:42px; }
.slot.empty { background:repeating-linear-gradient(135deg,#fbf7ee,#fbf7ee 7px,#f4eedd 7px,#f4eedd 14px); border-style:dashed; }
.slot .ph { width:30px; height:30px; border-radius:50%; background:#efe7d4; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; overflow:hidden; position:relative; }
.slot .ph img { width:100%; height:100%; object-fit:cover; }
.slot .badge { position:absolute; right:-3px; bottom:-3px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--accent); color:#fff; font-family:"JetBrains Mono",monospace; font-size:9px; line-height:15px; text-align:center; }
.slot .nm { font-family:"Archivo"; font-weight:700; font-size:13.5px; }
.slot .meta { font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink-soft); margin-top:1px; }
.slot.empty .nm { color:transparent; }
.slot.revealed { background:#fdf3f0; border-color:#f0d6cf; }
.slot.revealed .nm { color:#b04632; }
.slot.just-found { animation:pop .4s ease; }
@keyframes pop { 0%{transform:scale(.9);opacity:0;} 60%{transform:scale(1.03);} 100%{transform:scale(1);opacity:1;} }

.actions { display:flex; gap:8px; margin-top:22px; }
.btn { flex:1; font-family:"Archivo Black"; font-size:12px; letter-spacing:.03em; padding:12px; border-radius:var(--radius); cursor:pointer; border:none; }
.btn-share { background:var(--accent); color:#fff; }
.btn-give { background:transparent; color:var(--ink-soft); border:1.5px solid var(--page-edge); }
.btn-give:hover { color:var(--ink); }
.note { text-align:center; font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink-soft); margin-top:16px; line-height:1.5; }
.done-banner { display:none; margin-top:14px; padding:14px; border-radius:var(--radius); background:var(--accent); color:#fff; text-align:center; }
.done-banner h2 { font-family:"Archivo Black"; font-size:17px; }
.done-banner p { font-size:12.5px; color:rgba(255,255,255,.85); margin-top:4px; }