@font-face {
  font-family: "Anton Local";
  src: url("/fonts/Anton-Regular.woff2") format("woff2");
  font-display: swap;
}

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(225, 6, 0, 0.18), transparent 55%),
    #07080c;
  color: #f6f1e7;
  font-family: "Segoe UI", sans-serif;
}

body { padding-bottom: 28px; }

.hud {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px 8px;
}

.marca, h1, h2 {
  font-family: "Anton Local", Impact, sans-serif;
  letter-spacing: 0.08em;
  margin: 0;
}

.marca { color: #e10600; font-size: 13px; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 0.9; }
h2 { font-size: 13px; color: #d9c7a2; letter-spacing: 0.14em; margin: 0 0 8px; }

#juegos, .herramientas, .acciones, .fichas { display: flex; flex-wrap: wrap; gap: 8px; }

button {
  font: inherit;
  color: inherit;
  background: #14161c;
  border: 1px solid #3c3428;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
}

button.activa, button.principal:not(:disabled) {
  background: linear-gradient(#ef2a22, #9d0c08);
  border-color: #f0c27a;
  color: #fff;
}

button:disabled { opacity: 0.4; cursor: default; }

.banco {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(#1a140e, #0d0e12);
  border: 1px solid #d4b483;
  border-radius: 16px;
  padding: 8px 14px 8px 8px;
  min-width: 148px;
}

.etiqueta { display: block; font-size: 11px; letter-spacing: 0.16em; color: #d4b483; }
#fichas { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.banco.sube { animation: brillo 0.45s ease; }
.banco.baja { animation: golpe 0.45s ease; }

.moneda {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff1c9, #e0b15a 42%, #8a5a16 70%, #f3d48a 78%, #6b4510);
  box-shadow: inset 0 0 0 3px rgba(80, 40, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.aviso { color: #b7ad9e; max-width: 52rem; margin: 0; padding: 0 18px 12px; line-height: 1.45; }

.mesa { padding: 0 16px 8px; }

.fieltro {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 7px),
    linear-gradient(#14824a, #0a4a2a 70%);
  border: 12px solid #6b4a1e;
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 2px #e6c98a,
    inset 0 0 0 8px #4a3012,
    inset 0 18px 40px rgba(0, 0, 0, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.35);
  min-height: 280px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cartas { display: flex; gap: 10px; min-height: 108px; flex-wrap: wrap; }

.carta, .oculta {
  width: 74px;
  height: 104px;
  border-radius: 10px;
  position: relative;
  background: #f7f3ea;
  color: #161616;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
  animation: reparte 0.28s ease;
}

.carta.roja { color: #c1121f; }

.esquina, .esquina-baja, .centro {
  position: absolute;
  font-weight: 700;
  line-height: 1;
}

.esquina { top: 8px; left: 8px; font-size: 16px; }
.esquina-baja { right: 8px; bottom: 8px; transform: rotate(180deg); font-size: 16px; }
.centro { inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; }

.oculta {
  background:
    repeating-linear-gradient(45deg, #7a1020 0 8px, #4c0b14 8px 16px);
  border: 2px solid #f3d48a;
}

.resultado { min-height: 1.4em; text-align: center; font-size: 20px; margin: 8px 0; }
.resultado.gana { color: #f0d48a; }
.resultado.pierde { color: #ffb4a8; }

.mando { margin-top: 14px; }

.ficha {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  padding: 0;
  font-weight: 700;
  border: 4px dashed rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 0 0 7px rgba(0, 0, 0, 0.18),
    inset 0 0 0 9px rgba(255, 255, 255, 0.28),
    0 6px 10px rgba(0, 0, 0, 0.35);
}

.ficha-blanca { background: #f4f1ea; color: #111; }
.ficha-roja { background: #c1121f; }
.ficha-azul { background: #1d4e89; }
.ficha-verde { background: #1b6b3a; }
.ficha-negra { background: #111; color: #f0d48a; border-color: #f0d48a; }

.ruleta-caja {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: center;
}

.rueda-marco { position: relative; width: 280px; }
#rueda { width: 280px; height: 280px; display: block; }
.puntero {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 16px solid #f0d48a;
  z-index: 2;
}

#tablero {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 6px;
  max-width: 460px;
  margin-top: 14px;
}

#tablero button, #fuera button { border-radius: 8px; min-height: 42px; }
.casilla-roja { background: #8e1524; }
.casilla-negra { background: #12141a; }
.cero { background: #146b38; grid-column: 1 / -1; }
.puesta { box-shadow: inset 0 0 0 2px #f0d48a; }

@keyframes reparte {
  from { transform: translateY(-16px) rotate(-4deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes brillo {
  from { box-shadow: 0 0 0 0 rgba(240, 212, 138, 0.7); }
  to { box-shadow: 0 0 0 12px rgba(240, 212, 138, 0); }
}

@keyframes golpe {
  from { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}

@media (max-width: 860px) {
  .hud, .ruleta-caja { grid-template-columns: 1fr; }
  .rueda-marco, #rueda { width: min(280px, 100%); height: auto; aspect-ratio: 1; }
}

/* Gamerol home visual system: dark, orange, dense and touch-first. */
:root { --g-orange:#ff5a00; --g-orange-soft:#ff8a3d; --g-black:#050505; --g-panel:#0d0b0a; --g-line:#5d2b16; }
html, body { background:radial-gradient(900px 420px at 50% -12%,rgba(255,90,0,.18),transparent 62%),#000; color:#fff; }
body { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.hud { max-width:1180px; margin:0 auto; padding:24px 22px 14px; border-bottom:6px solid var(--g-orange); grid-template-columns:auto 1fr auto auto; }
.marca { color:#fff; font-size:clamp(38px,7vw,78px); line-height:.82; letter-spacing:-.03em; text-shadow:4px 4px 0 var(--g-orange); }
.marca-bloque h1 { font-size:clamp(30px,5vw,56px); color:var(--g-orange); letter-spacing:.02em; }
#juegos button, .herramientas button { border-radius:0; border:1px solid var(--g-line); background:#0b0807; color:#a99b92; text-transform:uppercase; letter-spacing:.08em; }
#juegos button.activa, button.principal:not(:disabled) { background:var(--g-orange); border-color:var(--g-orange); color:#090604; box-shadow:4px 4px 0 #4b1b08; }
.banco { border-radius:0; border:1px solid var(--g-orange); background:#0b0807; min-width:156px; }
.etiqueta { color:var(--g-orange-soft); }.moneda { background:radial-gradient(circle at 35% 35%,#ffe7b0,#ff8a22 45%,#6f2508 75%,#ffb15c); }
.aviso { max-width:1180px; margin:0 auto; padding:10px 22px 14px; color:#b9aaa1; }
.mesa { max-width:1180px; margin:0 auto; padding:0 22px 28px; }
.fieltro { min-height:330px; border:10px solid #50230f; border-radius:2px; background:radial-gradient(circle at 50% 0%,rgba(255,90,0,.16),transparent 48%),repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,transparent 2px 7px),linear-gradient(#19100d,#090706 75%); box-shadow:inset 0 0 0 2px var(--g-orange),inset 0 0 0 7px #1d0c06,0 12px 30px rgba(0,0,0,.55); }
h2 { color:var(--g-orange-soft); letter-spacing:.12em; }.resultado { color:#fff; font-family:"Anton Local",Impact,sans-serif; text-transform:uppercase; letter-spacing:.05em; }.resultado.gana{color:#ffbd7e}.resultado.pierde{color:#ff7054}
.mando, .ruleta-caja { background:rgba(255,90,0,.035); border:1px solid var(--g-line); padding:18px; }
.ficha { width:58px; height:58px; border-radius:50%; border-color:rgba(255,255,255,.75); }
.ficha-roja { background:#a92914; }.ficha-azul{background:#263f61}.ficha-verde{background:#31553b}.ficha-negra{border-color:var(--g-orange-soft);color:var(--g-orange-soft)}
.ruleta-caja { grid-template-columns:minmax(260px,330px) 1fr; gap:28px; background:linear-gradient(135deg,rgba(255,90,0,.08),transparent 45%),#0b0807; }
.rueda-marco { width:min(330px,100%); }.rueda-marco #rueda{width:100%;height:auto;aspect-ratio:1}
.incrementos { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 12px; }
.incremento { min-width:58px; padding:9px 10px; border-radius:0; border:1px solid #744024; background:#130c08; color:#d5b5a0; font-size:12px; }
.incremento:hover, .incremento.seleccionado { background:var(--g-orange); color:#080504; border-color:var(--g-orange); box-shadow:3px 3px 0 #4b1b08; }
#fuera { margin:8px 0 12px; }.acciones button, #tablero button { border-radius:0; border-color:#744024; background:#130c08; }
#tablero { max-width:100%; grid-template-columns:repeat(3,minmax(70px,1fr)); gap:5px; }
#tablero button{font-family:"Anton Local",Impact,sans-serif;font-size:16px;font-weight:400;letter-spacing:.04em;color:#fff;text-shadow:0 1px 2px #000;}
#tablero .casilla-roja{background:linear-gradient(145deg,#d53025,#72120f);border-color:#f16a50;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
#tablero .casilla-negra{background:linear-gradient(145deg,#22252a,#050505);border-color:#777;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#tablero .cero{background:linear-gradient(145deg,#2d9a54,#0d4c29);border-color:#8ddd9c;color:#effff1}
#tablero button:hover{filter:brightness(1.25);transform:translateY(-1px)}
.puesta{box-shadow:inset 0 0 0 3px var(--g-orange),0 0 10px rgba(255,90,0,.5)!important}
@media (max-width:860px){.hud{grid-template-columns:1fr 1fr;gap:14px}.marca-bloque{grid-column:1/-1}.banco{justify-self:stretch}.herramientas{justify-content:flex-end}.ruleta-caja{grid-template-columns:1fr}.rueda-marco{margin:0 auto}.fieltro{min-height:280px}}
@media (max-width:480px){.hud{padding:18px 14px 12px}.mesa{padding-inline:12px}.aviso{padding-inline:14px}.fieltro{padding:15px;border-width:7px}.carta,.oculta{width:62px;height:88px}.cartas{gap:7px}.mando,.ruleta-caja{padding:13px}.ficha{width:52px;height:52px}.incremento{flex:1 0 28%;}.acciones button,#tablero button{min-height:46px;padding:9px 8px}}

@media (max-width:600px){
  html,body{overflow-x:hidden}
  body{padding-bottom:18px}
  .hud{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px 12px 12px;border-bottom-width:4px}
  .marca-bloque{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .marca{font-size:clamp(42px,16vw,68px)}
  .marca-bloque h1{font-size:clamp(30px,10vw,46px)}
  #juegos,.herramientas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #juegos button,.herramientas button{min-height:44px;padding:9px 8px;font-size:12px}
  .banco{width:100%;min-width:0;min-height:58px;justify-content:flex-start;padding:7px 12px}
  #fichas{font-size:25px}
  .aviso{font-size:11px;line-height:1.55;padding:10px 12px 12px}
  .mesa{padding:0 8px 18px}
  .fieltro{min-height:270px;padding:13px;border-width:6px;border-radius:2px}
  .cartas{min-height:92px;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .carta,.oculta{flex:0 0 58px;width:58px;height:82px;border-radius:7px}
  .esquina{top:6px;left:6px;font-size:13px}.esquina-baja{right:6px;bottom:6px;font-size:13px}.centro{font-size:26px}
  .resultado{font-size:17px;margin:6px 0}
  .mando,.ruleta-caja{padding:12px;border-width:1px}
  .mando{margin-top:9px}
  .fichas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .ficha{width:100%;height:auto;aspect-ratio:1;min-width:0;font-size:12px}
  .acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .acciones button{min-height:44px;border-radius:0;padding:9px 6px;font-size:12px}
  .ruleta-caja{gap:14px}
  .rueda-marco{width:min(250px,82vw)}
  .incrementos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 10px}
  .incremento{min-width:0;min-height:42px;padding:8px 3px;font-size:11px}
  #fuera{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 10px}
  #fuera button{min-height:42px;padding:8px 3px;font-size:11px}
  #tablero{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:10px}
  #tablero button{min-height:48px;padding:8px 3px;font-size:15px}
}

/* Anime / cartoon mode ------------------------------------------------ */
:root{--anime-pink:#ff4fc3;--anime-cyan:#55e7ff;--anime-yellow:#ffe45c}
body{background:radial-gradient(800px 420px at 12% 0%,rgba(255,79,195,.18),transparent 60%),radial-gradient(700px 420px at 90% 20%,rgba(85,231,255,.12),transparent 58%),#050308}
.hud{position:relative;border-bottom-color:var(--anime-pink);box-shadow:0 5px 0 rgba(85,231,255,.45)}
.hud::after{content:'★  PLAY MODE  ★';position:absolute;right:22px;bottom:-15px;padding:3px 10px;background:var(--anime-yellow);color:#1c1020;font-family:"Anton Local",Impact,sans-serif;font-size:11px;letter-spacing:.08em;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--anime-pink)}
.marca{text-shadow:4px 4px 0 var(--anime-pink),7px 7px 0 var(--anime-cyan)}
.marca-bloque h1{color:var(--anime-yellow);text-shadow:2px 2px 0 var(--anime-pink)}
#juegos button.activa,button.principal:not(:disabled){background:linear-gradient(135deg,var(--anime-pink),#ff7d5b);border-color:var(--anime-yellow);box-shadow:4px 4px 0 var(--anime-cyan);transform:rotate(-1deg)}
.banco{border-color:var(--anime-cyan);box-shadow:4px 4px 0 rgba(255,79,195,.55)}
.aviso{color:#e9d9ed}
.fieltro{position:relative;overflow:hidden;background:radial-gradient(circle at 18% 16%,rgba(255,79,195,.24),transparent 26%),radial-gradient(circle at 82% 80%,rgba(85,231,255,.18),transparent 28%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 3px,transparent 3px 10px),linear-gradient(145deg,#35154a,#101127 70%);border-color:#772a73;box-shadow:inset 0 0 0 2px var(--anime-cyan),inset 0 0 0 8px #29123b,0 15px 0 rgba(255,79,195,.18),0 22px 40px rgba(0,0,0,.6)}
.fieltro::after{content:'✦  ✧  ★  ✧  ✦';position:absolute;right:22px;top:14px;color:var(--anime-yellow);font-size:18px;letter-spacing:8px;opacity:.75;animation:anime-float 2.4s ease-in-out infinite;pointer-events:none}
h2{color:var(--anime-yellow);text-shadow:2px 2px 0 var(--anime-pink)}
.carta,.oculta{border:3px solid #fff;box-shadow:5px 7px 0 var(--anime-cyan),0 0 12px rgba(255,79,195,.45);transform:rotate(-2deg)}
.carta:nth-child(even){transform:rotate(3deg);box-shadow:5px 7px 0 var(--anime-pink),0 0 12px rgba(85,231,255,.4)}
.oculta{border-color:var(--anime-yellow);background:repeating-linear-gradient(45deg,#ff4f8f 0 8px,#722c78 8px 16px)}
.resultado{color:var(--anime-yellow);text-shadow:2px 2px 0 var(--anime-pink),0 0 12px var(--anime-cyan);animation:anime-bob 1.8s ease-in-out infinite}
.mando,.ruleta-caja{border-color:#6a2c72;background:linear-gradient(135deg,rgba(255,79,195,.12),rgba(85,231,255,.06)),#0c0711;box-shadow:6px 6px 0 rgba(85,231,255,.2)}
.ficha{border-width:4px;box-shadow:inset 0 0 0 7px rgba(0,0,0,.18),inset 0 0 0 9px rgba(255,255,255,.28),0 6px 0 var(--anime-cyan),0 0 12px rgba(255,79,195,.5);transition:transform .15s}
.ficha:hover{transform:translateY(-5px) rotate(8deg) scale(1.08)}
.ruleta-caja{position:relative;overflow:hidden}
.ruleta-caja::after{content:'♥  ♠  ♦  ♣';position:absolute;right:18px;top:12px;color:var(--anime-pink);font-size:16px;letter-spacing:9px;opacity:.7;animation:anime-float 2s ease-in-out infinite reverse;pointer-events:none}
.rueda-marco{width:min(390px,100%);filter:drop-shadow(0 0 14px rgba(85,231,255,.5)) drop-shadow(0 0 20px rgba(255,79,195,.25));animation:wheel-pulse 2.2s ease-in-out infinite}
#rueda{width:100%!important;height:auto!important;aspect-ratio:1}
.puntero{border-top-color:var(--anime-yellow);filter:drop-shadow(0 0 5px var(--anime-pink))}
.incremento,.acciones button,#tablero button{border-color:#71347c;background:linear-gradient(145deg,#1b0e2b,#0d0817);border-radius:10px;transition:transform .14s,filter .14s,box-shadow .14s}
.incremento:hover,.incremento.seleccionado{background:linear-gradient(135deg,var(--anime-pink),#8e4cff);border-color:var(--anime-yellow);box-shadow:3px 3px 0 var(--anime-cyan);transform:translateY(-2px) rotate(-2deg)}
#tablero .casilla-roja{background:linear-gradient(145deg,#f04468,#83133e);border-color:#ff9ab4}
#tablero .casilla-negra{background:linear-gradient(145deg,#23244d,#090813);border-color:#6975aa}
#tablero .cero{background:linear-gradient(145deg,#32b99a,#155d70);border-color:var(--anime-cyan)}
#tablero button:hover{filter:brightness(1.3);transform:translateY(-3px) rotate(-2deg)}
.puesta{box-shadow:inset 0 0 0 3px var(--anime-yellow),0 0 14px var(--anime-pink)!important}
@keyframes wheel-pulse{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.025) rotate(1deg)}}
@keyframes anime-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(4deg)}}
@keyframes anime-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:600px){.hud::after{right:12px;font-size:9px}.rueda-marco{width:min(310px,84vw)}.fieltro::after{right:8px;font-size:13px;letter-spacing:4px}.ruleta-caja::after{right:8px;font-size:12px;letter-spacing:4px}}

/* Candy drop theme ---------------------------------------------------- */
:root{--candy-pink:#ff72bd;--candy-hot:#ff4f9a;--candy-lilac:#b58cff;--candy-mint:#6ff5d0;--candy-yellow:#ffe27a;--candy-ink:#342044}
html,body{background:radial-gradient(650px 360px at 10% -5%,#ffd5ef 0%,transparent 65%),radial-gradient(700px 420px at 100% 15%,#ccefff 0%,transparent 62%),linear-gradient(145deg,#fff0fa,#e9dcff 52%,#d7fdf3);color:var(--candy-ink)}
body{font-family:"Trebuchet MS",ui-rounded,"Arial Rounded MT Bold",sans-serif}
.hud{border-bottom:8px solid var(--candy-pink);box-shadow:0 8px 0 var(--candy-lilac);background:rgba(255,255,255,.42);backdrop-filter:blur(10px)}
.hud::after{background:var(--candy-yellow);color:#6d3760;border-radius:999px;box-shadow:3px 3px 0 var(--candy-hot);font-family:"Trebuchet MS",sans-serif;font-weight:900}
.marca{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-weight:900;color:#fff;text-shadow:4px 4px 0 var(--candy-hot),7px 7px 0 var(--candy-lilac);letter-spacing:-.08em}
.marca-bloque h1{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-weight:900;color:var(--candy-hot);text-shadow:2px 2px 0 #fff;letter-spacing:-.04em}
#juegos button,.herramientas button{border:2px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(255,255,255,.7);color:#744d83;font-weight:900;box-shadow:0 5px 0 rgba(132,84,158,.22)}
#juegos button.activa,button.principal:not(:disabled){background:linear-gradient(135deg,var(--candy-hot),var(--candy-pink));border-color:#fff;color:#fff;box-shadow:0 6px 0 #bd4f91,0 0 18px rgba(255,79,154,.35);transform:none}
.banco{border:2px solid #fff;border-radius:22px;background:linear-gradient(135deg,#fff,#ffe1f2);color:var(--candy-ink);box-shadow:0 6px 0 #bd8bb7}
.etiqueta{color:#9b5785}.moneda{box-shadow:0 5px 0 #c88aa9,0 0 15px rgba(255,114,189,.5)}
.aviso{color:#795c82}
.fieltro{border:10px solid #fff;border-radius:34px;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.6),transparent 25%),linear-gradient(145deg,#ffabd4,#c38eff 55%,#86e8d5);box-shadow:inset 0 0 0 4px var(--candy-pink),inset 0 0 0 10px rgba(255,255,255,.42),0 15px 0 rgba(134,80,168,.22),0 22px 36px rgba(123,77,150,.25)}
.fieltro::after{color:#fff;text-shadow:2px 2px 0 var(--candy-hot)}
h2{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;color:#fff;text-shadow:2px 2px 0 #bd4f91;letter-spacing:.02em}
.carta,.oculta{border:4px solid #fff;border-radius:18px;box-shadow:6px 8px 0 var(--candy-lilac),0 0 18px rgba(255,255,255,.8);color:#392343}
.carta.roja{color:#ec397f}.oculta{border-color:#fff;background:repeating-linear-gradient(45deg,#ff72bd 0 10px,#b58cff 10px 20px)}
.resultado{color:#fff;text-shadow:2px 2px 0 var(--candy-hot),0 0 14px #fff}
.mando,.ruleta-caja{border:2px solid #fff;border-radius:28px;background:rgba(255,255,255,.55);box-shadow:0 8px 0 rgba(132,84,158,.22);backdrop-filter:blur(8px)}
.ficha{border-color:#fff;box-shadow:inset 0 0 0 7px rgba(255,255,255,.28),0 6px 0 rgba(110,71,141,.3),0 0 15px rgba(255,255,255,.7)}
.ficha-blanca{background:#fff4fc;color:#6d3c75}.ficha-roja{background:#ff5b98}.ficha-azul{background:#8ca8ff}.ficha-verde{background:#54dfbd}.ficha-negra{background:#754d99;border-color:#fff;color:#ffe27a}
.ruleta-caja::after{color:#fff;text-shadow:2px 2px 0 var(--candy-hot)}
.rueda-marco{filter:drop-shadow(0 0 18px rgba(255,114,189,.65)) drop-shadow(0 10px 0 rgba(115,76,145,.25))}
.puntero{border-top-color:var(--candy-hot);filter:drop-shadow(0 0 5px #fff)}
.incremento,.acciones button,#tablero button{border:2px solid #fff;border-radius:999px;background:linear-gradient(145deg,#fff,#f9dff4);color:#704477;font-weight:900;box-shadow:0 4px 0 rgba(132,84,158,.25)}
.incremento:hover,.incremento.seleccionado{background:linear-gradient(135deg,var(--candy-hot),var(--candy-lilac));border-color:#fff;color:#fff;box-shadow:0 5px 0 #a35ba9;transform:translateY(-2px)}
#tablero .casilla-roja{background:linear-gradient(145deg,#ff6f9f,#e73575);border-color:#fff;color:#fff}
#tablero .casilla-negra{background:linear-gradient(145deg,#9b83dc,#6550a4);border-color:#fff;color:#fff}
#tablero .cero{background:linear-gradient(145deg,#63eac6,#43bfa9);border-color:#fff;color:#164f51}
#tablero button:hover{filter:brightness(1.08);transform:translateY(-3px) scale(1.02)}
.puesta{box-shadow:inset 0 0 0 4px var(--candy-yellow),0 0 16px var(--candy-pink)!important}
@media(max-width:600px){.hud{border-bottom-width:5px}.fieltro{border-width:7px;border-radius:24px}.mando,.ruleta-caja{border-radius:21px}.incremento,.acciones button,#tablero button{box-shadow:0 3px 0 rgba(132,84,158,.25)}}

/* Candy on black: preserve the playful UI while restoring Gamerol's dark stage. */
html,body{background:radial-gradient(720px 380px at 10% -8%,rgba(255,79,154,.16),transparent 62%),radial-gradient(700px 420px at 95% 12%,rgba(181,140,255,.12),transparent 64%),#000;color:#fff}
.hud{background:rgba(5,3,8,.72)}
.aviso{color:#d6c4d8}

/* Frontier backroom casino: smoke, worn brass, oxblood and timber. */
:root{--west-brass:#c99a53;--west-gold:#f0c778;--west-rust:#7c2a1c;--west-red:#b3271d;--west-wood:#24130e;--west-paper:#ead8b7;--west-dim:#b7a58c}
html,body{background:radial-gradient(ellipse at 18% 7%,rgba(106,52,30,.33),transparent 36%),radial-gradient(ellipse at 86% 22%,rgba(76,82,79,.2),transparent 40%),linear-gradient(180deg,#080706,#100b08 42%,#050404);color:var(--west-paper)}
body{font-family:Georgia,"Times New Roman",serif;position:relative;isolation:isolate}
body::before{content:"";position:fixed;z-index:-1;inset:-20%;pointer-events:none;background:radial-gradient(ellipse at 22% 38%,rgba(202,205,199,.055),transparent 22%),radial-gradient(ellipse at 63% 60%,rgba(202,205,199,.045),transparent 25%),radial-gradient(ellipse at 84% 18%,rgba(202,205,199,.04),transparent 19%);filter:blur(32px);animation:west-smoke 18s ease-in-out infinite alternate}
body::after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.15;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(214,176,111,.025) 5px 6px),radial-gradient(ellipse at center,transparent 42%,#000 100%)}
.hud{max-width:none;padding:18px clamp(14px,3vw,42px) 14px;background:linear-gradient(180deg,rgba(30,17,11,.95),rgba(9,7,6,.92));border-bottom:4px solid var(--west-brass);box-shadow:0 2px 0 #44291a,0 11px 28px #000;backdrop-filter:none}
.hud::after{content:"♠  NO CREDIT • NO MERCY  ♣";bottom:-15px;right:clamp(12px,3vw,42px);padding:4px 12px;background:#21130e;border:1px solid var(--west-brass);border-radius:2px;color:var(--west-gold);font-family:Georgia,serif;font-size:10px;letter-spacing:.12em;transform:rotate(-1deg);box-shadow:3px 3px 0 #080605}
.marca{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,6vw,64px);font-weight:900;line-height:.88;letter-spacing:-.06em;color:#e8d4ad;text-shadow:2px 2px 0 #59251b,4px 5px 0 #090605,0 0 14px rgba(201,154,83,.22)}
.marca-bloque h1{font-family:Georgia,serif;font-size:clamp(28px,4vw,43px);font-weight:900;letter-spacing:.16em;color:var(--west-red);text-shadow:1px 2px 0 #080605,0 0 14px rgba(179,39,29,.35)}
#juegos button,.herramientas button{min-height:42px;border:1px solid #69472e;border-radius:2px;background:linear-gradient(180deg,#24150f,#0d0907);color:#c8b18d;font-family:Georgia,serif;font-weight:700;letter-spacing:.09em;text-transform:uppercase;box-shadow:inset 0 1px rgba(255,226,174,.09),0 4px 0 #050403}
#juegos button.activa,button.principal:not(:disabled){background:linear-gradient(180deg,#bd3725,#65170f);border-color:var(--west-gold);color:#fff0cf;box-shadow:inset 0 1px rgba(255,225,170,.25),0 4px 0 #32110c,0 0 12px rgba(179,39,29,.25);transform:none}
.banco{border:1px solid var(--west-brass);border-radius:3px;background:linear-gradient(135deg,#2a1c12,#090706);color:var(--west-paper);box-shadow:inset 0 0 0 2px rgba(201,154,83,.12),0 5px 0 #050403}
.etiqueta{color:var(--west-gold);font-family:Georgia,serif;letter-spacing:.12em;text-transform:uppercase}.moneda{background:radial-gradient(circle at 33% 28%,#fff0bb,#c99a53 42%,#815123 69%,#38210e 78%,#dfb96e 88%);box-shadow:inset 0 0 0 3px rgba(49,27,8,.65),0 3px 0 #050403,0 0 12px rgba(201,154,83,.23)}
.aviso{max-width:1180px;margin:0 auto;padding:16px 22px;color:#b9aa92;font-family:Georgia,serif;font-size:13px;font-style:italic;letter-spacing:.025em}
.mesa{max-width:1240px;margin:0 auto;padding:0 clamp(10px,2vw,22px) 24px}
.fieltro{min-height:340px;border:12px solid #382319;border-radius:5px;background:radial-gradient(ellipse at 50% 15%,rgba(122,40,27,.2),transparent 48%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),linear-gradient(145deg,#17251b,#0a1510 65%,#10100b);box-shadow:inset 0 0 0 2px var(--west-brass),inset 0 0 0 8px #21160f,inset 0 22px 45px rgba(0,0,0,.35),0 10px 0 #080605,0 20px 35px rgba(0,0,0,.6)}
.fieltro::after{content:"✦   FRONTIER SALOON   ✦";top:16px;right:19px;color:rgba(226,193,131,.52);font-family:Georgia,serif;font-size:10px;font-weight:700;letter-spacing:.2em;text-shadow:1px 2px #000;animation:none}
h2{font-family:Georgia,serif;color:var(--west-gold);font-size:14px;font-weight:700;font-style:italic;letter-spacing:.13em;text-shadow:1px 2px #000}
.carta,.oculta{border:1px solid #a58a5d;border-radius:4px;background:linear-gradient(135deg,#f2e5c9,#d9c7a4);box-shadow:3px 5px 0 #050403,0 0 0 3px rgba(201,154,83,.17);color:#22160f;transform:none}
.carta:nth-child(even){transform:rotate(1deg);box-shadow:3px 5px 0 #050403,0 0 0 3px rgba(201,154,83,.17)}
.carta.roja{color:#9c251c}.oculta{border-color:var(--west-gold);background:repeating-linear-gradient(45deg,#5b1d17 0 7px,#2a100d 7px 14px)}
.resultado{font-family:Georgia,serif;color:var(--west-gold);font-size:clamp(20px,3vw,28px);font-weight:900;font-style:italic;letter-spacing:.04em;text-transform:uppercase;text-shadow:1px 2px 0 #000,0 0 14px rgba(201,154,83,.3);animation:none}
.resultado.gana{color:#f2d489}.resultado.pierde{color:#e27b63}
.mando,.ruleta-caja{border:1px solid #68472e;border-radius:3px;background:linear-gradient(135deg,rgba(61,37,22,.7),rgba(10,8,7,.95));box-shadow:inset 0 1px rgba(255,221,169,.08),0 6px 0 #050403;backdrop-filter:none}
.ruleta-caja{grid-template-columns:minmax(320px,440px) 1fr;gap:clamp(16px,3vw,36px);padding:clamp(16px,3vw,30px)}
.ruleta-caja::after{content:"♠  ♦  ♣  ♥";color:rgba(217,185,129,.58);font-family:Georgia,serif;letter-spacing:.35em;animation:none}
.rueda-marco{width:min(440px,100%);filter:drop-shadow(0 8px 0 #050403) drop-shadow(0 0 15px rgba(201,154,83,.19));animation:none}
.puntero{border-top-color:var(--west-gold);filter:drop-shadow(0 2px 1px #000)}
.incremento,.acciones button,#tablero button{border:1px solid #75563a;border-radius:3px;background:linear-gradient(180deg,#382519,#140d09);color:#e2c99e;font-family:Georgia,serif;font-weight:700;box-shadow:inset 0 1px rgba(255,231,192,.11),0 4px 0 #060403;transition:transform .12s,filter .12s,box-shadow .12s}
.incremento:hover,.incremento.seleccionado{background:linear-gradient(180deg,#c6442b,#711b13);border-color:var(--west-gold);color:#fff0d2;box-shadow:inset 0 1px rgba(255,231,192,.2),0 4px 0 #35110c;transform:translateY(-1px)}
#fuera button{background:linear-gradient(180deg,#2c1c13,#110b08);border-color:#75563a;color:#dfc49b}
#tablero .casilla-roja{background:linear-gradient(145deg,#a52c20,#541710);border-color:#c17b4b;color:#f8e5c7}
#tablero .casilla-negra{background:linear-gradient(145deg,#282622,#090807);border-color:#76624a;color:#ead8b7}
#tablero .cero{background:linear-gradient(145deg,#31533b,#14281b);border-color:#9b8a58;color:#f3e5c8}
#tablero button:hover{filter:brightness(1.2);transform:translateY(-2px)}
.puesta{box-shadow:inset 0 0 0 2px var(--west-gold),0 0 12px rgba(201,154,83,.32)!important}
.ficha{border:3px dashed rgba(245,221,180,.9);box-shadow:inset 0 0 0 7px rgba(0,0,0,.23),inset 0 0 0 9px rgba(255,255,255,.18),0 5px 0 #050403;transition:transform .12s}
.ficha:hover{transform:translateY(-3px) rotate(4deg)}
.ficha-blanca{background:#e8dfca;color:#292016}.ficha-roja{background:#9d2e23}.ficha-azul{background:#364a5d}.ficha-verde{background:#3a6341}.ficha-negra{background:#141210;border-color:var(--west-gold);color:var(--west-gold)}
@keyframes west-smoke{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.08)}}
@media(max-width:860px){.ruleta-caja{grid-template-columns:1fr}.rueda-marco{width:min(400px,100%);margin:0 auto}}
@media(max-width:600px){
 .hud{gap:9px;padding:15px 12px 12px;border-bottom-width:3px}.hud::after{right:12px;bottom:-13px;padding:3px 8px;font-size:8px;letter-spacing:.08em}
 .marca{font-size:clamp(36px,13vw,56px);text-shadow:2px 2px #59251b,4px 4px #090605}.marca-bloque h1{font-size:clamp(25px,9vw,38px);letter-spacing:.12em}
 #juegos button,.herramientas button{min-height:44px;padding:8px 5px;font-size:11px;letter-spacing:.06em}.banco{min-height:58px}
 .aviso{padding:12px 13px 14px;font-size:12px;line-height:1.5}.mesa{padding:0 8px 17px}
 .fieltro{min-height:270px;padding:14px;border-width:7px}.fieltro::after{top:8px;right:9px;font-size:8px;letter-spacing:.1em;opacity:.7}
 .ruleta-caja{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:13px;border-radius:4px}.ruleta-caja::after{top:9px;right:10px;font-size:11px;letter-spacing:.17em}
 .rueda-marco{width:min(350px,92vw);margin:2px auto 4px}.puntero{top:3px;border-left-width:7px;border-right-width:7px;border-top-width:14px}
 .incrementos{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:2px 0 8px}.incremento{min-height:46px;padding:7px 3px;font-size:12px}
 #fuera{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.acciones button,#fuera button{min-height:46px;font-size:12px}
 #tablero{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:9px}#tablero button{min-height:50px;font-size:16px}
 .mando{padding:13px}.fichas{gap:8px}.ficha{width:100%;height:auto;aspect-ratio:1}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}