/* The Dreaming House - styles. No web fonts or images; uses the theme's font. */

/* ------------------------------------------------------------------ *
 * Theme tokens
 * ------------------------------------------------------------------ */
.hxr-root {
	--hxr-accent: #a78bfa;
	--hxr-bg: #110f26;
	--hxr-surface: #1b1838;
	--hxr-surface-2: #252149;
	--hxr-border: rgba(255, 255, 255, 0.12);
	--hxr-text: #ece9ff;
	--hxr-muted: #a8a3c7;
	--hxr-good: #34d399;
	--hxr-warn: #f87171;
	--hxr-stage: radial-gradient(ellipse at 50% 40%, #1f1b44 0%, #0b0a1c 75%);
}
.hxr-root.hxr-theme-light {
	--hxr-bg: #f6f4ff;
	--hxr-surface: #ffffff;
	--hxr-surface-2: #efebff;
	--hxr-border: rgba(31, 27, 58, 0.13);
	--hxr-text: #1f1b3a;
	--hxr-muted: #5d587a;
	--hxr-good: #059669;
	--hxr-warn: #dc2626;
	--hxr-stage: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #e9e4fb 80%);
}

/* ------------------------------------------------------------------ *
 * Divi-proof reset. Divi (and Divi Builder on other themes) styles
 * p, ol, headings and links inside modules, sometimes with ID-level
 * selectors, so the essentials are pinned here.
 * ------------------------------------------------------------------ */
.hxr-root, .hxr-root * { box-sizing: border-box !important; }
.hxr-root p, .hxr-root ol, .hxr-root li, .hxr-root dl, .hxr-root dt, .hxr-root dd,
.hxr-root h2, .hxr-root h3 {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
.hxr-root h2, .hxr-root h3 { color: var(--hxr-text) !important; font-family: inherit !important; }
.hxr-root button { font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.2 !important; box-shadow: none; }
.hxr-root button::after, .hxr-root .hxr-btn::after { content: none !important; display: none !important; } /* Divi button arrow icons */
.hxr-root a.hxr-btn { color: var(--hxr-text) !important; text-decoration: none !important; }
.hxr-root a.hxr-btn-primary { color: #fff !important; }

/* ------------------------------------------------------------------ *
 * Card + layout
 * ------------------------------------------------------------------ */
.hxr-root {
	max-width: 760px;
	margin: 1.5rem auto;
	color: var(--hxr-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}
.hxr-card {
	padding: clamp(1.1rem, 3vw, 2rem);
	border-radius: 22px;
	background: var(--hxr-bg);
	border: 1px solid var(--hxr-border);
}
.hxr-root .hxr-h { font-size: clamp(1.35rem, 3.2vw, 1.75rem) !important; font-weight: 600 !important; }
.hxr-root .hxr-lead { color: var(--hxr-muted); font-size: 1rem; max-width: 60ch; margin-top: 0.4rem !important; }
.hxr-root .hxr-footnote { margin-top: 1.1rem !important; font-size: 0.8rem; color: var(--hxr-muted); }
.hxr-root .hxr-h:focus { outline: none; }

.hxr-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; }

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */
.hxr-root .hxr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0.65rem 1.3rem !important;
	border-radius: 999px !important;
	border: 1px solid var(--hxr-border) !important;
	background: var(--hxr-surface) !important;
	color: var(--hxr-text) !important;
	font-size: 0.97rem !important;
	font-weight: 500 !important;
	cursor: pointer;
	transition: border-color 0.2s, transform 0.1s, filter 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.hxr-root .hxr-btn:hover { border-color: var(--hxr-accent) !important; }
.hxr-root .hxr-btn:active { transform: scale(0.97); }
.hxr-root .hxr-btn:focus-visible, .hxr-root .hxr-tile:focus-visible, .hxr-root .hxr-cell:focus-visible, .hxr-root .hxr-breath-circle:focus-visible {
	outline: 3px solid var(--hxr-accent) !important;
	outline-offset: 3px;
}
.hxr-root .hxr-btn-primary {
	background: var(--hxr-accent) !important;
	border-color: var(--hxr-accent) !important;
	color: #fff !important;
	font-weight: 600 !important;
}
.hxr-root .hxr-btn-primary:hover { filter: brightness(1.08); }
.hxr-root .hxr-btn-quiet { background: transparent !important; color: var(--hxr-muted) !important; }
.hxr-root .hxr-wide { min-width: min(100%, 15rem); }

.hxr-root .hxr-back {
	min-height: 36px;
	padding: 0.3rem 0.8rem !important;
	margin-bottom: 0.8rem;
	font-size: 0.85rem !important;
	background: transparent !important;
	color: var(--hxr-muted) !important;
}

/* ------------------------------------------------------------------ *
 * Menu tiles
 * ------------------------------------------------------------------ */
.hxr-menu {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 0.8rem;
	margin-top: 1.4rem;
}
.hxr-root .hxr-tile {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	width: 100%;
	padding: 1rem !important;
	border-radius: 16px !important;
	border: 1px solid var(--hxr-border) !important;
	background: var(--hxr-surface) !important;
	color: var(--hxr-text) !important;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s, transform 0.15s;
}
.hxr-root .hxr-tile:hover { border-color: var(--hxr-accent) !important; transform: translateY(-1px); }
.hxr-tile-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hxr-tile-title { font-weight: 600; font-size: 1.05rem; }
.hxr-tile-blurb { font-size: 0.88rem; color: var(--hxr-muted); line-height: 1.45; }
.hxr-tile-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 0.2rem; font-size: 0.78rem; color: var(--hxr-muted); }
.hxr-tile-best { color: var(--hxr-accent); font-weight: 600; }




/* ------------------------------------------------------------------ *
 * The Dreaming House
 * ------------------------------------------------------------------ */
.hxr-root {
	--hxr-bg: #0d0a1f; --hxr-surface: #1a1535; --hxr-surface-2: #251e48; --hxr-border: rgba(214, 200, 255, 0.16);
	--hxr-text: #efeaff; --hxr-muted: #b3aad6; --hxr-gold: #f3d58e;
	max-width: 1000px; margin: 1.5rem auto; color: var(--hxr-text);
}
.hxr-box { position: relative; padding: clamp(0.8rem, 2.4vw, 1.4rem); border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, #1d1740 0%, var(--hxr-bg) 70%); border: 1px solid var(--hxr-border); box-shadow: 0 30px 80px -40px rgba(10, 5, 40, 0.9); transition: opacity 0.5s ease; }
.hxr-box.is-leaving { opacity: 0; }
.hxr-root .hxr-kicker { display: inline-block; font-size: 0.72rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--hxr-accent) !important; font-weight: 700 !important; }
.hxr-root .hxr-h { font-size: clamp(1.8rem, 5vw, 2.8rem) !important; font-weight: 500 !important; letter-spacing: 0.02em !important; color: #fff !important; }
.hxr-root .hxr-small { margin-top: 0.8rem !important; font-size: 0.82rem; color: var(--hxr-muted); }
.hxr-root .hxr-btn { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--hxr-border) !important; color: var(--hxr-text) !important; }
.hxr-root .hxr-btn-primary { background: var(--hxr-accent) !important; border-color: var(--hxr-accent) !important; color: #1a1030 !important; }
.hxr-root .hxr-btn-quiet { background: transparent !important; color: var(--hxr-muted) !important; }
.hxr-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1rem; }

/* Title and ending screens */
.hxr-title-screen { position: relative; overflow: hidden; border-radius: 18px; min-height: clamp(460px, 70vh, 620px); display: grid; place-items: center; text-align: center; }
.hxr-title-screen > .hxr-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.hxr-title-inner { position: relative; z-index: 1; max-width: 560px; padding: 2rem 1rem; }
.hxr-title-inner .hxr-lead { margin: 0.6rem auto 0 !important; color: var(--hxr-muted); }
.hxr-prefs { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 1.2rem; }
.hxr-root .hxr-toggle { min-height: 36px !important; padding: 0.35rem 0.8rem !important; font-size: 0.82rem !important; }
.hxr-root .hxr-toggle.is-on { border-color: var(--hxr-accent) !important; color: #fff !important; background: color-mix(in srgb, var(--hxr-accent) 22%, transparent) !important; }
.hxr-endings { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 0.5rem; }
.hxr-ending-chip { padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.75rem; background: color-mix(in srgb, var(--hxr-gold) 20%, transparent); color: var(--hxr-gold); }
.hxr-ending-chip.is-locked { background: rgba(255, 255, 255, 0.05); color: var(--hxr-muted); letter-spacing: 0.2em; }
.hxr-ending .hxr-h { color: #fff !important; text-shadow: 0 2px 30px rgba(243, 213, 142, 0.5); }
.hxr-ending .hxr-narr { margin-top: 1rem; background: rgba(13, 10, 31, 0.75); }

/* Header: title, sigils, stars */
.hxr-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.7rem; }
.hxr-root .hxr-room-title { font-size: clamp(1.2rem, 3.2vw, 1.6rem) !important; font-weight: 500 !important; color: #fff !important; }
.hxr-inv { display: flex; gap: 1rem; align-items: center; }
.hxr-sigils, .hxr-stars { display: flex; gap: 0.3rem; }
.hxr-slot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--hxr-border); }
.hxr-slot.is-full { border: 1.5px solid var(--hxr-gold); background: color-mix(in srgb, var(--hxr-gold) 14%, transparent); }
.hxr-slot svg { width: 20px; height: 20px; fill: var(--hxr-gold); }
.hxr-star svg { width: 18px; height: 18px; fill: rgba(255, 255, 255, 0.14); display: block; }
.hxr-star.is-on svg { fill: var(--hxr-gold); filter: drop-shadow(0 0 5px rgba(243, 213, 142, 0.8)); }

/* Stage */
.hxr-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b0818; outline: none; touch-action: manipulation; }
.hxr-stage:focus-visible { box-shadow: 0 0 0 3px var(--hxr-accent); }
.hxr-stage.is-in .hxr-art { animation: hxr-fade 1.2s ease both; }
@keyframes hxr-fade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.hxr-stage .hxr-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hxr-dark { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
	background: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), rgba(255, 236, 190, 0.1) 0, rgba(0, 0, 0, 0) 7%, rgba(5, 3, 14, 0.72) 13%, rgba(5, 3, 14, 0.94) 22%); }
