/* Основа — reference/web-test-v4.html. Цвета берутся из темы Телеграма (--tg-theme-*),
   палитра прототипа — запасной вариант для обычного браузера. */
:root{
  --bg:var(--tg-theme-secondary-bg-color,#e9eff0);
  --paper:var(--tg-theme-section-bg-color,var(--tg-theme-bg-color,#f7fafa));
  --ink:var(--tg-theme-text-color,#14262e);
  --muted:var(--tg-theme-hint-color,#5a6f78);
  --accent:var(--tg-theme-button-color,#1f6f7f);
  --accent-text:var(--tg-theme-button-text-color,#ffffff);
  --line:color-mix(in srgb,var(--ink) 16%,var(--paper));
  --water:#7fb8c9; --water-deep:#4e93a8; --leaf:#4f8a3c; --glass:#9fb4bb;
  --E:#c2412d; --T:#7a4fc2; --X:#d48a12; --K:#2c7fb8; --M:#2f8f5b; --S:#b0357a;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:var(--tg-theme-secondary-bg-color,#0e171b);
  --paper:var(--tg-theme-section-bg-color,var(--tg-theme-bg-color,#15232a));
  --ink:var(--tg-theme-text-color,#e3eef0);
  --muted:var(--tg-theme-hint-color,#8fa6ae);
  --accent:var(--tg-theme-button-color,#3f97a8);
  --water:#3f8aa1; --water-deep:#2a6b80; --leaf:#78b85e; --glass:#5d7882;
  --E:#ef6a52; --T:#a88af0; --X:#f0b041; --K:#5fb0e6; --M:#5cc48a; --S:#e06aa9; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:var(--tg-theme-secondary-bg-color,#0e171b);
  --paper:var(--tg-theme-section-bg-color,var(--tg-theme-bg-color,#15232a));
  --ink:var(--tg-theme-text-color,#e3eef0);
  --muted:var(--tg-theme-hint-color,#8fa6ae);
  --accent:var(--tg-theme-button-color,#3f97a8);
  --water:#3f8aa1; --water-deep:#2a6b80; --leaf:#78b85e; --glass:#5d7882;
  --E:#ef6a52; --T:#a88af0; --X:#f0b041; --K:#5fb0e6; --M:#5cc48a; --S:#e06aa9; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  padding:16px 16px calc(32px + env(safe-area-inset-bottom));overflow-x:clip;-webkit-tap-highlight-color:transparent}
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.wrap>*,.sheet>*,.cols>*{min-width:0}
[hidden]{display:none!important}
.stack{display:flex;flex-direction:column;gap:14px}
.center{text-align:center;padding:40px 0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,7vw,40px);line-height:1.05;margin:4px 0 0;text-wrap:balance}
h2{font-family:var(--display);font-weight:500;font-size:clamp(19px,4.6vw,24px);line-height:1.25;margin:0;text-wrap:balance}
p{margin:0}
b{font-weight:600}
.lead{color:var(--muted)}
.lead b{color:var(--ink)}
.small{font-size:15px}
.note{font-size:13px;color:var(--muted)}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mb6{margin-bottom:6px}
.sheet{background:var(--paper);border-radius:14px;padding:20px}
.hero{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:center}
.glass{width:100px;height:125px;max-width:100%}
.glass.big{width:130px;height:162px}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px 18px;font-size:14px;color:var(--muted)}
.legend b{color:var(--ink)}
.legend span{display:flex;gap:8px;align-items:baseline}
.dot{width:9px;height:9px;border-radius:50%;flex:none;transform:translateY(-1px)}

button{font:inherit;cursor:pointer}
.btn{background:var(--accent);color:var(--accent-text);border:0;border-radius:999px;padding:12px 22px;font-weight:600;font-size:15px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.nav .btn:only-child,.nav #fbMain{margin-left:auto}

.progress{display:flex;gap:4px}
.progress i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.progress i.on{background:var(--accent)}
.qhead{display:flex;justify-content:space-between;gap:12px}

.item{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:2px}
.item p{font-size:15px;line-height:1.4}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.scale.u{grid-template-columns:repeat(5,1fr) 1.1fr}
.scale button{height:40px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font-family:var(--mono);font-size:14px;min-width:0;transition:background .12s,border-color .12s}
.scale button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.scale button.unk{font-family:var(--body)}
.scale button.err{border-color:var(--E)}

.result-top{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center}
.result-top>div{min-width:0;display:flex;flex-direction:column;gap:6px}
@media (max-width:420px){.result-top{grid-template-columns:1fr;justify-items:center;text-align:center}}
.typename{font-family:var(--display);font-weight:700;font-size:clamp(28px,8vw,42px);line-height:1;margin:0;overflow-wrap:anywhere}
.kanji{font-family:var(--mono);font-size:13px;color:var(--muted)}
.water-says{font-style:italic;color:var(--muted)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.cols>div{display:flex;flex-direction:column;gap:8px}
@media (max-width:560px){.cols{grid-template-columns:1fr}}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chips,.friends{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px;overflow-wrap:anywhere}
.bars{display:flex;flex-direction:column;gap:7px;font-variant-numeric:tabular-nums}
.bar{display:grid;grid-template-columns:118px 1fr 40px;gap:10px;align-items:center;font-size:13px}
.bar .track{height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.bar .fill{display:block;height:100%;border-radius:4px}
.bar .pc{font-family:var(--mono);color:var(--muted);text-align:right}
.bar .pc.wide{grid-column:2/4;text-align:left}
.hex svg{width:100%;max-width:380px;height:auto;display:block;margin:0 auto}
.why{display:flex;flex-direction:column;gap:10px}
.why div{border-left:2px solid var(--line);padding-left:12px;font-size:14px;overflow-wrap:anywhere}
.why small{display:block;color:var(--muted);font-size:12.5px}
.flag{font-size:14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.flag b{color:var(--ink)}
.keyrow{display:flex;gap:16px;font-size:13px;color:var(--muted)}
.keyrow span{display:flex;gap:6px;align-items:center}
.sw{width:18px;height:3px;border-radius:2px;background:var(--ink)}
.sw.dash{background:repeating-linear-gradient(90deg,var(--muted) 0 5px,transparent 5px 8px)}
.cmp{display:grid;grid-template-columns:110px 1fr 1fr;gap:6px 12px;font-size:13px;align-items:center}
.cmp .h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mini{height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.mini i{display:block;height:100%;border-radius:4px}
details summary{cursor:pointer;color:var(--accent);font-size:14px}

/* стакан */
.w-level{transition:transform 1.6s cubic-bezier(.3,.7,.3,1)}
.w-fill{transition:fill 1.6s ease}
.leaf{transform-box:fill-box;transform-origin:center}
.anim-M .leaf{animation:spin 3.2s ease-in-out infinite}
@keyframes spin{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(14px) rotate(160deg)}100%{transform:translateX(0) rotate(360deg)}}
.speck{opacity:0;transition:opacity 1.2s ease}
.anim-K .speck{opacity:1}
.ripple{opacity:0;transform-box:fill-box;transform-origin:center}
.anim-T .ripple{animation:rip 2s ease-out infinite}
@keyframes rip{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.spark{opacity:0}
.anim-S .spark{animation:twinkle 1.8s ease-in-out infinite}
.anim-S .spark:nth-of-type(2){animation-delay:.6s}.anim-S .spark:nth-of-type(3){animation-delay:1.2s}
@keyframes twinkle{0%,100%{opacity:0}50%{opacity:1}}
.drip{opacity:0}
.anim-E .drip{animation:drip 1.6s ease-in infinite 1.4s}
@keyframes drip{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}