/* /create (the create plan, 12 Oct 2026): the Create cards from design-system/battlevs-design-system-create
   (CreateLaptop, CreatePhone, CreatePromptBox). The card styles below are the design system's own (components/bundle.css,
   "Create page"), with the phone card's rules (.cr--phone) applied under 720px. Then what the page adds: one top bar
   for both cards, its phone menu, and My games (the creator's drafts, on this page). */
/* ================= Create page (/create): full-bleed, quiet neon, the prompt box carries the page ================= */
.cr { position: relative; min-height: 100%; background: var(--bg-0); color: var(--text-1); display: flex; flex-direction: column; }
.cr-ic { width: 14px; height: 14px; flex: none; }
.cr-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 3px solid #2A1B52; background: rgba(18,10,38,.86); } /* the same line as the home page's top menu (Andrew, 13 Oct) */
.cr-top .sp { flex: 1; display: flex; justify-content: center; }
.cr-top .bv-btn { border-radius: 0; }
.cr-top .bv-btn .cr-ic, .cr-top .bv-btn .px-ic { margin-right: 6px; }
.cr-seg { display: flex; gap: 0; margin-left: 16px; padding: 3px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); }
.cr-seg a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; font-family: var(--font-arcade); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); text-decoration: none; }
.cr-seg a[aria-current="page"] { color: var(--accent); background: var(--bg-3); box-shadow: inset 0 0 0 1px #5A3F94, 0 0 18px -6px rgba(255,79,184,.6); }
.cr-main { position: relative; flex: 1; }
/* hero: dark field, one soft glow, a faint grid floor. No sun, no skyline. */
.cr-hero { position: relative; display: grid; justify-items: center; gap: 18px; padding: 104px 24px 64px; overflow: hidden; isolation: isolate; }
.cr-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cr-glow { position: absolute; left: 50%; top: 4%; width: 900px; height: 520px; margin-left: -450px; background: radial-gradient(closest-side, rgba(255,79,184,.22), rgba(124,92,255,.10) 55%, transparent 100%); filter: blur(8px); }
.cr-glow::after { content: ""; position: absolute; left: 30%; right: 30%; top: 62%; height: 120px; background: radial-gradient(closest-side, rgba(47,214,245,.12), transparent); }
.cr-gridfloor { position: absolute; left: -20%; right: -20%; bottom: -10px; height: 300px; transform: perspective(360px) rotateX(58deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(255,79,184,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(124,92,255,.26) 1px, transparent 1px); background-size: 56px 40px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 45%, transparent 90%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 45%, transparent 90%); }
.cr-head { display: grid; justify-items: center; gap: 12px; text-align: center; }
.cr-eye { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-arcade); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.skin .cr-eye-spr { width: 18px; }
.cr-h1 { margin: 0; font-family: var(--font-pixel); font-weight: 700; text-transform: uppercase; font-size: 60px; line-height: 62px; letter-spacing: 0; text-shadow: 4px 4px 0 #120A26, 0 0 28px rgba(255,79,184,.35); }
.cr-sub { margin: 0; max-width: 520px; font-size: 18px; line-height: 28px; color: var(--text-2); }
/* prompt box */
.cr-box { position: relative; width: 100%; max-width: 720px; display: grid; background: rgba(27,16,53,.92); box-shadow: 0 0 0 1px #4A3780, 0 0 0 4px #120A26, 0 24px 60px -24px rgba(255,79,184,.45); margin-top: 10px; }
.cr-box:focus-within { box-shadow: 0 0 0 2px var(--human), 0 0 0 5px #120A26, 0 24px 60px -24px rgba(47,214,245,.45); }
.cr-ta { width: 100%; min-height: 104px; resize: vertical; border: 0; background: transparent; color: var(--text-1); font: inherit; font-size: 17px; line-height: 26px; padding: 18px 20px 6px; outline: none; }
.cr-ta::placeholder { color: var(--text-3); }
.cr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 12px; }
.cr-tools .sp { flex: 1; }
/* References (14 Oct): the chips under the idea, the 📎 button, dropping files on the box */
.rf-pick { position: relative; cursor: pointer; }
.rf-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rf-pick:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.cr-refs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px 2px; }
.cr-refs[hidden], .cr-refs-note[hidden] { display: none; }
.cr-refs-hint { display: none; margin: 0; padding: 4px 20px 0; font-size: 12px; line-height: 17px; color: var(--text-3); }
.cr-refs:not([hidden]) + .cr-refs-hint { display: block; }
.cr-refs-note { margin: 0; padding: 4px 20px 0; font-size: 13px; color: var(--warning); }
.rf-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; min-height: 36px; padding: 3px 4px 3px 3px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--text-1); }
.rf-chip img, .rf-chip .rf-ic { flex: none; width: 30px; height: 30px; object-fit: cover; background: #120A26; }
.rf-chip .rf-ic { display: grid; place-items: center; font: 700 9px/1 var(--font-body); letter-spacing: .04em; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.rf-chip .rf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-chip small { color: var(--text-3); font-size: 11px; padding-right: 6px; }
.rf-x { flex: none; width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.rf-x:hover { color: var(--danger); }
.rf-x:focus-visible { outline: 2px solid var(--focus); }
.rf-over { box-shadow: 0 0 0 2px var(--agent), 0 0 0 5px #120A26, 0 0 40px -6px rgba(255,79,184,.6) !important; }
.cr-box.is-building .cr-refs-hint, .cr-box.is-building .rf-x { display: none; }
.cr-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text-1); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cr-tool:hover { border-color: var(--text-2); }
.cr-tool:focus-visible, .cr-idea:focus-visible, .cr-x:focus-visible, .cr-seg a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cr-pick .k { font-family: var(--font-arcade); font-size: 8px; color: var(--text-3); text-transform: uppercase; }
.cr-pick b { font-weight: 700; }
.cr-pick[aria-expanded="true"] { border-color: var(--human); }
.cr-pick[aria-expanded="true"] .car { transform: rotate(180deg); }
.cr-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px 0 10px; background: var(--human-soft); box-shadow: inset 0 0 0 1px var(--human-lip); font-size: 14px; font-weight: 600; }
.cr-chip--tpl { background: #2A1440; box-shadow: inset 0 0 0 1px #8A3A78; }
.cr-x { min-height: 32px; padding: 0 8px; border: 0; background: rgba(255,255,255,.08); color: var(--text-1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cr-count { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.skin-store .bv-btn.cr-go { --fill: var(--accent); --ink: var(--on-accent); --edge: var(--accent); --lip: var(--accent-lip); border-radius: 0; min-height: 44px; padding: 0 18px; gap: 10px; font-family: var(--font-arcade); font-weight: 400; font-size: 11px; text-transform: uppercase; box-shadow: 0 4px 0 0 var(--lip); }
.cr-go-ic { width: 12px; height: 12px; filter: brightness(0) saturate(100%); opacity: .85; }
.skin-store .bv-btn.cr-go:disabled { --fill: var(--bg-3); --ink: var(--text-2); --lip: var(--line-1); box-shadow: 0 4px 0 0 var(--line-1); cursor: not-allowed; }
.skin-store .bv-btn.cr-go:disabled .cr-go-ic { filter: none; opacity: .5; }
.cr-menu { position: absolute; left: 12px; top: calc(100% - 8px); z-index: 3; width: 280px; margin: 0; padding: 6px; list-style: none; background: var(--bg-1); box-shadow: 0 0 0 1px var(--line-2), 0 0 0 4px #120A26, 0 18px 40px -12px rgba(0,0,0,.7); }
.cr-menu li { display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; }
.cr-menu li > .cr-ic, .cr-menu li > .cr-ic-any { grid-row: 1 / 3; }
.cr-ic-any { font-family: var(--font-arcade); font-size: 12px; color: var(--accent); text-align: center; }
.cr-menu b { font-size: 14px; } .cr-menu li > span:not(.tick):not(.cr-ic-any) { grid-column: 2; font-size: 12px; color: var(--text-2); }
.cr-menu .tick { grid-column: 3; grid-row: 1 / 3; font-family: var(--font-arcade); font-size: 8px; color: var(--accent); text-transform: uppercase; }
.cr-menu li.is-sel { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--accent); }
.cr-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 14px; border-top: 1px dashed var(--line-1); font-size: 14px; color: var(--text-2); }
.cr-status b { color: var(--text-1); }
.cr-bar { flex: 1; min-width: 120px; height: 10px; background: #0B0718; box-shadow: inset 0 0 0 1px var(--line-1); }
.cr-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--human) 0 8px, #1690AE 8px 10px); }
.cr-box.is-building .cr-ta { color: var(--text-2); }
.cr-note { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); text-align: center; }
.cr-note a { color: var(--human-text); font-weight: 700; text-underline-offset: 3px; }
.skin .cr-note-spr { width: 14px; }
.cr-ideas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 720px; margin-top: 6px; }
.cr-try { font-family: var(--font-arcade); font-size: 8px; color: var(--text-3); text-transform: uppercase; margin-right: 4px; }
.cr-idea { min-height: 36px; padding: 0 14px; border: 1px solid #4A3780; background: rgba(38,23,71,.7); color: var(--text-1); font: inherit; font-size: 14px; cursor: pointer; }
.cr-idea::before { content: "+ "; color: var(--agent-text); font-weight: 700; }
.cr-idea:hover { border-color: var(--agent); box-shadow: 0 0 16px -6px rgba(255,79,184,.7); }
/* templates: one row of three */
.cr-tpls { max-width: 1040px; margin: 0 auto; padding: 8px 24px 64px; }
/* How Create works (14 Oct) */
.cr-how-link { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--text-2); } /* the home page's line to it */
.cr-how-link a { color: var(--human-text); font-weight: 600; }
.cr-how .pg-steps { max-width: 860px; }
.cr-faqs { max-width: 866px; margin-top: 18px; display: grid; gap: 0; }
.cr-faqs .pg-faq { margin: 10px 3px 0; } /* in line with the steps (they sit 3px in) */
.cr-tpls-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cr-h2 { margin: 0; font-family: var(--font-pixel); font-weight: 700; text-transform: uppercase; font-size: 24px; line-height: 28px; }
.cr-tpls-head .bv-btn { border-radius: 0; }
.cr-tpl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cr-tpl { display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-1); box-shadow: 0 0 0 1px var(--line-1), 0 0 0 4px #120A26; transition: box-shadow var(--dur-fast) var(--ease-out); }
.cr-tpl:hover, .cr-tpl:focus-within { box-shadow: 0 0 0 1px var(--agent), 0 0 0 4px #120A26, 0 0 28px -8px rgba(255,79,184,.55); }
.cr-tpl-txt { padding: 14px 16px 6px; display: grid; gap: 6px; align-content: start; }
.cr-tpl h3 { margin: 0; font-family: var(--font-pixel); font-weight: 700; font-size: 17px; line-height: 20px; text-transform: uppercase; }
.cr-tpl p { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-2); }
.cr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; }
.cr-tags span { font-size: 12px; line-height: 16px; padding: 3px 8px; background: var(--bg-3); color: var(--text-1); }
.skin-store .bv-btn.cr-use { margin: 10px 16px 16px; border-radius: 0; justify-self: start; }
/* thumbnails */
.cr-th { position: relative; height: 150px; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 0%, #2A1650 0%, #140C2C 70%); border-bottom: 1px solid var(--line-1); }
.cr-floor { position: absolute; left: -30%; right: -30%; bottom: -4px; height: 70px; z-index: -1; transform: perspective(120px) rotateX(55deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(255,79,184,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(124,92,255,.35) 1px, transparent 1px); background-size: 22px 14px; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.skin .cr-th-spr { position: absolute; bottom: 16px; width: 26px; }
.cr-th-spr--h { left: 18px; } .cr-th-spr--a { right: 18px; }
.cr-th-grid { position: absolute; left: 50%; top: 18px; margin-left: -54px; display: grid; grid-template-columns: repeat(4, 24px); gap: 4px; padding: 6px; background: #0B0718; box-shadow: 0 0 0 2px #3A2A63; }
.cr-th-grid i { width: 24px; height: 24px; background: #1E1240; display: grid; place-items: center; }
.skin .cr-tok { width: 18px; height: 18px; }
.cr-th-dice { position: absolute; left: 0; right: 0; top: 42px; display: flex; justify-content: center; gap: 10px; }
.cr-die { width: 40px; height: 40px; }
.cr-die.is-kept { transform: translateY(-6px); }
.cr-die--tilt { transform: rotate(-12deg); }
.cr-th-cards { position: absolute; left: 0; right: 0; top: 26px; display: flex; justify-content: center; gap: 10px; }
.cr-pc { width: 52px; height: 72px; display: grid; place-items: center; background: #F7F3FF; color: #120A26; font-family: var(--font-arcade); font-size: 20px; box-shadow: 0 0 0 3px #120A26, inset 0 -4px 0 #C9BFE0; }
.cr-pc--h { box-shadow: 0 0 0 3px #120A26, inset 0 0 0 3px var(--human), inset 0 -6px 0 #9FE9F7; transform: rotate(-6deg); }
.cr-pc--a { color: var(--agent-lip); box-shadow: 0 0 0 3px #120A26, inset 0 0 0 3px var(--agent), inset 0 -6px 0 #FFC2E6; transform: rotate(6deg); }
.cr-pc--back { background: repeating-linear-gradient(45deg, #3A2A63 0 4px, #261747 4px 8px); box-shadow: 0 0 0 3px #120A26, inset 0 0 0 3px #7A68A8; transform: translateY(-6px); }
/* footer */
.cr-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 18px 24px 22px; border-top: 1px solid var(--line-1); font-size: 13px; color: var(--text-3); }
.cr-foot nav { display: flex; gap: 18px; } .cr-foot a { color: var(--text-2); font-weight: 600; text-decoration: none; }
/* phone */
/* motion: sprites take a 2-step bob; nothing else moves */
.cr .gc-sprite.is-active { animation: gc-bob 1.2s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .cr .gc-sprite.is-active { animation: none !important; } .cr-tpl, .cr-idea { transition: none; } }
.cr-note { display: block; }
.skin .cr-note-spr { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.cr-ideas { max-width: 940px; }
.cr-gridfloor { opacity: .7; }
.cr-all { margin-top: 16px; width: 100%; justify-content: center; border-radius: 0 !important; }
.skin-store .bv-btn.cr-go:disabled { --edge: var(--line-2); }

/* phone (the CreatePhone card): the same page stacked, templates as rows */
@media (max-width: 719px) {
  .cr .cr-top { padding: 10px 12px; gap: 8px; }
  .cr .cr-hero { padding: 48px 16px 36px; gap: 14px; }
  .cr .cr-glow { width: 560px; margin-left: -280px; height: 420px; }
  .cr .cr-gridfloor { height: 220px; background-size: 40px 30px; }
  .cr .cr-h1 { font-size: 36px; line-height: 38px; }
  .cr .cr-sub { font-size: 16px; line-height: 24px; }
  .cr .cr-ta { min-height: 120px; font-size: 16px; padding: 14px 14px 4px; }
  .cr .cr-tools { padding: 8px 10px 10px; }
  .cr .cr-tools .sp { flex-basis: 100%; height: 0; }
  .cr .cr-count { margin-right: auto; }
  .cr .cr-note { display: block; font-size: 13px; line-height: 20px; }
  .cr .cr-note-spr { vertical-align: -3px; margin-right: 4px; }
  .cr .cr-tpls { padding: 4px 16px 40px; }
  .cr .cr-h2 { font-size: 18px; line-height: 22px; }
  .cr .cr-tpl-row { grid-template-columns: 1fr; gap: 16px; }
  .cr .cr-tpl { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; }
  .cr .cr-tpl-art { grid-row: 1 / 3; }
  .cr .cr-th { height: 100%; min-height: 150px; border-bottom: 0; border-right: 1px solid var(--line-1); }
  .cr .cr-tpl-txt { padding: 12px 12px 4px; }
  .cr .cr-tpl h3 { font-size: 15px; line-height: 18px; }
  .cr .cr-tpl p { font-size: 13px; line-height: 19px; }
  .skin-store.cr .bv-btn.cr-use { margin: 8px 12px 12px; }
  .cr .cr-th-grid { transform: scale(.78); transform-origin: 50% 0; top: 10px; }
  .cr .cr-th-dice { top: 40px; gap: 4px; } .cr .cr-die { width: 26px; height: 26px; }
  .cr .cr-th-cards { top: 34px; gap: 2px; } .cr .cr-pc { width: 30px; height: 44px; font-size: 12px; }
  .skin .cr .cr-th-spr, .cr.skin .cr-th-spr { width: 18px; bottom: 12px; }
  .cr .cr-th-spr--h { left: 10px; } .cr .cr-th-spr--a { right: 10px; }
  .cr .cr-foot { padding: 16px; flex-direction: column; }
  .cr .cr-ideas { display: grid; grid-template-columns: 1fr; justify-items: stretch; width: 100%; gap: 8px; }
  .cr .cr-try { text-align: left; margin: 0; }
  .cr .cr-idea { text-align: left; min-height: 44px; }
  .cr .cr-gridfloor { opacity: .5; }
}

/* ---- the page's own additions ---- */
.cr [hidden]{display:none!important}
.cr-ph{display:none}
.cr-brand{display:flex;align-items:center}
.cr-menu-list{position:absolute;left:12px;top:100%;z-index:5;min-width:220px;margin:0;padding:6px;list-style:none;background:var(--bg-1);box-shadow:0 0 0 1px var(--line-2),0 0 0 4px #120A26,0 18px 40px -12px rgba(0,0,0,.7)}
.cr-menu-list a{display:block;padding:12px;color:var(--text-1);font-weight:600;text-decoration:none}
.cr-menu-list a[aria-current]{color:var(--accent)}
.cr-menu-list a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
/* the phone card's top bar (Menu, logo, Sign in) below 980px: the laptop one needs about 980px to fit */
@media (max-width: 979px){
  .cr-lap{display:none!important}
  .cr-ph{display:inline-flex}
  .cr-brand{flex:1;justify-content:center}
}
@media (max-width: 719px){ .cr-top .bv-wordmark{font-size:20px!important} }
.cr-status .cr-x{margin-left:auto}
.cr-tpl-msg{margin:0 0 14px}
/* My games: each draft as a card in the template cards' style */
.cr-mine{padding-top:0}
.cr-mine-note{text-align:left;margin:0 0 14px}
.cr-mine-list{display:grid;gap:16px}
.cr-draft{display:grid;gap:10px;padding:16px;background:var(--bg-1);box-shadow:0 0 0 1px var(--line-1),0 0 0 4px #120A26}
.cr-draft.is-new{box-shadow:0 0 0 1px var(--agent),0 0 0 4px #120A26,0 0 28px -8px rgba(255,79,184,.55)}
.cr-draft h3{margin:0;font-family:var(--font-pixel);font-weight:700;font-size:17px;line-height:20px;text-transform:uppercase;overflow-wrap:anywhere}
.cr-draft .meta{margin:0;font-size:14px;line-height:21px;color:var(--text-2)}
.cr-draft .acts{display:flex;flex-wrap:wrap;gap:8px}
.cr-draft .cr-prereq{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;line-height:20px;color:var(--text-2)} /* what sending it for review needs (14 Oct) */
.cr-draft .cr-prereq b{color:var(--text-1)}
.cr-draft .cr-prereq .ok{color:var(--success)}
.cr-draft .cr-prereq .no::first-letter{color:var(--warning)}
.cr-draft .cr-prereq.ready b{color:var(--success)}
/* My games, collapsible (13 Oct): the head line stays; the rest folds away */
.cr-draft .cr-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cr-draft .cr-head h3{flex:1 1 160px;min-width:0;text-align:left}
.cr-draft .cr-head .rename{flex:1 1 100%}
.cr-draft .cr-body{display:grid;gap:10px}
.cr-draft .cr-body[hidden],.cr-draft .cr-quick[hidden]{display:none}
.cr-draft.is-closed{padding-block:10px}
.cr-toggle{flex:none;width:32px;height:32px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text-1);font-size:20px;line-height:1;cursor:pointer}
.cr-toggle:hover{border-color:var(--text-2)}
.cr-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.cr-state{flex:none;align-self:center;display:inline-flex;align-items:center;height:24px;box-sizing:border-box;font:600 12px/1 var(--font-body);padding:0 8px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2);white-space:nowrap}
.cr-state.live{color:var(--success);box-shadow:inset 0 0 0 1px var(--success)}
.cr-state.warn{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* Delete: a danger button; the first press turns it solid red and asks again */
.cr-draft .bv-btn.cr-del{--ink:var(--danger);--edge:var(--danger);--lip:#A3263F}
.cr-draft .bv-btn.cr-del.confirm{--fill:var(--danger);--ink:#2A0610}
.skin-store .cr-draft .bv-btn{border-radius:0}
.cr-draft .rename{display:flex;flex-wrap:wrap;gap:8px}
.cr-draft .rename input{flex:1;min-width:180px;min-height:40px;padding:0 12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text-1);font:inherit;font-size:15px}
.cr-draft .rename input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.cr-draft .msg{margin:0;font-size:14px;color:var(--text-2)}
.cr-draft .msg:empty{display:none}
.cr-report{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cr-report li{padding:8px 10px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-1);font-size:13px;line-height:19px;color:var(--text-2)}
.cr-report li b{display:block;color:var(--text-1);font-size:14px}
.cr-report li.fail{box-shadow:inset 0 0 0 2px var(--danger)}
.cr-report li.warn{box-shadow:inset 0 0 0 2px var(--warning)}
/* The first screen fits the window (Andrew, 12 Oct: the templates were cut off at the bottom). The card is drawn 1210px
   tall; on laptop windows shorter than that, the hero's spacing, the title and the box shrink so the templates show in
   full. Phones scroll as the phone card does. */
@media (min-width: 720px) and (max-height: 1150px){
  .cr-hero{padding:48px 24px 32px;gap:14px}
  .cr-tpls{padding-top:0}
  .cr-tpls-head{margin-bottom:12px}
}
@media (min-width: 720px) and (max-height: 900px){
  .cr-hero{padding:20px 24px 16px;gap:8px}
  .cr-h1{font-size:38px;line-height:40px}
  .cr-sub{font-size:16px;line-height:24px}
  .cr-ta{min-height:64px}
  .cr-th{height:88px}
  .cr-box{margin-top:4px}
  .cr-ideas{margin-top:0}
  .cr-tpls-head{margin-bottom:8px}
  .cr-h2{font-size:20px;line-height:24px}
  .cr-tpl-txt{padding:10px 16px 4px}
  .skin-store .bv-btn.cr-use{margin:8px 16px 12px}
  .cr-th-grid{top:8px;transform:scale(.85);transform-origin:50% 0}
  .cr-th-dice{top:28px}
  .cr-th-cards{top:14px}
}
/* Publishing panel (in a draft's card) */
.cr-pub{display:grid;gap:10px;padding:12px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.cr-pub .meta{margin:0}
.cr-pub .cr-report li{font-size:14px;color:var(--text-1)}
.cr-terms{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--text-2)}
.cr-terms a{color:var(--human-text);font-weight:700}
.cr-terms input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--accent)}
.cr-pub .bv-btn{justify-self:start;border-radius:0}
/* The Studio (step 4): a written game's tagline and rules in its card; questions in the box's status line */
.cr-draft .cr-tagline{color:var(--text-1)}
.cr-draft .cr-rules summary{cursor:pointer;font-size:14px;color:var(--text-2)}
.cr-draft .cr-rules ul{margin:6px 0 0;padding-left:20px;font-size:14px;line-height:21px;color:var(--text-2)}
.cr-status ol{margin:6px 0;padding-left:20px;flex-basis:100%}
.cr-status a{color:var(--human-text);font-weight:700}
/* A game's own screen and pictures (revised create plan, step 5) */
.cr-screen{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start;margin:6px 0 4px}
.cr-shot{width:140px;max-width:40%;height:auto;border-radius:10px;box-shadow:0 0 0 2px var(--line-2,#3A2A63);background:#120A26}
.cr-screen-side{flex:1 1 240px;min-width:0;display:grid;gap:8px}
.cr-art summary{cursor:pointer;font-weight:700}
.cr-art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.cr-art-tile{margin:0;display:grid;gap:6px;align-content:start;min-width:0}
.cr-art-tile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#1B1035}
.cr-art-tile figcaption{display:grid;font-size:13px;line-height:17px}.cr-art-tile figcaption span{color:var(--text-2,#BDB3D9)}
.cr-art-acts{display:flex;flex-wrap:wrap;gap:6px}
.cr-upload{position:relative;overflow:hidden;cursor:pointer}.cr-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cr-upload:focus-within{outline:3px solid var(--focus,#FFE14D);outline-offset:2px}
/* Music, sound effects and the trailer (revised create plan, step 6) */
.cr-media{display:grid;gap:8px}
.cr-media-body{display:grid;gap:8px;margin-top:8px}
.cr-media audio{width:100%;max-width:360px}
.cr-trailer{width:100%;max-width:420px;aspect-ratio:16/9;background:#000;border-radius:8px}
.cr-sound{display:grid;gap:6px;padding:8px 0;border-top:1px dashed var(--line-2,#3A2A63)}
.cr-sound p{margin:0;font-size:14px}
/* Review (revised create plan, step 7) */
.cr-review-note{margin:4px 0;padding:10px 12px;background:var(--bg-2,#24164A);box-shadow:inset 0 0 0 2px var(--accent,#FFE14D);font-size:14px;line-height:20px}
.cr-review-wait{color:var(--accent,#FFE14D)}
/* Building (13 Oct 2026): what's happening and a clock, a bar that keeps moving, and the six steps. While it builds the
   box shows two lines of the idea, so the page keeps its height (the cards below stay on screen) */
.cr-box.is-building .cr-ta{min-height:0;height:62px;resize:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.cr-build{display:grid;gap:8px;flex-basis:100%;min-width:0}
.cr-build-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.cr-build-top b{flex:1 1 220px;min-width:0}
.cr-clock{font-family:var(--font-num,ui-monospace,monospace);font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-bar--live{display:block;flex:none;width:100%;height:12px;overflow:hidden;position:relative}
.cr-bar--live i{width:0;transition:width .25s linear;position:relative;overflow:hidden}
.cr-bar--live i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:cr-shimmer 1.4s linear infinite}
@keyframes cr-shimmer{to{transform:translateX(100%)}}
.cr-steps{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0;padding:0;list-style:none}
.cr-step{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;font-size:12px;line-height:16px;color:var(--text-3,#8A7FAE);background:#0B0718;box-shadow:inset 0 0 0 1px var(--line-1)}
.cr-step span{font-size:10px}
.cr-step.is-done{color:var(--human)}
.cr-step.is-now{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cr-step.is-now span{animation:cr-blink 1s steps(2,start) infinite}
@keyframes cr-blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.cr-bar--live i::after,.cr-step.is-now span{animation:none}.cr-bar--live i{transition:none}}
.cr-box.is-building .cr-tools{display:none} /* while it builds, Stop is in the panel: the count and Create row steps aside */
.cr-status .cr-steps{margin:0;padding:0}
.cr-title-link{color:inherit;text-decoration:none}.cr-title-link:hover{text-decoration:underline}