/* 1. ESTILOS GENERALES Y COMPONENTES */

:root {
  color-scheme: dark;
  --gold: #efd08b;
  --ink: #f3f0e5;
  --muted: #aec5b9;
  --view-height: 100dvh;
  --view-top: 0px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #082d25;
  color: var(--ink);
  font:
    16px/1.5 system-ui,
    sans-serif;
}

a {
  color: var(--gold);
}

button,
input,
select {
  font: inherit;
  min-height: 44px;
  border-radius: 9px;
  border: 1px solid #ffffff38;
  padding: 10px 12px;
  background: #173e35;
  color: var(--ink);
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

button:hover {
  background: #285647;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

:is(button, a, input, select, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.primary {
  background: var(--gold);
  color: #163a2d;
  font-weight: 800;
}

.primary:hover {
  background: #ffe3a3;
}

input,
select {
  width: 100%;
  background: #f8f1dc;
  color: #163a2d;
  border: 2px solid #d4c69e;
  color-scheme: light;
}

input::placeholder {
  color: #667465;
}

select option {
  background: #f8f1dc;
  color: #163a2d;
}

label {
  display: block;
  margin: 12px 0 5px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  border-bottom: 1px solid #ffffff20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--ink);
}

.logo {
  width: 40px;
  height: 40px;
  border: 1px solid #a9bc94;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 27px Georgia;
  color: var(--gold);
}

.brand strong {
  display: block;
  font: 22px Georgia;
  letter-spacing: 3px;
}

.brand small {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}

.header-actions > * {
  flex-shrink: 0;
  white-space: nowrap;
}

.header-actions button,
.header-actions a,
#roomtitle {
  font-size: 12px;
}

.header-actions a {
  padding: 10px;
  border: 1px solid #ffffff25;
  border-radius: 9px;
}

#roomtitle {
  padding: 8px;
  background: #ffffff08;
  border-radius: 6px;
}

main {
  max-width: 1120px;
  margin: 28px auto;
  padding: 0 20px;
}

.in-room main {
  max-width: 1680px;
  margin: 12px auto;
}

.panel {
  background: #123c31;
  border: 1px solid #ffffff20;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
}

.setup {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  padding: 40px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold);
  font-weight: 700;
}

h1 {
  font:
    normal clamp(18px, 5vw, 32px) / 1.07 Georgia,
    serif;
  margin: 20px 0;
}

h1 em {
  color: var(--gold);
}

h2 {
  font: normal 27px Georgia;
  margin: 0 0 14px;
}

p {
  color: var(--muted);
}

.entry-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 22px;
}

.entry-tabs button {
  flex: 1;
  font-size: 13px;
}

.tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.tags span {
  border: 1px solid #ffffff25;
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 12px;
}

.paper {
  margin-top: 30px;
  background: #f8f1dc;
  color: #244539;
  padding: 24px;
  border-radius: 4px;
  transform: rotate(-2deg);
  font: 16px Georgia;
  box-shadow: 8px 8px 0 #0002;
}

.paper b {
  font-size: 12px;
  letter-spacing: 2px;
}

.paper p {
  color: #244539;
  border-bottom: 1px solid #24453940;
  padding-bottom: 10px;
}

.wide {
  width: 100%;
  margin-top: 20px;
}

.small,
small {
  font-size: 12px;
  color: var(--muted);
}

#notice:not(:empty) {
  padding: 10px 14px;
  background: #624824;
  border-radius: 9px;
  margin-bottom: 10px;
}

#hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 2px solid var(--gold);
  padding: 7px 12px;
  background: #082d25;
  border-radius: 9px;
  font-size: 14px;
}

#clock {
  font-size: 25px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.secret {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #f8f1dc;
  color: #244539;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 8px 0;
}

.secret small {
  color: #315847;
  font-size: 10px;
}

.secret strong {
  font: 27px Georgia;
}

