@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

/**
 * ZillHa Game — Shortcode UI
 *
 * Neutral dark base that works across all worlds.
 * No world-specific colours or imagery hardcoded.
 */

/* ------------------------------------------------------------------ */
/* Container                                                          */
/* ------------------------------------------------------------------ */

.zillha-game {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem 1rem;
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	color: #e0e0e0;
	background: #1a1a1f;
	border-radius: 8px;
	box-sizing: border-box;
}

.zillha-game *,
.zillha-game *::before,
.zillha-game *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Archetype grid                                                     */
/* ------------------------------------------------------------------ */

.zillha-archetype-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	max-width: 700px;
	margin: 1.5rem auto;
	padding-bottom: 100px;
}

.zillha-archetype-card {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	border: 2px solid #2a2a30;
	background: #22222a;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.zillha-archetype-card:hover {
	border-color: #555;
	transform: translateY(-2px);
}

.zillha-archetype-card.selected {
	border-color: #c8a85c;
	box-shadow: 0 0 12px rgba(200, 168, 92, 0.35);
}

.zillha-archetype-card img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Archetype name & description                                       */
/* ------------------------------------------------------------------ */

.zillha-archetype-name {
	padding: 0.6rem 0.75rem 0.25rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #f0f0f0;
}

.zillha-archetype-desc {
	padding: 0 0.75rem 0.7rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #999;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
}

.zillha-archetype-card.selected .zillha-archetype-desc {
	max-height: 3rem;
	opacity: 1;
	padding-bottom: 0.7rem;
}

/* ------------------------------------------------------------------ */
/* Confirm button                                                     */
/* ------------------------------------------------------------------ */

#zillha-confirm-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	text-align: center;
	padding: 1.5rem 1rem 2rem;
	background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.9));
	pointer-events: none;
}

.zillha-archetype-confirm {
	color: #1a1a1f;
	background: #c8a85c;
	border: none;
	border-radius: 4px;
	transition: background 0.2s;
}

#zillha-confirm-archetype {
	pointer-events: all;
	min-height: 52px;
	padding: 0.75rem 2.5rem;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	cursor: pointer;
}

.zillha-archetype-confirm:hover {
	background: #dbb96a;
}

/* ------------------------------------------------------------------ */
/* Narration                                                          */
/* ------------------------------------------------------------------ */

.zillha-narration {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #d0d0d0;
	background: #1f1f26;
	border-left: 3px solid #c8a85c;
	border-radius: 0 4px 4px 0;
}

.zillha-narration > .zillha-narration-p {
	margin: 0 0 1em;
}

.zillha-narration > .zillha-narration-p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* TTS speaker button (contributor+ only — absent from DOM otherwise) */
/* ------------------------------------------------------------------ */

.zillha-tts-btn {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.25rem 0.5rem;
	background: transparent;
	border: 1px solid #c8a85c;
	border-radius: 4px;
	color: #c8a85c;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.zillha-tts-btn[aria-disabled="false"]:hover {
	background: rgba(200, 168, 92, 0.1);
}

.zillha-tts-btn.zillha-tts-loading {
	animation: zillha-tts-pulse 1s ease-in-out infinite;
	cursor: wait;
}

@keyframes zillha-tts-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

/* ------------------------------------------------------------------ */
/* Choices                                                            */
/* ------------------------------------------------------------------ */

