/* ============================================================
   Der Bananen-Tresor (spielid 27)
   Tresortür aus Stahl mit Messing-Handrad, Ziffernwalzen und
   Kontrolllampen vor einem Dschungel-Hintergrund. Reines DOM/CSS,
   alle Animationen respektieren prefers-reduced-motion.
   ============================================================ */

.bt-spiel {
	--bt-stahl-hell: #c9d3da;
	--bt-stahl:      #8d9aa5;
	--bt-stahl-dunkel: #4c5862;
	--bt-messing:    #f5b70a;
	--bt-gold:       #ffd93b;
	--bt-gruen:      #3fbf6b;
	--bt-nacht:      #12301f;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.4rem;
	padding: 1.4rem;
	border-radius: var(--radius-big);
	background:
		radial-gradient(ellipse 60% 40% at 15% 0%, rgba(255, 217, 59, .22), transparent 70%),
		radial-gradient(ellipse 50% 60% at 100% 100%, rgba(126, 211, 247, .18), transparent 70%),
		linear-gradient(160deg, #1f5e38 0%, #173f28 55%, #0f2a1b 100%);
	box-shadow: var(--shadow-lift);
	overflow: hidden;
	isolation: isolate;
}

/* Blätter-Silhouetten am Rand */
.bt-spiel::before,
.bt-spiel::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 260px;
	height: 260px;
	background:
		radial-gradient(ellipse 30% 70% at 50% 100%, rgba(46, 125, 70, .55) 60%, transparent 62%),
		radial-gradient(ellipse 25% 60% at 20% 90%, rgba(46, 125, 70, .45) 60%, transparent 62%),
		radial-gradient(ellipse 25% 60% at 80% 90%, rgba(46, 125, 70, .45) 60%, transparent 62%);
	pointer-events: none;
}
.bt-spiel::before { left: -70px; top: -90px; transform: rotate(150deg); }
.bt-spiel::after  { right: -80px; bottom: -110px; transform: rotate(-20deg); }

/* ---------- Bühne + Tresor ---------- */

.bt-buehne {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}

.bt-tresor {
	position: relative;
	width: 100%;
	max-width: 420px;
	perspective: 1400px;
}

