/* Exact game-canvas boundary, measured type, and game-owned effects. */
#abzShellGameStage { min-height: 0; overflow: hidden; overscroll-behavior: auto; scrollbar-gutter: auto; }
#abzShellGameFrame:fullscreen { display: flex; flex-direction: column; height: 100dvh; }
#abzShellGameFrame:fullscreen .abz-shell-game-toolbar { flex: 0 0 auto; }
#abzShellGameFrame:fullscreen #abzShellGameStage { height: auto; flex: 1 1 0; }
#rb_app {
  height: var(--abz-game-stage-height, 700px);
  min-height: 0;
  min-width: 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  --rb-space: clamp(12px, 2cqw, 28px);
}
#rb_app .rb_screen {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 64px var(--rb-space) var(--rb-space);
  overflow: hidden;
}
#rb_app .rb_sound_toolbar { position: absolute; z-index: 8; top: max(8px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
#rb_app:has(#rb_game.active) .rb_sound_toolbar { display: none; }
#rb_app:has(#rb_setup.active[data-setup-step="skill"]) .rb_sound_toolbar { display: none; }
#rb_app #rb_setup[data-setup-step="skill"] { padding-top: 16px; }
#rb_app #rb_setup[data-setup-step="skill"] .rb_setup_nav { justify-content: center; height: auto; min-height: 16px; padding: 0; }
#rb_app .rb_hear_btn { overflow: visible; }
#rb_app .rb_replay_hint { position: absolute; left: 85%; top: 50%; z-index: 8; width: 170px; padding: 10px 14px; border-radius: 0 14px 14px 0; background: var(--rb-mint); color: var(--rb-ink); font: 800 16px/1.25 "Figtree", sans-serif; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-18px, -50%); transition: transform .3s ease, opacity .3s ease, visibility .3s; }
#rb_app .rb_replay_hint.visible { opacity: 1; visibility: visible; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) { #rb_app .rb_replay_hint { transition: none; transform: translate(0, -50%); } }
/* Gameplay has no utility header; its former space belongs to the board. */
#rb_app #rb_game { padding: 12px var(--rb-space); }
#rb_app #rb_sound_toggle { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 1px solid #e4cfec38; border-radius: 999px; background: #26102fcc; color: var(--rb-cream); font-size: max(16px, var(--abz-game-type-control, 16px)); font-weight: 800; }
#rb_sound_toggle[aria-pressed="false"] { opacity: .75; }
#rb_sound_toggle span { color: var(--rb-mint); font-size: 23px; }
#rb_app .rb_screen h1 { font-size: min(76px, var(--abz-game-type-display, 64px)); }
#rb_app .rb_setup_heading h2,
#rb_app .rb_result_heading h2 { font-size: min(56px, var(--abz-game-type-screen-title, 38px)); }
#rb_app .rb_option_title { font-size: min(28px, var(--abz-game-type-card-title, 23px)); }
#rb_app .rb_step_sub,
#rb_app .rb_title_intro,
#rb_app .rb_result_sub { font-size: var(--abz-game-type-body, 16px); line-height: 1.4; }
#rb_app .rb_option_sub,
#rb_app .rb_caller_copy p,
#rb_app .rb_custom_guest small,
#rb_app .rb_custom_teacher p,
#rb_app .rb_custom_set_meta,
#rb_app .rb_custom_validation,
#rb_app .rb_custom_words_heading small,
#rb_app .rb_custom_label,
#rb_app .rb_custom_status,
#rb_app .rb_assignment_status,
#rb_app .rb_assignment_send,
#rb_app .rb_results_panel > p,
#rb_app .rb_custom_dialog_header > div > p:last-child { font-size: 16px; line-height: 1.35; }
#rb_app .rb_custom_set_card h4 { font-size: var(--abz-game-type-card-title, 23px); }
#rb_app .rb_custom_eyebrow, #rb_app .rb_ready_divider, #rb_app .rb_custom_label span { font-size: 12px !important; }
#rb_app .rb_step_count,
#rb_app .rb_mode_label,
#rb_app #rb_player_stats,
#rb_app .rb_stat_label { font-size: var(--abz-game-type-caption, 12px); }
#rb_app .rb_pill_btn,
#rb_app .rb_next_btn,
#rb_app .rb_result_btn,
#rb_app .rb_press,
#rb_app .rb_custom_action,
#rb_app .rb_custom_login,
#rb_app .rb_custom_create,
#rb_app .rb_custom_secondary,
#rb_app .rb_custom_primary { min-height: 48px; font-size: max(16px, var(--abz-game-type-control, 16px)) !important; }
#rb_app .rb_press { padding: 17px 26px !important; }
#rb_app [data-scroll-enabled="false"] { overscroll-behavior: auto; }
#rb_app [data-scroll-region],
#rb_app .rb_title_scene,
#rb_app .rb_game_shell { min-height: 0; min-width: 0; overflow: hidden; }
#rb_app [data-scroll-region] { scrollbar-gutter: stable; }
/* Keep the library/details width stable when a scrollbar first appears. */
#rb_app [data-scroll-policy="scroll"] [data-scroll-region],
#rb_app [data-scroll-policy="grow"] [data-scroll-region] { padding-right: 62px; }
#rb_app [data-scroll-enabled="true"][data-scroll-region],
#rb_app .rb_title_scene[data-scroll-enabled="true"],
#rb_app .rb_game_shell[data-scroll-enabled="true"] { overflow-y: auto; overflow-x: hidden; padding-right: 62px; scrollbar-gutter: stable; overscroll-behavior: auto; }
#rb_app [data-scroll-region]:focus-visible { outline: 2px solid var(--rb-mint); outline-offset: -2px; }
#rb_app h1[tabindex="-1"]:focus,
#rb_app h2[tabindex="-1"]:focus { outline: none; }
.rb_scroll_cues { position: absolute; z-index: 10030; display: flex; flex-direction: column; gap: 8px; }
#rb_app .rb_scroll_cues button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff3e65c; background: linear-gradient(150deg, #8ff0c8, #55c59f); color: var(--rb-ink); box-shadow: 0 3px 0 #34745f; font-size: 26px; font-weight: 900; }