.secret p {
  color: #244539;
  font-size: 14px;
  margin: 0;
  flex: 1;
  min-width: 160px;
}

.secret button {
  font-size: 12px;
  min-height: 38px;
  padding: 7px 10px;
}

#prepareButtons {
  display: flex;
  gap: 6px;
}

#result {
  margin: 8px 0;
  padding: 12px;
}

#result h2 {
  margin: 0;
  font-size: 25px;
}

#result p {
  margin: 4px 0;
}

.spectator {
  padding: 8px 12px;
  background: #173e35;
  border-radius: 8px;
  font-size: 13px;
  margin: 6px 0;
}

.gamegrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 27%);
  gap: 12px;
  height: clamp(300px, calc(100dvh - 240px), 780px);
  margin-top: 8px;
}

.drawing-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 6px;
}

.canvaswrap {
  position: relative;
  min-height: 0;
  flex: 1;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--gold);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.drawable {
  touch-action: none;
  cursor: crosshair;
}

#canvasPause {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #082d25bb;
  color: white;
  font-size: 28px;
}

.tools {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  padding: 2px;
}

.tools > * {
  flex-shrink: 0;
}

.tools label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 12px;
}

.tools input {
  width: 42px;
  height: 42px;
  padding: 2px;
}

.tools select {
  width: 100px;
}

.tools button,
.tools select {
  font-size: 12px;
  padding: 6px 8px;
}

.tools [aria-pressed='true'] {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.chatbox {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px;
  gap: 6px;
}

.chatbox h2 {
  font-size: 21px;
  margin: 0;
}

.chat-log {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  background: #082d25;
  border-radius: 9px;
  padding: 8px;
  scrollbar-width: thin;
}

.chat-log p {
  margin: 0 0 5px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.chat-log b {
  color: var(--gold);
  margin-right: 6px;
  font-size: 13px;
}

.chat-log span {
  color: var(--ink);
  white-space: pre-wrap;
}

.chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  flex-shrink: 0;
  margin: 0;
}

.chat-compose input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  font-size: 16px;
  text-align: left;
  direction: ltr;
  unicode-bidi: plaintext;
  padding: 10px;
}

.chat-compose button {
  font-size: 13px;
  padding: 8px 12px;
}

.chatbox small {
  font-size: 11px;
  line-height: 1.35;
  flex-shrink: 0;
}

.moderation {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}

.moderation button {
  font-size: 12px;
  min-height: 38px;
  padding: 6px 10px;
}

#voteCount {
  font-size: 12px;
}

.participants {
  margin-top: 16px;
}

.participants h2 {
  font-size: 20px;
  margin-bottom: 8px;
}

.players {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.player {
  border: 1px solid #ffffff25;
  background: #173e35;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.player b {
  color: var(--gold);
}

.player button {
  min-height: 32px;
  font-size: 11px;
  padding: 4px 7px;
  margin-left: 5px;
}

.rankgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.ranking {
  padding: 0;
  list-style: none;
  margin: 0;
}

.ranking li {
  padding: 9px 0;
  border-bottom: 1px solid #ffffff20;
  font-size: 14px;
}

.rankgrid h2 {
  font-size: 24px;
}

.rankgrid p {
  margin: 0 0 8px;
}

#roomRounds {
  max-width: 180px;
}

#requests button {
  margin: 6px;
}

footer {
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 24px 16px;
}

dialog {
  width: min(640px, 94vw);
  max-height: 85dvh;
  overflow: auto;
  background: #123c31;
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 18px;
  padding: 24px;
}

dialog::backdrop {
  background: #001b17d9;
}

dialog li {
  margin: 14px 0;
}

#closeRules {
  float: right;
}

[hidden] {
  display: none !important;
}

#roomActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#roomStrip {
  display: none;
}

.topbar {
  padding: 10px 12px;
  min-height: 68px;
}

.brand strong {
  font-size: 23px;
  letter-spacing: 4px;
}

.brand small {
  font-size: 8px;
  letter-spacing: 2px;
}

