/* snodriva.com/play -- web-only styles for Neon Dodge (SNO-208).
   Generated by tools/build-play.py. Loaded after neon-dodge.css, and it only
   adds rules for the two Play Store elements; nothing in the game's own
   stylesheet is overridden.

   Colour and shape are taken from the game's existing conventions on purpose.
   #c084fc with a trailing arrow is how this file already marks a link that
   leaves (#brand-footer, #privacy-link), and the outlined pill is its
   secondary-action affordance (#share-btn). Using the purple fill of
   #play-btn instead would put the Play Store in direct visual competition
   with PLAY AGAIN, which is the one button a player who just died wants.

   Contrast: #c084fc on the overlay's rgba(10,10,18,0.92) is 7.46:1, which
   clears WCAG AA and AAA for body text. A reflex game's audience still
   includes people who cannot read pale grey on near-black. */

/* display is set by play-web.js, which takes it from #share-btn -- the CTA is
   the game-over placement and starts hidden. It carries the official Google
   Play badge under the label since the board's 2026-10-06 demo decision, so it
   is a stacked block rather than the outlined pill it used to be: the badge is
   its own affordance and a border around it would be a second one, which
   Google's badge guidelines do not allow anyway. */
#nd-play-cta{
  display:none;
  margin-top:14px;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:#c084fc;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:1px;
  text-decoration:none;
  cursor:pointer;
  /* The whole link is the tap target and the badge alone is 57px tall, so it
     clears the 44px minimum without padding. */
}
#nd-play-cta:active{transform:scale(0.97)}
/* The badge is used unmodified and only scaled, per Google's brand terms.
   148px wide on a 646x250 asset is 57px tall -- above their 40px minimum. */
#nd-play-cta .nd-badge{width:148px;height:auto;display:block}

/* The menu placement. Small, because the menu's job is to start a run --
   PLAY is the primary action here and this must not outrank it. */
#nd-play-badge{
  display:block;
  margin-top:14px;
  padding:6px 16px 4px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.5px;
  color:#c084fc;
  text-decoration:none;
  text-align:center;
}
#nd-play-badge:active{opacity:.6}

/* ---------------------------------------------------- the run-limit wall
   Shown by play-demo.js once the visit's runs are spent (SNO-208, board
   2026-10-06). position:FIXED and not absolute: the game's own overlays live
   inside #stage at z-index 5-6, and this one has to cover the HUD as well --
   a Score/Best row still sitting above a "keep playing in the app" panel reads
   as a page that has broken rather than one that has finished. */
#nd-demo-wall{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  /* OPAQUE, unlike every other overlay in this game, which all sit at 0.92
     over the canvas so the run stays visible behind them. This one is not a
     panel over the game, it is the end of the visit -- and at 0.96 the
     GAME OVER headline, PLAY AGAIN and the menu badge all still read through
     it, one of them landing directly behind this panel's own Play Store
     badge. Shot it, saw it, made it solid. */
  background:#06060c;
  z-index:20;
  padding:24px;
  /* Phones are the main audience here and a 320px-tall landscape phone cannot
     fit this panel; scroll rather than clip the badge off the bottom. */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
#nd-wall-panel{
  width:100%;
  max-width:330px;
  text-align:center;
  /* margin:auto inside a flex container keeps it centred when it fits and
     keeps both ends reachable when it does not. */
  margin:auto;
}
#nd-wall-eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  /* #8890ac is the game's own secondary text colour (#daily-note). 5.0:1 on
     this background. */
  color:#8890ac;
  margin-bottom:10px;
}
#nd-wall-title{
  font-size:25px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:0.5px;
  color:#fff;
  margin:0 0 12px;
  text-shadow:0 0 24px rgba(168,85,247,0.6);
}
#nd-wall-score{
  font-size:15px;
  font-weight:600;
  color:#a855f7;
  margin-bottom:16px;
  min-height:18px;
}
#nd-wall-list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  font-size:13px;
  line-height:1.75;
  color:#9aa;
  text-align:left;
  display:inline-block;
}
/* A bullet drawn as a marker, not as a list-style glyph, so it can be the
   combo purple and sit on the text baseline at this size. */
#nd-wall-list li{padding-left:18px;position:relative}
#nd-wall-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:9px;
  width:6px;
  height:6px;
  border-radius:99px;
  background:#a855f7;
}
/* The badge is the primary action, so it is the biggest thing on the panel
   after the headline. 200px wide on the 646x250 asset is 77px tall. Used
   unmodified and only scaled, per Google's badge guidelines. */
#nd-wall-cta{display:inline-block;text-decoration:none}
#nd-wall-cta .nd-badge{width:200px;height:auto;display:block;margin:0 auto}
#nd-wall-cta:active{transform:scale(0.97)}
#nd-wall-cta:focus-visible{outline:2px solid #e9d5ff;outline-offset:4px;border-radius:8px}
/* The way out. Underlined, grey, and the same shape as #howto-btn, which is
   this game's existing "tertiary, text-only" affordance -- it must not look
   like a second offer. */
#nd-wall-back{
  display:block;
  margin:18px auto 0;
  background:transparent;
  border:none;
  color:#8890ac;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.5px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:8px 12px;
}
#nd-wall-back:focus-visible{outline:2px solid #e9d5ff;outline-offset:2px}

/* The ship row's app-only line (SNO-208). Same type as the game's own
   .setting-sub, one step dimmer than the selected ship's name above it, so it
   reads as a note about the row and not as the row's value. */
#nd-ship-note{color:#8890ac;margin-top:3px}

/* Keyboard users get a visible focus ring. The game is pointer-driven, but
   both of these are links and both are tabbable, and the game's stylesheet
   has no :focus-visible rule to inherit. */
#nd-play-cta:focus-visible,
#nd-play-badge:focus-visible{
  outline:2px solid #e9d5ff;
  outline-offset:3px;
}