/* Main dimensions and colors follow the supplied dashboard screenshot. */
:root { --nav-blue:#084b88; --link-blue:#0877cb; --text:#2d3b45; --muted:#657783; --card:#f1f3f4; --border:#d7dadd; --nav-width:90px; font-family:Arial,"Helvetica Neue",sans-serif; color:var(--text); font-size:16px; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; }
button,input,select { font:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
a { color:var(--link-blue); text-decoration:none; }
a:hover,.text-button:hover { text-decoration:underline; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #35a5ef; outline-offset:3px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; z-index:30; top:-60px; left:105px; padding:12px; background:white; box-shadow:0 2px 8px #0003; }
.skip-link:focus { top:10px; }
.icon { width:24px; height:24px; display:block; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }

/* The screenshot's blue rail and slim empty gutter beside it. */
.global-nav { position:fixed; inset:0 auto 0 0; z-index:10; width:var(--nav-width); background:var(--nav-blue); color:white; overflow-y:auto; scrollbar-width:none; border-left:3px solid #bcc2c7; }
.brand { display:grid; place-items:center; height:85px; padding:7px 10px; }
.brand img { display:block; width:68px; height:68px; object-fit:contain; }
.nav-item { border:0; width:100%; min-height:65px; padding:7px 3px 8px; background:transparent; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:14px; line-height:18px; text-decoration:none; }
.nav-item .icon { width:27px; height:27px; }
.nav-item:hover { background:#033b70; text-decoration:none; }
.nav-item.active { background:white; color:var(--nav-blue); }
.collapse-nav { display:grid; place-items:center; margin:20px auto 12px; width:40px; height:38px; border:0; background:transparent; color:#fff; }
.workspace { margin-left:var(--nav-width); min-height:100vh; display:block; }
main { min-width:0; max-width:1120px; margin:0 auto; padding:24px 32px 18px; outline:none; }
.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:842px; margin:0 auto; }
.course-card { min-width:0; min-height:378px; overflow:hidden; border:1px solid #dcdedf; border-radius:6px; background:var(--card); box-shadow:0 1px 2px #0003; display:flex; flex-direction:column; }
.course-image { position:relative; flex:0 0 149px; overflow:hidden; background:var(--course-color,#175881); }
.thumbnail-link { display:block; width:100%; height:100%; border:0; background:transparent; padding:0; }
.thumbnail-link img { width:100%; height:100%; object-fit:cover; display:block; }
.course-image::after { content:""; position:absolute; inset:0; pointer-events:none; background:var(--course-color); opacity:.38; }
.thumbnail-link:hover img { filter:brightness(1.1); }
.ready-badge { position:absolute; z-index:1; top:12px; left:12px; display:flex; align-items:center; gap:11px; background:#0009; color:white; border:0; border-radius:17px; padding:8px 12px; font-size:29px; line-height:34px; font-weight:700; }
.ready-badge .icon { width:16px; height:16px; stroke-width:1.6; }
.card-menu { position:absolute; z-index:1; right:9px; top:9px; padding:6px; border:0; background:transparent; color:white; border-radius:3px; }
.card-menu:hover { background:#0005; }
.card-menu .icon { width:19px; height:19px; }
.course-content { padding:13px 13px 14px; flex:1; display:flex; flex-direction:column; min-height:0; }
.course-title { margin:0; font-size:16px; line-height:24px; font-weight:600; }
.course-title button { border:0; padding:0; text-align:left; background:none; color:var(--text); font-weight:inherit; line-height:inherit; }
.course-title button:hover { text-decoration:underline; }
.course-meta { margin:9px 0 0; color:var(--muted); font-size:14px; line-height:21px; }
.course-meta + .course-meta { margin-top:8px; }
.card-actions { display:flex; justify-content:center; align-items:center; gap:13px; margin-top:auto; padding-top:14px; white-space:nowrap; }
.card-actions button { border:0; padding:2px 0; color:var(--link-blue); background:transparent; font-size:14px; line-height:21px; }
.card-actions button:hover { text-decoration:underline; }
.card-actions .separator { color:#8a9ca8; font-size:14px; }
.pagination { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; margin:40px 0 0; }
.page-gap { color:#657783; padding:0 3px; }
.page-button { min-width:36px; height:39px; padding:0 10px; border:1px solid transparent; border-radius:3px; color:#2778b8; background:white; }
.page-button[aria-current="page"] { background:#327fb8; color:white; border-color:#2974ad; }
.page-button:not([aria-current]):hover { background:#f1f3f4; }
.page-button .icon { width:20px; height:20px; }
.secondary-column { min-width:0; max-width:906px; margin:0 auto; padding:24px 32px 32px; }
.quick-card { padding:20px 25px 40px; border-radius:0 0 10px 10px; box-shadow:0 3px 6px #0004; border:1px solid #ececec; border-top:0; }
.quick-card h2 { font-size:16px; font-weight:600; margin:0 0 22px; }
.quick-game { display:flex; align-items:flex-start; gap:12px; min-height:98px; padding:0 9px 18px 0; }
.quick-avatar { flex:0 0 50px; height:50px; border-radius:50%; overflow:hidden; background:var(--card); border:1px solid #d3d9df; }
.quick-avatar img { width:100%; height:100%; object-fit:cover; }
.quick-copy { flex:1; min-width:0; padding-top:2px; }
.quick-title { font-size:16px; line-height:21px; font-weight:600; color:var(--text); border:0; background:none; padding:0; text-align:left; }
.quick-title:hover { text-decoration:underline; }
.quick-copy p { font-size:14px; line-height:22px; margin:2px 0 0; }
.quick-play { display:grid; place-items:center; flex:0 0 39px; height:39px; border:1px solid #dce0e3; border-radius:4px; background:#f4f5f6; color:#3d515e; }
.quick-play .icon { width:20px; height:20px; }
.quick-play:hover { background:#e7ebee; }
.quick-pagination { margin-top:5px; }
.provider-note { color:#73828d; font-size:12px; margin:16px 0 0; text-align:right; }
.provider-note a { color:#657a8a; }

/* Search and categories are available directly on the dashboard. */
.library-toolbar { max-width:842px; margin:14px auto 22px; }
.toolbar-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.toolbar-heading h2 { margin:0; font-size:23px; font-weight:400; }
.text-button { color:var(--link-blue); background:transparent; border:0; padding:4px 0; font-size:14px; }
.filter-row { display:flex; gap:10px; }
.search-field { display:flex; align-items:center; gap:10px; border:1px solid #bbc3c9; border-radius:3px; flex:1; min-width:0; padding:8px 10px; }
.search-field .icon { width:19px; height:19px; color:#647584; }
.search-field input { width:100%; min-width:0; border:0; outline:none; background:none; }
.filter-row select { max-width:45%; border:1px solid #bbc3c9; color:var(--text); background:#fff; border-radius:3px; padding:8px; }
.empty-state { max-width:842px; margin:70px auto; text-align:center; }
.empty-state h2 { font-size:22px; font-weight:400; }
.empty-state p { color:var(--muted); line-height:1.6; }
.primary-button { border:1px solid #116cad; background:#1675b9; color:white; border-radius:3px; padding:10px 16px; }
.icon-button { border:0; border-radius:4px; color:var(--text); background:transparent; padding:9px; display:grid; place-items:center; }
.icon-button:hover { background:#edf0f3; }

/* Provider link stays available when an embedded game is blocked. */
dialog { padding:0; border:1px solid #ccd4da; border-radius:6px; color:var(--text); box-shadow:0 16px 80px #0005; width:min(1120px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); }
dialog::backdrop { background:#162330b8; }
body:has(dialog[open]) { overflow:hidden; }
.player-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-overline { color:var(--muted); font-size:12px; letter-spacing:1.2px; }
.player-header h2 { margin:4px 0 0; font-size:20px; font-weight:500; }
.player-tools { display:flex; align-items:center; flex-shrink:0; gap:8px; }
.fullscreen-button { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #b6c6d4; border-radius:4px; background:#f1f6fa; color:#07589b; font-size:14px; white-space:nowrap; }
.fullscreen-button:hover { background:#e2eef7; }
.fullscreen-button .icon { width:19px; height:19px; }
#game-modal.player-expanded { position:fixed; inset:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; border:0; border-radius:0; }
#game-modal.player-expanded[open] { display:flex; flex-direction:column; }
#game-modal.player-expanded .player-header, #game-modal.player-expanded .player-footer { display:none; }
#game-modal.player-expanded .player-stage { height:100%; width:100%; min-height:0; flex:1; }
.player-stage { position:relative; height:min(65dvh,630px); background:#111a22; }
.player-stage:fullscreen { height:100dvh; width:100vw; }
.exit-game-fullscreen { position:absolute; z-index:2; top:12px; right:12px; border:1px solid #ffffff6b; border-radius:5px; padding:9px 12px; background:#172735bb; color:#fff; font-size:14px; opacity:.45; transition:opacity .15s; }
.exit-game-fullscreen:hover,.exit-game-fullscreen:focus-visible { opacity:1; }
.player-stage iframe { display:block; width:100%; height:100%; border:0; }
.player-footer { padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:#f6f7f8; }
.player-footer p { font-size:14px; line-height:21px; margin:0; color:#566875; }
.external-link { white-space:nowrap; font-size:14px; }
.info-modal { width:min(480px,calc(100vw - 32px)); }
.info-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.info-header h2 { font-size:20px; font-weight:500; margin:0; }
#info-body { padding:20px; font-size:16px; line-height:1.55; }
#info-body p:first-child { margin-top:0; }
#info-body p:last-child { margin-bottom:0; }
.detail-image { width:100%; height:175px; object-fit:cover; border-radius:3px; }
.detail-category { color:var(--muted); font-size:14px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.secondary-button { border:1px solid #bfc9d1; border-radius:3px; color:var(--text); background:#fff; padding:9px 12px; }
.about-logo { height:100px; width:100px; object-fit:contain; display:block; margin:0 auto 18px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:40; padding:12px 20px; background:#263b4b; color:#fff; border-radius:4px; box-shadow:0 3px 15px #0003; font-size:14px; }
.mobile-header,.nav-scrim { display:none; }
body.nav-collapsed { --nav-width:54px; }
body.nav-collapsed .nav-item span,body.nav-collapsed .brand { display:none; }
body.nav-collapsed .global-nav nav { margin-top:20px; }
body.nav-collapsed .workspace { margin-left:var(--nav-width); }
@media (max-width:1700px) {
  main { padding-inline:24px; }
  .secondary-column { padding:0 24px 32px; }
  .quick-card { padding:20px 16px 30px; }
  .quick-game { gap:9px; padding-right:0; }
  .quick-avatar { flex-basis:40px; height:40px; }
  .quick-play { flex-basis:32px; height:34px; }
}
@media (max-width:1190px) {
  main { padding-inline:20px; }
  .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .secondary-column { padding:0 18px 25px; }
  .quick-avatar { display:none; }
}
@media (max-width:850px) {
  main { border-right:0; padding-top:18px; }
  .secondary-column { padding:8px 20px 30px; }
  .quick-card { max-width:842px; margin:auto; border-radius:6px; border-top:1px solid #ececec; }
  .quick-avatar { display:block; }
  .quick-game { min-height:82px; }
}
@media (max-width:540px) {
  .global-nav { transform:translateX(-100%); visibility:hidden; transition:transform .18s ease,visibility .18s ease; }
  body.menu-open .global-nav { transform:translateX(0); visibility:visible; }
  .workspace,body.nav-collapsed .workspace { margin-left:0; border:0; box-shadow:none; }
  .mobile-header { display:flex; align-items:center; gap:12px; min-height:58px; padding:5px 12px; color:var(--nav-blue); border-bottom:1px solid var(--border); }
  .mobile-header > span:first-of-type { font-weight:700; letter-spacing:1px; font-size:14px; }
  .mobile-header > span:last-of-type { margin-left:auto; font-size:14px; color:var(--muted); }
  .nav-scrim:not([hidden]) { display:block; position:fixed; inset:0; z-index:9; border:0; background:#122b3e80; }
  .collapse-nav { display:none; }
  main { padding:16px; }
  .course-grid { grid-template-columns:minmax(0,1fr); max-width:380px; }
  .course-card { min-height:378px; }
  .course-image { flex-basis:165px; }
  .pagination { margin-top:25px; }
  .toolbar-heading { align-items:flex-start; }
  .filter-row { flex-direction:column; }
  .filter-row select { max-width:none; }
  .secondary-column { padding:5px 16px 24px; }
  .quick-card { max-width:380px; }
  .quick-pagination { margin-top:0; }
  dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .player-header { padding:12px; }
  .player-header h2 { font-size:18px; }
  .player-header > div:first-child { min-width:0; }
  .fullscreen-button { padding:9px 8px; gap:5px; }
  .player-tools { gap:2px; }
  .player-stage { height:60dvh; min-height:200px; }
  .player-footer { padding:12px; flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }