#story{z-index:30;background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb, var(--af-ember-800) 40%, transparent) 0,color-mix(in srgb, var(--af-stone-800) 93%, transparent) 48%,color-mix(in srgb, var(--af-void) 99%, transparent) 85%)}
body:has(#story:not(.hidden)) #hud,body:has(#start:not(.hidden)) #hud,body:has(#hero-creator:not(.hidden)) #hud{display:none}
body:has(#story:not(.hidden)) #touch,body:has(#start:not(.hidden)) #touch,body:has(#hero-creator:not(.hidden)) #touch{display:none}
#story:before{content:'';position:absolute;inset:8%;pointer-events:none;border:1px solid color-mix(in srgb, var(--af-ember-300) 27%, transparent);box-shadow:inset 0 0 95px color-mix(in srgb, var(--af-ember-400) 19%, transparent),0 0 120px color-mix(in srgb, var(--af-ember-400) 13%, transparent)}
.story-inner{position:relative;display:grid;justify-items:center;gap:14px;max-width:750px}.story-inner h1{font-size:clamp(60px,12vw,150px);line-height:1}.story-inner p{font-size:clamp(18px,2.5vw,25px)}.story-inner small{color:var(--af-ash)}
.eyebrow{display:block;font:700 13px Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--af-ember-300)}
#start{z-index:29;background:radial-gradient(ellipse at 30% 10%,color-mix(in srgb, var(--af-ember-800) 40%, transparent),color-mix(in srgb, var(--af-stone-950) 98%, transparent) 70%)}#start>h1{font-size:clamp(58px,10vw,120px)}#start>p:nth-of-type(2),#start>p:nth-of-type(3),#start>p:nth-of-type(4){font-size:13px;max-width:760px;margin:4px 0;color:var(--af-ash)}

/* ---- title roster: small 3D portraits of saved heroes (rendered once to images by iso/creator3d.js) */
#hero-roster{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px auto 14px;max-width:880px}
.roster-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;text-align:left;min-width:190px;padding:6px 16px 6px 6px;background:color-mix(in srgb, var(--af-stone-800) 81%, transparent);color:var(--af-bone);border-color:var(--af-gold-700)}
.roster-card[aria-pressed=true]{border-color:var(--af-ember-300);background:var(--af-ember-800);box-shadow:0 0 18px color-mix(in srgb, var(--af-ember-400) 25%, transparent)}
.roster-card small{display:block;font:14px 'Alegreya Sans',sans-serif;color:var(--af-ash);margin-top:2px}
.roster-card strong{display:block;font-size:17px}
.roster-portrait{display:block;width:64px;height:80px;border-radius:var(--af-cut-md);corner-shape:bevel;border:1px solid color-mix(in srgb, var(--af-iron-300) 15%, transparent);background:radial-gradient(circle at 50% 32%,var(--trim,var(--af-ember-300)) 0 9%,transparent 10%),radial-gradient(ellipse at 50% 95%,var(--tunic,var(--af-mana-700)) 0 42%,transparent 43%),var(--af-stone-800);object-fit:cover}
.roster-card:hover .roster-portrait,.roster-card:focus-visible .roster-portrait{border-color:var(--af-ink)}
.roster-card:hover small,.roster-card:focus-visible small{color:var(--af-ember-900)}
#selected-hero{color:var(--af-ember-300);margin:6px 0 0}

