/* Voidscape: Combat Calculator (/combat-calculator). Extends landing.css; same
   tokens, same voice as the Luck Altar. Two panels: the stats you set, and what
   they add up to. The exact level is the point of the page, so it carries the
   display face and the visual weight the rounded one usually gets. */

.calc {
	--glass: rgba(21, 16, 34, .66);
	background-image:
		radial-gradient(1100px 640px at 50% 300px, var(--void-2) 0%, var(--void) 62%),
		radial-gradient(680px 420px at 50% 500px, rgba(143, 85, 223, .10) 0%, transparent 72%);
}

.skip-link {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100;
	transform: translateY(-160%);
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	background: var(--void-2);
	color: var(--text);
	padding: 9px 13px;
}

.skip-link:focus { transform: translateY(0); }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.num { font-family: var(--display); font-weight: 400; letter-spacing: .02em; }

.panel {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--glass);
	backdrop-filter: blur(7px);
	padding: 20px 20px 22px;
}

.panel-title {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: .02em;
	margin-bottom: 14px;
}

.sub-title {
	font-family: var(--display);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: .02em;
	margin: 22px 0 10px;
	color: var(--muted);
}

.calc-layout {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
	max-width: 940px;
	margin: 0 auto 72px;
	padding: 0 18px;
}

@media (min-width: 780px) {
	.calc-layout { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---- stats ---- */

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
	gap: 10px;
}

.stat-field { display: flex; flex-direction: column; gap: 5px; }

.stat-name {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--faint);
}

.stat-input {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: rgba(9, 5, 16, .78);
	color: var(--text);
	padding: 9px 10px;
	font-family: var(--display);
	font-size: 17px;
	letter-spacing: .02em;
}

.stat-input:focus {
	outline: none;
	border-color: var(--line-strong);
}

/* Three buttons no longer fit one narrow line, so let them wrap. */
.stat-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

.stat-hint {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--faint);
}

.stat-hint strong { color: var(--muted); font-weight: 600; }

.ghost-button {
	border: 1px solid var(--line);
	border-radius: 9px;
	background: transparent;
	color: var(--muted);
	padding: 8px 14px;
	cursor: pointer;
	font-family: var(--body);
	font-size: 14px;
}

.ghost-button:hover {
	border-color: var(--line-strong);
	color: var(--text);
}

/* ---- result ---- */

.level-readout {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.level-value {
	font-size: 54px;
	line-height: 1;
	color: var(--gold-hi);
}

.level-exact {
	font-size: 14px;
	color: var(--faint);
}

.level-exact .num { color: var(--purple-hi); font-size: 18px; margin-left: 5px; }

.level-note {
	margin-top: 10px;
	font-size: 14px;
	color: var(--muted);
	min-height: 1.2em;
}

/* An impossible build is worth interrupting for, so this one gets a real edge
   rather than the muted treatment the rest of the notes share. */
.hits-warning {
	margin: 10px 0 4px;
	border: 1px solid rgba(212, 168, 83, .38);
	border-radius: 9px;
	background: rgba(212, 168, 83, .07);
	padding: 9px 11px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--gold-hi);
}

.hits-warning[hidden] { display: none; }

.gain-list { list-style: none; margin: 0; padding: 0; }

.gain-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--line);
}

.gain-list li:last-child { border-bottom: 0; }

.gain-name { color: var(--text); font-size: 14px; }

.gain-value {
	font-family: var(--display);
	letter-spacing: .02em;
	color: var(--purple-hi);
}

.gain-none { color: var(--faint); }

.fine-print {
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--faint);
}

/* Loadout planner shares the combat-level page's typography and panel treatment. */
.max-hit { max-width: 1120px; margin: 0 auto 72px; padding: 0 18px; }
.max-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.max-heading h2 { font-family: var(--display); font-size: 32px; font-weight: 400; }
.max-heading a { color: var(--muted); font-size: 14px; }
.max-heading .panel-title { margin: 0; }
.max-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.max-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.max-fields label, .max-ammo { justify-content: flex-end; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.max-fields input, .max-fields select, .max-ammo select {
    width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 8px;
    background: #120d1e; color: var(--text); font: inherit; font-size: 16px; padding: 9px 10px;
}
.max-hit :is(input,select,button,summary,a):focus-visible { outline: 2px solid #b58be5; outline-offset: 3px; }
.max-fields select:disabled, .max-ammo select:disabled { opacity: .7; }
.max-wide { grid-column: 1 / -1; }
.max-check { display: flex; align-items: start; gap: 9px; margin: 17px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.max-check input { margin-top: 4px; accent-color: #b58be5; }
.max-readout { font-size: 100px; line-height: 1.1; color: var(--gold, #e8cc8c); margin: 14px 0 20px; }
.max-result { position: sticky; top: 20px; }
#max-breakdown { line-height: 1.7; color: var(--muted); font-size: 14px; }
#max-bonuses { padding-left: 20px; margin-top: 16px; font-size: 14px; line-height: 1.8; }
#max-error { color: #f1b2ba; line-height: 1.6; }
#max-conditional { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
#max-conditional h4 { font-size: 15px; font-weight: 500; }
#max-conditional-value { font-size: 38px; color: var(--gold, #e8cc8c); }
#max-conditional-note { font-size: 13px; color: var(--muted); line-height: 1.6; }
.max-gear-panel { margin-top: 18px; }
.max-gear-panel .fine-print { margin: 12px 0 20px; }
.max-equipment { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.max-ammo { max-width: 520px; margin-top: 18px; }
#max-gear-status { margin: 14px 0; color: var(--muted); font-size: 14px; min-height: 20px; }
.max-hit details { border-top: 1px solid var(--line); padding-top: 16px; }
.max-hit summary { cursor: pointer; color: var(--muted); font-size: 14px; }
#max-requirements { padding-left: 22px; font-size: 13px; line-height: 1.8; margin-top: 12px; }
.max-footnote { margin-top: 20px; max-width: 900px; }
.max-hit [hidden] { display: none !important; }
#combat-level { scroll-margin-top: 30px; }
@media (max-width: 760px) {
    .max-layout { grid-template-columns: 1fr; }
    .max-result { position: static; }
    .max-equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .max-heading { align-items: start; flex-wrap: wrap; }
}
@media (max-width: 430px) {
    .max-hit .panel { padding: 18px 15px; }
}
@media (min-width: 761px) {
    #max-controls { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
    .max-layout { display: contents; }
    .max-layout > .panel:first-child { grid-column: 1; grid-row: 1; }
    .max-result { grid-column: 2; grid-row: 1 / 3; }
    .max-gear-panel { grid-column: 1; grid-row: 2; margin: 0; }
    .max-equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .max-footnote { grid-column: 1 / -1; margin: 0; }
}

#max-mobile-result { display: none; }
@media (max-width: 760px) {
    #max-mobile-result { display: block; position: sticky; top: 8px; z-index: 2; margin: 0 0 18px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #191124; color: var(--gold, #e8cc8c); font-size: 15px; }
}