/* screens/welcome.css: owned by WP6. SPEC 3.3 (Welcome: form-create and form-code).
   Title shot (first run): a hanging ema plaque left of --safe-title-r, on a red cord with brand bunting; a red
   sash band under the gable, a flame crest in the gable, the two fields side by side, a live name plate on a
   night stage strip, and the server message slot. Menu shot (from Settings): the same content laid out as a grid
   inside the stall body (base.css moves the box; the ema's roof, cord and outline go).
   Rules: transform / opacity only in animations; no filter, no backdrop-filter; text >= .875rem. */

/* ============================================================================ shared: type and fields */
#welcome .ema__paper { scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: var(--ink-2) transparent; }
#welcome form { display: grid; align-content: start; row-gap: .95rem; min-width: 0; }
#welcome form[hidden] { display: none; }
#welcome .body { margin: 0; font: 800 var(--fs-body)/1.45 var(--font-body); color: var(--ink-2); text-wrap: pretty; }

/* band: the title plus a small "where am I" pill on the right */
#welcome .band { margin-bottom: 0; gap: 1rem; }
#welcome .band h2 { margin: 0; font-size: var(--fs-h1); line-height: 1.05; white-space: nowrap; }
#welcome .band::before {
  order: 2; margin-left: auto; flex: none; padding: .2rem .65rem .25rem;
  border: var(--ow-s) solid var(--ink); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font: 900 var(--fs-small)/1.15 var(--font-body); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  box-shadow: 0 .16rem 0 var(--ink); rotate: 2deg;
}
#form-create .band::before { content: 'First time on stage'; }
#form-code .band::before { content: 'Returning player'; color: var(--cobalt-deep); }

/* fields: labels, 3.2rem inputs, the X note moved under its input (aligned with #wc-help) */
#welcome .field-row { gap: 1.2rem; align-items: start; }
#welcome .field { gap: .55rem; align-content: start; }
#welcome .field-text { gap: .55rem; }   /* the label clears the cursor ring (.35rem + its rim) */
#welcome .field-text > span { color: var(--ink); letter-spacing: .1em; }
#welcome .field-text input { height: 3.2rem; font-size: 1.2rem; padding-inline: 1rem; }
#welcome .field-text:has(.field-ok) input { padding-right: 3.1rem; }
#welcome .field-ok { right: .75rem; bottom: .65rem; }
/* "X (Twitter)" label: the span becomes contents so its small note can sit below the input */
#welcome label.field-text:has(#wc-x) { line-height: 1.2; }
#welcome label.field-text:has(#wc-x) > span { display: contents; }
#welcome label.field-text:has(#wc-x) small {
  order: 1; display: flex; align-items: center; gap: .4rem; min-height: 1.3em;
  font: 800 var(--fs-small)/1.25 var(--font-body); color: var(--ink-2); text-transform: none; letter-spacing: 0;
}
#welcome label.field-text:has(#wc-x) small::first-letter { text-transform: uppercase; }
#wc-help { min-height: 1.3em; }
/* a server error on the field wins over the live "looks good" */
#welcome .field-text:has(input[aria-invalid="true"]) .field-ok { display: none; }
#welcome .field:has(input[aria-invalid="true"]) #wc-help.ok { color: var(--ink-2); }
#welcome .field:has(input[aria-invalid="true"]) #wc-help.ok::before { opacity: .35; }
#wc-help.ok { color: color-mix(in srgb, var(--ok) 50%, var(--ink)); }
#welcome .field-help.warn::before { width: .7rem; height: .7rem; }

/* recovery code field: a ticket with a red stub, mono code */
#welcome .field-text--ticket input { height: 3.4rem; font-size: 1.3rem; letter-spacing: .12em; padding-left: 2.9rem; }
#welcome .field-text--ticket input::placeholder { letter-spacing: .12em; }
#welcome .field-text--ticket::after {                    /* helper line (the server accepts both) */
  content: 'Lowercase and spaces are fine.'; display: flex; align-items: center; min-height: 1.3em;
  font: 800 var(--fs-small)/1.25 var(--font-body); color: var(--ink-2); text-transform: none; letter-spacing: 0;
}

