/* Impostor (spec I01). Mobile-first: un teléfono que pasa de mano en mano.
   Solo tokens de global.css; el diseño viene del insumo (docs/roadmap/insumos/I01/). */

.im-body { background: radial-gradient(circle at top right, rgba(var(--color-brand-rgb), 0.18) 0%, var(--color-bg) 70%); }

.im { width: 100%; max-width: 600px; margin: 0 auto; padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-6, 24px); }

.im-screen { display: none; flex-direction: column; gap: var(--space-3, 12px); animation: imIn 0.25s ease-out; }
.im-screen.is-active { display: flex; }
@keyframes imIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.im-title {
    margin: 0; text-align: center; font-size: var(--text-3xl); font-weight: var(--font-black);
    letter-spacing: 3px; text-transform: uppercase; color: var(--color-brand); text-shadow: var(--shadow-brand);
}
.im-subtitle { margin: 0; text-align: center; font-size: var(--text-2xl); color: var(--color-text); }
.im-lead { margin: 0; text-align: center; color: var(--color-text-muted); }
.im-hint { margin: 0; min-height: 1.2em; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.im-hint.is-error { color: var(--color-danger); }

.im-add { display: flex; gap: var(--space-2, 8px); }
.im-input {
    flex: 1; min-height: 48px; padding: 0 var(--space-3, 12px);
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-brand); border-radius: var(--radius-sm);
    color: var(--color-text); font: inherit;
}
.im-input:focus { outline: none; border-color: var(--color-brand); }
.im-textarea { width: 100%; min-height: 84px; padding: var(--space-3, 12px); resize: vertical; margin-top: var(--space-2, 8px); }

.im-btn {
    width: 100%; min-height: 52px; padding: 0 var(--space-4, 16px);
    background: var(--color-surface-2); border: 1px solid var(--border-brand); border-radius: var(--radius-md);
    color: var(--color-text); font: inherit; font-weight: var(--font-bold); letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.im-btn:active { transform: scale(0.98); }
.im-btn:disabled { opacity: 0.5; cursor: default; }
.im-btn--primary { background: var(--color-brand); border-color: var(--color-brand); box-shadow: var(--shadow-brand); }
.im-btn--danger { background: var(--color-danger); border-color: var(--color-danger); box-shadow: var(--shadow-glow-danger); }
.im-btn--icon { width: 52px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--color-brand); border-color: var(--color-brand); }

.im-link { background: none; border: 0; padding: 4px; color: var(--color-brand); font: inherit; font-size: var(--text-sm); cursor: pointer; }

.im-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.im-player {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 8px);
    min-height: 48px; padding: 0 var(--space-2, 8px) 0 var(--space-4, 16px);
    background: var(--color-glass); border-left: 3px solid var(--color-brand); border-radius: var(--radius-sm);
}
.im-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-player-remove { width: 40px; height: 40px; flex: none; background: none; border: 0; color: var(--color-text-muted); cursor: pointer; }
.im-player.is-out { opacity: 0.5; border-left-color: var(--color-text-dim); text-decoration: line-through; }
.im-players--vote .im-player { cursor: pointer; padding-right: var(--space-4, 16px); }
.im-players--vote .im-player:hover, .im-players--vote .im-player:focus-visible { background: rgba(var(--color-brand-rgb), 0.15); outline: none; }

.im-block { padding: var(--space-4, 16px); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.im-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2, 8px); }
.im-label { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.im-label b { color: var(--color-text); }
.im-fieldset { margin: 0; }
.im-fieldset .im-label { padding: 0; margin-bottom: var(--space-2, 8px); }

.im-cats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2, 8px);
    max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;   /* 42 categorías: scroll propio */
}
.im-cat {
    min-height: 40px; padding: var(--space-2, 8px); border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border-hover); color: var(--color-text-muted);
    font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: center;
}
.im-cat[aria-pressed="true"] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text); }

.im-range { width: 100%; margin-top: var(--space-2, 8px); accent-color: var(--color-brand); }

.im-options { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.im-option { display: flex; gap: var(--space-2, 8px); align-items: flex-start; padding: var(--space-2, 8px); border-radius: var(--radius-sm); cursor: pointer; }
.im-option:has(input:checked) { background: rgba(var(--color-brand-rgb), 0.15); }
.im-option input { margin-top: 4px; accent-color: var(--color-brand); }
.im-option span { font-size: var(--text-sm); color: var(--color-text-muted); }
.im-option b { display: block; color: var(--color-text); }

.im-switch { display: flex; align-items: center; gap: var(--space-2, 8px); cursor: pointer; color: var(--color-text); }
.im-switch input { width: 20px; height: 20px; accent-color: var(--color-brand); }

/* La carta: se da vuelta mientras se mantiene apretada. */
.im-pass-name { color: var(--color-brand); text-transform: uppercase; }
.im-card {
    position: relative; width: 100%; max-width: 320px; height: min(400px, 52vh); margin: var(--space-3, 12px) auto;
    padding: 0; background: none; border: 0; cursor: pointer; perspective: 1000px;
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.im-card-face {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, 8px);
    padding: var(--space-5, 20px); border: 2px solid var(--color-brand); border-radius: var(--radius-lg);
    backface-visibility: hidden; transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1); box-shadow: var(--shadow-lg);
}
.im-card-front { background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-bg) 100%); }
.im-card-back { background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.25) 0%, var(--color-bg) 100%); transform: rotateY(180deg); text-align: center; }
.im-card.is-revealed .im-card-front { transform: rotateY(180deg); }
.im-card.is-revealed .im-card-back { transform: rotateY(360deg); }
.im-card-icon { font-size: 72px; color: var(--color-brand); animation: imPulse 2s infinite; }
.im-card-cta { color: var(--color-text); font-weight: var(--font-bold); letter-spacing: 2px; text-transform: uppercase; }
@keyframes imPulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }

.im-role { font-size: var(--text-xl); font-weight: var(--font-black); text-transform: uppercase; letter-spacing: 1px; }
.im-role--civilian { color: var(--color-info); }
.im-role--impostor { color: var(--color-danger); }
.im-word { font-size: clamp(1.8rem, 9vw, 2.6rem); font-weight: var(--font-black); color: var(--color-text); word-break: break-word; line-height: 1.1; }
.im-card-cat { font-size: var(--text-sm); color: var(--color-text-muted); }
.im-card-hint { font-size: var(--text-base); color: var(--color-text); font-style: italic; }

.im-starter { margin: 0; padding: var(--space-3, 12px); text-align: center; border-radius: var(--radius-sm); background: rgba(0, 230, 118, 0.1); border: 1px solid rgba(0, 230, 118, 0.3); color: var(--color-success); }
.im-starter b { display: block; font-size: var(--text-xl); color: var(--color-text); }
.im-round { margin: 0; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.im-timer {
    margin: var(--space-4, 16px) 0; text-align: center; font-size: clamp(4rem, 22vw, 5.5rem); font-weight: var(--font-black);
    font-variant-numeric: tabular-nums; color: var(--color-brand); text-shadow: var(--shadow-brand);
}
.im-timer.is-urgent { color: var(--color-danger); animation: imShake 0.5s infinite; }
@keyframes imShake { 0%, 100% { transform: translate(1px, 1px); } 50% { transform: translate(-1px, -1px); } }

.im-modal {
    position: fixed; inset: 0; z-index: 2147480000; display: flex; align-items: center; justify-content: center;
    padding: var(--space-4, 16px); background: rgba(0, 0, 0, 0.9);
}
.im-modal[hidden] { display: none; }
.im-modal-card {
    width: 100%; max-width: 420px; max-height: 88dvh; overflow-y: auto; padding: var(--space-6, 24px); text-align: center;
    background: var(--color-surface-2); border: 1px solid var(--color-brand); border-radius: var(--radius-lg); box-shadow: var(--shadow-brand);
}
.im-modal-title { margin: 0 0 var(--space-3, 12px); font-size: var(--text-2xl); color: var(--color-brand); }
.im-modal-title.is-civilians { color: var(--color-success); }
.im-modal-title.is-impostors { color: var(--color-danger); }
.im-modal-body { color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.im-modal-body strong { color: var(--color-text); }
.im-modal-actions { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin-top: var(--space-4, 16px); }
.im-reveal-word { font-size: var(--text-3xl); font-weight: var(--font-black); color: var(--color-text); }
.im-reveal-hints { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }

html[data-reduce-motion="on"] .im-card-face, html[data-reduce-motion="on"] .im-screen { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .im-card-face, .im-screen, .im-card-icon, .im-timer.is-urgent { transition: none; animation: none; } }

/* ── Online (spec I01b) ─────────────────────────────────────────────────── */
.im-btn--online { display: flex; align-items: center; justify-content: center; gap: var(--space-2, 8px); text-transform: none; letter-spacing: 0; border-style: dashed; }
.im-btn--link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.im-btn--narrow { width: auto; flex: none; margin: 0; padding: 0 var(--space-4, 16px); }
.im-btn--ghost { background: transparent; border-color: var(--border-default); color: var(--color-text-muted); font-weight: var(--font-medium); }
.im-join { margin-top: var(--space-3, 12px); }
.im-code-input { text-transform: uppercase; letter-spacing: 4px; font-family: var(--font-mono); text-align: center; }
.im-code {
    padding: var(--space-4, 16px); text-align: center; border-radius: var(--radius-md);
    background: var(--color-surface); border: 2px dashed var(--color-brand);
    font-family: var(--font-mono); font-size: clamp(2rem, 11vw, 2.8rem); font-weight: var(--font-black); letter-spacing: 8px; color: var(--color-text);
    user-select: all;
}
.im-badge { flex: none; padding: 2px 8px; border-radius: var(--radius-full); background: rgba(var(--color-brand-rgb), 0.2); color: var(--color-brand); font-size: var(--text-xs); font-weight: var(--font-bold); }
.im-online-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 8px); min-height: 44px; }
.im-online-phase { font-size: var(--text-lg); font-weight: var(--font-black); text-transform: uppercase; letter-spacing: 1px; color: var(--color-brand); }
.im-online-timer { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.im-online-timer.is-urgent { color: var(--color-danger); }
.im-online-body { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.im-online-body .im-card { height: min(320px, 42vh); }
.im-player.is-voted { background: rgba(var(--color-brand-rgb), 0.25); border-left-color: var(--color-gold); }