/* @cpi 2026-10-10 15:07: proporciones, tipografía y tarjeta de Mus, con paleta Arcade; alcance exclusivo al acceso. */
/* @cpi 2026-10-10 23:19: la landing cubre la cabecera del salon antes de showModal, evitando logos y botones duplicados al cargar. */
#login.access-landing{--bg:#141320;--text:#eff2e9;--muted:#b5b0c2;--gold:#edc580;--line:#ffffff14;position:fixed;z-index:100;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:var(--bg);color:var(--text);box-shadow:none;overflow:auto;font:16px Inter,"Segoe UI",sans-serif}
#login[open]{display:block}#login:not([open]){display:none}#login *{box-sizing:border-box}#login [hidden]{display:none!important}
#login .muted{color:var(--muted);line-height:1.65}#login .eyebrow{font-size:.7rem;letter-spacing:.19em;font-weight:650;color:var(--gold)}#login .topbar{height:96px;padding:0 clamp(24px,4.5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}#login .brand{display:flex;flex-shrink:0;align-items:center;gap:12px;text-decoration:none;font-size:1.6rem;letter-spacing:-.06em;font-weight:800}#login .brand img{width:49px;height:49px;object-fit:contain;flex-shrink:0}#login .brand-light{font-weight:350}#login .brand small{display:block;font-size:.55rem;letter-spacing:.21em;color:var(--muted);font-weight:500;margin-top:3px}#login .topbar-right{display:flex;align-items:center;gap:20px}#login .brand-note{font-size:.85rem;color:var(--muted)}#login .btn{border:1px solid transparent;border-radius:10px;padding:12px 18px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:600;min-height:46px;text-decoration:none;transition:background .15s,transform .15s}#login .btn:hover{transform:translateY(-1px)}#login .btn-primary{background:var(--gold);color:#182423}#login .btn-primary:hover{background:#f6d79f}#login .btn-secondary{background:#ffffff05;border-color:#ffffff24}#login .btn-secondary:hover{background:#ffffff10}#login .landing{max-width:1450px;margin:auto;padding:64px clamp(24px,4.5vw,80px) 32px;display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:start}#login .hero{position:relative;min-width:0}#login .small-rule{width:28px;height:1px;background:var(--gold);display:inline-block;vertical-align:middle;margin-right:12px}#login h1,#login h2,#login p{margin-top:0}#login .hero-title{font-size:clamp(2.8rem,4.9vw,4.8rem);font-weight:450;letter-spacing:-.055em;line-height:1.04;margin:24px 0}#login .hero-title em{font-family:Georgia,serif;font-weight:400;color:var(--gold);letter-spacing:-.045em}#login .hero-copy{color:var(--muted);font-size:1.04rem;line-height:1.8;max-width:390px}#login .hero-art{height:225px;position:relative;display:flex;align-items:center;gap:30px;margin:25px 0 18px}#login .hero-art>img{width:215px;max-height:220px;object-fit:contain;z-index:1;filter:drop-shadow(0 18px 30px #0005)}#login .hero-ring{position:absolute;width:225px;height:225px;border:1px solid #dbbf7840;border-radius:50%;background:radial-gradient(ellipse,#3a725948,transparent 68%);left:0;top:0}#login .art-caption{color:var(--muted);font-size:.9rem;line-height:1.8}#login .art-caption strong{font-family:Georgia,serif;font-size:1.3rem;font-weight:400;color:var(--text)}#login .hero-foot{display:flex;gap:24px;border-top:1px solid var(--line);padding-top:22px;color:var(--gold);font-size:.72rem}#login .hero-foot b{color:var(--muted);font-weight:400;display:block;margin-top:8px}#login .access-card{margin-top:8px;padding:36px;background:linear-gradient(135deg,#233a36,#172a29);border:1px solid #d5e9d324;border-radius:20px;box-shadow:0 24px 80px #0002;position:relative}#login .access-card:before{content:"";height:2px;position:absolute;left:36px;right:36px;top:0;background:linear-gradient(90deg,transparent,#edc58090,transparent)}#login .access-card h2{font-size:2rem;font-weight:450;letter-spacing:-.04em;margin:14px 0 8px}#login .access-card>.muted{font-size:.9rem;margin-bottom:26px}#login label{display:block;font-size:.85rem;font-weight:500;margin:0 0 9px}#login input:not([type=checkbox]):not([type=range]),#login textarea{color:var(--text);background:#0c1d1bbb;border:1px solid #ffffff25;border-radius:9px;width:100%;padding:13px 14px;min-width:0}#login input::placeholder,#login textarea::placeholder{color:#91a5a0;font-size:.85rem}#login .label-row{display:flex;justify-content:space-between;gap:10px;margin-top:22px}#login .label-row a{font-size:.73rem;color:var(--gold);text-decoration:none}#login .password-field{position:relative}#login .password-field input{padding-right:55px!important}#login .password-field button{position:absolute;right:5px;top:4px;bottom:4px;background:none;border:0;font-size:.75rem;padding:8px;color:var(--muted)}#login .check{display:flex;align-items:center;gap:9px;font-weight:400;font-size:.76rem;line-height:1.6;margin:17px 0;flex-wrap:wrap}#login .check input{accent-color:var(--gold);width:16px;height:16px;margin:0}#login .access-submit{width:100%;justify-content:space-between;margin-top:6px;padding:14px 18px}#login .divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.7rem;margin:24px 0 18px}#login .divider:before,#login .divider:after{content:"";height:1px;background:var(--line);flex:1}#login .social{display:flex;gap:12px;flex-wrap:wrap}#login .social>.btn{flex:1}#login .social #google-button:empty{display:none}#login .social #google-button:not(:empty){width:100%;min-height:44px}#login .social-note{font-size:.7rem;margin:10px 0}#login .access-footer{border-top:1px solid var(--line);padding-top:20px;margin-top:22px;font-size:.8rem}#login .access-footer strong{font-weight:500}#login .access-footer p{font-size:.75rem;line-height:1.7;color:var(--muted);margin:8px 0 0}#login .legal-links{display:flex;gap:20px;font-size:.7rem;color:var(--muted);margin-top:22px}
#login .access-card{background:linear-gradient(135deg,#30283d,#201d30)}
#login p{font-size:inherit;color:inherit;line-height:inherit}#login .hero-copy{color:var(--muted);font-size:1.04rem;line-height:1.8}#login .access-card>.muted{font-size:.9rem;color:var(--muted);line-height:1.65}
#login label{margin:0 0 9px;font-size:.85rem}#login input{margin:0;display:block}#login .check{display:flex;margin:17px 0;font-size:.76rem}#login .label-row label{margin:0 0 9px}#login .hero .hero-title{text-wrap:balance}#login .hero-title em{white-space:nowrap}#login .access-card h2{font-size:2rem}#login .access-footer p{font-size:.75rem;line-height:1.7;color:var(--muted);margin:8px 0 0}
#login #login-submit{justify-content:center;background:linear-gradient(135deg,#49304e,#2d2038);border:1px solid #c3a163;color:#fff;box-shadow:inset 0 1px 0 #e8cc8d22}#login button{font:inherit}#login .password-field button{font-size:.75rem}#login .access-family{font-size:.85rem;color:var(--muted)}#login .lab-access{font-size:.72rem;color:var(--gold);line-height:1.5}#login #login-error{font-size:.8rem;line-height:1.5;margin:12px 0 0;color:#ffbdad}#login #login-error:empty{display:none}
#login .divider:has(+.social #google-button:empty +[hidden]+[hidden]){display:none}
@media(max-width:1100px){#login .landing{gap:35px;padding-top:45px}#login .access-card{padding:26px}#login .hero .hero-title{font-size:3.5rem}#login .hero-foot{gap:14px}#login .hero-art>img{width:180px}#login .art-caption{font-size:.8rem}}
@media(max-width:760px){#login .topbar{height:76px;padding:0 20px}#login .brand{font-size:1.35rem}#login .brand img{width:39px;height:39px}#login .access-family{font-size:.72rem}#login .landing{display:flex;flex-direction:column;gap:30px;padding:35px 22px;align-items:stretch}#login .hero .hero-title{font-size:clamp(2.8rem,9vw,4rem);margin-top:20px}#login .hero-copy{font-size:.9rem;max-width:360px}#login .hero-art{height:125px;margin:20px 0}#login .hero-art>img{width:125px;height:125px}#login .hero-foot{display:none}#login .access-card{padding:28px 24px;margin:0}}
#room-picker,#registration{width:min(620px,94vw);padding:30px;background:#181927;color:#f4ebd7;border:1px solid #ffffff30;border-radius:16px}#available-rooms{display:grid;gap:14px;margin:24px 0}.room-choice{text-align:left;padding:22px;background:linear-gradient(110deg,#41253e,#192f3d);font-size:20px}.room-choice small{display:block;font-size:13px;margin-top:8px;color:#bce6db}#registration-form{display:grid;gap:18px}#registration-form label{display:block}#rooms-error,#login-error{color:#ffbdad!important}


/* @cpi 2026-10-10 18:30: página completa de salones, misma jerarquía que Mus. */
#room-picker .muted{color:var(--muted);line-height:1.65}#room-picker .eyebrow{font-size:.7rem;letter-spacing:.19em;font-weight:650;color:var(--gold)}#room-picker .topbar{height:96px;padding:0 clamp(24px,4.5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}#room-picker .brand{display:flex;flex-shrink:0;align-items:center;gap:12px;text-decoration:none;font-size:1.6rem;letter-spacing:-.06em;font-weight:800}#room-picker .brand img{width:49px;height:49px;object-fit:contain;flex-shrink:0}#room-picker .brand-light{font-weight:350}#room-picker .brand small{display:block;font-size:.55rem;letter-spacing:.21em;color:var(--muted);font-weight:500;margin-top:3px}#room-picker .topbar-right{display:flex;align-items:center;gap:20px}#room-picker .brand-note{font-size:.85rem;color:var(--muted)}#room-picker .btn{border:1px solid transparent;border-radius:10px;padding:12px 18px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:600;min-height:46px;text-decoration:none;transition:background .15s,transform .15s}#room-picker .btn:hover{transform:translateY(-1px)}#room-picker .btn-primary{background:var(--gold);color:#182423}#room-picker .btn-primary:hover{background:#f6d79f}#room-picker .btn-secondary{background:#ffffff05;border-color:#ffffff24}#room-picker .btn-secondary:hover{background:#ffffff10}#room-picker .rooms-page{max-width:1550px;padding:54px clamp(24px,4.5vw,80px);margin:auto}#room-picker .page-heading{display:flex;justify-content:space-between;align-items:center;gap:30px}#room-picker .page-heading h1{font-size:clamp(2.6rem,4vw,4rem)}#room-picker .rooms-summary{color:var(--green);font-size:.85rem;margin:20px 0}#room-picker .room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}#room-picker .room-card{font:inherit;color:inherit;text-align:left;cursor:pointer;background:linear-gradient(135deg,#24463d,#142b29);border:1px solid #ffffff20;border-radius:16px;overflow:hidden;padding:26px;position:relative}#room-picker .room-card:nth-child(3n+2){background:linear-gradient(135deg,#343d35,#1b2a28)}#room-picker .room-card:nth-child(3n){background:linear-gradient(135deg,#263b46,#192a2d)}#room-picker .room-card-number{font:italic 3.3rem Georgia,serif;color:#ffffff18;position:absolute;right:24px;top:15px}#room-picker .room-card .room-name{display:block;font-size:1.6rem;font-weight:450;margin:38px 0 22px;letter-spacing:-.025em;position:relative}#room-picker .room-card-meta{display:flex;gap:22px;color:var(--muted);font-size:.8rem;line-height:1.6}#room-picker .room-card-meta strong{color:var(--text);font-size:1.3rem;font-weight:450;display:block}#room-picker .occupancy{height:3px;background:#ffffff12;border-radius:4px;margin:22px 0}#room-picker .occupancy span{display:block;height:100%;background:var(--green);max-width:100%}#room-picker .room-card>.eyebrow,#room-picker .room-card>.occupancy{display:block}
#room-picker{--gold:#edc580;--muted:#b5b0c2;--text:#eff2e9;--line:#ffffff14;--green:#9ed9b9;position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#141320;color:var(--text);font:16px "Segoe UI",sans-serif;overflow:auto}
#room-picker .page-heading h1{font-weight:450;letter-spacing:-.055em;line-height:1.1;margin:24px 0}#room-picker h1 em{font-family:Georgia,serif;color:var(--gold);font-weight:400}#room-picker .icon-button{width:46px;height:46px;font-size:26px;background:transparent;border:1px solid var(--line);border-radius:10px}#room-picker #available-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,390px));gap:20px;margin:24px 0}#room-picker .room-card{background:linear-gradient(135deg,#33273e,#201d30);min-height:360px;padding:26px;isolation:isolate}#room-picker .room-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;z-index:-2}#room-picker .room-card:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#12121eee);z-index:-1}#room-picker .room-name{margin:130px 0 22px;font-size:1.7rem}#room-picker .room-card-number{color:#fff8}#room-picker .rooms-actions{margin-top:28px}#room-picker .access-family{font-size:.85rem;color:var(--muted)}
@media(max-width:760px){#room-picker .topbar{height:76px;padding:0 20px}#room-picker .brand{font-size:1.35rem}#room-picker .brand img{width:39px;height:39px}#room-picker .access-family{font-size:.72rem}#room-picker .rooms-page{padding:35px 22px}#room-picker .page-heading{align-items:start;gap:16px}#room-picker .page-heading h1{font-size:2.8rem}#room-picker #available-rooms{grid-template-columns:1fr}}

/* @cpi 2026-10-10 17:29: composición de Dominó con ilustración izquierda y mascota sobre acceso; identidad granate Arcade. */
#login.access-landing{color-scheme:light;--bg:#f5f0e9;--text:#442532;--muted:#796771;--gold:#a77c38;--line:#682d431b;background:radial-gradient(ellipse at 10% 20%,#eadce3,transparent 65%),linear-gradient(110deg,#f4eff0,#f5ecdc);color:var(--text)}
#login .topbar{background:#fffdf8e8;border-bottom:1px solid #decfd3}#login .brand{color:#68253d}#login .brand img,#room-picker .brand img,.top .brand img{image-rendering:pixelated}
#login .access-family{padding:14px 18px;border:1px solid #decfd3;border-radius:15px;color:#68253d;background:#fffdf9}
#login .landing{grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr);gap:clamp(30px,6vw,90px);max-width:1250px;margin:22px auto 35px;padding:22px 40px 32px;align-items:start}
#login .hero{padding-top:32px}#login .hero .hero-title{font:400 clamp(43px,4.6vw,66px)/1.07 Georgia,serif;letter-spacing:-.04em;margin:18px 0 24px;color:#442532}#login .hero .hero-title em{white-space:normal;color:#a17b39}#login .hero-copy{font-size:15px;line-height:1.75;max-width:470px}
#login .arcade-hero-art{display:flex;align-items:flex-end;justify-content:center;gap:16px;height:290px;margin:26px auto 0;max-width:395px}#login .arcade-hero-art>img{width:43%;height:280px;max-height:280px;object-fit:contain;filter:drop-shadow(0 12px 15px #44253220)}#login .arcade-hero-art>img:last-child{height:260px}
#login .access-entry{min-width:0;width:100%}#login .login-mascot{display:block;position:static;width:148px;height:150px;object-fit:contain;object-position:bottom;margin:0 auto -1px;image-rendering:pixelated}
#login .access-card{margin:0;padding:26px 30px 22px;border:1px solid #fff;border-top:3px solid #b6965d;border-radius:23px;background:linear-gradient(145deg,#fffefb,#fdfbf5);box-shadow:0 16px 42px #44253217}#login .access-card:before{display:none}#login .access-card h2{font:400 33px/1.2 Georgia,serif;margin:12px 0 9px;color:#58263b}#login .access-card>.eyebrow{font-size:9px}#login .access-card>.muted{font-size:14px;margin-bottom:20px}
#login input:not([type=checkbox]):not([type=range]){background:#fff;color:#442532;border-color:#dac8d0;padding:11px 12px;font-size:14px}#login input::placeholder{color:#94838b}#login .check input{accent-color:#782a46}#login #login-submit{background:linear-gradient(135deg,#913a56,#60243b);border:0;color:#fff;justify-content:space-between;box-shadow:0 6px 12px #60243b15}#login #login-submit:hover{background:#7c2946}#login .btn-secondary{border-color:#dac8d0;background:#fff;color:#442532}#login #login-error{color:#ad243e}#login .label-row{margin-top:18px}
@media(max-width:760px){#login .landing{display:flex;flex-direction:column;padding:20px 22px 30px;margin:0;gap:0}#login .hero{padding-top:10px}#login .hero .hero-title{font-size:clamp(38px,8vw,50px)}#login .hero-copy{font-size:14px;line-height:1.6}#login .arcade-hero-art{height:140px;justify-content:flex-start;margin:14px 0 0;width:48%;gap:4px}#login .arcade-hero-art>img,#login .arcade-hero-art>img:last-child{height:135px;width:48%;max-height:135px}#login .access-entry .login-mascot{width:118px;height:128px;margin:-128px 8% -1px auto}#login .access-card{padding:23px 22px}#login .topbar{gap:10px}#login .access-family{padding:10px;font-size:11px}}


/* @cpi 2026-10-10 17:40: morado oscuro como color predominante de la landing, conservando su composición. */
#login.access-landing{color-scheme:dark;--bg:#171020;--text:#f5edf8;--muted:#c0afc9;--gold:#e0b975;--line:#d4b0ee26;background:radial-gradient(ellipse at 12% 25%,#382043,transparent 65%),linear-gradient(110deg,#201329,#120e1d)}
#login .topbar{background:#171020ed;border-bottom-color:#a879bd33}#login .brand{color:#f3e5fa}#login .access-family{background:#291b36;border-color:#6f4e80;color:#f1e3f7}
#login .hero .hero-title{color:#f5edf8}#login .hero .hero-title em{color:#e0b975}
#login .access-card{background:linear-gradient(145deg,#33213f,#21172d);border-color:#694778;border-top-color:#d2ab68;box-shadow:0 16px 42px #08040f55}#login .access-card h2{color:#f5edf8}
#login input:not([type=checkbox]):not([type=range]){background:#1a1125;color:#f5edf8;border-color:#715581}#login input::placeholder{color:#ad9bb8}
#login .check input{accent-color:#b96d91}#login .btn-secondary{border-color:#715581;background:#291b36;color:#f5edf8}
#login #login-submit{background:linear-gradient(135deg,#994461,#722d50);box-shadow:0 6px 12px #10061933}#login #login-submit:hover{background:#a64d71}

/* @cpi 2026-10-10: tres recreativas en la presentacion, con espacio propio tambien en movil. */
#login .arcade-hero-art{max-width:510px;gap:12px}
#login .arcade-hero-art>img{width:30%;min-width:0}
@media(max-width:760px){#login .arcade-hero-art{width:62%;gap:3px}#login .arcade-hero-art>img,#login .arcade-hero-art>img:last-child{width:31%;height:125px}#login .access-entry .login-mascot{margin-right:0}}

/* @cpi 2026-10-10: selector de la familia UsuJuegos con mascotas, como Mus, Parchis y Domino. */
#login .game-picker{position:relative}
#login .game-picker summary{cursor:pointer;list-style:none;padding:14px 18px;border:1px solid #6f4e80;border-radius:15px;background:#291b36;color:#f1e3f7;font-size:14px}
#login .game-picker summary:after{content:"⌄";margin-left:14px}
#login .game-picker-menu{position:absolute;right:0;top:calc(100% + 8px);width:270px;padding:8px;background:#261a33;border:1px solid #715581;border-radius:14px;box-shadow:0 12px 32px #0008;z-index:20}
#login .game-access{display:flex;gap:12px;align-items:center;padding:12px;border-radius:9px;color:#f5edf8;text-decoration:none}
#login .game-access:hover{background:#493154}
#login .game-access img{object-fit:contain;flex-shrink:0}
#login .game-access small{display:block;color:#c0afc9;font-size:11px;margin-bottom:4px}
#login .game-access strong{font-size:16px}
@media(max-width:760px){#login .game-picker summary{padding:10px;font-size:11px}}

/* @cpi 2026-10-10 19:40: proporciones de tarjeta de credito, sin altura heredada del panel anterior. */
#room-picker #available-rooms{grid-template-columns:repeat(auto-fill,minmax(250px,340px));gap:18px;align-items:start}
#room-picker .room-card{box-sizing:border-box;width:100%;min-height:0;aspect-ratio:1.586;height:auto;padding:20px;display:flex;flex-direction:column;border-radius:14px}
#room-picker .room-art{opacity:.65;object-position:center 28%}
#room-picker .room-card:before{background:linear-gradient(#10151b15 0%,#10151b85 35%,#10151bf5 100%)}
#room-picker .room-card-number{top:12px;right:18px;font-size:2rem;color:#ffffff80}
#room-picker .room-card .room-name{margin:auto 0 10px;font-size:1.35rem;font-weight:600;line-height:1.15;letter-spacing:-.02em;text-shadow:0 2px 6px #000}
#room-picker .room-card-meta{gap:20px;font-size:.78rem;line-height:1.2}
#room-picker .room-card-meta strong{display:inline;margin-right:5px;font-size:1rem;font-weight:650}
#room-picker .room-card .occupancy{height:3px;flex-shrink:0;margin:12px 0 0}
@media(max-width:760px){#room-picker #available-rooms{grid-template-columns:minmax(0,340px);justify-content:center}#room-picker .room-card{padding:18px}}

/* @cpi 2026-10-10 20:00: selector con las proporciones de Mus y paleta morada exclusiva de Arcade. */
#room-picker{--muted:#bcafca;--gold:#edc580;--green:#c3a2ea;background:#150e20;color:#f3edf7}
#room-picker *{box-sizing:border-box}
#room-picker .topbar{height:106px;padding:0 4.5vw;background:#170f23}
#room-picker .rooms-page{max-width:none;padding:54px 4.5vw}
#room-picker .page-heading h1{font-size:clamp(40px,4vw,64px);font-weight:400;line-height:1.12;margin:28px 0}
#room-picker .page-heading p{font-size:17px;margin:0;line-height:1.65}
#room-picker .rooms-summary{margin:38px 0 20px;color:#d1b2ef;font-size:14px}
#room-picker #available-rooms{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;align-items:stretch}
#room-picker .room-card,#room-picker .room-card:nth-child(3n+2),#room-picker .room-card:nth-child(3n){aspect-ratio:auto;min-height:294px;padding:27px;display:flex;flex-direction:column;background:linear-gradient(130deg,#382846,#251a33);border:1px solid #a78bb23d;border-radius:16px;text-align:left}
#room-picker .room-card:nth-child(3n+2){background:linear-gradient(130deg,#403048,#2b2035)}
#room-picker .room-card:nth-child(3n){background:linear-gradient(130deg,#302c4b,#221d36)}
#room-picker .room-card:before{display:none}
#room-picker .room-card:hover{border-color:#c3a2ea;background:#423053}
#room-picker .room-card-number{top:20px;right:27px;font:italic 53px Georgia,serif;color:#ffffff18}
#room-picker .room-card .room-name{margin:42px 0 54px;font-size:26px;font-weight:400;line-height:1.2;letter-spacing:-.025em;text-shadow:none}
#room-picker .room-card-meta{gap:25px;font-size:13px;line-height:1.65;margin-top:auto}
#room-picker .room-card-meta strong{display:block;margin:0;font-size:23px;font-weight:400;color:#f3edf7}
#room-picker .room-card .occupancy{margin:23px 0 20px;height:3px;background:#ffffff12}
#room-picker #rooms-account{font-size:16px;text-transform:uppercase}
#room-picker .icon-button{color:#f3edf7}
@media(max-width:1000px){#room-picker #available-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#room-picker .topbar{height:82px;padding:0 20px}#room-picker .topbar-right{gap:10px}#room-picker .rooms-page{padding:34px 22px}#room-picker #available-rooms{grid-template-columns:minmax(0,1fr)}#room-picker .page-heading h1{font-size:40px}#room-picker .room-card{min-height:270px;padding:24px}#room-picker .room-card .room-name{font-size:24px;margin:35px 0 38px}}

/* @cpi 2026-10-10 19:06: imagen visible y velo inferior para mantener legibles nombre y aforo. */
#room-picker .room-art{opacity:1;object-position:center;z-index:0;pointer-events:none}
#room-picker .room-card:before{display:block;z-index:1;background:linear-gradient(180deg,#130d2030 0%,#130d2020 32%,#130d20d9 68%,#130d20f5 100%);pointer-events:none}
#room-picker .room-card>span{position:relative;z-index:2}
#room-picker .room-card>.room-card-number{position:absolute;color:#fff9;text-shadow:0 2px 5px #000}
#room-picker .room-card .room-name{text-shadow:0 2px 5px #000}

/* @cpi 2026-10-10 19:12: avatar, nick y puerta alineados como la cabecera de Mus. */
#room-picker .rooms-identity{display:flex;align-items:center;gap:10px;min-width:0}
#room-picker #rooms-avatar{position:relative;display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;overflow:hidden;border:1px solid #ffffff38;border-radius:9px;background:#403048;color:#f3edf7;font-weight:600}
#room-picker #rooms-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#room-picker #access-logout{display:grid;place-items:center;flex-shrink:0}
#room-picker #rooms-account{overflow:hidden;text-overflow:ellipsis;max-width:180px}
@media(max-width:650px){#room-picker .rooms-identity{gap:6px}#room-picker #rooms-avatar{width:34px;height:34px;flex-basis:34px}#room-picker #rooms-account{max-width:80px;font-size:13px}#room-picker .topbar-right{gap:8px}}

/* @cpi 2026-10-10 19:15: reservar sitio a identidad y salida en cabeceras estrechas. */
@media(max-width:650px){#room-picker .topbar{padding:0 12px;gap:10px}#room-picker .topbar>.brand{gap:6px;font-size:20px;min-width:0;flex-shrink:1}#room-picker .topbar>.brand img{width:32px;height:32px}#room-picker .topbar>.brand small{display:none}#room-picker .topbar-right{flex-shrink:0}#room-picker #access-logout{width:38px;height:38px}}
/* @cpi 2026-10-10 19:56: quitar el marco de foco verde del logo de la landing. */
#login .brand:focus-visible{outline:none}

/* @cpi 2026-10-10 20:15: formulario de confirmacion de Mus, adaptado solo a la paleta Arcade. */
#registration{box-sizing:border-box;width:min(520px,calc(100% - 32px));padding:32px;border:1px solid #bda2d344;border-radius:18px;background:#291b36;color:#f3edf7;box-shadow:0 30px 100px #0008}
#registration::backdrop{background:#100819bf;backdrop-filter:blur(5px)}
#registration-form{display:block}
#registration .eyebrow{font-size:.7rem;letter-spacing:.19em;color:#edc580;font-weight:650}
#registration h2{font-size:1.8rem;font-weight:450;margin:12px 0 22px}
#registration p{color:#bcafca;line-height:1.7;overflow-wrap:anywhere}
#registration label{font-size:.85rem;margin:0 0 9px}
#registration input[type=email]{box-sizing:border-box;width:100%;padding:13px 14px;background:#1a1125;border:1px solid #715581;border-radius:9px;color:#f3edf7}
#registration .check{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.76rem;line-height:1.6;margin:17px 0}
#registration .check input{width:16px;height:16px;margin:0;accent-color:#edc580}
#registration .dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:25px}
#registration .btn{padding:12px 18px;border-radius:10px;font-weight:600;min-height:46px}
#registration .btn-primary{background:#edc580;color:#291b36;border:1px solid transparent}
#registration .btn-secondary{background:transparent;color:#f3edf7;border:1px solid #ffffff24}

/* @cpi 2026-10-11 00:30: acciones bajo salones y contenidos comunes en morado. */
.arcade-room-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:24px 0 10px;padding:16px 0;border-top:1px solid #ffffff18}
#room-picker .arcade-room-actions button{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid #ffffff24;border-radius:12px;background:#30213e;color:#f3edf7;font:inherit;width:auto;height:auto;font-size:14px;cursor:pointer}
.arcade-room-actions img,.arcade-room-actions svg{width:32px;height:32px;object-fit:contain}
.arcade-community,.social-share.usuarcade{width:min(1000px,94vw);max-height:90dvh;padding:28px;background:#291b36;color:#f3edf7;border:1px solid #715581;border-radius:18px}
.arcade-community iframe{width:100%;height:65dvh;border:0;background:white}
.community-close,.social-share-close{position:absolute;right:12px;top:12px}
.community-friend{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid #ffffff18}
.community-friend img{width:40px;height:40px;object-fit:contain}
.social-share.usuarcade{width:min(520px,94vw)}
.social-share-mascot{width:90px;height:90px;object-fit:contain;display:block;margin:auto}
.social-share .share-symbol{width:24px;height:24px}
.social-share-actions,.social-share-footer{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.social-share-actions a,.social-share-actions button,.social-share-footer button{padding:12px;border-radius:10px;background:#463052;color:#f3edf7;border:1px solid #715581;text-decoration:none}
.social-share-lead{line-height:1.6;color:#c4b5cf}

/* @cpi 2026-10-11 00:45: compartir en una fila de columnas iguales, tambien en movil. */
.social-share.usuarcade .social-share-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;gap:8px}
.social-share.usuarcade .social-share-actions>a,.social-share.usuarcade .social-share-actions>button{display:flex;justify-content:center;align-items:center;gap:5px;min-width:0;margin:0;padding:12px 6px;text-align:center;font:inherit;font-size:13px}
.social-share.usuarcade .social-share-actions .share-symbol{width:18px;height:18px;flex-shrink:0}
.social-share.usuarcade .social-share-footer:empty{display:none}

/* @cpi 2026-10-11: titulo sin antetitulo y visor de paginas equivalente a Domino. */
#room-picker .rooms-page{padding-top:28px}
#room-picker .page-heading h1{margin-top:10px}
.arcade-community{width:min(720px,92vw);max-height:85dvh;padding:25px;border-radius:24px;box-sizing:border-box}
.arcade-community[open]{display:flex;flex-direction:column}

.arcade-community .modal-heading{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-bottom:20px}
.arcade-community .modal-heading h2{margin:0;flex:1;font-size:24px}
.arcade-community .community-close,.arcade-community .community-popout{position:static;width:40px;height:40px;flex-shrink:0;background:transparent;border:1px solid #715581;border-radius:10px;color:inherit;font-size:22px}
.arcade-community .community-body{overflow:auto;min-height:0}
.arcade-community iframe{display:block;width:100%;height:65dvh;border:0;border-radius:10px;background:white}
.arcade-community .web-page-loading{position:relative;width:100%}
.arcade-community .web-loading-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:#291b36;color:#f3edf7}
.arcade-community .web-loading-message strong{font-size:24px}
.arcade-community .web-loading-message span{font-size:14px;color:#bcafca}

/* @cpi 2026-10-11 13:57: visor web como Domino; cabecera fija y pagina sin margenes, conservando el tamano de los otros dialogos. */
.arcade-community.community-web{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;border-radius:14px;overflow:hidden}
.arcade-community.community-web>.modal-heading{padding:10px 16px;min-height:55px;margin:0;border-bottom:1px solid #715581;background:#30213e}
.arcade-community.community-web .modal-heading h2{font-size:22px;min-width:0;overflow-wrap:anywhere}
.arcade-community.community-web>.community-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;overflow:hidden}
.arcade-community.community-web .web-page-loading{display:flex;flex-direction:column;flex:1;min-height:0}
.arcade-community.community-web iframe{flex:1;min-height:0;height:100%;border:0;border-radius:0}
@media(max-width:650px){
 .arcade-community.community-web{width:calc(100vw - 8px);height:calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:9px}
 .arcade-community.community-web>.modal-heading{padding:8px 10px}
}

/* @cpi 2026-10-11: mismas tarjetas de contactos de Domino con paleta morada. */
.arcade-community .contact-list{display:grid;gap:12px}
.arcade-community .contact-card{padding:10px 14px;border:1px solid #ffffff24;border-radius:18px}
.arcade-community .player-row{display:flex;align-items:center;gap:10px;padding:0}
.arcade-community .player-row strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arcade-community .avatar-control{padding:0;border:0;background:none;flex-shrink:0}
.arcade-community .avatar-control img{width:40px;height:40px;object-fit:contain;border-radius:8px}
.arcade-community .player-actions{display:flex;gap:2px;flex-shrink:0}
.arcade-community .player-actions .icon{width:29px;height:32px;padding:0;background:none;border:0}
.arcade-community .player-actions img{width:23px;height:23px;object-fit:contain}
.arcade-community .contact-location{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:13px}
.arcade-community .contact-location img{width:65px;height:48px;object-fit:cover;border-radius:10px}
.arcade-community .contact-location>div{display:grid;gap:3px}
.arcade-community .contact-location span,.arcade-community .contact-location small{color:#bcafca}
@media(max-width:480px){.arcade-community .player-row{flex-wrap:wrap}.arcade-community .player-actions{width:100%;justify-content:flex-end}}

/* @cpi 2026-10-11: el menu de opciones mantiene la fila de amigos igual que Domino en pantallas estrechas. */
.arcade-community .contact-card{container-type:inline-size}
.arcade-community .player-menu{display:none;border:0;background:none;color:inherit;font-size:24px;width:32px;height:32px;padding:0}
.arcade-community .player-actions:popover-open{display:flex;position:fixed;margin:0;padding:8px;background:#30213e;color:#f3edf7;border:1px solid #715581;border-radius:10px}
@media(max-width:480px){.arcade-community .player-row{flex-wrap:nowrap}.arcade-community .player-actions{width:auto}}
@container(max-width:420px){.arcade-community .player-row>.player-actions:not(:popover-open){display:none}.arcade-community .player-menu{display:inline-grid}}

/* @cpi 2026-10-11 14:04: fichas conectadas en oro y acciones al extremo derecho, incluido el menu movil. */
.arcade-community .contact-card.contact-online{background:#e5bf50;color:#30250c;border-color:#b58c23}
.arcade-community .contact-online .contact-location{background:transparent;color:#30250c}
.arcade-community .contact-online .contact-location strong,.arcade-community .contact-online .contact-location span,.arcade-community .contact-online .contact-location small,.arcade-community .contact-online .player-menu{color:#49370f}
.arcade-community .contact-card .player-row>.player-actions:not(:popover-open),.arcade-community .contact-card .player-row>.player-menu{margin-left:auto;justify-content:flex-end}

/* @cpi 2026-10-11 15:53: catalogo personal adaptable y presencia con acciones accesibles en movil. */
.personal-machine-catalogue{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}
.personal-machine-choice{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border:1px solid #715581;border-radius:14px;background:#30213e;color:#f3edf7;cursor:pointer}
.personal-machine-choice img{height:145px;max-width:100%;object-fit:contain}
.personal-machine-choice:hover{border-color:#edc580;background:#47304e}
.personal-machine-choice:disabled{opacity:.55;cursor:wait}
.room-player-list{margin-top:16px}.room-player-description{display:grid;gap:4px;flex:1;min-width:0}.room-player-description strong{overflow-wrap:anywhere}.room-player-description span,.room-player-description small{font-size:13px;color:#bcafca}
.room-player-avatar{position:relative;display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:10px;background:#49304e}.room-player-avatar img{position:absolute;width:100%;height:100%;object-fit:contain}
.room-machines .player-row{flex-wrap:wrap}.room-machines .player-row>button{margin-left:auto}.room-meta{flex-wrap:wrap}

/* @cpi 2026-10-11 15:53: accesos propios visibles aunque la cabecera decorativa del salon este oculta. */
.room-personal-actions{position:fixed;z-index:19;top:70px;right:12px;display:flex;gap:8px;max-width:calc(100vw - 24px);flex-wrap:wrap;padding:6px;border-radius:12px;background:#171321eb;border:1px solid #715581}.room-personal-actions[hidden]{display:none}.room-personal-actions button{font-size:13px;padding:9px;color:#f3edf7}
@media(max-width:650px){.room-personal-actions{top:64px;right:6px;gap:4px}.room-personal-actions button{font-size:11px;padding:7px}}

/* @cpi 2026-10-11 16:28: mueble a toda altura de la ficha, separado del nombre y accesible con teclado. */
.room-player-list .contact-card{padding:0 0 0 12px;overflow:hidden}.room-player-list .player-row{position:relative;min-height:112px;flex-wrap:nowrap;padding:8px 0;margin:0;border:0;box-sizing:border-box}.room-player-list .room-player-description{padding:6px 8px 6px 0}.room-player-list .player-row>.room-machine-watch{align-self:stretch;position:relative;flex:0 0 84px;width:84px;margin:0 0 0 auto;padding:0;border:0;border-radius:0;background:#17132180;cursor:pointer}.room-machine-watch img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.room-machine-watch:hover,.room-machine-watch:focus-visible{background:#71558160;outline:2px solid #edc580;outline-offset:-2px}
/* Display de matriz de puntos; un unico evento del servidor aporta el texto a todos los participantes. */
.machine-display{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;flex-shrink:0;width:100%;max-width:100%;box-sizing:border-box;padding:5px 8px;background:#17131b;border:1px solid #6f5430;border-radius:8px;z-index:4}
.machine-led{position:relative;overflow:hidden;height:34px;background:#120d06;border:1px solid #5e411b;border-radius:4px;min-width:0}
.machine-led-text{display:inline-block;white-space:nowrap;font:bold 24px/32px monospace;letter-spacing:2px;background:radial-gradient(circle,#ffc459 1.1px,transparent 1.5px) 0 0/3px 3px;background-clip:text;-webkit-background-clip:text;color:transparent;animation:machine-led-scroll 12s linear infinite;will-change:transform}
@keyframes machine-led-scroll{from{transform:translateX(var(--display-width,350px))}to{transform:translateX(-100%)}}
.machine-display button{position:static!important;width:auto!important;height:auto!important;padding:7px 9px!important;border:1px solid #8e682e!important;border-radius:5px;background:#30210e!important;color:#ffdb98!important;font:12px monospace!important}
.machine-message-form{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}.machine-message-form[hidden]{display:none}.machine-message-form input{flex:1;min-width:100px;background:#1b1510;color:#fff0d1;border:1px solid #8e682e;padding:8px;font:16px sans-serif}.machine-message-error{width:100%;color:#ffb39a;font:13px sans-serif}
@media(prefers-reduced-motion:reduce){.machine-led-text{animation:none;transform:none;white-space:normal;font-size:16px;line-height:21px;background:none;color:#ffc459}.machine-led{height:auto;min-height:34px;max-height:90px;overflow:auto}}

/* @cpi 2026-10-11 16:28: reservar el extremo derecho a sonido/cerrar en los cabinets a pantalla completa. */
.artwork-game>.machine-display,.asteroids-cabinet>.machine-display{position:fixed;top:8px;left:max(10px,calc(50% - 320px));width:min(640px,calc(100vw - 140px));z-index:7}

.asteroids-cabinet:has(.machine-display) header span{display:none}.asteroids-cabinet>.machine-display{width:min(640px,calc(100vw - 180px))}.room-machine-watch:disabled{cursor:default;opacity:1}

/* @cpi 2026-10-11 16:28: jugadores a altura completa, cabecera fija y filas compactas sin reparto del espacio sobrante. */
.arcade-community.room-machines.players-view{height:100dvh;max-height:100dvh;margin:0 auto;padding:0;border-radius:0;overflow:hidden}
.room-machines.players-view>.modal-heading{flex-shrink:0;margin:0;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));border-bottom:1px solid #715581}
.room-machines.players-view>.community-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:8px}
.room-machines.players-view .room-player-list{display:flex;flex-direction:column;flex:1;min-height:0;gap:4px;margin:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
/* @cpi 2026-10-11 16:39: neutralizar el margen/display global de article y usar el cabinet recortado a la derecha. */
.room-machines.players-view .contact-card{display:block;flex-shrink:0;width:100%;margin:0;padding:0 0 0 10px;border-radius:8px}
.room-machines.players-view .player-row{width:100%;min-height:76px;padding:0}
.room-machines.players-view .room-player-description{gap:2px;padding:4px 6px 4px 0}
/* @cpi 2026-10-16 13:25: mostrar el icono completo del selector, sin recortar ni estirar el mueble. */
.room-machines.players-view .room-machine-watch{flex:0 0 84px;width:84px;height:96px;overflow:hidden;margin-left:auto;align-self:center}.room-machines.players-view .room-machine-watch img{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;inset:0;padding:4px}

/* @cpi 2026-10-11 17:00: confirmación compacta de abandono sobre el cabinet pausado. */
dialog.leave-game-confirm{width:min(430px,calc(100vw - 32px));height:fit-content;min-height:0;inset:0;margin:auto;max-height:90dvh;box-sizing:border-box;padding:24px;border:1px solid #e4ba59;border-radius:16px;background:#201a30;color:#fff}
.leave-game-confirm::backdrop{background:#0009}
.leave-game-confirm h2{margin:0 0 14px;font-size:23px}.leave-game-confirm p{line-height:1.5}
.leave-game-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.leave-game-actions button{flex:1;padding:12px;border-radius:8px;cursor:pointer}.leave-game-actions button:first-child{background:#f0c563;color:#201a30}

/* @cpi 2026-10-11 17:23: acciones alineadas con cuenta; chat debajo de la altura efectiva de cabecera. */
.top .account .room-personal-actions{position:static;display:flex;flex-wrap:nowrap;gap:6px;padding:0;margin:0 5px 0 0;border:0;background:none;max-width:none}
.top .account .room-personal-actions[hidden]{display:none}
.top .room-personal-actions button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:44px;min-width:44px;padding:5px 8px;font-size:14px}
.room-personal-actions img{width:24px;height:33px;object-fit:contain}.room-personal-actions .machine-add{color:var(--mint);font-size:24px;font-weight:bold;line-height:1}
#chat{position:fixed;top:var(--room-header-bottom,88px);right:0;bottom:0;height:auto;max-height:calc(100dvh - var(--room-header-bottom,88px));width:310px;z-index:3}
@media(max-width:1100px){#chat{width:min(370px,calc(100vw - 56px))}}
@media(max-width:760px){.top .account{flex-wrap:nowrap;max-width:none;gap:5px;padding:5px}.top .account .room-personal-actions{gap:4px;margin-right:0}.top .room-personal-actions button{padding:4px;min-width:40px}.top #exit-room{padding:8px;min-width:40px}.top #exit-room span{display:none}.top #my-nick{max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:380px){.top .brand{display:none}.top{left:58px}.top #my-nick{max-width:45px}}

/* @cpi 2026-10-11 18:06: cuatro muebles alineados sin invadir el acceso en movil. */
#login .arcade-hero-art{gap:8px}
#login .arcade-hero-art>img{width:23%;flex:0 1 23%}
@media(max-width:760px){#login .arcade-hero-art{gap:2px}#login .arcade-hero-art>img,#login .arcade-hero-art>img:last-child{width:24%;flex-basis:24%}}

/* @cpi 2026-10-12 14:05: misma pantalla ROM en portada y salón, separada del arte del mueble. */
#login .arcade-hero-art>.hero-tetris-cabinet{position:relative;display:block;width:23%;flex:0 1 23%;aspect-ratio:.61;align-self:center;filter:drop-shadow(0 12px 15px #44253220)}
#login .hero-tetris-cabinet>img:first-child{display:block;width:100%;height:100%}
#login .hero-tetris-cabinet>.hero-tetris-screen{position:absolute;left:20%;top:17.36%;width:60%;height:25.62%;object-fit:fill;image-rendering:pixelated}
@media(max-width:760px){#login .arcade-hero-art>.hero-tetris-cabinet{width:24%;flex-basis:24%}}

/* @cpi 2026-10-12 14:10: catálogo de máquinas propias con la captura actual. */
.catalogue-tetris{display:block;position:relative;height:145px;aspect-ratio:.61}
.catalogue-tetris>img:first-child{width:100%;height:100%}
.personal-machine-choice .catalogue-tetris-screen{position:absolute;left:20%;top:17.36%;width:60%;height:25.62%;object-fit:fill;image-rendering:pixelated}

/* @cpi 2026-10-16 12:57: chat un 30% mas estrecho; el mapa sigue debajo para verse a traves del fondo. */
/* @cpi 2026-10-16 13:00: ampliar un 20% el ancho actual del chat en escritorio y movil. */
#chat{width:260.4px;background:rgba(20,20,31,.72)}
@media(max-width:1100px){#chat{width:min(310.8px,calc(84vw - 47.04px))}}
@media(min-width:1101px){.layout:has(#chat.open){grid-template-columns:0 minmax(0,1fr) 0}}
#chat .chat-head{padding:20px 12px 12px}#chat .chat-head h2{font-size:15px;padding-right:22px}
#chat .people{padding:0 12px 12px;flex-wrap:wrap}#chat #messages{padding:14px 10px}
#chat #chat-form{margin:10px 8px 14px}#chat #chat-form input{padding:8px 4px}
/* Formato de lineas de UsuDomino, adaptado al contraste del salon oscuro. */
#messages>.chat-message{display:flex;gap:8px;margin:0 0 14px;padding:0;font:14px/1.3 'Segoe UI',sans-serif;overflow-wrap:anywhere;color:#f4f1f7;text-align:left}
#messages .chat-avatar{position:relative;display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;margin-top:3px;border-radius:8px;background:#515367;color:white;overflow:hidden}
#messages .chat-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#messages .message-content{min-width:0;flex:1}#messages .message-author{margin-bottom:3px;font-size:12px}
#messages .message-author strong{font-weight:600;color:#b6e4cf}
#messages .message-text{white-space:pre-wrap;font:inherit;padding:0;border:0;background:transparent}
#messages>.chat-message.mine{margin-left:16px;padding:8px;border-radius:10px;background:#c7e5d514}
#messages>.chat-system{display:block;text-align:center;color:#c2cbd3;font:12px/1.3 'Segoe UI',sans-serif;margin:8px 0 14px;white-space:pre-wrap;overflow-wrap:anywhere}
/* @cpi 2026-10-18 17:38: hoja de la máquina física (multijugador): diálogo estrecho, acciones como «dejar la partida» y botones por fila. */
.arcade-community.machine-group{width:min(480px,92vw)}.machine-group .leave-game-actions{margin:0 0 4px}.machine-group .contact-list{margin-top:14px;gap:8px}.machine-group .contact-card{display:block;margin:0}.machine-group .room-player-avatar{color:#201a30;font-weight:700}.machine-group-buttons{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
/* @cpi 2026-10-18 18:32: buscador de la lista de jugadores y botón «ir junto a» a la izquierda del cabinet. */
.room-player-search{flex-shrink:0;padding:8px 8px 0}.room-player-search input{width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:1px solid #715581;border-radius:8px;background:#171321;color:#f3e9ff;font:inherit;font-size:16px}.room-player-search input:focus-visible{outline:2px solid #edc580;outline-offset:1px}
.room-player-empty{margin:12px 4px;color:#bcafca}
.room-player-list .player-row>.room-player-go{flex:0 0 44px;width:44px;height:44px;margin:0 6px 0 auto;padding:0;display:grid;place-items:center;border:1px solid #715581;border-radius:8px;background:#17132180;color:#edc580;cursor:pointer}.room-player-list .player-row>.room-player-go:hover,.room-player-list .player-row>.room-player-go:focus-visible{background:#71558160;outline:2px solid #edc580;outline-offset:-2px}
.room-player-list .player-row>.room-player-go+.room-machine-watch,.room-machines.players-view .room-player-go+.room-machine-watch{margin-left:0}
#login .topbar nav{display:flex;align-items:center;gap:14px}#login .lang-flags{display:flex;gap:6px}#login .lang-flags button{padding:3px;border:2px solid transparent;border-radius:6px;background:none;cursor:pointer;line-height:0;opacity:.55}#login .lang-flags button[aria-pressed=true]{border-color:var(--gold);opacity:1}#login .lang-flags button:hover{opacity:1}#login .lang-flags svg{width:28px;height:19px;border-radius:2px;display:block}
@media(max-width:760px){#login .topbar nav{gap:6px}#login .lang-flags{flex-direction:column;gap:2px}#login .lang-flags button{padding:1px}#login .lang-flags svg{width:21px;height:14px}#login .game-picker summary{padding:10px 12px}}
/* @cpi 2026-10-18 23:36: el H1 de la portada es ahora la línea superior (.eyebrow) con la palabra clave; la frase grande pasa a .hero-title (plan SEO, fase C). */
#login h1.eyebrow{margin:0;line-height:inherit}