/* the switch warning (Settings -> Use a recovery code) */
#rc-switch { margin: 0; padding: .55rem .9rem .55rem .6rem; border-radius: var(--r-m); box-shadow: var(--drop-s); font-size: var(--fs-small); line-height: 1.4; }

/* ---------------------------------------------------------------------------- the live plate (#wc-preview) */
#wc-preview {
  display: grid; grid-template-columns: auto minmax(0, auto) 1fr; align-items: center; column-gap: 1.1rem;
  min-height: 4.8rem; padding: .55rem 1.1rem .55rem 1rem; overflow: hidden;
  border: var(--ow) solid var(--ink); border-radius: var(--r-m);
  background:
    radial-gradient(16rem 6rem at 46% 56%, rgb(255 138 28 / .3), rgb(232 32 47 / .08) 55%, transparent 75%),
    linear-gradient(180deg, rgb(255 255 255 / .06), transparent 40%, rgb(0 0 0 / .18)),
    #14102A url(../../img/svg/pat-seigaiha-night.svg) 0 0 / 2.4rem 1.2rem;
  box-shadow: inset 0 0 0 .14rem rgb(246 240 228 / .14), var(--drop-s);
}
#wc-preview .preview__label { max-width: 6.6rem; margin: 0; line-height: 1.3; color: var(--ivory-2); }
#wc-preview .plate {
  display: grid; grid-template-columns: auto minmax(0, auto) minmax(0, auto); grid-template-areas: "av kick kick" "av name x";
  align-items: center; column-gap: .6rem; row-gap: .1rem; justify-self: start; max-width: 100%;
  padding: .4rem 1.2rem .45rem .4rem; rotate: -1.5deg;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 .12rem rgb(246 240 228 / .22), .3rem .35rem 0 0 var(--cobalt), .3rem .35rem 0 var(--ow-s) var(--ink);
}
#wc-preview .avatar { grid-area: av; width: 2.75rem; height: 2.75rem; font-size: 1.45rem; }
#wc-preview .plate__kicker { grid-area: kick; color: var(--f2); font-size: var(--fs-small); }
#wc-preview .plate__name { grid-area: name; font-size: 1.2rem; line-height: 1.15; }
#wc-preview .plate__x { grid-area: x; align-self: end; padding-bottom: .1rem; }
#wc-preview.is-empty .avatar { background: var(--night-4); color: var(--ivory-3); }
#wc-preview .preview__where {
  justify-self: end; display: grid; justify-items: end; gap: .1rem; text-align: right;
  font: 800 var(--fs-small)/1.25 var(--font-body); color: var(--ivory-3);
}
#wc-preview .preview__where span:first-child { color: var(--ivory); }

/* ---------------------------------------------------------------------------- server message (#wc-msg, #rc-msg) */
#welcome .form-msg { min-height: 2.5rem; margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
body:not([data-shot="menu"]) #welcome .form-msg:empty { display: none; }   /* the plaque grows when a message arrives */
#welcome .form-msg.err {
  justify-self: stretch; padding: .35rem .75rem .35rem .4rem; gap: .55rem;
  border: var(--ow-s) dashed rgb(165 15 31 / .6); border-radius: var(--r-s);
  background: rgb(232 32 47 / .08); color: var(--red-deep); font-weight: 900;
}
#welcome .form-msg.err::before { width: 1.7rem; height: 1.7rem; }

