/* ═══════════════════════════════════════════════════════════════
   WebGL visual-layer mount — added by the 3D integration.
   See PLUNDER-INTEGRATION-PLAN.md for the full plan.

   What this does:
   - Hides Plunder's OLD 2D scene layer: nightbg.js's sky/moon/stars/sea
     canvas (#bg), scene.js's ship <img> cutouts (.lane), and the fx
     particle canvas (#fx). Nothing about their JS was deleted — app.js's
     calls into Scene's methods are all still wired and harmless, they
     just no longer paint anything visible. This keeps the diff to
     scene.js/app.js at ZERO.
   - Positions the new three.js canvas (#webgl-stage, mounted by
     webgl-scene.js) to fill the same #stage box #sea/#bg used to fill.

   To revert to the old 2D visuals: delete this file, remove its <link>
   and the #webgl-stage <canvas> + its <script type="module"> from
   index.html, and re-add nightbg.js's <script> tag. Nothing else needs
   to change back — this file is the entire seam.
   ═══════════════════════════════════════════════════════════════ */

/* Hide the old 2D scene ONLY when the 3D one can actually replace it. Without
   the :not(), a browser with no WebGL context hides the sea, ships and stars
   and then paints nothing in their place — the bet panel works, the scene is an
   empty box. The .no-webgl marker is set by the probe in index.html <head>. */
html:not(.no-webgl) #bg,
html:not(.no-webgl) #sea,
html:not(.no-webgl) #fx,
html:not(.no-webgl) .lane {
    display: none !important;
}

#webgl-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

/* An empty canvas stacked over the 2D sea would just cover it. */
html.no-webgl #webgl-stage {
    display: none;
}

/* ───────────────────────────────────────────────────────────────
   2D fallback layout.

   The old 2D lanes were laid out for the pre-v2 design, where the betting
   controls sat BELOW the stage. v2 floats them over it, so the lanes' original
   8%→94% span puts the lower ship underneath the bet bar. Pull both lanes up
   into the clear water above it.

   Scoped to .no-webgl so the 3D path is untouched — it does not use .lane at
   all, and this must stay a fallback-only adjustment.
   Keep BOTH hulls below the waterline too. The sea the player actually sees is
   painted by nightbg.js, whose horizon is H * 0.545 — NOT scene.js's drawSea()
   at h * 0.20, which is a second canvas stacked under it. An earlier `top: 6%`
   on the port lane measured against the wrong one and left the Black Pearl
   hanging in the sky. Port sits higher than star so it reads as the further
   ship; the horizontal stagger in updateShips() keeps them from overlapping.
   ─────────────────────────────────────────────────────────────── */
html.no-webgl #lane-port { top: 40%; height: 28%; }
html.no-webgl #lane-star { top: 52%; height: 28%; }
html.no-webgl .ship { width: clamp(150px, 22vw, 240px); }
