:root {
  --abz-game-type-display: 64px;
  --abz-game-type-screen-title: 38px;
  --abz-game-type-card-title: 23px;
  --abz-game-type-body: 16px;
  --abz-game-type-control: 16px;
  --abz-game-type-caption: 12px;
  --obby-ink: #241243;
  --obby-night: #0b1024;
  --obby-mint: #37e6c0;
  --obby-gold: #ffd23f;
  --obby-purple: #7c5cff;
}

[data-abz-type="display"] { font-size: var(--abz-game-type-display) !important; line-height: .9 !important; }
[data-abz-type="screen-title"] { font-size: var(--abz-game-type-screen-title) !important; line-height: 1 !important; }
[data-abz-type="card-title"] { font-size: var(--abz-game-type-card-title) !important; line-height: 1.1 !important; }
[data-abz-type="body"] { font-size: var(--abz-game-type-body) !important; line-height: 1.5 !important; }
[data-abz-type="control"] { font-size: var(--abz-game-type-control) !important; line-height: 1.2 !important; }
[data-abz-type="caption"] { font-size: var(--abz-game-type-caption) !important; line-height: 1.25 !important; }

body { overflow: auto !important; }
x-dc { display: block; width: 100%; }
.obby-game-stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: var(--obby-night);
  container: obby-canvas / size;
  isolation: isolate;
}
body.abz-game-shell-page .obby-game-stage {
  height: min(900px, calc(100dvh - 96px));
  min-height: 620px;
}

.obby-screen {
  box-sizing: border-box;
  max-width: 100%;
}
.obby-screen[data-scroll-policy="fit"] { overflow: auto; }
.obby-screen[data-scroll-policy="scroll"] { overflow: hidden; }
.obby-screen [data-primary-progression-action] { min-height: 48px; }
.obby-screen button,
.obby-modal button,
.obby-modal input,
.obby-modal textarea,
.obby-modal select { font: 700 var(--abz-game-type-control)/1.2 "Baloo 2", "Trebuchet MS", system-ui, sans-serif; }
.obby-screen button:focus-visible,
.obby-modal button:focus-visible,
.obby-modal input:focus-visible,
.obby-modal textarea:focus-visible,
.obby-modal select:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--obby-purple);
}

