/* Salón Arcade Vivo: identidad propia para NES, Super Nintendo y Neo Geo. */
:root {
  --bg:#070d17;
  --panel:#101d2e;
  --panel-hi:#172a41;
  --panel-low:#0b1524;
  --ink:#f4f0e8;
  --chalk:#f4f0e8;
  --muted:#aeb8c9;
  --line:#3b506c;
  --accent:#ffb347;
  --accent-hi:#ffd58e;
  --signal:#6ddccd;
  --violet:#aaa4ff;
  --danger:#ff8b87;
  --mono:"Lucida Console",Monaco,Consolas,monospace;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Space Grotesk","Segoe UI",sans-serif;
  --pixel:"Press Start 2P",var(--mono);
}

html,body { background:#070d17; }
body {
  color:var(--chalk);
  background-image:
    linear-gradient(rgba(139,164,195,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,164,195,.045) 1px,transparent 1px),
    radial-gradient(ellipse at 78% -8%,#21456370,transparent 54%);
  background-size:32px 32px,32px 32px,auto;
  font-family:var(--body);
}
body::before {
  width:4px;
  background:repeating-linear-gradient(180deg,#ff4b5c 0 18px,#0e1a2a 18px 23px);
  opacity:.9;
}

.topbar {
  min-height:64px;
  padding:9px 24px;
  background:linear-gradient(180deg,#0b1422,#080f1c);
  color:var(--chalk);
  border:0;
  border-bottom:1px solid #31445c;
  box-shadow:0 5px 24px #0005;
}
.topbar::after { display:none; }
.brand { gap:10px; min-width:0; }
.brand-mark {
  width:58px; height:40px; background:none; border:0; box-shadow:none;
  color:#d6d5dc; transform:none; flex:0 0 auto;
}
.brand-mark svg { width:100%; height:100%; }
.brand-copy { padding:0; border:0; background:none; min-width:0; }
.brand-copy b {
  color:var(--chalk); font:800 25px/1 var(--display); letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap;
}
.brand-copy strong { color:var(--accent); font-weight:800; }
.brand-copy small {
  color:#aeb8c9; font:8px/1.6 var(--mono); letter-spacing:.12em;
  white-space:nowrap;
}
.topbar-right { gap:10px; }
.topbar .utility { min-height:36px; }
.conn {
  background:#111a1c; border:1px solid #526d6b; border-radius:4px;
  color:#c0eee3;
}
.nick input {
  background:#111925; color:var(--chalk); border:1px solid #66768d;
  border-radius:4px; box-shadow:inset 0 2px 4px #0005;
}

.btn,.btn.utility,.btn.ghost {
  background:linear-gradient(180deg,#283b54,#1a2a40);
  border:1px solid #6b7d95; border-bottom:3px solid #080d15;
  border-radius:4px; color:var(--chalk); box-shadow:0 2px 0 #05080d;
  font-family:var(--mono); font-weight:700; letter-spacing:.035em;
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s;
}
.btn:hover,.btn.utility:hover,.btn.ghost:hover {
  background:linear-gradient(180deg,#405879,#273d58);
  border-color:var(--accent-hi); color:#fff;
}
.btn:active { transform:translateY(2px); box-shadow:inset 0 2px 5px #0008; }
.btn.primary {
  background:linear-gradient(180deg,#ffc266,#ed9b36); border-color:#ffe0a7;
  border-bottom-color:#8d5016; color:#17110a;
}
.btn.primary:hover { background:linear-gradient(180deg,#ffdc95,#ffae4f); color:#17110a; }
.btn.primary:disabled { background:#3a3544; border-color:#605b70; color:#aaa5b7; }
.btn:disabled { cursor:not-allowed; }
:focus-visible { outline:3px solid var(--accent) !important; outline-offset:3px; }

/* La mesa del lobby: hero y tres operaciones comparten la misma retícula. */
#viewLobby.view.lobby {
  height:calc(100dvh - 64px);
  min-height:0;
  max-width:1600px;
  padding:9px 24px 18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:clamp(160px,25vh,230px) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  overflow:hidden;
}
#viewLobby > .card {
  height:100%; min-height:0; margin:0; overflow:hidden;
  border:1px solid #38516e; border-top:3px solid var(--card-accent);
  border-radius:4px 4px 14px 4px;
  background:linear-gradient(150deg,#152840,#0d192a 72%);
  color:var(--chalk); box-shadow:0 7px 18px #0007;
  transform:none;
}
#viewLobby > .card.create { --card-accent:var(--accent); }
#viewLobby > .card.rooms { --card-accent:var(--violet); }
#viewLobby > .card.social { --card-accent:var(--signal); }
#viewLobby > .card.create,
#viewLobby > .card.rooms,
#viewLobby > .card.social { padding:14px 16px; }
#viewLobby > .card.create { display:flex; flex-direction:column; gap:7px; }
#viewLobby > .card.rooms,
#viewLobby > .card.social { display:flex; flex-direction:column; }
#viewLobby > .card::after {
  width:42px; height:4px; right:9px; top:auto; bottom:5px;
  border-radius:0; background:repeating-linear-gradient(90deg,#59708b 0 2px,transparent 2px 5px);
  box-shadow:none;
}
.card h2 { color:var(--chalk); font:700 clamp(20px,1.8vw,30px)/1 var(--display); letter-spacing:.02em; }
.hint,.rooms .hint,.social .hint,.field,.lib-title,.legal,.muted { color:var(--muted); }
.panel-code,.card.create .panel-code,.rooms .panel-code,.social .panel-code {
  display:flex; align-items:center; gap:8px; align-self:stretch; margin:0 0 5px; padding:0;
  color:var(--card-accent); background:none; border:0;
  font:10px/1.35 var(--mono); letter-spacing:.1em;
}
.panel-code > span {
  display:grid; place-items:center; width:25px; height:25px;
  background:var(--card-accent); color:#0a1422; font-weight:800;
}
.panel-code i { margin-left:auto; font-style:normal; font-size:11px; }
.card.create > .hint { margin:0; color:#bcc5d2; font-size:12px; line-height:1.35; }
.card.create > .hint small { display:none; }
.card.create .drop {
  margin:0; min-height:55px; height:55px; padding:8px 12px;
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(90deg,#111b2b 0 4px,#172337 4px 6px);
  border:2px solid #75849a; border-radius:5px; box-shadow:inset 0 3px 9px #0009;
}
.card.create .drop:hover,.card.create .drop.over { border-color:var(--accent); background:#253951; }
.card.create .drop-icon { display:none; }
.card.create .drop-title {
  color:#f2eee5; font:700 12px/1.2 var(--display); letter-spacing:.03em; text-transform:uppercase;
}
.card.create .drop-title::before { content:'＋'; margin-right:8px; color:var(--accent); }
.card.create .drop-sub { display:block; margin-left:8px; color:#aab7c8; font:9px/1 var(--mono); }
.card.create .rom-picked {
  margin:0; padding:6px 9px; background:#193831; color:#bce8db;
  border:1px solid #5b9c8e; border-radius:4px;
}
.card.create .rom-picked .linkbtn { color:#ccefe6; }
.rom-system {
  min-width:0; margin-left:auto; color:var(--signal); font:8px/1.2 var(--mono); letter-spacing:.04em;
  text-transform:uppercase;
}
.card.create .rom-lib { margin:0; }
.card.create .rom-lib .lib-title { margin-bottom:3px; font:9px/1.25 var(--mono); }
.card.create .field { margin:0; font-size:9px; }
.card.create .input { margin-top:4px; min-height:40px; padding:7px 9px; font-size:14px; }
.card.create .btn.big { margin:0; min-height:44px; }
.card.create .legal {
  margin:0; margin-top:auto; padding-top:6px; border-color:#465974;
  font-size:9px; line-height:1.25;
}
.legal b { color:#e4be79; }

/* Hero: el arte da contexto; los filtros son controles reales. */
.arcade-hero {
  grid-column:1/-1; position:relative; isolation:isolate; overflow:hidden; min-width:0;
  padding:0; background:#081321; border:1px solid #1d3853;
  box-shadow:0 7px 18px #0007;
}
.arcade-hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(135deg,#102b48 0%,transparent 38%),linear-gradient(90deg,#07101de8 0%,#07101dbb 36%,#07101d22 76%),linear-gradient(0deg,#07101d,transparent 45%);
}
.arcade-hero::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.22;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#dbe9ff 3px 4px);
  mix-blend-mode:overlay;
}
.arcade-art {
  position:absolute; z-index:-2; right:-18px; bottom:0; width:min(740px,70%);
  height:auto; pointer-events:none; filter:saturate(.9) contrast(1.05);
}
.hero-copy { position:relative; max-width:74%; padding:12px 20px 10px; }
.hero-eyebrow { margin:0 0 7px; color:#c0cad9; font:9px/1.4 var(--mono); letter-spacing:.16em; }
.hero-eyebrow span {
  display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%;
  background:var(--signal); box-shadow:0 0 10px #6ddccd99;
}
.hero-copy h1 {
  margin:0; color:#f4f0e8; font:900 clamp(42px,5vw,74px)/.86 var(--display);
  letter-spacing:-.02em; text-shadow:3px 3px 0 #07101d;
}
.hero-copy h1 em { color:var(--accent); font-style:normal; }
.hero-description { margin:9px 0 8px; color:#c5d1e0; font-size:12px; }
.system-filter { display:flex; align-items:center; gap:9px; min-width:0; }
.filter-label { flex:0 0 auto; color:#899bb1; font:8px/1 var(--mono); letter-spacing:.12em; }
.filter-buttons { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.system-filter-btn {
  min-height:30px; padding:4px 9px; cursor:pointer; text-align:left;
  color:#d8e2ee; background:#0d1b2d9e; border:1px solid #49617c; border-radius:3px;
  font-family:var(--body); transition:background .18s,border-color .18s,transform .18s;
}
.system-filter-btn b { display:block; font:700 10px/1.05 var(--display); letter-spacing:.04em; }
.system-filter-btn small { display:block; margin-top:3px; color:#98a9be; font:8px/1 var(--mono); }
.system-filter-btn:hover { border-color:var(--accent); background:#203754; transform:translateY(-1px); }
.system-filter-btn.is-active { color:#101a28; background:var(--accent); border-color:#ffe0a4; box-shadow:0 0 15px #ffb34745; }
.system-filter-btn.is-active small { color:#4a341b; }
.hero-stamp {
  position:absolute; right:12px; bottom:11px; color:#d9c7a4; text-align:right;
  font:8px/1.7 var(--mono); letter-spacing:.16em;
}

/* Crear, buscar y comunidad: listas contenidas, nunca tarjetas que crecen. */
.input,.nick input {
  background:#111925; color:var(--chalk); border:1px solid #6d7d91; border-radius:4px;
  box-shadow:inset 0 2px 4px #0005;
}
.input:hover,.input:focus-visible,.nick input:focus-visible { background:#1d2a3d; color:#fff; }
.input::placeholder { color:#98a7bb; opacity:1; }
select option { background:#172334; color:var(--chalk); }
.rooms-hint { margin:6px 0 0; font-size:11px; line-height:1.35; }
.rooms-list { flex:1; min-height:0; max-height:none; margin-top:10px; padding:2px 4px 8px 1px; overflow-y:auto; scrollbar-color:#7187a0 #0b1422; }
.rooms-list > .room {
  display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:10px;
  position:relative; margin-bottom:9px; padding:9px 10px; min-width:0;
  border:1px solid #435873; border-left:4px solid var(--room-accent,var(--violet)); border-radius:4px;
  background:linear-gradient(135deg,#17283e,#101b2b); color:var(--chalk); box-shadow:2px 3px 0 #050a11;
}
.rooms-list > .room:hover { background:#203650; border-color:#7891ae; }
.room-nes { --room-accent:var(--accent); }
.room-snes { --room-accent:var(--violet); }
.room-neogeo { --room-accent:var(--signal); }
.room-art {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:52px; height:58px; border:2px solid #7389a3; border-radius:3px;
  background:linear-gradient(145deg,#c5ccd1 0 58%,#737d8c 58% 100%); color:#182436;
  box-shadow:inset 0 0 0 3px #202b3b,2px 2px 0 #060b12;
}
.room-art::before { content:""; width:24px; height:5px; background:#1b2635; border:1px solid #0b111b; }
.room-art b { font:800 10px/1 var(--display); letter-spacing:.04em; }
.room-art small { font:6px/1 var(--mono); letter-spacing:.06em; }
.room-art-snes { background:linear-gradient(145deg,#d6d2dc 0 58%,#77718c 58% 100%); color:#2e2741; }
.room-art-snes::before { background:linear-gradient(90deg,#c45163 0 25%,#e3c953 25% 50%,#65b878 50% 75%,#4c8fc4 75%); }
.room-art-neogeo { background:linear-gradient(145deg,#252a37 0 58%,#10141d 58% 100%); color:#ffbf5e; border-color:#9a7a4d; }
.room-art-neogeo::before { width:20px; height:20px; border:2px solid #ffbf5e; border-radius:50%; background:#121724; }
.room-system { margin-bottom:2px; color:var(--room-accent); font:8px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.room-title { color:#f3efe7; font:700 15px/1.1 var(--display); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-rom { margin-top:3px; color:#9fafc2; font:9px/1.3 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-players { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.chip { padding:3px 5px; color:#c8d4e2; background:#1b2b40; border:1px solid #58708b; border-radius:2px; font:8px/1.15 var(--mono); }
.chip.p1 { color:#a6f0e2; border-color:#55a99b; background:#143b38; }
.chip.p2 { color:#f4cb8e; border-color:#ae7b39; background:#3a2b19; }
.chip.free { color:#d8d0a2; border-style:dashed; }
.chip.live { color:#d0ffb1; border-color:#6fa466; background:#1e3d2b; }
.chip.ping-good { color:#d0ffb1; border-color:#6fa466; }
.chip.ping-mid { color:#ffe0a0; border-color:#a77d3a; }
.chip.ping-bad { color:#ffb4ae; border-color:#b95e5a; }
.room-enter { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.room-enter .btn { min-height:36px; padding:6px 9px; font-size:8px; }
.room-age { color:#8d9caf; font:8px/1 var(--mono); white-space:nowrap; }
.empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:150px; padding:20px 14px; color:#c0cce0; background:#0c1727;
  border:1px dashed #4d6581; border-radius:3px; text-align:center; font-size:12px;
}
.empty::before { content:'WAITING FOR PLAYER'; color:var(--violet); font:8px/1.8 var(--pixel); }
.empty strong { color:#f1eee7; font-weight:600; }
.empty span { color:#99aabd; }
.empty-reset { color:var(--accent); }
.users { gap:5px; margin-top:8px; }
.user { padding:5px 8px; color:#bdebe0; background:#123732; border:1px solid #55998d; border-radius:2px; font:9px/1.2 var(--mono); }
.user.me { color:#13271f; background:var(--signal); border-color:#c0fff3; }
.user::before { background:var(--signal); }
.user.me::before { background:#13271f; }
.card.social .chat-wrap { flex:1; min-height:0; }
.chat-wrap { position:relative; }
.chat {
  flex:1; min-height:0; max-height:none; margin-top:9px; padding:9px;
  color:#d8e7e2; background:#0d191a; border:1px solid #53746e; border-radius:4px;
  box-shadow:inset 0 3px 10px #0009; scrollbar-color:#6b9b91 #111d1d;
  font-size:11px; overflow-y:auto; overflow-wrap:anywhere;
}
.chat b { color:#9fe6d4; font:700 10px var(--mono); }
.msg { margin:0 0 7px; padding-left:7px; border-left:2px solid #385653; line-height:1.35; }
.msg.me { border-left-color:var(--accent); }
.msg.me b { color:#ffb77a; }
.msg.sys { border-left:0; color:#91aaa2; font:10px/1.4 var(--mono); }
.chat-unread {
  position:absolute; right:8px; bottom:54px; z-index:2; min-height:28px;
  padding:5px 8px; color:#15120b; background:var(--accent); border-color:#ffe0a4;
  font:700 8px/1 var(--mono); box-shadow:0 3px 0 #080b10;
}
.chat-form { position:relative; z-index:1; gap:7px; margin-top:8px; }
.chat-form .input { min-width:0; background:#121c2a; color:var(--chalk); }

/* Modales y ajustes: aspecto de manual, con divulgación progresiva. */
.modal { background:#050910de; }
.modal-box {
  background:#122238; color:var(--chalk); border:1px solid #68809c; border-top:4px solid var(--accent);
  border-radius:8px; box-shadow:0 18px 70px #000b;
}
.modal-head { background:#0b1626; color:var(--chalk); border-color:#3b536e; }
.modal-head h3 { font-size:25px; line-height:1.1; }
.modal-body { background:#122238; color:var(--chalk); }
.manual-stamp { color:#e4c58d; border-color:#806b47; background:none; }
.access-human,.access-terms { color:#e7edf2; background:#17283c; border-color:#536b84; border-radius:4px; }
.access-status { color:#ffaaa4; }
.keycap { color:#e8e3ff; background:#2a2c45; border-color:#887fb3; }
.ctl-col,.pads { border-color:#3b536d !important; }
.pads h4 { color:#f4f0e8; }
.help-steps { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:quick; }
.help-steps li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; align-items:center; padding:11px; background:#0d1b2d; border:1px solid #3b5875; border-radius:4px; }
.help-steps li::before { counter-increment:quick; content:counter(quick,decimal-leading-zero); display:grid; place-items:center; width:30px; height:30px; color:#111a29; background:var(--accent); font:700 10px var(--mono); }
.help-steps b { display:block; color:var(--accent); font:700 15px var(--display); text-transform:uppercase; }
.help-steps span { display:block; margin-top:2px; color:#c7d2e0; font-size:12px; line-height:1.4; }
.help-note { margin:14px 0 0; }

/* Sala: misma identidad del lobby, con el juego como superficie principal. */
.room-status {
  display:flex; align-items:center; gap:6px; min-width:0; margin-left:auto;
  color:#b9c7d8; font:8px/1 var(--mono); letter-spacing:.07em; white-space:nowrap;
}
.room-system-badge,.room-role-badge,.room-live-badge {
  display:inline-flex; align-items:center; min-height:24px; padding:4px 7px;
  border:1px solid #536b86; border-radius:3px; background:#101d2e; color:#dfe9f5;
}
.room-system-badge { color:var(--accent); border-color:#a47a3a; }
.room-role-badge { color:#c7bbff; border-color:#766bb2; }
.room-live-badge { color:#9fe6d4; border-color:#4f8e84; }
.room-live-badge i {
  width:6px; height:6px; margin-right:5px; border-radius:50%; background:#768493;
}
.room-live-badge i.ready { background:var(--signal); box-shadow:0 0 9px #6ddccd; }
body:not(.ambient-off):not(.ambient-paused) .arcade-hero::after { animation: arcade-scan 9s linear infinite; }
body.ambient-off .arcade-hero::after { opacity:.08; }
@keyframes arcade-scan { from { background-position:0 0; } to { background-position:0 84px; } }

@media (min-width:801px) {
  #viewRoom.room {
    max-width:1600px; padding:12px 18px 12px; gap:14px;
    background:radial-gradient(ellipse at 50% 0,#1a3351 0,#0b1523 48%,#07101b 100%);
  }
  #viewRoom .stage-head {
    min-height:38px; margin-bottom:8px; padding:0 0 6px; border-bottom:1px solid #3a536e; gap:8px;
  }
  #viewRoom .stage-title b { color:#f3efe7; font:800 18px/1 var(--display); letter-spacing:.03em; }
  #viewRoom .stage-title span { color:#9fafc2; font:9px/1.3 var(--mono); }
  #viewRoom .stage-actions { gap:6px; }
  #viewRoom .stage-actions .btn,#viewRoom #btnLeave { min-height:38px; padding:7px 10px; font-size:9px; }
  #viewRoom .stage {
    min-height:0; padding:8px; background:#050b13; border:2px solid #506b87; border-radius:7px;
    box-shadow:0 0 0 5px #0c1725, 0 12px 25px #000b, inset 0 0 45px #05080e;
  }
  #viewRoom .stage::before {
    content:""; position:absolute; inset:6px; pointer-events:none; z-index:1;
    border:1px solid #263e59; background:repeating-linear-gradient(0deg,transparent 0 3px,#dbe9ff10 3px 4px);
    mix-blend-mode:screen; opacity:.35;
  }
  #viewRoom .stage canvas { position:relative; z-index:0; }
  #viewRoom .stage-label { right:20px; bottom:6px; color:#7990a6; }
  #viewRoom .slots { gap:10px; margin-top:10px; }
  #viewRoom .slot {
    min-height:54px; padding:6px 10px; border:1px solid #3d5875; border-top:3px solid #536d8b;
    border-radius:4px; background:linear-gradient(145deg,#152840,#0e1b2c); box-shadow:4px 5px 0 #04080d;
  }
  #viewRoom .slot.you { border-top-color:var(--accent); box-shadow:0 0 0 1px var(--accent),4px 5px 0 #04080d; }
  #viewRoom .slot.free { border-top-color:#647589; opacity:.86; }
  #viewRoom .slot.spec { border-top-color:var(--signal); }
  #viewRoom .slot-num { color:#0d1725; background:var(--accent); font:800 10px var(--mono); }
  #viewRoom .slot.spec .slot-num { background:var(--signal); }
  #viewRoom .slot-name { color:#f2eee5; font:700 13px var(--display); }
  #viewRoom .slot-foot { color:#9fafc2; font:9px var(--mono); }
  #viewRoom .slot-tag { color:#f6c879; background:#332817; border-color:#806136; }
  #viewRoom .netbar {
    min-height:42px; gap:12px; margin-top:10px; padding:4px 10px; border:1px solid #3c5873; border-radius:4px;
    background:#0d1928; box-shadow:4px 5px 0 #04080d;
  }
  #viewRoom .stat b { color:var(--signal); font:700 17px var(--mono); }
  #viewRoom .stat i { color:#8495aa; font:8px var(--mono); }
  #viewRoom .side {
    min-height:0; padding:14px; border:1px solid #526c87; border-top:4px solid var(--signal); border-radius:5px;
    background:linear-gradient(155deg,#152a3e,#0d1929); box-shadow:7px 8px 0 #04080d;
  }
  #viewRoom .side .chat-title { color:var(--signal); font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
  #viewRoom .side .chat { background:#07131d; border-color:#365a5b; scrollbar-color:#5a938b #08131b; }
  #viewRoom .side .people { border-top:1px solid #38516d; padding-top:10px; }
  #viewRoom .side .user { background:#143a36; border-color:#4e9588; }
  #viewRoom[data-system="snes"] .stage { border-color:#8075bc; }
  #viewRoom[data-system="snes"] .room-system-badge { color:#c7bbff; border-color:#8075bc; }
  #viewRoom[data-system="neogeo"] .stage { border-color:#b17843; }
  #viewRoom[data-system="neogeo"] .room-system-badge { color:#ffbf5e; border-color:#b17843; }
}

@media (min-width:801px) and (min-height:780px) {
  body:not(.fschat) #viewRoom.room .stage { min-height:500px; }
}

@media (min-width:801px) {
  #viewLobby .card h2 { font-size:clamp(20px,1.8vw,29px); }
  #viewLobby .panel-code { font-size:9px; }
  #viewLobby .btn { font-size:9px; }
  #viewLobby .chat-form .input { font-size:13px; }
}
@media (min-width:801px) and (max-width:1300px) {
  .hero-copy { padding:8px 20px 6px; }
  .hero-copy h1 { font-size:clamp(42px,4.2vw,54px); }
  .hero-description { margin:6px 0 5px; font-size:11px; }
  .system-filter-btn { min-height:28px; padding:3px 7px; }
  .system-filter-btn small { display:none; }
}
@media (min-width:801px) and (max-height:800px) {
  .hero-copy { padding:8px 20px 6px; }
  .hero-copy h1 { font-size:clamp(40px,4.3vw,58px); }
  .hero-description { margin:5px 0 4px; font-size:11px; }
  .system-filter-btn { min-height:28px; padding:3px 7px; }
  .system-filter-btn small { display:none; }
}
@media (min-width:801px) and (max-height:760px) {
  #viewLobby.view.lobby { grid-template-rows:clamp(150px,23vh,185px) minmax(0,1fr); }
  .hero-copy { padding-top:7px; }
  .hero-copy h1 { font-size:clamp(39px,4.4vw,48px); }
  .hero-description { margin:4px 0 3px; font-size:11px; }
  .system-filter-btn { min-height:26px; padding:3px 7px; }
  .system-filter-btn small { display:none; }
  .arcade-art { width:min(620px,65%); }
  #viewLobby > .card.create,
  #viewLobby > .card.rooms,
  #viewLobby > .card.social { padding:12px 14px; }
  .card.create > .hint { font-size:11px; }
  .card.create .drop { min-height:48px; height:48px; }
  .card.create .input { min-height:38px; }
  .card.create .legal { font-size:8px; }
}
@media (max-width:1180px) and (min-width:801px) {
  #viewLobby.view.lobby { height:auto; min-height:calc(100dvh - 64px); grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:190px minmax(420px,1fr) minmax(360px,1fr); overflow:auto; }
  #viewLobby > .card.social { grid-column:1/-1; }
}
@media (max-width:800px) {
  .topbar { padding:10px 14px; }
  .brand-mark { width:42px; height:36px; }
  .brand-copy b { font-size:clamp(18px,5vw,24px); }
  .brand-copy small { font-size:7px; white-space:normal; }
  .topbar-right { width:100%; gap:8px; }
  #viewLobby.view.lobby { height:auto; min-height:0; padding:7px 14px 28px; grid-template-columns:1fr; grid-template-rows:auto; gap:16px; overflow:visible; }
  #viewLobby > .card { height:auto; min-height:0; padding:16px; overflow:hidden; }
  .arcade-hero { min-height:278px; margin:0; }
  .arcade-art { width:520px; max-width:none; right:-145px; opacity:.68; }
  .arcade-hero::before { background:linear-gradient(90deg,#07101df2 0%,#07101dc9 55%,#07101d42 100%),linear-gradient(0deg,#07101d,transparent 55%); }
  .hero-copy { max-width:100%; padding:20px 18px 15px; }
  .hero-copy h1 { font-size:clamp(45px,13vw,60px); }
  .hero-description { max-width:245px; line-height:1.45; }
  .system-filter { align-items:flex-start; gap:6px; flex-direction:column; }
  .filter-buttons { width:100%; }
  .system-filter-btn { flex:1 1 40%; min-width:0; min-height:44px; padding:7px 9px; }
  .system-filter-btn b { font-size:9px; }
  .system-filter-btn small { display:none; }
  .hero-stamp { display:none; }
  .room-art { width:48px; height:54px; }
  .rooms-list > .room { grid-template-columns:50px minmax(0,1fr); }
  .room-enter { grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; }
  .room-enter .btn { flex:1; }
  .room-age { margin-left:auto; }
  .card.social .chat { height:220px; min-height:160px; flex:0 0 220px; }
}
@media (max-width:520px) {
  .topbar { align-items:flex-start; flex-direction:column; }
  .topbar-right { flex-wrap:wrap; }
  .topbar .utility { min-height:42px; }
  .topbar .utility:first-child { order:0; }
  .topbar .utility:nth-child(2) { order:1; }
  #viewLobby > .card { padding:14px; }
  .card h2 { font-size:25px; }
  .chat-form { flex-direction:row; }
  .chat-form .btn { flex:0 0 auto; padding-inline:10px; }
  .modal { padding:10px; }
  .modal-head h3 { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Ventanas compactas: el documento desplaza el lobby completo, no lo recorta. */
@media (min-width:801px) and (max-width:1180px) {
  html,body { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; }
  #viewLobby.view.lobby {
    height:auto; min-height:calc(100dvh - 64px); overflow:visible;
    grid-template-rows:190px auto auto;
  }
  #viewLobby > .card {
    height:auto; min-height:420px; max-height:none; overflow:visible;
  }
  #viewLobby > .card.create { overflow:visible !important; }
}

@media (min-width:1181px) and (max-height:760px) {
  html,body { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; }
  #viewLobby.view.lobby {
    height:auto; min-height:calc(100dvh - 64px); overflow:visible;
    grid-template-rows:clamp(150px,23vh,185px) auto;
  }
  #viewLobby > .card {
    height:auto; min-height:420px; max-height:none; overflow:visible;
  }
  #viewLobby > .card.create { overflow:visible !important; }
}