/* ============================================
   CRISIS LOVE — retro_arcade 테마
   레트로 게임 UI, 픽셀 보더, 청키 버튼, 아케이드 컬러
   ============================================ */
:root{--primary:#fbbf24;--secondary:#f97316;--bg:#1a1040;--text:#f0e6ff;--card-bg:rgba(251,191,36,0.05);--card-border:rgba(251,191,36,0.2);--card-shadow:4px 4px 0 rgba(0,0,0,0.3);--radius:8px;--font:'Gmarket Sans','Apple SD Gothic Neo',sans-serif;--primary-rgb:251,191,36}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.01) 2px,rgba(255,255,255,0.01) 4px);color:var(--text);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 12px;overflow-x:hidden;position:relative}
#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
#app{position:relative;z-index:1;width:100%;max-width:480px;padding:20px 16px}

/* 프로그레스 — 픽셀 스텝 바 */
.progress-wrap{width:100%;height:12px;background:rgba(251,191,36,0.08);border:2px solid rgba(251,191,36,0.2);border-radius:0;margin-bottom:20px;overflow:hidden;display:none}
.progress-bar{height:100%;width:0%;background:repeating-linear-gradient(90deg,var(--primary) 0,var(--primary) 8px,var(--secondary) 8px,var(--secondary) 16px);border-radius:0;transition:width .3s steps(20)}

.screen{display:none;animation:arcadeIn .3s steps(5)}
.screen.active{display:block}
@keyframes arcadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.hero-img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:0;margin-bottom:16px;display:none;border:3px solid var(--primary);image-rendering:auto}

h1{font-size:1.5em;text-align:center;line-height:1.4;margin-bottom:12px;color:var(--primary);text-shadow:2px 2px 0 rgba(0,0,0,0.5)}
h2{font-size:1.1em;text-align:center;line-height:1.4;margin-bottom:20px;font-weight:500;text-shadow:1px 1px 0 rgba(0,0,0,0.3)}
p{text-align:center;line-height:1.6;margin-bottom:12px;opacity:.85}
.q-emoji{display:block;text-align:center;font-size:2.5em;margin-bottom:8px;animation:bounce .6s ease infinite alternate}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.q-sub{font-size:.82em;opacity:.5;text-align:center}

