:root { 
	color-scheme: dark; 
}

html, body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background-color: #121212;
	color: white;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	user-select: none;
}

/* Globale Schriftart */
body {
	font-family: 'Roboto Condensed', sans-serif;
}

button {
	cursor: pointer;
}

.badges {
	position: absolute;
	top: 1rem;
	display: flex;
	gap: 0.5rem;
	z-index: 10;
	align-items: center;
}

.badge {
	background: #2b2b2b;
	color: white;
	border: none;
	border-radius: 999px;
	padding: 0.5rem 1rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	font-weight: bold;
		line-height: 1rem;
}

.badge.pending {
	color: limegreen;
}

.top-buttons {
	background: #2b2b2b;
	color: white;
	border: none;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
		line-height: 1rem;
}

.click-button {
	background: #2b2b2b;
	border: none;
	border-radius: 50%;
	width: 200px;
	height: 200px;
	font-size: 4rem;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

.click-button img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 95%;
	height: 95%;
	object-fit: contain;
	pointer-events: none;
	border-radius: 50%;
	z-index: 0;
}

.click-button:active { 
	transform: scale(0.95); 
}

.lizard {
	position: absolute;
	font-size: 2.5rem;
	animation: pop 1.5s ease-out forwards;
	pointer-events: none;
	z-index: 1;
}

@keyframes pop {
	0% { transform: scale(0) translateY(0); opacity: 1; }
	50% { transform: scale(1.2) translateY(-50px); }
	100% { transform: scale(0) translateY(-100px); opacity: 0; }
}

.toast-container {
  position: fixed;
  bottom: 50%;
  left: 50%;                         /* center the container horizontally */
  transform: translate(-50%, -8.5rem);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  align-items: center;               /* center toasts inside the container */
}

.toast {
  background: #1e1e1e;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(10px);
  animation: toast-in 0.3s ease-out forwards, toast-out 0.3s ease-in 2.3s forwards;

  display: inline-flex;              /* shrink to content */
  width: fit-content;                /* keep each toast’s natural width */
  max-width: min(90vw, 28rem);       /* wrap long messages nicely */
  text-align: center;
  overflow-wrap: anywhere;
}

@keyframes toast-in { 
	to { opacity: 1; transform: translateY(0); } 
}

@keyframes toast-out { 
	to { opacity: 0; transform: translateY(10px); } 
}

/* ===== Theme: Light (nur Farben/Border/Shadow, kein Layout) ===== */

body[data-theme='light'] {
	background-color: #f2f2f2;
	color: #121212;
}

body[data-theme='light'] .click-button {
	background: #e0e0e0;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

body[data-theme='light'] .badge,
body[data-theme='light'] .toast,
body[data-theme='light'] .top-buttons,
body[data-theme='light'] .addon-menu {
	background: #ffffff;
	color: #121212;
}

/* Light: Badge pending grün bleibt gut sichtbar */
body[data-theme='light'] .badge.pending {
	color: #1f8f1f;
}

.note {
	margin-top: 1rem;
	font-size: 0.9rem;
	opacity: 0.7;
}

.milestone-meter {
	position: fixed;
	left: 1rem;
	top: 1rem;
	bottom: 1rem;
	width: 0.5rem;
	background: #222;
	border-radius: 1rem;
	z-index: 0;
}

.milestone-bar {
	position: relative;
	width: 100%;
	height: 100%;
	background: #444;
	border-radius: 1rem;
}

.milestone-fill {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0%;
	background: limegreen;
	transition: height 0.3s ease;
	border-radius: 1rem;
}

.milestone-tick {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(255, 255, 255, 0.4);
}

.milestone-tick-label {
	position: absolute;
	left: 0.5rem;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.6);
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 6px;
	white-space: nowrap;
}

.milestone-tick.is-last .milestone-tick-label {
	top: 0;
}
.milestone-tick.is-last {
	top: 0;
}

/* Personal Best Linie in der Milestone-Bar */
.milestone-pb {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #cda434, #ffd700, #cda434);
	box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
	transform: translateY(1px); /* feine Justierung */
}

.milestone-pb-label {
	position: absolute;
	left: 0.5rem;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.6);
	color: #ffd700;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 6px;
	white-space: nowrap;
		z-index: 10;
}

/* === Light Theme Overrides (ergänzt fehlende Elemente) === */

body[data-theme='light'] .milestone-meter {
	background: #ccc;
}

body[data-theme='light'] .milestone-bar {
	background: #e0e0e0;
}

body[data-theme='light'] .milestone-fill {
	background: seagreen;
}

body[data-theme='light'] .milestone-tick {
	background-color: #00000022;
}

/* Light: gut lesbare Labels auf hell */
body[data-theme='light'] .milestone-tick-label {
	background: rgba(255,255,255,0.92);
	color: #111;
	border: 1px solid #e5e5e5;
}

/* Light: PB-Label kontrastreich auf hell */
body[data-theme='light'] .milestone-pb-label {
	background: rgba(255,255,255,0.92);
	color: #a67c00;
	border: 1px solid #ead084;
}

#bottom-stuff {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 20px 20px 0 0;
	border-bottom-width: 0;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
	overflow: hidden;
	z-index: 1;
	backdrop-filter: blur(2px);
}

#leaderboard-wrapper {
	position: relative;
}

.lb-toggle {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    border: 0;
    border-radius: 0 0 0 1rem;
    padding: 2px 15px;
    color: black;
}

/* Leaderboard */
#leaderboard {
	list-style-type: none;
	text-align: center;
	padding: 0 1rem 1rem 1rem;
	margin: 0;
	font-size: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	height: 200px;
	overflow-y: auto;
	scrollbar-width: none;
	transition: height 0.5s;
	width: 14rem;;
}

#leaderboard.bigger {
	height: 50vh;
}

#leaderboard.smaller {
	height: 20px;
}

#leaderboard:before {
	content: "LEADERBOARD";
	position: sticky;
	top: 0;
	z-index: 1;
	background: rgba(255, 255, 255, 0.8);
	padding: 0 10px;
	border-radius: 0 0 10px 10px;
	color: black;
	width: 50%;
}

#leaderboard .leaderboard-item, #leaderboard .history-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	padding: 0.4rem 0.8rem;
	border-radius: 0.5rem;
	background: #1e1e1e;
	transition: transform 0.15s ease, background 0.15s ease;
	position: relative;
}

#leaderboard .leaderboard-item.leaderboard-big {
  font-size: 1rem;
}

#leaderboard .leaderboard-item.leaderboard-small {
  font-size: 0.75rem;
  opacity: 1;
}

#leaderboard .leaderboard-item .flag, #leaderboard .history-item .flag {
	position: absolute;
	right: 0.5rem;
	opacity: 0.8;
}

#leaderboard .leaderboard-item.leaderboard-big .flag {
	font-size: 1.5rem;
}

#leaderboard .leaderboard-item.leaderboard-small .flag {
	font-size: 1rem;
}

#leaderboard .leaderboard-item .place {
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	font-size: 0.5rem;
}

#leaderboard .leaderboard-item .taps, #leaderboard .history-item .taps {
	font-size: 0.8rem;
}

/* Gold */
#leaderboard .leaderboard-item:nth-child(1) {
	background: linear-gradient(145deg, #FFD700 0%, #FFEA70 30%, #FFD700 60%, #B8860B 100%) !important;
	color: #000 !important;
	box-shadow: 0 0 5px rgba(255, 215, 0, 0.8) !important;
}

/* Silver */
#leaderboard .leaderboard-item:nth-child(2) {
	background: linear-gradient(145deg, #E0E0E0 0%, #FFFFFF 30%, #C0C0C0 60%, #808080 100%) !important;
	color: #000 !important;
	box-shadow: 0 0 5px rgba(192, 192, 192, 0.8) !important;
}

/* Bronze */
#leaderboard .leaderboard-item:nth-child(3) {
	background: linear-gradient(145deg, #CD7F32 0%, #E6A26F 30%, #CD7F32 60%, #8B4513 100%) !important;
	color: #fff !important;
	box-shadow: 0 0 5px rgba(205, 127, 50, 0.8) !important;
}

#leaderboard .leaderboard-item.my-country {
  outline: 2px solid #00ff88; /* crisp edge */
  box-shadow: 0 0 8px 2px #00ff88 !important; /* soft outer glow */
}

#leaderboard .leaderboard-item:hover {
	transform: scale(1.1);
}

/* Light: normale Leaderboard-Items (Top 1–3 bleiben wie oben) */
body[data-theme='light'] #leaderboard li {
	background: #ffffff;
	color: #121212;
}
body[data-theme='light'] #leaderboard li .taps { color: #121212; }
body[data-theme='light'] #leaderboard li .place { color: #555; }

/* Session-Progressbar */
.session-progress {
	position: relative;
	width: 200px; /* feste Breite */
	height: 6px;
	margin-top: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	overflow: hidden;
}
.session-progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, #00ff7f, #228b22); /* hellgrün → waldgrün */
	will-change: width;
}
/* Light: progress rail sichtbar auf Hell */
body[data-theme='light'] .session-progress {
	background: rgba(0,0,0,0.10);
}

/* Grundstil – genaue Position kommt pro Add-on aus JSON */
.lizard-addon{
	position:absolute;
	pointer-events:none;
	transform-origin:bottom center;
	line-height:1;
	font-size:1.1em; /* falls Hut etwas größer wirken soll */
		z-index: 1;
}

/* Add-on Picker UI */
.rightStackHorizontal {
	display: flex;
	gap: 0.5rem;
}
@media (max-width: 768px) {
	.rightStackHorizontal {
		flex-direction: column;
		align-items: flex-end; /* keep them aligned to the right edge */
	}
}
.addon-picker{ position:relative; display:inline-block; }
.addon-menu{
	position:absolute; top:120%; right:0; min-width:180px; z-index:1000;
	background:rgba(0,0,0,0.85); backdrop-filter:saturate(140%) blur(6px);
	border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:6px;
}
.addon-item{
	display:flex; align-items:center; justify-content:flex-start; gap:8px;
	width:100%; background:transparent; color:inherit; border:0; cursor:pointer;
	padding:8px 10px; border-radius:8px; text-align:left;
}
.addon-item:hover{ background:rgba(255,255,255,0.08); }
.addon-item.locked{ opacity:0.55; cursor:not-allowed; }
.addon-item .em{ width:1.5em; text-align:center; }
.addon-item .nm{ flex:1 1 auto; }
.addon-item .lock{ font-size:.85em; opacity:.8; }
.addon-item .check{ opacity:.9; }
.addon-item.none{ justify-content:center; }

/* Light: Dropdown hell + Hover anpassen */
body[data-theme='light'] .addon-menu{
	background:#ffffff;
	border:1px solid #e9e9e9;
}
body[data-theme='light'] .addon-item:hover{
	background:rgba(0,0,0,0.06);
}
body[data-theme='light'] .addon-item .lock{
	color:#666;
}

/* Bottom Tap Counter */
#bottomTapCounter {
	position: fixed;
	top: 5rem;
	left: 50%;
	transform: translateX(-50%);
	font-weight: bold;
	color: #fff;
	z-index: 0;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
	pointer-events: none;
	transition: font-size 0.2s ease;
}

#bottomTapCounter.pulse {
	animation: pulseCounter 0.25s ease;
}

@keyframes pulseCounter {
	0%   { transform: translateX(-50%) scale(1); }
	50%  { transform: translateX(-50%) scale(var(--pulse-scale, 1.05)); }
	100% { transform: translateX(-50%) scale(1); }
}

/* Light: Counter gut lesbar */
body[data-theme='light'] #bottomTapCounter {
	color: #111;
	text-shadow: 0 0 6px rgba(0,0,0,0.25);
}

/* === LAYOUT: umgedrehtes L oben — Counter links horizontal, Buttons rechts vertikal === */

/* Oberer Wrapper, der die vorhandenen .badges (mit #myClicks / #totalClicks)
   links belässt und rechts eine vertikale Button-Spalte aufnimmt */
.top-l {
	position: absolute;
	top: 1rem;
	left: 1rem;
	right: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	z-index: 10;
}

/* Neu: Counter mittig zwischen linkem Rand und Buttons ausrichten */
.top-l .badges {
	position: static;
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	align-items: center;
	width: 100%;
	justify-content: end;
	margin-right: 0.5rem;
}

/* Rechts: vertikal gestapelte Buttons (Addons/Vibration/Theme) */
#topRightStack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
}

/* Buttons behalten dein vorhandenes Aussehen (.top-buttons); keine Änderungen an IDs/Klassen nötig */
#topRightStack .top-buttons {
	/* nichts layout-kritisches überschreiben */
}

/* Light-Mode: nur Farben sicherstellen (kein Layout) */
body[data-theme='light'] #topRightStack .top-buttons {
	background: #ffffff;
	color: #121212;
}

/* Einheitlicher Schatten für alle Buttons in der rechten vertikalen Leiste */
#topRightStack .top-buttons {
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Speziell der Addon-Toggler: gleiche Optik erzwingen */
#topRightStack .addon-toggle {
	box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
	background: #fff;           /* light */
	color: #121212;
}

/* Dark-Mode: gleiche Angleichung */
body:not([data-theme='light']) #topRightStack .addon-toggle {
	background: #2b2b2b;
	color: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.40) !important;
}

/* Sicherstellen, dass der Wrapper selbst keinen Shadow/Filter beiträgt */
.addon-picker {
	filter: none;
	box-shadow: none;
}

