* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    background: radial-gradient(1100px 700px at 18% 0%, rgba(84,104,255,0.25), rgba(0,0,0,0) 60%),
                radial-gradient(1000px 650px at 90% 10%, rgba(50,211,255,0.18), rgba(0,0,0,0) 55%),
                #0b1020;
    color: #e8ecff;
}
.page { max-width: 1400px; margin: 0 auto; padding: 24px; }
.topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
}
.title { font-size: 28px; font-weight: 700; letter-spacing: 1px; }
.session { text-align: right; }
.session-label { font-size: 12px; opacity: 0.75; }
.session-value { font-size: 16px; font-weight: 700; }
.meta { display: flex; gap: 14px; justify-content: flex-end; font-size: 14px; opacity: 0.9; }

.stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}
.card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px;
    background: rgba(255,255,255,0.03);
    box-shadow: 0 16px 48px rgba(0,0,0,0.35);
    min-height: 260px;
}
.card-hd { font-size: 14px; opacity: 0.85; margin-bottom: 14px; }
.result {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,0.16);
    background: rgba(0,0,0,0.18);
    min-height: 140px;
    padding: 18px;
    text-align: center;
    position: relative;
}
.result-team { font-size: 56px; font-weight: 800; letter-spacing: 2px; }
.result-members { gap: 12px; }
.member {
    width: 100%;
    font-size: 44px;
    font-weight: 800;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.slot-rolling {
    filter: blur(0.6px);
    text-shadow: 0 8px 18px rgba(0,0,0,0.45);
    letter-spacing: 3px;
}
.slot-rolling.is-loading { opacity: 0.85; }
.actions { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }
.btn {
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: #e8ecff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(90deg, #5468ff, #32d3ff); color: #081028; border: none; font-weight: 800; }
.btn.ghost { background: transparent; }
.btn:not(:disabled):active { transform: translateY(1px) scale(0.99); }
.btn.primary:not(:disabled):hover { filter: brightness(1.03); }
.btn:not(.primary):not(:disabled):hover { background: rgba(255,255,255,0.10); }

.history {
    margin-top: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
}
.history-hd { padding: 14px 18px; font-size: 14px; opacity: 0.85; border-bottom: 1px solid rgba(255,255,255,0.08); }
.history-bd { padding: 10px 18px 16px; display: grid; gap: 10px; }
.row {
    display: grid;
    grid-template-columns: 92px 1fr 1fr;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.06);
}
.row:hover { background: rgba(255,255,255,0.04); }
.row .no { opacity: 0.75; }
.row .team { font-weight: 800; }
.row .members { opacity: 0.95; }
.footer { margin-top: 14px; text-align: center; opacity: 0.8; }
.link { color: #9ee7ff; text-decoration: none; }
.link:hover { text-decoration: underline; }

.toast {
    position: fixed;
    left: 50%;
    top: 14%;
    transform: translate(-50%, -10px);
    opacity: 0;
    pointer-events: none;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 60px rgba(0,0,0,0.45);
    min-width: 280px;
    max-width: min(720px, calc(100vw - 36px));
    text-align: center;
    transition: opacity 240ms ease, transform 240ms ease;
    z-index: 99;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-title { font-size: 14px; opacity: 0.9; }
.toast-text { margin-top: 6px; font-size: 28px; font-weight: 900; letter-spacing: 1px; }

.anim-pop { animation: pop 520ms cubic-bezier(.2,.9,.2,1); }
.anim-glow::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: radial-gradient(400px 120px at 50% 50%, rgba(50,211,255,0.16), rgba(0,0,0,0) 70%);
    pointer-events: none;
    animation: glow 800ms ease-out;
}
.is-loading { opacity: 0.75; }

@keyframes pop {
    0% { transform: scale(0.96); filter: blur(0.0px); opacity: 0.6; }
    40% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1.0); opacity: 1; }
}
@keyframes glow {
    0% { opacity: 0; transform: scale(0.98); }
    35% { opacity: 1; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(1.02); }
}

@media (max-width: 980px) {
    .stage { grid-template-columns: 1fr; }
    .result-team { font-size: 44px; }
    .member { font-size: 34px; }
    .topbar { grid-template-columns: 1fr; text-align: left; }
    .session { text-align: left; }
    .meta { justify-content: flex-start; flex-wrap: wrap; }
}