/* T-085 N7 (TD-145, plan B4, B5, B6): the big screen's film titles, its waiting messages and its end panel in the menus' one
   look (ui/theme.css): titles in Cinzel, lines in Barlow, the theme's colours. The texts are unchanged (main.js, winend.js,
   downhud.js, players.js write them). Only transform and opacity move. (Out of index.html, which only links this file.)
   - #center (#big over #small, main.js big()): the start shot "They hold the line" with the players under it, the wave
     banners, a guest screen's waits ("Joining the game", "The host screen is gone / paused")
   - #paused: the host's pause (TD-124). #phoneLost: a phone does not answer (T-078). #replaced: a newer page is open
   - #over: the end panel, lost and won (TD-136): stars (a win), the title, a thin line, the words, the score table
     (players.js scoreList), how to restart */

/* ---------- the film titles: a title over a line; a slow fade and a slow grow ---------- */
/* (T-085 N2: inside the 5 % safe area: a long title wraps there, never under the screen's edge) */
#center { left: 0; right: 0; top: 34%; padding: 0 var(--safe-x); text-align: center;
  transition: top .6s, opacity var(--t-screen) var(--ease); }
body.lineup #center { top: 9%; }   /* the hero pick and the start shot: the title over the heads, not over the faces */
/* (Leon, N7 review: the host's pause hides the film title: "PAUSED" over "PLACE YOUR TOWERS" read as one mixed-up title. It
   comes back by itself on Play) */
body.paused #center { opacity: 0; }
/* (Leon, N7 review: the start shot's title stood white on the forest's pale sky. A soft dark fade at the top of the picture,
   only in the start shot; it ends above the heroes' heads. Behind the title: #center is its own layer) */
#center::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink-0) 68%, transparent) 0%,
    color-mix(in srgb, var(--ink-0) 42%, transparent) 16%, transparent 30%);
  transition: opacity var(--t-panel) var(--ease); }
body.startshot #center::before { opacity: 1; }
#big { font: 600 clamp(30px, 4vw, 58px)/1.12 var(--font-title); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  color: var(--text); text-shadow: var(--shadow-text); opacity: 0; transform: scale(.97);
  transition: opacity 1.1s ease, transform 4s ease-out; }
#big.show { opacity: 1; transform: scale(1); }
/* (B4: the players under the start shot's title, in Barlow; no italic) */
#small { margin-top: clamp(10px, 1.5vh, 16px); font: 500 clamp(16px, 1.3vw, 21px)/1.35 var(--font-ui); letter-spacing: .02em;
  color: var(--text); text-shadow: var(--shadow-text); opacity: 0; transition: opacity 1.4s ease .3s; }
#small.show { opacity: .92; }
body.lineup #big, body.lineup #small { text-shadow: 0 2px 26px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .7); }

/* ---------- the start shot and the end panel show only themselves (menus.js body.startshot, body.ended) ---------- */
/* (the bottom left corner's link line "4 phones connected · QR" and the keys' help go; a problem line stays: as the lobby) */
body.startshot #bl, body.startshot #help, body.ended #bl, body.ended #help { visibility: hidden; }
body.startshot #status.bad, body.ended #status.bad { visibility: visible; }

/* ---------- the host paused the game on his phone (TD-124): the sign in the middle, the picture still and dimmed ---------- */
#paused { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 1.8vh, 18px); padding: 0 var(--safe-x); text-align: center; pointer-events: none; opacity: 0;
  transition: opacity var(--t-screen) var(--ease);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink-0) 48%, transparent) 0%,
    color-mix(in srgb, var(--ink-0) 80%, transparent) 80%); }
body.paused #paused { opacity: 1; }
#paused .pbars { display: flex; gap: clamp(10px, 1vw, 14px); margin-bottom: 4px; }
#paused .pbars i { width: clamp(12px, 1.1vw, 16px); height: clamp(42px, 4.4vw, 60px); border-radius: 4px; background: var(--text);
  box-shadow: var(--shadow); }
