html,body{background:#050509; height:100vh; overflow:hidden;}
  * { border-radius:0 !important; }
  [hidden] { display:none !important; }
  /* hide native number input spinners (mobile doesn't need them) */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  input[type=number] { -moz-appearance:textfield; }
  /* Balance toggle: both versions stacked in the same grid cell, only one visible at a time.
     Size stays stable regardless of which version is showing. */
  [data-balance-wrap] .bal-stack > [data-bal="hide"] { visibility: hidden; }
  [data-balance-wrap] .bal-stack > [data-bal="show"] { visibility: visible; }
  [data-balance-wrap][data-hidden="1"] .bal-stack > [data-bal="show"] { visibility: hidden; }
  [data-balance-wrap][data-hidden="1"] .bal-stack > [data-bal="hide"] { visibility: visible; }
  /* Elements that should disappear but keep their space when balance is hidden */
  [data-balance-wrap][data-hidden="1"] [data-bal-fade] { visibility: hidden; }
  .tracked { letter-spacing:0.12em; text-transform:uppercase; }
  .tabnum  { font-variant-numeric: tabular-nums; }
  .grid-bg{
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  /* phone frame — iPhone 14/15 baseline (most common design reference) */
  .phone { width:390px; height:844px; }
  .screen { width:390px; height:844px; overflow:hidden; position:relative; background:#0B0B12; color:#F5F5FA; font-family:Inter,sans-serif; }
  /* no scrollbars inside the phone — native mobile feel */
  .screen-scroll { height:100%; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .sheet-panel .flex-1 { scrollbar-width:none; -ms-overflow-style:none; }
  .screen-scroll::-webkit-scrollbar,
  .sheet-panel ::-webkit-scrollbar,
  [style*="scrollbar-width:none"]::-webkit-scrollbar { width:0; height:0; display:none; }
  /* sheets: reading context → fade the last 56px of the scroll body to hint "more below".
     JS toggles .at-bottom once the end is reached and the fade clears. */
  .sheet-panel .flex-1 {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
  }
  .sheet-panel .flex-1.at-bottom {
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Animated tab underline: slides smoothly between tabs */
  [data-tabs] { position: relative; }
  [data-tabs] .tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: #8B5CF6;
    transition: left 260ms cubic-bezier(.2,.8,.2,1), width 260ms cubic-bezier(.2,.8,.2,1);
  }
  /* Count-up balance animation */
  @keyframes count-fade {
    from { opacity: 0.3; }
    to   { opacity: 1; }
  }
  .count-up { animation: count-fade 400ms ease-out; }

  /* iOS-style scroll position dot: fades in while scrolling, hides when idle */
  .scroll-dot {
    position: absolute;
    right: 3px;
    width: 3px;
    height: 40px;
    background: rgba(139,92,246,0.7);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
    z-index: 30;
    transform: translateY(-50%);
  }
  /* hide inactive screens */
  .screen[hidden] { display:none; }
  /* toast host: pinned inside the phone frame */
  .toast-host { position:absolute; top:0; left:0; right:0; z-index:100; padding:12px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
  .toast { transform: translateY(-120%); opacity:0; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms; }
  .toast.toast-in  { transform: translateY(0);     opacity:1; }
  .toast.toast-out { transform: translateY(-120%); opacity:0; }

  /* ===== Motion ===== */
  /* Live pulse on the green "Polygon Mainnet" dot */
  @keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0);   transform: scale(1.15); }
  }
  .pulse-dot { animation: dot-pulse 1.8s ease-in-out infinite; }
  /* Slow breathing glow behind the logo */
  @keyframes logo-breathe {
    0%, 100% { opacity: 0.25; transform: scale(1.4); }
    50%      { opacity: 0.45; transform: scale(1.6); }
  }
  .logo-breathe { animation: logo-breathe 3s ease-in-out infinite; }
  /* Staggered fade-up entrance; re-runs every time a screen becomes active via .screen-enter */
  @keyframes fade-up-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .screen-enter .stagger-item {
    opacity: 0;
    animation: fade-up-in 520ms cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }

  /* Bottom-sheet open/close transitions */
  .sheet {
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }
  .sheet.sheet-open {
    opacity: 1;
    pointer-events: none; /* container stays pass-through; children re-enable it */
  }
  .sheet .sheet-panel {
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  }
  .sheet.sheet-open .sheet-panel {
    transform: translateY(0);
  }
  .sheet .sheet-backdrop {
    opacity: 0;
    transition: opacity 240ms ease;
  }
  .sheet.sheet-open .sheet-backdrop {
    opacity: 1;
  }

  /* ===== Mines game ===== */
  .mines-cell { perspective: 600px; position: relative; }
  .mines-cell .mines-face {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    backface-visibility: hidden;
    transition: transform 360ms cubic-bezier(.2,.8,.2,1);
  }
  .mines-cell .mines-face.back  { transform: rotateY(180deg); }
  .mines-cell.revealed .mines-face.front { transform: rotateY(-180deg); }
  .mines-cell.revealed .mines-face.back  { transform: rotateY(0); }
  /* disabled (idle / after-game) cells stay clickable for hover but don't animate */
  .mines-cell[disabled] { cursor: not-allowed; opacity: 0.9; }

  @keyframes gem-pop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .gem-pop { animation: gem-pop 420ms cubic-bezier(.2,.9,.3,1.2); }

  @keyframes mine-bang {
    0%   { transform: scale(0.4); opacity: 0; }
    40%  { transform: scale(1.35); opacity: 1; }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
  }
  .mine-bang { animation: mine-bang 520ms cubic-bezier(.2,.9,.3,1.2); }

  @keyframes cell-shake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-2px, -2px); }
    80% { transform: translate(2px, 1px); }
  }
  .cell-shake { animation: cell-shake 380ms ease-out; }

  @keyframes mult-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); color: #A78BFA; }
    100% { transform: scale(1); }
  }
  .mult-bump { animation: mult-bump 340ms ease-out; }

  @keyframes cashout-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
    50%     { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  }
  .cashout-glow { animation: cashout-glow 1.8s ease-in-out infinite; }

  @keyframes banner-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .banner-drop { animation: banner-drop 320ms cubic-bezier(.2,.8,.2,1); }

  @keyframes mines-cell-enter {
    from { opacity: 0; transform: scale(0.65); }
    to   { opacity: 1; transform: scale(1); }
  }
  .mines-cell.cell-enter { animation: mines-cell-enter 300ms cubic-bezier(.2,.8,.2,1) both; }

  @keyframes share-modal-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
  }
  .share-modal-in { animation: share-modal-in 300ms cubic-bezier(.2,.8,.2,1); }

  /* Blackjack card deal-in animation */
  @keyframes bj-card-deal {
    from { opacity: 0; transform: translateY(-20px) translateX(30px) rotate(12deg); }
    to   { opacity: 1; transform: translateY(0) translateX(0) rotate(0); }
  }
  .bj-card-enter { animation: bj-card-deal 360ms cubic-bezier(.2,.8,.2,1) both; }

  /* Natural blackjack celebration — violet pulse around the player's hand */
  @keyframes bj-celebrate {
    0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.7); }
    40%  { box-shadow: 0 0 30px 14px rgba(139,92,246,0.55); }
    100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
  }
  .bj-celebrate { animation: bj-celebrate 1200ms ease-out 2; }

  /* Hole-card reveal — horizontal pancake flip (scaleX to 0 then back to 1) */
  @keyframes bj-hole-flip-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }
  @keyframes bj-hole-flip-in  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .bj-hole-out { animation: bj-hole-flip-out 200ms ease-in forwards; }
  .bj-hole-in  { animation: bj-hole-flip-in  200ms ease-out forwards; }

  /* Active hand highlight when a split is in progress */
  .bj-hand-active { box-shadow: inset 0 0 0 2px rgba(139,92,246,0.9); }

  /* ========== mobile: hide dev chrome, fullscreen the mockup ========== */
  @media (max-width: 768px) {
    /* hide left nav + right state-preview panel */
    body > div.flex > aside,
    main > aside { display: none; }
    /* drop the main column's padding/gap so the phone fills the viewport edge-to-edge */
    main { padding: 0 !important; gap: 0 !important; }
    /* the phone frame becomes the viewport */
    .phone  { width: 100vw; height: 100dvh; border: 0; }
    .screen { width: 100vw; height: 100dvh; }
  }