/* Mini Hub UI Theme
   Scoped redesign for Mini Games setup, live arena, popout, and link views. */

body.mini-setup-page,
body.mini-page.mini-hub-page,
body.mini-page.mini-popout-page,
body.mini-link-page {
  --color-bg: var(--mini-bg-0);
  --color-text: var(--mini-text);
  --color-heading: var(--mini-cyan);
  --color-accent: var(--mini-green);
  --color-accent-hover: color-mix(in srgb, var(--mini-green) 82%, #ffffff);
  --color-button-text: color-mix(in srgb, var(--mini-bg-0) 88%, #000000);
  --color-surface: var(--mini-surface-0);
  --color-surface-alt: var(--mini-surface-1);
  --color-muted: var(--mini-text-dim);
  --color-subtle: color-mix(in srgb, var(--mini-text) 84%, var(--mini-cyan));
  --color-border: var(--mini-border-soft);
  --color-border-strong: var(--mini-border-strong);
  --color-pill-border: color-mix(in srgb, var(--mini-cyan) 38%, transparent);
  --color-pill-bg: color-mix(in srgb, var(--mini-cyan) 14%, transparent);
  --color-pill-text: color-mix(in srgb, var(--mini-text) 88%, var(--mini-cyan));
  --color-topbar-link: var(--mini-cyan);
  --color-topbar-link-hover: color-mix(in srgb, var(--mini-cyan) 15%, transparent);
  --color-card-shadow: color-mix(in srgb, var(--mini-bg-0) 42%, transparent);
  --color-accent-soft: color-mix(in srgb, var(--mini-cyan) 12%, transparent);
  --color-accent-soft-strong: color-mix(in srgb, var(--mini-cyan) 22%, transparent);
  --color-success: var(--mini-green);
  --color-success-hover: color-mix(in srgb, var(--mini-green) 82%, #ffffff);
  --color-warning: var(--mini-amber);
  --color-danger: var(--mini-red);
  --mini-page-gradient:
    radial-gradient(circle at 12% -12%, color-mix(in srgb, var(--mini-cyan) 22%, transparent), transparent 44%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mini-green) 14%, transparent), transparent 38%),
    linear-gradient(180deg, var(--mini-bg-2), var(--mini-bg-1) 42%, var(--mini-bg-0));
  --mini-grid-line: color-mix(in srgb, var(--mini-cyan) 6%, transparent);
  --mini-orb-glow: radial-gradient(circle at center, color-mix(in srgb, var(--mini-cyan) 24%, transparent), color-mix(in srgb, var(--mini-cyan) 0%, transparent));
  --mini-panel-bg: linear-gradient(160deg, color-mix(in srgb, var(--mini-surface-0) 98%, transparent), color-mix(in srgb, var(--mini-bg-0) 92%, var(--mini-surface-1)));
  --mini-panel-bg-alt: linear-gradient(150deg, color-mix(in srgb, var(--mini-surface-1) 88%, transparent), color-mix(in srgb, var(--mini-bg-0) 84%, var(--mini-surface-0)));
  --mini-panel-bg-soft: color-mix(in srgb, var(--mini-bg-0) 74%, var(--mini-surface-1));
  --mini-panel-bg-active: linear-gradient(150deg, color-mix(in srgb, var(--mini-green) 14%, var(--mini-surface-1)), color-mix(in srgb, var(--mini-cyan) 12%, var(--mini-surface-0)));
  --mini-input-bg: color-mix(in srgb, var(--mini-bg-0) 82%, var(--mini-surface-0));
  --mini-panel-border-strong: color-mix(in srgb, var(--mini-cyan) 34%, transparent);
  --mini-topbar-bg: color-mix(in srgb, var(--mini-surface-0) 88%, transparent);
  --mini-topbar-shadow: 0 16px 34px color-mix(in srgb, var(--mini-bg-0) 46%, transparent);
  --mini-primary-button-bg: linear-gradient(135deg, var(--mini-green), color-mix(in srgb, var(--mini-cyan) 94%, #ffffff));
  --mini-primary-button-border: color-mix(in srgb, var(--mini-green) 42%, transparent);
  --mini-primary-button-shadow: 0 10px 24px color-mix(in srgb, var(--mini-cyan) 24%, transparent);
  --mini-primary-button-hover-shadow: 0 12px 26px color-mix(in srgb, var(--mini-green) 20%, transparent);
  --mini-secondary-button-bg: linear-gradient(140deg, color-mix(in srgb, var(--mini-surface-2) 82%, var(--mini-bg-1)), color-mix(in srgb, var(--mini-bg-1) 88%, var(--mini-surface-1)));
  --mini-secondary-button-border: color-mix(in srgb, var(--mini-text-dim) 44%, transparent);
  --mini-kicker-text: color-mix(in srgb, var(--mini-text-dim) 88%, var(--mini-cyan));
  --mini-bright-text: color-mix(in srgb, var(--mini-text) 94%, var(--mini-cyan));
  --mini-strong-text: color-mix(in srgb, var(--mini-text) 98%, #ffffff);
  --mini-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mini-cyan) 18%, transparent);

  margin: 0;
  position: relative;
  overflow-x: clip;
  color: var(--mini-text);
  font-family: 'Rajdhani', 'Roboto', sans-serif;
  background: var(--mini-page-gradient);
}

body.mini-setup-page::before,
body.mini-page.mini-hub-page::before,
body.mini-page.mini-popout-page::before,
body.mini-link-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--mini-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mini-grid-line) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.28;
  z-index: -2;
}

