/* Scope EVERYTHING inside #rrRoot .rr_app */
#rrRoot .rr_app {
  --bg-start: #6a11cb;
  --bg-end: #2575fc;
  --accent: #d64806;
  --accent-2: #7b61ff;
  --ink: #202124;
  --ink-muted: #6b7280;
  --card: #ffffff;
  --chip: #f4f5fb;
  --outline: rgba(32,33,36,.08);
  --shadow: 0 8px 24px rgba(0,0,0,0.12);
  --radius: 16px;
  --ring: 0 0 0 3px rgba(123,97,255,.25);
  --grad-c: linear-gradient(135deg, #8EC5FC, #E0C3FC);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
}

/* Base layout */
#rrRoot .rr_app { background: linear-gradient(135deg, var(--bg-start), var(--bg-end)); min-height: 100vh; display: flex; align-items: stretch; justify-content: center; }
#rrRoot .rr_app .screen { background: rgba(255,255,255,0.96); width: min(1100px, 96vw); margin: 24px auto; border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 3vw, 32px); display: none; flex-direction: column; align-items: center; justify-content: center; }
#rrRoot .rr_app .screen.active { display: flex; }
#rrRoot .rr_app .hidden { display: none !important; }

#rrRoot .rr_app h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; text-align: center; }
#rrRoot .rr_app h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 800; text-align: center; margin-bottom: 12px; }
#rrRoot .rr_app h3 { font-weight: 700; }
#rrRoot .rr_app .muted { color: var(--ink-muted); }

/* Buttons */
#btnStart{ font-size: 2rem; }
#rrRoot .rr_app .btn-primary,
#rrRoot .rr_app .btn-secondary,
#rrRoot .rr_app .btn-ghost,
#rrRoot .rr_app .btn-hero,
#rrRoot .rr_app .skill-btn {
  border: none; border-radius: 12px; padding: 12px 20px; font-weight: 700; font-size: 1.2rem; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease; box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
#rrRoot .rr_app .btn-primary { background: var(--accent); color: #fff; }
#rrRoot .rr_app .btn-primary:hover { transform: translateY(-1px); }
#rrRoot .rr_app .btn-secondary { background: var(--accent-2); color: #fff; }
#rrRoot .rr_app .btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--outline); }
#rrRoot .rr_app .btn-ghost.small { padding: 8px 14px; font-weight: 600; }
#rrRoot .rr_app .btn-hero { background: linear-gradient(135deg, #7b61ff, #4cc9f0); color: white; width: 100%; padding: 16px 24px; font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
#rrRoot .rr_app .btn-primary.sm { padding: 10px 16px; font-size: .95rem; }

/* Cover */
#rrRoot .rr_app .cover { width: min(640px, 90%); border-radius: 12px; margin: 10px auto 20px; }

/* Skill search */
#rrRoot .rr_app .skill-search { display: flex; align-items: center; gap: 10px; width: min(720px, 95%); margin: 14px auto; padding: 8px 12px; background: #fff; border-radius: 12px; border: 2px solid var(--outline); }
#rrRoot .rr_app .skill-search input { width: 100%; border: none; outline: none; font-size: 1rem; background: transparent; }

/* Sections & grid */
#rrRoot .rr_app .skill-section { width: 100%; margin-top: 12px; }
#rrRoot .rr_app .section-header { display: flex; align-items: baseline; gap: 8px; margin: 8px 6px; background-color: #fff !important; }
#rrRoot .rr_app .skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; width: 100%; }
#rrRoot .rr_app .skill-btn { background: #fff; color: var(--ink); border: 2px solid var(--outline); font-weight: 800; min-height: 64px; }
#rrRoot .rr_app .skill-btn:hover{ background:#b6fffe !important; }
#rrRoot .rr_app .skill-btn[data-skill].active { background: var(--accent-2); color:#fff; }

/* Custom set card */
#rrRoot .rr_app .custom-card { background: var(--grad-c); color: #1a1a1a; border: none; padding: 14px; border-radius: 14px; min-height: 120px; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; box-shadow: var(--shadow); }
#rrRoot .rr_app .custom-card .title { font-weight: 800; line-height: 1.2; }
#rrRoot .rr_app .custom-card .meta { font-size: .85rem; color:#2c2c2c; }
#rrRoot .rr_app .unsaved-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border: 1px dashed var(--outline); color: var(--ink-muted); padding: 6px 10px; border-radius: 999px; margin: 8px 6px; }