#paused b { font: 600 clamp(40px, 4.4vw, 64px)/1.1 var(--font-title); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: var(--text); text-shadow: var(--shadow-text); }
#paused span { font: 500 clamp(16px, 1.3vw, 20px)/1.35 var(--font-ui); color: var(--text); opacity: .85; text-shadow: var(--shadow-text); }

/* ---------- a phone that does not answer (T-078, TD-127): "Phone lost - reconnecting" (a game alone also pauses) ---------- */
#phoneLost { position: fixed; left: 50%; top: calc(var(--bar) + 14px); transform: translateX(-50%); z-index: 9; display: none;
  align-items: center; gap: 10px; padding: 9px 20px 9px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--blood) 78%, var(--ink-0)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blood) 55%, var(--text)), var(--shadow);
  color: var(--text); font: 600 17px/1.2 var(--font-ui); letter-spacing: .01em; pointer-events: none; white-space: nowrap; }
#phoneLost.show { display: flex; }
#phoneLost::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--text);
  animation: lostblink 1s ease-in-out infinite alternate; }
@keyframes lostblink { from { opacity: 1; } to { opacity: .25; } }
body.down #phoneLost { top: calc(var(--bar) + 5vh + 134px); }   /* (step 40 join: under the hero's down ring, step 39) */

/* ---------- a newer game page took over (main.js): this one stops ---------- */
#replaced { position: fixed; inset: 0; z-index: 9; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 1.8vh, 18px); padding: 0 var(--safe-x); text-align: center; background: color-mix(in srgb, var(--ink-0) 94%, transparent); }
#replaced .ui-title { --title-size: clamp(22px, 2.1vw, 32px); max-width: 24em; line-height: 1.35; }
#replaced span { font: 500 clamp(16px, 1.3vw, 20px)/1.35 var(--font-ui); color: var(--text-dim); }

/* ---------- the end panel (B5): lost (a red tint) and won (gold stars) ---------- */
/* (under the top film bar: Exit and full screen stay usable; the HUD and the players panel are hidden: body.menu, body.ended) */
#over { position: fixed; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center;
  padding: calc(var(--bar) + 2vh) var(--safe-x); text-align: center; color: var(--text); font-family: var(--font-ui);
  background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--ink-0) 30%, transparent) 0%,
    color-mix(in srgb, var(--blood) 10%, color-mix(in srgb, var(--ink-0) 86%, transparent)) 100%); }
#over.show { display: flex; animation: ui-fade var(--t-title) var(--ease) backwards; }
#over.won { background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ink-0) 52%, transparent) 0%,
  color-mix(in srgb, var(--ink-0) 34%, transparent) 62%, color-mix(in srgb, var(--ink-0) 78%, transparent) 100%); }
.overBox { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
/* (each part rises in after the one before: --i in index.html) */
#over.show .overBox > * { animation: ui-rise var(--t-panel) var(--ease) backwards; animation-delay: calc(150ms + var(--i, 0) * 90ms); }
#overTitle { --title-size: clamp(36px, 4.2vw, 64px); margin: 0; letter-spacing: .2em; text-indent: .2em;
  color: color-mix(in srgb, var(--blood) 24%, var(--text));
  text-shadow: 0 0 44px color-mix(in srgb, var(--blood) 60%, transparent), var(--shadow-text); }
#over.won #overTitle { color: var(--text); text-shadow: 0 0 44px color-mix(in srgb, var(--gold) 34%, transparent), var(--shadow-text); }
#over.show .overBox #overTitle { animation-duration: var(--t-title); }
/* a thin line under the title that grows from its middle (red: lost; gold: won) */
.overBox .rule { display: block; width: clamp(140px, 16vw, 260px); height: 1px; margin: clamp(14px, 2.2vh, 24px) 0;
  background: linear-gradient(90deg, transparent, var(--blood), transparent); }
