/* =========================================================
   El Patio · piezas de juego
   Baraja propia, dominó de marfil con grosor, atril de madera,
   fichas de casino, paños con luz y todo lo que se arrastra.
   ========================================================= */

/* ---------- cartas ---------- */
.cd,.cd.sm,.cd.md,.cd.lg,.cd.xl,.cd.xs{width:7em;height:10em}
.cd{font-size:10px;border-radius:.62em;color:#16161A;font-family:Georgia,"Times New Roman",serif;
  background:#FFFDF7;background-image:linear-gradient(160deg,#FFFFFF 0%,#FAF5EA 60%,#F1E9D6 100%);
  box-shadow:inset 0 0 0 .22em #FFFDF7,inset 0 0 0 .3em rgba(60,40,10,.08),0 .08em 0 #E6DDC8,0 .16em 0 #D3C7AC,0 .45em .9em rgba(0,0,0,.32)}
.cd.xs{font-size:3.1px;border-radius:1.6px}
.cd.sm{font-size:7.43px}
.cd.md{font-size:10px}
.cd.lg{font-size:12px}
.cd.xl{font-size:14.86px}
@media (max-width:600px){.cd.md{font-size:7.7px}.cd.lg{font-size:8.86px}.cd.xl{font-size:12px}}
.cd.red{color:#C8102E}
.cd .ix{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.92;pointer-events:none}
.cd .ix.tl{left:.38em;top:.42em}
.cd .ix.br{right:.38em;bottom:.42em;transform:rotate(180deg)}
.cd .ix b{font-size:1.55em;font-weight:700;letter-spacing:-.06em}
.cd .ix i{font-style:normal;font-size:1.15em;margin-top:.08em;font-family:"Segoe UI Symbol","Apple Symbols",sans-serif}
.cd.xs .ix.br{display:none}
.cd.xs .ix.tl{left:.9em;top:.7em}.cd.xs .ix b{font-size:4em}.cd.xs .ix i{font-size:3.4em}
.cd .pips{position:absolute;left:2.15em;right:2.15em;top:1.75em;bottom:1.75em;pointer-events:none}
.cd .pips i{position:absolute;font-style:normal;font-size:1.85em;line-height:1;transform:translate(-50%,-50%);font-family:"Segoe UI Symbol","Apple Symbols",sans-serif}
.cd .pips i.flip{transform:translate(-50%,-50%) rotate(180deg)}
.cd .ace{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cd .ace .big{font-size:4.4em;line-height:1;font-family:"Segoe UI Symbol","Apple Symbols",sans-serif;filter:drop-shadow(0 .03em 0 rgba(0,0,0,.15))}
.cd .ace .ring{position:absolute;width:5.2em;height:5.2em;border-radius:50%;border:.14em dashed currentColor;opacity:.28}
.cd[data-k="As"] .ace .big{font-size:5.4em}
.cd[data-k="As"] .ace .ring{width:6em;height:6em;border-style:double;border-width:.3em;opacity:.35}
.cd .court{position:absolute;left:1.6em;right:1.6em;top:1.55em;bottom:1.55em;border:.12em solid currentColor;border-radius:.35em;overflow:hidden;
  display:grid;grid-template-rows:1fr 1fr;background:#DDEBE6;pointer-events:none}
.cd.red .court{background:#FBE1DA}
.cd .court::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:.1em solid currentColor;opacity:.45}
.cd .court .half{display:grid;place-items:center;overflow:hidden}
.cd .court .half.bot{transform:rotate(180deg)}
.cd .court svg{width:3.5em;height:3.5em;display:block}
.cd .court .cs{position:absolute;font-size:1.05em;line-height:1;font-family:"Segoe UI Symbol","Apple Symbols",sans-serif}
.cd .court .cs.a{left:.25em;top:.2em}.cd .court .cs.b{right:.25em;bottom:.2em;transform:rotate(180deg)}
/* reverso */
.cd.back{background:#C8102E;background-image:repeating-linear-gradient(45deg,rgba(255,253,246,.55) 0 .25em,transparent .25em .9em),repeating-linear-gradient(-45deg,rgba(255,253,246,.3) 0 .25em,transparent .25em .9em);
  box-shadow:inset 0 0 0 .35em #FFFDF6,inset 0 0 0 .5em #C8102E,inset 0 0 0 .6em rgba(255,253,246,.6),0 .08em 0 #E6DDC8,0 .16em 0 #D3C7AC,0 .45em .9em rgba(0,0,0,.32)}
.cd.back::after{content:"EP";position:absolute;left:50%;top:50%;width:2.8em;height:2.8em;margin:-1.4em 0 0 -1.4em;border-radius:50%;background:#FFFDF6;color:#C8102E;
  display:grid;place-items:center;font-family:var(--sign);font-size:1em;box-shadow:0 0 0 .22em #C8102E,0 0 0 .36em #FFFDF6}
.cd.xs.back::after{display:none}
.cd.xs.back{box-shadow:inset 0 0 0 1.4px #FFFDF6}
/* estados */
.cd.playable{box-shadow:inset 0 0 0 .22em #FFFDF7,0 0 0 .3em var(--yellow),0 .16em 0 #D3C7AC,0 .9em 1.4em rgba(0,0,0,.38)}
.cd.win{box-shadow:inset 0 0 0 .22em #FFFDF7,0 0 0 .35em var(--yellow),0 0 1.6em rgba(247,231,51,.55),0 .9em 1.4em rgba(0,0,0,.38)}
.cd.dim{filter:brightness(.62) saturate(.8)}
.cd.slot,.cd.ghost{background-image:none}
.cd.slot::after,.cd.ghost::after{display:none}
.d3 .cd:not(.back):not(.slot):not(.ghost){box-shadow:inset 0 0 0 .22em #FFFDF7,inset 0 0 0 .3em rgba(60,40,10,.08),0 .08em 0 #E6DDC8,0 .16em 0 #D3C7AC,0 .24em 0 #BFB396,0 .8em 1.2em rgba(0,0,0,.38)}
.d3 .cd.playable{box-shadow:inset 0 0 0 .22em #FFFDF7,0 0 0 .3em var(--yellow),0 .16em 0 #D3C7AC,0 .24em 0 #BFB396,0 1em 1.6em rgba(0,0,0,.42)}
.d3 .cd.win{box-shadow:inset 0 0 0 .22em #FFFDF7,0 0 0 .35em var(--yellow),0 0 1.6em rgba(247,231,51,.55),0 .24em 0 #BFB396,0 1em 1.6em rgba(0,0,0,.42)}

/* la mano: se inclina con el mouse y se agranda */
.hand.fan .cd{transition:transform .18s cubic-bezier(.2,.8,.3,1.2),box-shadow .18s,filter .18s}
.hand.fan .cd.playable{cursor:grab;touch-action:none}
.hand.fan .cd.playable:hover,.hand.fan .cd.playable:focus-visible,.d3 .hand.fan .cd.playable:hover{
  transform:translateY(calc(var(--y,0px) - 40px)) rotate(var(--r,0deg)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(1.1);z-index:5}
.hand.pair .cd{transition:transform .2s}
.hand.pair .cd:hover{transform:translateY(-8px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(1.05)}
.hand{perspective:900px}

/* reparto: la carta llega volteada y se da la vuelta */
.hand .cd.enter{animation:deal3 .55s cubic-bezier(.2,.8,.3,1) both}
.hand .cd.enter::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;
  background:#C8102E;background-image:repeating-linear-gradient(45deg,rgba(255,253,246,.55) 0 .25em,transparent .25em .9em);box-shadow:inset 0 0 0 .35em #FFFDF6;
  animation:hideback .55s steps(1) both;animation-delay:inherit}
@keyframes deal3{0%{opacity:0;transform:translate(-120px,-260px) rotate(-30deg) rotateY(180deg) scale(.6)}35%{opacity:1}100%{}}
@keyframes hideback{0%{opacity:1}55%{opacity:0}100%{opacity:0}}
/* lo que cae en la mesa: golpe y sombra */
.felt .cd.enter{animation:slap .42s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes slap{0%{opacity:0;transform:translateY(-70px) rotate(-14deg) scale(1.35);filter:drop-shadow(0 40px 20px rgba(0,0,0,.25))}60%{opacity:1;transform:translateY(4px) rotate(2deg) scale(.97)}100%{}}

/* ---------- dominó de marfil ---------- */
.tile,.d3 .tile{background:linear-gradient(155deg,#FFFEF8 0%,#F5ECD8 55%,#E7DABC 100%);border-radius:9px;
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(120,100,60,.2),0 1px 0 #E3D6B8,0 2px 0 #D8C9A6,0 3px 0 #CBBA92,0 4px 0 #BDAA7E,0 5px 0 #A99468,0 10px 16px rgba(0,0,0,.38)}
.tile .half i{background:radial-gradient(circle at 40% 35%,#45454C,#0E0E12 70%);box-shadow:inset 0 1.5px 1.5px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.95)}
.tile.hz .half:first-child{border-right:2px solid rgba(120,100,60,.32);box-shadow:1px 0 0 #fff}
.tile.v .half:first-child{border-bottom:2px solid rgba(120,100,60,.32);box-shadow:0 1px 0 #fff}
.tile::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 35% 35%,#FFF1B8,#D4A02A 55%,#8A6512);box-shadow:0 1px 1px rgba(0,0,0,.45)}
.tile.sm::after{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
.tile.back,.d3 .tile.back{background:#1B5E46;background-image:radial-gradient(circle at 50% 50%,#2E8B66 0 22%,transparent 23%),repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 3px,transparent 3px 7px)}
.tile.back::after{display:none}
.tile.playable,.d3 .tile.playable{box-shadow:inset 0 1.5px 0 #fff,0 0 0 4px var(--yellow),0 1px 0 #E3D6B8,0 3px 0 #CBBA92,0 5px 0 #A99468,0 14px 22px rgba(0,0,0,.45)}
.tile.last,.d3 .tile.last{box-shadow:inset 0 1.5px 0 #fff,0 0 0 3px var(--yellow),0 0 18px rgba(247,231,51,.55),0 2px 0 #D8C9A6,0 4px 0 #BDAA7E,0 5px 0 #A99468,0 10px 16px rgba(0,0,0,.38)}
.chain .tile.enter{animation:tileland .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes tileland{0%{opacity:0;transform:translateY(-60px) rotate(-25deg) scale(1.3)}65%{opacity:1;transform:translateY(3px) rotate(3deg) scale(.97)}100%{}}

/* tu atril de madera: las fichas paradas, mirando hacia ti */
.hand.tiles{position:relative;flex-wrap:nowrap;gap:10px;padding:18px 24px 20px;perspective:700px;max-width:100%;overflow-x:auto;overflow-y:visible}
.hand.tiles::before{content:"";position:absolute;left:4px;right:4px;bottom:0;height:22px;border-radius:8px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#C48A50,#8A5A2E 60%,#6B4524);box-shadow:inset 0 3px 0 #E0AE73,inset 0 -3px 0 rgba(0,0,0,.25),0 8px 14px rgba(0,0,0,.35)}
.hand.tiles::after{content:"";position:absolute;left:14px;right:14px;bottom:14px;top:6px;border-radius:10px 10px 0 0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(107,69,36,.0),rgba(107,69,36,.55));}
.hand.tiles .tile{position:relative;z-index:1;flex:none;transform-origin:50% 100%;transform:rotateX(16deg);transition:transform .18s cubic-bezier(.2,.8,.3,1.3)}
.hand.tiles .tile.playable{cursor:grab;touch-action:none;transform:translateY(-16px) rotateX(6deg)}
.hand.tiles .tile.playable:hover,.hand.tiles .tile.playable:focus-visible{transform:translateY(-26px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(1.08)}
.hand.tiles .tile.dim{opacity:1;filter:brightness(.7)}
.hand.tiles .tile.enter{animation:tilein .5s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes tilein{0%{opacity:0;transform:translateY(-120px) rotate(30deg)}100%{}}

/* ---------- fichas de casino ---------- */
.chips3 i{border:0;background:conic-gradient(#FFFDF6 0 8%,var(--c,#C62A3A) 8% 25%,#FFFDF6 25% 33%,var(--c,#C62A3A) 33% 50%,#FFFDF6 50% 58%,var(--c,#C62A3A) 58% 75%,#FFFDF6 75% 83%,var(--c,#C62A3A) 83%);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.08),0 2px 0 rgba(0,0,0,.4),0 4px 0 rgba(0,0,0,.25);position:relative}
.chips3 i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--c,#C62A3A);box-shadow:inset 0 0 0 1.5px rgba(255,253,246,.7)}
.chips3 i:nth-child(1){--c:#C62A3A}.chips3 i:nth-child(2){--c:#2C5BD6}.chips3 i:nth-child(3){--c:#1A1A1A}
.chipbet{position:relative;border:0;color:#FFFDF6;text-shadow:0 1px 0 #000;
  background:conic-gradient(#FFFDF6 0 8%,#1F7A4D 8% 25%,#FFFDF6 25% 33%,#1F7A4D 33% 50%,#FFFDF6 50% 58%,#1F7A4D 58% 75%,#FFFDF6 75% 83%,#1F7A4D 83%);
  box-shadow:inset 0 0 0 7px rgba(0,0,0,0),0 3px 0 #0E4A2D,0 6px 0 #0A3A22,0 9px 12px rgba(0,0,0,.4)}
.chipbet::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#1F7A4D;box-shadow:inset 0 0 0 1.5px rgba(255,253,246,.7);z-index:-1}
.chipbet{isolation:isolate}

/* ---------- paños con luz ---------- */
.felt.green,.felt.wine,.felt.purple{background-image:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.14),transparent 62%),radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px),radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.4px);
  background-size:100% 100%,4px 4px,5px 5px;background-position:0 0,0 0,2px 3px}

/* ---------- arrastrar y soltar ---------- */
.dragghost{position:fixed;left:0;top:0;z-index:95;pointer-events:none;margin:0!important;transition:none!important;animation:none!important;
  filter:drop-shadow(0 26px 22px rgba(0,0,0,.45));will-change:transform}
.dragsrc{opacity:.25!important}
.felt.dropok{outline:4px dashed var(--yellow);outline-offset:-10px}
.felt.dropon{outline:4px solid var(--yellow);outline-offset:-10px;box-shadow:inset 0 0 60px rgba(247,231,51,.25)}
.dropside{position:fixed;z-index:94;pointer-events:none;top:0;bottom:0;width:50%;background:rgba(247,231,51,.0);transition:background .12s}
.dropside.on{background:rgba(247,231,51,.10)}
.dropside b{position:absolute;top:40%;left:50%;transform:translateX(-50%);font-family:var(--sign);color:var(--ink);background:var(--yellow);padding:6px 14px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);opacity:0;transition:opacity .12s}
.dropside.on b{opacity:1}

/* ---------- ¡te toca! ---------- */
.turnpop{position:fixed;left:50%;top:38%;z-index:88;pointer-events:none;font-family:var(--sign);font-size:clamp(34px,6vw,64px);color:var(--red);background:var(--cream);
  border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:.15em .6em .05em;animation:turnpop 1.3s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes turnpop{0%{opacity:0;transform:translate(-50%,-40%) rotate(-12deg) scale(.4)}22%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1.05)}75%{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) rotate(-3deg) scale(.9)}}
@media (prefers-reduced-motion:reduce){.turnpop{display:none}}
.cd .ix b.w{font-size:1.25em;letter-spacing:-.16em;margin-left:-.12em}
.hand.tiles{padding-top:38px}
.hand button.cd,.hand button.tile{cursor:grab;touch-action:none}
.hand.fan button.cd:not(.playable):hover{transform:translateY(calc(var(--y,0px) - 26px)) rotate(var(--r,0deg)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(1.06);z-index:5}
.hand.tiles .tile.dim{filter:brightness(.88) saturate(.7)}
.hand.tiles::after{background:linear-gradient(180deg,rgba(138,90,46,.15),rgba(107,69,36,.75));box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}
.mine-area{position:relative}
.mine-area>.mebadge{position:absolute;left:0;top:10px;bottom:auto}
@media (max-width:900px){.mine-area>.mebadge{position:static;align-self:flex-start}}
.turnpop{white-space:nowrap}

/* ---------- comodidades ---------- */
html.nomove,html.nomove body{overflow:hidden}
.modal{overscroll-behavior:contain}
.sheet{overscroll-behavior:contain}
.log{overscroll-behavior:contain;scroll-behavior:smooth}
#codeOut{cursor:pointer}
#codeOut:hover{text-decoration:underline dotted}
.chat{position:relative}
.newmsgs{justify-self:center;margin-top:-6px;height:30px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);font:700 13px var(--body);cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.chatfab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;
  border:3px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--ink);font:700 15px var(--body);box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.chatfab[hidden]{display:none}
.chatfab .ico{width:22px;height:18px;border-radius:6px 6px 6px 2px;background:var(--red);position:relative}
.chatfab .ico::after{content:"";position:absolute;left:5px;right:5px;top:6px;height:2px;background:var(--cream);box-shadow:0 4px 0 var(--cream)}
.chatfab .badge{min-width:22px;height:22px;border-radius:11px;background:var(--red);color:var(--paper);font-size:12px;display:grid;place-items:center;padding:0 5px}
.chatfab .badge[hidden]{display:none}
@media (min-width:861px){.shell.mesa~.chatfab{bottom:20px}}
/* foco visible y objetivos táctiles cómodos */
.hand button.cd:focus-visible,.hand button.tile:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media (pointer:coarse){.btn.sm{min-height:42px}.quick .btn.ghost{min-height:40px}}

/* ---------- inicio que se puede tocar ---------- */
.hero{grid-template-rows:auto auto}
.luck{display:grid;gap:8px;justify-items:start;margin-top:4px}
.luckmsg{margin:0;min-height:1.4em;font-family:var(--hand);font-size:22px;line-height:1.15;color:var(--red)!important;max-width:40ch}
.hero-art .luckcard{position:absolute;left:150px;top:10px;z-index:4;animation:luckin .7s cubic-bezier(.2,.9,.3,1.2) both;box-shadow:0 0 0 .35em var(--yellow),0 1.2em 2em rgba(0,0,0,.35)}
.hero-art .luckcard::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;background:#C8102E;background-image:repeating-linear-gradient(45deg,rgba(255,253,246,.55) 0 .25em,transparent .25em .9em);box-shadow:inset 0 0 0 .35em #FFFDF6;animation:hideback .7s steps(1) both}
@keyframes luckin{0%{opacity:0;transform:translate(-160px,140px) rotate(-40deg) rotateY(180deg) scale(.5)}40%{opacity:1}100%{transform:rotate(-4deg) scale(1.08)}}
.hero-art .cd,.hero-art .tile{transition:translate .25s ease-out}
.crew{grid-column:1/-1;display:grid;gap:6px;margin:6px -10px -14px}
.crew-label{font-family:var(--hand);font-size:19px;color:#7A5A30}
.crew-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.crewm{display:grid;justify-items:center;gap:2px;background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--ink);animation:idle 3.2s ease-in-out infinite}
.crewm small{font-weight:700;font-size:12px;white-space:nowrap}
.crewm .avx{box-shadow:0 0 0 3px var(--ink)}
.crewm:hover small,.crewm:focus-visible small{color:var(--red)}
@keyframes idle{50%{transform:translateY(-3px)}}
@media (max-width:600px){.crewm .avx{--s:50px!important}.crew-row{gap:4px}}
.watcher .face{transition:transform .12s ease-out}
.bubble{position:absolute;z-index:92;pointer-events:none;transform:translate(-50%,-100%);background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:4px 12px;
  font-family:var(--hand);font-size:19px;white-space:nowrap;box-shadow:3px 3px 0 var(--ink);animation:pop .2s ease-out}
.bubble::after{content:"";position:absolute;left:50%;bottom:-11px;width:14px;height:14px;background:var(--paper);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.steps li{padding-bottom:14px}
.steps .step-go{justify-self:start;margin-top:6px}
.steptry{display:flex;align-items:center;gap:10px;margin-top:4px}
.steptry .avx{box-shadow:0 0 0 3px var(--ink)}
.steptry .step-go{margin-top:0}
.btn.pulse{animation:btnpulse 1s ease-out 2}
@keyframes btnpulse{50%{box-shadow:0 0 0 8px rgba(247,231,51,.9),4px 4px 0 var(--ink);transform:scale(1.04)}}
/* juegos que se inclinan */
.catalog{perspective:1100px}
.catalog .gcard{transform:rotateX(var(--gx,0deg)) rotateY(var(--gy,0deg));transition:transform .15s ease-out,box-shadow .15s}
.catalog .gcard:hover{transform:rotateX(var(--gx,0deg)) rotateY(var(--gy,0deg)) translateY(-4px)}
.catalog .gcard:hover .art .cd{translate:0 -4px}
.gcard .art .cd,.gcard .art .tile{transition:translate .2s,transform .2s}
.gcard:hover .art .cd:nth-of-type(1){translate:-6px -3px}
.gcard:hover .art .cd:nth-of-type(3){translate:6px -3px}
/* aparecer al bajar */
.rv{opacity:0;translate:0 26px;transition:opacity .55s ease-out,translate .55s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;translate:0 0}
.splat{position:absolute}

/* ---------- la pizarra escrita con tiza ---------- */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.who-we{position:relative;cursor:pointer;overflow:hidden;
  background-image:radial-gradient(ellipse 160px 60px at 20% 85%,rgba(243,241,232,.06),transparent 70%),radial-gradient(ellipse 220px 80px at 75% 30%,rgba(243,241,232,.05),transparent 70%),
    radial-gradient(ellipse 120px 40px at 60% 90%,rgba(243,241,232,.05),transparent 70%)}
.who-we h3,.who-we p{position:relative;filter:url(#tiza);text-shadow:0 0 1px rgba(243,241,232,.55),0 0 6px rgba(243,241,232,.12)}
.who-we p b,.who-we .firma{text-shadow:0 0 1px rgba(247,231,51,.55),0 0 6px rgba(247,231,51,.15)}
.who-we.tizable .ch{opacity:0}
.who-we .ch.on{opacity:1;animation:tizazo .28s ease-out both}
@keyframes tizazo{0%{opacity:0;filter:blur(2px)}60%{opacity:.85}100%{opacity:1;filter:none}}
/* el palito de tiza que va escribiendo */
.who-we .tiza{position:absolute;left:0;top:0;z-index:3;width:34px;height:9px;border-radius:3px 4px 4px 3px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#FFFFFF,#E9E4D6 60%,#CFC8B6);box-shadow:0 3px 4px rgba(0,0,0,.35);transform:rotate(-38deg);transform-origin:0 50%;transition:translate .05s linear,opacity .3s}
.who-we .tiza::before{content:"";position:absolute;left:-3px;top:1px;width:6px;height:7px;border-radius:50%;background:#F3F1E8}
.who-we.escribiendo .tiza{opacity:1}
/* polvo de tiza en la repisa */
.who-we .polvo{position:absolute;left:10%;right:10%;bottom:0;height:8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(243,241,232,.25),transparent 70%);opacity:0;transition:opacity 2s}
.who-we.escrito .polvo{opacity:1}
/* la firma se subraya al final */
.who-we .firma{position:relative}
.who-we .firma::after{content:"";position:absolute;left:8%;right:-4%;bottom:-2px;height:3px;border-radius:2px;background:var(--yellow);opacity:.75;filter:url(#tiza);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s ease-out .2s}
.who-we.escrito .firma::after,.who-we:not(.tizable) .firma::after{transform:scaleX(1)}

/* ---------- conexión: se cortó / volviendo ---------- */
.linkbar{position:fixed;left:50%;top:10px;translate:-50% 0;z-index:80;display:flex;align-items:center;gap:10px;
  max-width:calc(100vw - 32px);padding:10px 16px;border-radius:12px;background:var(--ink,#1d1d1b);color:var(--cream,#fff8e7);
  font-weight:600;font-size:.95rem;box-shadow:0 6px 0 rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.3);border:2px solid var(--yellow,#F7E733)}
.linkbar[hidden]{display:none}
.linkbar .spin{flex:none;width:16px;height:16px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:var(--yellow,#F7E733);animation:linkspin .8s linear infinite}
@keyframes linkspin{to{rotate:360deg}}
body.relinking #gameRoot{filter:saturate(.6);opacity:.75;transition:opacity .3s}
.people li.away .avx,.people li.away > span:first-child{opacity:.55;filter:grayscale(.7)}
.people li.away .pm > span{color:var(--red,#C8102E);font-weight:600}
@media (prefers-reduced-motion:reduce){.linkbar .spin{animation:none}}
.seat.away .avx{opacity:.5;filter:grayscale(.8)}
.seat .flag.off{background:var(--red,#C8102E);color:#fff}

/* enlaces a privacidad */
.fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.priv-link{margin:0}
.priv-link a{font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:3px}