/* Fokus-Optik aller Top-Buttons etwas zarter machen (optional) */
#topRightStack .top-buttons:focus-visible {
	outline: 2px solid rgba(0,0,0,0.15);
	outline-offset: 2px;
}

/* Light-Mode: gleicher zarter Schatten für alle rechts */
body[data-theme='light'] #topRightStack .top-buttons {
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* AddOn‑Ticks: gleiche Optik wie Milestone‑Ticks, aber mit Akzentfarbe */
.addon-tick {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(32, 201, 151, 0.65); /* #20c997 mit Transparenz */
	box-shadow: 0 0 6px rgba(32, 201, 151, 0.35);
}

/* Statusfarben (optional, wenn du locked/unlocked im JS setzt) */
.addon-tick.addon-unlocked {
	background: rgba(255, 193, 7, 0.85); /* gelb → freigeschaltet */
	box-shadow: 0 0 6px rgba(255, 193, 7, 0.45);
}
.addon-tick.addon-locked {
	background: rgba(173, 181, 189, 0.5); /* grau → gesperrt */
	box-shadow: none;
}

/* Label stylen wie Milestone‑Label – nur mit leichtem Akzentrahmen */
.addon-tick-label {
	position: absolute;
	left: 0.5rem;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.6);
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 6px;
	white-space: nowrap;
	border: 1px solid rgba(32, 201, 151, 0.35);
}

/* Light‑Theme Anpassungen, analog zu deinen Milestone‑Overrides */
body[data-theme='light'] .addon-tick {
	background: rgba(29, 191, 142, 0.55); /* helle Variante des Akzents */
	box-shadow: 0 0 4px rgba(29, 191, 142, 0.25);
}
body[data-theme='light'] .addon-tick.addon-unlocked {
	background: rgba(255, 193, 7, 0.9);
	box-shadow: 0 0 5px rgba(255, 193, 7, 0.35);
}
body[data-theme='light'] .addon-tick.addon-locked {
	background: rgba(120, 120, 120, 0.45);
}

body[data-theme='light'] .addon-tick-label {
	background: rgba(255,255,255,0.92);
	color: #111;
	border: 1px solid rgba(29, 191, 142, 0.35);
}

.milestone-tick.milestone-reached {
	background: background: rgba(32, 201, 151, 0.65);
	box-shadow: 0 0 6px limegreen;
}

.milestone-tick.milestone-reached .milestone-tick-label {
	border: 1px solid limegreen;
	color: limegreen;
	font-weight: bold;
		box-shadow: 0 0 6px limegreen;
}

/* Twemoji inserts <img class="emoji"> by default */
.flag .fi {
  /* border-radius: .25rem; /* keeps a nice rounded look */
}

.delta {
	position: absolute;
	right: 4rem;
	color: #4caf50;
	font-weight: bold;
	animation: fadeUp 2s ease forwards;
}

@keyframes fadeUp {
  0%   { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Divider style for the history block */
#leaderboard .history-header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  position: sticky;
  top: 0;
  z-index: 2;
  color: black;
  padding: 0 10px;
  border-radius: 10px;
  width: 50%;
}

#leaderboard .history-item .history-taps {
  font-variant-numeric: tabular-nums;
}

.consent-prompt {
	list-style: none;
	padding: 1rem;
	text-align: left;
	border-radius: 0.5rem;
	border: 1px solid #444;
	background: #1a1a1a;
	color: #fff;
	width: 200px;
	font-family: inherit;
}

.consent-prompt h3 {
	margin: 0.2em 0;
}

.consent-prompt p {
	font-size: 0.95em;
	line-height: 1.4;
}

.consent-buttons {
	margin-top: 1rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.consent-buttons .btn {
	width: 100%;
}

/* Yes button: subtle green, rounded, still more prominent */
.consent-yes {
    background-color: rgba(40, 167, 69, 0.85); /* softer green */
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    padding: 8px 16px;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.consent-yes:hover {
    background-color: rgba(40, 167, 69, 1);
    transform: scale(1.03);
}

/* No button: thinner, muted red outline */
.consent-no {
    background-color: transparent;
    color: rgba(220, 53, 69, 0.85); /* softer red */
    font-size: 0.9em;
    font-weight: 500;
    padding: 6px 14px;
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 0.4rem;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s ease;
}

.consent-no:hover {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.85);
    color: #ff6b7a;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Edit Consent button */
#edit-consent {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    border: 0;
    border-radius: 0 0 1rem 0;
    padding: 2px 15px;
    color: black;
	font-weight: bold;
	z-index: 1;
}