/* Start page, world and character choice, settings and the loading screen, on the shared design system
   (ui/design.css tokens; the same elements as Online: tools/design-compare.html). Flat by default; the Hand-drawn
   style (body.hud-hand, ui/hud-hand.js) draws the cards, buttons and rows as inked paper with wobbled frames, never
   filtering text. The brand is a text wordmark until the designed logo replaces it.
   Class names are the menu's own (ui/start-menu.js); only presentation lives here. */
#startMenu{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;
  background:radial-gradient(120% 90% at 50% 0%,var(--ui-surface) 0%,var(--ui-bg) 62%);color:var(--ui-ink);font:400 var(--ui-t-m)/1.45 var(--ui-font);letter-spacing:.01em;transition:opacity .45s ease}
#startMenu.leaving{opacity:0;pointer-events:none}
#startMenu *{box-sizing:border-box;font-family:inherit}
#startMenu .sm-card{position:relative;isolation:isolate;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r4);box-shadow:var(--ui-shadow);padding:32px;width:100%;max-width:468px;margin:auto}
#startMenu .sm-card.wide{max-width:672px}
/* the brand: a wordmark in the display face (a slot for the designed logo) */
#startMenu .sm-wordmark{margin:0 0 8px;display:flex;flex-direction:column;align-items:center;text-align:center;font:400 34px/1.02 var(--ui-font-display);letter-spacing:.06em;text-transform:uppercase;font-variation-settings:var(--ui-hand-title,normal)}
#startMenu .sm-wordmark small{font:400 var(--ui-t-m)/1.4 var(--ui-font-body);letter-spacing:.3em;color:var(--ui-mute);text-transform:lowercase;margin:2px 0}
#startMenu .sm-wordmark-loading{margin-bottom:22px;font-size:28px}
#startMenu h2{font:400 var(--ui-t-xl)/1.15 var(--ui-font-display);font-variation-settings:var(--ui-hand-title,normal);margin:0 0 4px;text-align:center;letter-spacing:.01em}
#startMenu .sm-sub{color:var(--ui-ink-2);text-align:center;margin:0 0 22px;font-family:var(--ui-font-body);font-variation-settings:var(--ui-hand-text,normal)}
#startMenu .sm-label{display:block;font:600 var(--ui-t-s)/1.3 var(--ui-font-body);color:var(--ui-ink-2);margin:0 0 5px}
#startMenu .sm-muted{color:var(--ui-mute);font:400 var(--ui-t-s)/1.4 var(--ui-font-body)}
#startMenu .sm-faint{color:var(--ui-mute);font:400 var(--ui-t-xs)/1.4 var(--ui-font-body)}
#startMenu .sm-stack{display:flex;flex-direction:column;gap:14px}
#startMenu button{all:unset;box-sizing:border-box;cursor:pointer;font-family:inherit}
#startMenu :focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px;border-radius:var(--ui-r2)}
/* actions: primary (Continue, Start new world), secondary (ghost), quiet link */
#startMenu .sm-btn{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;padding:0 18px;border-radius:var(--ui-r2);
  background:var(--ui-sea);color:var(--ui-sea-ink);border:1px solid var(--ui-sea);font:700 var(--ui-t-m)/1.2 var(--ui-font);transition:filter .15s,transform .1s}