/* Start: sacrifice the decorative preview first when room gets tight. */
#rb_app .rb_title_scene { flex: 1; max-height: 100%; display: flex; align-items: safe center; margin: 0 auto; border-radius: 0; }
#rb_app .rb_title_layout { width: 100%; flex-wrap: nowrap; padding: 20px clamp(12px, 4cqw, 54px); gap: 36px; }
#rb_app .rb_title_copy { flex: 1 1 55%; min-width: 0; }
#rb_app .rb_hero_card { flex: 0 1 30%; min-width: 0; width: 30%; max-width: 320px; }
#rb_app .rb_title_intro { margin-bottom: 24px; }
#rb_app .rb_letter_tiles span { width: clamp(44px, 6cqw, 74px); height: clamp(44px, 6cqw, 74px); font-size: clamp(24px, 4cqw, 38px); }
#rb_app .rb_mode_buttons { gap: 12px; }
#rb_app .rb_mode_buttons .rb_press { flex: 0 1 auto; }
#rb_app [data-layout="compact"] .rb_hero_card { display: none; }
#rb_app [data-layout="compact"] .rb_title_layout { gap: 12px; padding: 8px; }
#rb_app [data-layout="compact"] .rb_letter_tiles { display: none; }

/* Selection: the heading and navigation never belong to the library scroller. */
#rb_app .rb_setup_shell { height: 100%; min-height: 0; max-width: 1040px; margin: 0 auto; }
#rb_app .rb_setup_nav { flex: 0 0 auto; margin-bottom: 16px; gap: 8px; }
#rb_app .rb_setup_content { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; padding: 0; animation: none; }
#rb_app .rb_setup_heading { flex: 0 0 auto; }
#rb_app .rb_step_sub { margin: 8px 0 0; }
#rb_app .rb_setup_choices { flex: 1 1 0; position: relative; padding: 6px 6px 12px; }
#rb_app #rb_setup[data-scroll-policy="fit"] .rb_setup_choices { align-content: center; }
#rb_app .rb_setup_actions { flex: 0 0 auto; padding: 0 0 8px; }
#rb_app .rb_begin_btn { min-height: 48px; margin: 0 auto; padding: 16px 30px !important; font-size: min(28px, var(--abz-game-type-card-title, 23px)) !important; }
#rb_app .rb_option_card { min-height: 92px; padding: 16px; }
#rb_app .rb_option_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rb_skill_search_label { display: block; font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.rb_skill_search_row { display: flex; gap: 10px; }
#rb_skill_search { min-width: 0; flex: 1; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid #e4cfec59; background: #fff3e612; color: var(--rb-cream); font: 600 16px "Figtree", sans-serif; }
#rb_skill_search::placeholder { color: var(--rb-muted); }
#rb_app #rb_skill_search_clear { min-width: 60px; min-height: 48px; padding: 10px; border: 1px solid #e4cfec59; border-radius: 14px; font-size: 16px; font-weight: 800; }
.rb_skill_search_count { font-size: 12px; color: var(--rb-muted); margin: 6px 0 12px; }
.rb_skill_group { color: var(--rb-muted-dark); font: 800 16px "Figtree", sans-serif; margin: 0 0 12px; }
#rb_app .rb_option_card.selected { outline: 3px solid var(--rb-cream); outline-offset: -5px; }
#rb_app .rb_size_card { min-height: 130px; }
#rb_app .rb_marker_picker { gap: 24px; }
#rb_app .rb_marker_preview { width: 132px; height: 132px; background: color-mix(in srgb, var(--preview-color, var(--rb-coral)) 35%, var(--rb-cream)); }
#rb_app .rb_color_btn { min-height: 48px; min-width: 44px; }

