/* static/css/home.css */

/* --- Home layout / lobby --- */

.home-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.75rem;
    margin-top: 1.5rem;
}

.home-sidebar {
    background: #161b24;
    border-radius: 12px;
    border: 1px solid #262c3a;
    padding: 1rem 1rem 1.2rem 1rem;
    height: 100%
}

.home-sidebar-section + .home-sidebar-section {
    margin-top: 1.25rem;
}

.home-sidebar-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 0.35rem;
}

.home-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sidebar-pill {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #e5e7eb;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.sidebar-pill .pill-label {
    flex: 1;
}

.sidebar-pill .pill-tag {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.08);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.4);
}

.sidebar-pill .pill-icon {
    margin-right: 0.4rem;
}

.sidebar-pill:hover {
    background: #1b2231;
    border-color: #2d3748;
    transform: translateY(-1px);
}

.sidebar-pill.is-active {
    background: radial-gradient(circle at 0% 0%, #111827, #020617);
    border-color: #facc15;
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.3);
}

.sidebar-lang {
    justify-content: flex-start;
}

/* “Support” in sidebar can get a subtle highlight */
.sidebar-support-trigger {
    border-color: #3b82f6;
}

/* Main side */

.home-main {
    min-height: 420px;
}

.home-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.home-hero-heading h2 {
    font-size: 1.8rem;
    font-weight: 700;
}

.home-hero-heading .accent {
    color: #facc15;
}

.home-hero-subtitle {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    color: #9ca3af;
}

.home-balance-card {
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    background: radial-gradient(circle at 0% 0%, #1f2937, #020617);
    border: 1px solid #374151;
    text-align: right;
    min-width: 210px;
}

.balance-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9ca3af;
}

.balance-value {
    margin-top: 0.35rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.balance-caption {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: #6b7280;
}

/* CTA when logged out */

.home-auth-cta {
    text-align: right;
}

.home-auth-buttons {
    margin-top: 0.5rem;
    display: inline-flex;
    gap: 0.5rem;
}

.btn-primary,
.btn-ghost {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 600;
}

.btn-primary {
    background: #ffd700;
    color: #101820;
}

.btn-ghost {
    border: 1px solid #374151;
    color: #e5e7eb;
}

/* Section & game grid */

.home-section {
    margin-top: 0.5rem;
}

.home-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.home-section-header h3 {
    font-size: 1.1rem;
}

.home-section-tag {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.7);
    color: #22c55e;
    background: rgba(22, 101, 52, 0.3);
}

.game-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
    gap: 1rem;
}

/* reuse .game-card base but tweak a bit for lobby */

.game-card {
    padding: 1.1rem 1.1rem 1rem 1.1rem;
    background: #161b24;
    border-radius: 10px;
    border: 1px solid #262c3a;
    width:90%
}

.game-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.game-card-header h4 {
    font-size: 1.05rem;
}

.game-card-subtitle {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

.game-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.6);
}

/* Coinflip form inline fields */

.game-form {
    margin-top: 0.5rem;
}

.form-row-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    gap: 0.6rem;
}

.form-row-inline label {
    font-size: 0.85rem;
    flex: 0 0 72px;
}

.form-row-inline input,
.form-row-inline select {
    flex: 1;
}

.btn-primary.full-width {
    width: 100%;
    text-align: center;
}

/* Placeholder card */

.game-card-placeholder {
    opacity: 0.8;
    border-style: dashed;
    border-color: #374151;
}

