* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#03040c; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; color:#fff; }
#gameShell { position:relative; width:100vw; height:100vh; background: radial-gradient(circle at 50% 20%, #172455 0%, #050615 45%, #010208 100%); }
#gameCanvas { display:block; width:100%; height:100%; }
.hidden { display:none !important; }
#hud { position:absolute; z-index:4; top:16px; left:16px; right:16px; display:grid; grid-template-columns: repeat(6, minmax(80px, 1fr)); gap:10px; pointer-events:none; }
.hud-card { min-height:54px; padding:8px 10px; border:1px solid rgba(255,255,255,.15); border-radius:16px; background:rgba(5,8,24,.58); backdrop-filter: blur(12px); box-shadow:0 0 24px rgba(0,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.25); }
.hud-card span { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#aab5d8; }
.hud-card b { font-size:19px; letter-spacing:.03em; }
.rift-card.blue-mode { border-color: rgba(0,245,255,.45); box-shadow:0 0 22px rgba(0,221,255,.18); }
.rift-card.red-mode { border-color: rgba(255,52,122,.5); box-shadow:0 0 22px rgba(255,52,122,.2); }
.bar { height:10px; margin-top:8px; border-radius:20px; background:rgba(255,255,255,.13); overflow:hidden; }
.bar i { display:block; height:100%; width:50%; border-radius:20px; background:linear-gradient(90deg,#00eaff,#ffe66d,#ff3d7f); box-shadow:0 0 15px currentColor; }
.panel { position:absolute; z-index:10; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(760px, calc(100vw - 32px)); padding:34px; border-radius:30px; text-align:center; background:linear-gradient(145deg, rgba(4,8,28,.86), rgba(16,4,35,.78)); border:1px solid rgba(255,255,255,.18); box-shadow:0 0 70px rgba(0,234,255,.15), 0 0 120px rgba(255,42,137,.12), inset 0 0 50px rgba(255,255,255,.04); backdrop-filter: blur(18px); }
h1 { margin:0; font-size: clamp(38px, 7vw, 86px); line-height:.9; letter-spacing:.03em; text-shadow: 0 0 16px rgba(0,239,255,.9), 0 0 34px rgba(255,46,129,.55); }
h2 { margin:10px 0 12px; color:#ffe66d; letter-spacing:.24em; text-transform:uppercase; font-size:clamp(15px,2vw,22px); }
.lead { color:#dce8ff; font-size:18px; max-width:610px; margin:0 auto 22px; line-height:1.5; }
.blue { color:#20ecff; text-shadow:0 0 12px #20ecff; } .red { color:#ff3d7f; text-shadow:0 0 12px #ff3d7f; }
.rules { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0; }
.rules div { padding:15px; border-radius:18px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.06); }
.rules strong { display:block; color:#fff; margin-bottom:6px; }
.rules span { display:block; color:#aab5d8; font-size:13px; line-height:1.35; }
.controls { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:20px 0; }
.controls span { font-size:12px; color:#dce8ff; padding:8px 11px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.11); }
button { cursor:pointer; border:0; border-radius:999px; padding:15px 28px; color:#06101f; font-weight:900; font-size:17px; letter-spacing:.08em; text-transform:uppercase; background:linear-gradient(90deg,#00eaff,#ffe66d,#ff3d7f); box-shadow:0 0 30px rgba(0,234,255,.35); }
button:hover { transform:translateY(-1px); filter:brightness(1.12); }
.tiny { color:#8794bf; font-size:12px; margin:15px 0 0; }
#toast { position:absolute; z-index:8; left:50%; top:120px; transform:translateX(-50%); padding:12px 18px; border-radius:999px; background:rgba(0,0,0,.48); border:1px solid rgba(255,255,255,.16); color:#fff; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:0; transition:.25s; pointer-events:none; box-shadow:0 0 32px rgba(0,234,255,.18); }
#toast.show { opacity:1; }
#overloadStrip { position:absolute; z-index:4; top:86px; left:24px; right:24px; pointer-events:none; padding:8px 12px 10px; border-radius:16px; background:rgba(5,8,24,.50); border:1px solid rgba(255,255,255,.13); backdrop-filter: blur(12px); box-shadow:0 0 30px rgba(0,234,255,.08), inset 0 0 24px rgba(255,255,255,.035); }
.overload-meta { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#aab5d8; }
.overload-meta b { color:#50ff9a; font-size:11px; text-shadow:0 0 10px rgba(80,255,154,.45); }
#overloadStrip.blue-mode { border-color:rgba(36,234,255,.28); box-shadow:0 0 34px rgba(36,234,255,.12), inset 0 0 24px rgba(36,234,255,.035); }
#overloadStrip.red-mode { border-color:rgba(255,61,127,.34); box-shadow:0 0 34px rgba(255,61,127,.14), inset 0 0 24px rgba(255,61,127,.04); }
#overloadStrip.warning { animation: overloadPulse .55s ease-in-out infinite alternate; }
.overload-track { height:12px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,.11), rgba(255,255,255,.18)); overflow:hidden; box-shadow: inset 0 0 10px rgba(0,0,0,.35); }
.overload-track i { display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#24eaff,#ffe66d,#ff3d7f); box-shadow:0 0 18px rgba(255,230,109,.55); transition:width .12s linear; }
@keyframes overloadPulse { from { filter:brightness(1); } to { filter:brightness(1.45); } }
.how-grid { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:12px; margin:20px 0; text-align:left; }
.how-grid div { padding:15px; border-radius:18px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.06); }
.how-grid strong { display:block; margin-bottom:6px; color:#fff; }
.how-grid span { color:#aab5d8; font-size:13px; line-height:1.35; }
@media (max-width: 840px) { #hud { grid-template-columns:repeat(2,1fr); } #overloadStrip { top:194px; left:16px; right:16px; } .rules, .how-grid { grid-template-columns:1fr; } .panel { padding:24px; } }
.stats-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin:18px 0; }
.stats-row span { padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#aab5d8; }
.stats-row b { color:#fff; }
.menu-grid { display:grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap:12px; margin:20px auto; max-width:560px; }
.shop-list { display:grid; gap:10px; margin:20px 0; max-height:min(58vh, 520px); overflow:auto; padding-right:4px; }
.shop-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.065); text-align:left; }
.shop-row strong { display:block; color:#fff; font-size:15px; }
.shop-row em { color:#ffe66d; font-style:normal; font-size:12px; }
.shop-row span { display:block; margin-top:4px; color:#aab5d8; font-size:12px; line-height:1.35; }
.shop-row button { flex:0 0 auto; padding:10px 14px; font-size:12px; letter-spacing:.04em; min-width:105px; }
button:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.4); }
@media (max-width: 720px) { .stats-row, .menu-grid { grid-template-columns:1fr; } .shop-row { align-items:stretch; flex-direction:column; } .shop-row button { width:100%; } }

.leaderboard-table { width:100%; border-collapse:separate; border-spacing:0 8px; margin:18px 0; }
.leaderboard-table th { color:#aab5d8; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:0 10px 6px; text-align:left; }
.leaderboard-table td { background:rgba(255,255,255,.07); border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding:12px 10px; color:#fff; font-weight:800; }
.leaderboard-table td:first-child { border-left:1px solid rgba(255,255,255,.12); border-radius:14px 0 0 14px; color:#ffe66d; }
.leaderboard-table td:last-child { border-right:1px solid rgba(255,255,255,.12); border-radius:0 14px 14px 0; text-align:right; }
.sound-pill { display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#dce8ff; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }


.name-modal { position:absolute; z-index:30; inset:0; display:grid; place-items:center; background:rgba(2,4,14,.62); backdrop-filter: blur(10px); }
.name-card { width:min(460px, calc(100vw - 34px)); padding:26px; border-radius:26px; text-align:center; background:linear-gradient(145deg, rgba(5,10,32,.95), rgba(28,8,48,.92)); border:1px solid rgba(255,255,255,.18); box-shadow:0 0 55px rgba(0,234,255,.22), 0 0 90px rgba(255,61,127,.13), inset 0 0 45px rgba(255,255,255,.04); }
.name-card h3 { margin:0 0 8px; font-size:25px; letter-spacing:.12em; text-transform:uppercase; color:#ffe66d; text-shadow:0 0 18px rgba(255,230,109,.55); }
.name-card p { margin:0 0 16px; color:#dce8ff; }
.name-card input { width:100%; height:54px; border-radius:16px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; text-align:center; font-size:24px; font-weight:900; letter-spacing:.14em; outline:none; text-transform:uppercase; box-shadow: inset 0 0 18px rgba(0,234,255,.08); }
.name-card input:focus { border-color:#24eaff; box-shadow:0 0 20px rgba(36,234,255,.24), inset 0 0 18px rgba(0,234,255,.1); }
.name-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.secondary-btn { color:#dce8ff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); box-shadow:none; }
.ship-preview { display:inline-flex; align-items:center; justify-content:center; width:58px; height:42px; margin-right:10px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.22); vertical-align:middle; font-weight:900; letter-spacing:.05em; }
.shop-row strong .ship-preview { margin-top:-3px; }


.legend-panel { margin:18px auto 8px; padding:14px; border-radius:22px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); box-shadow: inset 0 0 25px rgba(255,255,255,.025); }
.legend-title { margin-bottom:10px; color:#ffe66d; font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; text-shadow:0 0 12px rgba(255,230,109,.45); }
.legend-grid { display:grid; grid-template-columns:repeat(4, minmax(110px, 1fr)); gap:10px; }
.legend-item { min-height:78px; padding:10px 8px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.legend-item b { font-size:12px; line-height:1.1; color:#fff; }
.legend-item small { font-size:10px; line-height:1.1; color:#aab5d8; text-transform:uppercase; letter-spacing:.08em; }
.legend-icon { position:relative; display:block; width:38px; height:30px; flex:0 0 auto; }
.legend-icon::before, .legend-icon::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.icon-shard::before { width:17px; height:17px; transform:translate(-50%,-50%) rotate(45deg); background:#ffe66d; border:2px solid #fff7b4; box-shadow:0 0 18px #ffe66d; }
.icon-shield::before { width:25px; height:25px; border-radius:50%; background:#50ff9a; border:2px solid rgba(255,255,255,.85); box-shadow:0 0 20px #50ff9a; }
.icon-boost::before { width:24px; height:24px; border-radius:50%; background:#b26dff; border:2px solid rgba(255,255,255,.85); box-shadow:0 0 20px #b26dff; }
.icon-gate-blue::before, .icon-gate-red::before { width:30px; height:24px; border:4px solid currentColor; border-radius:3px; background:rgba(255,255,255,.04); box-shadow:0 0 20px currentColor; }
.icon-gate-blue { color:#24eaff; } .icon-gate-red { color:#ff3d7f; }
.icon-gate-blue::after, .icon-gate-red::after { width:18px; height:2px; background:#fff; box-shadow:0 0 10px #fff; }
.icon-hazard::before { width:31px; height:22px; border-radius:7px; background:#ff3d7f; border:2px solid #ff9abc; box-shadow:0 0 20px #ff3d7f; }
.icon-hazard::after { width:16px; height:8px; border-top:2px solid #fff; border-left:2px solid transparent; border-right:2px solid transparent; transform:translate(-50%,-45%); }
.icon-ghost::before { width:31px; height:22px; border-radius:7px; background:rgba(255,255,255,.12); border:2px solid rgba(36,234,255,.38); box-shadow:0 0 12px rgba(36,234,255,.35); opacity:.55; }
.icon-mine::before { width:24px; height:24px; border-radius:50%; background:#05000b; border:2px solid #fff; box-shadow:0 0 18px rgba(255,61,127,.75); }
.icon-mine::after { width:34px; height:2px; background:#ff3d7f; box-shadow:0 0 12px #ff3d7f; }
@media (max-width: 840px) { .legend-grid { grid-template-columns:repeat(2, minmax(110px,1fr)); } }

/* v11 menu scaling + clear sound toggle */
.panel {
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: clamp(16px, 2.5vh, 28px);
}
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: rgba(36,234,255,.38); border-radius: 999px; }
.panel h1,
h1 {
  font-size: clamp(34px, 6vh, 68px);
  line-height: .88;
}
.panel h2,
h2 {
  margin: clamp(6px, 1vh, 10px) 0 clamp(8px, 1.2vh, 12px);
  font-size: clamp(13px, 2vh, 20px);
}
.lead {
  font-size: clamp(14px, 1.9vh, 18px);
  margin-bottom: clamp(10px, 1.6vh, 18px);
}
.stats-row {
  margin: clamp(10px, 1.5vh, 16px) 0;
}
.stats-row span {
  padding: clamp(8px, 1.3vh, 12px) 12px;
}
.legend-panel {
  margin: clamp(10px, 1.5vh, 14px) auto clamp(6px, 1vh, 8px);
  padding: clamp(10px, 1.4vh, 14px);
}
.legend-title { margin-bottom: clamp(6px, 1vh, 10px); }
.legend-grid { gap: clamp(6px, 1vh, 10px); }
.legend-item {
  min-height: clamp(58px, 8.5vh, 78px);
  padding: clamp(6px, 1vh, 10px) 7px;
  gap: 4px;
}
.legend-icon {
  width: clamp(28px, 4.2vh, 38px);
  height: clamp(24px, 3.4vh, 30px);
}
.menu-grid {
  margin: clamp(12px, 1.8vh, 18px) auto;
  gap: clamp(8px, 1.3vh, 12px);
}
.menu-grid button {
  padding: clamp(12px, 1.7vh, 15px) 18px;
  font-size: clamp(14px, 2.1vh, 17px);
}
.menu-grid .sound-toggle-btn {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, #18213f, #0b5360, #1a1834);
  color: #eaf7ff;
  border: 1px solid rgba(36,234,255,.38);
  box-shadow: 0 0 24px rgba(36,234,255,.18), inset 0 0 22px rgba(255,255,255,.05);
}
.rules {
  margin: clamp(10px, 1.6vh, 16px) 0 0;
  gap: 10px;
}
.rules div {
  padding: clamp(9px, 1.4vh, 13px);
}
.rules strong { margin-bottom: 4px; }
.rules span { font-size: clamp(11px, 1.55vh, 13px); }
.tiny { margin-top: clamp(8px, 1.2vh, 12px); }
@media (max-height: 780px) {
  .panel { width: min(980px, calc(100vw - 24px)); }
  .legend-grid { grid-template-columns: repeat(4, minmax(92px, 1fr)); }
  .legend-item b { font-size: 11px; }
  .legend-item small { font-size: 9px; }
  .stats-row { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .rules { display:none; }
}
@media (max-height: 650px) {
  .panel h1, h1 { font-size: clamp(28px, 7vh, 50px); }
  .lead { display:none; }
  .legend-grid { grid-template-columns: repeat(4, minmax(82px, 1fr)); }
  .legend-item { min-height: 52px; }
  .legend-icon { transform: scale(.85); }
  .menu-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); max-width: 720px; }
  .menu-grid .sound-toggle-btn { grid-column: auto; }
}

/* v12 fixed game-style menu: no webpage scrolling on the main menu */
.panel.start-panel {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  padding: clamp(14px, 2vh, 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.start-panel h1 {
  font-size: clamp(30px, 6.2vh, 58px);
  line-height: .86;
  margin-bottom: 0;
}
.start-panel h2 {
  font-size: clamp(12px, 1.9vh, 17px);
  margin: clamp(5px, .8vh, 8px) 0 clamp(6px, 1vh, 9px);
}
.start-panel .lead {
  font-size: clamp(12px, 1.75vh, 15px);
  line-height: 1.32;
  margin: 0 auto clamp(7px, 1vh, 10px);
  max-width: 620px;
}
.start-panel .stats-row {
  margin: clamp(6px, .9vh, 9px) 0;
  gap: 8px;
}
.start-panel .stats-row span {
  padding: clamp(6px, .9vh, 9px) 10px;
  font-size: clamp(12px, 1.55vh, 15px);
}
.start-panel .legend-panel {
  margin: clamp(6px, .9vh, 10px) auto clamp(8px, 1vh, 10px);
  padding: clamp(8px, 1.1vh, 11px);
  width: 100%;
}
.start-panel .legend-title {
  margin-bottom: clamp(4px, .7vh, 7px);
  font-size: clamp(10px, 1.45vh, 12px);
}
.start-panel .legend-grid {
  grid-template-columns: repeat(8, minmax(74px, 1fr));
  gap: clamp(5px, .7vh, 8px);
}
.start-panel .legend-item {
  min-height: clamp(52px, 7.2vh, 64px);
  padding: clamp(5px, .75vh, 7px) 5px;
  gap: 3px;
}
.start-panel .legend-icon {
  transform: scale(.78);
  height: 22px;
}
.start-panel .legend-item b {
  font-size: clamp(9px, 1.25vh, 11px);
}
.start-panel .legend-item small {
  font-size: clamp(7px, 1vh, 9px);
}
.start-panel .menu-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  max-width: 760px;
  margin: clamp(7px, 1vh, 10px) auto;
  gap: clamp(7px, .9vh, 9px);
}
.start-panel .menu-grid button {
  padding: clamp(9px, 1.35vh, 12px) 12px;
  font-size: clamp(12px, 1.55vh, 15px);
  min-height: 42px;
}
.start-panel .menu-grid .sound-toggle-btn {
  grid-column: span 2;
}
.start-panel .rules,
.start-panel .tiny {
  display: none;
}
.panel.info-panel,
.panel.shop-panel,
.panel.gameover-panel {
  max-height: calc(100vh - 28px);
  overflow-y: auto;
}
@media (max-width: 980px) {
  .start-panel .legend-grid { grid-template-columns: repeat(4, minmax(86px, 1fr)); }
  .start-panel .menu-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); max-width: 560px; }
  .start-panel .menu-grid .sound-toggle-btn { grid-column: 1 / -1; }
}
@media (max-height: 720px) {
  .start-panel h1 { font-size: clamp(26px, 5.4vh, 42px); }
  .start-panel .lead { display:none; }
  .start-panel .legend-grid { grid-template-columns: repeat(8, minmax(64px, 1fr)); }
  .start-panel .legend-item { min-height: 46px; }
  .start-panel .legend-icon { transform: scale(.65); height: 18px; }
  .start-panel .menu-grid { grid-template-columns: repeat(4, minmax(105px, 1fr)); max-width: 700px; }
  .start-panel .menu-grid .sound-toggle-btn { grid-column: span 2; }
}
@media (max-height: 600px) {
  .start-panel .stats-row { display:none; }
  .start-panel .legend-grid { grid-template-columns: repeat(4, minmax(72px, 1fr)); }
  .start-panel .legend-item:nth-child(n+5) { display:none; }
  .start-panel .menu-grid button { min-height: 36px; padding: 7px 9px; }
}

/* v13 menu + garage polish */
.panel.start-panel {
  width: min(900px, calc(100vw - 44px));
  transform: translate(-50%, -48%);
  border-color: rgba(36,234,255,.24);
  box-shadow: 0 0 0 1px rgba(36,234,255,.08), 0 0 65px rgba(0,234,255,.18), 0 0 110px rgba(255,61,127,.10), inset 0 0 55px rgba(255,255,255,.045);
}
.start-panel::before {
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:34px;
  border:1px solid rgba(36,234,255,.12);
  pointer-events:none;
  box-shadow:0 0 34px rgba(36,234,255,.10);
}
.start-panel .menu-grid {
  max-width: 680px;
}
.start-panel .menu-grid button,
.menu-grid button,
.shop-row button,
.ship-card button {
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.start-panel .menu-grid button:hover,
.menu-grid button:hover,
.shop-row button:hover,
.ship-card button:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:0 0 36px rgba(36,234,255,.42), 0 0 22px rgba(255,61,127,.20);
}

.garage-list {
  display:grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap:14px;
  margin:18px 0 20px;
  max-height:min(62vh, 620px);
  overflow:auto;
  padding:4px 6px 4px 0;
}
.ship-card {
  position:relative;
  display:grid;
  grid-template-columns: 150px 1fr;
  align-items:center;
  gap:14px;
  min-height:158px;
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow: inset 0 0 28px rgba(255,255,255,.025), 0 16px 36px rgba(0,0,0,.18);
  text-align:left;
  overflow:hidden;
}
.ship-card::after {
  content:"";
  position:absolute;
  inset:-60px -50px auto auto;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle, var(--ship-glow), transparent 62%);
  opacity:.18;
  pointer-events:none;
}
.ship-card.selected {
  border-color:var(--ship-glow);
  box-shadow:0 0 30px color-mix(in srgb, var(--ship-glow) 28%, transparent), inset 0 0 30px rgba(255,255,255,.035);
}
.ship-card.locked .ship-model-stage { filter:saturate(.75) brightness(.78); }
.ship-card h3 {
  margin:0 0 6px;
  font-size:20px;
  line-height:1.05;
  color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.18);
}
.ship-card p { margin:0 0 10px; color:#b7c4e7; font-size:13px; line-height:1.35; }
.ship-card .cost-line { color:#ffe66d; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.ship-card button { width:100%; padding:11px 12px; font-size:12px; margin-top:10px; }
.ship-card .selected-tag { color:#50ff9a; font-weight:900; }
.ship-model-stage {
  position:relative;
  height:124px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ship-glow) 24%, transparent), rgba(0,0,0,.28) 52%, rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 28px rgba(255,255,255,.035), 0 0 28px color-mix(in srgb, var(--ship-glow) 18%, transparent);
  perspective:700px;
  overflow:hidden;
}
.ship-model-stage::before {
  content:"";
  position:absolute;
  width:95px;
  height:16px;
  bottom:18px;
  border-radius:50%;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--ship-glow) 42%, transparent), transparent 72%);
  filter:blur(4px);
  opacity:.75;
}
.ship-model-stage::after {
  content:"";
  position:absolute;
  inset:12px;
  border-radius:18px;
  background:linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.08) 47%, transparent 53% 100%);
  transform:translateX(-60%);
  animation: garageShine 3.2s ease-in-out infinite;
}
.ship-model {
  position:relative;
  width:106px;
  height:106px;
  transform-style:preserve-3d;
  animation: shipRotate 2.9s ease-in-out infinite;
  filter:drop-shadow(0 0 15px var(--ship-glow)) drop-shadow(0 0 28px color-mix(in srgb, var(--ship-glow) 45%, transparent));
}
.ship-model .trail {
  position:absolute;
  left:50%;
  top:58%;
  width:24px;
  height:58px;
  transform:translateX(-50%);
  clip-path:polygon(50% 100%, 0 0, 100% 0);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--ship-glow) 85%, white), transparent);
  opacity:.58;
  animation: trailPulse .8s ease-in-out infinite alternate;
}
.ship-model .hull,
.ship-model .wing-l,
.ship-model .wing-r,
.ship-model .cockpit,
.ship-model .stripe { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.ship-model .hull {
  width:34px;
  height:86px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ship-glow) 30%, #050816), #080718 48%, color-mix(in srgb, var(--ship-alt) 22%, #080718));
  border:2px solid var(--ship-glow);
  box-shadow:inset 0 0 12px rgba(255,255,255,.12), 0 0 16px var(--ship-glow);
  clip-path:polygon(50% 0, 82% 35%, 64% 100%, 50% 82%, 36% 100%, 18% 35%);
}
.ship-model .wing-l,
.ship-model .wing-r {
  width:52px;
  height:62px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ship-glow) 24%, #050816), #07091d 70%);
  border:2px solid var(--ship-glow);
  box-shadow:0 0 12px color-mix(in srgb, var(--ship-glow) 70%, transparent);
}
.ship-model .wing-l { transform:translate(-72%,-24%) skewY(-8deg); clip-path:polygon(100% 0, 12% 52%, 100% 80%); }
.ship-model .wing-r { transform:translate(-28%,-24%) skewY(8deg); clip-path:polygon(0 0, 88% 52%, 0 80%); }
.ship-model .cockpit {
  width:18px;
  height:30px;
  top:39%;
  border-radius:50%;
  background:linear-gradient(180deg,#fff, var(--ship-glow));
  box-shadow:0 0 14px var(--ship-glow);
}
.ship-model .stripe {
  width:66px;
  height:2px;
  top:50%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  box-shadow:0 0 8px var(--ship-glow);
}
.ship-model.arrow .wing-l { clip-path:polygon(100% 12%, 12% 70%, 88% 84%); }
.ship-model.arrow .wing-r { clip-path:polygon(0 12%, 88% 70%, 12% 84%); }
.ship-model.wraith .hull { width:30px; clip-path:polygon(50% 0, 72% 38%, 56% 100%, 50% 74%, 44% 100%, 28% 38%); }
.ship-model.wraith .wing-l { width:66px; height:48px; transform:translate(-76%,-18%) skewY(-14deg); clip-path:polygon(100% 10%, 0 48%, 100% 92%); }
.ship-model.wraith .wing-r { width:66px; height:48px; transform:translate(-24%,-18%) skewY(14deg); clip-path:polygon(0 10%, 100% 48%, 0 92%); }
.ship-model.phantom .hull { width:42px; clip-path:polygon(50% 0, 90% 28%, 64% 64%, 82% 100%, 50% 76%, 18% 100%, 36% 64%, 10% 28%); }
.ship-model.phantom .wing-l { width:54px; height:76px; transform:translate(-72%,-18%); clip-path:polygon(100% 0, 0 50%, 76% 60%, 96% 100%); }
.ship-model.phantom .wing-r { width:54px; height:76px; transform:translate(-28%,-18%); clip-path:polygon(0 0, 100% 50%, 24% 60%, 4% 100%); }
.ship-model.viper .hull { width:32px; height:92px; clip-path:polygon(50% 0, 76% 35%, 60% 78%, 50% 100%, 40% 78%, 24% 35%); }
.ship-model.viper .wing-l { width:70px; height:70px; transform:translate(-79%,-14%) rotate(-5deg); clip-path:polygon(100% 0, 0 28%, 70% 54%, 15% 100%, 100% 76%); }
.ship-model.viper .wing-r { width:70px; height:70px; transform:translate(-21%,-14%) rotate(5deg); clip-path:polygon(0 0, 100% 28%, 30% 54%, 85% 100%, 0 76%); }
.ship-model.reaper .hull { width:30px; height:94px; background:linear-gradient(180deg,#10111c,#01020a 58%, color-mix(in srgb, var(--ship-alt) 20%, #01020a)); clip-path:polygon(50% 0, 74% 42%, 60% 100%, 50% 78%, 40% 100%, 26% 42%); }
.ship-model.reaper .wing-l { width:82px; height:80px; transform:translate(-84%,-24%) rotate(-8deg); clip-path:polygon(100% 20%, 0 0, 32% 48%, 0 100%, 88% 76%); }
.ship-model.reaper .wing-r { width:82px; height:80px; transform:translate(-16%,-24%) rotate(8deg); clip-path:polygon(0 20%, 100% 0, 68% 48%, 100% 100%, 12% 76%); }
@keyframes shipRotate {
  0%,100% { transform: rotateX(58deg) rotateZ(-8deg) translateY(1px); }
  50% { transform: rotateX(58deg) rotateZ(8deg) translateY(-4px); }
}
@keyframes trailPulse { from { opacity:.34; transform:translateX(-50%) scaleY(.82); } to { opacity:.78; transform:translateX(-50%) scaleY(1.08); } }
@keyframes garageShine { 0%,42%{ transform:translateX(-75%); opacity:0; } 55%{ opacity:.7; } 78%,100%{ transform:translateX(75%); opacity:0; } }
@media (max-width: 760px) {
  .garage-list { grid-template-columns:1fr; }
  .ship-card { grid-template-columns: 128px 1fr; min-height:142px; }
  .ship-model-stage { height:112px; }
}
@media (max-height: 680px) {
  .garage-list { grid-template-columns: repeat(2, minmax(230px, 1fr)); max-height:54vh; }
  .ship-card { min-height:128px; grid-template-columns: 120px 1fr; padding:10px; }
  .ship-model-stage { height:104px; }
  .ship-model { transform:scale(.86); }
}


/* v14 submission polish */
.hud-card:has(#boostBar) {
  position:relative;
}
.hud-card:has(#boostBar)::after {
  content:"SHIFT";
  position:absolute;
  right:9px;
  top:8px;
  font-size:9px;
  letter-spacing:.14em;
  color:#b26dff;
  opacity:.8;
  text-shadow:0 0 10px #b26dff;
}
.start-panel .tiny,
.gameover-panel .tiny {
  color:#c4cdf0;
}
.info-panel .how-grid div:nth-child(4) {
  border-color:rgba(178,109,255,.28);
  box-shadow:inset 0 0 22px rgba(178,109,255,.08);
}

/* v15 website-ready polish: run exit, expanded premium garage, clearer ship perks */
.exit-run-btn {
  position:absolute;
  z-index:6;
  right:18px;
  top:148px;
  padding:10px 18px;
  min-width:92px;
  font-size:12px;
  letter-spacing:.12em;
  color:#dce8ff;
  background:rgba(5,8,24,.68);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 20px rgba(36,234,255,.14), inset 0 0 18px rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}
.exit-run-btn:hover { border-color:#ff3d7f; color:#fff; box-shadow:0 0 24px rgba(255,61,127,.24); }
.exit-card h3 { color:#ff6aa5; text-shadow:0 0 18px rgba(255,61,127,.55); }
.exit-card p { color:#fff; font-weight:800; }
.exit-card .name-actions button:last-child { background:linear-gradient(90deg,#ff3d7f,#ffe66d); }
.garage-panel { width:min(1180px, calc(100vw - 28px)); }
.garage-panel h1 { font-size:clamp(40px, 6vw, 70px); }
.garage-list {
  grid-template-columns:repeat(2, minmax(360px, 1fr));
  max-height:min(68vh, 720px);
  gap:16px;
}
.ship-card {
  grid-template-columns:220px 1fr;
  min-height:186px;
}
.ship-model-stage { height:156px; }
.ship-model {
  width:138px;
  height:138px;
  animation: shipRotatePremium 3.1s ease-in-out infinite;
}
.ship-perk {
  display:inline-flex;
  margin:2px 0 8px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#50ff9a;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ship-model.fang .hull { width:30px; height:96px; clip-path:polygon(50% 0, 76% 32%, 62% 100%, 50% 76%, 38% 100%, 24% 32%); }
.ship-model.fang .wing-l { width:72px; height:72px; transform:translate(-82%,-16%) rotate(-8deg); clip-path:polygon(100% 0, 0 42%, 100% 70%, 72% 100%); }
.ship-model.fang .wing-r { width:72px; height:72px; transform:translate(-18%,-16%) rotate(8deg); clip-path:polygon(0 0, 100% 42%, 0 70%, 28% 100%); }
.ship-model.serpent .hull { width:36px; height:104px; border-radius:30% 30% 46% 46%; clip-path:polygon(50% 0, 76% 22%, 58% 45%, 78% 66%, 50% 100%, 22% 66%, 42% 45%, 24% 22%); }
.ship-model.serpent .wing-l { width:62px; height:82px; transform:translate(-72%,-12%) skewY(20deg); clip-path:polygon(100% 0, 18% 35%, 100% 70%, 35% 100%); }
.ship-model.serpent .wing-r { width:62px; height:82px; transform:translate(-28%,-12%) skewY(-20deg); clip-path:polygon(0 0, 82% 35%, 0 70%, 65% 100%); }
.ship-model.monarch .hull { width:46px; height:94px; clip-path:polygon(50% 0, 92% 35%, 68% 70%, 86% 100%, 50% 78%, 14% 100%, 32% 70%, 8% 35%); }
.ship-model.monarch .wing-l { width:88px; height:82px; transform:translate(-84%,-16%) rotate(-3deg); clip-path:polygon(100% 0, 0 36%, 72% 56%, 16% 100%, 100% 78%); }
.ship-model.monarch .wing-r { width:88px; height:82px; transform:translate(-16%,-16%) rotate(3deg); clip-path:polygon(0 0, 100% 36%, 28% 56%, 84% 100%, 0 78%); }
.ship-model.dragon .hull { width:34px; height:108px; clip-path:polygon(50% 0, 78% 28%, 62% 66%, 80% 100%, 50% 82%, 20% 100%, 38% 66%, 22% 28%); }
.ship-model.dragon .wing-l { width:94px; height:88px; transform:translate(-88%,-15%) rotate(-10deg); clip-path:polygon(100% 0, 0 10%, 46% 42%, 6% 78%, 100% 96%, 70% 55%); }
.ship-model.dragon .wing-r { width:94px; height:88px; transform:translate(-12%,-15%) rotate(10deg); clip-path:polygon(0 0, 100% 10%, 54% 42%, 94% 78%, 0 96%, 30% 55%); }
.ship-model.eclipse .hull { width:32px; height:102px; background:linear-gradient(180deg,#111827,#02030a 55%, #06132d); clip-path:polygon(50% 0, 74% 36%, 60% 100%, 50% 78%, 40% 100%, 26% 36%); }
.ship-model.eclipse .wing-l { width:92px; height:70px; transform:translate(-86%,-22%) rotate(-5deg); clip-path:polygon(100% 20%, 0 0, 25% 52%, 0 100%, 88% 74%); }
.ship-model.eclipse .wing-r { width:92px; height:70px; transform:translate(-14%,-22%) rotate(5deg); clip-path:polygon(0 20%, 100% 0, 75% 52%, 100% 100%, 12% 74%); }
.ship-model.celestial .hull { width:38px; height:110px; background:linear-gradient(180deg,#f9fbff,#09101d 45%, #02030a); clip-path:polygon(50% 0, 78% 38%, 62% 100%, 50% 78%, 38% 100%, 22% 38%); }
.ship-model.celestial .wing-l { width:106px; height:96px; transform:translate(-92%,-24%) rotate(-8deg); clip-path:polygon(100% 22%, 0 0, 28% 50%, 0 100%, 86% 78%); }
.ship-model.celestial .wing-r { width:106px; height:96px; transform:translate(-8%,-24%) rotate(8deg); clip-path:polygon(0 22%, 100% 0, 72% 50%, 100% 100%, 14% 78%); }
@keyframes shipRotatePremium {
  0%,100% { transform: rotateX(60deg) rotateZ(-10deg) rotateY(-13deg) translateY(1px); }
  50% { transform: rotateX(60deg) rotateZ(10deg) rotateY(13deg) translateY(-6px); }
}
@media (max-width: 900px) {
  .garage-list { grid-template-columns:1fr; max-height:66vh; }
  .ship-card { grid-template-columns:170px 1fr; }
  .ship-model-stage { height:132px; }
  .ship-model { transform:scale(.88); }
}
@media (max-height: 680px) {
  .exit-run-btn { top:128px; right:12px; padding:8px 14px; }
  .garage-list { max-height:58vh; }
  .ship-card { min-height:146px; }
  .ship-model-stage { height:118px; }
}

/* v16 legendary / paid-style ship garage additions */
.ship-card:has(.legendary-stage) {
  position:relative;
  overflow:hidden;
}
.ship-card:has(.legendary-stage)::before {
  content:'LEGENDARY';
  position:absolute;
  right:16px;
  top:12px;
  z-index:1;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.16em;
  color:#050717;
  padding:5px 9px;
  border-radius:999px;
  background:linear-gradient(90deg,#24eaff,#ffe66d,#ff3d7f,#b26dff);
  box-shadow:0 0 20px rgba(255,230,109,.28);
}
.legendary-stage {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ship-glow) 42%, transparent), transparent 44%),
    radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--ship-alt) 24%, transparent), transparent 56%),
    rgba(8,10,26,.76);
}
.legendary-stage::after {
  opacity:.42;
  background:conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--ship-glow) 34%, transparent), transparent, color-mix(in srgb, var(--ship-alt) 28%, transparent), transparent);
  animation: legendaryAura 5.5s linear infinite;
}
.ship-model.legendary-model {
  width:152px;
  height:152px;
  animation: legendaryShipRotate 3.8s ease-in-out infinite;
}
.ship-model.prism .hull {
  width:44px; height:112px;
  background:linear-gradient(180deg,#ffffff,#24eaff 22%,#ff4fd8 55%,#ffe66d);
  clip-path:polygon(50% 0, 88% 33%, 66% 68%, 92% 100%, 50% 78%, 8% 100%, 34% 68%, 12% 33%);
  animation: prismHue 5s linear infinite;
}
.ship-model.prism .wing-l { width:106px; height:84px; transform:translate(-91%,-18%) rotate(-8deg); clip-path:polygon(100% 0, 0 24%, 70% 58%, 10% 100%, 100% 76%); background:linear-gradient(90deg,#24eaff,#ffe66d,#ff3d7f); animation: prismHue 5s linear infinite; }
.ship-model.prism .wing-r { width:106px; height:84px; transform:translate(-9%,-18%) rotate(8deg); clip-path:polygon(0 0, 100% 24%, 30% 58%, 90% 100%, 0 76%); background:linear-gradient(90deg,#ff3d7f,#ffe66d,#24eaff); animation: prismHue 5s linear infinite; }
.ship-model.prism .cockpit { width:26px; height:34px; background:#fff; box-shadow:0 0 22px #fff, 0 0 40px #24eaff; }
.ship-model.prism .trail { background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(36,234,255,.42),rgba(255,61,127,.18),transparent); animation: prismHue 5s linear infinite; }
.ship-model.seraph .hull { width:42px; height:114px; background:linear-gradient(180deg,#fffbe8,#1b2440 50%,#050712); clip-path:polygon(50% 0, 80% 36%, 62% 100%, 50% 78%, 38% 100%, 20% 36%); }
.ship-model.seraph .wing-l { width:116px; height:100px; transform:translate(-94%,-24%) rotate(-8deg); clip-path:polygon(100% 18%, 0 0, 30% 50%, 0 100%, 88% 78%); }
.ship-model.seraph .wing-r { width:116px; height:100px; transform:translate(-6%,-24%) rotate(8deg); clip-path:polygon(0 18%, 100% 0, 70% 50%, 100% 100%, 12% 78%); }
.ship-model.seraph .cockpit { background:#fff8d4; box-shadow:0 0 24px #fff8d4; }
.ship-model.leviathan .hull { width:40px; height:120px; background:linear-gradient(180deg,#9d5cff,#05010d 58%,#20003d); border-radius:34% 34% 48% 48%; clip-path:polygon(50% 0, 78% 22%, 56% 45%, 82% 68%, 50% 100%, 18% 68%, 44% 45%, 22% 22%); }
.ship-model.leviathan .wing-l { width:116px; height:88px; transform:translate(-92%,-14%) skewY(18deg); clip-path:polygon(100% 0, 0 34%, 100% 70%, 30% 100%); }
.ship-model.leviathan .wing-r { width:116px; height:88px; transform:translate(-8%,-14%) skewY(-18deg); clip-path:polygon(0 0, 100% 34%, 0 70%, 70% 100%); }
.ship-model.leviathan .cockpit { background:#caa7ff; box-shadow:0 0 24px #9d5cff; }
.ship-model.phoenix .hull { width:38px; height:120px; background:linear-gradient(180deg,#ffe66d,#421006 55%,#130005); clip-path:polygon(50% 0, 80% 30%, 64% 68%, 84% 100%, 50% 80%, 16% 100%, 36% 68%, 20% 30%); }
.ship-model.phoenix .wing-l { width:120px; height:96px; transform:translate(-94%,-16%) rotate(-10deg); clip-path:polygon(100% 0, 0 8%, 46% 42%, 5% 78%, 100% 98%, 70% 56%); }
.ship-model.phoenix .wing-r { width:120px; height:96px; transform:translate(-6%,-16%) rotate(10deg); clip-path:polygon(0 0, 100% 8%, 54% 42%, 95% 78%, 0 98%, 30% 56%); }
.ship-model.phoenix .cockpit { background:#ffe66d; box-shadow:0 0 24px #ff8a2b; }
.ship-model.aurora .hull { width:48px; height:126px; background:linear-gradient(180deg,#6fffd8,#092b2d 44%,#0c1536); clip-path:polygon(50% 0, 84% 34%, 66% 100%, 50% 78%, 34% 100%, 16% 34%); }
.ship-model.aurora .wing-l { width:124px; height:92px; transform:translate(-94%,-18%) rotate(-5deg); clip-path:polygon(100% 0, 0 34%, 66% 58%, 12% 100%, 100% 82%); }
.ship-model.aurora .wing-r { width:124px; height:92px; transform:translate(-6%,-18%) rotate(5deg); clip-path:polygon(0 0, 100% 34%, 34% 58%, 88% 100%, 0 82%); }
.ship-model.aurora .cockpit { background:#d7fff5; box-shadow:0 0 24px #6fffd8; }
@keyframes legendaryAura { to { transform:rotate(360deg); } }
@keyframes legendaryShipRotate {
  0%,100% { transform: rotateX(60deg) rotateZ(-13deg) rotateY(-18deg) translateY(1px) scale(1); }
  50% { transform: rotateX(60deg) rotateZ(13deg) rotateY(18deg) translateY(-8px) scale(1.03); }
}
@keyframes prismHue { to { filter:hue-rotate(360deg) saturate(1.35); } }

.icon-bigshard{
  background: radial-gradient(circle, #fff 0 12%, #fff2a6 13% 42%, #ffe66d 43% 70%, transparent 71%);
  clip-path: polygon(50% 0%, 88% 50%, 50% 100%, 12% 50%);
  box-shadow: 0 0 18px rgba(255,230,109,.85), 0 0 34px rgba(255,242,166,.45);
}

/* v17 ship lighting polish: brighter bodies, neon vinyls, distinct legendary identities */
.ship-card {
  background:
    radial-gradient(circle at 22% 50%, color-mix(in srgb, var(--ship-glow) 20%, transparent), transparent 38%),
    radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--ship-alt) 14%, transparent), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
}
.ship-model-stage {
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ship-glow) 42%, transparent), transparent 42%),
    radial-gradient(circle at 50% 66%, color-mix(in srgb, var(--ship-alt) 22%, transparent), transparent 60%),
    linear-gradient(145deg, rgba(5,8,24,.72), rgba(18,10,36,.58));
}
.ship-model::before,
.ship-model::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:6;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.ship-model::before {
  width:112px;
  height:112px;
  background:
    linear-gradient(90deg, transparent 14%, var(--ship-glow) 47%, #fff 50%, var(--ship-alt) 53%, transparent 86%),
    linear-gradient(145deg, transparent 22%, color-mix(in srgb, var(--ship-glow) 90%, white) 48%, transparent 66%),
    linear-gradient(35deg, transparent 22%, color-mix(in srgb, var(--ship-alt) 90%, white) 49%, transparent 68%);
  opacity:.46;
  filter:blur(.2px) drop-shadow(0 0 8px var(--ship-glow));
  clip-path:polygon(50% 0, 92% 44%, 68% 52%, 86% 94%, 50% 66%, 14% 94%, 32% 52%, 8% 44%);
  mix-blend-mode:screen;
  animation: vinylPulse 1.8s ease-in-out infinite alternate;
}
.ship-model::after {
  width:132px;
  height:132px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--ship-glow) 75%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--ship-glow) 65%, transparent), inset 0 0 22px color-mix(in srgb, var(--ship-alt) 28%, transparent);
  opacity:.32;
}
.ship-model .hull,
.ship-model .wing-l,
.ship-model .wing-r {
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--ship-glow) 34%, transparent),
    0 0 16px color-mix(in srgb, var(--ship-glow) 72%, transparent),
    0 0 30px color-mix(in srgb, var(--ship-alt) 26%, transparent);
}
.ship-model .wing-l,
.ship-model .wing-r {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ship-glow) 48%, #071126), #080a18 50%, color-mix(in srgb, var(--ship-alt) 34%, #050816));
}
.ship-model .stripe {
  width:82px;
  height:3px;
  background:linear-gradient(90deg, transparent, #fff, var(--ship-glow), #fff, transparent);
  box-shadow:0 0 12px var(--ship-glow), 0 0 24px var(--ship-alt);
}
.ship-card.locked .ship-model-stage { filter:saturate(.9) brightness(.9); }
.ship-card.locked .ship-model::before { opacity:.34; }

.ship-model.prism::before {
  background:conic-gradient(from 0deg, #24eaff, #ffe66d, #ff3d7f, #b26dff, #50ff9a, #24eaff);
  animation: prismHue 5s linear infinite, vinylPulse 1.6s ease-in-out infinite alternate;
  opacity:.62;
}
.ship-model.seraph::before { background:linear-gradient(90deg, transparent, #fff8d4, #fff, #ffe66d, transparent), linear-gradient(35deg, transparent, #fff8bd, transparent); opacity:.6; }
.ship-model.leviathan::before { background:linear-gradient(90deg, transparent, #9d5cff, #caa7ff, #5412a8, transparent), linear-gradient(145deg, transparent, #9d5cff, transparent); opacity:.58; }
.ship-model.phoenix::before { background:linear-gradient(90deg, transparent, #ff8a2b, #ffe66d, #ff3d2f, transparent), linear-gradient(25deg, transparent, #ff6a1d, transparent); opacity:.62; }
.ship-model.aurora::before { background:linear-gradient(90deg, transparent, #6fffd8, #d7fff5, #7aa7ff, transparent), linear-gradient(135deg, transparent, #50ff9a, transparent); opacity:.62; }
.ship-model.celestial::before { background:linear-gradient(90deg, transparent, #ffffff, #aef8ff, #ffffff, transparent), linear-gradient(135deg, transparent, #b26dff, transparent); opacity:.52; }

@keyframes vinylPulse {
  0% { opacity:.35; filter:drop-shadow(0 0 6px var(--ship-glow)); }
  100% { opacity:.7; filter:drop-shadow(0 0 16px var(--ship-glow)) drop-shadow(0 0 20px var(--ship-alt)); }
}

/* v18 Premium Graphics + Legendary Polish */
.ship-model-stage {
  height: 176px;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ship-glow) 68%, transparent), transparent 34%),
    radial-gradient(circle at 50% 66%, color-mix(in srgb, var(--ship-alt) 38%, transparent), transparent 58%),
    linear-gradient(150deg, rgba(12,16,42,.92), rgba(22,9,38,.72));
  box-shadow:
    inset 0 0 44px rgba(255,255,255,.06),
    0 0 34px color-mix(in srgb, var(--ship-glow) 30%, transparent),
    0 18px 45px rgba(0,0,0,.42);
}
.ship-model-stage::before {
  width: 150px;
  height: 26px;
  bottom: 20px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--ship-glow) 72%, transparent), color-mix(in srgb, var(--ship-alt) 28%, transparent) 38%, transparent 75%);
  opacity: .95;
}
.ship-model-stage::after {
  opacity:.55;
  background:
    linear-gradient(115deg, transparent 0 39%, rgba(255,255,255,.20) 45%, transparent 52% 100%),
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--ship-glow) 28%, transparent), transparent 32%);
}
.ship-model {
  transform: scale(1.08);
  filter:
    drop-shadow(0 0 12px #fff)
    drop-shadow(0 0 26px var(--ship-glow))
    drop-shadow(0 0 44px color-mix(in srgb, var(--ship-alt) 54%, transparent));
}
.ship-model.legendary-model {
  width: 168px;
  height: 168px;
  filter:
    drop-shadow(0 0 18px #fff)
    drop-shadow(0 0 38px var(--ship-glow))
    drop-shadow(0 0 70px color-mix(in srgb, var(--ship-alt) 70%, transparent));
}
.ship-model .trail {
  height: 78px;
  width: 34px;
  opacity:.82;
  filter: blur(.2px) drop-shadow(0 0 16px var(--ship-glow));
}
.ship-model .cockpit {
  box-shadow: 0 0 18px #fff, 0 0 34px var(--ship-glow), 0 0 55px var(--ship-alt);
}
.ship-model::before {
  width: 142px;
  height: 142px;
  opacity:.72;
  filter: drop-shadow(0 0 10px var(--ship-glow)) drop-shadow(0 0 24px var(--ship-alt));
}
.ship-model::after {
  width: 154px;
  height: 154px;
  opacity:.46;
}
.ship-card {
  background:
    radial-gradient(circle at 20% 45%, color-mix(in srgb, var(--ship-glow) 35%, transparent), transparent 36%),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--ship-alt) 28%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
}
.ship-card h3 { text-shadow: 0 0 18px rgba(255,255,255,.28), 0 0 28px color-mix(in srgb, var(--ship-glow) 30%, transparent); }
.ship-perk { box-shadow: 0 0 14px color-mix(in srgb, var(--ship-glow) 20%, transparent); }
.ship-card.locked .ship-model-stage { filter: saturate(1.05) brightness(1.02); }

.ship-card:has(.ship-model.prism)::before { content:'ULTIMATE'; }
.ship-card:has(.ship-model.prism) {
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 42px rgba(255,255,255,.18), 0 0 50px rgba(255,61,127,.18), inset 0 0 40px rgba(255,255,255,.055);
}
.ship-model.prism .hull,
.ship-model.prism .wing-l,
.ship-model.prism .wing-r,
.ship-model.prism .trail {
  filter: saturate(1.6) brightness(1.25) drop-shadow(0 0 18px #fff);
}
.ship-model.prism::before {
  opacity:.86;
  filter: drop-shadow(0 0 16px #fff) drop-shadow(0 0 34px #ff4fd8);
}

.ship-model.seraph .wing-l,
.ship-model.seraph .wing-r {
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), #ffe66d 22%, #10152c 50%, #fff8bd 72%, #ffffff);
}
.ship-model.seraph .hull { filter: brightness(1.22) saturate(1.25); }
.ship-model.seraph::before { opacity:.84; }

.ship-model.leviathan .wing-l,
.ship-model.leviathan .wing-r {
  background:
    linear-gradient(135deg, #21113d, #b86dff 24%, #05010d 52%, #4b00ff 74%, #e0c4ff);
}
.ship-model.leviathan .hull { filter: brightness(1.2) saturate(1.45); }
.ship-model.leviathan::before { opacity:.82; }

.ship-model.phoenix .wing-l,
.ship-model.phoenix .wing-r {
  background:
    linear-gradient(135deg, #ffe66d, #ffb02b 26%, #260601 52%, #ff2f6d 76%, #fff1a3);
}
.ship-model.phoenix .hull { filter: brightness(1.24) saturate(1.55); }
.ship-model.phoenix::before { opacity:.86; }

.ship-model.aurora .wing-l,
.ship-model.aurora .wing-r {
  background:
    linear-gradient(135deg, #d7fff5, #6fffd8 24%, #062333 52%, #62a6ff 75%, #50ff9a);
}
.ship-model.aurora .hull { filter: brightness(1.22) saturate(1.5); }
.ship-model.aurora::before { opacity:.85; }

.legendary-stage {
  background:
    radial-gradient(circle at 48% 38%, color-mix(in srgb, var(--ship-glow) 78%, transparent), transparent 35%),
    radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--ship-alt) 46%, transparent), transparent 60%),
    conic-gradient(from 0deg, rgba(255,255,255,.02), color-mix(in srgb, var(--ship-glow) 15%, transparent), rgba(255,255,255,.03), color-mix(in srgb, var(--ship-alt) 14%, transparent), rgba(255,255,255,.02)),
    rgba(8,10,26,.82);
}
.legendary-stage::after { opacity:.62; }

@keyframes legendaryShipRotate {
  0%,100% { transform: rotateX(60deg) rotateZ(-15deg) rotateY(-22deg) translateY(1px) scale(1.04); }
  50% { transform: rotateX(60deg) rotateZ(15deg) rotateY(22deg) translateY(-10px) scale(1.09); }
}
@keyframes shipRotate {
  0%,100% { transform: rotateX(58deg) rotateZ(-12deg) rotateY(-16deg) translateY(0) scale(1.02); }
  50% { transform: rotateX(58deg) rotateZ(12deg) rotateY(16deg) translateY(-7px) scale(1.06); }
}

#gameCanvas {
  filter: saturate(1.12) contrast(1.04);
}

/* v19 Ultimate Garage Layout */
.ultimate-divider {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  padding: 12px 16px;
  text-align:center;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .22em;
  color: #061021;
  border-radius: 999px;
  background: linear-gradient(90deg, #24eaff, #50ff9a, #ffe66d, #ff7a2b, #ff3d7f, #b26dff);
  box-shadow: 0 0 28px rgba(255,61,127,.22), 0 0 38px rgba(36,234,255,.18);
}
.ship-card.ultimate-card {
  grid-column: 1 / -1;
  min-height: 300px;
  grid-template-columns: minmax(340px, 44%) 1fr;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.55);
  background:
    radial-gradient(circle at 20% 48%, rgba(36,234,255,.36), transparent 34%),
    radial-gradient(circle at 44% 42%, rgba(255,230,109,.30), transparent 34%),
    radial-gradient(circle at 70% 26%, rgba(255,61,127,.28), transparent 36%),
    radial-gradient(circle at 92% 70%, rgba(178,109,255,.28), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(18,9,44,.78));
  box-shadow:
    0 0 50px rgba(255,255,255,.18),
    0 0 64px rgba(36,234,255,.20),
    0 0 80px rgba(255,61,127,.16),
    inset 0 0 70px rgba(255,255,255,.08);
}
.ship-card.ultimate-card::before {
  content:'ULTIMATE';
  right: 22px;
  top: 18px;
  font-size: 13px;
  padding: 8px 14px;
  box-shadow: 0 0 28px rgba(255,230,109,.42), 0 0 42px rgba(255,61,127,.26);
}
.ship-card.ultimate-card::after {
  width: 260px;
  height: 260px;
  opacity: .32;
  background: conic-gradient(from 0deg, #24eaff, #50ff9a, #ffe66d, #ff3d7f, #b26dff, #24eaff);
  filter: blur(18px);
  animation: legendaryAura 7s linear infinite;
}
.ship-card.ultimate-card .ship-model-stage {
  min-height: 250px;
  height: 250px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.72), transparent 22%),
    conic-gradient(from 0deg, rgba(36,234,255,.42), rgba(80,255,154,.34), rgba(255,230,109,.42), rgba(255,61,127,.36), rgba(178,109,255,.34), rgba(36,234,255,.42)),
    linear-gradient(145deg, rgba(5,8,24,.82), rgba(32,11,52,.78));
  box-shadow:
    inset 0 0 75px rgba(255,255,255,.10),
    0 0 55px rgba(255,255,255,.18),
    0 0 65px rgba(255,61,127,.18);
}
.ship-card.ultimate-card .ship-model-stage::before {
  width: 220px;
  height: 40px;
  bottom: 22px;
  background: radial-gradient(ellipse, rgba(255,255,255,.85), rgba(36,234,255,.55), rgba(255,61,127,.32), transparent 76%);
}
.ship-card.ultimate-card .ship-model.legendary-model {
  width: 230px;
  height: 230px;
  filter: drop-shadow(0 0 22px #fff) drop-shadow(0 0 48px #24eaff) drop-shadow(0 0 75px #ff3d7f);
}
.ship-card.ultimate-card h3 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: .95;
  padding-right: 130px;
  background: linear-gradient(90deg, #fff, #24eaff, #ffe66d, #ff3d7f, #b26dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.ship-card.ultimate-card p {
  font-size: 17px;
  color: #ecf2ff;
}
.ship-card.ultimate-card .ship-perk {
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 13px;
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 0 22px rgba(36,234,255,.20), 0 0 28px rgba(255,61,127,.16);
}
.ship-card.ultimate-card .cost-line {
  font-size: 16px;
  color: #ffe66d;
  text-shadow: 0 0 18px rgba(255,230,109,.36);
}
.ship-card.ultimate-card button {
  max-width: 420px;
  padding: 16px 22px;
  font-size: 15px;
  box-shadow: 0 0 32px rgba(36,234,255,.30), 0 0 34px rgba(255,61,127,.18);
}
@media (max-width: 900px) {
  .ship-card.ultimate-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ship-card.ultimate-card h3 { padding-right: 0; font-size: 34px; }
  .ship-card.ultimate-card .ship-model-stage { height: 220px; min-height: 220px; }
  .ship-card.ultimate-card .ship-model.legendary-model { width: 190px; height: 190px; }
}

/* v21 Premium Economy + Garage Polish */
.garage-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin: 8px auto 16px;
  padding: 12px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:linear-gradient(135deg, rgba(36,234,255,.10), rgba(255,61,127,.08)), rgba(5,10,28,.58);
  box-shadow: inset 0 0 30px rgba(255,255,255,.04), 0 0 24px rgba(36,234,255,.10);
}
.garage-toolbar span {
  color:rgba(236,242,255,.78);
  font-weight:800;
  font-size:13px;
  text-align:right;
}
.buy-shards-btn {
  background:linear-gradient(90deg, #ffe66d, #ff3d7f, #b26dff, #24eaff) !important;
  color:#061021 !important;
  box-shadow:0 0 28px rgba(255,230,109,.30), 0 0 38px rgba(255,61,127,.18) !important;
}
.unlock-meter {
  height:9px;
  width:100%;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  margin:8px 0 4px;
}
.unlock-meter i {
  display:block;
  width:var(--unlock-progress, 0%);
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #24eaff, #50ff9a, #ffe66d, #ff3d7f);
  box-shadow:0 0 18px rgba(36,234,255,.46);
}
.need-line {
  font-size:12px;
  color:#ffe66d;
  font-weight:900;
  letter-spacing:.04em;
  text-shadow:0 0 12px rgba(255,230,109,.28);
}
.ship-card.cant-afford {
  animation: lockedNudge .46s ease both;
  border-color:rgba(255,230,109,.62) !important;
  box-shadow:0 0 42px rgba(255,230,109,.20), 0 0 52px rgba(255,61,127,.20), inset 0 0 30px rgba(255,230,109,.08) !important;
}
@keyframes lockedNudge {
  0%,100% { transform:translateX(0) scale(1); }
  20% { transform:translateX(-7px) scale(1.01); }
  45% { transform:translateX(6px) scale(1.01); }
  70% { transform:translateX(-3px) scale(1.005); }
}
.shard-store-panel {
  width:min(980px, calc(100vw - 28px));
}
.store-note {
  max-width:760px;
  margin:0 auto 18px;
  color:rgba(236,242,255,.78);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}
.shard-store-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:16px;
  margin:16px 0 18px;
}
.shard-pack {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:82px 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.18);
  background:radial-gradient(circle at 20% 20%, rgba(36,234,255,.22), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.09), rgba(4,8,24,.78));
  box-shadow:0 0 32px rgba(36,234,255,.10), inset 0 0 34px rgba(255,255,255,.04);
}
.shard-pack::after {
  content:'';
  position:absolute;
  inset:-60%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.18) 49%, transparent 56%);
  transform:translateX(-45%);
  animation: garageShine 4.2s ease-in-out infinite;
  pointer-events:none;
}
.shard-pack.ultimate-pack {
  grid-column:1 / -1;
  background:radial-gradient(circle at 18% 25%, rgba(255,255,255,.28), transparent 25%), conic-gradient(from 30deg, rgba(36,234,255,.22), rgba(255,230,109,.22), rgba(255,61,127,.22), rgba(178,109,255,.22), rgba(36,234,255,.22)), linear-gradient(145deg, rgba(255,255,255,.12), rgba(16,5,38,.84));
}
.pack-crystal {
  width:66px;
  height:66px;
  border-radius:20px;
  transform:rotate(45deg);
  background:linear-gradient(135deg, #fff, #ffe66d 28%, #24eaff 58%, #ff3d7f);
  box-shadow:0 0 24px rgba(255,230,109,.42), 0 0 36px rgba(36,234,255,.24);
  animation: floatShip 2.6s ease-in-out infinite alternate;
}
.pack-info { display:flex; flex-direction:column; gap:4px; text-align:left; }
.pack-info strong { font-size:18px; color:#fff; text-shadow:0 0 16px rgba(255,255,255,.24); }
.pack-info span { color:rgba(236,242,255,.70); font-size:12px; font-weight:800; }
.pack-info b { color:#ffe66d; font-size:16px; }
.store-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ship-card.ultimate-card .ship-model.legendary-model {
  width: 285px;
  height: 285px;
  transform: perspective(650px) rotateX(57deg) rotateZ(-45deg) scale(1.08);
}
.ship-card.ultimate-card .ship-model-stage {
  min-height: 310px;
  height: 310px;
}
.ship-card.ultimate-card .ship-model.prism .wing-l,
.ship-card.ultimate-card .ship-model.prism .wing-r { filter:saturate(1.55) brightness(1.24); }
.ship-card.ultimate-card .ship-model.prism .cockpit { box-shadow:0 0 32px #fff, 0 0 64px #24eaff, 0 0 92px #ff3d7f; }
@media (max-width: 760px) {
  .garage-toolbar { flex-direction:column; align-items:stretch; text-align:center; }
  .garage-toolbar span { text-align:center; }
  .shard-store-list { grid-template-columns:1fr; }
  .shard-pack, .shard-pack.ultimate-pack { grid-column:auto; grid-template-columns:66px 1fr; }
  .shard-pack button { grid-column:1 / -1; }
  .ship-card.ultimate-card .ship-model.legendary-model { width:210px; height:210px; }
  .ship-card.ultimate-card .ship-model-stage { min-height:240px; height:240px; }
}

/* v22 Premium Ship Quality + Store Expansion */
.ship-card.legendary-card,
.ship-card:has(.legendary-model) {
  border-color: color-mix(in srgb, var(--ship-glow) 42%, rgba(255,255,255,.16));
  background:
    radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--ship-glow) 24%, transparent), transparent 34%),
    radial-gradient(circle at 72% 58%, color-mix(in srgb, var(--ship-alt) 18%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(4,8,24,.84));
}
.ship-card .ship-model-stage {
  min-height: 180px;
  height: 180px;
}
.ship-card .ship-model.legendary-model {
  width: 190px;
  height: 190px;
  filter:drop-shadow(0 0 22px var(--ship-glow)) drop-shadow(0 0 48px color-mix(in srgb, var(--ship-glow) 70%, transparent)) saturate(1.25) brightness(1.12);
}
.ship-card .ship-model.legendary-model::before {
  content:'';
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:2px solid color-mix(in srgb, var(--ship-glow) 66%, transparent);
  box-shadow:0 0 36px color-mix(in srgb, var(--ship-glow) 40%, transparent), inset 0 0 24px rgba(255,255,255,.08);
  opacity:.65;
  animation: prismAuraSpin 7s linear infinite;
}
.ship-model.legendary-model .hull,
.ship-model.legendary-model .wing-l,
.ship-model.legendary-model .wing-r {
  border-width:3px;
  box-shadow:inset 0 0 20px rgba(255,255,255,.18), 0 0 24px color-mix(in srgb, var(--ship-glow) 82%, transparent), 0 0 38px color-mix(in srgb, var(--ship-alt) 35%, transparent);
}
.ship-model.legendary-model .stripe {
  width:76px;
  height:7px;
  box-shadow:0 0 16px var(--ship-glow), 0 0 24px var(--ship-alt);
}
.ship-model.legendary-model .cockpit {
  width:28px;
  height:38px;
  box-shadow:0 0 24px #fff, 0 0 42px var(--ship-glow);
}
.ship-card.ultimate-card {
  grid-template-columns:minmax(540px, 1.15fr) minmax(360px, .85fr) !important;
  min-height: 520px !important;
  padding: 36px !important;
  align-items:center;
}
.ship-card.ultimate-card .ship-model-stage {
  min-height: 440px !important;
  height: 440px !important;
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.42), transparent 14%),
    conic-gradient(from 40deg, rgba(36,234,255,.28), rgba(255,230,109,.25), rgba(255,61,127,.26), rgba(178,109,255,.26), rgba(36,234,255,.28)),
    radial-gradient(ellipse at 50% 80%, rgba(36,234,255,.26), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(5,9,28,.62));
}
.ship-card.ultimate-card .ship-model.legendary-model {
  width: 410px !important;
  height: 410px !important;
  transform: perspective(760px) rotateX(58deg) rotateZ(-45deg) scale(1.28);
  filter:drop-shadow(0 0 36px #fff) drop-shadow(0 0 74px #24eaff) drop-shadow(0 0 92px #ff3d7f) saturate(1.6) brightness(1.25);
}
.ship-card.ultimate-card .ship-model.prism .hull { width: 70px; height: 160px; }
.ship-card.ultimate-card .ship-model.prism .wing-l,
.ship-card.ultimate-card .ship-model.prism .wing-r { width: 180px; height: 150px; }
.ship-card.ultimate-card .ship-model.prism .trail { height: 190px; width: 56px; }
.ship-card.ultimate-card h3 { font-size: clamp(44px, 5vw, 74px) !important; }
.ship-card.ultimate-card p { font-size: 17px; }
.ship-card.ultimate-card .ship-perk { font-size: 15px; line-height:1.45; }
@keyframes prismAuraSpin { to { transform:rotate(360deg); } }
.buy-options-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:16px;
  margin:16px 0 20px;
}
.buy-option {
  display:grid;
  grid-template-columns:72px 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  background:radial-gradient(circle at 16% 18%, rgba(255,230,109,.18), transparent 32%), linear-gradient(145deg, rgba(255,255,255,.09), rgba(4,8,24,.82));
  box-shadow:inset 0 0 32px rgba(255,255,255,.04), 0 0 32px rgba(178,109,255,.10);
}
.option-icon {
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  border-radius:20px;
  font-size:28px;
  font-weight:1000;
  color:#061021;
  background:linear-gradient(135deg,#fff,#ffe66d,#24eaff,#ff3d7f);
  box-shadow:0 0 26px rgba(255,230,109,.30), 0 0 36px rgba(36,234,255,.18);
}
.buy-option.bundle,
.buy-option.trail {
  background:radial-gradient(circle at 20% 20%, rgba(255,61,127,.20), transparent 34%), radial-gradient(circle at 70% 70%, rgba(36,234,255,.16), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.10), rgba(10,4,30,.84));
}
@media (max-width: 900px) {
  .ship-card.ultimate-card { grid-template-columns:1fr !important; min-height:auto !important; padding:20px !important; }
  .ship-card.ultimate-card .ship-model-stage { min-height:340px !important; height:340px !important; }
  .ship-card.ultimate-card .ship-model.legendary-model { width:300px !important; height:300px !important; transform: perspective(700px) rotateX(58deg) rotateZ(-45deg) scale(1.10); }
  .buy-options-grid { grid-template-columns:1fr; }
  .buy-option { grid-template-columns:60px 1fr; }
  .buy-option button { grid-column:1 / -1; }
}


/* v23 TEST BUILD: premium ship animation/layer fix + bigger previews */
.test-build-banner{
  margin:10px 0 16px;
  padding:12px 16px;
  border:1px solid rgba(255,230,109,.35);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,230,109,.16), rgba(36,234,255,.10), rgba(255,61,127,.10));
  color:#fff6b6;
  font-weight:900;
  letter-spacing:.4px;
  text-shadow:0 0 14px rgba(255,230,109,.35);
}
/* Keep aura behind the craft; do not use ship-model::before as a circular second ship. */
.ship-card .ship-model-stage::before{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  pointer-events:none;
}
.ship-card:has(.legendary-model) .ship-model-stage::after{
  content:'';
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:2px solid color-mix(in srgb, var(--ship-glow) 38%, transparent);
  box-shadow:0 0 34px color-mix(in srgb, var(--ship-glow) 32%, transparent), inset 0 0 28px rgba(255,255,255,.06);
  opacity:.38;
  animation:stageAuraSpin 9s linear infinite;
  pointer-events:none;
}
.ship-card .ship-model.legendary-model::before{
  inset:auto !important;
  left:50% !important;
  top:50% !important;
  width:150px !important;
  height:150px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:translate(-50%,-50%) !important;
  animation:legendaryVinylPulse 3.2s ease-in-out infinite alternate !important;
  opacity:.78 !important;
  pointer-events:none;
}
.ship-card .ship-model.legendary-model::after{
  opacity:.26 !important;
  transform:translate(-50%,-50%) scale(1.04) !important;
  animation:legendaryDepthPulse 4s ease-in-out infinite alternate !important;
}
.ship-card .ship-model.legendary-model{
  width:220px !important;
  height:220px !important;
  animation:premiumShipFloat 4.6s ease-in-out infinite !important;
  transform-origin:50% 55%;
}
.ship-card .ship-model-stage{ min-height:220px !important; height:220px !important; }
.ship-card.ultimate-card .ship-model-stage{ min-height:520px !important; height:520px !important; }
.ship-card.ultimate-card .ship-model.legendary-model{
  width:470px !important;
  height:470px !important;
  animation:prismUltimateFloat 5.4s ease-in-out infinite !important;
  filter:drop-shadow(0 0 44px #fff) drop-shadow(0 0 92px #24eaff) drop-shadow(0 0 120px #ff3d7f) saturate(1.75) brightness(1.36) !important;
}
.ship-card.ultimate-card .ship-model.prism .hull{ width:82px !important; height:185px !important; }
.ship-card.ultimate-card .ship-model.prism .wing-l,
.ship-card.ultimate-card .ship-model.prism .wing-r{ width:215px !important; height:175px !important; }
.ship-card.ultimate-card .ship-model.prism .trail{ height:225px !important; width:70px !important; }
.ship-card.ultimate-card .ship-model.legendary-model::before{
  width:360px !important;
  height:360px !important;
  opacity:.88 !important;
}
@keyframes stageAuraSpin{ to{ transform:rotate(360deg); } }
@keyframes legendaryVinylPulse{
  0%{ transform:translate(-50%,-50%) scale(.96) rotate(-4deg) !important; filter:drop-shadow(0 0 8px var(--ship-glow)); }
  100%{ transform:translate(-50%,-50%) scale(1.04) rotate(4deg) !important; filter:drop-shadow(0 0 18px var(--ship-glow)) drop-shadow(0 0 20px var(--ship-alt)); }
}
@keyframes legendaryDepthPulse{ to{ opacity:.42; filter:blur(.2px) brightness(1.25); } }
@keyframes premiumShipFloat{
  0%,100%{ transform:perspective(620px) rotateX(56deg) rotateZ(-42deg) translateY(0) scale(1.16); }
  50%{ transform:perspective(620px) rotateX(50deg) rotateZ(-37deg) translateY(-10px) scale(1.22); }
}
@keyframes prismUltimateFloat{
  0%,100%{ transform:perspective(850px) rotateX(58deg) rotateZ(-45deg) translateY(0) scale(1.34); }
  33%{ transform:perspective(850px) rotateX(52deg) rotateZ(-38deg) translateY(-16px) scale(1.42); }
  66%{ transform:perspective(850px) rotateX(61deg) rotateZ(-50deg) translateY(-7px) scale(1.38); }
}
@media (max-width:900px){
  .ship-card.ultimate-card .ship-model-stage{ min-height:420px !important; height:420px !important; }
  .ship-card.ultimate-card .ship-model.legendary-model{ width:360px !important; height:360px !important; }
}


/* v24 TEST: CLEAN PREMIUM SHIP PASS
   Goal: remove duplicate/ghost ship illusion, keep garage ships big and sharp,
   and keep gameplay ships readable with controlled aura/trails. */
.ship-card .ship-model::before,
.ship-card .ship-model::after,
.ship-card .ship-model.legendary-model::before,
.ship-card .ship-model.legendary-model::after{
  content:none !important;
  display:none !important;
}
.ship-model-stage{
  isolation:isolate !important;
  overflow:hidden !important;
  perspective:900px !important;
}
.ship-model-stage::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  left:50% !important;
  top:50% !important;
  width:70% !important;
  height:58% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(circle, color-mix(in srgb, var(--ship-glow) 30%, transparent) 0%, rgba(255,255,255,.05) 32%, transparent 72%) !important;
  filter:blur(16px) !important;
  opacity:.42 !important;
  pointer-events:none !important;
}
.ship-model-stage::after{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  left:50% !important;
  top:62% !important;
  width:58% !important;
  height:18% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  border:0 !important;
  background:radial-gradient(ellipse, rgba(255,255,255,.34), color-mix(in srgb, var(--ship-glow) 24%, transparent) 42%, transparent 72%) !important;
  filter:blur(7px) !important;
  opacity:.46 !important;
  animation:none !important;
  pointer-events:none !important;
}
.ship-model{
  z-index:2 !important;
  filter:drop-shadow(0 0 18px color-mix(in srgb, var(--ship-glow) 55%, transparent)) saturate(1.18) brightness(1.08) !important;
}
.ship-model .trail{ z-index:1 !important; opacity:.58 !important; filter:blur(1px) saturate(1.2) !important; }
.ship-model .wing-l,
.ship-model .wing-r{ z-index:3 !important; box-shadow:inset 0 0 14px rgba(255,255,255,.18), 0 0 18px color-mix(in srgb, var(--ship-glow) 32%, transparent) !important; }
.ship-model .hull{ z-index:5 !important; box-shadow:inset 0 8px 12px rgba(255,255,255,.26), inset 0 -16px 18px rgba(0,0,0,.42), 0 0 18px color-mix(in srgb, var(--ship-glow) 36%, transparent) !important; }
.ship-model .stripe{ z-index:7 !important; opacity:.82 !important; width:18px !important; height:86px !important; border-radius:999px !important; background:linear-gradient(180deg, rgba(255,255,255,.92), var(--ship-glow), var(--ship-alt)) !important; box-shadow:0 0 16px var(--ship-glow), 0 0 22px var(--ship-alt) !important; }
.ship-model .cockpit{ z-index:8 !important; box-shadow:0 0 18px #fff, 0 0 28px var(--ship-glow) !important; }
.ship-card .ship-model-stage{ min-height:210px !important; height:210px !important; }
.ship-card .ship-model.legendary-model,
.ship-card.legendary-card .ship-model{
  width:205px !important;
  height:205px !important;
  animation:v24CleanShipFloat 4.8s ease-in-out infinite !important;
  transform-origin:50% 56% !important;
}
.ship-card:not(.ultimate-card) .ship-model.legendary-model .hull{ width:52px !important; height:122px !important; }
.ship-card:not(.ultimate-card) .ship-model.legendary-model .wing-l,
.ship-card:not(.ultimate-card) .ship-model.legendary-model .wing-r{ width:122px !important; height:108px !important; }
.ship-card:not(.ultimate-card) .ship-model.legendary-model .trail{ height:132px !important; }

.ship-card.ultimate-card .ship-model-stage{
  min-height:560px !important;
  height:560px !important;
}
.ship-card.ultimate-card .ship-model-stage::before{
  width:78% !important;
  height:74% !important;
  opacity:.55 !important;
  filter:blur(22px) !important;
  background:conic-gradient(from 0deg, #24eaff, #50ff9a, #ffe66d, #ff3d7f, #b26dff, #24eaff) !important;
  animation:v24PrismAura 10s linear infinite !important;
}
.ship-card.ultimate-card .ship-model-stage::after{
  top:76% !important;
  width:54% !important;
  height:14% !important;
  opacity:.58 !important;
}
.ship-card.ultimate-card .ship-model.legendary-model{
  width:520px !important;
  height:520px !important;
  animation:v24PrismFloat 5.6s ease-in-out infinite !important;
  filter:drop-shadow(0 0 32px #fff) drop-shadow(0 0 58px #24eaff) drop-shadow(0 0 70px #ff3d7f) saturate(1.45) brightness(1.18) !important;
}
.ship-card.ultimate-card .ship-model.prism .hull{ width:88px !important; height:195px !important; }
.ship-card.ultimate-card .ship-model.prism .wing-l,
.ship-card.ultimate-card .ship-model.prism .wing-r{ width:235px !important; height:190px !important; }
.ship-card.ultimate-card .ship-model.prism .trail{ height:220px !important; width:58px !important; opacity:.46 !important; }
.ship-card.ultimate-card .ship-model.prism .stripe{ height:150px !important; width:26px !important; }

/* Make each legendary preview look distinct without adding fake duplicate ships. */
.ship-model.seraph .stripe{ background:linear-gradient(180deg,#fff,#ffe66d,#24eaff) !important; }
.ship-model.leviathan .stripe{ background:linear-gradient(180deg,#fff,#b26dff,#3a0bff) !important; }
.ship-model.phoenix .stripe{ background:linear-gradient(180deg,#fff6ae,#ff8a2b,#ff3d3d) !important; }
.ship-model.aurora .stripe{ background:linear-gradient(180deg,#eaffff,#50ff9a,#7aa7ff) !important; }
.ship-model.prism .stripe{ background:linear-gradient(180deg,#fff,#24eaff,#50ff9a,#ffe66d,#ff3d7f,#b26dff) !important; }
@keyframes v24CleanShipFloat{
  0%,100%{ transform:perspective(720px) rotateX(56deg) rotateZ(-42deg) translateY(0) scale(1.02); }
  50%{ transform:perspective(720px) rotateX(52deg) rotateZ(-38deg) translateY(-9px) scale(1.07); }
}
@keyframes v24PrismFloat{
  0%,100%{ transform:perspective(920px) rotateX(58deg) rotateZ(-44deg) translateY(0) scale(1.18); }
  33%{ transform:perspective(920px) rotateX(53deg) rotateZ(-37deg) translateY(-18px) scale(1.24); }
  66%{ transform:perspective(920px) rotateX(61deg) rotateZ(-50deg) translateY(-7px) scale(1.20); }
}
@keyframes v24PrismAura{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (max-width:900px){
  .ship-card.ultimate-card .ship-model-stage{ min-height:430px !important; height:430px !important; }
  .ship-card.ultimate-card .ship-model.legendary-model{ width:380px !important; height:380px !important; }
}


/* v26 AAA LEGENDARY SHIP VISUAL OVERHAUL — TEST BUILD
   Built from v25 final fixes. Goal: make Garage ships look like premium hero vehicles
   while keeping gameplay ships readable and matching the same visual identity. */
:root{
  --aaa-panel-gloss: rgba(255,255,255,.16);
}
.garage-panel{
  background:
    radial-gradient(circle at 12% 10%, rgba(36,234,255,.13), transparent 26%),
    radial-gradient(circle at 86% 4%, rgba(255,61,127,.11), transparent 24%),
    radial-gradient(circle at 50% 110%, rgba(178,109,255,.12), transparent 36%),
    rgba(4,8,22,.92) !important;
}
.garage-list{ gap:22px !important; }
.ship-card{
  isolation:isolate !important;
  overflow:hidden !important;
  border:1px solid color-mix(in srgb, var(--ship-glow) 26%, rgba(255,255,255,.14)) !important;
  background:
    linear-gradient(126deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 34%, rgba(2,6,20,.68)),
    radial-gradient(circle at 23% 36%, color-mix(in srgb, var(--ship-glow) 24%, transparent), transparent 38%),
    radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--ship-alt) 18%, transparent), transparent 36%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -30px 52px rgba(0,0,0,.32),
    0 18px 48px rgba(0,0,0,.34),
    0 0 32px color-mix(in srgb, var(--ship-glow) 14%, transparent) !important;
}
.ship-card::after{
  content:'' !important;
  position:absolute !important;
  inset:-42% -70% auto -70% !important;
  height:62% !important;
  transform:rotate(-10deg) translateY(-35%) !important;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 48%, transparent 58%) !important;
  opacity:.42 !important;
  animation:v26CardSweep 5.8s ease-in-out infinite !important;
  pointer-events:none !important;
  z-index:1 !important;
}
@keyframes v26CardSweep{
  0%,45%{ transform:rotate(-10deg) translate(-45%,-35%); opacity:0; }
  60%{ opacity:.44; }
  100%{ transform:rotate(-10deg) translate(45%,-35%); opacity:0; }
}
.ship-model-stage{
  position:relative !important;
  z-index:2 !important;
  min-height:250px !important;
  height:250px !important;
  border-radius:30px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 34%, rgba(0,0,0,.18)),
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ship-glow) 34%, transparent), transparent 35%),
    radial-gradient(ellipse at 50% 84%, color-mix(in srgb, var(--ship-alt) 24%, transparent), transparent 52%),
    linear-gradient(145deg, rgba(8,12,34,.92), rgba(2,5,18,.72)) !important;
  box-shadow:
    inset 0 0 44px rgba(255,255,255,.07),
    inset 0 -36px 48px rgba(0,0,0,.24),
    0 0 38px color-mix(in srgb, var(--ship-glow) 18%, transparent) !important;
  perspective:1050px !important;
}
.ship-model-stage::before{
  content:'' !important;
  position:absolute !important;
  z-index:0 !important;
  left:50% !important;
  top:45% !important;
  width:84% !important;
  height:68% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.18), color-mix(in srgb, var(--ship-glow) 35%, transparent) 26%, color-mix(in srgb, var(--ship-alt) 22%, transparent) 48%, transparent 72%) !important;
  filter:blur(18px) !important;
  opacity:.72 !important;
  pointer-events:none !important;
}
.ship-model-stage::after{
  content:'' !important;
  position:absolute !important;
  z-index:0 !important;
  left:50% !important;
  top:78% !important;
  width:72% !important;
  height:16% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse, rgba(255,255,255,.42), color-mix(in srgb, var(--ship-glow) 28%, transparent) 42%, transparent 76%) !important;
  filter:blur(9px) !important;
  opacity:.62 !important;
  pointer-events:none !important;
}
.ship-model,
.ship-model.legendary-model{
  z-index:3 !important;
  width:250px !important;
  height:250px !important;
  animation:v26HeroFloat 4.9s ease-in-out infinite !important;
  transform-origin:50% 56% !important;
  filter:
    drop-shadow(0 0 10px #fff)
    drop-shadow(0 0 25px color-mix(in srgb, var(--ship-glow) 72%, transparent))
    drop-shadow(0 0 44px color-mix(in srgb, var(--ship-alt) 42%, transparent))
    saturate(1.36) brightness(1.14) !important;
}
@keyframes v26HeroFloat{
  0%,100%{ transform:perspective(850px) rotateX(56deg) rotateZ(-42deg) rotateY(-9deg) translateY(0) scale(1.04); }
  50%{ transform:perspective(850px) rotateX(51deg) rotateZ(-36deg) rotateY(10deg) translateY(-12px) scale(1.11); }
}
/* No ship-shaped pseudo overlays: all hero quality comes from real parts. */
.ship-model::before,.ship-model::after,.ship-model.legendary-model::before,.ship-model.legendary-model::after{ content:none !important; display:none !important; }
.ship-model .hull,
.ship-model .wing-l,
.ship-model .wing-r,
.ship-model .cockpit,
.ship-model .stripe,
.ship-model .trail{ backface-visibility:hidden !important; }
.ship-model .hull{
  z-index:7 !important;
  border:2px solid color-mix(in srgb, var(--ship-glow) 70%, rgba(255,255,255,.28)) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.28), transparent 18% 82%, rgba(255,255,255,.16)),
    linear-gradient(180deg, color-mix(in srgb, var(--ship-glow) 18%, #f7fbff), #081022 42%, #02030a 74%, color-mix(in srgb, var(--ship-alt) 22%, #02030a)) !important;
  box-shadow:
    inset 0 10px 16px rgba(255,255,255,.34),
    inset 0 -22px 26px rgba(0,0,0,.54),
    0 0 18px color-mix(in srgb, var(--ship-glow) 46%, transparent),
    0 0 34px color-mix(in srgb, var(--ship-alt) 24%, transparent) !important;
}
.ship-model .wing-l,.ship-model .wing-r{
  z-index:5 !important;
  border:2px solid color-mix(in srgb, var(--ship-glow) 52%, rgba(255,255,255,.18)) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.26), transparent 22% 78%, rgba(255,255,255,.13)),
    linear-gradient(135deg, color-mix(in srgb, var(--ship-glow) 50%, #11172e), #040612 52%, color-mix(in srgb, var(--ship-alt) 42%, #050816)) !important;
  box-shadow:
    inset 0 9px 18px rgba(255,255,255,.18),
    inset 0 -18px 22px rgba(0,0,0,.38),
    0 0 18px color-mix(in srgb, var(--ship-glow) 38%, transparent) !important;
}
.ship-model .cockpit{
  z-index:10 !important;
  width:30px !important;
  height:42px !important;
  background:radial-gradient(circle at 50% 28%, #fff, var(--ship-glow) 38%, color-mix(in srgb, var(--ship-alt) 60%, #061021)) !important;
  border:1px solid rgba(255,255,255,.56) !important;
  box-shadow:0 0 22px #fff, 0 0 40px var(--ship-glow), inset 0 0 12px rgba(255,255,255,.5) !important;
}
.ship-model .stripe{
  z-index:11 !important;
  width:20px !important;
  height:96px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, #fff, var(--ship-glow), var(--ship-alt)) !important;
  opacity:.94 !important;
  box-shadow:0 0 14px #fff, 0 0 28px var(--ship-glow), 0 0 36px var(--ship-alt) !important;
}
.ship-model .trail{
  z-index:1 !important;
  width:48px !important;
  height:150px !important;
  top:70% !important;
  opacity:.74 !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ship-glow) 92%, white), color-mix(in srgb, var(--ship-alt) 55%, transparent), transparent 82%) !important;
  filter:blur(1.2px) saturate(1.3) !important;
}
/* stronger per-legend identity without duplicate fake ship layers */
.ship-model.seraph .wing-l,.ship-model.seraph .wing-r{ background:linear-gradient(135deg,#fffdf0,#ffe66d 26%,#15182e 55%,#ffffff) !important; }
.ship-model.seraph .hull{ background:linear-gradient(180deg,#ffffff,#252b47 48%,#050712 78%,#ffe66d) !important; }
.ship-model.seraph .stripe{ background:linear-gradient(180deg,#fff,#ffe66d,#ffffff) !important; }
.ship-model.leviathan .wing-l,.ship-model.leviathan .wing-r{ background:linear-gradient(135deg,#34165d,#b26dff 24%,#05010d 56%,#3300a8 78%,#e7d3ff) !important; }
.ship-model.leviathan .hull{ background:linear-gradient(180deg,#d5bbff,#12031f 48%,#05010d 75%,#6d21d8) !important; }
.ship-model.leviathan .stripe{ background:linear-gradient(180deg,#fff,#b26dff,#4013ff) !important; }
.ship-model.phoenix .wing-l,.ship-model.phoenix .wing-r{ background:linear-gradient(135deg,#fff2a5,#ff8a2b 24%,#260601 54%,#ff3d3d 78%,#ffe66d) !important; }
.ship-model.phoenix .hull{ background:linear-gradient(180deg,#ffe66d,#2b0b02 47%,#090301 76%,#ff4a20) !important; }
.ship-model.phoenix .stripe{ background:linear-gradient(180deg,#fff7c4,#ff8a2b,#ff3030) !important; }
.ship-model.aurora .wing-l,.ship-model.aurora .wing-r{ background:linear-gradient(135deg,#eaffff,#6fffd8 22%,#062033 54%,#62a6ff 76%,#50ff9a) !important; }
.ship-model.aurora .hull{ background:linear-gradient(180deg,#f3ffff,#062233 47%,#020712 76%,#6fffd8) !important; }
.ship-model.aurora .stripe{ background:linear-gradient(180deg,#fff,#6fffd8,#62a6ff) !important; }
.ship-model.prism .wing-l,.ship-model.prism .wing-r{ background:linear-gradient(90deg,#ffffff,#24eaff 16%,#50ff9a 34%,#ffe66d 52%,#ff3d7f 72%,#b26dff 90%,#ffffff) !important; animation:v26PrismHue 5s linear infinite !important; }
.ship-model.prism .hull{ background:linear-gradient(180deg,#ffffff,#24eaff 22%,#10142a 52%,#ff3d7f 82%,#ffffff) !important; animation:v26PrismHue 5s linear infinite !important; }
.ship-model.prism .stripe{ background:linear-gradient(180deg,#fff,#24eaff,#50ff9a,#ffe66d,#ff3d7f,#b26dff,#fff) !important; animation:v26PrismHue 5s linear infinite !important; }
@keyframes v26PrismHue{ to{ filter:hue-rotate(360deg) saturate(1.45) brightness(1.12); } }
.ship-card.ultimate-card{
  grid-template-columns:minmax(610px, 1.18fr) minmax(360px, .82fr) !important;
  min-height:650px !important;
  padding:40px !important;
}
.ship-card.ultimate-card .ship-model-stage{
  min-height:620px !important;
  height:620px !important;
  border-radius:48px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.30), transparent 14%),
    conic-gradient(from 0deg, rgba(36,234,255,.30), rgba(80,255,154,.24), rgba(255,230,109,.30), rgba(255,61,127,.26), rgba(178,109,255,.28), rgba(36,234,255,.30)),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(2,5,18,.76)) !important;
  box-shadow: inset 0 0 92px rgba(255,255,255,.11), 0 0 70px rgba(255,255,255,.16), 0 0 80px rgba(255,61,127,.14) !important;
}
.ship-card.ultimate-card .ship-model-stage::before{
  width:86% !important;
  height:82% !important;
  opacity:.62 !important;
  background:conic-gradient(from 0deg,#24eaff,#50ff9a,#ffe66d,#ff3d7f,#b26dff,#24eaff) !important;
  animation:v26UltimateAura 9s linear infinite !important;
}
@keyframes v26UltimateAura{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.ship-card.ultimate-card .ship-model.legendary-model{
  width:590px !important;
  height:590px !important;
  animation:v26PrismHeroFloat 5.8s ease-in-out infinite !important;
  filter:drop-shadow(0 0 34px #fff) drop-shadow(0 0 74px #24eaff) drop-shadow(0 0 98px #ff3d7f) saturate(1.62) brightness(1.22) !important;
}
@keyframes v26PrismHeroFloat{
  0%,100%{ transform:perspective(1050px) rotateX(58deg) rotateZ(-44deg) rotateY(-7deg) translateY(0) scale(1.18); }
  33%{ transform:perspective(1050px) rotateX(52deg) rotateZ(-36deg) rotateY(10deg) translateY(-22px) scale(1.27); }
  66%{ transform:perspective(1050px) rotateX(61deg) rotateZ(-50deg) rotateY(-4deg) translateY(-8px) scale(1.22); }
}
.ship-card.ultimate-card .ship-model.prism .hull{ width:98px !important; height:220px !important; }
.ship-card.ultimate-card .ship-model.prism .wing-l,.ship-card.ultimate-card .ship-model.prism .wing-r{ width:275px !important; height:222px !important; }
.ship-card.ultimate-card .ship-model.prism .trail{ width:78px !important; height:260px !important; opacity:.56 !important; }
.ship-card.ultimate-card .ship-model.prism .stripe{ height:174px !important; width:30px !important; }
.ship-card.ultimate-card .ship-model.prism .cockpit{ width:42px !important; height:58px !important; }
@media (max-width:1000px){
  .ship-card.ultimate-card{ grid-template-columns:1fr !important; min-height:auto !important; padding:22px !important; }
  .ship-card.ultimate-card .ship-model-stage{ min-height:460px !important; height:460px !important; }
  .ship-card.ultimate-card .ship-model.legendary-model{ width:420px !important; height:420px !important; }
}
@media (max-width:700px){
  .ship-model-stage{ min-height:210px !important; height:210px !important; }
  .ship-model,.ship-model.legendary-model{ width:210px !important; height:210px !important; }
  .ship-card.ultimate-card .ship-model-stage{ min-height:360px !important; height:360px !important; }
  .ship-card.ultimate-card .ship-model.legendary-model{ width:320px !important; height:320px !important; }
}

/* v27 Garage Ship Redesign + Scroll Fix
   Goal: unique silhouettes, showroom-quality previews, no select-scroll jump. */
.garage-panel .garage-list{
  scroll-behavior:auto !important;
  padding-right:14px;
}
.ship-card button{ scroll-margin:0 !important; }

/* showroom card readability */
.ship-card{
  align-items:center;
  gap:18px;
  overflow:hidden;
}
.ship-model-stage{
  overflow:hidden;
  isolation:isolate;
  border:1px solid color-mix(in srgb, var(--ship-glow) 34%, rgba(255,255,255,.12));
}
.ship-model-stage::before{ z-index:0; }
.ship-model-stage::after{ z-index:1; pointer-events:none; }
.ship-model{ z-index:2; }
.ship-model .trail{ z-index:0; }
.ship-model .wing-l,.ship-model .wing-r{ z-index:2; }
.ship-model .hull{ z-index:3; }
.ship-model .stripe{ z-index:4; }
.ship-model .cockpit{ z-index:5; }

/* bigger but contained normal previews */
.ship-card:not(.ultimate-card) .ship-model-stage{ min-height:168px; }
.ship-card:not(.ultimate-card) .ship-model{ transform-origin:50% 50%; }
.ship-card:not(.ultimate-card) .ship-model.legendary-model{ width:156px; height:156px; }

/* Add metallic panel/highlight details without fake duplicate ships */
.ship-model .hull,
.ship-model .wing-l,
.ship-model .wing-r{
  box-shadow: inset 0 0 16px rgba(255,255,255,.20), inset 0 -18px 24px rgba(0,0,0,.38);
}
.ship-model .stripe{
  width:92px;
  height:8px;
  border-radius:999px;
  opacity:.82;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), var(--ship-glow), transparent);
  box-shadow:0 0 12px var(--ship-glow), 0 0 20px var(--ship-alt);
}
.ship-model::before,
.ship-model::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  border-radius:999px;
  opacity:.38;
  background:radial-gradient(circle, color-mix(in srgb, var(--ship-glow) 55%, transparent), transparent 58%);
  filter:blur(8px);
  z-index:-1;
}
.ship-model::after{ opacity:.22; transform:translate(-50%,-50%) rotate(28deg) scale(1.18,.72); }

/* UNIQUE SILHOUETTES — starter/premium */
.ship-model.arrow .hull{ width:26px; height:94px; clip-path:polygon(50% 0,72% 44%,58% 100%,50% 78%,42% 100%,28% 44%); }
.ship-model.arrow .wing-l{ width:74px; height:46px; transform:translate(-79%,-14%) rotate(-12deg); clip-path:polygon(100% 10%,0 74%,86% 56%,100% 100%); }
.ship-model.arrow .wing-r{ width:74px; height:46px; transform:translate(-21%,-14%) rotate(12deg); clip-path:polygon(0 10%,100% 74%,14% 56%,0 100%); }

.ship-model.wraith .hull{ width:24px; height:108px; border-radius:16px 16px 30px 30px; clip-path:polygon(50% 0,68% 28%,58% 100%,50% 86%,42% 100%,32% 28%); }
.ship-model.wraith .wing-l{ width:92px; height:34px; transform:translate(-88%,-22%) skewY(-8deg) rotate(-4deg); clip-path:polygon(100% 18%,0 50%,100% 82%); }
.ship-model.wraith .wing-r{ width:92px; height:34px; transform:translate(-12%,-22%) skewY(8deg) rotate(4deg); clip-path:polygon(0 18%,100% 50%,0 82%); }

.ship-model.phantom .hull{ width:42px; height:78px; clip-path:polygon(50% 0,98% 30%,66% 58%,82% 100%,50% 82%,18% 100%,34% 58%,2% 30%); }
.ship-model.phantom .wing-l{ width:60px; height:102px; transform:translate(-72%,-8%) rotate(-3deg); clip-path:polygon(100% 0,4% 42%,75% 55%,18% 100%,100% 72%); }
.ship-model.phantom .wing-r{ width:60px; height:102px; transform:translate(-28%,-8%) rotate(3deg); clip-path:polygon(0 0,96% 42%,25% 55%,82% 100%,0 72%); }

.ship-model.viper .hull{ width:30px; height:116px; clip-path:polygon(50% 0,78% 30%,56% 58%,74% 100%,50% 88%,26% 100%,44% 58%,22% 30%); }
.ship-model.viper .wing-l{ width:100px; height:72px; transform:translate(-92%,-10%) rotate(-15deg); clip-path:polygon(100% 0,0 20%,48% 46%,0 72%,100% 100%,70% 50%); }
.ship-model.viper .wing-r{ width:100px; height:72px; transform:translate(-8%,-10%) rotate(15deg); clip-path:polygon(0 0,100% 20%,52% 46%,100% 72%,0 100%,30% 50%); }

.ship-model.fang .hull{ width:28px; height:112px; clip-path:polygon(50% 0,74% 26%,58% 82%,50% 100%,42% 82%,26% 26%); }
.ship-model.fang .wing-l{ width:108px; height:62px; transform:translate(-94%,-18%) rotate(-7deg); clip-path:polygon(100% 2%,0 42%,70% 58%,18% 100%,100% 72%); }
.ship-model.fang .wing-r{ width:108px; height:62px; transform:translate(-6%,-18%) rotate(7deg); clip-path:polygon(0 2%,100% 42%,30% 58%,82% 100%,0 72%); }

.ship-model.serpent .hull{ width:44px; height:124px; border-radius:45% 45% 54% 54%; clip-path:polygon(50% 0,73% 16%,48% 31%,75% 47%,45% 63%,72% 82%,50% 100%,28% 82%,55% 63%,25% 47%,52% 31%,27% 16%); }
.ship-model.serpent .wing-l{ width:70px; height:108px; transform:translate(-72%,-4%) skewY(24deg) rotate(-8deg); clip-path:polygon(100% 0,12% 24%,78% 48%,0 74%,88% 100%); }
.ship-model.serpent .wing-r{ width:70px; height:108px; transform:translate(-28%,-4%) skewY(-24deg) rotate(8deg); clip-path:polygon(0 0,88% 24%,22% 48%,100% 74%,12% 100%); }

.ship-model.monarch .hull{ width:52px; height:96px; clip-path:polygon(50% 0,96% 30%,70% 62%,88% 100%,50% 78%,12% 100%,30% 62%,4% 30%); }
.ship-model.monarch .wing-l{ width:122px; height:102px; transform:translate(-96%,-18%) rotate(-2deg); clip-path:polygon(100% 5%,0 0,36% 38%,8% 58%,38% 100%,100% 76%,72% 48%); }
.ship-model.monarch .wing-r{ width:122px; height:102px; transform:translate(-4%,-18%) rotate(2deg); clip-path:polygon(0 5%,100% 0,64% 38%,92% 58%,62% 100%,0 76%,28% 48%); }

.ship-model.dragon .hull{ width:36px; height:126px; clip-path:polygon(50% 0,82% 24%,62% 54%,85% 100%,50% 80%,15% 100%,38% 54%,18% 24%); }
.ship-model.dragon .wing-l{ width:128px; height:96px; transform:translate(-99%,-12%) rotate(-15deg); clip-path:polygon(100% 0,0 8%,40% 34%,8% 58%,50% 68%,10% 100%,100% 82%,74% 48%); }
.ship-model.dragon .wing-r{ width:128px; height:96px; transform:translate(-1%,-12%) rotate(15deg); clip-path:polygon(0 0,100% 8%,60% 34%,92% 58%,50% 68%,90% 100%,0 82%,26% 48%); }

.ship-model.eclipse .hull{ width:32px; height:108px; clip-path:polygon(50% 0,76% 34%,60% 100%,50% 82%,40% 100%,24% 34%); }
.ship-model.eclipse .wing-l{ width:126px; height:66px; transform:translate(-101%,-28%) rotate(-5deg); clip-path:polygon(100% 18%,0 0,24% 50%,0 100%,92% 76%); }
.ship-model.eclipse .wing-r{ width:126px; height:66px; transform:translate(1%,-28%) rotate(5deg); clip-path:polygon(0 18%,100% 0,76% 50%,100% 100%,8% 76%); }

.ship-model.celestial .hull{ width:44px; height:128px; clip-path:polygon(50% 0,82% 38%,66% 100%,50% 80%,34% 100%,18% 38%); }
.ship-model.celestial .wing-l{ width:138px; height:98px; transform:translate(-104%,-20%) rotate(-8deg); clip-path:polygon(100% 18%,0 0,28% 44%,2% 74%,86% 100%,70% 58%); }
.ship-model.celestial .wing-r{ width:138px; height:98px; transform:translate(4%,-20%) rotate(8deg); clip-path:polygon(0 18%,100% 0,72% 44%,98% 74%,14% 100%,30% 58%); }

/* UNIQUE LEGENDARIES — significantly different silhouettes */
.ship-model.seraph .hull{ width:48px; height:130px; border-radius:22px 22px 38px 38px; clip-path:polygon(50% 0,82% 34%,65% 100%,50% 78%,35% 100%,18% 34%); }
.ship-model.seraph .wing-l{ width:150px; height:106px; transform:translate(-106%,-22%) rotate(-10deg); clip-path:polygon(100% 8%,0 0,18% 30%,4% 52%,22% 70%,0 100%,96% 82%,66% 48%); }
.ship-model.seraph .wing-r{ width:150px; height:106px; transform:translate(6%,-22%) rotate(10deg); clip-path:polygon(0 8%,100% 0,82% 30%,96% 52%,78% 70%,100% 100%,4% 82%,34% 48%); }
.ship-model.seraph .stripe{ height:10px; width:132px; transform:translate(-50%,-50%) rotate(0deg); background:linear-gradient(90deg, transparent, #fff, #ffe66d, #fff, transparent); }

.ship-model.leviathan .hull{ width:58px; height:136px; border-radius:50%; clip-path:polygon(50% 0,76% 12%,38% 28%,80% 43%,32% 60%,78% 76%,50% 100%,22% 76%,68% 60%,20% 43%,62% 28%,24% 12%); }
.ship-model.leviathan .wing-l{ width:154px; height:100px; transform:translate(-105%,-6%) skewY(22deg) rotate(-12deg); clip-path:polygon(100% 0,0 34%,56% 50%,10% 70%,88% 100%); }
.ship-model.leviathan .wing-r{ width:154px; height:100px; transform:translate(5%,-6%) skewY(-22deg) rotate(12deg); clip-path:polygon(0 0,100% 34%,44% 50%,90% 70%,12% 100%); }
.ship-model.leviathan .stripe{ width:120px; transform:translate(-50%,-50%) rotate(-24deg); background:linear-gradient(90deg, transparent,#caa7ff,#4b00ff,transparent); }

.ship-model.phoenix .hull{ width:42px; height:132px; clip-path:polygon(50% 0,82% 26%,60% 56%,92% 100%,50% 78%,8% 100%,40% 56%,18% 26%); }
.ship-model.phoenix .wing-l{ width:160px; height:118px; transform:translate(-108%,-14%) rotate(-18deg); clip-path:polygon(100% 0,0 8%,34% 30%,6% 46%,46% 58%,4% 78%,74% 100%,66% 62%); }
.ship-model.phoenix .wing-r{ width:160px; height:118px; transform:translate(8%,-14%) rotate(18deg); clip-path:polygon(0 0,100% 8%,66% 30%,94% 46%,54% 58%,96% 78%,26% 100%,34% 62%); }
.ship-model.phoenix .stripe{ width:136px; transform:translate(-50%,-50%) rotate(10deg); background:linear-gradient(90deg, transparent,#ffe66d,#ff3d2f,#ff2f6d,transparent); }

.ship-model.aurora .hull{ width:66px; height:120px; border-radius:24px; clip-path:polygon(50% 0,92% 30%,72% 100%,50% 88%,28% 100%,8% 30%); }
.ship-model.aurora .wing-l{ width:152px; height:116px; transform:translate(-104%,-18%) rotate(-4deg); clip-path:polygon(100% 0,0 34%,50% 54%,4% 100%,100% 78%); }
.ship-model.aurora .wing-r{ width:152px; height:116px; transform:translate(4%,-18%) rotate(4deg); clip-path:polygon(0 0,100% 34%,50% 54%,96% 100%,0 78%); }
.ship-model.aurora .stripe{ width:140px; transform:translate(-50%,-50%) rotate(-8deg); background:linear-gradient(90deg, transparent,#6fffd8,#62a6ff,#50ff9a,transparent); }

.ship-model.prism .hull{ width:64px; height:118px; clip-path:polygon(50% 0,96% 28%,68% 62%,90% 100%,50% 78%,10% 100%,32% 62%,4% 28%); background:linear-gradient(180deg,#fff,#24eaff 30%,#ffe66d 58%,#ff3d7f); }
.ship-model.prism .wing-l{ width:178px; height:108px; transform:translate(-112%,-20%) rotate(-14deg); clip-path:polygon(100% 0,0 20%,62% 50%,10% 100%,100% 74%); }
.ship-model.prism .wing-r{ width:178px; height:108px; transform:translate(12%,-20%) rotate(14deg); clip-path:polygon(0 0,100% 20%,38% 50%,90% 100%,0 74%); }
.ship-model.prism .stripe{ width:170px; height:12px; transform:translate(-50%,-50%) rotate(-8deg); background:linear-gradient(90deg,#24eaff,#50ff9a,#ffe66d,#ff3d7f,#b26dff,#24eaff); animation:prismHue 3.8s linear infinite; }

/* keep big ships inside the preview box */
.ship-model.seraph,.ship-model.leviathan,.ship-model.phoenix,.ship-model.aurora{ transform:scale(.92) !important; }
.ship-card.ultimate-card .ship-model.prism{ transform:scale(.86) !important; }
.ship-card.ultimate-card .ship-model-stage{ overflow:hidden; }

@media (max-width: 900px){
  .ship-model.seraph,.ship-model.leviathan,.ship-model.phoenix,.ship-model.aurora{ transform:scale(.78) !important; }
  .ship-card.ultimate-card .ship-model.prism{ transform:scale(.72) !important; }
}