/*
 * Gram Zero — the whole stylesheet.
 *
 * The rule the interface is built on: the canvas is the game, and every pixel
 * of chrome has to justify taking space from it. What survived is the mass
 * readout, the three composition bars, and the ability names. Everything else
 * a player needs is drawn in the world.
 *
 * No fonts are loaded. The system stack is used everywhere, and numbers use
 * the monospace stack so a mass that is changing every frame does not shuffle
 * its own layout.
 */

:root {
	--ink: #d6e2d0;
	--ink-dim: #93a08d;
	--ground: #191c17;
	--panel: rgba(18, 21, 16, 0.86);
	--edge: rgba(214, 226, 208, 0.14);
	--swarm: #7fd4c1;
	--warn: #e06c54;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-text-size-adjust: 100%;
	overscroll-behavior: none;
}

#stage {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
}

/* ---- screens -------------------------------------------------------- */

.screen {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem;
	overflow-y: auto;
	background: rgba(12, 14, 11, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.screen[hidden] { display: none; }

.title__inner { max-width: 40rem; }

h1 {
	margin: 0 0 0.6rem;
	font-size: clamp(2.6rem, 11vw, 5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.95;
}

h1 span { color: var(--swarm); }

h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.4rem, 5vw, 2rem);
	letter-spacing: -0.02em;
}

.lede {
	margin: 0 0 1.6rem;
	max-width: 34rem;
	font-size: clamp(1rem, 2.6vw, 1.12rem);
	line-height: 1.55;
	color: var(--ink-dim);
}

.sub {
	margin: 0 0 1rem;
	max-width: 32rem;
	color: var(--ink-dim);
	line-height: 1.5;
}

.sub--quiet { font-size: 0.85rem; opacity: 0.72; }

.screen--sheet { flex-direction: column; text-align: center; }
.screen--sheet .sub { margin-left: auto; margin-right: auto; }

.stack { display: flex; flex-direction: column; gap: 0.6rem; max-width: 26rem; }
.screen--sheet .stack { margin: 0 auto; width: min(26rem, 100%); }

.btn {
	appearance: none;
	border: 1px solid var(--edge);
	border-radius: 10px;
	background: rgba(214, 226, 208, 0.06);
	color: var(--ink);
	font: 600 1rem/1 var(--sans);
	padding: 0.85rem 1.2rem;
	cursor: pointer;
	transition: background 0.14s, border-color 0.14s, transform 0.08s;
}

.btn:hover { background: rgba(214, 226, 208, 0.12); border-color: rgba(214, 226, 208, 0.3); }
.btn:active { transform: translateY(1px); }

.btn--big {
	background: var(--swarm);
	border-color: var(--swarm);
	color: #10241f;
	font-size: 1.1rem;
	padding: 1rem 1.4rem;
}

.btn--big:hover { background: #96e0cf; border-color: #96e0cf; }
.btn--ghost { background: transparent; }

.best {
	margin: 1.2rem 0 0;
	font: 0.85rem/1.5 var(--mono);
	color: var(--swarm);
}

.controls {
	list-style: none;
	margin: 1.8rem 0 0;
	padding: 1.2rem 0 0;
	border-top: 1px solid var(--edge);
	display: grid;
	gap: 0.55rem;
	font-size: 0.85rem;
}

.controls li {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 0.2rem 0.8rem;
	align-items: baseline;
}

.controls b { color: var(--ink); font-weight: 600; }
.controls span { color: var(--ink-dim); font-family: var(--mono); font-size: 0.8rem; }
.controls em {
	grid-column: 2;
	color: var(--ink-dim);
	opacity: 0.72;
	font-style: normal;
	font-size: 0.78rem;
}

.settings { display: grid; gap: 0.8rem; margin: 0 auto 1.2rem; width: min(20rem, 100%); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.setting--check { justify-content: flex-start; gap: 0.5rem; }

.setting__note {
	margin: -0.4rem 0 0;
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--ink-dim);
	opacity: 0.75;
	text-align: left;
}
.setting input[type="range"] { flex: 1; accent-color: var(--swarm); }
.setting input[type="checkbox"] { accent-color: var(--swarm); }

.statgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.6rem;
	margin: 0 auto 1.4rem;
	width: min(30rem, 100%);
}

.stat {
	border: 1px solid var(--edge);
	border-radius: 8px;
	padding: 0.7rem 0.5rem;
	display: grid;
	gap: 0.2rem;
}

.stat span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
.stat strong { font: 700 1.05rem/1 var(--mono); }

/* ---- HUD ------------------------------------------------------------- */

.hud {
	position: fixed;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
		max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

.hud[hidden] { display: none; }

.hud__mass {
	position: absolute;
	top: max(0.75rem, env(safe-area-inset-top));
	left: max(0.75rem, env(safe-area-inset-left));
	width: min(13rem, 42vw);
}

.tiername {
	display: block;
	font: 700 0.72rem/1 var(--sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--swarm);
}

.massnum {
	display: block;
	margin: 0.15rem 0 0.35rem;
	font: 700 clamp(1.15rem, 4.4vw, 1.5rem)/1 var(--mono);
	/* Tabular figures, or a mass ticking up every frame jitters its own box. */
	font-variant-numeric: tabular-nums;
}

.tierbar {
	height: 4px;
	border-radius: 2px;
	background: rgba(214, 226, 208, 0.12);
	overflow: hidden;
}

.tierbar__fill { display: block; height: 100%; width: 0; transition: width 0.12s linear; }

.tiernext {
	display: block;
	margin-top: 0.25rem;
	font: 500 0.68rem/1.3 var(--mono);
	color: var(--ink-dim);
}

/*
 * The composition bars. Placed directly under the mass, because playtesting
 * the first build showed people reading the top-left corner and nowhere else,
 * and a player who never notices these is playing a much worse game.
 */
.comp {
	position: absolute;
	top: calc(max(0.75rem, env(safe-area-inset-top)) + 5.4rem);
	left: max(0.75rem, env(safe-area-inset-left));
	width: min(13rem, 42vw);
	display: grid;
	gap: 0.3rem;
}

.comprow {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "label trait" "track track";
	gap: 0.1rem 0.4rem;
	align-items: center;
	opacity: 0.62;
	transition: opacity 0.2s;
}

.comprow.is-on { opacity: 1; }

.comprow__label {
	grid-area: label;
	font: 600 0.63rem/1 var(--sans);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

.comprow__trait {
	grid-area: trait;
	font: 700 0.63rem/1 var(--sans);
	letter-spacing: 0.05em;
	color: rgba(147, 160, 141, 0.4);
	transition: color 0.2s;
}

.comprow.is-on .comprow__trait { text-shadow: 0 0 10px currentColor; }

.comprow__track {
	grid-area: track;
	position: relative;
	height: 5px;
	border-radius: 3px;
	background: rgba(214, 226, 208, 0.1);
	overflow: hidden;
}

.comprow__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 3px;
	transition: width 0.14s linear;
}

/* Where the trait switches on. A bar with no visible target is just decoration. */
.comprow__mark {
	position: absolute;
	top: -1px;
	bottom: -1px;
	width: 2px;
	background: rgba(255, 255, 255, 0.55);
}

.hud__right {
	position: absolute;
	top: max(0.75rem, env(safe-area-inset-top));
	right: max(0.75rem, env(safe-area-inset-right));
	pointer-events: auto;
}

.iconbtn {
	appearance: none;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--edge);
	border-radius: 8px;
	background: var(--panel);
	color: var(--ink);
	font-size: 0.7rem;
	cursor: pointer;
}

.abilities {
	position: absolute;
	bottom: max(0.75rem, env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	justify-content: center;
}

.chip {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--edge);
	border-radius: 7px;
	background: var(--panel);
	padding: 0.32rem 0.5rem;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	transition: opacity 0.2s;
}

.chip__key { font: 700 0.62rem/1 var(--mono); color: var(--swarm); }
.chip__name { font: 600 0.7rem/1 var(--sans); }

.chip__cool {
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	width: 0;
	background: var(--swarm);
}

/* Locked reads as "not yet", not as "broken": dimmed, still legible, still
 * named, so the player knows what is coming. */
.chip.is-locked { opacity: 0.3; }
.chip.is-cool { opacity: 0.6; }

.prompt {
	position: absolute;
	bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 3rem);
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	max-width: min(34rem, 88vw);
	text-align: center;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 9px;
	padding: 0.55rem 0.9rem;
	font-size: 0.85rem;
	line-height: 1.45;
	animation: rise 0.24s ease-out;
}