.logo {
  width: 44px;
  height: 44px;
  font-size: 29px;
}

.online-status {
  color: var(--muted);
  font-size: 12px;
}

.topbar .header-actions button,
.topbar .header-actions a {
  background: #082d25;
  border: 1px solid #ffffff22;
  font-size: 12px;
  min-height: 38px;
  padding: 8px 12px;
  text-decoration: none;
}

.topbar .header-actions a {
  text-decoration: underline;
}

.topbar .header-actions button:hover,
.topbar .header-actions a:hover {
  background: #173e35;
}

.tools .background-tool {
  font-size: 11px;
  white-space: nowrap;
}

.chat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.chat-heading #myScore {
  font:
    600 11px system-ui,
    sans-serif;
  color: var(--gold);
  white-space: nowrap;
}

#canvasWrap {
  flex: 0 0 auto;
  align-self: center;
  max-width: 100%;
  aspect-ratio: 3/2;
}

#canvasWrap canvas {
  object-fit: fill;
}

.drawing-panel > .tools {
  width: 100%;
}

.room-stats {
  grid-column: 1/-1;
  justify-self: end;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}

.score-summary {
  padding: 3px 0;
}

.score-summary > b {
  display: block;
  margin-bottom: 3px;
}

.score-summary p {
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
  font-size: 13px;
}

.ranking-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.rankgrid > .panel {
  min-width: 0;
}

.positions {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: auto;
}

.positions th,
.positions td {
  padding: 10px 7px;
  border-bottom: 1px solid #ffffff20;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.positions thead th {
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

.positions th:nth-child(2) {
  text-align: left;
  overflow-wrap: anywhere;
  font-weight: 400;
}

.positions thead th:nth-child(2) {
  font-weight: 600;
}

.positions tbody th {
  color: var(--ink);
}

.player-avatar {
  display: inline-block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 5px;
  object-fit: contain;
}

.player .player-avatar {
  margin-right: 2px;
}

#phaseLabel .player-avatar {
  width: 20px;
  height: 20px;
  min-width: 20px;
}

.chat-log .player-avatar {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-right: 4px;
}

.avatar-picker {
  border: 1px solid #ffffff25;
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0 10px;
  min-width: 0;
}

.avatar-picker legend {
  padding: 0 6px;
  color: var(--gold);
}

.avatar-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.avatar-current img {
  width: 44px;
  height: 44px;
}

.avatar-choices {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.avatar-option {
  padding: 5px;
  min-height: 44px;
  display: grid;
  place-items: center;
}

.avatar-option .player-avatar {
  width: 34px;
  height: 34px;
  margin: 0;
}

.avatar-option[aria-pressed='true'] {
  outline: 2px solid var(--gold);
  background: #285647;
}

.positions .player-avatar {
  width: 20px;
  height: 20px;
  min-width: 20px;
}

.avatar-choices {
  max-height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px;
}

.avatar-option {
  min-height: 46px;
}

.intro-extra {
  margin-top: 32px;
}

.intro-extra h2 {
  margin-bottom: 12px;
  font-size: 27px;
  color: var(--gold);
}

.intro-extra p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.intro-extra > span {
  display: block;
  margin-top: 18px;
  color: var(--gold);
  font-size: 11px;
  line-height: 1.6;
}

#entry.setup {
  row-gap: 20px;
  min-height: 0;
  padding-bottom: 24px;
}

#entry .room-stats {
  margin: 0;
}

html {
  scrollbar-gutter: stable;
}

body #notice.toast:not(:empty) {
  position: fixed;
  top: auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 0;
  box-shadow: 0 5px 24px #0005;
  font-size: 13px;
}

#dismissNotice {
  min-height: 32px;
  min-width: 32px;
  padding: 2px 8px;
  font-size: 22px;
  flex-shrink: 0;
}

:is(.avatar-dialog, .message-dialog) {
  width: min(560px, calc(100vw - 24px));
  max-height: 85dvh;
  overflow: auto;
}

