/* Механата: единственият интериор в приложението. Всяка функция е
   предмет в стаята: масата е присъствието, дъската е поздравите,
   тефтерът е жаждата, огнището е огънят на Лясъра. Прозорчето е
   ИСТИНСКА дупка в стената: през него се вижда живата поляна
   (сцената зад приложението), изрязана с двуслойна CSS маска. */

#screen-mehanata{
  /* интериорни тонове: опушена вар, тъмен дъб, глина, черга */
  --room:#0c0703;
  --plaster-hi:#36230f;
  --plaster:#1d1208;
  --soot:#0e0804;
  --beam:#1a0f07;
  --beam-hi:#2a1a0d;
  --oak:#33200e;
  --oak-edge:#1f1206;
  --clay:#8a5630;
  --clay-hi:#a96f3f;
  --cherga-red:#993526;
  --cherga-dark:#1c1410;
  --cherga-cream:#e3d6b4;
  --cherga-green:#2f5a40;
  --paper:#e0d2ab;
  --paper-old:#c9b88d;
  --ink-paper:#412d18;
  --chalk:#e9e3d3;
  --font-hand:'Neucha',cursive;

  /* стаята владее целия екран: без панелната маска и отстъпи.
     Настрани няма мърдане: каквото стърчи (греди, кепенци, сияния)
     се реже, иначе екранът се влачи и открива поляната отзад. */
  padding:0;
  overflow-x:hidden;
  -webkit-mask-image:none;
  mask-image:none;
}
#screen-mehanata button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* съдържанието на стаята: телефонна колона върху стената */
#screen-mehanata .room{position:relative;min-height:100%;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 64px) 0 calc(env(safe-area-inset-bottom) + 172px)}
/* зърно върху цялата стая, едва доловимо */
#screen-mehanata .room::after{content:'';position:absolute;inset:0;z-index:40;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================================================
   СТЕНАТА: плътен дъсчен фон. (Преди тук имаше двуслойна маска,
   която изрязваше прозорчето като дупка към живата сцена — вече
   прозорецът е рисуван, затова стената е плътна, а сцената е
   паузирана на този таб.)
   ============================================================ */
#screen-mehanata .roomwall{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 16% at 50% 100%, rgba(240,138,46,.17), transparent 55%),
    radial-gradient(95% 8% at 18% 30%, rgba(255,214,160,.06), transparent 62%),
    radial-gradient(85% 7% at 84% 48%, rgba(255,201,126,.055), transparent 62%),
    radial-gradient(95% 7% at 28% 70%, rgba(240,138,46,.06), transparent 62%),
    radial-gradient(70% 4% at 62% 13%, rgba(0,0,0,.35), transparent 70%),
    linear-gradient(180deg, #150d07 0, #261809 26%, #311f0e 52%, #281809 78%, #170e07)}

/* всичко в стаята стои ВЪРХУ стената */
#screen-mehanata .room > :not(.roomwall){position:relative;z-index:1}

/* ============================================================
   ТАВАНЪТ: гредоред с низи. Влизаш и първо те посреща той.
   ============================================================ */
#screen-mehanata .ceiling{position:relative;height:128px;margin-top:10px;overflow:visible;z-index:4;
  background:linear-gradient(180deg, #1b1109, #150d07 64%, transparent)}
#screen-mehanata .beam{position:absolute;left:-4%;right:-4%;height:24px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.4), transparent 5%, transparent 95%, rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 2.5px, transparent 2.5px 74px),
    repeating-linear-gradient(90deg, rgba(255,214,160,.06) 0 3px, transparent 3px 43px),
    linear-gradient(180deg, #41290f, #2a1909 42%, #180e05);
  border-bottom:1.5px solid rgba(255,193,120,.16);
  box-shadow:0 8px 16px rgba(3,2,1,.62)}
#screen-mehanata .beam.b1{top:4px;transform:rotate(.35deg)}
#screen-mehanata .beam.b2{top:46px;height:20px;transform:rotate(-.3deg)}
#screen-mehanata .beam.b3{top:84px;height:15px;transform:rotate(.2deg);opacity:.7}

#screen-mehanata .niza{position:absolute;transform-origin:50% 0;animation:nizaSway 9s ease-in-out infinite}
#screen-mehanata .niza svg{display:block;
  filter:drop-shadow(0 5px 7px rgba(3,2,1,.5)) drop-shadow(9px 15px 11px rgba(0,0,0,.42))}
#screen-mehanata .niza.peppers{left:8%;top:22px;animation-delay:-2s}
#screen-mehanata .niza.garlic{left:37%;top:24px;animation-duration:11s}
#screen-mehanata .niza.herbs{right:8%;top:24px;animation-delay:-5s;animation-duration:10s}
@keyframes nizaSway{0%,100%{transform:rotate(1.1deg)}50%{transform:rotate(-1.1deg)}}

/* ---------- името, прогорено върху главната греда ---------- */
#screen-mehanata .titlewrap{position:relative;z-index:5;width:min(88%,380px);margin:12px auto 0}
#screen-mehanata .titlewrap::before{content:'';position:absolute;inset:-34px -44px;pointer-events:none;
  background:radial-gradient(55% 95% at 50% 64%, rgba(255,193,120,.11), transparent 70%)}
