/* ---- Create hub ---- */
.cr-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.cr-template { text-align: left; border: 0; padding: 0; width: 100%; }
.cr-template__art { display: block; aspect-ratio: 12 / 7; }
.cr-template__art svg { width: 100%; height: 100%; display: block; }
.cr-opens { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bz-radiochip { position: relative; }
.bz-radiochip input { position: absolute; opacity: 0; inset: 0; }
.bz-radiochip span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 600; font-size: 15px; cursor: pointer; }
.bz-radiochip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.bz-radiochip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.cr-game { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; background: var(--surface); border-radius: 20px; padding: 14px 18px 14px 14px; box-shadow: 0 2px 0 var(--line); }
.cr-game__art { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; }
.cr-game__art svg { width: 100%; height: 100%; display: block; }
.cr-game__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-reason { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--level-soft); color: var(--level-ink); font-size: 14px; font-weight: 500; }
.cr-game__nums { display: flex; gap: 20px; }
.cr-game__nums div { display: flex; flex-direction: column; align-items: center; min-width: 70px; text-align: center; }
.cr-game__nums strong { font-family: var(--font-head); font-size: 24px; line-height: 1.1; }
.cr-game__nums span { font-size: 12px; color: var(--muted); }
.cr-game__actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 960px) { .cr-game { grid-template-columns: 80px minmax(0, 1fr); } .cr-game__art { width: 80px; height: 80px; } .cr-game__nums, .cr-game__actions { grid-column: 1 / -1; } }

/* ---- Publish wizard ---- */
.pb { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.pb-top { background: var(--surface); border-bottom: 2px solid var(--line); }
.pb-top__in { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.pb-top__title { flex: 1; font-family: var(--font-head); font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-main { width: min(880px, 100%); margin: 0 auto; padding: 24px var(--gutter) 56px; display: flex; flex-direction: column; gap: 22px; }
.pb-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pb-steps__bar { display: block; height: 6px; border-radius: 999px; background: var(--line); }
.pb-steps li[aria-current="step"] .pb-steps__bar, .pb-steps li[data-done="true"] .pb-steps__bar { background: var(--accent); }
.pb-steps__label { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pb-steps li[aria-current="step"] .pb-steps__label { color: var(--ink); }
.pb-card { background: var(--surface); border-radius: 28px; padding: 32px; box-shadow: 0 3px 0 var(--line); }
.pb-two { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
.pb-preview { width: 200px; pointer-events: none; }
.pb-nav { display: flex; justify-content: space-between; }
.pb-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 2px solid var(--soft); flex-wrap: wrap; }
.pb-rating { padding: 14px 18px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; background: var(--teal-soft); color: var(--teal-ink); }
.pb-rating[data-r="Teen"], .pb-rating[data-r="Mature"] { background: var(--level-soft); color: var(--level-ink); }
.pb-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pb-summary div { background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.pb-summary dd { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 720px) { .pb-two { grid-template-columns: 1fr; } .pb-card { padding: 20px; border-radius: 22px; } .pb-steps__label { font-size: 10px; } .pb-steps { gap: 6px; } }

/* ---- Game stats ---- */
.st-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.st-thumb { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; flex: none; }
.st-thumb svg { width: 100%; height: 100%; display: block; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.st-tile { display: flex; flex-direction: column; gap: 4px; }
.st-tile__v { font-family: var(--font-head); font-weight: 800; font-size: 40px; line-height: 1.05; }
.st-up { color: var(--teal-ink); font-weight: 600; }
.st-chart { width: 100%; height: 200px; margin-top: 12px; }
.st-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.st-rating { display: flex; align-items: center; gap: 16px; }
.st-rating__bar { flex: 1; display: flex; height: 14px; border-radius: 999px; overflow: hidden; }
.st-rating__bar span:first-child { background: var(--teal); }
.st-rating__bar span:last-child { background: var(--accent); }
.st-sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-sessions strong { font-size: 20px; }