.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dialog-heading h2 {
  margin: 0;
}

.dialog-heading button {
  font-size: 24px;
  padding: 2px 12px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

#messageText {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#openAvatar {
  margin-top: 8px;
  font-size: 13px;
  min-height: 36px;
  padding: 6px 10px;
}

.tools #shape {
  width: 128px;
  flex-shrink: 0;
}

.entry-form {
  min-width: 0;
}

.entry-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 22px;
}

.entry-tabs button {
  flex: 1;
  font-size: 13px;
}

.roomline,
.room-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.avatar-picker {
  border: 1px solid #ffffff25;
  border-radius: 12px;
  padding: 14px;
  margin: 0 0 22px;
  min-width: 0;
}

.avatar-picker legend {
  padding: 0 6px;
  color: var(--gold);
}

.avatar-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.avatar-current img {
  width: 44px;
  height: 44px;
}

.avatar-open {
  width: auto;
  margin: 4px 0 0;
  padding: 8px 12px;
  min-height: 40px;
}

.avatar-dialog {
  width: min(640px, 94vw);
}

.avatar-dialog .avatar-choices {
  max-height: min(400px, 55dvh);
  margin: 16px 0;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  overflow: auto;
}

.avatar-dialog .avatar-option {
  padding: 6px;
  min-height: 52px;
}

.avatar-dialog .player-avatar {
  width: 38px;
  height: 38px;
}

.avatar-option[aria-pressed='true'] {
  outline: 2px solid var(--gold);
}

.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dialog-heading h2 {
  margin: 0;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.message-dialog p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body:has(dialog[open]) {
  overflow: hidden;
}

/* Pestañas de modo: verde azulado; acciones ACEPTAR/INGRESAR: dorado. */
.entry-tabs button {
  background: #173e35;
  color: var(--ink);
  border-color: #ffffff38;
}
.entry-tabs button:hover {
  background: #285647;
}
.entry-tabs button.primary,
.entry-tabs button[aria-pressed='true'] {
  background: #376b65;
  color: #fff;
  border-color: #91c9bd;
  box-shadow: inset 0 -3px 0 #91c9bd;
}
.entry-tabs button.primary:hover {
  background: #427d75;
}

/* Reconexión, reconocimiento y reacciones: controles compactos, sin avisos que muevan el juego. */
.connection-status {
  position: fixed;
  right: 12px;
  top: 8px;
  z-index: 90;
  max-width: min(360px, calc(100vw - 24px));
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--gold);
  background: #624824;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 4px 14px #0004;
  pointer-events: none;
}
.drawer-recognition {
  font-weight: 600;
  color: var(--gold) !important;
}
.reaction-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.reaction-bar > button {
  font-size: 12px;
  min-height: 36px;
  padding: 5px 10px;
  flex-shrink: 0;
}
.reaction-summary {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  min-width: 0;
}
.reaction-count {
  white-space: nowrap;
  border: 1px solid #ffffff25;
  border-radius: 20px;
  padding: 3px 8px;
  font-size: 14px;
}
.reaction-dialog {
  width: min(580px, 94vw);
}
.reaction-dialog > p {
  font-size: 13px;
}
.reaction-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  max-height: 55dvh;
  overflow: auto;
  padding: 3px;
}
.reaction-option {
  font-size: 25px;
  min-height: 48px;
  padding: 4px;
}
.match-highlights {
  margin-top: 16px;
}
.highlight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.highlight-card {
  background: #082d25;
  border: 1px solid #ffffff20;
  border-radius: 12px;
  padding: 14px;
}
.highlight-card h3 {
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--gold);
}
.highlight-card > strong {
  font-size: 26px;
  color: var(--gold);
}
.highlight-card p {
  margin: 4px 0;
  font-size: 14px;
}
#canvasWrap .drawer-recognition {
  color: #285e45 !important;
}

