:root[data-theme="es"] {
color-scheme: light;
--bg-mode: css;
--bg-top: #1B1230; --bg-bottom: #1B1230; --stripe-opacity: 0;
--ink: #1B1230; --night: #1B1230; --cream: #FBEFD2; --paper: #FBEFD2;
--cabinet: #FF3EA5; --cabinet-dark: #1B1230; --mustard: #FFD400; --mustard-dark: #1B1230;
--teal: #00C2A8; --teal-dark: #1B1230; --led: #1B1230; --led-red: #1B1230;
--lamp-0: #FF3EA5; --lamp-1: #00C2A8; --lamp-2: #FFD400; --lamp-3: #FBEFD2; --lamp-off: #4A3A63;
--dark-face: #FBEFD2; --dark-edge: #1B1230; --tile-base: #FBEFD2; --tile-stripe: #1B1230; --tile-text: #1B1230; --amida-lamp: #FF3EA5;
--ink-dim: #4A3A63; --line: #1B1230; --focus: #FFD400; --pink-deep: #D81B7A;
--font-px: "Silkscreen", ui-monospace, monospace;
--font-vt: "VT323", ui-monospace, monospace;
--font-title: var(--font-px); --font-led: var(--font-px); --font-rounded: var(--font-vt); --font-body: var(--font-vt);
--wheel-count: 5;
--wheel-0: #FF3EA5; --wheel-0-text: #1B1230;
--wheel-1: #FBEFD2; --wheel-1-text: #1B1230;
--wheel-2: #00C2A8; --wheel-2-text: #1B1230;
--wheel-3: #FFD400; --wheel-3-text: #1B1230;
--wheel-4: #241936; --wheel-4-text: #FBEFD2;
--wheel-font: "VT323", monospace; --wheel-name-font: "Silkscreen", monospace; --wheel-weight: 400;
--wheel-line: #1B1230; --wheel-rim: #FF3EA5; --wheel-rim-bg: #1B1230; --wheel-lamps: 0;
--wheel-win: #FFD400; --wheel-win-text: #1B1230; --wheel-win-edge: #FBEFD2; --wheel-dim: rgba(27, 18, 48, 0.6);
--wheel-hub-bg: #FFD400; --wheel-hub-ring: #1B1230; --wheel-hub-ink: #1B1230; --wheel-hub-font: "Silkscreen", monospace;
--wheel-pointer: #FBEFD2; --wheel-pointer-edge: #1B1230; --wheel-pointer-blur: 0;
}
:root[data-machine="es"] {
--rg-font: "VT323", ui-monospace, monospace;
--rg-font-title: "Silkscreen", ui-monospace, monospace;
--rg-fs: 24px; --rg-fs-m: 24px; --rg-fs-l: 32px; --rg-lh: 1.2; --rg-track: 0;
--rg-dot: 3px;
--rg-screen: #1B1230; --rg-win: #FBEFD2; --rg-ink: #1B1230; --rg-dim: #4A3A63;
--rg-line: #1B1230; --rg-line2: #1B1230;
--rg-hi: #D81B7A; --rg-cur: #D81B7A; --rg-btn: #FFD400; --rg-btn-ink: #1B1230; --rg-shade: #FF3EA5;
--rg-win-border: 3px solid #1B1230;
--rg-win-shadow: inset 0 0 0 3px #FBEFD2, inset 0 0 0 6px #1B1230, 6px 6px 0 #FF3EA5;
--rg-win-pad: 16px 18px;
}
:root[data-machine="es"] body { background: #1B1230 !important; color: #FBEFD2 !important; }
:root[data-machine="es"] .es-grain { display: none; }
:root[data-machine="es"] .es-pennants { top: 0; left: 50%; width: var(--rg-w, 321px); max-width: none; height: var(--rg-h, 39px); transform: translateX(-50%); }
:root[data-machine="es"] .es-crowd { display: none; }
:root[data-machine="es"] .stage { padding-top: 40px; }
@media (max-width: 639px) {
:root[data-machine="es"] .es-pennants { display: none; }
:root[data-machine="es"] .stage::before { content: ""; position: absolute; top: 0; left: 50%; width: 321px; height: 39px; transform: translateX(-50%); pointer-events: none;
background: url("pixel/es/pennants.png") 0 0 / 321px 39px no-repeat; image-rendering: crisp-edges; image-rendering: pixelated; }
}
@media (min-width: 640px) {
:root[data-machine="es"] .stage { margin-top: 76px; padding-top: 0; background: #1B1230; border-radius: 0;
box-shadow: 0 0 0 3px #1B1230, 0 0 0 6px #FFD400, 0 0 0 9px #1B1230, 9px 9px 0 9px #FF3EA5; }
:root[data-machine="es"] .stage::before, :root[data-machine="es"] .stage::after { display: none; }
}
:root[data-machine="es"] :focus-visible { outline: 3px solid #0047FF; outline-offset: 2px; box-shadow: 0 0 0 2px #FBEFD2; }
:root[data-machine="es"] :is(main, .overlay) :focus-visible { outline: 3px solid #FFD400; outline-offset: 3px; box-shadow: 0 0 0 3px #1B1230; }
:root[data-machine="es"] :is(.panel, .row, .seg, .confirm, .result-card, .toast, .settings, .field) :focus-visible { outline-color: #D81B7A; box-shadow: none; }
:root[data-machine="es"] .es-mask:focus-visible { outline: 3px solid #FFD400; outline-offset: -9px; }
:root[data-machine="es"] a { color: inherit; text-decoration-color: #FF3EA5; text-decoration-thickness: 3px; }
:root[data-machine="es"] .es-head { position: relative; gap: 12px; justify-items: stretch; padding-bottom: 36px; }
:root[data-machine="es"] .es-head > .rg-title { order: 0; }
:root[data-machine="es"] .es-head > .es-kicker { order: 1; }
:root[data-machine="es"] .es-head > .es-title { order: 2; }
:root[data-machine="es"] .es-head > .home-line { order: 3; }
:root[data-machine="es"] .es-head > .home-sub-line { order: 4; }
:root[data-machine="es"] .es-head > .rg-start { order: 5; }
:root[data-machine="es"] .rg-title { gap: 4px; }
:root[data-machine="es"] .rg-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0 10px; font: 400 16px/1 var(--font-px); color: #FBEFD2; }
:root[data-machine="es"] .rg-hud-i[data-i="0"], :root[data-machine="es"] .rg-hud-i[data-i="2"] { display: grid; gap: 6px; }
:root[data-machine="es"] .rg-hud-i[data-i="2"] { justify-items: end; }
:root[data-machine="es"] .rg-hud-i[data-i="0"]::before, :root[data-machine="es"] .rg-hud-i[data-i="2"]::before {
content: ""; justify-self: stretch; height: 18px; border: 3px solid #FBEFD2; box-shadow: 3px 3px 0 #FF3EA5;
background: linear-gradient(180deg, #FFFFFF 0 3px, #FFD400 3px 9px, #FF3EA5 9px); }
:root[data-machine="es"] .rg-hud-i[data-i="1"] { align-self: center; font: 400 32px/1 var(--font-px); color: #FFD400; text-shadow: none; }
:root[data-machine="es"] .es-kicker { margin: 6px 0 0; text-align: center; font: 400 16px/1 var(--font-px); letter-spacing: 0.08em; color: #F2DDB0; }
:root[data-machine="es"] .es-title { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 144px auto; align-items: center; justify-items: center;
margin: 0; padding: 0; border: 3px solid #FBEFD2; box-shadow: 6px 6px 0 #FF3EA5; image-rendering: crisp-edges; image-rendering: pixelated;
background:
linear-gradient(180deg, transparent 144px, #241936 144px) 0 0 / 100% 100% no-repeat,
url("pixel/es/ring-ropes.png") 50% 96px / 240px 66px no-repeat,
linear-gradient(104deg, #00C2A8 0 50%, #FF3EA5 50% 100%) 0 0 / 100% 100% no-repeat; }
:root[data-machine="es"] .es-title::before, :root[data-machine="es"] .es-title::after {
content: ""; grid-row: 1; width: 135px; height: 135px; align-self: end; image-rendering: crisp-edges; image-rendering: pixelated;
background: url("pixel/es/mask-01-ol.png") 0 0 / 135px 135px no-repeat; }
:root[data-machine="es"] .es-title::before { grid-column: 1; }
:root[data-machine="es"] .es-title::after { grid-column: 3; background-image: url("pixel/es/mask-02-ol.png"); }
:root[data-machine="es"] .es-t { grid-row: 2; padding: 9px 4px 9px; font: 400 24px/1 var(--font-px); letter-spacing: 0; color: #FBEFD2; text-shadow: none; white-space: nowrap; }
:root[data-machine="es"] .es-t:first-of-type { grid-column: 1; }
:root[data-machine="es"] .es-t:last-of-type { grid-column: 3; position: static; left: auto; top: auto; color: #FFD400; text-shadow: none; }
:root[data-machine="es"] .es-t:last-of-type::after { content: none; }
:root[data-machine="es"] .es-vs { grid-column: 2; grid-row: 1 / span 2; z-index: 1; width: auto; height: auto; padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none;
font: 400 40px/1 var(--font-px); letter-spacing: 0; color: #FFD400;
text-shadow: 3px 0 0 #1B1230, -3px 0 0 #1B1230, 0 3px 0 #1B1230, 0 -3px 0 #1B1230, 3px 3px 0 #1B1230, -3px -3px 0 #1B1230, 3px -3px 0 #1B1230, -3px 3px 0 #1B1230, 6px 6px 0 #1B1230; }
:root[data-machine="es"] .es-ring { display: none; }
:root[data-machine="es"] .home-line { margin: 0; padding: 14px 18px 2px; border: 3px solid #1B1230; border-bottom: 0;
box-shadow: inset 3px 3px 0 #FBEFD2, inset -3px 0 0 #FBEFD2, inset 6px 6px 0 #1B1230, inset -6px 0 0 #1B1230, 6px 6px 0 #FF3EA5;
font: 400 24px/1.2 var(--font-vt); color: #1B1230; text-align: left; }
:root[data-machine="es"] .home-sub-line { margin: -12px 0 0; padding: 4px 18px 16px; border: 3px solid #1B1230; border-top: 0; background: #FBEFD2;
box-shadow: inset 3px 0 0 #FBEFD2, inset -3px -3px 0 #FBEFD2, inset 6px 0 0 #1B1230, inset -6px -6px 0 #1B1230, 6px 6px 0 #FF3EA5;
font: 400 24px/1.2 var(--font-vt); color: #4A3A63; text-align: left; }
:root[data-machine="es"] .plaque { display: none; }
:root[data-machine="es"] .rg-start { display: grid; gap: 10px; justify-items: center; margin: 6px 0 0; }
:root[data-machine="es"] .rg-press { font: 400 16px/1 var(--font-px); letter-spacing: 0.08em; color: #FBEFD2; cursor: pointer; }
:root[data-machine="es"] .rg-cont { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; font: 400 24px/1 var(--font-vt); color: #F2DDB0; }
:root[data-machine="es"] .rg-cont-k::before { content: "◆"; margin-right: 8px; font: 400 16px/1 "DotGothic16 Sym", var(--font-vt); color: #00C2A8; }
:root[data-machine="es"] .rg-proto { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 400 24px/1 var(--font-vt); letter-spacing: 0.04em; color: #F2DDB0; }
:root[data-machine="es"] .home-question { margin: 4px 0 -4px; text-align: center; font: 400 24px/1.25 var(--font-px); color: #FFD400; text-shadow: none; }
:root[data-machine="es"] .tiles { padding: 0; gap: 12px; border: 0; box-shadow: none; background: transparent; }
:root[data-machine="es"] .tile { min-height: 0; padding: 0; gap: 0; display: grid; grid-template-rows: auto auto; align-content: stretch; justify-items: stretch;
border: 3px solid #FBEFD2; background: #1B1230; color: #FBEFD2; box-shadow: 6px 6px 0 #FF3EA5; }
:root[data-machine="es"] .tile-emoji { display: grid; place-items: center; height: 120px; font-size: 16px; border-bottom: 3px solid #1B1230; background: #00C2A8; }
:root[data-machine="es"] .tile[data-cat="topic"] .tile-emoji { background: #FFD400; }
:root[data-machine="es"] .tile[data-cat="food"] .tile-emoji { background: #FF3EA5; }
:root[data-machine="es"] .tile[data-cat="travel"] .tile-emoji { background: #626AE9; }
:root[data-machine="es"] .tile-emoji img, :root[data-machine="es"] .tile-emoji .cat-ico.rg-px { width: 96px !important; height: 96px !important; margin: 0; }
:root[data-machine="es"] .tile-title { display: block; padding: 10px 6px 11px; font: 400 16px/1.25 var(--font-px); letter-spacing: 0; text-transform: uppercase; text-align: center; color: #FBEFD2; }
:root[data-machine="es"] .tile::before { content: "1P" / ""; left: -3px; top: -3px; transform: none; padding: 4px 6px 3px; font: 400 16px/1 var(--font-px); color: #1B1230; background: #FFD400; }
:root[data-machine="es"] .tile:is(:hover, :focus-visible, .is-cur) { border-color: #FFD400; }
:root[data-machine="es"] .tile:is(:hover, :focus-visible, .is-cur) .tile-title { color: #FFD400; }
:root[data-machine="es"] .tile:focus-visible { outline: 3px solid #FFD400; outline-offset: 3px; }
:root[data-machine="es"] .tile-tag { display: none; }
:root[data-machine="es"] .btn { min-height: 56px; padding: 10px 14px 10px 40px; border: 3px solid #1B1230; box-shadow: 6px 6px 0 #FF3EA5; font: 400 16px/1.25 var(--font-px); text-transform: uppercase; }
:root[data-machine="es"] .btn::before { left: 14px; }
:root[data-machine="es"] .btn-teal { --face: #00C2A8; --edge: #1B1230; --fg: #1B1230; }
:root[data-machine="es"] .btn-teal::before { color: #1B1230; }
:root[data-machine="es"] .btn-arcade { --face: #FFD400; --edge: #1B1230; --fg: #1B1230; font-size: 24px; }
:root[data-machine="es"] .btn-row { gap: 14px; }
:root[data-machine="es"] .home > .btn-row { flex-direction: column; }
:root[data-machine="es"] .btn-row .btn { box-shadow: 6px 6px 0 #FF3EA5; }
:root[data-machine="es"] .btn .emo { font-family: var(--font-px); }
:root[data-machine="es"] .home-foot { margin: 6px 0 0; font: 400 24px/1.2 var(--font-vt); color: #F2DDB0; }
:root[data-machine="es"] .today-card { display: grid; gap: 4px; padding: 14px 18px; }
:root[data-machine="es"] .today-label { font: 400 16px/1.2 var(--font-px); letter-spacing: 0; text-transform: uppercase; color: #1B1230; opacity: 1; }
:root[data-machine="es"] .today-text { font: 400 32px/1.1 var(--font-vt); color: #1B1230; }
:root[data-machine="es"] .today-text .today-ico { width: 48px; height: 48px; vertical-align: -12px; }
:root[data-machine="es"] .led { padding: 12px 16px; border: 3px solid #1B1230; background: #00C2A8; color: #1B1230; box-shadow: inset 0 0 0 3px #00C2A8, inset 0 0 0 6px #1B1230, 6px 6px 0 #FF3EA5;
font: 400 24px/1.25 var(--font-px) !important; text-align: left; text-transform: uppercase; }
html:root[data-machine="es"] .led .led-ico { width: 48px; height: 48px; margin: 0 10px 0 0; vertical-align: -14px; }
html:root[data-machine="es"] .tn-tag { padding: 6px 14px 6px 8px; border: 3px solid #FBEFD2; border-radius: 0; background: #241936; color: #FBEFD2; box-shadow: 4px 4px 0 #FF3EA5;
font: 400 24px/1.1 var(--font-vt); letter-spacing: 0; }
html:root[data-machine="es"] .tn-place { font: 400 16px/1 var(--font-px); letter-spacing: 0; text-transform: uppercase; color: #FFD400; }
:root[data-machine="es"] .section-title { font: 400 24px/1.25 var(--font-px); color: #FBEFD2; text-transform: uppercase; text-shadow: none; }
:root[data-machine="es"] .cat-line { margin: 0; font: 400 24px/1.2 var(--font-vt); color: #F2DDB0; }
:root[data-machine="es"] .chip { min-height: 44px; padding: 7px 12px 6px; border: 3px solid #F2DDB0; background: #241936; color: #F2DDB0; font: 400 16px/1.25 var(--font-px); text-transform: uppercase; }
:root[data-machine="es"] .chip[aria-pressed="true"]:not(.chip-cand) { background: #FBEFD2; color: #1B1230; border-color: #FBEFD2; box-shadow: 4px 4px 0 #FF3EA5; }
:root[data-machine="es"] .chip[aria-pressed="true"]:not(.chip-cand)::before { content: "✓ " / ""; font-family: var(--font-vt); }
:root[data-machine="es"] .quickspin .btn { min-height: 64px; }
:root[data-machine="es"] .btn-grid { gap: 14px; }
:root[data-machine="es"] .btn-method { display: grid; grid-template-columns: 1fr; align-content: start; justify-items: start; row-gap: 6px; min-height: 120px; padding: 12px 12px 12px 34px; text-transform: none; }
:root[data-machine="es"] .btn-method::before { left: 10px; top: 52px; }
:root[data-machine="es"] .btn-method .btn-tag { margin: 0; padding: 3px 6px 2px; background: #1B1230; color: #FBEFD2; font: 400 16px/1 var(--font-px); letter-spacing: 0; }
:root[data-machine="es"] .btn-method .btn-label { font: 400 16px/1.25 var(--font-px); text-transform: uppercase; }
:root[data-machine="es"] .btn-method .btn-flavor { font: 400 24px/1.05 var(--font-vt); color: #4A3A63; }
:root[data-machine="es"] .btn-method .btn-sub { margin-top: 2px; padding: 2px 6px 1px; background: #00C2A8; color: #1B1230; font: 400 24px/1 var(--font-vt); text-transform: uppercase; }
:root[data-machine="es"] .btn-method.is-rec { border-width: 6px; padding: 9px 15px 9px 31px; box-shadow: inset 0 0 0 3px #FBEFD2, inset 0 0 0 6px #1B1230, 6px 6px 0 #FF3EA5; }
:root[data-machine="es"] .btn-method.is-rec::before { left: 7px; top: 49px; }
:root[data-machine="es"] .btn-method:is(:hover, :focus-visible, .is-cur) .btn-label { text-decoration: underline; text-decoration-color: #D81B7A; text-decoration-thickness: 3px; text-underline-offset: 4px; }
:root[data-machine="es"] .panel h2 { font: 400 24px/1.25 var(--font-px) !important; color: #1B1230 !important; text-transform: uppercase; }
:root[data-machine="es"] .panel .chip { background: #FFFFFF; color: #1B1230; border-color: #1B1230; text-transform: none; font: 400 24px/1 var(--font-vt); padding: 8px 12px 7px; }
:root[data-machine="es"] .panel .chip.is-struck { background: transparent; border-style: dashed; color: #4A3A63; }
:root[data-machine="es"] .linkish { color: #1B1230; font: 400 24px/1.1 var(--font-vt); text-decoration: underline; text-decoration-color: #D81B7A; text-decoration-thickness: 3px; text-underline-offset: 3px; }
:root[data-machine="es"] :is(.note, .small, .muted) { font-family: var(--font-vt); font-size: 24px; line-height: 1.2; }
:root[data-machine="es"] .panel :is(.small, .muted, .note) { color: #4A3A63; }
:root[data-machine="es"] .warn { font: 400 24px/1.2 var(--font-vt); color: #FFD400; }
:root[data-machine="es"] .topic-item { font: 400 24px/1.25 var(--font-vt); color: #1B1230; }
:root[data-machine="es"] .topic-item.is-struck { color: #4A3A63; }
:root[data-machine="es"] .draw-stage::before { content: "ROUND 1" / ""; order: -2; align-self: stretch; padding: 0 0 2px; text-align: center; font: 400 24px/1 var(--font-px); color: #FBEFD2;
background:
linear-gradient(180deg, transparent 5px, #FFFFFF 5px 8px, #FFD400 8px 13px, #FF3EA5 13px 17px, transparent 17px) 3px 0 / calc(50% - 82px) 24px no-repeat,
linear-gradient(180deg, transparent 5px, #FFFFFF 5px 8px, #FFD400 8px 13px, #FF3EA5 13px 17px, transparent 17px) calc(100% - 3px) 0 / calc(50% - 82px) 24px no-repeat,
linear-gradient(180deg, transparent 2px, #FBEFD2 2px 20px, transparent 20px) 0 0 / calc(50% - 76px) 24px no-repeat,
linear-gradient(180deg, transparent 2px, #FBEFD2 2px 20px, transparent 20px) 100% 0 / calc(50% - 76px) 24px no-repeat; }
:root[data-machine="es"] .draw-stage::after { content: "¡DECIDE!" / ""; order: -1; margin: -4px 0 0; font: 400 40px/1 var(--font-px); color: #FFD400;
text-shadow: 3px 0 0 #1B1230, -3px 0 0 #1B1230, 0 3px 0 #1B1230, 0 -3px 0 #1B1230, 6px 6px 0 #FF3EA5; }
html:root[data-machine="es"] .picked-note { font: 400 24px/1.1 var(--font-vt); letter-spacing: 0; color: #F2DDB0; }
:root[data-machine="es"] .draw .led, :root[data-machine="es"] .draw-stage .led { align-self: stretch; background: #FBEFD2; box-shadow: var(--rg-win-shadow);
font: 400 24px/1.15 var(--font-vt) !important; text-transform: none; text-align: center; padding: 12px 16px; }
:root[data-machine="es"] .draw-stage > .btn-arcade, :root[data-machine="es"] .draw-stage .btn-row { align-self: stretch; }
:root[data-machine="es"] .draw-stage .panel h2 { font: 400 16px/1.25 var(--font-px) !important; color: #1B1230 !important; text-transform: uppercase; }
:root[data-machine="es"] .die { border-radius: 0; background: #FBEFD2; border: 3px solid #1B1230; box-shadow: inset 0 0 0 3px #FBEFD2, inset 0 0 0 6px #1B1230, 6px 6px 0 #FF3EA5; }
:root[data-machine="es"] .die-mini { box-shadow: none; border-width: 3px; }
:root[data-machine="es"] .pip { border-radius: 0; background: #1B1230; }
:root[data-machine="es"] .pip.one { border-radius: 0; background: #FF3EA5; border: 3px solid #1B1230; }
:root[data-machine="es"] .dice-table li { border-radius: 0; font: 400 24px/1.1 var(--font-vt); color: #1B1230; }
:root[data-machine="es"] .dice-table li.is-landed { background: #FFD400; color: #1B1230; outline: 3px solid #1B1230; }
:root[data-machine="es"] .card-face { border-radius: 0; border: 3px solid #1B1230; box-shadow: 6px 6px 0 #FF3EA5; }
:root[data-machine="es"] .card-back { background: #241936; }
:root[data-machine="es"] .card-back::before { inset: 9px; border-radius: 0; border: 3px solid #FBEFD2; background: url("pixel/es/mask-03.png") center 30% / 129px 129px no-repeat; image-rendering: crisp-edges; image-rendering: pixelated; }
:root[data-machine="es"] .card-back::after { display: none; }
:root[data-machine="es"] .card-emblem { align-self: end; margin-bottom: 18%; background: transparent; }
:root[data-machine="es"] .card-emblem b { font: 400 40px/1 var(--font-px); color: #FFD400; text-shadow: none; }
:root[data-machine="es"] .card-emblem i { display: block; font: 400 16px/1 var(--font-px); font-style: normal; color: #FBEFD2; }
:root[data-machine="es"] .card-front { background: #FBEFD2; }
:root[data-machine="es"] .card-front::after { inset: 6px; border: 3px solid #1B1230; border-radius: 0; }
:root[data-machine="es"] .card-kicker { font: 400 16px/1 var(--font-px); color: #1B1230; background: #FFD400; padding: 5px 10px 4px; border: 3px solid #1B1230; letter-spacing: 0; }
:root[data-machine="es"] .card-text { font: 400 32px/1.05 var(--font-vt); color: #1B1230; text-transform: none; letter-spacing: 0; }
:root[data-machine="es"] .card-ico, :root[data-machine="es"] .card-emoji img { width: 48px; height: 48px; }
:root[data-machine="es"] .card-more-btn { border-radius: 0; border: 3px solid #1B1230; color: #1B1230; background: #00C2A8; font: 400 16px/1 var(--font-px); }
:root[data-machine="es"] .card-more { border-radius: 0; background: #FBEFD2; color: #1B1230; font: 400 24px/1.2 var(--font-vt); }
:root[data-machine="es"] .card-more small { font: 400 16px/1 var(--font-px); }
:root[data-machine="es"] .deck-count { color: #FBEFD2; font: 400 16px/1 var(--font-px); letter-spacing: 0; }
:root[data-machine="es"] .deck-hint { color: #FBEFD2; font: 400 24px/1.1 var(--font-vt); }
:root[data-machine="es"] .amida-rail { stroke: #00C2A8; stroke-width: 6; stroke-linecap: square; }
:root[data-machine="es"] .amida-path { stroke: #FF3EA5; stroke-linecap: square; stroke-linejoin: miter; filter: none; }
:root[data-machine="es"] .amida-start { border-radius: 0; background: #FFD400; color: #1B1230; border: 3px solid #1B1230; font: 400 16px/1 var(--font-px); }
:root[data-machine="es"] .amida-start[aria-pressed="true"] { background: #FF3EA5; }
:root[data-machine="es"] .amida-goal { border-radius: 0; background: #FBEFD2; border: 3px solid #1B1230; color: #1B1230; font: 400 16px/1.25 var(--font-px); }
:root[data-machine="es"] .amida-goal.is-open { background: #FFD400; color: #1B1230; font: 400 24px/1 var(--font-vt); }
:root[data-machine="es"] .overlay { background: rgba(27, 18, 48, 0.9); }
:root[data-machine="es"] .es-result { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px 14px; padding: 0 18px 14px; animation: none; }
:root[data-machine="es"] .es-result::before { content: none; }
:root[data-machine="es"] .es-result > * { grid-column: 1 / -1; }
:root[data-machine="es"] .es-band { margin: 0 -18px; padding: 12px 8px 10px; border-bottom: 3px solid #1B1230; background: #FFD400; color: #1B1230; text-align: center;
font: 400 24px/1 var(--font-px); letter-spacing: 0; }
:root[data-machine="es"] .es-band:focus { outline: none; }
:root[data-machine="es"] .es-result .result-emoji { grid-column: 1; grid-row: 2 / span 2; display: grid; place-items: center; width: 108px; height: 108px; margin: 2px 0 0; border: 3px solid #1B1230; background: #241936; box-shadow: 4px 4px 0 #FF3EA5; font-size: 16px; }
html:root[data-machine="es"] .es-result .result-emoji img { width: 96px; height: 96px; margin: 0; }
:root[data-machine="es"] .es-result .rg-say-head { grid-column: 2; grid-row: 2; justify-self: start; margin: 2px 0 0; padding: 4px 6px 3px; background: #FF3EA5; color: #1B1230; font: 400 16px/1 var(--font-px); }
:root[data-machine="es"] .es-answer { grid-column: 2; grid-row: 3; min-height: 2.2em; margin: 0; hyphens: manual; -webkit-hyphens: manual; font: 400 32px/1.1 var(--font-vt); letter-spacing: 0; color: #1B1230; text-transform: none; text-shadow: none; text-align: left; }
:root[data-machine="es"] .es-answer.topic { font: 400 24px/1.2 var(--font-vt); text-transform: none; text-shadow: none; }
:root[data-machine="es"] .es-answer::before, :root[data-machine="es"] .es-answer::after { content: none; }
:root[data-machine="es"] .es-answer .rg-next { color: #D81B7A; font-size: 24px; }
:root[data-machine="es"] .es-result .result-sub, :root[data-machine="es"] .es-foot, :root[data-machine="es"] .es-result .defied { margin: 0; font: 400 24px/1.2 var(--font-vt); color: #4A3A63; }
:root[data-machine="es"] .es-result .result-more-btn { color: #1B1230; font: 400 16px/1.2 var(--font-px); }
:root[data-machine="es"] .es-result .result-more { color: #1B1230; font: 400 24px/1.2 var(--font-vt); }
:root[data-machine="es"] .es-result .rg-log { justify-self: end; margin: -4px 0 0; font: 400 24px/1 var(--font-vt); color: #4A3A63; }
:root[data-machine="es"] .es-result .result-actions { padding: 8px 0 0; border: 0; border-top: 3px solid #1B1230; box-shadow: none; background: transparent; }
:root[data-machine="es"] .es-result .result-actions .btn { min-height: 52px; padding: 8px 8px 8px 34px; box-shadow: none; text-transform: none; font: 400 32px/1.05 var(--font-vt); }
:root[data-machine="es"] .es-result .result-actions .btn::before { left: 8px; }
:root[data-machine="es"] .es-result .result-actions > .btn-arcade { color: #D81B7A; }
html:root[data-machine="es"] .es-result .rg-decide > .rg-decide-sub { color: #4A3A63; }
:root[data-machine="es"] .es-result .result-actions .btn-row { flex-direction: column; gap: 0; }
:root[data-machine="es"] .es-result.is-masked > :not(.es-mask):not(.es-band) { visibility: hidden; }
:root[data-machine="es"] .es-result > .es-mask { grid-column: auto; grid-row: auto; }
:root[data-machine="es"] .es-mask { position: absolute; left: 0; right: 0; top: 51px; bottom: 0; z-index: 4; display: grid; justify-items: center; align-content: center; gap: 14px; padding: 12px;
border: 0; border-radius: 0; background: #241936; color: #FBEFD2; cursor: grab; touch-action: none;
transform: translateY(calc(-1 * var(--pull, 0px))); transition: none; }
:root[data-machine="es"] .es-mask-face { display: block; width: 258px; height: 258px; animation: es-bob 1s steps(1, end) infinite; }
:root[data-machine="es"] .es-mask-face img { display: block; width: 258px; height: 258px; }
@keyframes es-bob { 0%, 49% { transform: none; } 50%, 100% { transform: translateY(-6px); } }
:root[data-machine="es"] .es-mask-pull { font: 400 16px/1 var(--font-px); text-transform: uppercase; color: #FBEFD2; }
:root[data-machine="es"] .es-mask-btn { padding: 10px 16px 9px; border-radius: 0; border: 3px solid #1B1230; background: #FBEFD2; color: #1B1230; box-shadow: 4px 4px 0 #FF3EA5; font: 400 16px/1 var(--font-px); text-transform: uppercase; }
:root[data-machine="es"] .es-mask.is-off { pointer-events: none; animation: es-off 0.5s steps(5, end) both; }
@keyframes es-off { to { transform: translateY(-100%); } }
:root[data-machine="es"] .result-below { background: #FBEFD2; color: #1B1230; border: 3px solid #1B1230; }
html:root[data-machine="es"] .result-below .promo-line { font-size: 16px; line-height: 1.5; }
html:root[data-machine="es"] .result-below .store-link { font-size: 16px; min-height: 48px; }
:root[data-machine="es"] .store-link { background: #1B1230; color: #FFFFFF; border: 3px solid #1B1230; }
:root[data-machine="es"] .toast { border-color: #1B1230; font: 400 24px/1.2 var(--font-vt); }
:root[data-machine="es"] .settings h2 { color: #1B1230; font: 400 24px/1.25 var(--font-px); text-transform: uppercase; }
:root[data-machine="es"] .settings h3 { font: 400 16px/1.25 var(--font-px) !important; text-transform: uppercase; color: #1B1230; }
:root[data-machine="es"] .panel { color: #1B1230; font: 400 24px/1.2 var(--font-vt); }
:root[data-machine="es"] .notice-list { font: 400 24px/1.2 var(--font-vt); padding-left: 1.4em; }
:root[data-machine="es"] .notice-list li + li { margin-top: 6px; }
:root[data-machine="es"] :is(.row-text, .row-meta, .toggle, .confirm, .field label, .edit-item) { font-family: var(--font-vt); font-weight: 400; }
:root[data-machine="es"] .row-text { font-size: 24px; color: #1B1230; }
:root[data-machine="es"] .row-meta { font-size: 24px; color: #4A3A63; }
:root[data-machine="es"] .row .row-ico { width: 48px; height: 48px; }
:root[data-machine="es"] .toggle { font-size: 24px; color: #1B1230; }
:root[data-machine="es"] .field label { font: 400 16px/1.25 var(--font-px); color: #FBEFD2; text-transform: uppercase; }
:root[data-machine="es"] .seg button { font: 400 16px/1.2 var(--font-px); text-transform: uppercase; color: #1B1230; }
:root[data-machine="es"] .seg button[aria-selected="true"] { background: #1B1230; color: #FBEFD2; }
:root[data-machine="es"] :is(.input, .icon-btn) { border: 3px solid #1B1230; background: #FFFFFF; color: #1B1230; font: 400 24px/1.1 var(--font-vt); }
:root[data-machine="es"] .input::placeholder { color: #4A3A63; }
:root[data-machine="es"] .switch { background: #F2DDB0; border: 3px solid #1B1230; }
:root[data-machine="es"] .switch::after { background: #1B1230; }
:root[data-machine="es"] .toggle input:checked + .switch { background: #00C2A8; }
:root[data-machine="es"] .noscript { color: #FBEFD2; }
:root[data-machine="es"] .btn-method.is-rec { border-color: #1B1230; }
:root[data-machine="es"] .chip[aria-pressed="true"]:not(.chip-cand) { border-width: 3px; }
:root[data-machine="es"] .tn-tag { text-align: left; }
:root[data-machine="es"][data-motion="reduce"] .es-mask-face { animation: none; }
:root[data-machine="es"][data-motion="reduce"] .es-mask.is-off { animation: es-fade 0.3s linear both; }
@keyframes es-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
:root[data-machine="es"]:not([data-motion="full"]) .es-mask-face { animation: none; }
:root[data-machine="es"]:not([data-motion="full"]) .es-mask.is-off { animation: es-fade 0.3s linear both; }
}
:root[data-machine="es"] .es-head { gap: 8px; }
@media (max-width: 1099px) {
:root[data-machine="es"] .es-title { grid-template-rows: 100px auto;
background:
linear-gradient(180deg, transparent 100px, #241936 100px) 0 0 / 100% 100% no-repeat,
url("pixel/es/ring-ropes.png") 50% 56px / 160px 44px no-repeat,
linear-gradient(104deg, #00C2A8 0 50%, #FF3EA5 50% 100%) 0 0 / 100% 100% no-repeat; }
:root[data-machine="es"] .es-title::before, :root[data-machine="es"] .es-title::after { width: 86px; height: 86px; background-size: 86px 86px; }
:root[data-machine="es"] .es-vs { font-size: 32px; }
:root[data-machine="es"] .tile-emoji { height: 96px; }
:root[data-machine="es"] .tile-emoji img, :root[data-machine="es"] .tile-emoji .cat-ico.rg-px { width: 64px !important; height: 64px !important; }
}
@media (min-width: 1100px) {
:root[data-machine="es"] .stage { margin-top: 60px; }
:root[data-machine="es"] .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:root[data-machine="es"] .tile-emoji { height: 88px; }
:root[data-machine="es"] .tile-emoji img, :root[data-machine="es"] .tile-emoji .cat-ico.rg-px { width: 64px !important; height: 64px !important; }
:root[data-machine="es"] .tile-title { padding: 8px 4px 9px; hyphens: manual; overflow-wrap: normal; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="es"] .stage { margin-top: 48px; }
:root[data-machine="es"] .rg-start { gap: 4px; }
:root[data-machine="es"] .tile-emoji { height: 80px; }
:root[data-machine="es"] .es-head > :is(.es-kicker, .home-sub-line) { display: none; }
:root[data-machine="es"] .home-line { padding-bottom: 14px; border-bottom: 3px solid #1B1230;
box-shadow: inset 3px 3px 0 #FBEFD2, inset -3px -3px 0 #FBEFD2, inset 6px 6px 0 #1B1230, inset -6px -6px 0 #1B1230, 6px 6px 0 #FF3EA5; }
:root[data-machine="es"] .es-title { grid-template-rows: 104px auto;
background:
linear-gradient(180deg, transparent 104px, #241936 104px) 0 0 / 100% 100% no-repeat,
url("pixel/es/ring-ropes.png") 50% 60px / 160px 44px no-repeat,
linear-gradient(104deg, #00C2A8 0 50%, #FF3EA5 50% 100%) 0 0 / 100% 100% no-repeat; }
:root[data-machine="es"] .es-title::before, :root[data-machine="es"] .es-title::after { width: 86px; height: 86px; background-size: 86px 86px; }
:root[data-machine="es"] .es-vs { font-size: 32px; }
}
:root[data-machine="es"] .card-area + div > .btn-row { flex-direction: column; gap: 10px; }
:root[data-machine="es"] .card-area + div > .btn-row > .btn { flex: 0 0 auto; width: 100%; white-space: normal; }
:root[data-machine="es"] .deck-hint { left: 22px; right: 26px; bottom: 22px; text-wrap: balance; }
@media (min-width: 1100px) and (pointer: fine) {
:root[data-machine="es"] .rg-head .rg-press { min-height: 32px; padding-block: 2px; }
}
:root[data-machine="es"] .es-head > .rg-title .rg-count { position: absolute; z-index: 3; left: 0; right: 0; top: 86px; margin: 0; pointer-events: none; text-align: center;
font: 400 24px/1 var(--font-px); letter-spacing: 0.04em; color: #FFD400;
text-shadow: 3px 0 0 #1B1230, -3px 0 0 #1B1230, 0 3px 0 #1B1230, 0 -3px 0 #1B1230, 3px 3px 0 #1B1230, -3px -3px 0 #1B1230, 3px -3px 0 #1B1230, -3px 3px 0 #1B1230; }
@media (max-width: 1099px) {
:root[data-machine="es"] .tile-emoji { height: 80px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="es"] .es-head > .rg-title .rg-count { top: 56px; }
:root[data-machine="es"] .es-title { grid-template-rows: 96px auto;
background:
linear-gradient(180deg, transparent 96px, #241936 96px) 0 0 / 100% 100% no-repeat,
url("pixel/es/ring-ropes.png") 50% 52px / 160px 44px no-repeat,
linear-gradient(104deg, #00C2A8 0 50%, #FF3EA5 50% 100%) 0 0 / 100% 100% no-repeat; }
}
:root[data-machine="es"] .rg-press { padding: 8px 18px 8px 12px; background: #FF3EA5; color: #1B1230; box-shadow: 4px 4px 0 #FBEFD2; }
:root[data-machine="es"] .rg-press.is-wait { animation: none; }
:root[data-machine="es"] .rg-press::before { visibility: visible; color: #1B1230; }
:root[data-machine="es"] .rg-press.is-wait::before { animation: rg-blink 1s steps(1, end) infinite; }
:root[data-machine="es"][data-motion="reduce"] .rg-press.is-wait::before { animation: none; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="es"]:not([data-motion="full"]) .rg-press.is-wait::before { animation: none; } }
@media (max-width: 479px) {
:root[data-machine="es"] .rg-start { gap: 4px; }
:root[data-machine="es"] .es-head > :is(.es-kicker, .home-sub-line) { display: none; }
:root[data-machine="es"] .home-line { padding-bottom: 14px; border-bottom: 3px solid #1B1230;
box-shadow: inset 3px 3px 0 #FBEFD2, inset -3px -3px 0 #FBEFD2, inset 6px 6px 0 #1B1230, inset -6px -6px 0 #1B1230, 6px 6px 0 #FF3EA5; }
:root[data-machine="es"] .es-head > .rg-title .rg-count { top: 56px; }
:root[data-machine="es"] .es-title { grid-template-rows: 96px auto;
background:
linear-gradient(180deg, transparent 96px, #241936 96px) 0 0 / 100% 100% no-repeat,
url("pixel/es/ring-ropes.png") 50% 52px / 160px 44px no-repeat,
linear-gradient(104deg, #00C2A8 0 50%, #FF3EA5 50% 100%) 0 0 / 100% 100% no-repeat; }
:root[data-machine="es"] .tile-emoji { height: 64px; }
:root[data-machine="es"] .tile-emoji img, :root[data-machine="es"] .tile-emoji .cat-ico.rg-px { width: 48px !important; height: 48px !important; }
}
:root[data-machine="es"] .es-result > .es-band { position: relative; z-index: 5; }
:root[data-machine="es"] .es-mask.is-off :is(.es-mask-pull, .es-mask-btn) { visibility: hidden; }
:root[data-machine="es"] .es-answer .rg-ans .rg-type:not(.is-done) { visibility: hidden; }
:root[data-machine="es"] .es-answer .rg-ans { white-space: nowrap; }
:root[data-machine="es"] .es-answer .rg-ans .rg-type { white-space: normal; }
:root[data-machine="es"] .es-result .es-answer { min-width: 0; }
@media (max-width: 479px) { :root[data-machine="es"] { --rg-decide-fs: 32px; } }
@media (min-width: 1100px) {
:root[data-machine="es"] .wheel-wrap { width: clamp(280px, calc(100vh - 488px), 392px); }
}
@media (min-width: 1200px) {
:root {
--wide-edge: 280px;
--wide-half: 312px;
--wide-under: calc(50% - var(--wide-edge));
--wide-w: calc(50% - var(--wide-half));
}
html::before, html::after, body::before, body::after {
position: fixed; top: 0; bottom: 0; width: var(--wide-w); z-index: 1;
pointer-events: none; background-repeat: no-repeat;
}
html::before, body::before { width: var(--wide-under); }
body::before, body::after { left: 0; }
html::before, html::after { right: 0; }
}
:root[data-theme="es"] .es-wide { display: none; }
@media (min-width: 1200px) {
:root[data-theme="es"] { --es-floor: 7vh; }
:root[data-theme="es"] body::before, :root[data-theme="es"]::before {
content: ""; image-rendering: crisp-edges; image-rendering: pixelated;
background-image:
url("pixel/es/ring-ropes.png"),
url("pixel/es/crowd.png"),
url("pixel/es/crowd.png"),
conic-gradient(from 160deg at 0 0, transparent 0deg, rgba(251, 239, 210, 0.16) 1deg 13deg, transparent 14deg);
background-size: 480px 132px, 399px 87px, 266px 58px, 100% 100%;
background-repeat: no-repeat, repeat-x, repeat-x, no-repeat;
background-position: center bottom var(--es-floor), left 0 bottom calc(var(--es-floor) + 60px), left 30px bottom calc(var(--es-floor) + 120px), 0 0;
}
:root[data-theme="es"]::before {
background-image:
url("pixel/es/ring-ropes.png"),
url("pixel/es/crowd.png"),
url("pixel/es/crowd.png"),
conic-gradient(from 190deg at 100% 0, transparent 0deg, rgba(251, 239, 210, 0.16) 1deg 13deg, transparent 14deg);
background-position: center bottom var(--es-floor), right 0 bottom calc(var(--es-floor) + 60px), right 30px bottom calc(var(--es-floor) + 120px), 0 0;
}
:root[data-theme="es"] body::after, :root[data-theme="es"]::after { content: none; }
:root[data-theme="es"] .es-wide { display: block; position: fixed; top: var(--fx-top, 0px); bottom: 0; left: 0; right: 0; z-index: 1; pointer-events: none; }
:root[data-theme="es"] .es-wide :is(.wd-l, .wd-r) { position: absolute; top: 0; bottom: 0; width: var(--wide-under); }
:root[data-theme="es"] .es-wide .wd-l { left: 0; }
:root[data-theme="es"] .es-wide .wd-r { right: 0; }
:root[data-theme="es"] .es-wposter { position: absolute; left: 50%; top: 12vh; width: 268px; height: 376px; translate: -50% 0; }
:root[data-theme="es"] .es-wposter-art { display: block; width: 268px; height: 376px; }
:root[data-theme="es"] .es-wposter-mask { position: absolute; left: 50%; top: 52px; width: 172px; height: 172px; translate: -50% 0; }
:root[data-theme="es"] .es-wposter-band { position: absolute; left: 12px; top: 280px; width: 236px; height: 80px; display: grid; align-content: center; justify-items: center; gap: 4px;
padding: 0 4px; background: #FFD400; color: #1B1230; text-align: center; }
:root[data-theme="es"] .es-wposter-band p { margin: 0; max-width: 100%; }
:root[data-theme="es"] .es-wp-k { font: 400 16px/1 var(--font-px); letter-spacing: 0; text-transform: uppercase; }
:root[data-theme="es"] .es-wp-t { font: 400 24px/1 var(--font-vt); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
:root[data-theme="es"] .es-wp-towns { font: 400 24px/1 var(--font-vt); letter-spacing: 0; text-transform: uppercase; }
:root[data-theme="es"] .es-wp-towns span { white-space: nowrap; }
:root[data-theme="es"] .es-wp-towns b { font-weight: 400; }
:root[data-theme="es"] .es-wp-towns b.is-tonight { padding: 0 4px; background: #1B1230; color: #FFD400; }
html:root[data-theme="es"] body::before, html:root[data-theme="es"]::before { top: var(--fx-top, 0px); }
}