/* =========================================================
   BFF CASINO ROYALE — hoja principal

   La paleta ya NO vive aqui: esta en tokens.css. Este archivo
   solo consume var(). Si buscas un color, no lo busques en este
   archivo -- cambialo en tokens.css y cambia en todas partes.

   (La cabecera anterior decia "no purple, no neon". Eso describia
   el sistema viejo de dorado sobre negro; el actual es morado
   electrico + dorado, segun la referencia del cliente.)
   ========================================================= */
:root{
  /* El color, la tipografía, la forma y el ritmo viven ahora en tokens.css,
     que se carga ANTES que este archivo. Este bloque definía los mismos
     nombres con los valores antiguos y, al cargarse después, los pisaba:
     el casino seguía saliendo dorado-sobre-negro por mucho que se cambiara
     la paleta nueva. Se queda solo lo que no es un token de diseño. */
  font-size:16px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{-webkit-tap-highlight-color:transparent;}

body{
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--font-ui);
  min-height:100vh;
  overflow-x:hidden;
  width:100%;
}

/* Fine grain overlay — kills the flat "digital gradient" look that
   reads as generic. Pure CSS, no image request. */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.035;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.9) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0 1px, transparent 1px 4px);
  mix-blend-mode:overlay;
}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--purple-2), var(--bg-3)); border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, var(--purple), var(--purple-2));}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,button{-webkit-tap-highlight-color:transparent;}

/* ===================== VIEW SYSTEM (no-reload navigation) ===================== */
.view{display:none;}
.view.view-active{display:block;}
/* #view-dashboard needs a grid (main + ticker columns) instead of block;
   the ID selector reliably outranks the generic .view.view-active rule. */
#view-dashboard.view-active{display:grid;}

/* ===================== LAYOUT ===================== */
.app{
  display:grid;
  grid-template-columns:250px 1fr;
  grid-template-rows:64px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  min-height:100vh;
}

#view-dashboard{
  grid-area:content;
  grid-template-columns:1fr 320px;
  min-height:0;
}

/* ===================== TOPBAR ===================== */
.topbar{
  grid-area:topbar;
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
  padding:0 22px;
  background:linear-gradient(180deg, rgba(26,17,41,0.94), rgba(10,6,17,0.88));
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--border-soft);
  position:sticky;
  top:0;
  z-index:300;
}
/* Gold rule under the header — the single detail that most sells "premium" */
.topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,185,66,0.55) 18%, rgba(247,231,174,0.85) 50%, rgba(245,185,66,0.55) 82%, transparent);
}

.hamburger{
  display:none;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text-0);
  align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:1.1rem;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.28rem;
  letter-spacing:0.5px;
  white-space:nowrap;
  cursor:pointer;
}
.logo-mark{
  height:46px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
  filter:drop-shadow(0 0 10px rgba(255,201,77,0.35)) drop-shadow(0 0 16px rgba(245,185,66,0.25));
}
.logo span{
  background:linear-gradient(90deg, var(--gold), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-family:Georgia, 'Times New Roman', serif;
  letter-spacing:0.3px;
}

.topnav{
  display:flex;
  gap:4px;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.topnav::-webkit-scrollbar{display:none;}
.topnav a{
  padding:9px 14px;
  font-size:0.87rem;
  font-weight:600;
  color:var(--text-1);
  border-radius:8px;
  transition:all .15s ease;
  white-space:nowrap;
}
.topnav a:hover{color:var(--text-0); background:var(--bg-2);}
.topnav a.active{
  color:var(--green);
  background:rgba(245,185,66,0.08);
}

.search-box{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
  width:220px;
  color:var(--text-2);
  font-size:0.85rem;
  transition:border-color .15s ease;
  flex-shrink:0;
}
.search-box:hover, .search-box:focus-within{border-color:#33354a;}
.search-box input{
  background:none; border:none; outline:none; color:var(--text-0);
  font-size:0.85rem; width:100%;
}
.search-box input::placeholder{color:var(--text-2);}

.top-actions{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto;}

.balance-pill{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, rgba(36,24,54,0.9), rgba(18,12,29,0.9));
  border:1px solid var(--border-gold);
  padding:7px 8px 7px 14px;
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(247,231,174,0.12), 0 2px 10px rgba(0,0,0,0.4);
}
.balance-pill .coin-ic{font-size:0.92rem; font-weight:800; color:var(--green); text-shadow:0 0 12px var(--green-glow);}
.balance-pill .amt{font-weight:800; font-size:0.92rem; color:var(--green); text-shadow:0 0 12px var(--green-glow); white-space:nowrap;}
.balance-pill .cur{color:var(--text-2); font-size:0.68rem; margin-left:2px; text-transform:uppercase; letter-spacing:0.4px;}
.btn-deposit{
  background:var(--gold-metal);
  color:#2b1e04;
  font-weight:800;
  font-size:0.82rem;
  padding:7px 16px;
  border:none;
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 3px 12px rgba(245,185,66,0.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
}
.btn-deposit:hover{transform:translateY(-1px); filter:brightness(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 20px rgba(245,185,66,0.42);}

.icon-btn{
  width:36px; height:36px;
  border-radius:10px;
  background:var(--bg-2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-1);
  position:relative;
  transition:all .15s ease;
  flex-shrink:0;
}
.icon-btn:hover{color:var(--text-0); border-color:#33354a;}
.icon-btn.active{color:var(--green); border-color:rgba(245,185,66,0.4);}
.icon-btn .dot{
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 8px var(--purple-glow);
}

.avatar{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--purple-2), var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.8rem;
  border:1px solid rgba(245,185,66,0.4);
  flex-shrink:0;
}

/* ===================== SIDEBAR ===================== */
.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(4,4,8,0.6);
  backdrop-filter:blur(2px);
  z-index:249;
}
.sidebar-backdrop.show{display:block;}

.sidebar{
  grid-area:sidebar;
  position:relative;
  /* Plana y sin animacion. Los dos degradados dorados que habia aqui se
     movian en bucle infinito (sidebarDrift) sobre una columna siempre
     visible: repintado continuo a cambio de un brillo que casi no se veia. */
  background:var(--bg-surface);
  border-right:1px solid var(--border);
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  gap:22px;
  overflow-y:auto;
}
@keyframes sidebarDrift{
  0%{background-position:0% 0%, 100% 100%, 0 0;}
  50%{background-position:100% 100%, 0% 0%, 0 0;}
  100%{background-position:0% 0%, 100% 100%, 0 0;}
}

.side-group-label{
  font-size:0.68rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--text-2);
  padding:0 10px;
  margin-bottom:8px;
  font-weight:700;
}

.side-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:10px;
  color:var(--text-1);
  font-size:0.87rem;
  font-weight:600;
  position:relative;
  transition:all .15s ease;
  width:100%;
  background:none;
  border:none;
  text-align:left;
}
.side-item .ic{
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  opacity:0.85;
}
.side-item:hover{
  background:rgba(245,185,66,0.12);
  color:var(--text-0);
}
.side-item.active{
  color:var(--gold-light);
  background:linear-gradient(90deg, rgba(245,185,66,0.16), rgba(245,185,66,0.10) 60%, transparent);
  box-shadow:inset 3px 0 0 var(--gold);
}
.side-item .badge{
  margin-left:auto;
  font-size:0.62rem;
  font-weight:800;
  padding:2px 6px;
  border-radius:5px;
  background:rgba(245,185,66,0.18);
  color:var(--purple);
  letter-spacing:0.4px;
}
.side-item .badge.hot{
  background:rgba(192,51,77,0.16);
  color:var(--red);
}

.sidebar-promo{
  margin-top:auto;
  border-radius:var(--radius);
  padding:16px;
  background:linear-gradient(160deg, rgba(245,185,66,0.18), rgba(245,185,66,0.08));
  border:1px solid rgba(245,185,66,0.25);
}
.sidebar-promo h4{font-size:0.85rem; margin-bottom:6px;}
.sidebar-promo p{font-size:0.72rem; color:var(--text-1); line-height:1.5; margin-bottom:12px;}
.sidebar-promo button{
  width:100%;
  background:var(--green);
  color:#2b1e04;
  font-weight:800;
  font-size:0.76rem;
  padding:9px;
  border:none;
  border-radius:8px;
}

/* ===================== MAIN ===================== */
.main{
  padding:24px 24px 40px;
  overflow-y:auto;
  min-height:0;
  min-width:0;
}

.hero{
  position:relative;
  border-radius:var(--radius);
  padding:30px 34px;
  margin-bottom:26px;
  overflow:hidden;
  background:
    radial-gradient(620px 320px at 88% -10%, rgba(245,185,66,0.20), transparent 66%),
    radial-gradient(640px 340px at 8% 110%, rgba(245,185,66,0.18), transparent 66%),
    linear-gradient(135deg, #241636 0%, #170e26 55%, #0f0819 100%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(247,231,174,0.10), 0 18px 44px -28px rgba(0,0,0,0.95);
}
/* Gold leaf edge along the top of the hero */
.hero::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(247,231,174,0.75), transparent);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 30% 30%, black, transparent 70%);
}
.hero-content{position:relative; z-index:1; max-width:560px;}
.hero-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.68rem; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--gold-light);
  background:linear-gradient(135deg, rgba(245,185,66,0.16), rgba(245,185,66,0.12));
  border:1px solid var(--border-gold);
  padding:6px 13px; border-radius:999px;
  margin-bottom:16px;
  box-shadow:inset 0 1px 0 rgba(247,231,174,0.15);
}
.hero h1{
  font-family:var(--font-display);
  font-size:2.4rem;
  line-height:1.12;
  margin-bottom:12px;
  font-weight:700;
  letter-spacing:-0.5px;
  color:var(--text-0);
}
.hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg, #f7e7ae 0%, var(--gold) 42%, #E3C775 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{color:var(--text-1); font-size:0.92rem; margin-bottom:20px; max-width:440px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.btn-primary{
  background:var(--gold-metal);
  color:#2b1e04; font-weight:800; font-size:0.85rem;
  padding:12px 22px; border:none; border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 22px -8px rgba(245,185,66,0.5);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 28px -8px rgba(245,185,66,0.6);}
.btn-ghost{
  background:rgba(245,185,66,0.10);
  border:1px solid rgba(245,185,66,0.42);
  color:var(--text-0);
  font-weight:700; font-size:0.85rem;
  padding:12px 22px; border-radius:10px;
  transition:all .15s ease;
}
.btn-ghost:hover{background:rgba(245,185,66,0.20); border-color:var(--purple);}

.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
  gap:10px;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:1.22rem; font-weight:700; letter-spacing:0.3px;
  display:flex; align-items:center; gap:10px;
}
.section-head h2::before{
  content:"";
  width:3px; height:18px; border-radius:2px;
  background:linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  box-shadow:0 0 10px rgba(245,185,66,0.5);
  flex-shrink:0;
}
.section-head .see-all{font-size:0.78rem; color:var(--text-2); font-weight:700;}
.section-head .see-all:hover{color:var(--green);}

.category-row{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:28px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.category-row::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0;
  padding:9px 16px;
  border-radius:999px;
  background:var(--bg-2);
  border:1px solid var(--border);
  font-size:0.8rem; font-weight:700;
  color:var(--text-1);
  display:flex; align-items:center; gap:7px;
  transition:all .15s ease;
  white-space:nowrap;
}
.chip:hover{color:var(--text-0); border-color:#33354a;}
.chip.active{
  background:linear-gradient(135deg, rgba(245,185,66,0.18), rgba(245,185,66,0.14));
  border-color:var(--border-gold);
  color:var(--gold-light);
  box-shadow:0 0 14px rgba(245,185,66,0.16);
}

/* Featured big cards (Dice / Crash) */
.featured-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:30px;
}
.feature-card{
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-1));
  box-shadow:inset 0 1px 0 rgba(247,231,174,0.06), 0 12px 30px -20px rgba(0,0,0,0.9);
  padding:22px;
  overflow:hidden;
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .18s ease, border-color .18s ease;
}
.feature-card:hover{transform:translateY(-3px); border-color:#33354a;}
.feature-card.dice{box-shadow: inset 0 0 60px rgba(245,185,66,0.05);}
.feature-card.crash{box-shadow: inset 0 0 60px rgba(245,185,66,0.06);}

.feature-glow{
  position:absolute; width:220px; height:220px; border-radius:50%;
  filter:blur(70px); opacity:0.35; z-index:0;
}
.feature-card.dice .feature-glow{background:var(--green); top:-60px; right:-40px;}
.feature-card.crash .feature-glow{background:var(--purple); bottom:-60px; right:-30px;}

.feature-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1;}
.feature-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
}
.feature-card.dice .feature-icon{background:rgba(245,185,66,0.12); border:1px solid rgba(245,185,66,0.3);}
.feature-card.crash .feature-icon{background:rgba(245,185,66,0.14); border:1px solid rgba(245,185,66,0.22);}

.live-tag{
  display:flex; align-items:center; gap:6px;
  font-size:0.68rem; font-weight:800; letter-spacing:0.6px;
  color:var(--red);
  background:rgba(192,51,77,0.12);
  border:1px solid rgba(192,51,77,0.3);
  padding:4px 9px; border-radius:999px;
}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}

.feature-mid{position:relative; z-index:1; margin:14px 0;}
.feature-mid h3{font-size:1.3rem; font-weight:800; margin-bottom:4px;}
.feature-mid p{font-size:0.8rem; color:var(--text-1);}

.feature-stats{
  display:flex; gap:20px; position:relative; z-index:1; margin-bottom:14px;
}
.feature-stats .stat .v{font-weight:800; font-size:1.05rem;}
.feature-stats .stat.win .v{color:var(--emerald);}
.feature-stats .stat .l{font-size:0.68rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.5px;}

.crash-chart{
  height:56px; position:relative; z-index:1; margin-bottom:10px;
}

.feature-footer{
  display:flex; gap:10px; position:relative; z-index:1;
}
.btn-play{
  flex:1;
  padding:11px;
  border-radius:10px;
  border:none;
  font-weight:800;
  font-size:0.83rem;
  text-align:center;
}
.feature-card.dice .btn-play{
  background:linear-gradient(135deg, var(--green), #a8801f);
  color:#2b1e04;
  box-shadow:0 6px 18px -6px var(--green-glow);
}
.feature-card.crash .btn-play{
  background:linear-gradient(135deg, var(--purple), var(--purple-2));
  color:#fff;
  box-shadow:0 6px 18px -6px var(--purple-glow);
}

/* Game grid */
.games-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:34px;
}
.game-card{
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3), border-color .22s ease, box-shadow .22s ease, filter .22s ease;
  cursor:pointer;
  position:relative;
}
.game-card:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:var(--gold);
  filter:brightness(1.06) saturate(1.1);
  z-index:2;
  box-shadow:
    0 0 0 1px rgba(247,231,174,0.55),
    0 0 18px rgba(245,185,66,0.40),
    0 0 44px rgba(245,185,66,0.22),
    0 0 90px rgba(245,185,66,0.16),
    0 20px 34px -16px rgba(0,0,0,0.75);
}
.game-card:hover .game-thumb{filter:saturate(1.3) brightness(1.1);}
.game-card:hover .multiplier-tag{
  color:var(--green);
  text-shadow:0 0 8px rgba(245,185,66,0.8);
}
.game-thumb{
  height:110px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.1rem;
  position:relative;
  transition:filter .22s ease;
}
.game-thumb .multiplier-tag{
  position:absolute; top:8px; right:8px;
  font-size:0.65rem; font-weight:800;
  background:rgba(0,0,0,0.5);
  padding:3px 7px; border-radius:6px;
  color:var(--gold);
  backdrop-filter:blur(4px);
}
.game-info{padding:11px 12px 13px;}
.game-info h4{font-size:0.86rem; font-weight:700; margin-bottom:3px;}
.game-info p{font-size:0.7rem; color:var(--text-2);}

.g1{background:linear-gradient(160deg, rgba(245,185,66,0.18), rgba(20,21,31,0.4));}
.g2{background:linear-gradient(160deg, rgba(245,185,66,0.2), rgba(20,21,31,0.4));}
.g3{background:linear-gradient(160deg, rgba(255,201,77,0.16), rgba(20,21,31,0.4));}
.g4{background:linear-gradient(160deg, rgba(192,51,77,0.15), rgba(20,21,31,0.4));}
.g5{background:linear-gradient(160deg, rgba(77,166,255,0.16), rgba(20,21,31,0.4));}
.g6{background:linear-gradient(160deg, rgba(245,185,66,0.12), rgba(245,185,66,0.14));}
.g7{background:linear-gradient(160deg, rgba(192,51,77,0.14), rgba(245,185,66,0.1));}
.g8{background:linear-gradient(160deg, rgba(255,201,77,0.14), rgba(245,185,66,0.1));}

/* Bet table */
.bets-panel{
  border-radius:var(--radius);
  background:var(--bg-card);
  border:1px solid var(--border);
  overflow:hidden;
  margin-bottom:20px;
}
.bets-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--border-soft);
}
.bets-tabs{display:flex; gap:6px;}
.bets-tabs button{
  background:none; border:none; color:var(--text-2);
  font-size:0.78rem; font-weight:700; padding:6px 10px; border-radius:7px;
}
.bets-tabs button.active{color:var(--text-0); background:var(--bg-2);}

.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
table{width:100%; border-collapse:collapse;}
thead th{
  text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.6px;
  color:var(--text-2); font-weight:700;
  padding:10px 18px;
  border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
tbody td{
  padding:11px 18px;
  font-size:0.82rem;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-1);
  white-space:nowrap;
}
tbody tr:hover{background:var(--bg-2);}
tbody tr:last-child td{border-bottom:none;}
.player-cell{display:flex; align-items:center; gap:9px; color:var(--text-0); font-weight:600;}
.mini-avatar{
  width:26px; height:26px; border-radius:7px;
  background:linear-gradient(135deg, var(--purple), var(--green));
  flex-shrink:0;
}
.game-tag{
  font-size:0.7rem; font-weight:700; padding:3px 8px; border-radius:6px;
  background:var(--bg-2); color:var(--text-1);
}
.payout.win{color:var(--emerald); font-weight:800;}
.payout.lose{color:var(--text-2); font-weight:700;}
.mult-cell{font-weight:800;}
.mult-cell.up{color:var(--emerald);}
.mult-cell.down{color:var(--red);}

/* ===================== TICKER / LEADERBOARD SIDE ===================== */
.ticker-panel{
  background:var(--bg-1);
  border-left:1px solid var(--border-soft);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow-y:auto;
  min-height:0;
}

.panel-block{
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:inset 0 1px 0 rgba(247,231,174,0.05);
}
.panel-block h3{
  font-size:0.82rem; font-weight:800; margin-bottom:2px;
  display:flex; align-items:center; gap:8px;
}
.panel-block .sub{font-size:0.68rem; color:var(--text-2); margin-bottom:14px;}

.leader-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border-soft);
}
.leader-row:last-child{border-bottom:none; padding-bottom:0;}
.rank{
  width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; font-weight:800;
  background:var(--bg-2); color:var(--text-1);
  flex-shrink:0;
}
.rank.r1{background:linear-gradient(135deg,#ffd25c,#ff9a2e); color:#3a1e00;}
.rank.r2{background:linear-gradient(135deg,#dfe4ee,#a7aec2); color:#20232e;}
.rank.r3{background:linear-gradient(135deg,#e0a06a,#b06432); color:#2a1200;}
.leader-name{font-size:0.8rem; font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.leader-amt{font-size:0.78rem; font-weight:800; color:var(--gold); text-shadow:0 0 10px var(--gold-glow);}

.ticker-live{
  height:34px;
  overflow:hidden;
  position:relative;
  border-radius:8px;
  background:var(--bg-2);
  border:1px solid var(--border-soft);
}
.ticker-track{
  position:absolute; white-space:nowrap;
  display:flex; align-items:center; gap:22px;
  height:100%;
  animation:scrollTicker 22s linear infinite;
  padding-left:16px;
}
@keyframes scrollTicker{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.tick-item{font-size:0.74rem; font-weight:700; color:var(--text-1); display:flex; align-items:center; gap:6px;}
.tick-item b{color:var(--text-0);}
.tick-item .up{color:var(--emerald);}
.tick-item .down{color:var(--red);}

.feed-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border-soft);
  font-size:0.76rem;
}
.feed-item:last-child{border-bottom:none;}
.feed-icon{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem;
  flex-shrink:0;
}
.feed-text{flex:1; color:var(--text-1); line-height:1.4;}
.feed-text b{color:var(--text-0);}
.feed-amt{font-weight:800; font-size:0.78rem;}

.chat-mini{display:flex; flex-direction:column; gap:10px; max-height:220px; overflow-y:auto;}
.chat-msg{font-size:0.76rem; line-height:1.5;}
.chat-msg .who{font-weight:800; margin-right:5px;}
.chat-msg .who.g{color:var(--green);}
.chat-msg .who.p{color:var(--purple);}
.chat-msg .txt{color:var(--text-1);}

/* ===================== SHARED MODAL CHROME (Dice / Crash / Mines / Slots / History) ===================== */
/* =========================================================
   UN MODAL CERRADO ESTA OCULTO, NO TRANSPARENTE.

   Antes ponia opacity:0 y ahi estaba el problema de rendimiento
   del casino entero. Para el navegador un elemento transparente
   SIGUE EXISTIENDO: descarga sus imagenes de fondo, lo mete en el
   arbol de render y lo recalcula en cada cambio de estilo. Con
   trece juegos en el documento eso son:

     · 826 KB de arte de juegos que nadie abrio, descargados en
       la portada -- medido: hen-splat 256 KB, hen-run 123 KB,
       stadium 98 KB, explosion 93 KB, keeper 65 KB...
     · 2.203 nodos de DOM de mas participando en cada recalculo,
       sobre 4.067 totales.

   Con display:none el navegador NI descarga NI recalcula lo que
   hay dentro. El coste de un juego se paga al abrirlo, que es
   cuando el jugador ha decidido pagarlo.

   El fundido se conserva, pero como ANIMACION en .open y no como
   transicion: no se puede transicionar desde display:none, y una
   animacion sobre el estado abierto si arranca. Se pierde el
   fundido de SALIDA, que dura 200ms y nadie echa de menos.
   ========================================================= */
.dice-overlay{
  position:fixed; inset:0;
  background:rgba(4,4,8,0.78);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:400;
  pointer-events:none;
  padding:20px;
}
.dice-overlay.open{
  display:flex;
  pointer-events:auto;
  animation:dvEntrar .2s ease both;
}
@keyframes dvEntrar{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .dice-overlay.open{ animation:none; }
}

.dice-modal{
  width:100%;
  max-width:560px;
  max-height:92vh;
  overflow-y:auto;
  background:linear-gradient(180deg, var(--bg-card), var(--bg-1));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02);
  transform:translateY(18px) scale(0.97);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.1);
}
.dice-overlay.open .dice-modal{transform:translateY(0) scale(1);}
.dice-modal.wide{max-width:640px;}

.dice-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--border-soft);
  position:sticky; top:0;
  background:var(--bg-card);
  z-index:2;
}
.dice-modal-title{display:flex; align-items:center; gap:12px;}
.dice-modal-icon{
  width:42px; height:42px; border-radius:12px;
  background:rgba(245,185,66,0.12);
  border:1px solid rgba(245,185,66,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.dice-modal-title h2{font-family:var(--font-display); font-size:1.2rem; font-weight:700; letter-spacing:0.3px;}
.dice-modal-title span{font-size:0.72rem; color:var(--text-2);}
.dice-close{
  width:34px; height:34px; border-radius:9px;
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text-1); font-size:0.9rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
  flex-shrink:0;
}
.dice-close:hover{color:var(--text-0); border-color:var(--red); box-shadow:0 0 14px rgba(192,51,77,0.3);}

.dice-modal-body{padding:22px 20px 24px; display:flex; flex-direction:column; gap:22px;}

/* Stage / track */
.dice-stage{position:relative;}
.dice-result-flash{
  position:absolute; inset:-10px -10px auto -10px; height:0;
  pointer-events:none;
}
.dice-history{
  display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;
}
.dice-history .hist-chip{
  font-size:0.68rem; font-weight:800;
  padding:4px 8px; border-radius:6px;
  background:var(--bg-2); border:1px solid var(--border-soft);
  color:var(--text-2);
}
.dice-history .hist-chip.win{color:var(--emerald); border-color:rgba(53,181,125,0.35); background:rgba(53,181,125,0.10);}
.dice-history .hist-chip.lose{color:var(--red); border-color:rgba(192,51,77,0.25); background:rgba(192,51,77,0.07);}

.dice-track-wrap{padding-top:38px;}
.dice-track{
  position:relative;
  height:14px;
  border-radius:999px;
  background:var(--bg-2);
  overflow:visible;
}
.dice-zone{
  position:absolute; top:0; bottom:0;
  transition:left .25s ease, width .25s ease;
}
.dice-zone.lose{background:linear-gradient(90deg, rgba(192,51,77,0.35), rgba(192,51,77,0.2)); border-radius:999px;}
.dice-zone.win{background:linear-gradient(90deg, rgba(53,181,125,0.60), rgba(53,181,125,0.34)); border-radius:999px; box-shadow:0 0 18px rgba(53,181,125,0.35);}

.dice-target-line{
  position:absolute; top:-4px; bottom:-4px;
  width:3px; border-radius:3px;
  background:var(--gold);
  box-shadow:0 0 10px rgba(255,201,77,0.7);
  transition:left .25s ease;
  z-index:3;
}

.dice-roll-marker{
  position:absolute; top:-40px;
  transform:translateX(-50%);
  transition:left .9s cubic-bezier(.15,.85,.25,1);
  z-index:4;
  display:flex; flex-direction:column; align-items:center;
}
.marker-value{
  font-size:0.72rem; font-weight:800;
  background:var(--bg-3);
  border:1px solid var(--border);
  padding:3px 8px; border-radius:7px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.dice-roll-marker.win .marker-value{
  color:var(--emerald-light); border-color:rgba(53,181,125,0.55);
  box-shadow:0 0 16px rgba(53,181,125,0.55), 0 4px 12px rgba(0,0,0,0.4);
}
.dice-roll-marker.lose .marker-value{
  color:var(--red); border-color:rgba(192,51,77,0.5);
  box-shadow:0 0 16px rgba(192,51,77,0.5), 0 4px 12px rgba(0,0,0,0.4);
}
.marker-pin{
  width:2px; height:14px;
  background:var(--text-0);
  margin-top:2px;
}
.dice-roll-marker.win .marker-pin{background:var(--emerald); box-shadow:0 0 8px rgba(53,181,125,0.85);}
.dice-roll-marker.lose .marker-pin{background:var(--wine); box-shadow:0 0 8px rgba(192,51,77,0.85);}
.dice-roll-marker.rolling{animation:markerBounce .3s ease-in-out infinite;}
@keyframes markerBounce{0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-4px);}}

.dice-range{
  position:relative;
  width:100%;
  margin-top:8px;
  -webkit-appearance:none;
  appearance:none;
  height:28px;
  background:transparent;
  cursor:pointer;
  z-index:5;
}
.dice-range::-webkit-slider-runnable-track{height:28px; background:transparent;}
.dice-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:24px; height:24px;
  border-radius:50%;
  margin-top:-11px;
  background:var(--text-0);
  border:3px solid var(--purple);
  box-shadow:0 0 12px rgba(245,185,66,0.6);
  cursor:grab;
}
.dice-range::-moz-range-track{height:4px; background:transparent;}
.dice-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--text-0);
  border:3px solid var(--purple);
  box-shadow:0 0 12px rgba(245,185,66,0.6);
  cursor:grab;
}

.dice-track-labels{
  display:flex; justify-content:space-between;
  font-size:0.65rem; color:var(--text-2); margin-top:2px;
}

/* Controls */
.dice-controls{display:flex; flex-direction:column; gap:16px;}
.dice-field-label{
  display:flex; justify-content:space-between;
  font-size:0.7rem; font-weight:700; color:var(--text-2);
  text-transform:uppercase; letter-spacing:0.4px;
  margin-bottom:7px;
}
.dice-bet-input{
  display:flex; align-items:center;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
}
.dice-bet-input input{
  flex:1; background:none; border:none; outline:none;
  color:var(--text-0); font-weight:800; font-size:0.95rem;
  padding:14px;
  min-width:0;
}
.dice-bet-quick{display:flex; border-left:1px solid var(--border);}
.dice-bet-quick button{
  background:none; border:none; border-left:1px solid var(--border);
  color:var(--text-1); font-size:0.72rem; font-weight:800;
  padding:0 12px;
  transition:all .15s ease;
  min-height:44px;
}
.dice-bet-quick button:first-child{border-left:none;}
.dice-bet-quick button:hover{color:var(--green); background:rgba(245,185,66,0.08);}

.dice-row-2{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.dice-number{
  width:100%;
  background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
  color:var(--text-0); font-weight:800; font-size:0.95rem;
  padding:12px 14px; outline:none;
  min-height:44px;
}
.dice-readout{
  background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px;
  font-weight:800; font-size:0.95rem;
  color:var(--text-0);
}
.dice-readout.mult{color:var(--purple);}

.dice-direction{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.dir-btn{
  padding:12px; border-radius:10px;
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text-1); font-weight:800; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:all .15s ease;
  min-height:46px;
}
.dir-btn .dir-ic{font-size:0.75rem;}
.dir-btn:hover{color:var(--text-0); border-color:#33354a;}
.dir-btn.active{
  color:#2b1e04;
  background:linear-gradient(135deg, var(--green), #a8801f);
  border-color:transparent;
  box-shadow:0 0 20px rgba(245,185,66,0.35);
}

.dice-payout-strip{
  display:flex; justify-content:space-between;
  background:var(--bg-2); border:1px solid var(--border-soft);
  border-radius:10px; padding:12px 16px;
  gap:10px; flex-wrap:wrap;
}
.dice-payout-strip div{display:flex; flex-direction:column; gap:4px;}
.dice-payout-strip span{font-size:0.66rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.4px;}
.dice-payout-strip b{font-size:0.95rem; font-weight:800;}
.dice-payout-strip b.up{color:var(--emerald);}
.dice-payout-strip b.down{color:var(--red);}

.dice-roll-btn{
  width:100%;
  padding:17px;
  border:none; border-radius:12px;
  background:var(--gold-metal);
  color:#2b1e04;
  font-weight:900; font-size:1rem; letter-spacing:0.4px;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 26px -10px rgba(245,185,66,0.55);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  min-height:52px;
}
.dice-roll-btn:hover{transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(245,185,66,0.65);}
.dice-roll-btn:active{transform:translateY(0);}
.dice-roll-btn:disabled{opacity:0.6; cursor:not-allowed; transform:none;}
.dice-roll-btn.flash-win{animation:btnFlashWin .5s ease;}
.dice-roll-btn.flash-lose{animation:btnFlashLose .5s ease;}
@keyframes btnFlashWin{
  0%{box-shadow:0 0 0 0 rgba(245,185,66,0.7);}
  50%{box-shadow:0 0 0 14px rgba(245,185,66,0);}
  100%{box-shadow:0 10px 26px -8px rgba(245,185,66,0.5);}
}
@keyframes btnFlashLose{
  0%,100%{background:linear-gradient(135deg, var(--green), #a8801f);}
  30%{background:linear-gradient(135deg, var(--red), #c72e48);}
}

.dice-btn-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.dice-btn-row .dice-roll-btn{padding:14px;}
.btn-secondary-action{
  width:100%; padding:14px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text-0); font-weight:800; font-size:0.9rem;
  min-height:52px;
  transition:all .15s ease;
}
.btn-secondary-action:hover{border-color:#33354a;}
.btn-secondary-action:disabled{opacity:0.5; cursor:not-allowed;}

@media (max-width:600px){
  .dice-row-2{grid-template-columns:1fr;}
}

/* ===================== CRASH GAME MODAL ===================== */
.crash-icon{background:rgba(245,185,66,0.14); border-color:rgba(245,185,66,0.22);}

.crash-history{
  display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;
}
.crash-history .hist-chip{
  font-size:0.68rem; font-weight:800;
  padding:4px 8px; border-radius:6px;
  background:var(--bg-2); border:1px solid var(--border-soft);
  color:var(--text-2);
}
.crash-history .hist-chip.win{color:var(--emerald); border-color:rgba(53,181,125,0.35); background:rgba(53,181,125,0.10);}
.crash-history .hist-chip.lose{color:var(--red); border-color:rgba(192,51,77,0.25); background:rgba(192,51,77,0.07);}

.crash-stage{
  position:relative;
  height:240px;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:20px;
  background:
    radial-gradient(500px 260px at 50% 100%, rgba(245,185,66,0.14), transparent 70%),
    var(--bg-2);
  border:1px solid var(--border-soft);
}
.crash-stage::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
}

.crash-chart-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* The glyph-era marker styles lived here: a 1.4rem font-size, a baked
   rotate(45deg) and a scale-up "explode" keyframe. All three fought the
   sprite's per-frame transform, so they were removed rather than overridden.
   The plane now lives in platform.css under .crash-rocket / .crash-plane. */

.crash-center{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  pointer-events:none;
}
.crash-multiplier{
  font-size:3.2rem;
  font-weight:900;
  letter-spacing:0.5px;
  color:var(--text-0);
  text-shadow:0 0 24px rgba(245,185,66,0.22);
  transition:color .15s ease, text-shadow .15s ease;
}
.crash-multiplier.state-idle{color:var(--text-1); text-shadow:none;}
.crash-multiplier.tier-1{color:#e7e8f5; text-shadow:0 0 22px rgba(245,185,66,0.45);}
.crash-multiplier.tier-2{color:var(--emerald-light); text-shadow:0 0 26px rgba(53,181,125,0.55);}
.crash-multiplier.tier-3{color:var(--gold); text-shadow:0 0 30px rgba(255,201,77,0.55);}
.crash-multiplier.tier-4{color:#ff7a4d; text-shadow:0 0 36px rgba(255,122,77,0.7); animation:multPulse .4s ease-in-out infinite;}
.crash-multiplier.crashed{color:var(--red); text-shadow:0 0 30px rgba(192,51,77,0.8);}
@keyframes multPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}

.crash-status{
  font-size:0.8rem; font-weight:700; color:var(--text-2);
  letter-spacing:0.3px;
  text-align:center;
  padding:0 12px;
}
.crash-status.win{color:var(--emerald-light);}
.crash-status.lose{color:var(--red);}

.crash-cashout-tag{
  position:absolute;
  top:16px; right:16px;
  z-index:3;
  font-size:0.72rem; font-weight:800;
  padding:6px 12px; border-radius:8px;
  background:rgba(53,181,125,0.14);
  border:1px solid rgba(53,181,125,0.42);
  color:var(--emerald-light);
  box-shadow:0 0 16px rgba(53,181,125,0.32);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.crash-cashout-tag.show{opacity:1; transform:translateY(0);}

.crash-payout-strip{
  display:flex; justify-content:space-between;
  background:var(--bg-2); border:1px solid var(--border-soft);
  border-radius:10px; padding:12px 16px;
  flex-wrap:wrap; gap:10px;
}
.crash-payout-strip div{display:flex; flex-direction:column; gap:4px;}
.crash-payout-strip span{font-size:0.66rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.4px;}
.crash-payout-strip b{font-size:0.95rem; font-weight:800; color:var(--purple);}

.crash-action-btn.mode-cashout{
  background:linear-gradient(135deg, var(--green), #a8801f);
  animation:cashoutPulse 1.1s ease-in-out infinite;
}
@keyframes cashoutPulse{
  0%,100%{box-shadow:0 10px 26px -8px rgba(245,185,66,0.5);}
  50%{box-shadow:0 10px 40px -6px rgba(245,185,66,0.85), 0 0 0 6px rgba(245,185,66,0.12);}
}
.crash-action-btn.mode-crashed{
  background:linear-gradient(135deg, var(--red), #c72e48);
  box-shadow:0 10px 26px -8px rgba(192,51,77,0.5);
  animation:none;
}

.crash-autocash-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-2); border:1px solid var(--border-soft);
  border-radius:10px; padding:10px 14px;
}
.crash-autocash-row label{
  display:flex; align-items:center; gap:8px;
  font-size:0.76rem; font-weight:700; color:var(--text-1);
  flex-shrink:0;
}
.crash-autocash-row input[type="checkbox"]{width:16px; height:16px; accent-color:var(--green);}
.crash-autocash-row input[type="number"]{
  flex:1; min-width:0;
  background:var(--bg-3); border:1px solid var(--border); border-radius:8px;
  color:var(--text-0); font-weight:800; padding:8px 10px; outline:none;
}

/* ===================== LIVE LEADERBOARD ===================== */
.lb-panel{
  border-radius:var(--radius);
  background:var(--bg-card);
  border:1px solid var(--border);
  overflow:hidden;
  margin-bottom:30px;
}

.lb-row{
  display:grid;
  grid-template-columns:1.6fr 1.1fr 0.9fr 0.8fr 1.3fr;
  align-items:center;
  gap:12px;
  padding:12px 18px;
}

.lb-head-row{
  font-size:0.66rem; font-weight:800; letter-spacing:0.6px; text-transform:uppercase;
  color:var(--text-2);
  border-bottom:1px solid var(--border-soft);
  padding-top:14px; padding-bottom:14px;
}

.lb-body{max-height:520px; overflow:hidden;}

.lb-body .lb-row{
  border-bottom:1px solid var(--border-soft);
  animation:lbSlideIn .45s cubic-bezier(.2,.8,.3,1) both;
}
.lb-body .lb-row:last-child{border-bottom:none;}
@keyframes lbSlideIn{
  0%{opacity:0; transform:translateY(-18px); background:rgba(245,185,66,0.10);}
  60%{opacity:1; transform:translateY(0);}
  100%{opacity:1; transform:translateY(0); background:transparent;}
}

.lb-row.huge{animation:lbSlideIn .45s cubic-bezier(.2,.8,.3,1) both, lbHugeGlow 1.8s ease-out .45s;}
@keyframes lbHugeGlow{
  0%{background:rgba(255,201,77,0.18); box-shadow:inset 0 0 40px rgba(255,201,77,0.15);}
  100%{background:transparent; box-shadow:none;}
}

.lb-player{display:flex; align-items:center; gap:10px; min-width:0;}
.lb-avatar{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg, var(--purple), var(--green));
  display:flex; align-items:center; justify-content:center;
  font-size:0.62rem; font-weight:800; color:#2b1e04;
}
.lb-name{
  font-size:0.83rem; font-weight:700; color:var(--text-0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb-huge-badge{
  font-size:0.6rem; font-weight:800; letter-spacing:0.3px;
  color:var(--gold); background:rgba(255,201,77,0.14);
  border:1px solid rgba(255,201,77,0.4);
  padding:2px 6px; border-radius:5px;
  flex-shrink:0;
  text-shadow:0 0 8px rgba(255,201,77,0.6);
}

.lb-game{display:flex; align-items:center; gap:7px; font-size:0.8rem; color:var(--text-1); font-weight:600;}

.lb-bet{font-size:0.82rem; font-weight:700; color:var(--text-1);}

.lb-result{
  font-size:0.68rem; font-weight:800; letter-spacing:0.4px;
  padding:4px 9px; border-radius:6px;
  display:inline-block; width:fit-content;
}
.lb-result.win{color:var(--emerald); background:rgba(53,181,125,0.12); border:1px solid rgba(53,181,125,0.32);}
.lb-result.lose{color:var(--red); background:rgba(192,51,77,0.1); border:1px solid rgba(192,51,77,0.25);}

.lb-profit{font-size:0.9rem; font-weight:800;}
.lb-profit.up{color:var(--emerald); text-shadow:0 0 14px rgba(53,181,125,0.35);}
.lb-profit.down{color:var(--text-2);}
.lb-profit.mega{
  color:var(--gold);
  text-shadow:0 0 18px rgba(255,201,77,0.6);
  font-size:0.97rem;
}

@media (max-width:700px){
  .lb-row{grid-template-columns:1.4fr 1fr 0.9fr;}
  .lb-row > div:nth-child(4), .lb-row > div:nth-child(5){display:none;}
}

/* ===================== GAMES HUB VIEW ===================== */
.games-view-main{
  grid-area:content;
  padding:24px 24px 90px;
  overflow-y:auto;
  min-width:0;
}
.games-hero{
  position:relative;
  border-radius:var(--radius);
  padding:38px 34px;
  margin-bottom:24px;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(700px 320px at 50% -10%, rgba(245,185,66,0.22), transparent 65%),
    radial-gradient(500px 260px at 100% 100%, rgba(245,185,66,0.14), transparent 60%),
    linear-gradient(135deg, #171827, #101119);
  border:1px solid var(--border);
}
.games-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 50% 20%, black, transparent 75%);
}
.games-hero h1{
  position:relative; z-index:1;
  font-family:var(--font-display);
  font-size:2.6rem; font-weight:700; letter-spacing:1px;
  margin-bottom:10px;
  background:linear-gradient(100deg, #f7e7ae 0%, var(--gold) 45%, #E3C775 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.games-hero p{position:relative; z-index:1; color:var(--text-1); font-size:0.95rem;}

.games-search-row{
  display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap;
}
.games-search-box{
  flex:1; min-width:220px;
  display:flex; align-items:center; gap:10px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; padding:13px 16px;
}
.games-search-box svg{flex-shrink:0; color:var(--text-2);}
.games-search-box input{
  flex:1; background:none; border:none; outline:none;
  color:var(--text-0); font-size:0.9rem; min-width:0;
}
.games-search-box input::placeholder{color:var(--text-2);}

.games-filter-row{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:24px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.games-filter-row::-webkit-scrollbar{display:none;}

.gh-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
  margin-bottom:36px;
}
.gh-card{
  position:relative;
  border-radius:16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3), border-color .22s ease, box-shadow .22s ease;
  display:flex; flex-direction:column;
}
.gh-card:hover{
  transform:translateY(-6px);
  border-color:rgba(245,185,66,0.55);
  box-shadow:
    0 0 0 1px rgba(245,185,66,0.5),
    0 0 20px rgba(245,185,66,0.22),
    0 0 50px rgba(245,185,66,0.18),
    0 18px 34px -16px rgba(0,0,0,0.7);
}
.gh-thumb{
  height:130px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem;
  position:relative;
}
.gh-badges{position:absolute; top:10px; left:10px; display:flex; gap:6px;}
.gh-badge{
  font-size:0.6rem; font-weight:800; letter-spacing:0.4px;
  padding:3px 8px; border-radius:6px;
  text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.gh-badge.new{color:#2b1e04; background:var(--green); box-shadow:0 0 12px rgba(245,185,66,0.6);}
.gh-badge.soon{color:var(--text-0); background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18);}
.gh-stat{
  position:absolute; bottom:10px; right:10px;
  font-size:0.62rem; font-weight:800;
  background:rgba(0,0,0,0.5);
  padding:3px 8px; border-radius:6px;
  color:var(--gold);
  backdrop-filter:blur(4px);
}
.gh-info{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1;}
.gh-info h4{font-size:0.95rem; font-weight:800;}
.gh-info .gh-cat{font-size:0.68rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.5px; font-weight:700;}
.gh-play-btn{
  margin-top:auto;
  width:100%; padding:11px;
  border-radius:9px; border:none;
  font-weight:800; font-size:0.82rem;
  background:linear-gradient(135deg, var(--green), #a8801f);
  color:#2b1e04;
  box-shadow:0 6px 18px -6px var(--green-glow);
  min-height:42px;
}
.gh-card.locked .gh-play-btn{
  background:var(--bg-2); color:var(--text-2);
  box-shadow:none; cursor:not-allowed;
}
.gh-card.locked{opacity:0.75;}
.gh-card.locked:hover{transform:none; box-shadow:none; border-color:var(--border);}

.gh-empty{
  text-align:center; padding:60px 20px; color:var(--text-2);
  font-size:0.9rem;
}

/* ===================== HISTORY MODAL ===================== */
.history-table-wrap{max-height:420px; overflow-y:auto; overflow-x:auto; border-radius:10px; border:1px solid var(--border-soft);}
.history-table-wrap table{min-width:520px;}
.history-empty{padding:40px 20px; text-align:center; color:var(--text-2); font-size:0.85rem;}

/* ===================== MINES GAME ===================== */
.mines-top-row{display:flex; gap:12px; flex-wrap:wrap;}
.mines-field{flex:1; min-width:140px;}
.mines-select{
  width:100%;
  background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
  color:var(--text-0); font-weight:800; font-size:0.9rem;
  padding:12px 14px; outline:none; min-height:46px;
}
.mines-board{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  aspect-ratio:1/1;
  margin-bottom:6px;
}
.mines-tile{
  position:relative;
  border-radius:10px;
  background:var(--bg-2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  cursor:pointer;
  transition:transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mines-tile:hover:not(.revealed){
  border-color:rgba(245,185,66,0.5);
  transform:translateY(-2px);
  box-shadow:0 6px 16px -6px rgba(245,185,66,0.5);
}
.mines-tile.revealed{cursor:default;}
.mines-tile.safe{
  background:linear-gradient(160deg, rgba(53,181,125,0.26), rgba(22,14,36,0.55));
  border-color:rgba(53,181,125,0.48);
  animation:tileReveal .3s ease;
}
.mines-tile.mine{
  background:linear-gradient(160deg, rgba(192,51,77,0.3), rgba(20,21,31,0.5));
  border-color:rgba(192,51,77,0.6);
  animation:tileExplode .4s ease;
}
.mines-tile.mine-dim{opacity:0.4;}
@keyframes tileReveal{0%{transform:scale(0.7) rotateY(90deg); opacity:0;} 100%{transform:scale(1) rotateY(0); opacity:1;}}
@keyframes tileExplode{0%{transform:scale(1);} 30%{transform:scale(1.25);} 100%{transform:scale(1);}}
.mines-tile-mult{
  position:absolute; bottom:3px; right:5px;
  font-size:0.52rem; font-weight:800; color:var(--emerald-light);
}

.mines-status-row{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg-2); border:1px solid var(--border-soft);
  border-radius:10px; padding:12px 16px;
  flex-wrap:wrap; gap:10px;
}
.mines-status-row div{display:flex; flex-direction:column; gap:4px;}
.mines-status-row span{font-size:0.66rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.4px;}
.mines-status-row b{font-size:1rem; font-weight:800; color:var(--gold);}

/* ===================== NOVA SLOTS ===================== */
.slots-frame{
  border-radius:16px;
  background:
    radial-gradient(500px 260px at 50% 0%, rgba(245,185,66,0.18), transparent 70%),
    var(--bg-2);
  border:1px solid var(--border-soft);
  padding:14px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.slots-reels{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
  background:var(--bg-0);
  border-radius:12px;
  padding:8px;
  position:relative;
}
.slots-reels::before, .slots-reels::after{
  content:"";
  position:absolute; left:0; right:0; height:34%;
  pointer-events:none; z-index:2;
}
.slots-reels::before{top:0; background:linear-gradient(180deg, var(--bg-0), transparent);}
.slots-reels::after{bottom:0; background:linear-gradient(0deg, var(--bg-0), transparent);}
.slots-payline{
  position:absolute; left:8px; right:8px; top:50%;
  height:2px; background:rgba(255,201,77,0.4);
  transform:translateY(-1px);
  z-index:1; pointer-events:none;
}
.slots-reel{
  background:var(--bg-1);
  border-radius:8px;
  overflow:hidden;
  display:flex; flex-direction:column;
  height:216px;
  position:relative;
}
.slots-reel-strip{
  display:flex; flex-direction:column;
  transition:transform .12s linear;
}
.slots-symbol{
  height:72px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.1rem;
  flex-shrink:0;
}
.slots-reel.win-line .slots-symbol.center-symbol{
  animation:symbolWinPulse .5s ease-in-out infinite;
}
.slots-reel.spinning .slots-symbol{
  filter:blur(2px);
  opacity:0.7;
}
.slots-symbol{transition:filter .15s ease, opacity .15s ease;}
.slot-text-sym{
  font-size:0.85rem; font-weight:900; letter-spacing:0.5px;
  padding:4px 8px; border-radius:6px;
  background:linear-gradient(135deg, var(--purple), var(--purple-2));
  color:#fff;
  box-shadow:0 0 12px rgba(245,185,66,0.5);
}
.slots-symbol .slot-text-sym{
  background:linear-gradient(135deg, var(--gold), #ff9a2e);
  color:#2a1200;
  box-shadow:0 0 12px rgba(255,201,77,0.6);
}
@keyframes symbolWinPulse{0%,100%{transform:scale(1); filter:drop-shadow(0 0 0 transparent);} 50%{transform:scale(1.15); filter:drop-shadow(0 0 14px rgba(255,201,77,0.8));}}

.slots-win-banner{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,4,8,0.55);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:3;
  border-radius:12px;
}
.slots-win-banner.show{opacity:1;}
.slots-win-text{
  font-size:1.6rem; font-weight:900;
  color:var(--gold);
  text-shadow:0 0 24px rgba(255,201,77,0.8);
  animation:winTextPop .5s cubic-bezier(.3,1.5,.5,1);
  text-align:center;
}
.slots-win-text.mega{font-size:2.1rem; color:var(--green); text-shadow:0 0 30px rgba(245,185,66,0.9);}
@keyframes winTextPop{0%{transform:scale(0.3); opacity:0;} 60%{transform:scale(1.15); opacity:1;} 100%{transform:scale(1);}}

.slots-info-row{
  display:flex; justify-content:space-between; margin-top:10px;
  font-size:0.72rem; color:var(--text-2); flex-wrap:wrap; gap:8px;
}
.slots-info-row b{color:var(--text-0);}

.slots-bet-row{display:flex; gap:10px; align-items:stretch;}
.slots-bet-row .dice-bet-input{flex:1;}
.slots-quick-btn{
  min-width:64px;
  background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
  color:var(--text-1); font-weight:800; font-size:0.75rem;
  min-height:48px;
  transition:all .15s ease;
}
.slots-quick-btn:hover{color:var(--text-0); border-color:#33354a;}
.slots-quick-btn.active{color:#2b1e04; background:linear-gradient(135deg, var(--purple), var(--purple-2)); color:#fff; border-color:transparent;}

.slots-spin-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.slots-spin-btn{
  background:linear-gradient(135deg, var(--green), #a8801f);
  color:#2b1e04;
}
.slots-auto-btn{
  background:linear-gradient(135deg, var(--purple), var(--purple-2));
  color:#fff;
}
.slots-auto-btn.active{
  animation:cashoutPulse 1.1s ease-in-out infinite;
}

.slots-paytable{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
  background:var(--bg-2); border:1px solid var(--border-soft); border-radius:10px;
  padding:12px;
}
.slots-pay-row{
  display:flex; align-items:center; gap:8px;
  font-size:0.74rem; color:var(--text-1);
}
.slots-pay-row .sym{font-size:1.1rem;}
.slots-pay-row b{color:var(--gold); margin-left:auto;}

.slots-history-row{display:flex; gap:6px; flex-wrap:wrap;}

/* ===================== MOBILE BOTTOM NAV ===================== */
.mobile-bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0;
  z-index:250;
  background:rgba(13,14,21,0.92);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--border-soft);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around;
}
.mobile-nav-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--text-2);
  font-size:0.62rem; font-weight:700;
  min-width:56px;
  background:none; border:none;
}
.mobile-nav-item .mni-ic{font-size:1.15rem;}
.mobile-nav-item.active{color:var(--green);}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1250px){
  .search-box{display:none;}
}

@media (max-width:1180px){
  .app{grid-template-columns:220px 1fr;}
  #view-dashboard{grid-template-columns:1fr 280px;}
  .games-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:980px){
  .app{grid-template-columns:1fr; grid-template-areas:"topbar" "content";}
  #view-dashboard{grid-template-columns:1fr;}
  .ticker-panel{display:none;}
  .sidebar{
    position:fixed; top:64px; left:0; bottom:0;
    width:260px; z-index:250;
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .sidebar.open{transform:translateX(0);}
  .hamburger{display:flex;}
  .topnav{display:none;}
  .search-box{display:none;}
  .featured-grid{grid-template-columns:1fr;}
  .games-grid{grid-template-columns:repeat(2,1fr);}
  .main, .games-view-main{padding:16px 14px 96px;}
  .mobile-bottom-nav{display:flex;}
  .balance-pill .cur{display:none;}
  .gh-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));}

  .dice-overlay{align-items:flex-end; padding:0;}
  .dice-modal{
    max-width:100%; width:100%;
    max-height:92vh;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
  }
  .dice-overlay.open .dice-modal{transform:translateY(0);}
}

@media (max-width:600px){
  .logo span{display:none;}
  .logo-mark{height:38px;}
  .hero{padding:22px 18px;}
  .hero h1{font-size:1.5rem;}
  .games-grid{grid-template-columns:repeat(2,1fr);}
  .gh-grid{grid-template-columns:repeat(2, 1fr);}
  .lb-row{grid-template-columns:1.4fr 1fr;}
  .lb-row > div:nth-child(3), .lb-row > div:nth-child(4), .lb-row > div:nth-child(5){display:none;}
  .mines-top-row{flex-direction:column;}
  .games-hero{padding:26px 18px;}
  .games-hero h1{font-size:1.5rem;}
  .slots-symbol{height:58px; font-size:1.7rem;}
  .slots-reel{height:174px;}
  .dice-btn-row{grid-template-columns:1fr;}
}

@media (max-width:420px){
  .games-grid{grid-template-columns:1fr 1fr;}
  .gh-grid{grid-template-columns:1fr 1fr;}
  .balance-pill{padding:6px 6px 6px 10px;}
  .btn-deposit{padding:6px 10px; font-size:0.74rem;}
}

/* =========================================================
   VIP TIER CARD — sidebar progression widget.
   Progress is derived from real wagered volume in the local
   history, so it moves as you actually play.
   ========================================================= */
.vip-card{
  border-radius:var(--radius);
  padding:15px;
  background:
    radial-gradient(300px 140px at 100% 0%, rgba(245,185,66,0.14), transparent 70%),
    linear-gradient(160deg, rgba(245,185,66,0.22), rgba(22,14,36,0.9));
  border:1px solid var(--border-gold);
  box-shadow:inset 0 1px 0 rgba(247,231,174,0.12);
  position:relative;
  overflow:hidden;
}
.vip-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.vip-crest{
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  background:var(--gold-metal);
  box-shadow:0 2px 10px rgba(245,185,66,0.35);
  flex-shrink:0;
}
.vip-meta{min-width:0;}
.vip-tier{
  font-family:var(--font-display);
  font-size:0.92rem; font-weight:700;
  color:var(--gold-light);
  line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vip-sub{font-size:0.64rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.8px;}

.vip-bar{
  height:7px; border-radius:99px;
  background:rgba(10,6,17,0.7);
  border:1px solid var(--border-soft);
  overflow:hidden;
  margin-bottom:8px;
}
.vip-bar-fill{
  height:100%;
  border-radius:99px;
  background:var(--gold-metal);
  box-shadow:0 0 12px rgba(245,185,66,0.55);
  transition:width .5s cubic-bezier(.2,.8,.3,1);
  min-width:2px;
}
.vip-foot{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:0.66rem; color:var(--text-2);
}
.vip-foot b{color:var(--gold); font-size:0.72rem;}

/* Gold ornamental divider — used between sidebar groups */
.rule-gold{
  height:1px; margin:2px 4px;
  background:linear-gradient(90deg, transparent, var(--border-gold), transparent);
}

/* Slow metallic sweep across the wordmark. Deliberately subtle —
   a fast shimmer is the thing that makes a page look like a template. */
.logo span{
  background:linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 25%, #fff8e0 42%, var(--gold) 58%, var(--purple-light) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:goldSweep 7s ease-in-out infinite;
}
@keyframes goldSweep{
  0%, 100%{background-position:120% 0;}
  50%{background-position:0% 0;}
}

@media (max-width:980px){
  .vip-card{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .logo span{animation:none;}
  .sidebar{animation:none;}
}

/* =========================================================
   PENALES ROYALE — goal, keeper and 6 shooting zones.
   ========================================================= */
/* --- escenario ---------------------------------------------------------
   Proporcion EXACTA de la foto (3:2) y fondo a 100% 100%. Es deliberado:
   con "cover" el navegador recorta segun el ancho disponible, y en cuanto
   recorta, los porcentajes del marco dejan de caer sobre los postes. */
.pk-scene{
  position:relative;
  aspect-ratio:3 / 2;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid var(--border);
  background:#0b1020;
}
/* El fondo, en capa aparte. A 100% 100% y no "cover": con cover el navegador
   recorta segun el ancho y, en cuanto recorta, los porcentajes del marco
   dejan de caer sobre los postes de la foto. */
.pk-field{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("assets/penalty/stadium.webp") center/100% 100% no-repeat;
}

/* Destello de gradas: un solo degradado que se enciende una vez al marcar.
   No hay nada girando ni latiendo mientras se espera. */
.pk-crowd{
  position:absolute; left:0; right:0; top:0; height:46%;
  pointer-events:none; opacity:0; z-index:1;
  background:radial-gradient(60% 100% at 20% 0%, rgba(255,255,255,.5), transparent 60%),
             radial-gradient(60% 100% at 80% 0%, rgba(255,255,255,.5), transparent 60%);
}
.pk-crowd.on{ animation:pkCrowd 620ms ease-out; }
@keyframes pkCrowd{ 0%{opacity:0;} 25%{opacity:.75;} 100%{opacity:0;} }

/* --- marco de la porteria ---------------------------------------------
   Los cuatro numeros salen de medir los pixeles blancos de la foto: postes
   centrados en 4,8% y 95,2% con su grosor, larguero en 17%, linea de meta
   en 76%. Aqui va el hueco INTERIOR, que es por donde entra el balon. */
.pk-goal{
  position:absolute;
  left:5.9%; width:87.5%;
  top:19.3%; height:56.7%;
  z-index:2;
}

.pk-zones{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:6px;
  z-index:3;
}
.pk-zone{
  position:relative;
  border-radius:10px;
  border:1px solid rgba(197,45,255,.28);
  background:rgba(168,44,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
/* Mirilla: aparece al apuntar y marca el punto exacto al que ira el balon. */
.pk-zone i{
  position:absolute; left:50%; top:50%;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:2px solid var(--gold); border-radius:50%;
  opacity:0; transform:scale(.4) rotate(-45deg);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pk-zone i::before, .pk-zone i::after{
  content:""; position:absolute; background:var(--gold);
}
.pk-zone i::before{ left:50%; top:-7px; width:2px; height:6px; margin-left:-1px; }
.pk-zone i::after{ left:50%; bottom:-7px; width:2px; height:6px; margin-left:-1px; }
.pk-zone:hover:not(.pk-locked){
  background:rgba(197,45,255,.24);
  border-color:var(--purple-glow);
  transform:scale(1.03);
}
.pk-zone:hover:not(.pk-locked) i{ opacity:1; transform:scale(1) rotate(0deg); }
.pk-zone.pk-locked{ cursor:not-allowed; opacity:.4; }
.pk-zone.pk-picked{
  background:rgba(245,197,78,.26);
  border-color:var(--gold);
  color:#fff;
}
.pk-zone.pk-picked i{ opacity:1; transform:scale(1.15) rotate(0deg); }

/* Red: al entrar el balon, la malla se abomba en el punto del impacto. */
.pk-net{
  position:absolute; inset:0; z-index:2;
  pointer-events:none; opacity:0;
}
.pk-net::after{
  content:"";
  position:absolute; left:var(--nx,50%); top:var(--ny,50%);
  width:34%; height:52%; margin:-26% 0 0 -17%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%,
                             rgba(255,255,255,.18) 42%, transparent 68%);
}
.pk-net.on{ animation:pkNet 520ms cubic-bezier(.2,.9,.3,1); }
@keyframes pkNet{
  0%  { opacity:0; transform:scale(.35); }
  22% { opacity:1; transform:scale(1.05); }
  100%{ opacity:0; transform:scale(1.3); }
}

/* --- portero -----------------------------------------------------------
   Tres capas: .pk-keeper coloca (la escribe el JS), .pk-keeper-i hace la
   pose, y la imagen lleva su anclaje. Si compartieran elemento, cada
   animacion pisaria el transform de la anterior. */
/* Las capas ocupan el escenario ENTERO a proposito. Asi los porcentajes de
   `transform: translate()` se resuelven contra el tamano del escenario, y
   la escena entera queda descrita en porcentajes: no hay una sola medida
   en pixeles que pueda quedarse obsoleta cuando cambia el ancho. */
.pk-keeper{
  position:absolute; inset:0;
  z-index:4; pointer-events:none;
  transform:translate3d(0,0,0);
  transition:transform 420ms cubic-bezier(.3,.9,.4,1);
  will-change:transform;
}
.pk-keeper-i{ position:absolute; inset:0; }
.pk-keeper-img{
  position:absolute; left:50%; top:79%;
  width:17.5%; height:auto;
  transform:translate(-50%,-100%) scaleX(var(--kflip,1));
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
/* En la estirada el sprite es horizontal, asi que se ancla por el centro. */
.pk-keeper.dive .pk-keeper-img{
  width:27%;
  transform:translate(-50%,-50%) scaleX(var(--kflip,1)) rotate(var(--krot,0deg));
}
/* Respiracion mientras espera, y anticipacion justo antes de lanzarse. */
.pk-keeper.listo .pk-keeper-i{ animation:pkBreath 2.8s ease-in-out infinite; }
@keyframes pkBreath{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(0,-2px,0) scale(1.015); }
}
.pk-keeper.tensa .pk-keeper-i{ animation:pkCrouch 200ms ease-out; }
@keyframes pkCrouch{
  0%  { transform:scale(1,1); }
  60% { transform:scale(1.06,.9); }
  100%{ transform:scale(1,1); }
}

/* --- balon ------------------------------------------------------------- */
.pk-ball{
  position:absolute; inset:0;
  z-index:5; pointer-events:none;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.pk-ball-y{ position:absolute; inset:0; will-change:transform; }
.pk-ball-img{
  position:absolute; left:50%; top:92.5%;
  width:7.8%; height:auto;
  transform:translate(-50%,-50%) scale(var(--bs,1));
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
  transition:transform 200ms var(--ease);
}
.pk-ball.vuela .pk-ball-img{ animation:pkSpin var(--bt,560ms) linear; }
@keyframes pkSpin{ from{ rotate:0deg; } to{ rotate:var(--bspin,700deg); } }

/* --- reacciones -------------------------------------------------------- */
.pk-scene.pk-shake{ animation:pkShake 240ms cubic-bezier(.36,.07,.19,.97); }
@keyframes pkShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,3px); }
  45%{ transform:translate(5px,-3px); }
  70%{ transform:translate(-3px,-2px); }
}

.pk-burst{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.pk-burst i{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle, #FFF0C4 0%, var(--gold) 55%, transparent 72%);
  animation:pkSpark 620ms ease-out forwards;
  will-change:transform, opacity;
}
@keyframes pkSpark{
  0%  { opacity:1; transform:translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform:translate3d(var(--dx,0),var(--dy,0),0) scale(.3); }
}

.pk-flash{
  position:absolute; inset:0; z-index:7;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .16s ease;
  background:radial-gradient(circle at 50% 45%, rgba(10,7,16,.35), rgba(10,7,16,.72));
}
.pk-flash.show{ opacity:1; }
.pk-flash-text{
  font-family:var(--font-display);
  font-size:2.6rem; font-weight:700; letter-spacing:.06em;
  text-align:center; line-height:1;
  animation:pkStamp 420ms cubic-bezier(.2,1.6,.4,1);
}
@keyframes pkStamp{
  0%  { opacity:0; transform:scale(2.2) rotate(-8deg); }
  60% { opacity:1; transform:scale(.94) rotate(1deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.pk-flash-text.gol{ color:var(--gold-light2, #FFD978); text-shadow:0 0 34px rgba(245,197,78,.85); }
.pk-flash-text.atajada{ color:#FF6B7F; text-shadow:0 0 30px rgba(192,51,77,.8); }

/* --- racha -------------------------------------------------------------
   Un balon por gol y un aspa por atajada. Nada de emoji: el balon es el
   mismo sprite del juego, asi que la racha se lee de un vistazo. */
.pk-streak-row{
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap; min-height:28px; margin-bottom:10px;
}
.pk-streak-dot{
  position:relative;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--border);
}
.pk-streak-dot img{ width:19px; height:19px; display:block; }
.pk-streak-dot.gol{
  border-color:rgba(245,197,78,.55);
  box-shadow:0 0 10px rgba(245,197,78,.28);
  animation:pkPop .32s cubic-bezier(.2,1.6,.4,1);
}
.pk-streak-dot.fallo{
  background:rgba(192,51,77,.18); border-color:rgba(192,51,77,.55);
  animation:pkPop .32s ease;
}
.pk-streak-dot.fallo::before,
.pk-streak-dot.fallo::after{
  content:""; position:absolute;
  width:13px; height:2px; border-radius:2px; background:#FF6B7F;
}
.pk-streak-dot.fallo::before{ transform:rotate(-45deg); }
.pk-streak-dot.fallo::after{ transform:rotate(45deg); }
@keyframes pkPop{ 0%{transform:scale(0);} 100%{transform:scale(1);} }

.pk-hint{
  font-size:0.74rem; color:var(--text-muted);
  text-align:center; padding:0 0 12px;
}
.pk-hint b{ color:var(--gold); }

.pk-head-icon{
  background:rgba(197,45,255,0.14) !important;
  border-color:rgba(197,45,255,0.38) !important;
  color:var(--gold) !important;
}

@media (max-width:600px){
  .pk-zone{ font-size:0.5rem; }
  .pk-zone i{ width:20px; height:20px; margin:-10px 0 0 -10px; }
  .pk-flash-text{ font-size:1.8rem; }
}
@media (prefers-reduced-motion: reduce){
  .pk-keeper.listo .pk-keeper-i{ animation:none; }
  .pk-scene.pk-shake{ animation:none; }
  .pk-burst i{ display:none; }
}
html.menos-animacion .pk-burst i{ display:none; }
html.menos-animacion .pk-keeper.listo .pk-keeper-i{ animation:none; }

/* =========================================================
   MINAS ROYALE — board-first layout, stats, history, modals
   ========================================================= */
.mn-balance{
  font-size:0.82rem; font-weight:700; color:var(--text-2);
  white-space:nowrap;
}
.mn-balance b{color:var(--gold); font-weight:800;}

.mn-status-banner{
  text-align:center;
  font-size:0.78rem; font-weight:700;
  color:var(--text-1);
  background:linear-gradient(135deg, rgba(245,185,66,0.14), rgba(245,185,66,0.08));
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:10px 14px;
}
.mn-status-banner.playing{color:var(--gold-light); border-color:var(--border-gold);}
.mn-status-banner.win{color:var(--emerald-light); border-color:rgba(53,181,125,0.4);}
.mn-status-banner.lost{color:var(--wine); border-color:rgba(192,51,77,0.4);}

/* Board stays the hero: it gets the wider column */
.dice-modal.mines-wide{max-width:900px;}

.mn-layout{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:18px;
  align-items:start;
}
.mn-board-col{min-width:0;}
.mn-panel-col{display:flex; flex-direction:column; gap:14px; min-width:0;}
.mn-readouts{margin:0;}

.mines-board{animation:mnBoardEnter .4s ease both;}
@keyframes mnBoardEnter{
  from{opacity:0; transform:translateY(10px) scale(0.98);}
  to{opacity:1; transform:none;}
}
.mines-tile{
  animation:mnTileEnter .3s ease both;
  animation-delay:calc(var(--i, 0) * 12ms);
}
@keyframes mnTileEnter{ from{opacity:0; transform:scale(0.85);} to{opacity:1; transform:scale(1);} }
.mines-tile:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.mines-tile:active:not(.revealed){transform:scale(0.94);}
.mines-tile.mn-idle{cursor:default; opacity:0.75;}

/* Sparkle burst on a safe reveal */
.mines-tile.safe::after{
  content:"";
  position:absolute; inset:0;
  border-radius:10px;
  box-shadow:0 0 0 0 rgba(53,181,125,0.55);
  animation:mnSafePulse .5s ease-out;
  pointer-events:none;
}
@keyframes mnSafePulse{
  from{box-shadow:0 0 0 0 rgba(53,181,125,0.6);}
  to{box-shadow:0 0 0 14px rgba(53,181,125,0);}
}
.mines-tile.mine.mn-hit{ animation:mnShake .45s ease; }
@keyframes mnShake{
  0%,100%{transform:translateX(0) scale(1);}
  15%{transform:translateX(-5px) scale(1.12);}
  35%{transform:translateX(5px) scale(1.12);}
  55%{transform:translateX(-4px) scale(1.06);}
  75%{transform:translateX(4px) scale(1.03);}
}

/* Stats */
.mn-section-title{
  font-family:var(--font-display);
  font-size:0.95rem; font-weight:700;
  color:var(--gold-light);
  display:flex; align-items:center; gap:9px;
}
.mn-section-title::before{
  content:""; width:3px; height:15px; border-radius:2px;
  background:linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  flex-shrink:0;
}
.mn-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
}
.mn-stat{
  background:var(--bg-2); border:1px solid var(--border-soft);
  border-radius:10px; padding:11px 13px;
  display:flex; flex-direction:column; gap:4px;
}
.mn-stat span{font-size:0.62rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.5px;}
.mn-stat b{font-size:0.95rem; font-weight:800;}
.mn-stat b.up{color:var(--emerald);}
.mn-stat b.down{color:var(--wine);}

/* Mines-only recent games */
.mn-history{
  max-height:190px; overflow-y:auto;
  border:1px solid var(--border-soft); border-radius:10px;
  background:var(--bg-2);
}
.mn-history-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:10px;
  padding:9px 12px;
  border-bottom:1px solid var(--border-soft);
  font-size:0.76rem;
  animation:lbSlideIn .35s ease both;
}
.mn-history-row:last-child{border-bottom:none;}
.mn-history-badge{
  font-size:0.6rem; font-weight:800; letter-spacing:0.4px;
  padding:3px 8px; border-radius:5px; white-space:nowrap;
}
.mn-history-badge.win{color:var(--emerald); background:rgba(53,181,125,0.14); border:1px solid rgba(53,181,125,0.35);}
.mn-history-badge.loss{color:var(--wine); background:rgba(192,51,77,0.12); border:1px solid rgba(192,51,77,0.32);}
.mn-history-meta{color:var(--text-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mn-history-meta b{color:var(--text-1);}
.mn-history-amt{font-weight:800; white-space:nowrap;}
.mn-history-amt.up{color:var(--emerald);}
.mn-history-amt.down{color:var(--text-2);}
.mn-history-time{color:var(--text-2); font-size:0.68rem; white-space:nowrap;}
.mn-history-empty{padding:26px 14px; text-align:center; color:var(--text-2); font-size:0.8rem;}

/* How to play */
.mn-howto{
  background:var(--bg-2); border:1px solid var(--border-soft);
  border-radius:10px; padding:12px 14px;
}
.mn-howto summary{
  cursor:pointer; font-weight:800; font-size:0.82rem; color:var(--gold-light);
  list-style:none;
}
.mn-howto summary::-webkit-details-marker{display:none;}
.mn-howto summary::before{content:"▸ "; color:var(--gold);}
.mn-howto[open] summary::before{content:"▾ ";}
.mn-howto ol{margin:12px 0 10px 18px; display:flex; flex-direction:column; gap:5px;}
.mn-howto li{font-size:0.78rem; color:var(--text-1);}
.mn-fair{
  font-size:0.72rem; color:var(--text-2); line-height:1.6;
  border-top:1px solid var(--border-soft); padding-top:10px; margin-top:4px;
}
.mn-fair b{color:var(--text-1);}
.mn-fair code{
  background:var(--bg-0); padding:1px 5px; border-radius:4px;
  color:var(--gold); font-size:0.7rem;
}
.mn-reset-link{
  margin-top:10px;
  background:none; border:none;
  color:var(--text-2); font-size:0.7rem;
  text-decoration:underline; padding:4px 0;
}
.mn-reset-link:hover{color:var(--wine);}

/* Result modals (win / loss) */
.mn-result-overlay{z-index:500;}
.mn-result-card{
  width:100%; max-width:340px;
  text-align:center;
  padding:30px 26px 24px;
  border-radius:18px;
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-1));
  border:1px solid var(--border-gold);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.8);
  transform:translateY(16px) scale(0.95);
  transition:transform .25s cubic-bezier(.2,1.2,.3,1);
}
.mn-result-overlay.open .mn-result-card{transform:none;}
.mn-result-card.loss{border-color:rgba(192,51,77,0.45);}
.mn-result-icon{font-size:2.8rem; margin-bottom:8px; animation:winTextPop .45s cubic-bezier(.3,1.5,.5,1);}
.mn-result-title{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:700; letter-spacing:1px;
  color:var(--emerald-light); margin-bottom:4px;
}
.mn-result-card.loss .mn-result-title{color:var(--wine);}
.mn-result-mult{font-size:2rem; font-weight:900; color:var(--gold); text-shadow:0 0 22px var(--gold-glow); margin-bottom:2px;}
.mn-result-amount{font-size:1.05rem; font-weight:800; color:var(--emerald); margin-bottom:6px;}
.mn-result-card.loss .mn-result-amount{color:var(--text-2);}
.mn-result-sub{font-size:0.74rem; color:var(--text-2); margin-bottom:18px;}

@media (max-width:960px){
  .mn-layout{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .mn-stats{grid-template-columns:repeat(2, 1fr);}
  .mn-history-row{grid-template-columns:auto 1fr auto; gap:8px;}
  .mn-history-time{display:none;}
  .mn-result-mult{font-size:1.7rem;}
}
@media (prefers-reduced-motion: reduce){
  .mines-board, .mines-tile{animation:none !important;}
  .mines-tile.mine.mn-hit{animation:none;}
}

/* =========================================================
   CHICKEN ROAD
   Board is portrait: lanes are VERTICAL strips, the hen crosses
   left to right, the camera is one translateX on the track. That
   orientation comes from the art — auto.svg is drawn nose-up, so
   cars run along a lane rather than across it.

   Lane width is a custom property, so the mobile breakpoint
   changes one number and the flex track re-lays itself; the JS
   reads geometry back rather than duplicating it.

   Every moving part is transform/opacity only, so nothing here
   forces layout during a step. The walk cycle is a steps(4)
   sprite-strip animation, which means the frames cost the
   compositor and not the main thread.

   Surfaces follow the supplied art's language: ink var(--bg-input)
   outlines, saturated flats, one highlight — no thin borders and
   no undesigned boxes.
   ========================================================= */
.cr-modal{max-width:520px;}
.cr-head-right{display:flex; align-items:center; gap:8px;}
.cr-icon{background:rgba(242,169,59,0.14) !important; border-color:rgba(242,169,59,0.45) !important; color:#F2A93B !important;}

.cr-stage, .cr-diffs, .cr-actions{--cr-ink:var(--bg-input);}

/* ---------- difficulty tabs ---------- */
.cr-diffs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.cr-diffs.locked{opacity:0.45; pointer-events:none;}
.cr-diff{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 4px;
  background:var(--bg-elevated);
  border:2px solid var(--cr-ink);
  border-radius:11px;
  box-shadow:0 3px 0 var(--cr-ink);
  cursor:pointer;
  transition:transform .12s var(--ease), background .2s var(--ease), box-shadow .12s var(--ease);
}
.cr-diff:hover{transform:translateY(-1px); background:#221E17;}
.cr-diff:active{transform:translateY(3px); box-shadow:0 0 0 var(--cr-ink);}
.cr-diff b{font-size:0.76rem; font-weight:800; color:var(--text-0); letter-spacing:0.03em;}
.cr-diff span{font-size:0.58rem; color:var(--text-2); letter-spacing:0.02em;}
.cr-diff.active{
  background:linear-gradient(180deg, #FFD75E 0%, #F2C230 45%, #D89B12 100%);
  box-shadow:0 3px 0 #8A5A0E;
}
.cr-diff.active b{color:var(--bg-input);}
.cr-diff.active span{color:#6B4A0C;}

/* ---------- stage ---------- */
.cr-stage{
  --cr-lane-w:84px;
  /* 48 y no 36: el arcen ahora lleva cesped con matas y bordillo de piedra,
     y a 36px las matas salian del tamano de un pixel. */
  --cr-verge-h:48px;
  --cr-car-ms:620ms;
  position:relative;
  height:430px;
  border-radius:14px;
  overflow:hidden;
  border:2px solid var(--cr-ink);
  background:#48526D;   /* el asfalto de la referencia */
  contain:paint;
}
.cr-stage.shake{animation:crHit 230ms cubic-bezier(.36,.07,.19,.97);}
@keyframes crHit{
  0%,100%{transform:translate(0,0);}
  20%{transform:translate(-5px,3px);}
  45%{transform:translate(4px,-3px);}
  70%{transform:translate(-3px,2px);}
}

/* ---------- the track (camera) ---------- */
.cr-track{
  position:absolute; left:0; top:0; bottom:0;
  width:max-content;
  display:flex; flex-direction:row; align-items:stretch;
  will-change:transform;
  /* The camera is deliberately slower than the hen and starts a beat later,
     so she pulls ahead and the road catches up. Matching her exactly is what
     made the board feel like one rigid object sliding sideways. */
  transition:transform 620ms cubic-bezier(.16,.72,.24,1) 60ms;
}
.cr-track.cr-noanim, .cr-track.cr-noanim *{transition:none !important; animation:none !important;}

/* Verges run the full length of the road and scroll with it, so the
   roadside never slides against the asphalt while the camera pans. */
/* Cesped y bordillo salen de la misma foto: la franja de la izquierda,
   girada un cuarto de vuelta y espejada para que repita sin costura
   (medida: 0,00). El archivo trae el bordillo abajo, pegado al asfalto, que
   es como va en el arcen de arriba; el de abajo se voltea. */
.cr-verge{
  position:absolute; left:0; width:100%; height:var(--cr-verge-h);
  z-index:3; pointer-events:none;
  background:#46901F url("assets/chicken-road/verge.webp") repeat-x left center / auto 100%;
}
.cr-verge-t{top:0;}
.cr-verge-b{bottom:0; transform:scaleY(-1);}
.cr-prop{
  position:absolute; bottom:-6px; width:52px; height:52px;
  margin-left:-26px; display:block;
}
/* El arcen de abajo va volteado entero, asi que sus adornos ya quedan del
   derecho; el de arriba necesita voltear los suyos a mano. */
.cr-verge-t .cr-prop{bottom:auto; top:-8px; transform:scaleY(-1);}
.cr-prop-art{display:block; width:100%; height:100%;}

/* ---------- lanes ---------- */
.cr-kerb, .cr-finish{
  position:relative; flex:none; width:56px;
  border-right:3px solid var(--cr-ink);
}
.cr-kerb{
  background:
    repeating-linear-gradient(74deg, rgba(0,0,0,.16) 0 4px, transparent 4px 11px),
    linear-gradient(180deg, #5AA24A 0%, #3F7F36 100%);
}
.cr-finish{
  width:74px;
  display:flex; align-items:center; justify-content:center;
  border-right:none; border-left:3px solid var(--cr-ink);
  background:repeating-conic-gradient(#F4F1E8 0 25%, var(--bg-input) 0 50%) 0 0/18px 18px;
}
.cr-finish span{
  padding:6px 8px; border-radius:9px; text-align:center; line-height:1.25;
  background:var(--bg-elevated); border:2px solid var(--cr-ink);
  box-shadow:0 3px 0 var(--cr-ink);
  font-size:0.58rem; font-weight:800; letter-spacing:0.1em;
  color:#F2C230;
}

/* El asfalto sale de la foto que mando el cliente: un trozo entre rayas,
   espejado en vertical para que repita sin costura (medida: 0,00). La
   textura ya viene en el archivo, asi que sobran las dos capas de puntos
   que lo simulaban antes. */
.cr-lane{
  position:relative; flex:none;
  width:var(--cr-lane-w);
  background:#48526D url("assets/chicken-road/asphalt.webp") repeat-y center / 100% auto;
}
/* Sombra suave en los bordes del carril: da relieve sin dibujar nada. */
.cr-lane::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.16), transparent 22%,
                             transparent 78%, rgba(0,0,0,.16));
}
/* Separador: el mismo blanco azulado de la foto (#C4CFE8) y el ritmo de
   trazo escalado a nuestro ancho de carril (84px contra sus 244px). */
.cr-dash{
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:repeating-linear-gradient(180deg, #C4CFE8 0 16px, transparent 16px 29px);
}

/* Multiplier disc — a struck token, not a flat circle: dark rim, radial
   face, top highlight and a shelf under it. Lights up once crossed. */
/* Slate token with a grated face and a raised rim, as in the reference: it
   reads as a drain cover set into the asphalt rather than a chip laid on top.
   The grate is a repeating gradient masked to the circle, so it costs nothing
   and scales with the disc. */
.cr-disc{
  position:absolute; left:50%; top:50%;
  width:56px; height:56px; margin:-28px 0 0 -28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:3px solid #23211E;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 40% 32%, #55524B 0%, #3B3833 60%, #2A2723 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.05),
    inset 0 3px 6px rgba(0,0,0,.55),
    0 4px 0 #1B1916, 0 7px 12px -5px rgba(0,0,0,.85);
  overflow:hidden;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
  z-index:2;
}
.cr-disc::before{
  content:""; position:absolute; left:0; right:0; top:0; height:46%;
  background:linear-gradient(180deg, rgba(255,255,255,.13), transparent);
  pointer-events:none;
}
.cr-disc b{
  position:relative;
  font-size:0.68rem; font-weight:900; letter-spacing:0.01em;
  color:#B9B3A6; text-shadow:0 1px 0 rgba(0,0,0,.8);
  transition:color .3s var(--ease);
}
.cr-lane.reached .cr-disc{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 40% 32%, #FFE485 0%, #F2C230 55%, #D89B12 100%);
  border-color:#8A5A0E;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.16),
    0 4px 0 #8A5A0E, 0 0 22px rgba(242,194,48,.5), 0 7px 14px -5px rgba(0,0,0,.85);
  transform:scale(1.06);
}
.cr-lane.reached .cr-disc b{color:#6B4A0C; text-shadow:0 1px 0 rgba(255,255,255,.45);}
/* The lane the run ended on */
.cr-lane.fatal .cr-disc{
  background:radial-gradient(circle at 38% 30%, #F0616B 0%, #E4262E 55%, #8E1519 100%);
  box-shadow:0 4px 0 #5E0E12, 0 0 22px rgba(228,38,46,.5), 0 7px 14px -5px rgba(0,0,0,.85);
  transform:scale(1.04);
}
.cr-lane.fatal .cr-disc b{color:#FFE3E5; text-shadow:0 1px 0 rgba(0,0,0,.55);}

/* Coin: decoration only. It marks the lane and pops when crossed; it pays
   nothing, which is what keeps the 99% ladder untouched. */
.cr-coin{
  position:absolute; left:50%; top:72%;
  width:34px; height:34px; margin-left:-17px;
  display:block; z-index:2;
  animation:crCoinBob 2.4s ease-in-out infinite;
}
.cr-coin-art{display:block; width:100%; height:100%;}
@keyframes crCoinBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}
.cr-coin.taken{animation:crCoinTake .5s cubic-bezier(.3,1.4,.5,1) forwards;}
@keyframes crCoinTake{
  0%  {transform:translateY(0) scale(1);   opacity:1;}
  100%{transform:translateY(-34px) scale(1.5); opacity:0;}
}

/* ---------- the hen ---------- */
.cr-chicken{
  position:absolute; top:50%; left:0;
  /* 84x90 respeta la proporcion de la celda del sprite (150x160). Con la
     caja cuadrada anterior la gallina salia achatada. */
  width:84px; height:90px;
  margin-left:-42px; margin-top:-66px;
  z-index:4;

  /* Se anima TRANSFORM, no `left`.

     Antes era `transition:left`, y ahi estaba el tironeo que reportaba el
     cliente: `left` es una propiedad de maquetacion, asi que el navegador
     recalculaba el layout de la pista entera en cada fotograma de los 420ms.
     Con transform el movimiento se resuelve en el compositor y no toca el
     layout ni una vez.

     La curva sigue siendo asimetrica a proposito: empuja fuerte, planea y se
     asienta. Una curva simetrica la movia a ritmo casi constante, que es lo
     que hacia que el paso pareciese mecanico. */
  transition:transform 480ms cubic-bezier(.22,.9,.28,1);
  will-change:transform;
}

/* EL SALTO vive en un elemento aparte para no pelearse con la posicion.

   Antes el arco era de 7px sobre una gallina de 78: practicamente
   imperceptible, que es por lo que el cliente decia que "se teletransporta"
   -- cambiaba de sitio sin que el cuerpo hiciera nada reconocible.

   Ahora sube 26px con estirado y aplastado, que es el recurso clasico de
   animacion para que un salto se LEA como salto:
     anticipacion  -> se agacha y se ensancha antes de empujar
     despegue      -> se estira en vertical
     apice         -> vuelve a su forma, inclinada hacia delante
     aterrizaje    -> aplasta al tocar y se recompone */
.cr-hop{
  display:block; width:100%; height:100%;
  transform-origin:50% 92%;   /* pivota sobre las patas, no sobre el centro */
  will-change:transform;
}
.cr-chicken.stepping .cr-hop{
  animation:crHop 480ms cubic-bezier(.3,.7,.4,1);
}
@keyframes crHop{
  0%   {transform:translateY(0)     scale(1, 1)       rotate(0deg);}
  12%  {transform:translateY(2px)   scale(1.12, 0.88) rotate(-3deg);}
  30%  {transform:translateY(-16px) scale(0.92, 1.12) rotate(-8deg);}
  50%  {transform:translateY(-26px) scale(1, 1)       rotate(-5deg);}
  72%  {transform:translateY(-12px) scale(0.97, 1.04) rotate(2deg);}
  88%  {transform:translateY(0)     scale(1.14, 0.86) rotate(1deg);}
  100% {transform:translateY(0)     scale(1, 1)       rotate(0deg);}
}

/* Sombra que se encoge cuando esta arriba: sin ella el salto se lee como
   "la gallina se hizo mas grande" en vez de "la gallina se separo del suelo". */
/* left:43% y no 50%: medido sobre el sprite, el centro de las PATAS cae un
   7% a la izquierda del centro de la celda (la cola tira del dibujo hacia
   ese lado). Con la sombra centrada quedaba desplazada a la derecha de sus
   pies y se leia como una mancha suelta en el suelo, no como su sombra.

   Y con degradado en vez de negro plano: un ovalo de borde duro parece una
   pegatina. */
.cr-chicken::after{
  content:'';
  position:absolute; left:43%; bottom:1px;
  width:52px; height:14px; margin-left:-26px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
             rgba(0,0,0,.58) 0%, rgba(0,0,0,.36) 44%, rgba(0,0,0,0) 72%);
  z-index:-1;
}
.cr-chicken.stepping::after{ animation:crHopShadow 480ms cubic-bezier(.3,.7,.4,1); }
@keyframes crHopShadow{
  0%,100% {transform:scale(1);      opacity:1;}
  50%     {transform:scale(0.55);   opacity:.42;}
}
.cr-chicken svg{display:block; width:100%; height:100%;}

.cr-hen-idle{ display:block; }

/* Ciclo de carrera: la tira de 20 fotogramas vive dentro de una ventana del
   ancho de UNO y se desplaza de celda en celda. Un solo keyframe, sin JS por
   fotograma.

   El 400% de antes era para los 4 SVG originales. Al quedarse aqui (mas
   abajo que la regla nueva) seguia ganando y la tira se comprimia a 4 celdas:
   se veian los cuatro primeros fotogramas estirados y nada mas. */
.cr-hen-sheet{position:absolute; inset:0; overflow:hidden; display:none;}
.cr-strip{
  display:block;
  width:2000%;      /* 20 celdas */
  height:100%;
  max-width:none;   /* la regla global de imagenes la aplastaria al 100% */
}
.cr-hen-pose{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}

.cr-chicken[data-pose="walk"] .cr-hen-sheet{display:block;}
.cr-chicken[data-pose="walk"] .cr-hen-pose{display:none;}
/* 20 pasos, uno por fotograma de la hoja. El numero TIENE que coincidir con
   los fotogramas: con steps(4) sobre una tira de 20 se saltaria 5 de cada 6
   poses y volveria a parecer un pase de diapositivas. */
.cr-chicken[data-pose="walk"] .cr-strip{animation:crWalk 700ms steps(20) infinite;}
@keyframes crWalk{from{transform:translateX(0);} to{transform:translateX(-100%);}}

/* Ya no hay un SVG de KO aparte: se aplasta la MISMA gallina que se venia
   viendo. Cambiar de dibujo justo al morir rompia la continuidad -- parecia
   otro animal. */


/* ATROPELLO: aplastada, no caida.

   Antes era un descenso de 12px con una rotacion: leia como "se tropezo".
   El cliente pedia que quedara aplastada, asi que el coche la APLANA --
   scaleY al 0.22 y scaleX al 1.45, con un rebote corto antes de quedarse
   asi. El pivote esta en las patas, de modo que se aplasta contra el suelo
   en vez de encogerse hacia su centro.

   forwards al final: se queda aplastada en el suelo, que es el remate del
   chiste. Sin el volveria a su forma y parece que resucita. */
.cr-chicken[data-pose="ko"] .cr-hop{
  animation:crSquash 520ms cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes crSquash{
  0%   {transform:translateY(-14px) scaleY(1.14) scaleX(0.9)  rotate(-10deg);}
  22%  {transform:translateY(0)     scaleY(0.22) scaleX(1.45) rotate(0deg);}
  42%  {transform:translateY(0)     scaleY(0.42) scaleX(1.26) rotate(0deg);}
  60%  {transform:translateY(0)     scaleY(0.26) scaleX(1.40) rotate(0deg);}
  100% {transform:translateY(0)     scaleY(0.30) scaleX(1.36) rotate(0deg);}
}
/* La sombra se ensancha con ella: una gallina aplanada proyecta una mancha
   ancha, no el ovalo de cuando estaba de pie. */
.cr-chicken[data-pose="ko"]::after{
  animation:crSquashShadow 520ms cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes crSquashShadow{
  0%   {transform:scale(0.8);          opacity:.30;}
  22%  {transform:scale(1.5, 0.8);     opacity:.55;}
  100% {transform:scale(1.42, 0.75);   opacity:.5;}
}

.cr-chicken.cheer{animation:crCheer .5s cubic-bezier(.3,1.6,.5,1) 2;}
@keyframes crCheer{0%,100%{transform:translateY(0);} 40%{transform:translateY(-13px);}}

/* Safety barrier that closes off each lane already crossed. Rises from the
   lane's leading edge so the banked ground reads as sealed behind her. */
/* ANTES ERA UN MURO EN EL LATERAL: una franja de 7px pegada al borde del
   carril, que se leia como una pared y no como "este carril ya esta
   cerrado". Ahora es una valla de obra plantada DENTRO del carril, con su
   barra a rayas y sus dos patas, como la de la referencia. */
.cr-safe{
  position:absolute; left:10%; right:10%; top:20%;
  height:20px;
  z-index:2; pointer-events:none;
  transform-origin:50% 100%;
  animation:crSafeUp .34s cubic-bezier(.3,1.5,.5,1);
}
.cr-safe::before{      /* la barra */
  content:""; position:absolute; left:0; right:0; top:0; height:12px;
  border-radius:3px;
  border:2px solid #0E1B26;
  background:repeating-linear-gradient(115deg, #2FC6F3 0 7px, #E8F5FF 7px 14px);
  box-shadow:0 2px 0 rgba(0,0,0,.4);
}
.cr-safe::after{       /* las dos patas */
  content:""; position:absolute; top:11px; left:16%; right:16%; height:9px;
  background:
    linear-gradient(#68798A, #35424F) left top / 5px 100% no-repeat,
    linear-gradient(#68798A, #35424F) right top / 5px 100% no-repeat;
}
@keyframes crSafeUp{
  from{transform:scaleY(0); opacity:0;}
  to  {transform:scaleY(1); opacity:1;}
}

/* Live multiplier tag riding under the hen, with a pointer up at her. */
.cr-tag{
  position:absolute; left:0; top:50%;
  margin:26px 0 0 -34px;
  width:68px;
  z-index:5;
  opacity:0; pointer-events:none;
  /* transform y no `left`, por lo mismo que la gallina: esta etiqueta viaja
     pegada a ella, asi que si una va por el compositor y la otra por
     maquetacion, se desincronizan a ojo -- la etiqueta llegaria un pelo
     despues y con tironeo propio. */
  transition:transform 480ms cubic-bezier(.22,.9,.28,1), opacity .2s var(--ease);
}
.cr-tag.show{opacity:1;}
.cr-tag b{
  display:block; text-align:center;
  padding:5px 4px;
  border-radius:8px;
  border:2px solid #1E3660;
  background:linear-gradient(180deg, #5C86D6 0%, #34589E 100%);
  box-shadow:0 3px 0 #1E3660;
  font-size:0.74rem; font-weight:900; letter-spacing:-0.01em;
  color:#FFFFFF; text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.cr-tag::before{
  content:""; position:absolute; left:50%; top:-7px; margin-left:-7px;
  width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-bottom:8px solid #1E3660;
}

/* Ambient traffic in the lanes ahead. Decoration only — a lane drops its car
   the instant the hen steps onto it, so a car can never sit where she is. */
.cr-amb-car{
  position:absolute; left:50%; top:0;
  width:78%; height:0; padding-bottom:78%;
  margin-left:-39%;
  z-index:1; pointer-events:none;
  animation:crAmbient 2s linear infinite;
}
@keyframes crAmbient{
  from{transform:translateY(-130%);}
  to  {transform:translateY(560%);}
}

/* ---------- traffic ---------- */
.cr-car{
  position:absolute; left:50%; top:0;
  width:82%; height:0; padding-bottom:82%;
  margin-left:-41%;
  z-index:5; pointer-events:none;
  animation:crCarPass var(--cr-car-ms) linear forwards;
}
/* El coche esta DIBUJADO mirando hacia arriba -- faros y parabrisas en la
   parte de arriba del simbolo -- pero circula hacia abajo. Sin este giro
   bajaba por el carril marcha atras. */
.cr-car-art{position:absolute; inset:0; width:100%; height:100%; transform:rotate(180deg);}
@keyframes crCarPass{
  from{transform:translateY(-150%);}
  to  {transform:translateY(560%);}
}
/* The fatal car eases into the hen's line and only then carries on, so the
   hit reads as a hit instead of a car that happened to pass. */
.cr-car.fatal{animation:crCarHit var(--cr-car-ms) cubic-bezier(.25,.6,.5,1) forwards;}
@keyframes crCarHit{
  0%  {transform:translateY(-150%);}
  42% {transform:translateY(160%);}
  100%{transform:translateY(560%);}
}

/* ---------- particles ---------- */
.cr-fx{position:absolute; inset:0; z-index:6; pointer-events:none;}

/* =========================================================
   EL ATROPELLO, COMO EN EL VIDEO DEL CLIENTE

   La gallina se viene encima y revienta contra el cristal. El
   golpe es contra la PANTALLA, no contra el carril, asi que esto
   va en su propia capa por encima de todo y centrado en el
   escenario, no sobre la gallina del carril.

   Nueve fotogramas: cinco de acercarse, tres de estallar el
   cristal y uno de quedarse pegada. Fueron doce, pero dos de los
   ultimos eran casi identicos y en la aproximacion sobraba uno de
   cada dos: con tres menos cabe un 30% mas de resolucion por el
   mismo peso, y eso es lo que se notaba en el movil.

   EL BORDE VA DIFUMINADO EN LA PROPIA HOJA. Los fotogramas del
   impacto llenan el cuadro entero, asi que recortados en
   rectangulo se cortaban en linea recta y parecian una foto
   pegada encima del juego. Ahora el alfa cae a cero en el 26%
   exterior y el cristal roto se deshace contra el asfalto.

   La tecnica es la misma que la de andar -- una ventana con
   overflow y una tira que se desplaza -- para que el recorrido lo
   lleve el compositor y no repinte en cada fotograma.
   ========================================================= */
.cr-splat{
  position:absolute; left:50%; top:47%;
  /* 36% del escenario. Estuvo en 48 (tapaba el tablero) y luego en 31, y
     a 31 se leia como una foto pegada: el problema no era el tamano sino
     el borde recto. Con el borde ya difuminado en la hoja, admite algo mas
     de presencia sin volverse invasivo. */
  /* El minimo baja de 150 a 122: en un movil de 375px el escenario mide
     341, y con 150 el tope inferior mandaba y lo subia al 44% -- casi el
     48% que ya se dijo que era demasiado. Con 122 se queda en el 36% en
     todas las pantallas. */
  width:clamp(122px, 36%, 250px);
  aspect-ratio:440 / 477;
  overflow:hidden;
  z-index:9;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.55);
}
.cr-splat img{
  display:block;
  width:900%;        /* 9 celdas */
  height:100%;
  max-width:none;    /* la regla global de imagenes la aplastaria al 100% */
}
/* El numero de pasos TIENE que coincidir con los fotogramas de la hoja: con
   otro valor se saltarian poses y volveria a parecer un pase de diapositivas. */
.cr-splat.on img{ animation:crSplatPasos 520ms steps(9) forwards; }
@keyframes crSplatPasos{ from{transform:translateX(0);} to{transform:translateX(-100%);} }

/* El sprite ya crece solo (ocupa del 18% al 96% del cuadro), asi que la
   escala de aqui es un empujon corto y no un zoom entero: doblarlo hacia
   fuera de la pantalla. Se queda pegada 1,2 s y se va, que es el tiempo que
   hace falta para leer el "Perdiste" de abajo. */
.cr-splat.on{ animation:crSplatEntra 2200ms cubic-bezier(.25,.85,.4,1) forwards; }
@keyframes crSplatEntra{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.55); }
  10% { opacity:1; }
  26% { opacity:1; transform:translate(-50%,-50%) scale(1.06); }
  32% { transform:translate(-50%,-50%) scale(1); }
  80% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.04); }
}

/* Con menos animaciones la gallina sigue quedando aplastada en el carril y
   saltan las plumas, que ya dicen lo que hay que decir. Esta capa se queda
   fuera: el ajuste global le pondria 0,01 ms y saldria un parpadeo. */
@media (prefers-reduced-motion: reduce){ .cr-splat{ display:none; } }
html.menos-animacion .cr-splat{ display:none; }
.cr-dust{
  position:absolute; top:50%; width:10px; height:10px; margin:22px 0 0 -5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(226,220,204,.6), rgba(226,220,204,0) 70%);
  animation:crDust .62s ease-out forwards;
}
@keyframes crDust{
  from{transform:translate(0,0) scale(.4); opacity:.8;}
  to  {transform:translate(var(--dx,-20px), -8px) scale(1.8); opacity:0;}
}
.cr-feather{
  position:absolute; top:50%; width:22px; height:22px; margin:-12px 0 0 -11px;
  animation:crFeather 1.25s cubic-bezier(.2,.6,.3,1) forwards;
}
.cr-feather-art{display:block; width:100%; height:100%;}
@keyframes crFeather{
  0%  {transform:translate(0,0) rotate(0deg); opacity:1;}
  100%{transform:translate(var(--dx,0), var(--dy,-60px)) rotate(var(--rot,180deg)); opacity:0;}
}

/* ---------- difficulty, in the control bar ---------- */
.cr-diff-block{display:flex; flex-direction:column; gap:8px;}
.cr-diff-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-2);
}
.cr-risk-note{letter-spacing:0.06em; text-transform:none; font-weight:600; text-align:right;}
.cr-risk-note b{color:#F2A93B; font-size:0.76rem; margin-left:5px; letter-spacing:0;}

/* ---------- action buttons ---------- */
.cr-actions{display:grid; grid-template-columns:1.25fr 1fr; gap:10px;}
.cr-btn{
  position:relative;
  padding:14px 10px;
  border:2px solid var(--cr-ink);
  border-radius:13px;
  font-family:inherit;
  font-size:0.86rem; font-weight:900; letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 5px 0 var(--cr-ink);
  transition:transform .1s var(--ease), box-shadow .1s var(--ease), filter .2s var(--ease);
}
.cr-btn::before{
  content:""; position:absolute; left:8px; right:8px; top:4px; height:30%;
  border-radius:9px;
  background:linear-gradient(180deg, rgba(255,255,255,.30), transparent);
  pointer-events:none;
}
.cr-btn:not(:disabled):active{transform:translateY(5px); box-shadow:0 0 0 var(--cr-ink);}
.cr-btn:disabled{filter:grayscale(.7) brightness(.62); cursor:not-allowed;}

/* Colours follow the reference: GO is the green go-ahead, CASH OUT is the gold
   one — the money button is the one that reads as valuable. */
.cr-go-btn{background:linear-gradient(180deg, #6BD69B 0%, #35B57D 48%, #1F7E55 100%); color:#0B2418;}
.cr-go-btn.armed{background:linear-gradient(180deg, #7FE0A9 0%, #2FA871 48%, #17693F 100%);}
.cr-cash-btn{background:linear-gradient(180deg, #FFD75E 0%, #F2C230 48%, #D89B12 100%); color:var(--bg-input);}

@media (max-width:520px){
  .cr-stage{--cr-lane-w:70px; --cr-verge-h:30px; height:396px;}
  .cr-diffs{grid-template-columns:repeat(2,1fr);}
  .cr-chicken{width:66px; height:66px; margin-left:-33px; margin-top:-48px;}
  .cr-disc{width:48px; height:48px; margin-left:-24px;}
  .cr-disc b{font-size:0.6rem;}
  .cr-coin{width:28px; height:28px; margin-left:-14px;}
  .cr-prop{width:42px; height:42px; margin-left:-21px;}
  .cr-kerb{width:44px;} .cr-finish{width:62px;}
  .cr-btn{font-size:0.76rem; padding:13px 8px;}
}

@media (prefers-reduced-motion: reduce){
  .cr-track, .cr-chicken{transition:none !important;}
  .cr-tag{transition:none !important;}
  .cr-chicken.stepping, .cr-safe{animation:none !important;}
  .cr-chicken[data-pose="walk"] .cr-strip,
  .cr-chicken[data-pose="ko"] .cr-hop,
  .cr-chicken.cheer, .cr-coin, .cr-coin.taken,
  .cr-dust, .cr-feather, .cr-car, .cr-amb-car,
  .cr-stage.shake{animation:none !important;}
  .cr-amb-car{display:none;}
  .cr-coin.taken{opacity:0;}
  .cr-feather{opacity:0;}
}

/* =========================================================
   PLINKO ROYALE
   The board is a canvas (pegs + ball); only the buckets are
   DOM, so the multiplier is live text and the impact bounce is
   a CSS animation rather than a canvas redraw.

   The capsules are CSS, not the supplied casilla SVGs: those
   bake the number into the artwork and their 512x300 box with
   rx=34 corners distorts badly when squeezed to the ~24px a
   16-row board leaves per bucket. Gradients, border colours and
   the 15% white top band below are copied verbatim from
   casilla-{rojo,naranja,amarillo}.svg, so the design is the
   same one — only the delivery mechanism differs.
   ========================================================= */
.pk-modal{max-width:560px;}
.pk-icon{background:rgba(143,184,222,0.14) !important; border-color:rgba(143,184,222,0.45) !important; color:#8FB8DE !important;}

/* ---------- board ---------- */
.pk-stage{
  position:relative;
  padding:10px 0 0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border-soft);
  /* Vignette + soft top glow so the pegs and ball read against depth
     instead of a flat fill. */
  /* The navy the reference uses, not a neutral black: it makes the neon ball
     and the peg flashes read as light rather than as pale grey. */
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(52,120,170,0.16), transparent 62%),
    radial-gradient(140% 100% at 50% 50%, transparent 46%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, #16303F 0%, #0F212E 55%, #0B1A24 100%);
}
.pk-stage canvas{display:block; margin:0 auto;}

/* ---------- buckets ---------- */
.pk-buckets{
  --pk-bucket-h:28px;
  display:flex; gap:2px;
  margin:2px auto 10px;
}
.pk-bucket{
  position:relative;
  flex:1 1 0; min-width:0;
  height:var(--pk-bucket-h);
  display:flex; align-items:center; justify-content:center;
  border-radius:calc(var(--pk-bucket-h) * 0.34);
  border:2px solid var(--pk-edge);
  background:linear-gradient(180deg, var(--pk-top) 0%, var(--pk-bot) 100%);
  box-shadow:0 2px 0 var(--pk-edge);
  overflow:hidden;
}
/* The 15% white band across the top third, as in the source files */
.pk-bucket::before{
  content:""; position:absolute; left:0; right:0; top:0; height:39%;
  background:rgba(255,255,255,0.15);
  border-radius:calc(var(--pk-bucket-h) * 0.34) calc(var(--pk-bucket-h) * 0.34) 0 0;
  pointer-events:none;
}
/* Font size is set per bucket by the module, from the label it actually
   printed and the width the row count leaves. The outline is in em so it
   thins with the glyphs instead of swallowing them at 6px. */
.pk-bucket b{
  position:relative;
  font-size:var(--pk-fs, 10px); font-weight:900; letter-spacing:-0.02em;
  color:var(--pk-ink, #2A2118);
  -webkit-text-stroke:0.055em rgba(255,255,255,.5);
  paint-order:stroke fill;
  white-space:nowrap;
}
/* Dense boards (15-16 rows on a phone) trade rim weight for legible digits. */
.pk-buckets.dense .pk-bucket{border-width:1px; box-shadow:0 1.5px 0 var(--pk-edge);}
.pk-buckets.dense .pk-bucket b{-webkit-text-stroke-width:0.06em;}

/* Colours now arrive per bucket from the module, as an intensity ramp inside
   the risk level's own hue. These are the fallback so a bucket is never
   unstyled if the inline custom properties are ever missing. */
.pk-bucket{--pk-top:#FFD866; --pk-bot:#E4B21E; --pk-edge:#7A5D0E; --pk-ink:#2A2118;}

.pk-bucket.hit{animation:pkHit .5s cubic-bezier(.3,1.5,.5,1);}
@keyframes pkHit{
  0%  {transform:translateY(0)   scale(1);    filter:brightness(1);}
  22% {transform:translateY(7px) scale(1.14); filter:brightness(2.1);}
  55% {transform:translateY(-2px) scale(1.04); filter:brightness(1.3);}
  100%{transform:translateY(0)   scale(1);    filter:brightness(1);}
}

.pk-spark{
  position:absolute; left:50%; top:50%;
  width:5px; height:5px; margin:-2px 0 0 -2px;
  border-radius:50%;
  background:radial-gradient(circle, #FFF7D6 0%, #FFD866 55%, rgba(255,216,102,0) 72%);
  pointer-events:none;
  animation:pkSpark .8s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes pkSpark{
  from{transform:translate(0,0) scale(1);   opacity:1;}
  to  {transform:translate(var(--dx,0), var(--dy,-30px)) scale(.3); opacity:0;}
}

/* ---------- manual / automatic ---------- */
.pk-modes{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:4px;
  background:var(--bg-elevated);
  border:2px solid var(--bg-input);
  border-radius:12px;
}
.pk-mode{
  padding:9px 4px;
  border:none; border-radius:8px;
  background:transparent;
  font-size:0.7rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-2);
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.pk-mode:hover{color:var(--text-0);}
.pk-mode.active{background:#2E2A22; color:var(--gold-light);}

.pk-auto-box{display:flex; flex-direction:column; gap:7px;}
.pk-auto-row{display:flex; align-items:center; gap:10px;}
.pk-auto-row input{
  flex:1; min-width:0;
  padding:11px 12px;
  background:var(--bg-2);
  border:2px solid var(--bg-input); border-radius:10px;
  color:var(--text-0); font-size:0.9rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pk-auto-left{
  font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-2); white-space:nowrap;
}
.pk-auto-left b{color:var(--gold-light); font-size:0.8rem; margin-left:4px; letter-spacing:0;}

/* Stopping an auto run is the urgent action, so it stops looking like the
   inviting blue drop button and starts looking like a brake. */
.pk-drop-btn.pk-stop{
  background:linear-gradient(180deg, #F0616B 0%, #E4262E 48%, #8E1519 100%);
  color:#FFECEC;
}

/* ---------- risk + rows ---------- */
.pk-config{display:grid; grid-template-columns:1.15fr 1fr; gap:14px; align-items:start;}
.pk-config-block{display:flex; flex-direction:column; gap:7px;}
.pk-config-label{
  font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-2);
}
.pk-config-label b{color:var(--gold-light); font-size:0.72rem; letter-spacing:0;}

.pk-risks{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.pk-risks.locked{opacity:.45; pointer-events:none;}
.pk-risk{
  padding:8px 4px;
  background:var(--bg-elevated);
  border:2px solid var(--bg-input);
  border-radius:10px;
  box-shadow:0 3px 0 var(--bg-input);
  font-size:0.68rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-1);
  cursor:pointer;
  transition:transform .12s var(--ease), background .2s var(--ease), box-shadow .12s var(--ease);
}
.pk-risk:hover{transform:translateY(-1px); background:#221E17;}
.pk-risk:active{transform:translateY(3px); box-shadow:0 0 0 var(--bg-input);}
.pk-risk.active{
  background:linear-gradient(180deg, #FFD75E 0%, #F2C230 45%, #D89B12 100%);
  box-shadow:0 3px 0 #8A5A0E;
  color:var(--bg-input);
}

.pk-rows{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; margin-top:9px;
  border-radius:6px;
  border:2px solid var(--bg-input);
  background:linear-gradient(90deg, #3A342A, var(--bg-elevated));
  cursor:pointer;
}
.pk-rows::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--bg-input);
  background:radial-gradient(circle at 38% 32%, #FFFFFF 0%, #FFE9A8 45%, #D89B12 100%);
  box-shadow:0 2px 0 #8A5A0E;
  cursor:pointer;
}
.pk-rows::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--bg-input);
  background:radial-gradient(circle at 38% 32%, #FFFFFF 0%, #FFE9A8 45%, #D89B12 100%);
  cursor:pointer;
}
.pk-rows:disabled{opacity:.45; cursor:not-allowed;}

.pk-drop-btn{
  width:100%;
  background:linear-gradient(180deg, #DCEFFF 0%, #8FB8DE 48%, #5A85AD 100%);
  color:#12222F;
}

@media (max-width:520px){
  .pk-config{grid-template-columns:1fr; gap:12px;}
  .pk-buckets{gap:1.5px;}
  .pk-drop-btn{font-size:0.78rem;}
}

@media (prefers-reduced-motion: reduce){
  .pk-bucket.hit, .pk-spark{animation:none !important;}
  .pk-spark{opacity:0;}
}

/* ---------- MINES: automatic mode ---------- */
.mn-board-stack{position:relative;}

/* Pattern marks: violet, the brand's second accent, so the marked squares
   never read as a revealed result. Kept on the tile after it opens, which is
   how the player can still see which squares the pattern owns. */
.mines-tile.mn-pattern{
  background:linear-gradient(180deg, var(--purple), var(--purple-2)) !important;
  box-shadow:0 0 0 2px rgba(168,85,247,.55), 0 0 14px rgba(168,85,247,.45);
}
.mines-tile.mn-pattern.revealed{box-shadow:0 0 0 2px rgba(168,85,247,.75);}
.mines-tile.mn-pattern.revealed.safe,
.mines-tile.mn-pattern.revealed.mine{background:none !important;}

.mn-pattern-hint{
  margin-top:10px; text-align:center;
  font-size:0.68rem; letter-spacing:0.06em; color:var(--text-2); min-height:1em;
}

.mn-inf{
  padding:10px 14px; border-radius:10px;
  border:2px solid var(--bg-input); background:var(--bg-elevated);
  color:var(--text-1); font-size:1rem; font-weight:800; line-height:1; cursor:pointer;
}
.mn-inf.on{background:linear-gradient(180deg,var(--purple),var(--purple-2)); border-color:#3A1470; color:#fff;}

.dice-roll-btn.mn-stop{background:linear-gradient(180deg,#F0616B,#8E1519) !important; color:#fff;}

/* Per-round result, over the board */
.mn-popup{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.86);
  padding:16px 26px; border-radius:14px;
  background:rgba(9,12,10,.94);
  border:2px solid var(--emerald-light);
  box-shadow:0 0 34px rgba(79,178,135,.35);
  text-align:center; pointer-events:none; opacity:0; z-index:12;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.mn-popup.show{opacity:1; transform:translate(-50%,-50%) scale(1);}
.mn-popup-mult{font-size:1.5rem; font-weight:900; color:var(--emerald-light);}
.mn-popup-amt{margin-top:4px; font-size:0.82rem; font-weight:700; color:var(--text-0);}

/* Toasts stack instead of replacing each other */
.mn-toasts{
  position:absolute; left:10px; top:10px; z-index:14;
  display:flex; flex-direction:column; gap:7px; pointer-events:none;
}
.mn-toast{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:9px;
  background:var(--border-soft); border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
  font-size:0.7rem; font-weight:600; color:var(--text-0);
  pointer-events:auto;
  animation:mnToastIn .22s var(--ease);
}
@keyframes mnToastIn{from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:none;}}
.mn-toast button{
  background:none; border:none; color:var(--text-2);
  font-size:1rem; line-height:1; cursor:pointer; padding:0 2px;
}
.mn-toast button:hover{color:var(--text-0);}

@media (prefers-reduced-motion: reduce){
  .mn-toast{animation:none;}
  .mn-popup{transition:none;}
}

/* =========================================================
   PUMP ROYALE
   The balloon and the pump base are CSS, not sprites: the
   balloon has to recolour per difficulty and grow smoothly on
   every press, and a fixed image can do neither.
   ========================================================= */
.pm-modal{max-width:560px;}
.pm-icon{background:rgba(47,111,224,0.14) !important; border-color:rgba(47,111,224,0.45) !important; color:#7FB0FF !important;}

.pm-stage{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  min-height:400px;
  padding:18px 14px 14px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background:
    radial-gradient(520px 300px at 50% 0%, rgba(52,120,170,.14), transparent 68%),
    linear-gradient(180deg, #16303F 0%, #0F212E 60%, #0B1A24 100%);
  overflow:hidden;
}
.pm-canvas{
  position:relative; flex:1 1 auto;
  width:100%; min-height:220px;
  display:flex; align-items:center; justify-content:center;
}

/* ---- balloon ---- */
.pm-balloon{
  position:relative;
  /* flex:none matters: as a flex item its inline width was being resolved
     against the container instead of honoured, so every pump set a new width
     that never took effect and the balloon sat frozen at one size. */
  flex:none;
  display:none; align-items:center; justify-content:center;
  /* Teardrop, not a circle: wide across the top, tapering to the knot. */
  border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
  background:radial-gradient(circle at 35% 30%, var(--pm-light,#7FB0FF), var(--pm-color,#2F6FE0));
  box-shadow:inset -10px -14px 30px rgba(0,0,0,.28), 0 10px 30px -12px rgba(0,0,0,.7);
  transition:width .28s cubic-bezier(.34,1.4,.64,1), height .28s cubic-bezier(.34,1.4,.64,1),
             background .25s var(--ease);
  will-change:width, height;
}
/* The gloss that makes it read as a real balloon rather than a circle. */
.pm-balloon::after{
  content:""; position:absolute; top:13%; right:20%;
  width:20%; height:13%;
  background:rgba(255,255,255,.6);
  border-radius:50%; filter:blur(1px);
  transform:rotate(-18deg);
}
/* The neck resting on the valve. */
/* The knot: a small triangle of the balloon's own colour under the body,
   which is what turns a circle into a balloon. */
.pm-balloon::before{
  content:""; position:absolute; bottom:-9px; left:50%; margin-left:-8px;
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:14px solid var(--pm-color,#2F6FE0);
  filter:brightness(.88);
}
.pm-balloon-mult{
  position:relative; z-index:2;
  font-weight:900; color:#fff; letter-spacing:-.01em;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}
/* Idle: it drifts, because a balloon on a nozzle is never perfectly still.
   Any other animation on this element overrides it and it resumes after. */
.pm-balloon{animation:pmFloat 3.4s ease-in-out infinite;}
@keyframes pmFloat{
  0%,100%{transform:translateY(0) rotate(-1.2deg);}
  50%    {transform:translateY(-7px) rotate(1.2deg);}
}
/* Each press: squash out, stretch back, settle. */
.pm-balloon.pumping{animation:pmPump .42s cubic-bezier(.3,1.5,.5,1);}
@keyframes pmPump{
  0%  {transform:scale(1,1);}
  22% {transform:scale(1.11,.90) translateY(2px);}
  52% {transform:scale(.94,1.08) translateY(-5px);}
  78% {transform:scale(1.03,.98);}
  100%{transform:scale(1,1);}
}
/* The pop: it swells hard, then it is gone. */
.pm-balloon.popping{animation:pmPop .18s ease-out forwards;}
@keyframes pmPop{
  0%  {transform:scale(1); filter:brightness(1);}
  60% {transform:scale(1.28); filter:brightness(2.2);}
  100%{transform:scale(1.45); opacity:0;}
}
.pm-balloon.cashed{animation:pmCashed .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes pmCashed{0%{transform:scale(1);} 45%{transform:scale(1.12);} 100%{transform:scale(0);}}

/* ---- burst ---- */
.pm-burst{
  position:absolute; inset:0;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.pm-burst.show{display:flex; animation:pmBurstIn .26s var(--ease);}
@keyframes pmBurstIn{from{opacity:0; transform:scale(.9);} to{opacity:1; transform:none;}}
.pm-burst-mult{font-size:2.1rem; font-weight:900; color:#FF3B57; text-shadow:0 0 26px rgba(255,59,87,.5);}
.pm-burst-label{margin-top:4px; font-size:1rem; font-weight:700; color:#C7D3E0;}

/* ---- pump base ---- */
.pm-base-wrap{width:100%; display:flex; flex-direction:column; align-items:center;}
/* Hidden by request: the rhythm dots read as debris on the base rather than
   as feedback. The row is kept in the markup and still painted, so bringing
   them back is one line — nothing else depends on them being on screen. */
.pm-dots{display:none;}
.pm-dot{
  width:7px; height:7px; border-radius:50%;
  background:#455B6D;
  transition:background .15s var(--ease), box-shadow .15s var(--ease);
}
.pm-dot.lit{box-shadow:0 0 9px 2px currentColor;}
.pm-base{
  position:relative;
  width:min(260px, 70%); height:54px;
  background:linear-gradient(180deg, #33495A, #263746);
  border-radius:40px 40px 10px 10px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06);
}
.pm-base::after{
  content:""; position:absolute; top:-13px; left:50%; margin-left:-13px;
  width:26px; height:21px; border-radius:6px 6px 0 0;
  background:#33495A;
}

/* ---- checkpoints ---- */
.pm-checkpoints{
  display:flex; gap:6px; margin-top:14px;
  width:100%; justify-content:center;
}
.pm-cp{
  flex:1 1 0; max-width:80px; min-width:0;
  padding:9px 2px; border-radius:9px;
  background:#213743;
  font-size:.7rem; font-weight:800; text-align:center;
  color:#8FA0B3; white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.4);
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
/* Cleared checkpoints are green whatever the difficulty: it means secured. */
.pm-cp.passed{
  background:linear-gradient(180deg,#5BD97F,#2E9E52) !important;
  color:#08240F; transform:translateY(-2px);
  box-shadow:0 2px 0 #17552C, 0 0 16px -4px rgba(91,217,127,.8);
}
.pm-cp.burst{background:#FF3B57; color:#fff; box-shadow:0 2px 0 #7A1216, 0 0 18px rgba(255,59,87,.45);}

/* ---- difficulty ---- */
.pm-diff-block{display:flex; flex-direction:column; gap:8px;}
.pm-diffs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.pm-diffs.locked{opacity:.45; pointer-events:none;}
.pm-diff{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 4px; cursor:pointer;
  background:#141A22;
  border:2px solid #223140;
  border-radius:11px;
  box-shadow:0 3px 0 #0C141B;
  transition:transform .12s var(--ease), border-color .2s var(--ease);
}
.pm-diff:hover{transform:translateY(-1px);}
.pm-diff b{font-size:.76rem; font-weight:800; color:var(--text-0);}
.pm-diff span{font-size:.56rem; color:var(--text-2);}
.pm-diff.active{border-color:var(--pm-d); box-shadow:0 3px 0 #0C141B, 0 0 16px -4px var(--pm-d);}
.pm-diff.active b{color:var(--pm-d);}

/* ---- actions ---- */
.pm-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}
.pm-bet-btn{width:100%; background:linear-gradient(180deg,#4E9BFF,#1475E1 48%,#0F5FC0); color:#fff;}
.pm-bet-btn.pm-stop{background:linear-gradient(180deg,#F0616B,#8E1519); color:#fff;}
.pm-pump-btn{background:linear-gradient(180deg,#4E9BFF,#1475E1 48%,#0F5FC0); color:#fff;}
.pm-cash-btn{background:linear-gradient(180deg,#FFD75E,#F2C230 48%,#D89B12); color:var(--bg-input);}

@media (max-width:520px){
  .pm-diffs{grid-template-columns:repeat(3,1fr);}
  .pm-cp{font-size:.62rem; padding:8px 1px;}
  .pm-stage{min-height:340px;}
}
@media (prefers-reduced-motion: reduce){
  .pm-balloon{transition:none; animation:none !important;}
  .pm-balloon.cashed, .pm-balloon.pumping, .pm-balloon.popping,
  .pm-burst.show{animation:none !important;}
}

/* =========================================================
   ROULETTE — Ruleta Royale (europea, un cero)
   Palette sampled from the reference. The wheel is one SVG that
   is built once; only the rotor's transform changes per frame,
   so nothing here may animate a layout property.
   ========================================================= */
.rl-modal{
  --rl-panel:#213743; --rl-deep:#0f212e; --rl-border:#2f4553;
  --rl-slate:#2f4553; --rl-red:#e90846; --rl-green:#46ad42;
  --rl-blue:#1b76d9;  --rl-win:#00e701; --rl-gold:#f7c608;
  --rl-muted:#b1bad3; --rl-disc:#071c23; --rl-rim:#0f212e;
  max-width:1320px;
}
.rl-icon{background:rgba(233,8,70,.14)!important; border-color:rgba(233,8,70,.45)!important; color:#ff5c86!important;}

/* =========================================================
   EL FIELTRO

   El cliente mando la mesa entera como foto. Estirarla no vale:
   el marco dorado y el escudo se deformarian con cada ancho de
   pantalla. Asi que del centro de esa foto se recorto un parche,
   se le quito la iluminacion de fondo (sin eso, al repetir se
   ven bandas donde antes habia degradado) y se espejo en los dos
   ejes: el empalme cae sobre filas y columnas identicas, asi que
   repite sin costura a cualquier tamano. Pesa 4,9 KB.
   ========================================================= */
.rl-body{
  /* La viñeta no es a ojo: en la foto del cliente el borde es #270D36 y el
     centro #3D1853, o sea que el borde vale un 62% del centro. Eso es un
     negro al 38%, y eso es lo que hay aqui. El mosaico ya viene con su media
     igualada a ese #3D1853 exacto. */
  background:
    radial-gradient(120% 115% at 50% 8%, rgba(10,7,16,0) 0%, rgba(10,7,16,0) 55%,
                    rgba(10,7,16,.34) 100%),
    url("assets/roulette/felt.webp") repeat center / 232px auto,
    #3D1853;
}
@media (min-width:900px){
  .gs-modal .rl-body{grid-template-columns:374px minmax(0,1fr);}
}
.rl-panel{
  display:flex; flex-direction:column; gap:14px;
  background:var(--rl-panel); border-radius:8px; padding:16px;
  align-self:start;
}
.rl-label{font-size:13px; color:var(--rl-muted);}
.rl-chip-head, .rl-total-row{display:flex; align-items:center; justify-content:space-between;}
.rl-chip-head b, .rl-total-row b{color:#fff; font-weight:700;}
.rl-total-row b.flash{animation:rlFlash .5s ease 2;}
@keyframes rlFlash{0%,100%{color:#fff;}50%{color:var(--rl-red);}}

.rl-chip-rail{display:flex; align-items:center; gap:8px;}
.rl-arrow{
  flex:none; width:26px; height:38px; border-radius:6px;
  background:var(--rl-deep); border:1px solid var(--rl-border);
  color:var(--rl-muted); font-size:18px; line-height:1; cursor:pointer;
}
.rl-arrow:hover{color:#fff;}
.rl-chips{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:3px 1px; flex:1; min-width:0;
}
.rl-chips::-webkit-scrollbar{display:none;}
.rl-chip{
  flex:none; width:46px; height:46px; border-radius:50%;
  border:3px dashed rgba(255,255,255,.85);
  color:#fff; font-weight:800; font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.rl-chip.t0{background:#f0a134;} .rl-chip.t1{background:#e8622a;}
.rl-chip.t2{background:#e90846;} .rl-chip.t3{background:#a80c33;}
.rl-chip.on{box-shadow:0 0 0 3px #fff; transform:scale(1.06);}

.rl-bet-btn{
  width:100%; height:48px; border:none; border-radius:6px;
  background:var(--rl-blue); color:#fff; font-weight:700; font-size:16px;
  cursor:pointer; transition:background .15s var(--ease);
}
.rl-bet-btn:hover:not(:disabled){background:#1e84f0;}
.rl-bet-btn:active:not(:disabled){background:#1668bd;}
.rl-bet-btn:disabled{opacity:.5; cursor:not-allowed;}

.rl-table-foot{display:flex; justify-content:space-between;}
.rl-link{
  background:none; border:none; color:var(--rl-muted);
  font-size:13px; cursor:pointer; padding:4px 2px;
}
.rl-link:hover:not(:disabled){color:#fff;}
.rl-link:disabled{opacity:.4; cursor:not-allowed;}

/* ---------- arena ---------- */
/* La mesa deja de ser una caja opaca: se translucida para que el fieltro se
   vea alrededor de la rueda y del tapete, con un filo dorado como el de la
   foto. Las celdas del tapete siguen siendo opacas, asi que no se pierde
   ni un punto de legibilidad. */
.rl-arena{
  position:relative;
  /* TRANSPARENTE, y el porque importa: el velo de la mesa y la viñeta del
     fondo se MULTIPLICAN. Con un velo del 16% y la viñeta al 22% en esa
     altura, el morado #3D1853 llegaba al ojo como #282035: mas oscuro que la
     foto del cliente. En su mesa la rueda y el tapete estan puestos
     directamente sobre el pano, y como sus celdas son opacas no se pierde ni
     un punto de legibilidad. */
  background:transparent;
  border:1px solid rgba(245,197,78,.30);
  border-radius:12px;
  padding:18px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), 0 18px 40px -24px rgba(0,0,0,.85);
  contain:layout paint;
}
/* Filo dorado superior, como el de la mesa de la foto. */
.rl-arena::before{
  content:"";
  position:absolute; left:16px; right:16px; top:0; height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, transparent, var(--rl-gold) 18%,
             #fff3c4 50%, var(--rl-gold) 82%, transparent);
  opacity:.85;
}
/* =========================================================
   EL MEDALLON

   Se llama .rl-medal y NO .rl-crest: ese nombre ya lo usa el
   logo de la pantalla de carga (royale.css), y reutilizarlo le
   metia 180px y una animacion de entrada.

   El alto que ocupa esta atado al tamano del propio medallon, y
   los dos escalan con la altura de la ventana. Mas abajo en este
   archivo hay tres reglas que aprietan el relleno de .rl-arena
   para que la mesa quepa en el mueble; ganarles con un valor
   fijo devolveria ese problema, asi que en pantallas bajas el
   medallon se encoge en vez de empujar.
   ========================================================= */
.rl-medal{
  position:absolute; left:50%; top:4px;
  width:var(--rl-medal, clamp(30px, 4.4vh, 46px));
  aspect-ratio:1;
  transform:translateX(-50%);
  background:url("assets/roulette/crest.webp") center/contain no-repeat;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.7));
  pointer-events:none;
}
/* Selector compuesto a proposito: asi gana a las reglas compactas de
   .rl-arena sin tener que repetirlo en cada media query. */
.rl-modal .rl-arena{ padding-top:calc(var(--rl-medal, clamp(30px, 4.4vh, 46px)) + 10px); }
.rl-wheel-row{display:flex; align-items:flex-start; justify-content:center; gap:20px;}
.rl-last{
  flex:none; width:76px; height:76px; border-radius:8px;
  background:var(--rl-slate); color:#fff; font-weight:800; font-size:32px;
  display:flex; align-items:center; justify-content:center;
}
.rl-last.rl-red{background:var(--rl-red);} .rl-last.rl-green{background:var(--rl-green);}
.rl-history{display:flex; flex-direction:column; gap:8px; flex:none; width:46px;}
.rl-hist{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:15px; background:var(--rl-slate);
  animation:rlHistIn .28s var(--ease);
}
.rl-hist.rl-red{background:var(--rl-red);} .rl-hist.rl-green{background:var(--rl-green);}
@keyframes rlHistIn{from{opacity:0; transform:translateY(-12px);}to{opacity:1; transform:none;}}

.rl-wheel-box{position:relative; width:332px; height:332px; flex:none;}
.rl-wheel, .rl-wheel-svg{width:100%; height:100%; display:block;}
.rl-rotor{will-change:transform;}
.rl-rim{fill:var(--rl-rim);}
.rl-hub{fill:var(--rl-disc);}
.rl-seg{stroke:#0b1a22; stroke-width:1;}
.rl-seg.rl-red{fill:var(--rl-red);} .rl-seg.rl-black{fill:var(--rl-slate);}
.rl-seg.rl-green{fill:var(--rl-green);}
.rl-num{fill:#fff; font-size:13px; font-weight:700; text-anchor:middle; dominant-baseline:middle;}
.rl-arm{stroke:var(--rl-gold); stroke-width:6; stroke-linecap:round;}
.rl-arm-cap{fill:var(--rl-gold);}
.rl-hub-cap{fill:var(--rl-gold);}
.rl-ball{
  position:absolute; left:50%; top:50%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
  will-change:transform; pointer-events:none;
}

/* ---------- result overlay ---------- */
/* Was a fixed 206px square. On the 210px wheel the layout bug produced, that
   covered the disc completely -- the "result" WAS the wheel. Sized as a share
   of the wheel instead, so it stays a medallion in the middle at every size. */
.rl-result{
  position:absolute; left:19%; top:19%;
  width:62%; height:62%; margin:0;
  aspect-ratio:1;
  border-radius:24px; background:#16242e;
  border:5px solid var(--rl-win);
  box-shadow:0 0 34px rgba(0,231,1,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; transform:scale(.85); pointer-events:none; z-index:5;
  transition:opacity .22s cubic-bezier(.2,.9,.3,1.3), transform .22s cubic-bezier(.2,.9,.3,1.3);
}
.rl-result.show{opacity:1; transform:scale(1);}
/* A loss gets the same card with the celebration removed — no glow, no green. */
.rl-result.lose{border-color:var(--rl-border); box-shadow:none;}
.rl-res-num{
  min-width:44px; padding:5px 12px; border-radius:8px;
  background:var(--rl-slate); color:#fff; font-weight:800; font-size:20px;
}
.rl-res-num.rl-red{background:var(--rl-red);} .rl-res-num.rl-green{background:var(--rl-green);}
.rl-res-mult{font-size:34px; font-weight:800; color:var(--rl-win);}
.rl-result.lose .rl-res-mult, .rl-result.lose .rl-res-amt{color:var(--rl-muted);}
.rl-res-rule{width:64%; height:1px; background:var(--rl-border);}
.rl-res-amt{font-size:15px; font-weight:700; color:var(--rl-win);}

.rl-live{font-size:12px; color:var(--rl-muted); text-align:center; min-height:1em; margin:0;}

/* ---------- betting table ---------- */
.rl-table-wrap{overflow-x:auto; overflow-y:visible; scrollbar-width:thin;}
.rl-table{min-width:620px; display:flex; flex-direction:column; gap:4px;}
.rl-table.locked{pointer-events:none; opacity:.72;}
.rl-table.locked .rl-cell{cursor:not-allowed;}

.rl-grid{display:grid; grid-template-columns:46px 1fr 52px; gap:4px;}
.rl-main{
  position:relative;
  display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(3,44px);
  gap:4px;
}
.rl-cols{display:grid; grid-template-rows:repeat(3,1fr); gap:4px;}

.rl-cell{
  position:relative;
  border:none; border-radius:6px; cursor:pointer;
  color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:filter .12s var(--ease), box-shadow .12s var(--ease);
}
.rl-cell:hover{filter:brightness(1.18);}
.rl-cell:focus-visible{outline:2px solid #fff; outline-offset:1px;}
.rl-cell.rl-red{background:var(--rl-red);} .rl-cell.rl-black{background:var(--rl-slate);}
.rl-zero{background:var(--rl-green); grid-row:1/4;}
.rl-outside{background:transparent; border:1px solid var(--rl-border); color:#fff; font-size:13px;}
.rl-outside:hover{background:rgba(255,255,255,.05);}
.rl-swatch.rl-red{background:var(--rl-red); border-color:var(--rl-red);}
.rl-swatch.rl-black{background:var(--rl-slate); border-color:var(--rl-slate);}

/* Hover on any bet outlines every number it covers, so a border bet is
   understood before the chip is dropped rather than after. */
.rl-cell.hl{box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
.rl-cell.winner{box-shadow:inset 0 0 0 3px var(--rl-win), 0 0 14px rgba(0,231,1,.45);}

.rl-dozens{display:grid; grid-template-columns:46px repeat(3,1fr) 52px; gap:4px;}
.rl-dozens .rl-cell{height:38px;}
.rl-dozens .rl-cell:first-child{grid-column:2;}
.rl-outs{display:grid; grid-template-columns:46px repeat(6,1fr) 52px; gap:4px;}
.rl-outs .rl-cell{height:38px;}
.rl-outs .rl-cell:first-child{grid-column:2;}

/* Seams: real elements on the borders, so a split or a corner is a click
   target with its own label and focus rather than a coordinate guess. */
.rl-seam{
  position:absolute; background:transparent; border:none; border-radius:3px;
  padding:0; z-index:3;
}
.rl-seam:hover{background:rgba(255,255,255,.18);}
.rl-seam:focus-visible{outline:2px solid #fff;}
.rl-seam-v{
  width:10px; height:44px;
  left:calc((100% - 44px) / 12 * var(--c) + 44px * 0 - 5px);
  top:calc((44px + 4px) * (var(--r) - 1));
}
.rl-seam-h{
  height:10px; left:0; width:100%;
  top:calc((44px + 4px) * var(--r) - 5px);
}
.rl-seam-x{width:12px; height:12px;}
.rl-seam-top{height:10px; top:-7px;}
.rl-seam-line{width:12px; height:10px; top:-7px;}

/* Placed chips */
.rl-chip-placed{
  position:absolute; left:50%; top:50%;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; background:#f0a134;
  border:2px dashed rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:11px; pointer-events:none; z-index:4;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  animation:rlChipIn .15s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes rlChipIn{from{transform:scale(.4) translateY(14px); opacity:0;}to{transform:none; opacity:1;}}
.rl-chip-placed.pop{animation:rlChipPop .22s cubic-bezier(.3,1.6,.5,1);}
@keyframes rlChipPop{0%,100%{transform:scale(1);}45%{transform:scale(1.22);}}

@media (max-width:900px){
  .rl-wheel-box{width:240px; height:240px;}
  .rl-wheel-row{gap:12px;}
  .rl-last{width:56px; height:56px; font-size:22px;}
  .rl-history{width:36px;} .rl-hist{width:36px; height:36px; font-size:13px;}
  .rl-result{width:62%; height:62%; margin:0; left:19%; top:19%;}
  .rl-res-mult{font-size:26px;}
}

/* Reduced motion: no orbit, the result simply appears. */
@media (prefers-reduced-motion: reduce){
  .rl-ball{display:none;}
  .rl-rotor{will-change:auto;}
  .rl-result{transition:opacity .2s ease;}
  .rl-hist, .rl-chip-placed{animation:none;}
}

/* ---------- roulette: performance + fit ----------
   The rotor is an HTML layer so the browser can composite the spin instead of
   re-rasterising 74 SVG nodes every frame. Both stacked layers are absolute so
   they share the same box without the rim being dragged into the rotation. */
.rl-wheel{position:relative;}
.rl-wheel .rl-static,
.rl-rotor-wrap{position:absolute; inset:0;}
.rl-rotor-wrap{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.rl-rotor-wrap svg{width:100%; height:100%; display:block;}

/* Fit. These three step-downs were all written to solve the same symptom --
   "the arena is taller than the cabinet" -- which was never really about the
   wheel: the bet panel was sitting ON TOP of the arena, eating ~285px, because
   it never claimed the cabinet's left column (see platform.css). With the panel
   beside the board instead of above it that height came back, so the wheel no
   longer has to pay for it. Floors raised accordingly. */
.rl-arena{padding:12px; gap:10px;}
.rl-wheel-box{width:clamp(300px, 38vh, 332px); height:clamp(300px, 38vh, 332px);}
.rl-wheel-row{gap:14px; align-items:center;}
.rl-last{width:60px; height:60px; font-size:24px;}
.rl-history{width:38px; gap:6px;}
.rl-hist{width:38px; height:38px; font-size:13px;}
.rl-result{
  width:62%; height:62%;
  margin:0; left:19%; top:19%;
}
.rl-res-num{font-size:17px; padding:4px 10px;}
.rl-res-mult{font-size:clamp(20px, 3.4vh, 30px);}
.rl-res-amt{font-size:13px;}

.rl-main{grid-template-rows:repeat(3, clamp(30px, 4.6vh, 42px));}
.rl-seam-v{height:clamp(30px, 4.6vh, 42px); top:calc((clamp(30px,4.6vh,42px) + 4px) * (var(--r) - 1));}
.rl-seam-h{top:calc((clamp(30px,4.6vh,42px) + 4px) * var(--r) - 5px);}
.rl-dozens .rl-cell, .rl-outs .rl-cell{height:clamp(28px, 4vh, 36px);}
.rl-cell{font-size:clamp(11px, 1.4vh, 14px);}
.rl-table{min-width:560px;}

.rl-panel{gap:10px; padding:14px;}
.rl-chip{width:42px; height:42px; font-size:11px;}
.rl-bet-btn{height:44px; font-size:15px;}

/* The stack was still ~100px taller than the cabinet, so the outside row fell
   below the fold. Every vertical measurement is now driven by viewport height
   with a hard floor, and the arena is a flex column that cannot grow past what
   it was given. One source of truth for the row height, reused by the seams. */
.rl-arena{
  --rl-row:clamp(26px, 3.8vh, 40px);
  padding:10px; gap:8px;
  min-height:0;
}
.rl-wheel-box{width:clamp(288px, 36vh, 332px); height:clamp(288px, 36vh, 332px);}
.rl-wheel-row{gap:12px;}
.rl-last{width:clamp(44px, 6vh, 60px); height:clamp(44px, 6vh, 60px); font-size:clamp(17px,2.6vh,24px);}
.rl-history{width:clamp(30px, 4.4vh, 38px); gap:5px;}
.rl-hist{
  width:clamp(30px, 4.4vh, 38px); height:clamp(30px, 4.4vh, 38px);
  font-size:clamp(11px, 1.5vh, 13px);
}
.rl-main{grid-template-rows:repeat(3, var(--rl-row));}
.rl-seam-v{height:var(--rl-row); top:calc((var(--rl-row) + 4px) * (var(--r) - 1));}
.rl-seam-h{top:calc((var(--rl-row) + 4px) * var(--r) - 5px);}
.rl-zero{grid-row:1/4;}
.rl-dozens .rl-cell, .rl-outs .rl-cell{height:clamp(23px, 3.1vh, 34px);}
.rl-live{font-size:11px;}
.rl-table{min-width:520px;}
.rl-grid{grid-template-columns:clamp(34px,4.6vh,46px) 1fr clamp(40px,5.2vh,52px);}
.rl-dozens{grid-template-columns:clamp(34px,4.6vh,46px) repeat(3,1fr) clamp(40px,5.2vh,52px);}
.rl-outs{grid-template-columns:clamp(34px,4.6vh,46px) repeat(6,1fr) clamp(40px,5.2vh,52px);}

/* Last 28px. The live region is for screen readers, not for the eye — the
   result card already says everything visually — so it comes out of the flow
   instead of costing a row of height. */
.rl-live{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  margin:0; padding:0; border:0;
}
.rl-arena{padding:8px; gap:6px;}
.rl-dozens .rl-cell, .rl-outs .rl-cell{height:clamp(21px, 2.9vh, 34px);}
.rl-wheel-row{gap:10px;}

/* Short screens (laptops at 720p) still step down, but gently: at 720px tall
   this lands the wheel near 216px instead of the 126px it used to collapse to,
   which was small enough that the result overlay covered half of it. */
@media (max-height:800px){
  .rl-wheel-box{width:clamp(272px, 40vh, 320px); height:clamp(272px, 40vh, 320px);}
  .rl-arena{--rl-row:clamp(24px, 3.4vh, 36px); gap:5px;}
  .rl-last{width:clamp(38px,5vh,52px); height:clamp(38px,5vh,52px); font-size:clamp(15px,2.2vh,20px);}
  .rl-hist{width:clamp(26px,3.6vh,34px); height:clamp(26px,3.6vh,34px); font-size:11px;}
  .rl-history{width:clamp(26px,3.6vh,34px); gap:4px;}
  .rl-dozens .rl-cell, .rl-outs .rl-cell{height:clamp(20px, 2.7vh, 30px);}
}

/* =========================================================
   PIEDRA PAPEL TIJERA — Royale streak game.
   Palette sampled from the reference capture and scoped to the
   modal, so the casino keeps its gold theme everywhere else.

   Nothing in a round animates a layout property: the hand flies
   on a transform, the card turns on rotateY, the strip slides on
   translateX. That is the whole performance story.
   ========================================================= */
.rp-modal{
  --rp-panel:#213743; --rp-bg:#10222e;   --rp-card:#1a2e39;
  --rp-slate:#334551; --rp-blue:#1b76d9; --rp-card-blue:#0b84f7;
  --rp-steel:#577283; --rp-steel-lt:#8da2b0;
  --rp-green:#13ff0d; --rp-win:#0c6b1e;  --rp-tie:#57451b;
  --rp-lose:#d4003b;  --rp-muted:#b1bad3;
  max-width:1320px;
}
.rp-icon{background:rgba(19,255,13,.12)!important; border-color:rgba(19,255,13,.4)!important; color:#7dff78!important;}

.rp-body{background:#1a2c38;}
@media (min-width:900px){
  .rp-body{display:grid; grid-template-columns:374px minmax(0,1fr); gap:16px; align-items:start;}
}

/* ---------------- left panel ---------------- */
.rp-panel{
  display:flex; flex-direction:column; gap:14px;
  background:var(--rp-panel); border-radius:8px; padding:16px;
  align-self:start;
}
.rp-panel .dice-field-label{color:var(--rp-muted); font-size:13px;}

.rp-main-btn{
  width:100%; height:48px; border:none; border-radius:6px;
  background:var(--rp-blue); color:#fff; font-weight:700; font-size:16px;
  cursor:pointer; transition:background .15s var(--ease);
}
.rp-main-btn:hover:not(:disabled){background:#1e84f0;}
.rp-main-btn:active:not(:disabled){background:#1668bd;}
.rp-main-btn:disabled{opacity:.5; cursor:not-allowed;}

.rp-random-btn{
  width:100%; height:44px; border:none; border-radius:6px;
  background:var(--rp-slate); color:#fff; font-weight:700; font-size:15px;
  cursor:pointer; transition:filter .15s var(--ease);
}
.rp-random-btn:hover:not(:disabled){filter:brightness(1.18);}
.rp-random-btn:disabled{opacity:.45; cursor:not-allowed;}

.rp-hand-btns{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.rp-hand-btn{
  display:flex; align-items:center; justify-content:center; gap:5px;
  height:44px; padding:0 6px; border:none; border-radius:6px;
  background:var(--rp-slate); color:#fff; font-weight:700; font-size:13px;
  cursor:pointer; transition:filter .15s var(--ease), transform .12s var(--ease);
}
.rp-hand-btn:hover:not(:disabled){filter:brightness(1.2); transform:translateY(-1px);}
.rp-hand-btn:disabled{opacity:.45; cursor:not-allowed;}
.rp-hand-btn .rp-hand{width:20px; height:20px; flex:none;}

.rp-profit{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 14px; border-radius:6px;
  background:var(--rp-bg); border:1px solid rgba(255,255,255,.06);
}
.rp-profit span{color:var(--rp-muted); font-size:13px;}
.rp-profit b{color:#fff; font-size:16px; font-weight:800;}

/* ---------------- arena ---------------- */
.rp-arena{
  position:relative;
  background:var(--rp-bg); border-radius:8px; padding:20px 18px 24px;
  display:flex; flex-direction:column; gap:14px;
  contain:layout paint;
}

/* ---------------- ladder ---------------- */
.rp-ladder{overflow:hidden; padding:4px 0;}
.rp-strip{
  display:flex; gap:16px; justify-content:center;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* 66 y no 92: la columna sigue el ancho de la carta. Dejarla en 92 con
   cartas de 66 abria un carril de aire a cada lado y la tira quedaba
   desperdigada. */
.rp-col{
  flex:none; width:66px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:opacity .3s var(--ease);
}
.rp-col-done{opacity:.62;}

/* 66x132 y no 92x118: es la proporcion EXACTA de las cartas que mando el
   cliente (1:2). Con la caja anterior habia que recortarles un tercio de
   alto, y ahi se iba o la mano o el escudo BFF de abajo.

   Caben: la columna mide 282px y dos cartas de 132 mas su separacion
   entran justas. Ademas la tira pasa de 738 a 455px de ancho, asi que
   sobra sitio a los lados. */
.rp-card{
  width:66px; height:132px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--rp-card); position:relative;
  transition:transform .2s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.rp-card .rp-hand{width:62px; height:62px;}
/* La ilustracion ocupa la carta entera, sin marco propio encima: el arte
   del cliente YA trae su marco dorado. */
.rp-cardart{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:10px;
}
.rp-card.rp-empty{background:rgba(255,255,255,.03);}

/* face-down card: a real 3D turn, so the reveal has a physical middle */
.rp-card.rp-facedown{background:none; perspective:760px;}
.rp-flip{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .18s ease-in-out;
}
.rp-card.rp-turning .rp-flip{transform:rotateY(180deg);}
.rp-face{
  position:absolute; inset:0; border-radius:10px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* El dorso es la carta del cliente. Antes se dibujaba a mano -- azul, borde
   blanco, cuatro remaches y un "BFF" torcido -- y esos cuatro remaches
   estaban colocados con box-shadow a 60 y 89px, medidas atadas a la caja
   vieja de 92x118: al cambiarla habrian quedado flotando fuera de la carta. */
.rp-face-front{
  background:#150A22 url("assets/rps/card-back.webp") center/cover no-repeat;
}
.rp-face-back{background:var(--rp-card); transform:rotateY(180deg);}

/* live slot: bigger, empty, obviously the next thing to happen */
.rp-card.rp-slot{
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 0 0 4px var(--rp-steel-lt), 0 10px 20px -12px rgba(0,0,0,.8);
  transform:scale(1.08);
}
.rp-col-active .rp-card-house{transform:scale(1.04);}

/* results */
.rp-card.rp-win {box-shadow:inset 0 0 0 3px var(--rp-win);}
.rp-card.rp-tie {box-shadow:inset 0 0 0 3px var(--rp-tie);}
.rp-card.rp-lose{box-shadow:inset 0 0 0 3px var(--rp-lose);}

/* multiplier pills */
.rp-pill{
  min-width:70px; height:26px; padding:0 12px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--rp-slate); color:var(--rp-muted);
  font-size:13px; font-weight:800; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.rp-pill-live{background:var(--rp-green); color:#04240a; box-shadow:0 0 14px rgba(19,255,13,.35);}
.rp-pill-lose{background:var(--rp-lose); color:#fff; box-shadow:none;}
.rp-pill-past{opacity:.55;}
.rp-pill-blank{background:rgba(255,255,255,.05); color:transparent;}
.rp-pill-pop{animation:rpPop .3s var(--ease);}
@keyframes rpPop{0%{transform:scale(1);}45%{transform:scale(1.09);}100%{transform:scale(1);}}

/* ---------------- machine ---------------- */
.rp-machine{display:flex; flex-direction:column; align-items:center; margin-top:2px;}
.rp-rig{width:420px; max-width:100%; height:82px; display:block;}
.rp-rig-hopper{fill:var(--rp-steel);}
.rp-rig-slot{fill:rgba(0,0,0,.45);}
.rp-rig-tri{fill:var(--rp-steel-lt);}
.rp-rig-pipe{
  fill:none; stroke:var(--rp-steel); stroke-width:11;
  stroke-linecap:round; stroke-linejoin:round;
}

.rp-pods{display:flex; gap:44px; justify-content:center; margin-top:-6px;}
.rp-pod{
  position:relative; background:none; border:none; padding:0;
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; transition:opacity .2s var(--ease);
}
.rp-pod:disabled{opacity:.42; cursor:not-allowed;}
.rp-pod-cap{
  width:84px; height:78px; border-radius:24px 24px 10px 10px;
  background:var(--rp-green);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.16);
  transition:background .16s var(--ease), transform .12s var(--ease);
}
.rp-pod-face{
  width:60px; height:60px; border-radius:16px; background:var(--rp-slate);
  display:flex; align-items:center; justify-content:center;
}
.rp-pod-face .rp-hand{width:42px; height:42px;}
.rp-pod-base{
  width:106px; height:26px; margin-top:-4px; border-radius:8px;
  background:linear-gradient(180deg, var(--rp-steel-lt), var(--rp-steel));
  box-shadow:inset 0 7px 0 rgba(0,0,0,.2);
}
.rp-pod-key{
  position:absolute; top:-4px; right:2px;
  min-width:17px; height:17px; border-radius:5px;
  background:rgba(0,0,0,.45); color:var(--rp-muted);
  font-size:10px; font-weight:800; line-height:17px;
}
.rp-pod:not(:disabled):hover .rp-pod-cap{background:#fff; transform:translateY(-2px) scale(1.04);}
.rp-pod:not(:disabled):hover .rp-hand-pod{fill:url(#rpGold);}
.rp-pod:not(:disabled):active .rp-pod-cap{transform:translateY(3px) scale(1);}
.rp-pod.rp-pod-chosen .rp-pod-cap{background:#e8a33d; transform:translateY(3px);}
.rp-pod.rp-pod-chosen .rp-hand-pod{fill:#fff;}

/* the hand that flies from the pod up into the live slot */
/* El volante es la carta que sale disparada del boton hacia su hueco, asi
   que ahora tiene que ser una CARTA: en la caja cuadrada de 62x62 el arte
   se recortaba a un cuadro y por el camino dejaba de parecerse a lo que
   acababa de aterrizar. */
.rp-flyer{
  position:absolute; top:0; left:0; width:58px; height:116px;
  opacity:0; pointer-events:none; z-index:6;
  will-change:transform;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.rp-flyer .rp-hand{width:58px; height:58px;}
.rp-flyer .rp-cardart{ border-radius:8px; }

/* hand tones */
.rp-hand{display:block;}
.rp-hand-you{fill:url(#rpGold);}
.rp-hand-house{fill:url(#rpSteel);}
.rp-hand-pod{fill:#e9f2f7;}
.rp-hand-ui{fill:#cbd7df;}

.rp-live{
  margin:0; text-align:center; min-height:18px;
  font-size:13px; color:var(--rp-muted);
}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .rp-body{display:flex; flex-direction:column-reverse; gap:14px;}
  .rp-ladder{overflow-x:auto; scrollbar-width:none;}
  .rp-ladder::-webkit-scrollbar{display:none;}
  .rp-strip{justify-content:flex-start; padding:0 4px;}
  .rp-col, .rp-card{width:52px;}
  .rp-card{height:104px;}          /* misma proporcion 1:2 que en escritorio */
  .rp-card .rp-hand{width:38px; height:38px;}
  .rp-pill{min-width:56px; height:22px; font-size:11px; padding:0 8px;}
  .rp-pods{gap:18px;}
  .rp-pod-cap{width:66px; height:62px;}
  .rp-pod-face{width:48px; height:48px;}
  .rp-pod-face .rp-hand{width:34px; height:34px;}
  .rp-pod-base{width:84px; height:20px;}
  .rp-rig{height:64px;}
}

@media (prefers-reduced-motion: reduce){
  .rp-strip, .rp-flip, .rp-pod-cap, .rp-card{transition-duration:.01ms;}
  .rp-pill-pop{animation:none;}
  .rp-flyer{display:none;}
}

/* =========================================================
   MOVIL — correcciones medidas en 375x812.

   El casino se juega sobre todo en telefono, asi que estas no
   son mejoras cosmeticas: cada una tapaba algo que el jugador
   no podia alcanzar con el dedo.
   ========================================================= */
@media (max-width:900px){

  /* CAUSA RAIZ, comun a tres juegos: un item flex arranca con
     min-width:auto, que se NIEGA a encogerse por debajo de su
     contenido. Una etiqueta larga junto a un campo de apuesta
     empujaba la fila mas ancha que la pantalla, y lo que sobraba
     quedaba fuera del overlay -- invisible e intocable. */
  .dice-modal-body :is(.dice-field, .dice-field-label,
                       .slots-bet-row, .dice-bet-input){
    min-width:0;
  }
  .dice-field-label{ gap:8px; }
  .dice-field-label > span{
    min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* Tragamonedas: el campo y el boton rapido no caben en una
     linea de 375px. Que bajen en vez de salirse. */
  .slots-bet-row{ flex-wrap:wrap; }
  .slots-bet-row > .dice-field{ flex:1 1 100%; }
  .slots-bet-row > .slots-quick-btn{ flex:1 1 100%; }

  /* Objetivos tactiles. 44px es el minimo comodo para un pulgar;
     el aspa de cerrar estaba en 34 y es el boton que mas se usa. */
  .dice-close{ min-width:44px; min-height:44px; }
  .hamburger{ min-width:44px; min-height:44px; }

  /* El tablero de la ruleta mide 520px y vive en un contenedor
     deslizable, pero nada le decia al jugador que se desliza.
     Un degradado en el borde derecho lo insinua sin ocupar sitio. */
  .rl-table-wrap{
    position:relative;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .rl-table-wrap::-webkit-scrollbar{ display:none; }
  .rl-table-wrap::after{
    content:''; position:sticky; float:right; top:0; right:0;
    width:26px; height:100%; pointer-events:none;
    background:linear-gradient(90deg, rgba(15,33,46,0), rgba(15,33,46,.92));
  }
}

/* =========================================================
   MOVIL — el tablero no se pierde de vista.

   El problema medido: en un telefono de 812px el cuerpo del
   modal da 698px utiles, y tablero + controles suman mas
   (Chicken Road 396+364, Plinko 352+392, Dados 122+520). Al
   bajar a los botones, el juego desaparecia por arriba: el
   jugador apostaba a ciegas.

   La solucion no es encoger el tablero -- ya es pequeno --
   sino fijarlo. El tablero queda pegado al borde superior y
   los controles se deslizan POR DEBAJO. Se juega mirando el
   juego, que es lo minimo que se le pide a un casino.
   ========================================================= */
@media (max-width:900px){

  .dice-modal-body{ position:relative; }

  /* El escenario de cada juego. Son clases distintas por juego
     historico, asi que se listan: un selector generico pegaria
     tambien paneles que deben poder salir de pantalla. */
  .dice-modal-body > :is(.cr-stage, .pk-stage, .dice-stage,
                         .crash-stage, .pm-stage, .slots-stage,
                         .sl-stage, .pn-stage){
    position:sticky;
    top:0;
    z-index:6;
    /* Sin fondo propio, los controles se transparentarian por
       debajo al deslizarse bajo el tablero. */
    background:var(--bg-1, #0f212e);
    box-shadow:0 10px 18px -12px rgba(0,0,0,.85);
    margin-inline:calc(var(--sp-2, 8px) * -1);
    padding-inline:var(--sp-2, 8px);
  }

  /* Controles compactos: el alto que sobraba estaba en huecos y
     relleno, no en los botones, asi que se recorta ahi y los
     objetivos tactiles quedan intactos. */
  .dice-modal-body .dice-controls{
    padding:10px;
    gap:8px;
  }
  .dice-modal-body .dice-controls > * + *{ margin-top:0; }
  .dice-field-label{ font-size:12px; }
  .dice-row-2, .dice-btn-row{ gap:8px; }
}

/* Chicken Road: el carril siguiente se toca para avanzar.
   Realce sutil a proposito: marca el objetivo sin competir con el trafico,
   que es lo que el jugador tiene que estar mirando. */
.cr-lane-next{
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(0,231,1,.5);
  background-image:linear-gradient(180deg, rgba(0,231,1,.10), rgba(0,231,1,0) 55%);
}
@media (hover:hover){ .cr-lane-next:hover{ box-shadow:inset 0 0 0 2px rgba(0,231,1,.9); } }
.cr-lane-next:active{ box-shadow:inset 0 0 0 3px rgba(0,231,1,1); }

/* =========================================================
   COINFLIP

   Paleta muestreada del original y ACOTADA AL MODAL: todas las
   variables cuelgan de .cf-modal, como hacen .rl-modal y
   .rp-modal. Sin eso, un --cf-green suelto en :root acaba
   tinendo un boton de otro juego el dia que alguien reutilice
   el nombre.

   El giro NO vive aqui: lo mueve un requestAnimationFrame que
   escribe rotateY en linea. Lo unico animado por CSS es el
   balanceo en reposo, para que no haya JavaScript corriendo
   mientras el jugador piensa. Los dos nunca coinciden -- la
   clase del balanceo se quita antes de que el bucle tome el
   transform.
   ========================================================= */
.cf-modal{
  --cf-bg:#07031a;
  --cf-bg-edge:#0b090a;
  --cf-coin-a:#8a6212;
  --cf-coin-b:#c9942f;
  --cf-rim-a:#f7dd8a;
  --cf-rim-b:#a9720c;
  --cf-heart:#ee362a;
  --cf-like:#48aaf9;
  --cf-green-a:#1d8145;
  --cf-green-b:#19c9a2;
  --cf-green-pill:#178a47;
  --cf-field:#1c1920;
  --cf-btn:#38373f;
  --cf-risk-off:#211f2d;
  --cf-side-red:#180b1c;
  --cf-side-blue:#10203f;
  --cf-frame:#1b1a22;

  max-width:960px;
}

.cf-icon{ color:var(--cf-like); }

.cf-body{
  display:block;
  background:
    radial-gradient(120% 90% at 50% 38%, var(--cf-bg) 0%, #05020f 55%, var(--cf-bg-edge) 100%);
  padding:clamp(12px, 2vw, 20px);
}

/* ---------- fila superior: logo + escalera ---------- */
.cf-top{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:clamp(12px, 3vw, 28px);
}

/* Marca propia: es BFF Casino Royale, no el nombre del proveedor original. */
.cf-logo{
  display:flex; flex-direction:column; line-height:.88;
  font-weight:900; font-style:italic; letter-spacing:.01em;
  transform:skewX(-6deg);
  flex:0 0 auto;
}
.cf-logo-a, .cf-logo-b{ font-size:clamp(20px, 3vw, 30px); }
.cf-logo-a{
  color:#ff2f3d;
  text-shadow:0 0 10px rgba(255,47,61,.65), 0 2px 0 #7a0d16;
}
.cf-logo-b{
  color:#2f7dff;
  text-shadow:0 0 10px rgba(47,125,255,.65), 0 2px 0 #0d2f7a;
}

.cf-ladder-wrap{
  /* La escalera se desborda antes que el modal: es la unica parte que puede
     no caber, y el body NUNCA debe scrollear en horizontal. */
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding-bottom:4px;
}
.cf-ladder{
  /* --cf-n es el NUMERO de peldanos y lo escribe renderLadder(). El rail lo
     necesita porque debe empezar y acabar en el CENTRO del primer y ultimo
     punto, o sea media celda adentro por cada lado, y media celda expresada
     como porcentaje del ancho es 50%/n.

     Antes la celda era un ancho fijo. Fallaba dos veces: en movil el rail
     leia 74px cuando la celda medida era 62 --6px corto por lado--, y con 5
     o 3 peldanos la escalera no llenaba el ancho, asi que el rail sobresalia
     41 y 165px por la derecha. En el original la escalera SIEMPRE ocupa todo
     el ancho y son las celdas las que se ensanchan al haber menos. */
  --cf-n:10;
  --cf-cell-min:62px;
  position:relative;
  display:flex;
  min-width:max-content;
  padding-top:6px;
}
.cf-rail{
  position:absolute;
  left:0; right:0; top:11px; height:2px;
  background:rgba(255,255,255,.14);
  border-radius:2px;
  /* El relleno se mide entre el PRIMER y el ULTIMO punto, no sobre la tira
     entera: los puntos estan en el centro de su celda, asi que el 0% y el
     100% caen media celda adentro. Midiendo contra la tira, el verde
     quedaba una celda corto. */
  margin:0 calc(50% / var(--cf-n));
}
/* Elemento REAL y no ::after: el valor lo escribe JavaScript en linea y a un
   pseudo-elemento no se le puede poner estilo en linea. Escala en horizontal
   por el mismo motivo que el medidor, ver .cf-meter-fill. */
.cf-rail-fill{
  position:absolute; left:0; top:0; height:100%; width:100%;
  transform-origin:left;
  transform:scaleX(0);
  will-change:transform;
  background:linear-gradient(90deg, var(--cf-green-a), var(--cf-green-b));
  border-radius:2px;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.cf-rung{
  /* Crecen para repartirse el ancho, con un minimo por debajo del cual la
     escalera prefiere scrollear a apinar los multiplicadores. */
  flex:1 1 var(--cf-cell-min);
  min-width:var(--cf-cell-min);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  position:relative; z-index:1;
}
.cf-dot{
  width:10px; height:10px; border-radius:50%;
  background:#0a0716;
  border:2px solid rgba(255,255,255,.34);
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.cf-mult{
  font-size:12px; font-weight:700; letter-spacing:.01em;
  color:rgba(255,255,255,.44);
  white-space:nowrap;
  transition:color .3s;
}
.cf-rung-done .cf-dot{
  background:var(--cf-green-b);
  border-color:var(--cf-green-b);
}
.cf-rung-done .cf-mult{ color:rgba(255,255,255,.62); }
.cf-rung-now .cf-dot{
  background:var(--cf-green-b);
  border-color:var(--cf-green-b);
  box-shadow:0 0 0 4px rgba(25,201,162,.22);
}
.cf-rung-now .cf-mult{
  color:#fff;
  background:var(--cf-green-pill);
  border-radius:6px;
  padding:2px 9px;
}

/* ---------- escenario ---------- */
.cf-arena{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(8px, 2vw, 22px);
  margin-top:clamp(6px, 1.6vw, 14px);
}

.cf-meter{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  flex:0 0 auto;
}
.cf-meter-tube{
  position:relative;
  width:30px; height:clamp(96px, 17vh, 138px);
  border-radius:16px;
  border:1.5px solid currentColor;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.cf-meter-heart{ color:var(--cf-heart); }
.cf-meter-like { color:var(--cf-like); }
/* ESCALA, no cambia de alto. Animar height obliga al navegador a rehacer el
   layout en cada fotograma, y esto se mueve justo al lado de la moneda
   girando: es el momento del juego donde menos margen hay. Un scaleY lo
   resuelve el compositor y no toca el layout.

   El valor lo escribe JavaScript en linea en vez de pasar por una variable
   CSS. No hace falta la indireccion: solo hay un sitio que lo cambia, y
   verlo escrito donde se decide ahorra el salto al CSS para saber que se
   esta animando. */
.cf-meter-fill{
  position:absolute; left:0; right:0; bottom:0;
  height:100%;
  transform-origin:bottom;
  transform:scaleY(0);
  will-change:transform;
  background:currentColor;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.cf-meter-cap{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%) rotate(-90deg);
  font-size:12px; font-weight:800; color:#fff;
  letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  pointer-events:none;
}
.cf-meter-ic{ width:20px; height:20px; }

/* Iconos del medidor: un glifo chico con mascara sobre el color, no la
   foto real de la moneda. A 20px una textura fotografica se vuelve una
   mancha borrosa y el jugador pierde el vistazo rapido de "que lado es
   cada barra"; una silueta simple (corona / pica) se lee al toque. La
   foto de verdad si se usa en el panel de eleccion (.cf-side, mas
   grande) y en la cara de la moneda -- ver cf-ic-big y game-coinflip.js. */
.cf-ic-heart, .cf-ic-like{
  display:inline-block;
  background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.cf-ic-heart{
  color:var(--cf-heart);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='16' cy='34' r='6'/%3E%3Ccircle cx='50' cy='20' r='7'/%3E%3Ccircle cx='84' cy='34' r='6'/%3E%3Cpath d='M16 38L30 58 50 24 70 58 84 38 78 80 22 80Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='16' cy='34' r='6'/%3E%3Ccircle cx='50' cy='20' r='7'/%3E%3Ccircle cx='84' cy='34' r='6'/%3E%3Cpath d='M16 38L30 58 50 24 70 58 84 38 78 80 22 80Z'/%3E%3C/svg%3E");
}
.cf-ic-like{
  color:var(--cf-like);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 12C30 34 12 48 12 64c0 12 10 20 21 20 7 0 13-4 16-10-2 10-6 16-15 22h32c-9-6-13-12-15-22 3 6 9 10 16 10 11 0 21-8 21-20 0-16-18-30-38-52z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 12C30 34 12 48 12 64c0 12 10 20 21 20 7 0 13-4 16-10-2 10-6 16-15 22h32c-9-6-13-12-15-22 3 6 9 10 16 10 11 0 21-8 21-20 0-16-18-30-38-52z'/%3E%3C/svg%3E");
}

.cf-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(150px, 26vh, 240px);
  /* Aisla al escenario del resto: el giro no puede provocar recalculos de
     layout fuera de esta caja. */
  contain:layout paint;
}
.cf-halo{
  position:absolute; inset:-10%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(90,60,180,.20), transparent 72%);
  transition:background .4s ease;
  pointer-events:none;
}
.cf-halo-heart{ background:radial-gradient(closest-side, rgba(238,54,42,.30), transparent 72%); }
.cf-halo-like { background:radial-gradient(closest-side, rgba(72,170,249,.30), transparent 72%); }

.cf-coins{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px, 3vw, 34px);
  /* La perspectiva vive en el CONTENEDOR y no en cada moneda: con
     perspective por moneda, cada una tendria su propio punto de fuga y las
     tres se verian giradas hacia sitios distintos. */
  perspective:900px;
}

/* ---------- la moneda ---------- */
.cf-coin{
  --cf-d:clamp(104px, 19vh, 168px);   /* diametro */
  --cf-t:14px;                        /* grosor del canto */
  width:var(--cf-d); height:var(--cf-d);
  position:relative;
  will-change:transform;
}
.cf-coin3d{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.cf-face{
  position:absolute; inset:0;
  border-radius:50%;
  backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  /* Aro purpura->magenta por fuera, cuerpo azul por dentro. Dos capas de
     fondo en vez de un pseudo-elemento: menos nodos y el mismo dibujo. */
  background:
    radial-gradient(circle at 50% 50%,
      var(--cf-coin-b) 0%, var(--cf-coin-a) 62%, transparent 63%),
    linear-gradient(145deg, var(--cf-rim-a), var(--cf-rim-b));
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,.18),
    inset 0 -6px 14px rgba(0,0,0,.45),
    0 10px 30px rgba(30,10,70,.55);
}
/* Brillo especular arriba. */
.cf-face::after{
  content:'';
  position:absolute; left:12%; top:6%; width:56%; height:34%;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.30), transparent 75%);
  pointer-events:none;
}
.cf-face-a{ transform:rotateY(0deg)   translateZ(calc(var(--cf-t) / 2)); }
.cf-face-b{ transform:rotateY(180deg) translateZ(calc(var(--cf-t) / 2)); }
/* La foto de la moneda cubre TODO el disco -- es la textura real, no un
   icono flotando sobre un fondo generico. El recorte circular coincide
   exacto con el borde dorado de la propia foto porque la moneda fuente
   toca los cuatro lados de su lienzo cuadrado. Si el archivo no carga,
   faceOk sigue en false y entra el SVG de repuesto (ver FACE_SVG en
   game-coinflip.js), mas chico y centrado sobre el degradado de abajo. */
.cf-face img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  position:relative; z-index:1;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.cf-face svg{
  width:56%; height:56%;
  position:relative; z-index:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
}

/* EL CANTO. Un plano vertical del grosor de la moneda, girado 90 grados:
   cuando el giro pasa por el perfil, este plano queda de frente y se lee
   como una lamina con brillo, que es exactamente lo que se ve en la hoja de
   fotogramas. Sin el, la moneda desaparece en cada media vuelta. */
.cf-edge{
  position:absolute;
  left:calc(50% - var(--cf-t) / 2);
  top:1%;
  width:var(--cf-t);
  height:98%;
  border-radius:calc(var(--cf-t) / 2);
  transform:rotateY(90deg);
  background:linear-gradient(180deg,
    #4a3006 0%, #e8b84b 18%, #fff3cc 30%, #d89a2e 42%,
    #5c3d0a 60%, #8a5f14 82%, #3a2704 100%);
  box-shadow:0 0 18px rgba(240,200,120,.45);
}

/* Balanceo en reposo: 8 grados, 4 segundos. Lo justo para que el escenario
   no parezca congelado sin pedir un fotograma cada 16ms desde JavaScript. */
@keyframes cfWobble{
  0%, 100% { transform:rotateY(-8deg); }
  50%      { transform:rotateY( 8deg); }
}
.cf-idle-wobble .cf-coin3d{
  animation:cfWobble 4s ease-in-out infinite;
}
/* Durante el giro manda el bucle, que escribe transform en linea. La clase
   del balanceo ya se ha quitado, pero esto lo deja explicito. */
.cf-spinning .cf-coin3d{ animation:none; }

.cf-banner{
  position:absolute; left:50%; top:8%;
  transform:translate(-50%, -8px);
  margin:0; padding:8px 20px;
  border-radius:999px;
  font-weight:800; font-size:clamp(13px, 1.8vw, 17px);
  letter-spacing:.03em;
  background:rgba(8,5,20,.86);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  z-index:3;
}
.cf-banner.show{ opacity:1; transform:translate(-50%, 0); }
.cf-banner-win { color:var(--cf-green-b); border-color:rgba(25,201,162,.45); }
.cf-banner-lose{ color:#ff8a80; border-color:rgba(255,138,128,.4); }

/* ---------- controles ---------- */
.cf-controls{ margin-top:clamp(10px, 2vw, 18px); }

.cf-risk-label{
  margin:0 0 8px;
  text-align:center;
  font-size:11px; letter-spacing:.18em; font-weight:700;
  color:rgba(255,255,255,.42);
}
.cf-risk{
  display:grid; grid-template-columns:repeat(3, 1fr);
  max-width:420px; margin:0 auto 14px;
  border-radius:10px; overflow:hidden;
  background:var(--cf-risk-off);
}
.cf-risk-tab{
  padding:13px 8px;
  border:0; background:transparent; cursor:pointer;
  font-weight:800; font-size:13px; letter-spacing:.06em;
  color:rgba(255,255,255,.5);
  transition:background .2s, color .2s;
}
.cf-risk-tab:hover:not(:disabled){ color:rgba(255,255,255,.8); }
.cf-risk-tab.active{
  background:linear-gradient(135deg, #3d1a6e, #6a2fa8);
  color:#fff;
}
.cf-risk-tab:disabled{ cursor:default; opacity:.55; }

.cf-betbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px; align-items:stretch;
  max-width:600px; margin:0 auto;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:12px;
}
.cf-betgrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.cf-amount{
  grid-column:1 / span 3;
  display:flex; align-items:center;
  background:var(--cf-field);
  border-radius:9px;
  padding:0 6px;
}
.cf-amount input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:0;
  text-align:center;
  font-size:15px; font-weight:700; color:#fff;
  padding:11px 4px;
  /* Sin esto Chrome mete flechitas que rompen el centrado del numero. */
  -moz-appearance:textfield;
}
.cf-amount input::-webkit-outer-spin-button,
.cf-amount input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cf-amount button{
  width:30px; height:30px; flex:0 0 auto;
  border:0; border-radius:7px; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.75);
  font-size:17px; line-height:1;
}
.cf-amount button:hover{ background:rgba(255,255,255,.08); }
.cf-chip{
  background:var(--cf-btn); color:#fff;
  border:0; border-radius:9px; cursor:pointer;
  font-size:12px; font-weight:700;
  padding:10px 4px;
  transition:filter .15s;
}
.cf-chip:hover{ filter:brightness(1.25); }
.cf-chip-wide{ font-size:10.5px; line-height:1.15; }
.cf-start{
  border:0; border-radius:12px; cursor:pointer;
  padding:0 clamp(18px, 4vw, 40px);
  font-size:clamp(17px, 2.4vw, 24px); font-weight:900; letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(135deg, var(--cf-green-a), var(--cf-green-b));
  box-shadow:0 6px 22px rgba(25,201,162,.28);
  transition:filter .15s, transform .12s;
}
.cf-start:hover{ filter:brightness(1.08); }
.cf-start:active{ transform:translateY(1px); }

/* ---------- en ronda ---------- */
.cf-sides{
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px;
  max-width:600px; margin:0 auto 12px;
}
.cf-side{
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(72px, 11vh, 100px);
  border-radius:12px; cursor:pointer;
  transition:filter .15s, transform .12s, box-shadow .2s;
}
.cf-side-heart{
  background:var(--cf-side-red);
  border:1px solid rgba(238,54,42,.55);
}
.cf-side-like{
  background:var(--cf-side-blue);
  border:1px solid #2a4d91;
}
.cf-side:hover:not(:disabled){ filter:brightness(1.3); }
.cf-side:active:not(:disabled){ transform:translateY(1px); }
.cf-side:disabled{ cursor:default; opacity:.5; }
.cf-side-chosen{ box-shadow:0 0 0 2px rgba(255,255,255,.5) inset; opacity:1 !important; }
/* Foto real de la moneda, recortada a circulo -- por eso es un <img>, no
   el mismo glifo con mascara que usa el medidor (ver comentario junto a
   .cf-ic-heart mas arriba). */
.cf-ic-big{
  width:clamp(38px, 6vw, 54px); height:clamp(38px, 6vw, 54px);
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.45);
}

.cf-action{ max-width:600px; margin:0 auto; }
.cf-cancel, .cf-cashout{
  width:100%;
  border-radius:12px; cursor:pointer;
  padding:6px;
  background:var(--cf-frame);
  border:1px solid rgba(255,255,255,.10);
  transition:filter .15s, transform .12s;
}
.cf-cancel{
  min-height:64px;
  font-size:clamp(16px, 2.2vw, 21px); font-weight:800; letter-spacing:.05em;
  color:rgba(255,255,255,.82);
}
.cf-cancel:hover{ filter:brightness(1.35); }
.cf-cashout{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-height:64px;
}
/* El relleno verde va DENTRO del marco oscuro, no en lugar de el: en el
   original el marco se ve como un borde grueso alrededor del boton. */
.cf-cashout::before{
  content:'';
  position:absolute; inset:6px;
  border-radius:9px;
  background:linear-gradient(135deg, rgba(29,129,69,.85), rgba(25,201,162,.55));
  z-index:0;
}
.cf-cashout{ position:relative; }
.cf-cashout-lbl, .cf-cashout-amt{ position:relative; z-index:1; }
.cf-cashout-lbl{
  font-size:11px; font-weight:700; letter-spacing:.16em;
  color:rgba(255,255,255,.8);
}
.cf-cashout-amt{
  font-size:clamp(19px, 2.8vw, 27px); font-weight:900; color:#fff;
}
.cf-cashout:hover{ filter:brightness(1.12); }
.cf-cashout:active{ transform:translateY(1px); }

.cf-live{
  margin:10px 0 0; text-align:center;
  font-size:12px; color:rgba(255,255,255,.42);
  min-height:1em;
}

/* ---------- movil ----------
   Escenario arriba con las monedas mas pequenas, medidores pegados a los
   bordes y mas estrechos, controles abajo. */
@media (max-width:900px){
  .cf-top{ grid-template-columns:1fr; gap:8px; }
  .cf-logo{ flex-direction:row; gap:7px; align-items:baseline; }
  .cf-arena{ gap:6px; }
  .cf-meter-tube{ width:22px; height:clamp(76px, 13vh, 104px); }
  .cf-meter-cap{ font-size:10px; }
  .cf-meter-ic{ width:16px; height:16px; }
  .cf-coin{ --cf-d:clamp(76px, 22vw, 112px); --cf-t:10px; }
  .cf-coins{ gap:12px; }
  .cf-ladder{ --cf-cell-min:56px; }
  .cf-mult{ font-size:11px; }
  .cf-betbar{ grid-template-columns:1fr; }
  .cf-start{ padding:16px; }
}

/* Menos movimiento: sin giro y sin balanceo. El bucle ya funde a la cara
   resultante respetando los mismos tiempos, asi que la ronda se resuelve en
   el mismo momento con o sin animacion. */
@media (prefers-reduced-motion: reduce){
  .cf-idle-wobble .cf-coin3d{ animation:none; }
  .cf-rail-fill, .cf-meter-fill{ transition:none; }
  .cf-banner{ transition:none; }
}

/* Aviso de que el juego no acepta apuestas con sesion iniciada. Se pinta
   arriba del selector de riesgo porque es lo primero que hay que saber:
   pulsar COMENZAR y que falle es peor que no poder pulsarlo. */
.cf-aviso{
  margin:0 auto 12px;
  max-width:600px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(245,185,66,.10);
  border:1px solid rgba(245,185,66,.32);
  color:#f5cf8a;
  font-size:12.5px; line-height:1.4; text-align:center;
}
.cf-start:disabled{
  filter:grayscale(.7) brightness(.6);
  cursor:not-allowed;
  box-shadow:none;
}

/* =========================================================
   FRUTAS ROYALE — nine-line fruit machine.
   Dressed in the house black-and-gold rather than arcade red,
   so it sits next to the other Royale games instead of
   shouting over them. Only the fruit keeps its own colour.

   A spin is one translateY per reel. Nothing here animates a
   layout property, and the reels are the only thing moving.
   ========================================================= */
.fr-modal{
  --fr-felt:#0d0a12;      --fr-frame:#1b1524;
  --fr-cell-bg:#141020;   --fr-cell-line:rgba(201,162,39,.14);
  --fr-cell:92px;
  max-width:1320px;
}
.fr-icon{background:rgba(201,162,39,.14)!important; border-color:var(--border-gold)!important; color:var(--gold-light)!important;}

.fr-body{background:var(--bg-1);}
@media (min-width:900px){
  .fr-body{display:grid; grid-template-columns:340px minmax(0,1fr); gap:16px; align-items:start;}
}

/* ---------------- panel ---------------- */
.fr-panel{
  display:flex; flex-direction:column; gap:12px;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:10px; padding:16px; align-self:start;
}
.fr-note{margin:0; font-size:12px; color:var(--text-2);}

.fr-spin-btn{
  width:100%; height:52px; border:none; border-radius:8px;
  background:var(--gold-metal); color:#2b1e04;
  font-weight:800; font-size:17px; letter-spacing:.4px; cursor:pointer;
  box-shadow:0 8px 22px -10px var(--gold-glow);
  transition:transform .12s var(--ease), filter .15s var(--ease);
}
.fr-spin-btn:hover:not(:disabled){filter:brightness(1.08); transform:translateY(-1px);}
.fr-spin-btn:active:not(:disabled){transform:translateY(1px);}
.fr-spin-btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}

/* ---------------- gamble ---------------- */
.fr-gamble{
  display:none; flex-direction:column; gap:10px; align-items:center;
  padding:14px; border-radius:10px;
  background:rgba(201,162,39,.06); border:1px solid var(--border-gold);
}
.fr-gamble.on{display:flex;}
.fr-gamble-head{font-size:13px; font-weight:800; color:var(--gold-light); letter-spacing:.5px; text-transform:uppercase;}
.fr-gamble-amt{font-size:13px; color:var(--text-1);}
.fr-gamble-amt b{color:var(--text-0);}
.fr-card{
  width:72px; height:98px; border-radius:8px;
  background:var(--bg-3); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:36px; color:var(--text-1);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.fr-card.fr-flip{transform:rotateY(360deg);}
.fr-card.red{background:#3a0c17; border-color:#c0334d; color:#ff5c74;}
.fr-card.black{background:#141020; border-color:#5a6070; color:#cfd4e0;}
.fr-gamble-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%;}
.fr-gamble-btns button{
  height:40px; border-radius:7px; border:1px solid var(--border);
  font-weight:800; font-size:13px; cursor:pointer; color:var(--text-0);
}
.fr-g-red{background:#3a0c17; border-color:#8c2437!important;}
.fr-g-black{background:#181528;}
.fr-gamble-btns button:hover{filter:brightness(1.25);}
.fr-bank-btn{
  width:100%; height:38px; border-radius:7px; border:1px solid var(--border-gold);
  background:transparent; color:var(--gold-light); font-weight:700; font-size:13px; cursor:pointer;
}
.fr-bank-btn:hover{background:rgba(201,162,39,.1);}

/* ---------------- paytable ---------------- */
.fr-pay-toggle{
  width:100%; height:36px; border-radius:7px;
  background:transparent; border:1px solid var(--border);
  color:var(--text-1); font-size:12.5px; font-weight:700; cursor:pointer;
}
.fr-pay-toggle:hover{color:var(--text-0); border-color:var(--border-gold);}
.fr-paytable{display:none; flex-direction:column; gap:4px;}
.fr-paytable.on{display:flex;}
.fr-pay-row{
  display:grid; grid-template-columns:30px 1fr auto; gap:8px; align-items:center;
  padding:5px 8px; border-radius:6px; background:var(--bg-1);
}
.fr-pay-sym .fr-art{width:24px; height:24px;}
.fr-pay-name{font-size:12px; color:var(--text-1);}
.fr-pay-name em{font-style:normal; font-size:10px; color:var(--gold); text-transform:uppercase; letter-spacing:.4px;}
.fr-pay-nums{display:flex; gap:6px;}
.fr-pay-nums b{
  min-width:38px; text-align:right; font-size:11.5px;
  color:var(--gold-light); font-variant-numeric:tabular-nums;
}

/* ---------------- arena ---------------- */
.fr-arena{
  display:flex; flex-direction:column; gap:12px; align-items:center;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:10px; padding:20px 16px;
  contain:layout paint;
}
.fr-machine{
  position:relative;
  padding:14px; border-radius:12px;
  background:var(--fr-frame);
  border:2px solid var(--border-gold);
  box-shadow:inset 0 0 40px rgba(0,0,0,.7), 0 0 40px -18px var(--gold-glow);
}
.fr-grid{
  display:grid; grid-template-columns:repeat(5, var(--fr-cell)); gap:6px;
  background:var(--fr-felt); padding:6px; border-radius:8px;
}
.fr-reel{
  height:calc(var(--fr-cell) * 3);
  overflow:hidden; border-radius:6px;
  background:var(--fr-cell-bg);
  box-shadow:inset 0 0 0 1px var(--fr-cell-line);
}
.fr-reel.fr-bump{animation:frBump .22s var(--ease);}
@keyframes frBump{0%{transform:translateY(0);}45%{transform:translateY(4px);}100%{transform:translateY(0);}}
.fr-strip{display:flex; flex-direction:column; will-change:transform;}
.fr-cell{
  height:var(--fr-cell); flex:none;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.03);
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
.fr-art{width:70%; height:70%; display:block; object-fit:contain;}
.fr-cell.fr-hit{
  background:rgba(201,162,39,.16);
  box-shadow:inset 0 0 0 2px var(--gold);
}

/* the winning line drawn over the reels */
.fr-linesvg{
  position:absolute; left:14px; top:14px; right:14px; bottom:14px;
  width:calc(100% - 28px); height:calc(100% - 28px);
  pointer-events:none;
}
.fr-linesvg polyline{
  fill:none; stroke:var(--gold); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px var(--gold-glow));
}

.fr-win{
  position:absolute; left:50%; bottom:-14px; transform:translate(-50%, 10px);
  display:flex; align-items:baseline; gap:8px;
  padding:7px 18px; border-radius:999px;
  background:var(--bg-0); border:1px solid var(--border-gold);
  box-shadow:0 0 24px -8px var(--gold-glow);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.fr-win.on{opacity:1; transform:translate(-50%, 0);}
.fr-win span{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-2);}
.fr-win b{font-size:19px; color:var(--gold-light); font-weight:800;}

.fr-live{margin:6px 0 0; min-height:18px; font-size:12.5px; color:var(--text-2); text-align:center;}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .fr-modal{--fr-cell:58px;}
  .fr-body{display:flex; flex-direction:column-reverse; gap:14px;}
  /* Un item flex no baja de su min-content salvo que se le diga: sin esto el
     panel se quedaba en el ancho natural del input numerico y empujaba la
     pagina 15px a la derecha en un movil de 375. */
  .fr-panel, .fr-arena{min-width:0;}
  .fr-panel .dice-field, .fr-panel .dice-field-label, .fr-panel .dice-bet-input{min-width:0;}
  .fr-panel .dice-bet-input input{min-width:0; width:100%;}
  .fr-arena{padding:14px 8px;}
  .fr-machine{padding:8px;}
  .fr-linesvg{left:8px; top:8px; width:calc(100% - 16px); height:calc(100% - 16px);}
  .fr-grid{gap:4px; padding:4px;}
  .fr-card{width:60px; height:82px; font-size:30px;}
}
@media (max-width:380px){
  .fr-modal{--fr-cell:50px;}
}

@media (prefers-reduced-motion: reduce){
  .fr-strip{transition-duration:.01ms!important;}
  .fr-reel.fr-bump{animation:none;}
  .fr-card{transition-duration:.01ms;}
}

/* =========================================================
   MINAS — ARTE DEL CLIENTE

   Las casillas eran los caracteres ◆ y ✖ sobre verde y rojo.
   Ahora llevan la gema y la bomba ilustradas, y el verde/rojo
   se cambia por el morado y oro del propio dibujo: una gema
   morada sobre un marco verde esmeralda se lee como dos juegos
   distintos pegados.

   Todo lo que se mueve va con transform y opacity. Las casillas
   son 25 y se revelan en cadena, asi que animar sombras o
   filtros aqui se nota en un movil de gama media.
   ========================================================= */

/* ---- la pieza dentro de la casilla ---- */
.mn-art{
  /* ABSOLUTA CON MEDIDAS EXPLICITAS, y las dos cosas por un motivo medido.

     Absoluta porque la casilla es display:flex y ahi la imagen se encogia a
     0 de ancho conservando el alto: 0x26 en una casilla de 34.

     Y con width/height y no con inset:auto porque <img> es un elemento
     REEMPLAZADO: con los cuatro lados fijados y el tamano en auto no rellena
     el hueco, toma su tamano INTRINSECO. La bomba salia a 340px dentro de
     una casilla de 84. */
  position:absolute;
  left:12%; top:12%;
  width:76%; height:76%;
  object-fit:contain;
  pointer-events:none;
  /* SIN filter. La sombra viene HORNEADA en el archivo .webp.

     Estaba en filter:drop-shadow porque sigue la silueta del dibujo y no su
     caja --una bomba redonda con sombra cuadrada canta mucho-- pero eso lo
     recalcula el navegador por elemento. Medido con el tablero destapado: 26
     elementos con filtro vivo, y 23ms para veinte recalculos de estilo. En un
     PC flojo eso es el tirón que se nota al destapar casillas.

     Horneada en el pixel se ve igual, sigue la silueta igual, y cuesta cero.
     Son 1,5 KB mas por archivo. */
}

/* La gema entra girando sobre su eje y rebotando un pelo: es un premio y
   tiene que sentirse como tal. El giro es en Y para que acompane al volteo
   de la casilla, no lo pelee. */
.mn-art-gem{
  animation:mnGemIn .42s cubic-bezier(.2,1.35,.4,1) both;
}
@keyframes mnGemIn{
  0%   { transform:scale(.35) rotateY(-110deg); opacity:0; }
  60%  { transform:scale(1.12) rotateY(8deg);   opacity:1; }
  100% { transform:scale(1) rotateY(0);         opacity:1; }
}

/* La bomba NO entra suave: aparece de golpe y tiembla. El susto es la mitad
   del juego. */
.mn-art-bomb{
  left:10%; top:10%; width:80%; height:80%;
  animation:mnBombIn .34s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes mnBombIn{
  0%   { transform:scale(.5) rotate(-14deg); opacity:0; }
  55%  { transform:scale(1.18) rotate(6deg); opacity:1; }
  100% { transform:scale(1) rotate(0);       opacity:1; }
}

/* ---- casilla segura: morado con reborde dorado ---- */
.mines-tile.safe{
  background:
    radial-gradient(120% 100% at 50% 15%, rgba(168,85,247,.34), transparent 62%),
    linear-gradient(160deg, rgba(108,43,190,.40), rgba(22,14,36,.72));
  border-color:rgba(196,140,255,.55);
  animation:tileReveal .3s ease;
}

/* Destello que barre la gema al aparecer. Es una banda inclinada que cruza
   una vez; queda mas "joya" que un simple brillo que sube y baja. */
.mines-tile.safe::before{
  content:"";
  position:absolute; inset:0;
  border-radius:10px;
  background:linear-gradient(105deg,
    transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  transform:translateX(-120%);
  animation:mnShine .62s ease-out .16s both;
  pointer-events:none;
  z-index:2;
}
@keyframes mnShine{
  from{ transform:translateX(-120%); }
  to  { transform:translateX(120%); }
}

/* El halo de la revelacion pasa de verde a morado, a juego con la gema. */
.mines-tile.safe::after{
  box-shadow:0 0 0 0 rgba(168,85,247,.55);
  animation:mnSafePulse .5s ease-out;
}
@keyframes mnSafePulse{
  from{ box-shadow:0 0 0 0 rgba(168,85,247,.60); }
  to  { box-shadow:0 0 0 14px rgba(168,85,247,0); }
}

.mines-tile-mult{
  color:#e9c9ff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  z-index:3;
}

/* ---- casilla con mina ---- */
.mines-tile.mine{
  background:
    radial-gradient(120% 100% at 50% 20%, rgba(255,138,40,.22), transparent 60%),
    linear-gradient(160deg, rgba(72,26,110,.62), rgba(18,12,26,.82));
  border-color:rgba(245,185,66,.55);
  animation:tileExplode .4s ease;
}

/* ---- LA EXPLOSION ----
   Se sale de la casilla a proposito: ocupa el triple y desborda por los
   cuatro lados. Por eso el z-index alto y por eso hay que asegurarse de que
   ningun ancestro recorta -- el tablero es un grid sin overflow, verificado.

   Es un span con la imagen de fondo y no un <img> para que no entre en el
   flujo de la casilla ni empuje a la bomba. */
.mn-boom{
  position:absolute;
  left:50%; top:50%;
  width:300%; height:300%;
  margin-left:-150%; margin-top:-150%;
  background:url('assets/mines/explosion.webp') center/contain no-repeat;
  pointer-events:none;
  z-index:6;
  transform-origin:center;
  animation:mnBoom .78s cubic-bezier(.15,.9,.3,1) both;
}
@keyframes mnBoom{
  0%   { transform:scale(.28) rotate(-18deg); opacity:0; }
  18%  { transform:scale(1.06) rotate(-4deg); opacity:1; }
  45%  { transform:scale(1.16) rotate(2deg);  opacity:.95; }
  100% { transform:scale(1.34) rotate(6deg);  opacity:0; }
}

/* La casilla que revento sube por encima de sus vecinas mientras dura el
   estallido; si no, las de la fila siguiente le pisan la mitad del humo. */
.mines-tile.mn-hit{ z-index:7; }

/* Las minas que se destapan al final son testigos, no la culpable: se
   apagan y no explotan. La que acabo la ronda conserva su brillo. */
/* Las minas testigo se apagan solo con opacity, que la resuelve el
   compositor. Antes llevaban grayscale, que obliga a repintar cada pixel:
   con cuatro u ocho minas destapadas a la vez, ese repintado es justo el
   momento en que el tablero da el tirón. */
.mines-tile.mn-passive .mn-art-bomb{
  animation:none;
  opacity:.42;
}
.mines-tile.mine-dim .mn-art-gem{
  animation:none;
  opacity:.5;
}
/* Al destapar el tablero entero no hay destello ni halo: son 24 casillas a
   la vez y aquello parecia una feria. */
.mines-tile.mine-dim::before,
.mines-tile.mine-dim::after{ animation:none; content:none; }

/* ---- casilla sin destapar ----
   Un relieve suave para que el tablero no sea una cuadricula plana antes de
   la primera jugada. */
.mines-tile:not(.revealed){
  background:
    linear-gradient(160deg, rgba(60,40,96,.55), rgba(18,14,28,.75));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.mines-tile:hover:not(.revealed){
  border-color:rgba(196,140,255,.65);
  box-shadow:0 6px 16px -6px rgba(168,85,247,.55), inset 0 1px 0 rgba(255,255,255,.10);
}

@media (prefers-reduced-motion: reduce){
  .mn-art-gem, .mn-art-bomb{ animation:none; }
  .mines-tile.safe::before{ animation:none; content:none; }
  /* La explosion se queda quieta y se desvanece, en vez de crecer. */
  .mn-boom{ animation:mnBoomQuieto .5s linear both; }
  @keyframes mnBoomQuieto{ from{opacity:1;} to{opacity:0;} }
}