/* r3-hud — «HUD в наклоне»: стеклянная панель в перспективе + плашки-орнаменты над ней (visionOS). Токены — shared.css. */
.r3{--ease-rise:cubic-bezier(0.2,0.8,0.2,1);position:relative;width:100%}
.r3__stage{perspective:1500px;perspective-origin:36% 48%;padding:8px 28px 22px 26px}
.r3__scene{position:relative;transform-style:preserve-3d;transform:rotateX(12deg) rotateY(-14deg);transform-origin:50% 50%}

/* свечение за панелью — сдержанный Raycast, глубже панели по оси Z */
.r3__glow{position:absolute;inset:-20% 2% -18% -22%;transform:translateZ(-110px);pointer-events:none;
  background:radial-gradient(56% 48% at 42% 58%,rgba(255,61,46,0.30),rgba(255,61,46,0.10) 46%,transparent 72%)}

/* слой глубже панели: тонкая сетка + два пятна света (коралл ≤0.12, белый ≤0.06). Выходит за край панели:
   снаружи сетка чёткая, под стеклом — размыта, так край стекла и blur становятся видны */
.r3__back{position:absolute;inset:-9% 1% -6% -13%;transform:translateZ(-72px);pointer-events:none;
  background:
    radial-gradient(42% 46% at 24% 22%,rgba(255,61,46,0.12),transparent 70%),
    radial-gradient(40% 44% at 80% 84%,rgba(255,255,255,0.06),transparent 70%),
    linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px) 0 0/26px 26px;
  -webkit-mask:radial-gradient(68% 66% at 50% 50%,rgba(0,0,0,1) 38%,rgba(0,0,0,0) 100%);mask:radial-gradient(68% 66% at 50% 50%,rgba(0,0,0,1) 38%,rgba(0,0,0,0) 100%)}

/* панель: контейнер 3D; стекло — отдельный слой, чтобы clip-path и blur не сплющили плашки */
.r3__panel{position:relative;transform-style:preserve-3d;padding:22px 22px 20px}
.r3__glass{position:absolute;inset:0;pointer-events:none;
  clip-path:polygon(2px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px);
  background:
    linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0) 30%),
    radial-gradient(90% 60% at 16% 0%,rgba(255,61,46,0.07),transparent 62%),
    linear-gradient(180deg,rgba(30,33,44,0.58),rgba(17,19,26,0.68));
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
/* hairline-кромка по контуру с фаской (кольцо evenodd) */
.r3__glass::before,.r3__face::before{content:'';position:absolute;inset:0;pointer-events:none;background:var(--ring,linear-gradient(180deg,rgba(255,255,255,0.17),rgba(255,255,255,0.05)));
  clip-path:polygon(evenodd,2px 0,calc(100% - var(--f,13px)) 0,100% var(--f,13px),100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px,2px 0,
    2px 1px,calc(100% - var(--f,13px) - 0.41px) 1px,calc(100% - 1px) calc(var(--f,13px) + 0.41px),calc(100% - 1px) calc(100% - 2px),calc(100% - 2px) calc(100% - 1px),2px calc(100% - 1px),1px calc(100% - 2px),1px 2px,2px 1px);
  transition:background var(--motion-hover)}
/* верхний блик-кромка */
.r3__glass::after,.r3__face::after{content:'';position:absolute;top:0;left:7%;right:18%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.34),transparent)}
.r3__term{position:relative}
.r3__grab{position:absolute;left:50%;bottom:-15px;width:54px;height:3px;margin-left:-27px;background:rgba(255,255,255,0.16)}

/* площадка ответа: HUD-скобки по углам; плашки встают отсюда */
.r3__dock{position:relative;height:204px;margin-top:14px;transform-style:preserve-3d;
  background:
    radial-gradient(circle,rgba(255,255,255,0.09) 0.8px,transparent 1.2px) 0 0/14px 14px,
    radial-gradient(64% 80% at 50% 36%,rgba(255,255,255,0.065),transparent 72%)}
