:root { --bg: #05070d; --fg: #e9eef5; --mut: #8b98a8; --acc: #ffd166; --card: rgba(13, 17, 23, .88); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: system-ui, "Segoe UI", Arial, sans-serif; overflow: hidden; touch-action: none; }
#cam { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
#cam.on { opacity: .75; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; }
.cross { position: fixed; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid rgba(255, 209, 102, .85); border-radius: 50%; pointer-events: none; }
.cross::before, .cross::after { content: ""; position: absolute; background: rgba(255, 209, 102, .85); }
.cross::before { left: 50%; top: -12px; bottom: -12px; width: 2px; margin-left: -1px; }
.cross::after { top: 50%; left: -12px; right: -12px; height: 2px; margin-top: -1px; }
header#top { position: fixed; top: 0; left: 0; right: 0; padding: calc(env(safe-area-inset-top) + 8px) 12px 8px; background: linear-gradient(#000c, #0000); text-align: center; pointer-events: none; }
.aim { font-size: 20px; font-weight: 700; direction: rtl; }
.loc { font-size: 12px; color: var(--mut); margin-top: 2px; }
.centre { position: fixed; left: 50%; top: calc(50% + 40px); transform: translateX(-50%); background: var(--card); border-radius: 12px; padding: 8px 14px; text-align: center; max-width: 88vw; pointer-events: none; }
.centre b { font-size: 19px; color: var(--acc); }
.centre small { display: block; color: var(--mut); font-size: 13px; }
nav#bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 8px 8px calc(env(safe-area-inset-bottom) + 10px); background: linear-gradient(#0000, #000d); }
.b { width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: var(--fg); font-size: 24px; }
.b.on { background: rgba(255, 209, 102, .35); }
.card, .sheet { position: fixed; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 84px); background: var(--card); border-radius: 16px; padding: 14px 16px; max-height: 60vh; overflow: auto; }
.card h2, .sheet h2 { margin: 0 0 4px; font-size: 22px; color: var(--acc); }
.card .en { color: var(--mut); font-size: 14px; direction: ltr; text-align: right; }
.card table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 15px; }
.card td { padding: 4px 0; border-bottom: 1px solid #ffffff14; }
.card td:last-child { text-align: left; direction: ltr; font-weight: 600; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { flex: 1; min-height: 46px; border: 0; border-radius: 12px; background: #ffd166; color: #111; font-size: 16px; font-weight: 700; }
.btn.sec { background: rgba(255, 255, 255, .14); color: var(--fg); }
.x { position: absolute; top: 8px; left: 10px; background: none; border: 0; color: var(--mut); font-size: 22px; }
.hidden { display: none !important; }
.start { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(#101a33, #05070d 70%); }
.start h1 { font-size: 40px; margin: 0; }
.start p { max-width: 420px; line-height: 1.6; color: #c9d4e3; margin: 0; }
.big { width: min(360px, 90vw); min-height: 58px; border: 0; border-radius: 16px; font-size: 19px; font-weight: 700; background: var(--acc); color: #111; }
.big.sec { background: rgba(255, 255, 255, .14); color: var(--fg); }
.small { font-size: 13px; color: var(--mut) !important; }
.sheet input[type=search] { width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid #30363d; background: #0d1117; color: var(--fg); font-size: 17px; padding: 0 12px; }
.res { padding: 10px 4px; border-bottom: 1px solid #ffffff14; }
.res small { color: var(--mut); margin-right: 6px; }
.opt { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #ffffff14; font-size: 16px; }
.toast { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); background: var(--card); padding: 12px 16px; border-radius: 12px; max-width: 86vw; text-align: center; z-index: 9; }
.acc { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.acc input { width: min(360px, 90vw); min-height: 48px; border-radius: 12px; border: 1px solid #30363d; background: #0d1117; color: var(--fg); font-size: 17px; padding: 0 12px; }
#ready { display: flex; flex-direction: column; gap: 12px; align-items: center; }
#ready.hidden { display: none; }