.invasion-picker { width: min(94%, 1180px); max-height: 96%; overflow: auto; padding: 24px; border: 1px solid #7ea28e; border-radius: 22px; background: radial-gradient(ellipse at 50% 0, #195a4555, transparent 60%), #05141eed; box-shadow: 0 24px 100px #000d, inset 0 0 0 4px #071d28; text-align: center; }
.invasion-picker h2 { margin: 5px 0 8px; font-size: clamp(22px, 3cqw, 46px); color: #edffd1; }
.invasion-picker > p { margin: 4px 0 16px; color: #b2cbd2; font-size: clamp(11px, 1.05cqw, 17px); }
.invasion-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.invasion-card { position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 12px; border: 1px solid #506773; border-radius: 14px; background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--feature-color) 16%, transparent), transparent 65%), #061823; color: white; cursor: pointer; text-align: center; transition: border-color 180ms, transform 180ms, box-shadow 180ms; }
.invasion-card:hover { transform: translateY(-3px); border-color: var(--feature-color); }
.invasion-card[aria-pressed="true"] { border-color: var(--feature-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--feature-color) 50%, transparent), inset 0 0 35px color-mix(in srgb, var(--feature-color) 10%, transparent); }
.invasion-card img { width: 85px; height: 80px; object-fit: contain; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--feature-color) 35%, transparent)); }
.invasion-card[data-mode="MAX_WAYS"] img { filter: hue-rotate(35deg) drop-shadow(0 0 12px #36beff80); }
.invasion-card[data-mode="MOTHERSHIP"] img { scale: 1.12; filter: hue-rotate(65deg) drop-shadow(0 0 16px #c177ff80); }
.invasion-card small { color: var(--feature-color); font-weight: 850; letter-spacing: .12em; font-size: clamp(9px, .8cqw, 13px); }
.invasion-card b { font-size: clamp(16px, 1.7cqw, 28px); }
.invasion-card p { margin: 0; color: #b7cdd5; font-size: clamp(11px, 1cqw, 16px); line-height: 1.5; }
.invasion-card strong { margin-top: 4px; font-size: clamp(19px, 2cqw, 32px); color: #ffe185; }
.invasion-card .invasion-cost { color: #92aab3; font-size: 11px; }
.invasion-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.invasion-footer button { min-height: 44px; border: 1px solid #6da284; border-radius: 9px; padding: 10px 22px; cursor: pointer; background: #102b35; font-weight: 850; }
.invasion-footer #buy-dialog-confirm { background: linear-gradient(#a1ff70, #37bf66); color: #051a0d; }
.invasion-footer #buy-dialog-confirm:disabled { opacity: .45; cursor: default; }
#buy-dialog-message { color: #ffde8f; min-height: 1.2em; margin: 8px 0; }
.feature-status { --feature-color: #91ff63; position: absolute; z-index: 5; top: 79.5%; left: 22%; width: 56%; height: 5.6%; display: flex; justify-content: space-around; align-items: center; gap: 8px; border-block: 1px solid color-mix(in srgb, var(--feature-color) 55%, transparent); background: linear-gradient(90deg, #03172200, #031722ed 10% 90%, #03172200); color: var(--feature-color); pointer-events: none; }
.feature-status[hidden], .feature-screen[hidden] { display: none; }
.feature-status > div { display: grid; gap: 2px; text-align: center; }
.feature-status small { font-size: max(7px, .55cqw); color: #c4d7df; letter-spacing: .08em; }
.feature-status strong { font-size: max(11px, 1.15cqw); font-variant-numeric: tabular-nums; }
.game-shell[data-feature="MOTHERSHIP"]::before { filter: drop-shadow(0 0 1cqw #b45cff80); }
.game-shell[data-feature="MAX_WAYS"]::before { filter: drop-shadow(0 0 .8cqw #57d7ff80); }
.game-shell[data-feature="MOTHERSHIP"] .reels { box-shadow: 0 0 20px #b06bff50; }
.feature-screen { --feature-color: #91ff63; position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--feature-color) 20%, #04141a) 0, #010810f5 72%); }
.feature-screen-content { z-index: 1; display: flex; align-items: center; flex-direction: column; max-width: 75%; text-align: center; animation: feature-arrive 650ms cubic-bezier(.16,1,.3,1) both; }
.feature-kicker { color: var(--feature-color); font-size: clamp(9px, .85cqw, 16px); font-weight: 900; letter-spacing: .24em; }
.feature-ship { width: 15cqw; height: 11cqw; object-fit: contain; filter: drop-shadow(0 0 2cqw var(--feature-color)); animation: feature-hover 3s ease-in-out infinite; }
.feature-screen h2 { font-size: clamp(24px, 4.7cqw, 84px); letter-spacing: -.035em; line-height: 1.05; margin: 0 0 12px; color: #efffdc; text-shadow: 0 0 32px color-mix(in srgb, var(--feature-color) 45%, transparent); }
.feature-screen-value { color: #ffde77; font-size: clamp(22px, 3.2cqw, 60px); font-variant-numeric: tabular-nums; }
.feature-screen p { max-width: 550px; color: #c8dce0; font-size: clamp(11px, 1.15cqw, 19px); line-height: 1.5; margin: 14px 0 20px; }
.feature-screen button { border: 1px solid var(--feature-color); background: color-mix(in srgb, var(--feature-color) 80%, white); color: #071622; padding: 13px 28px; border-radius: 8px; font-weight: 900; letter-spacing: .06em; cursor: pointer; min-height: 44px; }
.feature-orbit { position: absolute; width: 65cqw; height: 65cqw; border: 1px solid color-mix(in srgb, var(--feature-color) 35%, transparent); border-radius: 50%; transform: rotateX(65deg); box-shadow: 0 0 5cqw color-mix(in srgb, var(--feature-color) 16%, transparent), inset 0 0 5cqw color-mix(in srgb, var(--feature-color) 16%, transparent); }
@keyframes feature-arrive { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes feature-hover { 50% { transform: translateY(-7px); } }
@media (max-height: 560px) and (orientation: landscape) { .invasion-picker { padding: 12px 16px; } .invasion-picker h2 { font-size: 23px; margin: 2px; } .invasion-picker > p { margin: 3px 0; } .invasion-options { gap: 8px; margin: 8px 0; } .invasion-card { padding: 9px 8px; gap: 4px; } .invasion-card img { height: 38px; width: 50px; } .invasion-card p { font-size: 10px; line-height: 1.3; } .invasion-card b { font-size: 15px; } .invasion-card strong { font-size: 18px; } .invasion-footer button { min-height: 34px; padding: 8px 14px; } .feature-screen p { margin: 8px 0 12px; } .feature-ship { height: 8cqw; } .feature-status { left: 17%; width: 66%; top: 77.5%; } }
@media (prefers-reduced-motion: reduce) { .feature-ship, .feature-screen-content { animation: none; } }
.paytable-mode-label { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 13px; color: #adc9ce; letter-spacing: .08em; }
.paytable-mode-label select { color: #e4ffcf; background: #0c2937; border: 1px solid #668e81; padding: 10px 14px; border-radius: 8px; font: inherit; }