/* front-door.css — the title and the character select at the fire (src/front-door.js). Layout only
   beyond what the drawn kit already gives (creator-kit.css: the panel, the paper, the stone
   buttons, Rhun's drawn button). The fire and the hero stay in view: the title across the top, the
   sign-in panel low and centred, the character list down the right like the creator. */
#front { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#front[hidden] { display: none; }
#front > .fd-panel { pointer-events: auto; }

/* The title in the website's lettering (server/site/site.css .title): IM Fell English, inked.
   Top left, in the sky clear of the moon; the hero stands mid-frame and the panel takes the right. */
.fd-title { position: absolute; top: 6%; left: 4%; right: calc(min(420px, 46%) + 16px); text-align: left; pointer-events: none; }
.fd-title h1 {
  margin: 0; font: 400 clamp(38px, 5vw, 84px)/.95 'IM Fell English SC', Georgia, 'Times New Roman', serif;
  letter-spacing: .02em; color: #efe4c8; -webkit-text-stroke: 2px #0f0c0b; paint-order: stroke fill;
  text-shadow: 0 3px 0 #0f0c0b, 0 0 26px rgba(0, 0, 0, .65);
}
.fd-title p { margin: .45em 0 0; font: italic clamp(15px, 1.5vw, 22px)/1.3 'IM Fell English', Georgia, serif; color: #cfc3a6; text-shadow: 0 2px 0 #0f0c0b, 0 0 16px rgba(0, 0, 0, .8); }

/* The right-hand column, as the creator's (index.html #creator): the list runs from the top; a
   short page (sign in, waking, trouble) sits halfway down, its lines centred. */
.fd-panel { box-sizing: border-box; }
.fd-side { position: absolute; top: 10px; right: 8px; width: 420px; max-width: 46%; max-height: calc(100% - 20px); overflow: auto; padding: 12px 14px 14px; }
.fd-short { top: 50%; transform: translateY(-50%); padding: 16px 22px 16px; text-align: center; }

/* Rhun's drawn button, across the panel (its lettering is sized for a short word: hud.setButtonFrame). */
.fd-panel .ui-btn.play { width: 100%; margin: 12px 0 10px; }
.fd-panel .ui-btn.play:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.fd-panel .ui-btn.play:disabled:active { transform: none; }
.kit .fd-wide { display: block; width: 100%; padding: 8px 10px; font-size: 14px; }
.kit .fd-wide + .fd-wide { margin-top: 8px; }
.fd-fine { margin: 12px 2px 2px; font: italic 13px/1.5 Georgia, serif; color: #a29c8a; }
.fd-fine.fd-under { margin: -4px 2px 14px; }
.fd-who { margin: 12px 0 0; font: 12px/1.4 Georgia, serif; font-variant: small-caps; letter-spacing: .05em; color: #a29c8a; text-align: center; }
.fd-error { margin: 8px 0 0; min-height: 1.4em; font: 13px/1.4 Georgia, serif; color: #e8a27a; }
.fd-error:empty { min-height: 0; margin: 0; }
.fd-busy { margin: 14px 0; font: italic 16px/1.4 Georgia, serif; color: #d8ccaa; }

.fd-side h2 { margin: 2px 0 10px; }
.fd-list { margin: 0 0 4px; }
.kit .fd-list .item { padding: 10px 12px; min-height: 48px; align-items: center; }
.fd-name { font: 16px/1.2 Georgia, serif; color: #f0ead8; }
.kit .fd-list .fd-new .fd-name { color: #c6a872; font-style: italic; }
.kit .fd-list .fd-new:hover .fd-name { color: #f0ead8; }
.kit .fd-list .fd-locked { opacity: .45; cursor: default; }
.kit .fd-list .fd-locked:hover { background: transparent; }
.fd-side .row.small { margin-top: 2px; }
.fd-side .row.small button { padding: 6px 8px; font-size: 13px; }
.fd-gap { margin-top: 12px; }
/* The one button on a page that cannot be taken back. */
.kit button.fd-danger:not(:disabled) { color: #f0a47e; }
.fd-side label strong { color: #f0ead8; font-variant: normal; }

/* The name under the creator's Name field: why a name will not do, or that it is free. */
.name-note { margin: 4px 2px 0; min-height: 1.3em; font: 12px/1.3 Georgia, serif; font-style: italic; color: #a29c8a; }
.name-note.bad { color: #e8a27a; }
.name-note.good { color: #9fbf7a; }
/* Back to the character list: small, at the top of the creator, where the eye starts. */
.kit .creator-back { display: inline-block; margin: 0 0 10px; padding: 3px 10px; font-size: 12px; }
.kit .creator-back[hidden] { display: none; }

/* The workshop's own tools (export a texture, load a face drawing, save a look as a file) are for
   Rhun: they show with ?dev in the address. */
body:not(.dev) .dev-only { display: none !important; }