/* ---------------------------------------------------------------------------- the action row */
#welcome .row { gap: 1rem; flex-wrap: nowrap; }
#btn-have-code { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; text-align: left; line-height: 1.3; }
#btn-have-code::before {
  content: ''; flex: none; width: 1.2rem; height: 1.3rem;
  background: url(../../img/svg/lock.svg) 50% 50% / contain no-repeat;
}
#welcome button[type="submit"] {
  flex: none; min-height: 3.5rem; padding: .3rem 1.1rem .4rem 1.6rem; gap: .7rem; font-size: 1.35rem;
}
#welcome button[type="submit"]::before {                 /* two flame tips on the top-right corner (as the title prompt) */
  content: ''; position: absolute; right: .9rem; top: -1.4rem; width: 2.4rem; height: 1.9rem; pointer-events: none;
  background: url(../../img/svg/flame-flame-rim.svg) 100% 100% / auto 1.9rem no-repeat, url(../../img/svg/flame-blaze-rim.svg) 0 100% / auto 1.3rem no-repeat;
}
#welcome button[type="submit"] kbd { font-size: var(--fs-small); }
#btn-rc-back { min-height: 3rem; }

/* ============================================================================ title shot: the hanging ema */
body:not([data-shot="menu"]) #welcome .ema {
  --ema-top: max(12vh, 6.5rem);
  --ema-p: 4.4rem;                                       /* gable: a proper ema silhouette */
  top: var(--ema-top);
  transform-origin: 50% calc(-1 * var(--ema-top));       /* the swing pivots on the cord's knot */
}
body:not([data-shot="menu"]) #welcome .ema__cord { height: calc(var(--ema-top) + .1rem); --bunting-from: 0 .14; --bunting-to: 1 .14; --bunting-sag: 1.7rem; }
body:not([data-shot="menu"]) #welcome .ema__paper {
  max-height: min(44rem, 100vh - var(--ema-top) - 2vh - var(--hint-h) - 2rem);
  padding: calc(var(--ema-p) + 1.15rem) 1.7rem 1.5rem;
}
body:not([data-shot="menu"]) #welcome .ema__paper .band {          /* full-bleed red sash under the eaves */
  margin: 0 -1.7rem .35rem; min-height: 4rem; padding: .35rem 1.7rem .25rem; border-radius: 0;
  box-shadow: inset 0 var(--ow) 0 rgb(255 255 255 / .14), inset 0 calc(-1 * var(--ow-s)) 0 rgb(44 15 21 / .25);
}
body:not([data-shot="menu"]) #welcome .ema__paper .band h2 { font-size: 2.5rem; }
body:not([data-shot="menu"]) #welcome .ema__paper .band::after { height: 1rem; background-size: 1.9rem 1rem;
  background-image: radial-gradient(circle at 50% 0, var(--lobe) 0 calc(.95rem - var(--ow)), var(--ink) calc(.95rem - var(--ow) + .5px) .95rem, transparent calc(.95rem + .5px)); }
body:not([data-shot="menu"]) #welcome .ema__paper form { row-gap: 1.05rem; }
body:not([data-shot="menu"]) #welcome .ema__paper .row { margin-top: .6rem; }   /* room for the flame tips */
/* the bichito stands on the roof's left slope */
body:not([data-shot="menu"]) #welcome .ema .mascot-anchor { left: 4.2rem; top: -2.7rem; width: 5.8rem; height: 5rem; }

/* gable decorations (profile-view.js builds .ema__deco: a flame crest and three twinkles) */
#welcome .ema__deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#welcome .ema__mon {
  position: absolute; left: 50%; top: 1.85rem; width: 3.1rem; height: 3.1rem; translate: -50% 0;
  background: url(../../img/svg/mon.svg) 50% 50% / contain no-repeat;
  border-radius: 50%; box-shadow: 0 .18rem 0 rgb(44 15 21 / .35);
}
#welcome .ema__twinkle {
  position: absolute; width: var(--tw, 1.2rem); height: var(--tw, 1.2rem); background: var(--ink);
  -webkit-mask: url(../../img/svg/twinkle.svg) 50% 50% / contain no-repeat; mask: url(../../img/svg/twinkle.svg) 50% 50% / contain no-repeat;
}
#welcome .ema__twinkle::before {
  content: ''; position: absolute; inset: 22%; background: var(--f2);
  -webkit-mask: url(../../img/svg/twinkle.svg) 50% 50% / contain no-repeat; mask: url(../../img/svg/twinkle.svg) 50% 50% / contain no-repeat;
}
#welcome .ema__twinkle--a { left: calc(50% - 5.4rem); top: 3.2rem; --tw: 1.5rem; }
#welcome .ema__twinkle--b { left: calc(50% + 3.4rem); top: 2.3rem; --tw: 1.1rem; }
#welcome .ema__twinkle--c { left: calc(50% + 4.9rem); top: 3.75rem; --tw: .8rem; }
#welcome .ema__twinkle--c::before { background: var(--ivory); }