/* Builder */
#rrRoot .rr_app .builder-card { width: min(900px, 96%); background: #fff; border-radius: 16px; border: 2px solid var(--outline); box-shadow: var(--shadow); padding: 16px; }
#rrRoot .rr_app .label { font-weight: 600; margin: 8px 0 4px; display: block; }
#rrRoot .rr_app .input, #rrRoot .rr_app .textarea { width: 100%; border-radius: 12px; border: 2px solid var(--outline); padding: 12px; font-size: 1rem; outline: none; }
#rrRoot .rr_app .input:focus, #rrRoot .rr_app .textarea:focus { box-shadow: var(--ring); border-color: #a99bff; }

/* Tabs */
#rrRoot .rr_app .tabs { display: inline-flex; border-radius: 12px; background: var(--chip); padding: 4px; margin: 10px 0; }
#rrRoot .rr_app .tab { background: transparent; border: none; padding: 8px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; }
#rrRoot .rr_app .tab.active { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
#rrRoot .rr_app .panel { display: none; }
#rrRoot .rr_app .panel.show { display: block; }
#rrRoot .rr_app .mc-grid { display: grid; gap: 8px; margin: 8px 0; }
#rrRoot .rr_app .mc-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }

/* Items list */
#rrRoot .rr_app .items-wrap { margin-top: 10px; }
#rrRoot .rr_app .items { list-style: none; padding: 0; display: grid; gap: 8px; }
#rrRoot .rr_app .item { background: #fff; border: 2px solid var(--outline); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
#rrRoot .rr_app .item .tag { background: var(--chip); padding: 4px 8px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
#rrRoot .rr_app .item .delete { background: transparent; border: none; color: #b42323; font-weight: 700; cursor: pointer; }

/* Modal (generic) */
#rrRoot .rr_app .modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center; z-index: 9999; }
#rrRoot .rr_app .modal.show { display: flex !important; }
#rrRoot .rr_app .modal-card { width: min(560px, 92vw); background: #fff; border-radius: 16px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
#rrRoot .rr_app .modal-actions { display: flex !important; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Namespaced hard modal (login/save/submit) */
#rrRoot .rr_app .rr-modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center; z-index: 99999; }
#rrRoot .rr_app .rr-modal.show { display: flex !important; }
#rrRoot .rr_app .rr-modal-card { width: min(560px, 92vw); background: #fff; border-radius: 16px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }

/* Count screen */
#rrRoot .rr_app .center-card { width: min(640px, 95%); background: #fff; border-radius: 16px; border: 2px solid var(--outline); box-shadow: var(--shadow); padding: 16px; text-align: center; }
#rrRoot .rr_app .segmented { display: inline-grid; grid-template-columns: repeat(3, 64px); gap: 6px; margin: 12px 0; }
#rrRoot .rr_app .segmented input { display: none; }
#rrRoot .rr_app .segmented label { background: var(--chip); border: 2px solid var(--outline); border-radius: 12px; padding: 10px 0; font-weight: 800; cursor: pointer; user-select: none; }
#rrRoot .rr_app .segmented input:checked + label { background: var(--accent-2); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(123,97,255,.35); }

/* Setup cards */
#rrRoot .rr_app .cards { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
#rrRoot .rr_app .playerRow { background: #fff; border: 2px solid var(--outline); border-radius: 14px; padding: 10px; display: grid; gap: 8px; text-align: center; }
#rrRoot .rr_app .playerRow .toggle { display: inline-grid; grid-auto-flow: column; gap: 6px; justify-content: center; }
#rrRoot .rr_app .playerRow .toggle button { border-radius: 999px; padding: 6px 10px; border: 2px solid var(--outline); background: var(--chip); font-weight: 700; cursor: pointer; }
#rrRoot .rr_app .playerRow .toggle button.active { background: var(--accent-2); color: #fff; border-color: transparent; }
#rrRoot .rr_app .playerRow .nameInput { width: 90%; margin: auto; }

/* Avatars */
#rrRoot .rr_app .avatar-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; max-height: 65vh; overflow: auto; }
#rrRoot .rr_app .avatar-grid img { width: 100%; height: 110px; object-fit: cover; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: pointer; transition: transform .12s, box-shadow .12s; }
#rrRoot .rr_app .avatar-grid img:hover, #rrRoot .rr_app .avatar-grid img:focus { outline: 3px solid #6dd3ff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }

