/* Origami Engine pages: join, studio, gallery, play, admin. Styled after
   betorigami.com's dark theme: a warm near-black page, light pill buttons,
   medium weight Inter, faint rails and dot grids, lime links, and each game
   shown inside a pastel "browser" frame. */

:root {
  --m-bg: #10100E;
  --m-surface: #1B1A18;
  --m-surface-2: #242421;
  --m-text: #EEEEEB;
  --m-muted: #B8B7B3;
  --m-faint: #7D7C78;
  --m-line: rgba(237, 237, 237, 0.11);
  --m-line-soft: rgba(237, 237, 237, 0.06);
  --m-rail: #262624;
  --m-accent: #DAFF01;
  --m-good: #4ADE5A;
  --m-good-bg: rgba(0, 231, 1, 0.12);
  --m-warn: #F5B94A;
  --m-warn-bg: rgba(245, 166, 35, 0.13);
  --m-bad: #FF8A88;
  --m-bad-bg: rgba(239, 126, 124, 0.15);
  --m-frame: #C7C1CF;
  --m-frame-bar: #1B1A18;
  --m-frame-line: #32312F;
  --m-frame-title: #B8B7B3;
  --m-game: #121418;
  --m-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --m-font: InterVariable, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--m-bg); color: var(--m-text); font-family: var(--m-font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(218, 255, 1, 0.25); }
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- brand ---------- */
.m-brand { display: inline-flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: var(--m-text); border-radius: 4px; }
.m-brand:hover { opacity: 0.9; }
.m-wordmark { display: block; width: 115.5px; height: 28px; background: currentColor; -webkit-mask: url('/maker/assets/origami-wordmark.svg') center / contain no-repeat; mask: url('/maker/assets/origami-wordmark.svg') center / contain no-repeat; }
.m-mark { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: url('/maker/assets/origami-mark.svg') center / contain no-repeat; mask: url('/maker/assets/origami-mark.svg') center / contain no-repeat; }
.m-brand__product { padding-left: 12px; border-left: 1px solid var(--m-line); color: var(--m-muted); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }

/* ---------- buttons: pills, as on betorigami.com ---------- */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-bg); color: var(--m-text); font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s var(--m-ease); }
@media (hover: hover) { .m-btn:not(:disabled):hover { background: var(--m-surface); } }
.m-btn:not(:disabled):active { transform: scale(0.98); }
.m-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.m-btn:focus-visible, .m-input:focus-visible, .m-chip:focus-visible, .m-link:focus-visible, .m-send:focus-visible, .m-example:focus-visible, .m-card:focus-visible { outline: 2px solid var(--m-text); outline-offset: 2px; }
.m-btn--primary { border-color: transparent; background: var(--m-text); color: var(--m-bg); }
@media (hover: hover) { .m-btn--primary:not(:disabled):hover { background: #FFFFFF; } }
.m-btn--ghost { border-color: transparent; background: transparent; color: var(--m-muted); }
@media (hover: hover) { .m-btn--ghost:not(:disabled):hover { background: var(--m-surface-2); color: var(--m-text); } }
.m-btn--small { height: 32px; padding: 0 14px; font-size: 14px; gap: 6px; }
.m-btn--block { width: 100%; }
.m-btn svg { width: 16px; height: 16px; flex: none; }
.m-btn--small svg { width: 14px; height: 14px; }
.m-input { width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-surface); font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s; }
.m-input::placeholder { color: var(--m-faint); }
.m-input:focus { border-color: rgba(237, 237, 237, 0.3); box-shadow: 0 0 0 3px var(--m-line-soft); outline: none; }
.m-label { display: block; margin: 0 0 6px; color: var(--m-muted); font-size: 14px; font-weight: 500; }
.m-error { margin: 0; color: var(--m-bad); font-size: 14px; }
.m-muted { color: var(--m-muted); }
.m-accent-link { display: inline-flex; align-items: center; gap: 4px; color: var(--m-accent); text-decoration: none; }
.m-accent-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- badges ---------- */
.m-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--m-surface); color: var(--m-muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.m-badge.is-good { color: var(--m-good); background: var(--m-good-bg); }
.m-badge.is-warn { color: var(--m-warn); background: var(--m-warn-bg); }
.m-badge.is-bad { color: var(--m-bad); background: var(--m-bad-bg); }
.m-badge.is-busy i { animation: m-blink 1s infinite; }
@keyframes m-blink { 50% { opacity: 0.25; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- the site header (join, gallery, admin) ---------- */
.m-nav { position: sticky; top: 0; z-index: 20; height: 56px; background: var(--m-bg); }
.m-nav__inner { display: flex; align-items: center; gap: 16px; height: 100%; max-width: calc(72rem + 48px); margin: 0 auto; padding: 0 24px; }
.m-nav__links { display: flex; gap: 4px; margin: 0 auto; }
.m-nav__links a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; color: var(--m-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.m-nav__links a:hover { color: var(--m-text); }
.m-nav__links a[aria-current="page"] { background: var(--m-surface-2); color: var(--m-text); }
.m-nav__actions { display: flex; align-items: center; gap: 8px; }

/* ---------- page sections with rails, like the site's ---------- */
.m-section { position: relative; border-top: 1px solid var(--m-rail); }
.m-section__inner { position: relative; max-width: calc(72rem + 64px); margin: 0 auto; padding: 32px; border-left: 1px solid var(--m-rail); border-right: 1px solid var(--m-rail); }
.m-section--dots { background-image: radial-gradient(var(--m-rail) 1px, transparent 1.4px); background-size: 16px 16px; background-position: 8px 8px; }
.m-section--dots .m-section__inner { background: var(--m-bg); }
.m-container { max-width: calc(72rem + 48px); margin: 0 auto; padding: 0 24px; }
.m-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 96px 0 32px; flex-wrap: wrap; }
.m-title { margin: 0; font-size: 26px; font-weight: 500; line-height: 32px; letter-spacing: 0; }
.m-title span { display: block; color: var(--m-muted); }
.m-lede { max-width: 26rem; margin: 0; color: var(--m-muted); font-size: 16px; line-height: 26px; text-align: right; }
.m-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* ---------- the game frame: a pastel "browser" around a dark game ---------- */
.m-frame { display: grid; grid-template-rows: 28px 1fr; padding: 16px; border-radius: 8px; background: var(--m-frame); min-height: 0; }
.m-frame__bar { display: grid; place-items: center; border-radius: 6px 6px 0 0; background: var(--m-frame-bar); border-bottom: 1px solid var(--m-frame-line); color: var(--m-frame-title); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
.m-frame__view { position: relative; min-height: 0; overflow: hidden; border-radius: 0 0 6px 6px; background: var(--m-game); }
.m-frame__view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.m-frame--mauve { --m-frame: #D0C1C8; }
.m-frame--sage { --m-frame: #C3CCC2; }
.m-frame--sand { --m-frame: #D3C9B6; }
.m-frame--sky { --m-frame: #BFCAD6; }

/* ---------- the join page ---------- */
.m-join-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; width: min(100%, 640px); margin-top: 24px; }
.m-join-form .m-btn { height: 44px; }
.m-join-form .m-error { grid-column: 1 / -1; }
.m-continue { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding: 8px 8px 8px 16px; width: fit-content; border-radius: 999px; background: var(--m-surface); font-size: 14px; }
.m-continue strong { font-weight: 500; }
.m-demo { height: min(640px, 72vh); }
.m-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m-feature { padding: 20px; border-radius: 6px; background: var(--m-surface); }
.m-feature h3 { margin: 0 0 8px; font-size: 16px; font-weight: 500; line-height: 24px; }
.m-feature p { margin: 0; color: var(--m-muted); font-size: 16px; line-height: 26px; }
.m-foot { background: var(--m-surface); }
.m-foot .m-container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 40px; color: var(--m-muted); font-size: 14px; }

/* ---------- the studio ---------- */
.m-studio { display: grid; grid-template-rows: 56px 1fr; height: 100%; }
.m-top { display: flex; align-items: center; gap: 16px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--m-rail); background: var(--m-bg); min-width: 0; }
.m-top__title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding-left: 16px; border-left: 1px solid var(--m-line); }
.m-top__title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 500; }
.m-top__actions { display: flex; align-items: center; gap: 8px; }
.m-body { display: grid; grid-template-columns: 400px 1fr; min-height: 0; }
.m-chat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 0; border-right: 1px solid var(--m-rail); background: var(--m-bg); }
.m-log { display: flex; flex-direction: column; gap: 18px; padding: 24px 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--m-surface-2) transparent; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
.m-msg { max-width: 100%; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; animation: m-rise 0.25s var(--m-ease) both; }
.m-msg--you { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--m-surface); }
.m-msg--you.is-folded .m-msg__text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.m-msg__more { display: block; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--m-muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.m-msg__more:hover { color: var(--m-text); }
.m-msg--ai { align-self: stretch; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; }
.m-msg__avatar { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; background: var(--m-text); color: var(--m-bg); }
.m-msg__avatar .m-mark { width: 13px; height: 13px; }
.m-msg__body { min-width: 0; }
.m-msg--error .m-msg__body { color: var(--m-bad); }
.m-msg__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; color: var(--m-muted); font-size: 13px; white-space: normal; }
.m-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--m-surface); color: var(--m-muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.m-check { display: inline-flex; align-items: center; gap: 4px; color: var(--m-good); font-weight: 500; font-variant-numeric: tabular-nums; }
.m-check svg, .m-msg__icon svg { width: 13px; height: 13px; }
.m-msg--note { align-self: flex-start; display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--m-surface); color: var(--m-muted); font-size: 13px; line-height: 1.45; white-space: normal; }
.m-msg__icon { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--m-surface-2); color: var(--m-muted); }
.m-msg--note.is-good { color: var(--m-good); background: var(--m-good-bg); }
.m-msg--note.is-good .m-msg__icon { background: rgba(0, 231, 1, 0.2); color: var(--m-good); }
.m-msg--note.is-warn { border-radius: 12px; color: var(--m-warn); background: var(--m-warn-bg); }
.m-msg--note.is-warn .m-msg__icon { background: rgba(245, 166, 35, 0.22); color: var(--m-warn); }
.m-msg--note .m-btn { margin-top: 8px; }
.m-msg--fix { opacity: 0.85; }
/* A build in progress: the step, a bar that keeps moving, the latest action, a short log. */
.m-progress { display: grid; gap: 8px; margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--m-surface); color: var(--m-muted); font-size: 13px; line-height: 18px; white-space: normal; }
.m-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--m-text); font-size: 14px; font-weight: 500; }
.m-progress time { flex: none; color: var(--m-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.m-progress__bar { height: 6px; border-radius: 999px; background: var(--m-surface-2); overflow: hidden; }
.m-progress__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--m-accent); transition: width 1s linear; }
.m-progress__now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-progress__log { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.m-progress__log:empty { display: none; }
.m-progress__log li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-progress__log svg { flex: none; width: 12px; height: 12px; color: var(--m-good); }
.m-progress__log span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes m-shimmer { to { background-position: -200% 0; } }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-welcome { display: grid; gap: 12px; color: var(--m-muted); font-size: 15px; line-height: 1.6; animation: m-rise 0.3s var(--m-ease) both; }
.m-welcome h2 { margin: 8px 0 0; color: var(--m-text); font-size: 22px; font-weight: 500; line-height: 28px; }
.m-welcome p { margin: 0; }
.m-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-example { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 0; border-radius: 6px; background: var(--m-surface); text-align: left; cursor: pointer; transition: background-color 0.15s, transform 0.1s var(--m-ease); }
.m-example img { flex: none; width: 34px; height: 34px; object-fit: contain; }
.m-example span { display: grid; gap: 2px; min-width: 0; }
.m-example strong { color: var(--m-text); font-size: 14px; font-weight: 500; }
.m-example small { color: var(--m-muted); font-size: 13px; line-height: 1.35; }
@media (hover: hover) { .m-example:hover { background: var(--m-surface-2); } }
.m-example:active { transform: scale(0.98); }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-bg); color: var(--m-text); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.15s; }
@media (hover: hover) { .m-chip:hover { background: var(--m-surface); } }
.m-section-label { margin: 12px 0 0; color: var(--m-muted); font-size: 14px; font-weight: 500; }
.m-compose { padding: 12px 20px 16px; border-top: 1px solid var(--m-rail); }
.m-compose__box { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 8px 8px 8px 14px; border: 1px solid var(--m-line); border-radius: 16px; background: var(--m-surface); transition: border-color 0.15s, box-shadow 0.15s; }
.m-compose__box:focus-within { border-color: rgba(237, 237, 237, 0.28); box-shadow: 0 0 0 3px var(--m-line-soft); }
.m-compose textarea { min-height: 36px; max-height: 160px; padding: 7px 0; border: 0; background: transparent; resize: none; font-size: 15px; line-height: 1.45; outline: none; }
.m-compose textarea::placeholder { color: var(--m-faint); }
.m-send { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--m-text); color: var(--m-bg); cursor: pointer; transition: background-color 0.15s, transform 0.1s var(--m-ease), opacity 0.15s; }
.m-send svg { width: 16px; height: 16px; }
@media (hover: hover) { .m-send:not(:disabled):hover { background: #FFFFFF; } }
.m-send:not(:disabled):active { transform: scale(0.94); }
.m-send:disabled { opacity: 0.35; cursor: not-allowed; }
.m-send.is-stop { background: var(--m-surface-2); color: var(--m-text); }
@media (hover: hover) { .m-send.is-stop:not(:disabled):hover { background: #34342F; } }
.m-compose__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--m-muted); font-size: 13px; }
.m-compose__meta .is-low { color: var(--m-warn); }
.m-compose__right { display: inline-flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
.m-compose__meta { gap: 10px; padding: 0 2px; }
.m-compose__meta .m-team { flex: 1 1 auto; }
.m-compose__meta .m-link { height: 24px; padding: 0 9px; gap: 4px; font-size: 12px; }
.m-compose__meta .m-link svg { width: 12px; height: 12px; }
.m-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--m-text); }
.m-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-team i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--m-text); color: var(--m-bg); font-size: 11px; font-style: normal; font-weight: 600; }
.m-link { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; margin: -4px 0; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-bg); color: var(--m-text); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.15s; }
.m-link svg { width: 13px; height: 13px; }
@media (hover: hover) { .m-link:not(:disabled):hover { background: var(--m-surface); } }
.m-link:disabled { opacity: 0.4; cursor: not-allowed; }
/* the preview: the game in its frame, on the site's dot grid */
.m-preview { position: relative; display: grid; min-width: 0; min-height: 0; padding: 24px; background-color: var(--m-bg); background-image: radial-gradient(var(--m-rail) 1px, transparent 1.4px); background-size: 16px 16px; }
.m-preview .m-frame { height: 100%; }
.m-empty { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; align-content: center; gap: 10px; padding: 32px; background: var(--m-game); color: #A0A5B1; text-align: center; font-size: 15px; }
.m-empty .m-mark { width: 44px; height: 44px; margin-bottom: 8px; color: #F5F5F7; }
.m-empty strong { color: #F5F5F7; font-size: 18px; font-weight: 500; }
.m-empty.is-building .m-mark { animation: m-fold 1.6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; }
@keyframes m-fold { 0%, 100% { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(180deg) scale(0.9); } }

/* ---------- menus, toasts ---------- */
.m-menu { position: relative; }
.m-menu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 340px; max-height: 60vh; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-bg); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.m-menu__list button { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font-size: 14px; }
.m-menu__list button:hover, .m-menu__list button:focus-visible { background: var(--m-surface); outline: none; }
.m-menu__list strong { font-weight: 500; }
.m-menu__list .is-current { color: var(--m-accent); }
.m-menu__list small { color: var(--m-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--m-text); color: var(--m-bg); font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transform: translateX(-50%); animation: m-rise 0.25s var(--m-ease) both; }

/* ---------- gallery ---------- */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.m-card { display: grid; grid-template-rows: auto 1fr; border-radius: 8px; background: var(--m-surface); text-decoration: none; overflow: hidden; transition: transform 0.15s var(--m-ease), background-color 0.15s; animation: m-rise 0.35s var(--m-ease) both; }
@media (hover: hover) { a.m-card:hover { transform: translateY(-2px); background: var(--m-surface-2); } }
.m-card__cover { color: #10100E; position: relative; display: grid; align-content: space-between; gap: 32px; height: 160px; padding: 16px; background: var(--m-frame); }
.m-card__cover::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 36px; border-radius: 6px 6px 0 0; background: var(--m-game); }
.m-card__num { color: rgba(16, 16, 14, 0.6); font-size: 13px; font-weight: 500; }
.m-card__cover h2 { position: relative; z-index: 1; margin: 0 0 36px; font-size: 22px; font-weight: 500; line-height: 28px; }
.m-card__body { display: grid; grid-template-rows: 1fr auto; gap: 16px; padding: 16px 20px 20px; }
.m-card__body p { margin: 0; color: var(--m-muted); font-size: 15px; line-height: 24px; }
.m-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m-card__team { font-size: 14px; font-weight: 500; }
.m-empty-note { padding: 48px 20px; border-radius: 8px; background: var(--m-surface); color: var(--m-muted); text-align: center; }

/* ---------- demos ---------- */
.m-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.m-chip[aria-pressed="true"] { background: var(--m-text); border-color: var(--m-text); color: var(--m-bg); }
.m-grid--demos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.m-demo-card__cover { padding: 12px 12px 0; background: var(--m-frame); }
.m-demo-card__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; border-radius: 6px 6px 0 0; background: var(--m-game); }
.m-demo-card__head { display: flex; align-items: center; gap: 10px; }
.m-demo-card__head h2 { margin: 0; font-size: 20px; font-weight: 500; line-height: 28px; }
.m-demo-card__tag { padding: 2px 8px; border-radius: 999px; background: var(--m-accent, #DAFF01); color: #10100E; font-size: 12px; font-weight: 600; line-height: 18px; }
.m-demo-card .m-card__body { grid-template-rows: auto 1fr auto; gap: 10px; }
.m-demo-card__meta { color: var(--m-muted); font-size: 13px; font-weight: 500; }

/* ---------- play ---------- */
.m-play { display: grid; grid-template-rows: 56px 1fr; height: 100%; }
.m-play__stage { display: grid; min-height: 0; padding: 24px; background-image: radial-gradient(var(--m-rail) 1px, transparent 1.4px); background-size: 16px 16px; }
.m-play__stage .m-frame { height: 100%; }

/* ---------- admin ---------- */
.m-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.m-table th { padding: 10px 12px; color: var(--m-muted); font-size: 14px; font-weight: 500; text-align: left; border-bottom: 1px solid var(--m-line); }
.m-table td { padding: 14px 12px; border-bottom: 1px solid var(--m-line-soft); vertical-align: middle; }
.m-table td strong { font-weight: 500; }
.m-login { display: grid; gap: 16px; width: min(100%, 560px); }
.m-login .m-input { max-width: 420px; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .m-studio { height: auto; min-height: 100%; }
  .m-body { grid-template-columns: 1fr; }
  .m-chat { border-right: 0; border-bottom: 1px solid var(--m-rail); }
  .m-log { max-height: 45vh; }
  .m-preview { height: 80vh; padding: 12px; }
  .m-top__title, .m-brand__product, .m-nav__links { display: none; }
  .m-hero { padding-top: 48px; }
  .m-lede { text-align: left; }
  .m-join-form { grid-template-columns: 1fr; }
  .m-features { grid-template-columns: 1fr; }
  .m-section__inner { padding: 16px; }
  .m-frame { padding: 8px; }
  .m-play__stage { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }