/* =========================================================================================
   The Scene - the look of the sign-in screens (Main / Log in / Create account / Signed in /
   Two saves).

   ⚠ THIS FILE IS THE ART CHAT'S, same rule as loading.css. Every colour and font used on these
   five screens is a named variable in the block directly below, copied number-for-number from
   the locked design canvas (design/design-canvas/artboards/Tokens.dc.html). Change a value here
   and it changes on every screen in the flow, because nothing below re-states a raw colour.

   WHY A SEPARATE FILE FROM loading.css: loading.css owns the bare Unity canvas and the plain
   download bar underneath everything - the "is the game even starting" layer. This file owns
   the account panel that sits on top of that while a friend decides whether to sign in. Two
   different jobs, two different lifetimes: this file can be handed to the art chat for a full
   restyle without anyone needing to understand how Unity's own progress bar works.
   ========================================================================================= */

/* ---- THE TWO FACES, FOR REAL NOW (2026-08-18) ----
   Both are free Google Fonts under the SIL Open Font License - the files and their licenses sit
   right next to this one, in TemplateData/fonts/. Archivo Black ships as one weight (it only
   ever needed to be heavy); Chakra Petch ships Regular for body copy and SemiBold for anywhere
   a label needs to stand out without going all the way to the display face. The system look-
   alikes stay listed after the real files, so a browser that somehow can't load a local font
   file still lands somewhere close rather than on a totally different typeface. */
@font-face {
  font-family: 'Archivo Black';
  src: url('fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  /* ---- THE LOCKED PALETTE (Tokens.dc.html) ---- */
  --night:        #03081c;   /* the ground under everything */
  --sea-glass-a:   #12348c;  /* panel gradient, top */
  --sea-glass-b:   #08184a;  /* panel gradient, bottom */
  --sun-gold:      #ffd24a;  /* headings, panel edge, words worth keeping */
  --violet-a:      #c04ff5;  /* the one button that matters, top */
  --violet-b:      #7b19c9;  /* the one button that matters, bottom */
  --signal-cyan:   #59e0ff;  /* second choices, links, focus */
  --mint:          #2be0a8;  /* right, available, ready */
  --bright-ink:    #eaf7ff;  /* anything you must be able to read */
  --soft-ink:      #a8cbe8;  /* body text and English glosses */
  --quiet-ink:     #5f7ea3;  /* version numbers, captions, footers */

  --face-display: 'Archivo Black', 'Arial Black', sans-serif;
  --face-text:    'Chakra Petch', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------------------
   THE STAGE
   One full-screen layer that every one of the five screens draws inside. Sits above the Unity
   canvas and above loading.css's plain download bar - #load is the fallback for a slow
   connection; #acct-stage is what a friend actually sees first.
   --------------------------------------------------------------------------------------- */
#acct-stage {
  position: fixed;
  inset: 0;
  z-index: 20;                 /* above #load (z-index 10) and the game canvas */
  overflow: hidden;
  font-family: var(--face-text);
  background: var(--night);
  transition: opacity 0.5s ease;
}

/* Fades out exactly like the plain loading screen does, once the handoff to Unity is settled -
   see account.js's showGame(). */
#acct-stage.done { opacity: 0; pointer-events: none; }

/* The plaza photo. Same crop offset on every screen so moving between them never shifts the
   picture underneath (the design canvas's own note, carried over unchanged).
   ⚠ REBUILT 2026-08-19 (NZ) ON object-fit: cover RATHER THAN THE OLD width%/left%/top% HACK.
   The old approach sized the image as a fixed percentage of the CONTAINER's width and let height
   follow the image's own aspect ratio - which only actually covers the container at the one
   window shape it was tuned against. At any other window shape (in particular an un-maximized,
   not-full-height browser window) the image fell short of the container's height, and the plain
   --night background showed through as a visible band along the top or bottom - the "blue
   margin" NZ saw. object-fit: cover is the real fix: the browser guarantees full coverage at
   ANY container size, cropping whichever axis needs it, so the gap cannot occur regardless of
   window shape. object-position replaces the old left/top math - it is the point of the PICTURE
   that stays anchored to the same point of the CONTAINER, so raising the vertical number shows
   more of the image's lower half (the plaza floor, Madison, the fountain) at the cost of the sky
   and the mountain peaks above the statue. */
#acct-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tuned a second time (2026-08-19, NZ): "lowered a little" - pulled back from 82% toward
     center, giving the top of the frame some sky/rooftop breathing room instead of cropping
     almost all of it away. "Moved left" - pulled the horizontal anchor down from 38% toward the
     sea-and-statue side of the photo, away from the colorful buildings on the right. */
  object-position: 22% 65%;
  display: block;
  filter: saturate(1.05) brightness(0.88);
}
#acct-bg-clip { position: absolute; inset: 0; overflow: hidden; }

/* Blue vignette so the glass panel stays the only bright thing on screen. */
#acct-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(4,16,58,.16) 0%, rgba(4,14,52,.66) 62%, rgba(2,8,32,.9) 100%);
}
/* Sea light falling from the top - "outdoors, daytime, Mediterranean" in one stroke. */
#acct-sealight {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(120,220,255,.15), rgba(0,0,0,0) 34%);
}
/* Dark band behind the title so SOLMARA stays legible over whatever the photo is doing. */
#acct-titleband {
  position: absolute; left: 0; right: 0; top: 0; height: 22vh; min-height: 150px;
  background: linear-gradient(180deg, rgba(2,10,36,.94), rgba(2,10,36,.68) 55%, rgba(2,10,36,0));
}

/* Turns the two-saves screen darker and stiller than the rest of the flow - something has
   stopped, so the picture should stop competing for attention (design canvas's own note). */
#acct-stage.dim #acct-bg { filter: saturate(.9) brightness(.55); }
#acct-stage.dim #acct-vignette { background: radial-gradient(120% 90% at 50% 45%, rgba(4,16,58,.4) 0%, rgba(4,14,52,.82) 62%, rgba(2,8,32,.96) 100%); }

/* ---- TITLE LOCKUP. Solmara is the logo; the game name sits small underneath (locked
     decision 8), so a later rename never touches the biggest piece of art on the screen. ---- */
#acct-title-wrap {
  position: absolute; left: 0; right: 0; top: 30px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  pointer-events: none;               /* never steals a click meant for the panel below it */
}
#acct-brand {
  font-family: var(--face-display);
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: .3em; text-indent: .3em;
  color: #ffe487;
  text-shadow: 0 0 22px rgba(255,190,60,.55), 0 2px 6px rgba(0,0,0,.9);
}
#acct-subtitle {
  font-size: 10.5px;
  letter-spacing: .42em; text-indent: .42em;
  color: rgba(224,242,255,.8);
  text-shadow: 0 2px 6px rgba(0,0,0,.95);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------
   THE GLASS PANEL - the one element every screen actually is.
   --------------------------------------------------------------------------------------- */
.acct-panel {
  position: absolute;
  left: 50%;
  width: min(472px, 92vw);
  padding: 28px 34px 24px;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(18,52,140,.84), rgba(8,24,74,.92));
  border: 2px solid rgba(255,214,110,.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 26px 60px rgba(2,8,30,.7), 0 0 60px rgba(70,180,255,.25);
  backdrop-filter: blur(3px) saturate(1.2);
  -webkit-backdrop-filter: blur(3px) saturate(1.2);
  box-sizing: border-box;
  display: none;                       /* account.js turns exactly one of these on at a time */
  max-height: 88vh;
  overflow-y: auto;
}
.acct-panel.showing { display: block; }

/* Entry screen (Main / Signed-in): centred in the frame. */
.acct-panel.pos-center { top: 53%; transform: translate(-50%, -50%); }
/* Log in / Signed-in variant when the panel is short enough to hang from the title instead. */
.acct-panel.pos-top    { top: 150px; transform: translateX(-50%); }
/* Create account: taller form, hung a little lower so its own heading clears the wordmark. */
.acct-panel.pos-top-tall { top: 112px; transform: translateX(-50%); }
/* Two saves: the widest panel in the flow. */
.acct-panel.wide { width: min(560px, 94vw); }

.acct-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.acct-head img {
  width: 46px; height: 46px; flex: none; object-fit: contain; display: block;
  filter: drop-shadow(0 0 16px rgba(255,150,40,.75));
}
.acct-head-icon {
  width: 46px; height: 46px; flex: none; border-radius: 9px;
  background: rgba(255,214,110,.12); border: 1px solid rgba(255,214,110,.5);
  display: flex; align-items: center; justify-content: center;
}
.acct-head-text { display: flex; flex-direction: column; gap: 3px; }
.acct-head-es {
  font-family: var(--face-display);
  font-size: 20px; line-height: 1; color: var(--sun-gold); letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,30,100,.9);
}
.acct-head-en { font-size: 11px; letter-spacing: .2em; color: rgba(178,222,255,.78); }

.acct-desc {
  margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: rgba(219,240,255,.9);
}
.acct-desc-en { margin: 0 0 20px; font-size: 12px; color: rgba(160,200,235,.72); line-height: 1.5; }

/* ---- The three/two choices - Spanish leads at full size, the English gloss sits quietly
     beneath it (locked decision 1). Every choice clears 60px, well over the 44px touch min. --- */
.acct-choice {
  height: 60px;
  border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  width: 100%;
  transition: transform .12s ease, filter .12s ease;
}
.acct-choice:hover { transform: translateY(-2px); filter: brightness(1.08); }
.acct-choice:active { transform: translateY(1px); filter: brightness(0.96); }
.acct-choice + .acct-choice { margin-top: 11px; }

.acct-choice.primary {
  height: 64px;
  background: linear-gradient(180deg, var(--violet-a), var(--violet-b));
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 5px 0 #4c0c86, 0 12px 26px rgba(120,20,200,.45), 0 1px 0 rgba(255,255,255,.6) inset;
}
.acct-choice.primary .acct-choice-es {
  font-family: var(--face-display); font-size: 16px; color: #fff; letter-spacing: .1em;
  text-shadow: 0 2px 3px rgba(50,0,90,.7);
}
.acct-choice.primary .acct-choice-en { font-size: 10.5px; letter-spacing: .2em; color: rgba(255,255,255,.72); }

.acct-choice.secondary {
  background: linear-gradient(180deg, rgba(89,224,255,.2), rgba(8,40,90,.6));
  border-color: rgba(120,220,255,.7);
  box-shadow: 0 4px 0 rgba(8,60,110,.8), 0 1px 0 rgba(255,255,255,.35) inset;
}
.acct-choice.secondary .acct-choice-es { font-size: 15px; font-weight: 700; color: #eaf9ff; letter-spacing: .1em; }
.acct-choice.secondary .acct-choice-en { font-size: 10.5px; letter-spacing: .2em; color: rgba(190,230,255,.62); }

.acct-choice.offline {
  background: rgba(4,14,44,.6);
  border-color: rgba(180,225,255,.38);
  flex-direction: row; gap: 11px;
}
.acct-choice.offline .acct-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none;
  box-shadow: 0 0 10px rgba(43,224,168,.85);
  animation: acct-pulse 2s ease-in-out infinite;
}
@keyframes acct-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.acct-choice.offline .acct-choice-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.acct-choice.offline .acct-choice-es { font-size: 14.5px; font-weight: 600; color: rgba(223,242,255,.9); letter-spacing: .1em; }
.acct-choice.offline .acct-choice-en { font-size: 10.5px; letter-spacing: .2em; color: rgba(190,225,255,.55); }

/* Big single Play button on the returning-player screen - deliberately the largest thing
   there, because someone already signed in is here to get past this screen, not read it. */
.acct-choice.play {
  height: 96px;
  background: linear-gradient(180deg, var(--violet-a), var(--violet-b));
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 6px 0 #4c0c86, 0 16px 34px rgba(120,20,200,.5), 0 1px 0 rgba(255,255,255,.6) inset;
}
.acct-choice.play .acct-choice-es {
  font-family: var(--face-display); font-size: 30px; color: #fff; letter-spacing: .14em;
  text-shadow: 0 3px 4px rgba(50,0,90,.75);
}
.acct-choice.play .acct-choice-en { font-size: 11.5px; letter-spacing: .24em; color: rgba(255,255,255,.75); }

/* Quiet full-width back / secondary text-only button (Log in / Create account "Atrás"). */
.acct-back {
  margin-top: 10px; height: 46px; border-radius: 9px;
  background: rgba(4,14,44,.55); border: 1px solid rgba(180,225,255,.35);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: rgba(223,242,255,.88); font-size: 13px; font-weight: 600; letter-spacing: .1em;
  cursor: pointer; width: 100%; font-family: inherit;
}
.acct-back:hover { filter: brightness(1.1); }

/* ---- Form fields (Log in / Create account) ---- */
.acct-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.acct-field-label { display: flex; align-items: baseline; gap: 8px; }
.acct-field-label .es { font-size: 10.5px; letter-spacing: .22em; color: #ffd97a; }
.acct-field-label .en { font-size: 10px; letter-spacing: .16em; color: rgba(178,222,255,.5); }
.acct-field input {
  height: 44px; padding: 0 14px; border-radius: 7px;
  background: rgba(3,12,40,.82); border: 1px solid rgba(120,200,255,.35);
  box-shadow: 0 -3px 8px rgba(0,0,0,.5) inset;
  color: var(--bright-ink); font-size: 15px; font-family: inherit;
  box-sizing: border-box; width: 100%;
}
/* Cyan focus halo - the one focus colour used on all four surfaces. */
.acct-field input:focus {
  outline: none; border-color: var(--signal-cyan);
  box-shadow: 0 0 0 3px rgba(89,224,255,.18), 0 -3px 8px rgba(0,0,0,.5) inset;
}
.acct-field .hint { font-size: 10.5px; letter-spacing: .12em; margin-top: 4px; }
.acct-field .hint.ok { color: var(--mint); }
.acct-field .hint.bad { color: #ff8fa8; }

/* ---- The error line. Lives inside the panel, warm red, and nowhere else - so a wrong
     password never reads as the game itself having broken. ---- */
.acct-error {
  margin-top: 14px; padding: 10px 14px; border-radius: 7px;
  background: rgba(255,90,120,.1); border-left: 3px solid rgba(255,110,140,.75);
  font-size: 12px; color: rgba(255,190,200,.9); line-height: 1.45;
  display: none;
}
.acct-error.showing { display: block; }

/* ---- Footer links, shared by every panel. ---- */
.acct-footer {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,214,110,.28);
  display: flex; flex-direction: column; gap: 7px;
  font-size: 11.5px; color: rgba(197,225,255,.72);
}
.acct-footer.row { flex-direction: row; justify-content: space-between; align-items: center; }
.acct-footer a { color: inherit; text-decoration: none; font-weight: 600; }
.acct-footer a.cyan { color: var(--signal-cyan); font-weight: 400; }
.acct-footer a.danger { color: rgba(255,120,150,.62); font-weight: 400; font-size: 11px; }

/* ---- "Where you left off" (Signed-in screen). Filled in once Unity reports its own local
     save - see account.js's onLocalSummary. Shows a quiet placeholder until then, because the
     browser page cannot read Unity's save on its own (see the storage-trap note in account.js). --- */
#acct-progress {
  margin-top: 16px; padding: 14px 16px; border-radius: 9px;
  background: rgba(4,14,44,.6); border: 1px solid rgba(180,225,255,.28);
  display: flex; align-items: center; gap: 14px;
}
#acct-progress-icon {
  width: 44px; height: 44px; border-radius: 7px; flex: none;
  background: linear-gradient(150deg, var(--sea-glass-a), var(--sea-glass-b));
  border: 1px solid rgba(255,214,110,.5);
  display: flex; align-items: center; justify-content: center;
}
#acct-progress-text { display: flex; flex-direction: column; gap: 3px; }
#acct-progress-label { font-size: 10px; letter-spacing: .24em; color: #ffd97a; }
#acct-progress-line1 { font-size: 13px; color: var(--bright-ink); line-height: 1.4; }
#acct-progress-line2 { font-size: 11.5px; color: rgba(160,215,255,.8); }

/* ---- Two saves: the pair of equal choices, each showing what it actually contains. ---- */
.acct-conflict-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.acct-conflict-card {
  padding: 16px 18px; border-radius: 10px;
  display: flex; flex-direction: column; gap: 9px;
  cursor: pointer; font-family: inherit; text-align: left; border: none; color: inherit;
}
.acct-conflict-card.cloud { background: rgba(89,224,255,.12); border: 1.5px solid rgba(120,220,255,.7); }
.acct-conflict-card.local { background: rgba(255,214,110,.1); border: 1.5px solid rgba(255,214,110,.6); }
.acct-conflict-kicker { font-size: 10px; letter-spacing: .22em; }
.acct-conflict-card.cloud .acct-conflict-kicker { color: var(--signal-cyan); }
.acct-conflict-card.local .acct-conflict-kicker { color: #ffd97a; }
.acct-conflict-headline { font-size: 14px; color: var(--bright-ink); line-height: 1.4; }
.acct-conflict-sub { font-size: 11.5px; color: rgba(168,203,232,.8); }
.acct-conflict-pick {
  margin-top: 4px; height: 50px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.acct-conflict-card.cloud .acct-conflict-pick { background: linear-gradient(180deg, rgba(89,224,255,.24), rgba(8,40,90,.64)); border: 1.5px solid rgba(120,220,255,.75); }
.acct-conflict-card.local .acct-conflict-pick { background: rgba(255,214,110,.18); border: 1.5px solid rgba(255,214,110,.75); }
.acct-conflict-pick .es { font-size: 12.5px; font-weight: 700; }
.acct-conflict-card.cloud .acct-conflict-pick .es { color: #eaf9ff; }
.acct-conflict-card.local .acct-conflict-pick .es { color: #ffe487; }
.acct-conflict-pick .en { font-size: 9.5px; letter-spacing: .16em; }
.acct-conflict-card.cloud .acct-conflict-pick .en { color: rgba(190,230,255,.6); }
.acct-conflict-card.local .acct-conflict-pick .en { color: rgba(255,214,110,.65); }

/* ---- Version + quiet status, bottom-right, on every screen. Doubles as the "still
     downloading the game" readout - see account.js's setDownloadStatus(). ---- */
#acct-version {
  position: absolute; right: 20px; bottom: 16px;
  font-size: 10.5px; letter-spacing: .2em; color: rgba(205,232,255,.55);
  text-align: right;
}
#acct-download-status { display: block; margin-top: 2px; color: rgba(255,214,110,.7); }
#acct-download-status:empty { display: none; }

/* Busy state: the button that was clicked shows an ellipsis instead of freezing silently. */
.acct-choice[data-busy="1"] .acct-choice-es,
.acct-choice[data-busy="1"] .acct-choice-en { visibility: hidden; }
.acct-choice[data-busy="1"] { position: relative; pointer-events: none; opacity: .85; }
.acct-choice[data-busy="1"]::after {
  content: "···"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}