body.mini-setup-page::after,
body.mini-page.mini-hub-page::after,
body.mini-page.mini-popout-page::after,
body.mini-link-page::after {
  content: '';
  position: fixed;
  width: min(54vw, 680px);
  height: min(54vw, 680px);
  left: -16vw;
  bottom: -36vh;
  border-radius: 999px;
  pointer-events: none;
  background: var(--mini-orb-glow);
  filter: blur(8px);
  z-index: -2;
}

body.mini-setup-page h1,
body.mini-setup-page h2,
body.mini-setup-page h3,
body.mini-page.mini-hub-page h1,
body.mini-page.mini-hub-page h2,
body.mini-page.mini-hub-page h3,
body.mini-page.mini-popout-page h1,
body.mini-page.mini-popout-page h2,
body.mini-page.mini-popout-page h3,
body.mini-link-page h1,
body.mini-link-page h2,
body.mini-link-page h3 {
  font-family: 'Orbitron', 'Poppins', sans-serif;
  letter-spacing: 0.03em;
}

body.mini-setup-page button,
body.mini-page.mini-hub-page button,
body.mini-page.mini-popout-page button,
body.mini-link-page button,
body.mini-setup-page .btn,
body.mini-page.mini-hub-page .btn,
body.mini-page.mini-popout-page .btn,
body.mini-link-page .btn {
  margin: 0;
  font-family: 'Rajdhani', 'Roboto', sans-serif;
}

body.mini-setup-page .btn,
body.mini-page.mini-hub-page .btn,
body.mini-page.mini-popout-page .btn,
body.mini-link-page .btn,
body.mini-page.mini-hub-page .mini-toolbar-btn,
body.mini-page.mini-hub-page .mini-bottom-btn,
body.mini-page.mini-hub-page .mini-sidebar button,
body.mini-page.mini-hub-page .mini-drawer button,
body.mini-page.mini-popout-page .mini-toolbar-btn,
body.mini-link-page .link-form__submit {
  border-radius: 12px;
  border: 1px solid var(--mini-primary-button-border);
  background: var(--mini-primary-button-bg);
  color: var(--color-button-text);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: var(--mini-primary-button-shadow);
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}

body.mini-setup-page .btn:hover,
body.mini-page.mini-hub-page .btn:hover,
body.mini-page.mini-popout-page .btn:hover,
body.mini-link-page .btn:hover,
body.mini-page.mini-hub-page .mini-toolbar-btn:hover,
body.mini-page.mini-hub-page .mini-bottom-btn:hover,
body.mini-page.mini-hub-page .mini-sidebar button:hover,
body.mini-page.mini-hub-page .mini-drawer button:hover,
body.mini-page.mini-popout-page .mini-toolbar-btn:hover,
body.mini-link-page .link-form__submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--mini-primary-button-hover-shadow);
  filter: saturate(1.06);
}

body.mini-setup-page .btn-secondary,
body.mini-page.mini-hub-page .btn-secondary,
body.mini-page.mini-popout-page .btn-secondary,
body.mini-link-page .btn-secondary,
body.mini-page.mini-hub-page .mini-toolbar-btn,
body.mini-page.mini-hub-page .mini-bottom-btn,
body.mini-page.mini-hub-page .mini-sidebar .btn-secondary,
body.mini-page.mini-hub-page .mini-drawer .btn-secondary {
  background: var(--mini-secondary-button-bg);
  border-color: var(--mini-secondary-button-border);
  color: var(--mini-text);
  box-shadow: none;
}

body.mini-setup-page .btn-accent,
body.mini-page.mini-hub-page .btn-accent,
body.mini-page.mini-popout-page .btn-accent,
body.mini-link-page .btn-accent,
body.mini-page.mini-hub-page .mini-bottom-btn--accent {
  background: var(--mini-primary-button-bg);
  border-color: var(--mini-primary-button-border);
  color: var(--color-button-text);
}

body.mini-setup-page .form-input,
body.mini-setup-page .form-select,
body.mini-setup-page input,
body.mini-setup-page select,
body.mini-page.mini-hub-page input,
body.mini-page.mini-hub-page select,
body.mini-page.mini-popout-page input,
body.mini-page.mini-popout-page select,
body.mini-link-page input,
body.mini-link-page select {
  border: 1px solid var(--mini-panel-border-strong);
  border-radius: 12px;
  background: var(--mini-input-bg);
  color: var(--mini-text);
  font-family: 'Rajdhani', 'Roboto', sans-serif;
  margin: 0;
}

body.mini-setup-page .form-input:focus,
body.mini-setup-page .form-select:focus,
body.mini-page.mini-hub-page input:focus,
body.mini-page.mini-hub-page select:focus,
body.mini-page.mini-popout-page input:focus,
body.mini-page.mini-popout-page select:focus,
body.mini-link-page input:focus,
body.mini-link-page select:focus {
  border-color: var(--mini-cyan);
  box-shadow: var(--mini-focus-ring);
  outline: none;
}

body.mini-setup-page .global-top-bar {
  background: var(--mini-topbar-bg);
  border: 1px solid var(--mini-border-soft);
  box-shadow: var(--mini-topbar-shadow);
}