#screen-mehanata .corbel{position:absolute;bottom:-20px;width:30px;height:26px;
  background:linear-gradient(180deg, #311e0d, #170d05 85%);
  clip-path:polygon(0 0, 100% 0, 74% 58%, 60% 100%, 40% 100%, 26% 58%);
  filter:drop-shadow(0 8px 10px rgba(3,2,1,.5))}
#screen-mehanata .corbel.l{left:8%}
#screen-mehanata .corbel.r{right:8%}
#screen-mehanata .titlebeam{position:relative;padding:17px 26px 15px;text-align:center;
  background:
    linear-gradient(180deg, rgba(255,224,170,.15) 0, rgba(255,224,170,.15) 2.5px, transparent 2.5px),
    linear-gradient(0deg, rgba(0,0,0,.4) 0, rgba(0,0,0,.4) 3px, transparent 3px),
    linear-gradient(90deg, rgba(0,0,0,.38), transparent 5.5%, transparent 94.5%, rgba(0,0,0,.38)),
    repeating-linear-gradient(92deg, rgba(255,214,160,.05) 0 2px, transparent 2px 38px),
    linear-gradient(176deg, #43290f, #2e1c0c 55%, #1d1106);
  clip-path:polygon(1.5% 6%, 98.5% 0, 100% 46%, 98% 96%, 2.5% 100%, 0 52%);
  filter:drop-shadow(0 16px 24px rgba(3,2,1,.6))}
#screen-mehanata .titlebeam h1{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:34px;
  letter-spacing:.01em;color:#190c04;
  text-shadow:0 1px 0 rgba(255,224,170,.22), 0 -1px 1px rgba(0,0,0,.75), 0 0 16px rgba(240,138,46,.3)}
#screen-mehanata .titlebeam p{margin-top:3px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(248,245,232,.45)}

/* ---------- входът: вратата и закачалката ---------- */
#screen-mehanata .entrance{position:relative;z-index:4;display:flex;align-items:flex-end;
  justify-content:space-between;padding:20px 22px 0;min-height:186px}
#screen-mehanata .doorway{position:relative;width:118px;height:168px;perspective:520px;
  border:7px solid #1c1006;border-bottom:0;background:#0a0604;
  box-shadow:0 10px 24px rgba(2,1,0,.6)}
#screen-mehanata .doorhole{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,#0a141c,#07110a 60%,#050b06)}
#screen-mehanata .mist{position:absolute;inset:-20%;opacity:0;
  background:radial-gradient(50% 40% at 40% 70%, rgba(178,216,188,.4), transparent 70%);
  filter:blur(8px)}
#screen-mehanata .doorway.open .mist{animation:mistIn 1.6s ease-out}
@keyframes mistIn{0%{opacity:0;transform:translateX(-30%)}35%{opacity:.8}100%{opacity:0;transform:translateX(25%)}}
#screen-mehanata .door{position:absolute;inset:0;transform-origin:left center;
  transition:transform .85s cubic-bezier(.5,1.4,.45,1);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 29px),
    repeating-linear-gradient(90deg, rgba(255,214,160,.05) 0 2px, transparent 2px 17px),
    linear-gradient(176deg,#34200d,#22140a 60%,#170d05)}
#screen-mehanata .doorway.open .door{transform:rotateY(-58deg)}
#screen-mehanata .doorway.shiver .door{animation:doorShiver .35s ease}
@keyframes doorShiver{0%,100%{transform:none}30%{transform:translateX(1.6px)}65%{transform:translateX(-1.2px)}}
#screen-mehanata .hinge{position:absolute;left:0;width:34px;height:8px;
  background:linear-gradient(90deg,#3c3c38,#1c1c1a);clip-path:polygon(0 0,100% 28%,100% 72%,0 100%)}
#screen-mehanata .hinge.h1{top:22px}
#screen-mehanata .hinge.h2{bottom:30px}
#screen-mehanata .latch{position:absolute;right:8px;top:50%;width:20px;height:7px;background:#46362a;
  box-shadow:0 2px 3px rgba(0,0,0,.5)}
#screen-mehanata .doornote{position:absolute;left:12px;right:12px;top:24px;padding:9px 8px 7px;text-align:center;
  background:linear-gradient(172deg,var(--paper),var(--paper-old));color:var(--ink-paper);
  font-family:var(--font-hand);font-size:12.5px;line-height:1.3;transform:rotate(-2deg);
  clip-path:polygon(2% 3%,98% 0,100% 96%,4% 100%,0 12%)}
#screen-mehanata .doornote b{display:block;margin-top:3px;font-weight:400;font-size:11px;color:#8a6a3c}
#screen-mehanata .pegs{filter:drop-shadow(0 8px 12px rgba(2,1,0,.5))}
/* звънчето до вратата: пуска и спира звуците на стаята */
#screen-mehanata .bell{position:absolute;left:158px;top:26px;z-index:5;padding:6px;
  filter:drop-shadow(0 4px 6px rgba(2,1,0,.5))}
#screen-mehanata .bell svg{display:block;transform-origin:50% 0}
#screen-mehanata .bell .bellhint{position:absolute;left:32px;top:6px;width:96px;text-align:left;
  font-family:var(--font-hand);font-size:12px;color:var(--ivory50);line-height:1.15}
#screen-mehanata .bell.muted .ribbon{opacity:1}
#screen-mehanata .bell.rung svg{animation:bellSwing .8s ease}
@keyframes bellSwing{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}
  55%{transform:rotate(-10deg)}80%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){#screen-mehanata .door{transition:none}}

/* ============================================================
   СЕКЦИИ: всеки предмет има малък надпис и ред от Лясъра.
   ============================================================ */
#screen-mehanata .mehsec{position:relative;padding:30px 20px 6px;z-index:3}
#screen-mehanata .frieze{height:16px;margin:34px 20px 0;opacity:.42;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M20 2 L28 8 L20 14 L12 8 Z' fill='%23a8402e'/%3E%3Cpath d='M20 5 L24.5 8 L20 11 L15.5 8 Z' fill='%23d9c9a0'/%3E%3Cpath d='M0 8 L6 3 L6 13 Z' fill='%234f6a3c'/%3E%3Cpath d='M40 8 L34 3 L34 13 Z' fill='%234f6a3c'/%3E%3C/svg%3E") repeat-x center / 40px 16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent)}
#screen-mehanata .kick{font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory50)}
#screen-mehanata .kick::after{content:'';display:inline-block;vertical-align:middle;margin-left:12px;width:46px;height:1px;
  background:linear-gradient(90deg, rgba(248,245,232,.35), transparent)}
#screen-mehanata h3{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:24px;margin-top:5px;
  text-shadow:0 2px 12px rgba(0,0,0,.5)}
#screen-mehanata .how{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ivory70);max-width:42ch}

/* ============================================================
   СТЕНАТА: прозорчето към поляната + полицата с радиото
   ============================================================ */
#screen-mehanata .wallrow{display:flex;gap:18px;align-items:flex-start;margin-top:20px}
#screen-mehanata .windowcol{flex:0 0 47%;display:flex;flex-direction:column}
#screen-mehanata .windowwrap{position:relative}
#screen-mehanata #mehGramofon{margin-top:10px}
/* прозорчето е дупка: фонът е само стъклен дъх върху живата сцена */
#screen-mehanata .windowframe{position:relative;border:9px solid #241409;outline:3px solid #150c06;border-radius:3px;
  background:#0c140e;
  box-shadow:0 10px 26px rgba(2,1,0,.6), inset 0 0 0 2px rgba(255,214,160,.05);
  aspect-ratio:.82;overflow:hidden}
/* кръстачката */
#screen-mehanata .windowframe::before,
#screen-mehanata .windowframe::after{content:'';position:absolute;background:#241409;z-index:2;
  box-shadow:0 0 4px rgba(0,0,0,.6)}
#screen-mehanata .windowframe::before{left:0;right:0;top:calc(52% - 4px);height:8px}
#screen-mehanata .windowframe::after{top:0;bottom:0;left:calc(50% - 4px);width:8px}
/* рисуваният изглед в стъклото: ден/нощ кросфейд + евтини живинки (нула WebGL).
   Крие се зад кръстачката (z-index:2) и под мушкатото (z-index:3). */
#screen-mehanata .win-view{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
#screen-mehanata .win-view .day,
#screen-mehanata .win-view .night{transition:opacity 1.8s ease}
#screen-mehanata .win-view .night{opacity:0}
#screen-mehanata #mehWindow.night .win-view .day{opacity:0}
#screen-mehanata #mehWindow.night .win-view .night{opacity:1}
@keyframes mehDrift{from{transform:translateX(-8px)}to{transform:translateX(22px)}}
@keyframes mehTw{0%,100%{opacity:.18}50%{opacity:1}}
@keyframes mehFlap{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#screen-mehanata .win-view .cloud{animation:mehDrift 16s ease-in-out infinite alternate}
#screen-mehanata .win-view .fly{animation:mehFlap 5s ease-in-out infinite}
#screen-mehanata .win-view .s1,#screen-mehanata .win-view .ff1{animation:mehTw 2.6s ease-in-out infinite}
#screen-mehanata .win-view .s2,#screen-mehanata .win-view .ff2{animation:mehTw 3.4s ease-in-out infinite .5s}
#screen-mehanata .win-view .s3,#screen-mehanata .win-view .ff3{animation:mehTw 2s ease-in-out infinite 1s}
#screen-mehanata .win-view .s4{animation:mehTw 3s ease-in-out infinite 1.6s}
#screen-mehanata .shutter{position:absolute;top:-6px;bottom:-6px;width:24px;z-index:1;
  background:
    repeating-linear-gradient(0deg, rgba(255,214,160,.05) 0 2px, transparent 2px 16px),
    linear-gradient(90deg, #2c1a0c, #1c1006);
  box-shadow:0 8px 16px rgba(2,1,0,.5)}
#screen-mehanata .shutter.l{left:-30px;transform:skewY(4deg)}
#screen-mehanata .shutter.r{right:-30px;transform:skewY(-4deg)}
#screen-mehanata .sill{position:relative;margin:-2px -14px 0;height:14px;
  background:linear-gradient(180deg, #3a2511, #20130a);
  clip-path:polygon(0 0, 100% 0, 97% 100%, 3% 100%)}
#screen-mehanata .geranium{position:absolute;right:5px;bottom:9px;z-index:3;
  filter:drop-shadow(0 4px 5px rgba(2,1,0,.55))}
#screen-mehanata .moonspill{position:absolute;left:-16%;top:86%;width:140%;height:190px;pointer-events:none;
  background:radial-gradient(58% 90% at 50% 0%, rgba(158,214,176,.13), transparent 70%)}

/* полицата с радиото */
#screen-mehanata .shelfwrap{flex:1;min-width:0;padding-top:6px}
#screen-mehanata .radio{position:relative;width:min(100%,210px);margin:0 auto;cursor:pointer}
#screen-mehanata .radio svg{display:block;width:100%;filter:drop-shadow(0 12px 20px rgba(3,2,1,.55))}
#screen-mehanata .shelfboard{height:12px;margin:-3px -8px 0;
  background:linear-gradient(180deg, #38220f, #1d1107);
  clip-path:polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)}
#screen-mehanata .reactzone{position:absolute;inset:0;overflow:visible;pointer-events:none}
#screen-mehanata .float-r{position:absolute;left:50%;top:8%;font-family:var(--font-display);font-style:italic;
  font-weight:700;font-size:17px;color:var(--amber);text-shadow:0 2px 10px rgba(0,0,0,.6);
  animation:floatUp 2.4s ease-out forwards;white-space:nowrap}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,6px) rotate(-2deg)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,14px)),-74px) rotate(3deg)}}

/* сега върви + бутоните за реакция (върху efir-овия .np: тук е блок) */
#screen-mehanata .np{margin-top:14px;text-align:center;flex:none}
#screen-mehanata .np .npk{font-size:9px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--amber)}
#screen-mehanata .np .npt{font-family:var(--font-display);font-weight:800;font-size:17.5px;line-height:1.25;margin-top:5px}
#screen-mehanata .np .npa{font-size:11.5px;color:var(--ivory70);margin-top:2px}
#screen-mehanata .np .npnext{font-size:10.5px;color:var(--ivory50);margin-top:6px}
#screen-mehanata .np .npnext b{color:var(--ivory70);font-weight:500}
/* плочиците се завъртат на втори ред, ако полицата е тясна */
#screen-mehanata .reactrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
/* дървени плочици, заковани на полицата */
#screen-mehanata .reactbtn{position:relative;padding:6px 11px 7px;font-size:11px;font-weight:600;color:var(--ivory70);
  background:
    linear-gradient(180deg, rgba(255,224,170,.08) 0, rgba(255,224,170,.08) 1.5px, transparent 1.5px),
    linear-gradient(173deg, #32200f, #20130a);
  clip-path:polygon(4% 8%, 96% 0, 100% 88%, 92% 100%, 3% 96%, 0 22%);
  transition:transform .12s ease;filter:drop-shadow(0 5px 8px rgba(3,2,1,.5))}
#screen-mehanata .reactbtn:nth-child(2){clip-path:polygon(0 0, 94% 6%, 100% 80%, 96% 100%, 5% 100%, 0 80%)}
#screen-mehanata .reactbtn:nth-child(3){clip-path:polygon(6% 0, 100% 4%, 97% 96%, 88% 100%, 0 92%, 2% 18%)}
#screen-mehanata .reactbtn:active{transform:translateY(2px);color:var(--amber)}
#screen-mehanata .reactbtn span{margin-left:6px;font-size:10px;color:var(--ivory50);font-variant-numeric:tabular-nums}

/* ============================================================
   МАСАТА: всяка чаша е жив човек.
   ============================================================ */
#screen-mehanata .hall{margin-top:8px}
#screen-mehanata .lamp{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:4;
  transform-origin:50% 0;animation:lampSway 8s ease-in-out infinite}
@keyframes lampSway{0%,100%{transform:translateX(-50%) rotate(.9deg)}50%{transform:translateX(-50%) rotate(-.9deg)}}
#screen-mehanata .lampglow{position:absolute;left:50%;top:30px;width:380px;height:300px;transform:translateX(-50%);
  pointer-events:none;background:radial-gradient(50% 50% at 50% 30%, rgba(255,201,126,.13), transparent 70%);
  animation:lampFlick 5s ease-in-out infinite}
@keyframes lampFlick{0%,100%{opacity:1}38%{opacity:.86}62%{opacity:.95}80%{opacity:.82}}
/* развихрянето: лампата се люлее широко, светликът кипи */
@keyframes lampSwayHard{0%,100%{transform:translateX(-50%) rotate(2.6deg)}50%{transform:translateX(-50%) rotate(-2.6deg)}}
#screen-mehanata.party .lamp{animation:lampSwayHard 2.6s ease-in-out infinite}
#screen-mehanata.party .lampglow{animation-duration:1.4s;
  background:radial-gradient(50% 50% at 50% 30%, rgba(255,201,126,.2), transparent 70%)}
