/* ==========================================================================
   AnimeSaturn — Watch2Gether (rooms list, my rooms, create, room).
   Loaded AFTER the legacy watch2gather.min.css; re-skins it with --as-* tokens.
   Room overrides are prefixed with #w2g-room, list/create ones with
   #main-wrapper so they beat the legacy chains without !important.
   ========================================================================== */

.as-w2g {
    --as-w2g-live: #ef4444;
    --as-w2g-wait: var(--as-success, #16a34a);
    --as-w2g-sched: var(--as-warning, #f59e0b);
    --as-w2g-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(134, 61, 186, .12);
}

/* ---------- breadcrumb + head ---------- */
.as-w2g .as-crumbs { margin: 0 0 14px; font-size: .8125rem; color: var(--as-ink-dim); }
.as-w2g .as-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.as-w2g .as-crumbs li { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; }
.as-w2g .as-crumbs li + li::before { content: "\203A"; color: var(--as-ink-dim); font-size: 1rem; line-height: 1; }
.as-w2g .as-crumbs a { color: var(--as-ink-mute); }
.as-w2g .as-crumbs a:hover { color: var(--as-brand); }
.as-w2g .as-crumbs [aria-current] { color: var(--as-ink); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.as-w2g-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.as-w2g-h1 { margin: 0; font-family: var(--as-font-display); font-size: 1.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--as-ink); }
@media (min-width: 768px) { .as-w2g-h1 { font-size: 1.75rem; } }
.as-w2g-sub { margin: .375rem 0 0; font-size: .875rem; color: var(--as-ink-mute); }
.as-w2g-count { margin: 0; font-size: .875rem; color: var(--as-ink-mute); white-space: nowrap; }
.as-w2g-count b { color: var(--as-brand); }
html.dark .as-w2g-count b { color: color-mix(in srgb, var(--as-brand) 70%, #fff); }
.as-w2g-kicker { margin: 0 0 .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--as-ink-dim); }

/* ---------- filters ---------- */
#main-wrapper .as-w2g-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1.25rem; }
.as-w2g-filters { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.as-w2g-filters::-webkit-scrollbar { display: none; }
.as-w2g-filter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2.125rem;
    padding: 0 .875rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--as-ink-mute);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
    transition: color .15s, background-color .15s, border-color .15s;
}
.as-w2g-filter:hover { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border-strong); }
.as-w2g-filter.is-active, .as-w2g-filter.is-active:hover { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
.as-w2g-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--as-w2g-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-w2g-live) 25%, transparent); }

/* ---------- room grid + card ---------- */
#main-wrapper .w2g-items.as-w2g-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 1.5rem;
}
#main-wrapper .w2g-items.as-w2g-grid::after { content: none; }
@media (min-width: 600px) { #main-wrapper .w2g-items.as-w2g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #main-wrapper .w2g-items.as-w2g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { #main-wrapper .w2g-items.as-w2g-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#main-wrapper .w2g-items .w2g-item.as-room { float: none; width: auto; margin: 0; padding: 0; }

.as-room__link {
    display: block;
    height: 100%;
    overflow: hidden;
    color: var(--as-ink);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
    transition: transform .2s var(--as-ease), border-color .2s, box-shadow .26s;
}
a.as-room__link:hover { color: var(--as-ink); border-color: color-mix(in srgb, var(--as-brand) 55%, var(--as-border)); transform: translateY(-3px); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--as-brand) 70%, transparent); }
.as-room__screen {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .75rem;
    min-height: 200px;
    padding: .875rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #2a1f45, #0d0c15);
}
.as-room__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: blur(1.5px) saturate(1.1); transition: transform .6s var(--as-ease); }
a.as-room__link:hover .as-room__bg { transform: scale(1.14); }
.as-room__screen::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 12, 21, .35) 0%, rgba(13, 12, 21, .82) 55%, rgba(13, 12, 21, .95) 100%); }
.as-room__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.as-room__status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.as-room__pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.as-room--live .as-room__status { background: var(--as-w2g-live); }
.as-room--live .as-room__pulse { animation: as-w2g-blink 1s infinite; }
.as-room--waiting .as-room__status { background: var(--as-w2g-wait); }
.as-room--scheduled .as-room__status { color: #1c1300; background: var(--as-w2g-sched); }
.as-room--ended .as-room__status { background: rgba(120, 118, 135, .7); }
@keyframes as-w2g-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .as-room--live .as-room__pulse { animation: none; } }
.as-room__private { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fcd34d; background: rgba(0, 0, 0, .55); border-radius: 999px; }

.as-room__anime { display: flex; align-items: flex-end; gap: .75rem; min-width: 0; }
.as-room__poster { flex: 0 0 auto; width: 56px; aspect-ratio: 5 / 7; overflow: hidden; border-radius: var(--as-r-md); background: rgba(255, 255, 255, .08); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.as-room__poster img { width: 100%; height: 100%; object-fit: cover; }
.as-room__info { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.as-room__name { display: -webkit-box; font-family: var(--as-font-display); font-size: 1rem; font-weight: 800; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.as-room__sub { font-size: .75rem; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-room__meta { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .125rem; }
.as-room__meta .as-chip { height: 1.375rem; padding: 0 .5rem; font-size: .6875rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .16); }
.as-room__meta .as-room__lang.is-sub { background: color-mix(in srgb, var(--as-brand) 75%, transparent); border-color: transparent; }
.as-room__meta .as-room__lang.is-dub { background: color-mix(in srgb, var(--as-dub, #16a34a) 80%, transparent); border-color: transparent; }
.as-room__meta .as-chip i { font-size: .625rem; }
.as-room__time { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-top: .625rem; font-size: .75rem; color: rgba(255, 255, 255, .7); border-top: 1px solid rgba(255, 255, 255, .12); }
.as-room__time time { font-family: var(--as-font-display); font-size: 1rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.as-room--live .as-room__time span { font-weight: 700; color: #fca5a5; }

.as-room__host { display: flex; align-items: center; gap: .625rem; padding: .75rem .875rem; }
.as-room__avatar { flex: 0 0 auto; width: 36px; height: 36px; overflow: hidden; border-radius: var(--as-r-md); background: var(--as-hover); }
.as-room__avatar img { width: 100%; height: 100%; object-fit: cover; }
.as-room__hostinfo { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.as-room__hostname { font-size: .8125rem; font-weight: 700; color: var(--as-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-room__created { font-size: .6875rem; color: var(--as-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-room--ended .as-room__screen { filter: grayscale(.6); }
.as-room--ended .as-room__link { opacity: .8; }

.as-w2g-empty { margin-bottom: 1.5rem; }
.as-w2g-empty p { margin: 0; }
.as-w2g-empty__hint { font-size: .8125rem; color: var(--as-ink-dim); }

/* ---------- create ---------- */
#main-wrapper .w2g-notice.as-w2g-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    max-width: none;
    margin: 0 0 1.25rem;
    padding: .75rem 1rem;
    font-size: .875rem;
    text-align: left;
    color: var(--as-ink);
    background: var(--as-brand-soft);
    border: 1px solid color-mix(in srgb, var(--as-brand) 40%, transparent);
    border-radius: var(--as-r-lg);
}
#main-wrapper .as-w2g-notice span { color: var(--as-ink); }
#main-wrapper .as-w2g-notice a { margin: 0; font-weight: 700; color: var(--as-brand) !important; text-decoration: underline; }
html.dark #main-wrapper .as-w2g-notice a { color: color-mix(in srgb, var(--as-brand) 60%, #fff) !important; }
#main-wrapper .as-w2g-notice i { color: var(--as-brand); }

.as-w2g-create { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 960px) {
    .as-w2g-create { grid-template-columns: 360px minmax(0, 1fr); gap: 2rem; }
    .as-w2g-create__preview { position: sticky; top: calc(var(--as-header-h, 4rem) + 1rem); }
}
@media (max-width: 959.98px) { .as-w2g-create__preview { order: 2; } }
.as-w2g-create__preview .as-room__link { box-shadow: var(--as-w2g-shadow); }
.as-w2g-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.as-w2g-steps li { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; font-size: .8125rem; color: var(--as-ink-mute); background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
.as-w2g-steps span { display: grid; place-items: center; flex-shrink: 0; width: 1.625rem; height: 1.625rem; font-size: .75rem; font-weight: 800; color: #fff; background: var(--as-grad); border-radius: 50%; }

.as-w2g-form { padding: 1.5rem; }
@media (min-width: 768px) { .as-w2g-form { padding: 1.75rem 2rem; } }
#main-wrapper .as-w2g-form .as-field { margin: 0 0 1.375rem; }
#main-wrapper .as-w2g-form .form-group.text { margin: 0; }
#main-wrapper .as-w2g-form .as-field__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    padding: 0;
    font-family: var(--as-font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--as-ink);
}
#main-wrapper .as-w2g-form .as-field__label i { font-size: .8125rem; color: var(--as-brand); }
#main-wrapper .as-w2g-form .help-text { margin: .5rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--as-ink-dim) !important; }
#main-wrapper .as-w2g-form .help-block:empty { display: none; }
#main-wrapper .as-w2g-form .form-control { background: var(--as-bg); }
.as-field--inline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1rem; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-lg); }
#main-wrapper .as-w2g-form .as-field--inline .help-text { margin-top: .125rem; }
#main-wrapper .as-w2g-form .as-field--inline .as-field__label { margin: 0; }
.as-w2g-guest { text-align: center; }

.as-w2g-search { position: relative; margin: 0 0 .5rem; }
.as-w2g-search .fa-search { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--as-ink-dim); pointer-events: none; }
#main-wrapper .as-w2g-search .form-control { padding-left: 2.25rem; color: var(--as-ink); background: var(--as-bg); border-color: var(--as-border); }

/* episode lists (create + host panel) */
.as-w2g .w2g-ep-list { max-height: 280px; overflow-y: auto; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-lg); scrollbar-width: thin; }
.as-w2g .w2g-create-ep-list { max-height: 320px; }
.as-w2g .w2g-ep-item { gap: .75rem; padding: .5rem .75rem; color: var(--as-ink-mute); border-bottom: 1px solid var(--as-border); transition: background-color .15s, color .15s; }
.as-w2g .w2g-ep-item:hover, .as-w2g .w2g-ep-item.highlight { color: var(--as-ink); background: var(--as-hover); }
.as-w2g .w2g-ep-item.active { color: var(--as-ink); background: var(--as-brand-soft); box-shadow: inset 3px 0 0 var(--as-brand); }
.as-w2g .w2g-ep-order { min-width: 2rem; height: 2rem; line-height: 2rem; color: var(--as-ink-mute); background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-sm); }
.as-w2g .w2g-ep-item.active .w2g-ep-order { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
.as-w2g .w2g-ep-btn { color: var(--as-brand); background: var(--as-soft); border: 1px solid var(--as-border); }
.as-w2g .w2g-ep-item:hover .w2g-ep-btn, .as-w2g .w2g-ep-item.active .w2g-ep-btn { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
.as-w2g .w2g-ep-empty, .as-w2g .w2g-ep-loading { color: var(--as-ink-dim); }
.as-w2g .w2g-ep-item.is-busy { opacity: .6; pointer-events: none; }

/* sub/dub pill radios */
#main-wrapper .as-w2g-radios { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
#main-wrapper .as-w2g-radios .custom-control { min-height: 0; margin: 0; padding: 0; }
#main-wrapper .as-w2g-radios .custom-control-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.375rem;
    padding: 0 1.125rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--as-ink-mute);
    background: var(--as-bg);
    border: 1px solid var(--as-border);
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s, background-color .15s, border-color .15s;
}
#main-wrapper .as-w2g-radios .custom-control-label::before,
#main-wrapper .as-w2g-radios .custom-control-label::after { display: none; }
#main-wrapper .as-w2g-radios .custom-control-label:hover { color: var(--as-ink); border-color: var(--as-border-strong); }
#main-wrapper .as-w2g-radios .custom-control-input:checked ~ .custom-control-label { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
#main-wrapper .as-w2g-radios .custom-control-input:focus-visible ~ .custom-control-label { box-shadow: 0 0 0 3px var(--as-brand-ring); }

/* start-mode segmented tabs */
#main-wrapper .as-w2g-pills { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 3px; list-style: none; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: 999px; }
#main-wrapper .as-w2g-pills .nav-link { display: inline-flex; align-items: center; height: 2rem; padding: 0 1rem; font-size: .8125rem; font-weight: 600; color: var(--as-ink-mute); background: transparent; border-radius: 999px; }
#main-wrapper .as-w2g-pills .nav-link:hover { color: var(--as-ink); background: var(--as-hover); }
#main-wrapper .as-w2g-pills .nav-link.active { color: #fff; background: var(--as-brand); }
.as-w2g-tabbody { margin-top: .75rem; }
#main-wrapper .as-w2g-form input[type=datetime-local] { color-scheme: inherit; }

/* ==========================================================================
   Room
   ========================================================================== */
#w2g-room .wg2-watch-block { gap: 1rem; }
@media (min-width: 1200px) { #w2g-room .wg2-watch-block { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; column-gap: 1.25rem; } }
#w2g-room .wg2-watch-block .anime-info { margin-top: 0; }

/* player */
#w2g-room .player-wrap { padding-bottom: 56.25%; background: #000; border-radius: var(--as-r-xl); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8); isolation: isolate; }
#w2g-room .player-wrap .bg { opacity: .35; }
#w2g-room .player-wrap iframe { border: 0; }
#w2g-room .w2g-room-status {
    width: 440px;
    max-width: 90%;
    padding: 1.75rem 2rem 1.5rem;
    color: rgba(255, 255, 255, .78);
    text-align: center;
    background: rgba(13, 12, 21, .72);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--as-r-xl);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#w2g-room .center-block.pending-block .user-avatar { width: 84px; padding-bottom: 84px; margin: -72px auto .75rem; box-shadow: 0 0 0 3px rgba(13, 12, 21, .9), 0 0 0 5px var(--as-brand); }
#w2g-room .center-block.pending-block .small { font-size: .75rem; opacity: .75; }
#w2g-room .center-block.pending-block .username { font-family: var(--as-font-display); font-size: 1.125rem; font-weight: 800; color: #fff; }
#w2g-room .center-block.pending-block .countdown { font-family: var(--as-font-display); font-weight: 800; color: #fff; }
.as-w2g-share { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.as-w2g-share__label { margin-bottom: .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.as-w2g-share__row { display: flex; align-items: center; gap: .5rem; padding: .25rem .25rem .25rem .75rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; }
.as-w2g-share__row .live-url { flex: 1 1 auto; min-width: 0; font-size: .75rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.as-w2g-copy { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; color: #fff; background: var(--as-brand); border: 0; border-radius: 50%; transition: background-color .15s; }
.as-w2g-copy:hover { background: var(--as-brand-hover); }
#w2g-room .loader-message { color: #fff; }
@media (max-width: 767.98px) {
    #w2g-room .w2g-room-status { padding: 1rem; }
    #w2g-room .as-w2g-share { display: none; }
}

/* room info bar + facts */
#w2g-room .room-info.as-w2g-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    color: var(--as-ink);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
}
#w2g-room .as-w2g-info .start { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 260px; }
#w2g-room .as-w2g-info .start .avatar { flex-shrink: 0; width: 44px; height: 44px; }
#w2g-room .as-w2g-info .start .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--as-r-md); }
#w2g-room .as-w2g-info .start .room { min-width: 0; margin: 0; }
#w2g-room .as-w2g-info .start .room .name {
    margin: 0 0 .125rem;
    font-family: var(--as-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--as-ink);
    overflow-wrap: anywhere;
}
@media (min-width: 768px) { #w2g-room .as-w2g-info .start .room .name { font-size: 1.375rem; } }
#w2g-room .as-w2g-info .start .room .created { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: .8125rem; }
#w2g-room .as-w2g-info .start .room .created strong { color: var(--as-ink-mute); }
#w2g-room .as-w2g-info .start .room .created span { color: var(--as-ink-dim); }
#w2g-room .as-w2g-info .start .room .created span::before { background: var(--as-ink-dim); }
#w2g-room .as-w2g-info .start .room .created .as-w2g-status::before { content: none; }
.as-w2g-status { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--as-brand) !important; background: var(--as-brand-soft); border-radius: 999px; }
html.dark .as-w2g-status { color: color-mix(in srgb, var(--as-brand) 55%, #fff) !important; }
#w2g-room .as-w2g-info .end { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
#w2g-room .as-w2g-info .end .viewers.as-w2g-pill { display: inline-flex; align-items: center; height: 2.125rem; margin: 0; padding: 0 .75rem; font-size: .8125rem; font-weight: 600; color: var(--as-ink-mute); background: var(--as-bg); border: 1px solid var(--as-border); border-radius: 999px; font-variant-numeric: tabular-nums; }
#w2g-room .as-w2g-info .end .viewers .mr-2 { margin-right: .375rem !important; color: var(--as-brand); }
#w2g-room .as-w2g-info .controls { display: flex; gap: .5rem; }
#w2g-room .as-w2g-info .controls .as-btn { margin: 0; }
.as-w2g .as-btn--danger { color: #fff; background: var(--as-danger, #e5484d); border-color: var(--as-danger, #e5484d); }
.as-w2g .as-btn--danger:hover { color: #fff; background: color-mix(in srgb, var(--as-danger, #e5484d) 85%, #000); border-color: transparent; }
@media (max-width: 767.98px) {
    #w2g-room .room-info.as-w2g-info { flex-direction: row; padding: .875rem 1rem; }
    #w2g-room .as-w2g-info .end { width: 100%; }
    #w2g-room .as-w2g-info .controls { margin-left: auto; }
}

#w2g-room .room-info.as-w2g-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
@media (min-width: 768px) { #w2g-room .room-info.as-w2g-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.as-w2g-fact { min-width: 0; padding: .625rem .875rem; background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
.as-w2g-fact dt { margin: 0 0 .25rem; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--as-ink-dim); }
.as-w2g-fact dd { margin: 0; font-size: .875rem; font-weight: 700; color: var(--as-ink); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* host panel */
#w2g-room .w2g-host-panel.as-w2g-host { margin-top: 1rem; padding: 1.125rem 1.25rem; background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-xl); }
#w2g-room .w2g-host-head { gap: .75rem; margin-bottom: .875rem; }
#w2g-room .w2g-host-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--as-font-display); font-size: 1rem; font-weight: 800; color: var(--as-ink); }
#w2g-room .w2g-host-title i { color: var(--as-brand); font-size: .875rem; }
#w2g-room .w2g-auto-next { color: var(--as-ink-mute); font-size: .8125rem; }
#w2g-room .w2g-type-switch { gap: 2px; padding: 3px; overflow: visible; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: 999px; }
#w2g-room .w2g-host-servers .w2g-type-switch { flex-wrap: wrap; border-radius: var(--as-r-lg); }
#w2g-room .w2g-type-btn { height: 1.875rem; padding: 0 .875rem; font-size: .75rem; font-weight: 700; color: var(--as-ink-mute); background: transparent; border-radius: 999px; transition: color .15s, background-color .15s; }
#w2g-room .w2g-type-btn:hover:not(:disabled) { color: var(--as-ink); background: var(--as-hover); }
#w2g-room .w2g-type-btn.active { color: #fff; background: var(--as-brand); }
#w2g-room .w2g-host-search .form-control { color: var(--as-ink); background: var(--as-bg); border-color: var(--as-border); }

/* chat */
#w2g-room aside.sidebar.chat { top: calc(var(--as-header-h, 4rem) + 1rem); height: calc(100vh - var(--as-header-h, 4rem) - 2rem); height: calc(100dvh - var(--as-header-h, 4rem) - 2rem); max-height: calc(100dvh - var(--as-header-h, 4rem) - 2rem); }
#w2g-room .room-chat.as-w2g-chat { color: var(--as-ink); background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-xl); }
#w2g-room .room-chat .head { display: flex; align-items: center; gap: .5rem; padding: .875rem 1rem; font-family: var(--as-font-display); font-size: .9375rem; font-weight: 800; text-align: left; color: var(--as-ink); border-bottom: 1px solid var(--as-border); }
#w2g-room .room-chat .head i { color: var(--as-brand); }
#w2g-room .room-chat .body .messages .scroll { padding: .75rem; scrollbar-width: thin; }
#w2g-room .room-chat .body .messages .event { font-size: .75rem; color: var(--as-ink-dim); }
#w2g-room .room-chat .body .messages .event::before,
#w2g-room .room-chat .body .messages .event::after { background: var(--as-border); }
#w2g-room .room-chat .body .messages .event.started { margin-bottom: .75rem; padding: .375rem .625rem; font-style: normal; color: var(--as-ink); background: var(--as-brand-soft); border-radius: var(--as-r-md); }
#w2g-room .room-chat .body .messages .load-more-msg { margin-bottom: .875rem; cursor: pointer; text-align: center; font-weight: 600; }
#w2g-room .room-chat .body .messages .load-more-msg:hover { background: color-mix(in srgb, var(--as-brand) 28%, transparent); }
#w2g-room .room-chat .body .messages .message { margin: 0 0 .625rem; }
#w2g-room .room-chat .body .messages .message .avatar { position: relative; margin-right: .5rem; }
#w2g-room .room-chat .body .messages .message .avatar img,
#w2g-room .room-chat .body .messages .message .avatar { width: 36px; height: 36px; }
#w2g-room .room-chat .body .messages .message .avatar > img { border-radius: 50%; object-fit: cover; }
#w2g-room .room-chat .body .messages .message .msg-body { min-width: 0; max-width: calc(100% - 44px); }
#w2g-room .room-chat .body .messages .message .msg-body .user { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-bottom: .1875rem; font-size: .75rem; font-weight: 700; color: var(--as-ink-mute); }
#w2g-room .room-chat .body .messages .message.owner .msg-body .user { color: var(--as-brand); }
html.dark #w2g-room .room-chat .body .messages .message.owner .msg-body .user { color: color-mix(in srgb, var(--as-brand) 55%, #fff); }
#w2g-room .room-chat .body .messages .message .msg-time { margin-left: .25rem; font-size: .6875rem; font-weight: 500; color: var(--as-ink-dim); }
#w2g-room .room-chat .body .messages .message .msg-body .text {
    padding: .4375rem .75rem;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--as-ink);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: 4px var(--as-r-lg) var(--as-r-lg) var(--as-r-lg);
}
#w2g-room .room-chat .body .messages .message .msg-body .text::after { content: none; }
#w2g-room .room-chat .body .messages .message.owner .avatar::before { z-index: 3; width: 9px; height: 9px; background: var(--as-star, #f59e0b); box-shadow: 0 0 0 2px var(--as-soft); }
#w2g-room .room-chat .body .messages .message.self .msg-body { align-items: flex-end; }
#w2g-room .room-chat .body .messages .message.self .msg-body .text { color: #fff; background: var(--as-brand); border-color: var(--as-brand); border-radius: var(--as-r-lg) 4px var(--as-r-lg) var(--as-r-lg); }
#w2g-room .room-chat .body .messages .message.self .msg-body .user { justify-content: flex-end; font-size: 0; }
#w2g-room .room-chat .body .messages .message.self .msg-body .user .msg-time { font-size: .6875rem; }
#w2g-room .room-chat .body .compose { gap: .5rem; padding: .75rem; background: var(--as-elev); border-top: 1px solid var(--as-border); }
#w2g-room .room-chat .compose input { min-height: 2.375rem; color: var(--as-ink); background: var(--as-soft); border-color: var(--as-border); border-radius: 999px; }
#w2g-room .room-chat .compose #sendMessage { height: 2.375rem; border-radius: 999px; }
@media (max-width: 1199.98px) {
    #w2g-room aside.sidebar.chat { position: static; height: min(560px, 70vh); max-height: min(560px, 70vh); }
}
@media (max-width: 400px) {
    #w2g-room .room-chat .compose #sendMessage span { display: none; }
}

/* anime info */
#w2g-room .anime-info.as-w2g-anime { display: flex; gap: 1.25rem; padding: 1.25rem; background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-xl); }
#w2g-room .as-w2g-anime .poster { flex-shrink: 0; width: 120px; }
#w2g-room .as-w2g-anime .poster span { padding-bottom: 140%; border-radius: var(--as-r-lg); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .6); }
#w2g-room .as-w2g-anime .poster span img { object-fit: cover; }
#w2g-room .as-w2g-anime .info { min-width: 0; padding: 0; }
#w2g-room .as-w2g-anime .info .name { margin: 0 0 .625rem; font-family: var(--as-font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: var(--as-ink); }
.as-w2g-anime__chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.as-w2g-anime__chips .as-chip { height: 1.75rem; padding: 0 .625rem; font-size: .75rem; }
.as-w2g-chip--dub { color: #fff; background: var(--as-dub, #16a34a); border-color: var(--as-dub, #16a34a); }
#w2g-room .as-w2g-anime .synopsis { display: -webkit-box; max-height: none; margin: 0 0 1rem; font-size: .875rem; line-height: 1.6; color: var(--as-ink-mute); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 575.98px) {
    #w2g-room .anime-info.as-w2g-anime { gap: .875rem; padding: 1rem; }
    #w2g-room .as-w2g-anime .poster { width: 76px; }
    #w2g-room .as-w2g-anime .info .name { font-size: 1.0625rem; }
}