/* Gameplay uses remaining height for the board. */
#rb_app .rb_game_shell { height: 100%; display: flex; gap: 8px; }
#rb_app .rb_game_topbar,
#rb_app .rb_caller { flex: 0 0 auto; }
#rb_app .rb_game_meta { max-width: none; }
#rb_app .rb_caller { padding: 14px 20px; gap: 20px; flex-wrap: nowrap; }
#rb_app .rb_caller_copy { min-width: 0; }
#rb_app .rb_caller_copy h2 { font-size: min(28px, var(--abz-game-type-card-title, 23px)); }
#rb_app .rb_hear_btn { width: 86px; height: 86px; }
#rb_app .rb_caller_copy p { margin-bottom: 8px; }
#rb_app .rb_next_btn { padding: 8px 18px !important; margin-top: 8px; }
#rb_app .rb_toast { min-height: 28px; flex: 0 0 auto; padding: 4px 12px; font-size: 16px; }
#rb_app .rb_toast:not(.visible) { display: block; visibility: hidden; }
#rb_app .rb_game_boards { flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
#rb_app .rb_game_boards.solo { grid-template-columns: minmax(0, 1fr); }
#rb_app .rb_player_area { height: 100%; min-height: 0; }
#rb_app .rb_player_board { gap: 6px; max-width: 960px; }
#rb_app .rb_board_heading { max-width: 960px; }
#rb_app .rb_cell { height: var(--fitted-cell-height, 60px); min-height: 44px; }
#rb_app .rb_cell_text { font-size: clamp(16px, min(2.8cqw, 4.2cqh), 32px); }
#rb_app .rb_cell.in-win { animation: rbWinningSquare .7s ease both; }
#rb_app .rb_bot_area { align-items: start; }
#rb_app .rb_bot_card { padding: 10px; }
#rb_app .rb_bot_head { flex-wrap: wrap; gap: 5px; }
#rb_app .rb_game_shell[data-scroll-enabled="true"] .rb_game_boards { flex: 0 0 auto; min-height: max-content; }
#rb_app .rb_game_shell[data-scroll-enabled="true"] .rb_player_area { height: auto; min-height: max-content; }