.hxr-stage.is-dark .hxr-dark { opacity: 1; }
.hxr-stage.is-dark { touch-action: none; cursor: none; }
.hxr-finds, .hxr-hots { position: absolute; inset: 0; }
.hxr-finds { z-index: 2; pointer-events: none; }
.hxr-hots { z-index: 3; pointer-events: none; }
.hxr-root .hxr-find {
	position: absolute; aspect-ratio: 1; padding: 0 !important; border: 0 !important; background: transparent !important;
	transform: translate(-50%, -50%); opacity: 0; cursor: pointer; transition: opacity 0.2s linear;
	filter: drop-shadow(0 0 10px rgba(255, 228, 160, 0.9));
}
.hxr-find svg { width: 100%; height: 100%; fill: var(--hxr-gold); display: block; }
.hxr-find.is-found svg { fill: #fff6dc; }
.hxr-find.is-collected { animation: hxr-collect 0.9s ease forwards; }
@keyframes hxr-collect { to { transform: translate(-50%, -160%) scale(1.6); opacity: 0; } }
.hxr-root .hxr-hot {
	position: absolute; pointer-events: auto; padding: 0 !important; border: 2px solid transparent !important; border-radius: 14px !important;
	background: transparent !important; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.hxr-root .hxr-hot:hover, .hxr-root .hxr-hot:focus-visible { border-color: color-mix(in srgb, var(--hxr-accent) 70%, transparent) !important; background: color-mix(in srgb, var(--hxr-accent) 10%, transparent) !important; outline: none; }
.hxr-hot-label { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(13, 10, 31, 0.9); color: #fff; font-size: 0.75rem; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.hxr-hot:hover .hxr-hot-label, .hxr-hot:focus-visible .hxr-hot-label { opacity: 1; }
.hxr-stage.is-dark .hxr-hot:not(:hover):not(:focus-visible) { border-color: transparent !important; }
.hxr-stage.is-chiming { animation: hxr-sway 0.75s ease-in-out infinite alternate; }
@keyframes hxr-sway { from { box-shadow: inset 0 0 0 0 rgba(243, 213, 142, 0); } to { box-shadow: inset 0 0 60px 0 rgba(243, 213, 142, 0.18); } }
.hxr-stage.is-nudge { animation: hxr-nudge 0.4s ease; }
@keyframes hxr-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.hxr-stage.is-open .hxr-art { filter: brightness(1.5) saturate(1.2); transition: filter 2s ease; }
.hxr-flame { position: absolute; left: 50%; top: 86%; width: 4%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.hxr-flame svg { width: 100%; fill: #ffc56b; filter: drop-shadow(0 0 12px #ff9b3d); }

/* Tools, narration, panel */
.hxr-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; margin-top: 0.6rem; }
.hxr-root .hxr-tool { min-height: 36px !important; padding: 0.35rem 0.85rem !important; font-size: 0.82rem !important; }
.hxr-root .hxr-tool[aria-pressed="true"] { border-color: var(--hxr-gold) !important; color: var(--hxr-gold) !important; }
.hxr-narr { margin-top: 0.8rem; padding: 1rem 1.2rem; border-radius: 16px; background: var(--hxr-surface); border: 1px solid var(--hxr-border); min-height: 4.2em; transition: box-shadow 0.4s; }
.hxr-narr:empty { display: none; }
.hxr-narr.is-hint { box-shadow: 0 0 0 2px var(--hxr-gold); }
.hxr-root .hxr-line { font-size: clamp(1.02rem, 2.4vw, 1.2rem); line-height: 1.6 !important; font-style: italic; color: #fff; }
.hxr-line.is-in { animation: hxr-line 1s ease both; }
@keyframes hxr-line { from { opacity: 0; letter-spacing: 0.04em; } to { opacity: 1; letter-spacing: normal; } }
.hxr-narr-row { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.6rem; }
.hxr-panel { margin-top: 0.8rem; }
.hxr-panel:empty { display: none; }
.hxr-root .hxr-tip { text-align: center; color: var(--hxr-muted); font-size: 0.9rem; }
.hxr-puzzle { padding: 1rem; border-radius: 16px; background: var(--hxr-surface); border: 1px solid var(--hxr-border); text-align: center; }
.hxr-root .hxr-puzzle-title { font-size: 0.75rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hxr-muted); margin-bottom: 0.7rem !important; }
.hxr-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; }
.hxr-root .hxr-choice { min-height: 64px !important; border-radius: 16px !important; font-size: 1.02rem !important; background: color-mix(in srgb, var(--hxr-accent) 14%, var(--hxr-surface)) !important; border-color: color-mix(in srgb, var(--hxr-accent) 50%, transparent) !important; }
.hxr-root .hxr-choice:hover { background: color-mix(in srgb, var(--hxr-accent) 28%, var(--hxr-surface)) !important; }
.hxr-reveal { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; color: var(--hxr-gold); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hxr-reveal svg { width: 56px; height: 56px; fill: var(--hxr-gold); filter: drop-shadow(0 0 14px rgba(243, 213, 142, 0.8)); animation: hxr-rise 1.4s ease both; }
@keyframes hxr-rise { from { transform: translateY(14px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Parlour dials and chime cues */
.hxr-dials { display: flex; justify-content: center; gap: 1rem; }
.hxr-dial { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.hxr-root .hxr-dial .hxr-btn { width: 48px !important; min-height: 38px !important; padding: 0 !important; }
.hxr-dial-n { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f7df9e, #9a7437); color: #2a1a0a; font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hxr-cue-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 18px; margin-top: 0.8rem; }
.hxr-cue-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--hxr-gold); box-shadow: 0 0 8px var(--hxr-gold); animation: hxr-rise 0.4s ease both; }
.hxr-cue-gap { width: 22px; }

/* Mirrors */
.hxr-sockets { display: flex; justify-content: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.hxr-socket { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; border: 2px solid #b9b3d6; background: rgba(185, 179, 214, 0.08); }
.hxr-socket svg, .hxr-symkey svg, .hxr-reflection svg { width: 30px; height: 30px; fill: var(--hxr-gold); }
.hxr-symkeys { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.hxr-root .hxr-symkey { width: 56px !important; height: 56px !important; min-height: 56px !important; padding: 0 !important; border-radius: 14px !important; }
.hxr-root .hxr-symkey:disabled { opacity: 0.3; }
.hxr-reflection { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.6rem; padding: 0.6rem; border-radius: 12px; background: linear-gradient(135deg, rgba(143, 163, 217, 0.18), rgba(199, 184, 255, 0.12)); }
.hxr-reflection svg { opacity: 0.8; }

/* Music box */
.hxr-keys { display: flex; justify-content: center; align-items: flex-end; gap: 0.5rem; height: 130px; }
.hxr-root .hxr-key { width: 52px !important; height: var(--h) !important; min-height: 0 !important; padding: 0 !important; border-radius: 12px 12px 18px 18px !important; background: linear-gradient(#f2f0ff, #a9a3cf) !important; border: 0 !important; }
.hxr-root .hxr-key.is-play { animation: hxr-key 0.6s ease; }
@keyframes hxr-key { 30% { transform: translateY(6px); box-shadow: 0 0 22px var(--hxr-gold); } }
.hxr-dots { display: flex; justify-content: center; gap: 0.5rem; margin: 0.9rem 0 0.2rem; }
.hxr-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hxr-border); }
.hxr-dots span.is-on { background: var(--hxr-gold); border-color: var(--hxr-gold); }

/* Library */
.hxr-shelf { display: flex; justify-content: center; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.hxr-root .hxr-book { position: relative; width: 48px !important; height: 130px !important; min-height: 0 !important; padding: 0 !important; border-radius: 6px 6px 3px 3px !important; border: 0 !important; background: var(--book) !important; box-shadow: inset -6px 0 0 rgba(0, 0, 0, 0.2) !important; transition: transform 0.3s ease; }
.hxr-root .hxr-book.is-pulled { transform: translateY(-14px); box-shadow: inset -6px 0 0 rgba(0, 0, 0, 0.2), 0 0 18px var(--hxr-gold) !important; }
.hxr-book-letter { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); color: var(--hxr-gold); font-size: 1.2rem; font-weight: 700; }
.hxr-book i { position: absolute; left: 30%; right: 30%; bottom: 8px; height: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.7); transition: height 0.3s; }
.hxr-word { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.9rem; }
.hxr-word span { display: grid; place-items: center; width: 42px; height: 48px; border-bottom: 2px solid var(--hxr-gold); font-size: 1.5rem; font-weight: 700; color: var(--hxr-gold); }
.hxr-cue-bars { display: flex; justify-content: center; align-items: flex-end; gap: 8px; height: 50px; margin-top: 0.8rem; }
.hxr-cue-bars span { width: 18px; border-radius: 3px; background: var(--hxr-gold); animation: hxr-rise 0.4s ease both; }

/* Pendulum */
.hxr-root .hxr-catch { min-width: 12rem !important; min-height: 54px !important; font-size: 1.1rem !important; }

/* Ending stats */
.hxr-root .hxr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; margin: 0 !important; }
.hxr-stats > div { padding: 0.7rem; border-radius: 12px; background: rgba(13, 10, 31, 0.7); border: 1px solid var(--hxr-border); }
.hxr-root .hxr-stats dt { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hxr-muted); }
.hxr-root .hxr-stats dd { font-size: 1.25rem; font-weight: 600; color: #fff; }

@media (max-width: 600px) {
	.hxr-inv { width: 100%; justify-content: space-between; }
	.hxr-root .hxr-key { width: 44px !important; }
	.hxr-root .hxr-book { width: 36px !important; height: 110px !important; }
	.hxr-socket, .hxr-root .hxr-symkey { width: 48px !important; height: 48px !important; min-height: 48px !important; }
}
@media (prefers-reduced-motion: reduce) { .hxr-root * { animation: none !important; transition: none !important; } }