:root {
    --primary-color: #00d2ff;
    --break-color: #ffde3e;
    --hold-color: #ff9d00;
    --tap-color: #ff3c7b;
    --star-color: #00e5ff; 
    --touch-color: #4a90e2; 
    --sync-color: #ffd700;
    --bg-dark: #000;
    --ring-size: 85vmin; 
}

body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: var(--bg-dark); color: white; font-family: 'Open Sans', sans-serif; overflow: hidden; }
#app { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

/* 选歌与加载界面 */
.song-select { text-align: center; background: rgba(15, 15, 20, 0.95); padding: 30px; border-radius: 20px; box-shadow: 0 0 40px rgba(0, 210, 255, 0.4); border: 1px solid #444; width: 90%; max-width: 500px;}
.song-select h1 { color: var(--primary-color); margin-top: 0;}
.song-list { max-height: 200px; overflow-y: auto; border: 1px solid #333; border-radius: 8px; padding: 10px; margin-bottom: 20px; background: #000; }
.song-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #222; }
.song-item:last-child { border-bottom: none; }
.song-info { display: flex; flex-direction: column; text-align: left; }
.song-info strong { font-size: 16px; color: #fff; }
.song-info span { font-size: 12px; color: #888; }
.custom-input-box { display: flex; gap: 10px; margin-bottom: 20px; }
.custom-input-box input { flex: 1; padding: 10px; border-radius: 5px; border: 1px solid #444; background: #111; color: white; }
.zip-upload-box { border-top: 1px dashed #444; padding-top: 15px; }
.zip-btn { display: inline-block; background: #4a90e2; width: 100%; padding: 15px; box-sizing: border-box;}

.difficulty-select-overlay { text-align: center; background: rgba(15, 15, 20, 0.95); padding: 30px; border-radius: 20px; box-shadow: 0 0 40px rgba(0, 210, 255, 0.4); border: 1px solid #444; position: absolute; z-index: 150; max-height: 90vh; overflow-y: auto; }
.difficulty-select-overlay h1 { margin-top: 0; font-size: 1.5em; color: var(--primary-color);}
.btn { padding: 12px 24px; font-size: 16px; background-color: var(--primary-color); color: #000; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
.diff-btn-group { display: flex; flex-direction: column; gap: 8px; }
.diff-btn { width: 300px; justify-content: space-between; display: flex; margin: 0 auto; }
.mini-btn { padding: 4px 10px; background: #444; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }

.settings-control { background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 12px; margin: 15px 0; text-align: left; }
.settings-control h3 { margin: 0 0 15px 0; font-size: 16px; color: #aaa; text-align: center; }
.setting-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.setting-row label { width: 100px; font-size: 0.9em; }
.setting-row input[type=range] { flex-grow: 1; cursor: pointer; }
.setting-row span { width: 45px; text-align: right; font-family: monospace; }
.offset-inputs { display: flex; align-items: center; gap: 8px; }
.manual-input { width: 60px; padding: 5px; font-size: 14px; text-align: center; border-radius: 5px; background: #000; color: #fff; border: 1px solid #666; }

.loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 200; gap: 15px; }

/* 暂停遮罩 */
.pause-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 300; /* 最高层级 */
}
.pause-overlay h1 { color: var(--primary-color); font-size: 3rem; letter-spacing: 5px; margin-bottom: 30px;}

/* 游玩区 */
.play-field-container { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.bg-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; filter: blur(10px) brightness(0.3); z-index: 0; }
.ui-layer { position: absolute; width: 100%; height: 100%; z-index: 100; pointer-events: none; }
.top-bar { position: absolute; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; width: calc(100% - 40px); top: 0; }
.ui-layer button { pointer-events: auto; }
.song-info-display { background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 5px; }

/* 核心圈 (移除了原有的纯圆边框) */
.maimai-ring { position: relative; width: var(--ring-size); height: var(--ring-size); border-radius: 50%; z-index: 10; pointer-events: none; }
.notes-container, .effects-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* 新增的 SVG 16 边形轨道渲染 */
.slide-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; }
.judgment-polygon { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.6; fill: none; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); }

/* Slide SVG 跑马灯 */
@keyframes slideFlow { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
.slide-path { stroke: var(--star-color); stroke-width: 1.5; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--star-color)); stroke-dasharray: 6 6; animation: slideFlow 0.3s linear infinite; }
.sensor { position: absolute; width: 8vmin; height: 8vmin; background: transparent; border: 0.6vmin solid rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%);}

/* ================= 基础音符样式 ================= */
.note-tap, .note-star, .note-slide-star, .note-hold-head, .note-hold-tail {
    position: absolute; width: 8vmin; height: 8vmin; background-color: transparent; border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #fff 35%, transparent 40%); box-sizing: border-box;
}

.note-tap { border: 1.5vmin solid var(--tap-color); box-shadow: 0 0 15px var(--tap-color), inset 0 0 10px var(--tap-color); z-index: 20; }
.note-break { position: absolute; width: 9.5vmin; height: 9.5vmin; background-color: transparent; border: 1.8vmin solid var(--break-color); border-radius: 50%; background: radial-gradient(circle, #fff 0%, #fff 40%, transparent 45%); box-shadow: 0 0 25px var(--break-color), inset 0 0 12px var(--break-color); z-index: 25; box-sizing: border-box; }

.note-star { border: 1.5vmin solid var(--star-color); box-shadow: 0 0 15px var(--star-color), inset 0 0 10px var(--star-color); z-index: 26; display: flex; justify-content: center; align-items: center; }
.star-icon { color: rgba(0, 0, 0, 0.5); font-size: 3.5vmin; transform: rotate(180deg); }

.note-slide-star {
    border: 1.5vmin solid var(--star-color); box-shadow: 0 0 20px var(--star-color), inset 0 0 10px var(--star-color);
    display: flex; justify-content: center; align-items: center; z-index: 27; 
}
.slide-arrow { position: absolute; top: -3.5vmin; font-size: 3vmin; color: #fff; text-shadow: 0 0 5px var(--star-color); animation: pulseArrow 0.5s infinite alternate; }
@keyframes pulseArrow { from { opacity: 0.5; transform: translateY(0); } to { opacity: 1; transform: translateY(-5px); } }

/* Hold */
.note-hold-head, .note-hold-tail { border: 1.5vmin solid var(--hold-color); box-shadow: 0 0 15px var(--hold-color), inset 0 0 10px var(--hold-color); z-index: 21; }
.note-hold-body { background: linear-gradient(to top, rgba(255, 157, 0, 0.3), rgba(255, 157, 0, 0.8)); border-radius: 2.5vmin; z-index: 19; box-shadow: 0 0 10px var(--hold-color); }

/* ================= 高级还原的 TOUCH UI ================= */
.note-touch-wrapper { position: absolute; width: 10vmin; height: 10vmin; z-index: 22; display: flex; justify-content: center; align-items: center;}

.touch-shrink { position: absolute; width: 12.5vmin; height: 12.5vmin; transform: rotate(45deg); }
.bracket { position: absolute; width: 3.5vmin; height: 3.5vmin; border: 0.6vmin solid var(--touch-color); box-shadow: 0 0 8px var(--touch-color), inset 0 0 8px var(--touch-color); }
.bracket.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }

.touch-core-layer { position: absolute; width: 7.5vmin; height: 7.5vmin; display: flex; justify-content: center; align-items: center; }

.touch-diamond { position: absolute; width: 100%; height: 100%; transform: rotate(45deg); box-sizing: border-box; }
.touch-diamond.outer { border: 0.8vmin solid var(--touch-color); background: rgba(0, 136, 255, 0.4); box-shadow: 0 0 15px var(--touch-color), inset 0 0 10px var(--touch-color); }
.touch-diamond.inner { width: 70%; height: 70%; border: 0.4vmin solid #fff; opacity: 0.8; }

.touch-arrows { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.touch-arrows i { position: absolute; color: #fff; font-size: 1.5vmin; text-shadow: 0 0 5px var(--touch-color); }
.arrow-top { top: 3%; } .arrow-bottom { bottom: 3%; } .arrow-left { left: 3%; } .arrow-right { right: 3%; }
.touch-center-cross { position: absolute; width: 1.5vmin; height: 1.5vmin; background: #fff; transform: rotate(45deg); box-shadow: 0 0 5px var(--touch-color); }

/* Touch Hold 被按压阶段的颜色更替 */
.touch-core-layer.hold .touch-diamond.outer { border-color: var(--hold-color); background: rgba(255, 157, 0, 0.3); box-shadow: 0 0 15px var(--hold-color), inset 0 0 10px var(--hold-color); }
.touch-core-layer.hold .touch-arrows i { text-shadow: 0 0 5px var(--hold-color); }
.touch-core-layer.hold .touch-center-cross { box-shadow: 0 0 5px var(--hold-color); }
.touch-hold-progress { position: absolute; width: 68%; height: 68%; background: var(--hold-color); opacity: 0.9; z-index: 1; transform-origin: center; box-shadow: 0 0 10px var(--hold-color); }

/* SYNC 黄金多压 */
.sync { border-color: var(--sync-color) !important; box-shadow: 0 0 15px var(--sync-color), inset 0 0 10px var(--sync-color) !important; }
.touch-core-layer.sync .touch-diamond.outer { border-color: var(--sync-color); box-shadow: 0 0 15px var(--sync-color); }
.touch-shrink.sync .bracket { border-color: var(--sync-color); box-shadow: 0 0 8px var(--sync-color); }

/* 打击特效 */
@keyframes hitExpand { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; border-width: 2vmin; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; border-width: 0vmin; } }
@keyframes hitTouchExpand { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(1); opacity: 1; border-width: 2vmin; } 100% { transform: translate(-50%, -50%) rotate(45deg) scale(2.0); opacity: 0; border-width: 0vmin; } }

.hit-effect { position: absolute; width: 8vmin; height: 8vmin; border-radius: 50%; box-sizing: border-box; z-index: 30; pointer-events: none; animation: hitExpand 0.3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.hit-effect.TAP, .hit-effect.STAR { border: solid var(--tap-color); }
.hit-effect.BREAK { width: 10vmin; height: 10vmin; border: solid var(--break-color); animation-duration: 0.4s; }
.hit-effect.TOUCH, .hit-effect.TOUCH_HOLD, .hit-effect.TOUCH_HOLD_START { border: solid var(--touch-color); border-radius: 20%; animation: hitTouchExpand 0.25s ease-out forwards; }
.hit-effect.sync { border-color: var(--sync-color) !important; }


/* ================= 初始声明弹窗样式 ================= */
.notice-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 保证在最顶层 */
}

.notice-box {
    background: rgba(20, 20, 25, 0.95);
    border: 1px solid #444;
    padding: 30px;
    border-radius: 15px;
    width: 85%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 210, 255, 0.2);
    animation: popIn 0.3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.notice-box h2 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.notice-text {
    text-align: left;
    line-height: 1.6;
    margin: 20px 0;
    color: #ccc;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
}

.notice-options {
    margin: 15px 0 20px 0;
    text-align: left;
}

.notice-options label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #aaa;
    width: fit-content;
}

.notice-options input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}