/* Fonts ship with the game (SIL OFL, see fonts/OFL.txt): no third-party
   requests, and the apps look right offline from the first launch. */
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/pixelify-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/pixelify-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/pixelify-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/pixelify-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/pixelify-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/pixelify-sans-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/vt323-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/vt323-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Starfall Spire: a single, deliberately dark night-sky world. */
:root {
	color-scheme: dark;
	--night: #110c24;
	--night-deep: #0b0819;
	--panel: #1a1435;
	--panel-2: #231b47;
	--panel-3: #2e2460;
	--ink: #efe3c2;
	--muted: #a59bc9;
	--faint: #6f64a0;
	--line: #3d2f73;
	--outline: #07051a;
	--gold: #f2c14e;
	--gold-hi: #fff08a;
	--mana: #6fe3f2;
	--mana-deep: #1f6f86;
	--ember: #ff7a4d;
	--ok: #74d06b;
	--violet: #9e84ff;
	--font-display: 'Pixelify Sans', 'Courier New', monospace;
	--font-body: 'VT323', 'Courier New', monospace;
	--notch: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }
/* Rapid tapping is the game: no double-tap zoom anywhere (pinch zoom still
   works on the web; the app shells turn zoom off entirely). */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background-color: var(--night);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 1.15;
	-webkit-font-smoothing: none;
}

button, input, textarea { font: inherit; color: inherit; }

/* The dotted backdrop is one viewport-sized fixed layer, not painted down
   the whole page (long pages exhausted Android WebView tile memory). */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(158, 132, 255, 0.07) 1px, transparent 1px);
	background-size: 6px 6px;
	pointer-events: none;
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Safe areas: notches, the Dynamic Island and the home indicator in the app
   shells (viewport-fit=cover), and landscape side insets. */
.app {
	max-width: 1320px;
	margin: 0 auto;
	padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
	padding-block: max(12px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
}

/* Header ---------------------------------------------------------------- */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.brand {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	letter-spacing: 0.02em;
	color: var(--ink);
	text-shadow: 3px 3px 0 var(--outline);
}
.brand em { font-style: normal; color: var(--gold); }
.brand-star { color: var(--mana); display: inline-block; animation: twinkle 3s steps(4) infinite; }

.readout { display: flex; gap: 24px; flex-wrap: wrap; }

.stat { display: grid; justify-items: end; }
.stat .label, .label {
	font-family: var(--font-display);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--muted);
}
.stat .value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 42px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-shadow: 3px 3px 0 var(--outline);
}
.stat-mana .value { color: var(--mana); }
.stat-sigil .value { color: var(--gold); }
.sub { color: var(--muted); font-size: 18px; }

/* Layout ---------------------------------------------------------------- */
.layout {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.stage { display: grid; gap: 10px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); }

.viewport {
	position: relative;
	background: var(--outline);
	padding: 4px;
	clip-path: var(--notch);
	box-shadow: inset 0 0 0 2px var(--line);
}

#scene {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.scene-hint {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	margin: 0;
	padding: 2px 10px;
	background: rgba(7, 5, 26, 0.8);
	color: var(--gold-hi);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
	animation: bob 1.2s steps(2) infinite;
}

.toasts {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: grid;
	justify-items: center;
	gap: 6px;
	pointer-events: none;
}
.toast {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 4px 10px;
	background: var(--panel);
	border: 2px solid var(--gold);
	box-shadow: 3px 3px 0 var(--outline);
	font-size: 18px;
	animation: toast-in 0.18s steps(3);
}
.toast img { width: 22px; height: 22px; image-rendering: pixelated; }
.toast strong { color: var(--gold); font-weight: normal; }
.toast.toast-mana { border-color: var(--mana); }
.toast.toast-mana strong { color: var(--mana); }
.toast.toast-ember { border-color: var(--ember); }
.toast.toast-ember strong { color: var(--ember); }

