/* ===== Für alle Seiten ===== */

* {
	/* Breite/Höhe schließen Rand und Innenabstand mit ein (rechnet sich leichter) */
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;          /* mindestens so hoch wie das Browserfenster */
	font-family: Arial, sans-serif;
	background: #fffaf5;        /* helles Creme-Weiß */
	color: #333;

	/* damit main die ganze Höhe ausfüllt (wichtig für die Startseite) */
	display: flex;
}

main {
	flex: 1;                    /* main nimmt den ganzen restlichen Platz */
	padding: 20px 40px;
}

/* ===== Navigation rechts (zum Ausklappen) ===== */

nav {
	/* fest am rechten Rand, auch beim Scrollen */
	position: fixed;
	z-index: 100;               /* Ebene 100 = über allem anderen (z. B. der Wolke) */
	top: 0;
	right: 0;
	height: 100vh;
	width: 80vw;                /* 80% der Fensterbreite (vw = "viewport width") */
	padding: 20px 40px;
	background: white;          /* ganz deckend, nichts scheint durch */
	border-left: 1px solid #ddd;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);

	/* Eingeklappt: fast ganz nach rechts aus dem Bild schieben.
	   Ein 25px schmaler Streifen bleibt sichtbar, damit der Griff ganz zu sehen ist. */
	transform: translateX(calc(100% - 25px));
	transition: transform 0.3s;  /* in 0.3 Sekunden gleiten statt springen */
}

/* Beim Ziehen soll das Menü der Maus sofort folgen, ohne Gleiten
   (menue.js setzt die Klasse "ziehen", solange man den Griff festhält) */
nav.ziehen {
	transition: none;
}

/* Der Griff sitzt genau mittig auf der linken Kante des Menüs */
#menue-griff {
	position: absolute;
	top: 50%;                   /* obere Kante des Griffs in der Mitte ... */
	left: 0;                    /* ... linke Kante des Griffs auf der Linie ... */
	transform: translate(-50%, -50%);   /* ... dann um die halbe Größe zurück = genau mittig */
	width: 44px;
	height: 60px;
	font-size: 22px;
	color: #7a5cc4;
	background: white;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
	cursor: ew-resize;          /* Mauszeiger mit Pfeilen nach links und rechts */
	touch-action: none;         /* auf dem Handy: Ziehen statt Seite scrollen */
}

nav ul {
	list-style: none;           /* keine Aufzählungspunkte */
	padding: 0;
	margin: 0;
}

nav a {
	display: block;             /* ganze Zeile klickbar, nicht nur das Wort */
	padding: 10px;
	border-radius: 8px;
	color: #333;                /* nicht blau wie normale Links */
	text-decoration: none;      /* nicht unterstrichen */
}

nav a:hover {
	background: #f0e6ff;        /* helllila, wenn die Maus drüber ist */
}

/* Die süßen Tiere unten im Menü */
.tiere {
	position: absolute;
	top: 220px;                 /* unter den Links ... */
	bottom: 20px;               /* ... bis fast ganz unten */
	left: 40px;
	right: 40px;
	/* Raster: so viele 90px breite Spalten, wie nebeneinander passen */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	align-content: start;
	gap: 8px;
	overflow-y: auto;           /* passt nicht alles hin, kann man scrollen */
	overflow-x: hidden;
}

.tier {
	text-align: center;
	cursor: pointer;            /* Hand-Mauszeiger: man kann draufklicken */

	/* Menü zu: Tiere sind nach unten weggerutscht und unsichtbar */
	transform: translateY(120%);
	opacity: 0;
	transition: transform 0.5s, opacity 0.5s;
}

/* Menü offen (menue.js setzt dann die Klasse "offen"): Tiere kommen hoch.
   --nr ist die Nummer des Tiers (aus menue.js): 0, 1, 2, ...
   Jedes kommt 0,05 Sekunden nach dem vorigen. */