/* Aisu's bubble, by her head (tail right), only in this shot (base.css hides it in the menu shot) */
#aisu-say {
  left: auto; right: calc(100vw - var(--safe-title-r)); width: max-content; max-width: 16rem;
  --tail-y: 1.55rem; padding: .95rem 1rem .6rem; font-size: var(--fs-body); line-height: 1.3; text-wrap: balance;
}
#aisu-say[hidden] { display: none; }

/* entrance: the plaque drops in on its cord and swings once; the cord and bunting ride with it */
@media (prefers-reduced-motion: no-preference) {
  body:not([data-shot="menu"]) #welcome .ema {
    --anim: ff-drop-in var(--t-stage) var(--spring-soft) var(--move-at, 0ms) backwards,
            ff-swing 600ms var(--ease-inout) calc(var(--move-at, 0ms) + 520ms);
    --swing: 1.2deg;
    animation: var(--anim);
  }
  body:not([data-shot="menu"]) #welcome .ema__deco .ema__mon { --anim: ff-pop 380ms var(--spring-pop) calc(var(--move-at, 0ms) + 220ms) backwards; animation: var(--anim); }
  body:not([data-shot="menu"]) #welcome .ema__twinkle { --anim: ff-pop 420ms var(--spring-pop) calc(var(--move-at, 0ms) + var(--tw-at, 260ms)) backwards; animation: var(--anim); }
  #welcome .ema__twinkle--b { --tw-at: 310ms; }
  #welcome .ema__twinkle--c { --tw-at: 350ms; }
  #welcome .hintbar { --anim: ff-rise-in var(--t-base) var(--ease-out) calc(var(--move-at, 0ms) + 200ms) backwards; animation: var(--anim); }
  /* menu shot: the stall keeps its frame, the new content rises (SPEC 3.5) */
  body[data-shot="menu"] #welcome .ema__paper { --anim: ff-rise-in var(--t-base) var(--ease-out) var(--move-at, 0ms) backwards; animation: var(--anim); }
}

/* narrow title shot: the plaque shrinks to the safe line; the field row stacks below 36rem */
@container (max-width: 36rem) {
  #welcome .field-row { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  #wc-preview { grid-template-columns: minmax(0, 1fr); row-gap: .4rem; }
  #wc-preview .preview__label { max-width: none; }
  #wc-preview .preview__where { display: none; }
  #welcome .band::before { display: none; }
  #welcome .row { flex-wrap: wrap; }
}

/* ============================================================================ menu shot: content of the stall */
body[data-shot="menu"] #welcome .ema { padding: 0; }
body[data-shot="menu"] #welcome .ema::before, body[data-shot="menu"] #welcome .ema::after,
body[data-shot="menu"] #welcome .ema__deco { display: none; }
body[data-shot="menu"] #welcome .ema__paper { padding: 1.75rem 1.35rem 1rem; }   /* clear of the hanging sign */
body[data-shot="menu"] #welcome .band { min-height: 2.9rem; padding: .2rem 1.1rem .15rem; margin-bottom: .2rem; border-radius: var(--r-s) var(--r-s) 0 0; }
body[data-shot="menu"] #welcome .band h2 { font-size: var(--fs-h2); }
body[data-shot="menu"] #welcome .field-text input { height: 2.9rem; }
body[data-shot="menu"] #welcome .form-msg { min-height: 2.2rem; }

