/* Playfair Display (self-hosted, /fonts) — дисплейные капители, кириллица+латиница */
  @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-600-73961b.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
  @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-600-49e0be.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
  @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-600-f556cd.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-600-9deeae.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  /* Cormorant Garamond (self-hosted, /fonts) — эфирный «оракульный» сериф для реплик экскурсии; латиница+кириллица */
  @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/cormorant-cyr.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
  @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/cormorant-cyrext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
  @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/cormorant-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/cormorant-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

  :root{
    --ink:#17120c; --night:#191a2e; --night-2:#10111f;
    --parchment:#e7d6ac; --parchment-2:#d8c491;
    --gold:#c9a24b; --gold-hi:#ecca77; --gold-dim:#8a6f34;
    --oxblood:#7c2e2b; --haze:#b3a380; --text:#ece2c9;
    --line:rgba(201,162,75,.32);
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,"Times New Roman",serif;
    --display:"Playfair Display","Iowan Old Style",Palatino,"Hoefler Text",Georgia,serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  /* iOS Safari «Text Autosizing»: в ландшафте сам РАЗДУВАЕТ шрифты (наезды текста на кнопки,
     балуны-переростки в экскурсии). 100% = выключить, размеры только наши. */
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
  /* тёмный фон и на html — иначе при оверскролле (резиновый отскок) сверху/снизу проступает белый */
  html{background:#100b07}
  body{min-height:100dvh; color:var(--text); font-family:var(--serif);
    -webkit-tap-highlight-color:transparent;
    display:flex; align-items:flex-start; justify-content:center; padding:16px 10px 40px;
    background:
      radial-gradient(120% 80% at 50% -10%, #241d2f 0%, rgba(36,29,47,0) 55%),
      radial-gradient(90% 60% at 50% 8%, rgba(201,162,75,.10) 0%, rgba(201,162,75,0) 45%),
      radial-gradient(140% 120% at 50% 120%, #241a10 0%, rgba(36,26,16,0) 60%),
      linear-gradient(180deg, #14131f 0%, #17120c 60%, #0f0b07 100%);
    background-attachment:fixed;}
  .grain{position:fixed; inset:0; pointer-events:none; z-index:9; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .app{position:relative; width:100%; max-width:430px; min-height:90dvh; padding:20px 18px 26px;
    border:1px solid var(--line); border-radius:6px;
    background:linear-gradient(180deg, rgba(25,26,46,.32), rgba(15,11,7,.28));
    box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.32);}
  .corner{position:absolute; width:32px; height:32px; color:var(--gold); opacity:.65; pointer-events:none}
  .corner.tl{top:-2px;left:-2px}.corner.tr{top:-2px;right:-2px;transform:scaleX(-1)}
  .corner.bl{bottom:-2px;left:-2px;transform:scaleY(-1)}.corner.br{bottom:-2px;right:-2px;transform:scale(-1)}

  /* ── шапка ── */
  .top{display:flex; align-items:center; gap:10px; min-height:34px}
  .top .menu-btn{margin-right:auto}   /* всё правее меню прижато к правому краю (ключи, замок дверей) */
  .chip.doors svg{stroke:var(--gold-hi)}
  .doorsart{display:flex; justify-content:center; margin:26px 0 14px}
  .doorsart svg{width:64px; height:64px; fill:none; stroke:var(--gold); stroke-width:1.2}
  .chip{display:flex; align-items:center; gap:7px; padding:6px 14px 6px 11px; cursor:pointer;
    border:1px solid var(--line); border-radius:20px;
    background:linear-gradient(180deg, rgba(201,162,75,.14), rgba(201,162,75,.03)); transition:.2s}
  .chip:hover{border-color:var(--gold)}
  .chip svg{width:15px;height:15px;fill:var(--gold);stroke:none}
  .chip .n{font-family:var(--display); font-size:14.5px; color:var(--gold-hi); font-weight:600}
  .chip .n small{color:var(--gold-dim); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase}
  /* «домой» — только домик, без подписи (комнаты и синий коридор) */
  /* Обсерватория: выключатель сопровождения — книга слева от домика */
  .chip.learnchip{padding:6px 10px}
  .chip.learnchip svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .chip.learnchip:hover svg{stroke:var(--gold-hi)}
  body.tour-live .top .learnchip{display:none !important}
  .chip.homechip{padding:6px 10px}
  .chip.homechip svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  body.tour-live .top .homechip{display:none !important}   /* в туре возврат в коридор запрещён — домик прячем */
  .c3bar .chip{pointer-events:auto}   /* сам бар инертен (pointer-events:none), но чип-домик должен ловить клик */
  /* 3D-сцены занимают ровно вьюпорт: никакой источник переполнения не должен рисовать скроллбары.
     Глушим и html, и body, и НЕ зависим от класса c3full — достаточно живого 3D-хоста в DOM */
  body.c3full{overflow:hidden !important; height:100dvh}
  html:has(.corr3d), body:has(.corr3d){overflow:hidden !important; height:100%}
  /* десктоп: служебные иконки не липнут к кромке экрана */
  @media (min-width:1000px) and (pointer:fine){
    body.c3full .top{padding:22px 32px}
    .c3bar{right:30px; top:22px}
    .c3burger{left:32px; top:24px}
    .homebtn{right:32px; top:22px}
  }
  /* появление служебных элементов (бургер/чипы/бары) — всегда плавное */
  .top, .menu-btn, .c3bar, .c3burger, .homebtn{animation:uiFadeIn .4s ease both}
  @keyframes uiFadeIn{from{opacity:0}to{opacity:1}}
  .menu-btn{width:40px;height:34px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line); border-radius:9px; color:var(--gold); cursor:pointer; transition:.2s;
    background:linear-gradient(180deg, rgba(201,162,75,.14), rgba(201,162,75,.03))}
  .menu-btn:hover{border-color:var(--gold); color:var(--gold-hi)}
  .menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
  .backbar{display:flex; align-items:center; gap:12px; min-height:34px; margin-bottom:2px}
  .backbar .bk{width:36px;height:34px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line); border-radius:9px; color:var(--gold); cursor:pointer; font-size:20px;
    background:linear-gradient(180deg, rgba(201,162,75,.12), rgba(201,162,75,.02))}
  .backbar .t{font-family:var(--display); font-size:16px; color:var(--parchment); letter-spacing:.03em}

  .brandwrap{text-align:center; margin:6px 0 2px}
  .eyebrow{font-family:var(--display); font-size:10px; letter-spacing:.4em; text-transform:uppercase;
    color:var(--gold-dim); margin-left:.4em}
  .brand{font-family:var(--display); font-weight:600; font-size:34px; letter-spacing:.1em;
    text-transform:uppercase; margin:2px 0 0; color:transparent;
    background:linear-gradient(180deg,#f6e6bd 0%,var(--gold) 52%,#9c7a34 100%);
    -webkit-background-clip:text; background-clip:text; text-shadow:0 1px 0 rgba(0,0,0,.4)}
  .rule{display:flex; align-items:center; justify-content:center; gap:12px; margin:10px auto 2px; color:var(--gold)}
  .rule .ln{height:1px; width:64px; background:linear-gradient(90deg,transparent,var(--gold))}
  .rule .ln.r{background:linear-gradient(270deg,transparent,var(--gold))}
  .rule svg{width:15px;height:15px;fill:var(--gold)}
  .lead{text-align:center; color:var(--haze); font-size:14.5px; font-style:italic; line-height:1.5; margin:12px 8px 16px}
  .hint{color:var(--haze); font-size:14px; line-height:1.5; margin:.4em 2px 1em; font-style:italic}
  .qual{font-family:var(--display); font-size:13px; letter-spacing:.34em; text-transform:uppercase;
    color:var(--gold-dim); margin-top:4px}
  .about{margin-top:6px}
  .about .lock{text-align:center; margin:4px 0 14px}
  .about .lock .b{font-family:var(--display); font-size:26px; text-transform:uppercase; letter-spacing:.08em;
    color:transparent; background:linear-gradient(180deg,#f6e6bd,var(--gold) 55%,#9c7a34);
    -webkit-background-clip:text; background-clip:text}
  .about .lock .q{font-family:var(--display); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-dim); margin-top:2px}
  .abh{font-family:var(--display); font-size:18px; color:var(--gold-hi); letter-spacing:.02em; margin:18px 0 8px}
  .abp{font-size:15px; line-height:1.64; color:var(--text); margin:0 0 12px; white-space:pre-wrap}

  /* ── список раскладов / колод ── */
  .spreads{display:flex; flex-direction:column; gap:10px; margin-top:4px}
  .sp{position:relative; display:block; padding:13px 16px; cursor:pointer;
    border-radius:5px; border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(231,214,172,.05), rgba(231,214,172,.02)); transition:border-color .2s, background .2s}
  .sp:hover{border-color:rgba(201,162,75,.55)}
  .sp.sel{border-color:var(--gold); background:linear-gradient(180deg, rgba(201,162,75,.14), rgba(201,162,75,.04));
    box-shadow:0 0 0 1px rgba(201,162,75,.2)}
  .sphead{display:flex; align-items:center; gap:14px}
  .sp .fan{flex:0 0 auto; width:44px; height:42px; color:var(--gold); display:flex; align-items:center;
    justify-content:center; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); transition:.2s}
  .sp.sel .fan{color:var(--gold-hi)}
  .sp .fan svg{width:44px;height:42px;overflow:visible}
  .sp .txt{flex:1}
  .sp .nm{flex:1; font-family:var(--display); font-size:15.5px; color:var(--parchment); letter-spacing:.02em}
  .sp .cue{flex:0 0 auto; color:var(--gold-dim); font-size:19px; line-height:1; transition:transform .25s ease, color .2s}
  .sp.sel .cue{transform:rotate(90deg); color:var(--gold-hi)}
  .ds{font-size:12.5px; color:var(--haze); font-style:italic; margin-top:3px; line-height:1.35}
  /* раскрывающееся тело тайла */
  .spwrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s cubic-bezier(.22,.61,.36,1)}
  .sp.sel .spwrap{grid-template-rows:1fr}
  .spwrap>.spin{overflow:hidden; min-height:0}
  .spbody{margin-top:12px; padding-top:12px; border-top:1px solid rgba(201,162,75,.2);
    opacity:0; transform:translateY(-5px); transition:opacity .3s ease .07s, transform .3s ease .07s}
  .sp.sel .spbody{opacity:1; transform:none}
  .spdesc .dsl{position:relative; font-size:13px; color:var(--haze); font-style:italic; line-height:1.4; padding:4px 0 4px 18px}
  .spdesc .dsl:before{content:""; position:absolute; left:4px; top:12px; width:5px; height:5px; border-radius:50%; background:var(--gold-dim)}
  .spbody .btn{margin-top:14px}
  /* веб: карточка со всей инфой; слева иконка+название+кол-во карт, справа описание; кликабельна целиком */
  .sp.web{display:flex; align-items:flex-start; gap:24px; padding:16px 18px;
    transition:transform .18s ease, border-color .2s, background .2s}
  .sp.web:hover{transform:translateY(-2px); border-color:var(--gold);
    background:linear-gradient(180deg, rgba(201,162,75,.12), rgba(201,162,75,.03))}
  .sp.web .spleft{flex:0 0 40%; display:flex; gap:13px; align-items:flex-start}
  .sp.web .sptitle{display:flex; flex-direction:column; gap:4px; padding-top:2px}
  .sp.web .sptitle .nm{font-family:var(--display); font-size:16px; color:var(--parchment); line-height:1.25; letter-spacing:.02em}
  .sp.web .sptitle .cnt{font-size:11.5px; color:var(--gold-dim); letter-spacing:.08em; text-transform:uppercase}
  .sp.web .spright{flex:1; min-width:0; align-self:stretch; border-left:1px solid rgba(201,162,75,.18); padding-left:22px}
  .sp.web .spright .spdesc .dsl{padding:4px 0 4px 16px}
  .sp.web .cue{flex:0 0 auto; align-self:center; color:var(--gold-dim); font-size:19px}
  .spabout{font-size:14px; font-style:italic; color:var(--haze); line-height:1.55}
  /* переключатель систем гадания */
  .oracleseg{display:flex; gap:8px; justify-content:center; margin:2px 4px 14px; flex-wrap:wrap}
  .oratab{font-family:var(--display); font-size:14px; letter-spacing:.03em; padding:7px 16px; border-radius:999px;
    border:1px solid var(--line); background:rgba(201,162,75,.05); color:var(--haze); cursor:pointer; transition:.2s}
  .oratab:hover{border-color:var(--gold); color:var(--parchment)}
  .oratab.on{border-color:var(--gold); color:var(--gold-hi);
    background:linear-gradient(180deg,rgba(201,162,75,.18),rgba(201,162,75,.05))}
  /* руны */
  .runeboard{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:8px 0 6px}
  .rune{flex:0 0 auto; width:130px; padding:14px 8px 11px; border:1px solid var(--line); border-radius:12px;
    background:linear-gradient(180deg,#1c1830,#15111f); text-align:center; opacity:0; animation:runein .5s ease forwards}
  @keyframes runein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  .rglyph{font-size:52px; line-height:1; color:var(--gold-hi);
    font-family:'Noto Sans Runic','Segoe UI Symbol','Apple Symbols',var(--display),serif}
  .rglyph.rev{display:inline-block; transform:rotate(180deg); color:var(--parchment-2)}
  .rname{font-family:var(--display); font-size:15px; color:var(--parchment); margin-top:8px}
  .rorient{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dim); margin-top:2px}
  .rpos{font-size:12px; color:var(--haze); font-style:italic; margin-top:7px; line-height:1.35}
  /* И-Цзин: гексаграмма рисуется чертами (глиф — вторичный) */
  .hexwrap{display:flex; align-items:center; justify-content:center; gap:20px; margin:16px 0 6px; flex-wrap:wrap}
  .hex{display:flex; flex-direction:column; align-items:center; gap:5px}
  .hex.dim{opacity:.7}
  .hexlines{display:flex; flex-direction:column; gap:7px; width:120px}
  .hexline{display:flex; gap:10px; height:12px; justify-content:center; align-items:center; position:relative}
  .hexline .bar{height:12px; border-radius:2px; background:linear-gradient(180deg,#f6e6bd,var(--gold) 60%,#9c7a34)}
  .hexline .bar.solid{width:120px}
  .hexline .bar.l,.hexline .bar.r{width:50px}
  .hexline.chg .bar{filter:drop-shadow(0 0 6px rgba(236,202,119,.9))}
  .hexline.chg:after{content:"✦"; position:absolute; left:-19px; color:var(--gold-hi); font-size:12px}
  .hexmeta{display:flex; flex-direction:column; align-items:center; margin-top:6px}
  .hexmeta .hg{font-size:34px; line-height:1; color:var(--gold-hi);
    font-family:'Segoe UI Symbol','Apple Symbols',serif}
  .hexmeta .hn{font-family:var(--display); font-size:14px; color:var(--parchment); margin-top:3px; text-align:center}
  .hexarrow{font-size:26px; color:var(--gold-dim)}
  .hexchg{text-align:center; color:var(--haze); font-style:italic; font-size:13px; margin:2px 0 10px}
  .hexart{display:flex; justify-content:center; margin:6px 0 10px}
  .hexart svg{width:72px; color:var(--gold)}
  /* интерактивный каст: инструкция */
  .castinstr{text-align:center; color:var(--gold-hi); font-family:var(--display); font-size:15px; letter-spacing:.03em; margin:8px 0 12px}
  /* руны: слоты по позициям + россыпь-рубашки */
  .runeslots{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:6px 0 4px}
  .rslot{flex:0 0 auto; width:112px; min-height:148px; border:1px dashed var(--line); border-radius:12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 6px; text-align:center; transition:.3s}
  .rslot.filled{border-style:solid; background:linear-gradient(180deg,#1c1830,#15111f)}
  .rslotface{min-height:82px; display:flex; flex-direction:column; align-items:center; justify-content:center}
  .rslot .rglyph{font-size:46px}
  .rslotpos{font-size:11.5px; color:var(--haze); font-style:italic; line-height:1.3; margin-top:8px}
  /* руны: настоящая россыпь резных костяных камней с 3D-переворотом */
  .runescatter{position:relative; max-width:344px; margin:14px auto 8px; transition:opacity .55s}
  .runescatter.done{opacity:0; pointer-events:none}
  /* высыпание рун из мешочка: камни сыплются из горловины сверху-по-центру */
  .runescatter.pour .rstone{opacity:0; transition:none;
    transform:translate(var(--sx,0px), var(--sy,-280px)) rotate(calc(var(--rot,0deg) + 300deg)) scale(.55)}
  .runescatter.pouring .rstone{transition:transform .7s cubic-bezier(.22,.75,.3,1.06), opacity .45s ease;
    transition-delay:var(--pd,0s)}
  .runebag{position:absolute; left:50%; top:-40px; z-index:5; color:var(--gold); pointer-events:none;
    transform:translateX(-50%); transition:transform .5s ease, opacity .5s ease}
  .runebag svg{width:42px; height:50px; display:block}
  .runebag.tip{transform:translateX(-50%) rotate(-36deg)}
  .runebag.hide{opacity:0}
  .rstone{position:absolute; width:46px; height:56px; padding:0; border:0; background:none;
    cursor:pointer; transform:rotate(var(--rot,0deg)); transition:transform .2s; perspective:340px}
  .rstone:hover{transform:rotate(var(--rot,0deg)) translateY(-3px)}
  .rstone.used{cursor:default}
  .rin{display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.3,.7,.3,1)}
  .rstone.flipped .rin{transform:rotateY(180deg)}
  .rface{position:absolute; inset:0; backface-visibility:hidden;
    border-radius:44% 46% 45% 47% / 48% 46% 49% 47%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(152deg,#e9ddc1 0%,#d3c3a1 52%,#b6a582 100%);
    box-shadow:0 3px 7px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 7px rgba(120,100,66,.45)}
  .rface::after{content:""; position:absolute; inset:0; border-radius:inherit; opacity:.5; mix-blend-mode:multiply; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
  .rback{color:rgba(120,95,52,.55)}
  .rback svg{width:20px; height:20px}
  .rfront{transform:rotateY(180deg)}
  .rfront .carve{font-size:30px; line-height:1; color:#4a3a24;
    font-family:'Noto Sans Runic','Segoe UI Symbol','Apple Symbols',serif;
    text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(60,44,24,.55)}
  .rfront .carve.rev{display:inline-block; transform:rotate(180deg)}
  /* И-Цзин: строящаяся гексаграмма + монеты-«цянь» */
  .hexstage{display:flex; flex-direction:column; align-items:center; gap:8px}
  .hexrow{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin:16px 0 12px}
  .hexline.empty:before{content:""; width:120px; height:12px; border-radius:2px; opacity:.35;
    background:repeating-linear-gradient(90deg,var(--gold-dim) 0 8px,transparent 8px 16px)}
  /* стол монет: лежат на столе → тап → рука собирает, трясёт, бросает; ложатся вразброс */
  .coin{width:42px; height:42px; border-radius:50%; position:relative;
    background:radial-gradient(circle at 37% 30%,#f2dd93,#c9a24b 46%,#8a6f34 82%,#6b5320);
    box-shadow:inset 0 0 0 2.5px rgba(107,83,32,.85), inset 0 2px 4px rgba(255,255,255,.45),
      inset 0 -3px 6px rgba(70,52,18,.55), 0 2px 5px rgba(0,0,0,.45)}
  .coin:before{content:""; position:absolute; top:50%; left:50%; width:13px; height:13px; transform:translate(-50%,-50%);
    background:#17120c; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(107,83,32,.9)}
  .coin.tails{background:radial-gradient(circle at 37% 30%,#c3bda0,#7f8b6c 46%,#4c563f 82%,#3a4231)}
  .cointable{position:relative; width:100%; max-width:340px; height:150px; margin:26px auto 10px;
    border:1px solid var(--line); border-radius:14px; cursor:pointer; overflow:hidden; perspective:640px;
    background:radial-gradient(ellipse at 50% 26%, rgba(201,162,75,.07), transparent 68%),
      linear-gradient(180deg,#181427,#110e1b)}
  .cointable .coin{position:absolute; left:50%; top:50%; margin:-21px 0 0 -21px; cursor:pointer;
    transition:transform .45s cubic-bezier(.3,.7,.35,1.04), opacity .22s ease}
  .cointable.busy{cursor:default}
  .chand{position:absolute; left:50%; bottom:-4px; width:76px; height:66px; color:var(--gold-dim); opacity:.9;
    transform:translateX(-50%) translateY(115%); transition:transform .34s ease; pointer-events:none; z-index:4}
  .chand svg{width:100%; height:100%; display:block}
  .cointable.cgrab .chand{transform:translateX(-50%) translateY(16%)}
  .cointable.cshake .chand{animation:handshake .15s linear 4}
  @keyframes handshake{25%{transform:translateX(-58%) translateY(12%) rotate(-8deg)}
    75%{transform:translateX(-42%) translateY(18%) rotate(8deg)}}
  /* Монеты порога: вердикт-градация проявляется над столом */
  .thverdict{text-align:center; min-height:52px; margin-top:6px; opacity:0; transform:translateY(6px);
    transition:opacity .7s ease, transform .7s ease}
  .thverdict.show{opacity:1; transform:none}
  .thword{font-family:var(--display); font-size:26px; color:var(--gold-hi); letter-spacing:.02em}
  .thsub{font-size:13px; color:var(--haze); font-style:italic; margin-top:3px}
  /* геомантия: щитовая карта из фигур-точек */
  .shield{display:flex; flex-direction:column; gap:10px; align-items:center; margin:10px 0 4px}
  .shrow{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
  .gfig{width:64px; min-height:74px; border:1px dashed var(--line); border-radius:9px; padding:7px 4px 5px;
    display:flex; flex-direction:column; align-items:center; gap:3.5px; opacity:.55; transition:.45s}
  .gfig.on{border-style:solid; opacity:1; background:linear-gradient(180deg,#1c1830,#15111f)}
  .gfig.jj{width:76px; border-width:1.5px}
  .gfig.jj.on{border-color:var(--gold); box-shadow:0 0 14px rgba(201,162,75,.14)}
  .gfig .gl{display:flex; gap:7px; height:6px; align-items:center}
  .gfig .gl i{width:5.5px; height:5.5px; border-radius:50%; background:var(--gold-hi); display:block}
  .gfig .gnm{font-size:9.5px; letter-spacing:.05em; color:var(--gold-dim); margin-top:4px;
    text-transform:uppercase; text-align:center; line-height:1.25}
  .shlbl{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim); opacity:.75}
  /* мэй хуа: миг кристаллизуется */
  .mhmoment{text-align:center; font-family:var(--display); font-size:30px; color:var(--gold-hi);
    letter-spacing:.14em; margin:14px 0 2px; opacity:0; transition:opacity .8s}
  .mhmoment.show{opacity:1}
  .mhsub{text-align:center; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--gold-dim); margin-bottom:10px; opacity:0; transition:opacity .8s .2s}
  .mhsub.show{opacity:1}
  /* И-Цзин: чип метода «стебли» */
  .methodchip{text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold-dim); margin:2px 0 6px}
  /* ритуал стеблей: пучок делится надвое, часть откладывается */
  .stalkwrap{position:relative; width:100%; max-width:340px; height:150px; margin:26px auto 10px;
    border:1px solid var(--line); border-radius:14px; cursor:pointer; overflow:hidden;
    background:radial-gradient(ellipse at 50% 26%, rgba(201,162,75,.07), transparent 68%),
      linear-gradient(180deg,#181427,#110e1b)}
  .stalk{position:absolute; left:calc(50% + var(--t) * 150px); top:50%; width:2px; height:98px;
    margin:-49px 0 0 -1px; border-radius:2px; opacity:.92;
    background:linear-gradient(180deg,#e5d3a0,#a9884a 55%,#6b5320);
    transform:rotate(var(--r,0deg)); transition:transform .55s cubic-bezier(.3,.7,.3,1), opacity .4s}
  .stalkwrap.split .stalk{transform:rotate(calc(var(--r) + var(--sr,0deg))) translateX(var(--sx,0px))}
  .stalk.out{opacity:0; transform:translateY(-80px) rotate(0deg)}
  .stalkaside{position:absolute; right:12px; top:9px; display:flex; gap:3.5px; align-items:flex-start}
  .stalkaside i{width:2px; height:24px; border-radius:2px; display:block;
    background:linear-gradient(180deg,#e5d3a0,#8a6f34); transform:rotate(9deg); opacity:.85}
  .btn .ckeys{font-size:12px; opacity:.8; letter-spacing:.02em; text-transform:none}
  /* коридор: раскрывающиеся опции комнаты (вернуться / забрать ключи) */
  .corracts{display:none; gap:8px; margin-top:10px; flex-wrap:wrap}
  .sp.corr.open .corracts{display:flex}
  .btn.mini{width:auto; flex:1 1 auto; padding:9px 12px; font-size:12.5px; margin:0}
  /* сетап: блок «что будет происходить» */
  .mech{margin:2px 0 12px; padding:11px 13px; border:1px solid var(--line); border-radius:9px;
    background:rgba(255,255,255,.02); font-size:13px; line-height:1.55; color:var(--parchment-2)}
  .mech .mlbl{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:5px}
  .mech.essence{background:rgba(201,162,75,.035)}
  .mech.essence .mlbl{color:var(--gold)}
  .mech.genderask{background:rgba(201,162,75,.06); border-color:rgba(201,162,75,.4)}
  .mech.genderask .mlbl{color:var(--gold-hi)}
  .askhint{text-align:center; font-size:12.5px; color:var(--gold-dim); font-style:italic;
    margin:10px auto 4px; max-width:440px; line-height:1.5}
  /* подтверждение (две кнопки) — «собрать все ключи» и т.п. */
  .confirm{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
    background:rgba(6,5,12,.78); opacity:0; transition:opacity .3s}
  .confirm.open{opacity:1}
  .confirm .cbox{max-width:340px; margin:0 20px; padding:20px 18px 16px; border:1px solid var(--line);
    border-radius:12px; background:linear-gradient(180deg,#171327,#100d1c)}
  .confirm .ct{font-family:var(--display); font-size:18px; color:var(--gold-hi); margin-bottom:8px}
  .confirm .cb{font-size:13.5px; line-height:1.55; color:var(--parchment-2); margin-bottom:14px}
  .confirm .btn{margin-top:8px}
  /* Коридор-дом: «открыть новую дверь» + список дверей + ссылка в Воспоминания */
  .btn.newdoor{margin:6px auto 14px; max-width:420px}
  .btn.newdoor svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4}
  .corridor{max-width:520px; margin:0 auto}
  .corrload{text-align:center; color:var(--gold-dim); font-size:12.5px; letter-spacing:.08em;
    text-transform:uppercase; padding:8px 0}
  .corrhead{font-family:var(--display); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--gold-dim); text-align:center; margin:6px 0 10px}
  .corrempty{text-align:center; max-width:400px; margin:12px auto 16px}
  .collectall{margin:0 auto 12px; max-width:320px}
  .sp.corr.free{border-color:rgba(201,162,75,.32);
    background:linear-gradient(180deg, rgba(201,162,75,.08), rgba(201,162,75,.02))}
  .sp.corr .ds.gift{color:var(--gold); font-style:italic; letter-spacing:.02em}
  .sp.corr.free .cue{color:var(--gold)}
  .corrlink{display:flex; align-items:center; gap:11px; width:100%; margin:14px auto 0; padding:12px 14px;
    border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--parchment);
    cursor:pointer; transition:.2s; font-family:var(--serif); font-size:14.5px}
  .corrlink:hover{border-color:var(--gold)}
  .corrlink svg{width:17px; height:17px; flex:0 0 auto; fill:none; stroke:var(--gold); stroke-width:1.4}
  .corrlink .lab{flex:1; text-align:left}
  .corrlink .chev{color:var(--gold-dim); font-size:18px}
  /* Ознакомительная экскурсия: coach-плашка снизу */
  .coach{position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; justify-content:center;
    padding:0 14px calc(env(safe-area-inset-bottom,0px) + 16px); pointer-events:none;
    transform:translateY(24px); opacity:0; transition:transform .32s cubic-bezier(.2,.8,.25,1), opacity .32s}
  .coach.show{transform:translateY(0); opacity:1}
  .coach .cwrap{pointer-events:auto; width:100%; max-width:440px; padding:16px 17px 15px;
    border:1px solid var(--gold-dim); border-radius:14px; box-shadow:0 -6px 40px rgba(0,0,0,.5);
    background:linear-gradient(180deg,#191428,#100d1c)}
  .coach .cbody{font-family:var(--serif); font-size:14px; line-height:1.6; color:var(--parchment)}
  .coach .crow{display:flex; align-items:center; gap:12px; margin-top:13px}
  .coach .cnext{flex:1; margin:0}
  .coach .cskip{flex:0 0 auto; background:transparent; border:none; color:var(--gold-dim); cursor:pointer;
    font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:8px 6px}
  .coach .cskip:hover{color:var(--gold)}
  /* подсказка напротив конкретной двери (вход в подаренную дверь) */
  .coachat{margin:8px 0 4px; padding:13px 15px; border:1px solid var(--gold-dim); border-radius:12px;
    background:linear-gradient(180deg,#191428,#100d1c); box-shadow:0 6px 26px rgba(0,0,0,.4);
    opacity:0; transform:translateY(-6px); transition:opacity .3s, transform .3s}
  .coachat.show{opacity:1; transform:translateY(0)}
  .coachat .cbody{font-family:var(--serif); font-size:14px; line-height:1.55; color:var(--parchment); margin-bottom:11px}
  .coachat .cnext{margin:0}
  .coachat .catalt{display:block; width:100%; margin-top:8px; background:none; border:none; cursor:pointer;
    color:var(--gold-dim); font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:7px}
  .coachat .catalt:hover{color:var(--gold)}
  .sp.corr.justborn{animation:doorborn .6s cubic-bezier(.2,.8,.25,1)}
  @keyframes doorborn{0%{opacity:0; transform:translateY(10px) scale(.96)}100%{opacity:1; transform:none}}
  .sp.corr.tourtarget{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 22px rgba(201,162,75,.28);
    animation:tourpulse 1.7s ease-in-out infinite}
  @keyframes tourpulse{0%,100%{box-shadow:0 0 0 1px var(--gold), 0 0 16px rgba(201,162,75,.22)}
    50%{box-shadow:0 0 0 1px var(--gold-hi), 0 0 26px rgba(201,162,75,.42)}}

  /* ===== Кинематографичная экскурсия (tour.js): чёрный экран, реплики поверх сцены ===== */
  .tstage{position:fixed; inset:0; z-index:120; pointer-events:none}
  .tstage.dimming{pointer-events:auto}
  .tveil{position:absolute; inset:0; background:#05050c; opacity:0; pointer-events:none}
  .tstage.dimming .tveil{pointer-events:auto}
  .tlines{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:1.1em; padding:8vh 34px; text-align:center; pointer-events:none}
  .tstage.catch .tlines{pointer-events:auto}   /* ловим клик ТОЛЬКО пока ждём реплику; иначе клики идут в сцену */
  .tphrase{font-family:'Cormorant Garamond', var(--display); font-weight:600; font-size:clamp(26px,6.4vw,42px);
    line-height:1.26; letter-spacing:.012em; color:var(--parchment);
    text-shadow:0 2px 26px rgba(0,0,0,.9), 0 0 40px rgba(201,162,75,.18); text-wrap:balance;
    max-width:15em; will-change:opacity}
  .tphrase.intro{white-space:nowrap; max-width:none; text-wrap:nowrap;
    font-size:clamp(19px,5vw,36px)}         /* интро: каждая фраза — в одну строку */
  .tphrase.tabout{font-size:clamp(15.5px,4.3vw,19px); font-weight:500; line-height:1.6; letter-spacing:.012em;
    max-width:min(88vw,540px); text-align:center; margin:0 0 20px; color:var(--parchment-2)}
  .tabbg{position:absolute; inset:0; background:center/contain no-repeat; opacity:0; pointer-events:none;
    animation:tabdrift 55s ease-out forwards}   /* contain: арт целиком; --tz — базовый зум уровня (ур.2-3 = 1.2) */
  @keyframes tabdrift{from{transform:scale(var(--tz,1)) translate(1%,0.6%)}
    to{transform:scale(calc(var(--tz,1)*1.12)) translate(-1%,-0.6%)}}   /* медленное ДОзумливание +12% за весь прогон */
  @media(prefers-reduced-motion:reduce){ .tabbg{animation:none; transform:scale(var(--tz,1))} }
  .tabrow{display:flex; gap:10px; margin-top:10px; opacity:0; pointer-events:none; z-index:15}
  /* слот в ПОТОКЕ .tlines, создаётся ВМЕСТЕ с абзацами (невидимый) → раскладка стабильна;
     проявление/гашение — fadeTo из tour.js, pointer-events включает JS */
  .tabrow button{font-family:var(--display); font-size:14px; padding:10px 18px; border-radius:9px; cursor:pointer;
    letter-spacing:.03em; transition:.2s}
  .tabrow .tano{background:transparent; border:1px solid var(--line); color:var(--gold)}
  .tabrow .tano:hover{border-color:var(--gold); color:var(--gold-hi)}
  .tabrow .tayes{background:linear-gradient(180deg,var(--gold-hi),var(--gold-dim)); border:none; color:#1a130a; font-weight:600}
  .tphrase.hint{position:absolute; left:0; right:0; bottom:13%; margin:0 auto;
    font-size:clamp(18px,4.4vw,27px); color:var(--gold-hi)}   /* подсказка «коснись зеркала» — внизу, не поверх стола */
  .tphrase.pulse{animation:tphrasepulse 1.5s ease-in-out infinite}
  @keyframes tphrasepulse{0%,100%{text-shadow:0 2px 26px rgba(0,0,0,.85), 0 0 18px rgba(201,162,75,.14)}
    50%{text-shadow:0 2px 26px rgba(0,0,0,.85), 0 0 46px rgba(236,202,119,.6)}}
  .ms-tournote{font-family:var(--serif); font-style:italic; font-size:12.5px; line-height:1.55;
    color:var(--gold-dim); text-align:center; margin:0 0 12px; padding:0 4px}
  /* подтверждение выхода из экскурсии */
  .tconfirm{position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
    background:rgba(4,4,9,.82); pointer-events:auto; opacity:0; transition:opacity .2s ease}
  .tconfirm.show{opacity:1}
  .tconfirm .tcbox{max-width:min(360px,86vw); padding:22px 22px 18px; text-align:center;
    background:rgba(20,14,9,.985); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 18px 60px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .tconfirm .tcq{font-family:var(--display); font-size:19px; color:var(--parchment); margin-bottom:16px}
  .tconfirm .tcrow{display:flex; gap:10px; justify-content:center}
  .tconfirm button{font-family:var(--display); font-size:14px; padding:9px 17px; border-radius:9px; cursor:pointer; letter-spacing:.03em; transition:.2s}
  .tconfirm .tcno{background:transparent; border:1px solid var(--line); color:var(--gold)}
  .tconfirm .tcno:hover{border-color:var(--gold); color:var(--gold-hi)}
  .tconfirm .tcyes{background:linear-gradient(180deg,var(--gold-hi),var(--gold-dim)); border:none; color:#1a130a; font-weight:600}
  /* ─────────── ЛЕНДИНГ (веб-вход) ─────────── */
  body.landing-mode{overflow:hidden}
  .landing{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden; animation:landIn 1.1s ease both}
  @keyframes landIn{from{opacity:0}to{opacity:1}}
  .landing-bg{position:absolute; inset:0; background:#07070e url('/cards/landing.jpg') center 38%/cover no-repeat;
    transform-origin:50% 40%; animation:landZoom 34s ease-in-out infinite alternate;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%)}
  @keyframes landZoom{from{transform:scale(1.0)}to{transform:scale(1.045)}}
  .landing-scrim{position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(5,4,9,.95) 4%, rgba(5,4,9,.64) 32%, rgba(5,4,9,.10) 60%, rgba(6,6,14,.42) 100%)}
  .landing-inner{position:relative; z-index:2; width:100%; max-width:540px; margin:0 auto; box-sizing:border-box;
    padding:0 28px calc(42px + env(safe-area-inset-bottom))}
  .landing-eyebrow{font-family:var(--display); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
    color:var(--gold); opacity:.9; margin-bottom:14px}
  .landing-brand{font-family:var(--display); font-weight:600; color:var(--parchment); line-height:1.03;
    font-size:clamp(40px,11vw,60px); margin:0 0 14px; text-shadow:0 2px 34px rgba(0,0,0,.65)}
  .landing-brand .q{color:var(--gold-hi)}
  .landing-tagline{font-family:var(--serif); color:var(--parchment-2); font-size:clamp(15px,4.2vw,18px);
    line-height:1.5; max-width:22em; margin:0 0 30px; opacity:.94; text-shadow:0 1px 14px rgba(0,0,0,.6)}
  .landing-cta{display:flex; flex-direction:column; gap:11px; max-width:400px}
  .landbtn{font-family:var(--display); font-size:16.5px; letter-spacing:.02em; padding:15px 20px; border-radius:13px;
    cursor:pointer; transition:.2s ease; border:1px solid transparent; text-align:center}
  .landbtn.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#1a130a; font-weight:600;
    box-shadow:0 8px 30px rgba(201,162,75,.34)}
  .landbtn.primary:hover{filter:brightness(1.07); transform:translateY(-1px)}
  .landbtn.ghost{background:rgba(18,15,26,.5); border:1px solid var(--line); color:var(--parchment);
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px)}
  .landbtn.ghost:hover{border-color:var(--gold); color:var(--gold-hi)}
  .landbtn.tour{background:transparent; border:none; display:flex; align-items:baseline; justify-content:center; gap:9px; padding:13px; margin-top:2px}
  .landbtn.tour .lt-main{font-size:16px; color:var(--gold); border-bottom:1px solid rgba(201,162,75,.42); padding-bottom:1px; transition:.2s}
  .landbtn.tour:hover .lt-main{color:var(--gold-hi); border-color:var(--gold-hi)}
  .landbtn.tour .lt-sub{font-family:var(--serif); font-size:12.5px; color:var(--gold-dim)}
  .landbtn:disabled{cursor:default}
  .landing-backlink{background:none; border:none; color:var(--gold-dim); font-family:var(--display); font-size:14px;
    letter-spacing:.04em; cursor:pointer; padding:4px 0; margin-bottom:2px}
  .landing-backlink:hover{color:var(--gold)}
  @media(min-width:820px){ .landing-inner{max-width:600px; padding-bottom:8vh} .landing-cta{max-width:360px} }
  /* пауза экскурсии (открыт диалог подтверждения): замораживаем ВСЕ CSS-анимации */
  body.tour-paused *, body.tour-paused *::before, body.tour-paused *::after{ animation-play-state:paused !important }
  /* тёмная полупрозрачная подложка под реплики В КОМНАТЕ (сцена яркая — иначе текст теряется) */
  body.tour-room .tphrase{ padding:.3em .95em; border-radius:16px;
    background:radial-gradient(ellipse 64% 132% at center, rgba(6,5,10,.82) 0%, rgba(6,5,10,.6) 52%, rgba(6,5,10,0) 82%)}
  /* фаза 4: реплика ВВЕРХУ (меню по центру не перекрыто) + подсветка пунктов меню */
  .tphrase.ttop{position:absolute; top:11%; left:50%; transform:translateX(-50%); max-width:min(22em,90vw);
    font-size:clamp(19px,4.7vw,30px)}
  .c3mi.tdim{opacity:.14 !important; filter:saturate(.4)}
  .c3mi.tglow{color:var(--gold-hi) !important; animation:tmiglow 1.6s ease-in-out infinite}
  @keyframes tmiglow{0%,100%{text-shadow:0 0 16px rgba(236,202,119,.35)}
    50%{text-shadow:0 0 36px rgba(236,202,119,.8)}}
  .c3ptab.tglow{box-shadow:0 0 0 1px var(--gold-hi), 0 0 22px rgba(236,202,119,.5); color:var(--gold-hi) !important}
  /* КНОПКА, которую тур ждёт нажать, ПУЛЬСИРУЕТ (масштаб+сияние) — сильнее статичного tglow; ставится ПОСЛЕ tglow, чтобы победить */
  .c3mi.tpress{animation:tpresspulse 1.15s ease-in-out infinite; color:var(--gold-hi) !important}
  @keyframes tpresspulse{0%,100%{transform:scale(1); text-shadow:0 0 10px rgba(236,202,119,.35)}
    50%{transform:scale(1.06); text-shadow:0 0 28px rgba(236,202,119,.9)}}
  /* волна подсветки по табам пикера: вспышка дольше стаггера (одновременно горит больше), затухание растянуто */
  .c3ptab.twave{animation:ttabwave 1.08s ease-in-out}
  @keyframes ttabwave{0%{box-shadow:none}
    22%{box-shadow:0 0 0 1px var(--gold-hi),0 0 22px rgba(236,202,119,.6); color:var(--gold-hi)}
    40%{box-shadow:0 0 0 1px var(--gold-hi),0 0 20px rgba(236,202,119,.55); color:var(--gold-hi)}
    100%{box-shadow:none}}
  /* волна по СТРОКАМ списка пикера: каждая вспыхивает и гаснет */
  .c3prow.twave{animation:trowwave 0.98s ease-in-out}
  @keyframes trowwave{0%{box-shadow:none}
    28%{box-shadow:0 0 0 1px var(--gold-hi),0 0 16px rgba(236,202,119,.4)}
    100%{box-shadow:none}}
  .c3prow.twave .t{color:var(--gold-hi)}
  /* в экскурсии шапку пикера дверей НЕ показываем — балуны сами объясняют */
  body.tour-p4 .c3menu .c3ptitle{display:none}
  /* затемнение ЧАСТИ пикера (верх=табы/заголовок или низ=список) — экскурсия акцентирует одну зону */
  .c3menu .c3ptabs, .c3menu .c3plist, .c3menu .c3ptitle{transition:opacity .5s ease, filter .5s ease}
  .c3menu .tdimpart{opacity:.16 !important; filter:saturate(.5)}
  /* балун-подсказка с язычком, указывающим на пункт меню (позиция ставится инлайном в spotBalloon) */
  /* pointer-events:none — балун ИНФОРМАЦИОННЫЙ: даже перекрыв цель, тап проходит СКВОЗЬ
     него к пункту меню (иначе «tap this item» под балуном = тупик экскурсии) */
  .tballoon{position:fixed; z-index:2; max-width:min(82vw,340px); text-align:center; pointer-events:none;
    font-family:'Cormorant Garamond', var(--display); font-weight:600; font-size:clamp(20px,5.2vw,27px);
    line-height:1.26; letter-spacing:.01em; color:var(--gold-hi); padding:.6em .95em; border-radius:14px;
    background:rgba(20,15,10,.92); border:1px solid rgba(201,162,75,.4);
    box-shadow:0 14px 40px rgba(0,0,0,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
  .tballoon .tbtail{position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:0; height:0;
    border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid rgba(20,15,10,.92);
    filter:drop-shadow(0 -1px 0 rgba(201,162,75,.4))}
  .tballoon.down .tbtail{top:auto; bottom:-9px; border-bottom:none; border-top:10px solid rgba(20,15,10,.92);
    filter:drop-shadow(0 1px 0 rgba(201,162,75,.4))}
  .tballoon.notail .tbtail{display:none}   /* центрированный рассказ — без язычка */
  /* экскурсия: размыть СОДЕРЖИМОЕ магазина ключей, но кнопку «назад» (.c3mi) оставить ЧЁТКОЙ — по ней и надо нажать */
  .c3menu .c3panel.tblur > :not(.c3mi){filter:blur(2.6px) saturate(.7); opacity:.5; transition:filter .5s ease, opacity .5s ease}
  /* реплика-«подложка» под рядом табов (плашка с фоном); позиция ставится инлайном в platePhrase, здесь — фолбэк */
  .tphrase.tplate{position:fixed; top:34%; left:50%; transform:translateX(-50%); z-index:1;
    font-size:clamp(18px,4.3vw,24px); font-weight:500; line-height:1.32; letter-spacing:.01em;
    max-width:min(82vw,480px); padding:.6em 1.1em; border-radius:15px; color:var(--gold-hi);
    background:rgba(18,14,10,.82); border:1px solid rgba(201,162,75,.32);
    box-shadow:0 12px 36px rgba(0,0,0,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
  .c3kv.tpulse{display:inline-block; animation:tkvpulse 1s ease-in-out 3}
  @keyframes tkvpulse{0%,100%{transform:scale(1); filter:none}
    50%{transform:scale(1.16); filter:drop-shadow(0 0 10px rgba(236,202,119,.75))}}
  body.tour-live.tour-bar .c3bar{display:flex !important}   /* фаза 4: индикаторы ключей/дверей появляются по сюжету */
  body.tour-p4 .c3menu{pointer-events:auto}                 /* меню ЛОВИТ клики → не уходят в коридор */
  body.tour-p4 .c3menu *{pointer-events:none}               /* всё внутри инертно (тур ведёт программно) */
  body.tour-p4 .c3menu .tpick{pointer-events:auto !important}  /* КРОМЕ подсвеченного-для-выбора пункта */
  /* проявление меню ПУНКТАМИ сверху вниз (появление/затемнение — JS-переходы в revealMenuStaggered); контейнер мгновенно */
  .c3menu.tour-reveal{opacity:1 !important; transition:none}
  body.tour-p4 .c3menu .c3mi{transition:opacity .45s ease}   /* плавное затемнение (spotMenu вне reveal) */
  /* на время экскурсии прячем чипы ключей/дверей, бургер и КРАЕВЫЕ полоски-действия
     (иначе полоска внизу перекрывает кнопку «Закончить экскурсию»); тур сам ведёт отходы/выходы */
  body.tour-live .c3bar, body.tour-live .c3burger, body.tour-live .c3lean{display:none !important}
  /* «Закончить экскурсию» — ВЕРХНИЙ ЛЕВЫЙ угол: низ-центр перекрывал действия сцены (кнопки
     комнат, зоны). Бургер на время тура скрыт (body.tour-live) — угол свободен.
     safe-area-inset-left/top: в ландшафте айфона слева чёлка/Dynamic Island — не лезем под неё.
     Мин. высота 44px — тач-таргет по Apple HIG. */
  .tskip{position:absolute; top:calc(8px + env(safe-area-inset-top)); left:calc(10px + env(safe-area-inset-left));
    background:transparent; border:none; color:var(--gold-dim); cursor:pointer; pointer-events:auto;
    font-family:var(--display); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
    padding:8px 14px; min-height:44px; opacity:.7; transition:.2s; text-align:left}
  .tskip:hover{opacity:1; color:var(--gold)}

  /* перманентная кнопка «Домой» — правый верх, зеркалит бургер (.c3burger слева) */
  .homebtn{position:fixed; top:calc(14px + env(safe-area-inset-top)); right:18px; z-index:60;
    display:none; align-items:center; gap:7px; height:34px; padding:0 13px 0 11px;
    background:rgba(15,11,7,.62); border:1px solid var(--line); border-radius:9px;
    color:var(--gold); cursor:pointer; font-family:var(--display); font-size:13px; letter-spacing:.03em;
    opacity:0; pointer-events:none; transition:opacity .5s ease, border-color .2s, color .2s;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
  .homebtn.shown{display:flex; opacity:1; pointer-events:auto}
  .homebtn.spot{z-index:130}
  .homebtn:hover{border-color:var(--gold); color:var(--gold-hi)}
  .homebtn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linejoin:round; stroke-linecap:round}
  .homebtn .hlab{white-space:nowrap}

  /* spotlight: подсвеченный элемент над затемняющей шторой */
  .tspot{position:relative; z-index:130 !important}
  @media (prefers-reduced-motion: reduce){
    .tphrase, .homebtn, .tveil{transition-duration:.01ms !important}
  }
  /* ===== Иммерсивный 3D-коридор (за флагом FEATURE_CORRIDOR / ?corridor=1) ===== */
  /* коридор на весь экран — без рамки аппа */
  .corr3d{position:fixed; inset:0; width:100vw; height:100dvh; margin:0; overflow:hidden; z-index:40;
    border:none; border-radius:0; perspective:820px; perspective-origin:50% 45%;
    background:radial-gradient(120% 90% at 50% 40%, #14152a 0%, #0e0f1d 55%, #080810 100%);
    --w:480px; --h:420px; --d:3000px; --cz:300px; --cry:0deg; --cx:0px; user-select:none; -webkit-user-select:none}
  /* ── Ландшафт-гейт: телефон в портрете поверх 3D-сцены (видимость — чистый CSS) ── */
  #rotGate{display:none; position:fixed; inset:0; z-index:420; background:#000;
    flex-direction:column; align-items:center; justify-content:center; gap:20px;
    text-align:center; padding:28px calc(24px + env(safe-area-inset-left))}
  #rotGate .rg-phone{color:var(--gold, #c9a24b); animation:rgturn 2.6s ease-in-out infinite}
  #rotGate .rg-phone svg{width:58px; height:58px; display:block}
  #rotGate .rg-t{font-family:"Playfair Display",serif; color:var(--parchment-2,#e8dcc0);
    font-size:19px; line-height:1.5; max-width:300px}
  @keyframes rgturn{0%,18%{transform:rotate(0)} 52%,82%{transform:rotate(90deg)} 100%{transform:rotate(90deg)}}
  @media (orientation:portrait) and (pointer:coarse){ body.c3full #rotGate{display:flex} }
  body.c3full #rotGate.fslost{display:flex}   /* потеря fullscreen в 3D (и в ландшафте): гейт возврата */
  /* чип возврата в фулскрин: любая 3D-сцена на мобиле без fullscreen (видимость ставит JS) */
  #fsChip{position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:65; display:none;
    width:42px; height:42px; align-items:center; justify-content:center; border-radius:12px; cursor:pointer;
    border:1px solid var(--line); background:rgba(12,10,20,.55); color:var(--gold);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
  #fsChip.show{display:flex}
  #fsChip svg{width:20px; height:20px}
  @media (prefers-reduced-motion:reduce){ #rotGate .rg-phone{animation:none; transform:rotate(90deg)} }
  body.c3full{padding:0}
  body.c3full .app{border:none; box-shadow:none; background:none; min-height:0; padding:0}
  body.c3full .corner, body.c3full .grain{display:none}
  body.c3full .top{position:fixed; top:0; left:0; right:0; z-index:50; margin:0;
    padding:14px 18px calc(14px + env(safe-area-inset-top)); display:flex; align-items:center; justify-content:space-between}
  /* бургер ☰ коридора — часть хоста (см. corridor.js/corridor-memories.js): всегда виден, над меню-оверлеем */
  .c3burger{position:fixed; top:calc(14px + env(safe-area-inset-top)); left:18px; z-index:60}
  .c3cam{position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d;
    transform:translate3d(var(--cx),0,var(--cz)) rotateY(var(--cry)); transition:transform 1.15s cubic-bezier(.22,.61,.30,1)}
  .c3room{position:absolute; left:0; top:0; transform-style:preserve-3d; transform:translateZ(calc(var(--d) / -2))}
  .c3f{position:absolute; left:50%; top:50%}
  .c3floor,.c3ceil{width:var(--w); height:var(--d)}
  .c3left,.c3right{width:var(--d); height:var(--h)}
  .c3back{width:var(--w); height:var(--h)}
  .c3floor{transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--h) / -2));
    background:linear-gradient(90deg,transparent 34%,rgba(201,162,75,.09) 34.5%,transparent 35%,transparent 65%,rgba(201,162,75,.09) 65.5%,transparent 66%),linear-gradient(#111228,#0a0a15)}
  .c3ceil{transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h) / -2)); background:linear-gradient(#0a0a16,#060610)}
  .c3ceil::after{content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(0deg,transparent 0 300px,rgba(236,202,119,.13) 300px 322px,transparent 322px 360px);
    -webkit-mask:linear-gradient(90deg,transparent 40%,#000 50%,transparent 60%); mask:linear-gradient(90deg,transparent 40%,#000 50%,transparent 60%)}
  .c3left{transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--w) / -2)); background:linear-gradient(180deg,#0a0a16,#191a2e 42%,#141428 70%,#0a0a16)}
  .c3right{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w) / -2)); background:linear-gradient(180deg,#0a0a16,#191a2e 42%,#141428 70%,#0a0a16)}
  .c3left::before,.c3right::before{content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(90deg,transparent 0 300px,rgba(201,162,75,.08) 300px 302px,rgba(0,0,0,.3) 303px 306px,transparent 306px 320px)}
  .c3back{transform:translate(-50%,-50%) translateZ(calc(var(--d) / -2));
    background:radial-gradient(60% 80% at 50% 46%,rgba(236,202,119,.24),rgba(201,162,75,.05) 55%,#070710 78%)}
  .c3back svg{position:absolute; inset:0; margin:auto; width:38px; height:38px; fill:var(--gold-hi); opacity:.55; filter:drop-shadow(0 0 18px rgba(236,202,119,.6))}
  .c3vig{position:absolute; inset:0; pointer-events:none; z-index:5;
    background:radial-gradient(120% 100% at 50% 46%,transparent 44%,rgba(6,6,14,.5) 78%,rgba(4,4,10,.86) 100%)}
  .c3door{position:absolute; bottom:0; width:150px; height:290px; transform-style:preserve-3d; cursor:pointer}
  .c3leaf{position:absolute; inset:0; transform-origin:left center; transition:transform .9s cubic-bezier(.3,.7,.2,1);
    background:linear-gradient(90deg,#0b0b16,#1a1730 12%,#12101f 58%,#0d0c18); border:3px solid #07070f;
    box-shadow:0 0 0 2px rgba(201,162,75,.5),inset 0 0 40px rgba(0,0,0,.55)}
  .c3leaf::before{content:""; position:absolute; left:16px; right:16px; top:16px; height:145px; border:2px solid rgba(201,162,75,.3); border-radius:3px}
  .c3leaf::after{content:""; position:absolute; left:16px; right:16px; bottom:16px; height:92px; border:2px solid rgba(201,162,75,.3); border-radius:3px}
  .c3knob{position:absolute; right:14px; top:50%; width:10px; height:10px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%,var(--gold-hi),var(--gold) 60%,#6b4e18); box-shadow:0 0 8px rgba(236,202,119,.6); transform:translateY(-50%)}
  .c3glow{position:absolute; left:6px; right:6px; bottom:-2px; height:6px; background:linear-gradient(var(--gold-hi),transparent); filter:blur(5px); opacity:.7}
  .c3plate{position:absolute; top:-28px; left:50%; transform:translateX(-50%); white-space:nowrap;
    font-family:var(--display); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-hi); opacity:.9; text-shadow:0 0 12px rgba(236,202,119,.4)}
  .c3door.gift .c3plate{color:var(--gold)}
  .c3door:hover .c3leaf{box-shadow:0 0 0 2px var(--gold-hi),inset 0 0 40px rgba(0,0,0,.5),0 0 24px rgba(236,202,119,.32)}
  .c3door.open .c3leaf{transform:rotateY(-104deg)}
  .c3portal{position:absolute; inset:0; opacity:0; transition:opacity .5s .35s; z-index:-1;
    background:radial-gradient(80% 90% at 50% 50%,rgba(236,202,119,.9),rgba(201,162,75,.5) 40%,rgba(40,30,60,.2) 75%)}
  .c3door.open .c3portal{opacity:1}
  .c3door.sketch .c3leaf{background:repeating-linear-gradient(135deg,rgba(201,162,75,.05) 0 8px,transparent 8px 16px);
    border:2px dashed rgba(201,162,75,.5); box-shadow:none; opacity:.8}
  .c3door.sketch .c3leaf::before,.c3door.sketch .c3leaf::after{border-style:dashed; border-color:rgba(201,162,75,.4)}
  .c3door.sketch .c3knob,.c3door.sketch .c3glow{opacity:0}
  .c3spill{position:absolute; inset:0; z-index:18; pointer-events:none; opacity:0; transition:opacity .7s ease}
  .c3spill.L{background:radial-gradient(70% 90% at 22% 50%,rgba(236,202,119,.8),rgba(201,162,75,.3) 45%,transparent 72%)}
  .c3spill.R{background:radial-gradient(70% 90% at 78% 50%,rgba(236,202,119,.8),rgba(201,162,75,.3) 45%,transparent 72%)}
  .c3spill.on{opacity:1}
  .c3flash{position:absolute; inset:0; z-index:20; pointer-events:none; opacity:0;
    background:radial-gradient(60% 60% at 50% 50%,#fff7e6,var(--gold-hi) 40%,transparent 72%); transition:opacity .45s ease}
  .c3flash.on{opacity:1}
  .c3hud{position:absolute; left:0; right:0; bottom:0; z-index:12; padding:14px 12px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    background:linear-gradient(transparent,rgba(6,6,14,.72) 62%); opacity:0; transform:translateY(12px); transition:opacity .5s, transform .5s}
  .c3hud.show{opacity:1; transform:none}
  .c3btn{padding:11px 18px; border-radius:999px; border:1px solid var(--gold); background:linear-gradient(#1b1730,#12101d);
    color:var(--gold-hi); font-family:var(--display); font-size:15px; letter-spacing:.04em; cursor:pointer; transition:.2s}
  .c3btn:hover{box-shadow:0 0 20px rgba(236,202,119,.32); border-color:var(--gold-hi)}
  .c3btn.ghost{border-color:var(--line); color:var(--parchment)}
  .c3hint{position:absolute; left:0; right:0; bottom:74px; z-index:11; text-align:center; pointer-events:none;
    font-family:var(--display); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim); opacity:0; transition:opacity .5s}
  .c3hint.show{opacity:1}
  .c3empty{position:absolute; left:0; right:0; top:34%; z-index:11; text-align:center; padding:0 30px;
    color:var(--parchment-2); font-family:var(--serif); font-size:14px; line-height:1.55; opacity:0; transition:opacity .6s}
  .c3empty.show{opacity:1}
  @media (prefers-reduced-motion:reduce){ .c3cam{transition:none} }
  /* WebGL-коридор: канвас + оверлеи (меню/проявление/баланс/табличка) */
  .corr3d .c3canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
  .c3vig{position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(120% 100% at 50% 46%,transparent 40%,rgba(4,4,10,.5) 78%,rgba(2,2,6,.92) 100%)}
  .c3grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px; animation:c3gr .6s steps(3) infinite}
  @keyframes c3gr{to{background-position:180px 0}}
  .c3fade{position:absolute; inset:0; z-index:3; background:#05050c; opacity:1; transition:opacity 1.1s ease; pointer-events:none}
  .c3fade.clear{opacity:0}
  .c3loader{position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:#000; pointer-events:auto}
  .c3lcv{width:min(34vw,112px); height:min(34vw,112px)}
  .c3menu{position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:26px; padding:24px; opacity:0; transition:opacity .6s ease; pointer-events:none; text-align:center;
    background:radial-gradient(46% 42% at 50% 50%, rgba(8,6,16,.6), rgba(8,6,16,.15) 60%, transparent 78%)}
  .c3menu.show{opacity:1; pointer-events:auto}
  /* Коридор воспоминаний: НЕ фейдим контейнер по opacity — иначе backdrop-filter панели (blur) подавляется при opacity<1
     и «включается» скачком в конце фейда. Появление контейнера — мгновенное, а плавный въезд ведём transform'ом панели. */
  .mem3d .c3menu{transition:none}
  .mem3d .c3menu.show>.c3panel{animation:memPanelIn .42s cubic-bezier(.2,.8,.25,1)}
  @keyframes memPanelIn{from{transform:translateY(14px) scale(.985)} to{transform:none}}
  /* Каменный зал (руны): нижняя панель управления + подпись выпавшей руны */
  .runes3d .c3menu{opacity:1; pointer-events:none; background:none; display:block}
  .runes3d .c3menu>*{pointer-events:auto}
  .runeui{position:absolute; left:0; right:0; bottom:calc(20px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:none}
  .runeui>*{pointer-events:auto}
  .runehint{font-family:var(--display); font-size:14px; letter-spacing:.06em; color:var(--gold-dim); text-shadow:0 2px 12px #000; text-align:center}
  .runeread{min-width:230px}
  .runeleave{opacity:.7}
  /* подпись руны — НАД самой выложенной руной (left/top ставит JS проекцией её позиции на экран) */
  .runelab{position:absolute; transform:translate(-50%,-50%); font-family:var(--display); font-size:16px; letter-spacing:.05em;
    color:var(--parchment); text-shadow:0 2px 14px #000, 0 0 22px rgba(150,180,220,.4); pointer-events:none; white-space:nowrap;
    animation:runelabIn .5s ease}
  .runelab b{color:var(--gold-hi); font-weight:600}
  @keyframes runelabIn{from{opacity:0} to{opacity:1}}
  .runes3d .c3lean-b{height:78px}                    /* уже: не цепляется при дотягивании до рун на столе */
  .runes3d .c3lean-b span{margin-bottom:16px}
  /* осмотр выложенной руны: крупный глиф перед лицом + подпись */
  .runezoom{position:absolute; inset:0; z-index:11; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:radial-gradient(ellipse at center, rgba(6,10,16,.72), rgba(3,5,9,.93)); backdrop-filter:blur(3px); cursor:pointer;
    animation:runeZoomIn .32s ease}
  .runezoom .rz-glyph{font-family:Georgia,"Noto Sans Runic",serif; font-size:min(38vh,240px); line-height:1; color:#dce8fb;
    text-shadow:0 0 34px rgba(150,190,255,.5), 0 6px 26px #000; animation:runeZoomGlyph .5s ease}
  .runezoom .rz-pos{font-family:var(--display); font-size:15px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dim)}
  .runezoom .rz-name{font-family:var(--display); font-size:26px; letter-spacing:.08em; color:var(--parchment)}
  .runezoom .rz-rev{font-family:var(--serif); font-size:15px; color:var(--parchment-2)}
  .runezoom .rz-hint{margin-top:10px; font-family:var(--serif); font-size:13px; color:var(--parchment-2); opacity:.75}
  /* салон Ленорманд: осмотр карты — тёплая гамма вместо холодной рунной */
  .lenzoom{background:radial-gradient(ellipse at center, rgba(24,14,8,.74), rgba(8,5,3,.94))}
  .lenzoom .rz-num{font-family:var(--display); font-size:min(24vh,150px); line-height:1; color:#f0e3c6;
    text-shadow:0 0 34px rgba(210,168,90,.45), 0 6px 26px #000; animation:runeZoomGlyph .5s ease}
  .lenzoom .rz-name{font-size:28px}
  .lenzoom .lz-art{max-height:64vh; max-width:82vw; border-radius:6px; box-shadow:0 12px 44px rgba(0,0,0,.72);
    animation:runeZoomGlyph .5s ease}                /* при осмотре карты — сам арт крупно */
  /* режим «свеча»: арт мельче + вертикальный скролл, чтобы кнопка и толкование помещались */
  .lenzoom.hasask{justify-content:flex-start; padding:4.5vh 16px 4vh; overflow-y:auto; gap:12px}
  .lenzoom.hasask .lz-art{max-height:38vh}
  /* кабинет Перемен: подписи (черты/выход) — с подложкой, чтоб не сливались со сценой */
  .iching3d .runelab{background:rgba(10,12,16,.62); padding:6px 13px; border-radius:10px;
    border:1px solid rgba(201,162,75,.28); backdrop-filter:blur(2px)}
  /* Слово на глади ВО ВСЕХ комнатах — ЧИСТО ИНФОРМАЦИОННОЕ: клики проходят сквозь него в канвас (рейкаст
     в гладь/монеты делает то же действие). Иначе слово при мышь-люке уезжает к краю экрана и перехватывает
     краевой клик → «сесть за стол» вместо разворота. `.c3menu>.c3mirrorword` (0-3-0) ОБЯЗАН биться
     специфичнее общего `.room3d .c3menu>*{pointer-events:auto}` (0-2-0), иначе то правило делало слово auto. */
  .room3d .c3menu>.c3mirrorword{pointer-events:none}
  .iching3d .c3mirrorword{flex-direction:column; align-items:center; gap:2px}
  .iching3d .c3mirrorword .mw-row{display:flex; justify-content:center; white-space:pre}
  /* маркер-портал в туториал (на лицевой стороне вазы): волнистый «?», РИСУЕТСЯ (крючок→хвостик, точка, кружок),
     затем ~2с виден и ~4с скрыт (цикл 6.5с). Значок КЛИКАБЕЛЕН: сама ваза стоит у стены и на узком
     экране за кадр уезжает — без этого сопровождение на телефоне было не включить вовсе */
  .iching3d .ichportal{position:absolute; z-index:8; transform:translate(-50%,-50%); cursor:pointer;
    filter:drop-shadow(0 0 10px rgba(110,170,255,.6))}
  .iching3d .ichportal .qpath{stroke-dasharray:1; animation:ichDrawQ 6.5s ease-in-out infinite}
  .iching3d .ichportal .ichdot{animation:ichDrawDot 6.5s ease-in-out infinite}
  .iching3d .ichportal .ichcirc{stroke-dasharray:1; animation:ichDrawC 6.5s ease-in-out infinite}
  @keyframes ichDrawQ{0%{stroke-dashoffset:1;opacity:0} 2%{opacity:1} 12%{stroke-dashoffset:0} 37%{stroke-dashoffset:0;opacity:1} 44%{opacity:0} 100%{stroke-dashoffset:0;opacity:0}}
  @keyframes ichDrawDot{0%,12%{opacity:0} 15%{opacity:1} 37%{opacity:1} 44%{opacity:0} 100%{opacity:0}}
  @keyframes ichDrawC{0%,15%{stroke-dashoffset:1;opacity:0} 17%{opacity:1} 25%{stroke-dashoffset:0} 37%{stroke-dashoffset:0;opacity:1} 44%{opacity:0} 100%{stroke-dashoffset:0;opacity:0}}
  /* Краевые полосы .c3lean — ВИЗУАЛЬНЫЕ (pointer-events:none, см. общее правило .room3d ниже);
     клик у края ловит канвас через nav.edgeClick (edge-nav.js). z-index:9 — слово-дуга на глади выше. */
  .iching3d .c3lean{z-index:9}
  /* Обсерватория: фолиант на полу — вход в сопровождение. Книга лежит В УГЛУ кадра, а там у
     комнаты краевые действия, и канвас ловит их РАНЬШЕ рейкаста сцены. Поэтому клик берёт
     не сцена, а эта накладка: обводит книгу с запасом и лежит поверх канваса (z-index 20 —
     выше краевых полос, ниже верхней планки комнаты). Метка «?» внутри неё — просто рисунок. */
  /* Сам значок «?» рисуется В СЦЕНЕ (плоскость над обложкой), а это — только невидимый
     хитбокс поверх него: краевые зоны комнаты канвас разбирает раньше рейкаста, и без
     накладки клик по книге у края кадра уходил бы в «отойти от стола». */
  .room3d .c3book{position:absolute; z-index:20; cursor:pointer; background:none;
    -webkit-tap-highlight-color:transparent}
  /* Полоса сопровождения — снизу по центру, поверх сцены, но кликабелен только крестик */
  .room3d .c3learn{position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
    z-index:22; max-width:min(460px,86vw); padding:10px 34px 10px 14px; border-radius:10px;
    background:rgba(16,13,9,.86); border:1px solid rgba(201,168,106,.34); color:var(--parchment-2);
    font-family:var(--serif); font-size:14px; line-height:1.5; text-align:center;
    backdrop-filter:blur(6px); pointer-events:none; animation:obsLearnIn .45s ease}
  .room3d .c3learn b{color:var(--gold); font-weight:600}
  .room3d .c3learn .lx{position:absolute; right:6px; top:4px; padding:2px 7px; cursor:pointer;
    color:#8f8a80; font-size:16px; line-height:1.2; pointer-events:auto}
  .room3d .c3learn .lx:hover{color:var(--gold)}
  @keyframes obsLearnIn{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}
  /* Подпись только что выложенной карты: висит над самой картой (позицию каждый кадр
     считает сцена), проявляется и гаснет ПЛАВНО. Живёт несколько секунд или до следующей
     карты. Кликов не ловит — под ней сама карта, её осмотр по клику. */
  .room3d .c3cardcap{position:absolute; z-index:21; transform:translate(-50%,-100%);
    padding:5px 12px; border-radius:999px; white-space:nowrap; pointer-events:none;
    background:rgba(16,13,9,.72); border:1px solid rgba(201,168,106,.30);
    color:var(--parchment-2); font-family:var(--serif); font-size:13px; letter-spacing:.06em;
    text-transform:uppercase; backdrop-filter:blur(4px);
    opacity:0; transition:opacity .5s ease, transform .5s ease}
  .room3d .c3cardcap.show{opacity:1; transform:translate(-50%,-100%) translateY(-6px)}
  /* кабинет Перемен: осмотр гексаграммы — тёплая чернильная гамма */
  .ichzoom{background:radial-gradient(ellipse at center, rgba(20,16,9,.76), rgba(7,5,3,.94)); gap:10px}
  .ichzoom .ichex-row{display:flex; align-items:center; gap:26px; animation:runeZoomGlyph .5s ease}
  .ichzoom .ichex{display:flex; flex-direction:column; align-items:center; gap:8px}
  .ichzoom .ichex-g svg{width:min(24vh,150px); height:min(24vh,150px); filter:drop-shadow(0 0 22px rgba(216,201,166,.28))}
  .ichzoom .ichex-arrow{font-size:34px; color:var(--gold-dim)}
  .ichzoom .rz-name{font-size:24px}
  /* подпись открытой карты (Ленорман): ТЁМНЫЙ шрифт со светлым ореолом — на кремовой бумаге светлый сливался */
  .lenor3d .runelab{color:#2a1d0f; text-shadow:0 1px 2px rgba(255,248,228,.7), 0 0 12px rgba(244,230,196,.6)}
  .lenor3d .runelab b{color:#7a5312}
  .lenor3d .c3lean-b{height:78px}                    /* уже: не цепляется при дотягивании до карт на столе */
  .lenor3d .c3lean-b span{margin-bottom:16px}
  @keyframes runeZoomIn{from{opacity:0} to{opacity:1}}
  @keyframes runeZoomGlyph{from{opacity:0; transform:scale(.82)} to{opacity:1; transform:scale(1)}}
  /* комната: канвас должен получать обзор/клик; меню-контейнер прозрачен для событий, кликабельны только кнопки */
  .room3d .c3menu{opacity:1; pointer-events:none; background:none; display:block}
  .room3d .c3menu>*{pointer-events:auto}
  .room3d .c3menu>.c3lean{pointer-events:none}   /* краевые зоны ВЕЗДЕ визуальные; клик у края ловит канвас → nav.edgeClick (edge-nav.js). Так тач-свайп по всему экрану уходит в обзор */
  /* «речь зеркала» — оверлей толкования поверх сцены комнаты */
  .mirrorspeak{position:absolute; inset:0; z-index:9; display:flex; align-items:center; justify-content:center; padding:24px;
    background:radial-gradient(60% 60% at 50% 42%, rgba(8,8,20,.42), rgba(4,4,10,.62)); backdrop-filter:blur(2px)}
  .mirrorspeak .ms-inner{max-width:580px; width:100%; max-height:86%; overflow:auto; text-align:center;
    background:linear-gradient(rgba(24,20,42,.62),rgba(14,12,26,.7)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(201,162,75,.4); border-radius:16px; padding:22px 20px; box-shadow:0 0 40px rgba(201,162,75,.15), 0 8px 40px rgba(0,0,0,.5);
    scrollbar-width:thin; scrollbar-color:rgba(201,162,75,.35) transparent}
  .mirrorspeak .ms-inner::-webkit-scrollbar{width:6px}
  .mirrorspeak .ms-inner::-webkit-scrollbar-thumb{background:rgba(201,162,75,.3); border-radius:3px}
  .mirrorspeak .ms-inner::-webkit-scrollbar-track{background:transparent}
  .mirrorspeak .ms-title{font-family:var(--display); color:var(--gold-hi); font-size:22px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px}
  .mirrorspeak .ms-row{display:flex; gap:12px; text-align:left; margin-bottom:14px; align-items:flex-start}
  .mirrorspeak .ms-row img{width:56px; border-radius:5px; box-shadow:0 3px 12px rgba(0,0,0,.5); flex:none}
  .mirrorspeak .ms-pos{font-family:var(--display); color:var(--gold); font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px}
  .mirrorspeak .ms-txt{color:var(--parchment); font-family:var(--serif); font-size:16px; line-height:1.5}
  .mirrorspeak .ms-close{margin-top:8px}
  /* Плавное окно чтения (Обсерватория). Класс отдельный: `.mirrorspeak` носят и подтверждения
     в других комнатах, а им прозрачность по умолчанию не нужна. */
  .mirrorspeak.ms-fade{opacity:0; transition:opacity .5s ease}
  .mirrorspeak.ms-fade .ms-inner{transform:translateY(10px) scale(.985); transition:transform .5s ease}
  .mirrorspeak.ms-fade.ms-in{opacity:1}
  .mirrorspeak.ms-fade.ms-in .ms-inner{transform:none}
  .msdonehint{position:absolute; left:50%; bottom:14%; transform:translate(-50%,10px); z-index:8; max-width:min(420px,86%);
    text-align:center; font-family:var(--serif); font-size:14px; line-height:1.5; color:var(--parchment);
    background:rgba(10,8,16,.72); border:1px solid rgba(201,162,75,.3); border-radius:12px; padding:12px 18px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .5s, transform .5s; pointer-events:none}
  .msdonehint.show{opacity:1; transform:translate(-50%,0)}
  .mirrorspeak .ms-synth{text-align:left; color:var(--gold-hi); font-family:var(--serif); font-size:16px; line-height:1.55; font-style:italic;
    border-top:1px solid rgba(201,162,75,.28); padding-top:14px; margin-top:4px}
  /* чтение = раскрывающееся дерево (как в 2D): узлы-карты несут миниатюру+позицию, карет ▸ разворачивает абзацы */
  .mirrorspeak .reading.tree{white-space:normal; text-align:left; margin:0; font-size:16px}
  .mirrorspeak .tpar{font-size:16px; line-height:1.55}
  .mirrorspeak .tpar.tcard{display:flex; gap:11px; align-items:flex-start; padding:6px 2px 12px 20px}
  .mirrorspeak .tthumb{width:52px; border-radius:5px; box-shadow:0 3px 12px rgba(0,0,0,.5); flex:none}
  .mirrorspeak .tthumb.rev{transform:rotate(180deg)}
  .mirrorspeak .tpar .ms-pos{display:inline; margin:0}
  .mirrorspeak .tkids .tpar{font-size:15px}
  /* абзацы, которые можно РАЗВЕРНУТЬ — слегка подсвечиваются (проявление/угасание плавные); раскрытый — без подсветки */
  .mirrorspeak .tpar.haskids{border-radius:8px; transition:background .6s ease; animation:msExpandGlow 3.4s ease-in-out infinite}
  .mirrorspeak .tpar.haskids .tcaret{animation:msCaretGlow 3.4s ease-in-out infinite}
  .mirrorspeak .tpar.haskids.on{animation:none; background:transparent}
  @keyframes msExpandGlow{0%,100%{background:rgba(201,162,75,0)} 50%{background:rgba(201,162,75,.09)}}
  @keyframes msCaretGlow{0%,100%{color:var(--gold-dim)} 50%{color:var(--gold-hi)}}
  @media (prefers-reduced-motion:reduce){ .mirrorspeak .tpar.haskids,.mirrorspeak .tpar.haskids .tcaret{animation:none} .mirrorspeak .tpar.haskids{background:rgba(201,162,75,.05)} }
  /* «тяни карты» — аккуратное сообщение над веером */
  .c3drawmsg{position:absolute; left:0; right:0; bottom:12%; z-index:8; text-align:center; pointer-events:none;
    font-family:var(--display); font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi);
    text-shadow:0 2px 18px rgba(0,0,0,.85), 0 0 22px rgba(201,162,75,.4); opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease}
  .c3drawmsg.show{opacity:1; transform:none; animation:c3tipPulse 3s ease-in-out infinite}
  /* подсказки-статусы: плавное появление/исчезание + лёгкий пульс яркости */
  .c3tip{position:absolute; right:16px; top:calc(58px + env(safe-area-inset-top)); z-index:8; max-width:230px; text-align:right; pointer-events:none;
    font-family:var(--serif); font-style:italic; font-size:14px; line-height:1.45; color:#e6d9be;
    text-shadow:0 1px 10px rgba(0,0,0,.8), 0 0 16px rgba(150,200,255,.35);
    opacity:0; transform:translateY(-6px); transition:opacity .5s ease, transform .5s ease}
  .c3tip.show{opacity:1; transform:none; animation:c3tipPulse 3s ease-in-out infinite}
  @keyframes c3tipPulse{0%,100%{filter:brightness(.86)} 50%{filter:brightness(1.12)}}
  @media (prefers-reduced-motion:reduce){ .c3tip.show,.c3drawmsg.show{animation:none} }
  /* подсказка «Небо» при наведении на контур стола/крышу */
  .c3skyhint{position:absolute; left:0; top:0; z-index:9; white-space:nowrap; pointer-events:none;   /* следует за курсором (transform ставится в tick) */
    font-family:var(--display); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#cfe6ff;
    text-shadow:0 1px 10px rgba(0,0,0,.9), 0 0 16px rgba(127,208,255,.6); opacity:0; transition:opacity .25s ease}
  .c3skyhint.show{opacity:1}
  /* «отойти от стола» — три зоны (низ/лево/право), проявляются при приближении курсора */
  .c3lean{position:absolute; z-index:7; opacity:0; pointer-events:none; transition:opacity .28s ease; display:flex;
    align-items:center; justify-content:center; color:#c6ccd8; text-shadow:0 1px 6px rgba(0,0,0,.75); font-family:var(--display); letter-spacing:.16em}
  .c3lean.show{opacity:1}   /* ЧИСТО ВИЗУАЛЬНЫЕ: клик по краю ловит обработчик канваса по факту позиции (не DOM-перехват) */
  .c3lean:hover{color:var(--gold-hi); text-shadow:0 0 18px rgba(236,202,119,.55)}
  .c3lean-b{left:0; right:0; bottom:0; height:130px; font-size:15px; text-transform:uppercase; align-items:flex-end;
    background:linear-gradient(to top, rgba(150,157,175,.32), transparent)}
  .c3lean-b span{margin-bottom:30px}
  .c3lean-l{left:0; top:6%; bottom:6%; width:88px; font-size:24px;
    background:linear-gradient(to right, rgba(150,157,175,.30), transparent);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent)}
  .c3lean-r{right:0; top:6%; bottom:6%; width:88px; font-size:24px;
    background:linear-gradient(to left, rgba(150,157,175,.30), transparent);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent)}
  /* confirm-меню (отпереть крышу / оставить) */
  .c3confirm{display:flex; gap:12px; justify-content:center; margin-top:6px; flex-wrap:wrap}
  /* мистические «слова зеркала» — дрожащая волнящаяся надпись напротив глади (вместо кнопки) */
  .c3mirrorword{position:absolute; z-index:8; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer;
    display:flex; white-space:pre; font-family:var(--display); font-size:21px; letter-spacing:.14em;
    perspective:340px; transform-style:preserve-3d;   /* надпись ВЫПУКЛА к зрителю: центр букв ближе (translateZ per-letter) */
    filter:drop-shadow(0 0 10px rgba(150,200,255,.5))}
  /* обёртка буквы — всплывает из глубины зеркала слева-направо (стаггер по --i); тонет обратно на .mw-out */
  .c3mirrorword .mw-l{ display:inline-block; transform-style:preserve-3d;
    opacity:0; transform:scale(.5) translateY(3px); filter:blur(6px);
    transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; transition-delay:calc(var(--i,0)*0.05s)}
  .c3mirrorword.mw-in .mw-l{ opacity:1; transform:none; filter:none}
  .c3mirrorword.mw-out .mw-l{ opacity:0; transform:scale(.5) translateY(3px); filter:blur(6px); transition-delay:calc(var(--i,0)*0.04s)}
  .c3mirrorword .mw-l>span{ display:inline-block; color:#e6f0ff; text-shadow:0 0 8px rgba(150,200,255,.9), 0 0 22px rgba(120,170,255,.55), 0 1px 0 rgba(255,255,255,.35), 0 2px 3px rgba(20,40,90,.6);
    animation:c3mw 2.6s ease-in-out infinite; will-change:transform,opacity}
  @keyframes c3mw{ 0%,100%{ transform:translateZ(var(--z,0)) scale(var(--sc,1)) translateY(1.5px) skewX(-3deg); opacity:.55 } 50%{ transform:translateZ(var(--z,0)) scale(var(--sc,1)) translateY(-2.5px) skewX(3deg); opacity:1 } }
  @media (prefers-reduced-motion:reduce){ .c3mirrorword .mw-l{transition-duration:.01ms} .c3mirrorword .mw-l>span{ animation:none; opacity:.9 } }
  .c3mi{background:none; border:none; cursor:pointer; color:var(--parchment); font-family:var(--display);
    font-size:20px; letter-spacing:.22em; text-transform:uppercase; padding:8px 14px; transition:.2s; text-shadow:0 2px 20px rgba(0,0,0,.85)}
  .c3mi:hover{color:var(--gold-hi); text-shadow:0 0 20px rgba(236,202,119,.6)}
  .c3mi.gift{color:var(--gold)}
  .c3mi.dim{font-size:15px; letter-spacing:.18em; color:var(--gold-dim)}
  .c3mi.dim:hover{color:var(--gold)}
  .c3note{color:var(--parchment-2); font-family:var(--serif); font-size:14px; line-height:1.55; max-width:300px; margin-bottom:6px}
  /* статус «зеркало вглядывается» — по ЦЕНТРУ экрана, аккуратно (не в углу) */
  .c3gaze{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:8; pointer-events:none; text-align:center; max-width:80%}
  .c3gaze span{display:inline-block; font-family:var(--serif); font-style:italic; font-size:17px; letter-spacing:.04em;
    color:#e9dcc0; text-shadow:0 0 14px rgba(150,200,255,.5), 0 2px 10px rgba(0,0,0,.7);
    padding:10px 22px; border-radius:999px; background:rgba(10,10,20,.32);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    animation:c3gazePulse 2.4s ease-in-out infinite}
  @keyframes c3gazePulse{0%,100%{opacity:.72} 50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){ .c3gaze span{animation:none; opacity:.92} }
  .c3flash{position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0; transition:opacity .5s ease;
    background:radial-gradient(60% 60% at 50% 50%,#fff7e6,var(--gold-hi) 42%,transparent 74%)}
  .c3flash.on{opacity:1}
  .c3dlab{position:absolute; z-index:5; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap;
    font-family:var(--display); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi);
    text-shadow:0 0 14px rgba(236,202,119,.6); opacity:0; transition:opacity .3s}
  .c3bar{position:absolute; right:14px; top:calc(12px + env(safe-area-inset-top)); z-index:51; display:flex; gap:9px;
    opacity:0; transition:opacity .6s; pointer-events:none}
  .c3bar.show{opacity:1}
  /* чипы-пилюли вверху-справа (как прежние баланс-чипы), но С ПОДПИСЯМИ */
  .c3kv{display:flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
    border:1px solid var(--brass-faint,#4A4231); background:rgba(20,16,30,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    font-family:var(--display); font-size:12.5px; letter-spacing:.1em; color:var(--gold-dim)}
  .c3kv b{color:var(--gold-hi); font-weight:600; font-size:14.5px; letter-spacing:.02em}
  .c3ic{width:13px; height:13px; vertical-align:-2px; fill:none; stroke:var(--gold); stroke-width:1.6}
  /* полупрозрачные панели ПОВЕРХ живой сцены (пикер типа / параметры у двери) */
  .c3panel{width:min(560px,92%); max-height:84%; overflow:auto; text-align:left; pointer-events:auto;
    background:rgba(10,8,16,.62); border:1px solid var(--line); border-radius:16px; padding:22px 24px;
    -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
    scrollbar-width:thin; scrollbar-color:rgba(201,162,75,.35) transparent}
  .c3panel::-webkit-scrollbar{width:6px}
  .c3panel::-webkit-scrollbar-thumb{background:rgba(201,162,75,.3); border-radius:3px}
  .c3panel::-webkit-scrollbar-track{background:transparent}
  /* пикер: заголовок/табы/кнопка-назад ЗАКРЕПЛЕНЫ, скроллится ТОЛЬКО список.
     ФИКСИРОВАННЫЙ размер — панель НЕ прыгает при переключении табов (и в дэмо, и в реале) */
  .c3panel.picker{display:flex; flex-direction:column; overflow:hidden; height:min(72vh,540px); max-height:none}
  .c3panel.picker>.c3ptitle,.c3panel.picker>.c3ptabs,.c3panel.picker>.c3crumb,.c3panel.picker>.c3mi{flex:none}
  /* путь-крошки (Finder-стиль): Категория ▸ Расклад */
  .c3crumb{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px;
    font-family:var(--display); font-size:13px; letter-spacing:.05em; margin-bottom:12px; text-align:center}
  .c3crseg{color:var(--gold-hi)}
  .c3crsep{color:var(--gold-dim); font-size:10px; transform:translateY(1px)}
  /* подпись-инструкция экрана раскладов (под путём) */
  .c3ptitle.c3subtitle{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin:-2px 0 12px}
  /* строка категории: имя СЛЕВА, короткий дескрипшн СПРАВА — используем ширину */
  .c3prow.catrow{display:flex; align-items:center; gap:14px}
  .c3prow.catrow .t{flex:none; font-size:15px}
  .c3prow.catrow .cd{flex:1 1 auto; min-width:0; text-align:right; font-size:12.5px; line-height:1.4; color:var(--gold-dim)}
  /* ВЕБ (по умолчанию) — как было: обычный тонкий скролл, стандартный подбородок */
  .c3panel.picker>.c3plist,.c3panel.picker>.c3doorlist{flex:1 1 auto; overflow-y:auto; min-height:0;
    scrollbar-width:thin; scrollbar-color:rgba(201,162,75,.35) transparent}
  .c3panel.picker>.c3plist::-webkit-scrollbar,.c3panel.picker>.c3doorlist::-webkit-scrollbar{width:6px}
  .c3panel.picker>.c3plist::-webkit-scrollbar-thumb,.c3panel.picker>.c3doorlist::-webkit-scrollbar-thumb{background:rgba(201,162,75,.3); border-radius:3px}
  /* МОБИЛА/ТАЧ: подбородок средней толщины, кнопка «назад» на ВСЮ полосу; скролл — жёлоб + fade-края (iOS не рисует ::-webkit-scrollbar) */
  @media (max-width:640px), (pointer:coarse){
    .c3panel.picker{padding-bottom:16px}
    .c3panel.picker>.c3mi{display:block; width:100%; box-sizing:border-box; margin:8px 0 0 !important; padding:11px; text-align:center;
      background:rgba(201,162,75,.09); border:1px solid rgba(201,162,75,.22); border-radius:11px; color:var(--gold-hi)}
    .c3panel.picker>.c3plist,.c3panel.picker>.c3doorlist{overflow-y:scroll; padding-right:10px; scrollbar-gutter:stable;
      scrollbar-color:rgba(201,162,75,.5) rgba(201,162,75,.10);
      -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%);
      mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%)}
    .c3panel.picker>.c3plist::-webkit-scrollbar,.c3panel.picker>.c3doorlist::-webkit-scrollbar{width:8px}
    .c3panel.picker>.c3plist::-webkit-scrollbar-track,.c3panel.picker>.c3doorlist::-webkit-scrollbar-track{background:rgba(201,162,75,.10); border-radius:4px; margin:2px 0}
    .c3panel.picker>.c3plist::-webkit-scrollbar-thumb,.c3panel.picker>.c3doorlist::-webkit-scrollbar-thumb{background:rgba(201,162,75,.5); border-radius:4px; border:1px solid rgba(0,0,0,.15)}
  }
  .c3ptabs{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:8px}
  .c3ptab{background:none; border:1px solid rgba(201,162,75,.25); border-radius:999px; padding:5px 11px;
    color:var(--gold-dim); font-family:var(--display); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:.2s}
  .c3ptab:hover{color:var(--gold)}
  .c3ptab.on{color:var(--gold-hi); border-color:var(--gold)}
  .c3ptitle{font-family:var(--display); font-size:15px; letter-spacing:.08em; color:var(--gold-hi); margin-bottom:10px; text-align:center}
  .c3phead{font-family:var(--display); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dim); margin:12px 0 6px}
  .c3prow{display:block; width:100%; text-align:left; background:rgba(255,255,255,.03); border:1px solid rgba(201,162,75,.18);
    border-radius:9px; padding:9px 11px; margin:5px 0; cursor:pointer; color:var(--parchment); font-family:var(--serif)}
  .c3prow:hover{border-color:var(--gold)}
  .c3prow .t{display:block; font-size:14px}
  .c3prow .d{display:block; font-size:12.5px; color:var(--gold-dim); margin-top:2px; line-height:1.45}
  .c3droom{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.03); border:1px solid rgba(201,162,75,.18);
    border-radius:9px; padding:9px 11px; margin:6px 0}
  .c3droom.gift{border-color:rgba(201,162,75,.4); background:rgba(201,162,75,.06)}
  .c3dmain{flex:1; min-width:0}
  .c3dtitle{font-family:var(--serif); font-size:14px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .c3dmeta{font-size:11.5px; color:var(--gold-dim); margin-top:3px; line-height:1.4}
  .c3dacts{display:flex; flex-direction:column; gap:6px; flex:none}
  .c3btn.mini{padding:7px 12px; font-size:12px; letter-spacing:.02em}
  /* МОБИЛА: кнопки двери В РЯД (а не столбиком) + компактнее → влезает вдвое больше дверей без скролла */
  @media (max-width:640px){
    .c3droom{gap:8px; padding:8px 10px; margin:5px 0}
    .c3dacts{flex-direction:row; align-items:center; gap:6px}
    .c3btn.mini{padding:6px 9px; font-size:11px; letter-spacing:0}
    .c3dmeta{font-size:11px; margin-top:2px}
  }
  .c3pmech{font-size:12.5px; line-height:1.5; color:var(--parchment-2); background:rgba(201,162,75,.05);
    border:1px solid rgba(201,162,75,.16); border-radius:9px; padding:9px 11px; margin:7px 0}
  .c3pmech.dim2{background:rgba(255,255,255,.02)}
  /* панель настройки переосмысления (в комнате-отражении) */
  .mirrorspeak .rlist{display:flex; flex-direction:column; gap:6px; margin:12px 0 4px; text-align:left}
  .mirrorspeak .rrow{background:rgba(255,255,255,.03); border:1px solid rgba(201,162,75,.16); border-radius:8px; padding:8px 11px; font-family:var(--serif)}
  .mirrorspeak .rrow b{color:var(--parchment); font-size:15px; font-weight:600}
  .mirrorspeak .rrow span{display:block; color:var(--gold-dim); font-size:12.5px; margin-top:2px}
  .mirrorspeak .rq{margin-top:10px}
  .mirrorspeak .ratoggle{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:9px 12px;
    background:rgba(255,255,255,.03); border:1px solid rgba(201,162,75,.18); border-radius:9px; cursor:pointer; color:var(--parchment); font-family:var(--serif); font-size:13px}
  .mirrorspeak .ratoggle .rax{display:flex; align-items:center; gap:7px; color:var(--gold-dim)}
  .mirrorspeak .ratoggle .racost{color:var(--gold-dim); font-size:12px}
  .mirrorspeak .ratoggle.on{border-color:var(--gold); background:rgba(201,162,75,.08)}
  .mirrorspeak .ratoggle.on .rax{color:var(--gold-hi)}
  .c3storebal{text-align:center; font-family:var(--serif); font-size:13.5px; color:var(--parchment-2); margin:2px 0 10px}
  .c3storebal b{color:var(--gold-hi)}
  .c3panel .packs.c3packs{margin-top:4px}
  @media(min-width:520px){ .c3panel .packs.c3packs{display:grid; grid-template-columns:1fr 1fr; gap:11px} }
  .c3q{width:100%; min-height:74px; margin-top:8px; background:rgba(0,0,0,.35); border:1px solid var(--line);
    border-radius:9px; color:var(--parchment); font-family:var(--serif); font-size:14px; padding:9px 11px; resize:vertical}
  /* Ленорман: сетка карт-эмблем с переворотом */
  .lenogrid{display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:7px; max-width:520px; margin:14px auto 6px}
  .lenocard{aspect-ratio:3/4; perspective:600px; transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.25,1)}
  .lenocard.pre{opacity:0; transform:translateY(14px)}
  .lenocard.sig{border-radius:9px; box-shadow:0 0 0 2px var(--gold-hi), 0 0 22px rgba(236,202,119,.45)}
  .castinstr.sig{color:var(--gold-hi)}
  /* B-версия Скатерти: Зеркало ведёт взглядом — карты подсвечиваются синхронно с чтением */
  .lenogrid.walking .lenocard{transition:box-shadow .5s ease, opacity .5s ease, transform .5s ease}
  .lenogrid.walking .lenocard:not(.walk):not(.walked):not(.sig){opacity:.42}
  .lenocard.walked{border-radius:9px; box-shadow:0 0 0 1px rgba(201,162,75,.55), 0 0 12px rgba(201,162,75,.28)}
  .lenocard.walk{border-radius:9px; box-shadow:0 0 0 2px var(--gold-hi), 0 0 26px rgba(236,202,119,.6); transform:translateY(-3px) scale(1.045); z-index:2}
  @keyframes lenopulse{0%,100%{box-shadow:0 0 0 2px var(--gold-hi), 0 0 22px rgba(236,202,119,.45)}50%{box-shadow:0 0 0 3px var(--gold-hi), 0 0 34px rgba(236,202,119,.75)}}
  .lenocard.sig.walk{animation:lenopulse 1.4s ease-in-out infinite}
  /* Пошаговый проводник по Скатерти: закреплённая снизу панель с текстом узла + навигация */
  .lenoguide{position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:linear-gradient(180deg, rgba(22,17,11,.90), rgba(15,11,7,.99));
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    border-top:1px solid var(--line); box-shadow:0 -12px 34px rgba(0,0,0,.55);
    padding-bottom:env(safe-area-inset-bottom)}
  .lenoguide .lgwrap{max-width:560px; margin:0 auto; padding:12px 16px 12px; display:flex; flex-direction:column}
  .lenoguide .lghead{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:7px}
  .lenoguide .lgtext{max-height:32vh; overflow-y:auto; font-size:15px; line-height:1.62; color:var(--parchment)}
  .lenoguide .lgpar{white-space:pre-wrap}
  .lenoguide .lgpar+.lgpar{margin-top:8px}
  .lenoguide .lgsub{font-size:13.5px; color:var(--gold-dim); padding-left:11px; border-left:1px solid var(--line)}
  .lenoguide .lgnav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:11px}
  .lenoguide .lgdots{font-size:12px; letter-spacing:.06em; color:var(--gold-dim); font-variant-numeric:tabular-nums}
  .lenoguide .lgbtn{flex:0 0 auto; min-width:98px; padding:9px 15px; border:1px solid var(--line);
    border-radius:8px; background:rgba(201,162,75,.08); color:var(--parchment); font:inherit; font-size:14px; cursor:pointer}
  .lenoguide .lgnext{border-color:rgba(201,162,75,.5); color:var(--gold-hi)}
  .lenoguide .lgprev{color:var(--gold-dim)}
  .lenoguide .lgskip{margin-top:9px; align-self:center; background:none; border:none;
    color:var(--gold-dim); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer}
  .lgspacer{height:48vh}
  .lenoinner{position:relative; width:100%; height:100%; transform-style:preserve-3d;
    transition:transform .5s cubic-bezier(.2,.8,.25,1)}
  .lenoinner.flip{transform:rotateY(180deg)}
  .lenoface{position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line);
    border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    overflow:hidden; padding:3px; text-align:center}
  .lenoface.bk{background:linear-gradient(180deg,#1a1530,#120e22); color:var(--gold-dim)}
  .lenoface.bk svg{width:58%; height:58%; opacity:.5}
  .lenoface.ft{transform:rotateY(180deg); background:#e8dcc0; padding:0}
  .lenoimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:6px}
  .lenoface.ft .lenonum{position:absolute; top:3px; left:4px; z-index:2; font-family:var(--display);
    font-size:clamp(9px,2.3vw,13px); color:#2a2018; background:rgba(240,230,205,.82);
    border-radius:4px; padding:0 3px; line-height:1.35}
  .lenoface.ft .lenoname{display:none}
  .lenoface.ft.noimg{background:linear-gradient(180deg,#1e1836,#141026); flex-direction:column;
    align-items:center; justify-content:center; padding:3px; gap:2px}
  .lenoface.ft.noimg .lenoimg{display:none}
  .lenoface.ft.noimg .lenonum{position:static; background:none; color:var(--gold-hi);
    font-size:clamp(13px,4vw,20px); padding:0}
  .lenoface.ft.noimg .lenoname{display:block; font-family:var(--serif);
    font-size:clamp(8px,2.3vw,12px); color:var(--parchment); line-height:1.05}
  /* Сон */
  .dreamart{display:flex; justify-content:center; margin:18px 0 8px}
  .dreamart svg{width:58px; height:58px; color:var(--gold)}
  .dreamtext{white-space:pre-wrap; font-style:italic}
  /* Гладь: тёмное зеркало, образы проявляются */
  .scrypool{position:relative; width:100%; max-width:300px; height:190px; margin:12px auto 8px;
    border:1.5px solid var(--line); border-radius:50% / 42%; cursor:pointer; overflow:hidden;
    background:radial-gradient(ellipse at 46% 34%, #232440 0%, #14152a 45%, #0a0a16 100%);
    box-shadow:inset 0 0 34px rgba(0,0,0,.75), 0 4px 18px rgba(0,0,0,.4); transition:opacity .6s}
  .scrypool:after{content:""; position:absolute; left:16%; top:10%; width:26%; height:16%;
    border-radius:50%; background:radial-gradient(ellipse, rgba(236,202,119,.10), transparent 70%)}
  .scrypool.done{cursor:default; opacity:.55}
  .scryimg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-size:21px; color:var(--gold-hi); text-align:center; padding:0 20px;
    opacity:0; filter:blur(6px); transform:scale(.94); transition:opacity 1.1s ease, filter 1.1s ease, transform 1.1s ease}
  .scryimg.show{opacity:1; filter:blur(0); transform:scale(1)}
  .scryfound{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; min-height:30px; margin:2px 0 4px}
  .scrychip{padding:5px 12px; border:1px solid var(--line); border-radius:16px; font-family:var(--display);
    font-size:13.5px; color:var(--parchment); opacity:0; transform:translateY(5px); transition:.5s}
  .scrychip.show{opacity:1; transform:none}
  .hexresult{display:flex; align-items:center; justify-content:center; gap:16px; margin:8px 0 6px}
  /* фаза 2: Зеркало толкует — скраинг-зеркало */
  .scrywrap{display:flex; flex-direction:column; align-items:center; gap:15px; margin:24px 0}
  .scrystage{position:relative; width:78px; height:78px}
  .scry{position:absolute; inset:0; border-radius:50%; overflow:hidden;
    background:radial-gradient(circle at 50% 40%, rgba(236,202,119,.30), rgba(25,21,38,.96) 68%);
    box-shadow:0 0 28px rgba(201,162,75,.30), inset 0 2px 10px rgba(255,255,255,.14), inset 0 -6px 16px rgba(0,0,0,.72)}
  .scry::before{content:""; position:absolute; inset:-30%; border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0 58%, rgba(236,202,119,.38) 76%, transparent 90%);
    animation:scryspin 3.2s linear infinite}
  .scryeye{position:absolute; top:50%; left:50%; width:24px; height:24px; transform:translate(-50%,-50%);
    color:var(--gold-hi); z-index:2; animation:scrygaze 2.2s ease-in-out infinite}
  .scryeye svg{width:24px; height:24px; fill:currentColor; filter:drop-shadow(0 0 4px rgba(236,202,119,.6))}
  .scryring{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(201,162,75,.55);
    animation:scryripple 2.6s ease-out infinite; pointer-events:none}
  .scryring.d{animation-delay:1.3s}
  @keyframes scryspin{to{transform:rotate(360deg)}}
  @keyframes scrygaze{0%,100%{opacity:.5; transform:translate(-50%,-50%) scale(.82)}50%{opacity:1; transform:translate(-50%,-50%) scale(1.1)}}
  @keyframes scryripple{0%{transform:scale(.5); opacity:.75}100%{transform:scale(1.4); opacity:0}}
  .scrycap{font-family:var(--display); font-style:italic; font-size:15px; color:var(--gold-hi); letter-spacing:.02em; text-align:center}
  /* зеркало-глаз, летающий над картами рун (позиция/сияние — из JS покадрово) */
  .gazeeye{position:absolute; top:0; left:0; width:70px; height:42px; pointer-events:none; z-index:6; will-change:transform,opacity,filter}
  .gazeeye svg{width:100%; height:100%; display:block}
  @media (prefers-reduced-motion: reduce){
    .scry::before, .scryeye, .scryring{animation:none}
    .scryring.d{display:none}
  }
  /* сцена ожидания (руны/И-Цзин) */
  .castwait{margin:10px 0}
  .waitrunes{font-size:34px; letter-spacing:12px; color:var(--gold-hi);
    font-family:'Noto Sans Runic','Segoe UI Symbol','Apple Symbols',serif; animation:castpulse 1.4s ease-in-out infinite}
  .waitcoins{display:flex; gap:12px; justify-content:center}
  .waitcoins span{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--gold-dim); background:#181322; animation:castpulse 1.2s ease-in-out infinite}
  .waitcoins span:nth-child(2){animation-delay:.15s} .waitcoins span:nth-child(3){animation-delay:.3s}
  @keyframes castpulse{0%,100%{opacity:.4; transform:scale(.94)}50%{opacity:1; transform:scale(1.05)}}
  /* контекст выбранного расклада на экране настройки */
  .setupctx{display:flex; align-items:center; gap:15px; padding:13px 15px; margin:2px 0 6px;
    border-radius:6px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(231,214,172,.05), rgba(231,214,172,.02))}
  .setupctx .art{flex:0 0 auto; width:84px; color:var(--gold-hi); filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
  .setupctx .art svg{width:84px; height:auto; display:block; overflow:visible}
  .setupctx .spdesc{flex:1; padding-top:1px}
  /* плавный вход экрана при перерисовке #view */
  @keyframes viewIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  #view.vin{animation:viewIn .3s cubic-bezier(.22,.61,.36,1)}
  @media (prefers-reduced-motion:reduce){#view.vin{animation:none}}
  .loginbox{display:flex; justify-content:center; min-height:48px; margin:14px 0 2px}
  a.btn{text-decoration:none}
  .tgbtn{margin-top:14px}
  .loginhint{text-align:center; font-size:12px; color:var(--gold-dim); font-style:italic; margin:8px 6px 2px; line-height:1.4}
  .tgwait{text-align:center; padding:16px 8px}
  .tgspin{position:relative; width:84px; height:84px; margin:14px auto 18px; display:flex; align-items:center; justify-content:center; color:var(--gold)}
  .tgspin svg{width:40px; height:40px; stroke:var(--gold); fill:none; stroke-width:1.1; opacity:.9}
  .tgspin-ring{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(201,162,75,.18); border-top-color:var(--gold-hi); animation:tgspin 1s linear infinite}
  @keyframes tgspin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.tgspin-ring{animation:none}}
  .twtitle{font-family:var(--display); font-size:18px; color:var(--parchment); margin-bottom:14px}
  .twsteps{text-align:left; max-width:320px; margin:0 auto 14px; padding-left:20px; color:var(--text); font-size:14px; line-height:1.5}
  .twsteps li{margin:7px 0}
  .twsteps li b{color:var(--gold-hi); font-family:var(--display)}
  .twlink{display:inline-block; color:var(--gold); font-size:13px; margin:2px 0 18px}
  .twcancel{max-width:200px; margin:0 auto}
  /* демо-режим гостя: карты и текст размыты */
  .board.demo .face.ft img{filter:blur(7px) saturate(.9)}
  .reading.demo{filter:blur(4.5px); user-select:none; pointer-events:none; opacity:.9}
  .demolock{display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
    font-family:var(--display); font-size:13.5px; letter-spacing:.03em; line-height:1.3; color:var(--gold-hi);
    margin:8px 2px 12px; padding:12px 14px; border:1px solid var(--gold); border-radius:8px;
    background:linear-gradient(180deg, rgba(201,162,75,.13), rgba(201,162,75,.04))}

  textarea{width:100%; margin-top:14px; padding:13px 15px; min-height:58px; border:1px solid var(--line);
    border-radius:5px; resize:vertical; background:rgba(15,11,7,.4); color:var(--text);
    font-family:var(--serif); font-size:15px; line-height:1.45}
  textarea::placeholder{color:var(--haze); font-style:italic}
  textarea:focus{outline:none; border-color:rgba(201,162,75,.6)}
  .qcount{display:none; text-align:right; font-family:var(--display); font-size:11px;
    letter-spacing:.06em; color:var(--gold-dim); margin:5px 4px 0}
  .qcount.warn{color:#cf7a46}

  .toggle{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
    padding:12px 15px; border-radius:5px; cursor:pointer; border:1px solid var(--line);
    background:rgba(25,26,46,.28); transition:.2s}
  .toggle .tl{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--parchment)}
  .toggle .tl svg{width:17px;height:17px;fill:none;stroke:var(--gold);stroke-width:1.3}
  .toggle .cost{font-size:12px; color:var(--gold-dim); font-family:var(--display)}
  .sw{flex:0 0 auto; width:42px; height:23px; border-radius:12px; position:relative;
    background:rgba(201,162,75,.16); border:1px solid var(--line); transition:.2s}
  .sw:after{content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
    background:var(--haze); transition:.2s}
  .toggle.on{border-color:var(--gold); background:rgba(201,162,75,.12)}
  .toggle.on .sw{background:var(--gold)}
  .toggle.on .sw:after{left:21px; background:#1a140a}

  .btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:14px;
    padding:14px; cursor:pointer; border:1px solid var(--gold-hi); border-radius:5px;
    font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:#241a08; background:linear-gradient(180deg,#f4e2ac 0%,#d9b45e 46%,#b98f3c 100%);
    box-shadow:0 6px 20px rgba(201,162,75,.2), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(120,86,20,.5);
    position:relative; overflow:hidden; transition:transform .12s}
  .btn:active{transform:translateY(1px)}
  .btn svg{width:16px;height:16px;fill:#241a08;stroke:none}
  .btn .shine{position:absolute; top:0; left:-60%; width:32%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
    transform:skewX(-18deg); animation:sweep 9s ease-out infinite}
  @keyframes sweep{0%{left:-60%}13%{left:135%}100%{left:135%}}
  .btn.sec{border:1px solid var(--line); color:var(--gold); background:transparent; box-shadow:none;
    font-weight:600; text-transform:none; letter-spacing:.05em; font-size:14px}
  .btn.sec svg{fill:none;stroke:var(--gold);stroke-width:1.5}
  .prow{display:flex; gap:8px}
  .prow .btn{flex:1}

  /* ── сцена тасовки ── */
  .scene{position:relative; display:flex; flex-direction:column; align-items:center; padding-top:36px}
  .scene .glow{position:absolute; top:118px; left:50%; width:260px; height:260px; transform:translate(-50%,-50%);
    border-radius:50%; pointer-events:none; filter:blur(6px);
    background:radial-gradient(circle, rgba(201,162,75,.2), rgba(201,162,75,0) 62%)}
  .deck{position:relative; width:112px; height:186px; margin:40px auto 0; perspective:1100px}
  .cardback{position:absolute; inset:0; border-radius:9px; will-change:transform; backface-visibility:hidden;
    background:
      repeating-linear-gradient(45deg, rgba(201,162,75,.16) 0 2px, transparent 2px 9px),
      repeating-linear-gradient(-45deg, rgba(201,162,75,.16) 0 2px, transparent 2px 9px),
      radial-gradient(circle at 50% 42%, #2a2c4d 0%, #191a2e 60%, #10101d 100%);
    border:2px solid var(--gold);
    box-shadow:0 10px 26px rgba(0,0,0,.55), inset 0 0 0 3px rgba(15,16,29,.9), inset 0 0 0 4px rgba(201,162,75,.5);
    transition:transform .84s cubic-bezier(.34,1.3,.4,1); display:flex; align-items:center; justify-content:center}
  .cardback svg,.bk svg{stroke:var(--gold); fill:none; stroke-width:1.1; opacity:.9}
  .cardback svg{width:52px;height:52px}
  .caption{margin-top:22px; text-align:center; min-height:20px; font-family:var(--display); font-size:12.5px;
    letter-spacing:.24em; text-transform:uppercase; color:var(--gold-dim)}

  /* ── сцена переосмысления: карты сходятся в один «свод» (синтез прошлого) ── */
  .rscene{padding-top:52px}
  .rscene .glow{top:150px; animation:rbreathe 2.8s ease-in-out infinite}
  .rfan{position:relative; width:112px; height:186px; margin:34px auto 0; perspective:1100px}
  .rfan .cardback{transform-origin:50% 96%; transition:none;
    animation:gather 2.8s cubic-bezier(.5,0,.5,1) infinite; animation-delay:calc((var(--i) + 2) * 55ms)}
  @keyframes gather{
    0%,100%{transform:rotate(calc(var(--i) * 15deg)); opacity:.62}
    46%,54%{transform:rotate(0deg); opacity:1}
  }
  @keyframes rbreathe{
    0%,100%{opacity:.4; transform:translate(-50%,-50%) scale(.86)}
    50%{opacity:.92; transform:translate(-50%,-50%) scale(1.1)}
  }

  /* ── доска раскладки ── */
  .rtitle{font-family:var(--display); font-size:16px; text-align:center; color:var(--parchment);
    letter-spacing:.05em; margin:2px 0 10px}
  .board{position:relative; width:100%; margin:4px 0 2px; transform-origin:50% 0;
    transition:transform .65s cubic-bezier(.25,.8,.3,1), margin-bottom .65s cubic-bezier(.25,.8,.3,1)}
  .pile{position:absolute; left:50%; top:2px; transform:translateX(-50%); transition:opacity .5s; pointer-events:none; z-index:0}
  .pile span{position:absolute; width:34px; height:58px; border-radius:5px; left:0; top:0;
    background:radial-gradient(circle at 50% 35%, #2a2c4d, #191a2e); border:1.5px solid var(--gold)}
  .pile span:nth-child(2){transform:translate(3px,3px)}
  .pile span:nth-child(3){transform:translate(6px,6px)}
  .slot{position:absolute; transform:translate(-50%,-50%); z-index:1}
  /* подпись у последнего выложенного предмета (карта/руна): проявляется и переезжает */
  .lastlab{position:absolute; z-index:6; transform:translate(-50%,0); transform-origin:top center;
    background:rgba(14,12,24,.93); border:1px solid var(--line); border-radius:6px; padding:5px 11px;
    font-family:var(--display); font-size:13.5px; color:var(--gold-hi); white-space:nowrap;
    opacity:0; transition:opacity .45s; pointer-events:none}
  .lastlab.show{opacity:1}
  .badge{position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:21px; height:21px; border-radius:50%;
    background:radial-gradient(circle at 50% 35%, var(--gold-hi), var(--gold)); color:#241a08;
    font-family:var(--display); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
    z-index:3; box-shadow:0 3px 8px rgba(0,0,0,.5); border:1px solid #f4e2ac}
  .litb{position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%; background:var(--gold-hi);
    color:#1a1526; font-size:11px; display:flex; align-items:center; justify-content:center; z-index:3;
    box-shadow:0 2px 6px rgba(0,0,0,.4)}
  .card{width:100%; aspect-ratio:.585; perspective:900px; cursor:pointer; position:relative}
  .card-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d;
    transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .card-inner.flipped{transform:rotateY(180deg)}
  .face{position:absolute; inset:0; backface-visibility:hidden; border-radius:8px; overflow:hidden}
  .bk{background:
      repeating-linear-gradient(45deg, rgba(201,162,75,.16) 0 2px, transparent 2px 9px),
      repeating-linear-gradient(-45deg, rgba(201,162,75,.16) 0 2px, transparent 2px 9px),
      radial-gradient(circle at 50% 42%, #2a2c4d 0%, #191a2e 60%, #10101d 100%);
    border:2px solid var(--gold); box-shadow:inset 0 0 0 3px rgba(15,16,29,.9), inset 0 0 0 4px rgba(201,162,75,.5);
    display:flex; align-items:center; justify-content:center}
  .bk svg{width:40%;height:40%}
  .ft{transform:rotateY(180deg); background:#0f0b07; border:2px solid var(--gold);
    box-shadow:0 8px 22px rgba(0,0,0,.5)}
  .ft img{width:100%; height:100%; object-fit:cover; display:block}
  .ft img.rev{transform:rotate(180deg)}

  .sky{margin:12px 2px 2px; padding:11px 13px; border-radius:6px; background:rgba(201,162,75,.08);
    border:1px solid var(--line); font-size:12.5px; line-height:1.5; color:var(--text)}
  .sky b{font-family:var(--display); color:var(--gold-hi); font-weight:600}
  /* астро: колесо неба + список планет */
  .skybox{margin:14px 2px 4px; padding:14px; border-radius:10px; border:1px solid var(--line);
    background:radial-gradient(120% 90% at 50% 0%, rgba(201,162,75,.09), rgba(25,26,46,.15) 60%), rgba(15,11,7,.3)}
  .skyhead{text-align:center; font-family:var(--display); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold-hi); margin-bottom:8px}
  .skywrap{display:flex; justify-content:center; position:relative}
  .skywrap:before{content:""; position:absolute; top:50%; left:50%; width:180px; height:180px; transform:translate(-50%,-50%);
    border-radius:50%; background:radial-gradient(circle, rgba(201,162,75,.18), rgba(201,162,75,0) 66%); filter:blur(6px); pointer-events:none}
  .skywheel{width:230px; max-width:78%; height:auto; overflow:visible; position:relative; z-index:1}
  .skywheel text{font-family:"Playfair Display",serif}
  .skylist{display:grid; grid-template-columns:1fr 1fr; gap:5px 16px; margin-top:12px; font-size:12.5px; color:var(--text)}
  .skyrow{display:flex; align-items:baseline; gap:6px}
  .skyrow .ss{color:var(--gold-hi); font-size:14px; width:16px; text-align:center; flex:0 0 auto}
  .skyrow .sd{margin-left:auto; color:var(--gold-dim); font-size:11.5px; white-space:nowrap}
  /* ── фоновое небо: многослойное вращение за тасовкой → устаканивается+блюрится за раскладом; кнопка выводит вперёд ── */
  #view{position:relative; z-index:1}
  .skystage{position:absolute; inset:0; z-index:0; display:none; overflow:hidden; pointer-events:none}
  .skystage.on{display:block}
  /* крупное колесо, центрируется на раскладе через JS (top задаётся), может уходить за края */
  .skyorbit{position:absolute; left:50%; top:50%; width:min(560px,150%); aspect-ratio:1; transform:translate(-50%,-50%)}
  .skyorbit>svg{width:100%; height:100%; max-width:none; margin:0; display:block; overflow:visible;
    transform-origin:50% 50%; transition:filter .46s ease, opacity .46s ease}
  .sky-stars circle{opacity:.55}
  /* вращение слоёв вокруг центра viewBox (120,120) — знаки в противоход кольцу */
  .skyorbit .rot{transform-box:view-box; transform-origin:120px 120px}
  .skystage.spin .sky-stars{animation:skyspin 150s linear infinite}
  .skystage.spin .ring-outer{animation:skyspin 90s linear infinite}
  .skystage.spin .ring-signs{animation:skyspin 60s linear infinite reverse}
  @keyframes skyspin{to{transform:rotate(360deg)}}
  /* крутящееся колесо — чуть размыто и притушено, чтобы не было резким и навязчивым */
  .skystage.spin>.skyorbit>svg{filter:blur(1px); opacity:.8}
  /* одноразовое «устаканивание» при появлении результата (интро) */
  .skystage.settling>.skyorbit>svg{animation:skySettle 1.6s cubic-bezier(.16,.82,.3,1)}
  @keyframes skySettle{
    0%{transform:rotate(-22deg) scale(1.04); opacity:.85; filter:blur(1px)}
    100%{transform:rotate(0deg) scale(1); opacity:.42; filter:blur(3px)}
  }
  /* стабильное состояние покоя — колесо в фоне за раскладом */
  .skystage.settled>.skyorbit>svg{opacity:.42; filter:blur(3px)}
  .skystage.settled .planets{animation:skPlanetsIn 1.1s ease .5s both}
  @keyframes skPlanetsIn{from{opacity:0} to{opacity:1}}
  /* передний план: ТО ЖЕ колесо «выходит из фона» — геометрию ведёт JS-FLIP, фон/заголовок/список плавно */
  .skystage .skpk-head,.skystage .skpk-list,.skystage .skpk-asp,.skystage .skpk-close{display:none}
  /* тёмная подложка — ОТДЕЛЬНЫЙ слой (z53), чтобы колесо могло сменить z под её прикрытием без мигания */
  .skyveil{position:fixed; inset:0; z-index:53; background:rgba(9,7,4,.95); opacity:0;
    pointer-events:none; transition:opacity .44s ease}
  .skyveil.show{opacity:1}
  .skystage.peek{position:fixed; inset:0; z-index:54; display:flex; flex-direction:column;
    align-items:center; justify-content:safe center; gap:16px; padding:24px 20px; overflow:auto;
    overscroll-behavior:contain; pointer-events:auto}
  /* пока открыто «Небо» — замораживаем прокрутку фона; padding-right компенсирует пропавший скроллбар,
     иначе центрированный .app прыгает вбок в конце анимации (когда скроллбар возвращается) */
  html.sky-lock{overflow:hidden; overscroll-behavior:none; padding-right:var(--sbw,0px)}
  html.sky-lock body{overflow:hidden}
  .skystage.peek>*{flex-shrink:0}   /* высокий контент скроллится, а не сжимает элементы (кнопку «Закрыть») */
  .skystage.peek>.skyorbit{position:static; margin:0; width:min(360px,82vw); transform:none}
  .skystage.peek.peek-in>.skyorbit>svg{opacity:1; filter:none}   /* резкость привязана к peek-in → на закрытии блюр синхронно возвращается */
  .skystage.peek .skpk-head,.skystage.peek .skpk-list,.skystage.peek .skpk-asp,.skystage.peek .skpk-focus,.skystage.peek .skpk-close{opacity:0; transition:opacity .32s ease .06s}
  .skystage.peek.peek-in .skpk-head,.skystage.peek.peek-in .skpk-list,.skystage.peek.peek-in .skpk-asp,.skystage.peek.peek-in .skpk-focus,.skystage.peek.peek-in .skpk-close{opacity:1}
  .skystage.peek .skpk-head{display:block; font-family:var(--display); font-size:15px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--gold-hi)}
  .skystage.peek .skpk-list{display:grid; width:100%; max-width:360px}
  .skystage.peek .skpk-close{display:block; max-width:180px; width:100%; margin:16px auto 0}   /* в обычном потоке под содержимым; закрыть можно и кликом вне текста */
  /* достоинства планет в списке: сильная — ярче, слабая — приглушённо-тёплая */
  .skystage.peek .skyrow.dig-s .sd{color:var(--gold-hi)}
  .skystage.peek .skyrow.dig-w .sd{color:#c98d6a}
  /* линии аспектов в колесе (цвет — в --ac по природе), зона наведения + подсветка */
  .aspects .aspv{stroke:var(--ac); stroke-width:1; opacity:.5; pointer-events:none}
  .aspects .asph{stroke:transparent; stroke-width:7; pointer-events:stroke; cursor:pointer}
  .aspects .aspg{fill:var(--ac); font-size:8px; opacity:0; pointer-events:none}
  .aspects .asp-line.hot .aspv{opacity:1; stroke-width:1.6}
  .aspects .asp-line.hot .aspg{opacity:.95}
  /* строки аспектов под списком планет (передний план) */
  .skystage.peek .skpk-asp{display:flex; flex-direction:column; gap:5px; width:100%; max-width:360px; margin-top:2px;
    border-top:1px solid var(--line); padding-top:9px}
  .asprow{display:flex; align-items:baseline; gap:9px; cursor:pointer; padding:3px 7px; border-radius:7px;
    transition:background-color .14s ease}
  .asprow .ag{font-size:14px; letter-spacing:.06em; color:var(--ac2); flex:0 0 auto; min-width:52px}
  .asprow .al{font-size:12.5px; color:var(--gold-dim)}
  .asprow.nat-soft{--ac2:var(--gold-hi)} .asprow.nat-hard{--ac2:#e0a487} .asprow.nat-neutral{--ac2:var(--gold)}
  .asprow.hot{background:rgba(201,162,75,.14)}
  .asprow.hot .al{color:var(--parchment)}
  /* таб-группа: «Данные» / «Влияние на расклад» */
  .skystage .skpk-tabs,.skystage .skpk-panel{display:none}
  .skystage.peek .skpk-tabs{display:flex; gap:6px; width:100%; max-width:360px;
    opacity:0; transition:opacity .32s ease .06s}
  .skystage.peek.peek-in .skpk-tabs{opacity:1}
  .skystage.peek .skpk-panel.on{display:block; width:100%; max-width:360px}
  .skpk-tab{flex:1; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:transparent;
    color:var(--gold-dim); font-family:var(--display); font-size:11.5px; letter-spacing:.05em; cursor:pointer;
    text-transform:uppercase; transition:border-color .15s, color .15s, background-color .15s}
  .skpk-tab.on{border-color:var(--gold); color:var(--gold-hi); background:rgba(201,162,75,.12)}
  .skpk-focus{font-size:14px; line-height:1.62; color:var(--text); white-space:pre-wrap; padding:6px 2px 2px}
  /* наведение (десктоп): знак увеличивается (без палочки — она в отдельном слое), выносится вперёд по z,
     и синхронно подсвечивается строка списка. На мобиле планеты и так разведены по радиусу. */
  .skystage.peek .pl,.skystage.peek .skyrow{cursor:pointer}
  .skystage.peek .pl{transform-box:fill-box; transform-origin:center;
    transition:transform .14s ease; will-change:transform}
  .skystage.peek .pl.lit{transform:scale(1.22)}   /* планета, связанная выделенным аспектом — чуть меньше, чем при наведении */
  .skystage.peek .pl.hot{transform:scale(1.42)}
  /* :not(.mdisk) — не заливаем круги лунного диска, иначе фаза перекрывается и чернеет */
  .skystage.peek .pl.hot circle:not(.mdisk){fill:#241a33; stroke:var(--gold-hi); stroke-width:1.4}
  .skystage.peek .pl.hot .mring,.skystage.peek .pl.lit .mring{stroke:var(--gold-hi); stroke-width:1.4}
  .skystage.peek .pl.lit circle:not(.mdisk){stroke:var(--gold-hi)}
  .skystage.peek .pl.hot text{fill:#fff}
  /* выделение строки: золотистая плашка + ВСЁ содержимое синхронно светлеет (ничего не темнеет) */
  .skystage.peek .skyrow{padding:4px 9px; border-radius:8px;
    transition:background-color .14s ease, color .14s ease}
  .skystage.peek .skyrow .ss,.skystage.peek .skyrow .sd{transition:color .14s ease}
  .skystage.peek .skyrow.hot{background:rgba(201,162,75,.16); color:#fdf4dd}
  .skystage.peek .skyrow.hot .ss{color:#fff}
  .skystage.peek .skyrow.hot .sd{color:#fdf4dd}
  @media (prefers-reduced-motion:reduce){
    .skystage .rot{animation:none!important}
    .skystage.settling>.skyorbit>svg{animation:none}
    .skyorbit>svg{transition:none}
  }
  /* компактная кнопка «посмотреть небо» под раскладом */
  .skybtnwrap{text-align:center; margin:14px 0 2px}
  .skybtn{display:inline-flex; align-items:center; gap:7px; padding:8px 17px; cursor:pointer;
    border:1px solid var(--gold); border-radius:22px; background:rgba(201,162,75,.09); color:var(--gold-hi);
    font-family:var(--display); font-size:13px; letter-spacing:.09em}
  .skybtn:hover{background:rgba(201,162,75,.17)}
  /* «?»-значок у тумблера + модальный поповер-пояснение */
  .qmark{width:18px; height:18px; border-radius:50%; border:1px solid var(--gold); background:transparent;
    color:var(--gold); font-family:var(--display); font-size:11px; font-weight:700; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; margin-left:7px; padding:0; flex:0 0 auto}
  .qmark:hover{background:var(--gold); color:#241a08}
  .infopop{position:fixed; inset:0; background:rgba(9,7,4,.82); z-index:55; display:flex; align-items:center;
    justify-content:center; padding:24px; animation:viewIn .2s ease}
  .ipcard{max-width:420px; width:100%; background:linear-gradient(180deg,#201a2e,#17130f); border:1px solid var(--gold);
    border-radius:12px; padding:22px 20px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .ipcard .iptitle{font-family:var(--display); font-size:19px; color:var(--gold-hi); margin-bottom:12px}
  .ipcard .ipbody{font-size:14px; line-height:1.6; color:var(--text); text-align:left; margin-bottom:16px}
  .ipcard .ipok{max-width:160px; margin:0 auto}
  .legend{margin:12px 2px 4px; display:flex; flex-direction:column; gap:9px}
  .lrow{display:flex; gap:11px; align-items:flex-start}
  .lnum{flex:0 0 auto; width:21px; height:21px; border-radius:50%; border:1px solid var(--gold);
    color:var(--gold-hi); font-family:var(--display); font-size:11px; font-weight:700; display:flex;
    align-items:center; justify-content:center; margin-top:1px}
  .lpos{font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dim)}
  .lcard{font-size:14.5px; font-weight:600; color:var(--parchment); margin-top:1px}
  .lastro{font-size:12px; color:var(--gold); margin-top:2px}
  .reading{white-space:pre-wrap; line-height:1.62; font-size:15.5px; margin:16px 2px 4px; color:var(--text);
    opacity:0; transform:translateY(8px); transition:opacity .7s, transform .7s;
    border-top:1px solid var(--line); padding-top:16px}
  .reading.show{opacity:1; transform:none}

  /* ── дерево толкования (комнаты) ── */
  .reading.tree{white-space:normal}
  .tnode{opacity:0; transform:translateY(7px); transition:opacity .6s, transform .6s}
  .tnode.show{opacity:1; transform:none}
  .tpar{position:relative; padding:9px 2px 9px 0; line-height:1.6; font-size:15.5px; color:var(--text)}
  .tpar.haskids{cursor:pointer; padding-left:20px}
  .tpar.haskids .ttext{transition:color .3s}
  .tpar.haskids:hover .ttext{color:var(--parchment)}
  .tcaret{position:absolute; left:0; top:11px; color:var(--gold-dim); font-size:12px; transition:transform .3s, color .3s}
  .tpar.on .tcaret{transform:rotate(90deg); color:var(--gold)}
  .tkids{max-height:0; overflow:hidden; transition:max-height .55s ease; margin:0 0 2px 9px; border-left:1px solid var(--line)}
  .tkids .tpar{font-size:14.5px; color:var(--parchment-2)}
  .roomctrl{display:flex; flex-direction:column; gap:8px; margin-top:12px}
  .btn.dark{background:linear-gradient(180deg,#171326,#120f1e); border-color:#4a3f63}
  .btn.dark .gl{color:#c9bcd6}
  .btn.dark:hover{border-color:#6a5c86}
  .roomspot{display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px;
    border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); cursor:pointer; transition:.3s}
  .roomspot:hover{border-color:var(--gold); background:rgba(201,162,75,.06)}
  .roomspot.busy{opacity:.6; pointer-events:none}
  .roomspot.empty{cursor:default; opacity:.7}
  .roomspot .spoticon svg{width:26px; height:26px; fill:none; stroke:var(--gold); stroke-width:1.3}
  .roomspot .spotlab{font-family:var(--display); font-size:16px; color:var(--parchment); display:flex; flex-direction:column}
  .roomspot .spothint{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dim); margin-top:2px}
  .roomspot.found{display:block; cursor:default; border-color:var(--gold); background:rgba(201,162,75,.05)}
  .totemcard .tname{font-family:var(--display); font-size:22px; color:var(--gold-hi); margin-bottom:6px}
  .totemcard .tstory{font-size:14.5px; line-height:1.62; color:var(--text)}
  .roomspot.found .btn{margin-top:12px}
  .totemdone{margin-top:10px; font-family:var(--display); color:var(--gold-hi); text-align:center}
  /* вытягивание карт из колоды */
  .drawhint{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-dim)}
  /* полный веер колоды — два ряда по 39, выбираешь карту.
     Лёгкий рендер: общий градиентный узор вместо 78 SVG, без per-card теней;
     позиция ряда — в % от контейнера (адаптив), подъём при hover — через --lift. */
  .fanwrap{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:18px}
  .deckfan{position:relative; width:100%; max-width:380px; height:200px; margin-top:4px; contain:layout style}
  .fancard{position:absolute; bottom:0; left:calc(50% + (var(--t) - .5) * 76%); width:46px; height:72px; padding:0;
    border:1px solid rgba(201,162,75,.18); border-left-color:rgba(201,162,75,.5); border-radius:5px;
    cursor:pointer; transform-origin:bottom center;
    background:linear-gradient(105deg, #262748 0%, #191a32 34%, #131426 100%);
    transform:translateX(-50%) translateY(calc(var(--ry,0px) + var(--dy,0px) + var(--lift,0px))) rotate(var(--ang));
    transition:transform .18s ease, opacity .38s ease}
  .fancard:hover, .fancard:focus{outline:none; z-index:300 !important; --lift:-14px;
    border-color:var(--gold); background:linear-gradient(105deg, #2e2f56 0%, #1f2040 34%, #171830 100%)}
  .fancard.taken{opacity:0; pointer-events:none;
    transform:translateX(-50%) translateY(calc(var(--ry,0px) - 60px)) rotate(0) scale(.85)}
  /* тасовка: стопка в центре → два «среза» колоды → волной разворачивается в веер */
  .deckfan.gather .fancard{transition:transform .3s ease;
    transform:translateX(calc(-50% - (var(--t) - .5) * var(--fw,289px) + var(--cut,0px)))
      translateY(calc(-64px + var(--cyv,0px))) rotate(var(--sh,0deg))}
  .deckfan.cuta .fancard{--cut:var(--half,0px); --cyv:var(--cy,0px)}
  .deckfan.cutb .fancard{--cut:calc(var(--half,0px) * -1); --cyv:calc(var(--cy,0px) * -1)}
  .deckfan.unfold .fancard{transition:transform .55s cubic-bezier(.25,.8,.3,1); transition-delay:calc(var(--t) * .22s)}
  /* перк-бар в комнате */
  .perkbar{margin-top:14px}
  .perkbtn{width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line);
    border-radius:8px; background:rgba(255,255,255,.02); color:var(--parchment); cursor:pointer; transition:.3s; font-size:13px}
  .perkbtn svg{width:20px; height:20px; fill:none; stroke:var(--gold); stroke-width:1.3; flex:0 0 auto}
  .perkbtn .pl{flex:1; text-align:left}
  .perkbtn .qmark{width:18px; height:18px; border:1px solid var(--gold-dim); border-radius:50%; color:var(--gold-dim);
    font-size:11px; display:grid; place-items:center; flex:0 0 auto}
  .perkbtn:hover{border-color:var(--gold)}
  .perkbtn.on{border-color:var(--gold); color:var(--gold-hi); cursor:default}
  .perkbtn.on svg{stroke:var(--gold-hi)}
  /* Воспоминания */
  .memlist{display:flex; flex-direction:column; gap:12px; margin-top:8px}
  /* в 3D-панели Воспоминаний список — flex-скролл-контейнер: карточки НЕ должны сжиматься (иначе текст режется в «полоски») */
  .c3panel .memlist{margin-top:2px}
  .c3panel .memitem{flex:0 0 auto}
  .memitem{border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:border-color .3s}
  .memitem.open{border-color:var(--brass-faint,#4A4231)}
  .memhead{padding:14px 16px; cursor:pointer; position:relative; transition:.3s}
  .memhead:hover{background:rgba(201,162,75,.05)}
  .memtitle{font-family:var(--display); font-size:17px; color:var(--parchment); padding-right:20px}
  .memq{font-size:13px; color:var(--gold-dim); margin-top:3px; font-style:italic; padding-right:20px}
  .memcards{font-size:12px; color:var(--gold-dim); margin-top:4px; letter-spacing:.04em}
  .memchev{position:absolute; right:14px; top:16px; color:var(--gold-dim); transition:transform .3s}
  .memitem.open .memchev{transform:rotate(90deg)}
  .membody{max-height:0; overflow:hidden; transition:max-height .5s ease; padding:0 16px}
  .memitem.open .membody{max-height:4000px; padding:2px 16px 14px}
  .rleave{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:0;
    color:var(--gold-dim); font-size:16px; cursor:pointer; padding:6px; line-height:1}
  .rleave:hover{color:var(--gold-hi)}

  /* ── история ── */
  .hitem{border:1px solid var(--line); border-radius:8px; padding:13px 14px; margin-bottom:10px; cursor:pointer;
    background:linear-gradient(180deg, rgba(231,214,172,.04), rgba(231,214,172,.01))}
  .hmeta{font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dim)}
  .hq{font-size:14px; margin:5px 0 8px; font-style:italic; color:var(--parchment)}
  .hthumbs{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:6px}
  .hthumb{width:36px; aspect-ratio:.585; object-fit:cover; border-radius:4px; border:1px solid var(--line)}
  .hthumb.rev{transform:rotate(180deg)}
  .hreading{white-space:pre-wrap; line-height:1.55; font-size:14px; max-height:0; overflow:hidden;
    transition:max-height .35s; color:var(--text)}
  .hreading.open{max-height:3000px; margin-top:4px}
  .hmore{font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:6px}

  /* ── магазин ── */
  .storebal{display:flex; align-items:baseline; justify-content:center; gap:8px; margin:6px 0 2px;
    padding:11px 16px; border-radius:9px; border:1px solid var(--line);
    background:radial-gradient(120% 90% at 50% 0%, rgba(201,162,75,.10), rgba(25,26,46,.12) 60%), rgba(15,11,7,.3);
    font-family:var(--display); font-size:14px; letter-spacing:.04em; color:var(--gold-dim)}
  .storebal b{font-size:19px; color:var(--gold-hi); font-weight:600}
  .packs{display:flex; flex-direction:column; gap:11px}
  .pack{padding:14px 15px 15px; border-radius:9px; border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(231,214,172,.055), rgba(231,214,172,.02))}
  .pack .phead{display:flex; align-items:baseline; gap:8px; margin-bottom:12px}
  .pack .pc{font-family:var(--display); font-size:26px; color:var(--gold-hi); line-height:1; font-weight:600}
  .pack .pcw{font-size:9.5px; letter-spacing:.15em; color:var(--gold-dim); text-transform:uppercase; font-family:var(--serif)}
  .pbtns{display:flex; gap:9px}
  .pbtn{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 8px;
    border-radius:7px; border:1px solid var(--gold); cursor:pointer; text-align:center; transition:.15s;
    background:linear-gradient(180deg, rgba(231,214,172,.11), rgba(231,214,172,.035))}
  .pbtn small{font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--gold-dim); font-family:var(--serif); line-height:1.15}
  .pbtn b{font-family:var(--display); font-size:16px; color:var(--gold-hi); font-weight:600; line-height:1}
  .pbtn:active{transform:translateY(1px)}
  .pbtn:hover{border-color:var(--gold-hi); background:linear-gradient(180deg, rgba(231,214,172,.16), rgba(231,214,172,.06))}

  /* ── выезжающая панель (меню) ── */
  .backdrop{position:fixed; inset:0; z-index:20; background:rgba(9,7,4,.6);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .3s}
  .backdrop.open{opacity:1; pointer-events:auto}
  .sheet{position:fixed; left:50%; bottom:0; z-index:21; width:100%; max-width:430px;
    transform:translateX(-50%) translateY(103%); transition:transform .36s cubic-bezier(.2,.8,.25,1);
    border-top:1px solid var(--gold); border-radius:16px 16px 0 0;
    background:linear-gradient(180deg,#1b1a2b 0%,#141019 42%,#100b07 100%);
    box-shadow:0 -18px 50px rgba(0,0,0,.6); padding:8px 20px 30px; max-height:88dvh; overflow-y:auto}
  .sheet.open{transform:translateX(-50%) translateY(0)}
  .grab{width:38px; height:4px; border-radius:2px; background:var(--gold-dim); opacity:.55; margin:6px auto 12px}
  .shead{display:flex; align-items:center; gap:8px; margin-bottom:4px}
  .shead .st{font-family:var(--display); font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); flex:1; text-align:center}
  .shead .sx,.shead .sback{width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:8px; color:var(--gold); cursor:pointer; font-size:17px; flex:0 0 auto}
  .shead .sback{border:none}
  .slabel{font-family:var(--display); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold-dim); margin:16px 2px 9px}
  .srow{display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:6px; border:1px solid var(--line);
    background:rgba(231,214,172,.03); cursor:pointer; margin-bottom:8px; transition:.2s}
  .srow:hover{border-color:rgba(201,162,75,.5)}
  .srow svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--gold);stroke-width:1.35}
  .srow .lab{flex:1; font-size:14.5px; color:var(--parchment)}
  .srow .val{font-size:12.5px; color:var(--haze); font-style:italic}
  .srow .chev{color:var(--gold-dim); font-size:16px}
  .deckrow.on{border-color:var(--gold)}
  .deckrow.on .lab{color:var(--gold-hi)}
  .deckrow.on .val{color:var(--gold-hi); font-style:normal}
  .langs{display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 2px}
  .lang{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; border:1px solid var(--line);
    cursor:pointer; font-family:var(--display); font-size:11.5px; letter-spacing:.08em; color:var(--haze); transition:.2s}
  .lang.on{border-color:var(--gold); color:#241a08; background:linear-gradient(180deg,#f4e2ac,#d9b45e)}
  .lang .fl{font-size:14px; line-height:1}
  .genders{display:flex; gap:8px; margin:8px 0 2px}
  .gnd{flex:1; text-align:center; padding:9px; border-radius:6px; border:1px solid var(--line); cursor:pointer;
    font-family:var(--display); font-size:13px; color:var(--haze); transition:.2s}
  .gnd.on{border-color:var(--gold); color:#241a08; background:linear-gradient(180deg,#f4e2ac,#d9b45e)}

  /* ── зум карты ── */
  .zoom{position:fixed; inset:0; background:rgba(9,7,4,.92); display:flex; flex-direction:column; align-items:center;
    justify-content:center; z-index:50; padding:20px; gap:14px; opacity:0; transition:opacity .26s ease; overflow-y:auto}
  .zoom.open{opacity:1}
  .zoom img{max-width:76vw; max-height:58vh; border-radius:10px; border:2px solid var(--gold);
    box-shadow:0 12px 40px rgba(0,0,0,.6); will-change:transform; flex:0 0 auto}
  .zoom img.rev{transform:rotate(180deg)}
  .zcap{text-align:center; max-width:80vw}
  .zcap .zpos{font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:4px}
  .zcap .zname{font-family:var(--display); font-size:17px; color:var(--parchment)}
  .zask{width:min(88vw,440px); display:flex; flex-direction:column; align-items:stretch; gap:10px; flex:0 0 auto}
  .zask .askbtn{margin:0}
  .zask .askout{display:none; max-height:28vh; overflow-y:auto; font-family:var(--serif); font-size:14px;
    line-height:1.62; color:var(--parchment); background:rgba(15,11,7,.55); border:1px solid var(--line);
    border-radius:10px; padding:12px 14px; white-space:pre-wrap; text-align:left}
  .zask .askout.show{display:block}

  /* ── демо: пояснения-баллуны по позициям + подсказка ── */
  .demohint{text-align:center; font-size:13px; color:var(--gold-hi); line-height:1.45; margin:2px 2px 14px;
    padding:11px 14px; border:1px solid rgba(201,162,75,.4); border-radius:8px;
    background:linear-gradient(180deg, rgba(201,162,75,.1), rgba(201,162,75,.03))}
  /* значок «?» на демо-картах — сигнал, что можно нажать */
  .dq{position:absolute; bottom:-7px; right:-7px; width:20px; height:20px; border-radius:50%; z-index:4;
    background:radial-gradient(circle at 50% 35%, var(--gold-hi), var(--gold)); color:#241a08;
    font-family:var(--display); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
    border:1px solid #f4e2ac; box-shadow:0 3px 8px rgba(0,0,0,.5)}
  /* область толкования в демо: подпись-«шапка» + тап за пояснением */
  .readbox{position:relative}
  .readhead{display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
    font-family:var(--display); font-size:14px; letter-spacing:.04em; color:var(--gold-hi);
    margin:14px 2px 8px; padding:9px 12px; border:1px solid rgba(201,162,75,.4); border-radius:8px;
    background:linear-gradient(180deg, rgba(201,162,75,.1), rgba(201,162,75,.03))}
  .readhead .rq{width:17px; height:17px; border-radius:50%; background:var(--gold); color:#241a08;
    font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center}
  .dballoon{position:absolute; left:50%; transform:translateX(-50%); width:190px; max-width:46vw; z-index:30;
    background:linear-gradient(180deg,#221b30,#17130f); border:1px solid var(--gold); border-radius:9px; padding:10px 12px;
    box-shadow:0 12px 30px rgba(0,0,0,.6); text-align:left; animation:dpop .2s ease}
  .dballoon.below{top:calc(100% + 9px)} .dballoon.above{bottom:calc(100% + 9px)}
  .dballoon .dpos{font-family:var(--display); font-size:13px; color:var(--gold-hi); margin-bottom:4px; line-height:1.25}
  .dballoon .dtease{font-size:12px; color:var(--haze); line-height:1.4; font-style:italic}
  .dballoon:after{content:""; position:absolute; left:50%; margin-left:-5px; width:10px; height:10px; background:#221b30; border:1px solid var(--gold)}
  .dballoon.below:after{top:-6px; border-right:0; border-bottom:0; transform:rotate(45deg)}
  .dballoon.above:after{bottom:-6px; border-left:0; border-top:0; transform:rotate(45deg)}
  @keyframes dpop{from{opacity:0; transform:translateX(-50%) scale(.94)} to{opacity:1; transform:translateX(-50%) scale(1)}}
  /* ── тост ── */
  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:rgba(15,11,7,.95);
    border:1px solid var(--gold); color:var(--gold-hi); padding:10px 18px; border-radius:20px; font-size:14px;
    z-index:60; opacity:0; transition:opacity .3s}
  .toast.show{opacity:1}
  .foot{text-align:center; margin-top:14px; font-size:11px; font-style:italic; color:var(--gold-dim); opacity:.7; line-height:1.5}

  @media (prefers-reduced-motion:reduce){
    .btn .shine{display:none}
    .cardback,.card-inner{transition-duration:.001ms}
  }

  /* ── десктоп/веб: шире карточка, списки в 2 колонки (в самом конце — чтобы
        перекрывать базовые правила) ── */
  @media (min-width:760px){
    body{align-items:center; padding:34px 24px 60px}
    .app{max-width:680px; padding:30px 42px 40px}
    .sheet{max-width:680px}
    .spreads{gap:12px}
    .packs{display:grid; grid-template-columns:1fr 1fr; gap:11px}
    .legend{display:grid; grid-template-columns:1fr 1fr; gap:9px 16px}
  }
  @media (min-width:1120px){
    .app{max-width:760px}
    .sheet{max-width:760px}
  }
  /* ===== Ландшафтный ТЕЛЕФОН (вьюпорт ≤520px по высоте): ширина почти десктопная,
     поэтому vw-clamp'ы шрифтов бьют в свой максимум, а вертикали не хватает — крупные
     реплики/кнопки наезжают друг на друга. Компакт ведём по ВЫСОТЕ (шрифты — от vh):
     десктоп с нормальным окном (>520px) не задет. ===== */
  @media (max-height:520px){
    /* экскурсия: реплики масштабируем от высоты, не ширины */
    .tlines{padding:5vh 34px; gap:.8em}
    .tphrase{font-size:clamp(19px,7.2vh,30px)}
    .tphrase.intro{font-size:clamp(16px,5.8vh,24px)}
    .tphrase.ttop{top:6%; font-size:clamp(16px,5.8vh,24px)}
    .tphrase.hint{bottom:8%; font-size:clamp(15px,5vh,20px)}
    .tphrase.tabout{font-size:clamp(12.5px,4.1vh,15.5px); line-height:1.5; margin:0 0 10px; max-width:min(74vw,600px)}
    .tabrow{margin-top:2px}
    .tabrow button{font-size:12.5px; padding:7px 13px}
    .tconfirm .tcbox{padding:14px 18px 12px}
    /* лендинг: заголовок от высоты; две главные кнопки — В РЯД (ширины много, высоты нет) */
    .landing-inner{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
    .landing-eyebrow{margin-bottom:6px}
    .landing-brand{font-size:clamp(24px,9.5vh,36px); margin-bottom:6px}
    .landing-tagline{font-size:14px; margin-bottom:14px}
    .landing-cta{flex-direction:row; flex-wrap:wrap; max-width:520px; gap:9px}
    .landing-cta .landbtn{flex:1 1 40%; padding:11px 14px; font-size:14.5px}
    .landing-cta .landbtn.tour{flex:1 1 100%; padding:7px; margin-top:0}
    /* оверлеи 3D-сцен */
    .c3menu{gap:12px; padding:14px}
    .c3mi{font-size:16px; padding:5px 12px}
    .c3mi.dim{font-size:13px}
    .c3panel{max-height:92%}
    .c3note{font-size:13px; max-width:340px; margin-bottom:2px}
    .mirrorspeak{padding:10px}
    .mirrorspeak .ms-inner{max-height:94%}
    .c3hud{padding:8px 10px}
    .c3btn{padding:8px 14px; font-size:13.5px}
    .c3hint{bottom:56px}
    .c3gaze span{font-size:15px; padding:8px 18px}
    .runeui{gap:8px; bottom:calc(12px + env(safe-area-inset-bottom))}
    .sheet{max-height:96dvh}
  }
  /* «остаться так» — отказ от гейта возврата в fullscreen (виден только в fslost-режиме) */
  #rotGate .rg-x{display:none; background:none; border:none; color:var(--gold-dim); font-family:var(--serif);
    font-style:italic; font-size:13px; cursor:pointer; padding:4px 8px}
  #rotGate.fslost .rg-x{display:block}
  /* мобильный композер: полноэкранное поле ввода над экранной клавиатурой (высоту ставит JS по visualViewport) */
  #mobCompose{position:fixed; left:0; top:0; width:100%; height:100dvh; z-index:430; background:#0c0a12;
    display:flex; flex-direction:column; gap:10px; box-sizing:border-box;
    padding:calc(12px + env(safe-area-inset-top)) 16px 10px}
  #mobCompose .mc-l{font-family:var(--display); color:var(--gold); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase}
  #mobCompose .mc-t{flex:1; min-height:0; resize:none; background:rgba(255,255,255,.045); border:1px solid var(--line);
    border-radius:10px; color:var(--parchment); font-family:var(--serif); font-size:16px; line-height:1.5;
    padding:10px 12px; outline:none}
  #mobCompose .mc-t:focus{border-color:var(--gold)}
  #mobCompose .mc-ok{align-self:flex-end; min-width:130px; padding:9px 18px}
  /* «Небо» на низком экране (ландшафтный телефон): колесо — от ВЫСОТЫ, а не 360px */
  @media (max-height:520px){
    .skystage.peek{gap:10px; padding:12px 16px}
    .skystage.peek>.skyorbit{width:min(52vh,240px)}
    .skystage.peek .skpk-head{font-size:12px}
    .skystage.peek .skpk-list,.skystage.peek .skpk-asp,.skystage.peek .skpk-panel.on,.skystage.peek .skpk-tabs{max-width:420px}
    .skystage.peek .skpk-close{margin:8px auto 0}
  }
  /* дата расклада в плоском списке воспоминаний */
  .memtitle .memdate{font-family:var(--serif); font-size:11.5px; color:var(--gold-dim); font-weight:400; letter-spacing:.02em; margin-left:7px; white-space:nowrap}
  /* инструкция iOS в фулскрин-гейте (Safari без Fullscreen API: путь через экран «Домой») */
  #rotGate .rg-i{display:none; max-width:320px; font-family:var(--serif); font-size:13.5px; line-height:1.55;
    color:var(--parchment-2); opacity:.9}
  #rotGate.fslost .rg-i:not(:empty){display:block}
  /* кнопка App Store в фулскрин-гейте (iPhone-веб, активируется ссылкой IOS_APP_URL в main.js) */
  #rotGate .rg-store{display:none; text-decoration:none}
  #rotGate.fslost .rg-store{display:inline-block}
  /* низкий (ландшафтный) экран: балуну можно быть ШИРЕ — меньше строк, ниже высота,
     проще встать над/под целью не накрывая её; шрифт от высоты, не от ширины */
  @media (max-height:520px){
    .tballoon{max-width:min(64vw,560px); font-size:clamp(15px,5.4vh,20px)}
  }