.placeholder-body {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.placeholder-pill {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    border: 1px solid #4b5563;
    color: #9ca3af;
}

/* Responsive-ish for home */

@media (max-width: 900px) {
    .home-layout {
        grid-template-columns: 1fr;
    }
    .home-sidebar {
        order: 2;
    }
    .home-main {
        order: 1;
    }
    .game-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Home layout + sticky sidebar
   ================================ */

/* ================================
   Home layout + sticky sidebar
   ================================ */

   .home-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.75rem;
    margin-top: 1.5rem;
    min-height: calc(100vh - 80px);
  }
  
  .home-sidebar {
    background: #161b24;
    border-radius: 12px;
    border: 1px solid #262c3a;
    padding: 1rem 1rem 1.2rem 1rem;
  
    position: sticky;
    top: 72px;                  /* adjust if your top bar is taller/shorter */
    align-self: flex-start;
  
    max-height: calc(100vh - 88px);
    overflow-y: auto;           /* sidebar scrolls independently if too tall */
    /*hide the scrollbar but still allow scrolling*/
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE 10+ */


  }
  

.home-sidebar-section + .home-sidebar-section {
    margin-top: 1rem;
}

.home-sidebar-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9ca3af;
    margin-bottom: 0.3rem;
}

.home-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sidebar-pill {
    width: 100%;
    text-align: left;
    border-radius: 999px;
    border: 1px solid #262c3a;
    background: #111827;
    color: #e5e7eb;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
}

.sidebar-pill:hover {
    background: #1f2937;
}

.sidebar-pill.is-active {
    border-color: #facc15;
    background: radial-gradient(circle at 0% 0%, #111827, #020617);
}

.pill-label {
    flex: 1;
}

.pill-icon {
    font-size: 1rem;
}

.pill-tag {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.6);
    color: #fde68a;
}

/* main area spacing override */

.home-main {
    padding-bottom: 2rem;
}

/* ================================
   Top status bar
   ================================ */

.home-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    border: 1px solid #262c3a;
    background: radial-gradient(circle at 0% 0%, #111827, #020617);
    font-size: 0.8rem;
}

.home-status-left {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}

.status-text {
    color: #9ca3af;
}

.home-status-right {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.status-balance {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #f5f5f5;
}

.status-user-btn {
    border-radius: 999px;
    border: 1px solid #374151;
    background: #020617;
    color: #e5e7eb;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.status-user-btn:hover {
    background: #111827;
}

.status-user-caret {
    font-size: 0.75rem;
}


/* ================================
   Account modal (anchored to user button)
   ================================ */

   .account-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;     /* we'll enable on children */
  }
  
  .account-modal.hidden {
    display: none;
  }
  
  .account-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(2px);
    pointer-events: auto;
  }
  
  .account-modal-panel {
    position: absolute;       /* JS will set top/right */
    max-width: 420px;
    width: 100%;
    border-radius: 16px;
    background: radial-gradient(circle at 0% 0%, #020617, #020617);
    border: 1px solid #262c3a;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8);
    pointer-events: auto;
    padding: 0.9rem 1rem 1rem 1rem;
  }
  
  /* header */
  
  .account-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
  }
  
  .account-modal-title {
    font-size: 1rem;
    font-weight: 600;
  }
  
  .account-modal-subtitle {
    margin-top: 0.1rem;
    font-size: 0.8rem;
    color: #9ca3af;
  }
  
  .account-modal-close {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.1rem;
    cursor: pointer;
  }
  
  .account-modal-close:hover {
    color: #e5e7eb;
  }
  
  /* body */
  
  .account-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.2rem;
  }
  
  .account-row {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #262c3a;
    background: #020617;
    padding: 0.55rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
  }
  
  .account-row:hover {
    background: #0b1120;
  }
  
  .account-row-main {
    flex: 1;
  }
  
  .account-row-title {
    color: #f5f5f5;
    font-size: 0.9rem;
    font-weight: 500;
  }
  
  .account-row-sub {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: #9ca3af;
  }
  
  .account-row-arrow {
    font-size: 1.1rem;
    color: #6b7280;
  }
  
  .account-row-split {
    cursor: default;
  }
  
  .account-row-actions {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
  }
  
  .account-tx-btn {
    font-size: 0.75rem;
  }
  
  /* Responsive bits */
  
  @media (max-width: 900px) {
    .account-modal-panel {
      max-width: none;
      left: 0 !important;
      right: 0 !important;
      margin: 0.75rem;
    }
  }
  /* Game library grid on home */