.prompt[hidden] { display: none; }

.banner {
	position: absolute;
	top: 22%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	max-width: min(30rem, 88vw);
	display: grid;
	gap: 0.3rem;
	animation: rise 0.3s ease-out;
}

.banner[hidden] { display: none; }

.banner strong {
	font-size: clamp(1.2rem, 5vw, 1.8rem);
	letter-spacing: -0.02em;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

.banner span {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--ink-dim);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

@keyframes rise {
	from { opacity: 0; transform: translate(-50%, 8px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- touch ----------------------------------------------------------- */

.touch {
	position: absolute;
	right: max(0.75rem, env(safe-area-inset-right));
	bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 3rem);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	pointer-events: auto;
}

.touch[hidden] { display: none; }

.tbtn {
	appearance: none;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	border: 1px solid rgba(214, 226, 208, 0.28);
	background: rgba(18, 21, 16, 0.7);
	color: var(--ink);
	font: 600 0.7rem/1 var(--sans);
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}

.tbtn:active { background: rgba(127, 212, 193, 0.3); }

/*
 * A landscape phone has no vertical room for the control list, so that goes.
 * The composition bars do NOT go — they are half the game, and a build that
 * hides them on mobile is a different, worse game on mobile. They compress.
 */
@media (max-height: 460px) {
	.controls { display: none; }
	.lede { margin-bottom: 1rem; font-size: 0.95rem; }
	.hud__mass { width: min(10rem, 34vw); }
	.massnum { font-size: 1.15rem; }
	.tiernext { display: none; }
	.comp { top: calc(max(0.75rem, env(safe-area-inset-top)) + 3.6rem); width: min(10rem, 34vw); gap: 0.18rem; }
	.comprow { grid-template-areas: "label trait" "track track"; }
	.comprow__label, .comprow__trait { font-size: 0.55rem; }
	.comprow__track { height: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.prompt, .banner { animation: none; }
	.tierbar__fill, .comprow__fill { transition: none; }
}