/* Focus meter ----------------------------------------------------------- */
.focus { display: flex; align-items: center; gap: 10px; }
.focus-label { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ember); }
.focus-pct { min-width: 3.2em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.meter {
	flex: 1;
	height: 14px;
	background: var(--night-deep);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 1px var(--line);
	overflow: hidden;
}
.meter-fill {
	height: 100%;
	width: 0%;
	background: repeating-linear-gradient(90deg, var(--ember) 0 6px, #ffb86b 6px 8px);
	transition: width 0.1s steps(2);
}
.meter-sigil .meter-fill { background: repeating-linear-gradient(90deg, var(--mana) 0 6px, #b8f6ff 6px 8px); }

.buffs { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.buff {
	display: flex; align-items: center; gap: 6px;
	padding: 1px 8px;
	background: var(--panel);
	border: 2px solid var(--mana-deep);
	font-size: 17px;
}
.buff b { color: var(--mana); font-weight: normal; }
.buff.buff-click { border-color: var(--violet); }
.buff.buff-click b { color: var(--violet); }

/* Spellbook ------------------------------------------------------------- */
.book {
	position: relative;
	background: var(--panel);
	box-shadow: inset 0 0 0 2px var(--line);
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: calc(100vh - 110px);
}

.book-head { position: relative; display: flex; flex: none; background: var(--night-deep); }

/* The book's notched corners are painted, not clipped: a clip-path here would
   also clip the sticky tab bar, and iOS then moves that bar on the main
   thread, so long lists stutter while they scroll. */
.book-head::before,
.book::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: 4px;
	background:
		linear-gradient(var(--night), var(--night)) left / 4px 100% no-repeat,
		linear-gradient(var(--night), var(--night)) right / 4px 100% no-repeat;
	pointer-events: none;
}
.book-head::before { top: 0; }
.book::after { bottom: 0; }
.tabs {
	flex: 1;
	min-width: 0;
	/* Fades at the edge hint that the strip scrolls sideways. */
	mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
	display: flex;
	gap: 2px;
	padding: 8px 8px 0;
	background: var(--night-deep);
	overflow-x: auto;
	scrollbar-width: none;
}
.tab {
	flex: 1 0 auto;
	padding: 8px 12px 6px;
	background: var(--panel-2);
	border: 0;
	border-top: 2px solid var(--line);
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--muted);
	cursor: pointer;
	white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--panel); color: var(--gold); border-top-color: var(--gold); }
.badge {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 4px;
	margin-left: 4px;
	background: var(--gold);
	color: var(--outline);
	font-size: 13px;
	text-align: center;
}
.badge-sigil { background: var(--mana); }

.panel { padding: 12px; overflow-y: auto; min-height: 0; flex: 1; }

.panel-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.panel-note { color: var(--muted); font-size: 18px; margin: 0; }
.subhead {
	margin: 18px 0 8px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--violet);
}
.muted { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }

.seg { display: inline-flex; border: 2px solid var(--outline); }
.seg-btn {
	padding: 2px 10px;
	background: var(--panel-2);
	border: 0;
	border-right: 2px solid var(--outline);
	cursor: pointer;
	color: var(--muted);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn[aria-pressed="true"] { background: var(--gold); color: var(--outline); }

.btn {
	padding: 4px 12px;
	background: var(--panel-3);
	border: 2px solid var(--outline);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35), 2px 2px 0 var(--outline);
	cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--line); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-danger { color: var(--ember); }
.btn-danger.armed { background: var(--ember); color: var(--outline); }

.toggle { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--gold); }

/* Rows (summons & upgrades) -------------------------------------------- */
.list { display: grid; gap: 6px; }

.row-item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 6px 10px 6px 6px;
	background: var(--panel-2);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 1px var(--line);
	text-align: left;
	cursor: pointer;
}
.row-item img { width: 40px; height: 40px; image-rendering: pixelated; background: var(--night-deep); }
.row-item:hover:not(:disabled) { background: var(--panel-3); }
.row-item:active:not(:disabled) { transform: translate(1px, 1px); }
.row-item.affordable { box-shadow: inset 0 0 0 1px var(--gold); }
.row-item.unaffordable { opacity: 0.62; }
.row-item.locked { cursor: default; opacity: 0.5; }
.row-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.row-desc { font-size: 17px; color: var(--muted); overflow-wrap: anywhere; }
.row-side { display: grid; justify-items: end; gap: 2px; }
.row-cost { color: var(--mana); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-item.unaffordable .row-cost { color: var(--ember); }
.row-owned {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--ink);
	opacity: 0.85;
	line-height: 1;
}
.cost-mana::before { content: '◆ '; font-size: 0.8em; }

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.icon-grid button, .icon-grid img { width: 100%; aspect-ratio: 1; max-width: 100%; }
.icon-grid img { image-rendering: pixelated; background: var(--night-deep); border: 2px solid var(--outline); }
.icon-grid button { padding: 0; border: 0; background: none; cursor: pointer; }
.feat-grid button.earned img { border-color: var(--gold); }
.feat-grid button.selected img { outline: 2px solid var(--mana); }
.feat-detail { min-height: 2.4em; color: var(--muted); }
.feat-detail strong { color: var(--gold); font-weight: normal; }