.obby-skill-screen { padding: clamp(14px, 3cqh, 28px) clamp(14px, 3cqw, 28px) !important; }
.obby-skill-scroll {
  width: min(900px, 100%);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 10px 80px 4px;
  scrollbar-color: var(--obby-mint) rgba(255,255,255,.08);
}
.obby-skill-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 8px 0 12px;
}
.obby-skill-search label { grid-column: 1 / -1; color: #dce5ff; font-weight: 800; }
.obby-skill-search input {
  min-height: 50px;
  border: 3px solid rgba(255,255,255,.28);
  border-radius: 14px;
  padding: 0 15px;
  color: #fff;
  background: rgba(255,255,255,.09);
}
.obby-skill-search button,
.obby-learning-card button,
.obby-custom-card button {
  min-height: 48px;
  border: 0;
  border-bottom: 5px solid rgba(0,0,0,.3);
  border-radius: 13px;
  padding: 9px 15px;
  color: var(--obby-ink);
  background: var(--obby-gold);
  cursor: pointer;
}
.obby-skill-count { grid-column: 1 / -1; color: #9fe8ff; font-size: 14px; font-weight: 800; }
.obby-learning-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 15px 18px;
  border: 3px solid rgba(255,255,255,.18);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(124,92,255,.34), rgba(47,128,237,.22));
}
.obby-learning-card h3,
.obby-learning-card p { margin: 0; }
.obby-learning-card p { color: #c9d4ff; }
.obby-learning-card button { background: var(--obby-mint); color: #0d2b26; }
.obby-created-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px; }
.obby-created-head h3 { margin:0;color:#fff;font-size:var(--abz-game-type-card-title); }
.obby-created-empty { margin:0;color:#c9d4ff;font-size:var(--abz-game-type-body); }
.obby-custom-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px; }
.obby-custom-card { padding:14px;border:3px solid rgba(55,230,192,.35);border-radius:16px;background:rgba(11,16,36,.8);color:#fff; }
.obby-custom-card h4,.obby-custom-card p { margin:0 0 6px; }
.obby-custom-actions { display:flex;flex-wrap:wrap;gap:7px;margin-top:10px; }
.obby-custom-actions button { min-height:42px;padding:7px 11px;background:var(--obby-mint); }
.obby-custom-actions button[data-action="delete"] { color:#fff;background:#d1495b; }
.obby-game-set-heading { margin:10px 0;color:#fff;font-size:var(--abz-game-type-card-title); }
.obby-official-skill[hidden] { display:none !important; }
.obby-grade-chip { display:inline-flex;margin-top:8px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.2);font-size:13px;font-weight:800; }

.obby-modal {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2.5cqw, 24px);
  background: rgba(6,8,24,.88);
}
.obby-modal[hidden] { display:none; }
.obby-dialog {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:min(850px,100%);
  max-height:calc(100% - 8px);
  overflow:hidden;
  border:4px solid var(--obby-mint);
  border-radius:24px;
  color:#fff;
  background:linear-gradient(180deg,#171d40,#0b1024);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.obby-dialog-head,.obby-dialog-foot { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:rgba(255,255,255,.06); }
.obby-dialog-head h2 { margin:0;font-size:var(--abz-game-type-screen-title); }
.obby-dialog-head button { width:48px;height:48px;border:0;border-radius:50%;font-size:28px;color:#fff;background:rgba(255,255,255,.12);cursor:pointer; }
.obby-dialog-scroll { min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 22px 76px; }
.obby-dialog label { display:grid;gap:5px;margin-bottom:13px;font-weight:800;color:#dfe7ff; }
.obby-dialog input,.obby-dialog textarea,.obby-dialog select { box-sizing:border-box;width:100%;min-height:48px;border:3px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 12px;color:#fff;background:rgba(255,255,255,.09); }
.obby-dialog textarea { min-height:74px;resize:vertical; }
.obby-question-editor { margin:0 0 16px;padding:16px;border:3px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.04); }
.obby-question-editor legend { padding:0 7px;color:var(--obby-gold);font-size:var(--abz-game-type-card-title);font-weight:800; }
.obby-choice-row { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;margin-bottom:8px; }
.obby-choice-row input[type="radio"] { width:26px;height:26px;min-height:0;accent-color:var(--obby-mint); }
.obby-remove-question { color:#fff;background:#d1495b !important; }
.obby-dialog-foot { position:sticky;bottom:0;flex-wrap:wrap; }
.obby-dialog-foot button { min-height:48px;border:0;border-bottom:5px solid rgba(0,0,0,.3);border-radius:14px;padding:10px 18px;cursor:pointer;background:var(--obby-gold);color:var(--obby-ink); }
.obby-dialog-foot .obby-save { background:var(--obby-mint);color:#0d2b26; }
.obby-builder-message { flex:1 1 100%;margin:0;color:#ffd7de;font-weight:800; }
.obby-builder-message.is-success { color:#9fffdc; }
.obby-assignment-status { width:min(680px,100%);box-sizing:border-box;margin:0 auto 12px;padding:13px 16px;border-radius:14px;color:#fff;background:rgba(124,92,255,.35); }
.obby-assignment-status.is-success { background:rgba(27,138,90,.72); }
.obby-assignment-status.is-error { background:rgba(209,73,91,.72); }
.obby-assignment-status button { margin-top:8px;min-height:48px;border:0;border-radius:12px;padding:8px 14px;background:#fff;color:var(--obby-ink); }

.obby-sound-toggle { min-width:48px;min-height:48px;padding:8px !important; }
.obby-question-panel[data-content-density="short"] [data-question-passage] { font-size:clamp(24px,min(3.1cqw,4.6cqh),42px) !important; }
.obby-question-panel[data-content-density="short"] [data-question-prompt] { font-size:clamp(22px,min(2.7cqw,3.8cqh),34px) !important; }
.obby-question-panel[data-content-density="short"] [data-answer-choice] { min-height:58px;font-size:clamp(19px,min(2.1cqw,3.1cqh),28px) !important; }

@media (max-width: 760px) {
  body.abz-game-shell-page .obby-game-stage { height:min(820px,calc(100dvh - 52px));min-height:560px; }
  .obby-custom-list { grid-template-columns:1fr; }
  .obby-learning-card,.obby-created-head { align-items:flex-start;flex-direction:column; }
  .obby-dialog-scroll { padding:14px 14px 74px; }
}
@media (max-width: 620px) {
  .obby-official-grid { grid-template-columns:1fr !important; }
  .obby-skill-screen { gap:10px !important; }
  .obby-skill-screen > header { margin-top:0 !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .obby-game-stage { min-height:390px; }
  body.abz-game-shell-page .obby-game-stage { height:390px;min-height:390px; }
  .obby-dialog { padding:4px; }
  .obby-dialog-head,.obby-dialog-foot { padding:7px 12px; }
  .obby-dialog-scroll { padding:10px 14px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .obby-game-stage *, .obby-game-stage *::before, .obby-game-stage *::after { scroll-behavior:auto !important; }
}