/* Order list */
#rrRoot .rr_app .order-list { list-style: none; padding: 0; width: min(640px, 95%); display: grid; gap: 8px; }
#rrRoot .rr_app .order-list li { background: #fff; border: 2px solid var(--outline); border-radius: 12px; padding: 8px 12px; display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; }
#rrRoot .rr_app .order-list img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
#rrRoot .rr_app .order-list .badge { width: 28px; height: 28px; border-radius: 999px; background: var(--accent-2); color: #fff; display: grid; place-items: center; font-weight: 800; }

/* Header in-game */
#rrRoot .rr_app .turn-header { margin: 10px auto; padding: 8px 12px; background: rgba(255,255,255,0.98); display: flex; justify-content: space-between; align-items: center; border-radius: 12px; width: min(980px, 95%); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
#rrRoot .rr_app .current { display: flex; align-items: center; gap: 8px; }
#rrRoot .rr_app #currentAvatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
#rrRoot .rr_app #currentName { font-weight: 700; }

/* Roller + MC */
#rrRoot .rr_app .roller { font-size: 6rem; font-weight: 900; color: #333; }
#rrRoot .rr_app .reading { font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 700; }
#rrRoot .rr_app .mc-options { display: grid; gap: 8px; margin-top: 10px; }
#rrRoot .rr_app .mc-option { border: 2px solid var(--outline); border-radius: 12px; padding: 10px; background: #fff; cursor: pointer; text-align: left; }
#rrRoot .rr_app .mc-option.correct { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
#rrRoot .rr_app .mc-option.wrong { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.2); }

/* Board */
#rrRoot .rr_app #board-wrapper { position: relative; margin: 10px auto; background: linear-gradient(135deg, #ff0080, #8000ff); border-radius: 16px; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; aspect-ratio: 11 / 6; }
#rrRoot .rr_app #board-wrapper::before { content: "Z"; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); font-size: 25vw; color: rgba(255,255,255,.15); font-weight: 800; pointer-events: none; }
#rrRoot .rr_app #board-wrapper::after { content: "ABZ Learning"; position: absolute; top: 55%; left: 50%; transform: translate(-50%,-50%); font-size: 3vw; color: rgba(255,255,255,.8); font-weight: 600; pointer-events: none; white-space: nowrap; }
#rrRoot .rr_app #board { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(11,1fr); grid-template-rows: repeat(6,1fr); gap: 6px; position: relative; }
#rrRoot .rr_app #board .square { background: #fff; border: 3px solid #222; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 4px; font-weight: 800; }
#rrRoot .rr_app #board .square.start { background: #ffeaa7; }
#rrRoot .rr_app #board .square.finish { background: #74b9ff; color: #fff; }
#rrRoot .rr_app #board .square.event-forward { background: #55efc4; color: #fff; }
#rrRoot .rr_app #board .square.event-back { background: #ff7675; color: #333; }
#rrRoot .rr_app #board .square.event-bonus { background: #ffeaa7; color: #333; }
#rrRoot .rr_app #board .square.event-switch { background: #81ecec; color: #333; }
#rrRoot .rr_app .event-label { font-size: .8rem; margin-top: 2px; color:#333 }

/* Tokens */
#rrRoot .rr_app .token { position: absolute; width: 60px; height: 60px; object-fit: contain; z-index: 50; transition: transform .3s, left .3s, top .3s; transform: translate(-50%,-50%); }

/* Banners + Win */
#rrRoot .rr_app .move-banner { margin: 8px; font-weight: 700; }
#rrRoot .rr_app #winScreen { background: linear-gradient(135deg, #6a11cb, #2575fc); color: #fff; height: 100vh; text-align: center; }
#rrRoot .rr_app #winScreen h2 { font-size: 3rem; font-weight: 800; margin-bottom: .5rem; }
#rrRoot .rr_app #winnerBanner { font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; }
#rrRoot .rr_app #leaderboard { display: grid; gap: 6px; }

#rrRoot .rr_app .guest-banner{
  background:#fff7d6;
  border:1px solid #f1d48a;
  padding:10px 12px;
  border-radius:12px;
  margin:8px 6px 12px;
  font-weight:600;
}
#rrRoot .rr_app .btn-secondary.small { padding:6px 10px; font-size:.9rem; }

/* Card structure */
#rrRoot .rr_app .custom-card {
  background: var(--grad-c);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 12px;
  grid-template-rows: auto auto auto;
}