/* ---- the creator: the stage (the in-game hero, live) on the left, the choices on the right */
#hero-creator{z-index:31;background:radial-gradient(ellipse at 30% 30%,color-mix(in srgb, var(--af-stone-600) 44%, transparent),color-mix(in srgb, var(--af-stone-950) 98%, transparent) 68%);padding:16px}
.creator-shell{width:min(1380px,100%);height:min(880px,calc(100vh - 32px));display:grid;grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);gap:22px;text-align:left}
.cc-stage{position:relative;min-height:0;border-radius:var(--af-cut-md);corner-shape:bevel;overflow:hidden;border:1px solid color-mix(in srgb, var(--af-gold-500) 25%, transparent);background:var(--af-stone-900);box-shadow:0 30px 90px color-mix(in srgb, var(--af-void) 60%, transparent)}
#cc-gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#cc-gl:active{cursor:grabbing}
.cc-loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--af-stone-900);color:var(--af-bone);font:600 17px Cinzel,serif;letter-spacing:.02em;z-index:1}
.cc-loading[hidden]{display:none}
.cc-stage:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px color-mix(in srgb, var(--af-void) 67%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel}
.cc-plate{position:absolute;left:0;right:0;bottom:40px;display:grid;justify-items:center;gap:2px;pointer-events:none;text-shadow:0 2px 10px var(--af-void),0 0 2px var(--af-void)}
.cc-plate strong{font:800 clamp(24px,2.6vw,34px) Cinzel,serif;color:var(--af-ember-100);letter-spacing:.03em}
.cc-plate small{display:flex;align-items:center;gap:6px;font:500 15px 'Alegreya Sans',sans-serif;color:var(--af-bone)}
.cc-subicon{width:16px;height:16px;fill:var(--af-ember-300)}
.cc-tools{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:2}
#hero-creator .cc-tools button{margin:0;background:color-mix(in srgb, var(--af-stone-900) 80%, transparent);color:var(--af-bone);border-color:color-mix(in srgb, var(--af-ember-300) 40%, transparent);font-size:13px;padding:6px 11px;min-width:34px}
#hero-creator .cc-tools button:hover,#hero-creator .cc-tools button:focus-visible{background:var(--af-ember-300);color:var(--af-ink)}
#hero-creator .cc-turn{padding:4px 8px;display:grid;place-items:center}
.cc-turn svg{width:17px;height:17px;fill:currentColor}
#hero-creator .cc-hint{position:absolute;left:0;right:0;bottom:10px;margin:0 auto;text-align:center;font-size:13px;color:color-mix(in srgb, var(--af-iron-300) 80%, transparent);pointer-events:none;max-width:none}
.cc-hint span{display:none}
#hero-creator:not([data-input]) .cc-hint-mouse,#hero-creator[data-input=mouse] .cc-hint-mouse,#hero-creator[data-input=touch] .cc-hint-touch,#hero-creator[data-input=pad] .cc-hint-pad{display:inline}
.cc-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb, var(--af-gold-500) 38%, transparent),color-mix(in srgb, var(--af-iron-600) 33%, transparent) 34%,var(--af-stone-900) 73%)}
.cc-fallback[hidden]{display:none}
#portrait-head{width:86px;height:102px;background:var(--hero-skin,var(--af-bone));border-radius:43% 43% 46% 46%;box-shadow:0 -23px 0 -4px var(--hero-hair,var(--af-stone-600)),0 0 45px color-mix(in srgb, var(--af-ember-300) 50%, transparent);z-index:1}
#portrait-body{width:185px;height:220px;background:var(--hero-tunic,var(--af-mana-700));border:8px solid var(--hero-trim,var(--af-ember-300));border-radius:45% 45% 18% 18%;margin-top:-8px;z-index:2}
.creator-form{min-height:0;overflow-y:auto;padding:4px 10px 12px 2px;scrollbar-width:thin;scrollbar-color:var(--af-gold-700) transparent}
#hero-creator .creator-form h1{font-size:clamp(30px,3.2vw,44px);line-height:1.05;margin:4px 0 12px}
#hero-creator .eyebrow{margin:10px 0 6px;font-size:12px}
.cc-namerow{display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center}
.cc-namerow label{color:var(--af-bone);font-size:15px}
.cc-namerow input{width:100%;padding:8px 12px;background:var(--af-stone-900);border:1px solid var(--af-gold-600);color:var(--af-bone);font:19px 'Alegreya Sans',sans-serif;border-radius:var(--af-cut-sm);corner-shape:bevel;min-width:0}
.cc-namerow input:focus{outline:2px solid var(--af-ember-300);outline-offset:1px}
#hero-creator .hero-option{margin:0;padding:8px 12px;background:var(--af-iron-800);color:var(--af-bone);text-align:left;font-size:15px;border:1px solid color-mix(in srgb, var(--af-gold-600) 44%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel}
#hero-creator .hero-option:hover,#hero-creator .hero-option:focus-visible{background:var(--af-stone-700);color:var(--af-gold-300);border-color:var(--af-ember-300)}
#hero-creator .hero-option[aria-pressed=true],#hero-creator .hero-option[aria-checked=true]{background:var(--af-ember-800);color:var(--af-gold-300);border-color:var(--af-ember-300);box-shadow:0 0 16px color-mix(in srgb, var(--af-ember-400) 25%, transparent)}
#hero-creator .hero-option small{display:block;font:13px 'Alegreya Sans',sans-serif;color:var(--af-ash);margin-top:3px}
/* class cards */
#hero-creator .cc-classes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#hero-creator .cc-class{display:grid;gap:6px;align-content:start;padding:10px 11px;font-family:'Alegreya Sans',sans-serif;background:linear-gradient(var(--af-iron-800),var(--af-stone-850))}
#hero-creator .cc-class[aria-checked=true]{background:linear-gradient(var(--af-ember-800),var(--af-iron-900));box-shadow:0 0 0 1px var(--af-ember-300),0 0 24px color-mix(in srgb, var(--af-ember-400) 25%, transparent)}
.cc-class-h{display:flex;align-items:center;gap:7px}
.cc-class-h strong{font:700 17px Cinzel,serif;color:var(--af-ember-100)}
.cc-cicon{width:18px;height:18px;fill:var(--af-ember-300);flex:none}
#hero-creator .cc-line{margin:0;font-size:13px;line-height:1.25;color:var(--af-ash);min-height:2.5em}
.cc-stats{display:grid;gap:3px}
.cc-stat{display:grid;grid-template-columns:48px 1fr 34px;align-items:center;gap:6px;font-size:12px;color:var(--af-ash)}
.cc-stat i{font-style:normal}
.cc-stat b{position:relative;height:6px;border-radius:3px;background:color-mix(in srgb, var(--af-void) 60%, transparent);overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--af-iron-300) 10%, transparent)}
.cc-stat b:after{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--k) * 100%);background:linear-gradient(90deg,var(--af-gold-700),var(--af-ember-300));border-radius:var(--af-cut-sm);corner-shape:bevel}
.cc-stat:nth-child(1) b:after{background:linear-gradient(90deg,var(--af-blood-700),var(--af-blood-400))}
.cc-stat:nth-child(2) b:after{background:linear-gradient(90deg,var(--af-swim-700),var(--af-mana-300))}
.cc-stat:nth-child(3) b:after{background:linear-gradient(90deg,var(--af-moss-700),var(--af-moss-300))}
.cc-stat em{font-style:normal;text-align:right;color:var(--af-bone)}
.cc-abil{display:flex;align-items:center;gap:8px;margin-top:2px;padding-top:7px;border-top:1px solid color-mix(in srgb, var(--af-iron-300) 11%, transparent)}
.cc-aicon{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--af-stone-900);border:1px solid color-mix(in srgb, var(--af-ember-300) 53%, transparent);fill:var(--af-ember-300);flex:none}
.cc-abil b{display:block;font:700 13px Cinzel,serif;color:var(--af-gold-300)}
#hero-creator .cc-abil small{margin:0;font-size:12px;color:var(--af-iron-300)}
#hero-creator .cc-class:hover .cc-line,#hero-creator .cc-class:focus-visible .cc-line{color:var(--af-bone)}
/* appearance */
#hero-creator .cc-premade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0 0 9px}
#hero-creator .cc-premade-card{font:600 13px 'Alegreya Sans',sans-serif;padding:5px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
#hero-creator .cc-presets{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
#hero-creator .cc-preset{display:flex;align-items:center;gap:7px;font:600 14px Cinzel,serif;padding:6px 11px}
.cc-dots{display:inline-flex}
.cc-dots i{width:12px;height:12px;border-radius:50%;background:var(--c);border:1px solid color-mix(in srgb, var(--af-void) 53%, transparent);margin-right:-3px;display:block}
.cc-die{font-style:normal;font-size:16px;line-height:1}
.cc-rows{display:grid;gap:5px}
.cc-row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:8px;min-height:30px}
.cc-label{font-size:14px;color:var(--af-bone);line-height:1.1}
.cc-label em{display:block;font-style:normal;font-size:12px;color:var(--af-iron-300)}
.cc-opts{display:flex;flex-wrap:wrap;gap:6px 5px;align-items:center}
#hero-creator .cc-sw{width:24px;height:24px;margin:0;padding:0;border-radius:50%;background:var(--c);border:2px solid var(--af-stone-900);box-shadow:0 0 0 1px color-mix(in srgb, var(--af-iron-300) 26%, transparent);cursor:pointer}
#hero-creator .cc-sw:hover,#hero-creator .cc-sw:focus-visible{background:var(--c);box-shadow:0 0 0 2px var(--af-stone-900),0 0 0 3px var(--af-gold-300);outline:none}
#hero-creator .cc-sw.cc-face{width:38px;height:38px;background-color:var(--c);background-size:175%;background-position:50% 44%;background-repeat:no-repeat}
#hero-creator .cc-sw.cc-face:hover,#hero-creator .cc-sw.cc-face:focus-visible{background-color:var(--c);background-size:175%;background-position:50% 44%;background-repeat:no-repeat}
#hero-creator .cc-sw[aria-checked=true]{box-shadow:0 0 0 2px var(--af-stone-900),0 0 0 4px var(--af-ember-300),0 0 12px color-mix(in srgb, var(--af-ember-300) 60%, transparent);transform:scale(1.08)}
#hero-creator .cc-chip{margin:0;padding:3px 8px;font:500 13.5px 'Alegreya Sans',sans-serif;color:var(--af-bone);background:var(--af-iron-800);border:1px solid color-mix(in srgb, var(--af-gold-600) 38%, transparent);border-radius:var(--af-cut-sm);corner-shape:bevel}
#hero-creator .cc-chip:hover,#hero-creator .cc-chip:focus-visible{background:var(--af-stone-700);color:var(--af-gold-300);border-color:var(--af-ember-300);outline:none}
#hero-creator .cc-chip[aria-checked=true]{background:var(--af-ember-800);color:var(--af-gold-300);border-color:var(--af-ember-300)}
#hero-creator [role=radio]:focus-visible,#hero-creator .hero-option:focus-visible{outline:2px solid var(--af-ember-100);outline-offset:2px}
#hero-creator #hero-skip{margin:10px 0 8px;display:block;padding:6px 12px}
#hero-skip small{max-width:none}
.creator-actions{display:flex;gap:8px;flex-wrap:wrap}.creator-actions button{margin:0}
#hero-create{font-size:18px;padding:12px 30px;background:linear-gradient(var(--af-ember-800),var(--af-stone-800));box-shadow:0 0 22px color-mix(in srgb, var(--af-ember-400) 19%, transparent)}
#hero-create:hover,#hero-create:focus-visible{background:var(--af-ember-300)}
/* phones: the stage sticks to the top while the choices scroll under it */
@media(max-width:820px){
  #hero-creator{padding:0;display:block}
  .creator-shell{display:block;width:100%;height:auto}
  .cc-stage{position:sticky;top:0;z-index:3;height:max(250px,42vh);border-radius:0;border-width:0 0 1px}
  .cc-stage:after{border-radius:0}
  .cc-plate{bottom:30px}.cc-plate strong{font-size:24px}
  #hero-creator .cc-hint{bottom:6px;font-size:12px}
  .cc-tools{top:8px;right:8px;flex-direction:column}
  .cc-tl{display:none}
  #hero-creator .cc-tools button{min-width:38px;min-height:34px;padding:4px 8px}
  .creator-form{overflow:visible;padding:10px 16px 28px}
  #hero-creator .creator-form h1{font-size:28px;margin:2px 0 8px}
  #hero-creator .cc-classes{grid-template-columns:1fr}
  #hero-creator .cc-class{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:12px}
  .cc-class-h,#hero-creator .cc-line,.cc-abil{grid-column:1}
  .cc-stats{grid-column:2;grid-row:1 / span 3;align-self:center}
  #hero-creator .cc-line{min-height:0}
  .cc-abil{border-top:0;padding-top:0}
  .cc-row{grid-template-columns:1fr;gap:4px}
  .cc-label em{display:inline;margin-left:6px}
  #hero-creator .cc-sw{width:28px;height:28px}
}
body:has(#game-settings:not(.hidden)) #hud,body:has(#game-settings:not(.hidden)) #touch{display:none}
#game-settings{z-index:35;justify-content:flex-start;background:radial-gradient(ellipse at 70% 10%,color-mix(in srgb, var(--af-ember-800) 38%, transparent),color-mix(in srgb, var(--af-stone-950) 97%, transparent) 70%)}
.game-settings-shell{width:min(790px,95vw);text-align:left;margin:0 auto;padding:16px 0}
#game-settings h1{font-size:clamp(38px,5vw,62px);line-height:1.1;margin:6px 0 18px}
#game-settings .gp-status{font:700 21px Cinzel,serif;color:var(--ember);margin:8px 0}
#game-settings .gp-status[data-connected=true]{color:var(--af-moss-100)}
#game-settings .gp-help{font-size:16px;line-height:1.4;color:var(--af-ash);max-width:680px;margin:0 0 12px}
#game-settings .gp-devices{display:flex;flex-wrap:wrap;gap:8px}
#game-settings .gp-devices button,#game-settings .gp-reset,#game-settings .gp-adjust button{font-size:14px;padding:6px 11px;margin:0;background:var(--af-stone-700);color:var(--bone);border:1px solid color-mix(in srgb, var(--af-gold-600) 47%, transparent)}
#game-settings .gp-devices button[aria-pressed=true]{border-color:var(--ember);color:var(--ember)}
#game-settings .gp-live{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:color-mix(in srgb, var(--af-stone-800) 91%, transparent);border:1px solid color-mix(in srgb, var(--af-gold-600) 36%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:14px;margin:14px 0}
#game-settings .gp-live>div:not(.gp-button){display:grid;gap:5px;justify-items:center;font-size:14px}
#game-settings .gp-stick{width:62px;height:62px;border:1px solid color-mix(in srgb, var(--af-ash) 53%, transparent);border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb, var(--af-gold-500) 4%, transparent)}
#game-settings .gp-stick i{width:16px;height:16px;border-radius:50%;background:var(--ember)}
#game-settings .gp-button{color:var(--ember);font-size:17px}
#game-settings .gp-tuning{display:grid;gap:5px}
#game-settings .gp-field{display:grid;grid-template-columns:1fr minmax(220px,300px);gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid color-mix(in srgb, var(--af-ember-300) 17%, transparent)}
#game-settings .gp-field b,#game-settings .gp-field small{display:block}
#game-settings .gp-field small{font-size:13px;color:var(--af-ash)}
#game-settings .gp-adjust{display:flex;align-items:center;gap:7px}
#game-settings .gp-adjust input{flex:1;min-width:55px;accent-color:var(--ember)}
#game-settings .gp-adjust output{min-width:42px;text-align:right;color:var(--ember)}
#game-settings .gp-adjust button{min-width:33px;padding:5px}
#game-settings .gp-bindings{display:grid;grid-template-columns:repeat(2,1fr);gap:3px 20px;margin:14px 0}
#game-settings .gp-bindings>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid color-mix(in srgb, var(--af-ember-300) 17%, transparent);padding:5px 0;font-size:15px}
#game-settings .gp-bindings b{color:var(--ember)}
#game-settings .game-settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
#game-settings .game-settings-actions button{margin:0}
@media(max-width:640px){#game-settings .gp-field{grid-template-columns:1fr}#game-settings .gp-bindings{grid-template-columns:1fr}}
/* races (body-core.js): the body sliders under the Race row */
.cc-body{align-items:start}
.cc-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;align-items:center}
.cc-slider{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:6px;font-size:13px;color:var(--af-bone)}
.cc-slider input{width:100%;accent-color:var(--af-ember-300);margin:0}
.cc-slider small{font-size:11.5px;color:var(--af-iron-300);text-align:right;white-space:nowrap}
#hero-creator .cc-typical{justify-self:start;font-size:12.5px}
#hero-creator .cc-sw[hidden]{display:none}
@media (max-width:760px){.cc-sliders{grid-template-columns:1fr}}
/* outfits (outfit-core.js): a sub-heading over the outfit rows */
#hero-creator .cc-subhead{margin:14px 0 2px;font-family:Cinzel,serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--af-ash)}