/* Account settings and password forms use the approved readable card at the end of this file.
   THE SIGN-UP SHEET IN ELGIN'S LETTERING (the owner, 2026-10-08: "update the log in / sign up to be more lke our new elgin ui").
   The sheet itself is the site's one sheet (js/frost-signup.js + css/signup.css: the forms, Google, Spotify, the profile) and
   this file changes only how it LOOKS on a page that says it is Elgin (body.elgin-account-entry: the town, the 2D area, Daily
   Missions and every daily's own page). Same words, same buttons, same order; the music site keeps its yellow plastic.

   So it wears src/ui/components/lettering.css: the picture dimmed flat behind (a pseudo-element, the way dialog.ink-card's ::backdrop is,
   so no element holding words has a background), the words standing on it as comic lettering, a button a WORD you press, a
   text field the typed word on one ink underline -- no pill, no sunken well, no plastic, no rings. */
body.elgin-account-entry .fsg{background:none}
body.elgin-account-entry .fsg::before{content:"";position:fixed;inset:0;z-index:-1;background:#0b0d12a8;pointer-events:none}
/* while the sheet is up the page's own words stand down (as they do under dialog.ink-card), so nothing reads through the dim --
   all but MAKE YOUR CLUB, the club maker the sheet opens over itself as sign-up's last step (js/frost-signup.js clubStep) */
body.elgin-account-entry:has(>.fsg:not([hidden]))>*:not(#game):not(.fsg):not(dialog):not(script):not(#sports-club){visibility:hidden}

body.elgin-account-entry .fsg__sheet{max-width:460px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--ink-cream);text-align:center}
body.elgin-account-entry .fsg__well{padding:6px 10px 10px;border-radius:0;background:none;box-shadow:none;scrollbar-width:none}
body.elgin-account-entry .fsg__well::-webkit-scrollbar{display:none}

/* close: the glyph, lettered */
body.elgin-account-entry .fsg__x{top:-4px;right:0;width:44px;height:44px;border:0;border-radius:0;background:none;box-shadow:none;
  font:900 26px/1 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
  text-shadow:var(--ink-drop);transition:transform .12s,color .12s}
body.elgin-account-entry .fsg__x:hover{color:var(--ink-yellow);transform:rotate(-6deg) scale(1.1)}
body.elgin-account-entry .fsg__x:active{transform:translateY(2px);box-shadow:none}
body.elgin-account-entry .fsg__x:focus-visible{outline:none;color:var(--ink-yellow)}

/* the words */
body.elgin-account-entry .fsg__head{margin:2px 40px 8px;font:900 34px/1.05 var(--ink-face);letter-spacing:0;color:var(--ink-cream);
  -webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink)}
body.elgin-account-entry :is(.fsg__blurb,.fsg__note,.fsg__kv){font:700 15px/1.45 var(--ink-sans);color:var(--ink-cream);
  -webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;text-shadow:1px 2px 0 var(--ink)}
