:root { color-scheme: dark; font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; background: #08070d; color: #fffaf1; }
* { box-sizing: border-box; }
html, body { min-width: 900px; min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at 50% -20%, #3e294b 0, #161120 35%, #07060b 78%); }
button { font: inherit; }
.app-shell { width: min(1540px, 97vw); margin: 0 auto; padding: 14px 0 18px; }
.topbar, footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar { padding: 0 5px 13px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand p { margin: 0 0 2px; color: #b9a5c8; font: 900 9px Arial; letter-spacing: .23em; }
.brand h1 { margin: 0; font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -.065em; }
.brand h1 em { color: #ffd361; font-style: normal; }
.logo-mark { position: relative; display: block; width: 55px; height: 48px; border: 1px solid #6c526f; border-radius: 13px; background: linear-gradient(145deg, #33223e, #120e19); box-shadow: inset 0 0 20px #0005; }
.logo-mark i { position: absolute; top: 8px; width: 14px; height: 25px; background: #fff4d5; box-shadow: 0 5px 13px #0008; }
.logo-mark i:nth-child(1) { left: 9px; transform: rotate(-13deg); }
.logo-mark i:nth-child(2) { left: 21px; top: 11px; transform: rotate(5deg); background: #ffd35f; }
.logo-mark i:nth-child(3) { left: 34px; transform: rotate(15deg); background: #ff6c78; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.mode-badge { margin-right: 5px; color: #c5b8cc; font-size: 11px; font-weight: 800; }
.mode-badge::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #65e59a; box-shadow: 0 0 10px #65e59a; }
button { border: 1px solid #ffffff25; border-radius: 9px; color: white; background: linear-gradient(#302a38, #18151e); cursor: pointer; font-weight: 900; }
.header-actions button { padding: 9px 14px; font-size: 12px; }
.header-actions .icon-button { width: 39px; padding: 9px 0; font-size: 17px; }
button:hover { filter: brightness(1.17); border-color: #ffd35f; }
button:disabled { opacity: .55; cursor: wait; }
.stage { position: relative; overflow: hidden; border: 2px solid #584762; border-radius: 18px; background: #0d1015; box-shadow: 0 28px 90px #000b, inset 0 0 50px #b257bd12; }
#gameCanvas { position: relative; z-index: 2; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
#cameraVideo { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; filter: saturate(.72) contrast(1.15) brightness(.5); transition: opacity .35s; }
.stage.camera-active #cameraVideo { opacity: .48; }
.scanlines { pointer-events: none; position: absolute; z-index: 3; inset: 0; opacity: .13; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); mix-blend-mode: overlay; }
.overlay { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at 50% 46%, #2a1e3877, #07060be8 72%); backdrop-filter: blur(5px); transition: opacity .25s, visibility .25s; }
.overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-card { width: min(950px, 88%); text-align: center; }
.kicker, .result-card > p:first-child { margin: 0 0 12px; color: #ffd25f; font: 900 10px Arial; letter-spacing: .25em; }
.intro-card h2 { margin: 0; font-size: clamp(38px, 4.5vw, 68px); line-height: 1.1; letter-spacing: -.075em; }
.intro-card h2 strong { color: #ff7180; }
.intro-copy { max-width: 700px; margin: 16px auto 22px; color: #c9bdce; font-size: 13px; line-height: 1.75; }
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 650px; margin: 0 auto; }
.mode-card { display: grid; grid-template-columns: 53px 1fr; grid-template-rows: 1fr 1fr; padding: 15px 18px; text-align: left; background: #19151fcc; }
.mode-card.camera-mode { border-color: #ffd35f99; background: linear-gradient(135deg, #503b24, #211820); }
.mode-icon { grid-row: 1 / 3; align-self: center; color: #ffd35f; font-size: 30px; }
.mode-card b { align-self: end; font-size: 16px; }.mode-card small { color: #a99bae; font-size: 10px; }
.howto { display: flex; justify-content: center; gap: 25px; margin-top: 20px; color: #aa9caf; font-size: 10px; font-weight: 800; }
.howto i { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 4px; border-radius: 50%; background: #44374a; color: #ffd35f; font: 900 10px Arial; }
.briefing-card { width: min(1120px, 94%); text-align: center; }
.briefing-card h2 { margin: 0; font-size: clamp(32px, 3.2vw, 52px); letter-spacing: -.065em; }
.briefing-card h2 strong { color: #ff7180; }
.briefing-copy { margin: 8px auto 17px; color: #c9bdce; font-size: 12px; }
.item-guide { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.guide-item { padding: 12px 9px 13px; border: 1px solid #ffffff22; border-radius: 15px; background: linear-gradient(145deg, #271f2eeb, #110e17eb); box-shadow: 0 13px 35px #0007; }
.guide-item img { display: block; width: 96px; height: 120px; margin: -4px auto -2px; object-fit: contain; }
.guide-item h3 { margin: 2px 0 6px; font-size: 14px; }
.guide-item p { margin: 4px 0 0; color: #aa9caf; font-size: 9px; line-height: 1.4; }
.guide-item .effect-badge { display: inline-block; margin: 0; padding: 4px 9px; border-radius: 20px; background: #67d8ff22; color: #8be4ff; font: 1000 10px Arial, sans-serif; }
.guide-item .effect-badge.danger { background: #ff4d6322; color: #ff8494; }.guide-item .effect-badge.time { background: #75f0b122; color: #8ff8c3; }.guide-item .effect-badge.swap-effect { background: #d58cff22; color: #e3b0ff; }
.guide-item.gold { border-color: #ffd44f55; }.guide-item.gold .effect-badge { background: #ffd44f22; color: #ffe16f; }
.guide-item.bomb { border-color: #ff4d6355; }.guide-item.clock { border-color: #75f0b155; }.guide-item.swap { border-color: #d58cff66; }
.briefing-tip { margin: 14px auto 12px; color: #c8bacd; font-size: 10px; font-weight: 800; }.briefing-tip span { margin-right: 7px; padding: 3px 7px; border-radius: 10px; background: #ffd35f; color: #241727; font: 1000 9px Arial; }
.briefing-start { min-width: 300px; }
.result-card { width: 500px; padding: 32px; border: 1px solid #ffd35f77; border-radius: 20px; background: linear-gradient(145deg, #30233a, #100d16); text-align: center; box-shadow: 0 25px 100px #000; }
.winner-medal { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 10px; border: 3px solid #ffda70; border-radius: 50%; background: #ffcf55; color: #26182c; font: 1000 24px Arial; box-shadow: 0 0 40px #ffcd5355; }
.result-card h2 { margin: 4px 0 0; font-size: 38px; letter-spacing: -.05em; }
.final-score { margin: 5px 0; color: #fff; font: 1000 63px Arial; }.final-score span { color: #8e7c95; font-size: 40px; }
.result-detail { margin: 4px 0 21px; color: #baaec1; font-size: 12px; }
.primary-button { padding: 13px 24px; border-color: #ffd35f; color: #211823; background: linear-gradient(#ffe082, #f5b934); font-size: 15px; }
.primary-button small { margin-left: 7px; color: #6b4813; }
.camera-notice { position: absolute; z-index: 7; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 13px; border: 1px solid #ffffff30; border-radius: 30px; background: #0b0911cc; color: #f2e8f4; font-size: 10px; font-weight: 900; }.camera-notice.hidden { display: none; }
footer { padding: 11px 6px 0; color: #998da0; font-size: 10px; } footer div { display: flex; align-items: center; gap: 7px; } footer p { margin: 0; text-align: center; }
kbd { min-width: 29px; padding: 5px 8px; border: 1px solid #6a5b70; border-bottom-width: 3px; border-radius: 6px; background: #211b25; color: #fff; text-align: center; font: 900 12px Arial; }
body:fullscreen .app-shell { width: 100vw; padding: 0; } body:fullscreen .topbar, body:fullscreen footer { display: none; } body:fullscreen .stage { height: 100vh; border: 0; border-radius: 0; } body:fullscreen #gameCanvas { width: 100vw; height: 100vh; object-fit: contain; }
@media (max-width: 1100px) { .mode-badge { display: none; }.intro-card h2 { font-size: 45px; } }