/* Showcase (systems/showcase.js): the tour's progress strip, the act card and the cover screens. */
/* bottom-left, above the Camp & Survival button: the top centre belongs to the game's banner and autoplay chip */
#sc-hud{position:fixed;left:16px;bottom:calc(74px + env(safe-area-inset-bottom,0px));width:min(470px,calc(100vw - 32px));z-index:40;pointer-events:none;
  font-family:"Alegreya Sans",system-ui,sans-serif;color:var(--bone,var(--af-bone));text-shadow:0 1px 2px var(--af-void)}
#sc-hud .sc-top{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.02em}
#sc-hud .sc-badge{font-family:Cinzel,serif;font-weight:700;color:var(--ember,var(--af-ember-300));text-transform:uppercase;letter-spacing:.12em;font-size:12px}
#sc-hud .sc-count{color:var(--muted,var(--af-iron-300))}
#sc-hud .sc-clock{margin-left:auto;font-variant-numeric:tabular-nums}
#sc-hud .sc-stop{pointer-events:auto;font:inherit;font-size:12px;color:var(--bone,var(--af-bone));background:color-mix(in srgb, var(--af-void) 60%, transparent);border:1px solid color-mix(in srgb, var(--af-iron-300) 23%, transparent);border-radius:var(--af-cut-sm);corner-shape:bevel;padding:2px 9px;cursor:pointer}
#sc-hud .sc-stop:hover{border-color:var(--ember,var(--af-ember-300))}
#sc-hud .sc-bar{height:3px;margin:6px 0 8px;background:color-mix(in srgb, var(--af-iron-300) 17%, transparent);border-radius:2px;overflow:hidden}
#sc-hud .sc-bar i{display:block;height:100%;width:0;background:var(--ember,var(--af-ember-300));transition:width .4s linear}
#sc-hud .sc-card{background:color-mix(in srgb, var(--af-stone-950) 85%, transparent);border:1px solid color-mix(in srgb, var(--af-iron-300) 14%, transparent);border-left:3px solid var(--ember,var(--af-ember-300));border-radius:var(--af-cut-md);corner-shape:bevel;padding:10px 14px 9px}
#sc-hud h3{margin:0 0 3px;font-family:Cinzel,serif;font-weight:700;font-size:19px;color:var(--af-ember-100)}
#sc-hud .sc-blurb{margin:0;font-size:14.5px;line-height:1.35}
#sc-hud .sc-note:empty,#sc-hud .sc-jev:empty,#sc-hud .sc-next:empty{display:none}
#sc-hud .sc-note{margin:5px 0 0;font-size:13.5px;color:var(--ember,var(--af-ember-300))}
#sc-hud .sc-jev{margin:5px 0 0;font-size:13px;color:var(--af-moss-300)}
#sc-hud .sc-jev.sc-local{color:var(--muted,var(--af-iron-300))}
#sc-hud .sc-next{margin:4px 0 0;font-size:12.5px;color:var(--muted,var(--af-iron-300))}
/* the creator: over the top-left of the preview, clear of the class cards */
#sc-hud.sc-menu{bottom:auto;top:calc(26px + env(safe-area-inset-top,0px));left:46px;width:min(400px,calc(100vw - 32px))}
#sc-cover{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb, var(--af-stone-700) 94%, transparent),color-mix(in srgb, var(--af-void) 98%, transparent) 70%);color:var(--bone,var(--af-bone));font-family:"Alegreya Sans",system-ui,sans-serif}
#sc-cover.hidden{display:none}
#sc-cover .sc-cover-in{max-width:640px;text-align:center}
#sc-cover .sc-kicker{font-family:Cinzel,serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember,var(--af-ember-300))}
#sc-cover h1{margin:10px 0 12px;font-family:Cinzel,serif;font-weight:800;font-size:clamp(34px,7vw,58px);color:var(--af-ember-100);text-shadow:0 0 30px color-mix(in srgb, var(--af-ember-300) 27%, transparent)}
#sc-cover p{margin:0 0 10px;font-size:18px;line-height:1.45}
#sc-cover .sc-small{font-size:15px;color:var(--muted,var(--af-iron-300))}
#sc-cover .sc-cover-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
#sc-cover button{font:inherit;font-size:16px;padding:9px 18px;border-radius:var(--af-cut-sm);corner-shape:bevel;border:1px solid color-mix(in srgb, var(--af-ember-300) 53%, transparent);background:var(--af-stone-900);color:var(--af-ember-100);cursor:pointer}
#sc-cover button:hover{background:var(--af-stone-800)}
@media (max-width:560px){#sc-hud h3{font-size:16px}#sc-hud .sc-blurb{font-size:13px}}
