/* ══════════════════════════════════════════════════════════════════
   break-this-server — game page styles.
   Built on the site's existing tokens (style.css :root). No new palette.
   ══════════════════════════════════════════════════════════════════ */

.game-intro { max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1.5rem 1.5rem; }
.game-title {
	font-family: var(--mono);
	font-weight: 600;
	font-size: clamp(2rem, 5vw, 3.1rem);
	letter-spacing: -0.02em;
	margin: 0.6rem 0 1rem;
}
.game-lede { font-size: 1.12rem; max-width: 60ch; color: var(--ink); }
.game-sub { margin-top: 0.9rem; max-width: 62ch; color: var(--ink-dim); }
.game-sub a, .game-lede a, .game-foot a { color: var(--acc-2); text-decoration: none; border-bottom: 1px solid transparent; }
.game-sub a:hover, .game-lede a:hover, .game-foot a:hover { border-bottom-color: var(--acc-2); }

.game { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem 1rem; }

/* ── ladder selector ─────────────────────────────────────────────── */
.rungs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6rem;
	margin-bottom: 1.4rem;
}
.rung {
	text-align: left;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0.85rem 0.95rem;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease);
}
.rung:hover { transform: translateY(-2px); border-color: var(--ink-faint); }
.rung.on { border-color: var(--acc); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--acc); }
.rung-code { font-family: var(--mono); font-weight: 700; color: var(--acc); font-size: 0.95rem; }
.rung.on .rung-code { color: var(--acc); }
.rung-name { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); }
.rung-desc { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.45; }

/* the wall reads cool/solid rather than green-go */
.rung[data-rung="3"] .rung-code { color: var(--acc-2); }
.rung[data-rung="3"].on { box-shadow: inset 0 0 0 1px var(--acc-2); border-color: var(--acc-2); }

/* ── main grid: rig + terminal ───────────────────────────────────── */
.game-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1.2rem; align-items: start; }
.rig {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1.2rem 1.25rem;
}
.rig-label { font-family: var(--mono); font-size: 0.78rem; color: var(--acc-2); margin-bottom: 0.7rem; }
.rig-explain { font-size: 0.9rem; color: var(--ink-dim); line-height: 1.6; }
.rig-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.tool {
	font-family: var(--mono);
	font-size: 0.72rem;
	padding: 0.28rem 0.55rem;
	border-radius: 6px;
	border: 1px solid var(--line);
	color: var(--ink-dim);
	background: var(--bg-2);
}
.tool-hot { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); color: var(--warn); }
.tool-gone { border-style: dashed; color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--bad); }

/* ── the session terminal ────────────────────────────────────────── */
.game-term { min-height: 320px; }
.game-console {
	min-height: 300px;
	max-height: 46vh;
	overflow-y: auto;
	margin: 0;
}
.cline { display: inline; }
.verdict {
	display: block;
	margin-top: 0.9rem;
	padding: 0.7rem 0.85rem;
	border-radius: 8px;
	font-weight: 600;
	white-space: pre-wrap;
}
.verdict-win { background: color-mix(in srgb, var(--bad) 14%, transparent); border: 1px solid var(--bad); color: #ff9a9a; }
.verdict-block { background: color-mix(in srgb, var(--acc) 12%, transparent); border: 1px solid var(--acc); color: var(--acc); }

/* ── attacker input ──────────────────────────────────────────────── */
.attack { margin-top: 1.4rem; }
.attack-label { display: block; font-family: var(--mono); font-size: 0.86rem; color: var(--ink-dim); margin-bottom: 0.6rem; }
.presets { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.6rem; }
.preset {
	font-family: var(--mono);
	font-size: 0.75rem;
	padding: 0.35rem 0.7rem;
	border-radius: 20px;
	border: 1px solid var(--line);
	color: var(--ink-dim);
	background: var(--panel);
	cursor: pointer;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.preset:hover { border-color: var(--acc-2); color: var(--acc-2); }
.attack-input {
	width: 100%;
	font-family: var(--mono);
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	resize: vertical;
	transition: border-color 0.2s var(--ease);
}
.attack-input:focus { outline: none; border-color: var(--acc); }
.attack-input::placeholder { color: var(--ink-faint); }
.attack-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.85rem; flex-wrap: wrap; }
.attack-actions .btn { cursor: pointer; }
.attack-actions .btn:disabled { opacity: 0.5; cursor: wait; }
.score { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-faint); margin-left: auto; }

.game-foot {
	max-width: 64ch;
	margin: 2.2rem auto 4rem;
	padding: 0 1.5rem;
	font-size: 0.92rem;
	color: var(--ink-dim);
	line-height: 1.7;
}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 820px) {
	.rungs { grid-template-columns: repeat(2, 1fr); }
	.game-grid { grid-template-columns: 1fr; }
	.game-console { max-height: 52vh; }
	.score { margin-left: 0; width: 100%; }
}
@media (max-width: 460px) {
	.rungs { grid-template-columns: 1fr; }
}