/* ====== Pintar y adivinar — "hoja pegada en el cuaderno de bocetos" ======
   Todo bajo .pintar. Pisa la base de style.css (sección pintar). Ver DESIGN.md. */
.pintar {
  --tape: color-mix(in srgb, var(--sun) 55%, transparent);
  --tile: 40px;
  position: relative;
}
.pintar svg { display: block; }

/* ---------- barra de arriba ---------- */
.pintar .pt-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  background: var(--sheet); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 10px 14px 10px 16px; margin-bottom: 18px; min-height: 84px;
}
.pt-turn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 1.15rem; white-space: nowrap;
  background: var(--bubble); border: var(--stroke); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  padding: 5px 14px 5px 8px; transform: rotate(-2deg);
}
.pt-turn svg { width: 26px; height: 26px; }
.pt-turn span:empty::before { content: '…'; }

.pt-word { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.pt-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); }
.pt-alt { font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.pt-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 100%; }
.pt-tiles.sm { --tile: 32px; }
.pt-tiles.xs { --tile: 25px; gap: 5px 10px; }
.pt-grp { display: flex; gap: calc(var(--tile) * .12); }
.pt-tiles i {
  font-style: normal; font-family: var(--pixel); font-size: calc(var(--tile) * .66); line-height: 1; text-transform: uppercase;
  width: var(--tile); height: calc(var(--tile) * 1.12); display: grid; place-items: center;
  background: var(--sheet); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 3px 0 var(--ink);
}
.pt-tiles i.blank { background: var(--paper-2); position: relative; }
.pt-tiles i.blank::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 20%; height: 3px; border-radius: 2px; background: var(--ink); }
.pt-tiles i:nth-child(odd) { rotate: -2deg; }
.pt-tiles i:nth-child(3n) { rotate: 2deg; }
.pt-tiles.mine i { background: var(--sun); }
.pt-tiles.reveal i { background: var(--mint); animation: pt-tile .5s var(--ease-pop) both; animation-delay: calc(var(--i) * 55ms); }
.pt-word .pt-tiles:not(.reveal) i { animation: pt-drop .35s var(--ease-pop) both; animation-delay: calc(var(--i) * 25ms); }
@keyframes pt-tile { 0% { transform: scale(.2) rotate(-30deg); background: var(--paper-2); } 60% { transform: scale(1.25) rotate(6deg); } }
@keyframes pt-drop { from { opacity: 0; transform: translateY(-12px); } }

/* reloj: anillo que se vacía */
.pt-clock { position: relative; width: 66px; height: 66px; flex: none; justify-self: end; opacity: .35; }
.pt-clock.on { opacity: 1; }
.pt-clock svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(3px 3px 0 var(--ink)); }
.pt-knob { fill: var(--tomato); stroke: var(--ink); stroke-width: 3; }
.pt-face { fill: var(--sheet); stroke: var(--ink); stroke-width: 3; }
.pt-ring {
  fill: none; stroke: var(--mint); stroke-width: 10; stroke-dasharray: 100; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: 32px 35px; transition: stroke-dashoffset .3s linear, stroke .3s;
}
.pt-clock b {
  position: absolute; left: 0; right: 0; top: 13px; bottom: 0; display: grid; place-items: center;
  font-family: var(--pixel); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pt-clock.hurry .pt-ring { stroke: var(--tomato); }
.pt-clock.hurry .pt-face { fill: color-mix(in srgb, var(--tomato) 18%, var(--sheet)); }
.pt-clock.hurry { animation: pt-wiggle .5s ease-in-out infinite; }
.pt-clock.hurry b { color: var(--tomato); }
@keyframes pt-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 9deg; } }

/* ---------- tablero ---------- */
.pt-board { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 27vw, 320px); gap: 22px; align-items: start; }
.pt-stage { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; gap: 22px; }
.pintar.drawing .pt-stage { grid-template-columns: auto minmax(0, 1fr); }