@media (prefers-reduced-motion:reduce){#screen-mehanata.party .lamp{animation:none}}

#screen-mehanata .tablewrap{position:relative;margin-top:54px}
#screen-mehanata .tabletop{position:relative;height:340px;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(255,201,126,.14), transparent 75%),
    repeating-linear-gradient(180deg, rgba(255,224,170,.035) 0 2px, transparent 2px 52px),
    linear-gradient(180deg, #43290f 0, var(--oak) 45%, #271708);
  clip-path:polygon(11% 0, 89% 0, 99% 96%, 96% 100%, 4% 100%, 1% 96%);
  filter:drop-shadow(0 18px 26px rgba(3,2,1,.6))}
#screen-mehanata .tablezone{position:absolute;inset:0}
#screen-mehanata .runner{position:absolute;left:50%;top:0;bottom:0;width:23%;transform:translateX(-50%);
  background:
    repeating-linear-gradient(180deg,
      var(--cherga-red) 0 26px, var(--cherga-dark) 26px 32px,
      var(--cherga-cream) 32px 40px, var(--cherga-dark) 40px 46px,
      var(--cherga-green) 46px 64px, var(--cherga-dark) 64px 70px,
      var(--cherga-cream) 70px 78px, var(--cherga-dark) 78px 84px);
  opacity:.85;clip-path:polygon(6% 0, 94% 0, 100% 100%, 0 100%)}
#screen-mehanata .runner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, transparent 64%, rgba(0,0,0,.3)),
  radial-gradient(70% 40% at 50% 36%, rgba(255,201,126,.12), transparent 75%)}

/* чашите */
#screen-mehanata .mug{position:absolute;width:54px;margin-left:-27px;text-align:center;cursor:pointer;
  transition:filter .2s ease;z-index:3}
#screen-mehanata .mug svg{display:block;width:42px;margin:0 auto;overflow:visible;
  filter:drop-shadow(0 6px 8px rgba(3,2,1,.55))}
#screen-mehanata .mug .nm{margin-top:2px;font-size:10px;color:var(--ivory70);text-shadow:0 1px 6px rgba(0,0,0,.7);
  white-space:nowrap}
#screen-mehanata .mug.me{width:74px;margin-left:-37px}
#screen-mehanata .mug.me svg{width:58px}
#screen-mehanata .mug.me .nm{font-family:var(--font-display);font-style:italic;font-size:13.5px;color:var(--ivory)}
#screen-mehanata .mug.me .sub{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:1px}
#screen-mehanata .mug.me.cooling .sub{color:var(--ivory50)}
#screen-mehanata .mug.clinking svg{animation:clink .95s cubic-bezier(.34,1.3,.5,1)}
@keyframes clink{
  0%{transform:none}
  42%{transform:translate(var(--tx,0px), var(--ty,-8px)) rotate(var(--rr,-9deg))}
  58%{transform:translate(var(--tx,0px), var(--ty,-8px)) rotate(calc(var(--rr,-9deg) * .8))}
  100%{transform:none}}
#screen-mehanata .mug.solo svg{animation:solo .8s ease}
@keyframes solo{0%{transform:none}38%{transform:translateY(-9px) rotate(-8deg)}62%{transform:translateY(-9px) rotate(-4deg)}100%{transform:none}}
#screen-mehanata .mug.pop{animation:popIn .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes popIn{0%{opacity:0;transform:translateY(10px) scale(.7)}100%{opacity:1;transform:none}}

/* искрата в средата при общо наздраве */
#screen-mehanata .clinkflash{position:absolute;left:50%;top:44%;width:10px;height:10px;margin:-5px;pointer-events:none;z-index:4}
#screen-mehanata .clinkflash i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,201,126,.85);
  animation:ringOut .9s ease-out forwards}
#screen-mehanata .clinkflash i:nth-child(2){animation-delay:.12s}
@keyframes ringOut{0%{transform:scale(.4);opacity:.95}100%{transform:scale(9);opacity:0}}
#screen-mehanata .float-naz{position:absolute;left:50%;top:34%;transform:translateX(-50%);pointer-events:none;z-index:5;
  font-family:var(--font-display);font-style:italic;font-weight:800;font-size:30px;color:var(--ivory);
  text-shadow:0 0 18px rgba(255,201,126,.45), 0 2px 10px rgba(0,0,0,.65);
  animation:nazUp 1.7s ease-out forwards;white-space:nowrap}
@keyframes nazUp{0%{opacity:0;transform:translate(-50%,14px) scale(.85)}15%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-46px) scale(1.04)}}
#screen-mehanata .float-reply{position:absolute;pointer-events:none;z-index:5;font-family:var(--font-hand);
  font-size:15px;color:var(--amber);text-shadow:0 2px 8px rgba(0,0,0,.7);
  animation:floatUp 2.2s ease-out forwards;white-space:nowrap}

/* питането при черпене: пергаментово балонче */
#screen-mehanata .ask{position:absolute;z-index:8;width:168px;padding:10px 12px 11px;text-align:center;
  background:linear-gradient(174deg, var(--paper), var(--paper-old));
  clip-path:polygon(2% 4%, 98% 0, 100% 94%, 95% 100%, 3% 98%, 0 14%);
  color:var(--ink-paper);font-family:var(--font-hand);font-size:15.5px;line-height:1.25;
  filter:drop-shadow(0 10px 16px rgba(3,2,1,.6))}
#screen-mehanata .ask .btns{display:flex;gap:8px;justify-content:center;margin-top:8px}
#screen-mehanata .ask button{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  padding:5px 12px;color:var(--ivory);
  background:linear-gradient(176deg, #3a2511, #241509);
  clip-path:polygon(4% 10%, 96% 0, 100% 86%, 94% 100%, 2% 94%, 0 20%)}
#screen-mehanata .ask button.no{opacity:.75}

/* името на масата: хартиено листче, докато не си казал как да те викат */
#screen-mehanata .namegate{position:absolute;left:50%;top:38%;transform:translateX(-50%);z-index:9;
  width:min(76%,240px);padding:14px 14px 13px;text-align:center;
  background:linear-gradient(174deg, var(--paper), var(--paper-old));
  clip-path:polygon(2% 4%, 98% 0, 100% 94%, 95% 100%, 3% 98%, 0 14%);
  color:var(--ink-paper);font-family:var(--font-hand);
  filter:drop-shadow(0 12px 18px rgba(3,2,1,.65))}
#screen-mehanata .namegate p{font-size:16px;line-height:1.25}
#screen-mehanata .namegate input{display:block;width:100%;margin-top:9px;padding:6px 8px;text-align:center;
  font-family:var(--font-hand);font-size:16px;color:var(--ink-paper);
  background:rgba(255,255,255,.25);border:0;border-bottom:1.5px solid rgba(90,64,36,.5);outline:none}
#screen-mehanata .namegate button{margin-top:10px;font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:.08em;padding:6px 16px;color:var(--ivory);
  background:linear-gradient(176deg, #3a2511, #241509);
  clip-path:polygon(4% 10%, 96% 0, 100% 86%, 94% 100%, 2% 94%, 0 20%)}
#screen-mehanata .namegate .gateline{margin-top:8px;font-size:13px;color:#8a6a3c;min-height:16px}
#screen-mehanata .namegate.shake{animation:noteShake .45s ease}

/* резката под масата */
#screen-mehanata .tallyline{margin-top:14px;text-align:center;font-size:12px;color:var(--ivory50)}
#screen-mehanata .tallyline b{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--amber);
  font-weight:700;display:inline-block;transition:transform .25s ease}
#screen-mehanata .tallyline b.bump{transform:scale(1.35)}

/* тихият ред за връзката */
#screen-mehanata .wsline{margin-top:6px;text-align:center;font-family:var(--font-hand);font-size:13px;
  color:var(--ivory50);min-height:16px}

/* ============================================================
   ДЪСКАТА С ПОЗДРАВИТЕ
   ============================================================ */
#screen-mehanata .board{position:relative;margin-top:18px;padding:18px 14px 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,224,170,.04) 0 2px, transparent 2px 58px),
    linear-gradient(178deg, #2c1b0c, #1d1208 60%, #150d05);
  border:6px solid #120a04;outline:2px solid rgba(255,214,160,.05);
  box-shadow:0 16px 30px rgba(3,2,1,.6), inset 0 0 26px rgba(0,0,0,.5)}
#screen-mehanata .board::before,
#screen-mehanata .board::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c9a06a, #5a3c1c 70%);top:-10px;
  box-shadow:0 2px 4px rgba(0,0,0,.7)}
#screen-mehanata .board::before{left:14px}
#screen-mehanata .board::after{right:14px}
#screen-mehanata .notes{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;align-items:start}
#screen-mehanata .note{position:relative;padding:24px 13px 12px;
  background:linear-gradient(172deg, var(--paper), var(--paper-old) 80%);
  transform:rotate(var(--r,0deg));
  color:var(--ink-paper);
  clip-path:polygon(1% 2%, 99% 0, 100% 97%, 96% 100%, 2% 99%, 0 10%);
  filter:drop-shadow(0 8px 12px rgba(3,2,1,.55));
  transition:transform .45s cubic-bezier(.3,1.3,.4,1), filter .45s ease;cursor:pointer}
#screen-mehanata .note::before{content:'';position:absolute;top:8px;left:50%;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%, #d8b078, #4a3014 72%);
  box-shadow:0 2px 3px rgba(0,0,0,.5)}
#screen-mehanata .note .to{font-family:var(--font-hand);font-size:16.5px;line-height:1.1}
#screen-mehanata .note .tx{font-family:var(--font-hand);font-size:14px;line-height:1.3;margin-top:6px;color:#54402a}
#screen-mehanata .note .ft{margin-top:9px;font-family:var(--font-ui);font-size:8.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#8a6a3c}
#screen-mehanata .note.aired{clip-path:polygon(1% 2%, 99% 0, 100% 84%, 93% 92%, 95% 100%, 2% 99%, 0 10%)}
#screen-mehanata .note.aired .singe{position:absolute;right:-2px;bottom:-2px;width:64%;height:56%;pointer-events:none;
  background:radial-gradient(circle at 108% 110%, rgba(12,6,2,.95) 12%, rgba(70,34,10,.6) 38%, rgba(150,80,30,.25) 52%, transparent 66%)}
#screen-mehanata .note.aired .ft{color:#9c5a20}
/* самотната бележка на празната дъска */
#screen-mehanata .note.lone{grid-column:1 / -1;width:min(70%,200px);margin:6px auto 2px;cursor:default}
#screen-mehanata .note.lifted{transform:rotate(0) scale(1.72);z-index:30;
  filter:drop-shadow(0 26px 34px rgba(2,1,0,.75))}
#screen-mehanata .board .dimmer{position:absolute;inset:-6px;background:rgba(6,3,1,.55);
  opacity:0;pointer-events:none;transition:opacity .35s;z-index:20}
