:root {
  --game-shell-dark: #0b1723;
  --game-shell-blue: #149bd7;
  --game-shell-touch: 44px;
  --game-shell-radius: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: #102131; background: #edf3f6; font-family: Arial, Helvetica, sans-serif; }
.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.topbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 16px; padding: 10px 18px; min-height: 64px; background: var(--game-shell-dark); color: #fff; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo { display: inline-flex; flex: 0 0 auto; border-radius: 6px; }
.brand h1 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.05; font-weight: 800; }
.top-actions { display: flex; align-items: center; justify-content: end; gap: 8px; }
.icon-button, .home-button { min-height: var(--game-shell-touch); border: 2px solid #263d51; border-radius: var(--game-shell-radius); background: #122436; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.icon-button { width: var(--game-shell-touch); padding: 0; display: inline-grid; place-items: center; }
.icon-button .icon { display: block; width: 24px; height: 24px; pointer-events: none; }
.home-button { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; text-decoration: none; white-space: nowrap; }
.icon-button:hover, .icon-button[aria-pressed="true"], .home-button:hover, .home-button:focus-visible { background: var(--game-shell-blue); border-color: #8fd8f3; color: #06111a; }
.icon-button:focus-visible, .home-button:focus-visible { outline: 3px solid #8fd8f3; outline-offset: 3px; }

@media (max-width: 680px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .brand { gap: 8px; }
  .brand h1 { font-size: 1.05rem; }
  .top-actions { gap: 5px; }
  .home-button { padding-inline: 10px; }
}

@media (max-width: 520px) {
  .brand h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  html[data-maths-modelled-specialist-brand="v1"] .brand-logo img { max-width: 112px; height: 28px; }
}