/* Play: the bridge of a capital ship. Space outside the viewport, a holotable in front, and the games as a
   spinning hologram carousel. Without JavaScript, or with reduced motion, the cards fall back to a flat grid. */
:root { --holo: #7fe3ff; --holo-soft: rgba(127, 227, 255, .16); --holo-line: rgba(127, 227, 255, .55); }

.bridge-page main { padding: 0; }
.bridge-page main > .wrap { width: 100%; max-width: none; margin: 0; }
.bridge-page { overflow-x: clip; }

.bridge { position: relative; isolation: isolate; overflow: hidden; background: #04060d; padding-bottom: var(--space-6); min-height: 780px; }

/* ---------- the view outside ---------- */
.bridge-window { position: absolute; inset: 0 0 38% 0; z-index: -3; overflow: hidden; background: radial-gradient(ellipse at 72% 38%, #10204a 0%, #070c1f 52%, #02030a 100%); }
.bridge-window canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nebula { position: absolute; inset: -10% -10% 0 -10%; background: radial-gradient(ellipse 40% 30% at 22% 34%, rgba(120, 70, 200, .26), transparent 70%), radial-gradient(ellipse 36% 28% at 60% 70%, rgba(40, 150, 190, .18), transparent 70%), radial-gradient(ellipse 30% 22% at 86% 20%, rgba(200, 90, 130, .14), transparent 70%); animation: drift 90s ease-in-out infinite alternate; }
.planet { position: absolute; right: 11%; top: 13%; width: clamp(130px, 17vw, 240px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #8fd0ff 0%, #3f86d6 30%, #1b4a9a 58%, #0a1d4a 80%, #040a1e 100%);
  box-shadow: 0 0 70px 6px rgba(80, 150, 255, .28), inset -34px -22px 70px rgba(0, 0, 14, .8); }
.planet::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(172deg, transparent 0 14px, rgba(255, 255, 255, .06) 14px 20px, transparent 20px 34px); mix-blend-mode: soft-light; }
.planet-ring { position: absolute; right: calc(11% - 10%); top: calc(13% + clamp(55px, 7vw, 100px)); width: clamp(220px, 30vw, 430px); height: clamp(36px, 4.6vw, 70px); border-radius: 50%; border: 5px solid rgba(190, 215, 255, .28); box-shadow: 0 0 14px rgba(150, 190, 255, .2); transform: rotate(-16deg); }
.moon { position: absolute; right: 34%; top: 30%; width: clamp(16px, 2vw, 28px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #d3d6dc, #7c828e 55%, #2b2f38); box-shadow: inset -4px -3px 8px rgba(0, 0, 0, .6); }
.fleet .sd { position: absolute; color: #2b3442; opacity: .85; filter: drop-shadow(0 0 3px rgba(127, 227, 255, .35)); }
.sd1 { width: 150px; top: 20%; left: 52%; animation: cruise 110s linear infinite; }
.sd2 { width: 84px; top: 40%; left: 26%; opacity: .6; animation: cruise 160s linear -60s infinite; }
.sd3 { width: 54px; top: 12%; left: 76%; opacity: .45; animation: cruise 210s linear -120s infinite; }
@keyframes cruise { from { transform: translateX(0); } to { transform: translateX(-70vw); } }
@keyframes drift { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }

/* ---------- the ship's frame around the view ---------- */
.bridge-frame { position: absolute; inset: 0 0 38% 0; width: 100%; height: 62%; z-index: -2; pointer-events: none; }
.bridge-frame .edge { fill: none; stroke: var(--holo-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(127, 227, 255, .6)); }
.bridge-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -2; background: linear-gradient(180deg, #0c121c 0%, #060a11 60%, #04060b 100%); border-top: 1px solid rgba(127, 227, 255, .35); box-shadow: 0 -10px 40px rgba(127, 227, 255, .08); overflow: hidden; }
.bridge-floor::before { content: ""; position: absolute; left: -20%; right: -20%; top: 0; height: 220%; transform: perspective(520px) rotateX(62deg); transform-origin: 50% 0;
  background: repeating-linear-gradient(90deg, rgba(127, 227, 255, .09) 0 1px, transparent 1px 70px), repeating-linear-gradient(0deg, rgba(127, 227, 255, .07) 0 1px, transparent 1px 52px); }

/* ---------- heading over the viewport ---------- */
.bridge-head { position: relative; z-index: 6; width: min(100% - 2 * var(--space-5), var(--content-max)); margin: 0 auto; padding-top: var(--space-6); }
.bridge-head h1 { margin: 0 0 var(--space-2); text-shadow: 0 0 22px rgba(127, 227, 255, .35); }
.bridge-head p { margin: 0; color: var(--color-text-secondary); max-width: 46ch; text-shadow: 0 1px 8px #000; }

/* ---------- the carousel stage ---------- */
.holo-stage { position: relative; z-index: 4; width: min(100%, 1100px); margin: 0 auto; }
.holo-ring { list-style: none; margin: 0; padding: var(--space-6) var(--space-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-5); }
.holo-card { position: relative; }
.holo-face { display: block; position: relative; height: 100%; color: inherit; text-decoration: none; padding: 10px 10px 12px; border-radius: 6px;
  border: 1px solid var(--holo-line); background: linear-gradient(180deg, rgba(14, 52, 76, .66), rgba(7, 24, 42, .78));
  box-shadow: 0 0 22px rgba(127, 227, 255, .26), inset 0 0 18px rgba(127, 227, 255, .14); overflow: hidden; }
.holo-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(127, 227, 255, .075) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.holo-art { display: block; position: relative; margin-bottom: 10px; border: 1px solid rgba(127, 227, 255, .35); overflow: hidden; }
.holo-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; filter: saturate(.9) contrast(1.06); }
.holo-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(127, 227, 255, .22), rgba(127, 227, 255, 0) 60%); mix-blend-mode: screen; pointer-events: none; }
.holo-title { display: block; font: 500 var(--text-xl)/1.15 var(--font-display); color: #e9fbff; text-shadow: 0 0 10px rgba(127, 227, 255, .5); margin-bottom: 4px; }
.holo-desc { display: block; font-size: var(--text-sm); color: #b9d8e4; line-height: 1.4; margin-bottom: 8px; }
.holo-status { display: block; }
.holo-status .status + .status { margin-left: 12px; }
.holo-face:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
a.holo-face:hover { border-color: #c9f6ff; box-shadow: 0 0 34px rgba(127, 227, 255, .5), inset 0 0 22px rgba(127, 227, 255, .22); }

/* the table and the light cone stay hidden in the flat fallback */
.holo-beam, .holotable, .holo-info, .holo-controls { display: none; }

/* ---------- 3D mode (added by JavaScript) ---------- */
.bridge.is-3d .holo-stage { height: clamp(430px, 62vh, 540px); perspective: 1300px; perspective-origin: 50% 36%; touch-action: pan-y; cursor: grab; user-select: none; }
.bridge.is-3d .holo-stage.dragging { cursor: grabbing; }
.bridge.is-3d .holo-ring { position: absolute; z-index: 2; inset: 0; display: block; padding: 0; transform-style: preserve-3d; transform: translateY(2%) rotateX(-6deg); }
.bridge.is-3d .holo-card { --cw: clamp(200px, 60vw, 270px); position: absolute; left: 50%; top: 37%; width: var(--cw); transform-style: preserve-3d; will-change: transform, opacity; transition: opacity .25s linear; }
.bridge.is-3d .holo-card.is-front .holo-face { border-color: #c9f6ff; box-shadow: 0 0 40px rgba(127, 227, 255, .58), inset 0 0 22px rgba(127, 227, 255, .26); }
.bridge.is-3d .holo-card:not(.is-front) .holo-face { filter: saturate(.8); }
.bridge.is-3d .holo-beam { display: block; position: absolute; left: 50%; bottom: 40px; width: min(640px, 86vw); height: 78%; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(127, 227, 255, 0) 0%, rgba(127, 227, 255, .06) 45%, rgba(127, 227, 255, .26) 100%); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); filter: blur(1.5px); }
.bridge.is-3d .holotable { display: block; position: absolute; left: 50%; bottom: 0; width: min(780px, 94vw); height: 150px; transform: translateX(-50%); pointer-events: none; z-index: 1; }
.holotable i { position: absolute; inset: 0; border-radius: 50%; }
.holotable .plate { background: radial-gradient(ellipse at 50% 46%, rgba(190, 245, 255, .6) 0%, rgba(60, 170, 220, .42) 30%, rgba(12, 52, 82, .85) 66%, rgba(5, 14, 24, .95) 100%); box-shadow: 0 0 60px 10px rgba(127, 227, 255, .38), inset 0 0 36px rgba(190, 245, 255, .55), 0 14px 0 -2px #0a121c, 0 16px 0 -2px rgba(127, 227, 255, .5); }
.holotable .rings { background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 20px, rgba(190, 245, 255, .4) 21px 22px); -webkit-mask: radial-gradient(ellipse at center, #000 20%, transparent 74%); mask: radial-gradient(ellipse at center, #000 20%, transparent 74%); animation: pulse 3.2s ease-in-out infinite; }
.holotable .sweep { background: conic-gradient(from 0deg, rgba(190, 245, 255, 0) 0deg, rgba(190, 245, 255, .5) 34deg, rgba(190, 245, 255, 0) 70deg); animation: spin 7s linear infinite; mix-blend-mode: screen; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.bridge.is-3d .holo-info { display: block; position: relative; z-index: 5; text-align: center; margin: var(--space-4) auto 0; padding: 0 var(--space-5); max-width: 640px; }
.holo-info[hidden], .holo-controls[hidden] { display: none !important; }
.holo-info-name { font: 500 var(--text-2xl)/1.15 var(--font-display); color: #e9fbff; text-shadow: 0 0 14px rgba(127, 227, 255, .5); }
.holo-info-blurb { color: var(--color-text-secondary); margin: 6px 0 8px; font-size: var(--text-sm); }
.holo-info-status { margin-bottom: 12px; }
.holo-open[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.bridge.is-3d .holo-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); position: relative; z-index: 5; margin-top: var(--space-4); }
.holo-controls button { font: inherit; color: var(--holo); background: rgba(8, 28, 44, .7); border: 1px solid var(--holo-line); border-radius: 4px; width: 44px; height: 44px; cursor: pointer; box-shadow: 0 0 14px rgba(127, 227, 255, .25); }
.holo-controls button:hover { background: rgba(20, 70, 100, .8); color: #fff; }
.holo-dots { display: flex; gap: 10px; }
.holo-dots button { width: 14px; height: 14px; min-width: 0; padding: 0; border-radius: 50%; box-shadow: none; background: transparent; position: relative; }
.holo-dots button::before { content: ""; position: absolute; inset: -15px; }   /* a comfortable touch target around a small dot */
.holo-dots button[aria-current="true"] { background: var(--holo); box-shadow: 0 0 10px var(--holo); }

@media (max-width: 640px) {
  .bridge { min-height: 720px; }
  .bridge.is-3d .holo-stage { height: 430px; }
  .holotable { height: 110px; }
  .planet { right: 4%; }
}

/* Reduced motion: no spinning, no drifting, no flicker. The cards stay in the flat grid and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .nebula, .fleet .sd, .holotable .rings, .holotable .sweep { animation: none !important; }
}

/* ===== v2: locked to the screen, cards always face the viewer, richer art ===== */
/* The screen-locked layout only applies while the 3D carousel is running. The flat fallback (reduced motion, no
   JavaScript) is an ordinary page that scrolls, because five cards genuinely do not fit on one screen. */
.bridge-page:has(.bridge.is-3d) { height: 100vh; height: 100dvh; overflow: hidden; }
.bridge-page:has(.bridge.is-3d) main { flex: 1; min-height: 0; display: flex; padding: 0; }
.bridge-page:has(.bridge.is-3d) main > .wrap { flex: 1; min-height: 0; display: flex; width: 100%; max-width: none; margin: 0; }
.bridge-page:has(.bridge.is-3d) .site-footer { display: none; }
.bridge-page .bridge.is-3d { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
.bridge-head { flex: none; padding-top: var(--space-4); }
.bridge-head h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; }
.bridge-head p { display: none; margin-top: 4px; }
@media (min-height: 820px) { .bridge-head p { display: block; } }
.bridge.is-3d .holo-stage { flex: 1 1 0; min-height: 0; height: auto; }
.bridge.is-3d .holo-info { flex: none; height: 158px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; overflow: hidden; width: 100%; }
.holo-info-name { height: 1.25em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: clamp(1.15rem, 3.4vw, 1.75rem); }
.holo-info-blurb { height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 4px 0; max-width: 100%; }
.holo-info-status { height: 1.5em; margin-bottom: 8px; }
.holo-info .holo-open { flex: none; }
.bridge.is-3d .holo-controls { flex: none; height: 52px; margin: 0 0 var(--space-3); }
/* every card is exactly the same height, whatever its text */
.holo-title { min-height: 2.3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.holo-desc { min-height: 4.2em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.holo-status { min-height: 1.5em; }
/* the game screenshots: brighter, more saturated, a lighter hologram tint */
.holo-art img { filter: saturate(1.45) brightness(1.14) contrast(1.1); }
.holo-art::after { background: linear-gradient(180deg, rgba(127, 227, 255, .10), rgba(127, 227, 255, 0) 55%); }
.holo-face::after { background: repeating-linear-gradient(0deg, rgba(127, 227, 255, .04) 0 1px, transparent 1px 3px); }
.bridge.is-3d .holo-card:not(.is-front) .holo-face { filter: none; }
@media (max-height: 760px) { .bridge.is-3d .holotable { height: 110px; } .bridge.is-3d .holo-info { height: 148px; } .holo-info-blurb { height: 1.4em; -webkit-line-clamp: 1; } }
@media (max-height: 640px) { .bridge-head { display: none; } .bridge.is-3d .holo-info { height: 112px; } }