/* --- 4 en línea: tablero-sticker cobalto con agujeros, fichas que caen --- */
.cuatro { --turn: var(--tomato); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }

/* ---- tablero ---- */
.c4-wrap { position: relative; width: 100%; max-width: min(100%, calc((100vh - 70px) * 770 / 812)); justify-self: center; }
.cuatro { -webkit-tap-highlight-color: transparent; }
.c4 { width: 100%; display: block; overflow: visible; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.cuatro button { touch-action: manipulation; min-height: 44px; }

.c4-leg { fill: var(--sun); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.c4-leg-sh, .c4-frame-sh { fill: var(--ink); }
.c4-leg-line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; opacity: .25; }
.c4-back { fill: color-mix(in srgb, var(--cobalt) 16%, var(--sheet)); }
.c4-colhl { fill: var(--sheet); opacity: 0; transition: opacity .15s; }
.c4-colhl.on { opacity: .9; }
.c4-frame { fill: var(--cobalt); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.c4-holesh { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; opacity: .2; }

/* ---- fichas ---- */
.c4-face { fill: var(--c); stroke: var(--ink); stroke-width: 4; }
.c4-ridge { fill: none; stroke: var(--ink); stroke-width: 4; opacity: .22; }
.c4-ridge2 { fill: none; stroke: #fff; stroke-width: 3; opacity: .45; transform: translate(-2px, -2px); }
.c4-shine { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: .85; }
.c4-dot { fill: #fff; opacity: .85; }
.c4-chip-sh { fill: var(--ink); }
.c4-disc { transition: opacity .4s; }
.c4-art { transform-box: fill-box; transform-origin: center; }
.c4.done .c4-disc:not(.win) { opacity: .45; }
.c4-disc.win .c4-art { animation: c4-pulse .9s ease-in-out infinite alternate; }
.c4-disc.win:nth-child(odd) .c4-art { animation-delay: -.45s; }
@keyframes c4-pulse { from { transform: scale(1); } to { transform: scale(1.1) rotate(8deg); } }

/* ---- vista previa / objetivo ---- */
.c4-preview { opacity: 0; pointer-events: none; transition: opacity .15s, transform .18s var(--ease-pop); }
.c4-preview.on { opacity: 1; }
.c4-preview.remote { opacity: .6; }
.c4-preview.full { opacity: .35; }
.c4-bob { animation: c4-bob 1.1s ease-in-out infinite alternate; }
@keyframes c4-bob { to { transform: translateY(-9px) rotate(-6deg); } }
.c4-target { fill: none; stroke: var(--c); stroke-width: 6; stroke-dasharray: 10 8; }
.c4-ghostg { opacity: 0; pointer-events: none; }
.c4-ghostg.on { opacity: 1; }
.c4-ghostg .c4-target { transform-box: fill-box; transform-origin: center; animation: spin 7s linear infinite; }
.c4-hit { fill: transparent; }
.c4.mine .c4-hit { cursor: pointer; }

/* ---- última jugada y línea ganadora ---- */
.c4-last polygon { fill: var(--sheet); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.c4-pop { transform-box: fill-box; transform-origin: center; animation: c4-pop .45s var(--ease-pop) both; }
@keyframes c4-pop { from { transform: scale(0) rotate(-90deg); } }
.c4-line line { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: c4-draw .55s cubic-bezier(.5, 0, .3, 1) forwards; }
.c4-line-ink { stroke: var(--ink); stroke-width: 26; }
.c4-line-in { stroke: var(--sheet); stroke-width: 12; }
@keyframes c4-draw { to { stroke-dashoffset: 0; } }

/* ---- panel ---- */
.c4-side { display: flex; flex-direction: column; gap: 0; }
.c4-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.c4-title h2 { margin: 0; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; color: var(--sun); text-shadow: 3px 4px 0 var(--ink); transform: rotate(-2deg); }
.c4-round { font-family: var(--pixel); font-size: 1rem; background: var(--mint); border: var(--stroke); border-radius: var(--r-sm); box-shadow: 2px 2px 0 var(--ink); padding: 0 10px; transform: rotate(3deg); }
.c4-side h3 { margin-top: 22px; }
.c4-who { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.c4-who li {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px;
  background: var(--sheet); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .3s var(--ease-pop), box-shadow .3s, background .3s;
}
.c4-who li.turn { background: color-mix(in srgb, var(--c) 22%, var(--sheet)); transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 7px 7px 0 var(--ink); }
.c4-who li.won { background: color-mix(in srgb, var(--c) 30%, var(--sheet)); }
.c4-who li.gone { opacity: .55; }
.c4-chip { width: 46px; height: 46px; flex: none; overflow: visible; }
.c4-who li.turn .c4-chip .c4-fall { animation: c4-bob 1.1s ease-in-out infinite alternate; }
.c4-name { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.c4-name b { font-weight: 800; }
.c4-name small { color: var(--ink-soft); font-weight: 600; }
.c4-score {
  font-family: var(--pixel); font-size: 1.9rem; font-weight: 700; line-height: 1; min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--sheet); border: var(--stroke); border-radius: var(--r-sm); box-shadow: 2px 2px 0 var(--ink); padding: 4px 8px;
}
.c4-who li.won .c4-score { animation: c4-pop .6s var(--ease-pop); }
.c4-tape {
  position: absolute; top: -13px; right: 14px; background: #ffe28a; border-left: 2px dashed #0003; border-right: 2px dashed #0003;
  padding: 1px 10px; font-weight: 800; font-size: .8rem; transform: rotate(3deg); box-shadow: 1px 1px 0 #0002;
}
.c4-draws { margin: 10px 0 0; font-weight: 700; font-size: .95rem; }
.c4-draws:empty { display: none; }
.c4-status {
  margin-top: 22px; background: var(--sheet); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 14px 16px; transition: background .3s, transform .3s var(--ease-pop);
}
.c4-status p { margin: 0; font-weight: 800; font-size: 1.1rem; }
.c4-status.mine { background: var(--turn); transform: rotate(1deg); animation: nudge 2.4s ease-in-out infinite; }
.c4-end:empty { display: none; }
.c4-end { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.c4-end .row { flex-wrap: wrap; }
.c4-end .row button { flex: 1; }
.c4-end p { margin: 0; font-weight: 600; font-size: 1rem; }
.c4-hint { font-size: .85rem; font-weight: 600; margin: 14px 2px 0; }
.c4-hint-touch { display: none; }
@media (hover: none) { .c4-hint-key { display: none; } .c4-hint-touch { display: inline; } }
.cuatro.touch .c4-hint-key { display: none; } .cuatro.touch .c4-hint-touch { display: inline; }
.c4-dropbtn { width: 100%; margin-top: 12px; font-family: var(--display); font-weight: 400; font-size: 1.3rem; padding: 12px 18px; }
.c4-dropbtn[hidden] { display: none; }

/* ---- fin de partida ---- */
.c4-over h2 { margin-top: 6px; }
.c4-trophy { display: flex; justify-content: center; margin-top: -4px; }
.c4-trophy .c4-chip { width: 110px; height: 110px; animation: c4-spin-in .8s var(--ease-pop) both; }
.c4-trophy .c4-chip.l { transform: rotate(-12deg); margin-right: -18px; }
.c4-trophy .c4-chip.r { transform: rotate(12deg); animation-delay: .1s; }
@keyframes c4-spin-in { from { transform: scale(0) rotate(-200deg); } }
.c4-final { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 4px; flex-wrap: wrap; }
.c4-final > i { font-family: var(--display); font-style: normal; font-size: 1.8rem; }
.c4-final span { display: flex; align-items: center; gap: 8px; }
.c4-final .c4-chip { width: 30px; height: 30px; }
.c4-final b { font-weight: 800; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c4-final em { font-family: var(--pixel); font-weight: 700; font-style: normal; font-size: 2.2rem; }
.c4-over .row { margin-top: 16px; }
.c4-peek { margin-top: 14px; font-size: .9rem; padding: 7px 14px; }

/* ---- confeti ---- */
.c4-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.c4-confetti i {
  position: absolute; width: var(--w); height: var(--h); background: var(--bg); border: 1.5px solid var(--ink); border-radius: 2px;
  animation: c4-conf var(--t) cubic-bezier(.2, .6, .4, 1) var(--d) both;
}
@keyframes c4-conf {
  0% { transform: translate(0, 0) rotate(0) scale(.4); }
  30% { transform: translate(calc(var(--dx) * .6), var(--up)) rotate(calc(var(--r) * .4)) scale(1); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--fall)) rotate(var(--r)); opacity: 0; }
}
.c4-confetti.rain { position: fixed; }
.c4-confetti.rain i { animation-name: c4-rain; animation-timing-function: linear; }
@keyframes c4-rain {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(var(--dx), var(--up)) rotate(calc(var(--r) * .5)); }
  100% { transform: translate(calc(var(--dx) * -.5), var(--fall)) rotate(var(--r)); }
}

/* tablet en vertical / pantallas angostas: tablero arriba a lo ancho, panel compacto abajo (jugadores | estado) */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1180px) {
  .cuatro { grid-template-columns: 1fr; gap: 18px; }
  .c4-wrap { max-width: min(100%, calc((100dvh - 290px) * 770 / 812)); }
  .c4-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "who status" "draws status" "hint hint"; gap: 12px 18px; align-items: start; }
  .c4-title { grid-area: title; }
  .c4-side h3 { display: none; }
  .c4-who { grid-area: who; gap: 10px; }
  .c4-who li { padding: 6px 12px 6px 8px; }
  .c4-chip { width: 38px; height: 38px; }
  .c4-score { font-size: 1.5rem; }
  .c4-draws { grid-area: draws; margin: 0; }
  .c4-status { grid-area: status; margin-top: 0; }
  .c4-hint { grid-area: hint; margin: 0 2px; }
}
@media (max-width: 560px) {
  .c4-side { grid-template-columns: 1fr; grid-template-areas: "title" "status" "who" "draws" "hint"; }
}
@media (prefers-reduced-motion: reduce) {
  .c4-preview { transition: none; }
}