.zillha-choices {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.zillha-choice-btn {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	color: #e0e0e0;
	background: #2a2a32;
	border: 1px solid #3a3a42;
	border-radius: 4px;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s, border-color 0.15s;
}

.zillha-choice-btn:hover {
	background: #35353e;
	border-color: #c8a85c;
}

/* ------------------------------------------------------------------ */
/* Provider label                                                     */
/* ------------------------------------------------------------------ */

.zillha-provider-label {
	position: absolute;
	bottom: 0.5rem;
	right: 0.75rem;
	font-size: 0.7rem;
	color: #555;
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Utility states                                                     */
/* ------------------------------------------------------------------ */

.zillha-game h2 {
	margin: 0 0 0.5rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: #f0f0f0;
	text-align: center;
}

.zillha-game .zillha-error {
	color: #e57373;
	text-align: center;
}

.zillha-game button.zillha-continue-btn,
.zillha-game button.zillha-play-again-btn,
.zillha-game button.zillha-restart-btn,
.zillha-game button.zillha-retry-btn,
.zillha-game button.zillha-resume-btn,
.zillha-game button.zillha-start-over-btn {
	display: block;
	margin: 1rem auto 0;
	padding: 0.6rem 1.5rem;
	font-size: 0.95rem;
	color: #e0e0e0;
	background: #2a2a32;
	border: 1px solid #3a3a42;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.zillha-game button.zillha-continue-btn:hover,
.zillha-game button.zillha-play-again-btn:hover,
.zillha-game button.zillha-restart-btn:hover,
.zillha-game button.zillha-retry-btn:hover,
.zillha-game button.zillha-resume-btn:hover,
.zillha-game button.zillha-start-over-btn:hover {
	background: #35353e;
	border-color: #c8a85c;
}

.zillha-game button.zillha-confirm-active {
	color: #e57373;
	border-color: #e57373;
}

.zillha-game button.zillha-confirm-active:hover {
	border-color: #e57373;
}

.zillha-game .zillha-resume-prompt {
	text-align: center;
	padding: 1.5rem 1rem;
}

.zillha-game .zillha-resume-title {
	margin: 0 0 0.75rem;
	font-size: 1.4rem;
	color: #e0e0e0;
}

.zillha-game .zillha-resume-info {
	margin: 0.25rem 0;
	color: #b0b0b0;
	font-size: 0.95rem;
}

.zillha-game .zillha-resume-actions {
	margin-top: 1.25rem;
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

.zillha-game .zillha-resume-actions button {
	margin: 0;
}

.zillha-game button.zillha-save-exit-btn {
	display: block;
	margin: 1.25rem auto 0;
	padding: 0.5rem 1.25rem;
	font-size: 0.85rem;
	color: #b0b0b0;
	background: transparent;
	border: 1px solid #3a3a42;
	border-radius: 4px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.zillha-game button.zillha-save-exit-btn:hover {
	color: #e0e0e0;
	border-color: #c8a85c;
}

.zillha-game button.zillha-save-exit-btn[disabled] {
	cursor: default;
	opacity: 0.7;
}

.zillha-game .zillha-save-error {
	text-align: center;
	margin: 0.5rem 0 0;
	color: #e57373;
	font-size: 0.85rem;
}

.zillha-game .zillha-login-to-save {
	display: block;
	text-align: center;
	margin: 1.25rem auto 0;
	font-size: 0.85rem;
	color: #b0b0b0;
	text-decoration: underline;
}

.zillha-game .zillha-login-to-save:hover {
	color: #e0e0e0;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Decision card overlay                                              */
/* ------------------------------------------------------------------ */

.zillha-card-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.75);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.zillha-card-overlay.entering {
	opacity: 1;
	visibility: visible;
}

.zillha-card-overlay.entering .zillha-decision-card {
	transform: scale(1);
	opacity: 1;
}

.zillha-card-overlay.exiting {
	opacity: 0;
	visibility: visible;
}

.zillha-card-overlay.exiting .zillha-decision-card {
	transform: scale(0.9);
	opacity: 0;
}

.zillha-decision-card {
	position: relative;
	width: 90%;
	max-width: 500px;
	background: #22222a;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
	transform: scale(0.9);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.zillha-decision-card img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
}

.zillha-card-dismiss {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	color: #e0e0e0;
	background: rgba(0, 0, 0, 0.55);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s;
}

.zillha-card-dismiss:hover {
	background: rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Node image                                                         */
/* ------------------------------------------------------------------ */

.zillha-node-image {
	width: 100%;
	max-width: 680px;
	margin: 0 auto 1.5rem;
	display: block;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.zillha-node-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.zillha-node-image img.loaded {
	opacity: 1;
}

.zillha-node-image-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 4px;
	display: block;
}

/* ------------------------------------------------------------------ */
/* Video player overlay                                               */
/* ------------------------------------------------------------------ */

.zillha-video-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.zillha-video-overlay.visible {
	opacity: 1;
}

.zillha-video-overlay video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.zillha-video-enter {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1001;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
	min-height: 52px;
	padding: 0.85rem 3rem;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.6);
	color: #fff;
	backdrop-filter: blur(4px);
}

.zillha-video-enter.visible {
	opacity: 1;
	pointer-events: all;
}

.zillha-video-spinner {
	position: absolute;
	bottom: 6rem;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.zillha-video-spinner.visible {
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Phase 5 — Proceed button (media cover)                             */
/*                                                                    */
/* Shown after tier2 image hold or tier1 video ended. Fixed to the    */
/* bottom of the viewport, centered horizontally, above the cover.    */
/* ------------------------------------------------------------------ */

.zillha-proceed-btn {
	position: fixed;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	min-height: 48px;
	padding: 0.75rem 2.5rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(224, 224, 224, 0.9);
	background: transparent;
	border: 1.5px solid rgba(200, 168, 92, 0.5);
	border-radius: 4px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease, border-color 0.2s ease;
	pointer-events: none;
}

.zillha-proceed-btn.visible {
	opacity: 1;
	pointer-events: all;
}

.zillha-proceed-btn:hover {
	border-color: rgba(200, 168, 92, 0.85);
	color: #f0f0f0;
}

/* ------------------------------------------------------------------ */
/* Phase 5 — Thematic loading line                                    */
/* ------------------------------------------------------------------ */

/* Rendered inline inside the scene body, beneath the settled media,
   in the slot where narration will appear once the LLM call returns.
   It must never overlay or precede the image. */
.zillha-thematic-loading {
	margin: 1.5rem auto 0;
	text-align: center;
	pointer-events: none;
}

.zillha-thematic-loading-text {
	display: inline-block;
	margin: 0;
	padding: 0.5rem 1.25rem;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: rgba(240, 230, 200, 0.85);
	background: rgba(0, 0, 0, 0.35);
	border-radius: 2px;
	animation: zillha-thematic-pulse 2.2s ease-in-out infinite;
}

@keyframes zillha-thematic-pulse {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1.0;  }
}

/* ------------------------------------------------------------------ */
/* Phase 5 — Fullscreen media cover                                   */
/*                                                                    */
/* The cover is a single element that starts fullscreen (position     */
/* fixed, full viewport) and transitions down to the top of the       */
/* content area. It hosts either a tier1 <video> or a tier2 <img>.    */
/* ------------------------------------------------------------------ */

.zillha-media-cover {
	position: fixed;
	overflow: hidden;
	background: #0a0a0a;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.zillha-media-cover.fullscreen {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	border-radius: 0;
}

.zillha-media-cover.visible {
	opacity: 1;
}

/* Settle phase: the cover transitions from fullscreen down to its
   final resting spot at the top of the content area. Position,
   width, and opacity animate together over 1.2s for a smooth
   journey — not a snap. */
.zillha-media-cover.settling {
	z-index: 999;
	border-radius: 4px;
	transition:
		top 1.2s ease-in-out,
		left 1.2s ease-in-out,
		width 1.2s ease-in-out,
		height 1.2s ease-in-out,
		opacity 1.2s ease-in-out,
		border-radius 1.2s ease-in-out;
}

/* Cover image is contained (not cropped), centered in the cover,
   and capped at 60vw × 50vh on desktop (90vw on mobile) so it does
   not dominate the viewport during the fullscreen cover phase. */
.zillha-media-cover-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 60vw;
	max-height: 50vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	opacity: 0;
	transition: opacity 0.4s ease;
}

@media (max-width: 768px) {
	.zillha-media-cover-image {
		max-width: 90vw;
	}
}

.zillha-media-cover-image.loaded {
	opacity: 1;
}

.zillha-media-cover-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #0a0a0a;
	display: block;
}

/* Settled state: normal document flow at the top of the content
   area. Keeps the same 16/9 aspect ratio as the loading cover so the
   transition lands cleanly. */
.zillha-node-image.settled {
	position: relative;
	width: 100%;
	max-width: 680px;
	margin: 0 auto 1.5rem;
	display: block;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #000;
}

.zillha-node-image.settled > .zillha-media-cover-image,
.zillha-node-image.settled > .zillha-media-cover-video {
	position: absolute;
	inset: 0;
	transform: none;
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Scene body fade                                                    */
/*                                                                    */
/* The current scene fades out on a choice click and the new scene    */
/* body (narration + choices) fades in beneath the settled media.     */
/* ------------------------------------------------------------------ */

.zillha-scene-body {
	position: relative;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.zillha-scene-body.visible {
	opacity: 1;
}

.zillha-fading-out {
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 500px) {
	.zillha-archetype-grid {
		grid-template-columns: 1fr;
	}

	.zillha-decision-card img {
		height: 200px;
	}
}

/* ------------------------------------------------------------------ */
/* Worlds list                                                        */
/* ------------------------------------------------------------------ */

.zillha-worlds-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 12px 0;
}

.zillha-worlds-list .zillha-world-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 20px;
	background: #1e1e26;
	border-radius: 10px;
	overflow: hidden;
	padding: 12px;
}

.zillha-worlds-list a.zillha-world-row {
	display: flex !important;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.15s;
}

.zillha-worlds-list a.zillha-world-row:hover {
	opacity: 0.85;
}

.zillha-worlds-list .zillha-world-cover {
	width: 220px !important;
	min-width: 220px !important;
	max-width: 220px !important;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: 6px;
	display: block !important;
	flex-shrink: 0;
}

.zillha-worlds-list .zillha-world-info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zillha-worlds-list .zillha-world-name {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
	color: #e8d9b5;
}

.zillha-worlds-list .zillha-world-meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.zillha-worlds-list .zillha-world-genre {
	font-size: 0.75rem;
	opacity: 0.75;
	text-transform: capitalize;
	color: #a89880;
}

.zillha-worlds-list .zillha-world-rating {
	font-size: 0.7rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	text-transform: uppercase;
}

.zillha-rating-e { background: #2a7a2a; color: #fff; }
.zillha-rating-t { background: #7a6a1a; color: #fff; }
.zillha-rating-m { background: #7a1a1a; color: #fff; }


.zillha-worlds-list .zillha-world-summary {
	font-size: 0.85rem;
	line-height: 1.6;
	opacity: 0.9;
	margin: 0;
	color: #c8b99a;
}

.zillha-worlds-error {
	color: #999;
	font-style: italic;
}

@media (max-width: 600px) {
	.zillha-worlds-list .zillha-world-row {
		flex-direction: column !important;
	}
	.zillha-worlds-list .zillha-world-cover {
		width: 100% !important;
		min-width: unset !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}
}

/* ------------------------------------------------------------------ */
/* World page — [zillha_game] full page render                       */
/* ------------------------------------------------------------------ */

.zw-page[data-genre-class="genre-fantasy"]  { --accent:#c8a85c; --accent-glow:rgba(200,168,92,0.18);  --hero-tint:rgba(12,8,4,0.15);   }
.zw-page[data-genre-class="genre-noir"]     { --accent:#c0392b; --accent-glow:rgba(192,57,43,0.18);   --hero-tint:rgba(4,2,8,0.15);    }
.zw-page[data-genre-class="genre-war"]      { --accent:#b5651d; --accent-glow:rgba(181,101,29,0.18);  --hero-tint:rgba(6,4,2,0.15);    }
.zw-page[data-genre-class="genre-horror"]   { --accent:#8b7ab8; --accent-glow:rgba(139,122,184,0.18); --hero-tint:rgba(4,2,8,0.15);    }
.zw-page[data-genre-class="genre-scifi"]    { --accent:#2e86ab; --accent-glow:rgba(46,134,171,0.18);  --hero-tint:rgba(2,6,12,0.15);   }
.zw-page[data-genre-class="genre-cyberpunk"]{ --accent:#00e5cc; --accent-glow:rgba(0,229,204,0.16);   --hero-tint:rgba(2,4,8,0.15);    }
.zw-page[data-genre-class="genre-western"]  { --accent:#d4a017; --accent-glow:rgba(212,160,23,0.18);  --hero-tint:rgba(8,5,2,0.15);    }
.zw-page[data-genre-class="genre-adventure"]{ --accent:#4caf50; --accent-glow:rgba(76,175,80,0.16);   --hero-tint:rgba(2,6,2,0.15);    }
.zw-page[data-genre-class="genre-thriller"] { --accent:#d0d0d0; --accent-glow:rgba(208,208,208,0.10); --hero-tint:rgba(4,4,4,0.15);    }
.zw-page[data-genre-class="genre-romance"]  { --accent:#e8b4a0; --accent-glow:rgba(232,180,160,0.18); --hero-tint:rgba(8,4,4,0.15);    }
.zw-page[data-genre-class="genre-drama"]    { --accent:#7eb8c9; --accent-glow:rgba(126,184,201,0.18); --hero-tint:rgba(2,4,8,0.15);    }
.zw-page[data-genre-class="genre-timeloop"] { --accent:#a8c8a0; --accent-glow:rgba(168,200,160,0.18); --hero-tint:rgba(2,6,4,0.15);    }
.zw-page[data-genre-class="genre-default"]  { --accent:#c8a85c; --accent-glow:rgba(200,168,92,0.18);  --hero-tint:rgba(12,8,4,0.15);   }

.zw-page { display:block; width:100%; }

.zw-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

@media (max-width: 768px) {
	.zw-hero { aspect-ratio: 16 / 9; }
}

.zw-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.zw-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 30%, rgba(14,14,20,0.5) 65%, #0e0e14 100%);
	pointer-events: none;
}

.zw-hero-tint {
	position: absolute;
	inset: 0;
	background: var(--hero-tint);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

.zw-rating-badge {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 10;
	font-family: 'Cinzel', Georgia, serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	padding: 0.3rem 0.7rem;
	border-radius: 3px;
	text-transform: uppercase;
	border: 1px solid currentColor;
}

.zw-rating-badge.e { color:#5cb85c; border-color:rgba(92,184,92,0.5);  background:rgba(92,184,92,0.12);  }
.zw-rating-badge.t { color:#5b9bd5; border-color:rgba(91,155,213,0.5); background:rgba(91,155,213,0.12); }
.zw-rating-badge.m { color:#d9534f; border-color:rgba(217,83,79,0.5);  background:rgba(217,83,79,0.12);  }

.zw-page .zw-content {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
	font-family: 'Cinzel', Georgia, serif !important;
	color: #a89880 !important;
	background: #0e0e14;
}

.zw-page .zw-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 2rem 0 1.25rem;
	font-family: 'Cinzel', Georgia, serif !important;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent) !important;
	opacity: 0.85;
}

.zw-meta-divider {
	width: 1px;
	height: 0.9em;
	background: var(--accent);
	opacity: 0.35;
}

.zw-page .zw-description {
	font-size: 1.2rem;
	line-height: 1.85;
	color: #a89880 !important;
	max-width: 720px;
	font-weight: 400;
	font-family: 'Cinzel', Georgia, serif !important;
}

.zw-rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 3rem 0 2.5rem;
}

.zw-rule-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--accent), transparent);
	opacity: 0.35;
}

.zw-rule-diamond {
	width: 6px;
	height: 6px;
	background: var(--accent);
	transform: rotate(45deg);
	opacity: 0.6;
	flex-shrink: 0;
}

.zw-page .zw-play-label {
	font-family: 'Cinzel', Georgia, serif !important;
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent) !important;
	opacity: 0.6;
	text-align: center;
	margin-bottom: 1.25rem;
}

.zw-game-wrap {
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 8px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.03),
		0 8px 40px rgba(0,0,0,0.5),
		0 0 60px var(--accent-glow);
}

/* ------------------------------------------------------------------ */
/* PWA install banner                                                 */
/* ------------------------------------------------------------------ */

.zillha-pwa-banner {
	background: #0e0e14;
	border: 1px solid rgba(200, 168, 92, 0.4);
	border-radius: 6px;
	margin-bottom: 20px;
	padding: 10px 16px;
	font-family: 'Cinzel', Georgia, serif;
}

.zillha-pwa-banner-inner {
	display: flex;
	align-items: center;
	gap: 12px;
}

.zillha-pwa-banner-icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	flex-shrink: 0;
}

.zillha-pwa-banner-text {
	flex: 1;
	font-size: 0.82rem;
	color: #a89880;
	letter-spacing: 0.04em;
}

.zillha-pwa-banner-install {
	background: transparent;
	border: 1px solid #c8a85c;
	color: #c8a85c;
	font-family: 'Cinzel', Georgia, serif;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	padding: 5px 14px;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	flex-shrink: 0;
}

.zillha-pwa-banner-install:hover {
	background: #c8a85c;
	color: #0e0e14;
}

.zillha-pwa-banner-dismiss {
	background: transparent;
	border: none;
	color: #a89880;
	font-size: 1rem;
	cursor: pointer;
	padding: 4px 6px;
	line-height: 1;
	flex-shrink: 0;
	opacity: 0.6;
	transition: opacity 0.2s;
}

.zillha-pwa-banner-dismiss:hover {
	opacity: 1;
}

.zillha-pwa-ios-tip {
	font-size: 0.75rem;
	color: #c8a85c;
	margin-top: 8px;
	letter-spacing: 0.04em;
	font-family: 'Cinzel', Georgia, serif;
}

/* ------------------------------------------------------------------ */
/* [zillha_install] button                                            */
/* ------------------------------------------------------------------ */

.zillha-install-btn {
    display: flex;
    justify-content: center;
    margin: 24px auto;
    max-width: 480px;
}

.zillha-install-btn-trigger {
    background: rgba(14, 14, 20, 0.6);
    border: 1px solid rgba(200, 168, 92, 0.5);
    border-radius: 14px;
    padding: 0;
    cursor: pointer;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 18px rgba(200, 168, 92, 0.15),
        0 4px 24px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Gold shimmer pulse animation */
@keyframes zillha-shimmer {
    0%   { left: -100%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { left: 100%; opacity: 0.4; }
    100% { left: 100%; opacity: 0; }
}

.zillha-install-btn-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(200, 168, 92, 0.25) 50%,
        transparent 100%
    );
    animation: zillha-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Hover — lift and gold backlight */
.zillha-install-btn-trigger:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 32px rgba(200, 168, 92, 0.35),
        0 0 12px rgba(200, 168, 92, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.7);
    border-color: rgba(200, 168, 92, 0.9);
}

/* Press state */
.zillha-install-btn-trigger:active {
    transform: translateY(1px);
    box-shadow:
        0 0 14px rgba(200, 168, 92, 0.2),
        0 2px 10px rgba(0, 0, 0, 0.5);
}

.zillha-install-btn-trigger:focus-visible {
    outline: 2px solid #c8a85c;
    outline-offset: 4px;
    border-radius: 14px;
}

.zillha-install-btn-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 13px;
    position: relative;
    z-index: 0;
}

/* ------------------------------------------------------------------ */
/* Hide all install UI when running as installed PWA                  */
/* ------------------------------------------------------------------ */

@media (display-mode: standalone) {
    .zillha-pwa-banner,
    .zillha-install-btn {
        display: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Narrator choice screen                                             */
/* ------------------------------------------------------------------ */

.zillha-narrator-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
}

.zillha-narrator-heading {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: #f0f0f0;
    margin: 0 0 0.5rem;
}

.zillha-narrator-sub {
    color: #999;
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

.zillha-narrator-btn {
    width: 100%;
    max-width: 320px;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    border-radius: 6px;
    border: 2px solid #2a2a30;
    background: #22222a;
    color: #f0f0f0;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.zillha-narrator-btn--on:hover {
    border-color: #c8a85c;
    box-shadow: 0 0 12px rgba(200, 168, 92, 0.35);
}

.zillha-narrator-btn--off:hover {
    border-color: #555;
}

.zillha-narrator-btn:focus-visible {
    outline: 2px solid #c8a85c;
    outline-offset: 4px;
}

/* ------------------------------------------------------------------ */
/* Auto-narration loading indicator and mute toggle                   */
/* ------------------------------------------------------------------ */

.zillha-audio-loading {
    text-align: center;
    font-size: 0.85rem;
    color: #888;
    padding: 0.5rem;
    font-style: italic;
}

.zillha-mute-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.zillha-mute-btn:hover {
    opacity: 1;
}

.zillha-mute-btn:focus-visible {
    outline: 2px solid #c8a85c;
    outline-offset: 2px;
    border-radius: 4px;
    opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Narrator prompt overlay (appended to <body> from showNarratorPrompt */
/* and showNarratorControlPrompt). Without this block the popup has   */
/* no fixed positioning or backdrop and gets visually lost beneath    */
/* page content, so the 🔊 tap appears to do nothing.                  */
/* ------------------------------------------------------------------ */

.zillha-narrator-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.zillha-narrator-popup {
    width: 100%;
    max-width: 420px;
    background: #1a1a20;
    border: 1px solid #c8a85c;
    border-radius: 8px;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
}

.zillha-narrator-popup-msg {
    margin: 0 0 0.5rem;
    color: #f0f0f0;
    font-size: 1.05rem;
    line-height: 1.5;
}

.zillha-narrator-popup-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 6px;
    border: 2px solid #2a2a30;
    background: #22222a;
    color: #f0f0f0;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.zillha-narrator-popup-btn--yes {
    border-color: #c8a85c;
}

.zillha-narrator-popup-btn--yes:hover {
    box-shadow: 0 0 12px rgba(200, 168, 92, 0.35);
    background: #2a2620;
}

.zillha-narrator-popup-btn--no:hover,
.zillha-narrator-popup-btn--cancel:hover {
    border-color: #555;
    background: #2a2a32;
}

.zillha-narrator-popup-btn:focus-visible {
    outline: 2px solid #c8a85c;
    outline-offset: 2px;
}