body.elgin-account-entry .fsg__blurb{margin:0 0 14px}
body.elgin-account-entry .fsg__note b{color:var(--ink-yellow)}
body.elgin-account-entry :is(.fsg__mini,.fsg__or,.fsg__save){font:900 11px/1.3 var(--ink-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-yellow);opacity:1;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
body.elgin-account-entry .fsg__mini{margin:0 0 2px}
body.elgin-account-entry .fsg__or{margin:6px 0}
body.elgin-account-entry .fsg__rule{margin:8px 0;border:0}
body.elgin-account-entry .fsg__kv{padding:4px 0;border:0}
body.elgin-account-entry .fsg__kv b{color:var(--ink-yellow)}
body.elgin-account-entry .fsg__code{font:900 28px/1.3 var(--ink-face);letter-spacing:4px;color:var(--ink-yellow);
  -webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:var(--ink-drop)}
/* what the server says back: coloured lettering, no box */
body.elgin-account-entry :is(.fsg__err,.fsg__warn){margin:8px 0 0;padding:0;border:0;border-radius:0;background:none;
  font:900 15px/1.35 var(--ink-sans);-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;text-shadow:1px 2px 0 var(--ink)}
body.elgin-account-entry .fsg__err{color:var(--ink-pink)}
body.elgin-account-entry .fsg__warn{color:var(--ink-yellow)}

/* the buttons: words you press (.ink-button), the first of each stack the pink one (MAKE AN ACCOUNT, MAKE IT, GO IN ...) */
body.elgin-account-entry .fsg__stack,body.elgin-account-entry .fsg__sso{gap:0;align-items:center}
body.elgin-account-entry .fsg__btn{min-height:44px;padding:6px 4px;border:0;border-radius:0;background:none;box-shadow:none;
  font:900 21px/1 var(--ink-face);letter-spacing:0;color:var(--ink-cream);-webkit-text-stroke:5px var(--ink);
  paint-order:stroke fill;text-shadow:var(--ink-drop);white-space:normal;text-wrap:balance;max-width:100%;transition:transform .12s,color .12s}
body.elgin-account-entry .fsg__btn--wide{width:auto}
body.elgin-account-entry .fsg__stack>.fsg__btn:first-child{color:var(--ink-pink);font-size:26px}
body.elgin-account-entry .fsg__btn--ghost{font-size:16px;color:var(--ink-cream);opacity:.85;text-shadow:var(--ink-drop)}
body.elgin-account-entry :is(.fsg__btn,.fsg__link):hover:not([disabled]){background:none;color:var(--ink-yellow);transform:rotate(-2deg) scale(1.07)}
body.elgin-account-entry .fsg__btn:active:not([disabled]){transform:translateY(2px);box-shadow:none}
body.elgin-account-entry :is(.fsg__btn,.fsg__link,.fsg__eye):focus-visible{outline:none;color:var(--ink-yellow);
  text-underline-offset:7px}
body.elgin-account-entry .fsg__link{min-height:36px;margin:4px 0 0;padding:4px;font:900 15px/1 var(--ink-face);text-decoration:none;
  color:var(--ink-cream);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:var(--ink-drop);
  transition:transform .12s,color .12s}

/* the fields: the typed word on one thin faint line that goes yellow while you type (the owner, 2026-10-08: "the underlines are unbearable", after a 5px yellow bar under every field and the picked tab) */
body.elgin-account-entry .fsg__form{margin:0 0 6px}
body.elgin-account-entry .fsg__row{justify-content:center;margin-bottom:8px}
body.elgin-account-entry .fsg__in{width:100%;box-sizing:border-box;padding:2px 4px 4px;border:0;border-bottom:1px solid #fff8dc59;
  border-radius:0;background:none;box-shadow:none;text-align:center;font:900 22px/1.15 var(--ink-face);color:var(--ink-cream);
  caret-color:var(--ink-yellow);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:var(--ink-drop)}
body.elgin-account-entry .fsg__in::placeholder{color:#fff8dc8c;-webkit-text-stroke:0;text-shadow:none;font-size:15px}
body.elgin-account-entry .fsg__in:focus{outline:none;border-bottom-color:var(--ink-yellow)}
body.elgin-account-entry .fsg__in::selection{background:transparent;color:var(--ink-yellow)}
body.elgin-account-entry .fsg__pw>.fsg__in{padding-right:58px;padding-left:58px}
body.elgin-account-entry .fsg__eye{right:0;padding:4px 2px;border:0;border-radius:0;background:none;
  font:900 11px/1.3 var(--ink-sans);letter-spacing:.14em;color:var(--ink-yellow);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}

/* the stats card the profile draws inside the sheet (js/frost-stats.js) keeps its own rules; it sits on the dim, not a well */
body.elgin-account-entry .fsg .fstats__rule{border-top-color:transparent}

@media(max-height:500px){
  body.elgin-account-entry .fsg__head{font-size:26px;-webkit-text-stroke:6px var(--ink);margin-bottom:4px}
  body.elgin-account-entry :is(.fsg__blurb,.fsg__note,.fsg__kv){font-size:13px;-webkit-text-stroke:3px var(--ink)}
  body.elgin-account-entry .fsg__blurb{margin-bottom:6px}
  body.elgin-account-entry .fsg__btn{min-height:38px;font-size:17px;-webkit-text-stroke:4px var(--ink)}
  body.elgin-account-entry .fsg__stack>.fsg__btn:first-child{font-size:21px}
  body.elgin-account-entry .fsg__btn--ghost{font-size:14px}
  body.elgin-account-entry .fsg__in{font-size:19px}
}

/* ELGIN'S DOOR (js/frost-signup.js elginDoor; the owner, 2026-10-08: "that is not a clear sign up / log in"): two tabs that say
   what the screen is, the open form under the one picked, its word again as the big pink action, the sign-in brands as their own
   marks, PLAY AS GUEST last and small. */
body.elgin-account-entry .fsg__tabs{display:flex;justify-content:center;gap:22px;margin:2px 34px 12px}
body.elgin-account-entry .fsg__tab{appearance:none;min-height:48px;margin:0;padding:2px 2px 4px;background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;white-space:nowrap;font:900 29px/1 var(--ink-face);
  color:var(--ink-cream);opacity:.4;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink);
  transition:opacity .12s,color .12s}
body.elgin-account-entry .fsg__tab[aria-selected="true"]{opacity:1}
body.elgin-account-entry .fsg__tab:hover{opacity:1;color:var(--ink-yellow)}
body.elgin-account-entry .fsg__tab:focus-visible{outline:none;color:var(--ink-yellow)}
body.elgin-account-entry .fsg__form .fsg__mini{margin-top:6px}
body.elgin-account-entry .fsg__form .fsg__stack{margin-top:10px}
body.elgin-account-entry .fsg__btn--go{font-size:32px!important;color:var(--ink-pink);-webkit-text-stroke:7px var(--ink)}
body.elgin-account-entry .fsg__marks{display:flex;justify-content:center;gap:30px;margin:4px 0 6px}
body.elgin-account-entry .fsg__mark{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;min-height:44px;
  text-decoration:none;transition:transform .12s}
body.elgin-account-entry .fsg__mark svg{width:46px;height:46px;display:block;filter:drop-shadow(2px 3px 0 var(--ink))}
body.elgin-account-entry .fsg__mark span{font:900 13px/1 var(--ink-face);letter-spacing:.06em;color:var(--ink-cream);
  -webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
body.elgin-account-entry .fsg__mark:hover{transform:rotate(-3deg) scale(1.08)}
body.elgin-account-entry .fsg__mark:hover span{color:var(--ink-yellow)}
body.elgin-account-entry .fsg__mark:focus-visible{outline:none}
body.elgin-account-entry .fsg__mark:focus-visible span{color:var(--ink-yellow)}
body.elgin-account-entry .fsg__guest{display:block;margin:6px auto 0}
/* a landscape phone has no room for the form AND the other ways in under it: two columns, the form on the left, OR / the marks / the
   guest way / forgot on the right */
@media(max-height:500px) and (min-width:640px){
  body.elgin-account-entry .fsg__sheet:has(.fsg__tabs){max-width:760px}
  body.elgin-account-entry .fsg__well:has(>.fsg__tabs){display:grid;grid-template-columns:1.3fr 1fr;column-gap:40px;
    align-content:start;align-items:center}
  body.elgin-account-entry .fsg__well:has(>.fsg__tabs)>:is(.fsg__mini,.fsg__tabs){grid-column:1/-1}
  body.elgin-account-entry .fsg__well:has(>.fsg__tabs)>.fsg__form{grid-column:1;grid-row:3/span 6;margin:0}
  body.elgin-account-entry .fsg__well:has(>.fsg__tabs)>:not(.fsg__mini):not(.fsg__tabs):not(.fsg__form){grid-column:2}
  body.elgin-account-entry .fsg__well:has(>.fsg__tabs) .fsg__row{margin-bottom:2px}
  body.elgin-account-entry .fsg__well:has(>.fsg__tabs) .fsg__in{font-size:17px;padding-top:0;padding-bottom:2px}
  body.elgin-account-entry .fsg__well:has(>.fsg__tabs) .fsg__form .fsg__mini{margin-top:3px}
  body.elgin-account-entry .fsg__well:has(>.fsg__tabs) .fsg__form .fsg__stack{margin-top:4px}
}
@media(max-height:500px){
  body.elgin-account-entry .fsg__tabs{margin-bottom:4px}
  body.elgin-account-entry .fsg__tab{font-size:25px;-webkit-text-stroke:6px var(--ink);min-height:40px}
  body.elgin-account-entry .fsg__btn--go{font-size:25px!important;-webkit-text-stroke:6px var(--ink)}
  body.elgin-account-entry .fsg__mark svg{width:36px;height:36px}
}

/* THE CHOICE (js/frost-signup.js elginChoice; the owner, 2026-10-28: "only have two buttons create and play as guest and make
   play as guest the main part"): the screen that asks opens on PLAY AS GUEST, as big as the front page's PLAY, and CREATE under it.
   No X: PLAY AS GUEST is the way out. */
body.elgin-account-entry .fsg--choice .fsg__x{display:none}
body.elgin-account-entry .fsg--choice .fsg__sheet{max-width:min(94vw,900px)}
body.elgin-account-entry .fsg--choice .fsg__well{overflow:visible}
body.elgin-account-entry .fsg__choice{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 0 clamp(0px,7vh,70px)}
body.elgin-account-entry .fsg__btn.fsg__play{display:flex;flex-direction:column;align-items:center;gap:0;padding:0 8px;
  color:var(--ink-pink);-webkit-text-stroke:0;text-shadow:none;line-height:.95}
body.elgin-account-entry .fsg__play-big{font:900 clamp(78px,24vw,150px)/.95 var(--ink-face);-webkit-text-stroke:12px var(--ink);
  paint-order:stroke fill;text-shadow:4px 6px 0 var(--ink);white-space:nowrap}
body.elgin-account-entry .fsg__play-big::before{content:"\25B6";display:inline-block;font-size:.62em;vertical-align:.12em;margin-right:.18em}
body.elgin-account-entry .fsg__play-small{font:900 clamp(34px,10vw,62px)/1 var(--ink-face);-webkit-text-stroke:9px var(--ink);
  paint-order:stroke fill;text-shadow:3px 5px 0 var(--ink);white-space:nowrap}
body.elgin-account-entry .fsg__btn.fsg__create{font-size:clamp(24px,6vw,32px);color:var(--ink-cream);-webkit-text-stroke:6px var(--ink)}
@media(max-height:500px){
  body.elgin-account-entry .fsg__play-big{font-size:clamp(54px,20vh,96px);-webkit-text-stroke:10px var(--ink)}
  body.elgin-account-entry .fsg__play-small{font-size:clamp(26px,9vh,44px);-webkit-text-stroke:7px var(--ink)}
}

/* Account settings/password forms: approved card, ordinary type, explicit field and button boundaries. */
body.elgin-account-entry .fsg.fsg--account .fsg__sheet{box-sizing:border-box;max-width:460px;padding:18px;border:1px solid #444957;border-radius:16px;
  background:#20232c;color:#f7f8fc;text-align:left;box-shadow:0 16px 56px #0006}
body.elgin-account-entry .fsg.fsg--account .fsg__sheet *{box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-text-stroke:0;text-shadow:none;letter-spacing:0;text-transform:none}
body.elgin-account-entry .fsg.fsg--account .fsg__well{padding:8px;max-height:calc(100dvh - 80px);overflow:auto}
body.elgin-account-entry .fsg.fsg--account .fsg__head{margin:0 36px 22px 0;font-size:24px;line-height:1.2;color:#f7f8fc}
body.elgin-account-entry .fsg.fsg--account .fsg__mini{font-size:12px;color:#b9c0cf}
body.elgin-account-entry .fsg.fsg--account .fsg__identity p{margin:3px 0 16px;font-size:16px;overflow-wrap:anywhere}
body.elgin-account-entry .fsg.fsg--account :is(.fsg__blurb,.fsg__note){font-size:15px;font-weight:400;color:#d5dbe6}
body.elgin-account-entry .fsg.fsg--account .fsg__stack{align-items:stretch;gap:8px}
body.elgin-account-entry .fsg.fsg--account .fsg__btn{width:100%;min-height:44px;padding:12px;border-radius:8px;background:#303541;
  font-size:15px;font-weight:600;line-height:1.3;color:#f7f8fc;text-align:left;opacity:1}
body.elgin-account-entry .fsg.fsg--account .fsg__btn[data-do="out"]{background:transparent;color:#ffb8c6}
body.elgin-account-entry .fsg.fsg--account .fsg__in{padding:12px;border:1px solid #687287;border-radius:8px;background:#171a21;
  color:#f7f8fc;text-align:left;font-size:16px;font-weight:400;line-height:1.4;caret-color:#fff}
body.elgin-account-entry .fsg.fsg--account .fsg__in::selection{background:#526da2;color:#fff}
body.elgin-account-entry .fsg.fsg--account .fsg__link{font-size:15px;font-weight:600;min-height:44px;color:#f7f8fc}
body.elgin-account-entry .fsg.fsg--account .fsg__x{top:10px;right:10px;font-size:24px;color:#f7f8fc}
body.elgin-account-entry .fsg.fsg--account :is(.fsg__btn,.fsg__link,.fsg__x):hover{transform:none;background:#41495a;color:#fff}
body.elgin-account-entry .fsg.fsg--account :is(button,input):focus-visible{outline:2px solid #fbd563;outline-offset:2px}
body.elgin-account-entry .fsg.fsg--account :is(.fsg__warn,.fsg__err){font-size:14px;line-height:1.5;font-weight:500}
body.elgin-account-entry .fsg.fsg--account .fsg__pw .fsg__in{padding-right:66px}