.chat-log .chat-reaction span {
  font-size: 22px;
  line-height: 1.25;
  vertical-align: middle;
}

.chatbox .reaction-bar {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  gap: 6px;
}
.chatbox .reaction-summary {
  flex: 1;
}
/* 2. ESCRITORIO */

.snapshot-dialog {
  width: min(900px, 94vw);
  max-height: 88dvh;
  overflow-y: auto;
}
.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}
.snapshot-grid figure {
  margin: 0;
  min-width: 0;
}
.snapshot-grid img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gold, #efd38e);
  border-radius: 10px;
}
.snapshot-grid figcaption {
  padding: 8px 2px;
  overflow-wrap: anywhere;
}
#openSnapshots {
  margin: 12px 0;
}

.memory-reference {
  text-align: center;
}
.memory-reference img {
  display: block;
  width: min(600px, 100%);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  margin: auto;
}
.memory-drawings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
.memory-drawing {
  min-width: 0;
}
.memory-drawing h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}
.memory-drawing img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background: #fff;
  object-fit: contain;
  border-radius: 10px;
}
.memory-drawing h3 img {
  width: 26px;
  height: 26px;
}
body.memory-mode #gameGrid {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: clamp(300px, 65dvh, 700px) !important;
}
body.memory-mode #gameGrid[hidden] {
  display: none !important;
}
body.memory-mode .drawing-panel {
  height: 100% !important;
}
#serverVoteField input,
#roomServerVoteField input {
  width: auto;
  min-height: auto;
  margin-right: 8px;
}

.memory-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 30%);
  align-items: start;
  gap: 14px;
}
#memoryContent {
  min-width: 0;
}
#memoryChatLayout > .chatbox {
  position: sticky;
  top: 12px;
  height: clamp(280px, 65dvh, 720px);
  min-height: 0;
}
#memoryContent .memory-drawings {
  max-height: 65dvh;
  overflow-y: auto;
  padding-right: 4px;
}

.color-choice-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  white-space: nowrap;
  padding: 6px 9px;
}
.color-chip {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  border: 1px solid #adc6bb;
  flex: 0 0 auto;
}
.color-dialog {
  width: min(420px, calc(100vw - 24px));
  max-height: 88dvh;
  padding: 18px;
  overflow-y: auto;
}
.color-dialog .dialog-heading h2 {
  font-size: 22px;
}
.color-help {
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 12px;
}
.color-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.color-option {
  position: relative;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #ffffff66;
  border-radius: 8px;
}
.color-option[aria-pressed='true'] {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  z-index: 1;
}
.color-option[aria-pressed='true']::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 22px;
  text-shadow:
    0 1px 3px #000,
    0 -1px 3px #000;
}
#recentColorsSection h3 {
  font-size: 13px;
  font-family: inherit;
  color: var(--muted);
  margin: 14px 0 8px;
}
#toggleCustomColor {
  margin-top: 16px;
  min-height: 44px;
}
.color-plane {
  position: relative;
  margin-top: 12px;
  width: 100%;
  height: 190px;
  border-radius: 10px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  background-image:
    linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
}
.color-marker {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid white;
  box-shadow: 0 0 0 1px black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.color-hue-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}
.color-dialog .color-hue {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.color-hue::-webkit-slider-runnable-track {
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
}
.color-hue::-moz-range-track {
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
}
.color-hue::-webkit-slider-thumb {
  margin-top: -3px;
}
.color-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
  font-size: 14px;
}
.color-preview-chip {
  display: inline-block;
  width: 56px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #ffffff66;
}

