/* Easter Egg Seite 9: gesperrtes iPhone hochwischen, Fangspiel im Querformat (mitanand-spiel.js) */

/* Home-Leiste unten auf dem Sperrbildschirm als stiller Hinweis */
.mtn-handy-paar .mtn-lock .mtn-screen::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 36%; height: 4px; margin-left: -18%; border-radius: 3px; background: rgba(255,255,255,.85); }

.mtn.mtn-spiel { position: fixed; inset: 0; z-index: 100000; }
.mtn-spiel-dunkel { position: absolute; inset: 0; background: rgba(6,24,38,.78); opacity: 0; transition: opacity .5s ease; }
.mtn-spiel.offen .mtn-spiel-dunkel { opacity: 1; }
.mtn-spiel-zu { position: absolute; top: 16px; right: 16px; z-index: 2; width: 46px; height: 46px; border: 0; border-radius: 50%; padding: 11px; cursor: pointer;
	background: rgba(255,255,255,.14); color: #fff; opacity: 0; transition: opacity .4s ease .3s, background .2s; }
.mtn-spiel-zu:hover, .mtn-spiel-zu:focus-visible { background: var(--orange); outline: none; }
.mtn-spiel-zu svg { width: 24px; height: 24px; display: block; }
.mtn-spiel.offen .mtn-spiel-zu { opacity: 1; }

.mtn-spiel .mtn-spiel-handy { position: absolute; left: 50%; top: 50%; margin: 0; animation: none !important; will-change: transform; }
.mtn-spiel .mtn-spiel-handy.dreht { transition: transform .8s cubic-bezier(.6,.02,.25,1); }
.mtn-spiel .mtn-spiel-handy .mtn-screen > .mtn-spiel-feld { position: absolute; left: 50%; top: 50%; z-index: 1; overflow: hidden; background: #e6eef4;
	transform: translate(-50%, -50%) rotate(-90deg); opacity: 0; transition: opacity .35s ease; touch-action: none; cursor: none; }
.mtn-spiel .mtn-spiel-handy .mtn-screen > .mtn-spiel-feld.da { opacity: 1; }
.mtn-spiel-feld canvas { display: block; width: 100%; height: 100%; }

/* Start- und Endtafel im Spielfeld, Groessen in em (Basis setzt mitanand-spiel.js) */
.mtn-spiel-tafel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	padding: 1em 3.6em; background: rgba(230,238,244,.9); color: var(--navy); cursor: default; }
.mtn-spiel-tafel[hidden] { display: none; }
.mtn.mtn-spiel .mtn-spiel-tafel h3 { font: 900 1.4em/1.15 var(--titel); margin: 0 0 .3em; color: var(--navy); letter-spacing: -.01em; }
.mtn-spiel-tafel h3 em { font-style: normal; color: var(--orange); }
.mtn.mtn-spiel .mtn-spiel-tafel p { font: 500 .78em/1.45 var(--sans); margin: 0 0 .9em; color: var(--text); max-width: 30em; }
.mtn.mtn-spiel .mtn-spiel-tafel .mtn-spiel-zahl { font: 900 2.8em/1 var(--titel); color: var(--blau); margin: 0 0 .1em; }
.mtn-spiel-tafel button { font: 700 .82em/1 var(--sans); color: #fff; background: var(--orange); border: 0; border-radius: 2em; padding: .8em 1.8em; cursor: pointer; }
.mtn-spiel-tafel button:hover, .mtn-spiel-tafel button:focus-visible { background: #d4561a; outline: none; }
.mtn-spiel-tafel small { font: 500 .65em/1.3 var(--sans); color: #5b6b78; margin-top: 1em; }
.mtn.mtn-spiel .mtn-spiel-kurz, .mtn-spiel-feld.klein .mtn-spiel-voll, .mtn-spiel-feld.klein .mtn-spiel-tafel small { display: none; }
.mtn.mtn-spiel .mtn-spiel-feld.klein .mtn-spiel-kurz { display: block; }
.mtn-spiel-feld.klein .mtn-spiel-tafel { padding: .5em 3em; }

/* Sperrbildschirm raeumt sich beim Entsperren nach oben weg */
.mtn-spiel .mtn-screen > .mtn-status, .mtn-spiel .mtn-lock-datum, .mtn-spiel .mtn-lock-zeit, .mtn-spiel .mtn-push-liste { transition: transform .4s ease, opacity .4s ease; }
.mtn-spiel.entsperrt .mtn-lock-datum, .mtn-spiel.entsperrt .mtn-lock-zeit, .mtn-spiel.entsperrt .mtn-push-liste { transform: translateY(-40px); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.mtn-spiel .mtn-spiel-handy.dreht { transition: none; }
	.mtn-spiel.entsperrt .mtn-lock-datum, .mtn-spiel.entsperrt .mtn-lock-zeit, .mtn-spiel.entsperrt .mtn-push-liste { transform: none; }
}