nav.offen .tier {
	transform: translateY(0);
	opacity: 1;
	transition-delay: calc(var(--nr) * 0.05s);
}

.tier-bild {
	font-size: 40px;
}

/* Die Tiere wackeln immer wieder mit dem Kopf, jedes etwas versetzt */
nav.offen .tier-bild {
	animation: tier-wackeln 1.5s ease-in-out infinite;   /* infinite = immer wieder */
	animation-delay: calc(var(--nr) * 0.1s);
}

@keyframes tier-wackeln {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(-10deg); }
	75%  { transform: rotate(10deg); }
	100% { transform: rotate(0deg); }
}

/* Das große Tier im Dialog */
#tier-dialog {
	cursor: pointer;            /* Klick macht ihn wieder zu */
	outline: none;              /* kein blauer Rahmen beim Öffnen */
	animation: tier-gross-werden 0.4s;
}

#tier-dialog-bild {
	font-size: 200px;
	line-height: 1.1;
}

#tier-dialog .tier-blase {
	padding: 10px 24px;
	font-size: 32px;
}

@keyframes tier-gross-werden {
	0%   { transform: scale(0.3); }
	70%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}

/* Sprechblase über jedem Tier */
.tier-blase {
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	background: #ffe4ec;        /* rosa */
	border-radius: 16px;
	font-weight: bold;
	color: #c2185b;
}

h1 {
	font-size: 50px;
}

/* ===== Anmeldung (nur für uns) ===== */

#anmeldung {
	text-align: right;          /* klein oben rechts im Inhalt */
	font-size: 0.85em;
	color: #888;
}

/* anmeldung.js setzt <body class="angemeldet">, wenn wir angemeldet sind.
   Nicht angemeldet: alles mit .nur-angemeldet verstecken.
   Angemeldet:       alles mit .nur-abgemeldet verstecken. */
body:not(.angemeldet) .nur-angemeldet,
body.angemeldet .nur-abgemeldet {
	display: none;
}

/* ===== Startseite ===== */

.startseite {
	/* Regenbogen in hellen Pastellfarben, damit die Seite hell bleibt */
	background: linear-gradient(135deg,
		#ffb3b3,   /* rot    */
		#ffd9a8,   /* orange */
		#fff3a8,   /* gelb   */
		#b8f5b0,   /* grün   */
		#a8e0ff,   /* blau   */
		#c9b3ff,   /* indigo */
		#f0b3ff    /* violett */
	);
	p {
		font-size: 50px;
	}
	main {
		/* Inhalt untereinander und waagerecht zentriert */
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* Die Wolke */
.wolke {
	position: relative;
	margin: auto 0;            /* "auto" oben und unten = senkrecht in die Mitte */
	padding: 40px 70px;
	background: white;
	border-radius: 100px;       /* stark abgerundet = länglicher Wolkenkörper */
	font-family: "Tangerine", cursive;   /* Schreibschrift; "cursive" falls sie nicht lädt */
	font-size: 5em;             /* Tangerine ist von Natur aus klein, daher größer */
	font-weight: bold;
	color: #7a5cc4;
	filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.15));   /* Schatten um die ganze Wolke */
	cursor: pointer;            /* Hand-Mauszeiger: man kann draufklicken (Spiel-Aufgabe) */
}

/* Zwei weiße Kreise oben drauf = die "Beulen" der Wolke */
.wolke::before,
.wolke::after {
	content: "";
	position: absolute;
	z-index: -1;                /* hinter dem Text */
	background: white;
	border-radius: 50%;         /* 50% = Kreis */
}

.wolke::before {
	width: 120px;
	height: 120px;
	top: -55px;
	left: 60px;
}

.wolke::after {
	width: 160px;
	height: 160px;
	top: -80px;
	right: 60px;
}

