/* =========================================================================
   ПРИТВОРЩИК — телефон в стиле шестидесятых
   ========================================================================= */

body.spy-phone {
  --sp-orange: #e8622c;
  --sp-mustard: #e0a92b;
  --sp-teal: #1f9a94;
  --sp-pink: #d6417f;
  --sp-cream: #f4e6cc;
  --fcInk: #2a1a12;
  --fcPaper: #f4e6cc;
  --fcBlush: #d6417f;
  color: var(--sp-cream);
}
body.spy-phone,
body.spy-phone .game {
  background-color: #24140d !important;
  background-image:
    radial-gradient(60% 34% at 50% 0%, rgba(255,200,130,.16) 0%, transparent 62%),
    repeating-linear-gradient(135deg,
      rgba(232,98,44,.07) 0 16px, transparent 16px 32px,
      rgba(31,154,148,.07) 32px 48px, transparent 48px 64px),
    linear-gradient(180deg, #3a2115 0%, #1c1009 100%) !important;
}
body.spy-phone .h1,
body.spy-phone .h2 {
  font-family: var(--display, inherit); letter-spacing: .04em;
  text-shadow: 3px 3px 0 var(--sp-orange);
}
body.spy-phone .note { color: #d9bd92; opacity: .95; }
body.spy-phone .p { color: #dcc39c; }
body.spy-phone .result-good { color: #63d6c2; }
body.spy-phone .result-bad  { color: #ff8a5c; }
body.spy-phone .gain { color: var(--sp-mustard); }

/* карточка задания — папка досье */
body.spy-phone .promptcard {
  background: linear-gradient(180deg, #f7ecd6, #e2d0ae);
  color: #2a1a12; border: none; border-left: 6px solid var(--sp-orange);
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  text-align: left;
}
.blankcard {
  border: 3px dashed rgba(244,230,204,.3); border-radius: 10px;
  padding: 22px 14px; text-align: center; letter-spacing: .18em;
  color: rgba(244,230,204,.5); font-weight: 800; margin: 10px 0;
}

body.spy-phone .btn,
body.spy-phone .answer-btn {
  background: linear-gradient(180deg, #4a2a18, #2b170e);
  border: 1px solid rgba(232,98,44,.4);
  color: var(--sp-cream);
  box-shadow: 0 4px 0 rgba(0,0,0,.55);
}
body.spy-phone .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.55); }
body.spy-phone .btn.ok { background: linear-gradient(180deg, #1f9a94, #0d4b48); border-color: rgba(99,214,194,.4); }
body.spy-phone .btn.no { background: linear-gradient(180deg, #b0431f, #6b2510); border-color: rgba(255,150,110,.35); }
body.spy-phone .answer  { background: rgba(30,16,9,.9); border: 1px solid rgba(232,98,44,.4); color: var(--sp-cream); }
body.spy-phone .pill { background: var(--sp-orange); color: #2a1a12; font-weight: 800; letter-spacing: .06em; }

/* перехват */
.ic-btn {
  background: linear-gradient(180deg, #1f9a94, #0d4b48) !important;
  border-color: rgba(99,214,194,.5) !important;
  letter-spacing: .06em; margin-top: 10px;
}
.ic-box {
  margin-top: 12px; padding: 12px; border-radius: 8px;
  background: rgba(31,154,148,.16); border: 1px dashed rgba(99,214,194,.5);
}
.ic-t { font-size: 12px; letter-spacing: .2em; color: #63d6c2; }
.ic-v { font-size: 17px; margin-top: 4px; color: var(--sp-cream); }

/* пальцы 0–10 */
.fk-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.fk-num {
  padding: 18px 0; border-radius: 10px; font-size: 24px; font-weight: 800;
  background: linear-gradient(180deg, #4a2a18, #2b170e);
  border: 1px solid rgba(232,98,44,.4); color: var(--sp-cream);
  box-shadow: 0 4px 0 rgba(0,0,0,.55); font-family: inherit;
}
.fk-num:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.55); }
.fk-num:disabled { opacity: .4; }

/* гримасы */
.fk-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.fk-face {
  padding: 8px 4px 6px; border-radius: 12px; border: 2px solid transparent;
  background: var(--sp-cream); font-family: inherit;
  box-shadow: 0 4px 0 rgba(0,0,0,.45);
}
.fk-face svg { width: 100%; height: auto; aspect-ratio: 1/1; display: block; }
.fk-face span { display: block; font-size: 10px; letter-spacing: .06em; color: #2a1a12; font-weight: 800; margin-top: 2px; }
.fk-face:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.fk-face.sel { border-color: var(--sp-orange); box-shadow: 0 0 0 3px rgba(232,98,44,.5); }
.fk-face:disabled:not(.sel) { opacity: .35; }

/* цвета */
.fk-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.fk-col {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px;
  background: rgba(244,230,204,.08); border: 1px solid rgba(244,230,204,.18);
  color: var(--sp-cream); font-family: inherit; font-size: 12px; letter-spacing: .05em;
  box-shadow: 0 4px 0 rgba(0,0,0,.5); text-align: left;
}
.fk-col i { width: 34px; height: 34px; border-radius: 6px; background: var(--c); flex: 0 0 auto; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.fk-col:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.fk-col:disabled { opacity: .4; }

/* шкала */
.fk-slider { margin: 16px 0 6px; }
.fk-sliderval {
  text-align: center; font-size: 44px; font-weight: 800; color: var(--sp-mustard);
  text-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.fk-slider input[type=range] { width: 100%; height: 38px; accent-color: var(--sp-orange); }
.fk-slider input[type=range]::-webkit-slider-runnable-track {
  height: 14px; border-radius: 99px;
  background: linear-gradient(90deg, var(--sp-teal), var(--sp-mustard), var(--sp-orange));
}
.fk-slider input[type=range]::-moz-range-track {
  height: 14px; border-radius: 99px;
  background: linear-gradient(90deg, var(--sp-teal), var(--sp-mustard), var(--sp-orange));
}
.fk-ends { display: flex; justify-content: space-between; font-size: 12px; color: #d9bd92; }

/* появление роли */
.faker-reveal { animation: fk-reveal .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes fk-reveal { from { transform: scale(.7) rotate(-6deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .faker-reveal { animation: none !important; }
}