/* ===========================================================================
   Vappy — global styles
   Ported from the design's <helmet> block. Colours, sizing and layout live
   inline on the elements (matching the prototype 1:1); this file holds only
   the resets, font wiring, scrollbar hiding and the two keyframe animations.
   =========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Courier New', Courier, monospace;
  background: #130E09;
  -webkit-font-smoothing: antialiased;
}

/* hidden scrollbars on any scrolling surface */
.vp-scroll::-webkit-scrollbar { width: 0; height: 0; }
.vp-scroll { scrollbar-width: none; -ms-overflow-style: none; }

input, select, textarea, button { font-family: inherit; }
select { -webkit-appearance: none; appearance: none; }

/* entrance / action animations */
@keyframes vptoast {
  0%   { opacity: 0; transform: translate(-50%, 12px); }
  12%  { opacity: 1; transform: translate(-50%, 0); }
  88%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 8px); }
}
@keyframes vpstamp {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  60%  { transform: scale(1.06) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

/* ===========================================================================
   MOBILE — on a real phone the desktop "review" chrome (left rail + device
   mockup frame) is dropped and the app fills the screen edge to edge.
   Inline styles win over the stylesheet, so these overrides need !important.
   =========================================================================== */
@media (max-width: 700px) {
  .vp-stage      { padding: 0 !important; gap: 0 !important; min-height: 100dvh !important; display: block !important; }
  #review-rail   { display: none !important; }          /* preview-only control rail */
  .vp-phone-wrap { width: 100% !important; }
  #vp-phone      { width: 100% !important; height: 100dvh !important; border-radius: 0 !important;
                   padding: 0 !important; box-shadow: none !important; }
  .vp-inner      { border-radius: 0 !important; }
  .vp-notch      { display: none !important; }           /* the real phone has its own */
  .vp-osbar      { display: none !important; }           /* fake 9:41/4G bar */
}