/*
 * AnimeKAI skin — w2g pages. Owned by the w2g re-skin; loaded on every page by
 * layouts/anikoto.blade.php after anikai-bridge.css, so scope every rule to the
 * pages it is for:
 *   #wrapper.w2g-lobby  — /watch2gether, /watch2gether/my-rooms, /watch2gether/create/{anime}
 *   #room-page          — /watch2gether/{room} (inside #wrapper.room)
 * AnimeKAI's own rules (styles.css: .aitem-wrapper.w2g, .room-top, #room-control,
 * #chat-box, #player-server, .episode-section) draw most of it; this file covers the
 * Laravel pieces AnimeKAI never had (notice card, host panel, create form, chat rows
 * rendered by watch2gather.js) and the hooks whose tags differ (buttons, not spans).
 */

/* ------------------------------------------------------------------ lobby */

#wrapper.w2g-lobby .container.w2g > section { margin-bottom: 3rem; }
#wrapper.w2g-lobby .shead .breadcrumb { margin: 0; font-size: 1.1rem; }
#wrapper.w2g-lobby .shead .breadcrumb a { color: #fff; }
#wrapper.w2g-lobby .shead .breadcrumb a:hover { color: #36cb68; }
#wrapper.w2g-lobby .shead .breadcrumb-item.active:not(:first-child) { color: rgba(255, 255, 255, .5); }
#wrapper.w2g-lobby .shead .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .3); }

/* Flex blockifies the links, so their .2rem vertical padding would grow the row;
   the negative margin keeps the .shead as tall as AnimeKAI's inline .snav. */
#wrapper.w2g-lobby .w2g-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: -.2rem 0; }
#wrapper.w2g-lobby .w2g-nav .w2g-alt { margin-left: .5rem; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .15); }
#wrapper.w2g-lobby .w2g-nav .w2g-alt i { font-size: .9rem; margin-right: .2rem; }

#wrapper.w2g-lobby .w2g-empty {
    color: rgba(255, 255, 255, .5);
    background: #181d22;
    border-radius: 1.2rem;
    text-align: center;
    padding: 3rem 1rem;
    margin: 1.5rem 0;
}

.aitem-wrapper.w2g .aitem .inner .detail .info .raw { padding: 0 .5rem; color: rgba(255, 255, 255, .7); }
.aitem-wrapper.w2g .aitem .inner .detail .info i.fa-lock { color: rgba(255, 255, 255, .5); font-size: .8rem; }
.aitem-wrapper.w2g .aitem .inner .detail a.title:hover { color: #36cb68; }
.aitem-wrapper.w2g .aitem .inner .w2g-status { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aitem-wrapper.w2g .aitem .inner .w2g-status .count-down { font-variant-numeric: tabular-nums; }
.aitem-wrapper.w2g .aitem .inner .meta .user .user-name { max-width: 100%; }

#wrapper.w2g-lobby .pre-pagination { margin: 2rem 0 !important; }

/* ------------------------------------------------------------ create page */

#wrapper.w2g-lobby .w2g-create-shell { max-width: 880px; margin: 1.5rem auto 0; }

#wrapper.w2g-lobby .w2g-notice {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    background: rgba(228, 95, 58, .12);
    border: 1px solid rgba(228, 95, 58, .35);
    border-radius: .85rem;
    padding: .8rem 1.1rem;
    margin-bottom: 1rem;
    font-size: .95rem;
}
#wrapper.w2g-lobby .w2g-notice i { color: #e45f3a; }
#wrapper.w2g-lobby .w2g-notice a { color: #36cb68; font-weight: 500; margin-left: auto; }

#wrapper.w2g-lobby .w2g-create-card {
    display: flex;
    background: #181d22;
    border-radius: 1.2rem;
    overflow: hidden;
}

