@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #f8f5ec;
  --muted: #9d9a94;
  --paper: #09090c;
  --panel: #101014;
  --panel-2: #15151b;
  --soft: #1d1c23;
  --line: #2c2b33;
  --gold: #edb854;
  --gold-light: #ffd985;
  --violet: #a979ff;
  --green: #79d5a8;
  --danger: #ff947e;
}

* { box-sizing: border-box; }
/* Every programmatic scroll clears the sticky bar rather than landing under it. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(80rem 42rem at 54% -16%, #3a211b 0%, #171016 32%, transparent 67%), var(--paper); font: 14px/1.5 "DM Sans", ui-sans-serif, system-ui, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .22; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
button, textarea, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 10; width: 100%; padding: 14px 34px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #09090cd9; backdrop-filter: blur(14px); border-bottom: 1px solid #ffffff12; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 800 18px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; color: #14100a; background: linear-gradient(145deg, var(--gold-light), #bd7824); border-radius: 8px; box-shadow: 0 0 24px #edb85430; font-size: 15px; }
.tabs { display: flex; gap: 4px; padding: 4px; background: #ffffff08; border: 1px solid #ffffff10; border-radius: 999px; }
.tab { min-height: 32px; padding: 6px 18px; color: var(--muted); background: transparent; border: 0; border-radius: 999px; font: 700 11px/1 "Manrope", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.tab:hover { color: var(--ink); }
.tab.active { color: #1b1208; background: linear-gradient(120deg, var(--gold-light), var(--gold)); }

button, .download { min-height: 40px; padding: 10px 15px; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 9px; font-weight: 700; cursor: pointer; text-decoration: none; transition: border-color .18s, transform .18s, background .18s; }
button:hover, .download:hover { border-color: #65616c; }
button:active, .download:active { transform: translateY(1px); }
button:disabled { opacity: .43; cursor: not-allowed; }
.primary { color: #1d1308; background: linear-gradient(125deg, #ffdc8e, #e7a33d); border-color: #efb455; box-shadow: 0 12px 42px #b66c201c; }
.ghost { color: var(--muted); background: #ffffff06; }
.ghost:hover { color: var(--ink); }

main { width: min(1440px, 100%); margin: auto; padding: 54px 34px 64px; }
.eyebrow, .step { margin: 0; color: var(--gold); font: 700 10px/1 "Manrope", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 24px; height: 1px; background: var(--gold); }
h1 { margin: 17px 0 0; font: 700 clamp(52px, 6vw, 86px)/.92 "Manrope", sans-serif; letter-spacing: -.07em; }
h1 em { color: transparent; background: linear-gradient(120deg, var(--gold-light), #f39d54); -webkit-background-clip: text; background-clip: text; font-style: normal; }
h2 { margin: 8px 0 0; font: 700 25px/1.1 "Manrope", sans-serif; letter-spacing: -.04em; }
h3 { margin: 0; font: 700 15px/1.2 "Manrope", sans-serif; letter-spacing: -.02em; }

/* ── Overview ───────────────────────────────────────────────────────────── */
.hero { margin: 0 0 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; gap: 46px; }
.hero-copy { max-width: 640px; }
.hero-art { position: relative; padding: 0; overflow: hidden; background: #05060a; border: 1px solid var(--line); border-radius: 19px; box-shadow: 0 34px 90px #000a; transition: transform .25s, border-color .25s; }
/* No lift on hover. A transform moves the hit area with the element, so a card near the pointer
   escapes it, un-hovers, drops back and re-hovers — the flicker every grid here used to have. */
.hero-art:hover { border-color: #6c5a3c; box-shadow: 0 34px 90px #000c; }
.hero-art img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hero-art img:not([src]), .hero-art img[src=""] { display: none; }
.hero-art span { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; color: #f4efe3; background: #08080dcc; border: 1px solid #ffffff1c; border-radius: 999px; font: 700 10px/1 "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.lede { max-width: 720px; margin: 24px 0 0; color: var(--muted); font-size: 17px; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions button { min-height: 48px; padding: 12px 22px; font: 800 13px "Manrope", sans-serif; }
.hero-actions b { margin-left: 10px; }
.proof-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 9px; }
.proof-row span { padding: 6px 10px; color: #c1bdb5; background: #ffffff08; border: 1px solid #ffffff10; border-radius: 999px; font-size: 10px; }
.proof-row span::before { content: "✓"; margin-right: 6px; color: var(--green); }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.feature { padding: 22px; background: linear-gradient(160deg, #15151a, #0e0e12 68%); border: 1px solid var(--line); border-radius: 17px; }
.feature b { color: var(--gold); font: 800 11px/1 "Manrope", sans-serif; letter-spacing: .12em; }
.feature h3 { margin: 14px 0 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ── Studio · the projects ──────────────────────────────────────────────── */
/* Deliberately the gallery's own card: a project and a finished game are the same object at two
   stages of its life, and two card designs for one thing would be one more thing to keep in step. */
.project-card figure { display: grid; place-items: center; }
.project-card figure::after { content: "◆"; color: #2f2c35; font-size: 26px; }
.project-card figure img { position: relative; z-index: 1; }
.project-card.generating { border-color: #5d4522; }
.project-card.failed { border-color: #63332c; }
/* The card carries the gallery's own typography, so the plus has to outrank it rather than sit at
   heading size. It is the one control on this screen and it should read as one. */
.project-new { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 14px; border-style: dashed; border-color: #3d3a44; background: #ffffff05; }
.gallery-card.project-new strong { font: 200 78px/.7 "Manrope", sans-serif; color: var(--gold); }
.gallery-card.project-new span { color: var(--muted); font: 700 11px/1 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.project-new:hover { border-color: var(--gold); border-style: solid; }
.project-new:hover strong { color: var(--gold-light); }
.account-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.account-tools button { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.wallet-summary { color: var(--gold-light); font: 700 10px/1.2 "Manrope", sans-serif; letter-spacing: .04em; white-space: nowrap; }

/* ── Studio · account ───────────────────────────────────────────────────── */
.auth-shell { min-height: 58vh; display: grid; place-items: center; }
.auth-card { width: min(420px, 100%); padding: 30px; display: grid; background: radial-gradient(26rem 16rem at 100% 0, #40291a, transparent 60%), #101014; border: 1px solid #40382d; border-radius: 20px; box-shadow: 0 28px 90px #0009; }
.auth-card h2 { margin: 10px 0 8px; font-size: 31px; }
.auth-card > p:not(.step) { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.auth-card button { width: 100%; margin-top: 8px; }

/* ── Studio · the brief ─────────────────────────────────────────────────── */
.studio-brief { width: 100%; display: flex; justify-content: center; }
.brief-panel { width: min(1120px, 100%); margin-inline: auto; padding: 30px; background: linear-gradient(145deg, #17171d, #0e0e12 62%); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 100px #0008; }
.panel-heading { margin-bottom: 26px; display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.panel-heading h2 { font-size: 31px; }
.panel-intro { max-width: 580px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.brief-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 22px; }
.brief-editor { min-width: 0; display: grid; gap: 14px; }
.brief-section { padding: 19px; background: #0c0c10a8; border: 1px solid #2c2b33; border-radius: 15px; }
.template-section { display: grid; grid-template-columns: minmax(190px, .65fr) minmax(260px, 1fr); align-items: center; gap: 18px; background: linear-gradient(110deg, #20180f, #101014 58%); border-color: #45351e; }
.section-heading { display: flex; align-items: center; gap: 11px; }
.section-heading > div { min-width: 0; display: grid; gap: 3px; }
.section-heading strong { font: 750 13px/1.25 "Manrope", sans-serif; }
.section-heading small { color: var(--muted); font-size: 10px; }
.section-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: #201508; background: linear-gradient(145deg, var(--gold-light), #d48a2e); border-radius: 10px; font: 800 13px/1 "Manrope", sans-serif; box-shadow: 0 8px 25px #bd782426; }
.section-heading.numbered { margin-bottom: 18px; }
.essentials { padding: 22px; border-color: #383640; box-shadow: inset 0 1px #ffffff08; }
.field-grid { display: grid; gap: 12px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.name-style-grid { grid-template-columns: minmax(0, 1.15fr) minmax(190px, .85fr); }
.field { margin-bottom: 15px; display: grid; gap: 7px; }
.field span { color: #e8e3d8; font-size: 11px; font-weight: 700; }
.field small, .check small { color: #8d8982; font-size: 10px; line-height: 1.45; }
.field-label { display: flex; align-items: center; gap: 7px; }
.field-label em { padding: 3px 6px; color: var(--gold-light); background: #2b200f; border: 1px solid #503b1c; border-radius: 999px; font: 700 7px/1 "Manrope", sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.theme-field { margin-bottom: 10px; }
.theme-field textarea { min-height: 150px; font-size: 14px; line-height: 1.55; }
/* the hidden sibling input carries the "off" value, so an unchecked box still reaches the server
   as a decision rather than as an absent field the brief would fill back in with its default */
.check { display: flex; align-items: center; gap: 8px; }
.check input[type="checkbox"] { width: 15px; height: 15px; flex: none; accent-color: var(--gold); }
.check small { line-height: 1.4; }
.template-field { min-width: 0; margin: 0; }
.template-field small { min-height: 29px; }
input, textarea, select { width: 100%; color: var(--ink); background: #0b0b0e; border: 1px solid #2d2c34; border-radius: 9px; }
input, select { height: 47px; padding: 0 13px; }
select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg,transparent 50%,#9b968c 50%),linear-gradient(135deg,#9b968c 50%,transparent 50%); background-position: calc(100% - 18px) 20px,calc(100% - 13px) 20px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
textarea { min-height: 92px; padding: 11px 12px; resize: vertical; }
textarea.short { min-height: 65px; }
textarea:focus, input:focus, select:focus { outline: 2px solid #edb85426; border-color: #977138; }
.fine-tune-heading { margin: 10px 2px 0; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.fine-tune-heading h3 { margin-top: 6px; font-size: 17px; }
.fine-tune-heading > span { color: #77736c; font-size: 9px; }
.brief-summary { position: sticky; top: 88px; }
.summary-card { padding: 21px; overflow: hidden; background: radial-gradient(28rem 16rem at 110% -10%, #4a2c1e, transparent 58%), #0b0b0f; border: 1px solid #37343c; border-radius: 16px; box-shadow: 0 18px 60px #0005; }
.summary-card h3 { margin-top: 9px; font-size: 19px; }
.summary-copy { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.deliverables { margin: 18px 0; padding: 14px 0; display: grid; gap: 10px; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.deliverables li { display: flex; align-items: center; gap: 9px; color: #c9c5bd; font-size: 11px; }
.deliverables li span { width: 20px; color: var(--gold); text-align: center; }
.summary-label { display: block; color: #77736c; font: 700 8px/1 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.generate { width: 100%; min-height: 61px; position: relative; margin-top: 16px; padding: 11px 48px 11px 15px; display: grid; justify-items: start; align-content: center; color: #1d1308; background: linear-gradient(125deg, #ffdc8e, #e7a33d); border-color: #efb455; box-shadow: 0 12px 42px #b66c201c; }
.generate span { font: 800 13px/1.4 "Manrope", sans-serif; }
.generate small { opacity: .62; font-size: 9px; font-weight: 700; }
.generate b { position: absolute; right: 17px; top: 50%; translate: 0 -50%; font-size: 21px; }
.generate-note { margin: 9px 0 0; color: #706d67; font-size: 9px; text-align: center; }
.visually-hidden { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.field.invalid > input, .field.invalid > textarea, .field.invalid > select { border-color: var(--danger); background: #1d1413; }
.field.invalid > span { color: var(--danger); }
.field-error { margin-top: 5px; color: var(--danger); font-weight: 600; }

.subject-preview { min-height: 24px; margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.subject-chip { padding: 3px 8px; font: 600 10px/1.5 "Manrope", sans-serif; border-radius: 999px; border: 1px solid #3d3a44; color: var(--muted); background: #131319; }
.subject-chip.named { color: #d8e4c9; border-color: #4a5a3c; background: #161b12; }
.subject-chip.derived { border-style: dashed; }
.cost-estimate.error { color: var(--danger); background: #271716; border-color: #63332c; }
.cost-estimate { margin: 10px 0 0; padding: 10px 11px; font: 600 10px/1.5 "Manrope", sans-serif; color: var(--gold-light); background: #16130c; border: 1px solid #3d3423; border-radius: 8px; }
.cost-estimate.planning { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.cost-estimate.planning::before { content: ""; width: 11px; height: 11px; flex: none; border: 2px solid #edb85435; border-top-color: var(--gold); border-radius: 50%; animation: loader-spin .75s linear infinite; }

.advanced { margin-top: 13px; background: #ffffff05; border: 1px solid var(--line); border-radius: 11px; }
.advanced > summary { min-height: 58px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); list-style: none; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "+"; width: 26px; height: 26px; flex: none; display: grid; place-items: center; font-size: 14px; line-height: 1; color: var(--gold-light); background: #241b0f; border: 1px solid #4d391c; border-radius: 8px; }
.advanced[open] > summary::before { content: "–"; }
.advanced[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.advanced > summary:hover { color: var(--ink); }
.advanced > summary span { min-width: 0; flex: 1; display: grid; gap: 2px; }
.advanced > summary strong { color: #d8d4cc; font: 700 11px/1.3 "Manrope", sans-serif; }
.advanced > summary small { color: #77736c; font-size: 9px; }
.advanced-count { font-style: normal; font-size: 9px; letter-spacing: .05em; color: var(--gold-light); }
.advanced.has-values > summary::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.advanced > *:not(summary) { margin-left: 14px; margin-right: 14px; }
.advanced > *:nth-child(2) { margin-top: 15px; }
.advanced > *:last-child { margin-bottom: 15px; }

/* ── Studio · generating ────────────────────────────────────────────────── */
.studio-progress { width: min(760px, 100%); margin: 60px auto; padding: 34px; background: linear-gradient(160deg, #15151a, #0e0e12 68%); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 26px 90px #0007; }
.studio-progress h2 { margin: 10px 0 26px; }
.progress-track { height: 10px; overflow: hidden; background: #0b0b0e; border: 1px solid #2d2c34; border-radius: 999px; }
.progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #e7a33d, var(--gold-light)); border-radius: 999px; box-shadow: 0 0 22px #edb85455; transition: width .5s cubic-bezier(.2,.8,.3,1); }
.progress-row { margin-top: 14px; display: flex; align-items: baseline; gap: 14px; }
.progress-row strong { min-width: 62px; font: 800 26px/1 "Manrope", sans-serif; letter-spacing: -.04em; color: var(--gold-light); }
.progress-row span { color: var(--muted); font-size: 12px; }
.progress-actions { margin-top: 22px; display: flex; gap: 8px; }
.studio-progress.failed .progress-fill { background: linear-gradient(90deg, #8c3a2c, var(--danger)); box-shadow: none; }
.studio-progress.failed .progress-row strong { color: var(--danger); }
.retry-generation { color: var(--danger); background: #271716; border-color: #63332c; font-size: 11px; }

/* ── Studio · the finished set ──────────────────────────────────────────── */
.result-head { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.result-actions { display: flex; align-items: center; gap: 8px; }
.download { display: inline-flex; align-items: center; gap: 14px; color: #1b1208; background: linear-gradient(120deg,var(--gold-light),var(--gold)); border-color: var(--gold); font-size: 12px; }
.stage-host { display: grid; }
.player { width: 100%; }
.workbench { margin-top: 26px; padding: 24px; background: linear-gradient(160deg, #15151a, #0e0e12 68%); border: 1px solid var(--line); border-radius: 17px; }
.substitution-note { margin: 0 0 14px; font-size: 11px; color: var(--muted); }
.workbench-head { margin-bottom: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.symbol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* A column pushes the redraw row to the bottom of every card, keeping the fields aligned. */
.symbol-card { position: relative; padding: 11px; display: flex; flex-direction: column; gap: 9px; background: #0b0b0f; border: 1px solid var(--line); border-radius: 13px; }
.symbol-card.special { border-color: #4c3f22; }
/* The picture is positioned against the frame rather than sized by percentages of it: the card is a
   column flex box, so the figure's height comes from its aspect ratio and is not a height a child can
   take a percentage of. A 1:3 mascot sized that way overflows to three times the frame and is clipped
   to its own head. */
.symbol-card figure { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; background-color: #15151a; background-image: linear-gradient(45deg,#1d1d23 25%,transparent 25%),linear-gradient(-45deg,#1d1d23 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1d1d23 75%),linear-gradient(-45deg,transparent 75%,#1d1d23 75%); background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; border-radius: 9px; }
.symbol-card figure img { position: absolute; left: 7px; top: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain; }
.symbol-card.is-redrawing { border-color: #6a5025; box-shadow: 0 0 0 1px #edb85418, 0 12px 38px #0006; }
.symbol-card.is-redrawing figure img { opacity: .58; filter: saturate(.65); }
.asset-loading { max-width: calc(100% - 16px); position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 7px 9px; display: flex; align-items: center; gap: 7px; color: var(--gold-light); background: #09090de8; border: 1px solid #6a5025; border-radius: 999px; box-shadow: 0 7px 22px #0009; font: 700 8px/1.2 "Manrope", sans-serif; }
.asset-loading span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-spinner { width: 13px; height: 13px; flex: none; border: 2px solid #edb8543d; border-top-color: var(--gold-light); border-radius: 50%; animation: loader-spin .75s linear infinite; }
.symbol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.symbol-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px "Manrope", sans-serif; }
.symbol-head small { flex: none; color: #6f6b68; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.symbol-redraw { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.symbol-redraw input { height: 32px; padding: 0 9px; font-size: 11px; border-radius: 8px; }
.redo-inline { min-height: 32px; padding: 5px 11px; font: 700 10px/1 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-light); background: #241b0f; border: 1px solid #5d4522; border-radius: 8px; }
.redo-inline:hover { background: #2f2413; border-color: var(--gold); }
.redraw-confirmation { grid-column: 1 / -1; color: var(--gold-light); font: 650 8px/1.3 "Manrope", sans-serif; text-align: right; }



/* ── Gallery ────────────────────────────────────────────────────────────── */
.gallery-head { margin-bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery-card { position: relative; padding: 0; display: grid; gap: 0; overflow: hidden; text-align: left; background: linear-gradient(160deg, #15151a, #0e0e12 68%); border: 1px solid var(--line); border-radius: 17px; transition: border-color .2s, box-shadow .2s; }
.gallery-card:hover { border-color: #6c5a3c; box-shadow: 0 22px 60px #0009; }
.gallery-card figure { margin: 0; aspect-ratio: 16/9; overflow: hidden; background: #05060a; border-bottom: 1px solid var(--line); }
.gallery-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-card:hover figure img { transform: scale(1.03); }
.gallery-card > div { padding: 16px 18px 18px; display: grid; gap: 5px; }
.gallery-card strong { font: 800 17px/1.2 "Manrope", sans-serif; letter-spacing: -.03em; }
.gallery-card span { color: var(--muted); font-size: 12px; }
.gallery-tags { margin: 6px 0 0; color: #6f6b68; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.gallery-play { position: absolute; right: 16px; top: 16px; padding: 6px 14px; color: #1b1208; background: linear-gradient(120deg,var(--gold-light),var(--gold)); border-radius: 999px; font: 800 10px/1 "Manrope", sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .08em; opacity: 0; transition: opacity .2s; }
.gallery-card:hover .gallery-play { opacity: 1; }
.gallery-player { margin-top: 26px; padding: 20px; background: linear-gradient(160deg, #15151a, #0e0e12 68%); border: 1px solid var(--line); border-radius: 17px; }
.gallery-player-head { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ── The playable stage ─────────────────────────────────────────────────── */
/* Exactly two controls, and both of them are lab chrome rather than generated art: the spin button in
   the canvas's own bottom-right corner and the expand toggle in the bar under it. They are identical
   for every set on purpose — the set supplies the art, and a control that changed with it would read
   as part of the art. The generated `ui/spin-button.png` stays in the deliverables for whoever ships
   the real game. */
.game-frame { display: flex; flex-direction: column; }
.game-shell { position: relative; display: grid; place-items: center; }
/* The host box is the canvas box: its size is set in pixels from the stage's own aspect, so the
   button in its corner is in the corner of the game at every panel width and in fullscreen. */
.game-host { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #05060a; border: 1px solid #3a373c; border-radius: 12px; box-shadow: 0 18px 60px #0008; }
.game-host canvas { display: block; }
/* Flex, not a centred grid: the splash box is the full host, so a percentage width on the logo has a
   definite box to resolve against. Auto-sized grid tracks collapsed it to a few pixels. */
.game-boot { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; background: radial-gradient(26rem 15rem at 50% 42%, #251a11, #08080d 72%); }
.game-boot button { padding: 12px 19px; color: #1b1208; background: linear-gradient(120deg, var(--gold-light), var(--gold)); border-color: var(--gold); font: 800 12px "Manrope", sans-serif; }
/* The splash carries the set's own generated title rather than type, so the panel reads as that game
   even before its engine has loaded. */
.boot-logo { width: min(52%, 360px); max-height: 34%; object-fit: contain; filter: drop-shadow(0 6px 18px #000); }
.boot-logo:not([src]), .boot-logo[src=""] { display: none; }
.game-boot.working button { opacity: .45; pointer-events: none; }

.spin-button { width: clamp(44px, 7.2%, 76px); position: absolute; right: 2.4%; bottom: 3.6%; z-index: 4; aspect-ratio: 1; min-height: 0; padding: 0; display: grid; place-items: center; color: #22160a; background: radial-gradient(circle at 38% 28%, var(--gold-light), #d4902a 72%); border: 1px solid #ffe4ab; border-radius: 50%; box-shadow: 0 7px 24px #000000ad, 0 0 0 4px #ffd9851a, inset 0 -2px 7px #0000002e; transition: transform .14s, filter .18s, box-shadow .18s; }
.spin-button svg { width: 54%; height: 54%; }
.spin-button:hover { filter: brightness(1.07); box-shadow: 0 9px 28px #000000b8, 0 0 0 7px #ffd98526; }
.spin-button:active { transform: translateY(1px) scale(.97); }
.spin-button:disabled { opacity: 1; filter: saturate(.35) brightness(.72); }
.spin-button.busy svg { animation: loader-spin .85s linear infinite; }
.spin-button[hidden] { display: none; }

.game-bar { margin-top: 9px; padding: 6px 8px 6px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0b0b0f; border: 1px solid var(--line); border-radius: 10px; }
.orientation-switch { display: flex; gap: 6px; }
.orientation-switch button { min-height: 28px; padding: 6px 14px; color: var(--muted); background: #131319; border: 1px solid #3d3a44; border-radius: 999px; font: 700 10px "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.orientation-switch button.active { color: #1b1208; background: linear-gradient(120deg,var(--gold-light),var(--gold)); border-color: var(--gold); }
.game-note { flex: 1; text-align: right; color: var(--muted); font: 600 10px/1.4 "Manrope", sans-serif; }
.game-note b { color: var(--gold-light); font-weight: 800; }
.game-note.win { color: var(--green); }
.fullscreen-toggle { width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; color: var(--muted); background: #131319; border-radius: 8px; }
.fullscreen-toggle:hover { color: var(--ink); }
.fullscreen-toggle svg { width: 17px; height: 17px; }
.fullscreen-toggle .collapse { display: none; }

/* Fullscreen is taken on the frame, never on the canvas. Phaser's own fullscreen promotes the canvas
   alone, which would take the spin button and the bar down with the rest of the page — the same
   reason the toggle lives here and not in the scene. */
.game-frame:fullscreen { width: 100vw; height: 100vh; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #05060a; }
.game-frame:fullscreen .game-shell { flex: 1; min-height: 0; }
.game-frame:fullscreen .game-host { border-color: transparent; border-radius: 10px; box-shadow: none; }
.game-frame:fullscreen .game-bar { margin: 0; }
.game-frame:fullscreen .fullscreen-toggle .expand { display: none; }
.game-frame:fullscreen .fullscreen-toggle .collapse { display: block; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; max-width: 430px; padding: 12px 15px; color: #1a1108; background: var(--gold-light); border-radius: 9px; font-weight: 750; box-shadow: 0 14px 45px #000b; }
.hidden { display: none !important; }

@keyframes loader-spin { to { transform: rotate(360deg); } }
@media (max-width: 1180px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .symbol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Touch has no hover, so anything that only appeared on hover is always on instead of never. */
@media (hover: none) {
  .gallery-play { opacity: 1; }
  .gallery-card:hover figure img { transform: none; }
}
@media (max-width: 940px) {
  /* One column below this: two made the headline wrap every second word and the shot a thumbnail. */
  .hero { grid-template-columns: 1fr; gap: 30px; margin-bottom: 48px; }
  .hero-copy { max-width: none; }
  .brief-layout { grid-template-columns: 1fr; }
  .brief-summary { position: static; }
  .summary-card { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr); column-gap: 24px; }
  .summary-card > .step, .summary-card > h3, .summary-card > .summary-copy, .summary-card > .deliverables { grid-column: 1; }
  .summary-plan, .summary-card > .generate, .summary-card > .generate-note { grid-column: 2; }
  .summary-plan { grid-row: 1 / span 4; }
}
@media (max-width: 760px) {
  /* One row, never two: the bar is sticky, so a wrap changes the height every view sits under. */
  .nav { padding: 11px 14px; flex-wrap: nowrap; gap: 12px; }
  .brand { min-width: 0; font-size: 16px; }
  .tabs { flex: none; }
  .tab { padding: 6px 11px; letter-spacing: .04em; }
  main { padding: 30px 16px 40px; }
  h1 { font-size: 46px; }
  .lede { margin-top: 18px; font-size: 14px; }
  .hero-actions { margin-top: 24px; }
  .game-bar { padding: 6px 7px 6px 10px; gap: 8px; }
  .game-note { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
  .feature-grid, .gallery-grid { grid-template-columns: 1fr; }
  .gallery-head { flex-direction: column; align-items: start; }
  .account-tools { justify-content: flex-start; }
  .brief-panel, .studio-progress, .workbench { padding: 17px; }
  .brief-panel { border-radius: 16px; }
  .panel-heading h2 { font-size: 25px; }
  .template-section, .name-style-grid { grid-template-columns: 1fr; }
  .summary-card { display: block; }
  .field-grid.two { grid-template-columns: 1fr; gap: 0; }
  .symbol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .symbol-redraw { grid-template-columns: 1fr; }
  .redraw-confirmation { text-align: left; }
  .result-head { flex-direction: column; align-items: start; }
}
@media (max-width: 440px) {
  /* The mark alone carries the brand here, which buys the tab strip the width it needs to stay
     one row of three. */
  .brand span:last-child { display: none; }
  .tabs { flex: 1; }
  .tab { flex: 1; padding: 6px 4px; font-size: 10px; }
  h1 { font-size: 37px; }
  .lede { font-size: 13.5px; }
  /* Full-width targets, and the price stays on screen — it is the point of the page. */
  .hero-actions { gap: 8px; }
  .hero-actions button { flex: 1 1 100%; }
  .proof-row { margin-top: 20px; gap: 6px; }
  .proof-row span { padding: 5px 9px; font-size: 9px; }
  .progress-row { flex-direction: column; gap: 4px; }
  .fine-tune-heading { align-items: start; flex-direction: column; }
  .gallery-card strong { font-size: 15px; }
  .symbol-grid { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}