:root{
      --paper:#f6f0e6; --ink:#1b1b1b; --ui:#e3d9c9; --shadow:rgba(0,0,0,.15);
      --accent:#caa16b; --muted:#6b6b6b; --good:#2aa96a; --bad:#d64545;
    }
    *{box-sizing:border-box}
    body{margin:0;color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:transparent}
    .wrap{max-width:1200px;margin:28px auto;padding:0 16px}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
    @media (max-width:980px){.grid{grid-template-columns:1fr}}

    .panel{background:transparent;border:none;border-radius:18px;box-shadow:none;padding:18px}
    .titlebar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
    .titlebar h2{color:#fff}
    .panel{color:#fff}
    .tiny{color:#fff}
    h3{color:#fff}
    .polaroid .label{color:#111}
    button{color:#111}

    .clues{display:grid;gap:14px}
    .clue-row{display:grid;grid-template-columns:64px auto 64px;align-items:center;gap:12px}
    .badge{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:999px;background:radial-gradient(circle at 30% 30%, #ffd8ef, #c8ffe7);border:2px solid #000;box-shadow:0 6px 10px var(--shadow);cursor:pointer;font-weight:800;font-size:24px}
    .badge:focus{outline:3px solid #0003}
    .badge.disabled{opacity:.5; cursor:not-allowed; filter:grayscale(.4)}

    .triplet{display:grid;grid-template-columns:repeat(3,120px);gap:12px}
    .polaroid{background:#fff;border:1px solid #e7e7e7;border-radius:10px;box-shadow:0 6px 14px var(--shadow);overflow:hidden}
    .polaroid .img{width:100%;aspect-ratio:1/1;position:relative;background:#111;display:flex;align-items:center;justify-content:center}
    .polaroid .img img{width:100%;height:100%;object-fit:cover;display:block}
    .unknown::before{content:"?";color:#fff;font-weight:900;font-size:48px}
    .unknown{background:#000 !important;}
    .label{padding:8px 10px;font-weight:900;letter-spacing:.5px;text-align:center}

    .count-pill{justify-self:end;background:#222;color:#fff;padding:6px 10px;border-radius:999px;font-weight:800;box-shadow:0 4px 8px var(--shadow);font-size:24px;min-width:64px;display:grid;place-items:center;text-align:center}

    .picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
    .slot{position:relative;border:2px dashed #bbb;border-radius:14px;background:#faf8f3;min-height:220px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #fff}
    .slot.filled{border:1px solid #ddd}
    .slot.highlight{outline:3px solid #0003}
    .slot .placeholder{color:var(--muted);font-size:13px}
    .slot img{width:100%;height:220px;object-fit:cover}
    .namebar{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));color:#fff;padding:8px 10px;font-size:14px;text-align:center}
    .clear{position:absolute;top:8px;right:8px;background:#000a;color:#fff;border:none;border-radius:8px;padding:4px 6px;cursor:pointer}

    .roster{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:10px}
    @media (max-width:980px){.roster{grid-template-columns:repeat(4,1fr)}}
    .roster .thumb{aspect-ratio:1/1;position:relative;cursor:grab;background:#fff;border:1px solid #e7e7e7;border-radius:10px;box-shadow:0 6px 14px var(--shadow);overflow:hidden}
    .roster .thumb img{width:100%;height:100%;object-fit:cover}
    .marker{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.7);color:#fff;padding:2px 6px;border-radius:8px;font-size:13px;display:none}
    .thumb.mark-x .marker{display:block; background:var(--bad)}
    .thumb.mark-check .marker{display:block; background:var(--good)}

    .controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    button{padding:10px 14px;border-radius:10px;border:1px solid #d9cdbb;background:#fff;color:#111;cursor:pointer;box-shadow:0 6px 14px var(--shadow)}
    button.primary{background:var(--accent);color:#1b1407;border:1px solid #b08a54;font-weight:800}
    button:disabled{opacity:.6;cursor:not-allowed}

    /* Toast (feedback) */
    .toast{margin-top:12px;padding:12px;border-radius:12px;display:none;font-weight:700}
    .toast.good{display:block;background:#e7f7ee;border:1px solid #bfe5cf;color:#196c46}
    .toast.good strong{color:var(--good)}
    .toast.bad{display:block;background:#fde8e8;border:1px solid #f2b7b7;color:#7a1f1f}
    .toast.bad strong{color:var(--bad)}

    /* Modal */
    .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:50}
    .modal{background:#fff;border:1px solid var(--ui);border-radius:14px;box-shadow:0 16px 30px var(--shadow);max-width:520px;width:92%;padding:18px}
    .modal h3{margin:0 0 8px}
    .modal p{margin:0 0 14px;color:#444}
    .modal .buttons{display:flex;gap:10px;justify-content:flex-end}
    .modal-backdrop.show{display:flex}

    /* Solution emphasis */
    .polaroid.guilty .img{outline:4px solid var(--good); box-shadow:0 0 0 3px rgba(42,169,106,.15) inset}
    .polaroid.faded{opacity:.35}