#screen-mehanata .board.reading .dimmer{opacity:1}
@keyframes noteShake{0%,100%{transform:rotate(var(--r,0deg))}
  25%{transform:rotate(calc(var(--r,0deg) + 2.4deg))}55%{transform:rotate(calc(var(--r,0deg) - 2deg))}
  80%{transform:rotate(calc(var(--r,0deg) + 1deg))}}
#screen-mehanata .boardline{margin-top:13px;text-align:center;font-family:var(--font-hand);font-size:14.5px;color:var(--ivory50)}

/* ============================================================
   ТЕФТЕРЪТ НА КРЪЧМАРЯ
   ============================================================ */
#screen-mehanata .book{position:relative;display:flex;margin-top:18px;
  filter:drop-shadow(0 16px 26px rgba(3,2,1,.6))}
#screen-mehanata .page{flex:1;min-width:0;padding:15px 13px 16px;color:var(--ink-paper);
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(90,64,36,.16) 25px 26px),
    radial-gradient(140% 110% at 0% 50%, rgba(60,40,18,.24), transparent 36%),
    linear-gradient(172deg, #ddcda4, #cbb98c)}
#screen-mehanata .page.r{background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(90,64,36,.16) 25px 26px),
    radial-gradient(140% 110% at 100% 50%, rgba(60,40,18,.24), transparent 36%),
    linear-gradient(188deg, #d8c79e, #c6b487)}
#screen-mehanata .page.l{clip-path:polygon(0 1.5%, 100% 0, 100% 100%, 1% 99%);transform:rotate(-.4deg)}
#screen-mehanata .page.r{clip-path:polygon(0 0, 99% .5%, 100% 98.5%, 0 100%);transform:rotate(.35deg)}
#screen-mehanata .ph2{font-family:var(--font-hand);font-size:17px;border-bottom:1.5px solid rgba(90,64,36,.4);
  padding-bottom:4px;margin-bottom:7px}
#screen-mehanata .trow{display:flex;align-items:center;gap:8px;padding:4px 0;font-family:var(--font-hand);font-size:15.5px}
#screen-mehanata .trow .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#screen-mehanata .trow.lead .who{font-size:17.5px;color:#7c3a14}
#screen-mehanata .trow.lead .who::after{content:' · води';font-size:11px;color:#9c5a20}
#screen-mehanata .tg{position:relative;display:inline-flex;gap:2.5px;padding:0 3px;margin-left:4px}
#screen-mehanata .tg i{width:1.8px;height:13px;background:#4a3520;border-radius:1px;transform:rotate(2deg)}
#screen-mehanata .tg.full::after{content:'';position:absolute;left:-1px;right:-1px;top:5px;height:1.8px;
  background:#4a3520;transform:rotate(-24deg);border-radius:1px}
#screen-mehanata .lrow{display:flex;gap:8px;align-items:baseline;padding:3.5px 0;font-family:var(--font-hand);font-size:14.5px}
#screen-mehanata .lrow time{flex:0 0 auto;font-family:var(--font-ui);font-size:9.5px;color:#8a6a3c;font-variant-numeric:tabular-nums}
#screen-mehanata .lrow.fresh{animation:inkIn 1.2s ease}
@keyframes inkIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1}}
#screen-mehanata .pageline{padding:6px 0;font-family:var(--font-hand);font-size:14px;color:#8a6a3c}
#screen-mehanata .bookline{margin-top:12px;text-align:center;font-family:var(--font-hand);font-size:14.5px;color:var(--ivory50)}

/* плочата с имениците */
#screen-mehanata .slate{position:relative;width:min(72%,260px);margin:22px auto 0;padding:13px 16px 14px;text-align:center;
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.045), transparent 50%),
    linear-gradient(174deg, #20231f, #151714);
  border:5px solid #2e1d0d;outline:2px solid #170e06;
  box-shadow:0 12px 22px rgba(3,2,1,.55);transform:rotate(-.6deg)}
#screen-mehanata .slate::before{content:'';position:absolute;top:-14px;left:50%;width:2px;height:12px;margin-left:-1px;
  background:linear-gradient(180deg, transparent, rgba(200,170,120,.6))}
#screen-mehanata .slate .sk{font-size:8.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,227,211,.4)}
#screen-mehanata .slate .st{font-family:var(--font-hand);font-size:17px;color:var(--chalk);margin-top:5px;line-height:1.3;
  text-shadow:0 0 6px rgba(233,227,211,.18)}

/* ============================================================
   ОГНИЩЕТО
   ============================================================ */
#screen-mehanata .hearthsec{padding-bottom:0}
#screen-mehanata .hearth{position:relative;width:min(100%,360px);margin:20px auto 0;height:270px}
#screen-mehanata .hearth svg.stones{position:absolute;inset:0;width:100%;height:100%}
#screen-mehanata .fireopen{position:absolute;left:50%;bottom:14px;width:55%;height:58%;transform:translateX(-50%);cursor:pointer;
  background:radial-gradient(80% 60% at 50% 90%, #1a0c03, #070302 70%);overflow:hidden;
  clip-path:polygon(0 26%, 8% 8%, 26% 0, 74% 0, 92% 8%, 100% 26%, 100% 100%, 0 100%);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#screen-mehanata .fireopen canvas{position:absolute;inset:0;width:100%;height:100%}

#screen-mehanata .kettle{position:absolute;left:50%;top:-4px;transform:translateX(-50%);z-index:2;
  transform-origin:50% 0;cursor:pointer}
