/* wholeclass_roll_call/index.php — dedicated stylesheet.
   Bespoke fluid flex layout; no Bootstrap .container/.row/.col width steps.
   Colors/shadows are declared directly here rather than relying on
   layout_2021-7.css's .nameblk1/.qblock/.qblock2/.button-simple-yellow
   rules to cascade through — that file is shared by many other pages and
   its .nameblk1.qblock h1 rule (2 classes) was silently overriding this
   page's font-size clamp (1 class) by specificity, pinning the question
   text to a fixed 2.5rem. Every selector below is scoped with enough
   specificity to never depend on winning a fight against that file again,
   and declares its own background/shadow instead of inheriting it. */

.rc-page {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: min(1600px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(6px, 1.5vh, 16px) clamp(8px, 1.5vw, 20px);
  gap: clamp(6px, 1.2vh, 14px);
}
.rc-page *, .rc-page *::before, .rc-page *::after {
  box-sizing: border-box;
}

/* ---------- top bar ---------- */
.rc-topbar {
  flex: 0 0 auto;
}
.rc-topbar .rollama-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.rc-topbar .rollama-actions-row > [class*="col-"] {
  min-width: 0;
  flex: 0 1 auto;
  width: auto;
  max-width: none;
}
.rc-topbar #rollama-actions-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}
.rc-topbar img.roll-call-img {
  max-width: 220px;
  width: 100%;
  height: auto;
}

/* content group (banner/names/options) centers as a block in whatever
   space is left between the topbar and button row, instead of each
   section stretching via flex-grow to fill all available height */
.rc-middle {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 3vh, 40px);
}

/* spelling-roll-call help tooltip (ported unchanged from roll-call.css) */
.help-action {
  color: #fff;
  position: absolute;
  right: 10px;
  top: -20px;
  background-color: #548235;
  border-radius: 15px;
  padding: 10px 14px;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 2;
}
.help-action::after {
  content: attr(data-help);
  position: absolute;
  top: 125%;
  left: -100%;
  transform: translateX(-50%);
  background: #548235;
  color: #fff;
  padding: 12px;
  border-radius: 15px;
  white-space: normal;
  font-size: 1.4rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 999;
  width: 320px;
  max-width: calc(100vw - 40px);
}
.help-action::before {
  content: '';
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #548235 transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 998;
}
.help-action:hover::after,
.help-action:hover::before {
  opacity: 1;
}

