/*
Theme Name: Mines.co
Theme URI: https://mines.co/
Author: Mines.co
Author URI: https://mines.co/
Description: Mines.co — a fully responsive WordPress theme for a Mines gambling guide site. Includes a playable provably-fair Mines game (Home & Demo), a casino toplist, and SEO-optimized landing pages for Real Money, Demo, Registration, Strategy, Hack, Predictor and App. Each page is an individual WordPress page; the theme auto-creates them and sets the Home page as your static front page on activation.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mines-co
*/

/* ---------- Resets / base ---------- */
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
body.mines {
  background: hsl(220 25% 8%);
  color: hsl(210 20% 90%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.mines a { color: hsl(213 80% 55%); }
img { max-width: 100%; }

.mines-shell { min-height: 100vh; background: hsl(220 25% 8%); }
.mines-container { width: 100%; max-width: 1024px; margin: 0 auto; }

/* ---------- Keyframes (ported from app) ---------- */
@keyframes gem-reveal { 0% { opacity:0; transform:scale(0) rotateY(90deg);} 50% { opacity:1; transform:scale(1.15) rotateY(0deg);} 100% { opacity:1; transform:scale(1) rotateY(0deg);} }
@keyframes mine-reveal { 0% { opacity:0; transform:scale(0) rotateY(90deg);} 40% { opacity:1; transform:scale(1.2) rotateY(0deg);} 60% { transform:scale(0.9);} 100% { opacity:1; transform:scale(1) rotateY(0deg);} }
@keyframes tile-pop { 0% { transform:scale(1);} 30% { transform:scale(0.85);} 100% { transform:scale(1);} }
@keyframes screen-shake { 0%,100% { transform:translate(0,0);} 10% { transform:translate(-4px,2px);} 20% { transform:translate(4px,-2px);} 30% { transform:translate(-3px,-3px);} 40% { transform:translate(3px,3px);} 50% { transform:translate(-2px,1px);} 60% { transform:translate(2px,-1px);} 70% { transform:translate(-1px,2px);} 80% { transform:translate(1px,-1px);} 90% { transform:translate(-1px,0px);} }
@keyframes promo-pop { 0% { opacity:0; transform:scale(0.9);} 100% { opacity:1; transform:scale(1);} }

/* ---------- Game tile hover (kept in CSS so we don't re-render on hover) ---------- */
.mines-tile.is-interactive { cursor: pointer; }
.mines-tile.is-interactive:hover {
  background: linear-gradient(145deg, hsl(220 20% 28%) 0%, hsl(220 20% 22% / 0.9) 100%) !important;
  border: 1px solid hsl(213 80% 55% / 0.3) !important;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.1), inset 0 -2px 0 hsl(0 0% 0% / 0.15), 0 0 12px hsl(213 80% 55% / 0.15), 0 4px 8px hsl(0 0% 0% / 0.25) !important;
}

/* number input spinners off for a cleaner look */
.mines input[type=number]::-webkit-outer-spin-button,
.mines input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mines input[type=number] { -moz-appearance: textfield; }

/* ---------- Responsive game layout ---------- */
@media (max-width: 1023px) {
  [data-game-row] { flex-direction: column-reverse !important; }
  [data-controls-col] { width: 100% !important; }
  [data-bet-panel] { width: 100% !important; }
  [data-game-grid-card] { min-height: 300px !important; }
}

/* ---------- Site footer nav ---------- */.mines-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
.mines-footer-links a { color: hsl(215 15% 55%); text-decoration: none; font-size: 13px; }
.mines-footer-links a:hover { color: hsl(210 20% 90%); }

/* ---------- Burger placement ----------
   The burger lives inline in the top bar, right next to the balance chip, at
   every breakpoint (desktop and mobile) so it stays aligned with the cash box. */

/* ---------- Casino toplist: pulsing Visit CTA ---------- */
@keyframes mines-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(213 80% 55% / 0.45), 0 0 20px hsl(213 80% 55% / 0.30); transform: scale(1); }
  50%      { box-shadow: 0 0 0 7px hsl(213 80% 55% / 0), 0 0 28px hsl(213 80% 55% / 0.55); transform: scale(1.035); }
}
.mines-visit { animation: mines-cta-pulse 2.2s ease-in-out infinite; will-change: transform, box-shadow; }
.mines-visit:hover { animation-play-state: paused; transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .mines-visit { animation: none; } }

/* ---------- Casino toplist: mobile stacking ----------
   The fixed-width desktop columns only fit on real desktops (>=1024px); on
   phones AND tablets they wrap into a disoriented mess, so stack them into a
   clean single column with a full-width Visit button below 1024px. */
/* ---------- Casino toplist: mobile layout ----------
   The fixed-width desktop columns only fit on real desktops (>=1024px). Below
   that, lay the row out as a grid: casino (logo + name) and the Visit button
   share the top line, with the bonus and feature tags on aligned rows beneath
   — so the Visit button stays in-line with the casino, not stranded full-width. */
@media (max-width: 1023px) {
  .mines-casino-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "id visit" "bonus bonus" "tags tags";
    align-items: center;
    gap: 10px 12px !important;
  }
  .mines-casino-id    { grid-area: id; width: auto !important; min-width: 0 !important; }
  .mines-visit        { grid-area: visit; width: auto !important; justify-content: center !important; }
  .mines-casino-bonus { grid-area: bonus; width: auto !important; }
  .mines-casino-tags  { grid-area: tags; justify-content: flex-start !important; }
}

/* ---------- Mobile action bar (Cash Out / Start / Stop) ----------
   Keeps the primary action reachable without scrolling past the board. The JS
   engine sets data-bar="fixed" (pinned to viewport bottom while the game block
   extends below the fold — it follows as you scroll) or data-bar="abs" (parked
   at the bottom of the game block once scrolled past, so it never floats over
   the casino cards). Desktop keeps the action area inline in the panel. */
@media (max-width: 1023px) {
  [data-action-area][data-bar="fixed"] {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 35;
    width: 100%; max-width: 1024px; margin: 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: hsl(220 22% 12%);
    border-top: 1px solid hsl(220 18% 22%);
    box-shadow: 0 -12px 30px hsl(220 25% 4% / 0.55);
  }
  [data-action-area][data-bar="abs"] {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 35;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: hsl(220 22% 12%);
    border-top: 1px solid hsl(220 18% 22%);
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
    box-shadow: 0 -12px 30px hsl(220 25% 4% / 0.55);
  }
}

/* ---------- Article comparison tables (mobile) ----------
   Fit the whole table inside the viewport — every column visible at once, no
   horizontal scroll. Columns share the width evenly and text wraps; type is
   sized down with a clean hierarchy so it stays legible. */
@media (max-width: 1023px) {
  article div[style*="overflow-x"] { overflow-x: hidden !important; }
  article table { width: 100% !important; table-layout: fixed !important; font-size: 12px !important; }
  article table th {
    font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: 0.02em; text-transform: uppercase;
    padding: 7px 6px !important; color: hsl(210 20% 82%) !important; word-break: break-word;
  }
  article table td {
    font-size: 12px !important; padding: 7px 6px !important;
    line-height: 1.3 !important; word-break: break-word;
  }
  article table td:first-child { color: hsl(210 20% 92%) !important; font-weight: 600 !important; }
}