body.mini-setup-page .global-top-bar .top-bar-left a {
  color: var(--mini-cyan);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Setup page */
body.mini-setup-page {
  min-height: 100vh;
}

body.mini-setup-page .mini-setup-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1rem clamp(0.75rem, 2vw, 1.4rem) 2.2rem;
}

body.mini-setup-page .mini-setup-hero {
  border-radius: 24px;
  border: 1px solid var(--mini-border-soft);
  background:
    linear-gradient(152deg, color-mix(in srgb, var(--mini-surface-1) 94%, transparent), color-mix(in srgb, var(--mini-bg-0) 92%, var(--mini-surface-0))),
    radial-gradient(circle at top right, color-mix(in srgb, var(--mini-cyan) 20%, transparent), transparent 42%);
  box-shadow: var(--mini-shadow);
  padding: clamp(1rem, 3vw, 1.7rem);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

body.mini-setup-page .mini-setup-hero::after {
  content: '';
  position: absolute;
  width: 136px;
  height: 136px;
  top: -24px;
  right: -18px;
  border-radius: 20px;
  transform: rotate(14deg);
  border: 1px solid var(--mini-panel-border-strong);
  background: linear-gradient(145deg, color-mix(in srgb, var(--mini-cyan) 18%, transparent), color-mix(in srgb, var(--mini-green) 12%, transparent));
}

body.mini-setup-page .mini-setup-container h1 {
  margin: 0;
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  color: var(--mini-bright-text);
  text-align: left;
  max-width: 620px;
}

body.mini-setup-page .mini-setup-lede {
  margin: 0.55rem 0 0;
  color: var(--mini-text-dim);
  font-size: 1.02rem;
  line-height: 1.5;
  text-align: left;
  max-width: 680px;
}

body.mini-setup-page .mini-setup-flow {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body.mini-setup-page .mini-setup-step {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 34%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 84%, var(--mini-surface-1));
  color: color-mix(in srgb, var(--mini-text) 86%, var(--mini-cyan));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
}

body.mini-setup-page .mini-setup-step.is-active {
  border-color: color-mix(in srgb, var(--mini-green) 56%, transparent);
  background: color-mix(in srgb, var(--mini-green) 12%, transparent);
  color: color-mix(in srgb, var(--mini-text) 88%, var(--mini-green));
}

body.mini-setup-page .mini-setup-form {
  max-width: none;
  margin: 0;
  border-radius: 24px;
  border: 1px solid var(--mini-border-soft);
  background: var(--mini-panel-bg);
  box-shadow: var(--mini-shadow);
  padding: clamp(0.9rem, 2vw, 1.5rem);
}

body.mini-setup-page .mini-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

body.mini-setup-page .mini-form-grid .form-section {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 18%, transparent);
  border-radius: 14px;
  padding: 0.9rem;
  background: color-mix(in srgb, var(--mini-bg-0) 72%, var(--mini-surface-1));
}

body.mini-setup-page .mini-form-grid .full-width {
  grid-column: 1 / -1;
}

body.mini-setup-page .form-label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.42rem;
  color: var(--mini-kicker-text);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

body.mini-setup-page .mini-form-grid .form-input,
body.mini-setup-page .mini-form-grid .form-select {
  width: 100%;
  min-height: 48px;
}

body.mini-setup-page .helper-text {
  margin: 0.45rem 0 0;
  color: color-mix(in srgb, var(--mini-text-dim) 90%, var(--mini-cyan));
}

body.mini-setup-page .mini-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

body.mini-setup-page .mini-game-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.42rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 26%, transparent);
  background: var(--mini-panel-bg-alt);
  padding: 0.45rem;
  min-height: 0;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mini-cyan) 7%, transparent);
}

body.mini-setup-page .mini-game-tile:hover {
  border-color: color-mix(in srgb, var(--mini-green) 48%, transparent);
  box-shadow: 0 12px 20px color-mix(in srgb, var(--mini-bg-0) 36%, transparent);
  transform: translateY(-2px);
}

body.mini-setup-page .mini-game-tile.selected {
  border-color: color-mix(in srgb, var(--mini-green) 72%, transparent);
  background: var(--mini-panel-bg-active);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mini-green) 18%, transparent), 0 14px 24px color-mix(in srgb, var(--mini-bg-0) 40%, transparent);
}

body.mini-setup-page .mini-game-tile img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 22%, transparent);
}

body.mini-setup-page .mini-game-tile-label {
  display: block;
  margin-top: 0;
  text-align: center;
  color: var(--mini-bright-text);
  font-size: 0.86rem;
  font-weight: 700;
}

body.mini-setup-page .mini-rules-section {
  border-color: color-mix(in srgb, var(--mini-green) 25%, transparent) !important;
  background: linear-gradient(155deg, color-mix(in srgb, var(--mini-green) 10%, var(--mini-surface-1)), color-mix(in srgb, var(--mini-bg-0) 84%, var(--mini-surface-0))) !important;
}

body.mini-setup-page .mini-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

body.mini-page.mini-hub-page .mini-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

body.mini-setup-page .mini-settings-grid .form-section {
  padding: 0.7rem;
}

body.mini-page.mini-hub-page .mini-settings-grid .form-section {
  padding: 0.7rem;
}

body.mini-setup-page .mini-settings-toggle {
  display: flex;
  align-items: flex-end;
}

