:root {
  color-scheme: dark;
  --ink: #ecfff5;
  --muted: #8ea49a;
  --green: #52ff99;
  --green-2: #0fd36f;
  --red: #ff3d55;
  --panel: rgba(4, 14, 11, .82);
  --line: rgba(111, 255, 177, .22);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #010504; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
body { background: radial-gradient(circle at 50% -10%, #12372a 0, #06110d 33%, #010504 72%); }

.siege-app { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.siege-header { height: 72px; padding: 10px clamp(14px, 3vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(82,255,153,.18); background: rgba(0,5,3,.82); backdrop-filter: blur(18px); position: relative; z-index: 20; }
.siege-brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; letter-spacing: .08em; }
.siege-brand img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(82,255,153,.35)); }
.siege-brand span { display: grid; line-height: 1; }
.siege-brand strong { font-size: clamp(.88rem, 1.8vw, 1.05rem); }
.siege-brand small { margin-top: 6px; color: var(--green); font-weight: 800; font-size: clamp(.58rem, 1.2vw, .72rem); }
.siege-header-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .back-link, .siege-footer button, .secondary-button { border: 1px solid rgba(130,255,185,.25); background: rgba(6,22,16,.8); color: #dfffee; border-radius: 999px; min-height: 38px; padding: 0 15px; font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-button:hover, .back-link:hover, .secondary-button:hover, .siege-footer button:hover { border-color: var(--green); color: var(--green); }

.game-stage { position: relative; width: min(100vw, 1600px); height: min(calc(100dvh - 120px), 900px); min-height: 520px; margin: auto; overflow: hidden; background: #010403; isolation: isolate; box-shadow: 0 0 0 1px rgba(82,255,153,.15), 0 40px 120px rgba(0,0,0,.7); }
#siegeCanvas { display: block; width: 100%; height: 100%; cursor: crosshair; outline: none; touch-action: none; }
.game-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); mix-blend-mode: screen; opacity: .55; }

.hud { position: absolute; z-index: 8; top: 16px; left: 16px; right: 16px; display: grid; grid-template-columns: minmax(180px, 1.25fr) minmax(110px,.7fr) minmax(120px,.72fr) minmax(180px,1.15fr); gap: 9px; pointer-events: none; }
.hud-card { position: relative; min-height: 64px; padding: 9px 12px; border: 1px solid rgba(118,255,183,.23); background: linear-gradient(135deg, rgba(2,15,10,.86), rgba(8,23,17,.58)); backdrop-filter: blur(10px); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); box-shadow: inset 0 0 25px rgba(20,255,124,.035); }
.hud-card > span { display: block; color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.hud-card > strong { display: block; margin-top: 3px; color: white; font-size: clamp(1.15rem,2vw,1.7rem); line-height: 1; font-variant-numeric: tabular-nums; }
.hud-card small { color: #9db8ab; font-size: .61rem; letter-spacing: .08em; font-weight: 800; }
.hud-card small b { color: var(--green); }
.meter { height: 8px; margin-top: 9px; overflow: hidden; transform: skewX(-16deg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.07); }
.meter i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green-2), #a8ffc8); box-shadow: 0 0 14px rgba(82,255,153,.65); transition: width .16s ease; }
.health-card { padding-right: 56px; }
.health-card > strong, .energy-card > strong { position: absolute; right: 13px; bottom: 11px; font-size: .92rem; }
.health-card.danger .meter i { background: linear-gradient(90deg, #ff2746, #ff8b6a); box-shadow: 0 0 15px rgba(255,41,70,.72); }
.energy-card .meter i { width: 0; background: linear-gradient(90deg, #00d666, #e4ff78); }

.boss-bar { position: absolute; z-index: 9; top: 92px; left: 50%; width: min(620px, 72vw); transform: translateX(-50%); text-align: center; pointer-events: none; }
.boss-bar span { display: inline-block; padding: 6px 18px 7px; background: rgba(22,0,4,.88); border: 1px solid rgba(255,61,85,.55); color: #ffb1bc; font-size: .7rem; font-weight: 1000; letter-spacing: .17em; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.boss-bar div { height: 10px; background: rgba(20,0,2,.78); border: 1px solid rgba(255,61,85,.45); transform: skewX(-18deg); overflow: hidden; }
.boss-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b00023, #ff405a, #ff9a86); box-shadow: 0 0 20px rgba(255,30,66,.7); transition: width .12s linear; }

.crosshair { --x: 50%; --y: 50%; position: absolute; z-index: 7; left: var(--x); top: var(--y); width: 52px; height: 52px; transform: translate(-50%,-50%); pointer-events: none; filter: drop-shadow(0 0 5px rgba(82,255,153,.8)); }
.crosshair i { position: absolute; background: #9effc5; border-radius: 99px; }
.crosshair i:nth-child(1) { width: 12px; height: 2px; left: 0; top: 25px; }
.crosshair i:nth-child(2) { width: 12px; height: 2px; right: 0; top: 25px; }
.crosshair i:nth-child(3) { height: 12px; width: 2px; top: 0; left: 25px; }
.crosshair i:nth-child(4) { height: 12px; width: 2px; bottom: 0; left: 25px; }
.crosshair b { position: absolute; width: 5px; height: 5px; left: 23.5px; top: 23.5px; border: 1px solid white; border-radius: 50%; }
.crosshair.firing { transform: translate(-50%,-50%) scale(1.22); }

.damage-vignette { position: absolute; z-index: 6; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 38%, rgba(184,0,29,.18) 68%, rgba(255,0,38,.78) 120%); transition: opacity .08s ease; }
.damage-vignette.active { opacity: 1; }
.hit-marker { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.75); color: white; font-size: 52px; line-height: 1; opacity: 0; text-shadow: 0 0 12px var(--green), 0 0 28px var(--green); pointer-events: none; }
.hit-marker.active { animation: hit-marker .22s ease-out; }
@keyframes hit-marker { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(-12deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25) rotate(8deg); } }
.combo-banner { position: absolute; z-index: 8; left: 50%; top: 28%; transform: translate(-50%,-50%) skewX(-8deg); color: white; font-weight: 1000; font-style: italic; font-size: clamp(1.2rem, 4vw, 3.6rem); text-transform: uppercase; text-shadow: 4px 4px 0 #092b1b, 0 0 28px rgba(82,255,153,.85); letter-spacing: -.03em; pointer-events: none; opacity: 0; }
.combo-banner.show { animation: combo-pop .9s cubic-bezier(.17,.84,.32,1); }
@keyframes combo-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3) skewX(-8deg); } 18% { opacity: 1; transform: translate(-50%,-50%) scale(1.14) skewX(-8deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-78%) scale(.95) skewX(-8deg); } }

.game-overlay { position: absolute; z-index: 14; inset: 0; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 38%, rgba(18,70,47,.36), rgba(1,5,4,.92) 62%); backdrop-filter: blur(5px); }
.game-overlay[hidden], .leaderboard-panel[hidden] { display: none; }
.overlay-smoke { position: absolute; inset: -20%; opacity: .42; background: radial-gradient(ellipse at 20% 55%, rgba(220,239,255,.34), transparent 28%), radial-gradient(ellipse at 80% 48%, rgba(220,239,255,.27), transparent 31%); filter: blur(22px); animation: smoke-shift 8s ease-in-out infinite alternate; }
@keyframes smoke-shift { to { transform: translate3d(5%,-3%,0) scale(1.07); } }
.lobby-card, .pause-card, .gameover-card { position: relative; width: min(680px, 94vw); padding: clamp(24px,5vw,48px); text-align: center; border: 1px solid rgba(93,255,164,.28); background: linear-gradient(145deg, rgba(3,17,11,.93), rgba(2,8,6,.78)); box-shadow: 0 26px 80px rgba(0,0,0,.58), inset 0 0 70px rgba(17,255,121,.025); clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.eyebrow { margin: 0 0 9px; color: var(--green); font-size: .7rem; font-weight: 1000; letter-spacing: .17em; }
.lobby-card h1, .pause-card h2, .gameover-card h2, .leaderboard-panel h2 { margin: 0; text-transform: uppercase; font-style: italic; line-height: .9; letter-spacing: -.055em; font-size: clamp(2.4rem, 8vw, 5.8rem); text-shadow: 4px 4px 0 #071d14; }
.lobby-card > p:not(.eyebrow):not(.lobby-note) { color: #afc4b9; line-height: 1.55; max-width: 590px; margin: 22px auto; }
.player-field { display: grid; gap: 7px; text-align: left; max-width: 430px; margin: 22px auto 16px; }
.player-field span { color: #93aa9e; font-size: .64rem; font-weight: 900; letter-spacing: .12em; }
.player-field input { width: 100%; height: 48px; padding: 0 15px; border-radius: 8px; border: 1px solid rgba(103,255,172,.3); outline: none; background: rgba(0,0,0,.36); color: white; font-weight: 800; }
.player-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(82,255,153,.11); }
.control-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 18px auto 24px; max-width: 560px; }
.control-grid > div { display: grid; place-content: center; min-height: 68px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 24px; margin: 0 2px 6px; padding: 0 6px; border: 1px solid rgba(82,255,153,.38); border-bottom-width: 3px; border-radius: 4px; color: var(--green); font-size: .62rem; font-weight: 1000; }
.control-grid span { color: #93a99d; font-size: .58rem; font-weight: 900; letter-spacing: .09em; }
.launch-button { min-height: 54px; min-width: min(100%,330px); padding: 0 28px; border: 0; border-radius: 7px; background: linear-gradient(105deg, #1ded78, #a6ff8e); color: #011209; font-weight: 1000; font-style: italic; letter-spacing: .09em; cursor: pointer; box-shadow: 0 0 0 1px rgba(210,255,224,.42), 0 12px 45px rgba(18,231,112,.24); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.launch-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.lobby-note { color: #758c80; font-size: .7rem; margin: 15px 0 0; }
.pause-card { width: min(440px,90vw); }
.gameover-card { width: min(590px,94vw); }
.gameover-card h2 { font-size: clamp(2rem,7vw,4.7rem); }
.final-score { margin: 24px auto 12px; }
.final-score span, .result-grid span { display: block; color: #849c90; font-size: .62rem; letter-spacing: .13em; font-weight: 900; }
.final-score strong { color: var(--green); font-size: clamp(3rem,10vw,6.3rem); line-height: .95; font-variant-numeric: tabular-nums; }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; max-width: 460px; margin: 0 auto 17px; }
.result-grid div { padding: 12px 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.result-grid strong { display: block; margin-top: 4px; font-size: 1.15rem; }
.submit-status { min-height: 20px; color: #93aa9e; font-size: .72rem; }
.submit-status.success { color: var(--green); }
.submit-status.error { color: #ff8797; }
.gameover-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.gameover-actions .launch-button { min-width: 240px; }

.leaderboard-panel { position: absolute; z-index: 18; right: 16px; top: 16px; bottom: 16px; width: min(400px, calc(100% - 32px)); padding: 30px 22px 22px; border: 1px solid rgba(87,255,163,.31); background: rgba(1,10,7,.94); backdrop-filter: blur(18px); box-shadow: -20px 0 80px rgba(0,0,0,.62); overflow: auto; }
.leaderboard-panel h2 { font-size: clamp(2rem,5vw,3.5rem); }
.leaderboard-close { position: absolute; right: 10px; top: 8px; width: 38px; height: 38px; border: 0; border-radius: 50%; color: white; background: rgba(255,255,255,.07); font-size: 1.6rem; cursor: pointer; }
.siege-leaderboard { list-style: none; counter-reset: siege-rank; margin: 26px 0 18px; padding: 0; display: grid; gap: 6px; }
.siege-leaderboard li { counter-increment: siege-rank; min-height: 46px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.025); font-weight: 800; }
.siege-leaderboard li::before { content: counter(siege-rank, decimal-leading-zero); color: var(--green); font-size: .68rem; }
.siege-leaderboard li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.siege-leaderboard li strong { color: #eafff2; font-variant-numeric: tabular-nums; }

.mobile-controls { position: absolute; z-index: 12; inset: auto 0 10px; display: none; justify-content: space-between; align-items: end; padding: 0 18px max(0px, env(safe-area-inset-bottom)); pointer-events: none; }
.move-pad, .fire-button, .dash-button { pointer-events: auto; touch-action: none; user-select: none; }
.move-pad { position: relative; width: 128px; height: 96px; border: 1px solid rgba(129,255,187,.2); border-radius: 18px; background: rgba(0,12,7,.34); backdrop-filter: blur(5px); }
.move-pad::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 55%; background: rgba(255,255,255,.12); transform: translate(-50%,-50%); }
.move-pad span { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); color: rgba(255,255,255,.43); font-size: .53rem; font-weight: 900; letter-spacing: .13em; }
.move-pad i { position: absolute; left: 50%; top: 55%; width: 42px; height: 42px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(82,255,153,.22); border: 1px solid rgba(82,255,153,.64); box-shadow: 0 0 25px rgba(82,255,153,.16); }
.fire-button { width: 104px; height: 104px; border-radius: 50%; border: 1px solid rgba(130,255,184,.54); color: #03120a; background: radial-gradient(circle at 38% 32%, #d8ff95, #3cff85 45%, #08a652 100%); font-weight: 1000; font-style: italic; box-shadow: 0 0 0 8px rgba(24,255,117,.07), 0 0 35px rgba(34,255,131,.23); }
.fire-button:active { transform: scale(.94); }
.dash-button { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); min-width: 76px; height: 42px; border-radius: 999px; border: 1px solid rgba(82,255,153,.35); background: rgba(2,17,10,.78); color: var(--green); font-size: .64rem; font-weight: 1000; }
.orientation-message { position: absolute; z-index: 30; inset: 0; display: none; place-content: center; gap: 10px; padding: 30px; text-align: center; background: #020806; }
.orientation-message strong { color: var(--green); font-size: 1.45rem; letter-spacing: .06em; }
.orientation-message span { color: #9db2a7; }

.siege-footer { min-height: 48px; padding: 7px clamp(14px,3vw,34px); display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #5f786b; font-size: .58rem; font-weight: 900; letter-spacing: .1em; border-top: 1px solid rgba(82,255,153,.12); }
.siege-footer button { min-height: 32px; font-size: .6rem; }

@media (pointer: coarse), (max-width: 820px) {
  .mobile-controls { display: flex; }
  .crosshair { top: 45%; }
  .hud { grid-template-columns: repeat(2, 1fr); top: 7px; left: 7px; right: 7px; gap: 5px; }
  .hud-card { min-height: 48px; padding: 6px 8px; }
  .hud-card > span { font-size: .5rem; }
  .hud-card > strong { font-size: 1rem; }
  .hud-card small { font-size: .49rem; }
  .health-card, .energy-card { padding-right: 43px; }
  .health-card > strong, .energy-card > strong { font-size: .7rem; right: 7px; bottom: 8px; }
  .meter { margin-top: 6px; height: 6px; }
  .boss-bar { top: 111px; }
  .control-grid { grid-template-columns: repeat(2,1fr); }
  .siege-footer span { display: none; }
  .game-stage { min-height: 420px; height: calc(100dvh - 120px); }
}

@media (max-width: 620px) {
  .siege-header { height: 58px; padding: 7px 10px; }
  .siege-brand img { width: 38px; height: 38px; }
  .siege-brand small { font-size: .55rem; }
  .icon-button { display: none; }
  .back-link { min-height: 34px; padding: 0 12px; }
  .game-stage { width: 100%; height: calc(100dvh - 100px); }
  .siege-footer { min-height: 42px; }
  .lobby-card, .gameover-card { padding: 22px 17px; }
  .lobby-card h1 { font-size: clamp(2.3rem,14vw,4.4rem); }
  .lobby-card > p:not(.eyebrow):not(.lobby-note) { margin: 15px auto; font-size: .85rem; }
  .control-grid { display: none; }
  .move-pad { width: 112px; height: 86px; }
  .fire-button { width: 92px; height: 92px; }
}

@media (orientation: portrait) and (pointer: coarse) and (max-width: 900px) {
  .orientation-message { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Compact landscape phones: keep the launch and result actions inside the viewport. */
@media (max-height: 520px) and (orientation: landscape) {
  .siege-header { height: 52px; padding-top: 5px; padding-bottom: 5px; }
  .siege-brand img { width: 38px; height: 38px; }
  .siege-brand small { margin-top: 4px; }
  .game-stage { height: calc(100dvh - 88px); min-height: 280px; }
  .siege-footer { min-height: 36px; height: 36px; padding-top: 3px; padding-bottom: 3px; }
  .game-overlay { padding: 7px; }
  .lobby-card { width: min(760px, 94vw); padding: 13px 24px 12px; }
  .lobby-card h1 { font-size: clamp(2.45rem, 10vw, 4.4rem); line-height: .82; }
  .lobby-card > p:not(.eyebrow):not(.lobby-note),
  .control-grid,
  .lobby-note { display: none; }
  .player-field { max-width: 430px; margin: 10px auto 9px; gap: 4px; }
  .player-field input { height: 40px; }
  .launch-button { min-height: 44px; }
  .gameover-card { padding: 12px 20px; width: min(650px, 95vw); }
  .gameover-card h2 { font-size: clamp(1.75rem, 7vw, 3.25rem); }
  .final-score { margin: 9px auto 6px; }
  .final-score strong { font-size: clamp(2.3rem, 8vw, 4rem); }
  .result-grid { margin-bottom: 7px; }
  .result-grid div { padding: 6px; }
  .submit-status { margin: 5px 0; }
  .gameover-actions .launch-button { min-width: 200px; }
}


/* v7.1 homepage embed mode. */
html.embedded,
html.embedded body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html.embedded body { background: #010504; }
html.embedded .siege-app {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}
html.embedded .siege-header,
html.embedded .siege-footer { display: none; }
html.embedded .game-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  box-shadow: none;
}
html.embedded .lobby-card,
html.embedded .pause-card,
html.embedded .gameover-card { max-height: calc(100% - 20px); overflow: auto; }
@media (max-height: 620px) {
  html.embedded .game-stage { height: 100%; min-height: 0; }
  html.embedded .game-overlay { padding: 8px; }
  html.embedded .lobby-card { padding: 14px 22px 12px; }
  html.embedded .lobby-card h1 { font-size: clamp(2.25rem, 8vw, 4.35rem); }
  html.embedded .lobby-card > p:not(.eyebrow):not(.lobby-note) { margin: 12px auto; font-size: .84rem; }
  html.embedded .player-field { margin: 11px auto 9px; }
  html.embedded .control-grid { margin: 10px auto 12px; }
}