:root { color-scheme:light; font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif; --blue:#2563eb; --sky:#0ea5e9; --ink:#172554; --muted:#64748b; --panel:#fff; --line:#cbdcf5; }
* { box-sizing:border-box; }
html { background:#eff6ff; }
body { min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; background:radial-gradient(circle at 15% 0,rgba(147,197,253,.55),transparent 30%),radial-gradient(circle at 90% 15%,rgba(186,230,253,.62),transparent 32%),linear-gradient(180deg,#f8fbff,#eaf3ff); color:var(--ink); }
button { font:inherit; color:inherit; }
.page-shell { width:min(1180px,100%); margin:auto; padding:18px clamp(10px,2.8vw,30px) 30px; }
.game-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:13px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-icon { display:grid; width:48px; height:48px; place-items:center; border:1px solid #93c5fd; border-radius:12px; background:linear-gradient(145deg,#fff,#dbeafe); color:#1d4ed8; font-family:serif; font-size:25px; font-weight:900; box-shadow:0 10px 26px rgba(37,99,235,.16); }
.brand p { margin:0; color:#0284c7; font-size:9px; font-weight:900; letter-spacing:.18em; }
.brand h1 { margin:2px 0 0; color:#172554; font-size:clamp(20px,3vw,28px); line-height:1; letter-spacing:-.045em; }
.brand h1 em { color:#2563eb; font-size:.65em; font-style:normal; font-weight:800; }
.header-actions { position:relative; display:flex; gap:7px; }
.header-actions button { height:40px; border:1px solid #bfdbfe; border-radius:10px; background:rgba(255,255,255,.88); padding:0 13px; color:#1e3a8a; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 5px 14px rgba(37,99,235,.08); }
.header-actions button:first-child { width:40px; padding:0; }
.audio-settings { position:absolute; z-index:80; top:48px; right:0; width:260px; border:1px solid #93c5fd; border-radius:16px; background:rgba(255,255,255,.98); padding:15px; color:#172554; box-shadow:0 18px 50px rgba(30,64,175,.2); backdrop-filter:blur(12px); }
.audio-settings-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.audio-settings-head strong { font-size:14px; }
.audio-settings-head button { width:30px!important; height:30px!important; padding:0!important; border:0!important; background:#eff6ff!important; font-size:20px!important; line-height:1; box-shadow:none!important; }
.audio-settings label { display:flex; justify-content:space-between; align-items:center; margin:10px 1px 5px; color:#334155; font-size:11px; font-weight:800; }
.audio-settings output { color:#2563eb; font-variant-numeric:tabular-nums; }
.audio-settings input[type="range"] { width:100%; height:18px; margin:0; accent-color:#2563eb; cursor:pointer; }
.audio-settings .audio-reset { width:100%; height:34px; margin-top:11px; border:1px solid #bfdbfe; border-radius:9px; background:#eff6ff; color:#1d4ed8; padding:0; font-size:10px; box-shadow:none; }
.game-frame { position:relative; overflow:hidden; width:100%; aspect-ratio:3/2; border:1px solid #93c5fd; border-radius:22px; background:#dbeafe; box-shadow:0 24px 70px rgba(30,64,175,.18),0 0 0 5px rgba(255,255,255,.75); user-select:none; -webkit-user-select:none; touch-action:none; overscroll-behavior:contain; -webkit-tap-highlight-color:transparent; }
.game-frame:fullscreen { width:100vw; height:100vh; border:0; border-radius:0; background:#eff6ff; }
.game-frame:fullscreen canvas { object-fit:contain; }
canvas { display:block; width:100%; height:100%; }
.hud { position:absolute; inset:15px 16px auto; display:grid; grid-template-columns:145px 1fr 145px; align-items:start; gap:16px; pointer-events:none; }
.hud-card { border:1px solid rgba(147,197,253,.85); border-radius:13px; background:rgba(255,255,255,.86); padding:8px 11px; box-shadow:0 8px 22px rgba(37,99,235,.1); backdrop-filter:blur(9px); }
.hud-card.right { text-align:right; }
.hud-card span { display:block; color:#64748b; font-size:8px; font-weight:900; letter-spacing:.08em; }
.hud-card strong { color:#1e3a8a; font-size:20px; letter-spacing:-.04em; }
.hud-card small { margin-left:3px; color:#0284c7; font-size:8px; font-weight:900; }
.hud-center { justify-self:center; width:min(260px,80%); text-align:center; }
.hud-center span { display:inline-block; margin-bottom:5px; border:1px solid #bfdbfe; border-radius:999px; background:rgba(255,255,255,.88); padding:4px 10px; color:#1d4ed8; font-size:8px; font-weight:900; letter-spacing:.08em; }
.danger-track { height:5px; overflow:hidden; border-radius:99px; background:rgba(30,64,175,.12); }
.danger-track i { display:block; width:3%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#38bdf8,#2563eb,#1e3a8a); transition:width .4s; }
.pause-button { position:absolute; z-index:15; right:18px; bottom:17px; display:grid; width:38px; height:38px; place-items:center; border:1px solid #93c5fd; border-radius:50%; background:rgba(255,255,255,.88); color:#1d4ed8; font-weight:900; cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 6px 16px rgba(37,99,235,.14); }
.hidden { display:none!important; }
.overlay { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:radial-gradient(circle,rgba(255,255,255,.84),rgba(219,234,254,.94)); backdrop-filter:blur(5px); }
.overlay.transparent { background:rgba(239,246,255,.64); backdrop-filter:blur(2px); }
.overlay-card { width:min(445px,94%); border:1px solid #93c5fd; border-radius:24px; background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(239,246,255,.98)); padding:clamp(22px,4vw,34px); text-align:center; box-shadow:0 28px 70px rgba(37,99,235,.18); }
.seal { display:grid; width:58px; height:58px; margin:0 auto 12px; place-items:center; border:2px solid #2563eb; border-radius:50%; background:#eff6ff; color:#1d4ed8; font-family:serif; font-size:17px; font-weight:900; line-height:1; transform:rotate(-7deg); }
.kicker { margin:0; color:#0284c7!important; font-size:9px!important; font-weight:900; letter-spacing:.18em; }
.overlay-card h2 { margin:7px 0 0; color:#172554; font-size:clamp(23px,4vw,31px); letter-spacing:-.05em; }
.overlay-card>p { color:#475569; font-size:12px; line-height:1.7; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
.controls div { border:1px solid #d3e3f8; border-radius:13px; background:#f8fbff; padding:10px; }
.controls span,.controls b,.controls small { display:block; }
.controls span { font-size:19px; }
.controls b { margin-top:4px; color:#1e3a8a; font-size:11px; }
.controls small { margin-top:2px; color:#64748b; font-size:8px; }
.primary-button,.secondary-button { width:100%; border-radius:12px; padding:12px; font-weight:900; cursor:pointer; }
.primary-button { border:0; background:linear-gradient(90deg,#0ea5e9,#2563eb); color:#fff; box-shadow:0 10px 25px rgba(37,99,235,.22); }
.primary-button:hover { filter:brightness(1.06); }
.secondary-button { margin-top:7px; border:1px solid #bfdbfe; background:#fff; color:#1e3a8a; }
.tip { display:block; margin-top:11px; color:#64748b; font-size:8px; }
.countdown { color:#1d4ed8; font-size:clamp(80px,18vw,150px); font-weight:1000; text-shadow:0 0 42px rgba(56,189,248,.45); animation:countPulse .72s ease-out; }
@keyframes countPulse { from{opacity:0;transform:scale(1.7)} to{opacity:1;transform:scale(1)} }
.pause-card { width:min(300px,90%); border:1px solid #93c5fd; border-radius:20px; background:#fff; padding:25px; text-align:center; box-shadow:0 24px 60px rgba(37,99,235,.18); }
.pause-card span { color:#0284c7; font-size:9px; font-weight:900; }
.pause-card h2 { margin:4px 0 12px; }
.result-rank { display:inline-block; margin:0!important; border:1px solid #93c5fd; border-radius:99px; background:#eff6ff; padding:5px 12px; color:#1d4ed8!important; font-size:10px!important; font-weight:900; }
.result-time { margin:12px 0 16px; }
.result-time strong { color:#1e3a8a; font-size:55px; line-height:1; letter-spacing:-.06em; }
.result-time span { margin-left:5px; color:#0284c7; font-size:13px; font-weight:900; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }
.result-grid div { border:1px solid #dbeafe; border-radius:11px; background:#f8fbff; padding:9px 5px; }
.result-grid span,.result-grid strong { display:block; }
.result-grid span { color:#64748b; font-size:7px; }
.result-grid strong { margin-top:3px; color:#1e3a8a; font-size:11px; }
.new-record { margin:0 0 10px!important; color:#0369a1!important; font-size:11px!important; font-weight:900; animation:recordGlow 1s ease-in-out infinite alternate; }
@keyframes recordGlow { to{text-shadow:0 0 18px #7dd3fc} }
.joystick { position:absolute; z-index:12; bottom:20px; left:20px; display:none; width:124px; height:124px; place-items:center; touch-action:none; overscroll-behavior:contain; }
.joystick-ring { position:relative; width:96px; height:96px; border:2px solid rgba(37,99,235,.28); border-radius:50%; background:rgba(255,255,255,.58); box-shadow:inset 0 0 25px rgba(37,99,235,.1); backdrop-filter:blur(5px); }
.joystick-knob { position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.8); border-radius:50%; background:linear-gradient(145deg,#38bdf8,#2563eb); box-shadow:0 5px 15px rgba(37,99,235,.25); }
.info-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.info-strip article { display:flex; gap:11px; align-items:center; border:1px solid #c7dcf7; border-radius:14px; background:rgba(255,255,255,.82); padding:13px; box-shadow:0 8px 20px rgba(37,99,235,.06); }
.info-strip article>span { color:#93c5fd; font-size:25px; font-weight:1000; }
.info-strip h2 { margin:0; color:#1e3a8a; font-size:12px; }
.info-strip p { margin:3px 0 0; color:#64748b; font-size:9px; }
footer { padding-top:15px; color:#64748b; font-size:8px; text-align:center; }
@media (pointer:coarse),(max-width:760px) { .joystick{display:grid}.pause-button{bottom:18px}.hud{inset:9px 9px auto;grid-template-columns:105px 1fr 105px;gap:7px}.hud-card{padding:6px 8px}.hud-card strong{font-size:15px}.hud-center{width:85%} }
@media (max-width:620px) { .page-shell{padding:10px 6px 20px}.game-header{padding:0 5px}.header-actions{gap:4px}.header-actions>button{width:36px!important;padding:0!important}.header-actions #fullscreenButton{font-size:0}.header-actions #fullscreenButton::after{content:"⛶";font-size:15px}.audio-settings{position:fixed;top:62px;right:10px;left:10px;width:auto}.brand-icon{width:40px;height:40px}.game-frame{aspect-ratio:2/3;border-radius:17px}.info-strip{grid-template-columns:1fr}.info-strip article{padding:10px 13px}.overlay{padding:10px}.overlay-card{padding:20px 17px}.controls{margin:12px 0}.result-time strong{font-size:45px} }
@media (prefers-reduced-motion:reduce) { *{animation-duration:.01ms!important;transition-duration:.01ms!important} }