.avalon-page{--av-good:#ffd67a;--av-good-soft:rgba(255,214,122,.16);--av-evil:#ff6b8a;--av-evil-soft:rgba(255,107,138,.16);--av-cyan:#64e8ff;min-width:0;color:#edf2ff}
.avalon-page button,.avalon-page input,.avalon-page select{font:inherit;color:inherit}
.avalon-page .glass{border:1px solid rgba(126,162,245,.25);background:linear-gradient(145deg,rgba(19,38,81,.9),rgba(35,23,69,.88));box-shadow:0 18px 50px rgba(2,8,35,.25);backdrop-filter:blur(18px)}
.avalon-page .fun-action{border:1px solid rgba(130,175,255,.28);border-radius:12px;background:rgba(20,27,72,.78);padding:10px 14px;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.avalon-page .fun-action:hover:not(:disabled){border-color:rgba(100,232,255,.65);background:rgba(37,48,105,.92)}
.avalon-page .fun-action:focus-visible{outline:3px solid #fff;outline-offset:3px}
.avalon-page .fun-action:disabled{opacity:.45;cursor:not-allowed}
.avalon-page .avalon-primary{background:linear-gradient(135deg,#685bdc,#388bd7);border-color:rgba(150,205,255,.55);font-weight:800}
.avalon-page .fun-action.danger{border-color:rgba(255,99,135,.5);color:#ffb1c2}
.avalon-page .is-good{color:var(--av-good)}.avalon-page .is-evil{color:var(--av-evil)}

.avalon-login{min-height:360px;border-radius:24px;display:grid;place-content:center;text-align:center;padding:42px}
.avalon-login>span{font-size:60px}.avalon-login h2{margin:12px 0 4px}.avalon-login p{color:#aebadd}

.avalon-lobby{border-radius:24px;padding:clamp(24px,4vw,54px);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:clamp(28px,5vw,70px);position:relative;overflow:hidden}
.avalon-lobby:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;top:-190px;background:radial-gradient(circle,rgba(255,214,122,.16),transparent 68%);pointer-events:none}
.avalon-kicker{letter-spacing:.19em;color:var(--av-cyan);font-size:12px;font-weight:900}
.avalon-lobby h2{font-size:clamp(28px,4vw,50px);margin:14px 0;max-width:620px}
.avalon-lobby-copy>p{color:#b8c5e6;line-height:1.8;max-width:620px;margin-bottom:18px}
.avalon-lobby-form{align-self:start;border:1px solid rgba(123,168,246,.22);border-radius:20px;padding:22px;background:rgba(7,14,46,.5);display:grid;gap:14px;position:relative}
.avalon-lobby-form label,.avalon-config label{display:grid;gap:8px;color:#b9c5e8;font-size:13px}
.avalon-lobby-form select,.avalon-lobby-form input,.avalon-config select{width:100%;box-sizing:border-box;border:1px solid rgba(126,162,245,.3);border-radius:12px;padding:12px;background:#101638}
.avalon-divider{display:flex;align-items:center;gap:12px;color:#8798c5;font-size:12px}
.avalon-divider:before,.avalon-divider:after{content:"";flex:1;border-top:1px solid rgba(126,162,245,.2)}

.avalon-role-editor{display:grid;gap:10px;border:1px solid rgba(126,162,245,.18);border-radius:14px;padding:12px;background:rgba(10,17,51,.4)}
.avalon-role-summary{display:flex;gap:12px;align-items:center;font-size:13px}.avalon-role-summary b{margin-right:auto;font-size:14px}
.avalon-role-locked-row{display:flex;gap:8px;flex-wrap:wrap}
.avalon-role-locked{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid currentColor;opacity:.9}
.avalon-role-locked small{opacity:.7;font-weight:500}
.avalon-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.avalon-role-option{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(130,170,240,.18);border-radius:12px;background:rgba(10,17,51,.5);cursor:pointer;transition:border-color .18s ease,background .18s ease}
.avalon-role-option.is-checked{border-color:currentColor;background:rgba(255,255,255,.05)}
.avalon-role-option.is-good.is-checked{color:var(--av-good)}.avalon-role-option.is-evil.is-checked{color:var(--av-evil)}
.avalon-role-option input{margin:0;accent-color:currentColor}
.avalon-role-option input:disabled~*{opacity:.45}
.avalon-role-option strong,.avalon-role-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#edf2ff}
.avalon-role-option small{font-size:11px;color:#98a8d2;margin-top:2px}
.avalon-role-icon{font-size:18px}
.avalon-role-note{margin:0;font-size:12px;color:#8798c5;line-height:1.5}

.avalon-room-bar{border-radius:18px;padding:12px 16px;margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.avalon-room-bar>div{margin-right:auto}.avalon-room-bar>div span{display:block;color:#93a7d4;font-size:11px}.avalon-room-bar strong{letter-spacing:.22em;font-size:22px}
.avalon-connection{font-size:12px;color:#f0c46a}.avalon-connection.is-connected{color:#79efbb}
.avalon-status{font-size:12px;color:#c9d5f2;padding:5px 10px;border-radius:999px;border:1px solid rgba(126,162,245,.25)}
.avalon-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:16px;align-items:start}
.avalon-layout main,.avalon-layout aside{min-width:0;display:grid;gap:14px}
.avalon-panel{border-radius:20px;padding:16px}.avalon-panel h3{margin:0 0 12px;font-size:15px}.avalon-panel p{color:#aab8dc;line-height:1.6;font-size:13px;margin:10px 0 0}
.avalon-panel-title{display:flex;justify-content:space-between;align-items:center}.avalon-panel-title span{color:var(--av-cyan);font-weight:700}
.avalon-chips{display:flex;flex-wrap:wrap;gap:8px}
.avalon-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid currentColor;background:rgba(255,255,255,.03)}

.avalon-members{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.avalon-member{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;border:1px solid rgba(130,170,240,.15);border-radius:13px;background:rgba(10,17,51,.45)}
.avalon-member.is-self{border-color:rgba(100,232,255,.55);box-shadow:inset 3px 0 var(--av-cyan)}
.avalon-member.is-offline{opacity:.55}.avalon-member.is-empty{opacity:.4;border-style:dashed}
.avalon-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#5861bd,#924da5);overflow:hidden;font-weight:800}
.avalon-avatar img{width:100%;height:100%;object-fit:cover}
.avalon-member div{min-width:0}.avalon-member strong,.avalon-member small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avalon-member small{color:#8798c5;font-size:11px;margin-top:3px}.avalon-member>b{font-size:10px;color:var(--av-cyan)}

.avalon-identity{border-radius:24px;padding:clamp(18px,3vw,30px);min-height:260px;display:grid;place-items:center}
.avalon-identity.is-waiting{text-align:center;color:#aebadd}.avalon-identity.is-waiting>span{font-size:54px}.avalon-identity.is-waiting h3{margin:8px 0 4px;color:#edf2ff;font-size:22px}
.avalon-card-back{width:100%;max-width:420px;min-height:240px;border-radius:22px;border:2px dashed rgba(255,214,122,.45);background:radial-gradient(circle at 50% 30%,rgba(255,214,122,.12),rgba(10,17,51,.6) 70%);display:grid;place-content:center;gap:8px;text-align:center;cursor:pointer;color:#edf2ff;transition:border-color .18s ease,transform .18s ease}
.avalon-card-back:hover{border-color:var(--av-good);transform:translateY(-2px)}
.avalon-card-back:focus-visible{outline:3px solid #fff;outline-offset:3px}
.avalon-card-back-mark{font-size:64px;line-height:1}.avalon-card-back strong{font-size:18px}.avalon-card-back small{color:#98a8d2}
.avalon-card{width:100%;max-width:520px;border-radius:22px;padding:clamp(18px,3vw,28px);display:grid;gap:12px;border:1px solid;animation:avalonFlip .36s ease-out}
.avalon-card.is-good{border-color:rgba(255,214,122,.55);background:linear-gradient(160deg,rgba(255,214,122,.14),rgba(19,38,81,.7) 60%)}
.avalon-card.is-evil{border-color:rgba(255,107,138,.55);background:linear-gradient(160deg,rgba(255,107,138,.16),rgba(46,17,54,.78) 60%)}
.avalon-card-team{font-size:12px;letter-spacing:.18em;font-weight:900}
.avalon-card.is-good .avalon-card-team{color:var(--av-good)}.avalon-card.is-evil .avalon-card-team{color:var(--av-evil)}
.avalon-card h3{margin:0;font-size:clamp(26px,4vw,36px)}.avalon-card>p{margin:0;color:#c9d5f2;line-height:1.7;font-size:14px}
.avalon-card-info{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;display:grid;gap:6px}
.avalon-card-info strong{font-size:14px}.avalon-card-info small{color:#98a8d2;font-size:12px}.avalon-card-info em{color:#8798c5;font-style:normal}
.avalon-card-info ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.avalon-card-info li{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:700}
.avalon-card .fun-action{justify-self:start}

.avalon-host{display:grid;gap:10px}.avalon-host h3{margin-bottom:2px}
.avalon-config{display:grid;gap:10px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}
.avalon-confirm{display:grid;gap:8px;padding:10px;border-radius:12px;border:1px solid rgba(255,99,135,.35);background:rgba(255,99,135,.08)}
.avalon-confirm span{font-size:13px;color:#ffc4d0}
.avalon-leave{display:grid}
.avalon-quests{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.avalon-quests li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(10,17,51,.45)}
.avalon-quests span{color:#98a8d2;font-size:12px}.avalon-quests b{font-size:15px}.avalon-quests small{color:var(--av-evil);font-size:11px;justify-self:end}

.avalon-dialog-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(2,4,17,.72);display:grid;place-items:center;padding:20px}
.avalon-dialog{position:relative;width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:22px;padding:28px}
.avalon-dialog>button{position:absolute;right:14px;top:14px}
.avalon-dialog h3{margin:0 0 10px;padding-right:40px}.avalon-dialog ul{margin:0;padding-left:18px}.avalon-dialog li{margin:10px 0;color:#bdc9e7;line-height:1.6}

@keyframes avalonFlip{from{opacity:0;transform:rotateY(-14deg) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:900px){.avalon-lobby{grid-template-columns:1fr}.avalon-layout{grid-template-columns:1fr}.avalon-layout aside{grid-template-columns:repeat(2,minmax(0,1fr))}.avalon-layout aside .avalon-host{grid-column:1/-1}}
@media(max-width:560px){.avalon-lobby{padding:20px}.avalon-lobby h2{font-size:28px}.avalon-room-bar{display:grid;grid-template-columns:1fr 1fr}.avalon-room-bar>div{grid-column:1/-1}.avalon-layout aside{grid-template-columns:1fr}.avalon-role-grid{grid-template-columns:1fr}.avalon-identity{padding:14px;min-height:200px}.avalon-card-back{min-height:200px}}
@media(prefers-reduced-motion:reduce){.avalon-page *{transition:none!important;animation:none!important}}