body.mini-page.mini-hub-page .mini-settings-toggle {
  display: flex;
  align-items: flex-end;
}

body.mini-setup-page .mini-settings-offset {
  margin-top: 0.75rem;
}

body.mini-page.mini-hub-page .mini-settings-offset {
  margin-top: 0.75rem;
}

body.mini-setup-page .tetris-toggle {
  margin: 0;
}

body.mini-page.mini-hub-page .tetris-toggle {
  margin: 0;
}

body.mini-setup-page .mini-captcha-section {
  border-color: color-mix(in srgb, var(--mini-cyan) 30%, transparent) !important;
}

body.mini-setup-page .mini-captcha-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(130px, 160px);
  gap: 0.5rem;
  align-items: center;
}

body.mini-setup-page .mini-captcha-question {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.04em;
  color: var(--mini-bright-text);
  font-weight: 600;
}

body.mini-setup-page .mini-captcha-refresh {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

body.mini-setup-page .mini-captcha-input {
  width: 100%;
}

body.mini-setup-page .mini-submit-btn {
  width: 100%;
  min-height: 54px;
  margin-top: 1rem;
  font-size: 1.01rem;
}

body.mini-setup-page .mini-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.4rem 0.7rem;
}

body.mini-page.mini-hub-page .mini-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.4rem 0.7rem;
}

body.mini-setup-page .mini-checkbox {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 20%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 80%, var(--mini-surface-1));
  min-height: 38px;
  padding: 0.25rem 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: color-mix(in srgb, var(--mini-text) 86%, var(--mini-cyan));
  font-size: 0.88rem;
}

body.mini-setup-page .mini-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--mini-green);
}

body.mini-setup-page .toast-notification {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 35%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 94%, var(--mini-surface-0));
  color: color-mix(in srgb, var(--mini-text) 88%, var(--mini-cyan));
}

/* Main mini arena */
body.mini-page.mini-hub-page {
  padding: 0;
  min-height: 100vh;
}

body.mini-page.mini-hub-page .mini-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 35;
  border-bottom: 1px solid var(--mini-border-soft);
  background: var(--mini-topbar-bg);
  backdrop-filter: blur(14px);
}

body.mini-page.mini-hub-page .mini-toolbar-title {
  font-size: 1.02rem;
  color: var(--mini-bright-text);
}

body.mini-page.mini-hub-page .mini-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.mini-page.mini-hub-page .mini-toolbar-home {
  text-decoration: none;
}

body.mini-page.mini-hub-page .mini-shell {
  min-height: calc(100vh - 60px);
  width: min(1450px, calc(100% - 1rem));
  margin: 0.7rem auto 0;
  display: grid;
  grid-template-columns: minmax(290px, 330px) minmax(0, 1fr);
  gap: 1rem;
  padding-left: 0 !important;
}

body.mini-page.mini-hub-page .mini-sidebar {
  position: sticky;
  top: 74px;
  left: auto;
  bottom: auto;
  width: 100%;
  max-height: calc(100vh - 92px);
  border-radius: 18px;
  border: 1px solid var(--mini-border-soft);
  background: linear-gradient(165deg, color-mix(in srgb, var(--mini-surface-0) 96%, transparent), color-mix(in srgb, var(--mini-bg-0) 92%, var(--mini-surface-1)));
  box-shadow: var(--mini-shadow);
  overflow: auto;
}

body.mini-page.mini-hub-page .mini-drawer-handle {
  display: none;
}

body.mini-page.mini-hub-page .mini-sidebar-header,
body.mini-page.mini-hub-page .mini-sidebar-section {
  border-bottom: 1px solid color-mix(in srgb, var(--mini-cyan) 18%, transparent);
}

body.mini-page.mini-hub-page .mini-sidebar-header {
  padding: 0.95rem 1rem;
}

body.mini-page.mini-hub-page .mini-sidebar-headline {
  min-width: 0;
}

body.mini-page.mini-hub-page .mini-sidebar-title {
  margin: 0;
  color: var(--mini-bright-text);
  font-size: 0.98rem;
}

