/* NitroEngine mobile layer.
 * Every rule here is scoped to .mobile-device (set by mobile-touch.js after
 * detecting a phone via UA + coarse-pointer match). Desktop browsers - even
 * narrow ones - never get these styles, exactly per the user's request:
 * "only if the thing says that its a phone keep the website the same unless
 *  they are on a different device".
 */

/* ---------- ROOT / GLOBAL ---------- */
html.mobile-device,
html.mobile-device body{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;        /* hard-stop horizontal scrolling */
  max-width:100vw;
}
body.mobile-device{
  font-size:14px;
  line-height:1.5;
  overscroll-behavior:contain;
}
/* Hard cap every direct child of body so nothing can push wider than viewport */
body.mobile-device > *{
  max-width:100vw;
  box-sizing:border-box;
}
/* Common wide containers - cap them too */
body.mobile-device .container,
body.mobile-device main,
body.mobile-device section,
body.mobile-device .top-nav,
body.mobile-device .footer,
body.mobile-device .chip-hud,
body.mobile-device .chip-hud-floater,
body.mobile-device .stats-strip,
body.mobile-device .card-grid{
  max-width:100vw;
  box-sizing:border-box;
}

/* iOS auto-zooms when an input has font-size < 16px. Prevent that. */
body.mobile-device input,
body.mobile-device select,
body.mobile-device textarea{
  font-size:16px;
}

/* Hide the custom cursor dot - touch screens don't have a cursor */
body.mobile-device .cursor-dot,
body.mobile-device .ripple{display:none !important}
body.mobile-device,
body.mobile-device *{cursor:auto !important}

/* Disable starfield on mobile - kills perf on slow phones */
body.mobile-device .stars{opacity:.3}
body.mobile-device .pixel-float{display:none}
body.mobile-device::before{background:radial-gradient(ellipse at center,transparent 70%,rgba(0,0,0,.4) 100%)}

/* ---------- CONTAINER ---------- */
body.mobile-device .container{
  padding:10px 8px;
  max-width:100vw;
}

/* ---------- TOP NAV (stack vertically, WRAP links to multiple rows) ----------
 * Previously scrolled horizontally, but the scroll wasn't obvious to users -
 * the LEADERBOARD / ACHIEVEMENTS / SETTINGS buttons were hidden off-screen
 * with no visible affordance to swipe to them. Wrapping is way more
 * discoverable - everything is reachable at a glance. */
