:root{
    --wood-1:#b97635;
    --wood-2:#a7682e;
    --wood-3:#d08b46;
    --app-bg:#f5f6fb;
    --dark:#2f2d40;
    --accent:#f2a33a;
}
body.app-body{
    background: linear-gradient(180deg,#f8f9fb,#eef2f8);
    min-height:100vh;
}
.room-card{
    border-radius: 18px;
}
.profile-avatar{
    width:120px;height:120px;object-fit:cover;border-radius:50%;
    border:5px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.mini-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.leader-rank{width:28px;text-align:center;font-weight:700;color:#7b7b8b}
.frame-preview{
    width:82px;height:82px;margin:0 auto;border-radius:18px;padding:5px;
    background:linear-gradient(145deg,#ddd,#fff);box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.frame-preview img{
    width:100%;height:100%;object-fit:cover;border-radius:14px;
}
.frame-gold{background:linear-gradient(145deg,#ffcf54,#c98b07)!important}
.frame-violet{background:linear-gradient(145deg,#9d74ff,#5820cc)!important}
.frame-ocean{background:linear-gradient(145deg,#58d1ff,#0070c9)!important}
.bottle-skin-demo{
    width:70px;height:120px;margin:0 auto;border-radius:26px 26px 18px 18px;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;
    transform:rotate(16deg);box-shadow:0 15px 25px rgba(0,0,0,.14);
    position:relative;
}
.bottle-skin-demo::before{
    content:"";position:absolute;top:-10px;left:22px;width:26px;height:16px;border-radius:8px 8px 0 0;background:rgba(255,255,255,.55);
}
.skin-gold{background:linear-gradient(180deg,#1e1e2f,#bc8e28)}
.skin-neon{background:linear-gradient(180deg,#2d0b63,#0bf0ff)}
.skin-rose{background:linear-gradient(180deg,#57132f,#ff5d95)}
.achievement-unlocked .progress-bar{background:#ffb32c}
.admin-sidebar{
    min-height:100vh;background:#26263a;
}
.admin-sidebar .nav-link{border-radius:10px;margin:.15rem 0}
.admin-sidebar .nav-link:hover{background:rgba(255,255,255,.08)}
.stat-card{border-radius:20px}
.game-wrap{
    border-radius:24px;background:#fff;overflow:hidden;
}
.room-topbar{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 16px;background:#fff;border-bottom:1px solid #ececec;
}
.room-stage{
    position:relative;padding-left:56px;
}
.left-rail{
    position:absolute;left:8px;top:16px;display:flex;flex-direction:column;gap:10px;z-index:3;
}
.rail-btn{
    width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,174,71,.9);color:#fff;
    display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.wood-board{
    position:relative;
    min-height:520px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.06)),
      repeating-linear-gradient(180deg,var(--wood-1) 0 3px,var(--wood-2) 3px 6px,var(--wood-3) 6px 9px);
}
.member-orbit{
    position:relative;height:520px;width:100%;
}
.member-card{
    position:absolute;width:84px;background:transparent;border:none;padding:0;cursor:pointer;
    text-align:center;transition:transform .18s ease, filter .18s ease;
}
.member-card:hover,.member-card.selected{transform:scale(1.06);filter:brightness(1.05)}
.member-frame{
    width:84px;height:84px;border-radius:18px;padding:4px;background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.18);overflow:hidden;
}
.member-frame img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.member-name{
    color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);font-size:12px;font-weight:700;margin-top:4px;line-height:1.2;
}
.host-badge{
    position:absolute;top:-6px;right:-6px;background:#ff4d4f;color:#fff;font-size:9px;padding:2px 6px;border-radius:999px;font-weight:700;
}
.bottle-zone{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2;
}
.bottle{
    width:70px;height:150px;border-radius:28px 28px 20px 20px;transform:rotate(45deg);
    display:flex;align-items:center;justify-content:center;color:#ffde82;font-weight:800;letter-spacing:.08em;
    box-shadow:0 18px 25px rgba(0,0,0,.18);
    position:relative;
}
.bottle::before{
    content:"";position:absolute;top:-12px;left:22px;width:26px;height:18px;border-radius:8px 8px 0 0;background:rgba(255,255,255,.45);
}
.bottle-gold{background:linear-gradient(180deg,#251f27,#ad7720)}
.spin-anim{animation:spinBottle 1.8s ease-in-out}
@keyframes spinBottle{
    0%{transform:rotate(45deg)}
    15%{transform:rotate(210deg)}
    35%{transform:rotate(520deg)}
    55%{transform:rotate(790deg)}
    75%{transform:rotate(980deg)}
    100%{transform:rotate(1030deg)}
}
.gift-bar{
    background:#fff;padding:14px 16px;border-top:1px solid #eee;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.gift-chip{
    border:none;background:#fff6ea;border-radius:999px;padding:8px 10px;display:flex;align-items:center;gap:6px;
    box-shadow:0 5px 12px rgba(0,0,0,.08);
}
.chat-panel{
    background:#fff;border-radius:24px;height:100%;display:flex;flex-direction:column;overflow:hidden;
    min-height:650px;
}
.chat-header{padding:14px 16px;border-bottom:1px solid #eee}
.chat-messages{padding:12px;overflow:auto;flex:1;background:#f7f7fb}
.chat-message{
    background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:10px;box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.system-message{background:#fff3cd}
.gift-message{background:#f7f0ff}
.chat-form{padding:10px;border-top:1px solid #eee;display:flex;gap:8px}
.setting-row{
    display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #f0f0f0;
}
.profile-modal-content{border-radius:26px;border:none}
.spin-choice{
    position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);z-index:4;
}
.spin-choice-card{
    min-width:280px;padding:18px;border-radius:24px;background:rgba(255,255,255,.96);
    box-shadow:0 14px 28px rgba(0,0,0,.18);text-align:center;
}
.progress{height:10px;border-radius:999px}
@media (max-width: 991.98px){
    .room-stage{padding-left:0}
    .left-rail{
        position:static;flex-direction:row;padding:10px;justify-content:center;background:#fff;border-bottom:1px solid #eee;
    }
    .wood-board{min-height:460px}
    .member-orbit{height:460px}
    .chat-panel{min-height:420px}
}
@media (max-width: 576px){
    .member-card{width:70px}
    .member-frame{width:70px;height:70px}
    .member-name{font-size:11px}
    .bottle{width:60px;height:130px}
}