/* ==========================================
   招募表单 — 恶魔契约视觉系
   ========================================== */

/* ── Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Courier New", Courier, monospace, "Microsoft YaHei";
    font-size: 16px;
    line-height: 1.6;
    color: #1a0f02;
    background: #000 url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ── Layout ── */
.page-wrapper {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    position: relative;
    z-index: 2;
}

/* ── 标题 Glitch 特效 ── */
.page-header {
    text-align: center;
    margin-bottom: 36px;
    position: relative;
}

.page-header h1 {
    font-size: 36px;
    font-weight: 900;
    color: #ff0000;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 0 0 20px rgba(255, 0, 0, 0.8);
    margin-bottom: 8px;
    letter-spacing: 4px;
    animation: glitchHeader 3s infinite;
}

.page-header .subtitle {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 8px #ff0000, 1px 1px 3px #000;
    letter-spacing: 1px;
}

@keyframes glitchHeader {
    0%, 94%, 100% { text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 0, 0, 0.8); transform: translate(0,0); }
    95% { text-shadow: -3px 2px 0 #ff0000, 3px -2px 0 #00ffff; transform: translate(-2px, 2px); }
    97% { text-shadow: 4px -1px 0 #ff0000, -4px 2px 0 #00ffff; transform: translate(3px, -1px); }
    99% { text-shadow: -2px -2px 0 #ff0000, 2px 2px 0 #00ffff; transform: translate(-1px, -2px); }
}

/* ── 羊皮纸表单 ── */
.recruit-form {
    background: radial-gradient(circle, #f3e1b6 0%, #cfb37a 75%, #927038 100%);
    border: 5px solid #3d2407;
    border-radius: 2px;
    padding: 36px 32px;
    box-shadow:
        inset 0 0 60px rgba(61, 36, 7, 0.9),
        inset 0 0 20px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(255, 0, 0, 0.4);
    position: relative;
    animation: formBloodGlow 4s ease-in-out infinite alternate;
}

@keyframes formBloodGlow {
    0% { box-shadow: inset 0 0 60px rgba(61, 36, 7, 0.9), 0 0 30px rgba(150, 0, 0, 0.4); border-color: #3d2407; }
    100% { box-shadow: inset 0 0 60px rgba(61, 36, 7, 0.9), 0 0 55px rgba(255, 0, 0, 0.8), inset 0 0 15px rgba(255,0,0,0.2); border-color: #701111; }
}

.field-group {
    margin-bottom: 26px;
}

.field-group label {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: #442403;
    margin-bottom: 8px;
    border-bottom: 2px solid rgba(61, 36, 7, 0.2);
    padding-bottom: 3px;
    letter-spacing: 1px;
}

.required-mark {
    color: #ff0000;
    font-weight: 900;
    text-shadow: 0 0 2px #fff;
    animation: heartBeatMark 0.8s infinite;
    display: inline-block;
}
@keyframes heartBeatMark {
    0%, 100% { transform: scale(1); opacity: 1; text-shadow: 0 0 5px #f00; }
    50% { transform: scale(1.3); opacity: 0.4; text-shadow: none; }
}

.optional-mark {
    color: #6e522f;
    font-size: 12px;
    font-weight: normal;
}

/* ── Inputs ── */
.field-group input,
.field-group textarea,
.field-group select {
    width: 100%;
    padding: 11px 14px;
    font-size: 15px;
    font-family: inherit;
    color: #241402;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid #5c401b;
    border-radius: 0;
    outline: none;
    transition: all 0.2s ease;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
    border-color: #ff0000;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(0,0,0,0.2);
    transform: scale(1.015);
}

.field-group input.input-error,
.field-group textarea.input-error,
.field-group select.input-error {
    border-color: #ff0000 !important;
    background: rgba(255, 100, 100, 0.4) !important;
    animation: glitchShake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes glitchShake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(3px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
    40%, 60% { transform: translate3d(5px, 0, 0); }
}

.field-group input::placeholder,
.field-group textarea::placeholder {
    color: #8c7351;
}

/* ── Select ── */
.field-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* ── Hints ── */
.field-hint { display: block; font-size: 12px; margin-top: 5px; font-weight: bold; }
.tip-hint { color: #594326; }
.char-count { color: #5c401b; text-align: right; font-family: monospace; }
.error-hint { color: #b30000; text-shadow: 0 0 1px rgba(255,255,255,0.5); font-size: 13px; }
.error-hint:empty { display: none; }

/* ── Submit Button ── */
.form-actions { margin-top: 36px; }

.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #2b0000 0%, #800000 45%, #ff0000 50%, #800000 55%, #2b0000 100%);
    background-size: 300% 300%;
    border: 3px solid #000;
    border-radius: 0;
    cursor: pointer;
    letter-spacing: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.8), 0 0 10px rgba(255,0,0,0.5);
    transition: all 0.1s;
    animation: magmaFlow 4s ease infinite, btnPulse 1.5s infinite;
}

@keyframes magmaFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.8), 0 0 10px rgba(255,0,0,0.5); }
    50% { box-shadow: 0 6px 25px rgba(0,0,0,0.9), 0 0 25px #ff0000; transform: scale(1.01); }
}

.btn-primary:hover {
    color: #000;
    border-color: #fff;
    text-shadow: none;
    background: #ff0000;
    animation: violentGlitch 0.15s infinite alternate;
}

@keyframes violentGlitch {
    0% { transform: translate(2px, -2px) skewX(-5deg); box-shadow: -3px 0 #f00, 3px 0 #00f; }
    50% { transform: translate(-1px, 2px) skewX(5deg); box-shadow: 3px 0 #f00, -3px 0 #00f; }
    100% { transform: translate(3px, 1px) skewX(0deg); box-shadow: -2px 0 #f00, 2px 0 #00f; }
}

.btn-primary:active { transform: scale(0.96); }

.btn-primary:disabled {
    background: #222 !important;
    color: #555 !important;
    border-color: #333 !important;
    animation: none !important;
    box-shadow: none !important;
}

.btn-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ff0000;
    border-radius: 50%;
    animation: spin 0.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Form Message ── */
.form-message {
    margin-top: 20px;
    padding: 16px;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    border: 2px solid #000;
}
.form-message.success { background: #003300; color: #00ff00; box-shadow: 0 0 15px #00ff00; }
.form-message.error   { background: #330000; color: #ff0000; box-shadow: 0 0 15px #ff0000; }

/* ==========================================
   视频上传区域
   ========================================== */

.upload-zone {
    position: relative;
    border: 2px dashed #5c401b;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.upload-zone:hover {
    border-color: #ff0000;
    background: rgba(179, 0, 0, 0.08);
    box-shadow: inset 0 0 15px rgba(255,0,0,0.1);
}

.upload-zone.dragover {
    border-color: #ff0000;
    background: rgba(179, 0, 0, 0.12);
}

.upload-zone-icon { margin-bottom: 8px; }
.upload-zone-icon img { width: 40px; height: 40px; }

.upload-zone-text {
    font-size: 15px;
    font-weight: 900;
    color: #a00000;
    text-shadow: 0 0 1px rgba(255,255,255,0.4);
    margin-bottom: 4px;
}

.upload-zone-hint { font-size: 12px; color: #5c401b; font-weight: bold; }

/* ── Icons ── */
.icon-heading {
    width: 24px; height: 24px; vertical-align: -4px;
    filter: sepia(100%) hue-rotate(340deg) brightness(50%) contrast(140%);
}
.icon-btn {
    width: 18px; height: 18px; vertical-align: -3px;
    filter: sepia(100%) hue-rotate(340deg) brightness(50%) contrast(140%);
}
.video-card-icon img {
    width: 24px; height: 24px;
    filter: sepia(100%) hue-rotate(340deg) brightness(50%) contrast(140%);
}
.video-card-remove img {
    width: 14px; height: 14px;
    filter: sepia(100%) hue-rotate(340deg) brightness(50%) contrast(140%);
}

/* ── Video Card ── */
.video-card {
    border: 2px solid #5c401b;
    background: rgba(255,255,255,0.25);
    border-radius: 0;
    padding: 14px 16px;
}

.video-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-card-icon { font-size: 22px; flex-shrink: 0; }

.video-card-name {
    flex: 1;
    font-size: 14px;
    font-weight: 900;
    color: #442403;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.video-card-size { font-size: 12px; color: #5c401b; flex-shrink: 0; }

.video-card-remove {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: 1px solid #5c401b;
    background: rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.video-card-remove:hover,
.video-card-remove:active { background: #ff0000; }

/* ── Progress Bar ── */
.video-progress { margin-top: 12px; }

.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(0,0,0,0.15);
    border: 1px solid #5c401b;
    overflow: hidden;
}

.progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #600000, #ff0000);
    box-shadow: 0 0 8px #f00;
    transition: width 0.3s ease;
}

.progress-fill.complete { background: linear-gradient(90deg, #006000, #00ff00); box-shadow: 0 0 8px #0f0; }
.progress-fill.error    { background: linear-gradient(90deg, #600000, #ff0000); }

.progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.progress-percent { font-size: 14px; font-weight: 900; color: #a00000; }
.progress-info    { font-size: 12px; color: #5c401b; }

/* ── Video Status ── */
.video-status { margin-top: 6px; }
.status-text { font-size: 13px; font-weight: bold; }
.status-text.checking  { color: #8c5a00; }
.status-text.uploading { color: #a00000; }
.status-text.done      { color: #006000; }
.status-text.error     { color: #ff0000; }

/* ==========================================
   社交媒体
   ========================================== */

.social-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.social-row .platform-select {
    width: 110px;
    flex-shrink: 0;
}

.social-row .account-input {
    flex: 1;
    min-width: 0;
}

.btn-remove-social {
    flex-shrink: 0;
    width: 32px; height: 38px;
    border: 1px solid #5c401b;
    background: rgba(0,0,0,0.1);
    color: #5c401b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.btn-remove-social:hover,
.btn-remove-social:active { background: #ff0000; color: #fff; border-color: #ff0000; }

.btn-add-social {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    background: #442403;
    border: 1px solid #000;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.btn-add-social:hover,
.btn-add-social:active { background: #ff0000; color: #000; box-shadow: 0 0 10px #ff0000; }
.btn-add-social:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================
   照片上传
   ========================================== */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.photo-grid:empty { display: none; }

.photo-thumb {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid #442403;
    background: #b0955d;
}

.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }

.photo-thumb-remove {
    position: absolute;
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.photo-thumb-remove:hover,
.photo-thumb-remove:active { background: rgba(255, 0, 0, 0.85); }

.photo-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-add-photo-wrap {
    position: relative;
    display: inline-block;
}
.btn-add-photo-wrap input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.btn-add-photo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    background: #442403;
    border: 1px solid #000;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.btn-add-photo:hover,
.btn-add-photo:active { background: #ff0000; color: #000; box-shadow: 0 0 10px #ff0000; }
.btn-add-photo:disabled { opacity: 0.4; cursor: not-allowed; }

.photo-count-hint { font-size: 13px; color: #5c401b; font-weight: bold; }

.photo-progress { margin-top: 10px; }
.photo-progress .progress-bar { margin-bottom: 4px; }
.photo-progress-fill { background: linear-gradient(90deg, #600000, #ff0000); box-shadow: 0 0 8px #f00; }

/* ==========================================
   封印动画（提交成功时触发）
   ========================================== */

.seal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.seal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.seal-overlay.active::before {
    content: '';
    width: 320px;
    height: 320px;
    border: 4px dashed #ff0000;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 40px #ff0000, inset 0 0 40px #ff0000;
    animation: spinClockwise 4s linear infinite, sealSlamIn 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.seal-overlay.active::after {
    content: '⛧  †  ☠  ⛧  †';
    font-size: 24px;
    letter-spacing: 24px;
    padding-left: 24px;
    color: #ff0000;
    font-weight: 900;
    width: 220px;
    height: 220px;
    border: 2px double #ff0000;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 20px #ff0000;
    white-space: nowrap;
    overflow: hidden;
    animation: spinCounterClockwise 3s linear infinite, sealSlamIn 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes spinClockwise { to { transform: rotate(360deg); } }
@keyframes spinCounterClockwise { to { transform: rotate(-360deg); } }
@keyframes sealSlamIn {
    0% { transform: scale(6); opacity: 0; filter: blur(12px); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 480px) {
    .page-wrapper { padding: 20px 10px 40px; }
    .page-header h1 { font-size: 28px; }
    .recruit-form { padding: 24px 16px; }
    .field-group input,
    .field-group textarea { font-size: 16px; }
    .seal-overlay.active::before { width: 240px; height: 240px; }
    .seal-overlay.active::after  { width: 160px; height: 160px; font-size: 16px; }
}