.beta-header-actions { display:flex; align-items:center; gap:14px; }
.beta-header-actions > span { padding:7px 10px; color:#11100f; background:#f3c64e; font-size:.68rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; transform:skew(-6deg); }
.beta-header-actions .button { min-height:auto; padding:10px 15px; font-size:.75rem; }
.card-beta { min-height:100vh; color:#f8ecd0; background:#0d0c0b; }
.card-beta__hero { position:relative; overflow:hidden; padding:clamp(44px,6vw,88px) 0 clamp(32px,4vw,62px); border-bottom:1px solid #43372d; background:radial-gradient(circle at 82% 40%,rgba(241,90,0,.2),transparent 25%),linear-gradient(125deg,#11100f 0 62%,#291307); }
.card-beta__hero::after { position:absolute; right:-5%; bottom:-42%; width:38vw; aspect-ratio:1; border:clamp(28px,4vw,68px) solid rgba(241,90,0,.08); border-radius:50%; content:""; }
.card-beta__hero .container { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:end; }
.card-beta__hero h1 { max-width:850px; margin:10px 0 14px; color:#fff4d9; font-size:clamp(3.4rem,7vw,7.6rem); line-height:.84; text-transform:uppercase; }
.card-beta__hero p:not(.eyebrow) { max-width:720px; margin:0; color:#d8cdb8; font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.55; }
.card-beta__promise { display:grid; min-width:210px; gap:6px; padding:20px; border:1px solid #5d493b; background:rgba(8,8,8,.72); box-shadow:10px 10px 0 rgba(241,90,0,.15); }
.card-beta__promise strong { color:#ff6a00; font-size:2rem; font-weight:950; }
.card-beta__promise span { color:#f8ecd0; font-size:.78rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.card-beta__workspace { padding:clamp(28px,4vw,58px) 0 80px; background:linear-gradient(180deg,#151210,#0d0c0b 32%); }
.card-beta__progress { position:relative; display:grid; grid-template-columns:repeat(4,1fr); max-width:920px; margin:0 auto 34px; }
.card-beta__progress-track { position:absolute; top:21px; left:12.5%; right:12.5%; height:3px; overflow:hidden; background:#3b342e; }
.card-beta__progress-track i { display:block; width:0; height:100%; background:#f15a00; transition:width .35s ease; }
.card-beta__progress button { position:relative; z-index:1; display:grid; justify-items:center; gap:7px; border:0; color:#8f877d; background:transparent; font:inherit; cursor:pointer; }
.card-beta__progress button:disabled { cursor:not-allowed; opacity:.68; }
.card-beta__progress button span { display:grid; width:44px; aspect-ratio:1; place-items:center; border:2px solid #4b423a; color:#a49b90; background:#151210; font-size:.74rem; font-weight:950; transition:.25s ease; }
.card-beta__progress button strong { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.card-beta__progress button.is-complete span { border-color:#f15a00; color:#0d0c0b; background:#f15a00; }
.card-beta__progress button[aria-current="step"] { color:#fff4d9; }
.card-beta__progress button[aria-current="step"] span { border-color:#ff6a00; color:#fff4d9; box-shadow:0 0 0 5px rgba(241,90,0,.14),0 0 24px rgba(241,90,0,.18); }
.card-beta__draft-notice { max-width:920px; margin:-12px auto 26px; padding:11px 14px; border-left:4px solid #14d7d6; color:#d8ffff; background:rgba(20,215,214,.08); font-size:.86rem; }
.card-beta__layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.88fr); gap:clamp(28px,4vw,68px); align-items:start; }
.card-beta__form { min-width:0; padding:clamp(24px,3.5vw,48px); border:1px solid #4b4037; background:#e8d6b7; color:#171411; box-shadow:12px 12px 0 #2e160b; }
.card-beta__step { animation:beta-step-in .32s cubic-bezier(.2,.8,.2,1); }
.card-beta__step[hidden] { display:none; }
.card-beta__step h2 { max-width:680px; margin:8px 0 12px; color:#11100f; font-size:clamp(2.4rem,4.5vw,5rem); line-height:.9; text-transform:uppercase; }
.card-beta__step-copy { max-width:680px; margin:0 0 30px; color:#5c5146; font-size:1.04rem; line-height:1.55; }
.card-beta__form .form-field { margin-bottom:20px; }
.card-beta__form .form-field label,.card-beta__controller legend { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:#171411; font-size:.76rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.card-beta__form .form-field label span { color:#75695d; font-weight:700; }
.card-beta__form input:not([type="checkbox"]):not([type="radio"]),.card-beta__form select { width:100%; min-height:52px; border:2px solid #9e8e7b; color:#171411; background:#fffaf0; }
.card-beta__form input:focus,.card-beta__form select:focus { border-color:#f15a00; outline:3px solid rgba(241,90,0,.18); outline-offset:0; }
.card-beta__form small { color:#6e6256; }
.card-beta__game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-height:390px; overflow:auto; padding:3px 6px 12px 3px; scrollbar-color:#f15a00 #e2d4ba; }
.card-beta__game-grid button { display:grid; min-height:90px; align-content:end; padding:14px; border:2px solid #a18f7b; color:#171411; background:linear-gradient(145deg,#fffaf0,#eadabc); text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.card-beta__game-grid button:hover,.card-beta__game-grid button:focus-visible { border-color:#f15a00; outline:0; transform:translateY(-2px); box-shadow:5px 5px 0 rgba(241,90,0,.2); }
.card-beta__game-grid button[aria-selected="true"] { border-color:#11100f; color:#fff4d9; background:#11100f; box-shadow:inset 5px 0 #f15a00; }
.card-beta__game-grid button strong { font-size:1.08rem; line-height:1.05; }
.card-beta__empty { grid-column:1/-1; padding:26px; border:1px dashed #a18f7b; color:#6e6256; text-align:center; }
.card-beta__selection { margin:24px 0; padding:22px; border:2px solid #1b1815; background:#e9d9bd; }
.card-beta__selection-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:18px; }
.card-beta__selection-heading h3 { margin:4px 0 0; font-size:1.7rem; text-transform:uppercase; }
.card-beta__selection-heading .text-link { border:0; font:inherit; cursor:pointer; }
.card-beta__character-choice { margin:-5px 0 13px; padding:10px 12px; border-left:5px solid #f15a00; color:#171411; background:#f7e9cf; font-size:.78rem; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }
.card-beta__character-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-height:400px; overflow:auto; padding:3px 5px 12px 3px; }
.card-beta__character-grid button { position:relative; display:grid; aspect-ratio:.82; overflow:hidden; align-content:end; padding:0; border:2px solid #9e8e7b; color:#fff; background:#151210; cursor:pointer; }
.card-beta__character-grid img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 16%; opacity:.78; transition:transform .2s ease,opacity .2s ease; }
.card-beta__character-grid span { position:relative; z-index:1; padding:26px 6px 7px; overflow:hidden; background:linear-gradient(transparent,rgba(0,0,0,.92)); font-size:.7rem; font-weight:900; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.card-beta__character-grid button:hover img { opacity:1; transform:scale(1.05); }
.card-beta__character-grid button[aria-selected="true"] { z-index:1; border-color:#f15a00; outline:3px solid #11100f; outline-offset:-7px; box-shadow:0 0 0 3px #f15a00,0 8px 18px rgba(0,0,0,.3); }
.card-beta__character-grid button[aria-selected="true"] img { opacity:1; }
.card-beta__character-grid button[aria-selected="true"] span { color:#11100f; background:#f15a00; }
.card-beta__character-grid button[aria-selected="true"]::after { position:absolute; top:6px; right:6px; z-index:2; display:grid; width:23px; aspect-ratio:1; place-items:center; border-radius:50%; color:#111; background:#f15a00; content:"✓"; font-weight:950; }
.card-beta__rank { margin-top:20px; }
.card-beta__controller { margin:26px 0 0; padding:0; border:0; }
.card-beta__controller > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.card-beta__controller label { position:relative; display:grid; min-height:78px; place-items:center; padding:12px 6px; border:2px solid #9e8e7b; color:#3a322b; background:#fffaf0; font-size:.72rem; font-weight:900; text-align:center; cursor:pointer; }
.card-beta__controller input { position:absolute; opacity:0; }
.card-beta__controller label:has(input:checked) { border-color:#11100f; color:#fff4d9; background:#11100f; box-shadow:inset 0 -4px #f15a00; }
.card-beta__controller b { display:block; margin-bottom:6px; color:#f15a00; font-size:1.45rem; line-height:1; }
.card-beta__style-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.card-beta__style-grid button { display:grid; gap:7px; padding:12px; border:2px solid #9e8e7b; color:#171411; background:#fffaf0; text-align:left; cursor:pointer; }
.card-beta__style-grid button.is-selected { border-color:#11100f; box-shadow:inset 0 -5px #f15a00,6px 6px 0 rgba(17,16,15,.14); transform:translateY(-2px); }
.card-beta__style-grid strong { font-size:1.1rem; text-transform:uppercase; }
.card-beta__style-swatch { display:grid; width:100%; aspect-ratio:1.8; place-items:center; overflow:hidden; border:1px solid #332c27; color:#fff4d9; background:#10100f; font-size:2.5rem; }
.card-beta__style-swatch.is-sober { background:linear-gradient(135deg,#121212 0 64%,#14d7d6 65% 70%,#272727 71%); }
.card-beta__style-swatch.is-energy { background:radial-gradient(circle at 70% 45%,#ff9f1c,transparent 23%),repeating-linear-gradient(125deg,#21100a 0 18px,#f15a00 19px 22px,#090909 23px 44px); }
.card-beta__style-swatch.is-random { background:conic-gradient(from 40deg,#f15a00,#9b6cff,#14d7d6,#111,#f15a00); }
.card-beta__advanced { margin-top:24px; border:2px solid #191613; background:#e9d9bd; }
.card-beta__advanced summary { padding:17px 20px; color:#171411; font-weight:950; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.card-beta__advanced > div { padding:4px 20px 22px; }
.card-beta__color { display:flex; min-height:52px; gap:12px; align-items:center; padding:6px; border:2px solid #9e8e7b; background:#fffaf0; }
.card-beta__color input { width:58px!important; min-height:36px!important; padding:0; border:0!important; }
.card-beta__color output { font-weight:900; }
.card-beta__toggle { display:flex; gap:12px; align-items:flex-start; margin-top:12px; padding:14px; border:1px solid #aa9985; background:#fffaf0; cursor:pointer; }
.card-beta__toggle input { width:20px; height:20px; accent-color:#f15a00; }
.card-beta__toggle span { display:grid; gap:3px; }
.card-beta__toggle small { line-height:1.35; }
.card-beta__summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 26px; }
.card-beta__summary div { padding:15px; border:1px solid #927f6c; background:#f3e5ca; }
.card-beta__summary dt { color:#75695d; font-size:.67rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.card-beta__summary dd { margin:5px 0 0; font-size:1.2rem; font-weight:950; }
.card-beta__activation-note { display:grid; gap:8px; margin-top:22px; padding:18px; border-left:5px solid #f15a00; color:#fff4d9; background:#171411; }
.card-beta__activation-note strong { color:#f15a00; text-transform:uppercase; }
.card-beta__activation-note span { font-weight:750; }
.card-beta__error { margin:18px 0 0; }
.card-beta__actions { position:sticky; bottom:0; z-index:8; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin:32px -18px -18px; padding:16px 18px; border-top:1px solid #927f6c; background:rgba(232,214,183,.96); backdrop-filter:blur(10px); }
.card-beta__actions > span { color:#75695d; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.card-beta__actions [data-beta-back] { --button-secondary-color:#171411; --button-secondary-border:#f15a00; background:rgba(255,250,240,.36); }
.card-beta__actions [data-beta-back]:hover,.card-beta__actions [data-beta-back]:focus-visible { color:#11100f; background:#f15a00; }
.card-beta__preview { position:sticky; top:96px; min-width:0; padding:20px; border:1px solid #4b4037; background:linear-gradient(145deg,#181512,#0c0b0a); box-shadow:12px 12px 0 rgba(241,90,0,.12); }
.card-beta__preview-heading { display:flex; min-height:70px; justify-content:space-between; gap:20px; align-items:start; margin-bottom:4px; }
.card-beta__preview-heading > div { flex:0 0 42%; }
.card-beta__preview-heading strong { display:block; font-size:1.08rem; }
.card-beta__preview-heading > span { display:-webkit-box; flex:1; height:2.8em; overflow:hidden; color:#f15a00; font-size:.68rem; font-weight:900; letter-spacing:.06em; line-height:1.4; text-align:right; text-transform:uppercase; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.card-beta__preview .community-player-card { margin-top:16px; }
.card-beta__preview > p { margin:18px 0 0; color:#9f968c; font-size:.8rem; text-align:center; }
.card-beta__preview-fab,.card-beta__preview-dialog { display:none; }
.card-beta__success { padding:70px 0 100px; color:#f8ecd0; text-align:center; background:radial-gradient(circle at 50% 20%,rgba(241,90,0,.2),transparent 30%),#0d0c0b; }
.card-beta__success .container { max-width:980px; }
.card-beta__success-mark { display:grid; width:70px; aspect-ratio:1; margin:0 auto 18px; place-items:center; color:#111; background:#f15a00; font-size:2rem; font-weight:950; transform:rotate(-4deg); }
.card-beta__success h2 { margin:10px 0 14px; color:#fff4d9; font-size:clamp(3rem,6vw,6rem); line-height:.9; text-transform:uppercase; }
.card-beta__success > .container > p:not(.eyebrow):not(.community-mail-warning) { max-width:700px; margin:0 auto 28px; color:#d8cdb8; font-size:1.1rem; line-height:1.6; }
.card-beta__success [data-beta-success-preview] { max-width:760px; margin:28px auto; }
.card-beta__success .button-row { justify-content:center; }
@keyframes beta-step-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .card-beta__step { animation:none; } .card-beta__progress-track i { transition:none; } }
@media (max-width:1050px) {
  .card-beta__layout { grid-template-columns:minmax(0,1fr) 360px; gap:24px; }
  .card-beta__character-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .card-beta__controller > div { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .beta-header-actions > span { display:none; }
  .beta-header-actions .button { padding:9px 11px; }
  .card-beta__hero .container { grid-template-columns:1fr; }
  .card-beta__promise { grid-template-columns:auto 1fr; min-width:0; align-items:center; }
  .card-beta__promise strong { grid-row:1/3; }
  .card-beta__layout { display:block; }
  .card-beta__preview { display:none; }
  .card-beta__preview-fab { position:fixed; right:14px; bottom:14px; z-index:30; display:flex; gap:10px; align-items:center; padding:13px 16px; border:1px solid #ff9b61; color:#111; background:#f15a00; box-shadow:0 8px 28px rgba(0,0,0,.45); font:900 .76rem/1 inherit; letter-spacing:.04em; text-transform:uppercase; }
  .card-beta__preview-dialog[open] { position:fixed; inset:auto 8px 8px; z-index:50; display:block; width:calc(100% - 16px); max-width:720px; max-height:calc(100dvh - 16px); overflow:auto; padding:36px 12px 16px; border:1px solid #5d493b; color:#f8ecd0; background:#11100f; box-shadow:0 0 0 100vmax rgba(0,0,0,.72); }
  .card-beta__preview-dialog::backdrop { background:rgba(0,0,0,.7); }
  .card-beta__preview-dialog > button { position:absolute; top:8px; right:8px; display:grid; width:34px; aspect-ratio:1; place-items:center; border:1px solid #6c5c4f; color:#fff4d9; background:#1d1915; font-size:1.4rem; cursor:pointer; }
  .card-beta__preview-dialog .community-player-card { margin-top:12px; }
  .card-beta__actions { padding-right:125px; }
}
@media (max-width:560px) {
  .card-beta__workspace { padding-bottom:150px; }
  .card-beta__hero { padding-top:34px; }
  .card-beta__hero h1 { font-size:3.25rem; }
  .card-beta__promise { padding:14px; }
  .card-beta__progress { margin-bottom:24px; }
  .card-beta__progress button strong { display:none; }
  .card-beta__progress-track { left:12%; right:12%; }
  .card-beta__form { margin:0 -4px; padding:22px 16px; box-shadow:6px 6px 0 #2e160b; }
  .card-beta__step h2 { font-size:2.65rem; }
  .card-beta__game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:360px; }
  .card-beta__character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-height:460px; }
  .card-beta__character-grid button { width:100%; height:140px; min-height:140px; aspect-ratio:auto; }
  .card-beta__character-grid span { padding:34px 8px 9px; font-size:.76rem; }
  .card-beta__selection { padding:15px; }
  .card-beta__selection-heading { align-items:start; }
  .card-beta__controller > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card-beta__style-grid { grid-template-columns:1fr; }
  .card-beta__style-grid button { grid-template-columns:92px 1fr; align-items:center; }
  .card-beta__style-grid small { grid-column:2; }
  .card-beta__style-swatch { grid-row:1/3; aspect-ratio:1.35; }
  .card-beta__summary { grid-template-columns:1fr; }
  .card-beta__actions { position:static; grid-template-columns:auto 1fr; margin-top:32px; padding-right:16px; }
  .card-beta__actions > span { display:none; }
  .card-beta__actions [data-beta-next],.card-beta__actions [data-beta-submit] { justify-self:end; }
  .card-beta__preview-fab { bottom:14px; }
}