/* Skyjets: full-screen game, HUD, buttons, boxes and phone controls. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #0f172a; }
body.sj-body { font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #0f172a; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#sj-root { position: fixed; inset: 0; }
#sj-c { display: block; width: 100%; height: 100%; touch-action: none; }
#sj-ui { position: absolute; inset: 0; pointer-events: none; }
#sj-ui > * { pointer-events: auto; }
#sj-loading { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; background: #0f172a; color: #e2e8f0; }
#sj-loading b { font-size: 34px; letter-spacing: 1px; color: #fb923c; }
#sj-loading[hidden] { display: none; }

.sj-hud { position: absolute; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); pointer-events: none !important; }
.sj-chip { background: rgba(15, 23, 42, .78); color: #fff; padding: 6px 10px; display: grid; min-width: 70px; }
.sj-chip b { font-size: 18px; font-variant-numeric: tabular-nums; }
.sj-chip span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #cbd5e1; }
.sj-meter { background: rgba(15, 23, 42, .78); color: #fff; padding: 6px 10px; width: 150px; display: grid; gap: 4px; }
.sj-meter span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #cbd5e1; }
.sj-meter i { display: block; height: 8px; background: #22c55e; transition: width .15s; }
.sj-meter i.fuel { background: #f59e0b; }
.sj-meter i.hold { background: #38bdf8; }

.sj-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: max-content; max-width: calc(100% - 20px); }
.sj-bar button, .sj-btns button, .sj-opt { font: 700 15px system-ui, sans-serif; border: 0; cursor: pointer; }
.sj-bar button { background: #fff; color: #0f172a; padding: 12px 16px; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.sj-bar button.big { background: #ea580c; color: #fff; padding: 12px 26px; font-size: 17px; }
.sj-bar button.go { background: #16a34a; color: #fff; }
.sj-bar button.quiet { background: rgba(15, 23, 42, .78); color: #fff; }
.sj-bar button:disabled { opacity: .55; cursor: default; }
.sj-bar button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

.sj-toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); background: rgba(15, 23, 42, .85); color: #fff; padding: 10px 16px; font-weight: 700; text-align: center; max-width: calc(100% - 40px); pointer-events: none !important; animation: sjin .2s ease; }
.sj-toast[hidden] { display: none; }
@keyframes sjin { from { opacity: 0; transform: translate(-50%, 8px); } }

.sj-modal { position: absolute; inset: 0; background: rgba(2, 6, 23, .55); display: grid; place-items: center; padding: 16px; }
.sj-modal[hidden] { display: none; }
.sj-box { background: #fff; width: min(460px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: 18px; display: grid; gap: 12px; animation: sjpop .18s ease; }
@keyframes sjpop { from { transform: scale(.94); opacity: 0; } }
.sj-box h2 { margin: 0; font-size: 20px; }
.sj-body p { margin: 0 0 8px; color: #475569; }
.sj-help { font-size: 14px; }
.sj-opts { display: grid; gap: 8px; }
.sj-opt { text-align: left; background: #f1f5f9; color: #0f172a; padding: 10px 12px; display: grid; gap: 2px; border-left: 4px solid #ea580c; }
.sj-opt span { font-weight: 400; font-size: 13px; color: #475569; }
.sj-opt em { font-style: normal; font-size: 13px; color: #c2410c; }
.sj-opt:disabled { opacity: .5; cursor: default; border-left-color: #94a3b8; }
.sj-opt[aria-pressed="true"] { background: #0f172a; color: #fff; }
.sj-opt[aria-pressed="true"] span { color: #cbd5e1; }
.sj-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.sj-btns button { padding: 12px; background: #4b5563; color: #fff; }
.sj-btns button.yes { background: #ea580c; }
.sj-btns button.no { background: #4b5563; }
.sj-loot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sj-loot div { background: #f1f5f9; padding: 10px; display: grid; }
.sj-loot b { font-size: 24px; color: #16a34a; }
.sj-loot span { font-size: 12px; text-transform: uppercase; color: #475569; }

.sj-pad[hidden] { display: none; }
.sj-pad { position: absolute; inset: auto 0 0 0; height: 0; }
.sj-stick { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: calc(90px + env(safe-area-inset-bottom)); width: 110px; height: 110px; border-radius: 50%; background: rgba(15, 23, 42, .35); border: 2px solid rgba(255, 255, 255, .5); pointer-events: none; }
.sj-stick i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.sj-acts { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: calc(90px + env(safe-area-inset-bottom)); display: grid; gap: 12px; justify-items: end; }
.sj-acts button { width: 92px; height: 92px; border-radius: 50%; border: 0; font: 800 15px system-ui, sans-serif; color: #fff; touch-action: none; }
.sj-boost { background: rgba(234, 88, 12, .88); }
.sj-act { background: rgba(37, 99, 235, .88); width: 72px !important; height: 72px !important; }
.sj-acts button.on { transform: scale(.94); filter: brightness(1.2); }

#sj-root.sj-hit::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 0, 0, 0) 40%, rgba(255, 30, 0, .45)); pointer-events: none; animation: sjhit .4s ease forwards; }
@keyframes sjhit { to { opacity: 0; } }
@media (max-width: 600px) { .sj-toast { top: calc(124px + env(safe-area-inset-top)); font-size: 14px; padding: 8px 12px; } }
@media (prefers-reduced-motion: reduce) { .sj-box, .sj-toast, #sj-root.sj-hit::after { animation: none; } }