/* ANIBOX bullet-curtain (NicoNico-style danmaku) overlay for /live/ pages.
 * Read-only display layer. Toggle persisted in localStorage (default OFF). */

.bullet-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    container-type: inline-size;
}
.bullet-overlay.hidden { display: none; }

.bullet-overlay .bullet {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    font-family: 'Sarabun', 'Noto Sans Thai', system-ui, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    -webkit-text-stroke: 1px #000;
    text-shadow: 0 0 4px rgba(0,0,0,.85);
    will-change: transform;
    animation-name: bullet-fly;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.bullet-overlay .bullet-sticker {
    height: 1.4em;
    width: auto;
    /* Fallback if the image is still loading — without this, width:auto +
     * unknown intrinsic dimensions collapses to 0 and the sticker looks like
     * a vertical dot flying past the screen. */
    min-width: 1.4em;
    vertical-align: middle;
    margin: 0 3px;
    display: inline-block;
    /* Stickers are pre-rendered art — drop the text-stroke that bullets apply
     * to text characters so we don't get a faint outline around the image. */
    -webkit-text-stroke: 0;
}

.bullet-overlay .bullet-flex {
    font-size: 30px;
    font-weight: 900;
    color: gold;
    -webkit-text-stroke: 2px #000;
    text-shadow: 0 0 12px gold, 0 0 4px #000;
}
.bullet-overlay .bullet-flex .bullet-sticker { height: 1.5em; }

.bullet-overlay .bullet-gift {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    /* Asymmetric L/R: text sits closer to the leading 🎁 (less left pad), pill
     * keeps generous trailing whitespace so the right edge breathes nicely. */
    padding: 10px 44px 10px 22px;
    border-radius: 26px;
    background: linear-gradient(90deg, rgba(255,180,0,.7), rgba(255,90,30,.7));
    -webkit-text-stroke: 1px #000;
    /* Glow kept gentle so it doesn't visually overflow the pill. */
    text-shadow: 0 0 4px rgba(0,0,0,.85);
    box-shadow: 0 0 14px rgba(255,180,0,.45);
}
.bullet-overlay .bullet-gift strong {
    color: gold;
    -webkit-text-stroke: 1px #000;
}
.bullet-overlay .bullet-gift-img {
    height: 1.6em;
    width: auto;
    min-width: 1.6em;   /* same reason as .bullet-sticker — prevents collapse before image loads */
    vertical-align: middle;
    margin: 0 6px;
    display: inline-block;
    -webkit-text-stroke: 0;
}

@keyframes bullet-fly {
    /* container-type: inline-size makes 100cqw resolve to overlay width.
     * Travel = overlay-width + own-width so the bullet fully clears both edges. */
    to { transform: translateX(calc(-100cqw - 100%)); }
}

.bullet-curtain-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    /* OFF = dark crisp gray. ON state below brightens to white. */
    color: #6a6a6a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 6;
    transition: background .18s, color .18s, border-color .18s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.bullet-curtain-toggle:hover {
    background: rgba(0,0,0,.85);
    transform: scale(1.06);
}
.bullet-curtain-toggle.on {
    color: #fff;
    border-color: #fff;
}
.bullet-curtain-toggle:focus-visible {
    outline: 2px solid #4ea3ff;
    outline-offset: 2px;
}

/* video.js controlBar button — replaces the floating .bullet-curtain-toggle
 * once the player is ready. Inherits the standard vjs-control sizing. */
.video-js .vjs-bullet-toggle {
    cursor: pointer;
}
.video-js .vjs-bullet-toggle .vjs-bullet-toggle-icon {
    /* Match video.js native controls (PIP/Fullscreen): they use 1.8em + unitless
     * line-height 1.67, which centers the glyph in the ~3em-tall control bar.
     * Using "3em" here = 3× the icon's own 1.7em font-size = ~51px box → it
     * overflowed the 30px bar. Unitless 1.67 is the fix. */
    font-size: 1.7em;
    line-height: 1.70;
    /* Nudge down a couple px to match the optical center of the neighbouring
     * native vjs icons (they sit slightly lower than FA's baseline). */
    transform: translateY(2px);
    /* OFF = dark crisp gray, ON = bright white. No glow/blur — keep it clean. */
    color: #6a6a6a;
    text-shadow: none;
    filter: none;
    transition: color .15s;
}
.video-js .vjs-bullet-toggle.vjs-bullet-toggle-on .vjs-bullet-toggle-icon {
    color: #fff;
}

@media (max-width: 768px) {
    .bullet-overlay .bullet { font-size: 14px; }
    .bullet-overlay .bullet-flex { font-size: 18px; }
    .bullet-overlay .bullet-sticker { height: 1.3em; }
    .bullet-overlay .bullet-gift { font-size: 15px; padding: 6px 28px 6px 12px; border-radius: 20px; }
    .bullet-overlay .bullet-gift-img { height: 1.4em; min-width: 1.4em; }
    .bullet-curtain-toggle {
        width: 34px;
        height: 34px;
        font-size: 18px;
        top: 8px;
        right: 8px;
        border-width: 1px;
    }
}