/* @cpi 2026-09-22 16:20: identidad propia de dominó; componentes sociales compactos y adaptables. */
:root{color-scheme:light;--ink:#203c3a;--muted:#637672;--green:#184e47;--gold:#c99d57;--paper:#fffdf7;--line:#d7e1da;--shadow:0 12px 35px #234a3b15;font-family:Segoe UI,system-ui,sans-serif;color:var(--ink);background:#edf2e9}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 5% 75%,#d7e5d5,transparent 55%),radial-gradient(ellipse at 90% 0,#f1e6cb,transparent 50%)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:12px;background:#fffdf7;color:var(--green);padding:10px 18px;transition:background .15s,transform .15s}button:hover{background:#e8eee2}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--green);color:white;border-color:var(--green)}button.primary:hover{background:#226356}button.icon{width:42px;height:42px;padding:0;font-size:25px;display:inline-grid;place-items:center}a{color:var(--green)}input,select{border:1px solid var(--line);border-radius:12px;background:#fffefb;color:var(--ink);padding:12px;min-width:0}input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}
.topbar{display:flex;align-items:center;gap:12px;padding:16px 4vw;border-bottom:1px solid #ffffffc9;background:#fbf8edb8;min-height:83px}.brand{text-decoration:none;display:flex;align-items:center;gap:10px;font-size:25px;letter-spacing:-1px}.brand b{font-weight:400}.brand small{display:block;font-size:9px;letter-spacing:2.4px;margin-top:5px}.brand-tile{background:var(--green);color:#f9edce;border:1px solid var(--gold);font-size:38px;border-radius:9px;transform:rotate(-10deg);padding:0 8px}.motto{flex:1;text-align:center;font:italic 20px Georgia;color:#748a78}#account{display:flex;gap:8px;align-items:center}.avatar{width:45px;height:45px;object-fit:cover;border-radius:12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.avatar-control{border:0;background:transparent;padding:0;display:inline-flex;vertical-align:middle}
main{max-width:1800px;margin:auto;padding:25px 4vw 20px}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.8px;margin:0 0 14px}h1{font-size:clamp(28px,3vw,48px)}h2{font-size:30px}p{line-height:1.65}.eyebrow{font-size:10px;letter-spacing:2.8px;font-weight:700;color:#87713f;margin:0 0 14px}.script{font:italic 23px/1.6 Georgia;color:#8fa68f;transform:rotate(-5deg);pointer-events:none}.card{background:var(--paper);border:1px solid #fff;border-radius:24px;box-shadow:var(--shadow)}.login-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:7vw;align-items:center;max-width:1250px;margin:5vh auto}.welcome h1{font-size:clamp(40px,4.6vw,67px);line-height:1.12}.welcome em{color:#97753a}.welcome>p:not(.eyebrow){color:var(--muted)}.login-card{padding:34px;border-top:4px solid var(--gold)}.login-card label{display:grid;gap:7px;margin:20px 0;font-size:14px}.login-card .primary{width:100%;display:flex;justify-content:space-between;margin:24px 0}.login-card small{display:block;color:var(--muted);margin-top:24px;line-height:1.6}.links{display:flex;justify-content:space-between;gap:15px;font-size:13px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.section-heading .eyebrow{margin-bottom:7px}.section-heading h1{margin:0}.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:22px}.room-card{padding:28px;position:relative;overflow:hidden;min-height:205px;background:linear-gradient(135deg,#1b5148,#2c6859);color:#fff3d9;border-radius:23px;box-shadow:var(--shadow)}.room-card h2{margin:12px 0 24px}.room-card button{float:right}.room-card progress{width:100%;height:7px;accent-color:var(--gold);margin:14px 0}.social-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(310px,1fr);gap:22px;height:calc(100dvh - 205px);min-height:420px}.tables-panel{min-height:0;display:flex;flex-direction:column}.tables-panel>input{margin-bottom:12px;padding:9px 14px}.tables{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:15px;align-content:start;padding:2px 6px 20px 2px}.table-card{padding:14px;background:#fbfaf1;border:1px solid white;border-radius:20px;box-shadow:var(--shadow)}.table-heading{display:flex;justify-content:space-between;font-weight:600;font-size:14px}.mini-table{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:12px 0;background:radial-gradient(ellipse,#397360,#1c4b42);border:5px solid #b09b7040;border-radius:32px;padding:15px}.seat{min-height:69px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:#f7ecd3;font-size:12px;min-width:0}.seat>span{max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat button.empty{border:1px dashed #c8c8a1;background:#ffffff12;color:white;border-radius:50%;font-size:24px;width:42px;height:42px;padding:0}.table-card>.primary{width:100%;padding:7px}.table-caption{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.chat-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0}.tabs{display:flex;border-bottom:1px solid var(--line);padding:7px;background:#edf0e7;gap:4px}.tabs button{border:0;background:transparent;padding:10px 12px;font-size:14px}.tabs button.active{background:var(--paper);font-weight:700}.messages{flex:1;min-height:0;overflow:auto;padding:16px;position:relative;isolation:isolate}.messages:before{content:'Aquí también se hacen buenas amistades';position:absolute;left:15%;top:40%;width:70%;font:italic 26px/1.5 Georgia;color:#bacdb65c;transform:rotate(-8deg);z-index:-1;pointer-events:none}.message{margin-bottom:8px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}.message strong{color:#846435;margin-right:5px}.message.system{color:#778780;font-size:12px}.message.mine{text-align:right}.composer{display:flex;gap:7px;padding:10px;border-top:1px solid var(--line)}.composer input{flex:1;width:1px;padding:10px}.players{overflow:auto;flex:1;padding:14px}.player-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:9px 0}.player-row>span{flex:1}.player-row .icon{background:none;border:0}.game-tools{display:flex;gap:9px;align-items:center}.game-layout{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}.board-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:18px;background:#f6f5e9}.opponents{display:flex;justify-content:space-around;gap:10px;margin-bottom:12px}.opponent{display:flex;align-items:center;gap:8px;font-size:13px}.opponent .avatar{width:38px;height:38px}.opponent.active .avatar{outline:3px solid var(--gold);animation:turn-glow 1.4s ease-in-out infinite}.board{position:relative;flex:1;min-height:160px;background:radial-gradient(ellipse,#346c5a,#173f37);border-radius:22px;box-shadow:inset 0 0 0 5px #beab7438;display:flex;align-content:center;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;padding:24px;overflow:auto}.board>.script{color:#d0d8af70}.tile{display:inline-flex;flex-direction:column;align-items:center;background:linear-gradient(110deg,#fffef8,#e9e4d8);border:1px solid #baae90;border-radius:7px;padding:4px;box-shadow:1px 3px 3px #0003;color:#213f39;min-width:36px;font-weight:600}.tile span{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:25px;height:25px;padding:2px;gap:2px}.tile span+span{border-top:1px solid #aaa28c;margin-top:3px;padding-top:4px}.pip{width:5px;height:5px;background:currentColor;border-radius:50%;place-self:center}.tile.horizontal{flex-direction:row}.tile.horizontal span+span{border-top:0;border-left:1px solid #aaa28c;margin-top:0;margin-left:3px;padding-top:2px;padding-left:4px}.hands{display:flex;justify-content:center;gap:16px;padding:10px 0;flex-wrap:wrap}.hand{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.hand button.tile{padding:5px}.hand button.legal{outline:2px solid var(--gold);cursor:pointer}.hand-label{width:100%;text-align:center;font-size:11px;color:var(--muted)}#game-status{font-size:13px;text-align:center;min-height:27px;padding:7px;color:var(--muted)}#game-actions{display:flex;justify-content:center;gap:8px}#clock{font-variant-numeric:tabular-nums;background:#e4e8d7;padding:9px 13px;border-radius:20px}#notice{position:fixed;z-index:20;top:90px;left:50%;transform:translateX(-50%);max-width:90vw;background:#fff5d6;color:#624b1c;padding:12px 23px;border-radius:15px;box-shadow:var(--shadow)}dialog{border:1px solid white;border-radius:24px;background:var(--paper);color:var(--ink);width:min(520px,92vw);max-height:85dvh;padding:25px;box-shadow:0 20px 90px #0004}dialog::backdrop{background:#17382d66;backdrop-filter:blur(5px)}.modal-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-heading h2{margin:0}.modal-options{display:grid;gap:10px}.modal-options label{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px}.modal-options input[type=checkbox]{width:20px;height:20px;accent-color:var(--green)}.modal-options>button{text-align:left}.rule{font-size:14px;line-height:1.6;color:var(--muted)}@keyframes turn-glow{50%{box-shadow:0 0 0 5px #c99d5733}}
@media(max-width:900px){.motto{display:none}.topbar{padding:10px 4vw}.brand{font-size:21px}#account{margin-left:auto;font-size:13px}.login-layout{gap:25px}.social-layout{grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr)}.tables{grid-template-columns:1fr}.opponent{flex-direction:column;gap:3px}.board-panel{padding:10px}}
@media(max-width:650px){main{padding:18px 12px}.login-layout{display:flex;flex-direction:column;margin:10px auto}.welcome{width:100%;padding:12px}.welcome h1{font-size:40px}.welcome>p{font-size:14px}.welcome>.script{font-size:19px}.login-card{width:100%;padding:26px}.brand small{font-size:7px;letter-spacing:1.4px}.brand{font-size:18px}.topbar{gap:7px}.topbar .icon{width:34px;height:34px}.topbar .avatar{width:30px;height:30px}#account>span{display:none}.section-heading{align-items:flex-start}.section-heading .eyebrow{font-size:8px;letter-spacing:1.8px}.section-heading h1{font-size:28px}.section-heading select{max-width:145px;padding:8px}.social-layout{display:flex;flex-direction:column;height:auto;min-height:0}.tables{grid-template-columns:repeat(2,minmax(0,1fr));max-height:55dvh;gap:9px}.mini-table{padding:8px;gap:5px;border-radius:23px;border-width:3px}.seat .avatar{width:34px;height:34px}.seat{min-height:57px}.table-card{padding:10px}.chat-panel{height:40dvh;min-height:240px}.board-panel{min-height:52dvh}.game-layout{gap:12px}.board{min-height:220px}.opponent{font-size:11px}.opponent .avatar{width:34px;height:34px}.tile span{width:23px;height:23px}.game-tools{gap:5px}.game-tools .icon{width:34px;height:34px}#clock{padding:7px 9px}.room-grid{gap:14px}}
@media(max-height:520px) and (orientation:landscape){.topbar{min-height:45px;padding:5px 15px}.topbar small,.motto,.section-heading .eyebrow{display:none}main{padding:9px 15px}.section-heading{margin-bottom:8px}.section-heading h1{font-size:23px}.social-layout{height:calc(100dvh - 112px);min-height:230px}.opponents{margin-bottom:5px}.opponent .avatar{width:30px;height:30px}.board-panel{padding:8px}.hands{padding:6px 0}.board{padding:10px;min-height:80px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* @cpi 2026-09-22 17:30: deslizar tabs conserva scroll vertical; configuracion contextual compacta. */
.chat-panel{touch-action:pan-y}.tabs>.icon{margin-left:auto;width:34px;height:34px;padding:0}.messages{font-family:Segoe UI,system-ui,sans-serif;font-variant-numeric:tabular-nums}

/* @cpi 2026-09-22 17:44: cadena continua adaptable; los dobles se colocan atravesados. */
.board{display:block;overflow:hidden;padding:0}.board>.script{position:absolute;top:40%;text-align:center;width:100%}.chain-layer{position:absolute;left:50%;top:50%;transform-origin:center}.chain-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.chain-links polyline{fill:none;stroke:#d8c99b66;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.chain-piece{position:absolute;transition:left .3s ease,top .3s ease,transform .3s ease}.chain-piece>.tile{animation:tile-arrive .22s ease-out}.chain-piece .tile span{width:25px;height:25px}.chain-piece .tile{min-width:0}.hand button.tile:disabled{opacity:.82}.hand button.legal{box-shadow:0 3px 8px #c99d5766}@keyframes tile-arrive{from{opacity:0;filter:brightness(1.3)}to{opacity:1;filter:brightness(1)}}

/* @cpi 2026-09-22 17:52: historial legible con resultado personal. */
.history-list{display:grid;gap:14px}.history-entry{padding:16px;border:1px solid var(--line);border-radius:15px;background:#f3f4e9}.history-entry h3{margin:8px 0}.history-entry p{margin:5px 0;font-size:14px}.profit{color:#21664d}.loss{color:#a43e42}

/* @cpi 2026-09-22 18:12: opcion de recordar compacta sin estirar el checkbox. */
.login-card .remember-choice{display:flex;align-items:center;gap:.6rem;font-size:.9rem;margin:.7rem 0}.login-card .remember-choice input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--accent,#315c48)}

/* @cpi 2026-09-22 18:14: accesos de proveedor coherentes con la tarjeta de bienvenida. */
#providers{display:grid;gap:12px;margin:20px 0}#apple-access{display:flex;justify-content:center;align-items:center;gap:8px;background:#202620;color:white;width:100%}.access-divider{font-size:12px;text-align:center;color:var(--muted);margin:0}#retry-providers{font-size:12px}

/* @cpi 2026-09-22 18:14: unidades del almacen separadas de las acciones de apuesta. */
.inventory-item{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:14px}.inventory-item small{color:var(--muted)}

/* @cpi 2026-09-22 18:17: presencia y relaciones en tarjetas sociales compactas. */
.contact-list{display:grid;gap:12px}.contact-card{padding:10px 14px;border:1px solid var(--line);border-radius:18px}.contact-card .player-row{padding-top:0}.contact-card .player-row strong{flex:1}.contact-location{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:13px}.contact-location img{width:65px;height:48px;object-fit:cover;border-radius:10px}.contact-location>div{display:grid;gap:3px}.contact-location span,.contact-location small{color:var(--muted)}

/* @cpi 2026-09-22 18:23: aviso exclusivo del banco aislado, ausente en la aplicacion normal. */
.laboratory-note{margin:0;padding:7px 4vw;background:#fff0bd;color:#624c19;text-align:center;font-size:13px}

/* @cpi 2026-09-22 18:25: privado con compositor fijo y scroll independiente. */


/* @cpi 2026-09-23 10:08: mesas en cruz y fichas ocultas legibles sin ocupar el centro del tapete. */
.mini-table{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,56px);gap:0;padding:8px;border-radius:45%;position:relative}
.mini-table:before{content:'USUDOMINÓ';grid-area:2/2;align-self:center;text-align:center;font-size:8px;letter-spacing:1px;color:#dfcd9970;pointer-events:none}
.mini-table .seat{min-height:0;gap:1px}.mini-table .avatar{width:35px;height:35px;border-radius:9px}.mini-table .seat>span{max-width:100%;font-size:10px}
.mini-table [data-seat="0"]{grid-area:3/2}.mini-table [data-seat="1"]{grid-area:2/1}.mini-table [data-seat="2"]{grid-area:1/2}.mini-table [data-seat="3"]{grid-area:2/3}
.opponents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.opponent{flex-direction:column;justify-content:start;gap:3px;min-width:0}.opponent-nick{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.hidden-hand{display:flex;justify-content:center;max-width:100%;padding:0 5px}.tile-back{display:inline-block;flex-shrink:0;width:12px;height:22px;border:1px solid #d9c9a1;border-radius:3px;background:repeating-linear-gradient(45deg,#294e45 0 2px,#406757 2px 4px);box-shadow:0 2px 2px #0002}.hidden-hand .tile-back+.tile-back{margin-left:-6px}
.stock{display:flex;align-items:center;justify-content:center;gap:10px;align-self:center;margin-top:5px;padding:5px 10px;font-size:11px}.stock:disabled{opacity:1;cursor:default}.stock-tiles{display:flex;padding-right:4px}.stock-tiles .tile-back+.tile-back{margin-left:-8px}.stock:not(:disabled){border-color:var(--gold);box-shadow:0 0 0 2px #c99d5733}

/* @cpi 2026-09-23 10:11: gesto tactil y destinos independientes del tablero; no bloquean otros controles. */
.hand button.legal{touch-action:none;user-select:none}.drag-source{opacity:.35}.drag-ghost{position:fixed!important;z-index:1000;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg);box-shadow:0 12px 20px #0005!important}.drop-target{position:fixed;z-index:999;pointer-events:none;width:48px;height:48px;transform:translate(-50%,-50%);display:grid;place-items:center;border:2px dashed #ead294;border-radius:50%;background:#153e37dd;color:#ffe8ad;font-size:28px}.drop-target.selected{background:#bc9449;color:#173c33;border-style:solid;box-shadow:0 0 20px #f9df96}

/* @cpi 2026-09-23 10:15: mascota original y escena de mesa en cruz con espacio reservado para cada jugador. */
.brand-mascot{width:51px;height:51px;object-fit:contain}.login-entry{position:relative;width:100%;padding-top:145px}.login-mascot{display:block;position:absolute;width:180px;height:180px;object-fit:contain;left:50%;top:0;transform:translateX(-50%);z-index:1}.login-entry .login-card{position:relative;z-index:2}.login-layout{margin-top:15px}.login-entry .login-card{border-radius:24px}
.board-panel{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:auto minmax(120px,1fr) auto auto auto auto;gap:4px;padding:10px}.board-panel .opponents{display:contents}.opponent{align-self:center;justify-self:center;width:100%;max-width:150px}.opponent[data-position="top"]{grid-area:1/2}.opponent[data-position="left"]{grid-area:2/1}.opponent[data-position="right"]{grid-area:2/3}.opponent[data-position="bottom"]{grid-area:3/2;flex-direction:row;justify-content:center;max-width:240px}.opponent[data-position="bottom"] .hidden-hand{max-width:70px}.board-panel .board{grid-area:2/2;min-height:120px;min-width:0;padding:10px;overflow:hidden}.board-panel .hands{grid-area:4/1/5/4;padding:4px 0;overflow:auto;max-height:150px}.board-panel #game-status{grid-area:5/1/6/4;padding:3px;min-height:20px}.board-panel #game-actions{grid-area:6/1/7/4}.board-panel .stock{grid-area:1/3;align-self:center;justify-self:center;flex-direction:column;gap:2px;padding:5px;font-size:10px;max-width:64px}.board-panel .stock-tiles{max-width:52px;overflow:hidden}.opponent.active .avatar{outline-color:#d4ae59}
#game>.section-heading{margin-bottom:8px}#game>.section-heading h1{font-size:26px}#game-mode{font-size:10px;letter-spacing:1px}.game-layout{height:calc(100dvh - 175px);min-height:450px;gap:14px;grid-template-columns:minmax(0,1fr) minmax(290px,340px)}
@media(max-width:800px){.game-layout{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}.board-panel{height:65dvh;min-height:460px}.game-layout .chat-panel{height:35dvh;min-height:220px}.login-entry{max-width:490px}.board-panel .board{min-height:100px}}
@media(max-width:450px){.board-panel{grid-template-columns:43px minmax(0,1fr) 43px;padding:5px;gap:2px}.opponent .avatar{width:30px;height:30px}.opponent-nick{font-size:10px}.brand-mascot{width:37px;height:37px}.board-panel .stock{max-width:43px;padding:2px}.stock-tiles{max-width:35px}.login-entry{padding-top:130px}.login-mascot{width:165px;height:165px}}
@media(max-height:520px) and (orientation:landscape){.brand-mascot{width:30px;height:30px}.game-layout{height:calc(100dvh - 104px);min-height:260px;grid-template-columns:minmax(0,1fr) minmax(230px,30%)}.board-panel{height:100%;min-height:0;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-rows:36px minmax(60px,1fr) 28px auto auto auto;padding:4px}.opponent[data-position="bottom"]{flex-direction:row}.opponent[data-position="top"]{flex-direction:row;max-width:230px}.opponent .avatar{width:28px;height:28px}.board-panel .board{min-height:60px}.game-layout .chat-panel{height:100%;min-height:0}.board-panel .hands{max-height:85px}.hand button.tile span{width:20px;height:20px}.board-panel #game-status{font-size:11px}}

/* @cpi 2026-09-23 10:17: el original tiene fondo negro; integrarlo como medallon sin modificar la imagen. */
.brand-mascot{border-radius:50%;border:1px solid var(--gold);background:#111}.login-entry{padding-top:152px}.login-mascot{width:152px;height:152px;border-radius:50%;border:3px solid #d2b579;background:#111;box-shadow:0 8px 24px #203c3a22;object-fit:cover}.login-entry .login-card{margin-top:0}

/* @cpi 2026-09-23 10:19: dorso animado sin interceptar raton o tactil. */
.draw-flight{position:fixed;z-index:900;width:23px;height:40px;pointer-events:none;box-shadow:0 8px 12px #0003}

/* @cpi 2026-09-23 10:19: frases compactas y editor legible, mismo icono que Mus. */
.composer .icon img{width:30px;height:30px;object-fit:contain}.quick-phrases{display:flex;flex-wrap:wrap;gap:8px}.quick-phrases button{padding:9px 13px;font-size:14px}.phrase-editor{display:grid;gap:12px}.phrase-editor textarea{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;resize:vertical}.tabs{flex-shrink:0}.tabs .icon{margin-left:auto}

/* @cpi 2026-09-23 10:23: correcciones verificadas en 390x844 y 844x390. */
.board-panel .stock{min-width:0;width:100%;overflow:hidden}.board-panel .stock-tiles{min-width:0;max-width:100%}.stock>span:last-child{white-space:nowrap;font-size:9px}.chat-panel .tabs{gap:2px;min-width:0}.chat-panel .tabs button{padding:8px 7px;white-space:nowrap}.chat-panel .tabs .icon{width:30px;min-width:30px;padding:0;font-size:19px}.board-panel #game-status{overflow-wrap:anywhere}
@media(max-width:800px) and (orientation:portrait){.board-panel{height:55dvh;min-height:390px}.game-layout .chat-panel{height:32dvh;min-height:220px}}
@media(max-height:520px) and (orientation:landscape){.chat-panel .tabs button{font-size:11px;padding:6px 5px}.chat-panel .tabs .icon{width:25px;min-width:25px}.composer{gap:4px;padding:7px}.composer .icon{width:32px;height:34px;min-width:32px}.composer .icon img{width:26px;height:26px}}

/* @cpi 2026-09-23 15:35: usar el alto disponible real; cabecera y avisos no ocultan el compositor en PC. */
@media(min-width:801px){
 body:has(#lobby:not([hidden])),body:has(#game:not([hidden])){height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body:has(#lobby:not([hidden]))>.topbar,body:has(#game:not([hidden]))>.topbar{flex-shrink:0}
 body:has(#lobby:not([hidden]))>.laboratory-note,body:has(#game:not([hidden]))>.laboratory-note{flex-shrink:0}
 body:has(#lobby:not([hidden]))>main,body:has(#game:not([hidden]))>main{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}
 #lobby:not([hidden]),#game:not([hidden]){display:flex;flex:1;flex-direction:column;min-height:0}
 #lobby>.section-heading,#game>.section-heading{flex-shrink:0}
 #lobby>.social-layout,#game>.social-layout{flex:1;min-height:0;height:auto}
 .social-layout>.chat-panel{height:auto;min-height:0}
}

/* @cpi 2026-09-23 15:36: lectura compacta del reglamento en la modal comun. */
.rulebook>select{width:100%;margin-bottom:18px}.rulebook section{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.rulebook h3{font-size:16px;margin:0 0 5px}.rulebook p{font-size:14px;line-height:1.6;margin:0;color:var(--muted)}

/* @cpi 2026-09-23 15:38: 7+7 mantiene las dos manos separadas y el turno recibido visible. */
.hidden-rack{display:flex;flex-direction:column;gap:3px;align-items:center;min-width:0;padding:3px;border:1px solid transparent;border-radius:6px}.rack-backs{display:flex;justify-content:center}.hidden-rack small{font-size:9px;white-space:nowrap;color:var(--muted)}.hidden-hand.multiple-hands{gap:6px;flex-wrap:wrap}.hidden-rack.active-hand{border-color:var(--gold);background:#c99d571a}.hand.active-hand .hand-label{color:var(--green);font-weight:700}.hand:has(.hand-label){border:1px solid var(--line);border-radius:12px;padding:6px}.hand.active-hand:has(.hand-label){border-color:var(--gold)}

/* @cpi 2026-09-23 15:44: iconos originales compartidos sin aumentar la altura de las barras. */
button.image-action{display:inline-flex;align-items:center;justify-content:center;gap:8px}button.image-action>img{width:26px;height:26px;object-fit:contain;flex-shrink:0}.modal-options>button.image-action{justify-content:flex-start}.chat-panel .tabs button.image-action{gap:4px}.chat-panel .tabs button.image-action>img{width:20px;height:20px}button.icon.image-action>img{width:28px;height:28px}
@media(max-width:450px){.chat-panel .tabs button.image-action>img{width:17px;height:17px}.chat-panel .tabs button.image-action{font-size:12px;gap:3px;padding:8px 5px}}

/* @cpi 2026-09-23 15:44: contraste del engranaje original y ancho completo cuando no hay jugadores laterales. */
#settings.image-action>img{filter:brightness(.6)}/* @cpi 2026-09-26: dos jugadores pueden estar en sillas contiguas; ampliar solo si ambos laterales estan libres. */
.board-panel:has(.opponents>.opponent:nth-child(2):last-child):not(:has(.opponent[data-position="left"],.opponent[data-position="right"]))>.board{grid-column:1/4}

/* @cpi 2026-09-23 16:08: accesos de salones visibles y compactos, con iconos comunes de UsuJuegos. */
.room-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:24px 0 10px;padding:16px 0;border-top:1px solid var(--line)}.room-actions button{background:var(--paper);border:1px solid var(--line);padding:10px 14px}.room-actions .image-action>img{width:25px;height:25px}
@media(max-width:450px){.room-actions{gap:7px;margin-top:18px}.room-actions button{font-size:12px;padding:8px 10px;gap:5px}}

/* @cpi 2026-09-23 16:16: contenedor estable de conversación y paginación móvil del salón. */
.chat-page{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.lobby-pages{display:none}
@media(max-width:800px){
 body:has(#lobby:not([hidden])){height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body:has(#lobby:not([hidden]))>.topbar,body:has(#lobby:not([hidden]))>.laboratory-note{flex-shrink:0}
 body:has(#lobby:not([hidden]))>main{width:100%;min-width:0;flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 12px}
 #lobby:not([hidden]){display:flex;flex:1;min-height:0;flex-direction:column}
 #lobby>.section-heading{flex-wrap:wrap;gap:7px;margin-bottom:10px;flex-shrink:0}#lobby>.section-heading>div:first-child{width:100%}#lobby>.section-heading .eyebrow{display:none}#lobby>.section-heading h1{font-size:25px;line-height:1.12}#lobby>.section-heading>div:last-child{display:flex;align-items:center;gap:8px}#lobby #table-filter{padding:6px 9px}
 #lobby>.social-layout{display:flex;flex-direction:row;gap:0;flex:1;min-height:0;height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
 #lobby>.social-layout::-webkit-scrollbar{display:none}#lobby-chat{display:contents;touch-action:auto}#lobby-chat>.tabs{display:none}
 #lobby .tables-panel,#lobby .chat-page,#lobby .players{flex:0 0 100%;width:100%;min-width:0;height:100%;min-height:0;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box}
 #lobby .tables{max-height:none;flex:1;min-height:0;gap:9px;padding-bottom:6px}#lobby .tables-panel>input{margin-bottom:8px;padding:7px 11px}
 #lobby .chat-page,#lobby .players{background:var(--paper);border:1px solid var(--line);border-radius:18px}#lobby .players{overflow:auto;padding:12px}
 .lobby-pages{display:flex;flex-shrink:0;gap:4px;padding-top:9px}.lobby-pages button{flex:1;min-width:0;padding:10px 4px;font-size:12px;background:transparent;border:1px solid transparent}.lobby-pages button.active{background:var(--green);color:#fff3d9;border-color:var(--gold)}
 #lobby .mini-table{margin:8px 0;padding:5px;border-width:3px;grid-template-rows:repeat(3,44px)}#lobby .seat{min-height:44px}#lobby .seat button.empty{width:32px;height:32px;font-size:20px}
}

/* @cpi 2026-09-23 16:26: repartir el alto real en partida móvil y mantener el compositor dentro de la pantalla. */
@media(max-width:800px){
 body:has(#game:not([hidden])){height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body:has(#game:not([hidden]))>.topbar,body:has(#game:not([hidden]))>.laboratory-note{flex-shrink:0}
 body:has(#game:not([hidden]))>main{width:100%;min-width:0;flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 10px}
 #game:not([hidden]){display:flex;flex:1;min-height:0;flex-direction:column}
 #game>.section-heading{flex-shrink:0;align-items:center;gap:8px}#game>.section-heading>div:first-child{min-width:0}#game-mode{font-size:9px;letter-spacing:0;margin-bottom:3px}#game>.section-heading h1{font-size:23px}
 #game>.game-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(155px,30%);flex:1;height:auto;min-height:0;gap:8px}
 #game .board-panel,#game .chat-panel{height:auto;min-height:0}
 #game .board-panel{grid-template-rows:auto minmax(60px,1fr) auto auto auto auto}
 #game .board{min-height:60px}#game .hands{max-height:100px}
 #game .composer{padding:7px;gap:4px}#game .composer .icon{width:34px;height:36px;min-width:34px}#game .composer input{padding:8px}
}
/* @cpi 2026-09-23 16:26: en horizontal el chat ocupa una columna y no resta alto al tapete. */
@media(max-height:520px) and (orientation:landscape){
 body:has(#game:not([hidden]))>main{padding:4px 10px}
 #game>.section-heading{margin-bottom:4px}#game-mode{display:none}
 #game>.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,32%);grid-template-rows:minmax(0,1fr);gap:8px;min-height:0;height:auto}
 #game .board-panel{height:auto;min-height:0;grid-template-rows:30px minmax(40px,1fr) 28px auto auto auto;gap:2px}
 #game .board{min-height:40px}#game .hands{max-height:65px;padding:2px 0}#game .hand button.tile{padding:3px}#game .hand button.tile span{width:17px;height:17px}#game .pip{width:4px;height:4px}
 #game #game-status{font-size:10px;min-height:16px;padding:1px}#game .chat-panel{height:auto;min-height:0}
}
/* @cpi 2026-09-23 16:28: en apaisado juntar avatar propio y mano, y compactar barras para ganar tapete. */
@media(max-height:520px) and (orientation:landscape){
 body:has(#game:not([hidden]))>.topbar{min-height:40px;padding:4px 12px}
 body:has(#game:not([hidden]))>.topbar .avatar{width:28px;height:28px}
 body:has(#game:not([hidden]))>.topbar .icon,#game .game-tools .icon{width:30px;height:30px;font-size:21px}
 #game #clock{padding:5px 8px;font-size:12px}
 #game .board-panel{grid-template-rows:30px minmax(40px,1fr) auto auto auto}
 #game .opponent[data-position="bottom"]{grid-area:3/1;flex-direction:column;gap:0}
 #game .opponent[data-position="bottom"] .opponent-nick{font-size:9px}
 #game .hands{grid-area:3/2/4/4}
 #game #game-status{grid-area:4/1/5/4}
 #game #game-actions{grid-area:5/1/6/4}
}
/* @cpi 2026-09-23 16:37: las condiciones no se ocultan con la cabecera compacta antes del reparto. */
#game[data-phase=confirmacion] #game-mode,#game[data-phase=apuestas] #game-mode{display:block;font-size:11px;letter-spacing:0;line-height:1.35}

/* @cpi 2026-09-23 16:46: acciones sociales compactas, mismas imágenes que Mus y menú sin fondo. */
.players,.contact-card{container-type:inline-size}
.player-row>.avatar-control{flex-shrink:0}.player-row>span,.player-row>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-actions{display:flex;flex-shrink:0;gap:2px;align-items:center}
.player-actions .icon{width:29px;height:32px;padding:0;border:0;background:transparent;box-shadow:none}
.player-actions .icon.image-action>img{width:23px;height:23px}
.player-row .player-menu{display:none;flex-shrink:0;width:32px;height:32px;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--green);padding:0;font-size:24px;line-height:1}
@container(max-width:420px){.player-row>.player-actions{display:none}.player-row>.player-menu{display:inline-grid}}
/* @cpi 2026-09-23 16:53: artículos compactos con la imagen original y valoración del servidor. */
.inventory-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:12px;text-align:left;background:linear-gradient(120deg,#fffdf7,#f1f2e5)}
.inventory-picture{width:64px;height:64px;display:grid;place-items:center;border-radius:12px;background:#fff;overflow:hidden;border:1px solid #ddd6bf}
.inventory-picture img{width:100%;height:100%;object-fit:contain}.inventory-picture small{font-size:10px;line-height:1.25;text-align:center;padding:4px}
.inventory-details{display:grid;gap:5px;min-width:0}.inventory-details strong{font-size:14px;overflow-wrap:anywhere}.inventory-price{font-size:13px;color:#846435}.inventory-details small{font-size:11px}
button.inventory-item:not(:disabled):hover{border-color:var(--gold);background:#edf1e2}button.inventory-item:disabled{opacity:.65}
/* @cpi 2026-09-23 17:12: mensaje persistente integrado en el formulario de acceso. */
.login-card .login-status{font-size:13px;line-height:1.5;color:var(--ink);background:#edeedc;border-left:3px solid var(--gold);border-radius:8px;margin:10px 0;padding:10px 12px}

/* @cpi 2026-09-23 18:37: selector compacto con la paleta común de dominó. */
.environment-switch{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.environment-switch input[type=checkbox]{width:18px;height:18px;flex:none;margin:0;accent-color:var(--green)}
.environment-switch span{font-size:14px}.environment-switch small{display:block;font-size:12px;color:var(--muted);margin-top:3px}

/* @cpi 2026-09-23: ilustración compartida sin recortar ni deformar, con espacio propio junto al nombre. */
.room-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:90px}.room-card .room-heading h2{margin:12px 0;min-width:0}.room-card .room-art{width:100px;height:75px;object-fit:contain;flex:0 0 100px}

/* @cpi 2026-09-23: arte de bienvenida adaptable; no afecta a las fichas reales de la partida. */
.login-domino-art{display:block;width:min(100%,440px);height:auto;max-height:290px;object-fit:contain;margin:10px auto 4px}
@media(max-width:700px){.login-domino-art{width:min(100%,280px);max-height:185px;margin:6px auto}}

/* @cpi 2026-09-23: login coherente con Mus/Parchís; estilos limitados a su tarjeta. */
.login-card #login-form{display:grid;gap:12px}.login-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.login-label-row a{font-size:.8rem}.login-password{display:flex;position:relative}.login-password input{width:100%;padding-right:76px}.login-password button{position:absolute;right:5px;top:5px;bottom:5px;padding:0 10px;border:0;background:transparent;color:var(--green);font-size:.8rem;box-shadow:none}.login-card #providers{margin:24px 0 18px}.login-card #google-access{display:flex;justify-content:center;min-height:44px}.login-card .access-divider{display:flex;align-items:center;gap:12px;margin-bottom:4px}.login-card .access-divider:before,.login-card .access-divider:after{content:"";height:1px;flex:1;background:#b8aa863f}.login-first-visit{border-top:1px solid #b8aa863f;padding-top:18px;font-size:.85rem;line-height:1.55}.login-first-visit p{margin:7px 0}.login-first-visit a{font-weight:600}.login-help{display:block;margin:14px auto 0;background:transparent;border:0;box-shadow:none;text-decoration:underline;color:var(--green);font-size:.85rem;padding:6px}.login-legal{display:flex;justify-content:center;gap:22px;margin-top:17px;font-size:.78rem;color:var(--muted)}

/* @cpi 2026-09-23 22:30: portada alineada arriba y mesas sociales con asientos fuera del tapete. */
.login-layout{align-items:start}.login-layout .welcome{padding-top:48px}
.login-card #login-form>label,.login-card .login-label-row label{margin:4px 0}
.login-card .dev-server-choice{margin:12px 0}
#lobby .tables{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
#lobby .table-card{background:linear-gradient(145deg,#fffdf5,#eae8d8);border:1px solid #fffdf7;border-radius:23px;padding:16px;box-shadow:0 6px 18px #183d3020}
#lobby .table-heading{color:#254b43;align-items:center}#lobby .table-heading>span:first-child{font:600 19px Georgia,serif}#lobby .table-heading>span:last-child{font-size:11px;letter-spacing:1px;color:#6f8073}
#lobby .mini-table{display:grid;grid-template-columns:62px minmax(72px,1fr) 62px;grid-template-rows:62px 88px 62px;gap:0;padding:0;margin:6px 0;background:none;border:0;border-radius:0;isolation:isolate}
#lobby .mini-table:before{display:none}
#lobby .mini-felt{grid-area:2/2;align-self:stretch;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:radial-gradient(ellipse at 40% 20%,#3d7b65,#174c3d 80%);border:4px solid #af925d;border-radius:24px;box-shadow:0 3px 0 #725833,0 6px 12px #183b3b33,inset 0 0 0 2px #ead5a34a}
#lobby .mini-felt:after{content:'';position:absolute;inset:7px;border:1px solid #e2d1a52b;border-radius:14px;pointer-events:none}
#lobby .felt-label{font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:#e8dbb8}
#lobby .table-dominoes{display:flex;gap:4px;transform:rotate(-14deg);pointer-events:none}
#lobby .table-dominoes .tile{padding:2px;border-radius:4px;box-shadow:1px 3px 3px #06231a80;background:#fff6df;border:1px solid #baa779;display:flex;flex-direction:column}
#lobby .table-dominoes .tile span{width:16px;height:16px;padding:2px}.table-dominoes .pip{background:#214439}
#lobby .seat{min-height:0;color:#24463c;gap:3px}#lobby .seat .avatar{width:43px;height:43px;border-radius:12px;box-shadow:0 3px 6px #213e3025}#lobby .seat>span{font-size:11px;max-width:76px}
#lobby .seat button.empty{width:40px;height:40px;border-radius:12px;border:1px dashed #9fae9b;background:#dfe5d9;color:#697e69;font-size:23px;box-shadow:0 3px 0 #c4cebd}
#lobby .own-seat .avatar{outline:2px solid #c1a052;outline-offset:2px}
#lobby .table-controls{display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;margin:0 0 8px}#lobby .table-controls button{padding:7px 12px;font-size:12px;border-radius:10px}#lobby .stand-button{background:transparent;border:1px solid #bcc6b5;color:#315847}
#lobby .table-caption{border-top:1px solid #b0b59a55;padding-top:10px;line-height:1.5;font-size:11px}
#lobby .is-playing .mini-felt{cursor:pointer;border-color:#d1b569}#lobby .is-playing .table-dominoes .tile{animation:domino-table-play 2.8s ease-in-out infinite}#lobby .is-playing .table-dominoes .tile+ .tile{animation-delay:.35s}
@keyframes domino-table-play{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(9deg)}}
@media(max-width:650px){.login-layout .welcome{padding-top:12px}#lobby .tables{grid-template-columns:repeat(auto-fill,minmax(245px,1fr))}#lobby .mini-table{grid-template-rows:56px 78px 56px}}
@media(prefers-reduced-motion:reduce){#lobby .is-playing .table-dominoes .tile{animation:none}}

/* @cpi 2026-09-23 20:48: preparación editorial marfil/esmeralda, legible con todas las modalidades. */
.table-setup,.preparation-sheet{max-width:850px}.setup-kicker{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#8c703d;margin:0 0 8px}.table-setup h3,.preparation-sheet h3{font:28px/1.15 Georgia,serif;color:#244c40;margin:0 0 10px}.setup-intro{font-size:14px;color:#617066;margin:10px 0 20px;line-height:1.6}
.mode-catalog{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.mode-card{position:relative;padding:18px;border:1px solid #bfcdbd;border-radius:17px;background:linear-gradient(135deg,#fffef7,#edf2e8);display:flex;flex-direction:column;gap:8px}.mode-card.selected{border-color:#96763d;box-shadow:inset 0 0 0 1px #b69450;background:linear-gradient(135deg,#fffaf0,#eee6d1)}.mode-card.unavailable{background:#f0efea;border-color:#deddd3}.mode-card h4{font:22px Georgia,serif;margin:0;color:#315344}.mode-card p{font-size:13px;line-height:1.5;margin:0 0 8px;color:#66746c}.mode-availability{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#30674a}.unavailable .mode-availability{color:#78756c}.mode-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;align-items:center}.mode-actions button{font-size:12px;padding:7px 9px}.mode-select{background:#e0e9dc;border:1px solid #bbcbb5;color:#2c5740}.mode-select:disabled{opacity:1;color:#8b8c82;background:#e6e5dd;border-color:#d7d7cc;cursor:not-allowed}.text-button{background:transparent!important;border:0!important;box-shadow:none!important;color:#45614c;text-decoration:underline;text-underline-offset:3px}
.setup-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.setup-fields label{display:grid;gap:8px;font-size:13px;color:#49634e}.setup-betting{display:flex;gap:13px;align-items:flex-start;border:1px solid #d8ccaa;background:#f5f0df;padding:16px;border-radius:14px}.setup-betting input{width:19px;height:19px;flex-shrink:0;accent-color:#285642}.setup-betting strong,.setup-betting small{display:block}.setup-betting small{font-size:12px;color:#67705d;line-height:1.5;margin-top:5px}.setup-footer{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:10px;padding-top:20px;margin-top:15px;border-top:1px solid #d4d8c8}.setup-note{font-size:12px;color:#7a7f6c;line-height:1.5}.setup-footer>.setup-note{flex-basis:100%;margin:0 0 6px}.setup-footer button{padding:11px 17px;border-radius:12px}
.condition-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.condition-facts>div{background:#edf1e6;border-radius:12px;padding:13px;text-align:center}.condition-facts strong,.condition-facts small{display:block}.condition-facts strong{font:21px Georgia;color:#285444}.condition-facts small{font-size:10px;color:#77816f;margin-top:4px}.confirmation-roster{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.confirmation-player{display:flex;align-items:center;gap:9px;font-size:13px;padding:9px;border:1px solid #e4e7db;border-radius:12px}.confirmation-player .avatar{width:34px;height:34px}.confirmation-player>small{margin-left:auto;color:#8e8774;font-size:10px}.confirmation-player>small.accepted{color:#2e784e}.bet-offer{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border:1px solid #d4ddcb;border-radius:13px;background:#f5f5ed;margin-bottom:8px}.bet-offer small{flex-basis:100%;color:#7a805e}.bet-offer strong{flex:1;font-size:14px}.empty-bets{padding:25px;border:1px dashed #cbd3bd;border-radius:14px;text-align:center;color:#78826f}
/* Tapete prioritario: detalles reversibles, cabeceras bajas y preparación fuera de la zona de juego. */
body[data-view="game"] .topbar{padding-top:4px;padding-bottom:4px;min-height:40px}body[data-view="game"] .brand-mascot{width:30px;height:30px}body[data-view="game"] .brand{font-size:18px}body[data-view="game"] .brand small,body[data-view="game"] .motto{display:none}body[data-view="game"] main{padding-top:8px;padding-bottom:6px}
#game-mode{display:none}#game.show-details #game-mode{display:block;margin:0 0 6px}#game>.section-heading{margin-bottom:6px}#game>.section-heading h1{font-size:20px}#game .game-tools .icon{width:33px;height:33px}#game .game-layout{height:calc(100dvh - 113px);min-height:330px}#game.show-details .game-layout{height:calc(100dvh - 138px)}
#game .board-panel{grid-template-rows:45px minmax(100px,1fr) 0 auto auto auto;padding:6px;gap:3px}#game .opponent[data-position="top"]{flex-direction:row;max-width:250px;gap:8px}#game .opponent[data-position="top"] .avatar{width:32px;height:32px}#game .opponent[data-position="bottom"]{display:none}#game.show-details .opponent[data-position="bottom"]{display:flex}#game.show-details .board-panel{grid-template-rows:45px minmax(100px,1fr) 36px auto auto auto}#game #game-actions:empty,#game #game-status:empty{display:none}#game #game-status{font-size:11px;min-height:0;line-height:1.25;padding:1px}#game .hands{max-height:115px}#game #game-actions button{padding:5px 12px;font-size:12px}
@media(max-width:650px){.mode-catalog{grid-template-columns:1fr}.mode-card{padding:14px}.condition-facts{grid-template-columns:1fr 1fr}.confirmation-roster{grid-template-columns:1fr}.setup-fields{gap:8px}.setup-footer button{flex:1}.table-setup h3,.preparation-sheet h3{font-size:24px}}
@media(max-width:800px) and (orientation:portrait){#game .game-layout,#game.show-details .game-layout{height:auto;min-height:0}#game .board-panel{height:60dvh;min-height:320px}#game .game-layout .chat-panel{height:31dvh;min-height:200px}}
@media(max-height:520px) and (orientation:landscape){#game .game-layout,#game.show-details .game-layout{height:calc(100dvh - 90px);min-height:220px}body[data-view="game"] .topbar{min-height:30px;padding-top:2px;padding-bottom:2px}#game .board-panel{height:100%;min-height:0;grid-template-rows:30px minmax(55px,1fr) 0 auto auto auto}#game .opponent[data-position="top"] .avatar{width:25px;height:25px}#game .hands{max-height:70px}#game .board-panel .board{min-height:55px;padding:3px}}

/* @cpi 2026-09-23 20:48: espacio suficiente para comparar modalidades y aceptar sin perder la cabecera. */
dialog:has(.table-setup),dialog:has(.preparation-sheet){width:min(900px,94vw);padding:24px;background:linear-gradient(140deg,#fffef8,#f0f2e7)}dialog:has(.table-setup) .modal-heading,dialog:has(.preparation-sheet) .modal-heading{border-bottom:1px solid #d7dcc8;padding-bottom:15px}.mode-card button:focus-visible{outline:3px solid #b69b5a;outline-offset:2px}

/* @cpi 2026-09-23 21:00: nueva mascota transparente; conservar silueta sin recorte circular ni fondo negro. */
.brand-mascot,.login-mascot{border-radius:0;border:0;background:transparent;object-fit:contain;box-shadow:none}

/* @cpi 2026-09-23 21:10: salones marfil y azul suave; ilustración principal y pie común con Mus. */
#rooms .room-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:24px 26px 0;min-height:340px;background:radial-gradient(ellipse at 80% 12%,#dce8f3 0,transparent 66%),linear-gradient(145deg,#fffdf5,#ede8d9);color:#263e51;border:1px solid #fffdf8;box-shadow:0 8px 25px #283e4b16;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer}
#rooms .room-card:hover{transform:translateY(-3px);box-shadow:0 13px 28px #283e4b26;border-color:#b7cce0}
#rooms .room-card:focus-visible{outline:3px solid #ad8c48;outline-offset:4px}
#rooms .room-card .eyebrow{margin:0;color:#89764d;font-size:10px}
#rooms .room-card .room-art{position:static;display:block;align-self:center;width:min(100%,240px);height:180px;flex:none;object-fit:contain;margin:8px 0 12px;filter:drop-shadow(0 9px 9px #40506620)}
#rooms .room-name{font:28px/1.15 Georgia,serif;letter-spacing:-.5px;margin-bottom:20px}
#rooms .room-card-meta{display:flex;gap:22px;color:#70808a;font-size:13px;line-height:1.6;margin-top:auto}
#rooms .room-card-meta strong{display:block;font-size:21px;font-weight:450;color:#2d4557}
#rooms .occupancy{display:block;height:3px;background:#526b7e1c;border-radius:4px;margin:22px 0;overflow:hidden}
#rooms .occupancy>span{display:block;height:100%;background:#618fb5;border-radius:inherit}
@media(prefers-reduced-motion:reduce){#rooms .room-card{transition:none}}

/* @cpi 2026-09-23 21:20: mesa compacta, sillas ilustradas y emblema proporcional. */
#lobby .tables{align-items:start;grid-auto-rows:max-content}#lobby .table-card{min-height:0;height:auto;padding:12px 14px 10px;border-radius:18px}
#lobby .mini-table{grid-template-columns:52px minmax(75px,1fr) 52px;grid-template-rows:45px 64px 48px;margin:4px auto 7px;width:100%;max-width:260px}
#lobby .mini-felt{border-width:3px;border-radius:22px;gap:1px;max-width:110px;width:100%;justify-self:center}#lobby .mini-felt:after{inset:5px;border-radius:15px}
#lobby .table-dominoes{transform:none;display:block;line-height:0}#lobby .table-dominoes>img{width:64px;height:43px;object-fit:contain}#lobby .felt-label{font-size:6px;letter-spacing:1px}
#lobby .seat{position:relative;gap:1px}#lobby .seat .avatar{width:34px;height:34px;border-radius:9px}#lobby .seat>span{font-size:10px;line-height:1.15;max-width:78px}
#lobby .seat button.empty{display:grid;place-items:center;padding:0;width:44px;height:44px;border:0;border-radius:0;background:transparent;box-shadow:none}#lobby .chair-image{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 2px #31445a22);transition:transform .15s}#lobby .seat button.empty:hover .chair-image{transform:translateY(-2px)}
#lobby .chief-seat .avatar{outline:2px solid #c7a455;outline-offset:1px}
#lobby .table-controls:empty{display:none}#lobby .table-controls{min-height:0;margin:3px 0 7px}#lobby .table-controls button{font-size:11px;padding:5px 9px}
#lobby .table-caption{display:flex;align-items:center;gap:6px;padding-top:7px;font-size:10px;line-height:1.2}#lobby .table-caption>strong{margin-left:auto;text-align:right;font-weight:500;white-space:nowrap;color:#8b7442}
.mode-label{display:inline-flex;align-items:center;gap:8px;font-weight:500;line-height:1.25}.mode-icon{display:inline-block;width:40px;height:40px;object-fit:contain;flex-shrink:0}.table-caption .mode-label{font-size:10px;gap:4px}.table-caption .mode-icon{width:27px;height:27px}.mode-pending{color:#839084}
.mode-card>.mode-icon{width:48px;height:48px;position:absolute;right:12px;top:12px}.mode-card>h4,.mode-card>.mode-availability{padding-right:47px}.preparation-sheet>.mode-label,.rulebook .mode-label{margin:8px 0 13px;color:#34546b}#game-mode .mode-icon{width:22px;height:22px}
#lobby .is-playing .table-dominoes>img{animation:domino-emblem-play 3s ease-in-out infinite}@keyframes domino-emblem-play{0%,100%{transform:rotate(-4deg)}50%{transform:translateY(-2px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){#lobby .is-playing .table-dominoes>img{animation:none}}

/* @cpi 2026-09-23 21:20: el botón del avatar no añade relleno que invada la silla y oculte el nick. */
#lobby .mini-table .avatar-control{padding:0;border:0;background:transparent;box-shadow:none;width:34px;height:34px;line-height:0;border-radius:9px;flex-shrink:0}/* @cpi 2026-09-25 11:07: No forzar display de las iniciales de reserva junto al avatar de la mesa. */

/* @cpi 2026-09-23 23:10: bandeja separada, todos los dorsos visibles y cadena libre. */
#game .board-panel.has-stock{grid-template-rows:82px minmax(100px,1fr) 0 auto auto auto}
#game.show-details .board-panel.has-stock{grid-template-rows:82px minmax(100px,1fr) 36px auto auto auto}
#game .board-panel .stock{grid-area:1/3;justify-self:end;align-self:start;width:122px;max-width:none;margin:0;padding:4px 3px;gap:0;border:1px solid #c5ad7966;border-radius:10px;background:#f7f2df;box-shadow:inset 0 1px 6px #85692d12}
#game .stock .stock-tiles{position:relative;width:116px;height:63px;max-width:none;overflow:visible;padding:0;display:block}
#game .stock .stock-tile{position:absolute;left:var(--stock-x);top:var(--stock-y);width:13px;height:24px;min-width:0;padding:0;margin:0;border-radius:3px;transform:rotate(var(--stock-angle));opacity:1;box-shadow:1px 2px 3px #142d3a44;transition:transform .16s,box-shadow .16s;touch-action:manipulation}
#game .stock .stock-tile:not(:disabled){cursor:pointer;border-color:#e4c37b}
#game .stock .stock-tile:not(:disabled):hover,#game .stock .stock-tile:focus-visible,#game .stock .stock-tile.selected{transform:translateY(-4px) rotate(0);box-shadow:0 0 0 2px #d6ac57,0 5px 6px #0003;z-index:2}
#game .stock-label{font-size:10px;line-height:12px;color:#5a513b;text-align:center}
#game .stock[hidden]{display:none}
@media(max-height:520px) and (orientation:landscape){
 #game .board-panel.has-stock{grid-template-rows:74px minmax(55px,1fr) 0 auto auto auto}
 #game .board-panel .stock{padding:1px 3px}
 #game .stock .stock-tiles{height:59px}
}

/* @cpi 2026-09-23 23:15: conservar el dorso al pulsar y separar el rival superior del pozo. */
#game .stock .stock-tile{background:repeating-linear-gradient(45deg,#294e45 0 2px,#406757 2px 4px)}
@media(max-width:600px){#game .has-stock .opponent[data-position="top"]{justify-self:start;max-width:calc(100% - 60px);min-width:0;flex-wrap:wrap;gap:2px}}

/* @cpi 2026-09-23 23:54: menu comun de opciones, con iconos y rejilla adaptable como Mus. */
.app-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.app-menu-grid>button{display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;min-height:54px}.app-menu-grid>button img,.app-menu-grid>button svg{width:30px;height:30px;object-fit:contain;flex-shrink:0}.settings-preferences>label{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-preferences input[type=checkbox]{width:20px;height:20px;flex-shrink:0}@media(max-width:420px){.app-menu-grid{grid-template-columns:1fr}}

/* @cpi 2026-09-23 23:57: ignorar imagenes mantiene identidad, dimensiones y acciones del avatar. */
.avatar-control .avatar-initials{display:none}.ignore-avatars .avatar-control img.avatar{display:none}.ignore-avatars .avatar-control .avatar-initials{display:flex;align-items:center;justify-content:center}

/* @cpi 2026-09-24 00:03: cantidades y valor de posesiones como el almacen de Mus. */
.inventory-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.commerce-balance{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid #d8d8bf;border-radius:12px;background:#f7f4e9}
/* Catálogo y carrito con selección por unidades, como la tienda de Titanium. */
.commerce-catalog{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));align-content:start;gap:8px}
.commerce-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;text-align:center;border:1px solid #d6ded9;background:#fff;font:inherit;color:#173b4b}
button.commerce-card:hover,button.commerce-card:focus-visible{border-color:#416577}
.commerce-card.is-selected{border-color:#416577;background:#fff;box-shadow:inset 0 0 0 2px #416577}
.shop-content .commerce-icon{display:block;flex:none;width:auto;max-width:52.8px;height:41.8px;object-fit:contain;margin:0 auto;border-radius:2px}
.commerce-name{font-size:.82rem;line-height:1.3;overflow-wrap:anywhere}.commerce-card strong{font-size:.8rem;color:#704800}
.commerce-stock,.commerce-quantity{font-size:.72rem;color:#4d6258}.commerce-quantity{color:#245d3e;font-weight:600}
.commerce-help{font-size:.85rem;line-height:1.5;color:var(--muted);margin:0}
.commerce-cart-items{display:flex;flex-direction:column;gap:8px;max-height:38vh;overflow:auto;margin:12px 0}
.commerce-cart-item{display:flex;align-items:center;gap:8px;padding:8px;background:#fff;color:#173b4b;border:1px solid #d6ded9;border-radius:8px;text-align:left;font:inherit;font-size:.8rem}
.commerce-cart-item:hover{border-color:#416577}.commerce-cart-item>span:not(.commerce-remove){flex:1;overflow-wrap:anywhere}.commerce-remove{color:#704800;font-size:1.3rem}

/* @cpi 2026-09-24 00:06: estructura de Mus con superficies de Dominó. */
#modal:has(.shop-content){width:min(1000px,calc(100% - 24px))}.commerce-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;margin-top:16px}.commerce-catalog{display:grid}.commerce-basket{position:sticky;top:0;align-self:start;padding:16px;border:1px solid #d6ded9;border-radius:12px;background:#f7f4e9}.commerce-basket>strong{display:block;font-size:1.3rem}.commerce-basket>button{width:100%;margin-top:12px}@media(max-width:700px){.commerce-layout{grid-template-columns:1fr}.commerce-basket{position:static}}

/* @cpi 2026-09-24 00:11: avatar ausente conserva identidad legible sin mostrar imagen rota. */
.avatar-unavailable img.avatar{display:none}.avatar-control.avatar-unavailable .avatar-initials{display:flex;align-items:center;justify-content:center}

/* @cpi 2026-09-24 00:20: acciones compactas como Mus con superficie e icono de Domino. */
.player-menu svg{width:24px;height:24px}.player-actions:popover-open{display:flex!important;position:fixed;inset:auto;margin:0;padding:8px;gap:4px;max-width:calc(100vw - 16px);border:1px solid #c3cec9;border-radius:12px;background:#fffdf5;box-shadow:0 10px 30px #173b4b30;z-index:20}.player-actions:popover-open .icon{width:36px;height:36px}
/* @cpi 2026-09-20 18:44 · Invitación compacta con la identidad propia de cada juego. */
.share-symbol{width:24px;height:24px;flex:none;vertical-align:middle}
dialog.social-share{--share-bg:#142f27;--share-ink:#fff6e5;--share-accent:#e9c47e;box-sizing:border-box;width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:24px;border:1px solid var(--share-accent);border-radius:22px;background:var(--share-bg);color:var(--share-ink);text-align:center;box-shadow:0 24px 80px #0006;overflow:auto}
dialog.social-share.usuparchis{--share-bg:#fff5f8;--share-ink:#66314e;--share-accent:#b35482;background:linear-gradient(150deg,#fffafb,#f9e4ed)}
.social-share::backdrop{background:#071711a6;backdrop-filter:blur(4px)}
.social-share .social-share-close{position:absolute;right:8px;top:8px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--share-ink);font:28px/1 sans-serif}
.social-share .social-share-mascot{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 4px}
.social-share .social-share-brand{color:var(--share-accent);font-size:13px;letter-spacing:2px;margin:6px 0;text-transform:uppercase}
.social-share h2{font:600 29px/1.15 Georgia,serif;color:var(--share-ink);margin:12px 0}
.social-share .social-share-lead{font-size:16px;line-height:1.5;margin:14px 0 22px;color:var(--share-ink)}
.social-share-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.social-share .social-share-actions a,.social-share .social-share-actions button{display:inline-flex;justify-content:center;align-items:center;gap:8px;flex:1 1 120px;min-height:44px;padding:10px 12px;border:1px solid var(--share-accent);border-radius:12px;background:transparent;color:var(--share-ink);font:600 14px/1.2 sans-serif;text-decoration:none;cursor:pointer}
.social-share .social-share-actions a{background:var(--share-accent);color:var(--share-bg)}
.social-share .social-share-status{font-size:13px;line-height:1.35;margin:10px 0}
.social-share-status:empty{display:none}
.social-share-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid color-mix(in srgb,var(--share-accent) 30%,transparent);margin-top:20px;padding-top:14px}
.social-share .social-share-never,.social-share .social-share-later{background:transparent;border:0;padding:8px 0;color:var(--share-ink);font:14px/1.4 sans-serif;cursor:pointer}
.social-share .social-share-never{text-align:left}.social-share-never small{display:block;font-size:11px;opacity:.7;margin-top:3px}
.social-share button:focus-visible,.social-share a:focus-visible{outline:2px solid var(--share-accent);outline-offset:3px}
.social-share input{width:100%;box-sizing:border-box}
@media(max-height:480px){dialog.social-share{padding:16px 24px}.social-share .social-share-mascot{width:52px;height:52px}.social-share h2{font-size:24px;margin:6px 0}.social-share .social-share-lead{margin:8px 0 12px}.social-share-footer{margin-top:12px;padding-top:6px}}

/* @cpi 2026-09-24 00:24: tema de Dominó sobre la misma composición de Mus. */
dialog.social-share.usudomino{--share-bg:#fffdf5;--share-ink:#173b4b;--share-accent:#416577;background:linear-gradient(150deg,#fffdf5,#e5edf0)}

/* @cpi 2026-09-24 00:26: filas del editor Mus con el tema de Dominó. */
.phrases-editor-intro{margin:0;font-size:.85rem;line-height:1.4}
.phrases-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px}.phrases-editor-toolbar .btn{font-size:.8rem;padding:8px 12px}
.phrases-editor-list{display:flex;flex-direction:column;gap:8px;max-height:52dvh;overflow:auto;padding:2px}
.phrases-editor-row{display:flex;align-items:center;gap:8px;padding:8px;background:#f7f4e9;border:1px solid #c7d3d6;border-radius:10px}
.phrases-editor-number{font-size:.7rem;color:var(--gold);font-variant-numeric:tabular-nums}
.phrases-editor-row input{flex:1;min-width:0;width:0;padding:8px;font-size:.85rem;height:38px}
.phrases-editor-actions{display:flex;gap:3px}.phrases-editor-actions .btn{padding:0;width:30px;min-height:34px;font:20px/1 Arial,sans-serif}.phrases-editor-actions .btn:disabled{opacity:.25}
.phrases-editor-status{font-size:.75rem;color:var(--gold)}
@media(max-width:480px){.phrases-editor-row{gap:4px;padding:6px}.phrases-editor-number{display:none}.phrases-editor-actions .btn{width:26px}}
/* @cpi 2026-09-26 19:28: mirones con el mismo layout de jugador y fichas legibles sin controles. */
#game[data-spectator="true"] .hand button.tile:disabled{opacity:1;cursor:default;pointer-events:none}
#game .hand button.tile.observed-back{background:repeating-linear-gradient(45deg,#294e65 0 2px,#406577 2px 4px)}
#game .hand button.tile.observed-back>span{visibility:hidden}

/* @cpi 2026-09-24 16:09: indicador discreto de nivel, compartiendo la paleta de Mus. */
.avatar-control{position:relative}.avatar-level{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border:1px solid white;border-radius:50%;box-shadow:0 1px 3px #0005}body[data-ranking-colors="0"] .avatar-level{display:none}.level-explanation{display:flex;align-items:center;gap:10px}.level-dot{width:15px;height:15px;border-radius:50%;border:1px solid #999;flex:none}

/* @cpi 2026-09-24 16:36: mismo marco personal de Mus con la paleta de Domino y cierre de modal existente. */
#modal:has(.personal-web-page){width:min(900px,calc(100vw - 24px))}
.rooms-web-frame{display:block;width:100%;height:65dvh;border:0;border-radius:10px;background:white}
.web-page-loading{position:relative;width:100%}
.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:#f5f3e8;color:#23423f}
.web-loading-message strong{font-size:24px}.web-loading-message span{color:#56736e;font-size:14px;max-width:420px;line-height:1.6}

/* @cpi 2026-09-24 16:45: enlaces de portada agrupados, con espacio propio en móvil. */
.game-accesses{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}.game-accesses>a{margin-left:0}
@media(max-width:650px){body:has(.game-accesses:not([hidden])) header:first-of-type{flex-wrap:wrap;height:auto}.game-accesses{flex-wrap:wrap}.game-accesses small{display:none}}
.game-access{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:4px 8px;border:1px solid #cbd6df;border-radius:10px;background:#fffdf7;flex-shrink:0}.game-access img{width:44px;height:44px;object-fit:contain}.game-access small{display:block;color:#56736e;font-size:10px}.game-access strong{display:block;color:#23423f;font-size:15px}.game-access:hover{background:#eaf0f3}body[data-view="login"] .topbar .motto{display:none}
@media(max-width:650px){body[data-view="login"] .game-accesses{width:100%}.game-access img{width:34px;height:34px}.game-access strong{font-size:12px}}