/* DeTown. · juegos y tablero. Tono sobrio, para adultos: tipografia de la marca, lineas finas, latón como acento y colores apagados. */
.gamebox, .board, .howto, .playlist, .pgame, .nm-form {
  --ok: #37704f; --mid: #a8863a; --no: #86404a; --ink-on: #f7f3ea;
  --hair: var(--line, rgba(255, 255, 255, 0.14));
  --card: var(--soft, rgba(255, 255, 255, 0.06));
}
.ptag { margin: 2px 0 18px; color: var(--mute, #a8a39a); font-size: 1.02rem; }
.gamebox .ptag { text-align: center; }
.play-hint { color: var(--mute, #9aa); margin: 0 0 12px; text-align: center; }
.play-msg { min-height: 1.5em; margin: 12px 0; font-weight: 600; text-align: center; }
.play-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 8px 0 4px; }
.gamebox { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.note { text-align: center; color: var(--mute, #9aa); font-size: 0.85rem; }

/* portada: un juego debajo de otro, cada uno en horizontal (imagen a la izquierda, texto a la derecha) */
.playlist { display: flex; flex-direction: column; gap: 16px; width: 100%; margin: 18px 0 8px; }
.pgame { border: 1px solid var(--hair); border-radius: 20px; background: var(--card); overflow: hidden; display: flex; flex-direction: row; align-items: stretch; }
.pimg { display: block; line-height: 0; overflow: hidden; flex: 0 0 46%; max-width: 520px; position: relative; }
.pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.pgame:hover .pimg img { transform: scale(1.03); }
.pbody { flex: 1; min-width: 0; padding: 14px 22px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: center; }
.pkick { margin: 0; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #c9a45c); font-weight: 700; }
.pbody h2 { margin: 0; font-size: 1.4rem; line-height: 1.15; }
.pbody h2 a { color: inherit; text-decoration: none; }
.pbody .ptag { margin: 0; font-size: 0.98rem; color: var(--fg, #eee); }
.pexp { margin: 2px 0 4px; color: var(--mute, #a8a39a); font-size: 0.9rem; line-height: 1.55; }
.plead { width: 100%; margin: 4px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 0.88rem; }
.plead .lv { flex: 1; min-width: 0; }
.plead .cta.play { margin-left: auto; min-height: 38px; padding: 0 22px; font-size: 0.9rem; }
.plead .lk { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute, #a8a39a); font-weight: 700; }
.plead .lv { color: var(--mute, #a8a39a); }
.plead.has .lv { color: var(--fg, #eee); }
.plead.has .lv b { color: var(--accent, #c9a45c); }
@media (max-width: 680px) {
  .pgame { flex-direction: column; }
  .pimg { flex: none; max-width: none; }
  .pimg img { position: static; height: auto; aspect-ratio: 16 / 10; }
}

/* tablero de mejores */
.board { max-width: 680px; margin: 28px auto 0; padding: 18px 22px 12px; border: 1px solid var(--hair); border-radius: 18px; background: var(--card); }
.board[hidden] { display: none; }
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.board h2, .howto h2 { margin: 0; font-size: 1.05rem; letter-spacing: 0.02em; }
.bd-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--hair); }
.bd-tab { border: 0; background: none; color: var(--mute, #a8a39a); font: inherit; font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.bd-tab.on { background: var(--accent, #c9a45c); color: #17130b; }
.bd-list { list-style: none; margin: 10px 0 0; padding: 0; }
.bd-row, .bd-empty { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 2px; border-top: 1px solid var(--hair); font-size: 0.93rem; }
.bd-empty { display: block; color: var(--mute, #a8a39a); }
.bd-rk { color: var(--mute, #a8a39a); font-variant-numeric: tabular-nums; }
.bd-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bd-sc { color: var(--mute, #a8a39a); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.bd-row.first .bd-rk, .bd-row.first .bd-nm { color: var(--accent, #c9a45c); }

/* poner el nombre */
.nm-form { width: 100%; max-width: 420px; margin: 16px auto 4px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 16px; background: var(--card); }
.nm-t { margin: 0 0 8px; font-weight: 700; font-size: 0.92rem; text-align: center; }
.nm-row { display: flex; gap: 8px; }
.nm-in { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--field, rgba(255, 255, 255, 0.08)); color: inherit; font: inherit; }
.nm-msg { margin: 8px 0 0; min-height: 1.2em; font-size: 0.84rem; color: var(--mute, #a8a39a); text-align: center; }
.nm-ok { margin: 0; text-align: center; font-weight: 700; color: var(--accent, #c9a45c); }

/* como se juega */
.howto { max-width: 680px; margin: 26px auto 8px; padding: 0 4px; }
.howto ol { list-style: none; counter-reset: paso; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.howto li { counter-increment: paso; position: relative; padding-left: 40px; line-height: 1.55; color: var(--mute, #a8a39a); font-size: 0.95rem; }
.howto li::before { content: counter(paso); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--accent, #c9a45c); color: var(--accent, #c9a45c); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Wordle */
.wd-board { display: grid; gap: 7px; width: min(100%, 330px); margin: 6px auto 4px; }
.wd-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.wd-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--hair); border-radius: 10px; font: 700 1.7rem/1 var(--display, serif); text-transform: uppercase; background: var(--card); }
.wd-cell.fill { border-color: var(--mute, #a8a39a); }
.wd-cell.g, .wd-key.g { background: var(--ok); border-color: var(--ok); color: var(--ink-on); }
.wd-cell.y, .wd-key.y { background: var(--mid); border-color: var(--mid); color: var(--ink-on); }
.wd-cell.x, .wd-key.x { background: #3a3d46; border-color: #3a3d46; color: #cfd0d4; }
.wd-kb { width: min(100%, 470px); margin: 10px auto 0; display: grid; gap: 7px; }
.wd-kr { display: flex; justify-content: center; gap: 5px; }
.wd-key { min-width: 0; height: 50px; padding: 0 4px; border-radius: 9px; border: 1px solid var(--hair); background: var(--card); color: inherit; font: 600 0.9rem var(--body, sans-serif); cursor: pointer; flex: 1; max-width: 46px; }
.wd-key.wide { max-width: 68px; flex: 1.5; font-size: 0.78rem; }

/* Who are you? */
.wh-pick { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; width: 100%; }
.wh-count { color: var(--mute, #a8a39a); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.wh-bub { left: 0; right: 0; margin: 0 auto; width: min(100%, 480px); justify-content: center; gap: 8px; transform-origin: 50% -8px; }
.bc .opt.ph { width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 12px; overflow: hidden; }
.bc .opt.ph img { width: 100%; height: 100%; border-radius: 0; }
.bc .opt.ph.used { opacity: 0.3; cursor: default; }
.wh-table { width: 100%; overflow-x: auto; margin-top: 4px; }
.wh-rows { display: flex; flex-direction: column; gap: 5px; }
.wh-row { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(5, minmax(76px, 1fr)); gap: 5px; min-width: 620px; }
.wh-rows .wh-row:first-child { animation: whIn 0.35s ease; }
@keyframes whIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.wh-head { margin-bottom: 6px; }
.wh-head .wh-c { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute, #a8a39a); background: none; font-weight: 700; }
.wh-c { padding: 9px 6px; border-radius: 10px; text-align: center; font-size: 0.85rem; background: var(--card); display: flex; align-items: center; justify-content: center; }
.wh-name { justify-content: flex-start; gap: 10px; padding: 4px 10px 4px 4px; }
.wh-name img { border-radius: 8px; flex: none; }
.wh-ok { background: var(--ok); color: var(--ink-on); }
.wh-no { background: var(--no); color: var(--ink-on); }

/* Memory */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 460px); margin: 4px 0 8px; }
.stat { text-align: center; padding: 10px 6px; border: 1px solid var(--hair); border-radius: 14px; background: var(--card); }
.stat span { display: block; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute, #a8a39a); font-weight: 700; }
.stat b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(100%, 460px); margin: 6px auto; }
.mm-card { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; perspective: 700px; color: inherit; }
.mm-back, .mm-face { position: absolute; inset: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.4s; overflow: hidden; }
.mm-back { background: linear-gradient(145deg, #26283a, #14151f); color: var(--accent, #c9a45c); font: 700 1.5rem var(--display, serif); border: 1px solid rgba(201, 164, 92, 0.45); }
.mm-face { background: #1c1d27; transform: rotateY(180deg); border: 1px solid var(--hair); }
.mm-face img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mm-face em { position: absolute; bottom: 0; left: 0; right: 0; font-style: normal; font-size: 0.68rem; text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: #fff; padding: 12px 3px 4px; }
.mm-card.up .mm-back, .mm-card.done .mm-back { transform: rotateY(180deg); }
.mm-card.up .mm-face, .mm-card.done .mm-face { transform: rotateY(0); }
.mm-card.done .mm-face { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }

/* Tick: el reloj cubre todo el ancho de la tarjeta con un velo suave para que se lea lo de encima */
#tick { position: relative; width: 100%; border-radius: 20px; overflow: hidden; padding: 30px 18px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: #f7f3ea;
  background: linear-gradient(180deg, rgba(14, 12, 18, 0.42), rgba(14, 12, 18, 0.74)), url("/detown/img/play/hub_tick2d.jpg") center / cover; border: 1px solid var(--hair); }
.tk-dots { display: flex; gap: 8px; margin-bottom: 6px; }
.tk-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(247, 243, 234, 0.7); }
.tk-dots i.now { background: #c9a45c; border-color: #c9a45c; }
.tk-dots i.done { background: rgba(247, 243, 234, 0.8); }
.tk-goal { margin: 0; font-size: 1.05rem; letter-spacing: 0.04em; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.tk-big { font: 700 clamp(3.4rem, 14vw, 5.2rem) / 1.1 var(--mono, monospace); font-variant-numeric: tabular-nums; letter-spacing: 2px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); margin: 4px 0; }
#tick .play-msg { color: #f7f3ea; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.tk-log { list-style: decimal inside; margin: 12px 0 0; padding: 0; font-size: 0.88rem; color: rgba(247, 243, 234, 0.9); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
#tick .nm-form { background: rgba(14, 12, 18, 0.55); border-color: rgba(247, 243, 234, 0.25); backdrop-filter: blur(8px); }
#tick .nm-t, #tick .nm-msg { color: #f7f3ea; }
.tk-levels { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid rgba(247, 243, 234, 0.35); background: rgba(14, 12, 18, 0.35); margin-bottom: 10px; }
.tk-lv { border: 0; background: none; color: #f7f3ea; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 5px 16px; border-radius: 999px; cursor: pointer; }
.tk-lv.on { background: #c9a45c; color: #17130b; }
.tk-note { margin: 0; font-size: 0.82rem; color: rgba(247, 243, 234, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }

/* Memory: niveles y mazos */
.mm-ctl { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
.mm-ctl .bd-tabs { flex-wrap: wrap; justify-content: center; }
.mm-grid.mm-p6 { grid-template-columns: repeat(4, 1fr); width: min(100%, 460px); }
.mm-grid.mm-p12 { grid-template-columns: repeat(6, 1fr); width: min(100%, 640px); gap: 8px; }
.mm-grid.mm-p12 .mm-face em { font-size: 0.58rem; padding-top: 8px; }
/* Who: modos y zoom */
.wh-modes { margin-bottom: 8px; }
.wh-zoomwrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 6px 0; }
.wh-zoomwrap[hidden], .wh-table[hidden] { display: none; }
.wh-zoom { width: min(100%, 280px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; border: 1px solid var(--hair); background: #14151f; }
.wh-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.wh-tried { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 44px; }
.wh-t { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; opacity: 0.55; border: 2px solid var(--no); }
.wh-t.ok { opacity: 1; border-color: var(--ok); }
.wh-row { grid-template-columns: minmax(150px, 1.5fr) repeat(7, minmax(74px, 1fr)); min-width: 860px; }

#who.gamebox { max-width: 1100px; }

/* pagina de juego: el juego a la izquierda y el ranking a la derecha */
.pg2 { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "game" "board" "how"; gap: 22px; align-items: start; }
.pg-game { grid-area: game; min-width: 0; }
.pg2 .board { grid-area: board; margin: 0; max-width: none; }
.pg2 .howto { grid-area: how; margin: 0; max-width: none; }
@media (min-width: 980px) {
  .pg2.has-board { grid-template-columns: minmax(0, 680px) minmax(230px, 290px); grid-template-areas: "game board" "how board"; column-gap: 40px; justify-content: center; }
  .pg2:not(.has-board) { grid-template-areas: "game" "how"; }
  .pg2 .board { position: sticky; top: 16px; align-self: start; }
  .pg2 .howto { max-width: 680px; margin: 0 auto; }
}
#who.gamebox { max-width: none; }
.wh-row { grid-template-columns: minmax(118px, 1.35fr) repeat(7, minmax(54px, 1fr)); gap: 4px; min-width: 640px; }
.wh-c { font-size: 0.76rem; padding: 8px 4px; }
.wh-name img { width: 34px; height: 34px; }
.wh-head .wh-c { font-size: 0.6rem; letter-spacing: 0.08em; }

/* Tick: tarjeta de tamano fijo, con tres zonas ordenadas */
#tick { height: 600px; justify-content: space-between; align-items: stretch; padding: 22px 20px 20px; width: 100%; box-sizing: border-box; }
.tk-top, .tk-mid, .tk-bot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tk-mid { flex: 1; justify-content: center; }
.tk-bot { min-height: 150px; justify-content: flex-end; gap: 10px; }
.tk-levels { margin-bottom: 4px; }
.tk-log { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; min-height: 28px; }
.tk-log li { padding: 4px 10px; border-radius: 999px; background: rgba(14, 12, 18, 0.55); border: 1px solid rgba(247, 243, 234, 0.25); font-size: 0.78rem; color: #f7f3ea; text-shadow: none; }
#tick .play-msg { margin: 6px 0 0; min-height: 1.5em; }
#tick .nm-form { margin: 0; max-width: 380px; padding: 10px 12px; }
#tick .nm-t { font-size: 0.82rem; margin-bottom: 6px; }
#tick .play-acts { margin: 0; }

/* ranking al lado del juego: sin tarjeta, texto libre en vertical, como el ranking de personajes */
.pg2 .board { background: none; border: 0; padding: 4px 0 0; border-radius: 0; }
.pg2 .board h2 { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent, #c9a45c); font-weight: 700; }
.pg2 .bd-list { margin-top: 12px; }
.pg2 .bd-row { grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 0; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hair); }
.pg2 .bd-row:first-child { border-top: 0; }
.pg2 .bd-rk { grid-row: 1 / span 2; font: 700 1.5rem/1 var(--mono, monospace); color: var(--accent, #c9a45c); opacity: 0.85; }
.pg2 .bd-rk::before { content: "#"; font-size: 0.8em; opacity: 0.7; }
.pg2 .bd-row.first .bd-rk { opacity: 1; }
.pg2 .bd-nm { font-size: 1.05rem; }
.pg2 .bd-sc { font-size: 0.8rem; }
.pg2 .bd-empty { padding: 6px 0; border: 0; }

/* Find the red envelope */
.fd-head { display: flex; align-items: baseline; gap: 12px; width: 100%; margin-bottom: 8px; }
.fd-lab { flex: 1; font-size: 0.9rem; color: var(--mute, #a8a39a); }
.fd-pen { color: var(--no); font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.fd-clock { font: 700 1.3rem var(--mono, monospace); font-variant-numeric: tabular-nums; }
.fd-scene { position: relative; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); cursor: crosshair; background: #14151f; touch-action: manipulation; }
.fd-scene img { width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.fd-ring { position: absolute; transform: translate(-50%, -50%); width: 12%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #59d38c; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 18px rgba(89, 211, 140, 0.7); pointer-events: none; animation: fdPop 0.35s ease; }
.fd-miss { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ff7b7b; pointer-events: none; animation: fdMiss 0.7s ease forwards; }
@keyframes fdPop { from { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes fdMiss { from { transform: translate(-50%, -50%) scale(0.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
/* Who's lying? */
.li-prog { display: flex; gap: 8px; justify-content: center; margin: 4px 0 12px; }
.li-prog i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--mute, #a8a39a); }
.li-prog i.now { border-color: var(--accent, #c9a45c); background: var(--accent, #c9a45c); }
.li-prog i.ok { background: var(--ok); border-color: var(--ok); }
.li-prog i.no { background: var(--no); border-color: var(--no); }
.li-cards { display: grid; gap: 10px; width: 100%; }
.li-card { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 16px; background: var(--card); color: inherit; font: inherit; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.li-card:hover { border-color: var(--accent, #c9a45c); }
.li-card img { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.li-tx { display: flex; flex-direction: column; gap: 2px; }
.li-tx b { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute, #a8a39a); }
.li-tx .li-q { font: italic 500 1.08rem/1.35 var(--display, serif); }
.li-tag { grid-column: 2; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; min-height: 1em; }
.li-cards.done .li-card { cursor: default; }
.li-card.fake { border-color: var(--no); background: color-mix(in srgb, var(--no) 18%, transparent); }
.li-card.fake .li-tag { color: #ff9a9a; }
.li-card.real .li-tag { color: var(--mute, #a8a39a); }
.li-card.picked { box-shadow: 0 0 0 2px var(--accent, #c9a45c); }

/* linea vertical entre el juego y el ranking */
@media (min-width: 980px) {
  .pg2.has-board { column-gap: 0; }
  .pg2.has-board .pg-game, .pg2.has-board .howto { padding-right: 36px; }
  .pg2.has-board .board { position: static; align-self: stretch; border-left: 1px solid var(--hair); padding: 4px 0 0 36px; }
}

/* Memory: niveles a la izquierda, en columna */
.mm-wrap { display: flex; gap: 22px; align-items: flex-start; width: 100%; }
.mm-levels { display: flex; flex-direction: column; gap: 8px; flex: 0 0 150px; }
.mm-lv { text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--card); color: var(--fg, inherit); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.mm-lv.on { background: var(--accent, #c9a45c); color: #17130b; border-color: transparent; }
.mm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mm-main .stats { width: 100%; }
.mm-main .mm-grid, .mm-main .mm-grid.mm-p6, .mm-main .mm-grid.mm-p12 { width: 100%; }
@media (max-width: 620px) { .mm-wrap { flex-direction: column; } .mm-levels { flex-direction: row; flex: none; width: 100%; } .mm-lv { flex: 1; text-align: center; padding: 8px 4px; font-size: 0.72rem; } }
/* Who: las tres ultimas filas nitidas; las anteriores se van apagando hacia abajo */
.wh-rows .wh-row:first-child { animation: whIn 0.3s ease; }
@keyframes whIn { from { transform: translateY(-8px); } to { transform: none; } }
.wh-rows .wh-row:nth-child(n+4) { opacity: 0.7; filter: blur(0.6px); }
.wh-rows .wh-row:nth-child(5) { opacity: 0.5; filter: blur(1.2px); }
.wh-rows .wh-row:nth-child(6) { opacity: 0.34; filter: blur(1.8px); }
.wh-rows .wh-row:nth-child(n+7) { opacity: 0.2; filter: blur(2.4px); }
/* botones de cristal: semitransparentes, con el color de la letra y del borde adaptado al tema */
html.vidrio body.wide a.cta, html.vidrio body.wide button.cta, html.vidrio body.wide .cta.alt { background: color-mix(in srgb, var(--fg, #fff) 11%, transparent) !important; color: var(--fg, #fff) !important; border: 1px solid color-mix(in srgb, var(--fg, #fff) 30%, transparent) !important; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg, #fff) 18%, transparent), 0 4px 14px rgba(0, 0, 0, 0.18) !important; }
html.vidrio body.wide a.cta:hover, html.vidrio body.wide button.cta:hover { background: color-mix(in srgb, var(--fg, #fff) 20%, transparent) !important; }
html.vidrio body.wide #tick .cta { color: #f7f3ea !important; background: rgba(247, 243, 234, 0.14) !important; border-color: rgba(247, 243, 234, 0.45) !important; }

/* retratos mas grandes, sin nombres: el nombre sale en burbuja al pasar el cursor */
.bc .opt.ph { width: 76px; height: 76px; border-radius: 14px; }
.wh-bub { width: min(100%, 620px); }
.wh-t { width: 60px; height: 60px; border-radius: 12px; }

/* lista de intentos: solo la foto del vecino (el nombre sale en burbuja) */
.wh-row { grid-template-columns: 76px repeat(7, minmax(54px, 1fr)); min-width: 600px; }
.wh-name { justify-content: center; padding: 2px; }
.wh-name img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }

/* la tarjeta de la foto mide lo mismo que la foto: si la foto es cuadrada, el borde es cuadrado */
.wh-row { grid-template-columns: 64px repeat(7, minmax(54px, 1fr)); }
.wh-c.wh-name { background: none; padding: 0; width: 64px; height: 64px; align-self: center; justify-self: center; border-radius: 12px; overflow: hidden; }
.wh-c.wh-name img { width: 100%; height: 100%; border-radius: 12px; }
.wh-head .wh-c:first-child { justify-self: center; }

/* esquema nuevo: juego centrado a la izquierda de la linea; a la derecha el ranking, con All games abajo a la derecha */
.pg-game { text-align: center; }
.pg-side { grid-area: board; display: flex; flex-direction: column; min-width: 0; }
.pg2 .pg-side .board { grid-area: auto; position: static; border: 0; padding: 4px 0 0; flex: 1; }
.pg-back { align-self: flex-end; margin-top: 18px; }
.pg2:not(.has-board) { grid-template-areas: "game" "how" "board"; }
@media (min-width: 980px) {
  .pg2.has-board { grid-template-columns: minmax(0, 1fr) 330px; justify-content: stretch; column-gap: 0; }
  .pg2.has-board .pg-side { border-left: 1px solid var(--hair); padding-left: 36px; align-self: stretch; }
  .pg2.has-board .pg-side .board { border-left: 0; padding: 4px 0 0; }
  .pg2.has-board .pg-back { margin-top: auto; }
  .pg2.has-board .pg-game, .pg2.has-board .howto { padding-right: 36px; }
}
/* pantalla de entrada: el juego ya ganado al fondo, velo de cristal, como se gana y boton Play */
.gamebox { position: relative; }
.gamebox.gated { min-height: 440px; }
.gamebox.gated > *:not(.gate-ov) { visibility: hidden; }
.gate-ov { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; z-index: 3; }
.intro-demo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; pointer-events: none; overflow: hidden; }
.intro-demo > * { width: 100%; }
.intro-demo .wh-table { overflow: hidden; }
.demo-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.intro-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 56px 28px 28px; text-align: center; background: linear-gradient(180deg, rgba(14, 12, 18, 0.38), rgba(14, 12, 18, 0.66)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #f7f3ea; }
.intro-k { position: absolute; top: 16px; left: 0; right: 0; margin: 0; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; color: #e3c27a; }
.intro-t { margin: 0; max-width: 430px; font-size: 1.02rem; line-height: 1.6; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.demo-tick { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #f7f3ea; background: linear-gradient(180deg, rgba(14, 12, 18, 0.42), rgba(14, 12, 18, 0.74)), url("/detown/img/play/hub_tick2d.jpg") center / cover; }
.demo-tick .tk-log { margin-top: 8px; }
html.vidrio body.wide .intro-ov .cta { color: #f7f3ea !important; background: rgba(247, 243, 234, 0.16) !important; border-color: rgba(247, 243, 234, 0.5) !important; }

.intro-ov { background: linear-gradient(180deg, rgba(14, 12, 18, 0.35), rgba(14, 12, 18, 0.55)); }
.intro-card { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 440px; padding: 20px 24px 22px; border-radius: 20px; background: rgba(14, 12, 18, 0.62); border: 1px solid rgba(247, 243, 234, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }

/* el juego ganado se ve arriba; la tarjeta con la explicacion queda abajo */
.intro-ov { justify-content: flex-end; padding: 40px 18px 18px; background: linear-gradient(180deg, rgba(14, 12, 18, 0.12), rgba(14, 12, 18, 0.5) 55%, rgba(14, 12, 18, 0.72)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.intro-demo { align-items: flex-start; padding-top: 38px; }
.intro-card { padding: 14px 18px 16px; gap: 10px; }
.intro-t { font-size: 0.92rem; line-height: 1.5; }
.intro-demo .demo-col .mm-grid { width: min(100%, 300px); gap: 6px; }
.intro-demo .wd-board { width: min(100%, 250px); gap: 5px; }
.intro-demo .wd-row { gap: 5px; }
.intro-demo .wd-cell { font-size: 1.2rem; }
.intro-demo .demo-tick { padding-top: 24px; justify-content: flex-start; }

/* sin cuadro encima: solo se opaca el fondo y salen el texto y el boton Play */
.intro-card { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; max-width: 460px; }
.intro-ov { background: linear-gradient(180deg, rgba(14, 12, 18, 0.45), rgba(14, 12, 18, 0.7)); }
.intro-t { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85); font-size: 0.98rem; }
.intro-demo { opacity: 0.85; }

/* ni siquiera un velo en forma de cuadro: se apaga el juego de fondo y listo */
.intro-ov { background: none; }
.intro-demo { opacity: 0.4; }
.intro-t { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 16px rgba(0, 0, 0, 0.9); font-weight: 500; }

/* entrada v3: el juego real se ve tal como es, apagado, con una tarjeta en el centro que dice Press to play */
.gamebox.gated > *:not(.gate-ov) { visibility: visible; opacity: 0.3; filter: blur(0.8px); pointer-events: none; }
.gamebox.gated { min-height: 0; }
.gate-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 4; border-radius: 20px; background: none; overflow: visible; }
.intro-card { display: block; padding: 20px 42px; border-radius: 20px; border: 1px solid rgba(247, 243, 234, 0.45); background: rgba(14, 12, 18, 0.62); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); color: #f7f3ea; font: 600 1.35rem var(--display, serif); letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); transition: transform 0.2s, background 0.2s; max-width: none; gap: 0; }
.intro-card:hover { transform: scale(1.04); background: rgba(14, 12, 18, 0.74); }
/* Tick: la imagen se corre a la derecha para que se vean Tick y el reloj */
#tick { background-position: 0 0, 84% center; }

/* entrada v4: el juego ganado de muestra al fondo (apagado) y la tarjeta Press to play en el centro */
.gamebox.gated > *:not(.gate-ov) { visibility: hidden; opacity: 1; filter: none; }
.gamebox.gated { min-height: 440px; }
.intro-demo { opacity: 0.4; align-items: center; padding-top: 10px; }
.intro-card { position: relative; z-index: 2; }
.intro-demo .demo-tick { justify-content: center; padding-top: 0; }
.demo-tick { background-position: 0 0, 84% center; }

.intro-demo .demo-tick { justify-content: flex-start; padding-top: 36px; }

/* orden final de las paginas de juego: todo centrado a la izquierda, ranking pequeno a la derecha con linea, como jugar con su separador, All games en la esquina */
.pg2 { --hair: var(--line, rgba(255, 255, 255, 0.16)); }
html.vidrio main.legal.wide { position: relative; padding-bottom: 92px; }
.pg-back { position: absolute; right: clamp(18px, 4vw, 34px); bottom: 24px; margin: 0; align-self: auto; }
.pg-game h1 { text-align: center; margin: 4px 0 6px; }
.pg-game .ptag { text-align: center; margin: 0 0 16px; }
.pg2 .howto { max-width: none; margin: 38px 0 0; padding: 28px 0 0; border-top: 1px solid var(--hair); text-align: left; }
@media (min-width: 980px) {
  .pg2.has-board { grid-template-columns: minmax(0, 1fr) 200px; }
  .pg2.has-board .pg-side { padding-left: 28px; }
  .pg2.has-board .pg-game, .pg2.has-board .howto { padding-right: 28px; }
}
.pg2 .board h2 { font-size: 0.64rem; }
.pg2 .bd-list { margin-top: 8px; }
.pg2 .bd-row { grid-template-columns: 34px 1fr; padding: 6px 0; }
.pg2 .bd-rk { font-size: 1.05rem; }
.pg2 .bd-nm { font-size: 0.92rem; }
.pg2 .bd-sc { font-size: 0.72rem; }

/* entrada v5: el juego real, exactamente como es, apagado (ya ganado de muestra), con la tarjeta Press to play */
.gamebox.gated > *:not(.gate-ov) { visibility: visible; opacity: 0.32; filter: blur(0.6px); pointer-events: none; }
.gamebox.gated { min-height: 0; }
.gate-ov { display: flex; align-items: center; justify-content: center; }

/* sin saltos al cargar: cada juego reserva su alto desde el primer momento */
#wordle.gamebox { min-height: 600px; }
#who.gamebox { min-height: 300px; }
#memory.gamebox { min-height: 660px; }
#sobre.gamebox { min-height: 430px; }
#miente.gamebox { min-height: 400px; }
@media (max-width: 700px) { #wordle.gamebox { min-height: 560px; } #memory.gamebox { min-height: 560px; } #sobre.gamebox { min-height: 300px; } }

.gate-ov { left: 0; right: 0; top: 0; bottom: 0; width: auto; max-width: none; margin: 0; box-sizing: border-box; }

/* Tick's countdown 3D: tarjeta a todo el ancho de la columna; tablero y «how to play» debajo (solo esta pagina, clase pg3d) */
.pg2.pg3d, .pg2.pg3d.has-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "game" "board" "how"; column-gap: 0; justify-content: stretch; }
.pg2.pg3d.has-board .pg-game, .pg2.pg3d.has-board .howto { padding-right: 0; }
.pg2.pg3d.has-board .pg-side { border-left: 0; padding-left: 0; align-self: start; }
.pg2.pg3d .board { position: static; max-width: 680px; margin: 0; text-align: left; }
.pg2.pg3d .pg-back { position: static; align-self: center; margin-top: 18px; }
.t3-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin: 0 0 10px; }
.t3-2d { font-size: 0.8rem; color: var(--mute, #a8a39a); text-decoration: underline; text-underline-offset: 3px; }
.t3-2d:hover { color: var(--accent, #c9a45c); }
.t3-2d:focus-visible, .t3-start:focus-visible, .t3-fs:focus-visible { outline: 3px solid var(--accent, #c9a45c); outline-offset: 3px; }
.t3-card { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 520px; border-radius: 18px; overflow: hidden; background: #14121a; border: 1px solid var(--hair); }
.t3-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #e9e8ec; }
.t3-start { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.t3-start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t3-start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 18, 0.15), rgba(14, 12, 18, 0.55)); }
.t3-start .cta { position: relative; z-index: 1; font-size: 1.15rem; padding: 14px 44px; }
.t3-start:hover .cta { filter: brightness(1.08); }
.t3-tools { position: absolute; top: 6px; right: 6px; z-index: 6; display: flex; gap: 6px; }
.t3-tools .t3-fs { position: static; }
.t3-fs { position: absolute; top: 6px; right: 6px; z-index: 6; padding: 3px 8px; font: 600 11px/1.3 system-ui, sans-serif; color: #fff; background: rgba(20, 18, 26, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; cursor: pointer; opacity: 0.75; }
.t3-fs:hover, .t3-fs:focus-visible { opacity: 1; }
.t3-card.pfs { position: fixed; inset: 0; z-index: 9999; width: 100%; height: 100vh; height: var(--t3h, 100dvh); min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
/* el vidrio (backdrop-filter) de la pagina haria de caja de los elementos fijos: sin esto la seudo pantalla completa quedaba corrida y recortada */
html.t3-lock, html.t3-lock body { overflow: hidden; overscroll-behavior: none; }
html.t3-lock .cmain, html.t3-lock .pg2, html.t3-lock .pg-game { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; transform: none !important; }
html.t3-lock .cmain { z-index: auto; }
html.t3-lock .top, html.t3-lock .iconnav, html.t3-lock .snd-btn { visibility: hidden; }
.t3-card:fullscreen { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.t3-card:-webkit-full-screen { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.t3-card.playing { touch-action: none; overscroll-behavior: contain; }
.t3-hint { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 99px; background: rgba(20, 18, 26, 0.78); color: #fff; font: 600 13px/1.3 system-ui, sans-serif; text-align: center; pointer-events: none; }
.t3-hint[hidden] { display: none; }
.t3-touch { margin: 10px 0 0; font-size: 0.85rem; color: var(--mute, #a8a39a); }
.t3-result { margin-top: 14px; min-height: 0; }
.t3-result .nm-form { margin: 12px auto 0; max-width: 420px; }
@media (max-width: 700px) {
  .t3-card { aspect-ratio: auto; height: 70vh; height: 70dvh; min-height: 0; border-radius: 14px; }
  .t3-bar { flex-wrap: wrap; }
}
/* movil de lado (o plegable abierto): la tarjeta ocupa la altura visible, no 520 px fijos */
@media (orientation: landscape) and (max-height: 540px) {
  .t3-card { aspect-ratio: auto; height: calc(100vh - 24px); height: calc(100dvh - 24px); min-height: 0; border-radius: 14px; }
}
/* dedo: botones de la tarjeta de 44 px como minimo */
@media (pointer: coarse) {
  .opin-sc span { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .opin .cta { min-height: 44px; }
  .t3-fs { min-height: 44px; min-width: 44px; padding: 0 14px; font-size: 14px; opacity: 0.9; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  .t3-tools { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  .t3-tools .t3-fs { top: auto; right: auto; }
  .t3-2d { display: inline-flex; align-items: center; min-height: 44px; }
}

/* sonido y detalles de movil (juegos 2D) */
.snd-btn { position: fixed; right: 12px; bottom: 12px; z-index: 30; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--hair); background: var(--card); color: inherit; font: 600 0.8rem/1 inherit; cursor: pointer; opacity: 0.85; }
.snd-btn:hover { opacity: 1; } .snd-btn:active { transform: scale(0.96); } .snd-btn:focus-visible { outline: 2px solid var(--ok, #6fd28a); outline-offset: 2px; }
.mm-card.spark .mm-face { animation: mmSpark 0.7s ease-out; }
@keyframes mmSpark { 0% { box-shadow: 0 0 0 2px var(--ok), 0 0 0 0 rgba(255, 224, 130, 0.9); } 60% { box-shadow: 0 0 0 2px var(--ok), 0 0 0 14px rgba(255, 224, 130, 0); } 100% { box-shadow: 0 0 0 2px var(--ok), 0 0 0 0 rgba(255, 224, 130, 0); } }
@media (prefers-reduced-motion: reduce) { .mm-card.spark .mm-face { animation: none; } }
@media (max-width: 620px) {
  .mm-grid { gap: 8px; } .mm-lv, .play-acts .cta, .li-card { min-height: 44px; }
  .wh-table { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .snd-btn { bottom: 70px; }
}

/* Who are you?: casillas que se revelan una a una, retrato pixelado y marca que no depende solo del color */
.wh-pix { width: 100%; height: 100%; border-radius: 8px; image-rendering: pixelated; display: block; }
.wh-rv { animation: whCell 0.4s ease backwards; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
.wh-row.still .wh-rv { animation: none; }
.wh-ok.wh-rv:not(.wh-name)::before { content: "\2713\00a0"; font-weight: 700; }
.wh-no.wh-rv:not(.wh-name)::before { content: "\2715\00a0"; font-weight: 700; }
@keyframes whCell { from { opacity: 0; transform: rotateX(90deg) scale(0.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wh-rv { animation: none; } }

/* Who's lying?: cuenta de aciertos con iconos (no solo color) */
.li-prog i { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.78rem; font-weight: 800; color: var(--ink-on, #101018); }
.li-prog i.ok::after { content: "\2713"; } .li-prog i.no::after { content: "\2715"; }
.li-tally { text-align: center; min-height: 1.3em; margin: -6px 0 10px; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--mute, #a8a39a); }

.snd-music { bottom: 66px; } @media (max-width: 600px) { .snd-music { bottom: 124px; } }
/* Accesibilidad basica: foco visible, objetivos de 44 px, fondo solido en los botones flotantes */
.pg2 button:focus-visible, .pg2 a:focus-visible, .pg2 input:focus-visible, .gamebox button:focus-visible, [data-game] button:focus-visible, .mm-card:focus-visible, .li-card:focus-visible, .wh-bub .opt:focus-visible { outline: 3px solid var(--accent, #c9a45c); outline-offset: 3px; }
.snd-btn { background: rgba(255, 253, 248, 0.94); color: #1d1b18; border-color: rgba(29, 27, 24, 0.35); opacity: 1; }
.fbtn, .wh-open, .bd-tab, .tk-lv, .nm-in, .nm-row .cta, .play-acts .cta, .mm-lv, .li-card { min-height: 44px; }
.wh-bub .opt { min-width: 44px; min-height: 44px; }
.wh-ok, .wh-no, .li-card.fake, .mm-card.done { forced-color-adjust: none; }
/* Memoria 3D: la cabeza de Prisma queda arriba de la imagen; se baja el encuadre para que no se corte en la lista */
.pgame[data-game="memoria3d"] .pimg img { object-position: 50% 6%; }

/* tarjeta de opinion (2-nov-2026): debajo de "How to play" en los tres juegos 3D; mide lo mismo que el sticker de Dil (a la izquierda) y el formulario compacto a la derecha */
.opin { grid-column: 1 / -1; max-width: 760px; width: 100%; margin: 22px auto 8px; padding: 12px; display: grid; grid-template-columns: 188px 1fr; gap: 18px; align-items: stretch; border: 1px solid var(--hair); border-radius: 20px; background: var(--card); box-sizing: border-box; }
.opin-st { width: 188px; height: auto; aspect-ratio: 720 / 921; border-radius: 14px; display: block; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3); }
.opin-f { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.opin-f h2 { margin: 0; font-size: 1rem; letter-spacing: 0.02em; line-height: 1.2; }
.opin-n { margin: 0; color: var(--mute, #a8a39a); font-size: 0.76rem; line-height: 1.3; }
.opin-ok { font-weight: 600; color: inherit; }
.opin fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.opin legend { padding: 0; margin: 0 0 4px; font-size: 0.8rem; font-weight: 600; }
.opin legend i { font-weight: 400; font-style: normal; color: var(--mute, #a8a39a); }
.opin-sc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.opin input[type=radio], .opin input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opin-sc span, .opin-ch span { display: block; text-align: center; border: 1px solid var(--hair); border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.04); transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; user-select: none; box-sizing: border-box; }
.opin-sc span { padding: 4px 0; font-weight: 700; font-size: 0.95rem; min-height: 30px; }
.opin-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.opin-ch span { padding: 6px 11px; font-size: 0.8rem; min-height: 34px; }
.opin label:hover span { border-color: var(--accent, #c9a45c); }
.opin input:focus-visible + span { outline: 2px solid var(--accent, #c9a45c); outline-offset: 2px; }
.opin input:checked + span { background: var(--accent, #c9a45c); border-color: var(--accent, #c9a45c); color: #f7f3ea; }
.opin label:active span { transform: scale(0.97); }
.opin-b { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; flex: 1; min-height: 0; margin-top: 6px; }
.opin-b textarea { flex: 1; align-self: stretch; min-width: 0; min-height: 60px; font: inherit; font-size: 0.85rem; color: inherit; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; resize: none; box-sizing: border-box; }
.opin-b textarea:focus-visible { outline: 2px solid var(--accent, #c9a45c); outline-offset: 2px; }
.opin-b .cta { border: 0; cursor: pointer; font: inherit; font-size: 0.9rem; padding: 0; width: 84px; min-height: 36px; }
.opin .opin-s { margin-right: 94px; }   /* los 5 botones miden lo mismo que el cuadro de texto (sin el boton Enviar) */
.opin.sent .opin-f > :not(h2):not(.opin-n) { display: none; }
.opin.sent .opin-f { justify-content: center; gap: 10px; }
.opin.sent .opin-ok { font-size: 1rem; display: block; margin-top: 6px; }
@media (max-width: 560px) { .opin { grid-template-columns: 1fr; padding: 12px; gap: 12px; } .opin-st { width: 150px; margin: 0 auto; } }