/*
 * web/public/src/webStyles.css  (WEB-ONLY — injected by sync-game-code.js)
 *
 * Desktop/browser polish on top of the game's own CSS (which lives inline in
 * index.html and is shared with the Cordova build).
 *
 * The game canvas is a fixed 1080x2400 portrait stage scaled by JS (`resize()`).
 * On a 16:9 desktop monitor the height is the limiting factor, so the stage
 * occupies a narrow vertical strip. These rules make that strip feel deliberate
 * rather than "a phone screenshot in the middle of nothing", and add the
 * mouse-specific affordances a touch build never needed.
 */

/* ---- Desktop backdrop: subtle vignette + depth behind the portrait stage ---- */
@media (pointer: fine) and (min-width: 900px) {
  html, body {
    background:
      radial-gradient(ellipse 60% 80% at 50% 40%, #20244a 0, #14162e 55%, #0a0a18 100%),
      #0a0a18;
  }

  /* Lift the stage off the backdrop so the portrait frame reads as intentional. */
  #stage {
    box-shadow:
      0 0 0 1px #2d3870,
      0 0 60px rgba(68, 170, 255, .10),
      0 30px 90px rgba(0, 0, 0, .65) !important;
  }
}

/* ---- Mouse affordances (touch builds don't need these) ---- */
@media (pointer: fine) {
  /* The game sets touch-action:none globally for gesture control; with a mouse
     we still want a normal text cursor context and visible hover states. */
  .btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
  }
  .btn:active {
    transform: translateY(1px);
    filter: brightness(.95);
  }

  /* Storage slots are drag sources — show grab affordance. */
  .slot { cursor: grab; }
  .slot:active { cursor: grabbing; }

  /* Campaign map nodes / profile pill / close buttons. */
  .node:not(.locked):hover { filter: brightness(1.15); }
  .modalClose:hover { filter: brightness(1.3); }
}

/* ---- Never show scrollbars: the stage is absolutely positioned and scaled ---- */
html, body { overflow: hidden !important; overscroll-behavior: none; }