/* «Лесные друзья». Все стили под префиксом .fr-, изолированы от стилей сайта. */
html, body.fr-body { margin:0; padding:0; height:100%; overflow:hidden; overscroll-behavior:none;
  background:#cfe8b8; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.fr-root { position:fixed; inset:0; overflow:hidden; touch-action:none; }
.fr-root * { box-sizing:border-box; }
.fr-screen { position:absolute; inset:0; overflow:hidden; }
.fr-bg-meadow { background:linear-gradient(#bfe6ff 0 45%, #a8dc8a 45% 100%); }
.fr-bg-creek { background:linear-gradient(#cdeaf7 0 35%, #8fcf9a 35% 60%, #8cc9ee 60% 78%, #8fcf9a 78% 100%); }
.fr-bg-house { background:linear-gradient(#ffe9c7 0 45%, #b9dc8f 45% 100%); }
.fr-bg-house::after { content:"🏡"; position:absolute; right:3%; top:6%; font-size:12vmin; opacity:.55; }
.fr-bg-plain { background:linear-gradient(#e9f5d8,#cfe8b8); }

/* кнопки */
.fr-btn { display:flex; align-items:center; justify-content:center; border:0; border-radius:50%;
  cursor:pointer; touch-action:manipulation; font-size:12vmin; width:26vmin; height:26vmin;
  background:#fff; box-shadow:0 .8vmin 0 rgba(0,0,0,.15); transition:transform .08s; padding:0; }
.fr-btn:active { transform:scale(.94); }
.fr-btn.green { background:#58c26a; color:#fff; }
.fr-btn.sm { width:18vmin; height:18vmin; font-size:9vmin; }
.fr-row { display:flex; gap:6vmin; align-items:center; justify-content:center; flex-wrap:wrap; }
.fr-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5vmin; }

/* зверёк */
.fr-animal { position:absolute; display:flex; align-items:center; justify-content:center; will-change:transform; pointer-events:none; }
.fr-animal .a-body { line-height:1; transform-origin:50% 90%; animation:fr-bob 3s ease-in-out infinite; }
.fr-animal .a-extra { position:absolute; right:-8%; top:-8%; line-height:1; font-size:.5em; }
.fr-animal.joy .a-body { animation:fr-joy .7s ease-in-out 2; }
.fr-animal.no .a-body { animation:fr-no .9s ease-in-out 1; }
.fr-animal.eat .a-body { animation:fr-eat .3s ease-in-out 4; }
.fr-animal.wave .a-extra { animation:fr-wave .6s ease-in-out infinite; transform-origin:70% 90%; }
.fr-animal.yawn .a-body { animation:fr-eat 1.4s ease-in-out infinite; }
@keyframes fr-bob { 50% { transform:translateY(-3%); } }
@keyframes fr-joy { 40% { transform:translateY(-14%) scale(1.06); } }
@keyframes fr-no { 20%,60% { transform:rotate(-8deg); } 40%,80% { transform:rotate(8deg); } }
@keyframes fr-eat { 50% { transform:scale(1.1,.93); } }
@keyframes fr-wave { 50% { transform:rotate(25deg); } }

/* цели */
.fr-tw { position:absolute; left:0; top:0; will-change:transform; }
.fr-target { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%;
  line-height:1; }
.fr-animal.hintwob .a-body { animation:fr-wobble 1s ease-in-out infinite; }
.fr-bubble { background:radial-gradient(circle at 30% 28%, #fff 0 12%, rgba(255,255,255,.75) 13% 55%, rgba(170,220,255,.8) 100%);
  border:.6vmin solid #7fbde6; }
.fr-item { background:#fffdf4; border:.7vmin solid #e0b34a; }
.fr-target.pulse { animation:fr-pulse 1s ease-in-out 1; }
.fr-target.wobble { animation:fr-wobble 1s ease-in-out infinite; }
.fr-target.blink { animation:fr-blink 1s ease-in-out infinite; }
.fr-target.pop { animation:fr-pop .25s ease-out forwards; }
.fr-target.bounce { animation:fr-bounce .5s ease-out 1; }
.fr-target.appear { animation:fr-appear .4s ease-out 1; }
@keyframes fr-pulse { 50% { transform:scale(1.06); } }
@keyframes fr-wobble { 25% { transform:rotate(-6deg); } 75% { transform:rotate(6deg); } }
@keyframes fr-blink { 50% { transform:scale(1.08); box-shadow:0 0 0 1.4vmin rgba(255,214,90,.6); } }
@keyframes fr-pop { to { transform:scale(1.4); opacity:0; } }
@keyframes fr-bounce { 30% { transform:translateY(-8%); } 60% { transform:translateY(0); } 80% { transform:translateY(-3%); } }
@keyframes fr-appear { from { transform:scale(.3); opacity:0; } }
.fr-tw.fr-fly { transition:transform .6s ease-in, opacity .6s ease-in; }

/* подсказки, мысль, тропинка */
.fr-thought { position:absolute; display:flex; align-items:center; justify-content:center; background:#fff;
  border-radius:50%; border:.5vmin solid #ccc; line-height:1; box-shadow:0 .5vmin 0 rgba(0,0,0,.1); }
.fr-ghost { position:absolute; left:0; top:0; font-size:10vmin; line-height:1; pointer-events:none; opacity:.8; z-index:20;
  filter:drop-shadow(0 .5vmin .5vmin rgba(0,0,0,.25)); will-change:transform; }
.fr-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.fr-bowl { position:absolute; line-height:1; pointer-events:none; }
.fr-say { position:absolute; left:50%; top:6%; transform:translateX(-50%); background:#fff; border-radius:999px;
  padding:1vmin 4vmin; font-size:8vmin; line-height:1.2; box-shadow:0 .6vmin 0 rgba(0,0,0,.12); pointer-events:none; z-index:25; }
.fr-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:30; }
.fr-confetti i { position:absolute; top:-6%; width:2.4vmin; height:3.4vmin; border-radius:.5vmin; animation:fr-fall 1.8s ease-in forwards; }
@keyframes fr-fall { to { transform:translateY(115vh) rotate(300deg); opacity:.8; } }

/* профили */
.fr-avatar { font-size:14vmin; line-height:1; background:#fff; border-radius:50%; width:24vmin; height:24vmin;
  display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; box-shadow:0 .8vmin 0 rgba(0,0,0,.15); padding:0; touch-action:manipulation; }
.fr-avatar.sel { outline:1vmin solid #58c26a; }
.fr-pname { text-align:center; font-size:3.4vmin; color:#345; margin-top:1vmin; max-width:24vmin; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* значок взрослого: неприметный */
.fr-adult-btn { position:absolute; right:1.5vmin; bottom:1.5vmin; width:7vmin; height:7vmin; min-width:34px; min-height:34px;
  border-radius:50%; background:rgba(0,0,0,.06); color:rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center;
  font-size:3.4vmin; z-index:40; touch-action:none; }
.fr-adult-btn.hold { background:rgba(0,0,0,.16); }
/* пропуск задания: чуть заметнее шестерёнки, но не как игровая кнопка; заполняется при удержании */
.fr-skip-btn { position:absolute; left:1.5vmin; bottom:1.5vmin; width:8vmin; height:8vmin; min-width:44px; min-height:44px;
  border-radius:50%; background:rgba(255,255,255,.5); color:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center;
  font-size:4vmin; z-index:40; touch-action:none; overflow:hidden; cursor:pointer; }
.fr-skip-btn span { position:relative; z-index:1; line-height:1; }
.fr-skip-btn::after { content:""; position:absolute; inset:0; border-radius:50%; background:rgba(88,194,106,.6); transform:scale(0); }
.fr-skip-btn.hold::after { animation:fr-hold var(--hold-ms,800ms) linear forwards; }
.fr-skip-btn:focus-visible { outline:3px solid #1a5fb4; outline-offset:2px; }
@keyframes fr-hold { to { transform:scale(1); } }
/* итоговый отчёт для взрослого в конце игры */
.fr-rep .wrap { padding-bottom:96px; }
.fr-rep { background:linear-gradient(#fff4dc,#f6f8f3 320px); }
.fr-rep-more { font-size:20px; margin:28px 0 4px; }
/* карточка для скриншота */
.fr-share { max-width:520px; margin:6px auto 0; background:#fff; border-radius:26px; overflow:hidden; text-align:center;
  box-shadow:0 10px 30px rgba(190,110,20,.25), 0 0 0 1px rgba(240,150,40,.25); -webkit-user-select:none; user-select:none; }
.fr-share img { display:block; -webkit-user-drag:none; pointer-events:none; }
.fr-share .top { padding:16px 20px 10px; }
.fr-share .brand { height:46px; width:auto; max-width:100%; margin:0 auto; }
.fr-share .hero { display:flex; align-items:center; justify-content:center; gap:14px; padding:16px 18px; text-align:left;
  background:linear-gradient(135deg,#ffc83d,#f7931e); color:#3a2208; }
.fr-share .face { font-size:72px; line-height:1; filter:drop-shadow(0 4px 6px rgba(120,60,0,.25)); }
.fr-share .game { font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.fr-share h2 { margin:2px 0; font-size:26px; line-height:1.15; color:#2b1805; }
.fr-share .date { font-size:14px; opacity:.8; }
.fr-share .chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:14px 16px 4px; }
.fr-share .chip { background:#fff4dc; color:#5a3a0a; border-radius:999px; padding:4px 14px; font-weight:600; white-space:nowrap; }
.fr-share .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px 16px 0; }
.fr-share .tile { border-radius:16px; padding:10px 4px 8px; color:#1d2b14; }
.fr-share .tile.self { background:#dff3df; } .fr-share .tile.hint { background:#fdf0c4; } .fr-share .tile.auto { background:#dbe9f8; }
.fr-share .ico { font-size:22px; line-height:1; }
.fr-share .num { font-size:40px; font-weight:800; line-height:1.1; }
.fr-share .lab { font-size:14px; font-weight:600; }
.fr-share .ratio { display:flex; height:12px; border-radius:6px; overflow:hidden; margin:12px 16px 0; background:#eee; }
.fr-share .ratio i { display:block; } .fr-share .ratio i.self { background:#58c26a; } .fr-share .ratio i.hint { background:#e8b92e; } .fr-share .ratio i.auto { background:#6aa0d8; }
.fr-share .skills { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:14px 16px 0; }
.fr-share .sk { background:#f2f6ec; border:1px solid #d5dccd; border-radius:999px; padding:3px 12px; font-size:15px; }
.fr-share .quote { margin:14px 22px 0; font-size:17px; line-height:1.4; color:#333; }
.fr-share .cta { display:flex; align-items:center; gap:14px; margin-top:18px; padding:16px 18px; text-align:left;
  background:linear-gradient(135deg,#f7931e,#e8561c); color:#fff; }
.fr-share .mark { width:60px; height:60px; flex:none; border-radius:50%; background:#fff; padding:3px; }
.fr-share .ct { min-width:0; }
.fr-share .big { font-size:21px; font-weight:800; line-height:1.2; }
.fr-share .small { font-size:14px; line-height:1.35; opacity:.95; margin-top:2px; }
.fr-share .site { font-size:15px; font-weight:700; margin-top:4px; letter-spacing:.02em; }
@media (max-width:420px) { .fr-share h2 { font-size:22px; } .fr-share .face { font-size:56px; } .fr-share .num { font-size:32px; } .fr-share .big { font-size:18px; } }
.fr-rep-sum p { margin:4px 0; }
.fr-rep-skills { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:8px; }
.fr-rep-skills .sk { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #d5dccd; border-radius:12px; padding:10px 12px; }
.fr-rep-skills .ic { font-size:30px; line-height:1; }
.fr-rep-skills .stt { font-weight:600; } .fr-rep-skills .stt.dim { font-weight:400; color:#555; }
.fr-rep-skills .why { font-size:14px; color:#444; }
.fr-rep-actions { position:absolute; left:0; right:0; bottom:0; z-index:110; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background:rgba(246,248,243,.97); border-top:1px solid #cdd; touch-action:manipulation; }
.fr-rep-actions .btn { font-size:17px; min-height:48px; padding:8px 18px; border-radius:10px; border:2px solid #4a7c3a; background:#fff; color:#222; cursor:pointer; }
.fr-rep-actions .btn.primary { background:#3d7a2e; color:#fff; }
.fr-rep-actions .btn:focus-visible { outline:3px solid #1a5fb4; outline-offset:2px; }

.fr-progress { position:absolute; left:50%; top:1.6vmin; transform:translateX(-50%); display:flex; gap:1.6vmin; z-index:10; pointer-events:none; }
.fr-progress i { width:2.4vmin; height:2.4vmin; border-radius:50%; background:rgba(255,255,255,.7); border:.3vmin solid rgba(0,0,0,.15); }
.fr-progress i.on { background:#58c26a; }

/* взрослый раздел */
.fr-adult { position:absolute; inset:0; background:#f6f8f3; color:#222; font-size:16px; line-height:1.5;
  overflow-y:auto; overflow-x:hidden; touch-action:pan-y; -webkit-user-select:text; user-select:text; z-index:100; }
.fr-adult .wrap { max-width:860px; margin:0 auto; padding:16px 16px 40px; }
.fr-adult h2 { font-size:22px; margin:8px 0 12px; } .fr-adult h3 { font-size:18px; margin:18px 0 8px; }
.fr-adult p { margin:6px 0; }
.fr-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.fr-tabs button, .fr-adult .btn { font-size:16px; min-height:44px; padding:8px 14px; border-radius:10px; border:2px solid #4a7c3a;
  background:#fff; color:#234; cursor:pointer; }
.fr-tabs button.on, .fr-adult .btn.primary { background:#3d7a2e; color:#fff; }
.fr-adult .btn.danger { border-color:#a33; color:#a33; }
.fr-adult label { display:block; margin:10px 0 4px; font-weight:600; }
.fr-adult input[type=text], .fr-adult select, .fr-adult input[type=number] { font-size:16px; min-height:44px; padding:6px 10px; border:2px solid #789; border-radius:8px; max-width:100%; }
.fr-adult input[type=range] { width:100%; max-width:360px; }
.fr-adult .chk { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:400; }
.fr-adult .chk input { width:24px; height:24px; }
.fr-card { background:#fff; border:1px solid #d5dccd; border-radius:12px; padding:12px 14px; margin:8px 0; }
.fr-skill { display:flex; gap:12px; align-items:flex-start; }
.fr-skill .ic { font-size:32px; line-height:1; }
.fr-disclaimer { margin-top:24px; font-size:15px; color:#444; border-top:1px solid #cdd; padding-top:10px; }
.fr-adult h4 { font-size:16px; margin:14px 0 6px; }
.fr-tablewrap { overflow-x:auto; margin:6px 0; -webkit-overflow-scrolling:touch; }
.fr-table { border-collapse:collapse; width:100%; background:#fff; font-size:15px; }
.fr-table caption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.fr-table th, .fr-table td { border:1px solid #d5dccd; padding:6px 10px; text-align:left; vertical-align:top; }
.fr-table thead th { background:#e8f0e0; }
.fr-table tbody th { font-weight:600; background:#f6f8f3; }
.fr-note { font-size:15px; color:#444; }
@media (max-width: 520px) {
  .fr-table { font-size:14px; }
  .fr-table th, .fr-table td { padding:5px 6px; }
}
.fr-chart { width:100%; height:180px; background:#fff; border:1px solid #d5dccd; border-radius:10px; }
.fr-pad { display:grid; grid-template-columns:repeat(3,64px); gap:8px; justify-content:center; margin:10px 0; }
.fr-pad button { font-size:24px; height:56px; border-radius:10px; border:2px solid #789; background:#fff; cursor:pointer; touch-action:manipulation; }
.fr-q { text-align:center; font-size:28px; margin:10px 0; } .fr-ans { text-align:center; font-size:28px; min-height:40px; letter-spacing:4px; }
.fr-modal { position:absolute; inset:0; background:rgba(30,40,30,.55); z-index:110; display:flex; align-items:center; justify-content:center; touch-action:manipulation; }
.fr-modal .box { background:#fff; border-radius:14px; padding:18px; max-width:92vw; width:340px; font-size:16px; color:#222; max-height:92vh; overflow:auto; }
.fr-adult :focus-visible, .fr-modal :focus-visible { outline:3px solid #1a5fb4; outline-offset:2px; }
.fr-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* уменьшение анимаций */
.fr-reduce .fr-animal .a-body, .fr-reduce .fr-target.wobble, .fr-reduce .fr-target.blink, .fr-reduce .fr-animal .a-extra { animation:none !important; }
.fr-reduce .fr-confetti i { animation-duration:.01s; }
@media (prefers-reduced-motion: reduce) {
  .fr-animal .a-body, .fr-target.wobble, .fr-animal .a-extra { animation:none !important; }
  .fr-confetti i { animation-duration:.01s; }
}
.fr-modal .btn { font-size:16px; min-height:44px; padding:8px 18px; border-radius:10px; border:2px solid #4a7c3a; background:#fff; color:#222; cursor:pointer; }
.fr-modal .btn.primary { background:#3d7a2e; color:#fff; }
.fr-modal .btn.danger { border-color:#a33; color:#a33; }