/* Medayork: ux.css (agente TV). Fichas 3D, cámara, tombos en el tablero, anuncios grandes y opciones del TV.
   Mismo estilo de juego de mesa: contorno negro, colores planos, sombras duras. */
.board{position:relative}

/* ---------- Fichas 3D (solo en el tablero: .toks) ---------- */
.toks .tk{
  --bw:max(1.5px,.32cqi); --e:max(3.5px,.72cqi); --edge:#3A3A3A;
  position:relative;
  background:
    radial-gradient(ellipse 24% 15% at 31% 23%, rgba(255,255,255,.75) 0 92%, rgba(255,255,255,0) 100%),
    var(--c);
  box-shadow:
    inset max(1px,.22cqi) max(1.5px,.32cqi) 0 rgba(255,255,255,.32),
    inset calc(-1 * max(1px,.2cqi)) calc(-1 * max(1.5px,.3cqi)) 0 rgba(0,0,0,.2),
    0 var(--e) 0 calc(-1 * var(--bw)) var(--edge),
    0 var(--e) 0 0 var(--ink),
    0 calc(var(--e) + max(1px,.3cqi)) max(3px,.8cqi) rgba(0,0,0,.4);
  margin-bottom:max(2px,.45cqi);
}
@supports (color:color-mix(in srgb, red 50%, blue)){
  .toks .tk{--edge:color-mix(in srgb, var(--c) 58%, #000)}
}
.toks .tk svg{filter:drop-shadow(0 max(.5px,.12cqi) 0 rgba(0,0,0,.35))}
.toks .tk.hop{animation:uxhop var(--uxhop,170ms) cubic-bezier(.3,.7,.35,1)}
.toks .tk.now{animation:uxnow 1.4s ease-in-out infinite}
.toks .tk.now.hop{animation:uxhop var(--uxhop,170ms) cubic-bezier(.3,.7,.35,1)}
@keyframes uxhop{
  0%{transform:translateY(0) rotate(0) scale(1)}
  45%{transform:translateY(-78%) rotate(-14deg) scale(1.16)}
  75%{transform:translateY(-12%) rotate(5deg) scale(1.04)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes uxnow{0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8%) scale(1.08)}}   /* sin salirse de la casilla */

/* ---------- Cámara: los hijos del tablero se acercan juntos, el marco queda quieto ---------- */
.board.uxcam > *{transform-origin:0 0; transition:transform var(--camdur,520ms) cubic-bezier(.25,.65,.3,1)}
.board.uxcamrel .ctl{pointer-events:none}   /* la cámara se está alejando: los botones se mueven, no se les puede atinar */

/* ---------- Tombos en el tablero ---------- */
.uxtombos{position:absolute; inset:0; z-index:3; pointer-events:none}
.uxtb{position:absolute; left:0; top:0; width:0; height:0; transition:transform calc(var(--uxstep,190ms) * .9) cubic-bezier(.3,.7,.35,1)}
.uxtb.snap{transition:none}
.uxtb-in{
  --d:max(17px,4.3cqi); --bw:max(1.5px,.34cqi); --e:max(3.5px,.75cqi);
  position:absolute; left:calc(var(--d) / -2); top:calc(var(--d) / -2); width:var(--d); height:var(--d);
  box-sizing:border-box; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(ellipse 24% 15% at 31% 23%, rgba(255,255,255,.6) 0 92%, rgba(255,255,255,0) 100%), #1F5E3A;
  border:var(--bw) solid var(--ink);
  box-shadow:
    inset 0 0 0 max(1px,.28cqi) #B8D432,
    0 var(--e) 0 calc(-1 * var(--bw)) #123A23,
    0 var(--e) 0 0 var(--ink),
    0 calc(var(--e) + max(1px,.3cqi)) max(3px,.8cqi) rgba(0,0,0,.45);
}
.uxtb.side .uxtb-in{--d:max(15px,3.8cqi)}   /* en las casillas de los lados (bajitas) va un poco más chiquito */
.uxtb-ico{display:block; width:80%; height:80%}
.uxtb-ico svg{display:block; width:100%; height:100%}
.uxtb-sir{position:absolute; left:50%; top:calc(var(--bw) * -1); transform:translate(-50%,-62%); width:58%; height:30%; display:flex; border:max(1px,.22cqi) solid var(--ink); border-radius:.5cqi .5cqi .2cqi .2cqi; overflow:hidden; background:var(--ink)}
.uxtb-sir i{flex:1; background:#E5242B; animation:uxsir .7s steps(1) infinite}
.uxtb-sir i + i{background:#2F7DE1; animation-delay:.35s}
@keyframes uxsir{50%{opacity:.25}}

/* ---------- Anuncios grandes ---------- */
.uxann{position:fixed; top:0; bottom:0; left:0; width:100vw; z-index:58; pointer-events:none; container-type:inline-size; container-name:uxann}
body:has(#modal:not([hidden])) .uxann{z-index:39}   /* con una ventana abierta (subasta, cajero), el anuncio va detrás */
.uxa{
  position:absolute; left:50%; top:var(--ay,30vh); box-sizing:border-box;
  width:max-content; max-width:min(calc(100cqi - 20px), max(70cqi, 330px));
  display:flex; align-items:center; gap:clamp(8px,1.7cqi,22px);
  padding:clamp(10px,1.7cqi,22px) clamp(14px,2.8cqi,36px) clamp(12px,2cqi,26px) clamp(10px,1.7cqi,22px);
  border:clamp(3px,.5cqi,6px) solid var(--ink); border-radius:clamp(10px,1.4cqi,18px);
  box-shadow:clamp(4px,.8cqi,10px) clamp(4px,.8cqi,10px) 0 var(--ink);
  background:var(--ab); color:var(--af);
  transform:translate(-50%,-50%) rotate(-1.5deg);
  animation:uxin .42s cubic-bezier(.2,.9,.3,1.3) both;
}
.uxa.out{animation:uxout .26s ease-in both}
@keyframes uxin{
  0%{opacity:0; transform:translate(-50%,-50%) rotate(-7deg) scale(.45)}
  60%{opacity:1}
  100%{opacity:1; transform:translate(-50%,-50%) rotate(-1.5deg) scale(1)}
}
@keyframes uxout{to{opacity:0; transform:translate(-50%,-85%) rotate(-1.5deg) scale(.92)}}
.uxa-t{
  display:block; font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:.01em; text-wrap:balance; overflow-wrap:anywhere; min-width:0;
  font-size:clamp(19px,4.4cqi,58px);
}
.uxa.long .uxa-t{font-size:clamp(17px,3.6cqi,48px)}
.uxa.xl .uxa-t{font-size:clamp(15px,2.9cqi,38px); line-height:1.12}
.uxa-ico{
  flex:none; display:grid; place-items:center; box-sizing:border-box;
  width:clamp(38px,7.6cqi,96px); aspect-ratio:1; border-radius:50%;
  background:#FBF8EF; border:clamp(2.5px,.42cqi,5px) solid var(--ink);
  box-shadow:inset 0 calc(-1 * clamp(2px,.4cqi,5px)) 0 rgba(0,0,0,.12);
}
.uxa-ico svg{display:block; width:72%; height:72%}
.uxa-k{
  position:absolute; left:clamp(14px,2.6cqi,34px); top:0; transform:translateY(-60%) rotate(-3deg);
  background:var(--ink); color:var(--ak); white-space:nowrap;
  font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(11px,1.7cqi,22px); line-height:1; padding:.35em .8em .3em; border-radius:.4em;
  border:2px solid var(--ink);
}
.uxa-bar{position:absolute; left:clamp(10px,1.7cqi,22px); right:clamp(10px,1.7cqi,22px); bottom:clamp(4px,.6cqi,8px); height:clamp(3px,.45cqi,6px); border-radius:9px; background:var(--af); opacity:.45; transform-origin:0 50%; animation:uxbar var(--dur,1900ms) linear both}
@keyframes uxbar{from{transform:scaleX(1)} to{transform:scaleX(0)}}
.uxa-sir{position:absolute; right:clamp(16px,3cqi,40px); top:0; transform:translateY(-58%); width:clamp(42px,7cqi,90px); height:clamp(14px,2.2cqi,28px); display:flex; border:clamp(2px,.4cqi,5px) solid var(--ink); border-radius:.6em .6em .2em .2em; overflow:hidden; background:var(--ink)}
.uxa-sir i{flex:1; background:#E5242B; animation:uxsir .5s steps(1) infinite}
.uxa-sir i + i{background:#2F7DE1; animation-delay:.25s}

.uxa.t-good{--ab:#1E7F45; --af:#FFFFFF; --ak:#F6D23C}
.uxa.t-bad{--ab:#C8352B; --af:#FFFFFF; --ak:#F6D23C}
.uxa.t-info{--ab:#F6D23C; --af:#1A1A1A; --ak:#F6D23C}
.uxa.t-police{--ab:#1E2747; --af:#FFFFFF; --ak:#9CC9F0}
.uxa.t-bank{--ab:#1B6FC0; --af:#FFFFFF; --ak:#F6D23C}
.uxa.t-good .uxa-t,.uxa.t-bad .uxa-t,.uxa.t-police .uxa-t,.uxa.t-bank .uxa-t{text-shadow:0 clamp(1.5px,.28cqi,4px) 0 rgba(0,0,0,.35)}
.uxa.t-bank{background:linear-gradient(to top, #F2C230 0 clamp(4px,.7cqi,9px), #1B6FC0 0)}
.uxa.t-bank .uxa-bar{bottom:clamp(8px,1.2cqi,15px)}

/* ---------- Opciones del TV (panel) ---------- */
.uxopts{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; color:var(--wood-muted); margin:0 0 10px}
.uxo{display:inline-flex; align-items:center; gap:2px; flex-wrap:wrap}
.uxl{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12px; margin-right:4px}
.uxb{all:unset; box-sizing:border-box; cursor:pointer; padding:3px 9px; border-radius:6px; border:1.5px solid transparent; color:var(--wood-ink); font-family:var(--ui); font-weight:600; font-size:13px; line-height:1.2}
.uxb:hover{border-color:rgba(203,184,159,.5)}
.uxb[aria-pressed="true"]{border-color:var(--wood-muted); background:rgba(255,255,255,.1); color:var(--white)}
.uxb:focus-visible{outline:3px solid var(--gold); outline-offset:1px}
.uxn{font-size:12px; margin-left:6px; color:var(--wood-muted)}
body.remote .uxopts{display:none}
@media (pointer:coarse){ .uxb{min-height:36px; padding-inline:11px} }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .board.uxcam > *{transition:none!important}
  .uxa,.uxa.out,.uxa-bar,.uxtb-sir i,.uxa-sir i{animation:none!important}
}

/* Casilla con patrulla parada: las fichas se corren hacia adentro para que el tombo no las tape */
.tile.b.uxpol .toks{align-content:flex-start; padding-top:3%}
.tile.t.uxpol .toks{align-content:flex-end; padding-bottom:3%}
.tile.l.uxpol .toks{justify-content:flex-end; padding-right:3%}
.tile.r.uxpol .toks{justify-content:flex-start; padding-left:3%}
[data-tile="0"].uxpol .toks{align-content:flex-start; justify-content:flex-start}
[data-tile="10"].uxpol .toks{align-content:flex-start; justify-content:flex-end}
[data-tile="20"].uxpol .toks{align-content:flex-end; justify-content:flex-end}
[data-tile="30"].uxpol .toks{align-content:flex-end; justify-content:flex-start}