/* Root */
#rb_app{
  --accent:#7C3AED; --accent-2:#22D3EE; --ink:#0F172A;
  --muted:#94A3B8; --panel:#fff; --bg:#0b1220; --chip:#111827;
  --good:#10B981; --warn:#F59E0B; --bad:#EF4444;
  --board-h-solo: 78vh;
  --board-h-human: 72vh;
  --board-h-bot: 60vh;
  --tile-gap: 12px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--panel);
  background: radial-gradient(1200px 600px at 50% -120px, #1f2a4a 0, #0b1220 55%);
  min-height: 100vh; display:grid; place-items:start center; padding:24px;
}

#jrb_start{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rb_screen{ width:min(1100px,96vw); display:none; margin:0 auto; }
.rb_screen.active{ display:block; }

/* Start */
.rb_title{ font-weight:900; letter-spacing:-.5px; font-size: 6rem; text-align:center; margin: 12px 0 16px; }

.rb_hero_frame{
  position: relative; margin-inline:auto; width:40rem;
  border-radius:22px; padding:10px; background:linear-gradient(180deg,#171f36,#0d1221);
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 0 0 1px #1d2741;
}
.rb_cover { width:100%; display:block; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.rb_confetti_bg{
  position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background: radial-gradient(120% 60% at 90% -10%, rgba(124,58,237,.15), transparent 60%),
              radial-gradient(120% 60% at 10% 110%, rgba(34,211,238,.12), transparent 60%);
}


.rb_mode_picker{
  margin:16px auto 10px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.rb_mode_picker input{ display:none; }
.rb_mode_picker label{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; border:1px solid #273148;
  background:#0f172a; color:#e5e7eb; font-weight:900; cursor:pointer;
}
.rb_mode_picker input:checked + label{
  background: linear-gradient(180deg,#7C3AED,#5b21b6); color:#fff; border-color:transparent;
  box-shadow: 0 8px 24px rgba(124,58,237,.35);
}
.rb_mode_picker .i{ filter:saturate(1.15); }

.rb_cta_row{ display:flex; gap:12px; justify-content:center; }
.rb_play_big{ padding:14px 26px; font-size:18px; border-radius:18px; }

.rb_howto{ margin:10px auto 0; width:min(720px,95vw); color:#cbd5e1; }
.rb_howto summary{ cursor:pointer; }
.rb_steps{ margin:8px 0 0 18px; }

/* "Centerstage" */
.rb_centerstage{
  min-height: calc(100vh - 48px);
  place-items:center;
}
.rb_stage_card{ width:min(900px, 96vw); background:rgba(15,23,42,.6); border:1px solid #172134; border-radius:22px; padding:18px 18px 22px; box-shadow:0 18px 60px rgba(0,0,0,.35); }
.rb_screen.active.rb_centerstage{ display:grid; }
.rb_stage_title{ text-align:center; margin:6px 0 10px; font-size: clamp(22px, 3vw, 36px); font-weight:900; }
.rb_hintline{ text-align:center; color:#cbd5e1; margin:-6px 0 8px; }

/* Inputs & buttons */
.rb_btn{ appearance:none; border:0; border-radius:16px; padding:12px 18px; font-weight:800; cursor:pointer; transition:transform .06s, box-shadow .2s, background .2s, opacity .2s; }
.rb_btn:active{ transform:translateY(1px) scale(.99); }
.rb_primary{ background:linear-gradient(180deg,#7C3AED,#5b21b6); color:#fff; box-shadow:0 6px 18px rgba(124,58,237,.35); }
.rb_secondary{ background:#1f2937; color:#fff; }
.rb_ghost{ background:transparent; color:#d1d5db; border:1px solid #374151; }
.rb_small{ padding:8px 12px; border-radius:10px; font-size:14px; }
.hidden{ display:none!important; }

.rb_nav{ margin:16px 0 0; display:flex; gap:12px; justify-content:space-between; }
.rb_center{ justify-content:center; }
.rb_centered{ text-align:center; }

.rb_label{ display:block; margin:10px 0 4px; color:#e5e7eb; font-weight:700; }
.rb_input{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid #374151; background:#0f172a; color:#fff; }
.rb_inline_error{ margin-top:6px; color:#fecaca; font-weight:800; }

/* Search w/ results */
.rb_filter_row{ display:grid; place-items:center; margin:8px 0 14px; }
.rb_searchwrap{ position:relative; width:min(620px, 92%); }
.rb_search_icon{ position:absolute; left:12px; top:50%; translate:0 -50%; opacity:.9 }
.rb_filter{ padding-left:38px; }
.rb_results{ position:absolute; right:10px; top:50%; translate:0 -50%; color:#9fb2d1; font-weight:700; font-size:.9rem; }

/* Skill grid + highlight */
.rb_skill_grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:12px; justify-items:center; }
.rb_chip{ padding:16px 18px; background:linear-gradient(180deg,#111827,#0b1324); border-radius:16px; border:1px solid #1f2937; color:#e5e7eb; cursor:pointer; font-weight:900; width:100%; text-align:center; position:relative; overflow:hidden; 
font-size: 1.5rem;}
.rb_chip::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 0 rgba(124,58,237,.0); transition: box-shadow .2s; }
.rb_chip:hover::after{ box-shadow:inset 0 0 0 2px rgba(124,58,237,.35); }
.rb_chip.active{ outline:3px solid rgba(124,58,237,.9); background:#1b2239; }
.rb_chip mark.rb_hl{ background:#facc15; color:#0f172a; border-radius:6px; padding:0 3px; }

/* Segments (grid size, player count) */
.rb_seg{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.rb_seg input{ display:none; }
.rb_seg label{
  padding:10px 16px; border:1px solid #374151; border-radius:14px; cursor:pointer; background:#0f172a; color:#e5e7eb; font-weight:800; display:grid; place-items:center; gap:4px;
}
.rb_seg label .sub{ font-weight:600; color:#9fb2d1; font-size:.8rem; }
.rb_seg input:checked + label{ background:var(--accent); color:#fff; border-color:transparent; }

/* Grid preview (tilted) */
.rb_preview{ margin-top:14px; background:#0f172a; border:1px solid #1f2937; border-radius:16px; padding:12px; }
.rb_preview_title{ color:#cbd5e1; font-weight:800; margin-bottom:8px; text-align:center; }
.rb_preview_stage{ perspective: 900px; display:grid; place-items:center; }
.rb_preview_grid{ display:grid; gap:8px; justify-content:center; transform: rotateX(14deg) rotateZ(-2deg); transform-origin: 50% 100%; }
.rb_preview_grid[data-size="3"]{ grid-template-columns: repeat(3, 60px); }
.rb_preview_grid[data-size="4"]{ grid-template-columns: repeat(4, 56px); }
.rb_preview_grid[data-size="5"]{ grid-template-columns: repeat(5, 50px); }
.rb_preview_cell{ height:50px; border-radius:10px; background:#111827; border:1px dashed #2b3547; box-shadow: inset 0 0 0 1px #26314a; }

.start_btns{
  background-color: rgb(198, 74, 7) !important;
  font-size: 2.3rem !important;
  margin-top: 12px;
}

.start_btns:hover{
  background-color: rgb(22, 21, 52) !important;

}
/* Game header */
.rb_bar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:16px; padding:12px 14px;
  background: rgba(11,18,32,.7); backdrop-filter: blur(6px);
  border:1px solid #172134; border-radius:18px; margin-bottom:14px;
  justify-content:center;
}
.rb_turn{ margin-left:auto; color:#cbd5e1; font-weight:800; }

/* Replay pill (big centered) */
.rb_replay{
  display:flex; align-items:center; gap:12px;
  padding:14px 22px; border-radius:999px; border:1px solid #25324a;
  background-color: rgb(163, 0, 192);
  color:#e5e7eb; font-weight:900; cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}
.rb_replay_big{ font-size:18px; }
.rb_replay:disabled{ opacity:.7; cursor:not-allowed; }
.rb_replay .rb_eq{ display:none; gap:3px; height:16px; }
.rb_replay .rb_eq span{ width:3px; height:100%; background:#94a3b8; border-radius:1px; display:block; }
.rb_replay.speaking .rb_eq{ display:inline-flex; }
.rb_replay.speaking .rb_eq span:nth-child(1){ animation: rbEq 600ms linear infinite; }
.rb_replay.speaking .rb_eq span:nth-child(2){ animation: rbEq 600ms linear infinite 120ms; }
.rb_replay.speaking .rb_eq span:nth-child(3){ animation: rbEq 600ms linear infinite 240ms; }
@keyframes rbEq{ 0%,100%{ transform:scaleY(.4); background:#94a3b8; } 50%{ transform:scaleY(1); background:#22D3EE; } }

/* Boards layout */
.rb_boards{ display:grid; gap:18px; }
#rb_app[data-mode="solo"] .rb_boards{ grid-template-columns: 1fr; justify-items:center; }
#rb_app[data-mode="compete"] .rb_boards{ grid-template-columns: 1.2fr 1fr; align-items:start; }
@media (max-width: 980px){ #rb_app[data-mode="compete"] .rb_boards{ grid-template-columns: 1fr; } }

/* Board card */
.rb_board{ background:#0f172a; border:1px solid #1f2937; border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:10px; position:relative; }
.rb_board.active{ outline: 3px solid rgba(124,58,237,.9); box-shadow: 0 0 0 6px rgba(124,58,237,.12); }
.rb_bhead{ display:flex; align-items:center; gap:8px; }
.rb_bhead img{ width:40px; height:40px; border-radius:50%; }
.rb_bname{ font-weight:900; }

/* Grid (square-ish) */
.rb_grid{
  --rows: 3; --cols: 3; --board-h: 60vh;
  display:grid; gap: var(--tile-gap);
  grid-template-columns: repeat(var(--cols), 1fr);
  width: min(92vw, var(--board-h));
  height: var(--board-h);
  margin: 0 auto;
}
.rb_grid[data-size="3"]{ --rows:3; --cols:3; }
.rb_grid[data-size="4"]{ --rows:4; --cols:4; }
.rb_grid[data-size="5"]{ --rows:5; --cols:5; }

/* Tile */
.rb_cell{
  position:relative; user-select:none; background:#111827; border:1px solid #273142;
  border-radius:16px; display:grid; place-items:center; aspect-ratio:1/1;
  text-align:center; color:#e5e7eb; font-weight:900; cursor:pointer;
  transition: transform .06s, background .2s, border-color .2s, box-shadow .2s;
  overflow:hidden;
  font-size: 1.5rem;
}
.rb_cell .rb_wordtxt{ position:relative; z-index:2; text-shadow:0 1px 0 rgba(0,0,0,.35); pointer-events:none; }
.rb_cell.scan{ transform: scale(1.06); box-shadow: 0 0 0 3px rgba(148,163,184,.25) inset; }

.rb_mark_gif{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; z-index:1; }
.rb_mark_wash{ position:absolute; inset:0; border-radius:inherit; background: transparent; z-index:2; pointer-events:none; }

.rb_cell.marked{
  box-shadow:
    inset 0 0 0 6px var(--mark-color, #7C3AED),
    inset 0 0 0 1px rgba(0,0,0,.25),
    inset 0 -40px 60px rgba(0,0,0,.22);
  color:#f8fafc;
}

/* Hint: word exists (orange edge pulse) */
.rb_hint { outline: 3px solid #f59e0b; box-shadow: 0 0 0 6px rgba(245,158,11,.22); animation: rbGlow 1s ease-in-out 1; }
@keyframes rbGlow {
  0% { transform: scale(1.0); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1.0); }
}

/* Wrong tap: red wobble */
.rb_wrong{ outline: 3px solid #ef4444; box-shadow: 0 0 0 6px rgba(239,68,68,.22); animation: rbWrong 600ms ease-in-out 1; }
@keyframes rbWrong {
  0% { transform: scale(1) translateX(0); }
  25%{ transform: scale(.98) translateX(-2px); }
  50%{ transform: scale(.98) translateX(2px); }
  100%{ transform: scale(1) translateX(0); }
}

/* Per-board footer */
.rb_bfoot{ display:none; margin-top:6px; }
.rb_board.active .rb_bfoot{ display:flex; }
.rb_skip_btn{
  width:100%; text-align:center; padding:16px 18px; border-radius:999px;
  border:1px solid #2a2230; background:linear-gradient(180deg, #121b2f, #0a1222); color:#e2e8f0; cursor:pointer; font-weight:900; box-shadow:0 10px 26px rgba(0,0,0,.32);
  font-size: 1rem;
}
.rb_skip_btn.rb_sun{ border-color:#8a4b06; background:linear-gradient(180deg, #fbbf24, #f59e0b); color:#111827; }
.rb_bfoot.bot-hint .rb_skip_btn{ filter:saturate(1.2) brightness(1.05); }
.rb_skip_btn:hover{ transform:translateY(-1px); }
.rb_skip_btn:active{ transform:translateY(0); }

/* Avatars */
.rb_avatar_grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap:14px; }
.rb_avatar_grid img{ width:128px; height:128px; border-radius:20px; object-fit:cover; background:#111; border:3px solid transparent; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.rb_avatar_grid img.active{ border-color:var(--accent); box-shadow:0 0 0 5px rgba(124,58,237,.25), 0 6px 18px rgba(0,0,0,.35); }

/* Player type cards/toggles */
.rb_card { background: rgba(15,23,42,.6); border:1px solid #172134; border-radius:16px; padding:14px; margin:12px 0; }
.rb_toggle { display:flex; gap:8px; margin:8px 0 10px; }
.rb_toggle button{
  padding:10px 14px; border-radius:999px; border:1px solid #334155;
  background:#0f172a; color:#e5e7eb; font-weight:800; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.rb_toggle button.active{
  background: linear-gradient(180deg,#7C3AED,#5b21b6);
  border-color: transparent; color:#fff;
  box-shadow: 0 6px 18px rgba(124,58,237,.35);

}

.rb_replay_icon{
    font-size: 1.8rem;

}

.rb_replay_text{
  font-size: 1.5rem;
  text-align: center;
  margin: auto;
}

#rb_pcount_seg{
  font-size: 3rem;
}
.rb_toggle button[disabled]{ opacity:.55; cursor:not-allowed; }
.rb_micro{ color:#94a3b8; font-size:.85rem; margin-top:4px; }

/* Win */
.rb_win_card{ background:#0f172a; border:1px solid #1f2937; border-radius:16px; padding:24px; text-align:center; }
.rb_winner{ font-size: 5rem; font-weight:900; margin: 4px auto 8px; }
.rb_podium{ margin-top: 12px; display:grid; gap:8px; }
.rb_podium .rb_place{ display:flex; align-items:center; gap:8px; justify-content:center; color:#cbd5e1; }
.rb_w_med{ font-size: clamp(16px, 2vw, 22px); font-weight:800; }

#rb_play_again{
  font-size: 2rem;
}
/* Countdown overlay */
.rb_countdown{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5,10,20,.55);
  backdrop-filter: blur(2px);
  z-index: 999;
  color: #fff;
  font-weight: 900;
  font-size: clamp(48px, 10vw, 140px);
  letter-spacing: -2px;
  animation: none;
}
.rb_countdown.hidden{ display:none; }

.rb_count_val{
  transform: scale(.6);
  opacity: 0;
  text-shadow: 0 10px 40px rgba(0,0,0,.45);
  animation: rbCountPop 680ms ease forwards;
}

@keyframes rbCountPop{
  0%   { transform: scale(.6); opacity: 0; }
  40%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rb_cell.scan{ transform:none; box-shadow:none; }
  .rb_preview_grid{ transform:none; }
}

/* Winner rainbow pulse */
.rb_winner.rb_winner_animate{
  /* animated gradient text */
  background: linear-gradient(
    90deg,
    #7C3AED, #22D3EE, #10B981, #F59E0B, #EF4444, #7C3AED
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* subtle glow + pulse */
  text-shadow: 0 0 0 rgba(0,0,0,0); /* keep layout stable */
  animation:
    rbGradientSlide 6s linear infinite,
    rbPulse 1.25s ease-in-out infinite;
}

@keyframes rbGradientSlide{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

@keyframes rbPulse{
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(124,58,237,.0)); }
  50%     { transform: scale(1.06); filter: drop-shadow(0 6px 18px rgba(124,58,237,.35)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .rb_winner.rb_winner_animate{ animation: none; }
}


/* =======================================================================
   RESPONSIVE MEDIA QUERIES (add after all base rules)
   ======================================================================= */

/* ---------- ≤1200px : tighten max widths, soften radii ---------- */
@media (max-width: 1200px){
  .rb_screen{ width:min(1000px,96vw); }
  .rb_stage_card{ width:min(880px, 96vw); border-radius:20px; }
  .rb_hero_frame{ width:min(780px,95vw); border-radius:20px; }
  .rb_cover{ border-radius:14px; }
  #rb_app{ padding:20px; }
}

/* ---------- ≤1024px : reduce board height + gaps, stack controls ---------- */
@media (max-width: 1024px){
  /* scale core layout tokens */
  #rb_app{
    --tile-gap: 10px;
  }
  .rb_stage_title{ font-size: clamp(22px, 2.6vw, 32px); }
  .rb_title{ font-size: clamp(26px, 3vw, 40px); }

  /* table layout already stacks to one column at ≤980px;
     keep two columns a bit longer on large tablets if needed */
  #rb_app[data-mode="compete"] .rb_boards{
    grid-template-columns: 1fr 1fr;
  }

  /* board size */
  .rb_grid{ --board-h: 62vh; width:min(92vw, var(--board-h)); }

  /* hero & search */
  .rb_hero_frame{ width:min(720px,95vw); }
  .rb_searchwrap{ width:min(560px, 94%); }

  /* bigger touch targets */
  .rb_btn{ padding:12px 16px; }
  .rb_chip{ padding:14px 16px; }
}

/* ---------- ≤980px : single-column compete boards (keep existing rule) ---------- */
@media (max-width: 980px){
  #rb_app[data-mode="compete"] .rb_boards{ grid-template-columns: 1fr; }
}

/* ---------- ≤900px : mobile-ish layout, taller boards for handhelds ---------- */
@media (max-width: 900px){
  #rb_app{
    --tile-gap: 10px;
  }
  .rb_grid{ --board-h: 66vh; width:min(94vw, var(--board-h)); }
  .rb_cell{ font-size: 1.35rem; }
  .rb_chip{ font-size: 1.35rem; }

  .rb_mode_picker{ gap:6px; }
  .rb_mode_picker label{ padding:9px 14px; }

  .rb_stage_card{ width:min(820px, 96vw); }
  .rb_searchwrap{ width:min(520px, 94%); }

  /* avatar grid: smaller tiles fit more columns */
  .rb_avatar_grid{ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:12px; }
  .rb_avatar_grid img{ width:110px; height:110px; border-radius:18px; }
}

/* ---------- ≤768px : phone portrait — compact paddings, full-width CTAs ---------- */
@media (max-width: 768px){
  #rb_app{
    --tile-gap: 9px;
  }

  .rb_title{ font-size: clamp(24px, 6vw, 34px); margin: 10px 0 14px; }
  .rb_stage_title{ font-size: clamp(20px, 5vw, 28px); }
  .rb_hintline{ font-size: .95rem; }

  .rb_hero_frame{ width:min(640px,96vw); padding:8px; }
  .rb_cover{ border-radius:12px; }

  .rb_mode_picker{ flex-wrap:nowrap; }
  .rb_mode_picker label{ padding:9px 13px; font-size: .95rem; }
  .rb_play_big{ width:100%; padding:14px 18px; }

  .rb_stage_card{ padding:16px; border-radius:18px; }
  .rb_nav{ gap:10px; }
  .rb_btn{ padding:11px 14px; border-radius:14px; }
  .rb_ghost{ border-radius:14px; }

  .rb_searchwrap{ width:min(94%, 500px); }
  .rb_results{ display:none; } /* free space on small screens */

  .rb_skill_grid{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:10px;
  }
  .rb_chip{ padding:14px 14px; font-size: 1.2rem; }

  /* preview: slightly less tilt for small screens */
  .rb_preview_grid{ transform: rotateX(10deg) rotateZ(-1.5deg); }
  .rb_preview_grid[data-size="3"]{ grid-template-columns: repeat(3, 56px); }
  .rb_preview_grid[data-size="4"]{ grid-template-columns: repeat(4, 50px); }
  .rb_preview_grid[data-size="5"]{ grid-template-columns: repeat(5, 46px); }
  .rb_preview_cell{ height:46px; border-radius:9px; }

  /* board sizing */
  .rb_grid{ --board-h: 70vh; width:min(95vw, var(--board-h)); }
  .rb_cell{ font-size: 1.25rem; border-radius:14px; }

  /* header */
  .rb_bar{ gap:12px; padding:10px 12px; border-radius:16px; }
  .rb_replay{ padding:12px 18px; }
  .rb_replay_icon{ font-size: 1.5rem; }
  .rb_replay_text{ font-size: 1.2rem; }

  /* per-board actions */
  .rb_skip_btn{ padding:14px 16px; font-size: .95rem; }
}

/* ---------- ≤640px : compact everything, keep words readable ---------- */
@media (max-width: 640px){
  #rb_app{
    --tile-gap: 8px;
  }

  .rb_title{ font-size: clamp(22px, 7vw, 30px); }
  .rb_stage_title{ font-size: clamp(18px, 5.5vw, 26px); }

  .rb_stage_card{ width:min(600px, 96vw); padding:14px; }
  .rb_searchwrap{ width:min(94%, 440px); }

  .rb_skill_grid{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:10px;
  }
  .rb_chip{ font-size: 1.1rem; border-radius:14px; }

  .rb_grid{ --board-h: 72vh; width:min(96vw, var(--board-h)); }
  .rb_cell{ font-size: 1.15rem; border-radius:12px; }

  .rb_avatar_grid{ grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap:10px; }
  .rb_avatar_grid img{ width:96px; height:96px; border-radius:16px; }

  .rb_toggle button{ padding:9px 12px; font-size:.95rem; }
  .rb_micro{ font-size:.8rem; }

  .rb_win_card{ padding:20px; }
  .rb_w_med{ font-size: clamp(15px, 3.6vw, 20px); }
}

/* ---------- ≤560px : “small phone” tuning ---------- */
@media (max-width: 560px){
  #rb_app{
    --tile-gap: 7px;
  }

  .rb_hero_frame{ width:min(520px, 96vw); }
  .rb_mode_picker{ flex-wrap:wrap; }
  .rb_mode_picker label{ flex:1; justify-content:center; }

  .rb_filter{ padding-left:36px; }
  .rb_search_icon{ left:10px; }

  .rb_grid{ --board-h: 74vh; }
  .rb_cell{ font-size: 1.08rem; }

  .rb_replay{ padding:10px 16px; }
  .rb_replay_icon{ font-size: 1.35rem; }
  .rb_replay_text{ font-size: 1.08rem; }
}

/* ---------- ≤480px : one-hand phone — edge-to-edge boards ---------- */
@media (max-width: 480px){
  #rb_app{
    --tile-gap: 6px;
  }

  .rb_title{ margin: 8px 0 12px; }
  .rb_stage_card{ padding:12px; border-radius:16px; }
  .rb_skill_grid{ grid-template-columns: 1fr; }

  .rb_grid{ --board-h: 76vh; width:min(97vw, var(--board-h)); }
  .rb_cell{ font-size: 1.02rem; border-radius:11px; }

  .rb_preview_grid[data-size="3"]{ grid-template-columns: repeat(3, 52px); }
  .rb_preview_grid[data-size="4"]{ grid-template-columns: repeat(4, 46px); }
  .rb_preview_grid[data-size="5"]{ grid-template-columns: repeat(5, 42px); }
  .rb_preview_cell{ height:42px; border-radius:8px; }

  .rb_nav{ flex-direction:column; }
  .rb_nav .rb_btn{ width:100%; }

  .rb_skip_btn{ padding:12px 14px; font-size:.95rem; border-radius:999px; }
}

/* ---------- ≤400px : ultra-compact ---------- */
@media (max-width: 400px){
  #rb_app{
    --tile-gap: 5px;
  }

  .rb_hero_frame{ padding:6px; border-radius:14px; }
  .rb_cover{ border-radius:10px; }

  .rb_grid{ --board-h: 78vh; width:min(98vw, var(--board-h)); }
  .rb_cell{ font-size: .98rem; border-radius:10px; }

  .rb_replay{ padding:9px 14px; }
  .rb_replay_icon{ font-size: 1.2rem; }
  .rb_replay_text{ font-size: 1rem; }
}

/* ---------- Height-constrained screens (short landscape phones/tablets) ---------- */
@media (max-height: 700px) and (orientation: landscape){
  .rb_bar{ position:static; }                  /* avoid stealing vertical space */
  .rb_grid{ --board-h: 72vh; }
  .rb_cell{ font-size: 1rem; }
}

/* ---------- Extra short (game first) ---------- */
@media (max-height: 560px) and (orientation: landscape){
  #rb_app{ padding:12px; }
  .rb_grid{ --board-h: 76vh; }
  .rb_bar{ margin-bottom:10px; }
}

/* ---------- High-density displays: keep text crisp and tiles tappable ---------- */
@media (min-resolution: 2dppx){
  .rb_cell .rb_wordtxt{ text-shadow: 0 .5px 0 rgba(0,0,0,.25); }
}