/* small ported rules this page depends on from roll-call.css */
.rc-page .currency { width: 32px; margin-top: -14px; }
.rc-page .restart-button { width: 110px; }
.rc-page .btn-pause img { width: 28px; vertical-align: middle; }
.rc-page .btn-yellow { background: #ffd849; }
.info-modal-content { font-size: 20px; }

/* ---------- banner (question / prompt) ---------- */
/* Sized by its own content (padding + line-height), not stretched to fill
   available height — a short one-line question stays compact, a longer
   one that wraps to 2 lines grows naturally. Font is width-driven (vw),
   not height-driven, since height here is an output of the font size,
   not an input to it. */
.rc-banner {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
}
.rc-description-block {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 6px 20px;
  text-align: center;
  color: #733381;
  font-size: clamp(1.75rem, 4.2vw, 3.5rem);
  line-height: 1.2;
  margin: 0px 100px 25px;
  background-color: #ffd849;
  border-radius: 15px;
  box-shadow: 5px 5px #733381;
}
.rc-page .rc-banner-block {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  min-height: clamp(90px, 16vh, 170px);
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  background-color: #ffd59e;
  box-shadow: 5px 5px #733381;
}
.rc-page .rc-banner-block h1 {
  margin: 0;
  display: block;
  font-size: clamp(1.75rem, 4.2vw, 3.5rem);
  line-height: 1.18;
}
.roll-call-static-note {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  color: #fff;
  opacity: 0.85;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
}

/* ---------- names row ---------- */
/* Target height 150px (shrinks on short viewports via the vh term so it
   never forces a scroll) instead of stretching to fill leftover space. */
.rc-names {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 16px);
}
.rc-name-cell {
  flex: 1 1 0;
  min-width: 0;
  height: clamp(70px, 16vh, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  container-type: size;
}
.rc-name-cell .nameblk1 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffab62;
  box-shadow: 5px 5px #733381;
  margin:0px 50px;
}
.rc-name-cell .nameblk1 h1 {
  margin: 0;
  display: block;
  font-size: clamp(1.5rem, min(9cqw, 40cqh), 3.5rem);
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
/* #checkbtn's/tasks-module.js's click handlers add .pointsAdded to mark a
   correct answer or an awarded student — needs to outrank the plain
   .rc-name-cell .nameblk1 rule above (3 classes vs 2), same
   specificity-tie failure mode documented at the top of this file. */
.rc-name-cell .nameblk1.pointsAdded {
  background-color: #579d45;
  color: #fff;
}
.coins_bubble {
  border-radius: 10px;
  text-align: center;
  width: 72px;
  background-color: #589c48;
  box-shadow: 5px 5px #fff;
  color: white;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  transition: top 1s;
  font-size:1.5rem;
  height:50px;
  padding:10px;
}
.coins-animate {
  top: -20px;
}
.rc-llama-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-llama-cell img {
  height: clamp(60px, 13vh, 110px);
  width: auto;
}

/* ---------- answer options row ---------- */
/* Target height 150px for the option pill, 125px for the finger-count
   icon (both shrink on short viewports via the vh term). */
.rc-options {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 16px);
}
.rc-options .option-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex !important;
}
.rc-options .option-row {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 12px);
  width: 100%;
  min-width: 0;
}
.rc-options .numberhands {
  flex-shrink: 0;
  height: clamp(50px, 13.5vh, 125px);
  width: auto;
  position: relative;
  z-index: 1;
  rotate: -5deg;
}
.rc-options .optionblock {
  flex: 0 1 70%;
  min-width: 0;
  height: clamp(70px, 16vh, 150px);
  box-sizing: border-box;
  /* Fixed 25px side padding used to eat most of the box on narrow viewports
     (box could shrink to ~110px wide while padding alone stayed 50px). Uses
     % rather than cqw/cqh: this element is itself the query container, and
     an element can't use container query units to size its own properties
     (they silently resolve against the viewport instead, always hitting
     these clamp()s' max and negating the fix). % padding resolves against
     the containing block (the parent .option-row) instead, so it actually
     scales down with the box. */
  padding: clamp(6px, 8%, 15px) clamp(6px, 8%, 25px);
  display: flex;
  position: relative;
  right: 40px;
  align-items: center;
  justify-content: center;
  container-type: size;
  background-color: #fbb149;
  box-shadow: 5px 5px #733381;
}
/* #checkbtn's click handler (footer.php) adds .pointsAdded to the correct
   option's .optionblock to highlight it green — needs to beat the base
   background-color above (3 classes vs 2), otherwise it silently ties
   and loses on source order, same failure mode as the layout_2021-7.css
   decoupling bug. */
.rc-options .optionblock.pointsAdded {
  background-color: #579d45;
  color:#fff;
}
/* Width capped via min(cqw, cqh) — a single-word option has nowhere to
   wrap but mid-word, so height-only sizing (this box's old behaviour)
   forced long words like "convenience" to break apart via word-break.
   Cap raised to 5rem (was tied to the 3.5rem name-font cap) since short
   words like "up"/"down" were hitting that cap well before filling the
   box — cqw/cqh now govern sizing in practice, the cap is just a backstop. */
