/* Duditopia · Juegos para dos · Tres en raya gigante (v1). Va después de /cq.css y /dos/dos.css.
   .tr-cl = clásico en la pizarra (marco de madera + repisa con tizas) · .tr-g = gigante en el jardín (seto + 9 parcelas)
   .tr-conf = elegir tablero (dentro del tablero, al empezar). Dibujos pixel: /dos/tres/px.js. */
.tr { position: relative; display: flex; flex-direction: column; align-items: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tr svg { display: block; }
.tr-tab { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.tr-c { position: relative; border: 0; margin: 0; background: transparent; cursor: pointer; padding: 0; border-radius: 8px; display: grid; place-items: center; }
.tr-c > span { display: block; width: 100%; line-height: 0; pointer-events: none; }
.tr-fan { opacity: 0; transition: opacity .12s; }
.tr-c.ok:hover .tr-fan, .tr-c.ok:focus-visible .tr-fan { opacity: .42; }
.tr-c:focus-visible { outline: 3px solid var(--cq-yellow); outline-offset: -3px; z-index: 2; }
.tr.espera .tr-c { cursor: default; }
.tr-raya { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.tr-raya-b { stroke: var(--cq-ink); stroke-width: .13; stroke-linecap: round; opacity: .55; }
.tr-raya-a { stroke: #ffe27a; stroke-width: .07; stroke-linecap: round; }
.tr-raya-a.anima { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tr-traza .5s steps(8) forwards; }
.tr-info { margin: 16px 0 0; min-height: 1.5em; text-align: center; font-weight: 700; font-size: 17px; color: var(--cq-ink2); max-width: 640px; }
.tr-cuenta { display: inline-flex; gap: 8px; margin-left: 6px; vertical-align: middle; }
.tr-cuenta i { font-style: normal; font-weight: 800; font-size: 14.5px; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--cq-ink); background: var(--j-l); color: var(--cq-ink); }

/* ---------- clásico: pizarra ---------- */
.tr-cl { --t: clamp(240px, min(440px, calc(100vw - 80px), calc(100vh - 360px)), 440px); }
.tr-marco-c { position: relative; padding: 14px; border: 3px solid var(--cq-ink); border-radius: 16px; background: #8a5a30;
              box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #b4793f, inset 0 -6px 0 #6e4524; }
.tr-pizarra { position: relative; width: var(--t); height: var(--t); border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 3px #1f3f35, inset 0 6px 14px rgba(0, 0, 0, .35); background: #2e5a4c; }
.tr-fondo, .tr-rejilla { position: absolute; inset: 0; line-height: 0; }
.tr-fondo svg, .tr-rejilla svg { width: 100%; height: 100%; }
.tr-cl .tr-c { padding: 16%; }
.tr-cl .tr-c.ultima { background: radial-gradient(circle, rgba(255, 238, 170, .16) 30%, transparent 70%); }
.tr-cl .tr-c.ok:hover { background: rgba(255, 255, 255, .06); }
.tr-repisa { width: calc(var(--t) + 34px); margin-top: -2px; line-height: 0; filter: drop-shadow(3px 3px 0 var(--cq-ink)); }
.tr-repisa svg { width: 100%; height: auto; }
.tr-dibuja { animation: tr-dibuja .36s steps(6) both; }
.tr-f.gana { animation: tr-gana .55s steps(2) infinite; }

/* ---------- gigante: jardín ---------- */
.tr-g { --t: clamp(300px, min(640px, calc(100vw - 48px), calc(100vh - 330px)), 640px); }
.tr-marco-g { position: relative; padding: 12px; border: 3px solid var(--cq-ink); border-radius: 18px; background: #3d8a3a;
              background-image: radial-gradient(circle at 20% 30%, #4f9c47 0 3px, transparent 4px), radial-gradient(circle at 70% 80%, #2f7431 0 3px, transparent 4px);
              background-size: 22px 22px, 26px 26px;
              box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #62b04a, inset 0 -6px 0 #2a6a2f; }
.tr-g .tr-tab { position: relative; inset: auto; width: var(--t); height: var(--t); gap: 7px; padding: 7px; border-radius: 8px; border: 3px solid #5b4632;
                background-color: #a07a52;
                background-image: radial-gradient(circle at 30% 40%, #c0996b 0 1.5px, transparent 2px), radial-gradient(circle at 70% 60%, #7f5f3e 0 1.5px, transparent 2px);
                background-size: 13px 11px, 17px 15px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .18); }
.tr-jardin { position: relative; border-radius: 3px; box-shadow: 0 0 0 2px #2a4f22, 2px 2px 0 2px rgba(31, 34, 64, .55); transition: filter .2s, box-shadow .2s; }
.tr-cesped { position: absolute; inset: 0; line-height: 0; }
.tr-cesped svg { width: 100%; height: 100%; }
.tr-cs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.tr-g .tr-c { padding: 13%; border-radius: 4px; }
.tr-g .tr-c.ultima { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); }
.tr-g .tr-c.ok:hover { background: rgba(255, 255, 255, .2); }
.tr-gran { position: absolute; inset: 6%; display: grid; place-items: center; pointer-events: none; line-height: 0; z-index: 2; }
.tr-gran svg { width: 100%; height: auto; filter: drop-shadow(3px 3px 0 rgba(31, 34, 64, .55)); }
.tr-tablas { font: 800 clamp(40px, 9vw, 72px)/1 var(--cq-head); color: #fff; text-shadow: 3px 3px 0 var(--cq-ink); }
.tr-jardin.ganado .tr-cs, .tr-jardin.ganado .tr-cesped { opacity: .32; filter: saturate(.5); }
.tr-jardin.g1 { background: var(--cq-coral-l); } .tr-jardin.g2 { background: var(--cq-blue-l); } .tr-jardin.lleno { background: #ece6d8; }
.tr-jardin.g1 { box-shadow: 0 0 0 3px var(--cq-coral-d), 2px 2px 0 3px rgba(31, 34, 64, .55); }
.tr-jardin.g2 { box-shadow: 0 0 0 3px var(--cq-blue-d), 2px 2px 0 3px rgba(31, 34, 64, .55); }
.tr-jardin.cerrado { filter: brightness(.86) saturate(.72); }
.tr-jardin.abierto { box-shadow: 0 0 0 4px var(--cq-yellow), 0 0 0 7px var(--cq-ink); z-index: 1; animation: tr-brilla 1.4s steps(2) infinite; }
.tr-jardin.gana { box-shadow: 0 0 0 4px var(--cq-yellow), 0 0 0 7px var(--cq-ink); z-index: 2; }
.tr-jardin.gana .tr-gran { animation: tr-gana .55s steps(2) infinite; }
.tr-seto { position: absolute; top: -24px; line-height: 0; z-index: 4; pointer-events: none; }
.tr-seto-1 { left: -22px; } .tr-seto-2 { right: -22px; transform: scaleX(-1); }
.tr-regadera { position: absolute; right: -86px; bottom: 60px; line-height: 0; }
.tr-pop { animation: tr-pop .34s cubic-bezier(.3, 1.6, .5, 1) both; }
.tr-sello { animation: tr-sello .42s steps(5) both; }
.tr-sacude { animation: tr-sacude .3s steps(4); }

/* ---------- elegir tablero ---------- */
.tr-confcaja { width: 100%; }
.tr-conf { width: min(760px, 100%); margin: 0 auto; background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--cq-r-lg); box-shadow: var(--cq-sh-lg); padding: 26px; text-align: center; }
.tr-conf-t { margin: 0; }
.tr-conf-p { color: var(--cq-ink2); font-size: 18px; margin: 8px 0 18px; }
.tr-conf-op { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tr-op { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px 16px; cursor: pointer; font: inherit; color: var(--cq-ink);
         background: var(--cq-bg); border: 3px solid var(--cq-ink); border-radius: 18px; box-shadow: var(--cq-sh); transition: transform .14s, box-shadow .14s, background .14s; }
.tr-op:hover, .tr-op:focus-visible { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--cq-ink); background: var(--cq-yellow-l); }
.tr-op:focus-visible { outline: 3px solid var(--cq-blue); outline-offset: 3px; }
.tr-op:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--cq-ink); }
.tr-op-arte { line-height: 0; padding: 8px; border-radius: 16px; border: 3px solid var(--cq-ink); background: var(--cq-mint-l); margin-bottom: 6px; }
.tr-op-c .tr-op-arte { background: #d9eadf; }
.tr-op b { font: 800 24px/1.1 var(--cq-head); }
.tr-op small { font-size: 15.5px; color: var(--cq-ink2); line-height: 1.35; }

/* ---------- reglas ---------- */
.tr-reglas h3 { font: 800 19px/1.15 var(--cq-head); margin: 0 0 4px; color: var(--cq-ink); }
.tr-reglas p { margin: 0 0 8px; }
.tr-r { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; }
.tr-r .cq-px { flex: none; line-height: 0; border: 3px solid var(--cq-ink); border-radius: 12px; overflow: hidden; background: var(--cq-bg); box-shadow: 3px 3px 0 var(--cq-ink); }

/* ---------- animaciones ---------- */
@keyframes tr-dibuja { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tr-pop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tr-sello { 0% { transform: scale(1.9); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: none; } }
@keyframes tr-gana { 50% { transform: scale(1.1); filter: brightness(1.25); } }
@keyframes tr-traza { to { stroke-dashoffset: 0; } }
@keyframes tr-brilla { 50% { box-shadow: 0 0 0 4px #fff3a6, 0 0 0 7px var(--cq-ink); } }
@keyframes tr-sacude { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .tr-cl { --t: clamp(220px, min(calc(100vw - 58px), calc(100vh - 330px)), 420px); }
  .tr-marco-c { padding: 9px; border-radius: 12px; box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #b4793f, inset 0 -4px 0 #6e4524; }
  .tr-repisa { width: calc(var(--t) + 24px); }
  .tr-g { --t: clamp(280px, calc(100vw - 40px), 520px); }
  .tr-marco-g { padding: 5px; border-radius: 12px; box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #62b04a, inset 0 -4px 0 #2a6a2f; }
  .tr-g .tr-tab { gap: 5px; padding: 4px; border-width: 2px; }
  .tr-g .tr-c { padding: 10%; }
  .tr-seto { top: -18px; } .tr-seto svg { width: 34px; height: 34px; }
  .tr-seto-1 { left: -10px; } .tr-seto-2 { right: -10px; }
  .tr-regadera { display: none; }
  .tr-info { font-size: 15.5px; margin-top: 12px; }
  .tr-conf { padding: 18px 14px; }
  .tr-conf-op { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tr-op { display: grid; grid-template-columns: auto minmax(0, 1fr); text-align: left; gap: 2px 14px; padding: 12px; }
  .tr-op-arte { grid-row: 1 / span 2; margin: 0; padding: 5px; }
  .tr-op-arte svg { width: 76px; height: 76px; }
  .tr-op b { align-self: end; } .tr-op small { align-self: start; }
  .tr-r .cq-px svg { width: 64px; height: 64px; }
}
@media (max-width: 1100px) { .tr-regadera { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .tr-dibuja, .tr-pop, .tr-sello, .tr-sacude, .tr-f.gana, .tr-jardin.abierto, .tr-jardin.gana .tr-gran, .tr-raya-a.anima { animation: none !important; }
  .tr-raya-a.anima { stroke-dashoffset: 0; }
}