:root{
  --paper:#f6f0e6; --ink:#1b1b1b; --ui:#e3d9c9; --shadow:rgba(0,0,0,.15);
  --accent:#caa16b; --muted:#6b6b6b; --good:#2aa96a; --bad:#d64545;
}

/* Scope EVERYTHING under .cc-game to avoid site-wide side effects */
.cc-game *{ box-sizing:border-box }

/* Background image lives on the game root (set by JS from data-background) */
.cc-game{
  position:relative;
  margin:0;
  color:var(--ink);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

.cc-wrap{ max-width:1200px; margin:28px auto; padding:0 16px }

/* Grid */
.cc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
@media (max-width:980px){ .cc-grid{ grid-template-columns:1fr } }

/* Panels & text color on transparent bg */
.cc-panel{ background:transparent; border:none; border-radius:18px; box-shadow:none; padding:18px; color:#fff }
.cc-titlebar{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.cc-titlebar h2, .cc-tiny, .cc-panel h3{ color:#fff }

/* Keep card labels dark for readability on white polaroids */
.cc-polaroid .cc-label{ color:#111 }

/* Buttons default */
.cc-btn{ padding:10px 14px; border-radius:10px; border:1px solid #d9cdbb; background:#fff; color:#111; cursor:pointer; box-shadow:0 6px 14px var(--shadow) }
.cc-btn.cc-primary{ background:var(--accent); color:#1b1407; border:1px solid #b08a54; font-weight:800 }
.cc-btn:disabled{ opacity:.6; cursor:not-allowed }

/* Clues */
.cc-clues{ display:grid; gap:14px }
.cc-clue-row{ display:grid; grid-template-columns:64px auto 64px; align-items:center; gap:12px }
.cc-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 }
.cc-badge:focus{ outline:3px solid #0003 }
.cc-badge.disabled{ opacity:.5; cursor:not-allowed; filter:grayscale(.4) }

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

.cc-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 (drag & drop) */
.cc-picker{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px }
.cc-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 }
.cc-slot.filled{ border:1px solid #ddd }
.cc-slot.highlight{ outline:3px solid #0003 }
.cc-slot .cc-placeholder{ color:var(--muted); font-size:13px }
.cc-slot img{ width:100%; height:220px; object-fit:cover }
.cc-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 }
.cc-clear{ position:absolute; top:8px; right:8px; background:#000a; color:#fff; border:none; border-radius:8px; padding:4px 6px; cursor:pointer }

/* Roster */
.cc-roster{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-top:10px }
@media (max-width:980px){ .cc-roster{ grid-template-columns:repeat(4,1fr) } }
.cc-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 }
.cc-thumb img{ width:100%; height:100%; object-fit:cover }
.cc-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 }
.cc-thumb.mark-x .cc-marker{ display:block; background:var(--bad) }
.cc-thumb.mark-check .cc-marker{ display:block; background:var(--good) }

/* Controls & toast */
.cc-controls{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }

.cc-toast{ margin-top:12px; padding:12px; border-radius:12px; display:none; color:#000 }
.cc-toast.good{ display:block; background:#e7f7ee; border:1px solid #bfe5cf }
.cc-toast.bad{ display:block; background:#fde8e8; border:1px solid #f2b7b7 }

/* Modal */
.cc-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; z-index:9999 }
.cc-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 }
.cc-modal h3{ margin:0 0 8px }
.cc-modal p{ margin:0 0 14px; color:#444 }
.cc-buttons{ display:flex; gap:10px; justify-content:flex-end }
.cc-modal-backdrop.show{ display:flex }

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

/* === FORCE Submit button style (green fill, black outline/text) === */
.cc-game .cc-btn.cc-primary[data-role="submit"],
.cc-game .cc-btn[data-role="submit"]{
  background-color: #adf500 !important;  /* green */
  color: #000 !important;                 /* black text */
  border: 2px solid #000 !important;      /* black outline */
  box-shadow: none !important;
  opacity: 1 !important;                  /* kill any fade */
  filter: none !important;
}

/* Keep the same style even when disabled (can’t click until requirements met) */
.cc-game .cc-btn.cc-primary[data-role="submit"]:disabled,
.cc-game .cc-btn[data-role="submit"]:disabled,
.cc-game .cc-btn.cc-primary[data-role="submit"][disabled],
.cc-game .cc-btn[data-role="submit"][disabled]{
  background-color: #adf500 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  opacity: 1 !important;                  /* no semi-transparency */
  cursor: not-allowed;
}