body{margin:0;background:#5b2d86;font-family:Arial,sans-serif;color:#fff;display:flex;justify-content:center}
.app{text-align:center;padding:24px;max-width:420px;width:100%;box-sizing:border-box}
#hero{width:180px;margin-top:20px}
.main{background:#ff5aa5;color:#fff;border:none;padding:16px 24px;border-radius:18px;font-size:20px;cursor:pointer}
.card{width:100%;max-width:320px;border-radius:18px;box-shadow:0 8px 20px rgba(0,0,0,.25);margin:15px 0}
.hidden{display:none}

/* ===========================
   Access screen
=========================== */
.authScreen{display:flex;flex-direction:column;justify-content:center;min-height:100vh}
.authScreen.hidden{display:none}
.authLogo{width:150px;align-self:center;margin-bottom:4px}
.authCard{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:24px;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.authCard h2{margin-top:0;font-size:24px}
.authCard p{line-height:1.5;color:#f4eefe}
#authForm{display:grid;gap:12px;margin-top:22px}
#accessCode{width:100%;box-sizing:border-box;border:2px solid transparent;border-radius:14px;padding:15px 16px;font:inherit;font-size:18px;outline:none}
#accessCode:focus{border-color:#ff5aa5;box-shadow:0 0 0 3px rgba(255,90,165,.3)}
.authError{display:grid;gap:10px;margin-top:18px;padding:16px;border-radius:14px;background:rgba(63,0,48,.42);line-height:1.45}
.telegramLink{display:inline-block;background:#fff;color:#5b2d86;border-radius:12px;padding:11px 14px;text-decoration:none;font-weight:bold}
.logoutButton{float:right;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:12px;padding:9px 12px;font:inherit;cursor:pointer}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ===========================
   Бібліотека пригод
=========================== */

.libraryGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:25px;
}

.category{

    border:none;

    border-radius:18px;

    color:white;

    font-size:18px;

    font-weight:bold;

    padding:18px;

    cursor:pointer;

    transition:.2s;

    min-height:95px;

}

.category:hover{

    transform:scale(1.05);

}

.home{
    background:#4CAF50;
}

.sport{
    background:#F28C28;
}

.mind{
    background:#3F8CFF;
}

.creative{
    background:#5BC0EB;
}

.emotion{
    background:#EF5350;
}

.fun{
    background:#FF5AA5;
}

.bonus{
    background:#F4C542;
    color:#333;
}

.crazy{
    background:#444;
}