body.mini-page.mini-hub-page .mini-sidebar-subtitle {
  margin: 0.25rem 0 0;
  color: var(--mini-kicker-text);
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.mini-page.mini-hub-page .mini-sidebar-subtitle span {
  font-weight: 700;
}

body.mini-page.mini-hub-page .mini-sidebar-section {
  padding: 0.9rem 1rem;
}

body.mini-page.mini-hub-page .mini-sidebar-section h3,
body.mini-page.mini-hub-page .mini-drawer-section h3 {
  margin: 0 0 0.55rem;
  color: color-mix(in srgb, var(--mini-text) 86%, var(--mini-cyan));
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.mini-page.mini-hub-page .mini-sidebar-actions,
body.mini-page.mini-hub-page .mini-drawer-actions {
  gap: 0.45rem;
}

body.mini-page.mini-hub-page .mini-sidebar-actions .btn,
body.mini-page.mini-hub-page .mini-drawer-actions .btn,
body.mini-page.mini-hub-page .mini-sidebar-section .btn,
body.mini-page.mini-hub-page .mini-drawer-section .btn {
  min-height: 40px;
  font-size: 0.84rem;
}

body.mini-page.mini-hub-page .mini-sidebar-lobby-status,
body.mini-page.mini-hub-page .mini-drawer-lobby-status {
  margin: 0 0 0.65rem;
}

body.mini-page.mini-hub-page .mini-action-btn {
  width: 100%;
  justify-content: center;
}

body.mini-page.mini-hub-page .mini-action-btn + .mini-action-btn {
  margin-top: 0.5rem;
}

body.mini-page.mini-hub-page .mini-sidebar-empty {
  margin: 0;
}

body.mini-page.mini-hub-page .mini-leave-btn {
  margin-top: 0.75rem;
}

body.mini-page.mini-hub-page .mini-session-row + .mini-session-row {
  margin-top: 0.35rem;
}

body.mini-page.mini-hub-page .mini-main {
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

body.mini-page.mini-hub-page .mini-main-header {
  border-radius: 16px;
  border: 1px solid var(--mini-border-soft);
  background: var(--mini-panel-bg-alt);
  padding: 0.9rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  box-shadow: var(--mini-shadow);
}

body.mini-page.mini-hub-page .mini-main-headline {
  min-width: 0;
}

body.mini-page.mini-hub-page .mini-main-kicker {
  margin: 0;
  color: var(--mini-kicker-text);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

body.mini-page.mini-hub-page .mini-main-title {
  margin: 0.28rem 0 0;
  color: var(--mini-bright-text);
  font-size: clamp(1rem, 2vw, 1.28rem);
}

body.mini-page.mini-hub-page .mini-main-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.mini-page.mini-hub-page .mini-main-pill {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 36%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 82%, var(--mini-surface-0));
  color: color-mix(in srgb, var(--mini-text) 86%, var(--mini-cyan));
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.28rem 0.65rem;
  letter-spacing: 0.04em;
}

body.mini-page.mini-hub-page .mini-main-pill strong {
  color: var(--mini-strong-text);
}

body.mini-page.mini-hub-page .mini-card {
  border-radius: 16px;
  border: 1px solid var(--mini-border-soft);
  background: var(--mini-panel-bg);
  box-shadow: var(--mini-shadow);
  padding: 1rem 1.05rem;
}

body.mini-page.mini-hub-page .mini-lobby-card {
  position: relative;
  overflow: hidden;
}

body.mini-page.mini-hub-page .mini-lobby-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mini-cyan) 86%, transparent), color-mix(in srgb, var(--mini-green) 86%, transparent));
}

body.mini-page.mini-hub-page .mini-lobby-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}

body.mini-page.mini-hub-page .mini-lobby-copy {
  min-width: 0;
}

body.mini-page.mini-hub-page .mini-lobby-status {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--mini-strong-text);
}

body.mini-page.mini-hub-page .mini-lobby-game {
  margin-top: 0.25rem;
}

body.mini-page.mini-hub-page .mini-lobby-spectator-pill {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 34%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 80%, var(--mini-surface-0));
  color: color-mix(in srgb, var(--mini-text) 86%, var(--mini-cyan));
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
}

body.mini-page.mini-hub-page .mini-lobby-spectator-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

body.mini-page.mini-hub-page .mini-lobby-grid {
  margin-top: 0.72rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.7rem;
}

body.mini-page.mini-hub-page .mini-seat-card {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 24%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 80%, var(--mini-surface-0));
}

body.mini-page.mini-hub-page .mini-seat-label {
  color: var(--mini-text-dim);
}

body.mini-page.mini-hub-page .mini-seat-name {
  color: var(--mini-strong-text);
  font-size: 1rem;
}

body.mini-page.mini-hub-page .mini-seat-role {
  margin-left: 0.35rem;
  font-size: 0.72rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mini-green) 48%, transparent);
  background: color-mix(in srgb, var(--mini-green) 12%, transparent);
  color: color-mix(in srgb, var(--mini-text) 86%, var(--mini-green));
  padding: 0.08rem 0.45rem;
  vertical-align: middle;
}

body.mini-page.mini-hub-page .mini-ended-banner {
  margin-top: 0.72rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mini-red) 42%, transparent);
  background: color-mix(in srgb, var(--mini-red) 16%, var(--mini-bg-0));
  color: color-mix(in srgb, var(--mini-text) 90%, var(--mini-red));
}

body.mini-page.mini-hub-page .mini-lobby-loading {
  margin: 0;
}

body.mini-page.mini-hub-page .mini-game-card {
  overflow: hidden;
}

body.mini-page.mini-hub-page .bro-mini-game,
body.mini-page.mini-popout-page .bro-mini-game {
  gap: 0.95rem;
}

body.mini-page.mini-hub-page .bro-mini-title,
body.mini-page.mini-popout-page .bro-mini-title {
  color: var(--mini-strong-text);
}

body.mini-page.mini-hub-page .bro-mini-subtitle,
body.mini-page.mini-popout-page .bro-mini-subtitle {
  color: var(--mini-text-dim);
}

body.mini-page.mini-hub-page .bro-mini-hint,
body.mini-page.mini-popout-page .bro-mini-hint {
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--mini-cyan) 28%, transparent);
  background: color-mix(in srgb, var(--mini-cyan) 12%, var(--mini-panel-bg-soft));
  color: color-mix(in srgb, var(--mini-text) 90%, var(--mini-cyan));
}

body.mini-page.mini-hub-page .mini-loading-text,
body.mini-page.mini-popout-page .mini-loading-text,
body.mini-page.mini-hub-page .mini-muted,
body.mini-page.mini-popout-page .mini-muted {
  color: var(--mini-text-dim);
}