#startMenu .sm-btn:hover{filter:brightness(1.08)}
#startMenu .sm-btn:active{transform:translateY(1px)}
#startMenu .sm-btn.ghost{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line-strong);font-weight:600}
#startMenu .sm-btn.ghost:hover{background:var(--ui-tint);filter:none}
#startMenu .sm-btn[disabled],#startMenu .sm-btn[aria-disabled=true]{opacity:.5;pointer-events:none}
#startMenu .sm-btn[aria-busy=true]::after{content:'';width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sm-spin .8s linear infinite}
#startMenu .sm-link{color:var(--ui-ink-2);font:600 var(--ui-t-s) var(--ui-font-body);text-align:center;display:block;margin:16px auto 0;text-decoration:underline;text-underline-offset:4px}
#startMenu .sm-link:hover{color:var(--ui-ink)}
/* menu rows (Settings, Quit, Online links) */
#startMenu .sm-menu{display:flex;flex-direction:column;gap:2px;padding:4px 0}
#startMenu .sm-item{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 14px;border-radius:var(--ui-r2);color:var(--ui-ink);text-align:left;font:500 var(--ui-t-m) var(--ui-font-body)}
#startMenu .sm-item:hover{background:var(--ui-tint)}
#startMenu .sm-item svg{flex:none;color:var(--ui-ink-2)}
#startMenu .sm-rule{height:1px;background:var(--ui-line);margin:10px 0}
#startMenu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* worlds and characters */
#startMenu .sm-worlds{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;max-height:min(42vh,340px);overflow:auto;padding:2px 6px 6px 2px;scrollbar-width:thin}
#startMenu .sm-world{position:relative;isolation:isolate;display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 14px;border:1px solid var(--ui-line);border-radius:var(--ui-r3);background:var(--ui-surface);transition:background .15s,border-color .15s}
#startMenu .sm-world:hover{background:var(--ui-tint)}
#startMenu .sm-world[aria-pressed=true]{border-color:var(--ui-sea);background:var(--ui-tint);box-shadow:0 0 0 2px var(--ui-sea)}
#startMenu .sm-world svg{margin-top:3px;color:var(--ui-ink-2)}
#startMenu .sm-world b{font:600 var(--ui-t-m)/1.3 var(--ui-font);display:block}
/* the admin row and other checkboxes */
#startMenu .sm-check{position:relative;isolation:isolate;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--ui-r3);background:var(--ui-raised);border:1px solid var(--ui-line);margin:16px 0 0;cursor:pointer;font:500 var(--ui-t-s)/1.4 var(--ui-font-body)}
#startMenu input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:1px 0 0;flex:none;border-radius:5px;border:1.5px solid var(--ui-line-strong);background:var(--ui-surface);display:grid;place-items:center;cursor:pointer}
#startMenu input[type=checkbox]:checked{background:var(--ui-sea);border-color:var(--ui-sea)}
#startMenu input[type=checkbox]:checked::after{content:'';width:5px;height:9px;margin-top:-2px;border:solid var(--ui-sea-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* fields */
#startMenu input[type=text],#startMenu input[type=password],#startMenu input[type=email],#startMenu select{width:100%;min-height:42px;padding:8px 12px;border:1px solid var(--ui-line-strong);border-radius:var(--ui-r2);font:400 var(--ui-t-m) var(--ui-font-body);background:var(--ui-surface);color:var(--ui-ink);outline:none;margin:0}
#startMenu select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
#startMenu input:focus-visible,#startMenu select:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}
#startMenu input[type=range]{width:100%;accent-color:var(--ui-sea)}
#startMenu .sm-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
#startMenu .sm-error{background:color-mix(in srgb,var(--ui-red) 10%,var(--ui-surface));color:var(--ui-red);border:1px solid color-mix(in srgb,var(--ui-red) 45%,transparent);padding:12px 14px;border-radius:var(--ui-r2);font:500 var(--ui-t-s)/1.45 var(--ui-font-body);margin:0 0 16px}
/* loading: spinner, the brand, rotating lines, the real stage, bar and percent */
#startMenu .sm-spin{display:flex;justify-content:center;margin:0 0 18px;color:var(--ui-sea)}
#startMenu .sm-spin svg{width:42px!important;height:42px!important;animation:sm-spin 1s linear infinite}
@keyframes sm-spin{to{transform:rotate(360deg)}}
#startMenu .sm-lines{text-align:center;margin:0 0 22px;min-height:3rem;display:flex;flex-direction:column;gap:8px}
#startMenu .sm-line{color:var(--ui-ink-2);font:400 var(--ui-t-l)/1.35 var(--ui-font-body);font-variation-settings:var(--ui-hand-text,normal);transition:opacity .3s}
#startMenu .sm-stage{color:var(--ui-sea);font-weight:600}
#startMenu .sm-bar{position:relative;height:10px;background:var(--ui-sunk);border:1px solid var(--ui-line);border-radius:999px;overflow:hidden}
#startMenu .sm-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ui-sea);border-radius:999px;transition:width .3s}
#startMenu .sm-pct{text-align:center;margin:8px 0 0;color:var(--ui-mute);font:600 var(--ui-t-s) var(--ui-font-body);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){#startMenu .sm-spin svg{animation-duration:3s}#startMenu{transition:none}}
:root[data-motion=reduce] #startMenu .sm-spin svg{animation-duration:3s}
@media (max-width:480px){#startMenu{padding:10px}#startMenu .sm-card{padding:22px 16px;border-radius:var(--ui-r3)}#startMenu .sm-wordmark{font-size:28px}}
/* The game page's own form styles (index.html: small grey labels, dark selects) must not leak into the start page. */
#startMenu label{display:block;margin:0;font-size:inherit;color:inherit}
#startMenu label.sm-row,#startMenu label.sm-check{display:flex}
#startMenu a.sm-item{text-decoration:none;box-sizing:border-box}

/* ---- Hand-drawn: the activity scenes' paper and ink (frames on ::before, text never filtered) ----------------- */
body.hud-hand #startMenu{background:var(--hh-paper) var(--hh-grain)}
body.hud-hand #startMenu :is(.sm-card,.sm-btn,.sm-world,.sm-check,.sm-item:hover,.sm-error){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
body.hud-hand #startMenu :is(.sm-card,.sm-btn,.sm-world,.sm-check,.sm-error)::before,body.hud-hand #startMenu .sm-item:hover::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:var(--sm-fill,var(--hh-paper));border:var(--sm-w,2px) solid var(--sm-ink,var(--hh-ink));box-shadow:var(--sm-off,3px) var(--sm-off,3px) 0 var(--hh-shadow);filter:var(--hh-filter)}
body.hud-hand #startMenu .sm-card{--sm-w:2.4px;--sm-off:6px;color:var(--hh-ink)}
body.hud-hand #startMenu .sm-btn{border-radius:999px;--sm-fill:var(--hh-ink);color:var(--hh-paper);filter:none}
body.hud-hand #startMenu .sm-btn.ghost{--sm-fill:var(--hh-paper);color:var(--hh-ink)}
body.hud-hand #startMenu .sm-btn.ghost:hover{--sm-fill:var(--hh-tint)}
body.hud-hand #startMenu .sm-btn:active{--sm-off:1px;transform:translate(2px,2px)}
body.hud-hand #startMenu .sm-world{--sm-w:1.6px;--sm-off:2px;color:var(--hh-ink)}
body.hud-hand #startMenu .sm-world[aria-pressed=true]{--sm-fill:var(--hh-tint);--sm-w:2.4px;--sm-off:4px}
body.hud-hand #startMenu .sm-world svg,body.hud-hand #startMenu .sm-item svg{color:var(--hh-ink)}
body.hud-hand #startMenu .sm-item{color:var(--hh-ink)}
body.hud-hand #startMenu .sm-item:hover{--sm-fill:var(--hh-tint);--sm-w:1.5px;--sm-off:2px}
body.hud-hand #startMenu .sm-check{--sm-fill:var(--hh-tint);--sm-w:1.5px;--sm-off:0px}
body.hud-hand #startMenu .sm-check::before{border-style:dashed}
body.hud-hand #startMenu .sm-error{--sm-ink:var(--hh-bad);--sm-off:0px;color:var(--hh-bad)}
body.hud-hand #startMenu .sm-rule{height:0;background:none;border-top:1.5px dashed var(--hh-ink-soft)}
body.hud-hand #startMenu :is(input[type=text],input[type=password],input[type=email],select){background-color:var(--hh-paper);border:1.5px solid var(--hh-ink);border-radius:10px;box-shadow:inset 2px 2px 0 var(--hh-tint);color:var(--hh-ink)}
body.hud-hand #startMenu input[type=checkbox]{border-color:var(--hh-ink);background:var(--hh-paper)}
body.hud-hand #startMenu input[type=checkbox]:checked{background:var(--hh-ink);border-color:var(--hh-ink)}
body.hud-hand #startMenu input[type=checkbox]:checked::after{border-color:var(--hh-paper)}
body.hud-hand #startMenu input[type=range]{accent-color:var(--hh-ink)}
body.hud-hand #startMenu .sm-bar{background:var(--hh-sand);border:1.5px solid var(--hh-ink)}
body.hud-hand #startMenu .sm-bar i{background:var(--hh-ink);border-radius:0}
body.hud-hand #startMenu :is(.sm-spin,.sm-stage){color:var(--hh-ink)}
body.hud-hand #startMenu :is(.sm-sub,.sm-label,.sm-line,.sm-link){color:var(--hh-ink)}
body.hud-hand #startMenu :is(.sm-muted,.sm-faint,.sm-pct){color:var(--hh-ink-soft)}

#startMenu .sm-menu[hidden]{display:none}
#startMenu details{margin-top:16px}
#startMenu details summary{cursor:pointer;padding:10px 0}