#over.won .rule { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
#over.show .overBox .rule { animation-name: over-rule; animation-duration: var(--t-title); }
@keyframes over-rule { from { opacity: 0; transform: scaleX(0); } }
/* the stars (a win, winend.js: 1 to 3 of them lit), over the title; each comes in after the one before */
#overStars { display: none; gap: clamp(10px, 1.2vw, 18px); margin-bottom: clamp(12px, 2vh, 20px); font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1; }
#over.won #overStars { display: flex; }
#overStars i { font-style: normal; color: color-mix(in srgb, var(--text) 16%, transparent); }
#overStars i.on { color: var(--gold); text-shadow: 0 0 26px color-mix(in srgb, var(--gold) 60%, transparent); }
#over.show #overStars i { animation: over-star 600ms var(--ease) backwards; animation-delay: 450ms; }
#over.show #overStars i:nth-child(2) { animation-delay: 600ms; }
#over.show #overStars i:nth-child(3) { animation-delay: 750ms; }
@keyframes over-star { from { opacity: 0; transform: scale(.6); } }
#overText { max-width: 40em; font: 500 clamp(15px, 1.2vw, 19px)/1.4 var(--font-ui); color: var(--text); opacity: .9;
  text-shadow: var(--shadow-text); }
/* the score table (players.js scoreList, TD-108: best first): rank, colour, player, hero, money, kills; alone: hero, money, kills.
   One panel; the columns line up over every row (subgrid; an old browser keeps the fixed columns) */
#scores { display: grid; grid-template-columns: 2em 12px auto auto auto auto; column-gap: clamp(12px, 1.3vw, 22px);
  min-width: min(440px, 100%); margin-top: clamp(20px, 3.2vh, 34px); padding: 4px clamp(16px, 1.6vw, 26px);
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
#scores.solo { grid-template-columns: auto auto auto; }
#scores:empty { display: none; }
#scores .srow { grid-column: 1 / -1; display: grid; grid-template-columns: 2em 12px 7em 7em 4.5em 5.5em;
  grid-template-columns: subgrid; align-items: center; height: clamp(40px, 5.2vh, 52px); text-align: left; white-space: nowrap;
  font: 600 clamp(15px, 1.15vw, 18px)/1 var(--font-ui); }
#scores.solo .srow { grid-template-columns: 7em 4.5em 5.5em; grid-template-columns: subgrid; }
#scores .srow + .srow { border-top: 1px solid var(--line); }
#scores .rk { font: 600 1.05em/1 var(--font-title); color: var(--text-dim); text-align: center; }
#scores .srow:first-child .rk { color: var(--gold); }   /* (the best) */
#scores.solo .rk { display: none; }
#scores i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ink-0); }
#scores .hero { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-weight: 500; }
#scores.solo .hero { color: var(--text); font-weight: 600; }
#scores .hero .ui-chip { padding: 2px 7px; font-size: 11px; }
#scores .sc, #scores .kl { text-align: right; font-variant-numeric: tabular-nums; }
#scores .kl { color: var(--text-dim); font-weight: 500; }
/* T-085 N10 (Leon, N7 review): this computer's record on the map under the table (players.js; "New record!" in gold) */
#overBest { margin-top: clamp(14px, 2.2vh, 22px); font: 500 clamp(14px, 1.1vw, 17px)/1.3 var(--font-ui); color: var(--text);
  opacity: .92; text-shadow: var(--shadow-text); }
#overBest:empty { display: none; }
#overBest b { color: var(--gold); font-weight: 600; }
/* how to restart: one line (the keyboard's R only once a key was pressed on this screen: menus.js body.keys) */
#overHow { margin-top: clamp(16px, 2.6vh, 28px); font: 500 clamp(14px, 1.05vw, 17px)/1.3 var(--font-ui); color: var(--text-dim);
  text-shadow: var(--shadow-text); }
#overHow .key { display: none; }
body.keys #overHow .key { display: inline; }

@media (prefers-reduced-motion: reduce) {
  #over.show .overBox > *, #over.show #overStars i { animation-name: ui-fade; }
}