body.mini-page.mini-hub-page .mini-loading-text,
body.mini-page.mini-popout-page .mini-loading-text {
  margin: 0;
}

body.mini-page.mini-hub-page .mini-modal-form-section {
  margin-bottom: 0.75rem;
}

body.mini-page.mini-hub-page .mini-settings-cell {
  margin-bottom: 0;
}

body.mini-page.mini-hub-page .mini-settings-cell--full {
  grid-column: 1 / -1;
}

body.mini-page.mini-hub-page .mini-game-warning {
  margin: 0 0 0.75rem 0;
}

body.mini-page.mini-hub-page .mini-popout-url {
  margin-top: 0.75rem;
  word-break: break-all;
}

body.mini-page.mini-hub-page .bro-coin-buttons--flush {
  margin-top: 0;
}

body.mini-page.mini-hub-page .mini-spectator-row,
body.mini-page.mini-hub-page .mini-drawer .mini-spectator-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 20%, transparent);
  border-radius: 10px;
  padding: 0.42rem 0.52rem;
  background: color-mix(in srgb, var(--mini-bg-0) 76%, var(--mini-surface-0));
}

body.mini-page.mini-hub-page .mini-spectator-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mini-page.mini-hub-page .mini-kick-btn {
  font-size: 0.75rem;
  padding: 0.35rem 0.58rem;
}

body.mini-page.mini-hub-page .mini-bottom-bar {
  border-top: 1px solid color-mix(in srgb, var(--mini-cyan) 32%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 95%, var(--mini-surface-0));
  backdrop-filter: blur(12px);
}

body.mini-page.mini-hub-page .mini-bottom-btn {
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  color: color-mix(in srgb, var(--mini-text) 78%, var(--mini-cyan));
}

body.mini-page.mini-hub-page .mini-bottom-btn svg {
  width: 20px;
  height: 20px;
}

body.mini-page.mini-hub-page .mini-bottom-btn:hover,
body.mini-page.mini-hub-page .mini-bottom-btn:focus {
  color: var(--mini-strong-text);
}

body.mini-page.mini-hub-page .mini-bottom-btn--accent {
  color: var(--mini-green);
}

body.mini-page.mini-hub-page .mini-drawer {
  border-top: 1px solid color-mix(in srgb, var(--mini-cyan) 34%, transparent);
  border-radius: 18px 18px 0 0;
  background: color-mix(in srgb, var(--mini-bg-0) 97%, var(--mini-surface-0));
}

body.mini-page.mini-hub-page .mini-drawer-backdrop {
  background: color-mix(in srgb, var(--mini-bg-0) 58%, transparent);
}

body.mini-page.mini-hub-page .mini-drawer-content {
  padding: 0 1rem 1rem;
}

body.mini-page.mini-hub-page .mini-drawer-headline {
  min-width: 0;
}

body.mini-page.mini-hub-page .mini-drawer-header,
body.mini-page.mini-hub-page .mini-drawer-section {
  border-bottom: 1px solid color-mix(in srgb, var(--mini-cyan) 20%, transparent);
}

body.mini-page.mini-hub-page .mini-drawer-session-row + .mini-drawer-session-row {
  margin-top: 0.35rem;
}

body.mini-page.mini-hub-page .mini-drawer-preferences {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.mini-page.mini-hub-page .mini-drawer-pref-label {
  display: block;
  margin-bottom: 0.35rem;
}

body.mini-page.mini-hub-page #mini-toast {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 32%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 96%, var(--mini-surface-0));
  color: color-mix(in srgb, var(--mini-text) 92%, var(--mini-cyan));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--mini-bg-0) 42%, transparent);
}

/* Mini game controls and boards */
body.mini-page.mini-hub-page .connect4-drop,
body.mini-page.mini-popout-page .connect4-drop {
  gap: 0.33rem;
}

body.mini-page.mini-hub-page .connect4-drop button,
body.mini-page.mini-popout-page .connect4-drop button {
  margin: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 30%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 82%, var(--mini-surface-0));
  color: color-mix(in srgb, var(--mini-text) 90%, var(--mini-cyan));
  box-shadow: none;
}

body.mini-page.mini-hub-page .connect4-drop button:hover,
body.mini-page.mini-popout-page .connect4-drop button:hover {
  border-color: color-mix(in srgb, var(--mini-green) 58%, transparent);
  background: color-mix(in srgb, var(--mini-green) 14%, var(--mini-panel-bg-soft));
}

body.mini-page.mini-hub-page .connect4-board,
body.mini-page.mini-popout-page .connect4-board {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 28%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--mini-cyan) 28%, transparent), color-mix(in srgb, var(--mini-cyan) 14%, var(--mini-bg-0)));
}

body.mini-page.mini-hub-page .checkers-meta,
body.mini-page.mini-popout-page .checkers-meta,
body.mini-page.mini-hub-page .rps-meta,
body.mini-page.mini-popout-page .rps-meta,
body.mini-page.mini-hub-page .tanks-status,
body.mini-page.mini-popout-page .tanks-status,
body.mini-page.mini-hub-page .rps-status,
body.mini-page.mini-popout-page .rps-status,
body.mini-page.mini-hub-page .tetris-status,
body.mini-page.mini-popout-page .tetris-status,
body.mini-page.mini-hub-page .bro-mini-coin-history,
body.mini-page.mini-popout-page .bro-mini-coin-history {
  border-color: color-mix(in srgb, var(--mini-cyan) 24%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 78%, var(--mini-surface-0));
}