/* cuaderno de bocetos con espiral arriba */
.pt-book {
  position: relative; width: 100%; max-width: max(420px, calc((100vh - 268px) * 4 / 3 + 58px));
  background: var(--paper-2); border: var(--stroke); border-radius: 10px 10px var(--r) var(--r); box-shadow: var(--shadow-lg);
  padding: 34px 26px 24px;
}
.pt-book::before { /* agujeros + anillos de la espiral */
  content: ''; position: absolute; left: 22px; right: 22px; top: -14px; height: 34px;
  background:
    radial-gradient(circle at 50% 24px, var(--ink) 0 4px, transparent 4.5px) 0 0 / 26px 34px repeat-x,
    linear-gradient(90deg, transparent 10px, var(--ink) 10px 16px, transparent 16px) 0 0 / 26px 26px repeat-x;
  border-radius: 4px;
}
.pt-book::after { /* página de atrás asomando */
  content: ''; position: absolute; inset: 8px -9px -9px 8px; z-index: -1;
  background: var(--sheet); border: var(--stroke); border-radius: 10px 10px var(--r) var(--r); rotate: 1.2deg;
}

.pt-sheet { position: relative; border: var(--stroke); box-shadow: 4px 5px 0 var(--ink); background: #fff; }
.pintar .pt-sheet canvas {
  border: 0; box-shadow: none; border-radius: 0; background: #fff; width: 100%; aspect-ratio: 4 / 3; display: block; touch-action: none;
}
.pintar.drawing .pt-sheet canvas { cursor: none; }
.pt-tape {
  position: absolute; width: 92px; height: 28px; background: var(--tape); pointer-events: none; z-index: 2;
  border-left: 2px dashed #1f1a1726; border-right: 2px dashed #1f1a1726; box-shadow: 0 1px 0 #1f1a1714;
}
.pt-tape.a { top: -12px; left: -30px; rotate: -38deg; }
.pt-tape.b { top: -12px; right: -30px; rotate: 36deg; background: color-mix(in srgb, var(--bubble) 55%, transparent); }
.pt-cursor {
  position: absolute; z-index: 3; pointer-events: none; border-radius: 50%; translate: -50% -50%;
  background: var(--c); border: 2px solid var(--ink); box-shadow: 0 0 0 2px #fff;
}
.pt-cursor[hidden] { display: none; }

/* cartel de turno */
.pt-banner {
  position: absolute; z-index: 5; left: 50%; top: 42%; translate: -50% -50%; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  background: var(--sun); color: var(--ink); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 14px 30px 12px; rotate: -4deg; white-space: nowrap;
  animation: pt-banner 2.6s var(--ease-pop) both;
}
.pt-banner b { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.05; }
.pt-banner small { font-family: var(--pixel); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .08em; }
.pt-banner small:empty { display: none; }
.pt-banner.hot { background: var(--tomato); color: #fff; }
.pt-banner.hot small { background: var(--sheet); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 8px; padding: 0 10px; margin-top: 6px; }
.pt-banner::before, .pt-banner::after { /* cinta */
  content: ''; position: absolute; top: -14px; width: 60px; height: 24px; background: var(--tape);
  border-left: 2px dashed #1f1a1726; border-right: 2px dashed #1f1a1726;
}
.pt-banner::before { left: -18px; rotate: -30deg; } .pt-banner::after { right: -18px; rotate: 24deg; }
@keyframes pt-banner {
  0% { opacity: 0; transform: translateX(-140%) rotate(-18deg); }
  18% { opacity: 1; transform: translateX(0) rotate(0deg); }
  80% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateX(0) rotate(4deg) scale(.6); }
}

/* ---------- caja de herramientas (sticker) ---------- */
.pt-tools {
  display: none; position: relative; order: -1; width: 152px; margin-top: 46px;
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 14px;
  background: var(--sheet); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 16px 10px 14px; rotate: -1.2deg;
}
.pt-tools::before { /* asa de la caja */
  content: ''; position: absolute; left: 50%; top: -24px; width: 62px; height: 24px; translate: -50% 0;
  border: var(--stroke); border-bottom: 0; border-radius: 16px 16px 0 0; background: transparent;
  box-shadow: inset 0 4px 0 var(--bubble);
}
.pintar.drawing .pt-tools { display: grid; animation: pt-up .45s var(--ease-pop) both; }
@keyframes pt-up { from { opacity: 0; transform: translateY(24px) rotate(-3deg); } }
.pt-now { width: 74px; height: 74px; display: grid; place-items: center; }
.pt-blob {
  width: 66px; height: 66px; display: grid; place-items: center; background: var(--c, #000);
  border: var(--stroke); box-shadow: 3px 3px 0 var(--ink); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  transition: background .2s, border-radius .4s var(--ease-pop); rotate: -6deg;
}
.pt-blob i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--sheet); border: 2px solid var(--ink); transition: width .2s var(--ease-pop), height .2s var(--ease-pop); }
.pt-now.erasing .pt-blob { background: var(--sheet) repeating-linear-gradient(45deg, transparent 0 6px, #1f1a1712 6px 12px); }
.pt-now.erasing .pt-blob i { border-style: dashed; }

.pt-pots { display: grid; grid-template-columns: repeat(3, 40px); gap: 10px 4px; align-items: end; }
.pintar .pt-pot {
  width: 40px; height: 46px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  filter: drop-shadow(2px 2px 0 var(--ink)); transition: transform .18s var(--ease-pop), filter .18s;
}
.pt-pot svg { width: 100%; height: 100%; }
@media (hover: hover) { .pintar .pt-pot:hover:not(:disabled) { box-shadow: none; transform: translateY(-4px) rotate(-4deg); } }
.pintar .pt-pot:active:not(:disabled) { box-shadow: none; transform: translateY(2px); }
.pintar .pt-pot.sel { transform: translateY(-8px) rotate(-8deg) scale(1.12); filter: drop-shadow(3px 4px 0 var(--ink)); }
.pt-pot.sel::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--ink); rotate: 8deg;
}
.pt-pot { position: relative; }