.rc-options .optionblock .option_style {
  margin: 0;
  display: -webkit-box;
  font-size: clamp(1.5rem, min(16cqw, 45cqh), 5rem);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* fallback qblock2 block (no answer options, non-tenses games) */
.rc-options .qblock2 {
  width: 100%;
  height: clamp(70px, 16vh, 150px);
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
  background-color: #fbca3e;
  box-shadow: 5px 5px #733381;
}
.rc-options .qblock2 h1 {
  margin: 0;
  display: block;
  font-size: clamp(1.5rem, 40cqh, 3.5rem);
  line-height: 1.15;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- bottom button row (ported unchanged from this session's fix) ---------- */
.rc-buttons.btnrow {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  display: flex;
  --bs-gutter-x: 10px;
  gap: 10px;
}
.rc-buttons > .col {
  flex: 1 1 0;
  min-width: 0;
  container-type: inline-size;
}
.rc-buttons .namesbtn-col,
.rc-buttons .checkbtn-col {
  flex-grow: 1.3;
}
.rc-buttons .toggleoptions-col {
  flex-grow: 1.4;
}
/* Plain icon images: width/height both auto so the browser scales them by
   their own intrinsic aspect ratio, capped by max-height/max-width — never
   force a fixed height on one axis alone, which squashes non-square icons
   when their column gets narrower than the icon's natural width.
   Border-radius scales with the column's own width (cqw) rather than a
   flat 15px — a flat radius looks like a near-circle/stadium shape once
   the column gets narrow, since 15px stops being a small fraction of a
   small box. */
.rc-buttons img.homebutton,
.rc-buttons img.teacherbutton,
.rc-buttons img.levelbutton {
  height: auto;
  width: auto;
  max-height: 80px;
  max-width: 100%;
  border-radius: clamp(6px, 12cqw, 15px);
}
/* Pill-shaped button elements: these are boxes (not raw images), so height
   isn't aspect-ratio-constrained like the icons — but a flat 80px looked
   mismatched against the icons once a narrow viewport forced their aspect
   ratio to shrink below 80px. cqw (this button's own column width) can't
   track that, since namesbtn/checkbtn/toggleOptionsBtn sit in deliberately
   wider columns (see flex-grow below) than the icon columns — so this
   uses vw instead, tuned to the icon's own measured shrink curve
   (~6.9vw up to the 80px cap around 1160px viewport width) so both button
   types shrink in step regardless of their own column's width.
   Color/background/shadow declared directly (not inherited from
   layout_2021-7.css's .button-simple-yellow) so this row doesn't depend
   on a shared, sitewide rule for its own look. */
.rc-buttons #rollbtn,
.rc-buttons #namesbtn,
.rc-buttons #checkbtn,
.rc-buttons #replayAudioBtn,
.rc-buttons #toggleOptionsBtn {
  height: clamp(36px, 6.9vw, 80px);
  max-width: 100%;
  box-sizing: border-box;
  border-radius: clamp(6px, 12cqw, 15px);
  white-space: nowrap;
  color: #4a3050;
  background-color: #ffd849;
  border: none;
  box-shadow: 5px 5px #733381;
}
.rc-buttons .rollbtn,
.rc-buttons .namesbtn,
.rc-buttons .checkbtn {
  width: 100%;
}
.rc-buttons #roll-btn {
  max-width: 100%;
  height: auto;
}
.rc-buttons #namesbtn,
.rc-buttons #checkbtn,
.rc-buttons #toggleOptionsBtn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.5rem, 24cqw, 2.625rem);
  padding: 0 8px;
}
.rc-buttons #toggleOptionsBtn {
  font-size: clamp(1.05rem, 21cqw, 2.625rem);
}
.rc-buttons #replayAudioBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.1rem, 16.5cqw, 3rem);
  padding: 0 6px;
}

@media (max-height: 620px) {
  .rc-buttons img.homebutton,
  .rc-buttons img.teacherbutton,
  .rc-buttons img.levelbutton {
    max-height: 48px;
  }
  .rc-buttons #rollbtn,
  .rc-buttons #namesbtn,
  .rc-buttons #checkbtn,
  .rc-buttons #replayAudioBtn,
  .rc-buttons #toggleOptionsBtn {
    height: 48px;
  }
}

/* ---------- shared visual identity (ported border-radius overrides) ---------- */
.rc-page .nameblk1 {
  border-radius: 100px !important;
}
/* .nameblk1 is reused on the question banner (index.php:52) and answer
   options (index.php:103) purely for shared visual styling — those need
   to keep the 15px radius, so the combined selectors here must outrank
   the plain .nameblk1 rule above (3 classes vs 2). */
.rc-page .qblock,
.rc-page .optionblock,
.rc-page .nameblk1.qblock,
.rc-page .nameblk1.optionblock {
  border-radius: 15px !important;
}
.rc-page .rollama-button,
.rc-page .button-simple-yellow,
.rc-page .button-simple-yellow:focus,
.rc-page .button-simple-beige,
.rc-page .start-button {
  border-radius: 15px;
}
/* img.homebutton/teacherbutton/levelbutton radius is handled by the
   cqw-scaled rule in the button-row section above — not repeated here,
   since a flat 15px at equal selector specificity would win on source
   order and clobber the scaling. */
.rc-page #class_name,
.rc-page #time_left {
  border-radius: 10px !important;
}