/* Der goldene Button */
.game-button {
	padding: 6px 18px;
	font-size: 0.9em;
	font-weight: bold;
	color: #5a3e00;
	background: linear-gradient(#ffe57a, #d4a017);   /* hell- nach dunkelgold */
	border: 2px solid #b8860b;
	border-radius: 20px;
	cursor: pointer;
}

.game-button:hover {
	background: linear-gradient(#fff0a0, #e0b020);
}

/* ===== Spiel ===== */

/* Punkte-Knopf oben rechts (sieht aus wie der goldene Game-Button) */
#spiel-knopf {
	position: fixed;
	top: 15px;
	right: 45px;                /* nicht auf dem Menü-Streifen am Rand */
	z-index: 200;               /* über dem Menü (das hat 100) */
}

/* Während des Spiels: Anmeldeformular etwas nach links rücken,
   damit es nicht unter dem Punkte-Knopf liegt */
body.spiel-laeuft #anmeldung {
	margin-right: 150px;
}

/* Der coole Smiley, der mit dem Konfetti kommt (spiel.js, coolerSmiley) */
.cooler-smiley {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 250;               /* über dem Menü, unter dem Konfetti (300) */
	font-size: 150px;
	pointer-events: none;       /* Klicks gehen durch ihn hindurch */
	animation: smiley-ploppen 5s forwards;   /* 5 Sekunden, danach im Endzustand bleiben */
}

/* Die Bewegung: aus dem Nichts groß werden, wackeln, dann verblassen.
   translate(-50%, -50%) brauchen wir immer, damit er genau in der Mitte bleibt. */
@keyframes smiley-ploppen {
	0%   { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 1; }
	8%   { transform: translate(-50%, -50%) scale(1.3) rotate(10deg); }
	12%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
	90%  { opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); opacity: 0; }
}

/* Der versteckte Stern auf der Tipps-Seite (Extra-Aufgabe) */
#versteckter-stern {
	position: fixed;
	bottom: 6px;
	left: 8px;
	font-size: 10px;            /* winzig ... */
	opacity: 0.25;              /* ... und fast durchsichtig */
	cursor: pointer;
}

/* Die Dialoge (Anleitung und Aufgaben) */
dialog {
	max-width: 450px;
	padding: 30px;
	border: none;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	text-align: center;
}

/* Der abgedunkelte Hintergrund hinter einem offenen Dialog */
dialog::backdrop {
	background: rgba(0, 0, 0, 0.3);
}

/* Auf der Startseite sind alle <p> 50px groß, im Dialog wollen wir normale Schrift.
   Mit der id ist diese Regel stärker als ".startseite p" */
#aufgaben-dialog p {
	font-size: 16px;
}

#aufgaben-liste {
	list-style: none;
	padding: 0;
	text-align: left;
}

#aufgaben-liste li {
	padding: 6px 0;
}

#aufgaben-liste li.fertig {
	color: #999;                /* erledigte Aufgaben grau */
}

/* Überschrift über den Extra-Aufgaben */
#aufgaben-liste li.extra-titel {
	margin-top: 10px;
	font-weight: bold;
	color: #b8860b;             /* gold */
}

/* ===== Spiele-Laden (spiele.html) ===== */

.spieleseite {
	background: #fff8e1;        /* hellgelb, passend zum Gold */
}