body[data-shot="menu"] #form-create {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(15rem, .85fr);
  grid-template-areas: "band band band" "body body body" "name x prev" "msg msg ." "link link go";
  column-gap: 1.1rem; row-gap: .6rem;
}
body[data-shot="menu"] #form-create > .band { grid-area: band; }
body[data-shot="menu"] #form-create > .body { grid-area: body; }
body[data-shot="menu"] #form-create > .field-row,
body[data-shot="menu"] #form-create > .row { display: contents; }
body[data-shot="menu"] #form-create > .field-row > .field:first-child { grid-area: name; }
body[data-shot="menu"] #form-create > .field-row > .field:last-child { grid-area: x; }
body[data-shot="menu"] #wc-preview {
  grid-area: prev; grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: .45rem; align-self: stretch;
  padding: .6rem .9rem;
}
body[data-shot="menu"] #wc-preview .preview__label { max-width: none; }
body[data-shot="menu"] #wc-preview .plate { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av kick" "av name" "av x"; padding-block: .35rem .4rem; }
body[data-shot="menu"] #wc-preview .plate__name { font-size: var(--fs-body); }
body[data-shot="menu"] #wc-preview .plate__x { align-self: start; padding: 0; }
body[data-shot="menu"] #wc-preview .preview__where { display: none; }
body[data-shot="menu"] #wc-msg { grid-area: msg; }
body[data-shot="menu"] #btn-have-code { grid-area: link; justify-self: start; }
body[data-shot="menu"] #form-create button[type="submit"] { grid-area: go; justify-self: end; min-height: 3rem; font-size: var(--fs-btn); }
body[data-shot="menu"] #welcome button[type="submit"]::before { top: -1.2rem; }

body[data-shot="menu"] #form-code {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "band band" "body body" "note note" "code code" "msg row";
  column-gap: 1.1rem; row-gap: .6rem;
}
body[data-shot="menu"] #form-code > .band { grid-area: band; }
body[data-shot="menu"] #form-code > .body:not(.note) { grid-area: body; }
body[data-shot="menu"] #rc-switch { grid-area: note; }
body[data-shot="menu"] #form-code > .field-text { grid-area: code; }
body[data-shot="menu"] #rc-msg { grid-area: msg; }
body[data-shot="menu"] #form-code > .row { grid-area: row; align-self: center; margin-top: .45rem; }
body[data-shot="menu"] #form-code button[type="submit"] { min-height: 3rem; font-size: var(--fs-btn); }
/* the stall is short: the code helper moves up beside its label */
body[data-shot="menu"] #welcome .field-text--ticket { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
body[data-shot="menu"] #welcome .field-text--ticket > span { grid-row: 1; grid-column: 1; }
body[data-shot="menu"] #welcome .field-text--ticket::after { grid-row: 1; grid-column: 2; }
body[data-shot="menu"] #welcome .field-text--ticket input { grid-row: 2; grid-column: 1 / -1; }

/* the stall body is short (about 19rem of content at every 16:9 / 16:10 size): the compact stall drops the body copy */
@container (max-width: 50rem) {
  body[data-shot="menu"] #form-create { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "band band" "name x" "prev prev" "msg msg" "link go"; }
  body[data-shot="menu"] #form-create > .body { display: none; }
  body[data-shot="menu"] #wc-preview { grid-template-columns: auto minmax(0, 1fr); padding: .4rem .9rem; column-gap: 1rem; }
  body[data-shot="menu"] #wc-preview .plate { grid-template-columns: auto minmax(0, auto) minmax(0, auto); grid-template-areas: "av kick kick" "av name x"; }
  body[data-shot="menu"] #wc-preview .plate__x { align-self: end; padding-bottom: .1rem; }
}