.pt-row { display: flex; align-items: center; justify-content: center; gap: 12px 10px; flex-wrap: wrap; }
.pt-sizes { display: flex; background: var(--paper-2); border: var(--stroke); border-radius: 999px; padding: 3px; gap: 3px; box-shadow: 2px 2px 0 var(--ink); }
.pintar .pt-size {
  width: 38px; height: 34px; padding: 0; border-radius: 999px; border: 2px solid transparent; background: transparent; box-shadow: none;
}
@media (hover: hover) { .pintar .pt-size:hover:not(:disabled) { box-shadow: none; transform: none; background: var(--sheet); } }
.pintar .pt-size:active:not(:disabled) { box-shadow: none; transform: scale(.94); }
.pintar .pt-size.sel { background: var(--sun); border-color: var(--ink); }
.pt-size i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink); display: block; }

.pintar .pt-eraser, .pintar .pt-trash { width: 48px; height: 44px; padding: 4px; background: var(--sheet); }
.pintar .pt-trash { background: var(--tomato); }
.pt-eraser svg, .pt-trash svg { width: 32px; height: 32px; }
.pintar .pt-eraser.sel { background: var(--bubble); transform: translate(2px, 2px) rotate(-6deg); box-shadow: 2px 2px 0 var(--ink); }
@media (hover: hover) { .pintar .pt-trash:hover:not(:disabled) svg { animation: pt-wiggle .4s ease-in-out; } }

/* ---------- panel lateral ---------- */
.pintar .pt-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.pt-scores {
  position: relative; background: var(--sheet); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 14px 14px 10px; rotate: -.8deg;
}
.pt-scores h3 {
  position: absolute; top: -15px; left: 14px; margin: 0; color: var(--ink); background: var(--sun);
  border: 2.5px solid var(--ink); border-radius: 8px; padding: 2px 10px; rotate: -3deg; font-size: .72rem; box-shadow: 2px 2px 0 var(--ink);
}
.pt-scores ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-scores li {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm);
  font-weight: 700; border: 2px solid transparent;
}
.pt-scores li.me { background: var(--paper); }
.pt-scores li.artist { background: color-mix(in srgb, var(--sun) 35%, var(--sheet)); border-color: var(--ink); }
.pt-rank { font-family: var(--pixel); font-size: .9rem; color: var(--ink-soft); width: 14px; }
.pt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-scores b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.pt-pen { width: 24px; height: 24px; animation: pt-scribble 1.2s ease-in-out infinite; }
.pt-pen svg { width: 100%; height: 100%; }
@keyframes pt-scribble { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(2px, -2px) rotate(-8deg); } 50% { transform: translate(-1px, 1px) rotate(4deg); } }
.pt-scores li.bump b { display: inline-block; animation: pt-bump .6s var(--ease-pop); }
@keyframes pt-bump { 40% { transform: scale(1.5) rotate(-8deg); color: var(--tomato); } }
.pt-plus {
  position: absolute; translate: -100% -50%; font-family: var(--display); white-space: nowrap; font-size: 1.1rem; color: var(--ink);
  background: var(--mint); border: 2.5px solid var(--ink); border-radius: 999px; padding: 0 8px; box-shadow: 2px 2px 0 var(--ink);
  pointer-events: none; animation: pt-plus 1.4s var(--ease-pop) both;
}
@keyframes pt-plus {
  0% { opacity: 0; transform: translateY(10px) scale(.3) rotate(-20deg); }
  25% { opacity: 1; transform: translateY(-14px) scale(1.15) rotate(6deg); }
  75% { opacity: 1; transform: translateY(-18px) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translateY(-34px) scale(.9); }
}

