.imp-shell{width:min(1120px,calc(100% - 24px));margin:0 auto 48px}.imp-game{position:relative;overflow:hidden;padding:24px;border:1px solid rgba(238,132,35,.35);border-radius:22px;background:linear-gradient(145deg,rgba(24,20,18,.97),rgba(46,31,20,.97));box-shadow:0 18px 55px rgba(0,0,0,.3)}.imp-game:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -10%,rgba(244,145,40,.2),transparent 42%),repeating-linear-gradient(125deg,transparent 0 34px,rgba(255,255,255,.012) 35px 36px)}.imp-hud{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;margin-bottom:20px}.imp-timer{display:flex;align-items:center;gap:9px;min-width:0;color:#f8d9aa}.imp-timer-symbol{font-size:1.25rem}.imp-timer strong{font-variant-numeric:tabular-nums;font-size:1.25rem;color:#ffae45}.imp-timer-track{height:7px;max-width:290px;flex:1;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.11)}.imp-timer-track span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e85f24,#ffc05e);transition:width .15s linear,background .2s}.imp-timer.danger strong{color:#ff5858}.imp-timer.danger .imp-timer-track span{background:#e33b37}.imp-counter{display:flex;align-items:baseline;gap:7px;padding:8px 13px;border:1px solid rgba(255,170,70,.22);border-radius:12px;background:rgba(0,0,0,.2)}.imp-counter small{text-transform:uppercase;letter-spacing:.1em;color:#d1b995;font-size:.68rem}.imp-counter strong{color:#fff;font-size:1.12rem}.imp-question{position:relative;margin:10px 0 8px;text-align:center;color:#fff;font-weight:800;font-size:clamp(1.25rem,3vw,1.8rem)}.imp-dots{position:relative;display:flex;justify-content:center;gap:7px;margin:0 0 18px}.imp-dot{width:10px;height:10px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.08)}.imp-dot.correct{border-color:#5ed178;background:#34ad58}.imp-dot.wrong{border-color:#ff7166;background:#d84239}.imp-cards{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;min-height:240px;align-items:center;justify-content:center}.imp-cards>.spinner-border{margin:auto;grid-column:1/-1}.imp-card{position:relative;display:flex;min-width:0;flex-direction:column;padding:0;overflow:hidden;border:2px solid rgba(255,187,102,.28);border-radius:16px;background:#171514;color:#fff;cursor:pointer;box-shadow:0 9px 26px rgba(0,0,0,.28);transition:transform .18s,border-color .18s,box-shadow .18s}.imp-card:hover,.imp-card:focus-visible{transform:translateY(-5px);border-color:#ff9d37;box-shadow:0 12px 28px rgba(233,105,30,.23);outline:none}.imp-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;background:#2a2521}.imp-card-name{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 7px;text-align:center;font-size:.86rem;font-weight:700;line-height:1.15}.imp-card.selected{border-color:#ffc35b;transform:translateY(-4px)}.imp-card.correct{border-color:#47cf6c;box-shadow:0 0 0 3px rgba(71,207,108,.2)}.imp-card.wrong{border-color:#ef5146;box-shadow:0 0 0 3px rgba(239,81,70,.18)}.imp-card.dimmed{filter:saturate(.4);opacity:.58}.imp-card:after{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-weight:900;opacity:0;transform:scale(.4);transition:.18s}.imp-card.correct:after{content:"✓";opacity:1;transform:scale(1);background:#2eb555}.imp-card.wrong:after{content:"×";opacity:1;transform:scale(1);background:#dc3c34}.imp-feedback{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;margin-top:20px;padding:15px;border-radius:14px;background:rgba(255,255,255,.07);color:#f6e8d2}.imp-feedback>strong{font-size:1.05rem}.imp-feedback>span{color:#d6c1a2}.imp-feedback b{color:#ffb14b}.imp-feedback button{margin-left:auto}.imp-timer-off{position:relative;text-align:center;color:#d7c3a7}.imp-receipt{display:grid;gap:8px;margin:14px 0;padding:14px;border:1px dashed rgba(255,157,55,.45);border-radius:12px;background:rgba(35,20,11,.2)}.imp-receipt-row{display:flex;justify-content:space-between;gap:12px}.imp-receipt-row:last-child{padding-top:8px;border-top:1px solid rgba(255,255,255,.16);font-weight:800}.game-ranking{margin:18px auto;max-width:560px}.imp-tutorial{position:fixed;z-index:10050;inset:0;display:grid;place-items:center;padding:20px;background:rgba(5,5,5,.88);backdrop-filter:blur(8px)}.imp-tutorial-box{width:min(860px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:28px;border:1px solid rgba(255,163,67,.5);border-radius:22px;background:linear-gradient(150deg,#201914,#3b2719);color:#fff;box-shadow:0 20px 80px #000}.imp-tutorial-box>h2{text-align:center;color:#ffad45}.imp-tutorial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.imp-tutorial-grid article{padding:16px 12px;text-align:center;border-radius:14px;background:rgba(255,255,255,.06)}.imp-tutorial-grid article>span{font-size:2rem}.imp-tutorial-grid h3{margin:8px 0 5px;font-size:1rem;color:#ffc477}.imp-tutorial-grid p{margin:0;color:#dbcbb7;font-size:.85rem}.imp-toggle{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0;cursor:pointer}.imp-toggle input{position:absolute;opacity:0}.imp-toggle>span{width:44px;height:24px;padding:3px;border-radius:20px;background:#696057;transition:.2s}.imp-toggle>span:after{content:"";display:block;width:18px;height:18px;border-radius:50%;background:white;transition:.2s}.imp-toggle input:checked+span{background:#e87b28}.imp-toggle input:checked+span:after{transform:translateX(20px)}.imp-tutorial-box>#playBtn{display:block;margin:auto;min-width:180px}.hidden{display:none!important}@media(max-width:900px){.imp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.imp-card:nth-child(4){grid-column:1/2;margin-left:50%}.imp-card:nth-child(5){grid-column:2/3;margin-left:50%}.imp-tutorial-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:575px){.imp-shell{width:min(100% - 14px,1120px)}.imp-game{padding:15px 10px;border-radius:16px}.imp-hud{grid-template-columns:1fr auto;gap:8px}.imp-timer{grid-column:1/-1}.imp-timer-track{max-width:none}.imp-counter{padding:6px 9px}.imp-cards{gap:8px;min-height:180px}.imp-card{border-radius:11px}.imp-card-name{min-height:45px;padding:6px 3px;font-size:.72rem}.imp-feedback{display:grid;text-align:center}.imp-feedback button{margin:5px auto 0}.imp-tutorial{padding:8px}.imp-tutorial-box{padding:18px 12px;max-height:calc(100vh - 16px)}.imp-tutorial-grid{gap:7px}.imp-tutorial-grid article{padding:10px 7px}.imp-tutorial-grid p{font-size:.76rem}}
.subtitle-container{display:flex;justify-content:center;padding:18px 12px 14px}.subtitle-container .subtitle-wrapper{display:flex;align-items:center;justify-content:center;gap:12px}.subtitle-container .page-subtitle{margin:0;text-align:center}.subtitle-container .btn-help{display:grid;width:34px;height:34px;padding:0;place-items:center;border:2px solid #f28a2d;border-radius:50%;background:rgba(10,14,20,.72);color:#ffad45;font-size:1rem;font-weight:900;cursor:pointer;transition:transform .15s,background .15s}.subtitle-container .btn-help:hover{transform:scale(1.08);background:#f28a2d;color:#111}
@media(max-width:900px){.imp-cards{grid-template-columns:repeat(6,minmax(0,1fr))}.imp-card{grid-column:span 2}.imp-card:nth-child(4){grid-column:2/span 2;margin-left:0}.imp-card:nth-child(5){grid-column:4/span 2;margin-left:0}}

/* Pergamino del tablero: mismo lenguaje visual que Grid y Bingo. */
.imp-game {
  color: #3e2723;
  background: var(--bg-pergamino) center center / cover no-repeat,
    linear-gradient(160deg, #e8d5b0, #d4b882);
  border: 2px solid #8b5a2b;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 0 rgba(77, 43, 15, .16);
}

.imp-game::before {
  background: radial-gradient(circle at 50% -15%, rgba(255, 255, 255, .35), transparent 45%);
}

.imp-hud,
.imp-question,
.imp-dots,
.imp-cards,
.imp-feedback,
.imp-timer-off {
  z-index: 1;
}

.imp-timer,
.imp-timer strong {
  color: #5a3519;
}

.imp-timer-track {
  background: rgba(74, 46, 21, .22);
}

.imp-counter {
  border-color: rgba(139, 90, 43, .38);
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.imp-counter small,
.imp-timer-off {
  color: #68472f;
}

.imp-counter strong,
.imp-question {
  color: #3e2723;
}

.imp-question {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.imp-dot {
  border-color: rgba(74, 46, 21, .45);
  background: rgba(74, 46, 21, .12);
}

/* Resultado de ronda: tres filas centradas como en WhatPiece. */
.imp-feedback {
  display: block;
  width: min(620px, 100%);
  margin: 20px auto 0;
  padding: 16px 20px;
  text-align: center;
  border: 1.5px solid rgba(139, 90, 43, .42);
  border-radius: 14px;
  background: rgba(255, 255, 255, .34);
  color: #3e2723;
  box-shadow: 0 8px 22px rgba(88, 48, 15, .16), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: imp-feedback-in .35s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes imp-feedback-in {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.imp-feedback-text {
  margin: 0 0 5px;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Estados reforzados con forma y símbolo, además de la paleta elegida. */
.imp-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.imp-dot::before { color: #fff; font: 900 11px/1 Arial, sans-serif; text-shadow: 0 1px 2px #000; }
.imp-dot.correct { border-color: var(--state-correct); background: var(--state-correct); }
.imp-dot.wrong { border-color: var(--state-incorrect); border-radius: 50%; background: var(--state-incorrect); }
.imp-dot.correct::before { content: "\2713\FE0E"; }
.imp-dot.wrong::before {
  content: "";
  width: 10px;
  height: 10px;
  background:
    linear-gradient(45deg, transparent 42%, #fff 43% 57%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #fff 43% 57%, transparent 58%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
.imp-card.correct {
  border-color: var(--state-correct);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--state-correct) 30%, transparent),
    0 8px 24px color-mix(in srgb, var(--state-correct) 28%, transparent);
}
.imp-card.wrong {
  border-color: var(--state-incorrect);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--state-incorrect) 30%, transparent),
    0 8px 24px color-mix(in srgb, var(--state-incorrect) 28%, transparent);
}
.imp-card.correct::after,
.imp-card.wrong::after {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  box-sizing: border-box;
  color: #fff;
  box-shadow: 0 3px 9px rgba(33, 16, 8, .3), inset 0 1px 2px rgba(255, 255, 255, .25);
}
.imp-card.correct::after {
  content: "\2713\FE0E";
  background: var(--state-correct);
  font: 900 20px/1 Arial, sans-serif;
}
.imp-card.wrong::after {
  content: "";
  background-color: var(--state-incorrect);
  background-image:
    linear-gradient(45deg, transparent 45%, #fff 46% 54%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #fff 46% 54%, transparent 55%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 17px 17px;
}
.imp-feedback-text.correct { color: color-mix(in srgb, var(--state-correct) 72%, #162015); }
.imp-feedback-text.wrong { color: color-mix(in srgb, var(--state-incorrect) 72%, #2d1510); }

.imp-category-label {
  margin: 0;
  color: #68472f;
  font-size: .93rem;
}

.imp-category-label strong {
  color: #4a2e15;
  font-weight: 900;
}

.imp-next-btn {
  display: block;
  margin: 13px auto 0;
  padding: 9px 26px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, #ff6b00, #df4e00);
  color: #fff;
  font-family: 'Reggae One', cursive;
  font-size: .88rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(194, 75, 0, .32);
  transition: transform .15s ease, filter .15s ease;
}

.imp-next-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* Tutorial: pergamino y tarjetas 2x2 del sistema usado por Grid. */
#tutorialModal .tutorial-content {
  width: min(760px, 100%);
  max-width: 760px;
  max-height: 96vh;
  padding: 24px;
  border-color: #9b612d;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .65);
}

#tutorialModal .tutorial-title {
  margin: 4px 0 6px;
  color: #4a2e15;
  font-family: 'Reggae One', cursive;
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.2;
}

#tutorialModal .tutorial-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

#tutorialModal .step-card {
  position: relative;
  display: grid;
  grid-template-rows: 64px min-content 1fr;
  justify-items: center;
  align-items: start;
  gap: 6px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid rgba(139, 90, 43, .3);
  border-radius: 12px;
  background: rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
  overflow: hidden;
}

#tutorialModal .anim-box {
  display: flex;
  width: 100%;
  height: 64px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(139, 90, 43, .28);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(74, 46, 21, .12), rgba(255, 255, 255, .12));
}

#tutorialModal .step-emoji {
  font-size: 2rem;
  line-height: 1;
}

#tutorialModal .step-card h3 {
  margin: 0;
  color: #4a2e15;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.3;
}

.imp-tutorial-heading {
  text-align: center;
}

.imp-tutorial-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid rgba(139, 90, 43, .38);
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  color: #8a3d13;
  font-family: 'Reggae One', cursive;
  font-size: .62rem;
  letter-spacing: .12em;
}

.imp-tutorial-lead {
  width: min(560px, 100%);
  margin: 0 auto 15px;
  color: #68472f;
  font-size: .86rem;
  line-height: 1.45;
}

.imp-step-number {
  position: absolute;
  top: 7px;
  left: 8px;
  z-index: 2;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #4a2e15;
  color: #ffd09a;
  font-family: 'Reggae One', cursive;
  font-size: .56rem;
  box-shadow: 0 2px 6px rgba(74, 46, 21, .28);
}

.imp-tut-squad,
.imp-tut-pick {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
}

.imp-tut-squad i {
  position: relative;
  width: 24px;
  height: 30px;
  border: 1px solid rgba(92, 54, 25, .35);
  border-radius: 12px 12px 7px 7px;
  background: #d98a42;
  box-shadow: 0 2px 5px rgba(74, 46, 21, .2);
}

.imp-tut-squad i::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4a2e15;
}

.imp-tut-squad i::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 5px;
  width: 13px;
  height: 9px;
  border-radius: 8px 8px 3px 3px;
  background: #4a2e15;
}

.imp-tut-squad i.unknown {
  display: grid;
  place-items: center;
  border-color: var(--state-incorrect-dark);
  background: var(--state-incorrect-surface);
  color: var(--state-incorrect-ink);
  font-style: normal;
  font-weight: 900;
}

.imp-tut-squad i.unknown::before,
.imp-tut-squad i.unknown::after {
  display: none;
}

.imp-tut-pick i {
  position: relative;
  width: 23px;
  height: 34px;
  border: 1px solid rgba(92, 54, 25, .3);
  border-radius: 6px;
  background: rgba(255, 255, 255, .36);
}

.imp-tut-pick i::before {
  content: '';
  position: absolute;
  inset: 5px 6px 12px;
  border-radius: 50%;
  background: #8b5a2b;
  box-shadow: 0 10px 0 2px #8b5a2b;
}

.imp-tut-pick .target {
  border: 2px solid #c13d2e;
  background: rgba(225, 91, 69, .18);
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px rgba(193, 61, 46, .12);
  animation: imp-target-pulse 1.8s ease-in-out infinite;
}

.imp-tut-pick .target span {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #c13d2e;
  color: #fff;
  font-style: normal;
  font-size: .72rem;
  line-height: 1;
}

@keyframes imp-target-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(193, 61, 46, .12); }
  50% { box-shadow: 0 0 0 6px rgba(193, 61, 46, .04); }
}

.imp-tut-rounds {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 10px);
  gap: 7px 8px;
  padding-right: 29px;
}

.imp-tut-rounds i {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(74, 46, 21, .42);
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
}

.imp-tut-rounds i.done {
  border-color: #38704c;
  background: #55a66f;
}

.imp-tut-rounds i.current {
  border-color: #d95d17;
  background: #ff8a2a;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, .16);
}

.imp-tut-rounds strong {
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 1.25rem;
  transform: translateY(-50%);
}

.imp-tut-clock {
  display: grid;
  gap: 6px;
  width: min(145px, 72%);
}

.imp-tut-clock strong {
  color: #4a2e15;
  font-family: 'Reggae One', cursive;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.imp-tut-clock > span {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(74, 46, 21, .18);
}

.imp-tut-clock > span i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e75220, #ff9f37);
  animation: imp-tut-timer 3s ease-in-out infinite;
}

@keyframes imp-tut-timer {
  0%, 100% { width: 72%; }
  50% { width: 44%; }
}

/* Separación exclusiva entre el tablero de Impostor y "¿Algo no funciona?". */
.imp-shell > .report-bug-wrap {
  margin-top: 20px;
}

/* Ranking: mismo contenedor de pergamino que Episodios. */
#impRanking {
  width: 100%;
  max-width: 480px;
  margin: 20px auto 0;
  padding: 20px 20px 16px;
  border: 2px solid #c19a6b;
  border-radius: 16px;
  background: var(--bg-pergamino) center center / cover no-repeat;
  background-color: #ce9d66;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}

#impRanking.hidden {
  display: none;
}

/* Resultado de victoria: informe de misión sobre pergamino. */
#impWinMsg {
  width: 100%;
  max-width: 680px;
  margin: 24px auto 0;
}

#impWinMsg .imp-win-card {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 30px 32px 26px;
  overflow: hidden;
  border: 2px solid var(--state-correct-dark);
  border-top-width: 4px;
  border-radius: 20px;
  background: var(--bg-pergamino) center center / cover no-repeat;
  background-color: var(--state-correct-surface);
  color: var(--state-correct-ink);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .44),
    inset 0 1px 0 rgba(255, 255, 255, .68),
    inset 0 -2px 0 rgba(89, 49, 18, .18);
  animation: imp-win-rise .42s cubic-bezier(.2, .78, .25, 1) both;
}

#impWinMsg .imp-win-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0, rgba(255, 248, 216, .58), transparent 42%),
    linear-gradient(90deg, rgba(92, 48, 18, .06) 1px, transparent 1px);
  background-size: auto, 34px 100%;
  opacity: .72;
}

#impWinMsg .imp-win-card::after {
  content: '忍';
  position: absolute;
  top: 4px;
  right: 18px;
  color: #6b3514;
  font-family: serif;
  font-size: 6.5rem;
  font-weight: 900;
  line-height: 1;
  opacity: .065;
  transform: rotate(-8deg);
  pointer-events: none;
}

#impWinMsg .imp-win-card > * {
  position: relative;
  z-index: 1;
}

#impWinMsg .imp-win-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

#impWinMsg .imp-win-icon {
  width: 86px;
  height: 86px;
  border: 3px solid #78431f;
  background: radial-gradient(circle at 38% 30%, #ffca70, #e76f22 64%, #9b3c12);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .24),
    0 9px 22px rgba(91, 43, 14, .28),
    inset 0 2px 3px rgba(255, 255, 255, .35);
}

#impWinMsg .imp-win-icon .text-icon {
  font-size: 2.55rem;
  filter: drop-shadow(0 2px 2px rgba(76, 32, 8, .25));
}

#impWinMsg .game-result-text {
  max-width: 500px;
  text-align: center;
}

#impWinMsg .game-result-title {
  margin: 0 0 5px;
  color: var(--state-correct-ink);
  font-family: 'Reggae One', cursive;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.2;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .55);
}

#impWinMsg .game-result-desc {
  color: var(--state-correct-ink);
  font-size: .9rem;
  line-height: 1.45;
}

#impWinMsg .imp-win-summary {
  width: fit-content;
  min-width: 190px;
  margin: 17px auto 0;
  padding: 9px 18px;
  border: 1px solid rgba(108, 56, 22, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  color: #4b2b16;
  font-family: 'Reggae One', cursive;
  font-size: 1.05rem;
  letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

#impWinMsg .imp-win-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  color: rgba(107, 53, 20, .5);
  font-size: .55rem;
}

#impWinMsg .imp-win-divider::before,
#impWinMsg .imp-win-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: rgba(107, 53, 20, .28);
}

#impWinMsg .imp-receipt {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
}

#impWinMsg .imp-receipt-row {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 11px 8px;
  border: 1px solid rgba(107, 53, 20, .26);
  border-radius: 11px;
  background: rgba(255, 255, 255, .25);
  color: #68472f;
  font-size: .72rem;
  text-align: center;
}

#impWinMsg .imp-receipt-row b {
  color: #3f2514;
  font-family: 'Reggae One', cursive;
  font-size: .9rem;
  white-space: nowrap;
}

#impWinMsg .imp-receipt-row:last-child {
  padding: 11px 8px;
  border: 1px solid #8b4b20;
  background: rgba(139, 75, 32, .16);
}

#impWinMsg .imp-receipt-row:last-child b {
  color: #7a3714;
}

#impWinMsg .imp-win-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

#impWinMsg .game-result-countdown {
  min-height: 54px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(107, 53, 20, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .2);
}

#impWinMsg .game-result-countdown-label {
  color: var(--state-correct-ink);
  font-size: .66rem;
  letter-spacing: .1em;
}

#impWinMsg .game-result-countdown-timer {
  color: var(--state-correct-ink);
  font-size: 1.22rem;
}

#impWinMsg #btnShareWin {
  display: inline-flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  border: 1px solid #8f3d10;
  border-radius: 12px;
  background: linear-gradient(135deg, #ef7b25, #c74c10);
  color: #fff;
  font-family: 'Reggae One', cursive;
  box-shadow: 0 6px 16px rgba(131, 52, 12, .25), inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

#impWinMsg #btnShareWin:hover,
#impWinMsg #btnShareWin:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 9px 20px rgba(131, 52, 12, .3), inset 0 1px 0 rgba(255, 255, 255, .24);
}

@keyframes imp-win-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Versión persistente del tutorial dentro de "Cómo jugar". */
.imp-howto {
  max-width: 760px;
  padding: 24px;
  border: 2px solid #c19a6b;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .58);
}

.imp-howto-heading {
  text-align: center;
}

.imp-howto .imp-tutorial-kicker {
  margin-bottom: 5px;
}

.imp-howto .imp-howto-heading > h3 {
  margin: 3px 0 6px;
  color: #4a2e15;
  font-family: 'Reggae One', cursive;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.25;
}

.imp-howto .imp-tutorial-lead {
  width: min(560px, 100%);
  margin: 0 auto 16px;
  color: #68472f;
  font-size: .86rem;
  line-height: 1.45;
}

.imp-howto .tutorial-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.imp-howto .step-card {
  position: relative;
  display: grid;
  grid-template-rows: 64px min-content 1fr;
  align-items: start;
  justify-items: center;
  gap: 6px;
  padding: 12px 10px;
  overflow: hidden;
  border: 1.5px solid rgba(139, 90, 43, .3);
  border-radius: 12px;
  background: rgba(255, 255, 255, .3);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}

.imp-howto .anim-box {
  display: flex;
  width: 100%;
  height: 64px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid rgba(139, 90, 43, .28);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(74, 46, 21, .12), rgba(255, 255, 255, .12));
}

.imp-howto .step-card > h3 {
  margin: 0;
  color: #4a2e15;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.3;
}

.imp-howto .step-card > p {
  margin: 0;
  padding: 0;
  color: #5c4033;
  font-size: .78rem;
  line-height: 1.35;
}

html.tutorial-motion-reduce .imp-tut-pick .target,
html.tutorial-motion-reduce .imp-tut-clock > span i {
  animation: none;
}

#tutorialModal .step-card p {
  margin: 0;
  color: #5c4033;
  font-size: .78rem;
  line-height: 1.35;
}

#tutorialModal .tutorial-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}

#tutorialModal.tutorial-help-open .tutorial-timer-row {
  display: none;
}

#tutorialModal .toggle-switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
}

#tutorialModal .toggle-switch input {
  width: 0;
  height: 0;
  opacity: 0;
}

#tutorialModal .slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  border-radius: 30px;
  background: rgba(74, 46, 21, .25);
  transition: .25s;
}

#tutorialModal .slider::before {
  content: '';
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: .25s;
}

#tutorialModal input:checked + .slider {
  background: #ff6b00;
}

#tutorialModal input:checked + .slider::before {
  transform: translateX(24px);
}

#tutorialModal .toggle-label {
  color: #4a2e15;
  font-size: .95rem;
  font-weight: 800;
}

#tutorialModal .btn-play {
  width: 100%;
  margin: 0;
  padding: 12px 34px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, #ff6b00, #df4e00);
  color: #fff;
  font-family: 'Reggae One', cursive;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(194, 75, 0, .34);
  transition: transform .15s ease, filter .15s ease;
}

#tutorialModal .btn-play:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

@media (max-width: 575px) {
  #tutorialModal { padding: 8px; }
  #tutorialModal .tutorial-content { padding: 17px 12px; }
  #tutorialModal .tutorial-steps { gap: 7px; }
  #tutorialModal .step-card { padding: 9px 6px; }
  #tutorialModal .step-card p { font-size: .73rem; }
  .imp-tutorial-lead { margin-bottom: 11px; font-size: .78rem; }
  .imp-step-number { top: 5px; left: 5px; transform: scale(.86); }
  .imp-tut-squad, .imp-tut-pick { gap: 4px; }
  .imp-tut-squad i { width: 20px; }
  .imp-tut-pick i { width: 19px; }
  #tutorialModal .tutorial-options { margin: 12px 0; }
  #impRanking { padding: 16px 12px 13px; }
  #impWinMsg .imp-win-card { padding: 22px 13px 16px; border-radius: 16px; }
  #impWinMsg .imp-win-icon { width: 72px; height: 72px; }
  #impWinMsg .imp-win-icon .text-icon { font-size: 2.15rem; }
  #impWinMsg .imp-win-summary { margin-top: 14px; font-size: .93rem; }
  #impWinMsg .imp-win-divider { margin: 14px 0 11px; }
  #impWinMsg .imp-receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
  #impWinMsg .imp-win-footer { grid-template-columns: 1fr; }
  #impWinMsg #btnShareWin { min-height: 50px; }
  .imp-howto { padding: 18px 12px; }
  .imp-howto .tutorial-steps { gap: 7px; }
  .imp-howto .step-card { padding: 9px 6px; }
  .imp-howto .step-card > p { font-size: .73rem; }
  .imp-howto .imp-tutorial-lead { margin-bottom: 12px; font-size: .78rem; }
}

/* En 1040-1439px los ads laterales (ads.css .ad-side-game) son overlays fijos de
   160px + 5px de margen = 165px por lado que NO reservan hueco en el layout (a
   diferencia de >=1440px, donde sí se reserva padding en el body). .imp-shell
   sigue en min(1120px, calc(100% - 24px)) para esa franja, así que a 1040px
   apenas queda ~45px de margen a cada lado y el HUD (timer/ronda/puntos) quedaba
   tapado bajo los ads. 700px deja >=165px de margen incluso en el extremo
   estrecho del rango (1040px), igual que hacen bingo/genjutsu en sus propios
   contenedores. */
@media (min-width: 1040px) and (max-width: 1439px) {
  .imp-shell {
    max-width: 700px;
  }
}

/* Tras responder: bajo cada nombre, la categoría que cumple (✓) o, en el
   impostor, la que no cumple (✗). Mismo criterio que WhatPiece. */
/* Reserva siempre dos líneas (cumpla o no, el texto cambia de largo) y las
   cartas de una fila se estiran igual: todas ocupan el mismo alto. */
.imp-cards {
  align-items: stretch;
  grid-auto-rows: 1fr; /* en móvil (3+2) las dos filas también miden igual */
}

.imp-card-verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  margin: auto 7px 8px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

.imp-card-verdict.fits {
  color: color-mix(in srgb, var(--state-correct) 45%, #fff);
  background: color-mix(in srgb, var(--state-correct) 28%, transparent);
}

.imp-card-verdict.fails {
  color: color-mix(in srgb, var(--state-incorrect) 35%, #fff);
  background: color-mix(in srgb, var(--state-incorrect) 38%, transparent);
}

@media (max-width: 575px) {
  .imp-card-verdict {
    margin: auto 4px 6px;
    padding: 2px 4px;
    font-size: .6rem;
  }
}

/* Tras responder solo se ve el botón: acierto/fallo ya lo dicen la ✓/✗ de la
   carta y los puntos de ronda, y la categoría está bajo cada ninja. Sin el
   recuadro, cartas + botón caben en la pantalla del móvil. El texto sigue en
   .imp-sr-only (región aria-live) para lectores de pantalla. */
.imp-feedback {
  display: flex;
  justify-content: center;
  width: auto;
  margin: 16px auto 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  animation: none;
}

.imp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.imp-feedback .imp-next-btn {
  min-width: 200px;
  margin: 0;
  padding: 11px 34px;
  font-size: 1rem;
  box-shadow: 0 5px 14px rgba(194, 75, 0, .35);
  animation: imp-feedback-in .35s cubic-bezier(.34, 1.56, .64, 1);
}

html.tutorial-motion-reduce .imp-feedback .imp-next-btn { animation: none; }