/* Per-frame growth bay: compact enough for mobile, but separated from the shop. */
#ship-training-screen {
  --training-cyan: #8ceaff;
  --training-mint: #8ef2cd;
  background:
    radial-gradient(circle at 50% 14%, rgba(59, 160, 187, 0.2), transparent 32%),
    linear-gradient(180deg, #07101c 0%, #03070e 75%) !important;
}

.ship-training-shell { position: relative; max-width: 500px !important; }
.ship-training-resources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ship-training-resources > div:nth-child(2) { border-color: rgba(212, 135, 250, 0.58); background: linear-gradient(135deg, rgba(123, 59, 168, 0.3), rgba(13, 19, 28, 0.72)); }
.ship-training-resources > div:nth-child(2) strong { color: #f1ceff; }
.ship-training-resources > div:last-child { border-color: rgba(255, 201, 104, 0.52); background: linear-gradient(135deg, rgba(185, 115, 37, 0.22), rgba(13, 19, 28, 0.7)); }
.ship-training-resources > div:last-child strong { color: #ffe0a2; }
.ship-training-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 9px; }
.ship-training-tab { min-height: 42px; border: 1px solid rgba(101, 183, 211, 0.32); color: #a7c5cf; background: rgba(5, 16, 27, 0.82); font: 800 11px/1 var(--final-display, monospace); letter-spacing: 0.07em; }
.ship-training-tab.active { border-color: #aaf5ff; color: #e9fdff; background: linear-gradient(110deg, rgba(37, 136, 165, 0.58), rgba(11, 37, 53, 0.86)); box-shadow: inset 0 -2px #5ee1f6, 0 0 14px rgba(88, 220, 245, 0.16); }
.ship-training-tab--guide { border-color: rgba(214, 161, 255, .38); color: #d8c3ed; background: linear-gradient(110deg, rgba(66, 36, 88, .52), rgba(11, 18, 39, .88)); }
.ship-training-tab--guide.active { border-color: #edccff; color: #fff4ff; background: linear-gradient(110deg, rgba(126, 66, 153, .68), rgba(33, 31, 80, .9)); box-shadow: inset 0 -2px #d99cff, 0 0 14px rgba(209, 130, 255, .22); }
.ship-training-tab:active { transform: translateY(1px) scale(0.99); }
.ship-training-tab:focus-visible { outline: 2px solid #f1ffff; outline-offset: 2px; }
.ship-training-flare { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; opacity: 0; }
.ship-training-flare::before,
.ship-training-flare::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: min(95vw, 520px); height: min(95vw, 520px); border: 1px solid rgba(146, 247, 255, 0.74); transform: translate(-50%, -50%) scale(0.1); }
.ship-training-flare::after { width: min(61vw, 300px); height: min(61vw, 300px); border-color: rgba(152, 255, 207, 0.9); }
.ship-training-flare i { position: absolute; top: 47%; left: 50%; width: 2px; height: 0; background: #d8ffff; box-shadow: 0 0 18px #72dfff; transform-origin: 50% 100%; }
.ship-training-flare i:nth-child(1) { transform: rotate(18deg); }
.ship-training-flare i:nth-child(2) { transform: rotate(138deg); }
.ship-training-flare i:nth-child(3) { transform: rotate(258deg); }

.ship-training-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 12px;
}

.ship-training-card {
  position: relative;
  min-width: 0;
  min-height: 130px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 3px 7px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(105, 181, 203, 0.38);
  color: #d9edf3;
  text-align: left;
  background:
    linear-gradient(130deg, rgba(51, 131, 156, 0.18), transparent 55%),
    rgba(6, 18, 30, 0.92);
  box-shadow: inset 2px 0 rgba(112, 219, 245, 0.24);
}

.ship-training-card::after { content: ""; position: absolute; right: -20px; bottom: -26px; width: 90px; height: 90px; border: 1px solid rgba(116, 214, 240, 0.12); transform: rotate(45deg); }
.ship-training-card.is-selected { border-color: var(--training-cyan); box-shadow: inset 3px 0 var(--training-cyan), 0 0 18px rgba(89, 211, 242, 0.16); }
.ship-training-card.is-equipped { background: linear-gradient(130deg, rgba(71, 167, 153, 0.22), transparent 58%), rgba(6, 18, 30, 0.92); }
.ship-training-card:active { transform: translateY(1px) scale(0.987); }
.ship-training-card:focus-visible { outline: 2px solid #f4feff; outline-offset: 2px; }

.ship-training-card__badge { grid-column: 1 / -1; color: #84cbdc; font: 800 7px/1 var(--final-display, monospace); letter-spacing: 0.13em; }
.ship-training-card.is-equipped .ship-training-card__badge { color: var(--training-mint); }
.ship-training-card > strong { overflow: hidden; font: 800 11px/1.25 var(--final-ui, sans-serif); text-overflow: ellipsis; white-space: nowrap; }
.ship-training-card > small { color: #9ab6bf; font: 800 9px/1.2 var(--final-display, monospace); }

.ship-training-card__visual {
  grid-row: 2 / span 3;
  align-self: center;
  position: relative;
  width: 62px;
  height: 54px;
  background: linear-gradient(90deg, transparent 0 7px, rgba(130, 230, 255, 0.14) 7px 9px, transparent 9px 100%);
}
.ship-training-card__visual::before { content: ""; position: absolute; left: 14px; top: 11px; width: 35px; height: 28px; background: linear-gradient(135deg, #a2edff 0 36%, #426f9f 37% 68%, #9ae1f4 69%); clip-path: polygon(50% 0, 72% 30%, 100% 62%, 65% 70%, 50% 100%, 35% 70%, 0 62%, 28% 30%); box-shadow: 0 0 12px rgba(103, 213, 255, 0.5); }
.ship-training-card__visual::after { content: ""; position: absolute; left: 20px; bottom: 3px; width: 24px; height: 4px; background: #55d9f5; box-shadow: -9px 2px 0 rgba(75, 181, 224, 0.6), 9px 2px 0 rgba(75, 181, 224, 0.6), 0 5px 8px rgba(67, 235, 255, 0.65); }
.ship-training-card__visual[data-frame="graziline"]::before, .ship-training-detail[data-frame="graziline"] .ship-training-level { filter: hue-rotate(108deg) saturate(0.7); }
.ship-training-card__visual[data-frame="sakuratake"]::before { background: linear-gradient(135deg, #ffe6f5 0 32%, #c85e8b 33% 68%, #567f53 69%); }
.ship-training-card__visual[data-frame="solflare"]::before { background: linear-gradient(135deg, #fff0b0 0 32%, #ef934b 33% 68%, #b34932 69%); }
.ship-training-card__visual[data-frame="nocturne_ark"]::before { background: linear-gradient(135deg, #d9c6ff 0 32%, #7455aa 33% 68%, #292044 69%); }
.ship-training-card__visual[data-frame="mistral_viper"]::before { background: linear-gradient(135deg, #d6fff3 0 32%, #4acb9d 33% 68%, #266b5d 69%); }
.ship-training-card__visual[data-frame="valkyrie9"]::before { background: linear-gradient(135deg, #ffffff 0 32%, #72b8ec 33% 68%, #506b91 69%); }
.ship-training-card__bar { grid-column: 2; align-self: end; position: relative; height: 4px; overflow: hidden; background: rgba(161, 210, 224, 0.16); }
.ship-training-card__bar::before { content: ""; display: block; width: var(--training-progress); height: 100%; background: linear-gradient(90deg, #5fd4ed, #b6fff2); box-shadow: 0 0 8px rgba(119, 236, 255, 0.55); }

.ship-training-detail { position: relative; display: grid; gap: 10px; padding: 13px; overflow: hidden; border: 1px solid rgba(122, 221, 240, 0.48); background: linear-gradient(120deg, rgba(37, 118, 143, 0.22), transparent 48%), rgba(5, 15, 25, 0.94); box-shadow: inset 4px 0 rgba(108, 228, 247, 0.62); }
.ship-training-detail::after { content: "FRAME SYNCHRONIZATION"; position: absolute; top: 10px; right: 10px; color: rgba(130, 224, 240, 0.3); font: 800 7px/1 var(--final-display, monospace); letter-spacing: 0.12em; }
.ship-training-detail__head { display: grid; gap: 3px; max-width: 72%; }
.ship-training-detail__head span { color: #78cadb; font: 800 8px/1 var(--final-display, monospace); letter-spacing: 0.12em; }
.ship-training-detail__head strong { color: #f0fdff; font: 800 clamp(17px, 5.4vw, 24px)/1.15 var(--final-display, monospace); letter-spacing: 0.02em; }
.ship-training-detail__head small { color: #a9c5cc; font: 700 10px/1.42 var(--final-ui, sans-serif); }
.ship-training-level { display: flex; align-items: baseline; gap: 5px; padding: 8px 9px; border: 1px solid rgba(124, 219, 239, 0.27); background: rgba(2, 11, 19, 0.58); }
.ship-training-level span { color: #83aab4; font: 800 8px/1 var(--final-display, monospace); letter-spacing: 0.12em; }
.ship-training-level strong { color: #b8fbff; font: 800 24px/1 var(--final-display, monospace); text-shadow: 0 0 12px rgba(100, 232, 255, 0.35); }
.ship-training-level i { color: #8daab2; font: 800 10px/1 var(--final-display, monospace); font-style: normal; }
.ship-training-trait { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid rgba(126, 215, 237, .34); background: linear-gradient(100deg, rgba(13, 51, 70, .58), rgba(4, 12, 22, .7)); }
.ship-training-trait > span { color: #8edfea; font: 800 8px/1 var(--final-display, monospace); letter-spacing: .1em; }
.ship-training-trait > strong { color: #e3fbff; font: 800 13px/1.2 var(--final-ui, sans-serif); }
.ship-training-trait > small { color: #b0c9d0; font: 700 10px/1.35 var(--final-ui, sans-serif); }
.ship-training-trait--active { border-color: rgba(255, 155, 208, .55); background: linear-gradient(100deg, rgba(89, 35, 75, .58), rgba(12, 20, 43, .72)); }
.ship-training-trait--active > span { color: #ffc0df; }
.ship-training-guide { display: grid; gap: 9px; }
.ship-training-guide__summary { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(113, 222, 242, .45); background: linear-gradient(115deg, rgba(22, 83, 103, .5), rgba(7, 15, 30, .78)); }
.ship-training-guide__summary > span, .ship-training-guide__section > span { color: #8ee7f4; font: 800 8px/1 var(--final-display, monospace); letter-spacing: .11em; }
.ship-training-guide__summary > strong { color: #e8fdff; font: 800 16px/1.2 var(--final-ui, sans-serif); }
.ship-training-guide__summary > small { color: #c0dce1; font: 700 10px/1.42 var(--final-ui, sans-serif); }
.ship-training-guide__section { display: grid; gap: 5px; padding: 10px; border-left: 3px solid rgba(104, 203, 221, .62); background: rgba(3, 11, 22, .62); }
.ship-training-guide__section h4 { margin: 0; color: #dffbff; font: 800 12px/1.2 var(--final-ui, sans-serif); letter-spacing: .04em; }
.ship-training-guide__section p { margin: 0; color: #b8cbd3; font: 700 11px/1.68 var(--final-ui, sans-serif); }
.ship-training-guide__section--special { border-left-color: rgba(255, 158, 209, .78); background: linear-gradient(105deg, rgba(87, 31, 70, .46), rgba(8, 14, 31, .74)); }
.ship-training-guide__section--special > span { color: #ffc4df; }
.ship-training-guide__section--special h4 { color: #fff0f8; font-size: 15px; }
.ship-training-guide__section--tactics { border-left-color: rgba(255, 208, 113, .72); background: linear-gradient(105deg, rgba(77, 55, 22, .38), rgba(7, 15, 26, .72)); }
.ship-training-guide--active .ship-training-guide__summary { border-color: rgba(255, 159, 211, .58); background: linear-gradient(115deg, rgba(91, 34, 75, .58), rgba(14, 20, 46, .82)); }
.ship-training-guide--active .ship-training-guide__summary > span { color: #ffc0df; }
.ship-training-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.ship-training-stat-grid > div { display: grid; gap: 2px; padding: 7px; border: 1px solid rgba(122, 194, 214, 0.2); background: rgba(4, 12, 21, 0.64); }
.ship-training-stat-grid span { color: #7da5b0; font: 800 8px/1.1 var(--final-display, monospace); letter-spacing: 0.06em; }
.ship-training-stat-grid strong { overflow: hidden; color: #d6edf2; font: 800 10px/1.25 var(--final-ui, sans-serif); text-overflow: ellipsis; white-space: nowrap; }
.ship-training-detail__note { margin: 0; color: #a9d0d8; font: 700 10px/1.35 var(--final-ui, sans-serif); }
.ship-training-limit-level { border-color: rgba(255, 199, 103, 0.58); background: linear-gradient(100deg, rgba(111, 63, 25, 0.38), rgba(3, 12, 21, 0.68)); }
.ship-training-limit-level strong { color: #ffe1a3; text-shadow: 0 0 12px rgba(255, 174, 78, 0.38); }
.ship-training-ascension-level { border-color: rgba(221, 150, 255, 0.66); background: linear-gradient(100deg, rgba(74, 30, 103, 0.48), rgba(3, 12, 21, 0.72)); }
.ship-training-ascension-level strong { color: #f2d8ff; text-shadow: 0 0 12px rgba(215, 133, 255, 0.42); }
.ship-training-gear-status { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(242, 181, 89, 0.35); background: rgba(44, 29, 13, 0.38); }
.ship-training-gear-status span { color: #e9b968; font: 800 8px/1 var(--final-display, monospace); letter-spacing: 0.1em; }
.ship-training-gear-status strong { color: #fff0c9; font: 800 22px/1 var(--final-display, monospace); }
.ship-training-gear-status small { color: #b8a98e; font: 700 9px/1.35 var(--final-ui, sans-serif); }
.ship-training-valuable-status { border-color: rgba(211, 139, 255, 0.48); background: linear-gradient(100deg, rgba(68, 28, 95, 0.48), rgba(9, 13, 26, 0.72)); }
.ship-training-valuable-status span { color: #e3b7ff; }
.ship-training-valuable-status strong { color: #f5dfff; }
.ship-training-valuable-status small { color: #c3abc9; }
.ship-training-weekly-gear { display: grid; gap: 8px; padding: 9px; border: 1px solid rgba(124, 223, 227, 0.3); background: rgba(6, 29, 39, 0.6); }
.ship-training-weekly-gear > div { display: grid; gap: 2px; }
.ship-training-weekly-gear span { color: #7be3ee; font: 800 8px/1 var(--final-display, monospace); letter-spacing: .1em; }
.ship-training-weekly-gear strong { color: #ddfcff; font: 800 10px/1.35 var(--final-ui, sans-serif); }
.ship-gear-claim-btn { min-height: 40px; border: 1px solid #e3b4ff; color: #250c35; background: linear-gradient(90deg, #bf74ec, #f1d4ff); font: 800 9px/1 var(--final-display, monospace); letter-spacing: .05em; }
.ship-gear-claim-btn:active { transform: translateY(1px) scale(.99); }
.ship-gear-objective-list { display: grid; gap: 5px; }
.ship-gear-objective { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 8px; border-left: 2px solid rgba(138, 164, 179, 0.38); background: rgba(4, 12, 22, 0.5); }
.ship-gear-objective strong { min-width: 0; color: #bfced4; font: 800 10px/1.2 var(--final-ui, sans-serif); }
.ship-gear-objective small { grid-column: 1; color: #8299a3; font: 700 9px/1.25 var(--final-ui, sans-serif); }
.ship-gear-objective em { grid-row: span 2; align-self: center; color: #9dabb2; font: 800 8px/1.1 var(--final-display, monospace); font-style: normal; text-align: right; }
.ship-gear-objective.ready { border-left-color: #d7a3ff; background: rgba(85, 32, 112, 0.34); }
.ship-gear-objective.ready em { color: #f0cbff; }
.ship-gear-objective.claimed { border-left-color: #6ce8c8; opacity: .72; }
.ship-gear-objective.claimed em { color: #8cf0d2; }
.ship-ascension-node.next { border-color: rgba(222, 148, 255, 0.78); background: linear-gradient(100deg, rgba(92, 35, 123, 0.52), rgba(5, 14, 23, 0.74)); }
.ship-ascension-node.next > span { color: #efc7ff; }
.ship-ascension-node.unlocked { border-color: rgba(192, 144, 255, 0.55); background: rgba(49, 27, 82, 0.44); }
.ship-break-node-list { display: grid; gap: 6px; }
.ship-break-node { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 3px 8px; padding: 8px; border: 1px solid rgba(116, 151, 166, 0.2); background: rgba(3, 10, 17, 0.58); opacity: 0.6; }
.ship-break-node > span { grid-row: span 2; align-self: center; color: #6d8791; font: 800 8px/1.25 var(--final-display, monospace); letter-spacing: 0.06em; }
.ship-break-node > strong { min-width: 0; color: #b6cbd0; font: 800 11px/1.2 var(--final-ui, sans-serif); }
.ship-break-node > small { color: #7f989f; font: 700 9px/1.3 var(--final-ui, sans-serif); }
.ship-break-node.next { opacity: 1; border-color: rgba(255, 195, 101, 0.72); background: linear-gradient(100deg, rgba(104, 64, 26, 0.45), rgba(5, 14, 23, 0.72)); }
.ship-break-node.next > span { color: #ffe0a0; }
.ship-break-node.next > strong { color: #fff1cb; }
.ship-break-node.unlocked { opacity: 1; border-color: rgba(101, 239, 204, 0.44); background: rgba(11, 58, 53, 0.32); }
.ship-break-node.unlocked > span { color: #88f3cf; }
.ship-break-node.unlocked > strong { color: #d9fff1; }

.ship-training-upgrade-btn { min-height: 58px !important; border-color: #b0ffff !important; color: #06202b !important; background: linear-gradient(90deg, #56d5e7, #a8fff0) !important; box-shadow: inset 0 -4px rgba(16, 102, 115, 0.27), 0 8px 20px rgba(10, 145, 173, 0.18) !important; font: 800 14px/1 var(--final-display, monospace) !important; letter-spacing: 0.08em; }
.ship-training-upgrade-btn:disabled { color: #70848a !important; background: rgba(41, 58, 66, 0.78) !important; box-shadow: none !important; }
.ship-training-upgrade-btn.is-breakthrough { color: #301b08 !important; border-color: #ffe2a1 !important; background: linear-gradient(90deg, #d88c3e, #ffe5a7) !important; box-shadow: inset 0 -4px rgba(114, 55, 17, 0.28), 0 8px 20px rgba(217, 137, 47, 0.2) !important; }
.ship-training-upgrade-btn.is-ascension { color: #240b37 !important; border-color: #efd3ff !important; background: linear-gradient(90deg, #a85bd8, #f0d6ff) !important; box-shadow: inset 0 -4px rgba(81, 24, 111, 0.28), 0 8px 20px rgba(174, 91, 224, 0.22) !important; }

#ship-training-screen.ship-training-levelup .ship-training-flare { animation: ship-training-flare 0.82s ease-out both; }
#ship-training-screen.ship-training-levelup .ship-training-flare::before { animation: ship-training-ring 0.74s cubic-bezier(.13,.71,.23,1) both; }
#ship-training-screen.ship-training-levelup .ship-training-flare::after { animation: ship-training-ring 0.66s .08s cubic-bezier(.13,.71,.23,1) both; }
#ship-training-screen.ship-training-levelup .ship-training-flare i { animation: ship-training-ray 0.52s ease-out both; }
#ship-training-screen.ship-training-levelup .ship-training-detail { animation: ship-training-detail-pulse 0.72s ease-out both; }
#ship-training-screen.ship-training-levelup .ship-training-upgrade-btn { animation: ship-training-button 0.62s ease-out both; }
#ship-training-screen.ship-training-breakthrough .ship-training-flare { animation: ship-training-break-flare 0.96s ease-out both; }
#ship-training-screen.ship-training-breakthrough .ship-training-flare::before { border-color: #ffe2a1; animation: ship-training-break-ring 0.9s cubic-bezier(.13,.71,.23,1) both; }
#ship-training-screen.ship-training-breakthrough .ship-training-flare::after { border-color: #ffad5c; animation: ship-training-break-ring 0.76s .06s cubic-bezier(.13,.71,.23,1) both; }
#ship-training-screen.ship-training-breakthrough .ship-training-detail { animation: ship-training-break-detail 0.9s ease-out both; }
#ship-training-screen.ship-training-ascended .ship-training-flare { animation: ship-training-ascend-flare 1.04s ease-out both; }
#ship-training-screen.ship-training-ascended .ship-training-flare::before { border-color: #f1c9ff; animation: ship-training-break-ring 1s cubic-bezier(.13,.71,.23,1) both; }
#ship-training-screen.ship-training-ascended .ship-training-flare::after { border-color: #ae6ce0; animation: ship-training-break-ring .86s .05s cubic-bezier(.13,.71,.23,1) both; }
#ship-training-screen.ship-training-ascended .ship-training-detail { animation: ship-training-ascend-detail .96s ease-out both; }

@keyframes ship-training-flare { 0% { opacity: 0; } 16% { opacity: 0.76; } 100% { opacity: 0; } }
@keyframes ship-training-ring { 0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.12) rotate(0deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) rotate(56deg); } }
@keyframes ship-training-ray { 0% { height: 0; opacity: 0; } 35% { height: 58vh; opacity: 1; } 100% { height: 66vh; opacity: 0; } }
@keyframes ship-training-detail-pulse { 0%, 100% { filter: none; } 30% { border-color: #e7ffff; box-shadow: inset 4px 0 #c2ffff, 0 0 26px rgba(113, 246, 255, 0.26); } }
@keyframes ship-training-button { 0%, 100% { transform: scale(1); } 35% { transform: scale(0.975); } 58% { transform: scale(1.015); } }
@keyframes ship-training-break-flare { 0% { opacity: 0; } 12% { opacity: 0.92; } 36% { opacity: 0.46; } 100% { opacity: 0; } }
@keyframes ship-training-break-ring { 0% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.08) rotate(0deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.52) rotate(110deg); } }
@keyframes ship-training-break-detail { 0%, 100% { filter: none; } 28% { border-color: #ffe6b4; box-shadow: inset 4px 0 #ffc86d, 0 0 30px rgba(255, 168, 74, 0.32); } }
@keyframes ship-training-ascend-flare { 0% { opacity: 0; } 13% { opacity: .92; } 42% { opacity: .44; } 100% { opacity: 0; } }
@keyframes ship-training-ascend-detail { 0%, 100% { filter: none; } 30% { border-color: #f0ceff; box-shadow: inset 4px 0 #d18aff, 0 0 34px rgba(194, 100, 237, .36); } }

@media (max-width: 390px) {
  .ship-training-card { min-height: 118px; grid-template-columns: 57px minmax(0, 1fr); padding: 7px; }
  .ship-training-card__visual { transform: scale(0.88); transform-origin: left center; }
  .ship-training-card > strong { font-size: 10px; }
  .ship-training-detail { padding: 10px; }
  .ship-training-stat-grid strong { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ship-training-flare, .ship-training-flare::before, .ship-training-flare::after, .ship-training-flare i, .ship-training-detail, .ship-training-upgrade-btn { animation: none !important; }
}