/* style.css - Final Version: Normal Font Weight */

/* Box Model Reset */
* { box-sizing: border-box; }

/* --- SCHRIFTARTEN --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=IM+Fell+English+SC&display=swap');

/* --- VARIABLEN & FARBEN --- */
:root {
	--slot-height: 80px; 
	--slot-width: 240px; 
	
	/* Farbpalette Messing/Gold */
	--brass-dark: #3e2723;
	--brass-med:  #bcaaa4;
	--brass-gold: #ffecb3;
	--brass-shadow: #1b100a;
}

/* --- GRUNDLAYOUT --- */
body {
	background-color: #1a1a1a;
	background-image: radial-gradient(circle, #2c2c2c 0%, #000000 100%);
	color: #d4af37;
	font-family: 'Cinzel', serif; /* Hauptschrift überall */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
	overflow: hidden; 
	user-select: none;
	-webkit-user-select: none;
}

/* --- HAUPTCONTAINER --- */
.main-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: 1;
}
.main-content.moved-up { transform: translateY(-15vh); }

h1 {
	margin-bottom: 20px;
	font-family: 'IM Fell English SC', serif;
	font-size: 2.5rem;
	letter-spacing: 5px;
	background: linear-gradient(to bottom, #cfc7f8 0%, #ebb400 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0px 2px 5px rgba(0,0,0,0.8);
	text-align: center;
}

/* --- KRYPTEX RAHMEN --- */
.cryptex-frame {
	display: flex;
	gap: 8px; 
	padding: 15px 25px;
	margin-top: 50px;
	background: linear-gradient(to bottom, #4a3b2a 0%, #8c7b5d 50%, #2b2218 100%);
	border-top: 2px solid #a89f91;
	border-bottom: 2px solid #1a1510;
	border-radius: 10px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 30px rgba(0,0,0,0.8);
	position: relative;
}

.cryptex-frame::before, .cryptex-frame::after {
	content: ""; position: absolute; top: 50%; width: 20px; height: 60px;
	background: linear-gradient(to right, #8c7b5d, #4a3b2a);
	border: 1px solid #2b2218; transform: translateY(-50%);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.cryptex-frame::before { left: -10px; border-radius: 5px 0 0 5px; }
.cryptex-frame::after { right: -10px; border-radius: 0 5px 5px 0; }

.selection-marker {
	position: absolute; top: 50%; left: -15px; right: -15px;
	height: 0; z-index: 20; pointer-events: none;
	display: flex; justify-content: space-between;
}
.arrow {
	width: 0; height: 0;
	border-top: 10px solid transparent; border-bottom: 10px solid transparent;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
}
.arrow-left { border-left: 15px solid #d4af37; transform: translateY(-50%); }
.arrow-right { border-right: 15px solid #d4af37; transform: translateY(-50%); }

/* --- WALZEN (REELS) --- */
.reel-wrapper { width: var(--slot-width); text-align: center; position: relative; }
.reel-header {
	position: absolute; top: -40px; width: 100%; color: #8c7b5d;
	font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase;
	text-shadow: 0 1px 1px black;
}
.reel-container {
	height: calc(var(--slot-height) * 3); 
	overflow: hidden; position: relative; cursor: grab;
	background: linear-gradient(to right, #3e2723 0%, #8d6e63 20%, #ffecb3 50%, #8d6e63 80%, #3e2723 100%);
	border-left: 1px solid #1a1008; border-right: 1px solid #1a1008;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.reel-container:active { cursor: grabbing; }

.reel-shadow-overlay {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.95) 100%);
	pointer-events: none; z-index: 10;
}
.reel-strip { list-style: none; padding: 0; margin: 0; will-change: transform; transform: translate3d(0,0,0); }

/* --- REEL ITEMS (Wörter DESKTOP) --- */
.reel-item {
	height: var(--slot-height) !important;
	min-height: var(--slot-height) !important;
	max-height: var(--slot-height) !important;
	
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 5px;
	margin: 0 !important;
	
	border: none !important;
	box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 -1px 0 rgba(0,0,0,0.1) inset;
	
	font-family: 'IM Fell English SC', serif;
	font-weight: 700;
	font-size: 1.3rem; 
	line-height: 1.0; 
	
	text-align: center;
	color: #251610; 
	text-shadow: 0px 1px 0px rgba(255,255,255,0.4), 0px -1px 0px rgba(0,0,0,0.7);
	overflow: hidden;
}

#reel-3.loading { filter: grayscale(1) blur(2px); opacity: 0.6; transition: all 0.2s; }

/* --- BUTTONS --- */
.brass-button {
	margin-top: 40px; padding: 15px 40px; 
	font-family: 'IM Fell English SC', serif;
	font-size: 1.5rem; color: #251610;
	background: linear-gradient(to bottom, #ffecb3 0%, #d4af37 50%, #8c7b5d 100%);
	border: 2px solid #3e2723; border-radius: 5px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
	cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,0.4);
	transition: transform 0.1s, box-shadow 0.1s;
}
.brass-button:active { transform: translateY(2px); box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.brass-button:disabled { filter: grayscale(1); cursor: wait; }
.brass-button.small-btn { margin-top: 0; padding: 10px 20px; font-size: 1rem; }

/* --- ERGEBNIS OVERLAY --- */
#results-area {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.9);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	z-index: 1000;
	opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
#results-area.visible { opacity: 1; pointer-events: auto !important; }

/* Das Papier */
.paper-sheet {
	background: #fdfbf7; width: 90%; max-width: 600px; max-height: 70vh;
	padding: 30px; border-radius: 4px; box-shadow: 0 0 60px rgba(0,0,0,1);
	
	font-family: 'Cinzel', serif;
	
	color: #2c3e50;
	background-image: url('https://www.transparenttextures.com/patterns/cream-paper.png');
	text-align: center; position: relative;
	display: flex; flex-direction: column; touch-action: pan-y;
}
.paper-sheet h2 {
	font-family: 'IM Fell English SC', serif; 
	border-bottom: 2px solid #d4af37;
	padding-bottom: 15px; margin-top: 0; color: #3e2723; flex-shrink: 0;
}

.carousel-container {
	display: flex; align-items: center; justify-content: space-between;
	flex: 1; min-height: 0; margin: 20px 0; overflow: hidden;
}

/* --- SCROLLBARER TEXTBEREICH --- */
.idea-display {
	flex: 1; padding: 0 20px; height: 100%; overflow-y: auto;
	-webkit-overflow-scrolling: touch !important; touch-action: pan-y; overscroll-behavior: contain;
	user-select: text; -webkit-user-select: text; cursor: auto;
	scrollbar-width: thin; scrollbar-color: #d4af37 transparent;
	animation: fadeIn 0.5s ease;
}

/* DESKTOP TEXT STYLE */
.idea-display h3 { 
	font-family: 'IM Fell English SC', serif;
	font-size: 1.6rem; 
	color: #8c7b5d; 
	margin-bottom: 15px; 
	text-transform: uppercase; 
	margin-top: 0; 
}

.idea-display p { 
	font-family: inherit;
	font-weight: 400; /* KORREKTUR: Nicht mehr fett, sondern normal */
	font-size: 1.25rem; 
	line-height: 1.5; 
	color: #2c3e50;
}

/* Navigation */
.nav-arrow {
	background: none; border: none; font-size: 3rem; color: #d4af37;
	cursor: pointer; padding: 10px; transition: transform 0.2s, color 0.2s; user-select: none;
	flex-shrink: 0;
}
.nav-arrow:hover { color: #8c7b5d; transform: scale(1.1); }
.nav-arrow:disabled { opacity: 0.2; cursor: default; }

#page-indicator { font-size: 0.8rem; color: #aaa; margin-bottom: 20px; letter-spacing: 2px; text-transform: uppercase; flex-shrink: 0; }
.result-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 10px; border-top: 1px dashed #ccc; padding-top: 20px; flex-shrink: 0; }
.close-link { background: none; border: none; color: #d4af37; font-family: 'Cinzel', serif; font-size: 1rem; text-decoration: underline; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

/* --- MOBILE ANPASSUNGEN --- */
@media (max-width: 768px) {
	:root {
		--slot-width: 100px;
		--slot-height: 60px;
	}
	
	h1 { font-size: 1.8rem; }
	.cryptex-frame { gap: 5px; padding: 10px 15px; margin-top: 30px; }
	
	/* MOBILE: Walzen-Text klein */
	.reel-item { 
		height: 60px !important;
		min-height: 60px !important;
		font-size: 11px !important; 
		line-height: 0.95 !important;
		padding: 0 2px;
		white-space: normal;
	}
	
	.paper-sheet { padding: 20px; width: 95%; max-height: 80vh; }
	.nav-arrow { font-size: 2rem; }
	.result-controls { flex-direction: column; gap: 15px; }

	/* MOBILE: Ideen-Text klein, aber gleicher Font */
	.idea-display h3 { 
		font-size: 1.2rem; 
		margin-bottom: 8px; 
	}
	.idea-display p { 
		font-weight: 400;
		font-size: 0.95rem; 
		line-height: 1.4; 
	}
}

/* --- FOOTER --- */
.app-footer {
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
	
	/* Design passend zum Thema, aber sehr zurückhaltend */
	font-family: 'Cinzel', serif;
	font-size: 0.7rem;
	letter-spacing: 1px;
	color: rgba(212, 175, 55, 0.4); /* Gold, aber 60% transparent */
	
	/* Damit er nicht im Weg ist */
	pointer-events: none; 
	z-index: 0; 
}

/* Auf Mobile etwas mehr Abstand zum Rand, falls da Home-Balken sind */
@media (max-width: 768px) {
	.app-footer {
		bottom: 15px;
		font-size: 0.6rem;
	}
}

/* Spinner am Ende */
.loading-spinner {
	width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #d4af37;
	border-radius: 50%; margin: 50px auto;
	animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }