/* 우주비행(flyspace) UI */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#03050c; font-family:'Noto Sans KR','Malgun Gothic',sans-serif; color:#eaf2ff; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
#fs-root { position:fixed; inset:0; background:#000; }
canvas { display:block; touch-action:none; }
#fs-credit { position:absolute; left:8px; bottom:6px; z-index:12; font-size:10px; color:#9fb3c8cc; pointer-events:none; text-shadow:0 1px 2px #000; }

/* 로딩 */
#fs-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, #131c3d, #03050c); z-index:50; }
#fs-loading .spin { width:54px; height:54px; border:4px solid #24406e; border-top-color:#8a6cff; border-radius:50%; animation:fsspin 1s linear infinite; }
#fs-loading .msg { margin-top:16px; color:#b9a8ff; font-size:15px; }
@keyframes fsspin { to { transform:rotate(360deg); } }

/* 상단 HUD */
#fs-hud { position:absolute; top:0; left:0; right:0; padding:10px 14px; display:flex; align-items:center; gap:10px; z-index:20; pointer-events:none;
  background:linear-gradient(#00030a99, transparent); }
#fs-hud .pill { background:#100b30cc; border-radius:20px; padding:6px 12px; font-size:13px; font-weight:600; backdrop-filter:blur(4px); border:1px solid #4a3f8e; }
#fs-hud .pill.ok { border-color:#3ec27f; color:#8ef0b8; }
#fs-hud .grow { flex:1; }
#fs-hud button { pointer-events:auto; }
.fs-btn { pointer-events:auto; background:#2a1b5fcc; border:1px solid #6b57c9; color:#eaf2ff; border-radius:20px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; }
.fs-btn:active { transform:scale(.96); }
.fs-btn.green { background:#1a5c3acc; border-color:#3ec27f; }
.fs-btn.gold { background:#6b551acc; border-color:#e3c071; }

/* 하단 안내/속도 */
#fs-bottom { position:absolute; left:0; right:0; bottom:0; padding:10px 14px 14px; z-index:15; pointer-events:none; display:flex; align-items:flex-end; gap:10px; }
#fs-speed { pointer-events:none; font-size:12px; color:#cfc4ff; background:#100b30aa; border:1px solid #4a3f8e; border-radius:12px; padding:6px 10px; }

/* 모바일 조종기 */
#fs-touch { position:absolute; inset:0; z-index:16; display:none; pointer-events:none; }
#fs-touch.on { display:block; }
.fs-stick { position:absolute; bottom:26px; left:20px; width:132px; height:132px; border-radius:50%; background:#140f36aa; border:2px solid #6b57c9aa; pointer-events:auto; touch-action:none; }
.fs-stick .knob { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:#5a3fc9cc; border:2px solid #c7b6ff; }
.fs-stick .lbl { position:absolute; left:0; right:0; top:-22px; text-align:center; font-size:11px; color:#b9a8ff; }
#fs-throttle { position:absolute; right:24px; bottom:170px; display:flex; flex-direction:column; gap:8px; pointer-events:auto; }
#fs-throttle button { width:52px; height:44px; border-radius:12px; background:#2a1b5fdd; border:1px solid #6b57c9; color:#eaf2ff; font-size:18px; font-weight:800; }
#fs-boost { background:#6b551add !important; border-color:#e3c071 !important; }

/* ➤ 네비 마커 */
#fs-nav { position:absolute; z-index:18; transform:translate(-50%,-50%); pointer-events:none; text-align:center; }
#fs-nav .arr { display:inline-block; font-size:26px; color:#7fe0ff; text-shadow:0 0 10px #2af, 0 1px 3px #000; }
#fs-nav .txt { display:block; margin-top:2px; font-size:11px; font-weight:700; color:#cfeaff; background:#0b183099; border:1px solid #39c8ff66; border-radius:10px; padding:2px 8px; white-space:nowrap; text-shadow:0 1px 2px #000; }

/* 자동항법 활성 표시 */
.fs-btn.act { background:#1a5c3acc; border-color:#3ec27f; box-shadow:0 0 10px #3ec27f66; }

/* 우주 지도 화면 */
#fs-globe { position:absolute; inset:0; z-index:30; display:none; pointer-events:none; }
#fs-globe.on { display:block; }
#fs-place-card, #fs-place-card * { pointer-events:auto; }
#fs-globe .title { position:absolute; top:14px; left:0; right:0; text-align:center; font-size:18px; font-weight:800; text-shadow:0 2px 8px #000; pointer-events:none; }
#fs-globe .hint { position:absolute; top:44px; left:0; right:0; text-align:center; font-size:12px; color:#b9a8ff; pointer-events:none; }
#fs-place-card { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:min(92vw,430px); background:#100b30ee; border:1px solid #6b57c9; border-radius:16px; padding:14px 16px; display:none; box-shadow:0 8px 30px #000a; }
#fs-place-card.on { display:block; }
#fs-place-card h3 { margin:0 0 4px; font-size:18px; }
#fs-place-card .country { font-size:12px; color:#a99bee; }
#fs-place-card .fact { font-size:13px; color:#dcd2ff; margin:8px 0 12px; line-height:1.5; }
#fs-place-card .row { display:flex; gap:8px; align-items:center; }
#fs-place-card .visited { font-size:11px; color:#3ec27f; margin-left:auto; }

/* 1인칭 조종석 오버레이 */
#fs-cockpit { position:absolute; inset:0; z-index:14; display:none; pointer-events:none; }
#fs-cockpit.on { display:block; }
#fs-cockpit .strut-l, #fs-cockpit .strut-r { position:absolute; top:-12%; bottom:22%; width:34%; }
#fs-cockpit .strut-l { left:-14%; background:linear-gradient(105deg, #0b0e1af2 58%, #1c2340cc 62%, transparent 66%); }
#fs-cockpit .strut-r { right:-14%; background:linear-gradient(-105deg, #0b0e1af2 58%, #1c2340cc 62%, transparent 66%); }
#fs-cockpit .dash { position:absolute; left:0; right:0; bottom:0; height:13%; background:linear-gradient(#141a30ee, #05070ff8); border-top:3px solid #3a4a80; box-shadow:0 -8px 30px #0009; }
#fs-cockpit .dash .lights { position:absolute; top:10px; left:0; right:0; text-align:center; font-size:12px; color:#7fe0ff; letter-spacing:2px; text-shadow:0 0 8px #2af; }
#fs-cockpit .top { position:absolute; top:0; left:0; right:0; height:7%; background:linear-gradient(#0b0e1af6, transparent); }
#fs-cockpit .vign { position:absolute; inset:0; box-shadow:inset 0 0 140px #000c; }

/* 엽서(도착 보상) */
#fs-postcard { position:absolute; inset:0; z-index:40; display:none; align-items:center; justify-content:center; background:#000b; }
#fs-postcard.on { display:flex; }
.fs-card { width:min(92vw,460px); background:#0d1024; color:#e8ecff; border:1px solid #4a3f8e; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px #000c; transform:rotate(-1.2deg); }
.fs-card .photo { width:100%; height:230px; object-fit:cover; background:#0a0d20; display:block; }
.fs-card .photo-fallback { width:100%; height:230px; display:flex; align-items:center; justify-content:center; font-size:15px; color:#99a; background:linear-gradient(135deg,#141a3a,#221647); }
.fs-card .body { padding:14px 16px 16px; }
.fs-card .stamp { float:right; border:2px dashed #e3c071; color:#e3c071; font-size:11px; font-weight:800; padding:6px 8px; border-radius:6px; transform:rotate(6deg); }
.fs-card h2 { margin:0 0 2px; font-size:22px; }
.fs-card .c { color:#a9b0d8; font-size:13px; }
.fs-card .f { margin:10px 0 4px; font-size:14px; line-height:1.55; color:#cdd4f5; }
.fs-card .credit { font-size:10px; color:#7d84ab; margin-top:8px; }
.fs-card .acts { display:flex; gap:8px; padding:0 16px 16px; }
.fs-card .acts button { flex:1; padding:11px; border:0; border-radius:10px; font-weight:800; font-size:14px; cursor:pointer; }
.fs-card .acts .next { background:#6d4ae3; color:#fff; }
.fs-card .acts .stay { background:#232a4d; color:#cdd4f5; }

/* 모달 */
#fs-modal { position:absolute; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:#000c; }
#fs-modal.on { display:flex; }
.fs-modal-box { width:min(92vw,400px); background:#12102c; border:1px solid #6b57c9; border-radius:16px; padding:22px; text-align:center; }
.fs-modal-box h2 { margin:0 0 8px; font-size:20px; }
.fs-modal-box p { color:#cfc4ff; font-size:14px; line-height:1.6; margin:0 0 16px; }
.fs-modal-box .big { display:block; width:100%; padding:13px; border:0; border-radius:12px; background:#6d4ae3; color:#fff; font-size:16px; font-weight:800; cursor:pointer; margin-bottom:8px; }
.fs-modal-box .sub { display:block; width:100%; padding:11px; border:1px solid #6b57c9; border-radius:12px; background:transparent; color:#dcd2ff; font-size:14px; cursor:pointer; }
.fs-toast { position:absolute; bottom:18vh; left:50%; transform:translateX(-50%); background:#12102cee; border:1px solid #e3c071; color:#ffe6a8; padding:8px 16px; border-radius:20px; font-size:13px; font-weight:700; z-index:45; opacity:0; transition:opacity .3s; pointer-events:none; white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis; } /* 상단 제목과 겹치지 않게 하단 배치 */
.fs-toast.on { opacity:1; }

/* 도움말 */
#fs-help-modal { position:absolute; inset:0; z-index:62; display:none; align-items:center; justify-content:center; background:#000c; overflow:auto; padding:20px; }
#fs-help-modal.on { display:flex; }
.fs-help-sec { margin:12px 0; }
.fs-help-sec b { color:#c7b6ff; font-size:15px; }
.fs-help-sec ul { margin:6px 0 0; padding-left:18px; }
.fs-help-sec li { font-size:14px; line-height:1.7; color:#dbe0ff; }
.fs-help-sec li b { color:#ffe6a8; font-size:14px; }
#fs-help-modal .sub { margin-top:8px; }