/*
 Theme Name:  BandsArcade Ultra Child
 Theme URI:   https://bandsarcade.com
 Description: Child theme for Themify Ultra with neon styles for BandsArcade
 Author:      BandsArcade
 Version:     1.0.0
 Template:    themify-ultra
 Text Domain: bandsarcade-ultra-child
*/

/* ===== Base variables ===== */
:root{
  --ink:#000000;
  --text:#ffffff;
  --muted:#c9d0db;
  --neon-pink:#ff2bd6;
  --neon-cyan:#00f0ff;
  --neon-gold:#ffcc4d;
}

/* ===== Global ===== */
html, body { background:#000 !important; color:var(--text); }
a { color:var(--neon-cyan); }
a:hover, a:focus { color:var(--neon-pink); text-decoration:none; }

/* Headings with subtle neon glow */
h1, h2, h3 {
  color:#fff !important;
  text-shadow:0 0 8px rgba(0,240,255,.45);
}

/* Header / Nav (Themify Ultra) */
#headerwrap, .header-wrap, #site-logo, .main-nav-wrap { background:#000 !important; }
#main-nav a { color:#fff !important; }
#main-nav .current-menu-item > a,
#main-nav a:hover { color:var(--neon-cyan) !important; }
#menu-icon, .menu-toggle { color:#fff !important; }
#main-nav .sub-menu { background:#000 !important; }
#main-nav .sub-menu a { color:#fff !important; }
#main-nav .sub-menu a:hover { color:var(--neon-pink) !important; }

/* Content backgrounds (builder + default) */
#content, .content, .page, .post,
.themify_builder_content, .tb-section, .tb_row,
.module, .module-text, .module-post, .module-portfolio, .module-slider {
  background:#000 !important; color:#fff !important;
}

/* Sidebar / widgets */
#sidebar, .widget, .widget-title { background:#000 !important; color:#fff !important; }
.widget a { color:var(--neon-cyan); }
.widget a:hover { color:var(--neon-pink); }

/* Footer */
#footerwrap, #footer, .footer-widgets { background:#000 !important; color:#b6bfcc !important; }
#footer a { color:var(--neon-cyan); }
#footer a:hover { color:var(--neon-pink); }

/* Logo sizing */
#site-logo img, .site-logo img, .custom-logo {
  max-height:72px; height:auto; width:auto;
}

/* Buttons */
.button, .btn, input[type=submit], .ba-card .ba-cta {
  background:var(--neon-cyan) !important; color:#021018 !important; border:0 !important;
  border-radius:999px; font-weight:700;
}
.button:hover, .btn:hover, input[type=submit]:hover, .ba-card .ba-cta:hover {
  filter:brightness(1.08); box-shadow:0 0 14px var(--neon-cyan);
}