@media (min-width: 761px) {
  .in-game.is-drawer .gamegrid {
    height: clamp(270px, calc(100dvh - 290px), 740px);
  }

  .in-room main {
    max-width: 1280px;
  }
  #roomStrip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    min-height: 42px;
    font-size: 13px;
  }
  #roomStrip #roomActions {
    display: contents;
  }
  #roomStrip #roomtitle {
    order: 0;
    background: transparent;
    padding: 0;
    font-size: 13px;
  }
  #playerCount {
    order: 1;
    font-size: 13px;
    color: var(--muted);
  }
  #playerCount::before {
    content: '· ';
    color: var(--muted);
  }
  #roomStrip #invite {
    order: 2;
    margin-left: auto;
  }
  #roomStrip #leave {
    order: 3;
  }
  #roomStrip button {
    min-height: 40px;
    font-size: 12px;
    padding: 7px 12px;
  }
  .in-game .gamegrid,
  .in-game.is-drawer .gamegrid {
    height: clamp(270px, 55dvh, 520px);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 30%);
  }
  .drawing-panel {
    position: relative;
    padding-top: 48px;
  }
  .drawing-panel .tools {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
    margin: 0;
  }
  #canvasWrap #turnInfo {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    pointer-events: none;
    max-height: 65%;
    overflow: auto;
  }
  #canvasWrap #turnInfo .secret,
  #canvasWrap #turnInfo #result {
    margin: 0;
    padding: 8px 12px;
    box-shadow: 0 3px 15px #0003;
    border: 1px solid #c4b480;
    background: #faf3dff2;
    color: #244539;
    border-radius: 9px;
  }
  #canvasWrap #turnInfo p {
    color: #244539;
    font-size: 13px;
    line-height: 1.35;
    margin: 3px 0;
  }
  #canvasWrap #turnInfo #result h2 {
    font-size: 24px;
    margin: 0;
  }
  #canvasWrap #turnInfo #prepareButtons {
    pointer-events: auto;
  }
  #canvasWrap #turnInfo .secret small {
    font-size: 9px;
  }
  #canvasWrap #turnInfo .secret strong {
    font-size: 24px;
  }
}

/* 3. CELULARES Y PANTALLAS PEQUEÑAS */