.r3__pad{position:absolute;inset:0;pointer-events:none}
.r3__pad i{position:absolute;width:10px;height:10px;border:0 solid rgba(255,255,255,0.14)}
.r3__pad i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.r3__pad i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.r3__pad i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.r3__pad i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.r3__pad span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 9.5px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-ghost);transition:opacity 400ms ease}
.r3--has .r3__pad span{opacity:0}
.r3__layer{position:relative;height:100%;padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;gap:14px 12px;transform-style:preserve-3d}
.r3--multi .r3__layer{align-content:end;padding-bottom:8px}
.r3--has:not(.r3--multi) .r3__layer{padding-bottom:38px}

/* фигура каталога: 19 ячеек — какие подошли; при трёх ответах прячется (место занято плашками) */
.r3__cat{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:400 9.5px/1 var(--font-mono);letter-spacing:0.11em;text-transform:uppercase;color:var(--text-ghost);transition:opacity 400ms ease}
.r3--multi .r3__cat{opacity:0}
.r3__cells{display:flex;gap:3px;flex:none}
.r3__cells i{display:block;width:8px;height:3px;background:rgba(255,255,255,0.11);transition:background 500ms ease}
.r3__cells i.is-on{background:var(--text-secondary)}
.r3__cells i.is-best{background:var(--text-primary)}
.r3__cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* слот = точка на панели; плашка поднимается из неё по Z, тень остаётся лежать на панели */
.r3__slot{position:relative;transform-style:preserve-3d;--z:80px;--so:8px;--sa:0.66;--sb:7px}
.r3__slot--best{grid-column:1/-1;margin-right:48px;--z:140px;--so:20px;--sa:0.92;--sb:10px}
.r3__slot--none{grid-column:1/-1;margin-right:24px;--z:110px;--so:14px;--sa:0.78;--sb:9px}
.r3__slot.is-out{pointer-events:none}
.r3__shade{position:absolute;inset:-6% -10% -30% -8%;pointer-events:none;opacity:0;filter:blur(var(--sb));
  background:radial-gradient(60% 58% at 52% 54%,rgba(0,0,0,calc(var(--sa) * 0.55)),transparent 100%);
  transform:translateZ(1px) scale(0.86);
  transition:opacity 600ms ease calc(var(--i)*90ms + 80ms),transform 700ms var(--ease-rise) calc(var(--i)*90ms + 80ms)}
/* силуэт плашки (та же фаска), лежит на панели со сдвигом вниз-вправо — свет сверху-слева */
.r3__shade::before{content:'';position:absolute;inset:3% 7% 19% 5%;background:rgba(0,0,0,var(--sa));
  clip-path:polygon(2px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px)}
.r3__slot.is-up .r3__shade{opacity:1;transform:translateZ(1px) translate(var(--so),calc(var(--so) * 1.25)) scale(1.04)}
.r3__plate{position:relative;opacity:0;transform:translateZ(0);
  transition:transform 640ms var(--ease-rise) calc(var(--i)*90ms + 80ms),opacity 420ms ease calc(var(--i)*90ms + 80ms)}
.r3__slot.is-up .r3__plate{opacity:1;transform:translateZ(var(--z))}
.r3__slot.is-out .r3__plate,.r3__slot.is-out .r3__shade{transition-duration:320ms;transition-delay:0ms}
.r3--static .r3__plate,.r3--static .r3__shade,.r3--static .r3__pad span,.r3--static .r3__cat,.r3--static .r3__cells i{transition:none}

/* плашка: матовое стекло; наведение — светлеет + ореол, без подъёма */
.r3__halo{position:absolute;inset:-30px;pointer-events:none;opacity:0;transition:opacity var(--motion-hover);
  background:radial-gradient(closest-side,rgba(255,255,255,0.07),transparent)}
.r3__slot--best .r3__halo{background:radial-gradient(closest-side,rgba(255,61,46,0.22),transparent)}
.r3__slot:hover .r3__halo,.r3__slot:focus-within .r3__halo{opacity:1}
.r3__face{position:relative;--f:11px;padding:12px 14px 13px;display:flex;flex-direction:column;gap:7px;
  clip-path:polygon(2px 0,calc(100% - var(--f)) 0,100% var(--f),100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0 calc(100% - 2px),0 2px);
  background:linear-gradient(180deg,rgba(40,43,56,0.72),rgba(20,22,30,0.82));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background var(--motion-hover)}
