@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root { font-family:'DM Sans','Noto Sans KR',system-ui,sans-serif; color:#f7f5f1; background:#10131b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 91% 12%,#342018 0,transparent 31%),radial-gradient(circle at 3% 85%,#1a2330 0,transparent 36%),#10131b; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.17; background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,#000,transparent 78%); }
button { font-family:inherit; cursor:pointer; }
button:focus-visible { outline:2px solid #ffaf64; outline-offset:3px; }
.app-shell { position:relative; width:min(1300px,100%); min-height:100vh; margin:auto; padding:26px clamp(20px,4vw,56px) 20px; display:flex; flex-direction:column; }
.topbar,.footer { display:flex; justify-content:space-between; align-items:center; }
.topbar { min-height:51px; padding-bottom:19px; border-bottom:1px solid #373b43; }
.brand { display:flex; align-items:center; gap:11px; font-size:10px; font-weight:700; letter-spacing:.17em; color:#9398a2; }
.brand strong { font-size:24px; letter-spacing:-.09em; color:white; line-height:1; }
.brand-divider { height:22px; border-left:1px solid #51545a; margin:0 4px; }
.brand-icon { width:30px; height:30px; position:relative; display:inline-block; }
.brand-icon i { position:absolute; width:17px; height:17px; border:3px solid #f37321; border-radius:50%; }
.brand-icon i:first-child { left:0; top:0; }.brand-icon i:nth-child(2) { left:13px; top:0; opacity:.75; }.brand-icon i:last-child { left:7px; top:12px; opacity:.5; }
.topbar-status,.eyebrow,.panel-head,.hud-label,.screen-top,.screen-bottom,.calc-foot,.game-foot,.footer,.overlay-eyebrow { font-size:10px; letter-spacing:.16em; font-weight:700; }
.topbar-status { color:#a6aab2; white-space:nowrap; }.topbar-version { color:#666b75; }.status-light,.foot-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#f37321; box-shadow:0 0 13px #f37321; margin-right:7px; animation:blink 2s ease-in-out infinite; }
main { flex:1; }
.page-heading { display:flex; justify-content:space-between; align-items:center; padding:42px 0 34px; }
.eyebrow { color:#f37321; }.eyebrow span { color:#777b84; padding:0 5px; }
h1 { margin:12px 0 9px; font-size:clamp(32px,3.9vw,54px); letter-spacing:-.07em; line-height:1.22; }
h1 em { color:#f37321; font-style:normal; }
.page-heading p { margin:0; color:#8f929b; font-size:14px; letter-spacing:-.035em; }
.heading-decoration { display:flex; align-items:center; gap:24px; color:#f37321; opacity:.65; }
.heading-decoration span:first-child { writing-mode:vertical-rl; letter-spacing:.6em; font-size:13px; }
.heading-decoration span:last-child { display:grid; place-items:center; width:82px; height:82px; border:1px solid #8a502e; border-radius:50%; font-size:29px; font-weight:800; box-shadow:0 0 0 12px #f3732109,0 0 0 24px #f3732106; }
.workspace { display:grid; grid-template-columns:minmax(330px,430px) minmax(0,1fr); gap:18px; align-items:stretch; }
.panel { min-width:0; background:linear-gradient(145deg,#222630,#181c25); border:1px solid #353944; border-radius:20px; padding:21px; box-shadow:0 28px 55px #06080d55, inset 0 1px #ffffff0a; }
.panel-head { display:flex; align-items:center; gap:12px; color:#f37321; margin:0 2px 18px; white-space:nowrap; }
.panel-head-line { flex:1; border-top:1px solid #41454d; }.panel-mode { color:#9499a3; font-size:9px; }.panel-mode b { color:#f37321; font-size:8px; }
.calc-screen { height:161px; padding:19px 20px 15px; display:flex; flex-direction:column; align-items:flex-end; overflow:hidden; background:linear-gradient(135deg,#151921,#0c1118); border:1px solid #3a424f; border-radius:12px; box-shadow:inset 0 0 40px #07101d; }
.screen-top,.screen-bottom { width:100%; display:flex; justify-content:space-between; color:#6c7988; font-size:8px; }
.screen-signal,.screen-bottom span:last-child { color:#f37321; letter-spacing:.18em; }
.expression { min-height:22px; margin-top:auto; color:#a5aab2; font-size:13px; font-variant-numeric:tabular-nums; }
.display { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:clamp(40px,4vw,56px); font-weight:700; line-height:1.05; letter-spacing:-.05em; font-variant-numeric:tabular-nums; text-shadow:0 0 22px #f3732135; }
.screen-bottom { margin-top:11px; }
.keys { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:15px; }
.keys button { position:relative; overflow:hidden; min-height:61px; border:1px solid #434850; border-radius:10px; background:#303540; color:#f7f7f8; font-size:21px; font-weight:600; transition:transform .13s,background .15s,border-color .15s,box-shadow .15s; }
.keys button:hover { background:#3c424e; border-color:#767b84; transform:translateY(-2px); }
.keys button:active,.keys button.firing { transform:scale(.94); background:#745039; box-shadow:0 0 22px #f3732180,inset 0 0 0 1px #ff9e59; }
.keys button.firing::after { content:''; position:absolute; inset:50%; border:2px solid #ffad72; border-radius:50%; animation:keyBlast .34s ease-out forwards; }
.keys .utility { background:#3d424d; color:#c4c6ca; font-size:17px; }
.keys .operator { background:#43362f; border-color:#6b4937; color:#ff9a57; font-size:25px; }
.keys .operator:hover { background:#61412e; }
.keys .equals { background:#f37321; border-color:#ff9b5c; color:#161616; font-size:26px; font-weight:800; box-shadow:0 4px 17px #f3732140; }
.keys .equals:hover { background:#ff8b3d; }
.keys .zero { grid-column:span 2; text-align:left; padding-left:28px; }
.calc-foot,.game-foot { display:flex; justify-content:space-between; gap:10px; margin:19px 3px 2px; color:#858a95; font-size:9px; letter-spacing:.08em; }
.calc-foot b,.game-foot b { color:#f37321; }
.game { display:flex; flex-direction:column; }
.game-hud { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.game-hud>div { display:flex; flex-direction:column; gap:4px; min-height:68px; padding:11px 15px; border:1px solid #3c424c; border-radius:9px; background:#161b23; }
.hud-label { color:#7e8996; font-size:9px; }
.game-hud strong { color:#fff; font-size:26px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.game-hud>div:first-child strong { color:#f37321; }
.arena { position:relative; flex:1; min-height:344px; overflow:hidden; border:1px solid #58606e; border-radius:11px; background:radial-gradient(circle at 50% 62%,#212c38 0,#121a26 55%,#0c121c 100%); }
.arena::before { content:''; position:absolute; inset:0; background:linear-gradient(#a7b8c80d 1px,transparent 1px),linear-gradient(90deg,#a7b8c80d 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.arena::after { content:''; position:absolute; width:70%; aspect-ratio:1; border:1px solid #f373211a; border-radius:50%; left:15%; top:8%; box-shadow:0 0 0 55px #f3732106,0 0 0 110px #f3732104; pointer-events:none; animation:radarPulse 5s ease-in-out infinite; }
#gameCanvas { position:relative; display:block; width:100%; height:100%; min-height:344px; z-index:1; cursor:crosshair; touch-action:manipulation; }
.arena-corner { position:absolute; width:16px; height:16px; border-color:#f37321; border-style:solid; z-index:3; pointer-events:none; }
.corner-tl { top:10px; left:10px; border-width:2px 0 0 2px; }.corner-tr { top:10px; right:10px; border-width:2px 2px 0 0; }.corner-bl { bottom:10px; left:10px; border-width:0 0 2px 2px; }.corner-br { bottom:10px; right:10px; border-width:0 2px 2px 0; }
.arena-overlay { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#0b111cbd; backdrop-filter:blur(5px); padding:20px; }
.arena-overlay[hidden] { display:none; }
.overlay-reticle { width:72px; height:72px; display:grid; place-items:center; border:1px solid #f37321; border-radius:50%; box-shadow:0 0 0 10px #f3732117,0 0 24px #f3732138; margin-bottom:24px; animation:targetFloat 3s ease-in-out infinite; }
.overlay-reticle::before,.overlay-reticle::after { content:''; position:absolute; background:#f37321; }.overlay-reticle::before { width:30px; height:1px; }.overlay-reticle::after { width:1px; height:30px; }
.overlay-reticle span { width:10px; height:10px; border-radius:50%; background:#f37321; box-shadow:0 0 16px #f37321; }
.overlay-eyebrow { color:#f37321; font-size:10px; }
.arena-overlay h2 { margin:7px 0 6px; font-size:30px; letter-spacing:-.06em; }
.arena-overlay p { color:#aeb5c0; font-size:13px; line-height:1.7; margin:0 0 20px; }
.start-button { min-width:154px; min-height:43px; border:0; border-radius:7px; background:#f37321; color:#171513; font-size:13px; font-weight:800; box-shadow:0 9px 28px #f3732145; transition:transform .15s,background .15s; }
.start-button:hover { transform:translateY(-2px); background:#ff9148; }.start-button span { font-size:10px; margin-right:7px; }
.game-foot { margin-top:auto; padding-top:16px; }.game-foot .foot-dot { width:6px; height:6px; margin-right:5px; }
.footer { padding-top:25px; margin-top:38px; border-top:1px solid #373b43; color:#666d77; font-size:9px; }.footer b { color:#f37321; font-weight:600; margin-left:12px; }
@keyframes blink { 50% { opacity:.35; box-shadow:0 0 3px #f37321; } }
@keyframes radarPulse { 50% { transform:scale(1.08); opacity:.45; } }
@keyframes targetFloat { 50% { transform:translateY(-7px) rotate(7deg); } }
@keyframes keyBlast { from { inset:50%; opacity:1; } to { inset:-30%; opacity:0; } }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; max-width:630px; margin:auto; }.page-heading { max-width:630px; margin:auto; }.heading-decoration { display:none; }.game { min-height:540px; } }
@media (max-width:540px) { .app-shell { padding:17px 15px; }.brand strong { font-size:21px; }.brand>span:last-child,.topbar-version { display:none; }.brand-divider { display:none; }.page-heading { padding:31px 0 24px; }.page-heading p { font-size:12px; line-height:1.6; }.panel { padding:15px; }.panel-mode { font-size:8px; }.game-hud strong { font-size:22px; }.arena,#gameCanvas { min-height:300px; }.keys button { min-height:58px; }.footer span:last-child { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
.game-feedback { position:absolute; top:17px; left:50%; transform:translateX(-50%); z-index:2; max-width:calc(100% - 42px); padding:7px 12px; border:1px solid #f3732160; border-radius:6px; background:#111923dd; color:#ffc095; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.game-feedback.hit { animation:feedbackHit .45s ease-out; }
.game-feedback.miss { color:#a9c8df; border-color:#87b8d462; animation:feedbackHit .45s ease-out; }
@keyframes feedbackHit { from { transform:translateX(-50%) scale(1.15); box-shadow:0 0 28px #f3732177; } to { transform:translateX(-50%) scale(1); box-shadow:none; } }