html, body { margin: 0; height: 100%; background: #0A0707; overflow: hidden; font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #F2ECEC; }
/* La barra solo aparece si el panel se pasa de alto. En Chrome el color estándar la vuelve overlay y la esconde. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #C8402D #0E0B0B; }
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-track { background: #0E0B0B; }
*::-webkit-scrollbar-thumb { background: #C8402D; border: 2px solid #0E0B0B; border-top-color: #FF8D71; border-left-color: #FF8D71; border-right-color: #5E130D; border-bottom-color: #5E130D; }
*::-webkit-scrollbar-thumb:hover { background: #FF8D71; border-top-color: #FFD98A; border-left-color: #FFD98A; border-right-color: #C8402D; border-bottom-color: #C8402D; }
*::-webkit-scrollbar-thumb:active { background: #9C2315; }
*::-webkit-scrollbar-corner { background: #0E0B0B; }
canvas { display: block; width: 100vw; height: 100vh; cursor: crosshair; }
#hud-linea { position: fixed; z-index: 3; pointer-events: none; transform-origin: top left; }
#hud-linea.salta .etl-c { pointer-events: auto; cursor: pointer; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,7,7,.78); }
.overlay[hidden] { display: none; }
.card { background: #161111; border: 1px solid #2E2525; border-radius: 16px; padding: 28px 32px; max-width: 560px; width: calc(100% - 32px); box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.card h1 { margin: 0; font-size: 34px; letter-spacing: -0.02em; }
.card p { margin: 0; color: #E0B2B2; line-height: 1.5; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 15px; }
.keys kbd { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 13px; background: #2A2020; border: 1px solid #3A3030; border-bottom-width: 3px; border-radius: 7px; padding: 3px 9px; color: #F2ECEC; white-space: nowrap; justify-self: start; }
.keys span { color: #E0B2B2; align-self: center; }
button { font: inherit; font-size: 16px; font-weight: 700; color: #F2ECEC; background: #9C2315; border: 1px solid #9C2315; border-radius: 10px; padding: 12px 20px; min-height: 48px; cursor: pointer; }
button:hover { background: #C8402D; border-color: #C8402D; }
button:focus-visible { outline: 2px solid #E0B2B2; outline-offset: 3px; }

#scene { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #0A0707; transition: opacity .6s ease; }
#sceneInner { position: absolute; inset: 0; transition: transform 1.1s cubic-bezier(.22,.8,.2,1), filter .9s ease; }
#sceneInner.blur { filter: blur(9px) brightness(.72); transform: scale(1.04); }
#sceneInner.low { right: auto; bottom: auto; width: 50%; height: 50%; transform-origin: 0 0; transform: translate(-2vw, -2vh) scale(2.08); filter: blur(4.5px) brightness(.72); transition: none; will-change: transform, filter; }
#sceneInner.instant { transition: none !important; }
#sceneInner svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scene.hidden { opacity: 0; pointer-events: none; }
.hit { fill: transparent; cursor: pointer; pointer-events: none; }
.picking .hit { pointer-events: all; }
.layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.layer > * { pointer-events: auto; }
[hidden] { display: none !important; }
#title { will-change: transform; transform: translateZ(0); display: flex; align-items: center; background: linear-gradient(90deg, rgba(10,7,7,.82) 0%, rgba(10,7,7,.35) 45%, rgba(10,7,7,0) 70%); pointer-events: auto; }
#title .gameVersion { position: absolute; left: 16px; bottom: 12px; margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: #E0B2B2; opacity: .55; pointer-events: none; }
.rankCard { margin-left: auto; margin-right: max(20px, 4vw); width: clamp(300px, 28vw, 480px); max-height: calc(100vh - 36px); overflow: auto; box-sizing: border-box; background: rgba(17,12,12,.9); border: 1px solid #2E2525; border-radius: 16px; padding: clamp(12px, 1.2vw, 18px); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.rankDuel { border-radius: 12px; overflow: hidden; background: #0D0B0B; aspect-ratio: 16 / 9; width: 100%; cursor: pointer; }
.rankDuel svg { width: 100%; height: 100%; display: block; }
.rankCard h2 { margin: 0; font-size: clamp(22px, 1.6vw, 28px); letter-spacing: -0.02em; }
.rankCard .tabs button { font-size: 13px; min-height: 36px; padding: 6px 4px; }
.rankTop, .rankList li:not(.rankEmpty) { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 3.6em); column-gap: 6px; align-items: center; }
.rankStat { margin: 0; display: flex; justify-content: center; }
.rankStat svg { width: clamp(26px, 2vw, 34px); height: clamp(26px, 2vw, 34px); display: block; }
.rankList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rankName { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rankStats { display: contents; }
.rankStats span { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: clamp(14px, 1.1vw, 16px); color: #FFD98A; }
.rankList li.rankEmpty { display: block; color: #E0B2B2; font-size: 14px; line-height: 1.4; }
.rankInvite { margin: 0; color: #E0B2B2; font-size: 14px; line-height: 1.45; }
.rankCard #rankJoin, .rankCard #rankOut { width: 100%; font-size: 15px; }
@media (max-width: 980px) {
  #title { align-items: flex-start; overflow: auto; }
  .rankCard { width: min(340px, calc(100% - 48px)); margin: 24px max(24px, 8vw) 72px auto; }
}
.titleCol { margin-left: max(24px, 8vw); align-self: center; flex: 0 0 auto; display: flex; flex-direction: column; gap: 32px; }
.logoE { display: block; width: clamp(120px, 13vw, 190px); height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.wordmark { font-weight: 800; font-size: clamp(52px, 8vw, 104px); letter-spacing: -0.03em; line-height: .95; margin: 0; color: #F2ECEC; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.mainNav { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mainNav button, .ghostBtn { background: transparent; border: 0; border-radius: 10px; color: #E0B2B2; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; padding: 8px 14px 8px 0; min-height: 48px; display: flex; align-items: center; gap: 14px; transition: color .15s, transform .15s; will-change: transform; }
.mainNav button:focus { outline: none; }
.mainNav button:focus-visible { outline: 2px solid #E0B2B2; outline-offset: 4px; }
.mainNav button::before { content: ''; width: 28px; height: 3px; background: #FFD98A; transform: scaleX(0); transform-origin: left center; transition: transform .18s ease; margin-right: -14px; }
.mainNav button:hover, .mainNav button:focus-visible { color: #F2ECEC; transform: translateX(4px); background: transparent; }
.mainNav button:hover::before, .mainNav button:focus-visible::before { transform: scaleX(1); }
.mainNav button:hover, .mainNav button:focus-visible { gap: 14px; }
.mainNav button[aria-disabled="true"] { color: #6E5A5A; cursor: not-allowed; }
.mainNav button[aria-disabled="true"]:hover { transform: none; color: #6E5A5A; }
.mainNav button[aria-disabled="true"]:hover::before,
.mainNav button[aria-disabled="true"]:focus-visible::before { transform: scaleX(0); }
.navRow { position: relative; display: flex; align-items: center; }
.navNote { font-size: 14px; color: #8A7272; margin: 0; }
#contNote { position: absolute; left: 100%; top: 50%; margin-left: 18px; transform: translateY(-50%); white-space: nowrap; pointer-events: none; opacity: 0; }
.navRow:hover #contNote, .navRow:focus-within #contNote { opacity: 1; }
#pick { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 28px 16px; box-sizing: border-box; }
.pickTitle { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 4px 24px rgba(0,0,0,.7); pointer-events: none; }
.pickBar { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pickBar button { background: rgba(17,17,17,.85); border-color: #2E2525; color: #E0B2B2; font-size: 15px; }
.pickBar button:hover { color: #F2ECEC; }
#naming { display: flex; align-items: center; padding: 16px; box-sizing: border-box; }
#naming.right { justify-content: flex-end; padding-right: max(16px, 7vw); }
#naming.left { justify-content: flex-start; padding-left: max(16px, 7vw); }
.nameCard { background: rgba(17,12,12,.92); border: 1px solid #2E2525; border-radius: 16px; padding: 26px 28px; width: min(420px, 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); opacity: 0; transform: translateY(12px); transition: opacity .4s ease .5s, transform .4s ease .5s; }
#naming.show .nameCard { opacity: 1; transform: none; }
.nameCard h2 { margin: 0; font-size: 28px; letter-spacing: -0.01em; }
.nameCard label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #E0B2B2; }
.nameCard input { font: inherit; font-size: 22px; font-weight: 700; color: #F2ECEC; background: #1A1515; border: 1px solid #3A3030; border-radius: 10px; padding: 12px 14px; min-height: 52px; box-sizing: border-box; width: 100%; }
.nameCard input:focus-visible { outline: 2px solid #FFD98A; outline-offset: 2px; }
.nameRow { display: flex; gap: 10px; }
.nameRow button { flex: 1; }
.nameRow .secondary { background: transparent; border-color: #3A3030; color: #E0B2B2; }
.nameRow .secondary:hover { background: #2A2020; color: #F2ECEC; border-color: #3A3030; }
button:disabled { opacity: .45; cursor: not-allowed; }
#options, #credits, #online, #cuenta { display: flex; align-items: center; justify-content: center; background: rgba(10,7,7,.55); pointer-events: auto; }
.onlineCard { width: min(520px, calc(100% - 32px)); }
.onlineCode { margin: 0; text-align: center; font-size: clamp(40px, 8vw, 64px); font-weight: 800; letter-spacing: .22em; color: #FFD98A; }
.onlineCard label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #E0B2B2; }
.onlineCard input { font: inherit; font-size: 22px; font-weight: 700; color: #F2ECEC; background: #1A1515; border: 1px solid #3A3030; border-radius: 10px; padding: 12px 14px; width: 100%; box-sizing: border-box; min-height: 52px; }
.onlineCard input:focus-visible { outline: 2px solid #FFD98A; outline-offset: 2px; }
#onlineHome, #onlineJoin, #onlineWho, #onlineCuentaForm { display: flex; flex-direction: column; gap: 10px; }
#online .secondary, #cuenta .secondary, .rankCard .secondary { background: transparent; border-color: #3A3030; color: #E0B2B2; }
#online .secondary:hover, #cuenta .secondary:hover, .rankCard .secondary:hover { background: #2A2020; color: #F2ECEC; border-color: #3A3030; }
#onlineColors button[aria-pressed="true"] { background: #C8402D; border-color: #FFD98A; }
#online .cardBtns button { white-space: normal; }
#onlineHelp { align-self: center; background: transparent; border: 0; color: #FFD98A; font-size: 14px; font-weight: 700; min-height: 36px; padding: 4px 8px; text-decoration: underline; text-underline-offset: 4px; }
#onlineHelp:hover { background: transparent; border: 0; color: #F2ECEC; }
#onlineHostLink { word-break: break-all; }
#guide { display: flex; align-items: center; justify-content: center; background: rgba(10,7,7,.55); pointer-events: auto; }
.guideCard { width: min(640px, calc(100% - 32px)); max-height: min(860px, calc(100% - 24px)); overflow: auto; }
.guideTabs { display: flex; gap: 8px; flex-wrap: wrap; }
.guideTabs button { min-width: 44px; padding: 8px 12px; background: transparent; border-color: #3A3030; color: #E0B2B2; }
.guideTabs button[aria-selected="true"] { background: #9C2315; border-color: #9C2315; color: #F2ECEC; }
#guide .secondary { background: transparent; border-color: #3A3030; color: #E0B2B2; }
#guide .secondary:hover { background: #2A2020; color: #F2ECEC; border-color: #3A3030; }
.guideRow { display: flex; align-items: center; gap: 8px 18px; }
.guideFace { width: 132px; height: 156px; flex: 0 0 132px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.guideFace svg { width: 100%; height: 100%; overflow: visible; }
.guideCopy { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.guideKicker { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.guideBody { margin: 0; color: #E0B2B2; line-height: 1.55; }
#guide .head, #guide .eye, #guide .pupil, #guide .eyes { transform-box: fill-box; transform-origin: center; }
#guide .head { transform-origin: 50% 100%; }
#guide .x-feliz .head { animation: guideHop 1.1s cubic-bezier(.3,.7,.4,1) infinite; }
#guide .x-feliz .eyes { animation: guideSquish 1.1s infinite; }
#guide .x-pensando .head { animation: guidePonder 3.6s ease-in-out infinite; }
#guide .x-pensando .eyeR { animation: guideRaise 3.6s ease-in-out infinite; }
#guide .x-pensando .eyeL { animation: guideSquint 3.6s ease-in-out infinite; }
#guide .x-guino .eyeR { animation: guideWink 2.4s infinite; }
#guide .x-guino .head { animation: guideTilt 2.4s ease-in-out infinite; }
#guide .x-concentrado .eyes { animation: guideScan 2.8s ease-in-out infinite; }
#guide .x-concentrado .eye { animation: guideNarrow 2.8s ease-in-out infinite; }
#guide .x-confundido .head { animation: guidePuzzle 3s ease-in-out infinite; }
#guide .x-confundido .look { animation: guideLook 3s ease-in-out infinite; }
#guide .qmark { transform-box: fill-box; transform-origin: 50% 100%; animation: guideQ 3s ease-in-out infinite; }
#guide .qmark.q2 { animation-delay: .25s; }
#guide .spark { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: guideSpark 2.4s infinite; }
#guide .spark.s2 { animation-delay: .08s; }
@keyframes guideHop { 0%, 100% { transform: translateY(0) scaleY(1); } 12% { transform: translateY(0) scale(1.04, 0.94); } 40% { transform: translateY(-34px) scale(0.98, 1.03); } 70% { transform: translateY(0) scale(1.03, 0.96); } }
@keyframes guideSquish { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes guidePonder { 0%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(7deg); } }
@keyframes guideRaise { 0%, 100% { transform: translateY(0); } 30%, 60% { transform: translateY(-8px); } }
@keyframes guideSquint { 0%, 100% { transform: scaleY(1); } 30%, 60% { transform: scaleY(0.5); } }
@keyframes guideWink { 0%, 40%, 62%, 100% { transform: scaleY(1); } 46%, 56% { transform: scaleY(0.08); } }
@keyframes guideTilt { 0%, 30%, 75%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(-5deg); } }
@keyframes guideScan { 0%, 100% { transform: translateX(-8px); } 45%, 50% { transform: translateX(8px); } 55% { transform: translateX(-8px); } }
@keyframes guideNarrow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } }
@keyframes guidePuzzle { 0%, 100% { transform: rotate(0); } 20%, 40% { transform: rotate(-8deg); } 60%, 80% { transform: rotate(6deg); } }
@keyframes guideLook { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-12px, -4px); } 50% { transform: translate(12px, -4px); } 75% { transform: translate(0, 6px); } }
@keyframes guideQ { 0% { transform: scale(0) rotate(0); opacity: 0; } 12% { transform: scale(1.2) rotate(-10deg); opacity: 1; } 22% { transform: scale(1) rotate(8deg); } 85% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(0.8); opacity: 0; } }
@keyframes guideSpark { 0%, 44%, 100% { transform: scale(0) rotate(0deg); } 52% { transform: scale(1.15) rotate(45deg); } 62% { transform: scale(0.9) rotate(80deg); } 72% { transform: scale(0) rotate(110deg); } }
@media (prefers-reduced-motion: reduce) {
  #guide .head, #guide .eye, #guide .eyes, #guide .pupil, #guide .qmark { animation: none !important; }
  #guide .spark { animation: none !important; transform: scale(1); }
}
#online.waking { background: linear-gradient(180deg, rgba(10,7,7,0) 0%, rgba(10,7,7,0) 62%, rgba(10,7,7,.82) 100%); align-items: flex-end; padding-bottom: 4vh; }
#online.waking .onlineCard { background: transparent; border-color: transparent; align-items: center; width: min(760px, calc(100% - 32px)); }
#online.waking .onlineCard > :not(#onlineMsg):not(#onlineBack) { display: none !important; }
#online.waking #onlineMsg { margin-top: 10vh; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -0.02em; color: #F2ECEC; text-align: center; text-shadow: 0 8px 28px #000; }
#online.waking #onlineBack { min-width: 180px; }
.onlineErr { color: #FF8D71; }
.optCard { background: #161111; border: 1px solid #2E2525; border-radius: 16px; padding: 26px 28px; width: min(460px, calc(100% - 32px)); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.optCard.guideCard { width: min(640px, calc(100% - 32px)); }
.optCard h2 { margin: 0; font-size: 28px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #2E2525; font-size: 17px; }
.fsNote { display: block; font-size: 12px; color: #FF8D71; margin-top: 4px; max-width: 260px; line-height: 1.35; }
.opt:last-of-type { border-bottom: 0; }
.opt input[type=range] { width: 180px; accent-color: #C8402D; }
.switch { width: 58px; height: 32px; border-radius: 16px; background: #2A2020; border: 1px solid #3A3030; position: relative; padding: 0; min-height: 0; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #8A7272; transition: left .15s, background .15s; }
.switch[aria-checked="true"] { background: #9C2315; border-color: #9C2315; }
.switch[aria-checked="true"]::after { left: 29px; background: #F2ECEC; }
.switch:hover { background: #3A2A2A; }
.switch[aria-checked="true"]:hover { background: #C8402D; }
#loading { position: fixed; inset: 0; z-index: 8; background: radial-gradient(ellipse at 50% 55%, #2A1414 0%, #111111 60%, #0A0707 100%); display: flex; align-items: center; justify-content: center; }
.loadStage { width: min(86vw, 108vh); aspect-ratio: 1000 / 780; max-width: 100%; }
.loadStage[hidden] { display: none; }
.loadStage svg { width: 100%; height: 100%; display: block; }
.loadHint { position: fixed; bottom: 22px; left: 0; right: 0; text-align: center; margin: 0; font-size: 13px; color: #6E5A5A; opacity: 0; transition: opacity .6s ease; }
.loadHint.show { opacity: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#exitAsk { display: flex; align-items: center; justify-content: center; background: rgba(10,7,7,.6); pointer-events: auto; }
#privacidad { display: flex; align-items: center; justify-content: center; background: rgba(10,7,7,.75); pointer-events: auto; z-index: 5; }
#privacidad[hidden] { display: none; }
#privacidad .exitText { max-width: 520px; }
/* Rechazar: la última palabra del texto, con su mismo color y sin forma de botón; Entendido es el botón */
#privacidad .privRechazar { all: unset; display: inline; font: inherit; color: inherit; cursor: pointer; }
#privacidad .privRechazar:hover, #privacidad .privRechazar:focus { text-decoration: underline; }
.exitText { margin: 0; color: #E0B2B2; line-height: 1.5; }
#exitAsk .secondary, #privacidad .secondary, #bye .secondary, #controls .secondary { background: transparent; border-color: #3A3030; color: #E0B2B2; }
#exitAsk .secondary:hover, #privacidad .secondary:hover, #bye .secondary:hover, #controls .secondary:hover { background: #2A2020; color: #F2ECEC; }
#bye { position: fixed; inset: 0; z-index: 7; background: linear-gradient(180deg, rgba(10,7,7,0) 0%, rgba(10,7,7,0) 58%, rgba(10,7,7,.85) 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; text-align: center; padding: 16px 16px 5vh; }
#bye .byeText, #bye .byeHint { text-shadow: 0 8px 28px #000; }
@media (max-aspect-ratio: 6/5) { #bye { justify-content: flex-start; padding-top: calc(50vh + 30vw); background: none; } }
.byeText { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; }
.byeHint { margin: 0 0 10px; color: #E0B2B2; }
#fade { position: fixed; inset: 0; background: #0A0707; z-index: 9; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
#fade.on { opacity: 1; }
.cardBtns { display: flex; gap: 10px; flex-wrap: wrap; }
.cardBtns button { flex: 1; }
#menu .secondary { background: transparent; border-color: #3A3030; color: #E0B2B2; }
#menu .secondary:hover { background: #2A2020; color: #F2ECEC; border-color: #3A3030; }
.overlay { z-index: 4; }

.navKicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A7272; }
.optBtn { min-height: 40px; padding: 8px 16px; font-size: 15px; background: transparent; border-color: #3A3030; color: #E0B2B2; }
.optBtn:hover { background: #2A2020; border-color: #3A3030; color: #F2ECEC; }
#controls { display: flex; align-items: center; justify-content: center; background: rgba(10,7,7,.55); pointer-events: auto; }
.ctlCard { gap: 12px; padding: 22px 26px; width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.tabs, .seg { display: flex; gap: 4px; background: #0F0B0B; border: 1px solid #2E2525; border-radius: 12px; padding: 4px; }
.tabs button, .seg button { flex: 1; background: transparent; border: 0; color: #E0B2B2; font-size: 15px; min-height: 40px; padding: 8px 14px; border-radius: 8px; white-space: nowrap; }
.tabs button:hover, .seg button:hover { background: #2A2020; color: #F2ECEC; }
.tabs button[aria-selected="true"], .seg button[aria-pressed="true"] { background: #9C2315; color: #F2ECEC; }
.ctlDev { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 17px; flex-wrap: wrap; }
.ctlList { display: flex; flex-direction: column; }
.ctlRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid #221B1B; font-size: 15px; color: #E0B2B2; }
.ctlRow:last-child { border-bottom: 0; }
.keyBtn, .padKey { min-width: 140px; min-height: 36px; box-sizing: border-box; padding: 6px 12px; font-size: 14px; font-weight: 700; text-align: center; background: #2A2020; border: 1px solid #3A3030; border-bottom-width: 3px; border-radius: 8px; color: #F2ECEC; }
.padKey { display: inline-flex; align-items: center; justify-content: center; }
.keyBtn:hover { background: #3A2A2A; border-color: #4A3A3A; }
.keyBtn.listening { background: #5E130D; border-color: #C8402D; color: #FFD98A; }
.ctlNote { margin: 0; font-size: 13px; color: #8A7272; line-height: 1.45; min-height: 19px; }
.ctlNote.warn { color: #FF8D71; }
.padStatus { margin: 0; font-size: 13px; color: #E0B2B2; line-height: 1.45; padding: 10px 12px; background: #0F0B0B; border: 1px solid #2E2525; border-radius: 10px; }
#loading.duo { gap: 2vw; }
#loading.duo .loadStage { width: min(46vw, 60vh); }
.keysDuo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.keysHead { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFD98A; margin: 0 0 10px; }
#menu .card.wide { max-width: 860px; }
@media (max-width: 700px) { .keysDuo { grid-template-columns: 1fr; } }
/* navegación de menús con mando: mismo resalte que con teclado */
body.padNav button:focus, body.padNav input:focus { outline: 2px solid #E0B2B2; outline-offset: 3px; }
body.padNav .mainNav button:focus { outline-offset: 4px; color: #F2ECEC; transform: translateX(4px); gap: 14px; }
body.padNav .mainNav button:focus::before { transform: scaleX(1); }
/* ranuras de partida */
#slots, #slotAsk { display: flex; align-items: center; justify-content: center; background: rgba(10,7,7,.6); pointer-events: auto; }
#slotAsk { z-index: 3; }
.slotCard { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.slotList { display: flex; flex-direction: column; gap: 10px; }
.slotRow { display: flex; gap: 10px; align-items: stretch; }
.slotBtn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: #1A1515; border-color: #2E2525; padding: 12px 16px; }
.slotBtn:hover { background: #2A2020; border-color: #3A3030; }
.slotBtn b { font-size: 18px; color: #F2ECEC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.slotBtn small { font-size: 13px; font-weight: 500; color: #E0B2B2; }
.slotBtn small + small { color: #8A7272; }
.slotBtn:disabled { opacity: .55; }
.slotBtn:disabled b { color: #8A7272; }
.slotDel { align-self: center; }
#slots .secondary, #slotAsk .secondary { background: transparent; border-color: #3A3030; color: #E0B2B2; }
#slots .secondary:hover, #slotAsk .secondary:hover { background: #2A2020; color: #F2ECEC; }
/* salas abiertas (En línea) */
.onlineRooms { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.onlineRoom { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.onlineRoom small { font-weight: 600; opacity: .8; }
/* dificultad al crear la partida (jugando solo) */
.nameDif{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-weight:800;color:#E0B2B2}
.nameDif button{min-width:140px}

/* ======================================================================
   Menús con la cara de Eromash (entrada, opciones, ranuras, en línea, pausa)
   Mismo idioma que el HUD y la sala: colores planos, cortes en diagonal (nada redondo),
   rombos como viñetas y oro para lo elegido. Las animaciones de los menús van fluidas (no a saltos).
   ====================================================================== */
:root {
  --m-filo: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  --m-hoja: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --m-hex: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  --m-oct: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%);
  --m-rombo: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* ---------- paneles: dos esquinas cortadas como un filo, facetas planas y el borde del corte en oro ---------- */
:is(#options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #privacidad, #controls, #guide) .optCard,
#menu .card, .nameCard, .rankCard {
  position: relative; isolation: isolate; border: 0; border-radius: 0;
  clip-path: var(--m-filo);
  background: linear-gradient(158deg, #1F1717 0 34%, #191212 34% 71%, #151010 71%);
  box-shadow: none;
}
:is(#options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #privacidad, #controls, #guide) .optCard::before,
#menu .card::before, .nameCard::before, .rankCard::before {
  content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 34px; z-index: 2; pointer-events: none;
  background: #FFD98A; clip-path: polygon(18px 0, 28px 0, 0 28px, 0 18px);
}
:is(#options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #privacidad, #controls, #guide) .optCard::after,
#menu .card::after, .nameCard::after, .rankCard::after {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 0; width: 4px; z-index: 1; pointer-events: none; background: #9C2315;
}
/* títulos: pesados, con un rombo de oro y una barra facetada abajo */
:is(#options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #privacidad, #controls, #guide) .optCard h2,
#menu .card h1, .nameCard h2, .rankCard h2 {
  display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -0.01em; padding-bottom: 12px; position: relative;
}
:is(#options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #privacidad, #controls, #guide) .optCard h2::before,
#menu .card h1::before, .nameCard h2::before, .rankCard h2::before {
  content: ''; width: 14px; height: 14px; flex: none; background: #FFD98A; clip-path: var(--m-rombo);
}
:is(#options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #privacidad, #controls, #guide) .optCard h2::after,
#menu .card h1::after, .nameCard h2::after, .rankCard h2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #C8402D 0 64px, #3A2E2C 64px 70px, #2A2020 70px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
/* ---------- botones: hoja inclinada de un solo color plano, nada redondo ---------- */
:is(#title, #options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #naming, #controls, #guide, #menu, #pick, #bye) button {
  border: 0; border-radius: 0; clip-path: var(--m-hoja);
  background: #9C2315; color: #F2ECEC;
  font-weight: 800; letter-spacing: .01em; transition: background-color .15s ease, transform .12s ease;
}
:is(#title, #options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #naming, #controls, #guide, #menu, #pick, #bye) button:hover {
  background: #C8402D; border: 0;
}
:is(#title, #options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #naming, #controls, #guide, #menu, #pick, #bye) button:active { transform: translateY(2px); }
:is(#title, #options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #naming, #controls, #guide, #menu, #pick, #bye) button:focus-visible,
body.padNav :is(#title, #options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #naming, #controls, #guide, #menu, #pick, #bye) button:focus {
  outline: 0; box-shadow: inset 0 0 0 3px #FFD98A;
}
:is(#title, #options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #naming, #controls, #guide, #menu, #pick, #bye) :is(.secondary, .optBtn) {
  background: #2A2020; color: #E0B2B2; border: 0;
}
:is(#title, #options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #naming, #controls, #guide, #menu, #pick, #bye) :is(.secondary, .optBtn):hover {
  background: #3A2A2A; color: #F2ECEC; border: 0;
}
/* ---------- menú principal: la línea de oro con su rombo marca dónde estás ---------- */
#title .mainNav { gap: 2px; }
#title .mainNav button {
  clip-path: none; background: transparent; box-shadow: none; position: relative; isolation: isolate;
  color: #E0B2B2; font-weight: 900; letter-spacing: -0.01em; padding: 6px 26px 6px 0; gap: 16px;
  transition: color .18s ease, transform .26s cubic-bezier(.2,.9,.3,1.2);
}
#title .mainNav button::before {
  content: ''; position: absolute; left: -58px; top: 50%; width: 46px; height: 14px; margin: -7px 0 0; transform: scaleX(0); transform-origin: left center; will-change: transform;
  /* la línea de oro: se estira y termina en un rombo, como las viñetas del resto del juego */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 12'%3E%3Cpolygon points='0,4.6 26,4.6 28,6 26,7.4 0,7.4' fill='%23FFD98A'/%3E%3Cpolygon points='33,1 38,6 33,11 28,6' fill='%23FFD98A'/%3E%3Cpolygon points='33,1 38,6 33,6' fill='%23FFF4D6'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  transition: transform .28s cubic-bezier(.2,.9,.3,1);
}
#title .mainNav button::after {
  content: ''; position: absolute; z-index: -1; left: -8px; right: 0; top: 8%; bottom: 8%;
  background: rgba(156,35,21,.5);
  clip-path: var(--m-hoja); transform: scaleX(0); transform-origin: left center; will-change: transform; transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
#title .mainNav button:hover, #title .mainNav button:focus-visible, body.padNav #title .mainNav button:focus {
  color: #F2ECEC; transform: translateX(22px); background: transparent; box-shadow: none; gap: 16px;
}
#title .mainNav button:hover::before, #title .mainNav button:focus-visible::before, body.padNav #title .mainNav button:focus::before {
  transform: scaleX(1);
}
#title .mainNav button:hover::after, #title .mainNav button:focus-visible::after, body.padNav #title .mainNav button:focus::after { transform: scaleX(1); }
#title .mainNav button[aria-disabled="true"] { color: #5E4E4E; }
/* con el mouse encima del menú, manda el mouse: la opción que tenía el foco del teclado se apaga */
#title .mainNav:hover button:focus-visible:not(:hover) { color: #E0B2B2; transform: none; }
#title .mainNav:hover button:focus-visible:not(:hover)::before, #title .mainNav:hover button:focus-visible:not(:hover)::after { transform: scaleX(0); }
#title .mainNav button[aria-disabled="true"]:hover { transform: none; color: #5E4E4E; }
#title .mainNav button[aria-disabled="true"]::before, #title .mainNav button[aria-disabled="true"]::after { transform: scaleX(0); }
#title .navKicker { display: flex; align-items: center; gap: 8px; color: #FFD98A; font-weight: 900; letter-spacing: .16em; }
#title .navKicker::before { content: ''; width: 9px; height: 9px; background: currentColor; clip-path: var(--m-rombo); }
.logoE { filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(200,64,45,.18)); }
/* ---------- ranking: panel de filo, pestañas como hojas y el podio con rombos de oro, rosa y salmón ---------- */
.rankCard { padding: 18px 18px 18px 22px; gap: 12px; }
.rankDuel { border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
:is(#title, #options, #controls) .tabs, :is(#title, #options, #controls) .seg { border: 0; border-radius: 0; background: #0E0A0A; padding: 4px; gap: 4px; clip-path: var(--m-hex); }
:is(#title, #options, #controls) .tabs button, :is(#title, #options, #controls) .seg button {
  background: transparent; color: #B8A6A4; clip-path: var(--m-hoja); font-weight: 800;
}
:is(#title, #options, #controls) .tabs button:hover, :is(#title, #options, #controls) .seg button:hover { background: #2A2020; color: #F2ECEC; }
:is(#title, #options, #controls) .tabs button[aria-selected="true"], :is(#title, #options, #controls) .seg button[aria-pressed="true"] {
  background: #9C2315; color: #F2ECEC;
}
/* dificultad: segunda fila, más chica, filtra dentro del modo elegido arriba */
.rankCard .rankDif { margin-top: -6px; }
.rankCard .rankDif button { font-size: 12px; min-height: 30px; padding: 4px 2px; }
#title .rankDif button[aria-selected="true"] { background: #5E130D; color: #FFD98A; }
.rankList { counter-reset: puesto; gap: 4px; }
.rankList li:not(.rankEmpty) {
  counter-increment: puesto; position: relative; padding: 7px 6px 7px 32px; grid-template-columns: minmax(0, 1fr) repeat(3, auto); column-gap: 10px;
  background: #1C1515; clip-path: var(--m-hoja);
}
.rankList li:not(.rankEmpty)::before {
  content: counter(puesto); position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #111111;
  background: #6E5A5A; clip-path: var(--m-rombo);
}
.rankList li:not(.rankEmpty):nth-child(1)::before { background: #FFD98A; }
.rankList li:not(.rankEmpty):nth-child(2)::before { background: #E0B2B2; }
.rankList li:not(.rankEmpty):nth-child(3)::before { background: #FF8D71; }
.rankList li:not(.rankEmpty):nth-child(1) { background: #2A2117; }
.rankTop { padding: 0 6px 0 32px; grid-template-columns: minmax(0, 1fr) repeat(3, auto); column-gap: 10px; }
.rankStats span { min-width: 2.6em; }
.rankTop .rankStat { min-width: 2.6em; }
/* ---------- opciones: filas con rombo, interruptor hexagonal y volumen en segmentos como las barras del HUD ---------- */
#options .opt { border-bottom: 0; padding: 9px 0 9px 20px; position: relative; background: linear-gradient(90deg, transparent 0 20px, #211919 20px) bottom / 100% 1px no-repeat; }
#options .opt::before { content: ''; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: #5E4E4E; clip-path: var(--m-rombo); }
#options .opt:hover::before, #options .opt:focus-within::before { background: #FFD98A; }
#options .opt:last-of-type { background: none; }
.switch { border: 0; border-radius: 0; width: 62px; height: 30px; clip-path: var(--m-hex); background: #2A2020; }
:is(#options) .switch { background: #2A2020; clip-path: var(--m-hex); }
.switch::after { border-radius: 0; top: 5px; left: 9px; width: 20px; height: 20px; background: #6E5A5A; clip-path: var(--m-rombo); transition: left .22s cubic-bezier(.2,.9,.3,1.2), background .2s ease; }
.switch[aria-checked="true"], :is(#options) .switch[aria-checked="true"] { background: #9C2315; }
.switch[aria-checked="true"]::after { left: 33px; background: #FFD98A; }
:is(#options) .switch:hover { background: #3A2A2A; }
:is(#options) .switch[aria-checked="true"]:hover { background: #C8402D; }
#options input[type=range] { -webkit-appearance: none; appearance: none; width: 190px; height: 22px; background: transparent; cursor: pointer; --p: 50%; }
#options input[type=range]:focus-visible { outline: 0; }
#options input[type=range]::-webkit-slider-runnable-track {
  height: 10px; background:
    repeating-linear-gradient(90deg, transparent 0 17px, #151010 17px 19px),
    linear-gradient(90deg, #C8402D 0 var(--p), #2E2322 var(--p));
}
#options input[type=range]::-moz-range-track { height: 10px; background: repeating-linear-gradient(90deg, transparent 0 17px, #151010 17px 19px), linear-gradient(90deg, #C8402D 0 var(--p), #2E2322 var(--p)); }
#options input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -5px; background: #F2ECEC; clip-path: var(--m-rombo); border: 0; }
#options input[type=range]::-moz-range-thumb { width: 20px; height: 20px; background: #F2ECEC; clip-path: var(--m-rombo); border: 0; border-radius: 0; }
#options input[type=range]:hover::-webkit-slider-thumb, #options input[type=range]:focus-visible::-webkit-slider-thumb { background: #FFD98A; }
#options input[type=range]:focus-visible::-moz-range-thumb { background: #FFD98A; }
/* ---------- ranuras: cada partida con su número en un octógono (como el nivel del HUD) ---------- */
.slotList { counter-reset: ranura; gap: 8px; }
:is(#slots) .slotBtn {
  counter-increment: ranura; position: relative; padding: 12px 18px 12px 72px; min-height: 64px; justify-content: center;
  background: #1F1818; clip-path: var(--m-hoja); color: #F2ECEC;
}
:is(#slots) .slotBtn::before {
  content: counter(ranura); position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 18px; font-weight: 900; color: #111111;
  background: #FFD98A; clip-path: var(--m-oct);
}
:is(#slots) .slotBtn.vacia::before { background: #2E2424; color: #8A7272; }
:is(#slots) .slotBtn.vacia b { color: #B8A6A4; }
:is(#slots) .slotBtn:hover { background: #2A2020; }
:is(#slots) .slotBtn:hover::before { background: #FFE7AE; color: #111111; }
:is(#slots) .slotBtn b { font-weight: 900; }
:is(#slots) .slotBtn small { color: #E0B2B2; }
/* ---------- en línea y cuenta: el código grande entre rombos, el enlace de ayuda como etiqueta ---------- */
#online .onlineCode { display: flex; align-items: center; justify-content: center; gap: 18px; }
#online .onlineCode::before, #online .onlineCode::after { content: ''; width: 14px; height: 14px; background: #C8402D; clip-path: var(--m-rombo); }
#online #onlineHelp, #online #onlineHelp:hover {
  clip-path: var(--m-hoja); background: #211919; color: #FFD98A; text-decoration: none; padding: 6px 18px; min-height: 34px; font-size: 13px; letter-spacing: .04em;
}
#online #onlineHelp:hover { background: #2E2424; color: #F2ECEC; }
:is(#online, #cuenta, #naming) input { border: 0; border-radius: 0; clip-path: var(--m-hoja); background: #0E0A0A; box-shadow: inset 0 -3px #3A2E2C; padding-left: 18px; }
:is(#online, #cuenta, #naming) input:focus-visible { outline: 0; box-shadow: inset 0 -3px #FFD98A; }
/* una sola acción fuerte por pantalla: crear sala; lo demás, secundario */
#online #onlineHome > button:not(#onlineCreate):not(#onlineHelp) { background: #2A2020; color: #F2ECEC; }
#online #onlineHome > button:not(#onlineCreate):not(#onlineHelp):hover { background: #3A2A2A; }
#online .onlineRoom { background: #1F1818; }
#online .onlineRoom:hover { background: #2A2020; }
/* ---------- los paneles entran suave ---------- */
@keyframes mEntra { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
:is(#options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #privacidad, #controls, #guide):not([hidden]) .optCard { animation: mEntra .28s cubic-bezier(.2,.9,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  :is(#options, #online, #cuenta, #slots, #slotAsk, #exitAsk, #privacidad, #controls, #guide) .optCard { animation: none !important; }
  #title .mainNav button, #title .mainNav button::before, #title .mainNav button::after, .switch::after { transition: none !important; }
}