/* Left: AnimeKAI's #w2g-create modal head (blurred cover + preview card). */
#wrapper.w2g-lobby .w2g-create-card .modal-head {
    position: relative;
    flex: 0 0 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: #11161b;
}
#wrapper.w2g-lobby .w2g-create-card .modal-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: blur(4px); opacity: .2;
}
#wrapper.w2g-lobby .w2g-create-card .modal-head .aitem-wrapper { position: relative; width: 100%; margin: 0; }
#wrapper.w2g-lobby .w2g-create-card .modal-head .aitem { width: 100%; float: none; }
#wrapper.w2g-lobby .w2g-create-card .modal-head .detail .title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#wrapper.w2g-lobby .w2g-create-card .modal-head .detail .info span { white-space: nowrap; }
#wrapper.w2g-lobby .w2g-create-card .modal-head .detail .info i.sub { color: #e45f3a; }
#wrapper.w2g-lobby .w2g-create-card .modal-head .detail .info i.dub { color: #36cb68; }
#wrapper.w2g-lobby .w2g-create-card .modal-head .meta .user { align-items: center; color: rgba(255, 255, 255, .7); }
#wrapper.w2g-lobby .w2g-create-card .modal-head .aitem:hover .w2g-status { font-size: 1rem; }
#wrapper.w2g-lobby .w2g-create-card .modal-head .aitem:hover .w2g-status::after { content: none; }

/* Right: the form. */
#wrapper.w2g-lobby .w2g-create-card .modal-body { flex: 1 1 auto; min-width: 0; padding: 2rem; }
#wrapper.w2g-lobby #room-create .form-group { margin-bottom: 1.4rem; }
#wrapper.w2g-lobby #room-create .w2g-label { display: block; color: #fff; font-weight: 500; margin-bottom: .5rem; }
#wrapper.w2g-lobby #room-create .w2g-label small { color: rgba(255, 255, 255, .4); font-size: .85rem; }
#wrapper.w2g-lobby #room-create .help-text { color: rgba(255, 255, 255, .45); font-size: .85rem; margin: .4rem 0 0; }
#wrapper.w2g-lobby #room-create .help-block:empty { display: none; }
#wrapper.w2g-lobby #room-create .form-control { background-color: #11161b; }
#wrapper.w2g-lobby #room-create input[type="datetime-local"] { color-scheme: dark; }

/* Episode picker = AnimeKAI .episode-section grid, flattened into the form. */
.w2g-episodes.episode-section { width: 100%; min-width: 0; max-width: none; padding: 0; background: transparent; }
.w2g-episodes.episode-section .head-top { margin-bottom: .6rem; }
.w2g-episodes.episode-section .head-top .form-group { margin: 0 !important; position: relative; }
.w2g-episodes.episode-section .head-top .form-group::before { content: "#"; color: rgba(255, 255, 255, .5); z-index: 2; font-size: 1rem; position: absolute; top: .25rem; left: .7rem; }
.w2g-episodes.episode-section .head-top input { border-radius: .6rem; width: 6rem; height: 2rem; padding-left: 2rem; }
.w2g-episodes.episode-section .eplist { min-height: 0 !important; }
.w2g-episodes.episode-section .eplist ul { position: static; max-height: 12.5rem; margin: 0 -.25rem; }
.w2g-episodes.episode-section .eplist ul > li { width: 10% !important; min-width: 3.2rem !important; }
.w2g-episodes.episode-section .eplist ul > li a { background: rgba(255, 255, 255, .05); cursor: pointer; }
/* The Laravel search hides the <a>; drop its empty cell too. */
.w2g-episodes.episode-section .eplist ul > li:has(> a[style*="display: none"]) { display: none; }
.w2g-episodes.episode-section .w2g-ep-empty,
.w2g-episodes.episode-section .w2g-ep-loading { color: rgba(255, 255, 255, .45); font-size: .9rem; padding: 1rem 0; text-align: center; }