.pt-dot {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--ink);
  display: grid; place-items: center; font-family: var(--display); font-size: .8rem; line-height: 1; color: var(--ink);
}

/* chat */
.pt-log {
  list-style: none; margin: 0; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
  flex: 1; overflow-y: auto; min-height: 200px; max-height: calc(100vh - 470px);
  background: var(--sheet) radial-gradient(circle at 1px 1px, #1f1a1712 1px, transparent 0) 0 0 / 16px 16px;
  border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow); font-size: .95rem; scrollbar-width: thin;
}
.pt-log li { animation: pt-msg .35s var(--ease-pop) both; overflow-wrap: anywhere; }
@keyframes pt-msg { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.pt-log li.sys {
  align-self: center; text-align: center; font-size: .8rem; font-weight: 700; color: var(--ink-soft);
  background: var(--paper-2); border: 2px dashed #1f1a1740; border-radius: 999px; padding: 2px 12px;
}
.pt-log li.chat { display: flex; align-items: flex-end; gap: 6px; max-width: 92%; }
.pt-log li.chat p {
  margin: 0; position: relative; background: var(--sheet); border: 2.5px solid var(--ink); border-radius: 14px 14px 14px 4px;
  padding: 4px 10px 6px; box-shadow: 2px 2px 0 var(--ink); line-height: 1.3;
}
.pt-log li.chat p b { display: block; font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
.pt-log li.chat .pt-dot { width: 24px; height: 24px; font-size: .7rem; }
.pt-log li.chat.me { align-self: flex-end; flex-direction: row-reverse; }
.pt-log li.chat.me p { background: var(--cobalt); color: #fff; border-radius: 14px 14px 4px 14px; }
.pt-log li.chat.me p b { color: #ffffffcc; }
.pt-log li.ok {
  display: flex; align-items: center; gap: 8px; align-self: stretch; font-weight: 800;
  background: var(--mint); border: 2.5px solid var(--ink); border-radius: 14px; padding: 6px 10px; box-shadow: 3px 3px 0 var(--ink);
  rotate: -1deg; animation: pt-yay .6s var(--ease-pop) both;
}
@keyframes pt-yay { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.08) rotate(3deg); } }

.pintar .pt-guess { display: flex; gap: 8px; }
.pintar .pt-guess input { flex: 1; box-shadow: var(--shadow); }
.pintar .pt-guess input:disabled { background: var(--paper-2); box-shadow: 2px 2px 0 var(--ink); color: var(--ink-soft); }
.pintar .pt-guess button { padding: 0; width: 50px; flex: none; }
.pt-guess button svg { width: 26px; height: 26px; }

/* ---------- confeti ---------- */
.pt-fx { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.pt-fx i {
  position: absolute; width: var(--w); height: calc(var(--w) * .6); background: var(--c); border: 1.5px solid var(--ink); border-radius: 2px;
  animation: pt-confetti 1.3s cubic-bezier(.2, .7, .4, 1) both;
}
.pt-fx i:nth-child(3n) { border-radius: 50%; height: var(--w); }
@keyframes pt-confetti {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 260px)) rotate(var(--r)) scale(1); opacity: 0; }
}