@media (max-width: 760px) {
  .topbar {
    display: block;
    padding: 7px 10px;
  }
  .brand {
    gap: 7px;
    margin-bottom: 6px;
  }
  .logo {
    width: 29px;
    height: 29px;
    font-size: 22px;
  }
  .brand strong {
    font-size: 16px;
    letter-spacing: 2px;
  }
  .brand small {
    font-size: 7px;
  }
  .header-actions {
    width: 100%;
    padding-bottom: 2px;
    gap: 5px;
  }
  .header-actions button,
  .header-actions a {
    font-size: 11px;
    padding: 6px 9px;
    min-height: 36px;
  }
  #roomtitle {
    font-size: 11px;
    padding: 6px;
  }
  main,
  .in-room main {
    padding: 0 8px;
    margin: 8px auto;
  }
  .setup {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
  }
  .setup h1 {
    font-size: 36px;
    margin: 12px 0;
  }
  .setup p {
    font-size: 14px;
  }
  .paper {
    margin-top: 20px;
    padding: 18px;
  }
  .entry-tabs button {
    font-size: 12px;
    padding: 8px;
  }
  .panel {
    padding: 16px;
  }
  #hud {
    padding: 5px 8px;
    font-size: 12px;
    gap: 5px;
    min-height: 40px;
  }
  #clock {
    font-size: 23px;
  }
  #phaseLabel {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
  }
  #progress {
    white-space: nowrap;
    font-size: 11px;
  }
  .secret {
    gap: 5px 9px;
    margin: 5px 0;
    padding: 6px 9px;
  }
  .secret small {
    display: none;
  }
  .secret strong {
    font-size: 23px;
  }
  .secret p {
    font-size: 12px;
    line-height: 1.3;
    min-width: 120px;
  }
  #prepareButtons {
    width: 100%;
  }
  .secret button {
    flex: 1;
    min-height: 36px;
  }
  .gamegrid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(100px, 1fr) 160px;
    height: clamp(300px, calc(var(--view-height) - 150px), 700px);
    gap: 6px;
    margin-top: 6px;
  }
  .is-drawer .gamegrid {
    height: clamp(280px, calc(var(--view-height) - 210px), 660px);
    grid-template-rows: minmax(100px, 1fr) 135px;
  }
  .tools {
    gap: 4px;
  }
  .tools label {
    font-size: 0;
  }
  .tools button,
  .tools select {
    font-size: 11px;
    min-height: 40px;
    padding: 5px 7px;
  }
  .tools input {
    width: 38px;
    height: 38px;
  }
  .tools select {
    width: 86px;
  }
  .chatbox {
    padding: 8px;
    gap: 4px;
    border-radius: 10px;
  }
  .chatbox h2 {
    font-size: 17px;
  }
  .chat-log {
    padding: 5px 7px;
  }
  .chat-log p {
    font-size: 13px;
    margin-bottom: 3px;
  }
  .chat-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
  }
  .chat-compose input {
    width: 100%;
    font-size: 16px;
    min-height: 44px;
    padding: 7px 9px;
  }
  .chat-compose button {
    min-height: 44px;
    font-size: 12px;
  }
  .chatbox small {
    font-size: 10px;
  }
  .rankgrid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .participants {
    margin-top: 12px;
  }
  .moderation {
    margin: 6px 0;
  }
  .moderation button {
    min-height: 36px;
    font-size: 11px;
  }
  .spectator {
    font-size: 12px;
    padding: 6px 8px;
  }
  .in-game footer {
    padding: 14px 8px;
    font-size: 10px;
  }
  body.keyboard-open .topbar {
    position: fixed;
    top: var(--view-top);
    left: 0;
    right: 0;
    z-index: 30;
    background: #082d25;
    padding: 3px 6px;
    height: 40px;
  }
  body.keyboard-open .topbar .brand {
    display: none;
  }
  body.keyboard-open .header-actions {
    height: 34px;
    padding: 0;
  }
  body.keyboard-open #play {
    position: fixed;
    z-index: 25;
    top: calc(var(--view-top) + 40px);
    left: 6px;
    right: 6px;
    height: calc(var(--view-height) - 44px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #082d25;
    overflow: hidden;
  }
  body.keyboard-open #hud {
    min-height: 30px;
    padding: 2px 7px;
    flex-shrink: 0;
  }
  body.keyboard-open #clock {
    font-size: 20px;
  }
  body.keyboard-open .gamegrid {
    height: auto;
    min-height: 0;
    flex: 1;
    margin: 0;
    grid-template-rows: minmax(50px, 1fr) minmax(96px, 35%);
    gap: 4px;
  }
  body.keyboard-open .chatbox {
    padding: 5px;
    gap: 3px;
  }
  body.keyboard-open .chatbox h2,
  body.keyboard-open #chatHint,
  body.keyboard-open .moderation {
    display: none;
  }
  body.keyboard-open .spectator {
    padding: 3px 7px;
    margin: 0;
  }
  body.keyboard-open #notice:not(:empty) {
    position: fixed;
    bottom: 4px;
    z-index: 40;
    font-size: 12px;
  }
  body.keyboard-open .participants,
  body.keyboard-open .rankgrid,
  body.keyboard-open footer {
    visibility: hidden;
  }

  #roomStrip {
    display: none !important;
  }
  #roomActions {
    gap: 5px;
  }

  .topbar {
    padding: 7px 10px;
    min-height: 0;
  }
  .brand strong {
    font-size: 17px;
    letter-spacing: 2px;
  }
  .brand small {
    font-size: 7px;
    letter-spacing: 1.5px;
  }
  .logo {
    width: 32px;
    height: 32px;
    font-size: 24px;
  }
  .online-status {
    font-size: 11px;
  }
  .topbar .header-actions button,
  .topbar .header-actions a {
    font-size: 11px;
    padding: 6px 9px;
    min-height: 36px;
  }

  body:not(.keyboard-open) .gamegrid,
  body:not(.keyboard-open).is-drawer .gamegrid {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto clamp(210px, 28dvh, 270px);
    align-items: start;
  }
  body:not(.keyboard-open) .drawing-panel {
    height: auto;
  }
  body:not(.keyboard-open) .chatbox {
    height: 100%;
    min-height: 210px;
  }
  .tools label,
  .tools .background-tool {
    font-size: 11px;
    white-space: nowrap;
  }
  .tools label {
    gap: 4px;
    padding-right: 4px;
  }
  .tools {
    scroll-padding-inline: 2px;
  }

  .positions {
    font-size: 12px;
  }
  .positions th,
  .positions td {
    padding: 8px 4px;
  }
  .positions thead th {
    font-size: 11px;
  }

  .intro-extra {
    margin-top: 24px;
  }

  .intro-extra h2 {
    font-size: 23px;
  }

  #entry.setup {
    row-gap: 18px;
    padding-bottom: 18px;
  }

  body.keyboard-open #notice.toast:not(:empty) {
    top: calc(var(--view-top) + 44px);
    bottom: auto;
    z-index: 100;
  }
  #avatarDialog {
    padding: 16px;
  }
  :is(.avatar-dialog, .message-dialog) h2 {
    font-size: 24px;
  }

  .tools #shape {
    width: 116px;
  }
}