/* Header row: title + counts */
#rrRoot .rr_app .cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#rrRoot .rr_app .cc-head .title {
  font-weight: 800;
  line-height: 1.2;
  font-size: 1.1rem;
}
#rrRoot .rr_app .cc-counts {
  display: inline-flex;
  gap: 6px;
}
#rrRoot .rr_app .pill {
  background: rgba(255,255,255,.85);
  border: 1px solid var(--outline);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .8rem;
  font-weight: 700;
}

/* Primary CTA dominates */
#rrRoot .rr_app .w-full { width: 100%; }
#rrRoot .rr_app .btn-lg { padding: 14px 18px; font-size: 1.05rem; }

/* Secondary row */
#rrRoot .rr_app .cc-actions {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: 8px;
}

/* Quiet buttons */
#rrRoot .rr_app .btn-soft {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--outline);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
}
#rrRoot .rr_app .btn-soft:hover { background: #f7f7ff; }

#rrRoot .rr_app .btn-link-danger {
  background: transparent;
  border: none;
  color: #b42323;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 8px;
}
#rrRoot .rr_app .btn-link-danger:hover {
  background: rgba(180, 35, 35, .07);
}

/* Make Play pop even more inside cards */
#rrRoot .rr_app .custom-card .btn-primary {
  box-shadow: 0 8px 20px rgba(214,72,6,.28);
}

/* ===== Custom-set card redesign ===== */
#rrRoot .rr_app .custom-card{
  background: linear-gradient(145deg, #b9d6ff 0%, #e3c6ff 100%);
  border: none;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

#rrRoot .rr_app .custom-card:hover{ transform: translateY(-2px); transition: transform .15s ease; }

#rrRoot .rr_app .cc-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
#rrRoot .rr_app .cc-head .title{ font-weight:800; font-size:1.05rem; line-height:1.2; }
#rrRoot .rr_app .cc-counts{ display:flex; gap:6px; flex-wrap:wrap; }
#rrRoot .rr_app .pill{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.9);
  padding: 4px 10px; border-radius:999px;
  font-size:.8rem; font-weight:700; color:#1f2937;
}

/* Compact buttons used on the cards */
#rrRoot .rr_app .btn-sm{ padding: 8px 12px; font-size: .95rem; border-radius: 12px; }

/* Emphasize primary Play */
#rrRoot .rr_app .custom-card .btn-primary{
  background: #0ea5e9; /* cyan/sky */
  color:#fff;
  box-shadow: 0 8px 18px rgba(14,165,233,.35);
}
#rrRoot .rr_app .custom-card .btn-primary:hover{ transform: translateY(-1px); }

/* Secondary, Accent-outline, and Danger variants */
#rrRoot .rr_app .btn-secondary{ background:#7b61ff; color:#fff; }
#rrRoot .rr_app .btn-accent-outline{
  background: transparent; color:#0ea5e9; border:2px solid rgba(14,165,233,.35);
}
#rrRoot .rr_app .btn-danger{
  background: rgba(244,63,94,.12);
  color:#b42323; border:2px solid rgba(244,63,94,.35);
}

/* Action row */
#rrRoot .rr_app .cc-actions{
  display:flex; gap:8px; flex-wrap:wrap;
}

/* (Optional) tighten the grid so cards feel balanced */
#rrRoot .rr_app #customSetsGrid.skill-grid{
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.custom-card {
  background: linear-gradient(135deg, #7b2ff7, #f107a3);
  color: #fff;
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

.cc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cc-head .title {
  font-weight: 700;
  font-size: 1.1rem;
}

.btn-share {
  background: #fff;
  color: #7b2ff7;
  border: none;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.2s ease;
}
.btn-share:hover {
  background: #f8f8f8;
}

.cc-meta {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.cc-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.btn-play {
  background: #fff;
  color: #7b2ff7;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: 0.2s ease;
}
.btn-play:hover {
  background: #f8f8f8;
}


/* Responsive */
@media (max-width: 768px) {
  #rrRoot .rr_app .skill-grid { grid-template-columns: repeat(2, 1fr); }
  #rrRoot .rr_app .order-list img { width: 40px; height: 40px; }
}
@media (max-width: 520px) {
  #rrRoot .rr_app .skill-grid { grid-template-columns: 1fr; }
  #rrRoot .rr_app .avatar-grid { grid-template-columns: repeat(2, 1fr); }
}