body.mobile-device .top-nav{
  flex-direction:column;
  align-items:stretch;
  padding:8px 8px;
  gap:8px;
  margin:6px;
  max-width:calc(100vw - 12px);
  box-sizing:border-box;
}
body.mobile-device .nav-logo{
  font-size:.7rem;
  text-align:center;
  letter-spacing:1.5px;
}
body.mobile-device .nav-links{
  display:flex;
  flex-wrap:wrap;          /* changed from nowrap - everything is visible */
  justify-content:center;
  gap:5px;
  padding:2px 0;
  width:100%;
  box-sizing:border-box;
}
body.mobile-device .nav-links a,
body.mobile-device .nav-links button,
body.mobile-device .nav-links .leaderboard-btn,
body.mobile-device .nav-links .achievements-btn,
body.mobile-device .nav-links .settings-btn{
  font-size:.5rem;
  padding:7px 9px;
  flex:0 0 auto;
  white-space:nowrap;
  letter-spacing:.5px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---------- CHIP HUD - cap width so giant chip totals don't push off-screen ---------- */
body.mobile-device .chip-hud{
  align-self:center;
  margin:0;
  font-size:.55rem;
  padding:6px 10px;
  gap:6px;
  max-width:calc(100vw - 24px);
  box-sizing:border-box;
  flex-wrap:wrap;
  justify-content:center;
}
body.mobile-device .chip-hud-nav{margin-left:0}
body.mobile-device .chip-label{display:none}
body.mobile-device .chip-amount{
  font-size:.65rem;
  min-width:30px;
  max-width:60vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.mobile-device .chip-shop,
body.mobile-device .chip-reset{font-size:.4rem;padding:5px 7px}
body.mobile-device .chip-hud-floater{top:8px;right:8px;max-width:calc(100vw - 16px)}

/* ---------- TITLES ---------- */
body.mobile-device .arcade-title{
  font-size:1.4rem !important;
  letter-spacing:2px;
}
body.mobile-device .arcade-subtitle{
  font-size:.5rem;
  letter-spacing:1.5px;
}
body.mobile-device .arcade-divider{margin:18px auto;max-width:90%}
body.mobile-device h1{font-size:1.4rem !important;letter-spacing:2px}
body.mobile-device h2{font-size:1.05rem !important;letter-spacing:1.5px}
body.mobile-device h3{font-size:.85rem !important}

/* ---------- CARD / GAME GRID ---------- */
body.mobile-device .card-grid{
  grid-template-columns:1fr 1fr !important;
  gap:10px;
  padding:6px 0;
}
body.mobile-device .arcade-card{
  padding:14px 10px;
  border-radius:6px;
}
body.mobile-device .arcade-card:hover{
  transform:none !important;
}
body.mobile-device .card-icon{font-size:1.7rem;margin-bottom:8px}
body.mobile-device .card-title{font-size:.6rem;letter-spacing:1px;margin-bottom:6px}
body.mobile-device .card-desc{font-size:.48rem;line-height:1.6;letter-spacing:0}
body.mobile-device .card-tag{font-size:.4rem;padding:3px 7px;margin-top:8px}

/* On very narrow screens (<380px) drop to single column */
@media (max-width:380px){
  body.mobile-device .card-grid{grid-template-columns:1fr !important}
}

/* ---------- STATS STRIP ---------- */
body.mobile-device .stats-strip{
  grid-template-columns:1fr 1fr;
  padding:10px;
  gap:6px;
}
body.mobile-device .stat-num{font-size:.95rem}
body.mobile-device .stat-label{font-size:.42rem}

/* ---------- TERMINAL BOX ---------- */
body.mobile-device .terminal-box{font-size:.65rem}
body.mobile-device .terminal-bar{padding:6px 10px;font-size:.5rem}
body.mobile-device .terminal-body{padding:14px 12px;font-size:.65rem;line-height:1.6}

/* ---------- BUTTONS - bigger tap targets ---------- */
body.mobile-device button,
body.mobile-device .btn-neon,
body.mobile-device .btn{
  min-height:42px;
  padding:10px 14px;
  font-size:.6rem;
  letter-spacing:1.5px;
  touch-action:manipulation;
}

/* ---------- GAME CANVASES - fit width ---------- */
body.mobile-device canvas{
  max-width:100% !important;
  height:auto !important;
  touch-action:none;       /* let our swipe handler take over */
  display:block;
  margin:0 auto;
}

/* ---------- IMAGES / VIDEOS ---------- */
body.mobile-device img,
body.mobile-device iframe,
body.mobile-device video,
body.mobile-device svg{
  max-width:100%;
  height:auto;
}

/* ---------- TABLES (paytables etc) ---------- */
body.mobile-device table{
  width:100% !important;
  font-size:.55rem;
}
body.mobile-device th,body.mobile-device td{padding:5px 4px}

/* ---------- BET CONTROLS (every casino game has these) ---------- */
body.mobile-device .bet-controls,
body.mobile-device .bet-row,
body.mobile-device .controls,
body.mobile-device .game-controls{
  flex-wrap:wrap;
  justify-content:center;
  gap:6px !important;
}
body.mobile-device .bet-btn,
body.mobile-device .chip-btn{
  min-width:44px;
  min-height:44px;
  padding:8px 10px;
  font-size:.55rem;
}
body.mobile-device .bet-display,
body.mobile-device input.bet-display{
  font-size:1.1rem !important;
  padding:8px 6px;
  min-width:80px;
}
body.mobile-device .deal-btn,
body.mobile-device .play-btn,
body.mobile-device .spin-btn,
body.mobile-device .roll-btn,
body.mobile-device .flip-btn,
body.mobile-device .deal,
body.mobile-device .spin,
body.mobile-device #spin,
body.mobile-device #deal,
body.mobile-device #play,
body.mobile-device #flip,
body.mobile-device #roll{
  font-size:.7rem !important;
  padding:14px 22px !important;
}

/* ---------- SHOP MODAL ---------- */
body.mobile-device #chip-shop-modal .cs-card{
  width:96vw;
  max-width:96vw;
  max-height:92vh;
  padding:26px 10px 14px;
}
body.mobile-device .cs-tiers{
  grid-template-columns:1fr 1fr !important;
  gap:8px;
}
body.mobile-device .cs-title{font-size:1rem;letter-spacing:3px}
body.mobile-device .cs-sub{font-size:.5rem;letter-spacing:2px;margin-bottom:10px}
body.mobile-device .cs-disclaimer{font-size:.5rem;padding:8px;line-height:1.5;margin-bottom:14px}
body.mobile-device .cs-tier{padding:32px 6px 10px}
body.mobile-device .cs-chips-icon{font-size:1.5rem;margin-bottom:4px}
body.mobile-device .cs-chips-amount{font-size:.8rem;margin-bottom:2px}
body.mobile-device .cs-chips-label{font-size:.4rem;margin-bottom:8px}
body.mobile-device .cs-buy{font-size:.62rem;padding:10px 4px;letter-spacing:1px}
body.mobile-device .cs-badge{font-size:.42rem;letter-spacing:1px;padding:5px 2px}
body.mobile-device .cs-custom-input{font-size:.85rem !important;width:90%;padding:5px 4px}
body.mobile-device .cs-footer{font-size:.4rem;letter-spacing:1px;line-height:1.6}
body.mobile-device .cs-close{font-size:1.5rem;top:2px;right:6px}