/* Result actions stay outside the expandable details and feedback. */
#rb_app .rb_results { height: 100%; max-width: 880px; min-height: 0; display: flex; flex-direction: column; gap: 16px; margin: 0 auto; padding: 0; animation: none; }
.rb_result_heading { position: relative; flex: 0 0 auto; isolation: isolate; }
#rb_app .rb_result_heading h2 { margin: 16px 0 8px; }
#rb_app .rb_result_sub { margin: 0; }
#rb_app .rb_results_scroll { flex: 1 1 0; padding: 6px; }
#rb_app .rb_result_stats { margin-bottom: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#rb_app .rb_stat { padding: 14px 8px; }
#rb_app .rb_result_actions { flex: 0 0 auto; padding: 4px 0 8px; gap: 10px; }
#rb_app .rb_result_actions > * { width: auto; flex: 1 1 160px; padding: 14px 18px !important; }
#rb_app .rb_result_badge { width: 96px; height: 96px; font-size: 52px; }
#rb_app .rb_results_panel { margin-bottom: 16px; }
.rb_victory_rays { display: none; }
.rb_player_won .rb_victory_rays { display: block; position: absolute; z-index: -1; width: 270px; height: 210px; max-height: 100%; left: 50%; top: -10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, #ffc24d45, #c77dff15 48%, transparent 70%); }
#rb_app .rb_player_won .rb_result_badge { background: linear-gradient(145deg, #ffdf83, #ffc24d 65%, #ed9531); border: 3px solid #fff3e694; box-shadow: 0 8px 0 #a65d24, 0 0 45px #ffc24d38; animation: rbTrophyArrival .75s cubic-bezier(.2, 1.4, .4, 1) both; }
.rb_victory_letters { display: inline-flex; gap: .035em; }
.rb_victory_letters > span { display: inline-block; color: var(--rb-gold); text-shadow: 0 4px 0 #9c592b; animation: rbVictoryLetter .65s calc(var(--letter) * .085s) cubic-bezier(.2, 1.5, .4, 1) both; }
.rb_victory_letters > span:nth-child(2) { color: var(--rb-mint); text-shadow: 0 4px 0 #357f6d; }
.rb_victory_letters > span:nth-child(3) { color: var(--rb-coral); text-shadow: 0 4px 0 #9b382a; }
.rb_victory_letters > span:nth-child(4) { color: var(--rb-cream); text-shadow: 0 4px 0 #927b78; }
.rb_victory_letters > span:nth-child(5) { color: var(--rb-purple); text-shadow: 0 4px 0 #7846a4; }
#rb_celebration_canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.rb_celebrating .rb_result_heading::after { content: "✦"; position: absolute; top: 18px; left: calc(50% + 78px); color: var(--rb-gold); font-size: 32px; animation: rbWinSparkle 1.2s 3 ease-in-out; }

/* The builder is bounded by the same canvas, not by the whole webpage. */
#rb_app .rb_custom_modal { position: absolute; padding: 12px; }
#rb_app .rb_custom_dialog { max-height: 100%; height: 100%; }
#rb_app .rb_custom_scroll { overscroll-behavior: auto; padding-right: 64px; }
body.rb_custom_modal_open { overflow: auto; }

@container (max-width: 700px) {
  #rb_app .rb_title_layout { justify-content: center; padding: 12px; }
  #rb_app .rb_title_copy { flex: 1; }
  #rb_app .rb_hero_card { display: none; }
  #rb_app .rb_title_intro { max-width: 100%; }
  #rb_app .rb_setup_nav { display: flex; }
  #rb_app .rb_option_grid { grid-template-columns: 1fr; }
  #rb_app .rb_size_grid, #rb_app .rb_bot_count_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #rb_app .rb_size_card, #rb_app .rb_bot_count_card { min-height: 100px; padding: 12px 6px; }
  #rb_app .rb_bot_count_card .rb_option_sub { display: none; }
  #rb_app .rb_size_icon { display: none; }
  #rb_app .rb_option_emoji { font-size: 28px; }
  #rb_app .rb_marker_preview { width: 92px; height: 92px; }
  #rb_app .rb_marker_picker { flex-direction: column; gap: 16px; }
  #rb_app .rb_color_grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  #rb_app .rb_game_topbar { gap: 6px; }
  #rb_app .rb_game_meta .rb_meta_pill:last-child { display: none; }
  #rb_app .rb_streak_pill { padding: 5px 10px; }
  #rb_app .rb_caller { padding: 10px; gap: 10px; }
  #rb_app .rb_hear_btn { width: 64px; height: 64px; }
  #rb_app .rb_caller_copy p:not(.rb_word_fallback) { display: none; }
  #rb_app .rb_game_boards { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  #rb_app .rb_game_boards.solo { grid-template-rows: minmax(0, 1fr); }
  #rb_app .rb_bot_area { display: grid; grid-template-columns: repeat(var(--bot-count), minmax(0, 1fr)); padding: 0; overflow: visible; }
  #rb_app .rb_bot_head { margin: 0; flex-wrap: nowrap; }
  #rb_app .rb_bot_emoji { font-size: 22px; }
  #rb_app .rb_bot_grid, #rb_app .rb_bot_chatter { display: none; }
  #rb_app .rb_stat_value { font-size: 26px; }
  #rb_app .rb_result_badge { width: 72px; height: 72px; font-size: 40px; border-radius: 24px; }
  #rb_app .rb_result_actions > * { flex-basis: 140px; }
}
@container (max-height: 580px) {
  #rb_app .rb_screen { padding-top: 60px; padding-bottom: 12px; }
  #rb_app .rb_letter_tiles { display: none; }
  #rb_app .rb_title_layout { padding: 0 12px; }
  #rb_app .rb_hero_card { max-width: 180px; }
  #rb_app .rb_title_intro { margin-bottom: 12px; }
  #rb_app .rb_setup_content { gap: 8px; }
  #rb_app .rb_setup_nav { margin-bottom: 8px; }
  #rb_app .rb_setup_heading h2 { font-size: 32px; }
  #rb_app .rb_marker_picker { flex-direction: row; }
  #rb_app .rb_marker_preview { display: none; }
  #rb_app .rb_color_grid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  #rb_app .rb_color_btn { height: 48px; }
  #rb_app .rb_result_badge { display: none; }
  #rb_app .rb_result_heading h2 { margin-top: 4px; }
  #rb_app .rb_results { gap: 8px; }
  #rb_app .rb_result_actions > * { padding: 8px 12px !important; }
}
@container (min-width: 580px) and (max-height: 580px) {
  #rb_app[data-active-screen="rb_game"] .rb_sound_toolbar { left: 12px; right: auto; }
  #rb_app #rb_game { padding: 6px 12px; }
  #rb_app .rb_game_shell { display: grid; gap: 8px; grid-template-columns: minmax(220px, 25%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
  #rb_app .rb_game_topbar { grid-column: 1; grid-row: 1; justify-content: flex-end; }
  #rb_app .rb_caller { grid-column: 1; grid-row: 1; flex-direction: row; min-height: 0; padding: 8px; gap: 8px; }
  #rb_app .rb_caller_copy { flex: 0 1 auto; }
  #rb_app .rb_caller_copy p:not(.rb_word_fallback), #rb_app .rb_caller_copy h2, #rb_app .rb_streak_pill, #rb_app .rb_game_meta .rb_meta_pill { display: none; }
  #rb_app .rb_hear_btn { width: 54px; height: 54px; }
  #rb_app .rb_toast { grid-column: 1; grid-row: 3; padding: 2px 4px; }
  #rb_app .rb_game_boards { display: contents; }
  #rb_app .rb_player_area { grid-column: 2; grid-row: 1 / 4; }
  #rb_app .rb_bot_area { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(var(--bot-count), minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 0; }
  #rb_app .rb_game_boards.solo .rb_bot_area { display: none; }
  #rb_app .rb_bot_card { padding: 6px; min-width: 0; }
  #rb_app .rb_bot_grid, #rb_app .rb_bot_chatter, #rb_app .rb_bot_emoji { display: none; }
  #rb_app .rb_bot_head { margin: 0; gap: 2px; }
}
@container (min-width: 580px) and (max-height: 400px) {
  #rb_app .rb_hero_card { display: none; }
  #rb_app .rb_title_copy { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8px 24px; align-items: center; }
  #rb_app .rb_kicker { grid-column: 1; grid-row: 1; margin: 0; }
  #rb_app #rb_start_h { grid-column: 1; grid-row: 2 / 4; margin: 0; font-size: clamp(48px, 8cqw, 64px); }
  #rb_app .rb_title_intro { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  #rb_app .rb_mode_buttons { grid-column: 2; grid-row: 3; gap: 8px; }
  #rb_app .rb_mode_buttons .rb_press { padding: 10px 12px !important; }
  #rb_app .rb_setup_nav { margin: 0; padding-right: 160px; height: 48px; }
  #rb_app #rb_setup { padding-top: 8px; }
  #rb_app .rb_step_count { display: none; }
  #rb_app .rb_setup_shell { gap: 8px; }
  #rb_app .rb_setup_heading { display: flex; align-items: center; gap: 20px; }
  #rb_app .rb_setup_heading h2 { flex: 0 1 52%; }
  #rb_app .rb_setup_heading .rb_step_sub { flex: 1; margin: 0; }
  #rb_app .rb_size_icon { display: none; }
  #rb_app .rb_size_card, #rb_app .rb_bot_count_card { min-height: 92px; padding: 8px; }
  #rb_app .rb_bot_count_card .rb_option_sub { font-size: 16px; }
  #rb_app .rb_bot_count_card .rb_option_emoji { display: none; }
  #rb_app .rb_begin_btn { padding: 10px 24px !important; }
}
@keyframes rbTrophyArrival { from { opacity: 0; transform: translateY(35px) scale(.3) rotate(-16deg); } 70% { opacity: 1; transform: translateY(-6px) scale(1.08) rotate(5deg); } to { transform: none; } }
@keyframes rbVictoryLetter { from { opacity: 0; transform: translateY(24px) scale(.65) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes rbWinSparkle { 0%, 100% { opacity: .3; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
@keyframes rbWinningSquare { 0%, 100% { transform: scale(1); } 45% { transform: scale(.94); box-shadow: 0 0 0 5px var(--rb-gold), 0 0 32px #ffc24da6; } }
@media (prefers-reduced-motion: reduce) {
  #rb_app #rb_celebration_canvas, #rb_app .rb_result_heading::after { display: none; }
  #rb_app .rb_victory_letters > span, #rb_app .rb_player_won .rb_result_badge { animation: none; }
}