/* Dunkel wie der Raum, in dem das hier benutzt wird: ein Handy in einer Hand,
   irgendwo zwischen Tanzfläche und Küche. */

:root {
    --grund:    #12091c;
    --karte:    #1d1129;
    --karte-2:  #261636;
    --rand:     #3a2450;
    --schrift:  #f4eefb;
    --leise:    #a894c0;
    --akzent:   #ff3d8b;
    --akzent-2: #9d5cff;
    --gruen:    #34d399;
    --rot:      #fb7185;
    --radius:   16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Ein eigenes display: … im Stylesheet schlägt sonst die eingebaute Regel
   [hidden] { display: none } des Browsers — und das Element bleibt sichtbar,
   obwohl es versteckt sein sollte. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background:
        radial-gradient(1100px 700px at 15% -10%, #37155c 0%, transparent 60%),
        radial-gradient(900px 600px at 95% 5%, #5c1240 0%, transparent 55%),
        var(--grund);
    background-attachment: fixed;
    color: var(--schrift);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    min-height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#buehne { max-width: 620px; margin: 0 auto; padding: 24px 16px 64px; }

h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.4px; }
h2 { font-size: 21px; margin: 0; letter-spacing: -0.3px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--leise);
     margin: 32px 0 12px; font-weight: 600; }
.unterzeile { color: var(--leise); margin: 0 0 22px; font-size: 15px; }

/* ------------------------------------------------------------- Beitreten */

.karte {
    background: linear-gradient(180deg, var(--karte) 0%, #190f24 100%);
    border: 1px solid var(--rand);
    border-radius: 26px;
    padding: 34px 26px;
    margin-top: 8vh;
    box-shadow: 0 30px 70px -30px #000;
}
/* Das echte App-Symbol, nicht eines nachgebaut. Vorher stand hier ein
   Farbverlauf mit einer Note darin — ähnlich, aber eben nicht das Bild, das
   die Leute nachher auf dem Homescreen antippen. Die 22,37 % Rundung sind
   dieselben, mit denen iOS das Symbol beschneidet. */
.marke {
    width: 62px; height: 62px; border-radius: 22.37%; margin-bottom: 20px;
    display: block;
    box-shadow: 0 12px 34px -10px var(--akzent);
}

.feld { display: block; margin-bottom: 16px; }
.feld span { display: block; font-size: 13px; color: var(--leise); margin-bottom: 7px; font-weight: 500; }
/* Wie in der App: Das Sternchen sagt vorher, was der Fehlertext hinterher sagt. */
.pflicht { color: var(--akzent); font-style: normal; font-weight: 600; margin-left: 3px; }
/* Eine Angabe bricht ganz um oder gar nicht. */
.stueck { white-space: nowrap; }

input {
    width: 100%; padding: 14px 16px; font-size: 17px; font-family: inherit;
    background: var(--karte-2); color: var(--schrift);
    border: 1px solid var(--rand); border-radius: 13px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px #ff3d8b26; }
input::placeholder { color: #6d5a85; }

#code { font-size: 27px; letter-spacing: 7px; text-align: center; font-weight: 600; text-transform: uppercase; }
#code::placeholder { letter-spacing: 7px; font-weight: 400; }

button { font-family: inherit; cursor: pointer; border: none; }

.haupt {
    width: 100%; padding: 15px; font-size: 17px; font-weight: 600; margin-top: 8px;
    background: linear-gradient(135deg, var(--akzent), var(--akzent-2));
    color: #fff; border-radius: 13px;
    transition: transform .12s, opacity .15s;
}
.haupt:active { transform: scale(.975); }
.haupt:disabled { opacity: .5; cursor: default; }

.still {
    background: transparent; color: var(--leise); font-size: 14px;
    padding: 8px 13px; border: 1px solid var(--rand); border-radius: 10px;
}
.still:active { background: var(--karte-2); }

.fehler { color: var(--rot); font-size: 14px; margin: 14px 0 0; }

/* ------------------------------------------------------------------ Saal */

.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.kopf .unterzeile { margin: 4px 0 0; font-size: 14px; }

.suchleiste { position: sticky; top: 8px; z-index: 5; }
/* Der Streifen, unter dem die Treffer wegscrollen. Er war eine deckende
   Fläche in var(--grund) — vor einem Hintergrund, der ein Verlauf ist. Damit
   lag seine Farbe fast überall daneben, und man sah einen Kasten um das
   Suchfeld. Eine Unschärfe hat keine eigene Farbe und kann deshalb auch
   nicht danebenliegen. */
.suchleiste::before {
    content: ""; position: absolute; inset: -14px -16px;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
    z-index: -1;
}
#suche { padding-left: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23a894c0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 15px center; }
#suche::-webkit-search-cancel-button { filter: invert(.7); }

.lader {
    position: absolute; right: 15px; top: 50%; margin-top: -8px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--rand); border-top-color: var(--akzent);
    animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.hinweis {
    background: #9d5cff1f; border: 1px solid #9d5cff4d; color: #d9c4ff;
    padding: 11px 14px; border-radius: 12px; font-size: 14px; margin: 14px 0 0;
}

/* ----------------------------------------------------------------- Liste */

.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.zeile {
    display: flex; align-items: center; gap: 13px;
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: 10px 13px;
    animation: auf .22s ease both;
}
@keyframes auf { from { opacity: 0; transform: translateY(6px); } }

.cover {
    width: 50px; height: 50px; border-radius: 9px; flex: 0 0 auto;
    background: var(--karte-2); object-fit: cover;
}
.text { flex: 1; min-width: 0; }
.titel { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kuenstler { color: var(--leise); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wunsch-knopf {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--akzent), var(--akzent-2)); color: #fff;
    font-size: 22px; line-height: 1; display: grid; place-items: center;
    transition: transform .12s;
}
.wunsch-knopf:active { transform: scale(.88); }
.wunsch-knopf:disabled { background: var(--karte-2); color: var(--leise); }

.marke-status {
    flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 5px 10px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: .6px;
}
.offen       { background: #a894c026; color: var(--leise); }
.gespielt    { background: #9d5cff26; color: var(--akzent-2); }
.angenommen  { background: #34d39926; color: var(--gruen); }
.abgelehnt   { background: #fb718526; color: var(--rot); }

.zeile.angenommen-rand { border-color: #34d39959; }

.leer { color: var(--leise); font-size: 14.5px; text-align: center; padding: 22px 0; }

.toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    background: #2c1a3ef2; border: 1px solid var(--rand); backdrop-filter: blur(12px);
    color: var(--schrift); padding: 12px 20px; border-radius: 999px;
    font-size: 14.5px; box-shadow: 0 14px 40px -12px #000;
    animation: hoch .25s ease both; max-width: calc(100vw - 40px); text-align: center;
}
@keyframes hoch { from { opacity: 0; transform: translate(-50%, 12px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* --------------------------------------------------- Hinweis auf die App */

.schleier {
    position: fixed; inset: 0; z-index: 50;
    background: #0b0512cc; backdrop-filter: blur(6px);
    display: grid; place-items: end center;
    padding: 20px;
    animation: einblenden .2s ease both;
}
@keyframes einblenden { from { opacity: 0; } }

.blatt {
    background: linear-gradient(180deg, var(--karte) 0%, #190f24 100%);
    border: 1px solid var(--rand);
    border-radius: 24px;
    padding: 28px 24px 22px;
    width: 100%; max-width: 420px;
    box-shadow: 0 26px 60px -24px #000;
    animation: hochschieben .28s cubic-bezier(.2, .9, .3, 1) both;
    margin-bottom: env(safe-area-inset-bottom);
}
@keyframes hochschieben { from { transform: translateY(28px); opacity: 0; } }

.blatt h2 { font-size: 21px; margin: 0 0 8px; }
.blatt p { color: var(--leise); font-size: 14.5px; margin: 0 0 20px; line-height: 1.55; }
.marke.klein { width: 46px; height: 46px; margin-bottom: 16px; }

.alsLink {
    display: block; text-align: center; text-decoration: none;
    box-sizing: border-box;
}
.still.breit { width: 100%; margin-top: 10px; padding: 12px; }


/* ------------------------------------------------------------- Abstimmen */

.daumen { display: flex; gap: 6px; flex: 0 0 auto; }

.daumen button {
    display: flex; align-items: center; gap: 5px;
    background: var(--karte-2); color: var(--leise);
    border: 1px solid var(--rand); border-radius: 999px;
    padding: 6px 11px; font-size: 13px; font-weight: 600; font-family: inherit;
    transition: transform .12s, background .15s, color .15s, border-color .15s;
    min-width: 52px; justify-content: center;
}
.daumen button:active { transform: scale(.9); }
.daumen button svg { width: 15px; height: 15px; }

.daumen .hoch.gewaehlt {
    background: #34d39926; color: var(--gruen); border-color: #34d39959;
}
.daumen .runter.gewaehlt {
    background: #fb718526; color: var(--rot); border-color: #fb718559;
}
.daumen button:disabled { opacity: .45; }


/* Was schon lief, tritt zurück — es steht nur noch zum Nachschauen da. */
.zeile.gelaufen { opacity: .6; }
.zeile.gelaufen .titel { text-decoration: line-through; text-decoration-color: var(--leise); }
.zeile.gelaufen .cover { opacity: .6; }

.zaehler {
    display: inline-block; margin-left: 6px;
    background: var(--karte-2); color: var(--leise);
    padding: 2px 7px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0;
}

/* ------------------------------------------------- Auf deiner eigenen Party */

/* Steht am Fuß der Party und drängt sich nicht auf: Wer gerade wünscht,
   soll wünschen. Wer fertig ist, scrollt darüber und sieht es. */
.eigeneParty {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: calc(100% - 40px); max-width: 560px;
    margin: 26px auto 34px;
    padding: 13px 18px;
    background: transparent; text-decoration: none;
    border: 1px solid var(--rand); border-radius: 14px;
    color: var(--leise); font-size: 14px;
}
.eigeneParty:active { background: var(--karte); }
.eigeneParty:hover { border-color: var(--akzent); color: var(--schrift); }
.epPfeil { font-size: 15px; color: var(--akzent); }

/* Das Anspruchszeichen soll den Namen begleiten, nicht mit ihm konkurrieren.
   Hieß bis eben auch .marke — wie das Symbol darüber. Das ™ erbte damit
   dessen 62 Pixel samt Farbverlauf und stand als rosa Kachel neben dem
   Namen. Zwei verschiedene Dinge dürfen nicht gleich heißen. */
.zeichen { font-size: .42em; vertical-align: super; letter-spacing: 0; opacity: .75; }

.rechtezeile {
    font-size: 10.5px !important; line-height: 1.5;
    color: var(--leise) !important; opacity: .65;
    text-align: center; margin: 0 0 14px !important;
}

.seitenfuss {
    text-align: center; padding: 26px 20px calc(30px + env(safe-area-inset-bottom));
    font-size: 12.5px; color: var(--leise); opacity: .7;
}
.seitenfuss a { color: var(--leise); }