.game-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  
  .game-card-large {
    display: flex;
    flex-direction: column;
    padding: 0.9rem;
  }
  .game-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;

    /* smooth hover animation */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
  .game-card-link:hover {
    text-decoration: none;

    /* lift upward slightly */
    transform: translateY(-6px);

    /* deep shadow like the card slides out of the background */
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.22),
        0 12px 24px rgba(0, 0, 0, 0.18);
}

  .game-card-logo {
    height: 120px;
    border-radius: 10px;
    background: radial-gradient(circle at 20% 0%, #facc15, #111827);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  
  .game-card-logo span {
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
  }
  
  .coinflip-logo {
    background: radial-gradient(circle at 20% 0%, #f97316, #020617);
  }
  
  .placeholder-logo {
    background: radial-gradient(circle at 0% 0%, #1f2937, #020617);
    color: #9ca3af;
  }
  
  .game-card-body {
    margin-top: 0.7rem;
  }
  
  .game-card-meta {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  
  .game-meta-pill {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #4b5563;
    color: #e5e7eb;
  }
  
  /* shrink grid on smaller widths */
  @media (max-width: 1100px) {
    .game-library-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 768px) {
    .game-library-grid {
      grid-template-columns: 1fr;
    }
  }
  /* ================================
   Coin Flip page layout + coin
   ================================ */

.coinflip-layout {
    display: flex;
    gap: 1.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.coinflip-visual {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.coinflip-controls {
    flex: 1;
    min-width: 260px;
}

/* 3D coin */

.coin {
    width: 160px;
    height: 160px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    border-radius: 50%;
}

.coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.7),
        inset 0 0 10px rgba(15, 23, 42, 0.9);
}

/* FRONT = Horde (Heads) */
.coin-front {
    /* TODO: point these to your real PNG paths */
    background-image: url("/static/img/horde.png");
}

/* BACK = Alliance (Tails) */
.coin-back {
    background-image: url("/static/img/alliance.png");
    transform: rotateY(180deg);
}

/* Optional bit of “table” */
.coinflip-visual::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 40px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0,0,0,0.7), transparent 70%);
    transform: translateY(60px);
    pointer-events: none;
}

/* Smaller on phones */
@media (max-width: 768px) {
    .coin {
        width: 130px;
        height: 130px;
    }
}
/* ================================
   Coin Flip - Layout
   ================================ */

   .coinflip-shell {
    padding-bottom: 1.25rem;
  }
  
  .coinflip-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1.6fr) 260px;
    gap: 1.25rem;
    align-items: center;
  }
  
  /* LEFT PANEL - controls */
  
  .coinflip-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .coinflip-amount-panel {
    background: #0b1120;
    border-radius: 10px;
    border: 1px solid #1f2937;
    padding: 0.6rem 0.7rem;
  }
  
  .coinflip-amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #9ca3af;
    margin-bottom: 0.4rem;
  }
  
  .coinflip-amount-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
  }
  
  .coinflip-amount-balance span[data-balance] {
    font-variant-numeric: tabular-nums;
    color: #f5f5f5;
  }
  
  .coinflip-amount-input-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  
  .coinflip-amount-input-row input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 999px;
    border: 1px solid #374151;
    background: #020617;
    color: #f9fafb;
    font-variant-numeric: tabular-nums;
  }
  
  .coinflip-amount-input-row input:focus {
    outline: none;
    border-color: #4f46e5;
  }
  
  .coinflip-amount-buttons {
    display: flex;
    gap: 0.35rem;
  }
  
  .btn-chip {
    flex: 1;
    padding: 0.3rem 0;
    border-radius: 999px;
    border: 1px solid #374151;
    background: #020617;
    color: #e5e7eb;
    font-size: 0.75rem;
    cursor: pointer;
  }
  .btn-chip:hover {
    background: #111827;
  }
  
  /* Faction buttons */
  
  .coinflip-choice-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0.45rem;
  }
  
  .coinflip-side-btn {
    flex: 1;
    border-radius: 10px;
    border: 1px solid #374151;
    background: #020617;
    color: #e5e7eb;
    padding: 0.55rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  }
  
  .coinflip-side-btn .side-label-main {
    font-size: 0.9rem;
    font-weight: 600;
  }
  
  .coinflip-side-btn .side-label-sub {
    font-size: 0.75rem;
    color: #9ca3af;
  }
  
  .coinflip-side-btn:hover {
    background: #0b1120;
    transform: translateY(-1px);
  }
  
  .coinflip-side-btn.is-selected {
    border-color: #facc15;
    background: radial-gradient(circle at 0% 0%, #111827, #020617);
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35);
  }
  
  /* Bet button */
  
  .coinflip-bet-btn {
    margin-top: 0.25rem;
  }
  
  /* Small log under controls */
  
  .coinflip-log {
    margin-top: 0.6rem;
    font-size: 0.8rem;
  }
  
  
  /* ================================
     Coin Flip - Center coin scene
     ================================ */
  
  .coinflip-stage {
    position: relative;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 10%, #111827, #020617 55%, #020617 100%);
    border: 1px solid #111827;
  }
  
  /* simple “mountain/forest” silhouettes */
  
  .coinflip-bg {
    position: absolute;
    inset: 0;
  }
  
  .coinflip-horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    height: 80px;
    background: linear-gradient(to top, #020617, transparent);
  }
  
  .coinflip-silhouette-left,
  .coinflip-silhouette-right {
    position: absolute;
    bottom: 0;
    width: 40%;
    height: 120px;
    background: radial-gradient(circle at 50% 0%, rgba(15,23,42,0.9), #020617);
    opacity: 0.35;
  }
  
  .coinflip-silhouette-left {
    left: -10%;
    transform: skewX(-8deg);
  }
  .coinflip-silhouette-right {
    right: -10%;
    transform: skewX(8deg);
  }
  
  /* 3D coin */
  
  .coin3d-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
  }
  
  .coin3d {
    width: 140px;
    height: 140px;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center;
  }
  
  .coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    backface-visibility: hidden;
    box-shadow:
      0 12px 25px rgba(0, 0, 0, 0.7),
      0 0 0 3px rgba(250, 204, 21, 0.35),
      inset 0 0 18px rgba(0, 0, 0, 0.7);
  }
  
  /* FRONT = Horde / heads */
  .coin-front {
    background-image: url("/static/img/horde.png");   /* <- your Horde PNG */
  }
  
  /* BACK = Alliance / tails */
  .coin-back {
    background-image: url("/static/img/alliance.png"); /* <- your Alliance PNG */
    transform: rotateY(180deg);
  }
  
  /* Animation states */
  
  .coin3d.flip-heads {
    animation: coinFlipHeads 1.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  }
  
  .coin3d.flip-tails {
    animation: coinFlipTails 1.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  }
  
  @keyframes coinFlipHeads {
    0%   { transform: rotateY(0deg) translateY(0); }
    30%  { transform: rotateY(540deg) translateY(-30px); }
    60%  { transform: rotateY(1080deg) translateY(-10px); }
    100% { transform: rotateY(1800deg) translateY(0); } /* lands front */
  }
  
  @keyframes coinFlipTails {
    0%   { transform: rotateY(0deg) translateY(0); }
    30%  { transform: rotateY(540deg) translateY(-30px); }
    60%  { transform: rotateY(1080deg) translateY(-10px); }
    100% { transform: rotateY(1890deg) translateY(0); } /* half turn more -> back */
  }
  
  
  /* ================================
     Coin Flip - Right info card
     ================================ */
  
  .coinflip-info {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .coinflip-mult-card {
    width: 100%;
    border-radius: 12px;
    background: #020617;
    border: 1px solid #1f2937;
    padding: 0.8rem 0.9rem;
    text-align: center;
  }
  
  .coinflip-mult-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9ca3af;
  }
  
  .coinflip-mult-value {
    margin-top: 0.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  
  .coinflip-mult-sub {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #9ca3af;
  }
  
  /* Responsive tweak */
  
  @media (max-width: 900px) {
    .coinflip-layout {
      grid-template-columns: 1fr;
    }
    .coinflip-stage {
      order: -1;
      height: 200px;
    }
  }
  /* ================================
   Wrath of the Horde slot layout
   ================================ */

.slot-shell {
    padding: 1.1rem 1.1rem 1.2rem 1.1rem;
    background: #020617;
    border-radius: 14px;
    border: 1px solid #1f2937;
    box-shadow: 0 18px 45px rgba(0,0,0,0.7);
  }
  
  .slot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
  }
  
  .slot-header-main h4 {
    font-size: 1.1rem;
  }
  
  .slot-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
  }
  
  .slot-tag {
    font-size: 0.75rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.7);
    color: #e5e7eb;
    background: rgba(15,23,42,0.8);
  }
  
  .slot-tag-rtp {
    border-color: rgba(250,204,21,0.7);
    color: #fde68a;
  }
  
  /* Main shell layout */
  
  .slot-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    gap: 1rem;
    align-items: stretch;
  }
  
  .slot-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .slot-panel-card {
    background: radial-gradient(circle at 0% 0%, #020617, #020617);
    border-radius: 12px;
    border: 1px solid #111827;
    padding: 0.7rem 0.8rem;
  }
  
  /* Left panel */
  
  .slot-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
  }
  
  .slot-panel-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #9ca3af;
  }
  
  .slot-panel-balance {
    font-size: 0.8rem;
    color: #e5e7eb;
  }
  
  .slot-bet-input-row {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  
  .slot-bet-input {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #1f2937;
    background: #020617;
    color: #e5e7eb;
    font-variant-numeric: tabular-nums;
  }
  
  .slot-bet-input:focus {
    outline: none;
    border-color: #4f46e5;
  }
  
  .slot-bet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  
  .btn-chip {
    border-radius: 999px;
    border: 1px solid #1f2937;
    background: #111827;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: #e5e7eb;
    cursor: pointer;
  }
  
  .btn-chip:hover {
    background: #1f2937;
  }
  
  .slot-lines-row {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #9ca3af;
  }
  
  .slot-info-small {
    font-size: 0.78rem;
    color: #9ca3af;
  }
  
  .slot-info-row {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
  }
  
  /* Status message */
  
  .slot-message {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    min-height: 1.1em;
  }
  
  .slot-message-error {
    color: #f97373;
  }
  
  .slot-message-info {
    color: #9ca3af;
  }
  
  /* Center panel – reels */
  
  .slot-panel-center {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
  }
  
  .slot-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  
  .slot-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1);
  }
  
  .slot-reel-frame {
    position: relative;
    z-index: 1;
    padding: 0.6rem 0.8rem 1.4rem 0.8rem;
  }
  
  .slot-frame-img {
    position: absolute;
    inset: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
  }
  
  .slot-reels {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
    z-index: 1;
  }
  
  .slot-reel {
    background: radial-gradient(circle at 50% 0%, rgba(15,23,42,0.4), rgba(15,23,42,0.9));
    border-radius: 10px;
    padding: 0.25rem 0.15rem;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 0.25rem;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.8);
    overflow: hidden;
  }
  
  .slot-cell {
    border-radius: 8px;
    background: #020617;
    box-shadow:
      inset 0 0 12px rgba(15,23,42,0.9),
      0 0 8px rgba(0,0,0,0.6);
    position: relative;
  }
  
  /* Symbol sprites */
  
  .slot-symbol {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  .slot-symbol-orc {
    background-image: url("/static/slots/wrath_horde/symbols/orc.png");
  }
  .slot-symbol-alliance {
    background-image: url("/static/slots/wrath_horde/symbols/alliance.png");
  }
  .slot-symbol-axe {
    background-image: url("/static/slots/wrath_horde/symbols/axe.png");
  }
  .slot-symbol-shield {
    background-image: url("/static/slots/wrath_horde/symbols/shield.png");
  }
  .slot-symbol-wild {
    background-image: url("/static/slots/wrath_horde/symbols/wild.png");
  }
  .slot-symbol-scatter {
    background-image: url("/static/slots/wrath_horde/symbols/scatter.png");
  }
  .slot-symbol-coin {
    background-image: url("/static/slots/wrath_horde/symbols/coin.png");
  }
  
  /* Spin animation */
  
  .slot-reel.is-spinning .slot-cell {
    animation: slot-reel-spin 0.5s linear infinite;
    filter: brightness(1.1);
  }
  
  @keyframes slot-reel-spin {
    0% { transform: translateY(0px); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(0px); }
  }
  
  /* Win highlights */
  
  .slot-cell.is-win {
    box-shadow:
      0 0 0 2px rgba(250,204,21,0.9),
      0 0 18px rgba(250,204,21,0.9),
      inset 0 0 22px rgba(234,179,8,0.6);
  }
  
  .slot-cell.is-sticky-wild::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 1px dashed rgba(248, 250, 252, 0.7);
    box-shadow: 0 0 14px rgba(239,68,68,0.5);
  }
  
  /* Spin button */
  
  .slot-spin-btn {
    margin-top: 0.9rem;
    align-self: center;
    width: 180px;
    height: 64px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: transparent;
    position: relative;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #0f172a;
  }
  
  .slot-spin-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/static/slots/wrath_horde/ui/spin_button.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.12s ease, filter 0.12s ease;
  }
  
  .slot-spin-label {
    position: relative;
    z-index: 1;
  }
  
  .slot-spin-btn:hover::before {
    transform: scale(1.03) translateY(-1px);
    filter: brightness(1.08);
  }
  
  .slot-spin-btn.is-disabled,
  .slot-spin-btn:disabled {
    cursor: default;
  }
  
  .slot-spin-btn.is-disabled::before,
  .slot-spin-btn:disabled::before {
    background-image: url("/static/slots/wrath_horde/ui/spin_button_disabled.png");
    filter: grayscale(0.2) brightness(0.9);
  }
  
  /* Right panel */
  
  .slot-lastwin-card .slot-lastwin-value {
    margin-top: 0.3rem;
    font-size: 1.3rem;
    font-weight: 700;
  }
  
  .slot-lastwin-sub {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #9ca3af;
  }
  
  .slot-freespins-card .slot-freespins-count {
    font-weight: 700;
    font-size: 1.1rem;
  }
  
  .slot-freespins-sub {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: #9ca3af;
  }
  
  .slot-legend-card .slot-legend-list {
    list-style: none;
    padding-left: 0;
    margin: 0.3rem 0 0 0;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  
  .legend-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    margin-right: 0.4rem;
    vertical-align: middle;
  }
  
  /* Big win overlay */
  
  .slot-bigwin-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .slot-bigwin-overlay.is-visible {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
  }
  
  .slot-bigwin-inner {
    position: relative;
    padding: 0.6rem 1.2rem 0.9rem 1.2rem;
    border-radius: 18px;
    background: radial-gradient(circle at 0% 0%, #0f172a, #020617);
    border: 1px solid rgba(250,204,21,0.6);
    box-shadow: 0 30px 80px rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  
  .slot-bigwin-img {
    max-width: 260px;
    height: auto;
  }
  
  .slot-bigwin-amount {
    margin-top: 0.2rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fde68a;
    text-shadow: 0 0 14px rgba(250,204,21,0.9);
  }
  
  /* Responsive */
  
  @media (max-width: 1100px) {
    .slot-layout {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
      grid-template-rows: auto auto;
    }
    .slot-panel-left {
      grid-column: 1 / -1;
      order: 1;
    }
    .slot-panel-center {
      order: 2;
    }
    .slot-panel-right {
      order: 3;
    }
  }
  
  @media (max-width: 800px) {
    .slot-layout {
      grid-template-columns: 1fr;
    }
  }