html body[data-s5-page="learning"].is-game-lobby-view .student-learning-layout { margin-block: 0; padding-block: 24px; }
html body[data-s5-page="learning"].is-game-lobby-view #learningNotebook { padding: 0; scrollbar-gutter: auto; }
.s5-game-lobby[hidden], .s5-game-card[hidden], .s5-game-empty[hidden] { display: none; }
.s5-game-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-block: 18px 12px;
  border-bottom: 1px solid var(--s5-line);
  margin-block-end: 26px;
}
.s5-game-controls > div { display: flex; flex-wrap: wrap; gap: 7px; }
.s5-game-controls button {
  min-height: 44px;
  padding-inline: clamp(8px, 1.45vw, 20px);
  border: 1px solid var(--s5-line);
  border-radius: 8px;
  background: #fff;
  color: var(--s5-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
}
.s5-game-controls button[aria-pressed="true"] { background: var(--s5-blue); border-color: var(--s5-blue); color: #fff; }
#studentGameLobbyCount { margin: 0; color: var(--s5-muted); font-size: 13px; }
.s5-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.s5-game-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.4vw, 20px);
  min-width: 0;
  min-height: 125px;
  padding: 10px 15px;
  background: #e7f0fc;
  border: 1px solid #c0d3eb;
  border-radius: 9px;
}
.s5-game-card[data-game-id="janggi"], .s5-game-card[data-game-id="yut"] { background: #fff6e5; border-color: #e6d8be; }
.s5-game-card[data-game-id="avatar-arcade"] { background: #e8f6ec; border-color: #c5e0cf; }
.s5-game-card[data-game-id="typingDefense"] { background: #f2ecfc; border-color: #dbd0ee; }
.s5-game-icon { width: 100%; max-height: 78px; object-fit: contain; }
.s5-game-copy { min-width: 0; overflow-wrap: anywhere; }
.s5-game-copy h3 { color: var(--s5-ink); font-size: clamp(17px, 1.7vw, 23px); margin: 0; line-height: 1.25; }
.s5-game-mode, .s5-game-description { margin: 3px 0 0; color: var(--s5-muted); font-size: 13px; line-height: 1.35; }
.s5-game-mode { font-weight: 750; }
.s5-game-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding-inline: clamp(7px, 1.2vw, 16px);
  border: 1px solid var(--s5-blue);
  border-radius: 8px;
  background: var(--s5-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.s5-game-records { margin: 18px 0 0; padding-block-start: 10px; border-top: 1px solid var(--s5-line); color: var(--s5-muted); font-size: 14px; }
.s5-game-empty { grid-column: 1 / -1; padding: 12px 0; color: var(--s5-muted); }

@media (max-width: 780px), (max-width: 1024px) and (orientation: portrait) {
  .s5-game-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  html body[data-s5-page="learning"].is-game-lobby-view .student-learning-layout { padding-block: 16px; }
  .s5-game-controls { padding-block-start: 10px; margin-block-end: 12px; }
  .s5-game-controls > div { gap: 4px; }
  .s5-game-controls button { font-size: 13px; padding-inline: 7px; }
  .s5-game-grid { gap: 10px; }
  .s5-game-card {
    grid-template-columns: 49px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px;
    min-height: 88px;
    background: #fff !important;
  }
  .s5-game-action { font-size: 13px; background: #fff; color: var(--s5-blue); }
  .s5-game-description { display: none; }
}

.s5-game-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }