/* Dibulíos
   Concepto: libreta de cuadros sobre la mesa familiar; tinta azul marino,
   rotulador tomate y subrayador mostaza. Pantallas de una columna para el móvil. */
:root {
  --bg: #eef3fb;
  --grid: #d9e3f2;
  --card: #ffffff;
  --ink: #1d2747;
  --muted: #5e6888;
  --line: #cfd8ea;
  --accent: #ff5a3c;
  --accent-ink: #ffffff;
  --accent-2: #ffc53d;
  --ok: #1f9d6b;
  --warn: #c76a00;
  --paper: #ffffff;
  --shadow: 0 2px 0 #1d274722, 0 10px 30px -18px #1d274766;
  --font-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 16px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121829; --grid: #1b2338; --card: #1b2238; --ink: #eef2fb; --muted: #a3acc6;
  --line: #2d3753; --accent: #ff6b4f; --accent-2: #ffcd57; --ok: #3ccf94; --warn: #ffb35c;
  --shadow: 0 2px 0 #00000055, 0 10px 30px -18px #000000aa; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font: 16px/1.5 var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- barra superior ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .01em; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-2); transform: rotate(-6deg); font-size: 1.1rem; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.room-chip { font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); font-size: .85rem; }
.banner { background: var(--warn); color: #fff; text-align: center; padding: 6px 16px; font-weight: 700; }

.screen {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-block: 8px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 16px;
}

/* ---- tipografía ---- */
.hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 9vw, 3.2rem); line-height: 1.02; margin: 12px 0 4px; text-wrap: balance; }
.hero-title.small { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.squiggle { color: var(--accent); background: linear-gradient(transparent 70%, color-mix(in srgb, var(--accent-2) 70%, transparent) 70%); padding: 0 .1em; }
.lead { color: var(--muted); margin: 0; max-width: 34em; }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin: 0; line-height: 1.15; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 0 0 10px; }
.label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; }
.hint { color: var(--muted); font-size: .9rem; margin: 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.error { color: var(--accent); font-weight: 700; margin: 0; min-height: 1.5em; }

/* ---- tarjetas y formularios ---- */
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.form-card { gap: 10px; }
.input {
  width: 100%; min-width: 0; font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--bg); border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.input:focus { outline: none; border-color: var(--ink); }
.big-input { font-size: 1.2rem; padding: 16px; background: var(--card); }
.code-input { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--ink); border-radius: 14px; padding: 12px 18px; font-weight: 700; cursor: pointer;
  background: var(--card); box-shadow: 0 3px 0 var(--ink); transition: transform .08s, box-shadow .08s;
  min-height: 48px; touch-action: manipulation;
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.secondary { background: var(--card); }
.btn.big { width: 100%; font-size: 1.1rem; padding: 15px; }
.danger-btn { background: var(--accent); color: #fff; }
.btn-ghost { background: none; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; font-weight: 700; cursor: pointer; color: var(--ink); }
.btn-ghost.small { padding: 6px 12px; font-size: .9rem; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.emoji-btn { font-size: 1.5rem; height: 46px; border-radius: 12px; border: 2px solid transparent; background: var(--bg); cursor: pointer; }
.emoji-btn[aria-checked="true"] { border-color: var(--ink); background: var(--accent-2); transform: rotate(-4deg); }

.home { display: flex; flex-direction: column; gap: 16px; }
.home-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1.5px; background: var(--line); }
.join-row { display: flex; gap: 8px; }
.join-row .input { flex: 1; }
.join-box { background: color-mix(in srgb, var(--accent-2) 30%, var(--card)); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.join-box p { margin: 0; }

/* ---- sala ---- */
.code-card { align-items: center; text-align: center; }
.big-code { font-family: var(--font-display); font-size: clamp(2.6rem, 14vw, 3.6rem); letter-spacing: .12em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.share-row { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.share-input { flex: 1 1 180px; font-size: .9rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.player { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); min-width: 0; }
.player.off { opacity: .6; }
.player.left { opacity: .4; text-decoration: line-through; }
.p-emoji { font-size: 1.5rem; width: 34px; text-align: center; }
.p-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-tags { display: flex; gap: 6px; align-items: center; }
.tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.tag.host { background: var(--accent-2); color: #3b2a00; border-color: transparent; }
.tag.you { background: var(--ink); color: var(--bg); border-color: transparent; }
.tag.warn { color: var(--warn); }
.p-status { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.p-status.ok { background: var(--ok); color: #fff; }
.p-status.pending { background: var(--card); border: 1.5px dashed var(--line); color: var(--muted); }
.mode-card p { margin: 0; }
.settings { display: flex; flex-direction: column; gap: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 auto; border: 2px solid var(--line); background: var(--bg); border-radius: 10px; padding: 8px 10px; font-weight: 700; cursor: pointer; min-height: 40px; }
.seg button[aria-pressed="true"] { border-color: var(--ink); background: var(--accent-2); color: #3b2a00; }
.seg button:disabled { cursor: default; }
.seg button:disabled:not([aria-pressed="true"]) { opacity: .55; }

/* ---- turnos ---- */
.turn, .wait, .result, .reveal, .end, .lobby { display: flex; flex-direction: column; gap: 16px; }
.turn-head, .reveal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.step-pill { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: var(--bg); padding: 4px 10px; border-radius: 999px; }
.timer { font-family: var(--font-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.timer.urgent { color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.turn-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.1; margin: 0; text-wrap: balance; }
.prompt-figure { margin: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.prompt-figure img { width: 100%; aspect-ratio: 2 / 3; max-height: 58vh; object-fit: contain; background: #fff; }
.prompt-figure figcaption { padding: 8px 12px; font-size: .9rem; color: var(--muted); background: var(--card); border-top: 1.5px solid var(--line); }
.empty-drawing { margin: 0; padding: 16px; border: 2px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; background: var(--card); }
.text-form { display: flex; flex-direction: column; gap: 10px; }
.text-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.text-actions .btn { flex: 1 1 140px; }

/* ---- pantalla de dibujo: el lienzo se lleva todo el espacio posible ---- */
body[data-screen="s-draw"] .topbar { display: none; }
.brand span:last-child { white-space: nowrap; }
@media (max-width: 420px) { .brand { font-size: 1rem; } }
body[data-screen="s-draw"] .app { height: 100%; min-height: 0; }
.screen:not(.draw-screen) > section, .book, .gallery { flex-shrink: 0; }
.draw-screen {
  max-width: 820px; gap: 6px; height: 100%; min-height: 0;
  padding-block: 6px;
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
}
.draw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.draw-prompt { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }
.step-mini { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draw-what {
  font-family: var(--font-display); font-size: clamp(1.05rem, 4.4vw, 1.3rem); line-height: 1.12;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.draw-head-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.draw-head-right .timer { font-size: 1.15rem; }
.done-btn { min-height: 40px; padding: 8px 14px; font-size: 1rem; box-shadow: 0 2px 0 var(--ink); }

.pad { flex: 1; min-height: 160px; position: relative; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, var(--bg)); overflow: hidden; }
.pad-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; overscroll-behavior: contain; }
.pad-inner { position: absolute; left: 0; top: 0; margin: 0; padding: 0; transform-origin: 0 0; }
.pad-canvas { display: block; background: #fff; border-radius: 4px; box-shadow: 0 1px 0 #0002, 0 4px 14px -8px #0005; touch-action: none; }
.pad[data-tool="pen"] .pad-stage, .pad[data-tool="eraser"] .pad-stage { cursor: crosshair; }
.pad[data-tool="fill"] .pad-stage { cursor: cell; }
.pad[data-tool="hand"] .pad-stage { cursor: grab; }
.zoom-badge { position: absolute; top: 8px; right: 8px; z-index: 5; pointer-events: none; background: var(--ink); color: var(--bg); font-weight: 700; font-size: .8rem; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }

.toolbar { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 5px; box-shadow: var(--shadow); }
.tool-row { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.tool { height: 42px; min-width: 0; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 2px solid transparent; background: var(--bg); cursor: pointer; color: var(--ink); touch-action: manipulation; }
.tool svg { width: 20px; height: 20px; }
.tool.active { border-color: var(--ink); background: var(--accent-2); color: #3b2a00; }
.tool:disabled { opacity: .35; cursor: default; }
.tool.danger { color: var(--accent); }
.tool.danger.armed { background: var(--accent); color: #fff; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1.5px var(--ink); display: block; }
.size-preview { display: block; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); }

.pop {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px;
  box-shadow: 0 14px 40px -12px #0007;
}
.size-pop { display: flex; justify-content: space-between; gap: 4px; }
.size-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; background: var(--bg); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; padding: 0; }
.size-btn.active { border-color: var(--ink); }
.size-dot { display: block; border-radius: 50%; box-shadow: 0 0 0 1px #0003; }
.color-pop { display: grid; grid-template-columns: repeat(8, minmax(28px, 1fr)); gap: 6px; max-height: 60vh; overflow-y: auto; }
.color-btn { aspect-ratio: 1; min-height: 34px; border-radius: 50%; border: 2px solid #0002; background: var(--c); cursor: pointer; padding: 0; position: relative; touch-action: manipulation; }
.color-btn.active { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.color-btn.custom { background: conic-gradient(#ff3b3b, #ffd21f, #2ec4b6, #2563eb, #d946ef, #ff3b3b); display: block; overflow: hidden; }
.color-btn.custom::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--c, transparent); }
.color-btn.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
@media (max-width: 360px) { .tool svg { width: 18px; height: 18px; } .tool { height: 38px; } }

/* ---- espera ---- */
.wait { align-items: stretch; text-align: center; }
.wait .timer { text-align: center; }
.wait-badge { width: 64px; height: 64px; margin: 8px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 2rem; transform: rotate(-8deg); }
.player-list.compact .player { text-align: left; }
.wait-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---- dúo ---- */
.score-pill { font-weight: 700; background: var(--accent-2); color: #3b2a00; padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.duo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.duo-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); min-width: 0; }
.duo-card-head { font-size: .85rem; font-weight: 700; color: var(--muted); }
.secret { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; margin: 0; }
.duo-img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #fff; border-radius: 10px; border: 1.5px solid var(--line); }
.guess-line { margin: 0; overflow-wrap: anywhere; }
.pts { align-self: flex-start; font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: .9rem; }
.pts-3 { background: var(--ok); color: #fff; }
.pts-1 { background: var(--accent-2); color: #3b2a00; }
.pts-0 { background: var(--bg); color: var(--muted); }

/* ---- revelación ---- */
.book { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.entry { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.entry-by { font-size: .85rem; font-weight: 700; color: var(--muted); }
.bubble { margin: 0; align-self: flex-start; max-width: 100%; background: var(--card); border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; box-shadow: var(--shadow); }
.entry-write .bubble { background: var(--accent-2); color: #3b2a00; }
.entry-img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #fff; border-radius: 12px; border: 2px solid var(--ink); box-shadow: var(--shadow); }
.entry.pop-in { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.96) rotate(-1deg); } }
.reveal-controls { display: flex; gap: 8px; position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.reveal-controls .btn { flex: 1; }
.reveal-controls .btn.primary { flex: 2; }

/* ---- final ---- */
.gallery { display: flex; flex-direction: column; gap: 22px; }
.gallery-book { background: color-mix(in srgb, var(--card) 70%, transparent); border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px; }
.end-actions { display: flex; flex-direction: column; gap: 8px; }

/* ---- capas ---- */
.sheet-backdrop { position: fixed; inset: 0; background: #0007; display: grid; place-items: end center; z-index: 50; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.sheet { background: var(--card); border-radius: 20px; padding: 20px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.sheet p { margin: 0; color: var(--muted); }
.sheet-actions { display: flex; gap: 8px; margin-top: 6px; }
.sheet-actions .btn { flex: 1; }
/* avisos: franja bajo la barra de arriba que empuja el contenido (nunca tapa un botón) */
.toast { background: var(--ink); color: var(--bg); padding: 7px 16px; font-weight: 700; font-size: .9rem; line-height: 1.3; text-align: center; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   Pantallas tipo app: cada vista cabe en la pantalla, sin deslizar
   ========================================================= */
.app { height: 100%; min-height: 0; }
.screen { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fit-screen { gap: 12px; padding-block: 10px 14px; }
.fit-screen > * { flex-shrink: 0; }
.fit-screen > .grow, .grow { flex: 1 1 auto; min-height: 0; }
.spacer { min-height: 0; }
body[data-screen="s-home"] .topbar { display: none; }

/* caritas */
.avatar { display: inline-block; width: 1em; height: 1em; vertical-align: middle; flex-shrink: 0; line-height: 1; text-align: center; }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar.tiny { width: 1.35em; height: 1.35em; margin-right: .35em; vertical-align: -0.35em; }
.who { display: inline; }

/* inicio */
.home-screen { justify-content: center; max-width: 460px; }
.home-hero { display: flex; align-items: center; gap: 14px; padding-inline: 4px; }
.home-logo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--accent-2); font-size: 2rem; transform: rotate(-7deg); box-shadow: 0 3px 0 var(--ink); border: 2px solid var(--ink); }
.home-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: .98; margin: 0; }
.home-title span { color: var(--accent); }
.home-title .mc { font-style: normal; font-size: .55em; vertical-align: .35em; background: var(--ink); color: var(--bg); border-radius: 8px; padding: .05em .3em; }
.emoji-pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); cursor: pointer; text-align: left; font-weight: 700; color: var(--ink); }
.emoji-pick:active { transform: translateY(1px); }
.emoji-current .avatar { width: 48px; height: 48px; }
.emoji-pick-text { flex: 1; }
.chev { font-size: 1.6rem; line-height: 1; color: var(--muted); }
.home-actions { margin-top: 2px; gap: 10px; }
.sheet .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; max-height: 62vh; overflow-y: auto; padding: 2px; }
.emoji-btn { height: auto; aspect-ratio: 1; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
.emoji-btn .avatar { width: 100%; height: 100%; }
.emoji-btn[aria-checked="true"] { border-color: var(--ink); background: var(--accent-2); transform: none; box-shadow: 0 0 0 3px var(--accent-2); }

/* fichas de jugador */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; overflow-y: auto; }
.player.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--line); max-width: 100%; }
.player.chip .p-emoji { width: 30px; height: 30px; font-size: 1.3rem; }
.player.chip .p-name { font-size: .95rem; }
.player.chip .p-tags { gap: 4px; }
.player.chip .tag { font-size: .62rem; padding: 1px 6px; }
.player.chip .p-status { width: 22px; height: 22px; font-size: .8rem; }

/* sala */
.code-card { padding: 12px 16px; text-align: left; align-items: stretch; }
.code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.code-card .big-code { font-size: clamp(2rem, 10vw, 2.6rem); }
.players-card { padding: 12px 14px; gap: 8px; }
.mode-card { padding: 12px 14px; gap: 8px; }
.mode-text { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.35; }
.mode-card .seg button { min-height: 36px; padding: 6px 8px; font-size: .9rem; }
.mode-card .label { margin-bottom: 4px; }

/* escribir / adivinar */
#s-text .turn-title { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
.prompt-figure { display: flex; flex-direction: column; }
.prompt-figure img { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: contain; }
.prompt-figure figcaption { flex-shrink: 0; }

/* espera */
#s-wait { text-align: center; }
.wait-top { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#s-wait .chips { justify-content: center; }
.wait-actions { justify-content: center; }

/* resultado del dúo: las dos tarjetas a la vez */
#s-result .duo-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
#s-result .duo-card { padding: 8px; gap: 5px; min-height: 0; overflow: hidden; }
#s-result .duo-card-head { font-size: .78rem; }
#s-result .secret { font-size: 1rem; }
#s-result .duo-img { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; object-fit: contain; }
#s-result .grow-img { flex: 1 1 auto; display: grid; place-items: center; }
#s-result .guess-line { font-size: .9rem; line-height: 1.25; }
#s-result .pts { font-size: .8rem; }
.bottom-controls { display: flex; gap: 8px; }
.bottom-controls .btn { flex: 1; }
.bottom-controls .btn.primary { flex: 2; }

/* revelación: un paso por pantalla */
.reveal-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.reveal-head .h2 { font-size: 1.25rem; }
.dots { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.dot { width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.dot.on { background: var(--ink); }
.dot.now { background: var(--accent); }
.reveal-prev { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: var(--card); border: 1.5px dashed var(--line); min-width: 0; }
.prev-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); flex-shrink: 0; }
.prev-text { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.prev-img { width: 40px; height: 60px; object-fit: contain; background: #fff; border-radius: 6px; border: 1.5px solid var(--line); }
.reveal-stage { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.stage-by { font-weight: 700; color: var(--muted); font-size: .95rem; flex-shrink: 0; }
/* el marco se ciñe al dibujo, sea vertical u horizontal */
.stage-frame { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; touch-action: manipulation; }
.stage-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; border-radius: 14px; border: 2px solid var(--ink); box-shadow: var(--shadow); }
.stage-frame .zoom-hint { position: absolute; right: 8px; bottom: 8px; left: auto; top: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line); box-shadow: 0 4px 12px -6px #0006; font-size: 1rem; pointer-events: none; }
.stage-bubble { margin: auto 0; align-self: center; text-align: center; max-width: 100%; border: 2.5px solid var(--ink); border-radius: 24px 24px 24px 6px; padding: 22px 24px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 8vw, 2.6rem); line-height: 1.1; overflow-wrap: anywhere; box-shadow: var(--shadow); background: var(--card); }
.stage-bubble.is-write { background: var(--accent-2); color: #3b2a00; }
.reveal-stage.pop-in { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }

/* final */
.end-screen { text-align: center; }
.end-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.end-badge { font-size: 3.4rem; line-height: 1; }
.end-actions { gap: 6px; }
.small-print { font-size: .8rem; }
.topbar.in-room .brand span:last-child { display: none; }
.topbar.in-room .brand-mark { width: 38px; height: 38px; }
.stage-bubble.compact { margin: 0; font-size: clamp(1.3rem, 6.5vw, 2rem); padding: 12px 18px; }
.is-guess-view .stage-by { text-align: center; }
.prompt-figure figcaption:empty { display: none; }

/* inicio: centrado que nunca corta por arriba en pantallas pequeñas o con letra grande */
.home-screen { justify-content: flex-start; }
.home-screen > :first-child { margin-top: auto; }
.home-screen > :last-child { margin-bottom: auto; }
.end-center { justify-content: flex-start; }
.end-center > :first-child { margin-top: auto; }
.end-center > :last-child { margin-bottom: auto; }
.home-actions.invited .or, .home-actions.invited .join-row { display: none; }
.home-actions.invited #createBtn { min-height: 40px; padding: 8px; font-size: 1rem; box-shadow: none; border-width: 1.5px; }
@media (max-height: 700px) {
  .home-logo { width: 48px; height: 48px; font-size: 1.5rem; border-radius: 14px; }
  .home-title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .form-card { padding: 14px; gap: 8px; }
  .emoji-current .avatar { width: 40px; height: 40px; }
  .btn.big { padding: 12px; }
  .join-box { padding: 10px; gap: 8px; }
}

/* aviso de que se acaba el tiempo */
body.hurry::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
  box-shadow: inset 0 0 0 6px var(--accent), inset 0 0 40px 10px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: hurry 1s ease-in-out infinite;
}
@keyframes hurry { 50% { opacity: .35; } }
.icon-btn { padding: 4px 8px; font-size: 1.05rem; line-height: 1; min-height: 34px; }

/* marca Dibulíos */
.brand-logo { width: 36px; height: 36px; display: block; }
.topbar.in-room .brand-name { display: none; }
.home-logo { width: 72px; height: 72px; background: none; border: 0; box-shadow: none; transform: rotate(-6deg); border-radius: 0; filter: drop-shadow(0 3px 0 var(--ink)); }
.wordmark { font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1; letter-spacing: .01em; }
.wordmark span { display: inline-block; }
.wordmark span:nth-child(1) { color: #ff5a3c; transform: rotate(-6deg); }
.wordmark span:nth-child(2) { color: var(--ink); transform: translateY(3px); }
.wordmark span:nth-child(3) { color: #2563eb; transform: rotate(5deg); }
.wordmark span:nth-child(4) { color: var(--ink); }
.wordmark span:nth-child(5) { color: #2aa84a; transform: rotate(-5deg) translateY(2px); }
.wordmark span:nth-child(6) { color: var(--ink); }
.wordmark span:nth-child(7) { color: #d946ef; transform: rotate(6deg); }
.wordmark span:nth-child(8) { color: #ffb000; transform: rotate(-4deg) translateY(3px); }
.tagline { margin: 6px 0 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
@media (max-height: 700px) { .home-logo { width: 56px; height: 56px; } .wordmark { font-size: clamp(2rem, 9vw, 2.6rem); } }
button.brand { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }

/* pausa y lienzo en blanco */
.pause-bar { display: flex; align-items: center; gap: 10px; margin: 6px max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); padding: 8px 10px 8px 12px; border-radius: 14px; background: var(--accent-2); color: #3b2a00; font-weight: 700; font-size: .9rem; line-height: 1.25; box-shadow: var(--shadow); }
.pause-text { flex: 1; min-width: 0; }
.pause-bar .btn-ghost { border-color: #3b2a0055; color: #3b2a00; background: #ffffff66; flex-shrink: 0; }
.pause-icon { font-size: 1.2rem; }
body.is-paused .pad, body.is-paused #textForm { opacity: .55; }
.blank-canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 18px; border-radius: 14px; background: #fff; color: #5e6888; border: 2px dashed #cfd8ea; min-height: 120px; }
.blank-canvas strong { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: #1d2747; }
.blank-emoji { font-size: 2.2rem; line-height: 1; }
.reveal-stage .blank-canvas { flex: 1 1 auto; }

/* hojas emergentes: nunca más altas que la pantalla */
.sheet-backdrop { place-items: center; }
.sheet { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.emoji-sheet { display: flex; flex-direction: column; min-height: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.emoji-sheet .emoji-grid { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.topbar:not(.in-room) { display: none; }

/* modo una persona y cuaderno */
.home-solo { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.home-solo .btn-ghost { background: var(--card); }
body.solo .step-mini { white-space: normal; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; overflow-y: auto; align-content: start; }
.book-item { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; text-align: left; color: var(--ink); }
.book-item img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 9px; background: #fff; }
.book-cap { font-size: .8rem; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-empty { grid-column: 1 / -1; min-height: 220px; }
.book-sheet { display: flex; flex-direction: column; gap: 10px; }
.book-sheet img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: contain; background: #fff; border-radius: 12px; border: 2px solid var(--ink); }
.book-prompt { margin: 0; font-weight: 700; color: var(--ink); }
/* lo que hay que dibujar va en su propia fila, a todo el ancho (en el cuaderno y en las salas): así cabe entero */
.draw-head { flex-wrap: wrap; row-gap: 4px; }
.draw-head-right { width: 100%; justify-content: flex-end; }
body.solo .draw-head-right #soloExitBtn { margin-right: auto; }
.draw-prompt { order: 2; flex-basis: 100%; }
.draw-head-right .btn-ghost { white-space: nowrap; }

/* botón de color: aro de arcoíris con el color actual dentro */
#colorToggle { background: conic-gradient(from 0deg, #ff3b3b, #ffb000, #ffd21f, #2aa84a, #3fc8ef, #2563eb, #9b5de5, #d946ef, #ff3b3b); border-color: transparent; }
#colorToggle .swatch { width: 20px; height: 20px; border: 3px solid #fff; box-shadow: 0 0 0 1px #0003; }
#colorToggle.active { border-color: var(--ink); background: conic-gradient(from 0deg, #ff3b3b, #ffb000, #ffd21f, #2aa84a, #3fc8ef, #2563eb, #9b5de5, #d946ef, #ff3b3b); }

/* color libre */
.recent-colors { display: contents; }
.recent-colors[hidden] { display: none; }
.color-btn[hidden] { display: none; }
/* colores de la parte anterior (Tríptico): una motita naranja que los distingue */
.color-btn.from-prev::before { content: ""; position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent, #ff5a3c); border: 2px solid var(--card, #fff); }
.free-color { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1.5px solid var(--line); margin-top: 2px; }
.free-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hue-bar, .shade-bar { position: relative; height: 30px; border-radius: 999px; border: 2px solid #0002; touch-action: none; cursor: pointer; }
.hue-bar { background: linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(359 100% 50%)); }
.shade-bar { --h: 0; --s: 100%; background: linear-gradient(to right, #fff, hsl(var(--h) var(--s) 50%), #000); }
.bar-knob { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #1d2747, 0 2px 6px #0005; transform: translate(-50%, -50%); pointer-events: none; }
.book-note { font-size: .8rem; line-height: 1.35; }
.book-sheet .sheet-actions { flex-wrap: wrap; } .book-sheet .sheet-actions .btn { flex: 1 1 30%; padding-inline: 8px; }
.toolbar { --paint: #1b1b1f; }
.pad[data-tool="spray"] .pad-stage { cursor: crosshair; }
.book-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.book-sheet-head .book-prompt { flex: 1; min-width: 0; }
.trash-btn { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 32px; min-width: 32px; padding: 0 7px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; font-weight: 700; font-size: .8rem; }
.trash-btn.armed { background: var(--accent); border-color: var(--accent); color: #fff; }
.book-sheet .sheet-actions .btn { flex: 1 1 0; }
.tool-row { grid-template-columns: repeat(10, minmax(0, 1fr)); }
/* Lápiz: la esquinita indica que al tocarlo se elige el tipo de trazo */
.brush-btn { position: relative; }
.brush-btn::after { content: ""; position: absolute; right: 3px; bottom: 3px; border-style: solid; border-width: 0 0 7px 7px; border-color: transparent transparent currentColor transparent; opacity: .75; }
.brush-btn.no-menu::after { display: none; }
.brush-pop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.brush-pop.shape-pop { display: flex; }
.brush-opt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 2px solid transparent; background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; touch-action: manipulation; }
.brush-opt.active { border-color: var(--ink); background: var(--accent-2); color: #3b2a00; }
.pad[data-tool="water"] .pad-stage { cursor: crosshair; }

.pad-over { position: absolute; left: 0; top: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; border-radius: 4px; }
.pad[data-tool="marker"] .pad-stage { cursor: crosshair; }
.home-screen { position: relative; }
.home-fabs { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 5; display: flex; gap: 8px; }
.home-fabs .btn-ghost { background: var(--card); }

/* versión nueva e instalación */
.update-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 6px max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: .9rem; }
.update-bar .btn-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.install-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 34px 12px 12px; border-radius: 16px; background: var(--card); border: 2px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); }
.install-card img { width: 40px; height: 40px; flex-shrink: 0; }
.install-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: .85rem; line-height: 1.3; color: var(--muted); }
.install-text strong { color: var(--ink); font-size: .95rem; }
.small-btn { min-height: 38px; padding: 6px 14px; font-size: .9rem; box-shadow: 0 2px 0 var(--ink); }
.install-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--muted); font-size: .9rem; padding: 4px; cursor: pointer; }

/* cabecera del lienzo: nunca se sale de la pantalla */
.draw-head-right { min-width: 0; }
.draw-head-right .btn-ghost { flex: 0 1 auto; min-width: 0; padding: 6px 10px; overflow: hidden; text-overflow: ellipsis; }
.draw-head-right .done-btn { flex: 0 0 auto; padding-inline: 12px; }
body.solo .draw-head-right { justify-content: flex-start; gap: 6px; }
body.solo .draw-head-right .done-btn { margin-left: auto; }
body.solo .draw-head-right #soloExitBtn { margin-right: 0; }
@media (max-width: 380px) { .draw-head-right .btn-ghost { padding: 6px 8px; font-size: .85rem; } .draw-head-right .done-btn { padding-inline: 10px; font-size: .95rem; } }

/* ---------- tabletas ---------- */
@media (min-width: 700px) and (min-height: 600px) {
  html { font-size: 18px; }
  body { font-size: 18px; }
  .home-screen { max-width: 520px; }
  .home-logo { width: 88px; height: 88px; }
  .tool { height: 52px; }
  .tool svg { width: 24px; height: 24px; }
  .swatch { width: 26px; height: 26px; }
  .screen:not(.draw-screen):not(.home-screen) { max-width: 720px; }
}
/* tableta en horizontal: herramientas en un lateral para dar más altura al lienzo */
@media (min-width: 900px) and (orientation: landscape) {
  .draw-screen { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); max-width: 1200px; column-gap: 12px; }
  .draw-head { grid-column: 1 / -1; }
  .pad { grid-column: 1; grid-row: 2; min-height: 0; }
  .toolbar { grid-column: 2; grid-row: 2; align-self: center; }
  .tool-row { grid-template-columns: repeat(2, 56px); gap: 6px; }
  .pop { left: auto; right: calc(100% + 10px); bottom: auto; top: 0; width: 340px; }
  .size-pop { flex-wrap: wrap; justify-content: center; }
}
.book-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ¿Cómo se juega? */
.how-link { margin: 4px 0 0; padding: 2px 0; background: none; border: 0; color: var(--accent, #6c4cf1); font: inherit; font-size: .85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.how-intro { margin: 0; }
.how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.how-steps li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.35; }
.how-steps li span { font-size: 1.3rem; line-height: 1; width: 1.6rem; text-align: center; flex: none; }
.how-sheet .sheet-actions .btn { flex: 1; }

/* ---------- modo votación ---------- */
.mode-seg button { font-size: .95rem; }
#s-vote .turn-title.vote-phrase { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 5.5vw, 1.7rem); line-height: 1.1; margin: 0; text-align: center; }
.stars { display: flex; justify-content: center; gap: 4px; flex-shrink: 0; }
.stars button { background: none; border: 0; padding: 0 2px; font-size: clamp(2.4rem, 12vw, 3.2rem); line-height: 1; color: var(--line); cursor: pointer; transition: transform .12s, color .12s; -webkit-tap-highlight-color: transparent; }
.stars button.on { color: #ffb400; text-shadow: 0 2px 0 #b97a00; }
.stars button:active { transform: scale(1.2); }
.stars-label { margin: 0; text-align: center; font-weight: 700; color: var(--muted); min-height: 1.3em; flex-shrink: 0; }
#s-vote .prompt-figure { flex: 1 1 0; min-height: 0; }

/* resultado de cada ronda: más dibujos, más columnas */
#s-result .vote-cards .vote-round-phrase { grid-column: 1 / -1; text-align: center; font-size: 1.1rem; align-self: center; }
.vote-card .duo-card-head { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; }
.vote-card .duo-card-head .who { overflow: hidden; text-overflow: ellipsis; }
.vote-place { font-size: 1rem; flex-shrink: 0; }
.vote-pts { background: var(--accent-2); color: #3b2a00; align-self: center; }

/* podio final */
body.vote-end .end-center { gap: 8px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 6px; width: 100%; max-width: 380px; }
.podium-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.podium-faces { display: flex; justify-content: center; }
.podium-faces .avatar + .avatar { margin-left: -14px; }
.podium-avatar { width: 52px; height: 52px; }
.p1 .podium-avatar { width: 68px; height: 68px; }
.podium-name { font-weight: 700; font-size: .9rem; max-width: 100%; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.podium-pts { font-size: .85rem; font-weight: 700; color: var(--muted); }
.podium-block { width: 100%; display: grid; place-items: start center; padding-top: 6px; font-size: 1.6rem; border: 2px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--accent-2); }
.p1 .podium-block { height: 96px; background: #ffd21f; }
.p2 .podium-block { height: 68px; background: #dfe3ea; }
.p3 .podium-block { height: 48px; background: #f0b98a; }
.podium.animate .podium-col { animation: rise .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.podium.animate .p3 { animation-delay: .3s; }
.podium.animate .p2 { animation-delay: 1.1s; }
.podium.animate .p1 { animation-delay: 2.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.rank-rest { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; max-width: 380px; font-size: .88rem; }
.rank-row { display: flex; align-items: center; gap: 4px; }
.rank-place, .rank-pts { font-weight: 700; color: var(--muted); }

/* ---------- móvil en horizontal ---------- */
.pad-inner { flex: none; }
@media (orientation: landscape) and (max-height: 540px) {
  /* Inicio: dos columnas, sin deslizar */
  .home-screen {
    display: grid; max-width: 860px; align-content: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "hero form" "solo form" "install form";
    column-gap: 24px; row-gap: 12px; padding-block: 8px;
  }
  .home-screen > :first-child { margin-top: 0; }
  .home-screen > :last-child { margin-bottom: 0; }
  .home-hero { grid-area: hero; flex-direction: column; text-align: center; gap: 6px; align-self: end; }
  .home-hero .home-logo { width: 56px; height: 56px; }
  .home-solo { grid-area: solo; align-self: start; }
  .install-card { grid-area: install; align-self: start; padding-block: 8px; }
  .form-card { grid-area: form; align-self: center; padding: 12px 14px; gap: 6px; }
  .form-card .input { padding-block: 8px; }
  .emoji-current .avatar { width: 36px; height: 36px; }
  .home-actions { gap: 6px; margin-top: 0; }
  .home-actions .btn.big { padding: 10px; }
  .join-box { padding: 8px; gap: 6px; }

  /* Dibujar: lienzo tumbado a la izquierda, frase y herramientas a la derecha */
  .draw-screen {
    display: grid; max-width: none; column-gap: 8px; row-gap: 6px; padding-block: 4px;
    grid-template-columns: minmax(0, 1fr) 210px; grid-template-rows: auto minmax(0, 1fr);
  }
  .pad { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
  .draw-head { grid-column: 2; grid-row: 1; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; }
  .draw-what { font-size: 1.05rem; -webkit-line-clamp: 3; }
  .draw-head-right, body.solo .draw-head-right { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
  .draw-head-right .done-btn { margin-left: auto; }
  .toolbar { grid-column: 2; grid-row: 2; align-self: end; }
  .tool-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .tool { height: 36px; }
  .pop { left: auto; right: calc(100% + 8px); bottom: 0; top: auto; width: min(360px, 55vw); }
  .color-pop { max-height: calc(100dvh - 24px); }
  .size-pop { flex-wrap: wrap; justify-content: center; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .home-fabs { top: auto; right: auto; bottom: max(10px, env(safe-area-inset-bottom, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); }
}
@media (orientation: landscape) and (max-height: 540px) {
  .draw-prompt { flex: none; order: -1; }
  .draw-head, body.solo .draw-head { overflow: hidden; flex-wrap: nowrap; }
}

/* sala: la lista de jugadores nunca se sale de su cuadro (si no caben, se desliza dentro) */
.players-card { overflow: hidden; min-height: 92px; }
.players-card .chips { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mode-seg button { min-height: 38px; }

/* sala más compacta: cabe en móviles pequeños */
#s-lobby .players-card { min-height: 112px; }
#s-lobby { gap: 10px; }
.mode-card .seg { flex-wrap: nowrap; }
.mode-card .seg button { flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-card .h3 { font-size: 1.05rem; line-height: 1.2; }
.mode-card .mode-text { font-size: .85rem; }
.mode-card .setting .label { font-size: .7rem; }
@media (max-height: 700px) {
  .code-card { padding: 8px 14px; }
  .code-card .big-code { font-size: 1.8rem; }
  #s-lobby .btn.big { padding: 12px; }
}
/* sala con el móvil en horizontal: dos columnas */
@media (orientation: landscape) and (max-height: 540px) {
  #s-lobby {
    display: grid; max-width: 900px; padding-block: 6px 10px; gap: 8px 14px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "code mode" "players mode" "players start";
  }
  #s-lobby .code-card { grid-area: code; }
  #s-lobby .players-card { grid-area: players; min-height: 0; }
  #s-lobby .mode-card { grid-area: mode; overflow-y: auto; }
  #s-lobby #startBtn { grid-area: start; }
}
#copyBtn { white-space: nowrap; padding-inline: 12px; }
.code-card .label { white-space: nowrap; }
.mode-card .mode-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 380px) {
  .mode-card .seg button { font-size: .8rem; padding-inline: 2px; }
  #copyBtn { font-size: .9rem; padding-inline: 10px; }
}
.book-item img { object-fit: contain; }

/* resultados de la votación: dos por fila, se desliza si hay muchos; tocar amplía */
#s-result .vote-cards { grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
#s-result .vote-cards .vote-round-phrase { grid-column: 1 / -1; text-align: center; font-size: 1.1rem; }
#s-result .vote-card { cursor: zoom-in; overflow: visible; }
#s-result .vote-card .duo-img, #s-result .vote-card .grow-img { flex: none; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.zoom-sheet { gap: 8px; }
.zoom-wrap { flex: 1 1 auto; min-height: 0; height: calc(100dvh - 210px); overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; border-radius: 12px; }
.zoom-wrap img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; border-radius: 12px; border: 2px solid var(--ink); transform-origin: center center; user-select: none; -webkit-user-select: none; }
.zoom-wrap.zoomed img { border-radius: 0; }
.zoom-tip { margin: 0; text-align: center; font-size: .8rem; color: var(--muted); }
.zoom-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }

/* tiempo para dibujar: barra */
.time-value { font-variant-numeric: tabular-nums; }
.time-range { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; margin: 2px 0 0; touch-action: pan-y; --fill: 20%; }
.time-range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--fill), var(--line) var(--fill)); }
.time-range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--line); }
.time-range::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--accent); }
.time-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: var(--card); border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.time-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 3px solid var(--ink); }
.time-range:disabled { opacity: .6; }
.time-hint { font-size: .75rem; color: var(--muted); }

/* iPad/iPhone: los desplegables de colores siempre por encima del lienzo (también con zoom) */
.pad { z-index: 0; isolation: isolate; }
.toolbar { z-index: 30; }
.pop { transform: translateZ(0); -webkit-transform: translateZ(0); }

/* frase a dibujar: siempre la misma letra, sea corta o larga (cabe entera en hasta 3 líneas) */
.draw-what { -webkit-line-clamp: 3; }
@media (max-width: 400px) {
  .draw-head { gap: 6px; }
  .draw-head-right .timer { font-size: 1rem; }
  .done-btn { padding-inline: 10px; }
}

/* carita dibujada */
.avatar .face-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #fff; }
.emoji-btn.draw-own { font-size: 1.6rem; border: 2px dashed var(--line); background: var(--card); }
/* guardar un dibujo en el cuaderno */
.save-book { align-self: center; flex-shrink: 0; font-size: .85rem; padding: 4px 12px; }
.save-book:disabled { opacity: .7; }
.zoom-sheet .sheet-actions .btn { flex: 1; }
.duo-img { cursor: zoom-in; }
.other-code { align-self: center; margin-top: 2px; }
.players-need { margin: 0; font-size: .88rem; font-weight: 700; color: var(--accent); }
.portrait-of { font-size: .8rem; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#s-vote .vote-phrase .who { justify-content: center; }

/* carita: círculo guía sobre el lienzo; fuera se ve apagado */
.face-guide { display: none; }
body.face-mode .face-guide { display: block; position: absolute; left: 0; top: 16.6667%; width: 100%; height: 66.6667%; border-radius: 50%; pointer-events: none; z-index: 3; box-shadow: 0 0 0 3px var(--ink), 0 0 0 2000px rgba(20, 24, 40, .42); }
body.face-mode .pad-inner { overflow: hidden; }

/* elegir modo de juego */
.mode-pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); cursor: pointer; color: var(--ink); }
.mode-pick:disabled { cursor: default; }
.mode-pick-emoji { font-size: 1.7rem; line-height: 1; flex: none; }
.mode-pick-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.mode-pick-text strong { font-size: 1rem; }
.mode-pick .chev { font-size: 1.4rem; color: var(--muted); }
.mode-pick:disabled .chev { display: none; }
.mode-sheet { max-height: calc(100dvh - 32px); }
.mode-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.mode-item { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); cursor: pointer; color: var(--ink); }
.mode-item[aria-pressed="true"] { border-color: var(--ink); background: var(--accent-2); color: #3b2a00; }
.mode-item .mi-emoji { font-size: 1.8rem; line-height: 1; flex: none; }
.mode-item .mi-text { display: flex; flex-direction: column; gap: 2px; }
.mode-item .mi-text span { font-size: .85rem; opacity: .85; line-height: 1.3; }
.mode-item .mi-min { margin-left: 8px; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--line); opacity: .9; vertical-align: 2px; }
/* degradado: mirar 10 segundos */
.memorize { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.memorize img { flex: 1 1 auto; min-height: 0; max-width: 100%; object-fit: contain; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
.memorize-title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; }
.memorize-count { margin: 0; font-family: var(--font-display); font-size: 2.6rem; color: var(--accent); line-height: 1; }
.memorize-ready { min-width: 200px; }
.memorize-wait { margin: 0; min-height: 1.3em; font-size: .9rem; font-weight: 700; color: var(--muted); }
/* dibujo extremo: la limitación */
.rule-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: none; }
.card-phrase { font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.vote-guess { flex-shrink: 0; text-align: center; }
.guess-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .75rem; }
.guess-list li { display: flex; gap: 4px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.guess-list li .who { flex: none; font-weight: 700; }
.guess-list li span:last-child { overflow: hidden; text-overflow: ellipsis; }
.guess-list li.hit { color: #1f8a3a; font-weight: 700; }
.guess-list li.near { color: #b34700; }
.rule-chip.big { font-size: .85em; padding: 2px 10px; vertical-align: middle; }

/* ---------- móviles pequeños: todo un poco más compacto para que quepa sin cortar ---------- */
.mode-card .mode-text { -webkit-line-clamp: 4; }
@media (max-width: 380px), (max-height: 700px) {
  html, body { font-size: 15px; }
  body { line-height: 1.4; }
  .fit-screen { gap: 8px; padding-block: 6px 10px; }
  .topbar { padding-block: 6px; }
  .topbar .btn-ghost, .room-chip { min-height: 32px; }
  .btn.big { padding: 11px; font-size: 1.05rem; }
  .code-card { padding: 8px 12px; }
  .code-card .big-code { font-size: 1.7rem; }
  #s-lobby .players-card { padding: 8px 12px; min-height: 96px; }
  .players-card .h2 { font-size: 1.15rem; }
  .mode-card { padding: 8px 12px; gap: 6px; }
  .mode-pick { padding: 6px 8px; gap: 8px; }
  .mode-pick-emoji { font-size: 1.4rem; }
  .mode-pick-text strong { font-size: .95rem; }
  .mode-card .mode-text { font-size: .8rem; line-height: 1.3; }
  .time-range { height: 28px; }
  .turn-title, #s-text .turn-title { font-size: 1.15rem; line-height: 1.25; }
  .big-input { font-size: 1rem; padding-block: 10px; }
  .text-actions .btn { padding-block: 10px; font-size: .95rem; }
  .draw-what { font-size: 1.05rem; }
  .step-mini { font-size: .62rem; }
  .done-btn { min-height: 36px; padding: 6px 10px; font-size: .92rem; }
  .tool { height: 38px; }
  .home-hero { gap: 10px; }
  .wordmark { font-size: clamp(1.8rem, 9vw, 2.3rem); }
  .tagline { font-size: .7rem; }
  .form-card { padding: 12px; gap: 6px; }
  .emoji-pick { padding-block: 6px; }
  .emoji-current .avatar { width: 38px; height: 38px; }
  .home-actions { gap: 6px; }
  .stage-bubble { font-size: clamp(1.3rem, 7vw, 2rem); padding: 14px 16px; }
  .stars button { font-size: clamp(2rem, 11vw, 2.6rem); }
}
@media (max-width: 340px), (max-height: 600px) {
  html, body { font-size: 14px; }
  .home-logo { width: 44px; height: 44px; }
  .wordmark { font-size: 1.7rem; }
  .how-link { font-size: .78rem; }
  .code-card .big-code { font-size: 1.5rem; }
  #copyBtn { font-size: .8rem; padding: 6px 8px; }
}
.rule-seg button { font-size: .82rem; padding-inline: 2px; }
.mode-card .seg.rule-seg button { font-size: 1.2rem; padding: 2px; min-height: 36px; }

/* sala de espera: dibujar solo / ver el cuaderno */
.lobby-extra-label { display: block; text-align: center; margin-top: 2px; }
.lobby-extra { display: flex; justify-content: center; gap: 8px; }
.lobby-extra .btn-ghost { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-inline: 8px; }

/* elegir lienzo vertical / horizontal */
.orient-btn { position: absolute; top: 8px; left: 8px; z-index: 5; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: .78rem; box-shadow: 0 4px 12px -6px #0006; cursor: pointer; touch-action: manipulation; opacity: .92; }
.orient-btn.armed { background: var(--accent); border-color: var(--accent); color: #fff; }

.wait-badge.thinking { background: var(--accent-2); color: #3b2a00; }

/* iPhone: el doble toque no amplía la página en ningún sitio (el lienzo y el visor tienen su propio zoom) */
html, *, *::before, *::after { touch-action: manipulation; }

/* compartir la historia completa (Instagram, TikTok, WhatsApp…) */
.reveal-head { position: relative; padding-right: 0; }


/* iPad/iPhone: mantener pulsado no selecciona (la mancha azul) ni abre menús; solo se puede seleccionar al escribir */
html, body, * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, canvas { -webkit-user-drag: none; user-drag: none; }
.pad, .pad-stage, .pad-inner, .pad-canvas, .pad-over { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.shape-opt svg { width: 26px; height: 26px; }
.pad[data-tool="line"] .pad-stage, .pad[data-tool="rect"] .pad-stage, .pad[data-tool="ellipse"] .pad-stage, .pad[data-tool="tri"] .pad-stage { cursor: crosshair; }

/* iPhone/iPad: con letra de menos de 16 px, Safari amplía la página al tocar un campo de texto */
input, textarea, select { font-size: max(16px, 1em) !important; }

/* Portátil u ordenador: al escribir, la frase y el campo juntos en el centro (sin el hueco del teclado del móvil) */
@media (min-width: 900px) and (pointer: fine) {
  #s-text { justify-content: center; }
  #s-text #textSpacer { display: none; }
}
.pad-guide { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Tríptico: la criatura entera, con quién dibujó cada parte */
.triptych-by { text-align: center; font-size: .85rem; line-height: 1.5; }
.triptych-holder { flex: 1 1 0; min-height: 0; display: flex; }
.triptych-holder .stage-frame { flex: 1 1 auto; }
.pad-hint { display: none; }
@media (orientation: portrait) {
  body.triptych-draw .pad-hint { display: block; position: absolute; top: 14px; left: 0; right: 0; margin: 0; text-align: center; font-weight: 700; font-size: .9rem; color: var(--muted); pointer-events: none; z-index: 1; }
}

/* Tablet u ordenador en horizontal: sala en dos columnas, con «Empezar partida» siempre a la vista */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 900px) {
  #s-lobby {
    display: grid; max-width: 1000px; padding-block: 8px 12px; gap: 10px 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "code mode" "players mode" "players start";
  }
  #s-lobby .code-card { grid-area: code; }
  #s-lobby .players-card { grid-area: players; min-height: 0; }
  #s-lobby .mode-card { grid-area: mode; overflow-y: auto; min-height: 0; }
  #s-lobby #startBtn { grid-area: start; }
}
.fit-btn { position: absolute; top: 8px; right: 8px; z-index: 6; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: .85rem; box-shadow: 0 4px 12px -6px #0006; cursor: pointer; touch-action: manipulation; }
.zoom-badge { right: auto; left: 50%; transform: translateX(-50%); }
.gallery-btn { align-self: center; }

/* compartir: vista previa grande y dos opciones */
.share-sheet { gap: 10px; }
.share-preview { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.share-preview img { max-width: 100%; max-height: calc(100dvh - 250px); width: auto; height: auto; border-radius: 12px; border: 2px solid var(--ink); box-shadow: var(--shadow); background: #fff; }
.share-wait { margin: 40px 0; color: var(--muted); font-weight: 700; }
.share-close { align-self: center; }

.leave-lobby { width: 100%; margin-top: 10px; }

/* sin «salto» al abrir: el inicio aparece cuando ya está su letra */
.fonts-wait #s-home { opacity: 0; }
#s-home { transition: opacity .18s ease; }

/* cuántos han entregado ya (sobre el lienzo, sin tapar: no se puede tocar) */
.done-count { position: absolute; top: 8px; right: 8px; z-index: 5; pointer-events: none; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--muted); border: 1.5px solid var(--line); box-shadow: 0 2px 8px #0001; }
.done-count.all { color: #1f7a3a; border-color: #8fd4a4; }

/* ---------- cuaderno: cuadrícula de miniaturas ---------- */
.book-screen { position: relative; }
.book-screen .book-grid { grid-template-columns: repeat(var(--book-cols, 2), minmax(0, 1fr)); grid-auto-rows: max-content; gap: 14px; padding: 4px 4px 96px; align-items: start; touch-action: pan-y; transition: gap .2s; }
.book-screen .book-grid.dense { gap: 6px; }
.book-screen .book-grid.dense .book-item { border-radius: 8px; }
.book-screen .book-item { display: block; height: auto; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--line), 0 4px 12px #00000012; }
.book-screen .book-item img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 0; background: #fff; }
.book-screen .book-item:active { transform: scale(.98); }
.book-foot { grid-column: 1 / -1; text-align: center; font-size: .75rem; color: var(--muted); margin: 6px 0 0; }
.book-fab { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); border-radius: 999px; padding: 12px 22px; box-shadow: 0 6px 18px #0000002e; z-index: 2; }

/* ---------- visor a pantalla completa ---------- */
.viewer { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: #14171f; color: #fff; }
.viewer[hidden] { display: none; }
.viewer-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; transition: opacity .2s; }
.viewer-x { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #ffffff14; color: #fff; display: grid; place-items: center; cursor: pointer; }
.viewer-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.viewer-title strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-title span { font-size: .75rem; opacity: .65; }
.viewer-count { flex: none; font-size: .8rem; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.viewer-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.viewer-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide { flex: 0 0 100%; height: 100%; box-sizing: border-box; padding: 6px 16px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; }
.viewer-slide img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px #0007; -webkit-user-drag: none; }
.viewer-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #0000004d; color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .75; transition: opacity .2s; }
.viewer-nav.prev { left: 8px; } .viewer-nav.next { right: 8px; }
.viewer-nav[hidden] { display: none; }
.viewer-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); transition: opacity .2s; }
.viewer-act { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 14px; background: transparent; color: #fff; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.viewer-act:active { background: #ffffff1a; }
.viewer-act.danger.armed { color: #ff7a66; background: #ff5a3c22; }
.viewer.bare .viewer-top, .viewer.bare .viewer-bar, .viewer.bare .viewer-nav { opacity: 0; pointer-events: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .viewer { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; }
  .viewer[hidden] { display: none; }
  .viewer-top { grid-column: 1 / -1; padding-block: 6px; }
  .viewer-stage { grid-column: 1; grid-row: 2; }
  .viewer-bar { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; align-content: center; padding: 6px 10px; }
}

/* ---------- llamar a la puerta / petición al anfitrión ---------- */
.knock-screen { gap: 14px; }
.knock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.knock-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.knock-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.knock-title { margin: 0; font-size: 1.45rem; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.knock-text { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.knock-text:empty { display: none; }
.knock-pending { display: flex; gap: 6px; padding: 4px 0; }
.knock-pending[hidden] { display: none; }
.knock-pending span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .25; animation: knockDot 1.2s infinite; }
.knock-pending span:nth-child(2) { animation-delay: .2s; }
.knock-pending span:nth-child(3) { animation-delay: .4s; }
@keyframes knockDot { 40% { opacity: .9; } }
.knock-screen .btn { width: 100%; }
.knock-screen .spacer[hidden] { display: none; }
.req-bar .req-text { flex: 1; min-width: 0; }
.req-bar .btn.small { padding: 6px 14px; flex-shrink: 0; }

/* ---------- compartir ---------- */
.bottom-controls:has(.share-cta:not([hidden])) { flex-wrap: wrap; }
.share-cta { flex: 1 1 100% !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent-2); color: #3b2a00; border-color: var(--ink); animation: share-in .45s ease both; }
.share-cta[hidden] { display: none; }
@keyframes share-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.share-sheet { gap: 12px; }
.share-head { display: flex; align-items: center; justify-content: space-between; }
.share-x { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.share-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.share-tabs[hidden] { display: none; }
.share-tab { border: 0; border-radius: 10px; padding: 9px 8px; font: inherit; font-weight: 700; font-size: .9rem; background: transparent; color: var(--muted); cursor: pointer; }
.share-tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px #0002; }
.share-preview img { max-height: calc(100dvh - 290px); }
.share-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.share-go, .share-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.book-tip { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); font-size: .85rem; line-height: 1.4; }

/* ---------- carita desde el cuaderno ---------- */
.face-pick-sheet { display: flex; flex-direction: column; gap: 10px; max-height: 86dvh; }
.face-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow-y: auto; min-height: 0; padding: 2px; }
.face-pick-item { padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; }
.face-pick-item img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.face-crop .crop-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.crop-box { position: relative; width: min(84vw, 62dvh, 420px); aspect-ratio: 1; overflow: hidden; background: #fff; border-radius: 6px; }
.crop-box img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; -webkit-user-drag: none; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 6px; background: radial-gradient(circle closest-side at center, transparent calc(100% - 1px), #14171fb3 100%); }
.crop-mask::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; }
.crop-bar { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.crop-bar .btn { width: min(100%, 420px); }

/* tamaño de las miniaturas del cuaderno */
.book-zoom { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); margin-left: auto; margin-right: 8px; }
.book-zoom button { width: 34px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.book-zoom button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px #0002; }
.book-screen > .row-between { flex-wrap: nowrap; gap: 6px; }
.book-screen > .row-between .h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-screen > .row-between #bookBack { flex-shrink: 0; }
.book-zoom { flex-shrink: 0; margin-right: 2px; }
.book-zoom button { width: 30px; }

/* elegir carita: dos caminos claros arriba, y las caritas hechas debajo */
.face-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.face-action { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; text-align: center; font: inherit; }
.face-action span { font-size: 1.6rem; line-height: 1.2; }
.face-action strong { font-size: .92rem; }
.face-action small { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.face-action:active { transform: scale(.98); }
.face-or { margin: 4px 0 0; font-size: .8rem; font-weight: 700; color: var(--muted); text-align: center; }

/* ---------- barra de abajo (fuera de la sala): Jugar · Cuaderno · Tú ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1.5px solid var(--line); }
.tabbar[hidden] { display: none; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; border-radius: 12px; }
.tab.on { color: var(--accent); }
.tab-face { width: 24px; height: 24px; display: grid; place-items: center; }
.tab-face .avatar { width: 24px; height: 24px; font-size: 16px; }
body.has-tabbar .screen { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
body.has-tabbar .book-fab { bottom: calc(86px + env(safe-area-inset-bottom)); }
/* inicio: «Hola, …» cuando ya te conocemos */
.hello-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.hello-row[hidden] { display: none; }
.hello-face .avatar { width: 46px; height: 46px; }
.hello-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hello-text strong { font-size: 1.05rem; }
.hello-text small { color: var(--muted); font-size: .78rem; }
.who-new { display: flex; flex-direction: column; gap: 10px; }
.who-new[hidden] { display: none; }
/* «Tú» */
.me-sheet { gap: 12px; }
.me-top { display: flex; align-items: center; gap: 14px; }
.me-face .avatar { width: 84px; height: 84px; font-size: 52px; }
.me-name { flex: 1; font-weight: 700; }
.face-actions { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
.face-actions.two { grid-template-columns: 1fr 1fr !important; }
.face-action { flex-direction: column; gap: 4px; padding: 10px 4px !important; }
.face-action strong { font-size: .8rem !important; }
.face-action[hidden] { display: none; }
.me-settings { display: flex; flex-direction: column; border-top: 1.5px solid var(--line); margin-top: 4px; }
.me-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.switch { width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .2s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }
/* sala: tu ficha se puede tocar; y un solo enlace al cuaderno */
.me-chip { cursor: pointer; }
.me-edit { margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.me-chip { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.lobby-book-link { align-self: center; margin-top: 4px; padding: 8px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* bienvenida */
.welcome-sheet { display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.welcome-invite { margin: 0; font-size: .85rem; font-weight: 700; color: var(--accent); }
.welcome-face { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; color: var(--accent); font: inherit; font-weight: 700; font-size: .8rem; }
.welcome-face .avatar { width: 92px; height: 92px; font-size: 58px; }
.welcome-sheet .error:empty { display: none; }
.welcome-google { border: 0; background: none; padding: 6px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--muted, #6b7491); cursor: pointer; }
.welcome-google[hidden] { display: none; }

/* «Tú» como pantalla */
.me-screen { overflow-y: auto; }
.me-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 560px; width: 100%; margin: 0 auto; }
.me-screen .emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.me-screen #emojiClose[hidden] { display: none; }
/* inicio: el bloque centrado, un poco por encima del centro (centro óptico) */
.home-screen > .home-book-link { margin-bottom: auto; align-self: center; }
body.has-tabbar .home-screen { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* inicio: el cuaderno, una fila sobria como la de «Hola» */
.home-screen > .home-book { margin-bottom: auto; background: var(--card); box-shadow: var(--shadow); }
.home-book-ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 50%; background: var(--bg); }

.form-card .error:empty { display: none; }

/* zoom en el visor del cuaderno */
.viewer-track { touch-action: pan-x; }
.viewer-track.zoomed { overflow-x: hidden; touch-action: none; cursor: grab; }
.viewer-slide img { transform-origin: center center; will-change: transform; }
.face-action strong { white-space: nowrap; }
/* elegir dibujo para la carita: que no se encojan las filas (se veían recortadas) */
.face-pick-grid { grid-auto-rows: max-content; align-content: start; align-items: start; }
.face-pick-item { display: block; height: auto; }
.face-pick-item img { height: auto; background: #fff; }

/* visor: el nombre se puede cambiar tocándolo */
.title-edit { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.title-edit[hidden] { display: none; }
.title-edit strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-edit .pen { opacity: .6; font-size: .85rem; flex: none; }
.title-input { width: 100%; padding: 6px 10px; border-radius: 10px; border: 0; background: #ffffff1f; color: #fff; font: inherit; font-weight: 700; font-size: 16px; }
.title-input[hidden] { display: none; }
/* el dibujo siempre entero en el visor (también los muy alargados) */
.viewer-slide img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; background: transparent; box-shadow: none; border-radius: 0; }

.how-quiet { align-self: center; margin: 2px 0 auto; color: var(--muted) !important; font-weight: 600; text-decoration: none; }
.home-screen > .home-book { margin-bottom: 0; }

/* ---------- jugar solo ---------- */
.solo-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.solo-label { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.solo-btn { flex: 1; background: var(--card); padding: 10px 8px; }
.solo-screen { gap: 12px; }
.solo-body { display: flex; flex-direction: column; gap: 12px; align-items: stretch; overflow-y: auto; min-height: 0; }
.solo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.solo-actions .btn { flex: 1 1 0; min-width: 120px; }
.solo-lead { margin: 0; line-height: 1.5; }
.solo-best { margin: 0; color: var(--muted); font-weight: 700; font-size: .9rem; text-align: center; }
.solo-wait { margin: 40px 0; text-align: center; color: var(--muted); font-weight: 700; }
.solo-setting { display: flex; flex-direction: column; gap: 6px; }
.solo-setting .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.solo-setting .seg button { border: 0; border-radius: 10px; padding: 10px 6px; font: inherit; font-weight: 700; background: transparent; color: var(--muted); cursor: pointer; }
.solo-setting .seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px #0002; }
.solo-setting .seg button:disabled { opacity: .45; }
.memo-frame { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; }
.memo-frame img { max-width: 100%; max-height: 62dvh; border-radius: 14px; box-shadow: var(--shadow); background: #fff; }
.memo-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.memo-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.memo-bar.small { height: 8px; flex: 1; }
.memo-count { margin: 0; text-align: center; font-weight: 800; font-size: 1.2rem; }
.memo-score { display: flex; flex-direction: column; align-items: center; }
.memo-score strong { font-size: 3.4rem; line-height: 1; color: var(--accent); }
.memo-score span { font-weight: 700; color: var(--muted); }
.memo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.memo-fig { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.memo-fig img, .memo-empty { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1.5px var(--line); }
.memo-empty { display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.memo-fig figcaption { font-size: .8rem; font-weight: 700; color: var(--muted); }
.memo-bars { display: flex; flex-direction: column; gap: 6px; }
.memo-barrow { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 700; }
.memo-barrow > span { width: 64px; color: var(--muted); }
.memo-barrow b { width: 28px; text-align: right; }
.memo-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.memo-mini { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.memo-mini img, .memo-mini .memo-empty { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--line); }
.memo-mini figcaption { font-weight: 800; color: var(--accent); }
.crit-reveal { display: flex; justify-content: center; }
.crit-reveal img { max-width: 100%; max-height: 64dvh; border-radius: 14px; box-shadow: var(--shadow); background: #fff; clip-path: inset(0 0 100% 0); transition: clip-path 2.2s cubic-bezier(.4,.1,.2,1); }
.crit-reveal.go img { clip-path: inset(0 0 0 0); }
.crit-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; }
.crit-strip img { width: 100%; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1.5px var(--line); }

/* pasar el cuaderno */
.transfer-link { grid-column: 1 / -1; justify-self: center; }
.transfer-sheet { display: flex; flex-direction: column; gap: 12px; }
#transferBody { display: flex; flex-direction: column; gap: 10px; }
.transfer-text { margin: 0; line-height: 1.45; }
.transfer-text.small { font-size: .82rem; color: var(--muted); }
.transfer-text.center, .center { text-align: center; }
.transfer-code { margin: 4px 0; text-align: center; font-size: 2.6rem; font-weight: 800; letter-spacing: .18em; color: var(--accent); font-variant-numeric: tabular-nums; }
.transfer-input { text-align: center; letter-spacing: .3em; font-size: 1.3rem; }
.big-ok { font-weight: 800; font-size: 1.05rem; padding: 18px 0; }
.how-more { margin: 4px 0 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
/* ---------- Memoria gamificada ---------- */
.memo-level { background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: 0 0 0 1.5px var(--line); display: flex; flex-direction: column; gap: 8px; }
.memo-level-top { display: flex; align-items: center; gap: 10px; }
.memo-badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; color: #fff; background: var(--accent); flex: none; transition: transform .3s; }
.memo-level.up .memo-badge { animation: memoPop .6s ease; }
@keyframes memoPop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-6deg); } 100% { transform: scale(1); } }
.memo-level-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.memo-level-txt strong { font-size: 1.05rem; }
.memo-level-txt span { font-size: .8rem; color: var(--muted); font-weight: 700; }
.memo-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.memo-chip { font-size: .8rem; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); white-space: nowrap; }
.memo-xp { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.memo-xp span { display: block; height: 100%; background: linear-gradient(90deg, #ffb703, var(--accent)); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.memo-next { font-size: .75rem; color: var(--muted); font-weight: 700; text-align: right; }
.memo-count { font-size: 2rem; font-variant-numeric: tabular-nums; }
.memo-result { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.memo-num { font-size: 3.6rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.memo-stars { display: flex; gap: 6px; font-size: 2rem; line-height: 1.1; }
.memo-stars span { color: color-mix(in srgb, var(--ink) 15%, transparent); transition: transform .3s; }
.memo-stars span.on { color: #ffb703; animation: memoPop .45s ease; text-shadow: 0 2px 0 #c77d00; }
.memo-verdict { font-weight: 800; }
.memo-gain { font-size: .85rem; font-weight: 700; color: var(--muted); }
.memo-new { font-size: .9rem; font-weight: 800; color: var(--accent); }
.memo-cmp { position: relative; align-self: center; width: min(76%, 36dvh); aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--line); touch-action: none; cursor: ew-resize; flex: none; }
.memo-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.memo-cmp img.top { background: #fff; }
.memo-handle { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--accent); pointer-events: none; }
.memo-handle::after { content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--accent); color: #fff; font-size: .7rem; font-weight: 900; padding: 6px 7px; border-radius: 999px; white-space: nowrap; }
.memo-tag { position: absolute; bottom: 8px; font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #000a; color: #fff; pointer-events: none; }
.memo-tag.l { left: 8px; } .memo-tag.r { right: 8px; }
.memo-empty.abs { position: absolute; inset: 0; background: transparent; box-shadow: none; }
.memo-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.memo-barrow b { width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.memo-how { margin: 0; font-size: .75rem; line-height: 1.4; color: var(--muted); text-align: center; }
.memo-barrow > span { width: auto; min-width: 52px; }
.memo-strip { grid-template-columns: repeat(5, 1fr); }
.memo-mini { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.memo-mini img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--line); }
.memo-mini-st, .memo-card-st { color: #ffb703; font-size: .8rem; letter-spacing: 1px; }
.memo-card-st.full { text-shadow: 0 0 6px #ffb70399; }
.memo-album-h { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.memo-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.memo-card { border: 0; padding: 4px 4px 2px; background: var(--card); border-radius: 12px; box-shadow: 0 0 0 1.5px var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit; }
.memo-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; }
.memo-card.locked { aspect-ratio: 2 / 3.3; justify-content: center; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: none; }
.memo-q { font-size: 1.8rem; font-weight: 900; color: color-mix(in srgb, var(--ink) 25%, transparent); }
.peek-btn:disabled { opacity: .4; }
.peek-view { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #0008; pointer-events: none; animation: peekIn .15s ease; }
.peek-view img { max-width: 86vw; max-height: 80dvh; border-radius: 14px; background: #fff; box-shadow: 0 10px 40px #0006; }
@keyframes peekIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 900px) { .s-solo-wide, #s-solo { max-width: 720px; } }

/* inicio: «Tú solo», un único bloque con tres filas iguales (Memoria, Criaturas, cuaderno) */
.home-more { width: 100%; display: flex; flex-direction: column; padding: 6px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.home-more-h { padding: 8px 12px 4px; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.more-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; position: relative; }
.more-row + .more-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 10px; height: 1px; background: var(--line); }
.more-row:hover, .more-row:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.more-row:active { transform: scale(.99); }
.more-row .chev { color: var(--muted); font-size: 1.3rem; }
.more-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 1.25rem; }
.ico-memo { background: color-mix(in srgb, #8b5cf6 16%, transparent); }
.ico-crit { background: color-mix(in srgb, #10b981 16%, transparent); }
.ico-book { background: color-mix(in srgb, #f59e0b 18%, transparent); }
.home-screen > .home-more { margin-bottom: 0; }

/* sala: el modo, igual que en la lista (nombre + frase corta) con su duración y, si toca, lo que cambia */
.mode-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mode-meta { flex: none; font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mode-card .mode-text { -webkit-line-clamp: 3; }
.mode-note { font-size: .8rem; font-weight: 700; line-height: 1.35; color: var(--accent); }
.mode-note[hidden] { display: none; }
.mode-pick:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
body.memo-draw .color-btn.from-prev::before { display: none; }
.memo-card-best { font-size: .7rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Memoria: jefes */
.boss-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; font: inherit; color: #fff; background: linear-gradient(135deg, #2b1d52, #5b2a86); box-shadow: 0 6px 18px #2b1d5240; animation: bossGlow 2.4s ease-in-out infinite; }
.boss-card:disabled { opacity: .6; animation: none; cursor: default; }
@keyframes bossGlow { 50% { box-shadow: 0 6px 26px #9b5de580; } }
.boss-emoji { font-size: 2.3rem; line-height: 1; flex: none; }
.boss-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.boss-txt strong { font-size: 1.02rem; }
.boss-txt span { font-size: .85rem; opacity: .9; line-height: 1.35; }
.boss-txt small { font-size: .75rem; opacity: .75; font-weight: 700; }
.boss-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: auto 0; }
.boss-big { font-size: 6rem; line-height: 1; transform: scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.2,1.6,.4,1), opacity .3s; }
.boss-intro.go .boss-big { transform: scale(1); opacity: 1; }
.boss-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }
.boss-need { margin: 0; font-weight: 800; color: var(--accent); }
.boss-lose { color: var(--ink); font-weight: 700; }
.more-row[hidden] { display: none; }
.memo-dare { margin-top: 6px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; }
.memo-dare:active { transform: scale(.97); }
.memo-badges { display: flex; align-items: center; gap: 4px; width: 100%; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1.5px var(--line); font: inherit; cursor: pointer; overflow-x: auto; }
.memo-badges-n { font-size: .8rem; font-weight: 800; color: var(--muted); margin-right: 6px; white-space: nowrap; }
.memo-badge-i { font-size: 1.15rem; line-height: 1; }
.memo-badge-i.off { filter: grayscale(1); opacity: .3; }
.toast { white-space: pre-line; }
.memo-badges, .boss-card, .memo-level { flex: none; }
/* Aprende a dibujar */
.learn-unit, .learn-lesson { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1.5px var(--line); text-align: left; font: inherit; color: var(--ink); cursor: pointer; flex: none; }
.learn-emoji { font-size: 2.2rem; flex: none; }
.learn-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.learn-txt strong { font-size: 1.02rem; }
.learn-txt span, .learn-txt small { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.learn-prog { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; margin-top: 3px; }
.learn-prog i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.learn-num { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.learn-lesson.done .learn-num { background: #2aa84a; color: #fff; }
.learn-lesson.locked { opacity: .5; cursor: default; }
.lesson-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin: 0 0 6px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1.5px var(--line); }
.lesson-bar[hidden] { display: none; }
.lesson-img { width: 48px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line); flex: none; cursor: zoom-in; }
.lesson-tip { margin: 0; flex: 1; font-size: .82rem; line-height: 1.35; font-weight: 600; }
.lesson-btns { display: flex; flex-direction: column; gap: 4px; flex: none; }
.lesson-btns [hidden] { display: none; }
#lessonGuide[aria-pressed="false"] { opacity: .6; }

.pad-guide.ghost { mix-blend-mode: multiply; }
.learn-direct { display: block; margin: 4px auto 0; background: none; border: 0; color: var(--ink-soft, #5b6275); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }

.memo-empty.abs { inset: auto 0 14px 0; height: auto; aspect-ratio: auto; display: flex; justify-content: center; }
.memo-empty.abs::before { content: none; }
.learn-how { background: var(--card, #fff); border-radius: 16px; padding: 14px 16px; box-shadow: 0 0 0 1.5px var(--line); }
.learn-how ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: .95rem; }
.learn-next { display: grid; gap: 2px; text-align: left; width: 100%; padding: 12px 16px; border-radius: 16px; border: 0; background: var(--accent, #ff5a3c); color: #fff; font: inherit; cursor: pointer; }
.learn-next small { opacity: .85; font-weight: 700; }
.learn-start { position: absolute; top: 8px; right: 10px; font-size: .72rem; font-weight: 800; background: var(--accent, #ff5a3c); color: #fff; padding: 3px 8px; border-radius: 99px; }
.learn-unit { position: relative; }
.learn-block { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 2px; font-size: .9rem; color: var(--muted); }
.learn-block strong { color: var(--ink); font-size: 1rem; }
.learn-block.locked strong { color: var(--muted); }
.learn-lesson[aria-disabled="true"] { opacity: .55; }
.learn-skill { margin: 6px 0 0; font-weight: 700; text-align: center; }

.lesson-mid { flex: 1; display: grid; gap: 4px; min-width: 0; }
.lesson-use { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; padding: 3px 10px; background: var(--bg, #eef1f8); box-shadow: 0 0 0 1.5px var(--line); font: inherit; font-size: .78rem; font-weight: 800; color: var(--ink); cursor: pointer; }
.lesson-use[hidden] { display: none; }
.use-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0,0,0,.18); display: inline-block; }
.sat-bar { position: relative; height: 30px; border-radius: 999px; border: 2px solid #0002; touch-action: none; cursor: pointer; background: linear-gradient(to right, hsl(var(--h, 0) 100% var(--l, 50%)), hsl(var(--h, 0) 0% var(--l, 50%))); }
.learn-solo { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 16px; border-radius: 16px; border: 2px dashed var(--line); background: var(--card, #fff); font: inherit; color: var(--ink); cursor: pointer; }
.learn-solo small { color: var(--muted); font-weight: 600; }

.pad-nav { display: none; position: absolute; right: 10px; bottom: 10px; z-index: 6; gap: 8px; align-items: center; }
.lesson-bar:not([hidden]) ~ .pad .pad-nav { display: flex; }
.pad-nav [hidden] { display: none; }
.pad-next, .pad-prev { border: 0; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 var(--ink); }
.pad-next { padding: 10px 18px; background: var(--accent, #ff5a3c); color: #fff; font-size: 1rem; }
.pad-prev { width: 42px; height: 42px; background: var(--card, #fff); color: var(--ink); font-size: 1.4rem; line-height: 1; }
.pad-next:active, .pad-prev:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--ink), 0 2px 0 var(--ink); }

.pad-legend { position: absolute; left: 10px; top: 8px; z-index: 6; margin: 0; display: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card, #fff) 92%, transparent); box-shadow: 0 0 0 1.5px var(--line); font-size: .75rem; font-weight: 700; color: #2f80ed; border: 0; font-family: inherit; cursor: pointer; }
.lesson-bar:not([hidden]) ~ .pad .pad-legend:not([hidden]) { display: inline-flex; }
.pad-legend i { width: 18px; border-top: 3px dashed #2f80ed; display: inline-block; }

/* modelo de la lección: ventana que se cierra al tocar (no deja pasar el toque al lienzo) */
.peek-view.open { pointer-events: auto; cursor: zoom-out; }
.peek-view.open::after { content: "✕ Toca para cerrar"; position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: #fff; color: #1d2747; font-weight: 800; font-size: .9rem; box-shadow: 0 4px 14px #0004; }
.pad-legend b { padding: 1px 7px; border-radius: 99px; background: #2f80ed; color: #fff; font-size: .68rem; }
.pad-legend.off { color: var(--muted); }
.pad-legend.off i { border-top-color: var(--muted); }
.pad-legend.off b { background: var(--muted); }
.learn-thumb { width: 40px; height: 60px; object-fit: cover; border-radius: 8px; margin-left: auto; flex: none; background: #fff; box-shadow: 0 0 0 1.5px var(--line); }

/* color que pide el paso de la lección: señalado con un anillo, sin elegirlo */
.color-btn.suggest { box-shadow: 0 0 0 3px var(--card, #fff), 0 0 0 6px #2f80ed; animation: suggestPulse 1.6s ease-in-out infinite; }
@keyframes suggestPulse { 50% { box-shadow: 0 0 0 3px var(--card, #fff), 0 0 0 8px #2f80ed88; } }
.llave { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 90; display: flex; gap: 8px; padding: 12px; border-radius: 14px; background: var(--card, #fff); box-shadow: 0 10px 30px #0004; }
.llave input { width: 140px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); font: inherit; }

/* De memoria */
.rep-card { margin-bottom: 4px; background: #1d2747; }
.rep-ask { display: grid; gap: 8px; text-align: center; padding: 28px 16px; border-radius: 18px; background: var(--card, #fff); box-shadow: 0 0 0 1.5px var(--line); }
.rep-ask strong { font-size: 1.6rem; }
.rep-ask p { margin: 0; color: var(--muted); }
.rep-n { font-size: .8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rep-rates { display: grid; gap: 6px; }
.rep-q { margin: 6px 0 2px; font-weight: 800; text-align: center; }
.rep-rate { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--card, #fff); box-shadow: 0 0 0 1.5px var(--line); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.rep-rate b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); flex: none; }
.rep-rate:nth-of-type(n+3) b { background: #dff3e4; }
.rep-rate.ask { box-shadow: 0 0 0 2px #e0a100; }
.rep-rate:disabled { opacity: .4; }
.rep-sum { display: grid; gap: 8px; }
.rep-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--card, #fff); box-shadow: 0 0 0 1.5px var(--line); }
.rep-row b { color: #b45309; }
.rep-row.ok b { color: #1f7a3a; }
.rep-row .learn-direct { margin: 0; padding: 4px 0; }
.rep-dots { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.rep-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.rep-dots i.on { background: #2aa84a; }
.learn-unit { padding-top: 12px; padding-bottom: 12px; }
.learn-unit .learn-emoji { font-size: 1.9rem; }

.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.learn-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 14px; border-radius: 18px; border: 0; background: var(--card, #fff); box-shadow: 0 0 0 1.5px var(--line); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.learn-tile-emoji { font-size: 2.5rem; line-height: 1; }
.learn-tile strong { font-size: .98rem; line-height: 1.2; }
.learn-tile small { font-size: .78rem; color: var(--muted); margin-top: auto; }
.learn-tile .learn-prog { width: 100%; margin-top: auto; }
.learn-tile .learn-prog + small { margin-top: 0; }
.learn-tile.new { opacity: .9; }
.learn-tile .learn-start { top: 10px; right: 10px; }
.rep-row-card.due { background: #1d2747; color: #fff; }
.rep-row-card.due small { color: #fffc; }

.learn-sec { margin: 6px 2px -2px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rep-row-card { background: color-mix(in srgb, #2f80ed 9%, var(--card, #fff)); box-shadow: 0 0 0 1.5px color-mix(in srgb, #2f80ed 35%, var(--line)); border-style: dashed; }

.keep-box { padding: 10px 12px; border-radius: 14px; background: var(--card, #fff); box-shadow: 0 0 0 1.5px var(--line); }
.keep-q { margin: 0 0 8px; font-weight: 800; font-size: .9rem; text-align: center; }
.keep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.keep-opt { display: grid; gap: 4px; justify-items: center; padding: 6px; border-radius: 12px; border: 0; background: var(--bg); box-shadow: 0 0 0 1.5px var(--line); font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.keep-opt img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #fff; border-radius: 8px; }
.keep-opt.on { box-shadow: 0 0 0 3px var(--accent, #ff5a3c); }
/* camino hasta una lección cerrada: se ilumina la cadena y la que puedes hacer ya */
.learn-lesson.path { opacity: 1 !important; box-shadow: 0 0 0 2.5px #2f80ed; background: color-mix(in srgb, #2f80ed 7%, var(--card, #fff)); }
.learn-lesson.path-go { opacity: 1 !important; box-shadow: 0 0 0 3px var(--accent, #ff5a3c); animation: pathGo 0.9s ease-in-out 3; }
@keyframes pathGo { 50% { transform: scale(1.025); } }

/* el aviso flota encima: no empuja la pantalla hacia abajo */
/* Avisos: una pastilla flotando en mitad de la pantalla, sin tapar los botones de arriba ni de abajo */
.toast { position: fixed; top: 42%; left: 50%; right: auto; transform: translate(-50%, -50%); width: max-content; max-width: min(86vw, 420px); z-index: 95; padding: 10px 18px; border-radius: 16px; pointer-events: none; box-shadow: 0 6px 20px #0004; opacity: .96; }

/* Cuentagotas */
.pick-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0 2px; padding: 8px 12px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; flex: none; grid-column: 1 / -1; }
.pick-btn:active { transform: scale(.98); }
#colorToggle.picking { box-shadow: 0 0 0 3px var(--accent); }
.pad[data-tool="pick"] .pad-stage { cursor: crosshair; }

/* Colores del dibujo (lección, parte anterior…): fila aparte encima de la paleta fija */
.palette-label { grid-column: 1 / -1; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prev-sep { grid-column: 1 / -1; height: 0; border-top: 1.5px solid var(--line); margin: 2px 0; }

/* Código de la sala mientras dibujas */
.room-chip { flex: none; padding: 5px 9px; border-radius: 10px; border: 1.5px dashed var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .78rem; font-weight: 800; letter-spacing: .12em; cursor: pointer; }
.room-chip[hidden] { display: none; }
/* Mirar en directo mientras esperas */
.watch { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.watch[hidden] { display: none; }
.watch-label { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.watch-sep { opacity: .5; }
.watch.grow { min-height: 0; overflow-y: auto; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5252a; animation: livePulse 1.4s infinite; }
@keyframes livePulse { 50% { opacity: .3; } }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.watch-tile { margin: 0; position: relative; display: flex; flex-direction: column; gap: 3px; }
.watch-tile img, .watch-empty { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1.5px var(--line); }
.watch-tile img[hidden], .watch-empty[hidden] { display: none; }
.watch-empty { display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--muted); }
.watch-tile figcaption { font-size: .75rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.watch-tile { cursor: pointer; }
.watch-grid[hidden], .watch-big[hidden] { display: none; }
.watch-big { display: flex; flex-direction: column; gap: 8px; }
.watch-big img { width: 100%; max-height: 52vh; object-fit: contain; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1.5px var(--line); }
.watch-big img[hidden] { display: none; }
.watch-big-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Un solo dibujo en la ronda (por parejas con 2): ocupa todo el ancho y se ve grande */
#s-result .vote-cards.one { grid-template-columns: 1fr; }
#s-result .vote-cards.one .vote-card .duo-img, #s-result .vote-cards.one .vote-card .grow-img { aspect-ratio: 2 / 3; max-height: 64dvh; }

/* Carita en grande */
.av-tap { cursor: zoom-in; }
.tap-face .p-name { cursor: zoom-in; }
.av-view { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: color-mix(in srgb, #0b0d14 55%, transparent); backdrop-filter: blur(3px); cursor: zoom-out; }
.av-view[hidden] { display: none; }
.av-view-card { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; border-radius: 24px; background: var(--card); box-shadow: 0 20px 60px #0005; }
.av-view-card figcaption { font-weight: 800; font-size: 1.15rem; }
.avatar.av-big { width: min(64vw, 280px); height: min(64vw, 280px); font-size: min(44vw, 190px); display: grid; place-items: center; line-height: 1; }
.avatar.av-big svg, .avatar.av-big .face-img { width: 100%; height: 100%; border-radius: 50%; }

#meFace { cursor: zoom-in; }

/* Seleccionar y mover */
.pad[data-tool="select"] .pad-stage { cursor: crosshair; }
body.pairs-draw .tool[data-tool="select"], body.triptych-draw .tool[data-tool="select"] { display: none; }
.sel-bar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); box-shadow: 0 4px 16px #0003, 0 0 0 1.5px var(--line); }
.sel-bar[hidden] { display: none; }
.sel-bar button { border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink); padding: 7px 12px; border-radius: 10px; cursor: pointer; }
.sel-bar button:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sel-bar .sel-ok { background: var(--accent); color: #fff; }

.me-lock { margin: -4px 0 0; font-size: .8rem; color: var(--muted); }
.me-lock[hidden] { display: none; }
.me-name.locked { opacity: .7; }

/* Final de la historia: «Compartir o guardar» y «Guardar GIF» uno al lado del otro */
.bottom-controls:has(.gif-cta:not([hidden])) .share-cta { flex: 1 1 40% !important; min-width: 0; padding-inline: 10px; }
.gif-cta { background: var(--card); color: var(--ink); }
.share-cta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cuaderno en la nube (perfil) */
.cloud-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1.5px var(--line); }
.cloud-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.cloud-txt strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; }
.cloud-txt small { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.cloud-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; white-space: nowrap; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: #1f1f1f; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; flex: none; }
.cloud-box[hidden] { display: none; }
.me-top .me-name { min-width: 0; flex: 1 1 auto; }
.cloud-btn.on { background: var(--card); color: var(--ink); }
.cloud-btn.has-pic svg { display: none; }
.cloud-pic { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.cloud-pic[hidden] { display: none; }
.cloud-btn span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- «Tú» (perfil) — v2: carita fija arriba, dos acciones y una tira de caritas ---------- */
.me-screen { overflow: hidden; }
.me-screen .me-wrap { height: 100%; gap: 16px; }
.me-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.me-head #emojiClose[hidden] { visibility: hidden; display: inline-flex; }
.me-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.me-face-wrap { position: relative; }
.me-face { display: block; padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; }
.me-face .avatar { width: 132px; height: 132px; font-size: 84px; }
.me-face-edit { position: absolute; right: 0; bottom: 2px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); cursor: pointer; }
.me-face-edit[hidden] { display: none; }
.me-face-menu { position: absolute; left: calc(100% - 6px); bottom: -6px; z-index: 5; display: flex; flex-direction: column; min-width: 140px; padding: 6px; border-radius: 14px; background: var(--card); box-shadow: 0 10px 30px -10px #0005, 0 0 0 1.5px var(--line); }
.me-face-menu[hidden] { display: none; }
.me-face-menu button { border: 0; background: none; text-align: left; font: inherit; font-weight: 700; color: var(--ink); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.me-face-menu button:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.me-face-menu button[hidden] { display: none; }
.me-name-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: text; font-size: 1.4rem; }
.me-screen .me-name { width: 6ch; max-width: 70vw; border: 0; border-bottom: 2px solid transparent; background: none; padding: 2px 0; text-align: center; font: inherit; font-weight: 800; color: var(--ink); outline: none; flex: none; }
.me-screen .me-name:focus { border-bottom-color: var(--accent); }
.me-screen .me-name.locked { opacity: 1; }
.me-name-pen { flex: none; pointer-events: none; }
.me-screen .me-name:focus + .me-name-pen, .me-screen .me-name.locked + .me-name-pen { visibility: hidden; }
.me-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.me-act { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .95rem; font-weight: 800; cursor: pointer; }
.me-act.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.me-act svg { flex: none; width: 20px; height: 20px; }
.me-act:active { transform: scale(.98); }
/* todas las caritas a la vista: cuadrícula que baja dentro de su zona (la carita de arriba no se mueve) */
.me-screen .me-strip { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-content: start; padding: 8px 8px 16px; scrollbar-width: none; }
.me-screen .me-strip::-webkit-scrollbar { display: none; }
.me-screen .me-strip .emoji-btn { width: 100%; height: auto; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; }
.me-screen .me-strip .emoji-btn[aria-checked="true"] { background: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }
.me-screen .me-strip .emoji-btn .avatar { width: 100%; height: 100%; }

/* Cuenta de Google: tarjeta flotante (como el menú de cuenta de Google), no empuja nada */
.acct-backdrop { position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, #0b0d14 35%, transparent); display: flex; justify-content: center; align-items: flex-start; padding: 64px 16px 16px; }
.acct-backdrop[hidden] { display: none; }
.acct-card { position: relative; width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 20px 20px; border-radius: 24px; background: var(--card); box-shadow: 0 20px 60px -10px #0006, 0 0 0 1px var(--line); animation: acctIn .16s ease-out; }
@keyframes acctIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.acct-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.acct-x:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.acct-mail { font-size: .85rem; color: var(--muted); padding: 0 34px; text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.acct-pic { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 10px 0 4px; }
.acct-pic[hidden] { display: none; }
.acct-hi { font-size: 1.3rem; font-weight: 800; }
.acct-sub { font-size: .85rem; color: var(--muted); text-align: center; }
.acct-out { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }

/* «Elige tu carita»: la palabra de la casa, con la letra del logo */
.me-caritas { margin: 6px 0 -4px; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: .01em; color: var(--ink); text-align: center; flex: none; }

.av-view-card { position: relative; }
.av-view-acts { display: flex; gap: 10px; margin-top: 4px; }
.av-view-acts .acct-out { margin-top: 0; cursor: pointer; }
.av-view-card .avatar.av-big .face-img { box-shadow: 0 0 0 1.5px var(--line); }

.host-crown { display: inline-grid; place-items: center; margin-left: 2px; }
.lobby-book-link[hidden] { display: none; }

/* Cabecera común: «‹ Volver» a la izquierda, título con la letra del logo, acciones a la derecha */
.screen-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 40px; }
.screen-title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 5vw, 1.35rem); letter-spacing: .01em; color: var(--ink); line-height: 1.1; overflow-wrap: anywhere; }
.screen-head .spacer-btn { visibility: hidden; }
.book-zoom[hidden] { display: none !important; }

/* la miniatura del modelo lleva su lupa (se ve que se puede ampliar sin decirlo) */
.lesson-bar { position: relative; }
.lesson-img { cursor: zoom-in; }
.lesson-tip:empty { display: none; }
.lesson-img-wrap { position: relative; display: inline-block; flex: none; }
.lesson-zoom { position: absolute; right: 2px; bottom: 2px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: 0 1px 3px #0003; pointer-events: none; }
.learn-lesson.locked .learn-num { font-size: .85rem; }
/* temas en número impar: el último ocupa toda la fila (sin hueco suelto) */
.learn-grid > .learn-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Final de cada historia ---------- */
.final-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--accent-2); color: #3b2a00; font-size: .68rem; font-weight: 800; letter-spacing: .08em; vertical-align: 1px; animation: finalTag .45s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes finalTag { from { transform: scale(.4); opacity: 0; } }
#revealStage { position: relative; }
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.spark { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0; animation: spark 1.1s var(--d, 0ms) ease-out both; }
.spark svg { display: block; transform: scale(var(--s, 1)); }
@keyframes spark { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 30% { opacity: 1; transform: scale(1.1) rotate(0); } 100% { opacity: 0; transform: scale(.6) rotate(25deg) translateY(-8px); } }
/* los botones de compartir suben un poco después, y «Compartir» late una vez */
#revealControls.final-in .share-cta { animation: finalRise .55s .45s cubic-bezier(.2, 1.3, .4, 1) both; }
#revealControls.final-in .gif-cta { animation-delay: .55s; }
#revealControls.final-in #shareStoryBtn { animation: finalRise .55s .45s cubic-bezier(.2, 1.3, .4, 1) both, finalBeat 1s 1.1s ease-out 1; }
@keyframes finalRise { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes finalBeat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 80%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { #revealControls.final-in .share-cta, .final-tag { animation: none; } }

/* Barra: el tamaño, tres puntos (no parece un color); el color, tu color con un aro fino de arcoíris */
#sizeToggle .size-preview { display: none; }
#sizeToggle .size-ico { display: block; color: var(--ink); }
#colorToggle, #colorToggle.active { position: relative; background: var(--bg); }
#colorToggle.active { border-color: var(--ink); }
#colorToggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#ff3b3b, #ffb000, #ffd21f, #2aa84a, #3fc8ef, #2563eb, #9b5de5, #d946ef, #ff3b3b);
  -webkit-mask: radial-gradient(circle, transparent 12.5px, #000 13px); mask: radial-gradient(circle, transparent 12.5px, #000 13px); }
#colorToggle .swatch { width: 21px; height: 21px; border: 0; box-shadow: 0 0 0 1px #0002; }
/* pista (solo las primeras veces): el botón de color respira dos veces */
#colorToggle.hint { animation: colorHint 1.2s ease-in-out 2; }
@keyframes colorHint { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-2) 55%, transparent); } }
/* la ficha propia lleva un aro: margen para que no se corte en el borde de la lista */
.players-card .chips, #s-wait .chips { padding: 3px; margin: -3px; }

/* ---------- Álbum: cada cosa con su autor pegado ---------- */
.by-tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; max-width: 80%; padding: 4px 10px 4px 5px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1.5px var(--line), 0 4px 10px -6px #0005; font-size: .82rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.by-tag .who { overflow: hidden; text-overflow: ellipsis; }
.by-tag .avatar.tiny { width: 1.5em; height: 1.5em; }
.stage-frame .by-tag { left: 8px; top: 8px; }
.bubble-wrap { position: relative; align-self: center; margin: auto 0; max-width: 100%; padding-top: 14px; display: flex; flex-direction: column; align-items: center; }
.bubble-wrap.compact { margin: 0; }
.bubble-wrap .stage-bubble { margin: 0; }
.bubble-wrap .bubble-tag { position: absolute; top: 0; left: 14px; }
.save-ico { position: absolute; z-index: 2; left: 8px; bottom: 8px; height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--card); color: var(--ink); border: 1.5px solid var(--line); box-shadow: 0 4px 12px -6px #0006; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.save-ico svg { flex-shrink: 0; }
.save-ico.done { background: var(--ok); border-color: var(--ok); color: #fff; cursor: default; }
.save-ico:active { transform: scale(.94); }
.stage-frame .zoom-hint { color: var(--ink); }
.prev-by { display: inline-flex; align-items: center; flex-shrink: 0; font-size: .8rem; font-weight: 800; color: var(--muted); }
.prev-by .avatar.tiny { width: 1.4em; height: 1.4em; }

/* Tríptico: la franja que verá el siguiente */
.band-sheet { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.band-sheet p { margin: 0; color: var(--muted); font-weight: 700; }
.band-strip { width: 100%; height: auto; aspect-ratio: 10 / 1; background: #fff; border: 2px dashed #ff5a3c; border-radius: 10px; }
.more-ico svg { color: var(--ink); }
#zoomSave { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#zoomSave svg { width: 18px; height: 18px; }
.me-update { align-self: center; margin: 4px auto 0; display: block; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.me-update[hidden] { display: none; }
.me-update b { color: var(--accent); }

/* Podio: el primero entra con zoom y rebote; el título con el ganador aparece justo entonces */
.podium-col { position: relative; }
.podium.animate .p1 { animation: winnerIn .9s 2.1s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 50% 100%; }
.podium.animate .p1 .podium-avatar { animation: winnerBounce .7s 2.9s ease both; }
@keyframes winnerIn { 0% { opacity: 0; transform: translateY(40px) scale(.55); } 55% { opacity: 1; transform: translateY(-8px) scale(1.14); } 100% { opacity: 1; transform: none; } }
@keyframes winnerBounce { 0%, 100% { transform: none; } 35% { transform: translateY(-10px) rotate(-6deg); } 70% { transform: translateY(0) rotate(4deg); } }
#s-end.podium-anim #endTitle { animation: titleZoom .6s 2.5s cubic-bezier(.2, 1.4, .4, 1) both; }
#s-end.podium-anim #endText { animation: rise .5s 2.9s ease both; }
@keyframes titleZoom { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .podium.animate .p1, .podium.animate .p1 .podium-avatar, #s-end.podium-anim #endTitle, #s-end.podium-anim #endText { animation: none; } }

/* Por parejas: equipos de la ronda */
.wait-round { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wait-badge.face { background: none; transform: none; width: 64px; height: 64px; }
.wait-badge.face .avatar { width: 64px; height: 64px; }
.teams { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; overflow-y: auto; }
.teams[hidden] { display: none; }
.teams-label { align-self: flex-start; margin: 4px 4px -2px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.teams-vs { font-family: var(--font-display); color: var(--muted); font-size: .9rem; margin: -4px 0; }
.team-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 6px 16px -12px #1d274740; text-align: left; }
.team-card.mine { border: 2.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.team-faces { display: flex; flex: none; }
.team-faces .avatar { width: 46px; height: 46px; border: 2.5px solid var(--card); border-radius: 50%; }
.team-faces .avatar + .avatar { margin-left: -14px; }
.team-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.team-names b { font-size: 1.02rem; line-height: 1.2; overflow-wrap: anywhere; }
.team-names small { font-size: .78rem; font-weight: 700; color: var(--muted); }
.team-tag { flex: none; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; }
.team-tag.pen { background: #ffc53d; color: #1d2747; }
.teams.mini { flex: none; margin: 2px auto 6px; }
.teams.mini .team-card { padding: 8px 12px; }
.teams.mini .team-faces .avatar { width: 36px; height: 36px; }

/* sin frase ni paso (dibujo libre en el cuaderno): esa fila no ocupa sitio */
.draw-prompt:has(#drawWhat:empty):has(#drawStep:empty) { display: none; }

/* Escribiendo con el teclado abierto (poca altura): la frase más pequeña y el campo con «¡Listo!» en la misma fila,
   para que el dibujo que se adivina se vea lo más grande posible y no se mueva nada */
@media (max-height: 560px) {
  #s-text { gap: 8px; padding-block: 6px 8px; }
  #s-text .turn-title { font-size: 1rem; line-height: 1.2; margin: 0; }
  #s-text .text-form { flex-direction: row; align-items: stretch; gap: 6px; }
  #s-text .text-form .big-input { flex: 1 1 auto; min-width: 0; padding-block: 8px; }
  #s-text .text-actions { flex-wrap: nowrap; flex: none; }
  #s-text .text-actions .btn { flex: none; padding: 8px 14px; }
  .kb-open .topbar { padding-block: 4px; }
}