.r3__slot--best .r3__face{--f:13px;padding:14px 18px 13px;gap:8px;
  --ring:linear-gradient(160deg,rgba(255,61,46,0.45),rgba(255,61,46,0.22) 55%,rgba(255,255,255,0.08))}
.r3__slot:hover .r3__face,.r3__slot:focus-within .r3__face{background:linear-gradient(180deg,rgba(52,56,70,0.76),rgba(26,28,38,0.84))}
.r3__slot:hover .r3__face{--ring:linear-gradient(180deg,rgba(255,255,255,0.26),rgba(255,255,255,0.08))}
.r3__slot--best:hover .r3__face{--ring:linear-gradient(160deg,rgba(255,61,46,0.62),rgba(255,61,46,0.3) 55%,rgba(255,255,255,0.12))}

.r3__k{display:flex;align-items:center;gap:7px;min-width:0;font:500 9.5px/1.3 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-tertiary)}
.r3__k span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r3__sep{color:var(--text-ghost)}
.r3__dot{flex:none;width:6px;height:6px;background:var(--emerald-core)}
.r3__t{font:500 13.5px/1.35 var(--font-sans);color:var(--text-primary);letter-spacing:-0.005em}
.r3__t::after{content:'';position:absolute;inset:0;z-index:1}
.r3__t:focus-visible{outline:none}
.r3__slot--best .r3__t{font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-0.01em}
.r3__f{display:flex;justify-content:space-between;align-items:center;margin-top:3px;font:400 10px/1 var(--font-mono);letter-spacing:0.10em;text-transform:uppercase;color:var(--text-dim)}
.r3__open{color:var(--text-secondary);transition:color var(--motion-hover)}
.r3__slot:hover .r3__open{color:var(--text-primary)}
.r3__slot:focus-within .r3__face::before{--ring:linear-gradient(180deg,rgba(255,255,255,0.4),rgba(255,255,255,0.14))}
.r3__none{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-secondary)}
.r3__none a{color:var(--text-primary);border-bottom:1px solid var(--border-nav)}

/* планшет: колонка на всю ширину — ограничиваем, чтобы наклон не разъезжался */
@media (max-width:1024px){.r3{max-width:620px;margin:0 auto}}

/* мобильный: плоско, без наклона и параллакса; ответ — сразу под строкой, до примеров */
@media (max-width:640px){
  .r3__stage{perspective:none;padding:0}
  .r3__scene{transform:none !important}
  .r3__glow{transform:none;inset:-8% -4%;opacity:0.7}
  .r3__panel{display:flex;flex-direction:column;padding:18px 16px 16px}
  .r3__term,.r3 .rt{display:contents}
  .r3 .rt__bar{order:1}.r3 .rt__form{order:2}.r3 .rt__log{order:3}.r3__dock{order:4}.r3 .rt__hint{order:5}.r3 .rt__ex{order:6}
  .r3 .rt__bar,.r3 .rt__form,.r3 .rt__log,.r3 .rt__hint,.r3 .rt__ex{position:relative} /* над слоем стекла: .rt тут display:contents */
  .r3__dock{height:auto;margin-top:0;background:none}
  .r3__pad,.r3__grab,.r3__shade,.r3__back,.r3__cat{display:none}
  .r3__layer,.r3--has:not(.r3--multi) .r3__layer{padding-bottom:0}
  .r3__layer{height:auto;padding:0;gap:10px}
  .r3--has .r3__layer{margin-top:14px}
  .r3__slot--best,.r3__slot--none{margin-right:0}
  .r3__plate,.r3__slot.is-up .r3__plate{transform:none;translate:none !important}
  .r3__slot--best .r3__t{font-size:16px}
}
@media (max-width:400px){.r3__layer{grid-template-columns:1fr}}