/* Sign-in pages for Terms of Survival. Same visual language as the game's loading veil (Dallas/Assets/WebGLTemplates/Dallas/game.css):
   charcoal cards, brand-orange top border, mint primary action, amber focus ring, system fonts. No script, no inline style. */
:root{color-scheme:dark;--veil-top:#0d191c8c;--veil-bottom:#0d191cd9;--ink:#F4F1EC;--muted:#aebbb2;--bg:#15181D;--mint:#a3e6bd;--amber:#efb45d;--brand:#E26727}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Three rows: the card is centred in the middle one; the caption sits at the bottom of the last, below the card on short screens, never over it. */
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;gap:12px;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  font:15px/1.5 system-ui,sans-serif;background:#0d191c;color:var(--ink)}
/* The whole concept frame behind everything: contain, never cropped, letterboxed on the page colour. Darkened like the game's
   loading veil. A fixed layer, not background-attachment, so phones do not judder. */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(var(--veil-top),var(--veil-bottom)),url(splash-1600.webp) center/contain no-repeat #0d191c}
@media(max-width:1000px){body::before{background-image:linear-gradient(var(--veil-top),var(--veil-bottom)),url(splash-960.webp)}}
/* Square and tall windows have room to show the frame unobstructed: art pinned to the top at full width (it is 1672:941), lightly
   veiled because nothing sits on it, and the card starts just below it instead of over its middle. */
@media(max-aspect-ratio:1/1){
  :root{--veil-top:#0d191c26;--veil-bottom:#0d191c59}
  body{grid-template-rows:calc(100vw * 941 / 1672 - 20px) auto 1fr}
  body::before{background-position:center,center top}
}

.card{grid-row:2;width:min(460px,100%);padding:30px;background:var(--bg);border:1px solid #c0d3b342;border-top:3px solid var(--brand);border-radius:15px;box-shadow:0 30px 100px #0006}
.card.wide{width:min(720px,100%)}
.card-brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.eyebrow{font:10px/1.5 ui-monospace,monospace;letter-spacing:.13em;color:var(--mint)}
.protected{display:flex;align-items:center;font:9px/1 ui-monospace,monospace;letter-spacing:.13em;color:var(--muted);white-space:nowrap}
.protected img{display:block;width:100px;height:25px;object-fit:contain}
.concept-note{grid-row:3;align-self:end;justify-self:end;margin:0;color:#f4f1ecb3;font-size:11px;letter-spacing:.08em;text-transform:uppercase}

h1{margin:18px 0 8px;font-size:34px;line-height:1.1;letter-spacing:.06em}
h1.small{font-size:26px;letter-spacing:-.02em}
h2{margin:22px 0 8px;font-size:17px}
.entry h2{margin-top:18px}
p,ul{margin:10px 0;color:var(--muted)}
ul{padding-left:20px}
li{margin:6px 0}
strong{color:var(--ink);overflow-wrap:anywhere}
.pitch{font-size:16px;color:var(--ink)}
.fine{font-size:12px}
.message{padding:10px 12px;border-left:3px solid var(--amber);background:#efb45d14;color:var(--ink)}
a{color:var(--mint);text-underline-offset:3px}

label{display:block;margin-top:14px;font-size:13px;color:var(--muted)}
input[type=email]{display:block;width:100%;min-height:46px;margin-top:6px;padding:10px 12px;font:16px/1.3 system-ui,sans-serif;color:var(--ink);background:#1e2b30;border:1px solid #7caa8b80;border-radius:7px}
button,.button{display:block;width:100%;min-height:46px;margin-top:12px;padding:11px 14px;font:inherit;font-weight:600;text-align:center;text-decoration:none;color:var(--ink);background:#2a383a;border:1px solid #7f978480;border-radius:7px;cursor:pointer}
button:hover,.button:hover{background:#3b4d4b}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--mint);color:#15342b;border-color:transparent}
.primary:hover{background:#c0f0ce}
.danger{color:#ffb4a8;border-color:#c9614f}
.or{margin:12px 0 0;text-align:center;font:10px/1 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--ink);cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--mint)}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.row form{flex:0 0 auto}
.row button{width:auto;margin-top:0}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* Phones held sideways (844×390): the pitch beside the form instead of above it, so the form is not below the fold. */
@media(min-width:700px) and (max-height:600px){
  body{padding-top:10px;gap:6px}
  .card.split{width:min(820px,100%);display:grid;grid-template-columns:5fr 6fr;gap:0 28px;align-items:start;padding:16px 22px}
  h1{font-size:28px;margin-top:12px}
  .entry h2{margin-top:0}
  label,.check{margin-top:8px}
  button,.button,input[type=email]{min-height:42px}
  button,.button{margin-top:8px;padding:8px 14px}
  .or{margin-top:8px}
  .fine{margin:6px 0 0}
}
@media(max-width:420px){.card{padding:22px 18px}h1{font-size:28px}}
@media(prefers-reduced-motion:no-preference){button,.button{transition:background .16s}}