body.mini-page.mini-hub-page .checkers-board,
body.mini-page.mini-popout-page .checkers-board,
body.mini-page.mini-hub-page .othello-board,
body.mini-page.mini-popout-page .othello-board,
body.mini-page.mini-hub-page .tanks-arena,
body.mini-page.mini-popout-page .tanks-arena {
  border-color: color-mix(in srgb, var(--mini-cyan) 28%, transparent);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--mini-bg-0) 38%, transparent);
}

body.mini-page.mini-hub-page .rps-player,
body.mini-page.mini-popout-page .rps-player,
body.mini-page.mini-hub-page .tanks-player,
body.mini-page.mini-popout-page .tanks-player,
body.mini-page.mini-hub-page .tetris-player,
body.mini-page.mini-popout-page .tetris-player,
body.mini-page.mini-hub-page .tetris-setup,
body.mini-page.mini-popout-page .tetris-setup,
body.mini-page.mini-hub-page .battleship-panel,
body.mini-page.mini-popout-page .battleship-panel,
body.mini-page.mini-hub-page .blokus-panel,
body.mini-page.mini-popout-page .blokus-panel {
  border-color: color-mix(in srgb, var(--mini-cyan) 24%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 78%, var(--mini-surface-0));
}

body.mini-page.mini-hub-page .rps-controls button,
body.mini-page.mini-popout-page .rps-controls button,
body.mini-page.mini-hub-page .tetris-setup-actions button,
body.mini-page.mini-popout-page .tetris-setup-actions button,
body.mini-page.mini-hub-page .battleship-action-btn,
body.mini-page.mini-popout-page .battleship-action-btn,
body.mini-page.mini-hub-page .blokus-controls button,
body.mini-page.mini-popout-page .blokus-controls button,
body.mini-page.mini-hub-page .blokus-piece,
body.mini-page.mini-popout-page .blokus-piece {
  margin: 0;
  border-color: color-mix(in srgb, var(--mini-cyan) 30%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 86%, var(--mini-surface-0));
  color: color-mix(in srgb, var(--mini-text) 90%, var(--mini-cyan));
}

body.mini-page.mini-hub-page .rps-controls button:hover,
body.mini-page.mini-popout-page .rps-controls button:hover,
body.mini-page.mini-hub-page .tetris-setup-actions button:hover,
body.mini-page.mini-popout-page .tetris-setup-actions button:hover,
body.mini-page.mini-hub-page .battleship-action-btn:hover,
body.mini-page.mini-popout-page .battleship-action-btn:hover,
body.mini-page.mini-hub-page .blokus-controls button:hover,
body.mini-page.mini-popout-page .blokus-controls button:hover,
body.mini-page.mini-hub-page .blokus-piece:hover,
body.mini-page.mini-popout-page .blokus-piece:hover {
  border-color: color-mix(in srgb, var(--mini-green) 56%, transparent);
  background: color-mix(in srgb, var(--mini-green) 14%, var(--mini-panel-bg-soft));
  color: color-mix(in srgb, var(--mini-text) 90%, var(--mini-green));
}

body.mini-page.mini-hub-page .bro-mini-coin-score,
body.mini-page.mini-popout-page .bro-mini-coin-score,
body.mini-page.mini-hub-page .bro-mini-coin-round-badge,
body.mini-page.mini-popout-page .bro-mini-coin-round-badge,
body.mini-page.mini-hub-page .bro-mini-coin-badge,
body.mini-page.mini-popout-page .bro-mini-coin-badge {
  border-color: color-mix(in srgb, var(--mini-cyan) 30%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 78%, var(--mini-surface-0));
}

body.mini-page.mini-hub-page .bro-mini-coin-score.is-active,
body.mini-page.mini-popout-page .bro-mini-coin-score.is-active {
  border-color: color-mix(in srgb, var(--mini-green) 56%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mini-green) 16%, transparent);
}

body.mini-page.mini-hub-page .tetris-board,
body.mini-page.mini-popout-page .tetris-board,
body.mini-page.mini-hub-page .tetris-mini-grid,
body.mini-page.mini-popout-page .tetris-mini-grid,
body.mini-page.mini-hub-page .battleship-grid,
body.mini-page.mini-popout-page .battleship-grid,
body.mini-page.mini-hub-page .blokus-board,
body.mini-page.mini-popout-page .blokus-board {
  border-color: color-mix(in srgb, var(--mini-cyan) 30%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 78%, var(--mini-surface-1));
}

body.mini-page.mini-hub-page .rps-ready-overlay,
body.mini-page.mini-popout-page .rps-ready-overlay {
  background: color-mix(in srgb, var(--mini-bg-0) 68%, transparent);
}

body.mini-page.mini-hub-page .rps-ready-card,
body.mini-page.mini-popout-page .rps-ready-card {
  border-color: color-mix(in srgb, var(--mini-cyan) 30%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--mini-bg-0) 95%, var(--mini-surface-0)), color-mix(in srgb, var(--mini-bg-0) 92%, var(--mini-surface-1)));
}

/* Popout view */
body.mini-page.mini-popout-page {
  padding: 0;
}

body.mini-page.mini-popout-page .mini-popout-shell {
  min-height: 100vh;
  padding: 0.7rem;
}

