/* Arcade Vivo se conserva intacto. Cada variante define materiales y geometría. */
[data-theme] {
  --t-bg:#070d17; --t-panel:#101d2e; --t-hi:#172a41; --t-low:#0b1524;
  --t-ink:#f4f0e8; --t-muted:#aeb8c9; --t-accent:#ffb347; --t-on:#17110a;
  --t-second:#aaa4ff; --t-signal:#6ddccd; --t-line:#63758e;
  --t-radius:6px; --t-font:"Barlow Condensed","Arial Narrow",sans-serif;
  --t-pattern:linear-gradient(135deg,#21456360,transparent 60%);
  --t-shadow:0 7px 18px #0005;
}
[data-theme="nes"] {
  --t-bg:#b8b9b5; --t-panel:#e4e4de; --t-hi:#f6f5ef; --t-low:#cecec7;
  --t-ink:#222522; --t-muted:#4b4f49; --t-accent:#a51425; --t-on:#fff;
  --t-second:#464a46; --t-signal:#25613d; --t-line:#747871; --t-radius:1px;
  --t-pattern:repeating-linear-gradient(90deg,transparent 0 26px,#2222 26px 29px);
  --t-shadow:4px 5px 0 #42463c;
}
[data-theme="snes"] {
  --t-bg:#cac7d7; --t-panel:#eeedf4; --t-hi:#fff; --t-low:#ddd9ea;
  --t-ink:#302842; --t-muted:#625775; --t-accent:#60399c; --t-on:#fff;
  --t-second:#a22040; --t-signal:#166a51; --t-line:#9386a8; --t-radius:20px;
  --t-pattern:radial-gradient(circle at 95% 12%,#e8b64466 0 3%,transparent 3.2%),radial-gradient(circle at 88% 20%,#357ec966 0 3%,transparent 3.2%),radial-gradient(circle at 95% 28%,#3b9b6066 0 3%,transparent 3.2%);
}
[data-theme="neogeo"] {
  --t-bg:#0d0c09; --t-panel:#201d16; --t-hi:#302a1c; --t-low:#12110d;
  --t-ink:#fff3cf; --t-muted:#c5b88e; --t-accent:#edc454; --t-on:#171307;
  --t-second:#f0de9f; --t-signal:#a6d296; --t-line:#8f793e; --t-radius:3px;
  --t-pattern:repeating-linear-gradient(135deg,transparent 0 38px,#d8b55415 38px 40px);
  --t-shadow:0 0 0 2px #0d0c09,0 0 0 3px #8f793e,0 10px 24px #0009;
}
[data-theme="arcade"] {
  --t-bg:#10051e; --t-panel:#211032; --t-hi:#36194d; --t-low:#160a26;
  --t-ink:#fff0ff; --t-muted:#d2b6df; --t-accent:#ff8ad9; --t-on:#27051c;
  --t-second:#76e8ff; --t-signal:#b1f486; --t-line:#9862af; --t-radius:12px 2px;
  --t-pattern:linear-gradient(#c540ff14 1px,transparent 1px),linear-gradient(90deg,#25d9ff14 1px,transparent 1px);
  --t-shadow:0 0 16px #e939db35,inset 0 0 20px #a723df15;
}
[data-theme="pixel"] {
  --t-bg:#10152e; --t-panel:#21294b; --t-hi:#303d64; --t-low:#151c37;
  --t-ink:#fffbe9; --t-muted:#bbc9e5; --t-accent:#ffe16b; --t-on:#252009;
  --t-second:#ff9ea0; --t-signal:#80e9bb; --t-line:#8399c6; --t-radius:0px;
  --t-font:"Lucida Console",Monaco,monospace;
  --t-pattern:repeating-conic-gradient(#7186b818 0% 25%,transparent 0% 50%);
  --t-shadow:5px 5px 0 #040713;
}
[data-theme="atari"] {
  --t-bg:#291b11; --t-panel:#211e18; --t-hi:#373024; --t-low:#13120f;
  --t-ink:#fff0d6; --t-muted:#ccbaa0; --t-accent:#ffbf72; --t-on:#291608;
  --t-second:#e8a978; --t-signal:#cdd696; --t-line:#9c7954; --t-radius:2px;
  --t-font:Georgia,"Times New Roman",serif;
  --t-pattern:repeating-linear-gradient(2deg,#92542430 0 2px,#2a180f30 3px 6px,#b16e3530 7px 9px);
  --t-shadow:0 6px 0 #130b07,0 10px 20px #0007;
}
[data-theme="consoles"] {
  --t-bg:#071b22; --t-panel:#102d38; --t-hi:#194454; --t-low:#0b202a;
  --t-ink:#e9fbff; --t-muted:#adced8; --t-accent:#86e3ff; --t-on:#07232e;
  --t-second:#c3c9ff; --t-signal:#86edcf; --t-line:#598a9b; --t-radius:18px;
  --t-pattern:radial-gradient(ellipse at 15% 0,#6dc9e044,transparent 65%);
  --t-shadow:inset 0 1px 0 #c6f5ff55,0 15px 25px #0004;
}
[data-theme="gameboy"] {
  --t-bg:#89976b; --t-panel:#cad6a0; --t-hi:#e1ebbf; --t-low:#b5c488;
  --t-ink:#1c3519; --t-muted:#425435; --t-accent:#2d4b26; --t-on:#eef6d4;
  --t-second:#3c5430; --t-signal:#2c4822; --t-line:#657a49; --t-radius:8px 8px 32px 8px;
  --t-font:"Lucida Console",Monaco,monospace;
  --t-pattern:radial-gradient(#253d2522 1px,transparent 1px);
  --t-shadow:inset 3px 3px 0 #32422544,3px 4px 0 #445139;
}
[data-theme="dreamcast"] {
  --t-bg:#dfeaf2; --t-panel:#f7fbff; --t-hi:#fff; --t-low:#e4eef7;
  --t-ink:#123750; --t-muted:#4e6577; --t-accent:#b53e09; --t-on:#fff;
  --t-second:#155f9c; --t-signal:#13715d; --t-line:#8aafc7; --t-radius:25px 8px;
  --t-pattern:repeating-radial-gradient(circle at 100% 0,transparent 0 40px,#378bc71a 41px 43px,transparent 44px 80px);
  --t-shadow:0 8px 24px #37688325;
}
html[data-theme]:not([data-theme="original"]) {
  --bg:var(--t-bg); --panel:var(--t-panel); --panel-hi:var(--t-hi); --panel-low:var(--t-low);
  --ink:var(--t-ink); --chalk:var(--t-ink); --muted:var(--t-muted); --line:var(--t-line);
  --accent:var(--t-accent); --accent-hi:var(--t-accent); --signal:var(--t-signal); --violet:var(--t-second); --display:var(--t-font);
  background:var(--t-bg); color-scheme:dark;
}
html[data-theme="nes"],html[data-theme="snes"],html[data-theme="gameboy"],html[data-theme="dreamcast"] { color-scheme:light; }
html[data-theme]:not([data-theme="original"]) body {
  background-color:var(--t-bg); background-image:var(--t-pattern); background-size:auto;
}
html[data-theme="arcade"] body { background-size:40px 40px; }
html[data-theme="pixel"] body { background-size:24px 24px; }
html[data-theme="gameboy"] body { background-size:4px 4px; }
html[data-theme]:not([data-theme="original"]) body::before { background:var(--t-accent); }
html[data-theme]:not([data-theme="original"]) .topbar { background:var(--t-panel); border-color:var(--t-line); }
html[data-theme]:not([data-theme="original"]) :is(.brand-copy small,.hint,.hero-description,.hero-eyebrow,.filter-label,.room-rom,.room-age,.slot-foot,.stat i,.help-steps span,.card.create > .hint) { color:var(--t-muted); }
html[data-theme]:not([data-theme="original"]) #viewLobby > .card,
html[data-theme]:not([data-theme="original"]) :is(.modal-box,.modal-body,.modal-head,.help-steps li,.access-human,.access-terms),
html[data-theme]:not([data-theme="original"]) #viewRoom :is(.side,.slot,.netbar) {
  background:linear-gradient(145deg,var(--t-hi),var(--t-panel)); color:var(--t-ink);
  border-color:var(--t-line); border-radius:var(--t-radius); box-shadow:var(--t-shadow);
}
html[data-theme]:not([data-theme="original"]) #viewLobby > .card { border-top-color:var(--card-accent); }
html[data-theme]:not([data-theme="original"]) .arcade-hero { background:var(--t-low); border:2px solid var(--t-line); border-radius:var(--t-radius); }
html[data-theme]:not([data-theme="original"]) .arcade-hero::before { background:linear-gradient(90deg,var(--t-panel) 0%,var(--t-panel) 30%,transparent 100%); }
html[data-theme]:not([data-theme="original"]) .arcade-hero::after { background-image:var(--t-pattern); mix-blend-mode:normal; opacity:.25; animation:none; }
html[data-theme]:not([data-theme="original"]) .hero-copy h1 { color:var(--t-ink); text-shadow:none; }
html[data-theme="pixel"] .hero-copy h1,html[data-theme="gameboy"] .hero-copy h1 { font-size:clamp(28px,3.3vw,48px); line-height:1.05; letter-spacing:-.06em; }
html[data-theme="nes"] .arcade-art { filter:grayscale(1) contrast(1.15); }
html[data-theme="snes"] .arcade-art { filter:hue-rotate(30deg) saturate(.7); }
html[data-theme="neogeo"] .arcade-art { filter:sepia(.8) saturate(.8); }
html[data-theme="arcade"] .arcade-art { filter:hue-rotate(285deg) saturate(1.5); }
html[data-theme="pixel"] .arcade-art { image-rendering:pixelated; filter:saturate(1.7) contrast(1.2); }
html[data-theme="atari"] .arcade-art { filter:sepia(.9); }
html[data-theme="gameboy"] .arcade-art { filter:grayscale(1) sepia(1) hue-rotate(35deg); opacity:.5; }
html[data-theme="dreamcast"] .arcade-art { filter:saturate(.6) brightness(1.25); }
html[data-theme]:not([data-theme="original"]) :is(.btn,.btn.utility,.btn.ghost,.system-filter-btn,.keycap) {
  color:var(--t-ink); background:linear-gradient(var(--t-hi),var(--t-low)); border-color:var(--t-line); border-radius:var(--t-radius); box-shadow:0 3px 0 var(--t-line);
}
html[data-theme]:not([data-theme="original"]) :is(.btn:hover,.system-filter-btn:hover) { border-color:var(--t-accent); background:var(--t-hi); }
html[data-theme]:not([data-theme="original"]) :is(.btn.primary,.system-filter-btn.is-active,.panel-code > span,.chat-unread) { background:var(--t-accent); color:var(--t-on); border-color:var(--t-accent); }
html[data-theme]:not([data-theme="original"]) .btn:disabled { background:var(--t-low); color:var(--t-muted); border-color:var(--t-line); opacity:.65; }
html[data-theme]:not([data-theme="original"]) .system-filter-btn small { color:var(--t-muted); }
html[data-theme]:not([data-theme="original"]) .system-filter-btn.is-active small { color:var(--t-on); }
html[data-theme]:not([data-theme="original"]) :is(.input,.input:hover,.input:focus-visible,.nick input,select option,.card.create .drop,.empty,.chat,.chat-form .input),
html[data-theme]:not([data-theme="original"]) #viewRoom .side .chat {
  background:var(--t-low); color:var(--t-ink); border-color:var(--t-line); border-radius:var(--t-radius);
}
html[data-theme]:not([data-theme="original"]) .input::placeholder { color:var(--t-muted); }
html[data-theme]:not([data-theme="original"]) :is(.drop-title,.room-title,.slot-name,.pads h4,.empty strong) { color:var(--t-ink); }
html[data-theme]:not([data-theme="original"]) :is(.drop-sub,.empty span,.msg.sys,.stage-title span) { color:var(--t-muted); }
html[data-theme]:not([data-theme="original"]) :is(.legal b,.chat b,.msg.me b,.manual-stamp) { color:var(--t-accent); }
html[data-theme]:not([data-theme="original"]) .rooms-list > .room { background:var(--t-panel); border-color:var(--t-line); border-radius:var(--t-radius); }
html[data-theme]:not([data-theme="original"]) #viewRoom.room { background:var(--t-bg); }
html[data-theme]:not([data-theme="original"]) #viewRoom .stage { border-color:var(--t-line); box-shadow:0 0 0 4px var(--t-low); }
html[data-theme]:not([data-theme="original"]) #viewRoom .stage-title b { color:var(--t-ink); }
html[data-theme]:not([data-theme="original"]) .room-status > span { background:var(--t-low); color:var(--t-ink); border-color:var(--t-line); }
html[data-theme]:not([data-theme="original"]) .user.me { background:var(--t-accent); color:var(--t-on); border-color:var(--t-line); }
html[data-theme]:not([data-theme="original"]) .user.me::before { background:var(--t-on); }
html[data-theme]:not([data-theme="original"]) :is(#roomsCount,#usersCount) { background:var(--t-accent); color:var(--t-on); }
html[data-theme]:not([data-theme="original"]) #viewRoom :is(.slot-num,.slot-tag) { background:var(--t-accent); color:var(--t-on); }
@media(max-width:800px) { html[data-theme="atari"] .hero-copy h1 { font-size:clamp(28px,8vw,45px); } }
/* Selector nativo: foco contenido, Escape y retorno al botón de apertura. */
#themeDialog { width:min(1000px,calc(100% - 24px)); max-height:88dvh; padding:22px; box-sizing:border-box; overflow-y:auto; color:var(--t-ink); background:var(--t-panel); border:2px solid var(--t-line); border-radius:14px; box-shadow:0 24px 90px #000b; }
#themeDialog::backdrop { background:#030712cc; }
.theme-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.theme-heading h2 { margin:0; font:800 28px/1.1 "Barlow Condensed",sans-serif; }
.theme-heading p,.theme-note { color:var(--t-muted); font:13px/1.5 "Segoe UI",sans-serif; }
.theme-heading .btn { min-height:44px; }
.theme-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.theme-choice { position:relative; display:flex; flex-direction:column; gap:8px; min-width:0; padding:10px; cursor:pointer; text-align:left; color:var(--t-ink); background:var(--t-panel); border:2px solid var(--t-line); border-radius:var(--t-radius); }
.theme-choice:hover { transform:translateY(-2px); }
.theme-choice[aria-pressed="true"] { outline:3px solid var(--t-accent); outline-offset:2px; }
.theme-choice strong { font:700 15px/1.2 "Segoe UI",sans-serif; }
.theme-description { font:12px/1.4 "Segoe UI",sans-serif; color:var(--t-muted); }
.theme-preview { display:block; width:100%; padding:10px; box-sizing:border-box; background-color:var(--t-bg); background-image:var(--t-pattern); border-radius:var(--t-radius); }
.theme-preview-screen { display:grid; place-items:center; height:64px; color:var(--t-accent); background:var(--t-low); border:3px solid var(--t-line); font:800 32px var(--t-font); border-radius:var(--t-radius); }
.theme-preview-controls { display:flex; align-items:center; gap:5px; margin-top:8px; color:var(--t-ink); font:700 22px monospace; }
.theme-preview-controls i { width:10px; height:10px; border-radius:50%; background:var(--t-accent); }
.theme-preview-controls i:first-child { margin-left:auto; background:var(--t-second); }
.theme-preview-controls i:last-child { background:var(--t-signal); }
.theme-selected { font:700 10px "Segoe UI",sans-serif; color:var(--t-on); background:var(--t-accent); padding:3px 6px; margin-top:auto; align-self:start; visibility:hidden; }
.theme-choice[aria-pressed="true"] .theme-selected { visibility:visible; }
#themeStatus { min-height:20px; color:var(--t-accent); font:600 13px "Segoe UI",sans-serif; }
@media(max-width:800px) { .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #themeDialog { padding:16px; } .theme-heading h2 { font-size:24px; } }

/* Personalización independiente por tema. Las imágenes son decorativas del lobby. */
.theme-options { margin:14px 0 0; padding:12px; border:1px solid var(--t-line); border-radius:8px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.theme-options legend { color:var(--t-accent); font:700 15px "Segoe UI",sans-serif; padding:0 6px; }
.theme-options small { flex-basis:100%; color:var(--t-muted); font:12px/1.4 "Segoe UI",sans-serif; }
.theme-toggles { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.theme-toggles label { display:flex; align-items:center; gap:7px; min-height:44px; padding:0 10px; background:var(--t-low); border:1px solid var(--t-line); border-radius:6px; cursor:pointer; font:13px "Segoe UI",sans-serif; }
.theme-toggles input { width:18px; height:18px; accent-color:var(--t-accent); }
.theme-font-label { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font:13px "Segoe UI",sans-serif; }
#themeFont { min-height:44px; max-width:100%; padding:7px; background:var(--t-low); color:var(--t-ink); border:1px solid var(--t-line); border-radius:5px; font:14px "Segoe UI",sans-serif; }
#resetTheme { min-height:44px; font-size:10px; }
.theme-preview img { width:100%; height:auto; aspect-ratio:16/9; display:block; object-fit:cover; border-radius:var(--t-radius); }
html[data-theme-images="on"] .arcade-art { width:70%; height:100%; max-width:none; right:0; bottom:0; object-fit:cover; object-position:right center; filter:none; opacity:1; }
html[data-theme-images="off"] .arcade-art { display:none !important; }
html[data-theme-fonts="on"] :is(.brand-copy b,.hero-copy h1,.card h2,#viewRoom .stage-title b,.room-title) { font-family:var(--theme-heading-font); font-weight:700; }
html[data-theme-fonts="on"] .hero-copy h1 { font-size:clamp(30px,3.7vw,56px); line-height:1.02; letter-spacing:-.03em; }
html[data-theme-fonts="on"] #viewLobby .card h2 { font-size:clamp(18px,1.5vw,24px); line-height:1.15; }
html[data-theme-fonts="on"] .brand-copy b { font-size:21px; }
html[data-theme-fonts="off"] body { --display:"Segoe UI",Arial,sans-serif; --body:"Segoe UI",Arial,sans-serif; --mono:"Segoe UI",Arial,sans-serif; --pixel:"Segoe UI",Arial,sans-serif; }
html[data-theme-fonts="off"] :is(.brand-copy b,.hero-copy h1,.card h2,#viewRoom .stage-title b,.room-title,.btn,.panel-code) { font-family:"Segoe UI",Arial,sans-serif !important; }
html[data-theme-effects="on"] .arcade-hero { box-shadow:0 0 24px color-mix(in srgb,var(--t-accent) 20%,transparent),var(--t-shadow); }
html[data-theme-effects="on"] .hero-copy h1 em { text-shadow:0 0 20px color-mix(in srgb,var(--t-accent) 30%,transparent); }
html[data-theme-effects="on"] .arcade-hero::after { opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 3px,var(--t-accent) 3px 4px); }
html[data-theme-effects="off"] body { background-image:none !important; }
html[data-theme-effects="off"] :is(.arcade-hero,.topbar,#viewLobby > .card,#viewRoom .slot,#viewRoom .side,.btn,.hero-copy h1 em) { box-shadow:none !important; text-shadow:none !important; }
html[data-theme-effects="off"] :is(.arcade-hero::after,#viewRoom .stage::before,#viewLobby > .card::after) { display:none !important; }
html[data-theme-gradients="off"] :is(.topbar,#viewLobby > .card,.btn,.btn.utility,.btn.ghost,.modal-box,.modal-body,.modal-head,#viewRoom.room,#viewRoom .side,#viewRoom .slot,#viewRoom .netbar,.rooms-list > .room) { background-image:none !important; background-color:var(--t-panel); }
html[data-theme-gradients="off"] .btn.primary { background-color:var(--t-accent); color:var(--t-on); }
html[data-theme-gradients="off"] .arcade-hero::before { background:var(--t-panel) !important; right:40%; opacity:.94; }
html[data-theme-animations="on"] body:not(.ambient-off):not(.ambient-paused) .arcade-art { animation:theme-drift 18s ease-in-out infinite alternate; }
html[data-theme-animations="on"] body:not(.ambient-off):not(.ambient-paused) .arcade-hero::after { animation:theme-glimmer 8s ease-in-out infinite alternate; }
@keyframes theme-drift { from { transform:scale(1); } to { transform:scale(1.045); } }
@keyframes theme-glimmer { from { opacity:.04; } to { opacity:.14; } }
html[data-theme-animations="off"] :is(.arcade-art,.arcade-hero::after,.btn,.system-filter-btn,.theme-choice),
body.ambient-paused :is(.arcade-art,.arcade-hero::after),body.ambient-off :is(.arcade-art,.arcade-hero::after) { animation:none !important; transition:none !important; }
@media(max-width:800px) {
  html[data-theme-images="on"] .arcade-art { width:100%; opacity:.58; }
  html[data-theme-fonts="on"] .hero-copy h1 { font-size:clamp(25px,7.8vw,40px); }
  html[data-theme-fonts="on"] .brand-copy b { font-size:clamp(16px,4.7vw,21px); }
  html[data-theme-gradients="off"] .arcade-hero::before { right:0; opacity:.88; }
  .theme-toggles label { flex:1 1 42%; padding:6px; }
  .theme-font-label { min-width:0; width:100%; }
}
@media(prefers-reduced-motion:reduce) { .arcade-art,.arcade-hero::after { animation:none !important; } }