/* Starfall -------------------------------------------------------------- */
.ascend-card {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 16px;
	padding: 14px;
	background: linear-gradient(180deg, #1c1745, #13102f);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 2px #2b4a7a;
}
.ascend-card h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; color: var(--mana); text-wrap: balance; }
.ascend-card p { margin: 0 0 8px; color: var(--ink); }
.ascend-card strong { color: var(--gold); font-weight: normal; }
.ascend-math { color: var(--muted) !important; font-size: 17px; }
.ascend-action { display: grid; gap: 4px; align-content: start; justify-items: stretch; text-align: center; }
.ascend-action .value { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; }
.sigil-glow { color: var(--mana); text-shadow: 0 0 0 transparent, 3px 3px 0 var(--outline); }
.meter-sigil { flex: none; }
.btn-ascend {
	margin-top: 6px;
	padding: 8px;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--mana);
	color: var(--outline);
}
.btn-ascend:hover:not(:disabled) { background: #b8f6ff; }

.talent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
/* Shop cards are small enough for two columns on phones. */
.talent-grid.wardrobe { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.wardrobe .talent-desc { font-size: 15px; line-height: 1.1; }
/* Narrow cards: "Equipped" drops under a long name instead of overflowing. */
.wardrobe .talent-head { flex-wrap: wrap; row-gap: 0; }
.wardrobe .talent-cost { font-size: 16px; }
.celestial-card { margin-bottom: 10px; box-shadow: inset 0 0 0 2px var(--gold); }
/* Familiar rarity frames. Unfound familiars are silhouettes. */
.familiar img { box-shadow: inset 0 0 0 2px var(--line); }
.familiar.rarity-rare img { box-shadow: inset 0 0 0 2px var(--mana); }
.familiar.rarity-epic img { box-shadow: inset 0 0 0 2px var(--violet); }
.familiar.rarity-legendary img { box-shadow: inset 0 0 0 2px var(--gold); }
.familiar.locked img { filter: grayscale(1) brightness(0.45) contrast(1.4); }
.familiar.locked .talent-name { color: var(--muted); }
.talent {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 4px 10px;
	padding: 8px;
	background: var(--panel-2);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 1px var(--line);
	text-align: left;
	cursor: pointer;
}
.talent img { width: 34px; height: 34px; image-rendering: pixelated; grid-row: span 2; background: var(--night-deep); }
.talent-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.talent-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.talent-level { color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.talent-desc { grid-column: 1 / -1; font-size: 17px; color: var(--muted); }
.talent-cost { grid-column: 1 / -1; color: var(--mana); }
.talent.affordable { box-shadow: inset 0 0 0 1px var(--mana); }
.talent.maxed { box-shadow: inset 0 0 0 1px var(--gold); cursor: default; }
.talent.maxed .talent-cost { color: var(--gold); }
.talent.locked { opacity: 0.5; cursor: default; }
.talent.locked .talent-cost { color: var(--faint); }
.talent:disabled.unaffordable .talent-cost { color: var(--ember); }

/* Tome ------------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; margin: 0; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.settings { display: grid; gap: 6px; }
.save-text {
	width: 100%;
	padding: 6px;
	background: var(--night-deep);
	border: 2px solid var(--line);
	font-size: 15px;
	resize: vertical;
	margin: 8px 0;
}
.row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Modal & tooltip -------------------------------------------------------- */
.modal {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background: rgba(7, 5, 26, 0.78);
	z-index: 20;
}
.modal-card {
	width: min(460px, 100%);
	padding: 18px;
	background: var(--panel);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 2px var(--gold), 6px 6px 0 var(--outline);
	animation: toast-in 0.2s steps(3);
}
.modal-card h2 { margin: 0 0 10px; font-family: var(--font-display); color: var(--gold); font-size: 24px; text-wrap: balance; }
.modal-body p { margin: 0 0 8px; }
.modal-body strong { color: var(--mana); font-weight: normal; }
.modal-actions { justify-content: flex-end; margin-top: 12px; }

.tooltip {
	position: fixed;
	z-index: 30;
	max-width: 260px;
	padding: 6px 10px;
	background: var(--night-deep);
	border: 2px solid var(--gold);
	box-shadow: 3px 3px 0 var(--outline);
	font-size: 17px;
	pointer-events: none;
}
.tooltip strong { display: block; color: var(--gold); font-family: var(--font-display); font-size: 15px; font-weight: 600; }

/* Motion ---------------------------------------------------------------- */
@keyframes twinkle { 50% { color: var(--gold-hi); } }
@keyframes bob { 50% { transform: translate(-50%, -2px); } }
@keyframes toast-in { from { transform: translateY(-6px); opacity: 0; } }

.tap-ripple {
	position: fixed;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 2px solid var(--mana);
	pointer-events: none;
	z-index: 8;
	animation: tap-ripple 0.45s steps(8) forwards;
}
@keyframes tap-ripple {
	from { transform: rotate(45deg) scale(0.3); opacity: 0.9; }
	to { transform: rotate(45deg) scale(1.5); opacity: 0; }
}
@keyframes dock-in { from { transform: translateY(70%); } }
@keyframes scene-grow { from { margin-inline: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes hint-breathe { 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The spellbook folds down on phones only; wide layouts show it beside the
   stage. */
.book-toggle, .field-hint { display: none; }

/* Narrow screens -------------------------------------------------------- */
/* Phones and portrait tablets stack the stage over the spellbook. Wide,
   near-square screens (foldables opened, landscape tablets) keep two
   columns, where a full-width scene would leave no room for the book. */
@media (max-width: 599px), (max-width: 900px) and (max-aspect-ratio: 1/1) {
	.book-toggle {
		display: block;
		flex: none;
		margin: 8px 8px 0 0;
		padding: 6px 14px;
		background: var(--panel-2);
		border: 0;
		border-top: 2px solid var(--line);
		box-shadow: -6px 0 6px var(--night-deep);
		color: var(--gold);
		font-size: 18px;
		cursor: pointer;
	}
	/* Folded: the tab bar docks at the bottom, the scene goes edge to edge,
	   and the open ground below it is a tap-to-cast field. */
	body.book-collapsed .panel { display: none; }
	body.book-collapsed .app { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
	body.book-collapsed .layout { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
	body.book-collapsed .stage { position: static; }
	body.book-collapsed .viewport { margin-inline: -16px; clip-path: none; }
	body.book-collapsed .book {
		position: fixed;
		inset: auto 0 0;
		z-index: 7;
		background: var(--night-deep);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		box-shadow: 0 -2px 0 var(--line);
	}
	body.book-collapsed .book-head { position: static; }
	body.book-collapsed .book-head::before,
	body.book-collapsed .book::after { display: none; }
	body.book-collapsed .field-hint {
		display: block;
		margin: 18px 0 0;
		text-align: center;
		color: var(--muted);
		animation: hint-breathe 3s ease-in-out infinite;
	}
	body.book-anim.book-collapsed .book { animation: dock-in 0.24s steps(6); }
	body.book-anim.book-collapsed .viewport { animation: scene-grow 0.24s steps(6); }
	body.book-anim:not(.book-collapsed) .panel:not([hidden]) { animation: panel-in 0.24s steps(6); }
	.layout { grid-template-columns: minmax(0, 1fr); }
	.stage {
		top: env(safe-area-inset-top, 0px);
		z-index: 5;
		background: var(--night);
		padding-block: 6px;
		gap: 6px;
	}
	.book { max-height: none; }
	.panel { overflow: visible; }
	/* Long lists: the tab bar sticks under the sticky stage (--stage-h is
	   measured in js/ui.mjs), and nothing scrolls into the notch strip. */
	.book-head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--stage-h, 0px)); z-index: 4; }
	body::after {
		content: '';
		position: fixed;
		inset: 0 0 auto;
		height: env(safe-area-inset-top, 0px);
		z-index: 6;
		background: var(--night);
	}
	.topbar { margin-bottom: 6px; }
	.stat { justify-items: start; }
}

@media (max-width: 560px) {
	body { font-size: 18px; }
	.brand { font-size: 24px; }
	.readout { gap: 16px; width: 100%; justify-content: space-between; }
	.stat .value { font-size: 26px; }
	.ascend-card { grid-template-columns: minmax(0, 1fr); }
	.row-item { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; }
	.row-item img { width: 34px; height: 34px; }
	.buffs { font-size: 15px; }
}

/* Celestial Alignment ---------------------------------------------------- */
.row-item.aligned { box-shadow: inset 0 0 0 1px var(--mana), 0 0 0 1px var(--mana-deep); }
.row-item.aligned .row-desc { color: #b8f6ff; }
.buff.buff-align { border-color: var(--mana); background: #122645; }
.buff.buff-align b { color: #b8f6ff; }

/* Rift Trials ------------------------------------------------------------ */
:root { --rift: #d45ad4; --rift-deep: #4a1c55; }

.tab-rift { color: #e9a6ee; }
.tab-rift[aria-selected="true"] { color: var(--rift); border-top-color: var(--rift); }
.badge-rift { background: var(--rift); color: var(--outline); }

.rift-hud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 6px 10px;
	background: var(--rift-deep);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 2px var(--rift);
}
.rift-hud-name { font-family: var(--font-display); font-weight: 700; color: #ffb0ff; }
.rift-hud-time { font-family: var(--font-display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
.rift-hud-time.urgent { color: var(--ember); animation: twinkle 0.5s steps(2) infinite; }
.rift-hud-score b { color: var(--mana); font-weight: normal; }
.rift-hud-next { color: var(--muted); flex: 1; min-width: 10ch; }
.btn-small { padding: 1px 10px; font-size: 17px; }
body.in-rift .viewport { box-shadow: inset 0 0 0 2px var(--rift); }

.rift-card {
	display: grid;
	gap: 6px;
	padding: 14px;
	background: linear-gradient(180deg, #2a1440, #160c2a);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 2px var(--rift-deep);
}
.rift-card h2 { margin: 0; font-family: var(--font-display); font-size: 24px; color: #ffb0ff; text-wrap: balance; }
.rift-pitch { margin: 0; }
.mutators { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; }
.mutator { display: grid; padding: 6px 8px; background: rgba(7, 5, 26, 0.55); border-left: 3px solid var(--rift); }
.mutator strong { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #ffb0ff; }
.mutator span { color: var(--muted); font-size: 17px; }
.rift-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.btn-rift {
	padding: 8px 18px;
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--rift);
	color: var(--outline);
}
.btn-rift:hover:not(:disabled) { background: #ffb0ff; }

.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tier {
	display: grid;
	gap: 2px;
	padding: 8px;
	background: var(--panel-2);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 1px var(--line);
	font-size: 16px;
	overflow-wrap: anywhere;
}
.tier strong { font-family: var(--font-display); font-size: 15px; }
.tier-bronze strong { color: #e0a36a; }
.tier-silver strong { color: #cfd6e6; }
.tier-gold strong { color: var(--gold); }
.tier-astral strong { color: #ffb0ff; }
.tier-score { color: var(--mana); font-variant-numeric: tabular-nums; }
.tier-reward { color: #ffb0ff; }
.tier.claimed { box-shadow: inset 0 0 0 1px var(--ok); }

.ladder { margin: 0; padding: 0 0 0 2.2em; display: grid; gap: 2px; }
.ladder li { padding: 2px 8px; background: var(--panel-2); }
.ladder li::marker { color: var(--faint); font-variant-numeric: tabular-nums; }
.ladder li > span { display: inline-flex; }
.ladder li { display: list-item; }
.ladder .ladder-score { float: right; color: var(--mana); font-variant-numeric: tabular-nums; }
.ladder li.you { background: var(--rift-deep); box-shadow: inset 0 0 0 1px var(--rift); }
.ladder li.you .ladder-name { color: #ffb0ff; }
.ladder li.echo .ladder-name { color: var(--muted); }
.ladder-tag { margin-left: 6px; padding: 0 4px; font-size: 13px; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.ladder-report { float: right; margin-left: 8px; padding: 0 4px; background: none; border: 0; color: var(--faint); cursor: pointer; }
.ladder-report:hover { color: var(--ember); }

.name-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); }
.name-field input {
	flex: 1;
	min-width: 12ch;
	padding: 2px 8px;
	background: var(--night-deep);
	border: 2px solid var(--line);
}
.relic img { background: #1d0f2c; }
.relic.maxed { box-shadow: inset 0 0 0 1px var(--rift); }
.relic.maxed .talent-cost, .relic.maxed .talent-level { color: #ffb0ff; }
.relic.affordable { box-shadow: inset 0 0 0 1px #ffb0ff; }

@media (max-width: 560px) {
	.tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rift-hud { gap: 4px 10px; }
	.rift-hud-time { font-size: 20px; }
}

/* Juice ------------------------------------------------------------------ */
.brand em {
	background: linear-gradient(90deg, var(--gold) 0 40%, #fff6c8 50%, var(--gold) 60% 100%) 0 0 / 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shimmer 4s steps(24) infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

.stat .value.pop { animation: pop 0.35s steps(4); }
.badge.pop, .rift-hud.pop { animation: pop 0.4s steps(4); }
@keyframes pop {
	30% { transform: scale(1.18); filter: brightness(1.5); }
	100% { transform: scale(1); filter: none; }
}
.stat .value { display: inline-block; transform-origin: right center; }

.row-item.flash { animation: flash 0.35s steps(3); }
@keyframes flash {
	0% { background: #fff6c8; }
	40% { background: var(--gold); }
	100% { background: var(--panel-2); }
}

.meter.charged { box-shadow: inset 0 0 0 1px var(--ember), 0 0 0 2px rgba(255, 122, 77, 0.35); animation: charged 0.5s steps(2) infinite; }
@keyframes charged { 50% { box-shadow: inset 0 0 0 1px #ffb86b, 0 0 0 3px rgba(255, 184, 107, 0.5); } }

.row-item.affordable .row-cost::before { animation: twinkle 1.6s steps(2) infinite; }
.badge-rift { animation: twinkle 1.2s steps(2) infinite; }
.brand em { text-shadow: none; filter: drop-shadow(3px 3px 0 var(--outline)); }

/* Opening cutscene ------------------------------------------------------- */
.intro {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: linear-gradient(0deg, rgba(7, 5, 26, 0.92), rgba(7, 5, 26, 0));
	pointer-events: none;
}
.intro-caption {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(16px, 2.4vw, 22px);
	color: var(--ink);
	text-shadow: 2px 2px 0 var(--outline);
	text-wrap: balance;
}
.intro-caption.show { animation: caption-in 0.6s steps(6); }
.intro-skip { pointer-events: auto; flex: none; }
@keyframes caption-in { from { opacity: 0; transform: translateY(6px); } }

/* Wardrobe --------------------------------------------------------------- */
.wardrobe + .wardrobe { margin-top: 8px; }
.wardrobe .talent img { background: #0f0b22; }
.wardrobe .talent.maxed { box-shadow: inset 0 0 0 1px var(--mana); }
.wardrobe .talent.maxed .talent-level { color: var(--mana); }
.select-field { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.range-field { display: flex; align-items: center; gap: 10px; color: var(--muted); padding-left: 26px; }
.range-field input { flex: 1; max-width: 220px; accent-color: var(--gold); cursor: pointer; }
.select-field select {
	padding: 2px 6px;
	background: var(--night-deep);
	border: 2px solid var(--line);
	color: var(--ink);
	font: inherit;
}

/* Guided goals ------------------------------------------------------------ */
.goal {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(60px, 28%);
	align-items: center;
	gap: 4px 10px;
	padding: 4px 10px;
	background: #13241c;
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 1px #2f5a3a;
}
.goal-label { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ok); white-space: nowrap; }
.goal-text { overflow-wrap: anywhere; }
.meter-goal .meter-fill { background: repeating-linear-gradient(90deg, var(--ok) 0 6px, #b8f0a0 6px 8px); }
.toast.toast-goal { border-color: var(--ok); }
.toast.toast-goal strong { color: var(--ok); }
@media (max-width: 560px) {
	.goal { grid-template-columns: auto minmax(0, 1fr); font-size: 16px; }
	.goal .meter { grid-column: 1 / -1; }
}

/* Summon milestones & evolution ------------------------------------------ */
.row-item { position: relative; }
.row-bar { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; background: rgba(7, 5, 26, 0.6); pointer-events: none; }
.row-bar-fill { height: 100%; width: 0; background: var(--violet); transition: width 0.2s steps(3); }
.row-item.evo-1 .row-bar-fill { background: #aab4d6; }
.row-item.evo-2 .row-bar-fill { background: #d9a53a; }
.row-item.evo-3 .row-bar-fill { background: #3fb8d8; }
.row-item.evo-4 .row-bar-fill { background: #c048d0; }
.row-item.evo-2 .row-name { color: #fff08a; }
.row-item.evo-3 .row-name { color: #c8fbff; }
.row-item.evo-4 .row-name { color: #ffc8ff; }
.row-item.deny { animation: deny 0.3s steps(6); }
.row-item.deny .row-cost { color: var(--ember); }
@keyframes deny {
	20% { transform: translateX(-3px); }
	40% { transform: translateX(3px); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(2px); }
}

/* Header perks ------------------------------------------------------------ */
.perks { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pill {
	padding: 4px 12px;
	border: 2px solid var(--outline);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 0.04em;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--outline);
}
.pill:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.pill:disabled { opacity: 0.5; cursor: default; }
.pill-daily { background: var(--gold); color: var(--outline); animation: twinkle 1.4s steps(2) infinite; }
.pill-boost { background: var(--panel-3); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold), 2px 2px 0 var(--outline); }
.pill-boost.active { background: #3a2a12; }
.pill-boost span { color: var(--ink); font-family: var(--font-body); font-size: 16px; }

/* Demo ad overlay --------------------------------------------------------- */
.ad-mock { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(7, 5, 26, 0.85); }
.ad-mock-card {
	display: grid;
	gap: 10px;
	width: min(420px, 100%);
	padding: 18px;
	background: #f4f1ff;
	color: #1a1435;
	border: 2px solid var(--outline);
	box-shadow: 6px 6px 0 var(--outline);
}
.ad-mock-card strong { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #6f64a0; }
.ad-mock-card p { margin: 0; }
.ad-mock-card .meter { background: #d9d4f0; }
.ad-mock-card .btn { justify-self: end; background: #1a1435; color: #f4f1ff; }

/* Support ------------------------------------------------------------------- */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.support-card {
	display: grid;
	gap: 6px;
	align-content: start;
	padding: 12px;
	background: var(--panel-2);
	border: 2px solid var(--outline);
	box-shadow: inset 0 0 0 1px var(--line);
}
.support-card.seal { box-shadow: inset 0 0 0 1px var(--ok); }
.support-card strong { font-family: var(--font-display); font-size: 16px; color: var(--ok); }
.support-card.vault strong { color: var(--mana); }
.support-card ul { margin: 0; padding-left: 1.1em; }
.license-row { margin-top: 8px; }
.license-input { flex: 1; min-width: 12ch; padding: 2px 8px; background: var(--night-deep); border: 2px solid var(--line); color: var(--ink); }
.fine-print { font-size: 16px; }
.fine-print a { color: var(--mana); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Schools & backups ------------------------------------------------------- */
.schools .talent.maxed { box-shadow: inset 0 0 0 1px var(--violet); }
.schools .talent.maxed .talent-level { color: var(--violet); }
.backup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.backup-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 8px; background: var(--panel-2); }
@media (max-width: 560px) {
	.perks { margin-left: 0; width: 100%; }
}

/* Phone compaction: keep the sticky play area small and toasts out of the way. */
@media (max-width: 560px) {
	.toasts { top: 4px; left: 4px; right: 4px; gap: 3px; }
	.toast { font-size: 13px; padding: 1px 6px; gap: 5px; box-shadow: 2px 2px 0 var(--outline); }
	.toast img { width: 14px; height: 14px; }
	.stage { gap: 4px; padding-block: 4px; }
	.focus .meter { height: 8px; }
	.focus-label, .focus-pct { font-size: 12px; }
	.goal { padding: 2px 8px; font-size: 14px; gap: 2px 8px; }
	.goal-label { font-size: 11px; }
	.goal .meter { height: 5px; border-width: 1px; }
	.buffs { gap: 3px; }
	.buff { font-size: 13px; padding: 0 5px; }
	.topbar { gap: 8px; }
	.pill { font-size: 12px; padding: 2px 8px; }
}