/* Sub / Dub radios and the start-mode tabs as AnimeKAI's .privacy-sw pill. */
.w2g-create-shell .privacy-sw {
    display: inline-flex; align-items: center;
    height: 2.2rem; padding: 0; margin: 0;
    background-color: #11161b; border-radius: 1.2rem;
    list-style: none; flex-wrap: nowrap;
}
.w2g-create-shell .privacy-sw input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.w2g-create-shell .privacy-sw label,
.w2g-create-shell .privacy-sw .nav-link {
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    height: 100%; min-width: 5rem; padding: 0 1rem; margin: 0;
    color: rgba(255, 255, 255, .5);
    border-radius: 1.2rem;
    font-size: .9rem; font-weight: 500;
    cursor: pointer; transition: all .2s;
    background: transparent; border: 0;
}
.w2g-create-shell .privacy-sw .nav-item { height: 100%; }
.w2g-create-shell .privacy-sw label svg { width: 1.3rem; height: 1rem; fill: currentColor; }
.w2g-create-shell .privacy-sw label:hover,
.w2g-create-shell .privacy-sw .nav-link:hover { color: #fff; }
.w2g-create-shell .privacy-sw input:checked + label,
.w2g-create-shell .privacy-sw .nav-link.active { background-color: #36cb68; color: #0c1116 !important; }
.w2g-create-shell .tab-content > .tab-pane { display: none; }
.w2g-create-shell .tab-content > .tab-pane.active { display: block; }

.w2g-create-shell .w2g-public { display: flex; align-items: center; gap: .6rem; padding-left: 0; }
.w2g-create-shell .w2g-public .form-check-input { float: none; margin: 0; width: 2.4em; height: 1.3em; cursor: pointer; }
.w2g-create-shell .w2g-public .form-check-input:checked { background-color: #36cb68; border-color: #36cb68; }
.w2g-create-shell .w2g-public .form-check-label { font-weight: 500; cursor: pointer; }

#wrapper.w2g-lobby #room-create .modal-btn { font-size: 1.1rem; font-weight: 500; padding: .6rem 1rem; }

@media (max-width: 767.98px) {
    #wrapper.w2g-lobby .w2g-create-card { flex-direction: column; }
    #wrapper.w2g-lobby .w2g-create-card .modal-head { flex-basis: auto; padding: .5rem 2rem 1rem; }
    #wrapper.w2g-lobby .w2g-create-card .modal-head .aitem-wrapper { width: 17rem; }
    #wrapper.w2g-lobby .w2g-create-card .modal-body { padding: 1.5rem 1.2rem; text-align: center; }
    #wrapper.w2g-lobby #room-create .w2g-episodes .head-top { text-align: left; }
    #wrapper.w2g-lobby #room-create .w2g-public { justify-content: center; }
    .w2g-episodes.episode-section .eplist ul > li { width: 16.666% !important; min-width: 0 !important; }
}
@media (max-width: 400px) {
    .w2g-create-shell .privacy-sw label,
    .w2g-create-shell .privacy-sw .nav-link { min-width: 0; padding: 0 .8rem; }
    .w2g-episodes.episode-section .eplist ul > li { width: 20% !important; }
}

/* ---------------------------------------------------------------- room page */

#room-page .room-top .breadcrumb { margin: 0; min-width: 0; padding-right: 1rem; }
#room-page .room-top .breadcrumb a { color: #fff; }
#room-page .room-top .breadcrumb a:hover { color: #36cb68; }
#room-page .room-top .info > span.raw { color: rgba(255, 255, 255, .7); }
#room-page .room-top .info > span.sub svg,
#room-page .room-top .info > span.dub svg { height: 1rem; }
#room-page .room-top #viewers-count i { margin-right: .3rem !important; }
/* watch2gather.js re-draws this with an eye icon; AnimeKAI shows a person. */
#room-page .room-top #viewers-count .fa-eye { --fa: "\f007"; --fa--fa: "\f007\f007"; }

/* The waiting / ended notice sits centred over the blurred cover. */
#room-page #player .w2g-room-status { position: absolute; inset: 0; z-index: 2; }
#room-page #player .player-notice {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: max-content; max-width: min(32rem, 92%);
    max-height: 96%; overflow: hidden;
    text-align: center; line-height: 1.4;
    color: #fff;
    background: rgba(17, 22, 27, .85);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.2rem;
    padding: 1.4rem 2rem;
}
#room-page #player .player-notice .user-avatar img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 2px solid #36cb68; margin-bottom: .6rem; }
#room-page #player .player-notice .small { color: rgba(255, 255, 255, .6); font-size: .9rem; }
#room-page #player .player-notice .text-ended { color: #fff; background: #e45f3a; border-radius: .6rem; padding: .35rem 1rem; font-weight: 500; font-size: 1rem; }
#room-page #player .player-notice .countdown { color: #e45f3a; font-weight: 600; font-variant-numeric: tabular-nums; }
#room-page #player .player-notice .username { font-size: 1.2rem; font-weight: 600; margin-top: .1rem; }
#room-page #player .player-notice .w2g-share-block { margin-top: .8rem; }
#room-page #player .player-notice .w2g-share-block .label { color: rgba(255, 255, 255, .5); font-size: .85rem; }
#room-page #player .player-notice .w2g-share-block .text { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .2rem; }
#room-page #player .player-notice .live-url { color: #36cb68; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#room-page #player .player-notice .live-url:hover { color: #fff; }
#room-page #player .player-notice .btn-copy { color: #fff; flex-shrink: 0; }
#room-page #player .player-notice .btn-copy:hover { color: #36cb68; }

#room-page #player-container { position: absolute; inset: 0; z-index: 3; background: #000; }
#room-page #player-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#room-page #player-container .loader {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    background: #000; line-height: 1.4;
}
#room-page #player-container .loading { display: flex; gap: .4rem; }
#room-page #player-container .loading > div { width: .7rem; height: .7rem; border-radius: 50%; background: #e45f3a; animation: w2g-dot 1s infinite ease-in-out; }
#room-page #player-container .loading .span2 { animation-delay: .15s; }
#room-page #player-container .loading .span3 { animation-delay: .3s; }
#room-page #player-container .loader-message { color: rgba(255, 255, 255, .7); font-size: .95rem; padding: 0 1rem; text-align: center; }
@keyframes w2g-dot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* #room-control: host, elapsed time, Focus and the host's Start / End Live. */
#room-page #room-control .user-info { min-width: 0; }
#room-page #room-control .user-info .username a { color: #fff; }
#room-page #room-control .user-info .username a:hover { color: #36cb68; }
#room-page #room-control .user-info small { display: block; margin-top: 0; white-space: nowrap; }
#room-page #room-control #w2g-status-label { color: #36cb68; }
#room-page #room-control #player-control { gap: 0; padding-top: 1.1rem; padding-bottom: 1.1rem; }
#room-page #room-control #player-control .ctrl { display: flex; align-items: center; }
#room-page #room-control .w2g-elapsed { color: rgba(255, 255, 255, .6); font-size: .9rem; white-space: nowrap; gap: .35rem; font-variant-numeric: tabular-nums; }
#room-page #room-control #player-control .ctrl.controls .btn {
    align-items: center; gap: .3rem;
    padding: .35rem .9rem; border-radius: .6rem;
    font-size: .9rem; font-weight: 500; color: #fff;
}
#room-page #room-control .controls .btn-start-live { background: #36cb68; color: #0c1116; }
#room-page #room-control .controls .btn-start-live:hover { background: #42ce71; }
#room-page #room-control .controls .btn-end-live { background: #e45f3a; }
#room-page #room-control .controls .btn-end-live:hover { background: #e77150; }
#room-page #room-control .controls .btn[disabled] { opacity: .5; pointer-events: none; }

/* Server note / host panel (AnimeKAI's #player-server, with buttons instead of spans). */
#room-page .player-bottom #player-server .server-note .w2g-auto-next {
    display: inline-flex; align-items: center; gap: .4rem;
    margin: .6rem 0 0; cursor: pointer;
    color: rgba(255, 255, 255, .7); font-size: .9rem;
}
#room-page .player-bottom #player-server .server-note .w2g-auto-next span { color: inherit; font-size: inherit; }
#room-page .player-bottom #player-server .server-note .w2g-auto-next input { accent-color: #36cb68; width: 1rem; height: 1rem; }
#room-page #player-server .server-wrap .server-type .w2g-type-btn {
    background: none; border: 0; padding: 0; color: #fff;
    opacity: .5; cursor: pointer;
    display: inline-flex; align-items: center;
    font-size: .9rem; font-weight: 500;
    transition: opacity .1s, color .1s;
}
#room-page #player-server .server-wrap .server-type .w2g-type-btn + .w2g-type-btn { margin-left: 1rem; }
#room-page #player-server .server-wrap .server-type .w2g-type-btn svg {
    fill: #fff; background-color: rgba(255, 255, 255, .1);
    width: 1.6rem; height: 1.12rem; margin-right: .3rem; padding: .2rem;
    transition: fill .1s, background-color .1s;
}
#room-page #player-server .server-wrap .server-type .w2g-type-btn.active,
#room-page #player-server .server-wrap .server-type .w2g-type-btn:not([disabled]):hover { opacity: 1; }
#room-page #player-server .server-wrap .server-type .w2g-type-btn.active svg.sub,
#room-page #player-server .server-wrap .server-type .w2g-type-btn:not([disabled]):hover svg.sub { fill: #e45f3a; background-color: rgba(228, 95, 58, .1); }
#room-page #player-server .server-wrap .server-type .w2g-type-btn.active svg.dub,
#room-page #player-server .server-wrap .server-type .w2g-type-btn:not([disabled]):hover svg.dub { fill: #36cb68; background-color: rgba(54, 203, 104, .1); }
#room-page #player-server .server-wrap .server-type .w2g-type-btn[disabled] { opacity: .2; cursor: not-allowed; }
#room-page #player-server .server-wrap .server-items { flex-wrap: wrap; gap: .5rem; }
#room-page #player-server .server-wrap .server-items .w2g-server-btn {
    cursor: pointer; border: 0;
    color: #0c1116; background-color: rgba(255, 255, 255, .3);
    border-radius: .6rem; padding: .4rem .7rem;
    font-size: .9rem; font-weight: 500;
    transition: color .2s, background-color .2s;
}
#room-page #player-server .server-wrap .server-items .w2g-server-btn.active,
#room-page #player-server .server-wrap .server-items .w2g-server-btn:hover { background-color: #36cb68; }
/* Only viewers get the note alone; it spans the box. */
#room-page .player-bottom #player-server .server-note:only-child { width: 100%; }

#room-page .w2g-host-panel .player-bottom > div:last-child { border-radius: 0 !important; }
/* Positioned so it paints above the absolute .watch-section-bg (z-index 0, opacity .2). */
#room-page .w2g-episodes.episode-section { position: relative; background: #11161b; padding: 0 1.5rem 1.5rem; border-radius: 0; }
#room-page .w2g-episodes.episode-section .head-top { padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .05); }
#room-page .w2g-episodes.episode-section .eplist ul { max-height: 11rem; }
#room-page .w2g-episodes.episode-section .eplist ul > li { width: 6.666% !important; }
#room-page .w2g-episodes.episode-section .eplist ul > li a.highlight { border-color: #e45f3a; }

/* Anime details under the player. */
#room-page .entity-section { background-color: #11161b; }
#room-page .entity-section .main-entity .detail #w2g-meta-status { text-transform: capitalize; }

/* Chat rows. watch2gather.js builds .message > .avatar + .msg-body(.user, .text);
   the grid draws them like AnimeKAI's .chat: avatar + name on one line, bubble under. */
#room-page #chat-box .chat-wrapper #messages-list .message {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: .4rem;
    align-items: center;
    margin-bottom: .8rem;
}
#room-page #chat-box .message .avatar img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; display: block; }
#room-page #chat-box .message .msg-body { display: contents; }
#room-page #chat-box .message .user { display: flex; align-items: center; gap: .4rem; min-width: 0; color: #36cb68; font-weight: 500; }
#room-page #chat-box .message .user .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room-page #chat-box .message .user .rank-label { flex-shrink: 0; font-size: .7rem; font-weight: 500; line-height: 1; padding: .2rem .45rem; border-radius: .4rem; color: #fff; background: rgba(255, 255, 255, .12); }
#room-page #chat-box .message .user .msg-time { margin-left: auto; flex-shrink: 0; color: rgba(255, 255, 255, .3); font-size: .75rem; font-weight: 400; }
#room-page #chat-box .message.owner .user .name::after { content: "Host"; margin-left: .35rem; font-size: .7rem; padding: .1rem .4rem; border-radius: .4rem; background: rgba(228, 95, 58, .2); color: #e45f3a; }
#room-page #chat-box .message.staff .user .name { color: #ffc107; }
#room-page #chat-box .message .text {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    color: rgba(255, 255, 255, .6);
    background-color: #25303a;
    border-radius: 0 .6rem .6rem;
    margin: .2rem 0 0;
    padding: .4rem .7rem;
}
#room-page #chat-box .message.self .text { justify-self: end; background-color: rgba(228, 95, 58, .4); color: rgba(255, 255, 255, .85); border-radius: .6rem 0 .6rem .6rem; }