.anleitung {
	padding: 20px;
	background: white;
	border-radius: 16px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Die Spiele-Karten nebeneinander; wenn es eng wird, rutschen sie in die nächste Zeile */
#laden {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.laden-karte {
	padding: 15px 20px;
	background: white;
	border-radius: 16px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#spielfeld {
	margin-top: 30px;
	padding: 20px;
	background: white;
	border-radius: 16px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Trend-Jagd */
.trend-flaeche {
	position: relative;         /* die Sachen werden darin frei verschoben */
	height: 300px;
	margin-top: 10px;
	background: #f3ebff;
	border-radius: 12px;
}

.trend-ziel {
	position: absolute;
	padding: 8px 12px;
	font-size: 18px;
	background: white;
	border: none;
	border-radius: 12px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

/* Memory: 4 Karten pro Reihe */
.memory-brett {
	display: grid;
	grid-template-columns: repeat(4, 70px);
	gap: 8px;
	margin-bottom: 15px;
}

.memory-karte {
	height: 70px;
	font-size: 34px;
	background: #7a5cc4;        /* Rückseite: lila */
	border: none;
	border-radius: 10px;
	cursor: pointer;
}

.memory-karte.offen {
	background: #f3ebff;        /* Vorderseite: hell */
}

/* Quiz */
.quiz-frage {
	font-weight: bold;
}

.quiz-antwort {
	display: block;
	margin: 8px 0;
	padding: 10px 20px;
	font-size: 16px;
	background: #f3ebff;
	border: none;
	border-radius: 10px;
	cursor: pointer;
}

.quiz-antwort.richtig {
	background: #b8f5b0;        /* grün */
}

.quiz-antwort.falsch {
	background: #ffb3b3;        /* rot */
}

/* Buchstabensalat (benutzt auch .wort-anzeige und .zahl-form) */
.zahl-form input {
	width: 80px;
	padding: 6px;
	font-size: 18px;
}

.zahl-form input.salat-eingabe {
	width: 200px;
}

/* Wort-Raten */
.wort-anzeige {
	font-family: monospace;     /* alle Buchstaben gleich breit, damit die _ ordentlich stehen */
	font-size: 32px;
	letter-spacing: 4px;
}

.wort-tastatur button {
	width: 36px;
	height: 36px;
	margin: 2px;
	font-size: 16px;
	background: #f3ebff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

.wort-tastatur button:disabled {
	opacity: 0.3;               /* schon geratene Buchstaben blass */
}

/* Modenschau: 4 Models nebeneinander auf dem Laufsteg */
.modenschau-laufsteg {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
	padding: 20px;
	background: linear-gradient(#f3ebff, #e0d0ff);
	border-radius: 16px;
}

.modenschau-model {
	width: 80px;
	height: 80px;
	font-size: 44px;
	background: white;
	border: none;
	border-radius: 16px;
	cursor: pointer;
	opacity: 0.5;               /* normal etwas blass ... */
	transition: transform 0.15s, opacity 0.15s;
}

.modenschau-model.auftritt {
	opacity: 1;                 /* ... beim Auftritt kräftig und größer */
	transform: scale(1.25);
}

/* Emoji-Rätsel */
.emoji-raetsel {
	font-size: 60px;
}

/* Modern oder Retro? */
.retro-ding {
	font-size: 32px;
	font-weight: bold;
}

.retro-knopf,
.zuerst-knopf {
	margin: 5px 10px 5px 0;
	padding: 15px 25px;
	font-size: 20px;
	background: #f3ebff;
	border: none;
	border-radius: 16px;
	cursor: pointer;
}

/* Outfit-Check */
.outfit-anlass {
	font-size: 24px;
	font-weight: bold;
}

.outfit-puppe {
	font-size: 50px;
	line-height: 1.2;
	margin-bottom: 10px;
}

.outfit-reihe {
	margin-bottom: 8px;
}

.outfit-knopf {
	margin-right: 6px;
	width: 56px;
	height: 56px;
	font-size: 30px;
	background: #f3ebff;
	border: 3px solid transparent;
	border-radius: 12px;
	cursor: pointer;
}

.outfit-knopf.gewaehlt {
	border-color: #7a5cc4;      /* ausgesuchtes Teil bekommt einen lila Rahmen */
}

/* ===== Chat-Seite ===== */

.chatseite {
	background: #ffe4ec;        /* hellrosa */
}

.xchatseite {
	background: #e4f3ff;        /* sehr hellblau */
}

.tippsseite {
	background: #f3ebff;        /* sehr helllila */
}

.nachricht {
	margin: 20px 0;
	padding: 10px 15px;
	background: white;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.autor {
	font-weight: bold;
	color: #7a5cc4;
}