/* ---------- PRE-GAME / PAY TABLES (slot, videopoker etc) ---------- */
body.mobile-device .paytable,
body.mobile-device .pay-table{
  font-size:.5rem;
  padding:8px;
}
body.mobile-device .reels{
  transform:scale(.9);
  transform-origin:center top;
  margin-bottom:-20px;
}

/* ---------- WORDLE / HANGMAN (text grid games) ---------- */
body.mobile-device .word-grid,
body.mobile-device .keyboard,
body.mobile-device #keyboard{
  width:100% !important;
  max-width:100vw !important;
}
body.mobile-device .key,
body.mobile-device .keyboard button{
  font-size:.65rem !important;
  padding:10px 6px !important;
  min-width:28px;
  min-height:42px;
}
body.mobile-device .tile,
body.mobile-device .letter-tile{
  font-size:1rem !important;
  width:auto !important;
  min-width:32px;
  min-height:32px;
}

/* ---------- GAME-SPECIFIC WRAPPERS - prevent overflow ---------- */
body.mobile-device .game,
body.mobile-device .game-wrap,
body.mobile-device .game-area,
body.mobile-device .game-container,
body.mobile-device #game,
body.mobile-device #board,
body.mobile-device #game-board,
body.mobile-device .board{
  max-width:100vw !important;
  overflow-x:auto;
}

/* ---------- FOOTER ---------- */
body.mobile-device .footer{font-size:.45rem;padding:24px 0 14px;letter-spacing:1px}

/* ---------- ON-SCREEN GAMEPAD (injected by mobile-touch.js for canvas games) ---------- */
.mobile-gamepad{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  padding:10px 14px env(safe-area-inset-bottom,10px);
  display:flex;justify-content:space-between;align-items:flex-end;
  pointer-events:none;
  font-family:'Press Start 2P','Courier New',monospace;
}
.mobile-gamepad > *{pointer-events:auto}
.mg-dpad{
  display:grid;
  grid-template-columns:repeat(3,52px);
  grid-template-rows:repeat(3,52px);
  gap:4px;
}
.mg-btn{
  background:rgba(0,0,0,.6);
  border:2px solid #0f0;
  color:#0f0;
  font:inherit;
  font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  transition:background .08s,box-shadow .08s;
}
.mg-btn:active,.mg-btn.mg-press{
  background:#0f0;color:#000;
  box-shadow:0 0 14px rgba(0,255,0,.6);
}
.mg-up{grid-column:2;grid-row:1}
.mg-left{grid-column:1;grid-row:2}
.mg-right{grid-column:3;grid-row:2}
.mg-down{grid-column:2;grid-row:3}
.mg-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.mg-action{
  width:64px;height:64px;border-radius:50%;
  border:2px solid #ff0;color:#ff0;
  background:rgba(0,0,0,.6);
  font-size:.7rem;letter-spacing:1px;
}
.mg-action.mg-action-b{border-color:#f0f;color:#f0f}
.mg-action:active,.mg-action.mg-press{
  background:currentColor;
}
.mg-action:active span,.mg-action.mg-press span{color:#000;mix-blend-mode:normal}
/* Make room for the gamepad above the page footer */
body.mobile-device.has-gamepad{padding-bottom:160px}
body.mobile-device.has-gamepad .footer{padding-bottom:170px}