/*
Optimisation du fichier CSS à l'aide de ChatGPT.
Une fois le développement de la feuille de style terminé, j'ai utilisé ChatGPT pour analyser le code CSS et identifier d'éventuels doublons, règles redondantes ou portions de code inutilisées.
L'objectif n'était pas de générer le design ou d'écrire l'interface à ma place, mais de vérifier la qualité et la maintenabilité du code produit. Les suggestions fournies concernaient principalement la suppression de répétitions, le regroupement de certaines règles similaires et l'amélioration de l'organisation générale du fichier CSS.
J'ai examiné chaque proposition avant de l'appliquer et j'ai conservé uniquement les modifications qui amélioraient réellement la lisibilité et la structure du code sans modifier le comportement visuel de l'application. La conception graphique, la mise en page, le responsive et l'ensemble des règles CSS ont été réalisés manuellement.
*/

/* ============================================================
   Destins climatiques – feuille de styles principale
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
	--optimiste: #16a34a;
	--median: #ea580c;
	--pessimiste: #dc2626;

	--bg: #f0f6ff;
	--card-bg: #ffffff;
	--border: #e2e8f0;

	--text: #1e293b;
	--text-muted: #64748b;
	--accent: #0ea5e9;

	--radius: 0.75rem;
	--shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Base ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	overflow-x: hidden;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: box-shadow 0.25s ease;
}

a:hover {
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

img {
	display: block;
	max-width: 100%;
	border-radius: var(--radius);
}

/* ── Conteneur centré ───────────────────────────────────────── */
.container {
	width: min(960px, 100% - 2rem);
	margin-inline: auto;
	padding-block: 1rem;
}

/* ================================================= */
/* PAGE D'ACCUEIL - index.php                        */
/* ================================================= */

.home-header {
	position: relative;
	text-align: center;
	padding-block: 2.5rem 1.5rem;
	background: var(--card-bg);
	border-bottom: 1px solid var(--border);
	margin-bottom: 2rem;
}

.home-header h1 {
	font-size: 3rem;
	color: var(--accent);
}

.home-header p {
	color: var(--text-muted);
	margin-top: 0.5rem;
	max-width: 700px;
	margin-inline: auto;
	font-size: 1.2rem;
}

.home-title {
	text-align: center;
	font-size: 1.5rem;
}

.home-button-container {
	text-align: center;
	margin-top: 2rem;
}

/* ── Section titre ──────────────────────────────────────────── */
.section-title {
	font-size: 2rem;
	font-weight: 600;
	margin-block: 2rem 0.4rem;
}

.section-subtitle {
	font-size: 1.25rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
}

/* ================================================= */
/* Utilisation de ChatGPT pour les tuiles            */
/* ================================================= */
/*
* J'ai utilisé ChatGPT pour m'aider à améliorer l'aspect visuel
* des tuiles statistiques de la page d'accueil.
*
* L'assistance a principalement porté sur les effets de survol
* (hover), les animations visuelles, les couleurs associées aux
* différentes icônes ainsi que la mise en valeur des cartes lors
* du passage de la souris.
*
* Je n'ai pas utilisé ChatGPT pour concevoir la structure générale
* de la page ou sa logique. Ces éléments ont été réalisés
* manuellement à partir des notions vues dans le cours de DocuWeb.
*
* Les propositions générées ont été relues, comprises, adaptées
* et intégrées au projet après vérification de leur compatibilité
* avec le CSS déjà présent.
*/

/* ── Statistiques / tuiles ──────────────────────────────────── */
.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-block: 1.5rem;
}

.stat-card {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 2rem 1.5rem;
	min-height: 220px;
	text-align: center;
	box-shadow: var(--shadow);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease;
}

.stat-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.stat-card .stat-value {
	font-size: 1.6rem;
	font-weight: 700;
}

.stat-card .stat-label {
	font-size: 1rem;
	color: var(--text-muted);
}

.stat-card .stat-icon {
	width: 75px;
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem auto;
	border-radius: 50%;
	font-size: 2.2rem;
	transition: transform 0.25s ease;
}

.stat-card:nth-child(1) .stat-icon {
	background: #dcfce7;
	color: #16a34a;
}

.stat-card:nth-child(2) .stat-icon {
	background: #ede9fe;
	color: #7c3aed;
}

.stat-card:nth-child(3) .stat-icon {
	background: #ffedd5;
	color: #ea580c;
}

.stat-card:nth-child(1):hover {
	background: #f0fdf4;
	border-color: #86efac;
}

.stat-card:nth-child(2):hover {
	background: #faf5ff;
	border-color: #c4b5fd;
}

.stat-card:nth-child(3):hover {
	background: #fff7ed;
	border-color: #fdba74;
}

.stat-card:hover .stat-icon {
	transform: scale(1.12);
}

/* ================================================= */
/* select_character.php                              */
/* ================================================= */

.character-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.character-card {
	background: var(--card-bg);
	border: 2px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: var(--shadow);
	cursor: pointer;
	opacity: 0;
	animation: cardAppear 0.6s ease forwards;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}

.character-card.selected {
	border-color: var(--accent);
}

.character-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.character-card .card-top {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.avatar-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #f1f5f9;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.character-card .character-name {
	font-size: 1.1rem;
	font-weight: 700;
}

.character-card .character-meta {
	font-size: 0.85rem;
	line-height: 1.8;
	color: var(--text-muted);
}

.character-card .character-meta span {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.character-card .btn-follow {
	width: 100%;
	margin-top: auto;
	padding: 0.6rem;
	border: none;
	border-radius: 0.5rem;
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	background: var(--accent);
	transition: opacity 0.15s ease;
}

.character-card .btn-follow:hover {
	opacity: 0.85;
}

/* Animations personnages */
.character-card:nth-child(1) {
	animation-delay: 0.05s;
}

.character-card:nth-child(2) {
	animation-delay: 0.1s;
}

.character-card:nth-child(3) {
	animation-delay: 0.15s;
}

.character-card:nth-child(4) {
	animation-delay: 0.2s;
}

.character-card:nth-child(5) {
	animation-delay: 0.25s;
}

.character-card:nth-child(6) {
	animation-delay: 0.3s;
}

@keyframes cardAppear {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Couleurs personnages */
.character-card.ajla .btn-follow {
	background: #3b82f6;
}

.character-card.camille .btn-follow {
	background: #0d9488;
}

.character-card.isabelle .btn-follow {
	background: var(--optimiste);
}

.character-card.liam .btn-follow {
	background: #7c3aed;
}

.character-card.lukas .btn-follow {
	background: var(--median);
}

.character-card.marko .btn-follow {
	background: #f59e0b;
}

.character-card.ajla:hover {
	border-color: #3b82f6;
}

.character-card.camille:hover {
	border-color: #0d9488;
}

.character-card.isabelle:hover {
	border-color: #16a34a;
}

.character-card.liam:hover {
	border-color: #7c3aed;
}

.character-card.lukas:hover {
	border-color: #ea580c;
}

.character-card.marko:hover {
	border-color: #f59e0b;
}
/* ================================================= */
/* select_scenario.php                               */
/* ================================================= */

.scenario-header {
	text-align: center;
	padding-block: 1rem 1.5rem;
}

.scenario-header h1 {
	font-size: 1.5rem;
	color: var(--text);
}

.scenario-header p {
	color: var(--text-muted);
	margin-top: 0.5rem;
	max-width: 800px;
	margin-inline: auto;
}

.scenario-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.scenario-card {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: var(--shadow);
	overflow: hidden;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.scenario-card:hover {
	transform: scale(1.03);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.scenario-card .scenario-name {
	font-weight: 500;
	font-size: 1.2rem;
}

.scenario-card .scenario-name span {
	float: right;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow);
}

.scenario-card .scenario-desc {
	font-size: 1.2rem;
	color: var(--text-muted);
}

.scenario-card .temp-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.scenario-card .temp-item {
	border-radius: 0.5rem;
	padding: 0.6rem 1rem;
	font-size: 0.85rem;
	color: var(--text-muted);
}

.scenario-card .temp-global,
.scenario-card .temp-swiss {
	font-weight: 600;
	font-size: 1.4rem;
}

.scenario-card.optimiste .temp-global,
.scenario-card.optimiste .temp-swiss {
	color: var(--optimiste);
}

.scenario-card.median .temp-global,
.scenario-card.median .temp-swiss {
	color: var(--median);
}

.scenario-card.pessimiste .temp-global,
.scenario-card.pessimiste .temp-swiss {
	color: var(--pessimiste);
}

.scenario-card .scenario-code {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-top: auto;
	border-top: 2px solid var(--border);
	padding-top: 0.75rem;
}

.scenario-card .btn-select {
	width: 100%;
	padding: 0.75rem;
	border: none;
	border-radius: 0.4rem;
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	text-align: center;
}

.scenario-card.optimiste {
	background: #dffbe7;
	border-color: var(--optimiste);
}

.scenario-card.median {
	background: #fff0dd;
	border-color: var(--median);
}

.scenario-card.pessimiste {
	background: #ffe4e4;
	border-color: var(--pessimiste);
}

.scenario-card.optimiste .btn-select {
	background: var(--optimiste);
}

.scenario-card.median .btn-select {
	background: var(--median);
}

.scenario-card.pessimiste .btn-select {
	background: var(--pessimiste);
}

.scenario-card.optimiste .temp-item {
	background: #cdf8dc;
}

.scenario-card.median .temp-item {
	background: #fff2c8;
}

.scenario-card.pessimiste .temp-item {
	background: #ffd3d3;
}

.scenario-card.selected-card {
	border: 3px solid #1e293b;
}

.scenario-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.scenario-card-link:hover,
.scenario-card-link * {
	text-decoration: none;
}

/* ── Récapitulatif de sélection ─────────────────────────────── */
.selection-summary {
	background: var(--card-bg);
	border: 3px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin-top: 1.5rem;
	text-align: center;
	box-shadow: var(--shadow);
	max-width: 600px;
	margin-inline: auto;
}

.selection-summary h3 {
	font-size: 0.9rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
}

.selection-summary .selection-values {
	display: flex;
	justify-content: center;
	gap: 3rem;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.selection-summary .selection-values strong {
	display: block;
	font-size: 1rem;
}

/* ================================================= */
/* Boutons                                           */
/* ================================================= */

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 3rem;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	font-size: 1.1rem;
	text-decoration: none;
}

.btn-primary:hover {
	background: #0284c7;
	text-decoration: none;
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	background: var(--accent);
	cursor: pointer;
	font-size: 0.9rem;
	color: #fff;
	text-decoration: none;
}

.btn-secondary:hover {
	text-decoration: none;
}

/* ================================================= */
/* PAGE VIEW_SCENARIO.PHP                            */
/* ================================================= */

.story-nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.5rem;
	background: var(--card-bg);
	border-bottom: 1px solid var(--border);
}

.story-nav .character-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.scenario-tabs {
	position: sticky;
	top: 80px;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--card-bg);
	border-bottom: 1px solid var(--border);
}

.scenario-tabs label {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-right: 0.5rem;
}

.scenario-tab {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--border);
	border-radius: 0.5rem;
	text-align: center;
	font-size: 0.85rem;
	cursor: pointer;
	background: transparent;
}

.scenario-tab .tab-name {
	font-weight: 700;
}

.scenario-tab .tab-temps {
	font-size: 0.75rem;
}

.scenario-tab.optimiste.active {
	border-color: var(--optimiste);
	background: #f0fdf4;
	color: var(--optimiste);
}

.scenario-tab.median.active {
	border-color: var(--median);
	background: #fff7ed;
	color: var(--median);
}

.scenario-tab.pessimiste.active {
	border-color: var(--pessimiste);
	background: #fef2f2;
	color: var(--pessimiste);
}

.story-layout {
	display: grid;
	grid-template-columns: 420px 1fr;
	height: calc(100vh - 180px);
	overflow: hidden;
}

.sidebar {
	width: 420px;
	height: 100%;
	overflow: hidden;
	padding: 1.5rem 2rem;
	background: var(--card-bg);
	border-right: 1px solid var(--border);
}

.sidebar h2 {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.story-content {
	width: 100%;
	max-width: none;
	height: 100%;
	overflow-y: auto;
	padding: 2rem 3rem 3rem 3rem;
}

.story-content > * {
	width: 100%;
	max-width: none;
}

/* ── Frise du parcours de vie ──────────────────────────────── */
.timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-left: 2.5rem;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 0.75rem;
	bottom: 0.75rem;
	width: 3px;
	background: linear-gradient(#bfdbfe, #bbf7d0, #bfdbfe);
}

.timeline-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-height: 110px;
	padding: 1.5rem;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 1rem;
	color: var(--text);
	text-decoration: none;
}

.timeline-item:hover {
	text-decoration: none;
}

.timeline-dot {
	position: absolute;
	left: -2.1rem;
	width: 22px;
	height: 22px;
	background: var(--card-bg);
	border: 4px solid #d1d5db;
	border-radius: 50%;
}

.timeline-item.done .timeline-dot {
	background: var(--optimiste);
	border-color: var(--optimiste);
}

.timeline-item.active {
	border: 3px solid #3b82f6;
	box-shadow: 0 0 0 4px #bfdbfe;
}

.timeline-item.active .timeline-dot {
	background: #3b82f6;
	border-color: #bfdbfe;
}

.timeline-item.completed .timeline-dot {
	background: #22c55e;
	border-color: #bbf7d0;
}

.timeline-item .stage-name {
	font-weight: 600;
	font-size: 0.9rem;
}

.timeline-item .stage-meta {
	font-size: 0.8rem;
	color: var(--text-muted);
}

.badge-en-cours {
	margin-left: auto;
	padding: 0.5rem 1rem;
	background: #2563eb;
	color: #fff;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

/* ── Contenu du scénario ───────────────────────────────────── */
.stage-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 1.5rem;
}

.stage-header h2 {
	font-size: 1.35rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.stage-meta {
	font-size: 0.85rem;
	color: var(--text-muted);
}

.rcp-badge {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
}

.rcp-badge.rcp-26 {
	background: var(--optimiste);
}

.rcp-badge.rcp-45 {
	background: var(--median);
}

.rcp-badge.rcp-70,
.rcp-badge.rcp-7,
.rcp-badge.rcp-85 {
	background: var(--pessimiste);
}

.story-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	border-radius: var(--radius);
	margin-block: 1rem;
}

.narrative {
	width: 100%;
	max-width: none;
	margin-top: 2rem;
	font-size: 0.95rem;
}

.narrative p {
	width: 100%;
	max-width: none;
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
	line-height: 1.8;
	text-align: justify;
}

/* ── Impacts climatiques ───────────────────────────────────── */
.impacts-title {
	font-weight: 700;
	font-size: 1.4rem;
	margin-block: 1.5rem 0.75rem;
}

.impacts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.impact-card {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	font-size: 0.9rem;
	box-shadow: var(--shadow);
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.impact-icon {
	font-size: 1.5rem;
	min-width: 2rem;
}

.impact-card .impact-name {
	font-weight: 700;
	font-size: 1rem;
}

.impact-card .impact-desc {
	color: var(--text-muted);
	font-size: 0.95rem;
}

/* ── Navigation Précédent / Suivant ─────────────────────────── */
.story-nav-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin-top: 2rem;
	padding-block: 2rem;
	border-top: 1px solid var(--border);
}

.story-nav-bottom .btn-secondary,
.story-nav-bottom .btn-primary {
	min-width: 180px;
	height: 56px;
	padding: 0 1.5rem;
}

/* ── Section de fin de parcours ─────────────────────────────── */
.story-end {
	text-align: center;
	padding: 2rem;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-top: 50px;
}

.story-end .checkmark {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #0ea5e9;
	color: #fff;
	font-size: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	margin-bottom: 1rem;
}

.story-end h3 {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.story-end p {
	font-size: 0.9rem;
	color: var(--text-muted);
	max-width: 400px;
	margin-inline: auto;
}

.sources-box {
	background: #f8fafc;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-top: 1.5rem;
	text-align: left;
	font-size: 0.85rem;
}

.sources-box strong {
	display: block;
	margin-bottom: 0.25rem;
}

.btn-block {
	display: block;
	width: 100%;
	padding: 0.75rem;
	background: var(--optimiste);
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 1rem;
	text-align: center;
	text-decoration: none;
}

.btn-block:hover {
	text-decoration: none;
}

.btn-back-home {
	display: block;
	text-align: center;
	font-size: 0.9rem;
	color: var(--text-muted);
	margin-top: 0.75rem;
}

/* ================================================= */
/* Utilisation de ChatGPT pour le thème jour/nuit    */
/* ================================================= */
/*
* J'ai utilisé ChatGPT pour m'aider à mettre en place
* la partie PHP du système de changement de thème
* (clair/sombre) basée sur les sessions.
*
* Cette fonctionnalité n'était pas demandée dans les
* consignes du projet. Elle a été ajoutée comme
* amélioration personnelle afin d'améliorer le confort
* de lecture et l'expérience utilisateur.
*
* La partie CSS du système de thèmes a été réalisée
* manuellement. J'ai utilisé ChatGPT uniquement pour
* m'aider à implémenter la logique PHP permettant de
* mémoriser le thème sélectionné et de le conserver
* lors de la navigation entre les différentes pages
* de l'application.
*
* Les propositions générées ont été relues, comprises,
* adaptées et testées avant leur intégration dans le
* projet.
*/

/* ================================================= */
/* THEME SWITCHER                                    */
/* ================================================= */

.theme-toggle {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--card-bg);
	border: 1px solid var(--border);
	font-size: 1.2rem;
	text-decoration: none;
	transition: all 0.25s ease;
}

.theme-toggle:hover {
	transform: rotate(20deg);
	text-decoration: none;
}

/* ================================================= */
/* DARK MODE                                         */
/* ================================================= */

body.dark {
	--bg: #0f172a;
	--card-bg: #1e293b;
	--border: #334155;
	--text: #f1f5f9;
	--text-muted: #94a3b8;
	--accent: #38bdf8;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
	.character-grid,
	.scenario-grid,
	.stats,
	.impacts-grid {
		grid-template-columns: 1fr;
	}

	.story-layout {
		grid-template-columns: 1fr;
		height: auto;
		overflow: visible;
	}

	.sidebar {
		width: 100%;
		height: auto;
		overflow: visible;
		border-right: none;
		border-bottom: 1px solid var(--border);
	}

	.story-content {
		height: auto;
		overflow: visible;
		padding: 1.5rem;
	}

	.scenario-tabs {
		flex-direction: column;
		top: 0;
	}

	.scenario-tab {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.stats {
		grid-template-columns: 1fr;
	}

	.home-header h1 {
		font-size: 2rem;
	}
}