/* Student touch interface: eight toy blocks, one clear choice per block. */
.entry-shell .student-entry-art { display: none; }

body[data-role="entry"][data-entry-role="student"] { background: #e7f5ff; }
body[data-role="entry"][data-entry-role="student"] .entry-shell { background: #e7f5ff; }
body[data-role="entry"][data-entry-role="student"] .entry-shell::before { display: none; }
body[data-role="entry"][data-entry-role="student"] .entry-shell .topbar {
  height: 64px;
  min-height: 64px;
  padding: 10px max(18px, calc((100vw - 1180px) / 2));
  background: #fff;
  border-bottom: 2px solid #c6e2f5;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .topbar .pill,
body[data-role="entry"][data-entry-role="student"] .entry-shell .hero-copy,
body[data-role="entry"][data-entry-role="student"] .entry-shell .notice,
body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form .eyebrow,
body[data-role="entry"][data-entry-role="student"] #entry-note:empty { display: none; }

body[data-role="entry"][data-entry-role="student"] .entry-shell .landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  align-content: center;
  min-height: calc(100dvh - 64px);
  width: 100%;
  max-width: 560px;
  padding: 24px 18px 32px;
  gap: 0;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-card {
  width: 100%;
  max-width: 480px;
  padding: 25px;
  margin: 0;
  border: 2px solid #8bbce0;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 8px 0 #a8d1eb;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-tabs {
  padding: 4px;
  gap: 8px;
  margin-bottom: 17px;
  border-radius: 15px;
  background: #edf7ff;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-tabs button {
  min-height: 48px;
  padding: 9px 6px;
  border: 2px solid transparent;
  border-radius: 11px;
  color: #45677c;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-tabs button.active {
  border-color: #73a632;
  background: #b7ed69;
  box-shadow: 0 3px 0 #73a632;
  color: #31501d;
}

body[data-role="entry"][data-entry-role="student"] .student-entry-art {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto 13px;
  object-fit: contain;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form { gap: 17px; }
body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form .eyebrow {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
  color: #127d67;
  text-align: center;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form h2 {
  margin: 0 0 3px;
  font-size: 29px;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
  color: #15384c;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form label {
  color: #24506d;
  font-size: 16px;
  font-weight: 850;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form .input {
  min-height: 58px;
  border: 2px solid #a8d1eb;
  border-radius: 15px;
  background: #edf8ff;
  color: #15384c;
  padding: 13px 15px;
  font-size: 18px;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form .primary {
  min-height: 58px;
  margin-top: 2px;
  border: 2px solid #73a632;
  border-radius: 16px;
  background: #b7ed69;
  box-shadow: 0 5px 0 #73a632;
  color: #254516;
  font-size: 20px;
  font-weight: 900;
}

body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form .primary:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #73a632;
}

body[data-role="entry"][data-entry-role="student"] :is(button, input):focus-visible {
  outline: 4px solid #1747a2;
  outline-offset: 4px;
}

@media (max-width: 360px), (max-height: 650px) {
  body[data-role="entry"][data-entry-role="student"] .entry-shell .landing { padding: 17px 12px 26px; }
  body[data-role="entry"][data-entry-role="student"] .entry-shell .join-card { padding: 19px 17px; border-radius: 22px; }
  body[data-role="entry"][data-entry-role="student"] .student-entry-art { width: 84px; height: 84px; margin-bottom: 9px; }
  body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form { gap: 13px; }
  body[data-role="entry"][data-entry-role="student"] .entry-shell .join-form h2 { font-size: 26px; }
}

body[data-role="student"] {
  --student-sky: #e7f5ff;
  --student-ink: #15384c;
  --student-edge: #235069;
  --student-header-height: 68px;
  --student-nav-height: 86px;
  --student-gap: 19px;
  background: var(--student-sky);
  color: var(--student-ink);
}

body[data-role="student"] .student-shell {
  background: var(--student-sky);
  padding-bottom: calc(var(--student-nav-height) + env(safe-area-inset-bottom));
}

body[data-role="student"] .student-shell::before { display: none; }

body[data-role="student"] .student-header {
  height: var(--student-header-height);
  min-height: var(--student-header-height);
  padding: 8px max(18px, calc((100vw - 1180px) / 2));
  gap: 12px;
  background: #fff;
  border-bottom: 2px solid #c6e2f5;
  backdrop-filter: none;
}

body[data-role="student"] .student-header .brand { gap: 0; }
body[data-role="student"] .student-header .brand img { width: 61px; height: 35px; }
body[data-role="student"] .student-header .brand > span { display: none; }

body[data-role="student"] .student-header .student-identity {
  flex: 0 1 auto;
  width: max-content;
  min-height: 48px;
  gap: 9px;
  margin-left: auto;
  padding: 3px 11px 3px 5px;
  border: 2px solid #c6e3f4;
  border-radius: 15px;
  background: #edf8ff;
  box-shadow: 0 3px 0 #c6e3f4;
  text-align: left;
}

body[data-role="student"] .student-identity b { font-size: 15px; color: var(--student-ink); }
body[data-role="student"] .student-identity > span:last-child { min-width: 0; }
body[data-role="student"] .student-identity small { font-size: 11px; color: #45677c; }
body[data-role="student"] .student-header .student-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid #0c998b;
  border-radius: 11px;
  background: #64e8ca;
  box-shadow: 0 2px 0 #0c998b;
  color: #12433e;
  font-size: 21px;
  font-weight: 850;
  flex-shrink: 0;
}

body[data-role="student"] .student-header #fullscreen {
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
  border: 2px solid #a8d1eb;
  border-radius: 14px;
  background: #d8efff;
  box-shadow: 0 3px 0 #a8d1eb;
  color: #245275;
}

body[data-role="student"] .student-header .connection-pill {
  font-size: 11px;
  font-weight: 750;
  background: #dcf9e3;
  color: #235538;
  padding: 5px 8px;
}

body[data-role="student"] .student-header .connection-pill.offline {
  color: #782d11;
  background: #ffdcca;
}

body[data-role="student"] .student-workspace { min-height: 0; }
body[data-role="student"] .student-main { max-width: 1180px; padding: 20px 22px 32px; }
body[data-role="student"] .student-main #content { min-width: 0; }

/* Only the free-play menu locks to the viewport. Workspaces may scroll. */
body[data-role="student"][data-student-view="menu"] {
  overflow: hidden;
  overscroll-behavior: none;
}

body[data-role="student"][data-student-view="menu"] .student-shell {
  display: grid;
  grid-template-rows: var(--student-header-height) minmax(0, 1fr) calc(var(--student-nav-height) + env(safe-area-inset-bottom));
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding-bottom: 0;
}

body[data-role="student"][data-student-view="menu"] .student-workspace {
  height: 100%;
  min-height: 0;
}

body[data-role="student"][data-student-view="menu"] .student-main {
  height: 100%;
  padding-top: 18px;
  padding-bottom: 18px;
  min-height: 0;
}

body[data-role="student"][data-student-view="menu"] .student-status-banner { display: none; }
body[data-role="student"][data-student-view="menu"] .student-main #content { height: 100%; }

body[data-role="student"] .student-block-menu {
  width: 100%;
  height: 100%;
  min-height: 0;
}

body[data-role="student"] .student-block-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--student-gap);
  height: 100%;
  padding-bottom: 8px;
  min-height: 0;
}

body[data-role="student"] .student-play-block {
  --block-color: #d5f67f;
  --block-base: #83b834;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: 48px;
  height: 100%;
  padding: 8px 12px 12px;
  isolation: isolate;
  border: 2px solid var(--block-base);
  border-radius: 24px;
  background: var(--block-color);
  box-shadow: 0 7px 0 var(--block-base), inset 0 3px 0 #ffffff73;
  color: var(--student-ink);
  text-align: center;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 150ms cubic-bezier(.18,.8,.25,1), box-shadow 150ms, filter 150ms;
}

body[data-role="student"] .block--science { --block-color: #b7ed69; --block-base: #73a632; }
body[data-role="student"] .block--drawing { --block-color: #ffd45f; --block-base: #d7a332; }
body[data-role="student"] .block--gomoku { --block-color: #7cd3ff; --block-base: #369ad4; }
body[data-role="student"] .block--math { --block-color: #bc9eff; --block-base: #8861d4; }
body[data-role="student"] .block--sudoku { --block-color: #ffa971; --block-base: #da7744; }
body[data-role="student"] .block--bingo { --block-color: #ff97bc; --block-base: #d45e92; }
body[data-role="student"] .block--calculator { --block-color: #6ce2ce; --block-base: #27aa95; }
body[data-role="student"] .block--questions { --block-color: #8db3ff; --block-base: #5c82cf; }

body[data-role="student"] .block-picture {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

body[data-role="student"] .block-picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 180ms cubic-bezier(.18,.8,.25,1);
}

body[data-role="student"] .block-label {
  display: block;
  width: 100%;
  padding-top: 2px;
  font-size: clamp(23px, 2.7vw, 33px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.14;
  white-space: nowrap;
  color: #14364a;
  text-shadow: 0 1px 0 #ffffff5c;
}

body[data-role="student"] .block-state {
  position: absolute;
  top: 9px;
  right: 9px;
  border: 2px solid #953e67;
  border-radius: 10px;
  background: #fff;
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  color: #953e67;
}

body[data-role="student"] .student-play-block:active:not(:disabled),
body[data-role="student"] .student-play-block.is-pressed {
  transform: translateY(6px);
  box-shadow: 0 1px 0 var(--block-base), inset 0 2px 0 #ffffff73;
}

body[data-role="student"] .student-play-block:active .block-picture img { transform: scale(.94); }
body[data-role="student"] .student-play-block:disabled { opacity: .6; }

body[data-role="student"] :is(button, a, input, select, textarea):focus-visible {
  outline: 4px solid #1747a2;
  outline-offset: 4px;
}

body[data-role="student"] .student-bottom-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: calc(var(--student-nav-height) + env(safe-area-inset-bottom));
  transform: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 8px 18px calc(12px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 2px solid #c6e2f5;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-role="student"][data-student-view="menu"] .student-bottom-nav { position: relative; }

body[data-role="student"] .student-nav-item {
  --nav-color: #edf7ff;
  --nav-base: #b7d7ec;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  min-width: 0;
  max-width: 280px;
  padding: 5px 12px;
  border: 2px solid var(--nav-base);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--nav-base);
  background: var(--nav-color);
  color: #284969;
  font-size: 17px;
  font-weight: 900;
  transition: transform 150ms, box-shadow 150ms, background 150ms;
}

body[data-role="student"] .student-nav-art {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 42px;
  pointer-events: none;
}

body[data-role="student"] .student-nav-item > svg { width: 27px; height: 27px; }
body[data-role="student"] .student-nav-item > span { font-size: inherit; line-height: 1; }
body[data-role="student"] .student-nav-item.active {
  --nav-color: #b7ed69;
  --nav-base: #73a632;
  background: var(--nav-color);
  border-color: var(--nav-base);
  color: #1d4b29;
  box-shadow: 0 4px 0 var(--nav-base);
}

body[data-role="student"] .student-nav-item[data-nav="class"].active { --nav-color: #b5a0ff; --nav-base: #8765cd; color: #332254; }
body[data-role="student"] .student-nav-item[data-nav="messages"].active { --nav-color: #ffd45f; --nav-base: #d7a332; color: #513a15; }
body[data-role="student"] .student-nav-item.is-locked { color: #657d8c; opacity: .7; }
body[data-role="student"] .student-nav-item:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--nav-base); }

body[data-role="student"] .student-class-wait {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--student-header-height) - var(--student-nav-height) - 58px - env(safe-area-inset-bottom));
}

body[data-role="student"] .wait-play-block {
  grid-template-rows: minmax(0, 1fr) auto auto;
  width: min(420px, 100%);
  height: min(510px, calc(100dvh - var(--student-header-height) - var(--student-nav-height) - 65px - env(safe-area-inset-bottom)));
  min-height: 190px;
  padding: 13px 16px 17px;
  gap: 9px;
}

body[data-role="student"] .wait-block-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 2px solid #73a632;
  border-radius: 12px;
  background: #fff;
  color: #31501d;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

/* Continue the toy-button language inside games without changing their layout. */
body[data-role="student"] .student-main :is(.primary, .secondary, .ghost, .small),
body[data-role="student"] .modal :is(.primary, .secondary) {
  min-height: 48px;
  border-width: 2px;
  border-radius: 14px;
  font-weight: 850;
}

body[data-role="student"] .student-main .primary,
body[data-role="student"] .modal .primary {
  background: #127d67;
  border-color: #0b624e;
  color: #fff;
  box-shadow: 0 4px 0 #0b624e;
}

body[data-role="student"] .student-main .secondary {
  background: #fff;
  border-color: #aacce2;
  color: #24506d;
  box-shadow: 0 4px 0 #aacce2;
}

body[data-role="student"] .student-main .primary:active,
body[data-role="student"] .student-main .secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 #aacce2; }

body[data-role="student"] .student-main .panel,
body[data-role="student"] .student-main .tool-panel {
  border: 2px solid #bed9ec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5px 0 #c6e2f5;
}

body[data-role="student"] .student-main .page-head { margin: 0 0 18px; }
body[data-role="student"] .student-main .page-head h1 { font-size: clamp(27px, 4vw, 36px); font-weight: 850; }
body[data-role="student"] .student-main .page-head p { font-size: 14px; }
body[data-role="student"] .student-main .page-head .eyebrow { display: none; }
body[data-role="student"] .student-status-banner { padding: 10px 14px; margin-bottom: 16px; border: 2px solid #9ec37a; background: #e0f7c9; border-radius: 15px; }
body[data-role="student"] .student-status-banner:not(.lesson) { display: none; }
body[data-role="student"] .student-status-banner.lesson { background: #e9dfff; border-color: #b399e0; }
body[data-role="student"] .student-main .calc-key { border-width: 2px; font-weight: 850; box-shadow: 0 5px 0 #c6dceb; }
body[data-role="student"] .student-main .calc-key.accent { background: #ffd45f; border-color: #d7a332; box-shadow: 0 5px 0 #d7a332; }
body[data-role="student"] .student-main .calc-key.equals { background: #6ce2ce; border-color: #27aa95; box-shadow: 0 5px 0 #27aa95; }
body[data-role="student"] .student-main .sudoku-cell.given { background: #d9edff; color: #24516c; }
body[data-role="student"] .student-main .sudoku-cell.selected { background: #ffd45f; outline-color: #917015; }
body[data-role="student"] .student-main .science-topic-card { border-width: 2px; border-color: #b7cdea; background: #e9f3ff; box-shadow: 0 4px 0 #b7cdea; }
body[data-role="student"] .student-main .science-topic-card.active { background: #b7ed69; border-color: #73a632; box-shadow: 0 4px 0 #73a632; }
body[data-role="student"] .student-waiting { border: 2px solid #d7a332; background: #ffdd78; box-shadow: 0 6px 0 #d7a332; }
body[data-role="student"] .student-waiting h1 { font-weight: 850; }
body[data-role="student"] .modal { border: 2px solid #aacce2; background: #fff; box-shadow: 0 7px 0 #8eb4cf, 0 18px 45px #15384c30; }

@media (hover: hover) and (pointer: fine) {
  body[data-role="student"] .student-play-block:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 0 var(--block-base), inset 0 3px 0 #ffffff73; }
  body[data-role="student"] .student-play-block:hover:not(:disabled) .block-picture img { transform: scale(1.04); }
  body[data-role="student"] .student-play-block:hover:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--block-base), inset 0 2px 0 #ffffff73; }
}

@media (orientation: portrait) {
  body[data-role="student"] .student-block-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  body[data-role="student"] .block-label { font-size: clamp(22px, 3.3vw, 30px); }
}

@media (max-width: 600px) {
  body[data-role="student"] { --student-header-height: 62px; --student-nav-height: 77px; --student-gap: 13px; }
  body[data-role="student"] .student-header { padding: 6px 12px; gap: 8px; }
  body[data-role="student"] .student-header .brand img { width: 45px; height: 30px; }
  body[data-role="student"] .student-header .student-identity { padding: 3px 8px 3px 4px; gap: 7px; }
  body[data-role="student"] .student-identity b { max-width: 95px; font-size: 14px; }
  body[data-role="student"] .student-identity small { display: none; }
  body[data-role="student"] .student-header .student-avatar { width: 31px; height: 31px; font-size: 18px; }
  body[data-role="student"] .student-header .connection-pill { font-size: 10px; padding: 4px 6px; }
  body[data-role="student"] .student-header #fullscreen { padding: 10px; border-radius: 12px; }
  body[data-role="student"] .student-main { padding: 15px 12px 24px; }
  body[data-role="student"][data-student-view="menu"] .student-main { padding: 12px 12px 13px; }
  body[data-role="student"] .student-play-block { padding: 4px 7px 7px; border-radius: 19px; }
  body[data-role="student"] .block-label { font-size: clamp(21px, 5.8vw, 26px); }
  body[data-role="student"] .block-state { top: 6px; right: 6px; padding: 2px 5px; font-size: 10px; }
  body[data-role="student"] .student-bottom-nav { padding: 6px 12px calc(12px + env(safe-area-inset-bottom)); gap: 9px; }
  body[data-role="student"] .student-nav-item { padding: 5px 8px; gap: 6px; font-size: 15px; border-radius: 14px; }
  body[data-role="student"] .student-nav-art { width: 34px; height: 34px; flex-basis: 34px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  body[data-role="student"] { --student-header-height: 56px; --student-nav-height: 64px; --student-gap: 12px; }
  body[data-role="student"] .student-header { padding-block: 3px; }
  body[data-role="student"][data-student-view="menu"] .student-main { padding: 10px 16px 11px; }
  body[data-role="student"] .student-play-block { padding: 3px 7px 6px; border-radius: 17px; }
  body[data-role="student"] .block-label { font-size: 21px; }
  body[data-role="student"] .student-bottom-nav { padding-top: 5px; padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
  body[data-role="student"] .student-nav-item { padding-block: 2px; font-size: 15px; gap: 7px; border-radius: 13px; }
  body[data-role="student"] .student-nav-art { width: 33px; height: 33px; flex-basis: 33px; }
}

@media (max-width: 360px), (orientation: portrait) and (max-height: 650px) {
  body[data-role="student"] { --student-gap: 11px; --student-header-height: 60px; --student-nav-height: 72px; }
  body[data-role="student"] .student-header { padding-inline: 10px; gap: 6px; }
  body[data-role="student"] .student-header .brand img { width: 38px; }
  body[data-role="student"] .student-identity b { max-width: 77px; font-size: 13px; }
  body[data-role="student"] .student-header .connection-pill:not(.offline) { display: none; }
  body[data-role="student"][data-student-view="menu"] .student-main { padding: 10px 10px 11px; }
  body[data-role="student"] .student-play-block { padding: 3px 5px 5px; border-radius: 16px; }
  body[data-role="student"] .block-label { font-size: 20px; }
  body[data-role="student"] .student-bottom-nav { gap: 7px; padding: 5px 10px calc(10px + env(safe-area-inset-bottom)); }
  body[data-role="student"] .student-nav-item { font-size: 14px; padding-inline: 5px; gap: 4px; }
  body[data-role="student"] .student-nav-art { width: 31px; height: 31px; flex-basis: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-role="student"] .student-play-block,
  body[data-role="student"] .block-picture img,
  body[data-role="student"] .student-nav-item { transition: none; animation: none; }
  body[data-role="student"] .student-play-block:hover .block-picture img,
  body[data-role="student"] .student-play-block:active .block-picture img { transform: none; }
}