#room-page #chat-box .event { text-align: center; margin: 1rem 0; color: rgba(255, 255, 255, .3); font-size: .9rem; }
#room-page #chat-box .event span { color: rgba(255, 255, 255, .3); font-size: .9rem; }
#room-page #chat-box .event.started { margin: .6rem 0 .9rem; font-size: .85rem; color: rgba(255, 255, 255, .45); }
#room-page #chat-box .load-more-msg {
    display: block; width: 100%;
    color: rgba(255, 255, 255, .5); background-color: #11161b;
    border-radius: .6rem; padding: .6rem 0; cursor: pointer;
}
#room-page #chat-box .load-more-msg:hover { color: #fff; background-color: #050708; }
#room-page #chat-box .load-more-msg.is-loading { pointer-events: none; opacity: .6; }
#room-page #chat-box #chat-form { margin: 0; }
#room-page #chat-box #chat-form input { background-color: #11161b; }
#room-page #chat-box #chat-form input[readonly] { cursor: pointer; }
#room-page #chat-box #chat-form button { border: 0; background: none; }
#room-page #chat-box #chat-form button[disabled] { opacity: .4; }

/* Below 1300px AnimeKAI hides the chat off-canvas; keep the button visible only then. */
#room-page .room-top .btn-openchat,
#room-page #chat-box .btn-closechat { display: none; }
@media (max-width: 1299.9px) {
    #room-page .room-top .btn-openchat,
    #room-page #chat-box .btn-closechat { display: inline-block; }
    #room-page .dual-col > aside.sidebar { width: 100%; }
    #room-page .dual-col > aside.sidebar.active { box-shadow: -1rem 0 2rem rgba(0, 0, 0, .5); border-radius: 1.2rem; }
}