/* ---------- fin: podio ---------- */
.pintar .pt-end { max-width: 560px; }
.pt-end h2 { margin-bottom: 18px; }
.pt-podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 34px 0 18px; }
.pt-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 132px; animation: pt-rise .6s var(--ease-pop) both; animation-delay: calc(var(--i) * 140ms + 150ms); }
@keyframes pt-rise { from { opacity: 0; transform: translateY(50px); } }
.pt-pod .avatar { width: 54px; height: 54px; font-size: 1.4rem; }
.pt-pod.p1 .avatar { width: 68px; height: 68px; font-size: 1.8rem; }
.pt-podname { font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-crown { position: absolute; top: -30px; width: 46px; rotate: -10deg; animation: pt-crown 2s ease-in-out infinite; }
@keyframes pt-crown { 50% { transform: translateY(-5px) rotate(8deg); } }
.pt-step {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 8px;
  background: var(--c); border: var(--stroke); border-radius: 12px 12px 4px 4px; box-shadow: var(--shadow);
}
.pt-step span { font-family: var(--display); font-size: 2.4rem; line-height: 1; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; color: var(--sheet); text-shadow: 3px 3px 0 var(--ink); }
.pt-step em { font-style: normal; font-family: var(--pixel); font-size: 1.15rem; background: var(--sheet); border: 2px solid var(--ink); border-radius: 8px; padding: 0 8px; margin-top: 6px; }
.pt-pod.p1 .pt-step { height: 140px; rotate: 0deg; }
.pt-pod.p2 .pt-step { height: 102px; rotate: -2deg; }
.pt-pod.p3 .pt-step, .pt-pod.p4 .pt-step { height: 78px; rotate: 2deg; }
.pintar .pt-rest { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0 auto 16px; width: min(100%, 320px); font-size: 1rem; }
.pt-rest li { display: flex; align-items: center; gap: 8px; }
.pt-rest li b { margin-left: auto; font-family: var(--pixel); }
.pt-end .row { justify-content: center; margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .pintar .pt-bar { gap: 12px; }
  .pt-turn { font-size: 1rem; }
  .pintar { --tile: 34px; }
  .pt-tiles.sm { --tile: 28px; }
  .pt-tiles.xs { --tile: 22px; }
  .pt-book { padding: 30px 18px 18px; max-width: max(400px, calc((100vh - 390px) * 4 / 3 + 42px)); }
  .pintar.drawing .pt-stage { grid-template-columns: minmax(0, 1fr); }
  .pt-tools { order: 0; width: 100%; max-width: max(400px, calc((100vh - 390px) * 4 / 3 + 42px)); margin-top: 8px; rotate: .4deg;
    grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; gap: 8px 14px; padding: 10px 14px; }
  .pt-now { grid-row: span 2; }
  .pt-pots { display: flex; flex-wrap: wrap; gap: 4px 2px; }
  .pintar .pt-pot { width: 31px; height: 36px; }
  .pt-now, .pt-blob { width: 58px; height: 58px; }
  .pt-row { justify-content: flex-start; }
  .pintar .pt-trash { margin-left: auto; }
}
@media (max-width: 760px) {
  .pt-board { grid-template-columns: 1fr; }
  .pt-log { max-height: 40vh; }
}
@media (prefers-reduced-motion: reduce) {
  .pintar *, .pintar *::before, .pintar *::after { animation: none !important; transition: none !important; }
}

/* ---------- tablet / táctil ---------- */
/* la hoja no se selecciona ni abre menú al mantener el dedo; el canvas nunca scrollea la página */
.pintar .pt-book, .pintar .pt-sheet, .pintar .pt-sheet canvas, .pintar .pt-tools { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pintar .pt-sheet canvas { touch-action: none; overscroll-behavior: contain; }
/* el cuaderno se mide con la altura chica (svh): no salta cuando aparece la barra o el teclado */
.pt-book { max-width: max(420px, calc((100svh - 290px) * 4 / 3 + 58px)); }
@media (pointer: coarse) {
  .pintar .pt-cursor { display: none; }
  .pt-tools { width: 172px; }
  .pt-pots { grid-template-columns: repeat(3, 44px); gap: 10px 6px; }
  .pintar .pt-pot { width: 44px; height: 50px; }
  .pintar .pt-size { width: 44px; height: 44px; }
  .pintar .pt-eraser, .pintar .pt-trash { width: 52px; height: 48px; }
  .pintar .pt-guess button { width: 56px; min-height: 48px; }
  .pintar .pt-guess input { min-height: 48px; }
}
@media (max-width: 1000px) {
  .pt-book, .pt-tools { max-width: max(400px, calc((100svh - 410px) * 4 / 3 + 42px)); }
  .pt-pots { display: flex; flex-wrap: wrap; }
}
@media (max-width: 1000px) and (pointer: coarse) {
  .pt-tools { width: 100%; }
  .pintar .pt-pot { width: 40px; height: 46px; }
}
/* vertical (768×1024): hoja a todo el ancho, herramientas abajo, y abajo de todo puntos | chat con la respuesta primero */
@media (max-width: 860px) {
  .pt-board { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pt-book, .pt-tools { max-width: none; }
  .pintar .pt-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
  .pintar .pt-guess { grid-column: 1 / -1; order: -1; }
  .pt-log { max-height: 220px; min-height: 140px; }
  .pt-scores { margin-top: 10px; }
}