:root{
    --bg:#06060a;
    --card:#0f1420;
    --muted:#e9e7ff;
    --accent:#7a4cff;
    --accent-2:#4a2cff;
    --surface:#071018;
    --chip:#171428;
    --glass: rgba(255,255,255,0.03);
    --radius:12px;
    --gap:12px;
}

/* Базовая типография */
html,body{
    height:100%;
    margin:0;
    font-family:Inter,Arial,sans-serif;
    background:var(--bg);
    color:var(--muted);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/* Упрощённый контейнер */
.app {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

header.app-head {
    display:flex;
    gap:12px;
    align-items:center;
    padding:2%;
    background:linear-gradient(180deg,#0f0b16 0%, #0b0b0f 100%);
    box-shadow:0 4px 18px rgba(0,0,0,0.35);
    z-index:40;
}
.app-head .logo {
    font-weight:800;
    letter-spacing:0.4px;
}
.app-head .actions { display:flex; gap:8px; align-items:center; }
.btn {
    background:var(--accent);
    color:#fff;
    border:0;
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    box-shadow:0 6px 18px rgba(74,44,255,0.12);
    transition: transform .18s ease, box-shadow .18s;
}
.btn:active{ transform:translateY(1px) scale(.995); }
.btn.ghost {
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    color:var(--muted);
    box-shadow:none;
}

.head-right { margin-left:auto; display:flex; gap:12px; align-items:center; }

/* Основная оболочка: sidebar + content */
.shell {
    display:grid;
    grid-template-columns:320px 1fr;
    gap:var(--gap);
    padding:2%;
    align-items:start;
    transition: all .32s ease;
}

/* Сайдбар (лист ожидания / каталог) */
.sidebar {
    background:var(--card);
    padding:2%;
    border-radius:var(--radius);
    overflow:hidden;
    transform-origin:left center;
    transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .28s;
    will-change:transform,opacity;
    box-shadow: 0 8px 24px rgba(2,6,23,0.6);
}
.sidebar.hidden {
    transform:translateX(-110%);
    opacity:0;
    pointer-events:none;
}

.sidebar .title { font-weight:800; margin-bottom:8px; }

#rooms { display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow:auto; padding-right:6px; }

.room {
    background:var(--surface);
    padding:10px;
    border-radius:10px;
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    transition: transform .18s, box-shadow .18s, opacity .18s;
}
.room:hover { transform: translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.45); }
.chip {
    background:var(--chip);
    padding:6px 10px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    color:var(--muted);
    font-size:13px;
}

/* Контент (игровая панель) */
.content {
    background:var(--card);
    padding:2%;
    border-radius:var(--radius);
    min-height:60vh;
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative;
    overflow:auto;
}

/* Верх — кейсы в комнате */
#roomCases {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}
.case-chip {
    display:flex;
    gap:8px;
    align-items:center;
    padding:8px;
    border-radius:10px;
    background:var(--surface);
    min-width:120px;
    justify-content:flex-start;
    transition: transform .18s, box-shadow .18s;
}
.case-chip img{ width:48px; height:48px; object-fit:contain; border-radius:8px; }

/* Раунды — сетка */
#rounds {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}
.round-card {
    background:linear-gradient(180deg, rgba(7,16,24,0.9), rgba(7,16,24,0.65));
    padding:2%;
    border-radius:10px;
    text-align:center;
    word-break:break-word;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    justify-content:center;
    min-height:120px;
    transform-origin:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.45);
}
.round-card img { width:72px; height:72px; object-fit:contain; }

/* Победитель — подсветка */
.winner {
    box-shadow: 0 0 18px rgba(84,248,139,0.18), 0 6px 30px rgba(84,248,139,0.06) !important;
    transform:scale(1.02);
    animation: winnerPulse 1.2s ease infinite;
}

/* Финал */
#final { font-weight:900; font-size:16px; padding:10px; border-radius:10px; background:linear-gradient(90deg, rgba(122,76,255,0.08), rgba(74,44,255,0.04)); }

/* Каталог кейсов (хост) */
#catalogHost {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
    padding:2%;
    max-height:60vh;
    overflow:auto;
}
.catalog-item {
    flex:0 0 calc(50% - 4px);
    background:var(--chip);
    border-radius:12px;
    padding:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.catalog-item:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.5); }
.catalog-item.selected { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color:white; box-shadow:0 12px 40px rgba(74,44,255,0.28); }

.catalog-item img { width:60px; height:60px; object-fit:contain; margin-bottom:6px; }

/* Плавающая кнопка для мобильного toggling sidebar */
.mobile-toggle {
    display:none;
    position:fixed;
    left:12px;
    bottom:18px;
    z-index:60;
    border-radius:999px;
    padding:10px;
    background:linear-gradient(180deg,var(--accent),var(--accent-2));
    box-shadow:0 10px 30px rgba(74,44,255,0.22);
    border: none;
    color:white;
    font-weight:700;
}

/* Анимации */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(8px) scale(.995); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes winnerPulse {
    0% { box-shadow:0 0 8px rgba(84,248,139,0.12); transform:scale(1); }
    50% { box-shadow:0 0 26px rgba(84,248,139,0.22); transform:scale(1.02); }
    100% { box-shadow:0 0 8px rgba(84,248,139,0.12); transform:scale(1); }
}
@keyframes slideFromLeft {
    from { opacity:0; transform: translateX(-50%); }
    to { opacity:1; transform: translateX(0); }
}
@keyframes slideFromRight {
    from { opacity:0; transform: translateX(50%); }
    to { opacity:1; transform: translateX(0); }
}
@keyframes bump {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}
@keyframes bumpRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
}
@keyframes pop {
    from { opacity:0; transform:scale(0.8); }
    to { opacity:1; transform:scale(1); }
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .shell { grid-template-columns: 1fr; padding:2%; }
    .sidebar { position:fixed; top:72px; width:92%; z-index:80; transform:translateX(0); }
    .sidebar.hidden { transform:translateX(-120%); }
    .content { margin-top:48px; }
}
@media (max-width: 520px) {
    :root { --gap:8px; }
    .round-card { min-height:120px; }
    .catalog-item { width:43%; max-width:43%; }
    header.app-head { padding:10px; gap:8px; }
}

/* Safe area for Telegram WebApp */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 12px); }

/* Небольшие хелперы */
.muted { opacity:0.75; font-size:13px; }
.row { display:flex; gap:8px; align-items:center; }