/*
  Rogue Exodus — public client entry styling (PLAN.md T42).

  Palette and proportions come from the phone HUD (`ui/phone/hud_style.gd`) and
  `docs/ART_DIRECTION.md`: amber signal on cold charcoal glass, condensed
  industrial type, nothing decorative that does not read at arm's length on a
  375 px phone.

  Typography is the family the client already ships (`ui/fonts/`, SIL OFL 1.1,
  `docs/ASSET_LICENSES.md`); the files are copied into the site at stage time so
  the page never reaches a font CDN.
*/

@font-face {
	font-family: "Barlow Condensed";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("fonts/BarlowCondensed-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Barlow Condensed";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
}

:root {
	--amber: #ffa833;
	--amber-hot: #ffd480;
	--amber-dim: #8c5c21;
	--backplate: #0b0c0e;
	--glass-top: #16191f;
	--glass-bottom: #05060a;
	--bevel: rgba(168, 188, 219, 0.22);
	--text: #e6edf7;
	--text-dim: #94a1b5;
	--text-muted: #667082;
	--danger: #ff4f38;
	--safe: #57e58a;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--backplate);
	color: var(--text);
	font-family: "Barlow Condensed", "Segoe UI Semibold", system-ui, sans-serif;
	font-weight: 500;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	min-height: 100svh;
	/* Two rakes of light off the atrium, then the flat plate underneath. */
	background-image:
		radial-gradient(120% 70% at 50% -10%, rgba(255, 168, 51, 0.16), transparent 60%),
		radial-gradient(90% 60% at 50% 110%, rgba(90, 120, 160, 0.10), transparent 65%);
	background-attachment: fixed;
}

.shell {
	max-width: 460px;
	margin: 0 auto;
	padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-height: 100svh;
}

/* --- brand -------------------------------------------------------------- */

.brand {
	text-align: center;
	padding-top: 12px;
}

.brand-mark {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	border: 2px solid #4b5158;
	background:
		linear-gradient(180deg, #2c3034 0%, #14161a 70%);
	position: relative;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* The Overseer's visor slit: the same mark as `icon.png`, drawn in two rules. */
.brand-mark::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 52%;
	width: 30px;
	height: 7px;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	background: linear-gradient(90deg, var(--amber-dim), var(--amber-hot), var(--amber-dim));
	box-shadow: 0 0 14px rgba(255, 168, 51, 0.75);
}

.brand h1 {
	margin: 0;
	font-size: 34px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
}

.brand h1 span {
	display: block;
	color: var(--amber);
	margin-top: 6px;
}

.brand-role {
	margin: 8px 0 0;
	font-size: 13px;
	letter-spacing: 0.34em;
	color: var(--text-muted);
}

/* --- card --------------------------------------------------------------- */

.card {
	background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
	border: 1px solid var(--bevel);
	border-radius: 14px;
	padding: 20px 18px 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.field-label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--amber);
	margin: 0 0 4px;
}

.field-label-tight {
	margin-top: 18px;
}

.field-hint {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--text-dim);
	letter-spacing: 0.02em;
}

.code-input {
	display: block;
	width: 100%;
	padding: 14px 10px;
	border-radius: 10px;
	border: 2px solid #333a42;
	background: #0e1116;
	color: var(--text);
	font-family: inherit;
	font-weight: 600;
	font-size: 52px;
	line-height: 1.05;
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	text-align: center;
	text-transform: uppercase;
	caret-color: var(--amber);
}

.code-input::placeholder {
	color: #333a42;
	letter-spacing: 0.18em;
}

.code-input:focus,
.text-input:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px rgba(255, 168, 51, 0.18);
}

.code-input.is-full {
	border-color: var(--amber);
	color: var(--amber-hot);
}

.text-input {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 2px solid #333a42;
	background: #0e1116;
	color: var(--text);
	font-family: inherit;
	font-size: 22px;
	letter-spacing: 0.06em;
}

.text-input::placeholder {
	color: var(--text-muted);
}

.join-button {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 18px 12px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--amber-hot), var(--amber));
	color: #17120a;
	font-family: inherit;
	font-weight: 600;
	font-size: 26px;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(255, 168, 51, 0.22);
	transition: transform 90ms ease, filter 90ms ease;
}

.join-button:active {
	transform: translateY(2px);
	filter: brightness(0.92);
}

.join-button:disabled {
	background: #262b31;
	color: var(--text-muted);
	box-shadow: none;
	cursor: default;
}

.status {
	margin: 14px 2px 0;
	min-height: 20px;
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--text-dim);
}

.status.is-error {
	color: var(--danger);
}

.status.is-working {
	color: var(--amber);
}

.status.is-good {
	color: var(--safe);
}

/* --- LAN fallback ------------------------------------------------------- */

.fallback {
	border-top: 1px solid #21262d;
	padding-top: 16px;
}

.fallback summary {
	list-style: none;
	cursor: pointer;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--text-dim);
	padding: 6px 0;
}

.fallback summary::-webkit-details-marker {
	display: none;
}

.fallback summary::after {
	content: " +";
	color: var(--amber-dim);
}

.fallback[open] summary::after {
	content: " \2013";
}

.fallback-copy {
	margin: 8px 0 14px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-muted);
}

.ghost-button {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 14px 12px;
	border: 2px solid #3a424b;
	border-radius: 10px;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 18px;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	cursor: pointer;
}

.ghost-button:active {
	border-color: var(--amber);
}

/* --- build stamp -------------------------------------------------------- */

.build {
	margin-top: auto;
	padding-top: 18px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.18em;
	color: #3d444d;
}

.privacy-link {
	display: block;
	margin-top: 6px;
	color: #3d444d;
	text-decoration: underline;
	letter-spacing: 0.1em;
}

.privacy-link:hover,
.privacy-link:focus {
	color: var(--amber);
}

/*
  Native builds, under the same folded-away treatment as the LAN fallback: the
  room code is still the only thing on screen that matters (PLAN.md T40b), and
  a player who wants an installer goes looking for one.
*/
.download-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.download-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	color: inherit;
	text-decoration: none;
}

.download-link:active {
	background: rgba(255, 255, 255, 0.08);
}

.download-label {
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.92rem;
}

.download-detail {
	font-size: 0.78rem;
	opacity: 0.66;
}