@media (max-width: 480px) {
  .dialog-actions button {
    flex: 1;
  }
  .avatar-dialog .avatar-choices {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  }
}

/* 4. CELULARES EN HORIZONTAL */

@media (max-width: 760px) and (orientation: landscape) {
  .gamegrid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
    grid-template-rows: minmax(100px, 1fr);
    height: calc(var(--view-height) - 150px);
    min-height: 190px;
  }
  .is-drawer .gamegrid {
    grid-template-rows: minmax(100px, 1fr);
  }
  body.keyboard-open .gamegrid {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 40%);
    grid-template-rows: minmax(50px, 1fr);
  }
}

/* 5. ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

@media (max-width: 760px) {
  .memory-chat-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  #memoryChatLayout > .chatbox {
    height: 240px;
    min-height: 0;
    position: sticky;
    top: auto;
    bottom: 6px;
    z-index: 5;
  }
  body.memory-mode #gameGrid {
    height: auto !important;
    grid-template-rows: auto !important;
  }
  body.memory-mode .drawing-panel {
    height: auto !important;
  }
  body.memory-mode #canvasWrap {
    flex: none;
    aspect-ratio: 3 / 2;
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  #memoryContent .memory-drawings {
    max-height: 55dvh;
  }
  body.memory-mode.keyboard-open #memoryChatLayout {
    position: fixed;
    z-index: 25;
    top: calc(var(--view-top) + 40px);
    left: 6px;
    right: 6px;
    height: calc(var(--view-height) - 44px);
    display: grid;
    grid-template-rows: minmax(60px, 1fr) minmax(135px, 40%);
    gap: 4px;
    overflow: hidden;
    background: #082d25;
  }
  body.memory-mode.keyboard-open #memoryContent {
    overflow: auto;
    min-height: 0;
    height: 100%;
  }
  body.memory-mode.keyboard-open #play {
    position: static;
    height: 100%;
    display: flex;
    overflow: hidden;
  }
  body.memory-mode.keyboard-open #gameGrid {
    flex: 1;
    min-height: 0;
  }
  body.memory-mode.keyboard-open .drawing-panel {
    height: 100% !important;
  }
  body.memory-mode.keyboard-open #memoryReference {
    display: none;
  }
  body.memory-mode.keyboard-open #memoryRound {
    padding: 6px;
    margin: 0;
    min-height: 0;
    overflow: auto;
  }
  body.memory-mode.keyboard-open #memoryChatLayout > .chatbox {
    height: 100%;
    min-height: 0;
    position: static;
  }
  body.memory-mode.keyboard-open #memoryContent .memory-drawings {
    max-height: none;
  }
}