#screen-mehanata .kettle .lid{transform-box:fill-box;transform-origin:50% 100%}
#screen-mehanata .kettle.hop .lid{animation:lidHop .7s ease}
@keyframes lidHop{0%,100%{transform:none}
  30%{transform:translateY(-3.5px) rotate(-4deg)}55%{transform:translateY(-1px) rotate(2deg)}}
#screen-mehanata .kettle.swing{animation:kettleSwing 2.2s ease-out}
@keyframes kettleSwing{
  0%{transform:translateX(-50%) rotate(0)} 15%{transform:translateX(-50%) rotate(4deg)}
  38%{transform:translateX(-50%) rotate(-3deg)} 62%{transform:translateX(-50%) rotate(1.8deg)}
  82%{transform:translateX(-50%) rotate(-.8deg)} 100%{transform:translateX(-50%) rotate(0)}}

#screen-mehanata .steam{position:absolute;left:50%;top:34px;width:0;pointer-events:none}
#screen-mehanata .tater .steam{top:-8px}
#screen-mehanata .steam i{position:absolute;left:-3px;width:7px;height:10px;border-radius:50%;
  background:rgba(236,231,218,.28);filter:blur(2px);opacity:0}
#screen-mehanata .steam i:nth-child(2){left:-9px}
#screen-mehanata .steam i:nth-child(3){left:3px}
#screen-mehanata .steam.go i{animation:steamUp 1.9s ease-out}
#screen-mehanata .steam.go i:nth-child(2){animation-delay:.25s}
#screen-mehanata .steam.go i:nth-child(3){animation-delay:.5s}
@keyframes steamUp{0%{opacity:0;transform:translateY(0) scale(.7)}
  25%{opacity:.85}100%{opacity:0;transform:translateY(-28px) scale(1.5)}}

#screen-mehanata .tater{position:absolute;bottom:6px;z-index:3;padding:4px;cursor:pointer;
  filter:drop-shadow(0 2px 3px rgba(2,1,0,.6))}
#screen-mehanata .tater svg{display:block;overflow:visible}
#screen-mehanata .tater .whole,
#screen-mehanata .tater .cracked{transition:opacity .3s}
#screen-mehanata .tater.open .whole{opacity:0}
#screen-mehanata .tater.open .cracked{opacity:1}
#screen-mehanata .tater.wiggle svg{animation:taterWiggle .4s ease}
@keyframes taterWiggle{0%,100%{transform:none}35%{transform:rotate(-5deg)}70%{transform:rotate(3deg)}}

/* котката на механата */
#screen-mehanata .cat{position:absolute;left:1.5%;bottom:-12px;z-index:3;cursor:pointer;
  filter:drop-shadow(0 5px 7px rgba(2,1,0,.6))}
#screen-mehanata .cat .cat-chest{transform-box:fill-box;transform-origin:50% 100%;
  animation:catBreath 4.2s ease-in-out infinite}
@keyframes catBreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
#screen-mehanata .cat .ear{transform-box:fill-box;transform-origin:55% 95%}
#screen-mehanata .cat.twitch .ear.l{animation:earTwitch .5s ease}
#screen-mehanata .cat.twitchR .ear.r{animation:earTwitch .5s ease}
@keyframes earTwitch{0%,100%{transform:none}40%{transform:rotate(-14deg)}}
#screen-mehanata .cat .cat-tail{transform-box:fill-box;transform-origin:90% 95%}
#screen-mehanata .cat.flick .cat-tail{animation:tailFlick .9s ease}
@keyframes tailFlick{0%,100%{transform:rotate(0)}35%{transform:rotate(-7deg)}70%{transform:rotate(3deg)}}
#screen-mehanata .cat.purr svg{animation:catPurr 1.2s ease}
@keyframes catPurr{0%,100%{transform:none}
  20%,60%{transform:translateX(.6px)}40%,80%{transform:translateX(-.6px)}}
@media (prefers-reduced-motion:reduce){#screen-mehanata .cat .cat-chest{animation:none}}

#screen-mehanata .hearthglow{position:absolute;left:50%;bottom:-30px;width:150%;height:130px;transform:translateX(-50%);
  pointer-events:none;background:radial-gradient(50% 60% at 50% 20%, rgba(240,138,46,.16), transparent 70%);
  animation:lampFlick 4s ease-in-out infinite}
#screen-mehanata .hearthline{margin:16px auto 0;text-align:center;font-size:12px;color:var(--ivory50);max-width:40ch}
#screen-mehanata .hearthline b{color:var(--ivory70);font-weight:500}
#screen-mehanata .hearthsig{margin-top:6px;text-align:center;font-family:var(--font-hand);font-size:15px;color:var(--ivory50)}

/* когда Лясъра говори, лампата танцува */
#screen-mehanata.lyasara-live .lampglow{animation-duration:1.6s}

@media (prefers-reduced-motion:reduce){
  #screen-mehanata .niza,
  #screen-mehanata .lamp,
  #screen-mehanata .lampglow,
  #screen-mehanata .hearthglow{animation:none}
}