@media (max-width: 850px) {
    #room-page #room-control .w2g-elapsed { padding-left: 1.5rem; }
}
@media (max-width: 767.98px) {
    #room-page .w2g-episodes.episode-section .eplist ul > li { width: 12.5% !important; min-width: 0 !important; }
}
@media (max-width: 575.98px) {
    #room-page #player .player-notice { padding: .7rem 1rem; border-radius: .85rem; }
    #room-page #player .player-notice .user-avatar img { width: 2.6rem; height: 2.6rem; margin-bottom: .3rem; }
    #room-page #player .player-notice .username { font-size: 1rem; }
    #room-page #player .player-notice .small { font-size: .8rem; }
    #room-page #player .player-notice .w2g-share-block { margin-top: .4rem; }
    #room-page #player .player-notice .w2g-share-block .label { display: none; }
    #room-page .room-top #viewers-count { font-size: .9rem; }
    #room-page #room-control .w2g-elapsed { font-size: .8rem; }
    #room-page #room-control #player-control .ctrl.controls .btn { padding: .3rem .6rem; }
    #room-page .w2g-episodes.episode-section { padding: 0 1rem 1rem; }
    #room-page .w2g-episodes.episode-section .eplist ul > li { width: 16.666% !important; }
}

/* Let the blurred cover show behind the notice (anikai-extra paints #player black). */
#room-page .player-main #player { background: transparent; }
#room-page .player-main { background: #0c1116; }
/* AnimeKAI drops control labels on small screens; the host's live buttons keep theirs. */
#room-page #room-control #player-control .controls .btn span { display: inline !important; }
/* AnimeKAI pads every .tab-content; the start-mode panes sit flush under their pill. */
#wrapper.w2g-lobby #room-create .tab-content { padding: 0; margin-top: .7rem !important; }
@media (max-width: 575.98px) {
    #wrapper.w2g-lobby .w2g-nav .w2g-alt { border-left: 0; margin-left: 0; padding-left: .5rem; }
}
#room-page #player .player-notice .text-start-time[style*="block"] ~ .text-start-manual { display: none !important; }
/* main.js LightControl (Focus) lifts #player-wrapper over its dim layer by z-index. */
#room-page #player-wrapper { position: relative; }
/* AnimeKAI drops the note's top padding at ≤800px because the server list sits above
   it; a viewer's box has only the note, so give that padding back. */
@media (max-width: 800px) {
    #room-page .player-bottom #player-server .server-note:only-child { padding-top: 1.2rem; }
}
/* "You are watching Episode N" — the episode in AnimeKAI's grey #ep-note-title. */
#room-page #player-server .server-note p .w2g-note-title { font-size: .9rem; }
/* The checked Sub / Dub pill is green; its orange/green badge icon turns dark like the label. */
#wrapper.w2g-lobby .w2g-create-shell .privacy-sw input:checked + label svg { fill: #0c1116; background-color: rgba(12, 17, 22, .12); border-color: #0c1116; }

/* QA: jQuery .show() puts the host buttons back as display:inline, where the flex gap
   no longer applies, so space the icon itself. */
#room-page #room-control .controls .btn > i { margin-right: .35rem; }
#room-page #room-control .controls .btn > i + span { margin-left: 0; }

/* QA: an ended room shows anikai.to's plain orange "This show has ended" box
   (#player .message.dark-bg), not the host card used while waiting. Keyed off the
   notice line watch2gather.js shows on end, so it also switches live. */
#room-page #player .player-notice:has(> .text-ended:not([style*="none"])) {
    min-width: 300px; padding: 1.5rem 2rem;
    background: #e45f3a; border: 0; border-radius: 1.2rem;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
#room-page #player .player-notice:has(> .text-ended:not([style*="none"])) > :not(.text-ended) { display: none !important; }
#room-page #player .player-notice:has(> .text-ended:not([style*="none"])) .text-ended {
    background: none; padding: 0; margin: .5rem 0; border-radius: 0;
    font-size: 1.1rem; font-weight: 500; color: #fff;
}
#room-page:has(.player-notice > .text-ended:not([style*="none"])) #room-control #w2g-status-label { color: rgba(255, 255, 255, .5); }
/* QA: on phones "Start Live" wrapped onto two lines inside the control bar. */
#room-page #room-control .controls .btn { white-space: nowrap; }