.bt-korpus {
	position: absolute;
	inset: 0;
	border-radius: 26px;
	background:
		radial-gradient(circle at 50% 55%, rgba(255, 217, 59, .45), transparent 60%),
		linear-gradient(#20262b, #0e1215);
	box-shadow: inset 0 0 0 10px #2d353b, inset 0 0 40px rgba(0, 0, 0, .8);
	display: grid;
	place-items: center;
}

.bt-schatz {
	display: grid;
	justify-items: center;
	gap: .2rem;
	opacity: 0;
	transform: scale(.8);
	transition: opacity .5s .35s, transform .6s .35s cubic-bezier(.2, 1.6, .4, 1);
}
.bt-offen .bt-schatz { opacity: 1; transform: scale(1); }
.bt-barren {
	display: block;
	width: 120px;
	height: 26px;
	margin-top: -6px;
	border-radius: 6px 6px 3px 3px;
	background: linear-gradient(#fff3b0, #f5b70a 55%, #a87400);
	box-shadow: 0 3px 0 #7a5400, 0 0 18px rgba(255, 217, 59, .6);
}
.bt-schatz-bananen { font-size: 2.6rem; filter: drop-shadow(0 0 12px rgba(255, 217, 59, .9)); }

.bt-tuer {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 6% 7%;
	border-radius: 26px;
	background:
		radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .5), transparent 45%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px),
		linear-gradient(145deg, var(--bt-stahl-hell), var(--bt-stahl) 45%, var(--bt-stahl-dunkel));
	box-shadow:
		inset 0 0 0 4px rgba(255, 255, 255, .35),
		inset 0 0 0 14px rgba(0, 0, 0, .12),
		inset 0 -8px 20px rgba(0, 0, 0, .25),
		0 18px 40px rgba(0, 0, 0, .45);
	transform-origin: 0% 50%;
	transition: transform 1.1s cubic-bezier(.6, -0.1, .3, 1.15);
	backface-visibility: hidden;
}
/* Nieten in den Ecken */
.bt-tuer::before {
	content: '';
	position: absolute;
	inset: 12px;
	border-radius: 18px;
	pointer-events: none;
	background:
		radial-gradient(circle at 8px 8px, #eef2f5 2px, #6c7a85 4px, transparent 5px) top left / 50% 50% no-repeat,
		radial-gradient(circle at calc(100% - 8px) 8px, #eef2f5 2px, #6c7a85 4px, transparent 5px) top right / 50% 50% no-repeat,
		radial-gradient(circle at 8px calc(100% - 8px), #eef2f5 2px, #6c7a85 4px, transparent 5px) bottom left / 50% 50% no-repeat,
		radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #eef2f5 2px, #6c7a85 4px, transparent 5px) bottom right / 50% 50% no-repeat;
	border: 2px solid rgba(0, 0, 0, .12);
}
.bt-offen .bt-tuer { transform: rotateY(-108deg); }

.bt-tuer-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
}
.bt-marke {
	font-family: var(--font-display);
	font-size: .82rem;
	letter-spacing: .18em;
	color: #3a454e;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.bt-lampe {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ffb3a8, #c0392b 60%, #6e1a12);
	box-shadow: 0 0 0 3px #39434b, 0 0 10px rgba(192, 57, 43, .6);
	transition: background .25s, box-shadow .25s;
}
.bt-lampe.gelb {
	background: radial-gradient(circle at 35% 35%, #fff8c9, #ffd93b 60%, #b58700);
	box-shadow: 0 0 0 3px #39434b, 0 0 16px rgba(255, 217, 59, .95);
}
.bt-lampe.gruen {
	background: radial-gradient(circle at 35% 35%, #d7ffe3, #3fbf6b 60%, #146b33);
	box-shadow: 0 0 0 3px #39434b, 0 0 20px rgba(63, 191, 107, 1);
}
.bt-lampe.blink { animation: bt-blink .32s 3; }
@keyframes bt-blink { 50% { filter: brightness(.35); } }

/* Ziffernwalzen */
.bt-anzeige {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4%;
	margin: 5% 0 4%;
	padding: 4% 4.5%;
	border-radius: 16px;
	background: linear-gradient(#20282e, #39444c);
	box-shadow: inset 0 4px 10px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .5);
}
.bt-walze {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(#a7aeb3, #f7f8f4 22%, #ffffff 50%, #f7f8f4 78%, #a7aeb3);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25);
	display: grid;
	place-items: center;
	transition: box-shadow .2s;
}
.bt-walze span {
	font-family: var(--font-display);
	font-size: clamp(2rem, 9vw, 3.4rem);
	line-height: 1;
	color: #22282c;
}
.bt-walze.aktiv { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), 0 0 0 3px var(--bt-gold), 0 0 16px rgba(255, 217, 59, .8); }
.bt-walze.aktiv::after {
	content: '';
	position: absolute;
	left: 25%; right: 25%; bottom: 12%;
	height: 4px;
	border-radius: 2px;
	background: var(--bt-messing);
	animation: bt-cursor 1s steps(2) infinite;
}
@keyframes bt-cursor { 50% { opacity: 0; } }
.bt-walze span.rollt { animation: bt-rollen .28s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes bt-rollen {
	0%   { transform: translateY(-110%); filter: blur(3px); }
	100% { transform: translateY(0);     filter: blur(0); }
}
.bt-walze.falsch { animation: bt-wackeln .35s; }
.bt-anzeige.zittern { animation: bt-wackeln .45s; }
@keyframes bt-wackeln {
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(3px); }
}
.bt-walze.code span { color: #b23a1f; }
.bt-walze.treffer { background: linear-gradient(#e9c34a, #fff6c7 50%, #e9c34a); }

.bt-tuer-mitte {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 1rem;
	min-height: 0;
}
.bt-rad {
	width: min(42%, 150px);
	height: auto;
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
	transition: transform .9s cubic-bezier(.3, 1.4, .5, 1);
}
.bt-hud {
	display: grid;
	gap: .5rem;
}
.bt-hud > div {
	display: grid;
	min-width: 104px;
	padding: .35rem .8rem;
	border-radius: 12px;
	background: linear-gradient(#1b2328, #2c363d);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .5);
	text-align: center;
}
.bt-hud-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #9fb0bb; }
.bt-hud-wert { font-family: 'Courier New', monospace; font-weight: 700; font-size: 1.35rem; color: #8dff9e; text-shadow: 0 0 8px rgba(141, 255, 158, .6); }

.bt-meldung {
	margin: .4rem 0 0;
	min-height: 1.5em;
	text-align: center;
	font-weight: 700;
	color: #2b3238;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* Startschild */
.bt-start {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: .5rem;
	border-radius: 26px;
	background: rgba(15, 42, 27, .55);
	backdrop-filter: blur(2px);
	text-align: center;
	color: #fff;
}
.bt-start[hidden] { display: none; }
.bt-start p { margin: 0; font-size: .9rem; opacity: .85; }
.bt-start-knopf {
	padding: 1rem 1.6rem;
	border: 0;
	border-radius: 999px;
	font: 700 1.15rem var(--font-body);
	color: var(--ink);
	background: linear-gradient(#fff07a, var(--banana) 50%, var(--banana-dark));
	box-shadow: 0 6px 0 var(--banana-deep), 0 12px 24px rgba(0, 0, 0, .35);
	cursor: pointer;
	animation: bt-puls 1.8s ease-in-out infinite;
}
.bt-start-knopf:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--banana-deep); }
@keyframes bt-puls { 50% { transform: scale(1.05); } }

/* ---------- Ziffernblock ---------- */

.bt-block {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .55rem;
	width: 100%;
	max-width: 420px;
}
.bt-block button {
	padding: .7rem 0;
	border: 0;
	border-radius: 14px;
	font: 700 1.6rem var(--font-display);
	color: #22282c;
	background: linear-gradient(#ffffff, #dfe5e9);
	box-shadow: 0 4px 0 #8d9aa5, 0 6px 12px rgba(0, 0, 0, .3);
	cursor: pointer;
	transition: transform .06s, box-shadow .06s, filter .15s;
	touch-action: manipulation;
}
.bt-block button:hover { filter: brightness(1.05); }
.bt-block button:active,
.bt-block button.gedrueckt { transform: translateY(3px); box-shadow: 0 1px 0 #8d9aa5, 0 2px 4px rgba(0, 0, 0, .3); }
.bt-block .bt-taste-weg { background: linear-gradient(#ffe2db, #f4b8a9); box-shadow: 0 4px 0 #b4644f, 0 6px 12px rgba(0, 0, 0, .3); }
.bt-block .bt-taste-ok  { background: linear-gradient(#fff07a, var(--banana-dark)); box-shadow: 0 4px 0 var(--banana-deep), 0 6px 12px rgba(0, 0, 0, .3); }
.bt-block button:disabled { opacity: .45; cursor: default; transform: none; }
.bt-block button:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; }

/* ---------- Seite: Protokoll, Notizen ---------- */

.bt-seite {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	color: #fff;
}
.bt-protokoll-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.bt-protokoll-kopf h2 { margin: 0; color: var(--banana); font-size: 1.35rem; }
.bt-legende { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; opacity: .9; }
.bt-legende span { display: inline-flex; align-items: center; gap: .35rem; }

.bt-protokoll {
	list-style: none;
	margin: 0;
	padding: .6rem;
	display: grid;
	gap: .35rem;
	border-radius: var(--radius);
	background: rgba(0, 0, 0, .25);
	box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35);
	max-height: 520px;
	overflow-y: auto;
}
.bt-zeile {
	display: grid;
	grid-template-columns: 2rem 1fr auto;
	align-items: center;
	gap: .7rem;
	padding: .3rem .55rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
}
.bt-zeile.leer { opacity: .35; }
.bt-zeile.dran { background: rgba(255, 217, 59, .16); box-shadow: inset 0 0 0 2px rgba(255, 217, 59, .55); opacity: 1; }
.bt-zeile.fertig { cursor: pointer; transition: background .15s; }
.bt-zeile.fertig:hover { background: rgba(255, 255, 255, .13); }
.bt-zeile.sieg { background: linear-gradient(90deg, rgba(255, 217, 59, .45), rgba(63, 191, 107, .35)); }
.bt-nr { font-weight: 700; color: rgba(255, 255, 255, .7); text-align: right; font-variant-numeric: tabular-nums; }
.bt-ziffern { display: flex; gap: .3rem; }
.bt-ziffer {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.4rem;
	border-radius: 8px;
	font: 700 1.3rem var(--font-display);
	color: #22282c;
	background: linear-gradient(#fff, #e3e8eb);
	box-shadow: 0 2px 0 #8d9aa5;
}
.bt-zeile.leer .bt-ziffer { background: rgba(255, 255, 255, .15); box-shadow: none; }
.bt-ziffer.kippt { animation: bt-kippen .45s both; }
@keyframes bt-kippen {
	0%   { transform: rotateX(90deg) translateY(-6px); opacity: 0; }
	100% { transform: rotateX(0) translateY(0); opacity: 1; }
}

/* Bewertungs-Punkte in EINER Reihe (Wunsch des Users 2026-10-27): grün mit
   Haken = richtige Stelle, gelb mit Fragezeichen = kommt vor, andere Stelle.
   Nebeneinander statt 2×2 lässt Platz für deutlich größere Punkte. */
.bt-stecker {
	display: flex;
	gap: 5px;
	padding: 5px 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
}
.bt-stift {
	--bt-stift: 26px;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--bt-stift);
	height: var(--bt-stift);
	border-radius: 50%;
	font: 900 calc(var(--bt-stift) * .62) / 1 var(--font-body);
	font-style: normal;
	background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .18), rgba(0, 0, 0, .45));
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}
.bt-stift-richtig {
	color: #fff;
	background: radial-gradient(circle at 35% 30%, #b8f5c9, #2fb35c 55%, #12682f);
	box-shadow: 0 0 8px rgba(63, 191, 107, .85), inset 0 -2px 0 rgba(0, 0, 0, .2);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.bt-stift-richtig::after { content: "\2713"; }
.bt-stift-woanders {
	color: #5a3d00;
	background: radial-gradient(circle at 35% 30%, #fff8c9, #ffd93b 55%, #c98a00);
	box-shadow: 0 0 8px rgba(255, 217, 59, .8), inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.bt-stift-woanders::after { content: "?"; }
.bt-legende .bt-stift { --bt-stift: 20px; }
.bt-stift.ploppt { animation: bt-ploppen .35s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes bt-ploppen { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* Notizblock */
.bt-notizen {
	padding: .8rem;
	border-radius: var(--radius);
	background: rgba(255, 246, 222, .95);
	color: var(--ink);
	box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
	background-image: repeating-linear-gradient(transparent 0 23px, rgba(126, 211, 247, .45) 23px 24px);
}
.bt-notizen-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem .8rem; margin-bottom: .5rem; }
.bt-notizen-kopf h3 { margin: 0; font-size: 1rem; }
.bt-notizen-kopf span { font-size: .78rem; color: var(--ink-soft); }
.bt-notiz-ziffern { display: grid; grid-template-columns: repeat(10, 1fr); gap: .3rem; }
.bt-notiz-ziffern button {
	padding: .35rem 0;
	border: 2px solid rgba(43, 43, 32, .2);
	border-radius: 10px;
	font: 700 1.1rem var(--font-display);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	touch-action: manipulation;
}
.bt-notiz-ziffern button.raus { background: #e9e4d4; color: #a59f8a; text-decoration: line-through 3px var(--danger); }
.bt-notiz-ziffern button.drin { background: #c9f2d6; border-color: var(--jungle); color: var(--jungle-dark); }

.bt-werkzeug { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }

/* ---------- Ergebnis ---------- */

/* fixed statt absolute: das Spielfeld ist auf dem Handy höher als der
   Bildschirm, die Karte soll trotzdem immer mittig im Blick stehen. */
.bt-ergebnis {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(10, 30, 18, .62);
	backdrop-filter: blur(3px);
	animation: bt-einblenden .35s both;
}
.bt-ergebnis[hidden] { display: none; }
@keyframes bt-einblenden { from { opacity: 0; } }
.bt-ergebnis-karte {
	width: min(440px, 100%);
	padding: 1.6rem 1.4rem 1.3rem;
	border-radius: var(--radius-big);
	background: linear-gradient(var(--sand), #fff);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	text-align: center;
	animation: bt-hochspringen .55s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes bt-hochspringen { from { transform: translateY(40px) scale(.85); opacity: 0; } }
.bt-ergebnis-icon { font-size: 3.6rem; line-height: 1; animation: bt-wippen 1.6s ease-in-out infinite; }
@keyframes bt-wippen { 50% { transform: rotate(-8deg) scale(1.08); } }
.bt-ergebnis-karte h2 { margin: .4rem 0 .1rem; font-size: 1.9rem; }
.bt-ergebnis-unter { margin: 0 0 1rem; color: var(--ink-soft); }
.bt-ergebnis-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.bt-ergebnis-werte div { display: grid; padding: .6rem .3rem; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.bt-ergebnis-werte span { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.bt-ergebnis-werte b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.bt-ergebnis-info { min-height: 1.2em; margin: 0 0 1rem; font-size: .92rem; }
.bt-ergebnis-info .rekord { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--banana); font-weight: 700; animation: bt-puls 1.2s ease-in-out infinite; }
.bt-ergebnis-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* Bananen-Regen */
.bt-flocke {
	position: absolute;
	z-index: 11;
	top: 0;
	left: 0;
	font-size: 1.8rem;
	pointer-events: none;
	animation: bt-fliegen var(--dauer, 1.6s) cubic-bezier(.15, .6, .35, 1) forwards;
}
@keyframes bt-fliegen {
	0%   { transform: translate(var(--x0), var(--y0)) rotate(0) scale(.4); opacity: 1; }
	70%  { opacity: 1; }
	100% { transform: translate(var(--x1), var(--y1)) rotate(var(--rot)) scale(1); opacity: 0; }
}

/* ---------- Regeln ---------- */

.bt-regeln { max-width: 760px; margin: 2rem auto 0; }
.bt-stufen td:first-child { font-weight: 700; white-space: nowrap; }

/* ---------- Mobil ---------- */

@media (max-width: 860px) {
	.bt-spiel { grid-template-columns: 1fr; padding: 1rem; }
	/* Reihenfolge auf dem Handy: Tresor, Protokoll, Ziffernblock, Notizen —
	   so bleibt der Verlauf beim Tippen direkt über den Tasten sichtbar. */
	.bt-buehne, .bt-seite { display: contents; }
	.bt-tresor { order: 1; justify-self: center; }
	.bt-protokoll-kopf { order: 2; color: #fff; }
	.bt-protokoll { order: 3; }
	.bt-block  { order: 4; justify-self: center; }
	.bt-notizen { order: 5; }
	.bt-werkzeug { order: 6; }
	.bt-tuer-mitte { gap: .5rem; }
	.bt-rad { width: min(30%, 110px); }
	.bt-protokoll { max-height: 260px; }
	.bt-protokoll-kopf h2 { font-size: 1.15rem; }
}
@media (max-width: 420px) {
	.bt-ziffer { width: 1.7rem; height: 2.1rem; font-size: 1.1rem; }
	.bt-ziffern { gap: .2rem; }
	.bt-protokoll { padding: .4rem; }
	.bt-zeile { gap: .45rem; padding: .3rem .4rem; grid-template-columns: 1.4rem 1fr auto; }
	.bt-stift { --bt-stift: 22px; }
	.bt-stecker { gap: 4px; padding: 4px 5px; }
	.bt-hud > div { min-width: 86px; }
	.bt-hud-wert { font-size: 1.1rem; }
	.bt-marke { font-size: .7rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
	.bt-spiel *, .bt-spiel *::before, .bt-spiel *::after { animation: none !important; transition: none !important; }
	.bt-flocke { display: none; }
}