body.mini-page.mini-popout-page .mini-popout-shell .mini-game-card {
  max-width: 1220px;
  margin: 0 auto;
  min-height: calc(100vh - 1.4rem);
}

/* Modals */
body.mini-page.mini-hub-page .modal-card,
body.mini-page.mini-hub-page .modal-content,
body.mini-page.mini-popout-page .modal-card,
body.mini-page.mini-popout-page .modal-content {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--mini-cyan) 30%, transparent);
  background: linear-gradient(162deg, color-mix(in srgb, var(--mini-bg-0) 96%, var(--mini-surface-0)), color-mix(in srgb, var(--mini-bg-0) 93%, var(--mini-surface-1)));
  color: color-mix(in srgb, var(--mini-text) 96%, var(--mini-cyan));
}

body.mini-page.mini-hub-page .modal-subtitle,
body.mini-page.mini-hub-page .modal-error,
body.mini-page.mini-popout-page .modal-subtitle,
body.mini-page.mini-popout-page .modal-error {
  color: var(--mini-text-dim);
}

body.mini-page.mini-hub-page .modal-error.error,
body.mini-page.mini-popout-page .modal-error.error {
  color: var(--color-danger);
}

body.mini-page.mini-hub-page .device-link-status.success,
body.mini-page.mini-popout-page .device-link-status.success {
  color: var(--color-success);
}

body.mini-page.mini-hub-page .device-link-status.error,
body.mini-page.mini-popout-page .device-link-status.error {
  color: var(--color-danger);
}

body.mini-page.mini-hub-page .invite-code-value,
body.mini-page.mini-popout-page .invite-code-value {
  border-color: color-mix(in srgb, var(--mini-cyan) 34%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 84%, var(--mini-surface-0));
  color: var(--mini-strong-text);
}

body.mini-page.mini-hub-page .device-link-display,
body.mini-page.mini-hub-page .device-link-share,
body.mini-page.mini-popout-page .device-link-display,
body.mini-page.mini-popout-page .device-link-share {
  border-color: color-mix(in srgb, var(--mini-cyan) 30%, transparent);
  background: color-mix(in srgb, var(--mini-bg-0) 76%, var(--mini-surface-0));
}

/* Responsive */
@media (max-width: 1120px) {
  body.mini-page.mini-hub-page .mini-shell {
    width: calc(100% - 0.8rem);
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0.8rem;
  }
}

@media (max-width: 900px) {
  body.mini-page.mini-hub-page .mini-shell {
    width: calc(100% - 0.8rem);
    grid-template-columns: 1fr;
    margin-top: 0.55rem;
  }

  body.mini-page.mini-hub-page .mini-sidebar {
    display: none;
  }

  body.mini-page.mini-hub-page .mini-main {
    padding: 0;
  }

  body.mini-page.mini-hub-page .mini-bottom-bar,
  body.mini-page.mini-hub-page .mini-drawer {
    display: block;
  }

  body.mini-page.mini-hub-page .mini-page .preferences-menu-wrapper,
  body.mini-page.mini-hub-page .mini-toolbar .preferences-menu-wrapper {
    display: none;
  }
}

@media (max-width: 768px) {
  body.mini-setup-page .mini-setup-container {
    padding: 0.7rem 0.45rem 2rem;
  }

  body.mini-setup-page .mini-setup-hero {
    border-radius: 18px;
    padding: 0.95rem;
  }

  body.mini-setup-page .mini-setup-hero::after {
    width: 88px;
    height: 88px;
  }

  body.mini-setup-page .mini-setup-form {
    border-radius: 18px;
    padding: 0.8rem;
  }

  body.mini-setup-page .mini-form-grid,
  body.mini-setup-page .mini-settings-grid {
    grid-template-columns: 1fr;
  }

  body.mini-setup-page .mini-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  body.mini-setup-page .mini-captcha-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.mini-setup-page .mini-captcha-input {
    grid-column: 1 / -1;
  }

  body.mini-page.mini-hub-page .mini-toolbar {
    padding: 0.58rem 0.65rem;
  }

  body.mini-page.mini-hub-page .mini-main-header {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  body.mini-page.mini-hub-page .mini-main-meta {
    justify-content: flex-start;
  }

  body.mini-page.mini-hub-page .mini-card {
    border-radius: 14px;
    padding: 0.85rem;
  }

  body.mini-page.mini-hub-page .mini-lobby-grid {
    grid-template-columns: 1fr;
  }

  body.mini-page.mini-hub-page .mini-drawer {
    max-height: 76vh;
  }

  body.mini-page.mini-popout-page .mini-popout-shell {
    padding: 0.45rem;
  }

  body.mini-page.mini-popout-page .mini-popout-shell .mini-game-card {
    min-height: calc(100vh - 0.9rem);
  }
}

@media (max-width: 480px) {
  body.mini-setup-page .mini-game-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.mini-page.mini-hub-page .mini-toolbar-title {
    font-size: 0.9rem;
  }

  body.mini-page.mini-hub-page .mini-main-title {
    font-size: 0.95rem;
  }

  body.mini-page.mini-hub-page .mini-main-pill {
    font-size: 0.7rem;
    padding: 0.24rem 0.54rem;
  }

  body.mini-page.mini-hub-page .mini-bottom-btn span {
    font-size: 0.66rem;
  }
}