/* ========= Resource Directions + Submissions (updated) ========= */

/* Container that holds directions + the small submissions preview */
.resource_directions {
  background: radial-gradient(1400px 600px at 0% 0%, #2b2b3b 0%, #191a22 60%, #111218 100%);
  color: #fff;
  padding: clamp(14px, 2.8vw, 28px) 0;
}

/* Centered layout variant */
.resource_directions.centered .rd_center {
  width: min(900px, 92vw);
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: 10px;
}
.rd_title {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem) !important;
  font-weight: 800;
  margin: 0;
  color: #EDEEF2;
}
.rd_blurb { color: #bfc3d9; margin: 0 auto; max-width: 56ch; }

/* Legacy two-column wrapper (kept for compatibility) */
.resource_directions .rd_wrap {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(12px, 3vw, 24px);
  align-items: start;
}
.resource_directions .rd_copy h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
  font-weight: 800;
  margin: 0 0 .25rem;
  color: #EDEEF2;
}
.resource_directions .rd_copy p { color: #bfc3d9; margin: 0; }

/* ---- Submissions card (centered) ---- */
.subs_card {
  margin: 8px auto 0;
  width: min(720px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) inset, 0 10px 26px rgba(0,0,0,.15);
}
.subs_card_head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.subs_card_head h3 {
  margin: 0; font-size: 1.1rem !important; font-weight: 800; letter-spacing: .2px; color: #bfc3d9;
}

/* Badge + actions */
.subs_actions { display: inline-flex; align-items: center; gap: 8px; }
.subs_badge {
  background: #ff3465; color: #fff; border-radius: 999px;
  font-weight: 800; font-size: .8rem; line-height: 1; padding: 4px 8px;
}
.subs_badge.hidden { display: none !important; }
.hidden { display: none !important; }

.btn-text.subtle-link { border: none; background: transparent; color: #ffd426; font-weight: 800; cursor: pointer; }
.btn-text.subtle-link:hover { text-decoration: underline; }

/* ========= Submissions: 2 recent (center card) ========= */
.subs_two_row {
  display:grid; grid-template-columns:auto 1fr auto;
  gap:12px; align-items:center;
  background:#24262e; border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:10px 12px;
}
.subs_two_row .subs_avatar {
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; color:#14151c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.subs_two_row .name { font-weight:900; color:#f3f4f7; }
.subs_two_row .sep { color:#8f94a8; margin:0 .25rem; }
.subs_two_row .muted { color:#B7BBC7; font-weight:600; }
.subs_two_row .set { color:#e6e8f5; font-weight:700; }
.subs_two_row .subs_time { color:#9aa1bb; font-weight:600; font-size:.9rem; }

/* ========= Full Submissions Modal ========= */
#subsModal.show { display:flex; }
#subsModal {
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center; z-index:80;
  background:rgba(2,6,23,.62); backdrop-filter:saturate(1.1) blur(6px);
}

#subsModal .subs_modal_card {
  width:min(860px, 94vw); color:#e9ecff;
  border:1px solid rgba(255,255,255,.12); border-radius:16px;
  background:radial-gradient(1400px 600px at 0% 0%, #22232c 0%, #14161c 60%, #0e1016 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding:16px; display:grid; gap:12px;
}
.subs_modal_head { display:flex; align-items:center; gap:8px; }
.subs_modal_head h3 {
  margin:0; font-size:1.25rem; font-weight:900;
  background:linear-gradient(90deg,#ffae00,#ff2da0,#7b61ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subs_modal_head .btn-secondary {
  background:linear-gradient(180deg,#ff6b6b,#f43f5e); color:#fff; border:none;
  border-radius:10px; padding:.6rem .9rem; font-weight:800; cursor:pointer;
}
#subsClose {
  border:1px solid rgba(255,255,255,.15); color:#e9ecff; background:transparent;
  padding:.55rem .85rem; border-radius:10px; font-weight:800;
}

/* Filters */
.subs_filters {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px;
}
.subs_filters label { display:grid; gap:6px; font-weight:700; color:#cfd3ea; font-size:.9rem; }
.subs_filters select {
  background:#12131a; color:#e9ecff; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:8px 10px; font-weight:700;
}

/* Rows */
.subs_list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.subs_row {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  padding:12px; border-radius:16px; background:#24262e; border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.subs_row.unread { outline:2px solid rgba(255,214,0,.25); }
.subs_left { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
.subs_avatar {
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-weight:900; color:#14151c; box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.subs_primary { font-weight:900; color:#f3f4f7; }
.subs_secondary { color:#B7BBC7; font-weight:600; font-size:.95rem; }
.subs_btn {
  border:1px solid rgba(255,255,255,.12); background:#101218; color:#e9ecff;
  border-radius:999px; padding:.5rem .8rem; font-weight:800; cursor:pointer;
}
.subs_btn--delete { background:rgba(255,255,255,.08); }
.subs_btn--delete:hover { background:rgba(255,76,76,.18); border-color:rgba(255,76,76,.35); }
.subs_btn--ghost { background:transparent; }

/* Empty */
.subs_empty { color:#9aa1bb; font-style:italic; margin:8px 2px 0; }
.subs_empty.hidden { display:none; }

/* Responsive */
@media (max-width: 640px){
  .subs_filters { grid-template-columns:1fr; }
}

/* ========= Per-Submission Details Drawer ========= */
#subsDetailModal.show { display:flex; }
#subsDetailModal {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:90;
  background:rgba(2,6,23,.62); backdrop-filter:saturate(1.1) blur(6px);
}
#subsDetailModal .card {
  width:min(780px, 94vw); color:#e9ecff;
  background:linear-gradient(180deg,#1a1b23,#0f1117);
  border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); padding:16px; display:grid; gap:12px;
}
.sdm_head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sdm_title { font-weight:900; font-size:1.1rem; }
.sdm_meta { color:#B7BBC7; font-weight:600; }
#sdmClose {
  border:1px solid rgba(255,255,255,.15); color:#e9ecff; background:transparent;
  padding:.5rem .8rem; border-radius:10px; font-weight:800;
}
#sdmList { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.detail_row { border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:10px; background:#22242d; }
.detail_title { font-weight:900; margin-bottom:4px; }
.detail_prompt { color:#d9ddf0; }
.detail_opts { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.detail_opts .opt { padding:8px 10px; border-radius:10px; background:#171821; border:1px solid rgba(255,255,255,.08); }
.detail_opts .opt.picked { outline:2px dashed rgba(255,214,0,.35); }
.detail_opts .opt.correct { background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.35); }
.pill { display:inline-block; border-radius:999px; padding:.15rem .5rem; font-size:.8rem; font-weight:900; }
.pill.ok { background:rgba(16,185,129,.25); color:#d1fae5; }
.pill.bad { background:rgba(244,63,94,.25); color:#fee2e2; }
/* --- Details modal overlay --- */
#subsDetailModal{
  position: fixed;
  inset: 0;
  display: none;               /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(3,7,18,.58);/* dim the background */
  z-index: 1000;
}
#subsDetailModal.show{ display:flex; }

/* --- The card --- */
#subsDetailModal .card{
  background: #111827;         /* or #fff if you prefer light */
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  width: min(92vw, 760px);
  max-height: 82vh;            /* <= keeps it off full screen */
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* header fixed, list scrolls */
  box-shadow: 0 18px 40px rgba(2,6,23,.5);
}

/* Header sticks to top, content scrolls */
.sdm_head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(17,24,39,.95);
}
#sdmHeader .sdm_title{ font-weight: 800; font-size: 1.1rem; }
#sdmHeader .sdm_meta{ font-size: .9rem; opacity:.85; margin-top:2px; }

/* Scrollable list area */
#sdmList{
  margin: 0; padding: 12px 16px;
  list-style: none;
  overflow: auto;              /* <-- the important part */
  flex: 1;                     /* take remaining height */
}

/* Pretty detail rows (optional) */
.detail_row{ 
  background: #0b1220; border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.detail_title{ font-weight: 800; margin-bottom: 6px; }
.detail_prompt{ opacity:.9; margin-bottom: 8px; }
.detail_opts{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.detail_opts .opt{ padding:8px 10px; border-radius:8px; background:#111827; border:1px solid rgba(255,255,255,.06); }
.detail_opts .opt.picked{ outline:2px solid #7a2cff; }
.detail_opts .opt.correct{ outline:2px solid #16a34a; }
.pill{ padding:2px 8px; border-radius:999px; font-weight:800; font-size:.75rem; }
.pill.ok{ background:#064e3b; color:#a7f3d0; }
.pill.bad{ background:#4c0519; color:#fecaca; }

/* Lock background scroll when modal is open */
body.no-scroll{ overflow: hidden; }

/* ===============================
   Game Description (scoped styles)
   =============================== */

.game_description_official {
  background: radial-gradient(1400px 600px at 0% 0%, #2b2b3b 0%, #191a22 60%, #111218 100%);
  color: #EDEEF2;
  padding: clamp(18px, 3.5vw, 40px) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.game_description_official .gd_wrap {
  width: min(1080px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
}

.game_description_official .gd_head {
  display: grid;
  gap: 8px;
  text-align: center;
}

.game_description_official .gd_title {
  margin: 0;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  background: linear-gradient(90deg,#ffd426,#ff2da0,#7b61ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.game_description_official .gd_lead {
  margin: 0 auto;
  max-width: 72ch;
  color: #cfd6e6;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
}

/* Panels */
.game_description_official .gd_panel {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 22px);
  box-shadow: 0 16px 34px rgba(0,0,0,.18) inset, 0 10px 26px rgba(0,0,0,.15);
}

.game_description_official .gd_h3 {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #f3f5ff;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

/* Cards row */
.game_description_official .gd_cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(5, 1fr);
}
.game_description_official .gd_card {
  background: #1b2a3a;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  display: grid; gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.game_description_official .gd_card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 12px 26px rgba(0,0,0,.2);
}
.game_description_official .gd_icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(180deg,#ffae00,#ff2da0);
  color: #0b1320; font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.game_description_official .gd_card h4 {
  margin: 0; font-weight: 900; color: #ffffff;
}
.game_description_official .gd_card p {
  margin: 0; color: #cfd6e6; font-weight: 500;
}

/* Steps */
.game_description_official .gd_steps {
  counter-reset: step;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.game_description_official .gd_steps li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  color: #d5ddf2;
}
.game_description_official .gd_steps li span {
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; font-weight: 900;
  background: linear-gradient(180deg,#ffd426,#ff6bd9);
  color: #0b1320; box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

/* Split row */
.game_description_official .gd_split {
  display: grid; gap: 16px;
  grid-template-columns: 1.1fr 1fr;
}
.game_description_official .gd_body {
  color: #cfd6e6; margin: 0;
}

/* Chips */
.game_description_official .gd_chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.game_description_official .gd_chips li {
  background: #142232;
  color: #e9efff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800; letter-spacing: .2px; font-size: .93rem;
}

/* List */
.game_description_official .gd_list {
  list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px;
}
.game_description_official .gd_list li {
  background: #132436;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px; padding: 8px 10px;
  color: #dce4f7; font-weight: 600;
}

/* FAQ */
.game_description_official .gd_faq details {
  background: #102033;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.game_description_official .gd_faq summary {
  cursor: pointer; font-weight: 900; color: #f2f5ff;
}
.game_description_official .gd_faq p {
  color: #cfd6e6; margin: 8px 0 0;
}

/* Responsive */
@media (max-width: 1024px){
  .game_description_official .gd_cards { grid-template-columns: repeat(3, 1fr); }
  .game_description_official .gd_split { grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .game_description_official .gd_cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .game_description_official .gd_cards { grid-template-columns: 1fr; }
}


/* responsive */
@media (max-width: 700px){
  .subs_filters { grid-template-columns: 1fr; }
  .detail_row { grid-template-columns: 28px 1fr; }
  .d_meta { margin-top:6px; }
}

/* Responsive */
@media (max-width: 1024px) { .subs_filters { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px)  { .subs_filters { grid-template-columns: 1fr; } }