:root{
  --bg-top:#E0F7FA; --bg-bot:#F1F8FF; --navy:#0F2742; --ink:#0b2036;
  --coral:#FF6B6B; --coral-2:#FF8C42; --mint:#2ED4AE; --card:#fff;
  --ring:rgba(14,30,62,.08); --shadow:0 8px 30px rgba(14,30,62,.08);
  --shadow-soft:0 4px 12px rgba(14,30,62,.08);
  --radius-xl:20px; --radius-lg:14px; --radius-pill:999px;

  /* unified small gap so solo cells aren’t far apart */
  --grid-gap:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--navy); background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bot) 100%);
  overflow-x:hidden;
}
.sr-only{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Screens */
.rb_screen{min-height:100svh;display:none;place-items:center;padding:clamp(16px,2vw,32px)}
.rb_screen.active{display:grid}

.rb_container{width:min(94vw,1100px);margin-inline:auto}
.rb_card{background:var(--card);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:clamp(18px,2.5vw,32px)}
.rb_center{display:grid;gap:16px;justify-items:center;text-align:center}

.rb_h1{font-size:clamp(34px,4.4vw,48px);margin:4px 0 0}
.rb_h2{font-size:clamp(26px,3.6vw,34px);margin:6px 0 0}
.rb_sub{color:#506680;margin:4px 0 12px}
.rb_row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.gap24{gap:24px}

/* Buttons */
.rb_btn{appearance:none;border:0;cursor:pointer;padding:12px 18px;border-radius:var(--radius-lg);
  font-weight:600;transition:transform .12s,box-shadow .12s,background .12s,color .12s,border-color .12s;
  box-shadow:var(--shadow-soft)}
.rb_btn-lg{padding:16px 24px;font-size:clamp(16px,2.2vw,20px)}
.rb_btn-coral{background:linear-gradient(180deg,var(--coral) 0%,var(--coral-2) 100%);color:#fff}
.rb_btn-coral:hover{transform:translateY(-1px)}
.rb_btn-outline{background:#fff;color:var(--navy);border:2px solid #e6eef7}
.rb_btn-outline:hover{border-color:var(--mint)}
.rb_btn-ghost{background:transparent;color:var(--navy);border:2px solid transparent}
.rb_btn-ghost:hover{border-color:#e7eef7}
.rb_btn[disabled]{opacity:.5;pointer-events:none}

/* Footer row */
.rb_footer{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:8px;flex-wrap:wrap}

/* Inputs */
.rb_input{background:#fff;border:2px solid #e6eef7;border-radius:12px;padding:10px 12px;width:100%;max-width:560px;font-weight:600}
.rb_input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(46,212,174,.15)}
.rb_input-pill{border-radius:var(--radius-pill)}

/* Search */
.rb_search{position:relative;width:min(94vw,560px);display:flex;align-items:center}
.rb_search_icon{position:absolute;left:12px}
#rb_skill_filter{padding-left:34px}
#rb_skill_count{position:absolute;right:14px;color:#7a90a8}

/* Chips */
.rb_chip_grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));width:min(94vw,900px);margin-top:10px}
.rb_chip{padding:14px 16px;border-radius:14px;border:2px solid #e6eef7;background:#fff;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow-soft);transition:transform .12s,box-shadow .12s,border-color .12s}
.rb_chip:hover{transform:translateY(-1px)}
.rb_chip.active{border-color:var(--mint);box-shadow:0 8px 30px rgba(46,212,174,.18)}

/* Grid size */
.rb_grid_choice{width:min(94vw,900px);display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rb_choice_card{background:#fff;border:2px solid #e6eef7;border-radius:16px;padding:14px;cursor:pointer;
  box-shadow:var(--shadow-soft);transition:transform .12s,box-shadow .12s,border-color .12s}
.rb_choice_card:hover{transform:translateY(-1px)}
.rb_choice_card.active{border-color:var(--mint);box-shadow:0 8px 30px rgba(46,212,174,.18)}
.rb_choice_badge{display:block;margin-top:8px;color:#678;font-weight:600}

/* Live preview */
.rb_preview_wrap{width:min(94vw,900px)}
.rb_preview{
  margin:10px auto 0;background:#fff;border-radius:16px;box-shadow:var(--shadow);
  padding:16px;width:min(92vw,520px);display:grid;gap:10px
}
.rb_preview[data-size="3"]{grid-template-columns:repeat(3,1fr)}
.rb_preview[data-size="4"]{grid-template-columns:repeat(4,1fr)}
.rb_preview[data-size="5"]{grid-template-columns:repeat(5,1fr)}
.rb_preview_cell{
  aspect-ratio:1/1;background:#f9fbff;border-radius:16px;border:2px solid #e8f0fa
}

/* Count */
.rb_count_choice{display:flex;gap:12px}
.rb_count_btn{padding:14px 20px;border-radius:12px;border:2px solid #e6eef7;background:#fff;font-weight:800;cursor:pointer;box-shadow:var(--shadow-soft)}
.rb_count_btn.active{border-color:var(--mint);box-shadow:0 8px 30px rgba(46,212,174,.18)}

/* Types */
.rb_ptype_list{display:grid;gap:14px;width:min(94vw,720px)}
.rb_cardline{text-align:left;background:#fff;border-radius:14px;border:2px solid #e6eef7;padding:14px;box-shadow:var(--shadow-soft)}
.rb_toggle{display:flex;gap:8px;margin:6px 0 10px}
.rb_toggle .tab{padding:8px 12px;border-radius:999px;border:2px solid #e6eef7;background:#fff;font-weight:700;cursor:pointer}
.rb_toggle .tab.active{border-color:var(--mint)}

/* Game */
.rb_replay_bar{position:sticky;top:12px;z-index:10;display:flex;justify-content:center;margin:8px 0}
.rb_replay_btn{position:relative;padding:14px 22px 14px 52px;border-radius:var(--radius-pill);font-weight:800;
  background:linear-gradient(180deg,var(--coral) 0%,var(--coral-2) 100%);color:#fff;border:0;box-shadow:var(--shadow);
  font-size:1.08rem;min-width:230px}
.rb_replay_btn .rb_replay_ring{position:absolute;left:10px;top:50%;translate:0 -50%;width:28px;height:28px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,255,255,.9) 0deg,rgba(255,255,255,.2) 320deg);mask:radial-gradient(circle at center,transparent 55%,#000 56%)}
.rb_replay_btn.speaking .rb_replay_ring{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Game stage sizing & layout --- */
#rb_game .rb_container { overflow: hidden; }

.rb_carousel{
  position: relative;
  width: min(94vw,1100px);
  /* gentle height target; avoids cut-off and scrolling */
  height: clamp(520px, 92svh, 100svh);
  margin-inline: auto;
  overflow: hidden;
}

.rb_board{
  position: absolute;
  inset: 0;
  margin: 0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  width:100%;
  background:#fff;border-radius:18px;box-shadow:var(--shadow);border:2px solid #eef4fb;
  opacity:0;transform:translateX(24px) scale(.985);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}

.rb_cover{
  width: 44rem;
}
.rb_board.active{opacity:1;transform:translateX(0) scale(1);pointer-events:auto;
}
.rb_board.offstage{display:block;opacity:0;pointer-events:none}

/* Solo emphasis still fills nicely */
.solo-emphasis{height:100%}

/* Grid with small, consistent gaps */
.rb_grid{
  display:grid;
  gap:var(--grid-gap);
  align-content:center; /* keeps rows centered vertically */
    border: 20px;

}
.rb_grid[data-size="3"]{grid-template-columns:repeat(3,1fr)}
.rb_grid[data-size="4"]{grid-template-columns:repeat(4,1fr)}
.rb_grid[data-size="5"]{grid-template-columns:repeat(5,1fr)}

.rb_bhead{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:800}
.rb_bname{font-size:18px}

/* Cells sized by JS; no giant min-heights */
.rb_cell{
  position:relative;overflow:hidden;background:#fff;border-radius:16px;border:2px solid #eef4fb;box-shadow:var(--shadow-soft);
  display:grid;place-items:center;padding:8px;font-size:clamp(22px,4vw,44px);font-weight:800;
  transition:transform .1s ease,border-color .1s ease,box-shadow .1s ease
}
.rb_cell:hover{transform:translateY(-1px)}
.rb_cell.marked{box-shadow:0 8px 28px rgba(46,212,174,.14)}
.rb_cell.rb_wrong{animation:rbShake .25s linear;border-color:#ffb0b0}
@keyframes rbShake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}

/* “skip but it’s actually here” hint */
.rb_cell.rb_hint{
  outline:4px solid #7c3aed;
  box-shadow:0 0 0 6px rgba(124,58,237,.18), 0 10px 24px rgba(14,30,62,.16);
  animation:rbHintPulse 1.2s ease-in-out 1;
}
@keyframes rbHintPulse{
  0%{outline-color:#a78bfa;transform:scale(1.0)}
  50%{outline-color:#7c3aed;transform:scale(1.02)}
  100%{outline-color:#a78bfa;transform:scale(1.0)}
}

/* Layered mark: GIF full-bleed with color wash, word on top */
.rb_wordtxt{position:relative;z-index:3}
.rb_mark_gif{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  filter:brightness(1) saturate(1.1) drop-shadow(0 6px 12px rgba(0,0,0,.12));
  z-index:1;opacity:.28;
}
.rb_mark_wash{position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:2}

/* Board footer */
.rb_bfoot{margin-top:12px}
.rb_skip_btn{
  padding:12px 18px;border-radius:12px;border:0;background:#FFE4DB;color:#6b2e1f;font-weight:800;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease
}
.rb_skip_btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(255,132,102,.25);background:#ffd9cc}
.rb_skip_btn:active{transform:translateY(0);box-shadow:0 4px 10px rgba(255,132,102,.25);background:#ffcbb8}

/* Bot scan + swipe */
.rb_cell.scan{outline:3px solid rgba(59,130,246,.35);box-shadow:0 0 0 6px rgba(59,130,246,.12)}
.rb_board.slide-out-left{animation:rbSlideOutLeft .28s ease both}
.rb_board.slide-in-right{animation:rbSlideInRight .32s ease both}
@keyframes rbSlideOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:.0;transform:translateX(-24px)}}
@keyframes rbSlideInRight{from{opacity:.0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}

/* Centered overlay to show bot skipping */
#rb_bot_skip_overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(15,39,66,.08);
  z-index:40;
  opacity:0; pointer-events:none;
  transition:opacity .14s ease;
}
#rb_bot_skip_overlay.show{ opacity:1; pointer-events:auto; }
#rb_bot_skip_overlay.hidden{ opacity:0; pointer-events:none; }
.rb_bot_skip_box{
  background:#fff; border:2px solid #e6eef7; border-radius:16px; padding:16px 20px;
  box-shadow:var(--shadow); font-weight:800; color:#0F2742;
}

/* Utilities */
.hidden{display:none!important}

/* =========================
   Responsive Media Queries
   Targets: <=1200, 992, 820, 768, 640, 520, 420, 360
   ========================= */

/* ===== <=1200px (large tablets / small laptops) ===== */
@media (max-width: 1200px) {
  .rb_container{ width:min(96vw,1000px) }
  .rb_card{ padding:clamp(16px,2vw,28px) }
  .rb_h1{ font-size:clamp(30px,4vw,42px) }
  .rb_h2{ font-size:clamp(22px,3.2vw,30px) }
  .rb_sub{ margin-bottom:8px }

  /* Game stage */
  .rb_carousel{ height:clamp(520px, 92svh, 96svh) }
  .rb_grid{ gap: max(8px, var(--grid-gap)) }

  /* Preview / choices */
  .rb_preview{ width:min(94vw,520px) }
  .rb_choice_card{ padding:12px }
  .rb_choice_badge{ font-size:0.95rem }

  /* Buttons */
  .rb_btn-lg{ padding:14px 20px; font-size:clamp(15px,2vw,18px) }

  /* Cells: JS sets height; shrink font slightly */
  .rb_cell{ font-size:clamp(20px,3.6vw,40px) }
  .rb_bname{ font-size:17px }

  /* Replay */
  .rb_replay_btn{ min-width:220px; padding:12px 20px 12px 50px }
  .rb_replay_btn .rb_replay_ring{ width:26px; height:26px }

  /* Description block */
  .gd_wrap{ width:min(96vw,1000px); margin-inline:auto }
  .gd_title{ font-size:clamp(26px,3.4vw,36px) }
  .gd_lead{ font-size:clamp(15px,2vw,18px) }
  .gd_cards{ grid-template-columns: repeat(4, minmax(180px,1fr)); display:grid; gap:12px }
  .gd_card{ padding:14px }
  .gd_steps li span{ width:26px; height:26px; font-size:.95rem }
}

/* ===== <=992px (tablets landscape) ===== */
@media (max-width: 992px) {
  .rb_container{ width:min(96vw,900px) }
  .rb_h1{ font-size:clamp(28px,4vw,38px) }
  .rb_h2{ font-size:clamp(20px,3vw,28px) }

  /* Game stage height breathes a bit more to avoid cut-offs */
  .rb_carousel{ height:clamp(520px, 90svh, 94svh) }

  /* Skill chips become tighter */
  .rb_chip_grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px }
  .rb_chip{ padding:12px 14px }

  /* Grid gap slightly smaller for tall boards */
  .rb_grid{ gap:8px }

  /* Footers */
  .rb_bfoot{ margin-top:10px }
  .rb_skip_btn{ padding:11px 16px }

  /* Description */
  .gd_cards{ grid-template-columns: repeat(2, minmax(220px,1fr)); gap:14px }
  .gd_split{ display:grid; grid-template-columns:1fr; gap:12px }
}

/* ===== <=820px (small tablets / big phones landscape) ===== */
@media (max-width: 820px) {
  .rb_card{ padding:16px }
  .rb_h1{ font-size:clamp(26px,5vw,34px) }
  .rb_h2{ font-size:clamp(18px,3.6vw,26px) }

  /* Start/Skill/Grid screens breathing room */
  .rb_screen{ padding:clamp(14px,2.4vw,24px) }

  /* Preview reduces columns and gaps remain readable */
  .rb_preview{ width:min(96vw,480px); gap:8px }

  /* Controls */
  .rb_footer{ gap:10px }
  .rb_btn-lg{ padding:12px 18px }

  /* Board headline */
  .rb_bhead{ margin-bottom:8px }
  .rb_bname{ font-size:16px }

  /* Description */
  .gd_title{ font-size:clamp(24px,4.6vw,32px) }
  .gd_lead{ font-size:clamp(14px,2.4vw,17px) }
  .gd_steps{ padding-left:2px }
  .gd_steps li{ gap:10px }
  .gd_steps li span{ width:24px; height:24px; font-size:.9rem }
}

/* ===== <=768px (iPad portrait / large phones) ===== */
@media (max-width: 768px) {
  .rb_container{ width:96vw }
  .rb_h1{ font-size:clamp(24px,6vw,32px) }
  .rb_h2{ font-size:clamp(18px,4.6vw,24px) }

  /* Carousel height tuned for on-screen keyboard space */
  .rb_carousel{ height:clamp(500px, 86svh, 92svh) }

  /* Grid gets tighter; JS still sizes cell heights */
  .rb_grid{ gap:7px }

  /* Inputs & chips */
  .rb_input{ max-width:520px }
  .rb_chip_grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) }

  /* Replay button = thumb-friendly */
  .rb_replay_btn{ min-width:200px; padding:12px 18px 12px 46px; font-size:1rem }
  .rb_replay_btn .rb_replay_ring{ width:24px; height:24px; left:9px }

  /* Skip button for thumbs */
  .rb_skip_btn{ padding:12px 16px; font-size:.98rem }

  /* Description */
  .gd_cards{ grid-template-columns: 1fr 1fr }
  .gd_card{ padding:12px }
  .gd_h3{ font-size:clamp(18px,3.8vw,22px) }
  .gd_body{ font-size:clamp(14px,2.8vw,16px) }
  .gd_list{ padding-left:18px }
}

/* ===== <=640px (phones portrait large) ===== */
@media (max-width: 640px) {
  .rb_screen{ padding:14px }
  .rb_card{ padding:14px }
  .rb_h1{ font-size:clamp(22px,7vw,28px) }
  .rb_h2{ font-size:clamp(16px,5vw,22px) }
  .rb_sub{ font-size:.95rem }

  /* Skill search pill */
  .rb_search{ width:100% }
  #rb_skill_filter{ padding-left:36px }

  /* Choice cards stack tighter */
  .rb_grid_choice{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px }
  .rb_choice_card{ padding:12px }
  .rb_choice_badge{ font-size:.9rem }

  /* Carousel a bit shorter to avoid below-the-fold scroll */
  .rb_carousel{ height:clamp(480px, 84svh, 90svh) }

  /* Cells text size scales down a touch further */
  .rb_cell{ font-size:clamp(18px,6vw,30px) }

  /* Head/foot spacing */
  .rb_bhead{ margin-bottom:6px }
  .rb_bfoot{ margin-top:8px }

  /* Bot skip overlay text size */
  .rb_bot_skip_box{ padding:14px 16px; font-size:.98rem }

  /* Description to single column */
  .gd_wrap{ width:96vw }
  .gd_title{ font-size:clamp(22px,6vw,28px) }
  .gd_lead{ font-size:clamp(14px,3.6vw,16px) }
  .gd_cards{ grid-template-columns:1fr; gap:12px }
  .gd_steps{ margin:10px 0 }
}

/* ===== <=520px (phones portrait) ===== */
@media (max-width: 520px) {
  :root{ --grid-gap:8px } /* globally tighten gaps */

  .rb_btn{ padding:10px 14px }
  .rb_btn-lg{ padding:12px 16px; font-size:.98rem }

  /* Carousel and boards */
  .rb_carousel{ height:clamp(460px, 82svh, 88svh) }
  .rb_board{ border-radius:16px }
  .rb_mark_wash{ border-radius:14px }

  /* Cells */
  .rb_cell{ border-radius:14px; padding:6px; font-weight:800 }

  /* Replay + skip: bigger hit area, smaller text */
  .rb_replay_btn{ min-width:188px; padding:11px 16px 11px 44px; font-size:.95rem }
  .rb_replay_btn .rb_replay_ring{ width:22px; height:22px; left:8px }
  .rb_skip_btn{ padding:11px 14px; font-size:.95rem }

  /* Description */
  .gd_h3{ font-size:clamp(16px,4.6vw,20px) }
  .gd_body{ font-size:clamp(13.5px,3.8vw,15.5px) }
  .gd_list li{ margin-bottom:6px }
  .gd_steps li span{ width:22px; height:22px; font-size:.85rem }
}

/* ===== <=420px (small phones) ===== */
@media (max-width: 420px) {
  .rb_h1{ font-size:clamp(20px,7.6vw,26px) }
  .rb_h2{ font-size:clamp(15px,5.6vw,20px) }
  .rb_sub{ font-size:.9rem }

  .rb_container{ width:94vw }
  .rb_card{ padding:12px }

  /* Carousel height conservative for ultra-short screens */
  .rb_carousel{ height:clamp(440px, 80svh, 86svh) }

  /* Grid gap and fonts */
  .rb_grid{ gap:7px }
  .rb_cell{ font-size:clamp(16px,7.2vw,26px) }

  /* Footer wrap */
  .rb_footer{ gap:8px }

  /* Description */
  .gd_title{ font-size:clamp(20px,7vw,26px) }
  .gd_lead{ font-size:clamp(13.5px,4.2vw,15px) }
  .gd_card{ padding:10px }
}

/* ===== <=360px (ultra small) ===== */
@media (max-width: 360px) {
  :root{ --grid-gap:6px }

  .rb_screen{ padding:10px }
  .rb_card{ padding:10px }
  .rb_btn{ padding:9px 12px }
  .rb_btn-lg{ padding:10px 14px; font-size:.9rem }

  .rb_carousel{ height:clamp(420px, 78svh, 84svh) }

  .rb_cell{ font-size:clamp(15px,7.6vw,24px); border-radius:12px; padding:6px }
  .rb_mark_gif{ opacity:.26 }

  .rb_replay_btn{ min-width:172px; padding:10px 14px 10px 40px; font-size:.9rem }
  .rb_replay_btn .rb_replay_ring{ width:20px; height:20px; left:8px }
  .rb_skip_btn{ padding:10px 12px; font-size:.9rem }

  .gd_title{ font-size:clamp(18px,7.8vw,24px) }
  .gd_lead, .gd_body{ font-size:.9rem }
}