/* The yacht in 2D (yacht2d.js): her side, cut away, by the deck plan. One picture, so one palette; night dims it and lights her glass. */
.y2d { --y-sky-a: #7fb2e5; --y-sky-b: #cfe6f6; --y-sea-a: #2f77ad; --y-sea-b: #123c63; --y-navy: #12284a; --y-gold: #c9a227; --y-white: #f1ede4; --y-white-d: #d6d0c3;
  --y-wall: #efe6d8; --y-wood-d: #6b4a2f; --y-wood-l: #b98b58; --y-glass: #9cc4de; --y-sofa: #3d5a85; margin: 0 0 24px; }
.y2d.night { --y-sky-a: #0a1530; --y-sky-b: #27365f; --y-sea-a: #0e3253; --y-sea-b: #06182b; --y-wall: #5b5260; --y-glass: #f0c060; }
.y2d-wait { padding: 40px 16px; text-align: center; color: var(--muted); }

.y2d-jump { display: flex; gap: 6px; overflow-x: auto; padding: 0 84px 10px 2px; scrollbar-width: thin; }
.y2d-jump .ghost { flex: 0 0 auto; white-space: nowrap; }

.y2d-scroll { overflow-x: auto; overflow-y: hidden; border-radius: 14px; background: var(--y-sky-a); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.y2d-scroll:focus-visible { outline: 2px solid var(--gold, #c9a227); outline-offset: 2px; }
.y2d-stage { position: relative; width: var(--w); height: var(--h); }
.y2d-art { display: block; position: absolute; inset: 0; }
.y2d.night .y2d-art { filter: brightness(0.62) saturate(0.85); }

/* Behind her */
.y-sky { fill: var(--y-sky-b); }
.y-hills { fill: #8fa3a0; opacity: 0.8; }
.y-tower { fill: #c9c2b4; opacity: 0.9; }
.y-town { fill: #b3a994; }
.y-sea { fill: var(--y-sea-a); }
.y-swell { fill: rgba(255, 255, 255, 0.16); }
.y2d.night .y-tower, .y2d.night .y-town, .y2d.night .y-hills { opacity: 0.55; }

/* Her hull */
.y-navy { fill: var(--y-navy); }
.y-sheer { fill: none; stroke: var(--y-gold); stroke-width: 3; stroke-linejoin: round; }
.y-foredeck { fill: #a9805a; }
.y-helipad { fill: none; stroke: #efe6d0; stroke-width: 2; opacity: 0.85; }
.y-rail { fill: none; stroke: var(--y-white-d); stroke-width: 2.2; stroke-linecap: round; }
.y-port { fill: #9fc3dc; stroke: var(--y-gold); stroke-width: 1.4; }
.y-name { fill: var(--y-gold); font: 700 12px Georgia, 'Times New Roman', serif; letter-spacing: 0.24em; }
.y-tender { fill: #f4f1ea; stroke: #cfc8b8; stroke-width: 1; }
.y-tender-top { fill: #d9d2c2; }
.y-platform { fill: #b98b58; }
.y-boot { fill: #f1ede4; opacity: 0.9; }
.y-sea-over { fill: var(--y-sea-b); opacity: 0.62; }
.y-foam { fill: none; stroke: rgba(235, 245, 252, 0.85); stroke-width: 3; stroke-dasharray: 10 6; }
.y-sun { fill: #fff3c4; opacity: 0.95; }
.y2d.night .y-sun { fill: #e9edf5; opacity: 0.85; }

/* Her decks */
.y-wall { fill: var(--y-wall); }
.y-t-symposio { fill: #f1dfe0; } .y-t-argo { fill: #dfe6f1; } .y-t-sympan { fill: #e5e0f1; } .y-t-engino { fill: #dfeadf; } .y-t-studio { fill: #efe6d8; } .y-t-plain { fill: #e8e3da; }
.y2d.night .y-wall { filter: brightness(0.55); }
.y-glass { fill: var(--y-glass); opacity: 0.55; }
.y-glass.lit { opacity: 0.9; }
.y-mullion { fill: var(--y-white); }
.y-post { fill: var(--y-white); }
.y-roof { fill: var(--y-white); stroke: var(--y-white-d); stroke-width: 1; }
.y-deckplate { fill: var(--y-white); stroke: var(--y-white-d); stroke-width: 1; }
.y-label { fill: #4a4236; font: 700 10.5px system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.y-cloud { fill: #fff; opacity: 0.8; }
.y2d.night .y-cloud { opacity: 0.18; }
.y-liftshaft { fill: rgba(150, 190, 215, 0.35); stroke: var(--y-white); stroke-width: 2; }
.y-stair { fill: none; stroke: var(--y-white); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 5; }
.y-staff { fill: #d6d0c3; stroke: #d6d0c3; stroke-width: 2; }

/* Her furniture */
.y-wood-d, .y-bench, .y-console { fill: var(--y-wood-d); }
.y-wood-l { fill: var(--y-wood-l); }
.y-sofa { fill: var(--y-sofa); }
.y-lounger { fill: #f2efe7; stroke: #c9c2b2; stroke-width: 1; }
.y-screen { fill: #172334; stroke: #4a7bb5; stroke-width: 1; }
.y-shelf { fill: #5a3b25; } .y-books { fill: #c25b4a; stroke: #3f7fa8; stroke-width: 2; stroke-dasharray: 4 3; }
.y-clock { fill: #f5f1e6; stroke: #6b4a2f; stroke-width: 2; }
.y-frame { fill: #d9c9a8; stroke: #6b4a2f; stroke-width: 2; }
.y-piano { fill: #1c1c20; }
.y-map { fill: #d9c79a; stroke: #6b4a2f; stroke-width: 1; }
.y-board { fill: #e8e4d8; stroke: #6b4a2f; stroke-width: 1.5; }
.y-wheel { fill: none; stroke: var(--y-wood-d); stroke-width: 3; }
.y-stool { fill: #6b4a2f; }
.y-string { fill: none; stroke: #4a3a2a; stroke-width: 1; }
.y-bulb { fill: #ffd98a; }
.y-awning { fill: #f0e8d4; stroke: #c9bfa6; stroke-width: 1; }
.y-parasol { fill: #f4efe3; stroke: #c9bfa6; stroke-width: 1; }
.y-flag { fill: #f6f3ec; stroke: #d6d0c3; stroke-width: 1; } .y-island { fill: #d47f2a; }
.y-dome { fill: #e9edf2; stroke: #aab4c0; stroke-width: 2; } .y-slit { fill: #1b2a40; }
.y-scope { fill: none; stroke: #d6d0c3; stroke-width: 3; stroke-linecap: round; } .y-lens { fill: #9cc4de; }
.y-printer { fill: #3f4a58; } .y-rack { fill: #1d2430; stroke: #3a4658; stroke-width: 1; }
.y-led { fill: #4fd08a; } .y-led-down { fill: #e0533f; }
.y-bed { fill: #8a6a4a; } .y-stage { fill: #6b4a2f; } .y-speaker { fill: #20242b; }
.y-lift { fill: none; }
.y-liftline { fill: none; }

/* Her top */
.y-arch { fill: none; stroke: var(--y-white); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.y-mastline { fill: none; stroke: var(--y-white); stroke-width: 3; }
.y-radar { fill: none; stroke: #1d2633; stroke-width: 4; stroke-linecap: round; }
.y-pennant { fill: var(--y-gold); }
.y-sat { fill: var(--y-white); stroke: var(--y-white-d); stroke-width: 1; }

/* The crew, each at his station: a medallion ringed in the state of his work. */
.y2d-layer { position: absolute; inset: 0; pointer-events: none; }
.y2d-crew { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 1px; padding: 0 0 2px; border: 0; background: none; font: inherit; cursor: pointer; pointer-events: auto; min-width: 48px; min-height: 48px; }
.y2d-crew .medallion { width: 38px; height: 38px; box-shadow: 0 0 0 3px var(--ring, #6b7685), 0 2px 4px rgba(0, 0, 0, 0.45); background: #1d2430; }
.y2d-crew .medallion { perspective: 220px; }
.y2d-crew .m-turn { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(180deg); transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
.y2d-crew .m-face, .y2d-crew .m-back { position: absolute; inset: 2px; border-radius: 50%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.y2d-crew .m-back { display: grid; place-items: center; transform: rotateX(180deg); background: radial-gradient(circle at 35% 28%, #e8c77a, #a77d2e 62%, #6e4f17); color: #3b2a08; font: 700 21px/1 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; text-shadow: 0 1px 0 rgba(255, 236, 190, 0.7); box-shadow: inset 0 0 0 2px rgba(255, 233, 170, 0.55); }
.y2d-crew.tight .m-back { font-size: 17px; }
.y2d-crew:hover .m-turn, .y2d-crew:focus-visible .m-turn, .y2d-crew:active .m-turn { transform: rotateX(0); }
@media (prefers-reduced-motion: reduce) { .y2d-crew .m-turn { transition: none; } }
.y2d-crew .m-face svg { width: 100%; height: 100%; display: block; }
.y2d-crew .m-dot { display: none; }
.y2d-name { font: 700 10.5px/1.15 system-ui, sans-serif; color: #fff; padding: 1px 5px; border-radius: 8px; background: rgba(12, 20, 34, 0.8); white-space: nowrap; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.y2d-crew.tight .medallion { width: 32px; height: 32px; }
.y2d-crew.tight .y2d-name { font-size: 9.5px; max-width: 56px; padding: 1px 4px; }
.y2d-crew:focus-visible .medallion { outline: 2px solid #fff; outline-offset: 3px; }
.y2d-crew.st-working { --ring: #3ccb7f; }
.y2d-crew.st-blocked, .y2d-crew.st-late { --ring: #e5af4f; }
.y2d-crew.st-failed, .y2d-crew.st-stuck { --ring: #e0533f; }
.y2d-crew.st-done, .y2d-crew.st-partial { --ring: #7fb2e5; }
.y2d-crew.st-paused, .y2d-crew.st-skipped { opacity: 0.7; }
.y2d-crew.is-chris .medallion { --ring: var(--y-gold); }
@media (prefers-reduced-motion: no-preference) {
  .y2d-crew.st-working .medallion { animation: lamp 2.4s ease-in-out infinite; }
}
.y2d-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel); color: var(--muted); font-size: 13.5px; }