/* ============================================================
 *  注册流程：滑块验证码 / 加载遮罩 / 庆祝弹窗
 *  ============================================================ */

/* ---- 通用全屏遮罩 ---- */
.reg-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 12, 22, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: regFade 0.25s ease;
}
.reg-overlay.show { display: flex; }
@keyframes regFade { from {opacity:0;} to {opacity:1;} }

.reg-modal {
    background: linear-gradient(160deg, #1a1f2e 0%, #0f1420 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6),
                0 0 30px rgba(212,175,55,0.08) inset;
    color: #e8e4d8;
    max-width: 92vw;
    animation: regSlideIn 0.3s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes regSlideIn {
    from { opacity:0; transform: translateY(12px) scale(.96); }
    to   { opacity:1; transform: translateY(0)    scale(1); }
}
.reg-modal h3 {
    margin: 0 0 8px;
    font-family: "Noto Serif SC", serif;
    font-weight: 700;
    font-size: 18px;
    color: #d4af37;
    text-align: center;
}
.reg-modal .reg-sub {
    text-align: center;
    color: #a8a094;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ============================================================
 *  滑块验证码
 *  ============================================================ */
.cap-wrap {
    width: 320px;
    user-select: none;
}
.cap-canvas-wrap {
    position: relative;
    width: 320px;
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    background: #0a0e16;
}
.cap-canvas-wrap canvas { display: block; }
.cap-piece {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.cap-refresh {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(212,175,55,0.4);
    color: #d4af37;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.3s;
}
.cap-refresh:hover { transform: rotate(90deg); }

.cap-track {
    position: relative;
    margin-top: 14px;
    height: 40px;
    background: #1a1f2e;
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 22px;
    overflow: hidden;
}
.cap-track-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a6558;
    font-size: 13px;
    pointer-events: none;
}
.cap-track-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(212,175,55,0.25), rgba(212,175,55,0.5));
    transition: none;
}
.cap-track.success .cap-track-fill {
    background: linear-gradient(90deg, rgba(80,180,120,0.4), rgba(80,180,120,0.65));
}
.cap-track.fail .cap-track-fill {
    background: linear-gradient(90deg, rgba(200,80,80,0.4), rgba(200,80,80,0.65));
}
.cap-slider {
    position: absolute;
    top: 1px; left: 1px;
    width: 38px; height: 36px;
    background: linear-gradient(180deg, #2a2f40, #1a1f2e);
    border: 1px solid rgba(212,175,55,0.5);
    border-radius: 18px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: background 0.2s;
}
.cap-slider:hover { background: linear-gradient(180deg, #353b50, #20253a); }
.cap-slider:active { cursor: grabbing; }
.cap-track.success .cap-slider { color: #5acb89; border-color: rgba(80,180,120,0.6); }
.cap-track.fail .cap-slider    { color: #e07b7b; border-color: rgba(200,80,80,0.6); }

.cap-msg {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    min-height: 16px;
    color: #a8a094;
}
.cap-msg.error   { color: #e07b7b; }
.cap-msg.success { color: #5acb89; }

/* ============================================================
 *  加载（注册中）
 *  ============================================================ */
.reg-loading {
    text-align: center;
    padding: 8px 0;
    width: 280px;
}
.reg-spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border: 3px solid rgba(212,175,55,0.18);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: regSpin 0.9s linear infinite;
}
@keyframes regSpin { to { transform: rotate(360deg); } }
.reg-loading-text {
    font-family: "Noto Serif SC", serif;
    color: #d4af37;
    font-size: 15px;
    letter-spacing: 0.1em;
}
.reg-loading-text::after {
    content: '';
    animation: regDots 1.4s steps(4, end) infinite;
}
@keyframes regDots {
    0%   { content: ''; }
    25%  { content: '·'; }
    50%  { content: '··'; }
    75%  { content: '···'; }
    100% { content: ''; }
}

/* ============================================================
 *  注册成功 — 庆祝弹窗
 *  ============================================================ */
.reg-success { width: 320px; text-align: center; padding: 4px 0; }
.reg-success-emblem {
    width: 76px; height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f4d160 0%, #d4af37 50%, #8e6d20 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #1a1208;
    box-shadow: 0 0 32px rgba(212,175,55,0.5),
                0 4px 12px rgba(0,0,0,0.4);
    animation: regPulse 1.6s ease-in-out infinite;
}
@keyframes regPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(212,175,55,0.4), 0 4px 12px rgba(0,0,0,0.4); }
    50%      { box-shadow: 0 0 38px rgba(212,175,55,0.7), 0 4px 12px rgba(0,0,0,0.4); }
}
.reg-success h3 {
    color: #d4af37;
    font-size: 22px;
    margin: 0 0 6px;
    font-family: "Noto Serif SC", serif;
}
.reg-success .reg-success-acc {
    margin: 14px 0;
    padding: 10px 14px;
    background: rgba(212,175,55,0.08);
    border: 1px dashed rgba(212,175,55,0.35);
    border-radius: 6px;
    font-family: "Noto Serif SC", serif;
}
.reg-success .reg-success-acc-label {
    font-size: 12px;
    color: #a8a094;
    margin-bottom: 4px;
}
.reg-success .reg-success-acc-name {
    font-size: 18px;
    color: #e8e4d8;
    letter-spacing: 0.08em;
    word-break: break-all;
}
.reg-success .reg-gift {
    font-size: 13px;
    color: #d4af37;
    margin: 10px 0 18px;
}
.reg-success .reg-gift::before { content: '🎁  '; }
.reg-success-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.reg-success-actions a, .reg-success-actions button {
    flex: 1;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid rgba(212,175,55,0.4);
    background: transparent;
    color: #d4af37;
    text-decoration: none;
    text-align: center;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.reg-success-actions a.primary {
    background: linear-gradient(180deg, #d4af37, #a88420);
    color: #1a1208;
    border-color: #d4af37;
    font-weight: 600;
}
.reg-success-actions a:hover, .reg-success-actions button:hover {
    background: rgba(212,175,55,0.15);
}
.reg-success-actions a.primary:hover {
    background: linear-gradient(180deg, #e6c44d, #b8932a);
}

/* 移动端适配 */
@media (max-width: 480px) {
    .reg-modal { padding: 22px 18px; }
    .cap-wrap, .cap-canvas-wrap, .reg-success { width: 280px; }
    .cap-canvas-wrap { width: 280px; height: 140px; }
}