/* 버튼 — 둥근 형태 */
.btn{display:block;width:100%;padding:16px;font-size:1.05em;font-weight:700;cursor:pointer;border:none;border-radius:50px;margin:24px 0;transition:all .2s ease;font-family:var(--font);text-transform:uppercase;letter-spacing:1px;color:#fff}
.btn-primary{background:#ff0000;box-shadow:0 4px 15px rgba(255,0,0,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,0,0,0.4)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 5px rgba(255,0,0,0.3)}
.btn-secondary{background:#f59e0b;box-shadow:0 4px 15px rgba(245,158,11,0.3)}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,158,11,0.4)}
.btn-outline{background:transparent;border:2px solid #f59e0b;color:#f59e0b;box-shadow:none}
.btn-outline:hover{background:rgba(245,158,11,0.1);transform:translateY(-2px)}
.btn-link{background:rgba(255,255,255,0.1);color:var(--primary);border-radius:50px}

/* 선택지 — 게임 선택창 스타일 */
.choice-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;font-size:.93em;font-weight:600;cursor:pointer;border:2px solid var(--card-border);background:var(--card-bg);color:var(--text);border-radius:0;margin:8px 0;transition:all .1s ease;text-align:left;font-family:var(--font);box-shadow:3px 3px 0 rgba(0,0,0,0.2);position:relative}
.choice-btn::before{content:'▸';position:absolute;left:-20px;opacity:0;color:var(--primary);font-weight:700;transition:all .15s ease}
.choice-btn:hover{border-color:var(--primary);transform:translate(4px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,0.2)}
.choice-btn:hover::before{opacity:1;left:6px}
.choice-btn .choice-icon{font-size:1.3em;flex-shrink:0}
.choice-btn.selected{border-color:var(--primary);background:rgba(251,191,36,0.1);transform:translate(4px,-2px)}

.timer-wrap{display:none;margin-bottom:14px;position:relative;height:20px;background:rgba(0,0,0,0.3);border:2px solid rgba(251,191,36,0.2);overflow:hidden}
.timer-bar{height:100%;background:linear-gradient(90deg,var(--primary),#ef4444);transition:width .1s linear}
.timer-wrap span{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:.7em;font-weight:700;text-shadow:1px 1px 0 rgba(0,0,0,0.5)}

.result-label{font-size:.7em;text-transform:uppercase;letter-spacing:3px;opacity:.5;text-align:center;margin-bottom:4px;color:var(--primary)}
.result-title{font-size:1.5em;text-align:center;color:var(--primary);text-shadow:2px 2px 0 rgba(0,0,0,0.4);background:none;-webkit-text-fill-color:var(--primary);line-height:1.4}
.result-subtitle{font-size:.9em;opacity:.6;text-align:center}
.result-desc{font-size:.93em;text-align:center;line-height:1.7}
.tags-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0}
.tag{padding:3px 10px;font-size:.72em;font-weight:700;background:rgba(251,191,36,0.1);color:var(--primary);border:2px solid rgba(251,191,36,0.25);border-radius:0}
details{margin:16px 0;text-align:left;border:2px solid rgba(251,191,36,0.15);background:rgba(0,0,0,0.15)}
details summary{cursor:pointer;font-weight:700;padding:10px 12px;opacity:.7;font-size:.88em;color:var(--primary)}
details p{padding:8px 12px 12px;font-size:.87em;line-height:1.7}
#radar-chart{display:block;margin:20px auto}
.compat-box{padding:12px;background:rgba(251,191,36,0.05);border:2px solid rgba(251,191,36,0.12);margin:16px 0;font-size:.85em;text-align:center}
.loader{width:40px;height:40px;border:4px solid rgba(251,191,36,.1);border-top-color:var(--primary);border-radius:0;animation:spinSquare .8s steps(8) infinite;margin:50px auto 20px}
@keyframes spinSquare{to{transform:rotate(360deg)}}
#screen-loading h2{text-align:center;margin-top:16px;color:var(--primary)}
#recovery-banner{display:none;background:rgba(251,191,36,0.08);color:var(--primary);padding:12px;text-align:center;font-size:.82em;font-weight:700;cursor:pointer;margin-bottom:16px;border:2px solid rgba(251,191,36,0.2)}
.pulse{animation:arcadePulse 1s steps(3) infinite}
@keyframes arcadePulse{0%,100%{box-shadow:0 4px 0 #b45309}50%{box-shadow:0 4px 0 #b45309,0 0 16px rgba(251,191,36,0.4)}}
@keyframes shake{0%,100%{transform:translate(3px,-2px)}25%{transform:translate(-6px,2px)}50%{transform:translate(6px,-4px)}75%{transform:translate(-3px,4px)}}
@keyframes glow{0%{box-shadow:3px 3px 0 rgba(0,0,0,.2)}50%{box-shadow:3px 3px 0 rgba(0,0,0,.2),0 0 20px rgba(251,191,36,.3)}100%{box-shadow:3px 3px 0 rgba(0,0,0,.2)}}
@keyframes confettiBurst{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes flash{0%{filter:brightness(1)}50%{filter:brightness(2) saturate(2)}100%{filter:brightness(1)}}
.react-shake{animation:shake .4s steps(4)}.react-glow{animation:glow .5s ease}.react-confetti{animation:confettiBurst .3s steps(3)}.react-flash{animation:flash .2s steps(2)}
.mood-tense #app{filter:contrast(1.1)}.mood-dramatic #app{filter:saturate(1.2)hue-rotate(5deg)}.mood-mysterious{}.mood-playful #app{filter:brightness(1.05)}