:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --cyan: #42e9ff;
  --violet: #9d4cff;
  --panel: rgba(4, 9, 28, .86);
  --app-width: 100vw;
  --app-height: 100vh;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #02040c; }
body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#app { position: fixed; left: 0; top: 0; width: var(--app-width); height: var(--app-height); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, #17164c 0, #050816 48%, #010207 100%); }
.game-shell { position: relative; width: min(var(--app-width), calc(var(--app-height) * 16 / 9)); height: min(var(--app-height), calc(var(--app-width) * 9 / 16)); max-width: 100%; max-height: 100%; overflow: hidden; background: #030713; box-shadow: 0 0 80px rgba(0,0,0,.75); contain: layout paint size; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hud { position: absolute; z-index: 12; top: max(10px, var(--safe-top)); left: max(12px, var(--safe-left)); right: max(92px, calc(var(--safe-right) + 92px)); min-height: 58px; display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 6px; padding: 8px 12px 12px; background: linear-gradient(180deg, rgba(2,8,25,.92), rgba(8,11,38,.72)); border: 1px solid rgba(116,225,255,.35); clip-path: polygon(2% 0, 98% 0, 100% 28%, 98% 100%, 2% 100%, 0 28%); backdrop-filter: blur(8px); }
.hud::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(161,78,255,.28); clip-path: inherit; pointer-events: none; }
.hud-cell { min-width: 0; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 18px 24px; column-gap: 7px; align-items: center; }
.hud-cell img { grid-row: 1 / 3; width: 31px; height: 31px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(68,227,255,.55)); }
.hud-cell span { align-self: end; font-size: 9px; letter-spacing: .09em; color: #90dfff; font-weight: 800; white-space: nowrap; }
.hud-cell strong { align-self: start; font-size: 17px; line-height: 1; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 10px rgba(75,220,255,.55); }
.hud-progress-wrap { position: absolute; left: 16%; right: 16%; bottom: 4px; height: 7px; display: flex; align-items: center; gap: 8px; }
.hud-progress-wrap > span { min-width: 118px; font-size: 8px; font-weight: 900; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.hud-progress { flex: 1; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.hud-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 10px var(--cyan); transition: width .18s linear; }

.top-actions { position: absolute; z-index: 14; top: max(10px, var(--safe-top)); right: max(10px, var(--safe-right)); display: flex; gap: 7px; }
.mini-btn { width: 36px; height: 36px; border: 1px solid rgba(92,225,255,.55); border-radius: 10px; background: rgba(5,11,35,.86); color: white; font-weight: 900; box-shadow: inset 0 0 12px rgba(75,220,255,.13); cursor: pointer; }

.mobile-controls { position: absolute; z-index: 18; left: max(18px, calc(var(--safe-left) + 8px)); right: max(18px, calc(var(--safe-right) + 8px)); bottom: max(16px, calc(var(--safe-bottom) + 12px)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.move-controls { display: flex; gap: 8px; }
.touch-btn { width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: .84; pointer-events: auto; touch-action: none; cursor: pointer; transform: translateZ(0); }
.touch-btn img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 12px rgba(48,211,255,.35)); }
.touch-btn.is-pressed { opacity: 1; transform: scale(.93); }
.jump-btn { width: clamp(76px, 9vw, 102px); height: clamp(76px, 9vw, 102px); }

.overlay { position: absolute; z-index: 30; inset: 0; display: none; align-items: center; justify-content: center; padding: 5%; background: rgba(0,3,15,.58); backdrop-filter: blur(4px); }
.overlay.is-visible { display: flex; }
.start-overlay { background: url("../img/ui/overlay_start_bg.png") center/cover no-repeat, #060a20; }
.overlay-content { width: min(690px, 88%); max-height: 88%; overflow: hidden; text-align: center; padding: 26px; border: 1px solid rgba(85,224,255,.55); background: linear-gradient(180deg, rgba(5,10,35,.92), rgba(12,7,38,.93)); clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%); box-shadow: inset 0 0 35px rgba(82,190,255,.13); }
.game-logo { width: min(520px, 88%); max-height: 170px; object-fit: contain; margin: -8px auto 0; display: block; }
.intro-copy h1 { margin: 4px 0 8px; font-size: clamp(24px, 4vw, 46px); }
.intro-copy p { max-width: 610px; margin: 0 auto; color: rgba(255,255,255,.78); font-size: clamp(12px, 1.6vw, 17px); }
.rules-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 15px 0; }
.rules-row span { border: 1px solid rgba(115,222,255,.3); border-radius: 999px; padding: 6px 11px; background: rgba(38,29,88,.58); color: #d9f9ff; font-size: 11px; font-weight: 700; }
.primary-btn { min-width: 210px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; padding: 13px 24px; color: #041020; background: linear-gradient(135deg, #f8ffff, #4beaff 55%, #aa60ff); font-weight: 1000; letter-spacing: .04em; cursor: pointer; box-shadow: 0 8px 28px rgba(71,214,255,.28); }
.primary-btn:active { transform: scale(.97); }
.desktop-help { margin: 11px 0 0; font-size: 11px; color: rgba(255,255,255,.55); }

.message-card { background-position: center; background-size: cover; background-repeat: no-repeat; text-shadow: 0 2px 12px #000; }
.message-card h2 { margin: 0 0 10px; font-size: clamp(27px, 5vw, 54px); }
.message-card p { max-width: 560px; margin: 0 auto 19px; font-size: clamp(13px, 1.8vw, 18px); line-height: 1.45; color: rgba(255,255,255,.9); }

.choice-overlay { background: rgba(0,3,17,.84); }
.choice-panel { width: min(1040px, 94%); max-height: 94%; text-align: center; }
.choice-banner { width: min(780px, 78%); max-height: 138px; object-fit: contain; }
.choice-panel h2 { margin: 0; font-size: clamp(22px, 3.5vw, 40px); }
.choice-panel > p { margin: 5px 0 13px; color: rgba(255,255,255,.72); font-size: 13px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.choice-card { min-width: 0; border: 1px solid rgba(91,226,255,.45); background: rgba(4,9,28,.88); color: white; padding: 9px; border-radius: 14px; cursor: pointer; }
.choice-card img { width: 100%; height: clamp(105px, 22vh, 220px); object-fit: contain; display: block; }
.choice-card strong { display: block; margin-top: 4px; font-size: clamp(13px, 1.7vw, 19px); color: #bff9ff; }
.choice-card span { display: block; margin-top: 4px; color: rgba(255,255,255,.66); font-size: clamp(9px, 1.1vw, 13px); }
.choice-card:active { transform: scale(.98); }

.alien-decision-overlay { background: linear-gradient(rgba(2,0,18,.48), rgba(2,0,18,.82)), url("../img/ui/overlay_alienworld_bg.jpg") center/cover no-repeat; }
.alien-decision-panel { width: min(940px, 94%); max-height: 94%; text-align: center; padding: 22px; border: 1px solid rgba(151,85,255,.65); border-radius: 22px; background: rgba(4,7,28,.78); backdrop-filter: blur(8px); box-shadow: inset 0 0 40px rgba(79,239,255,.1); }
.alien-decision-panel h2 { max-width: 820px; margin: 0 auto 7px; font-size: clamp(23px, 3.6vw, 43px); line-height: 1.06; }
.alien-decision-panel > p { margin: 0 auto 15px; color: rgba(255,255,255,.76); font-size: clamp(11px, 1.4vw, 15px); }
.alien-decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.alien-decision-card { min-width: 0; border: 1px solid rgba(91,226,255,.48); border-radius: 16px; padding: 12px; color: white; background: rgba(4,9,28,.9); cursor: pointer; }
.alien-decision-card img { display: block; width: 100%; height: clamp(120px, 28vh, 245px); object-fit: contain; }
.alien-decision-card strong { display: block; margin-top: 4px; color: #c9fbff; font-size: clamp(13px, 1.7vw, 20px); }
.alien-decision-card span { display: block; margin-top: 5px; color: rgba(255,255,255,.68); font-size: clamp(10px, 1.1vw, 13px); }
.alien-decision-card:active { transform: scale(.98); }
.life-toast { position: absolute; z-index: 60; left: 50%; top: 23%; max-width: 82%; transform: translate(-50%, -18px); padding: 10px 20px; border: 1px solid rgba(119,244,255,.75); border-radius: 999px; background: rgba(4,10,35,.94); color: #fff; font-size: clamp(11px, 1.45vw, 17px); font-weight: 900; letter-spacing: .04em; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 0 26px rgba(69,230,255,.25); }
.life-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.rotate-overlay { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; padding: 24px; text-align: center; background: radial-gradient(circle, #17165d, #030612 70%); }
.rotate-overlay div { max-width: 520px; }
.rotate-overlay img { width: min(330px, 72vw); max-height: 45vh; object-fit: contain; }
.rotate-overlay h2 { margin: 5px 0; font-size: clamp(27px, 8vw, 50px); }
.rotate-overlay p { margin: 0 0 16px; color: rgba(255,255,255,.72); }
.rotate-fullscreen-btn { min-width: min(330px, 86vw); }

.screen-flash { position: absolute; z-index: 25; inset: 0; pointer-events: none; opacity: 0; }
.screen-flash.good { animation: goodFlash .42s ease; background: rgba(94,255,221,.28); }
.screen-flash.bad { animation: badFlash .5s ease; background: rgba(255,41,76,.35); }
@keyframes goodFlash { 0%,100%{opacity:0} 35%{opacity:1} }
@keyframes badFlash { 0%,100%{opacity:0} 35%{opacity:1} }
.preload-overlay { position: fixed; z-index: 90; inset: 0; display: none; place-items: center; padding: max(20px, var(--safe-top)) max(20px, var(--safe-right)) max(20px, var(--safe-bottom)) max(20px, var(--safe-left)); text-align: center; background: radial-gradient(circle at 50% 35%, #17165d, #030612 72%); }
.preload-overlay.is-visible { display: grid; }
.preload-card { width: min(660px, 92vw); padding: 22px 26px; border: 1px solid rgba(91,226,255,.52); border-radius: 22px; background: rgba(4,9,30,.91); box-shadow: inset 0 0 36px rgba(81,218,255,.11); }
.preload-logo { display: block; width: min(430px, 80%); max-height: 150px; object-fit: contain; margin: 0 auto 6px; }
.preload-card h2 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 40px); }
.preload-card p { margin: 0 0 12px; color: rgba(255,255,255,.76); }
.preload-progress { width: min(460px, 88%); height: 12px; margin: 0 auto 7px; overflow: hidden; border: 1px solid rgba(111,229,255,.42); border-radius: 999px; background: rgba(255,255,255,.08); }
.preload-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); transition: width .16s linear; }
.preload-card > strong { display: block; margin-bottom: 13px; color: #c9fbff; }
.preload-card > small { display: block; max-width: 530px; margin: 12px auto 0; color: rgba(255,255,255,.48); font-size: 10px; line-height: 1.35; }
.preload-card .primary-btn:disabled { cursor: wait; opacity: .48; filter: grayscale(.35); }

@media (hover: hover) and (pointer: fine) {
  .mobile-controls { opacity: .35; }
  .choice-card:hover, .alien-decision-card:hover { border-color: #fff; transform: translateY(-3px); }
  .primary-btn:hover { filter: brightness(1.08); }
}

@media (orientation: portrait) and (max-width: 900px) {
  .rotate-overlay { display: grid; }
}


@media (pointer: coarse) {
  .hud, .overlay, .alien-decision-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .game-shell { box-shadow: none; }
  .touch-btn img { filter: drop-shadow(0 0 7px rgba(48,211,255,.28)); }
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 650px) {
  .mobile-controls { left: max(10px, calc(var(--safe-left) + 6px)); right: max(10px, calc(var(--safe-right) + 6px)); bottom: max(8px, calc(var(--safe-bottom) + 6px)); }
  .move-controls { gap: 4px; }
  .touch-btn { width: 60px; height: 60px; }
  .jump-btn { width: 72px; height: 72px; }
  .hud { right: max(78px, calc(var(--safe-right) + 78px)); }
  .preload-card { padding: 12px 20px; }
  .preload-logo { max-height: 88px; }
  .preload-card h2 { font-size: 22px; }
  .preload-card p { margin-bottom: 7px; font-size: 12px; }
  .preload-card > small { display: none; }
  .rotate-overlay { padding: 12px; }
  .rotate-overlay img { max-height: 31vh; }
  .rotate-overlay h2 { font-size: 26px; }
}

@media (max-height: 520px) {
  .overlay { padding: 2%; }
  .mobile-controls { bottom: max(6px, calc(var(--safe-bottom) + 4px)); }
  .touch-btn { width: 54px; height: 54px; }
  .jump-btn { width: 65px; height: 65px; }
  .hud { top: max(5px, var(--safe-top)); min-height: 49px; padding: 5px 10px 9px; }
  .hud-cell { grid-template-columns: 25px 1fr; grid-template-rows: 14px 19px; }
  .hud-cell img { width: 24px; height: 24px; }
  .hud-cell span { font-size: 7px; }
  .hud-cell strong { font-size: 13px; }
  .hud-progress-wrap { bottom: 2px; }
  .top-actions { top: max(5px, var(--safe-top)); }
  .mini-btn { width: 31px; height: 31px; }
  .overlay-content { width: min(720px, 94%); max-height: 96%; padding: 9px 16px; }
  .game-logo { max-height: 64px; margin-top: -5px; }
  .intro-copy h1 { font-size: 20px; margin: 0 0 2px; }
  .intro-copy p { font-size: 10px; line-height: 1.2; }
  .rules-row { margin: 5px 0; gap: 4px; }
  .rules-row span { padding: 4px 8px; font-size: 9px; }
  .desktop-help { display: none; }
  .primary-btn { min-width: 195px; padding: 8px 18px; }
  .choice-banner { max-height: 75px; }
  .choice-panel h2 { font-size: 21px; }
  .choice-panel > p { margin: 2px 0 7px; }
  .choice-card img { height: 116px; }
  .alien-decision-panel { padding: 12px; }
  .alien-decision-panel h2 { font-size: 21px; }
  .alien-decision-panel > p { margin-bottom: 7px; }
  .alien-decision-card { padding: 7px; }
  .alien-decision-card img { height: 112px; }
}