/* ===== Cards & lists ===== */
.neon-title{color:#fff;text-shadow:0 0 7px var(--neon-cyan),0 0 18px var(--neon-cyan)}
.neon-pink{color:var(--neon-pink)}
.neon-cyan{color:var(--neon-cyan)}

.ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.ba-card{background:#101016;border-radius:16px;padding:14px;border:1px solid #23233a;box-shadow:0 0 24px rgba(0,240,255,.08)}
.ba-card h3{margin:10px 0 6px;color:#e9eef3;font-weight:700;font-size:18px}
.ba-card p{margin:0 0 10px;color:#b9c2ce}
.ba-card .ba-cta{display:inline-block;background:var(--neon-cyan);color:#021018;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:700}
.ba-card .ba-cta:hover{filter:brightness(1.05);box-shadow:0 0 14px var(--neon-cyan)}

#ba-leaders { list-style:none; padding-left:0; margin:0; }
#ba-leaders > li { margin:.25rem 0; }
#ba-leaders > li.you-rank{
  margin-top:.75rem; border-top:1px dashed rgba(255,255,255,.25); padding-top:.5rem;
}

.custom-logo{max-height:60px;height:auto}
.you-pill{ display:inline-block;font-size:.75rem;font-weight:700; background:#00e0ff;color:#000;padding:.15rem .4rem;border-radius:.4rem;margin-right:.35rem }
.you-rank{ margin-top:.5rem;opacity:.9 }
.ba-submit{ display:none !important; }   /* keep the manual box hidden */

/* ===== Play page helpers (optional): target your actual page ID if needed ===== */
/* Example: body.page-id-1234 .sidebar { display:none; } */
/* Example: body.page-id-1234 .content { width:100%; } */

/* ===== GAME LAYOUT & FULLSCREEN (FINAL v2) ===== */

/* Console wrapper centers the UI */
#ba-console{
  margin:0 auto;
  padding:0;
  width:100vw;
  max-width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* Rotate overlay */
#ba-rotate-overlay{
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:#000;
  color:#fff;
  font-size:1.1rem;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:9999;
  padding:2rem;
}

/* Hide site chrome & scrolling while in fullscreen (class on <body>) */
body.fullscreen-mode header,
body.fullscreen-mode .site-header{ display:none !important; }
body.fullscreen-mode{ overflow:hidden !important; }

/* Center children only when .ba-game is not display:none
   (lets the START flow control visibility) */
.ba-game:not([style*="display:none"]){
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Same visual width as the iframe; centered under the game */
.ba-leaderboard{
  width:min(100vw, 177.78vh);
  margin:16px auto 0;
  text-align:center;
}
.ba-leaderboard ol{
  list-style:none;
  padding-left:0;
  margin:0 auto;
  max-width:600px;
  text-align:left;
}

/* Desktop Chrome/Windows: readable select */
#ba-campaign{
  background-color:#0b0b0e !important;
  color:#fff !important;
  border:1px solid #23233a !important;
  border-radius:14px !important;
  -webkit-appearance:none; appearance:none;
  padding:.65rem 2.1rem .65rem .9rem !important;
  line-height:1.2 !important;

  /* custom chevron */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'><path d='M2 2l6 6 6-6' stroke='%23BFC7D5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:16px 10px;
}
#ba-campaign:focus{
  outline:2px solid var(--neon-cyan) !important;
  outline-offset:2px !important;
}
#ba-campaign option,
#ba-campaign optgroup{
  background:#fff !important;
  color:#111 !important;
}

/* Minor mobile tweak */
@media (max-width:768px){
  #ba-console{ max-width:100vw !important; }
}

/* Hide all Themify header/menu bits while in fullscreen */
body.fullscreen-mode #headerwrap,
body.fullscreen-mode .header-wrap,
body.fullscreen-mode .main-nav-wrap,
body.fullscreen-mode #main-nav,
body.fullscreen-mode #menu-icon,
body.fullscreen-mode .menu-toggle,
body.fullscreen-mode .tf_mobile_menu_icon,
body.fullscreen-mode .tf-mobile-menu,
body.fullscreen-mode .mobile-menu,
body.fullscreen-mode .sidemenu,
body.fullscreen-mode .header-icons {
  display: none !important;
}

/* Fullscreen toggle uses your blue icons; hide any text just in case */
#ba-fullscreen-toggle{
  position: absolute;
  top: 12px;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  width:50px; height:50px; /* change to 100px if you pick the 100x100 icons */
  background: transparent no-repeat center / contain
              url("https://bandsarcade.com/wp-content/uploads/2025/09/50x50-blue-maximize-icon.png");
  border:0; padding:0; cursor:pointer;
  text-indent:-9999px; overflow:hidden; /* belt-and-suspenders to hide text */
  z-index:10001;
}
body.fullscreen-mode #ba-fullscreen-toggle{
  background-image:url("https://bandsarcade.com/wp-content/uploads/2025/09/50x50-blue-minimize-icon.png");
}

/* 1-6 - #BA-GAME-CONTAINER STYLING SECTIONS */
/* 1) Full-viewport container (good) */
#ba-game-container{
  position:relative;
  width:100vw;
  height:100vh;
  height:100svh;
  height:100dvh;
  overflow:hidden;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9000;
}

/* 2) Desktop 20px frame for everyone (non-fullscreen) */
@media (min-width:1024px){
  body:not(.fullscreen-mode) #ba-game-container{
    padding:20px !important;
    box-sizing:border-box;
  }
}

/* 3) Desktop admin bar clearance (20 + 32 = 52px top) */
@media (min-width:1024px){
  body.admin-bar:not(.fullscreen-mode) #ba-game-container{
    padding-top: calc(20px + 32px) !important;
  }
}

/* 4) Mobile minimized: 5px top/bottom + safe-area bottom */
@media (max-width:1023px){
  body:not(.fullscreen-mode) #ba-game-container{
    height: 100dvh; /* you already have 100svh/dvh above; this is fine */
    padding-top: 5px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }
}

/* 5) Let JS own natural size; neutralize global iframe rules */
#ba-game-container iframe{
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

/* 6) Pseudo-fullscreen fallback (iOS when the API refuses) */
body.pseudo-fs #ba-game-container{
  position: fixed;
  inset: 0;
  padding: 0 !important;
  z-index: 10000;
  background: #000;
}
body.pseudo-fs .ba-dock{ display:none !important; } /* hide dock in pseudo-FS */

/* Pill link (Leaderboard) */
.ba-dock .ba-dock-link{
  appearance:none;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff; text-decoration:none;
  padding:8px 12px; border-radius:999px; font-weight:600; cursor:pointer;
}
.ba-dock .ba-dock-link:hover{ background:rgba(255,255,255,.15); }

/* Make leaderboard icon behave like the other dock icons */
.ba-dock .ba-home-icon,
.ba-dock .ba-games-icon,
.ba-dock .ba-leaderboard-icon{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; padding:0;
}
.ba-dock .ba-home-icon img,
.ba-dock .ba-games-icon img,
.ba-dock .ba-leaderboard-icon img{
  width:50px; height:50px; display:block;
}

/* Desktop: space above the registration form */
@media (min-width:1024px){
  #ba-console .ba-setup{
    margin-top:50px !important;
  }
}

/* Fullscreen hint bubble (desktop only) */
@media (min-width:1024px){
  #ba-fs-hint{
    position:absolute; top:14px; right:72px;
    background:rgba(0,0,0,.65);
    color:#fff; font-size:14px; line-height:1;
    padding:8px 10px; border-radius:8px;
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(3px);
    display:none; z-index:10002; white-space:nowrap;
  }
  #ba-fs-hint.show{ display:block; animation:pulse 1.2s ease-in-out 2; }
  @keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }
}
/* Never show hint in fullscreen */
body.fullscreen-mode #ba-fs-hint{ display:none !important; }

/* ==== Mobile polish (≤1023px) ==== */

/* prevent bounce-overscroll on the blank arcade page only */
body.arcade-blank { overscroll-behavior-y: contain; }

/* 1) Registration spacing: 16px + safe area when the admin bar isn't there */
@media (max-width:1023px){
  #ba-console .ba-setup{
    margin-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  }
}

/* 2) Dock: make it phone-friendly and anchor above safe area */
@media (max-width:1023px){
  .ba-dock{
    gap: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    padding: 6px 10px;
  }
  .ba-dock .ba-home-icon img,
  .ba-dock .ba-games-icon img,
  .ba-dock .ba-leaderboard-icon img{
    width: 40px; height: 40px; display: block;
  }
}

/* 3) Fullscreen hint: slightly smaller on phones */
@media (max-width:1023px){
  #ba-fs-hint{
    font-size: 12px;
    max-width: 70vw;
    line-height: 1.2;
  }
}

/* iOS zoom prevention for the name field (keeps keyboard from zooming the page) */
@media (max-width:1023px){
  #ba-fullname{ font-size: 16px; }
}

/* Force the dock bottom-right on mobile; override any old centering */
@media (max-width:1023px){
  body.arcade-blank .ba-dock{
    position: fixed !important;
    left: auto !important;
    right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    transform: none !important;
    padding: 6px 8px;
    gap: 8px;
    z-index: 10002;
    backdrop-filter: blur(4px);
  }
  body.arcade-blank .ba-dock .ba-home-icon img,
  body.arcade-blank .ba-dock .ba-games-icon img,
  body.arcade-blank .ba-dock .ba-leaderboard-icon img{
    width: 36px; height: 36px; display: block;
  }
}

/* Hide dock in any fullscreen state (real or pseudo) */
body.fullscreen-mode .ba-dock,
body.pseudo-fs .ba-dock{
  display: none !important;
}

/* Mobile: force no left/right padding on the game container */
@media (max-width:1023px){
  body:not(.fullscreen-mode) #ba-game-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* If any Themify wrappers are adding side padding on the Play page, zero them too */
@media (max-width:1023px){
  body.arcade-blank #content,
  body.arcade-blank .content,
  body.arcade-blank .page,
  body.arcade-blank .themify_builder_content,
  body.arcade-blank .tb-section,
  body.arcade-blank .tb_row{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Fullscreen or pseudo-FS: absolutely no padding */
body.fullscreen-mode #ba-game-container,
body.pseudo-fs #ba-game-container{
  padding: 0 !important;
}

/* iOS landscape hint: bottom-center toast */
#ba-ios-hint{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom,0px) + 12px);
  z-index: 10003;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  font: 13px/1.35 -apple-system, system-ui, Segoe UI, Roboto;
  max-width: 92vw;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
#ba-ios-hint button{
  margin-left: 10px;
  appearance: none; border: 0; border-radius: 8px;
  padding: 4px 8px; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff;
}
@media (min-width:1024px){ #ba-ios-hint{ display:none; } }
/* Hide if user is in fullscreen or pseudo-fs already */
body.fullscreen-mode #ba-ios-hint, body.pseudo-fs #ba-ios-hint{ display:none !important; }

/* Hide the blue fullscreen button on iOS (we use pinch + Lock there) */
@supports (-webkit-touch-callout: none) { /* iOS hint, broad but effective */
  #ba-fullscreen-toggle { display: none !important; }
}

body.fullscreen-mode #ba-view-lock,
body.pseudo-fs #ba-view-lock{ display:none !important; }

/* iOS landscape toast: pinch & lock instructions */
#ba-zoom-hint{
  position:fixed;
  left:50%; transform:translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom,0px) + 12px);
  z-index: 10003;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  font: 13px/1.35 -apple-system, system-ui, Segoe UI, Roboto;
  max-width: 92vw;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Keep dock visible while adjusting; if you prefer to hide it then, uncomment: */
/* body.view-adjust .ba-dock { display:none !important; } */

#ba-view-lock{
  position: fixed;
  top: 12px;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 10002;
  background: rgba(0,0,0,.65);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 120px;
  text-align: center;
  font: 14px/1 -apple-system, system-ui, Segoe UI, Roboto;
  cursor: pointer;
}

@media (orientation: landscape) {
  #ba-view-lock{
    right: calc(env(safe-area-inset-right, 0px) + 70px);
  }
}

/* iOS: FS button hidden, keep Lock snug to the right edge */
@supports (-webkit-touch-callout: none) {
  #ba-view-lock{ right: calc(env(safe-area-inset-right, 0px) + 12px); }
}