:root{
    --panel-w:580px;
    --panel-h:72px;
    --text:#f6f7fa;
    --muted:rgba(236,239,244,.72);
    --soft:rgba(236,239,244,.46);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body.overlay-mode,body.embed-mode{background:transparent;overflow:hidden}
.preview-mode{background:#0b0d11;overflow:hidden}
.preview-background{position:fixed;inset:0;background:linear-gradient(rgba(7,8,11,.16),rgba(7,8,11,.16)),url('../img/preview-bg.png') center/cover no-repeat;filter:blur(1px);transform:scale(1.01)}
.overlay-stage{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;padding:0 24px 46px}
.preview-mode .overlay-stage{align-items:center;padding-bottom:0}
.embed-mode .overlay-stage{align-items:center;padding:0;height:190px}

.giveaway-widget{
    --accent:#eb4b4b;
    position:relative;
    width:var(--panel-w);
    height:var(--panel-h);
    display:flex;
    align-items:center;
    padding:0 14px 0 122px;
    overflow:visible;
    isolation:isolate;
    background:transparent;
    transition:opacity .2s ease,transform .2s ease;
}
.giveaway-widget.is-hidden{opacity:0;pointer-events:none;transform:translateY(5px)}

/* Whole panel gets a subtle rarity outline. The diagonal left wall remains the strongest accent. */
.panel-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    clip-path:polygon(28px 0,100% 0,100% 100%,0 100%);
    border-radius:0 12px 12px 0;
    background:
        linear-gradient(90deg,
            color-mix(in srgb,var(--accent) 42%,transparent 58%) 0%,
            color-mix(in srgb,var(--accent) 26%,transparent 74%) 56%,
            color-mix(in srgb,var(--accent) 52%,transparent 48%) 100%
        ) top/100% 1px no-repeat,
        linear-gradient(180deg,
            color-mix(in srgb,var(--accent) 54%,transparent 46%) 0%,
            color-mix(in srgb,var(--accent) 36%,transparent 64%) 50%,
            color-mix(in srgb,var(--accent) 54%,transparent 46%) 100%
        ) right/1px 100% no-repeat,
        linear-gradient(90deg,
            color-mix(in srgb,var(--accent) 30%,transparent 70%) 0%,
            color-mix(in srgb,var(--accent) 22%,transparent 78%) 58%,
            color-mix(in srgb,var(--accent) 48%,transparent 52%) 100%
        ) bottom/100% 1px no-repeat,
        linear-gradient(180deg,rgba(255,255,255,.040) 0%,rgba(255,255,255,0) 44%),
        linear-gradient(90deg,rgba(14,17,22,.968) 0%,rgba(12,15,20,.975) 48%,rgba(9,12,17,.984) 100%);
    box-shadow:0 8px 18px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.018);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    overflow:hidden;
}

/* Exact coloured line following the / shaped left wall. */
.left-edge{
    position:absolute;
    left:27px;
    top:-1px;
    width:2px;
    height:77px;
    z-index:2;
    pointer-events:none;
    transform-origin:50% 0;
    transform:rotate(21.4deg);
    border-radius:2px;
    background:color-mix(in srgb,var(--accent) 92%,#fff 8%);
    box-shadow:0 0 8px color-mix(in srgb,var(--accent) 54%,transparent 46%);
}

.skin-wrap{
    position:absolute;
    left:-115px;
    top:50%;
    width:224px;
    height:166px;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    z-index:3;
}
.skin-glow{
    position:absolute;
    width:152px;
    height:100px;
    border-radius:50%;
    background:radial-gradient(circle,var(--accent) 0%,transparent 70%);
    opacity:.10;
    filter:blur(15px)
}
.skin-image{
    position:relative;
    width:100%;
    height:100%;
    object-fit:contain;
    max-width:none;
    filter:drop-shadow(0 9px 13px rgba(0,0,0,.26))
}

.giveaway-copy{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:7px;color:var(--muted);font-size:10px;font-weight:600;line-height:1;letter-spacing:.25em;text-transform:uppercase;white-space:nowrap}
.eyebrow-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px color-mix(in srgb,var(--accent) 68%,transparent 32%);flex:0 0 auto}
.item-row{display:flex;align-items:center;min-width:0;white-space:nowrap;line-height:1}
.weapon-name,.skin-name{color:var(--text);font-size:18px;font-weight:800;letter-spacing:-.032em;overflow:hidden;text-overflow:ellipsis}
.weapon-name{flex:0 1 auto;max-width:92px}
.skin-name{flex:1 1 auto;min-width:0}
.skin-divider{width:3px;height:22px;background:var(--accent);margin:0 9px;flex:0 0 auto;box-shadow:0 0 7px color-mix(in srgb,var(--accent) 28%,transparent 72%)}
.separator{width:1px;min-width:1px;height:43px;margin:0 14px;position:relative;z-index:2;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.18) 12%,rgba(255,255,255,.18) 88%,transparent 100%)}
.command-block{width:106px;min-width:106px}
.participants-block{width:70px;min-width:70px}
.command-block,.participants-block{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;z-index:2}
.main-line{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;margin-bottom:7px}
.chat-icon,.people-icon{width:20px;height:20px;color:rgba(239,242,247,.74);flex:0 0 auto}
.command-value,.participants{color:var(--text);line-height:1;font-weight:800;letter-spacing:-.04em}
.command-value{font-size:18px}
.participants{font-size:20px}
.sub-line{width:100%;text-align:center;color:var(--soft);font-size:10px;line-height:1;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.participant-line{gap:8px}

@media(max-width:620px){
    :root{--panel-w:520px;--panel-h:68px}
    .giveaway-widget{padding-left:112px}
    .panel-bg{clip-path:polygon(26px 0,100% 0,100% 100%,0 100%);border-radius:0 11px 11px 0}
    .left-edge{left:25px;height:73px;transform:rotate(20.7deg)}
    .skin-wrap{left:-104px;width:204px;height:152px}
    .weapon-name,.skin-name{font-size:16px}
    .weapon-name{max-width:82px}
    .skin-divider{height:20px;margin:0 8px}
    .separator{height:40px;margin:0 12px}
    .command-block{width:98px;min-width:98px}
    .participants-block{width:64px;min-width:64px}
    .command-value{font-size:17px}
    .participants{font-size:18px}
    .chat-icon,.people-icon{width:18px;height:18px}
    .sub-line{font-size:9px}
}