/* ========================================================================
   纸偶剧场风格 - 主样式
   ======================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --c-bg-stage: #fdf6e3;
    --c-bg-paper: #fffef7;
    --c-text-primary: #3e2723;
    --c-text-secondary: #5d4037;
    --c-text-tertiary: #8d6e63;
    --c-brand-blue: #5b9bd5;
    --c-brand-purple: #9c7cec;
    --c-brand-orange: #f0853b;
    --c-brand-gold: #c8960c;
    --c-brand-red: #d9534f;
    --c-brand-green: #5cb85c;
    --paper-border: #d9c9a5;
    --paper-shadow-sm: 0 1px 3px rgba(139,90,43,0.12);
    --paper-shadow-md: 0 3px 8px rgba(139,90,43,0.18);
    --paper-shadow-lg: 0 6px 20px rgba(139,90,43,0.25);
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;
    --tap-min: 44px;
    --z-canvas: 100; --z-top: 9999;
}

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    overflow: hidden; background: #000;
}

/* PC端竖屏居中 */
@media (min-width: 768px) {
    body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2a2a2a; }
    .app-container { width: min(450px,100vw) !important; height: 95vh !important; max-width: 450px; position: relative !important; box-shadow: 0 0 40px rgba(0,0,0,0.5); border-radius: 12px; overflow: hidden; }
}

/* 场景 */
.app-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.scene-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.scene { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; animation: fadeIn 0.5s ease-out forwards; }

@keyframes fadeIn { to { opacity: 1; } }

/* 背景图 */
.scene-bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    z-index: 0; filter: brightness(1.05) contrast(0.95);
}

/* Canvas */
.particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }

/* 竖屏提示 */
.rotate-tip {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); display: none; flex-direction: column;
    justify-content: center; align-items: center; z-index: 9999; color: #fff;
}
.rotate-tip.show { display: flex; }
.rotate-icon { font-size: 80px; margin-bottom: 20px; animation: rotateWiggle 2s ease-in-out infinite; }
@keyframes rotateWiggle { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(90deg)} }
.rotate-tip p { font-size: 18px; text-align: center; }

/* Loading */
.loading-screen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--c-bg-stage); display: flex; justify-content: center; align-items: center;
    z-index: 99999; transition: opacity 0.5s;
}
.loading-screen.hidden { opacity: 0; pointer-events: none; }

/* Paper cards */
.paper-card {
    background: var(--c-bg-paper); border: 2px solid var(--paper-border);
    border-radius: var(--r-lg); box-shadow: var(--paper-shadow-md); padding: 16px;
}
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px; font-size: 15px; font-weight: 500;
    color: var(--c-text-primary); background: var(--c-bg-paper);
    border: 2px solid var(--paper-border); border-radius: var(--r-lg);
    box-shadow: var(--paper-shadow-md); cursor: pointer;
    transition: all 0.2s; min-height: var(--tap-min);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--paper-shadow-lg); }
.btn:active { transform: translateY(0); box-shadow: var(--paper-shadow-sm); }
.btn-primary { background: var(--c-brand-orange); border-color: var(--c-brand-orange); color: white; }

.text-display { letter-spacing: 0.15em; }

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