/* ültetési rend szekció
   Főoldali bemutató (#ultetes) · a home.css tokenjeire épül.
   A mini-terem rajzát az assets/seat-showcase.js építi fel. */

.ult{--u-rule:rgba(27,42,68,.13);--u-fam:#6B1E2A;--u-fr:#3F6B4E;--u-wk:#A88B5C;--u-vip:#1F3A6B}
html:not(.js) .ult__fig{display:none}

.ult__fig{position:relative;margin:64px 0 0}
@media (min-width:900px){ .ult__fig{margin-top:40px} }

/* kézírásos megjegyzés az Okos ültetés gomb fölött */
.ult__hand{position:absolute;z-index:3;right:clamp(64px,9vw,128px);bottom:calc(100% + 2px);display:flex;align-items:flex-end;gap:2px;white-space:nowrap;font-size:clamp(1.2rem,2vw,1.45rem);transform:rotate(-2deg);transform-origin:right bottom}
.ult__hand .note__arrow{width:40px;height:30px;margin:0 0 -22px -2px;transform:rotate(18deg)}
@media (max-width:420px){ .ult__hand{right:40px} }

/* ---------- a lap ---------- */
.ult__stage{
  position:relative;overflow:hidden;
  background:var(--sheet);color:var(--ink);
  border:1px solid var(--sheet-edge);border-radius:6px;
  box-shadow:var(--shadow);
  font-size:14px;line-height:1.3;
  -webkit-user-select:none;user-select:none;
}
.ult__bar{display:flex;align-items:center;gap:14px;min-height:54px;padding:9px 10px 9px 14px;border-bottom:1px solid var(--u-rule);background:var(--paper)}
.ult__room{display:none;font:500 11px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
@media (min-width:640px){ .ult__room{display:block} }
.ult__saved{display:inline-flex;align-items:center;gap:7px;min-width:5.6em;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.ult__saved i{width:7px;height:7px;border-radius:50%;background:var(--u-fr);flex:none;transition:background-color .2s}
.ult__saved.is-busy i{background:var(--u-wk);animation:ultBlink .6s ease-in-out infinite alternate}
.ult__tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.ult__undo{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--u-rule);border-radius:50%;background:var(--sheet);transition:transform .18s var(--ease),background-color .2s}
.ult__undo svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ult__smart{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 16px 0 14px;border-radius:999px;
  background:var(--wine);color:#f6eee6;
  font:500 11.5px/1 var(--f-body);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 14px -8px rgba(107,30,42,.8);
  transition:transform .18s var(--ease),box-shadow .2s;
}
.ult__smart svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ult__smart i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(246,238,230,.75);transform:scaleX(0);transform-origin:left}
.ult__smart.is-run{box-shadow:0 0 0 4px rgba(107,30,42,.14),0 6px 14px -8px rgba(107,30,42,.8)}
.ult__undo.is-press,.ult__smart.is-press{transform:scale(.93)}
.ult__undo.is-press{background:var(--paper)}
@media (max-width:359px){ .ult__smart{padding:0 12px;letter-spacing:.08em} .ult__smart svg{display:none} .ult__bar{gap:8px} }

.ult__body{display:grid}

/* ---------- vendégtálca ---------- */
.ult__tray{padding:12px 14px 16px;border-top:1px solid var(--u-rule);background:linear-gradient(var(--sheet),#f8f6f0)}
.ult__th{display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap}
.ult__k{font:500 11px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ult__cnt{font-size:12.5px;color:var(--ink-2);font-feature-settings:"tnum","lnum"}
.ult__cnt b{display:inline-block;min-width:2ch;text-align:right;font:italic 400 1.15rem/1 var(--f-display);font-variation-settings:"opsz" 36;color:var(--ink);margin-right:2px}
.ult__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ult__chip,.ult__more{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;
  border:1px solid var(--u-rule);border-radius:999px;background:#fff;
  font-size:12.5px;line-height:1;color:var(--ink);white-space:nowrap;
  transition:opacity .28s ease,transform .28s var(--ease),border-color .2s;
}
.ult__chip>i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.ult__chip em{display:none;margin-left:auto;font:500 10px/1 var(--f-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ult__chip:nth-child(n+7){display:none}
.ult__chip.is-ghost{opacity:.4;border-style:dashed;background:transparent}
.ult__chip.is-gone{opacity:0;transform:scale(.92)}
.ult__chip.is-out{display:none!important}
.ult__chip.is-back{animation:ultBack .5s var(--ease)}
.ult__more{padding:0 12px;border-style:dashed;background:transparent;color:var(--ink-2);font-feature-settings:"tnum","lnum"}
.ult__more b{font-weight:500;color:var(--ink)}
.ult__more.is-out{display:none}
.ult__done{display:none;margin-top:10px;font:italic 400 1.15rem/1.2 var(--f-display);font-variation-settings:"opsz" 36,"SOFT" 100;color:var(--u-fr);white-space:nowrap}
.ult__tray.is-done .ult__done{display:block;animation:ultIn .5s var(--ease)}
.ult__tray.is-done .ult__chips{display:none}

/* repülő csip és pötty */
.ult__fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.ult__fly{position:absolute;margin:0;display:flex;justify-content:flex-start;box-shadow:0 12px 22px -10px rgba(27,42,68,.55);will-change:transform;opacity:1}
.ult__fly em{display:none}
.ult__dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--c);box-shadow:0 3px 6px -2px rgba(27,42,68,.4);will-change:transform}
.ult__cur{position:absolute;left:0;top:0;width:22px;height:24px;margin:-2px 0 0 -2px;opacity:0;z-index:6;will-change:transform}
.ult__cur svg{display:block;width:100%;height:100%;fill:var(--ink);stroke:#fbfaf6;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(27,42,68,.35))}
.ult__rip{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid var(--wine);z-index:5}

/* ---------- terem ---------- */
.ult__plan{
  position:relative;order:-1;padding:12px;
  background:
    linear-gradient(rgba(27,42,68,.045) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(27,42,68,.045) 1px,transparent 1px) 0 0/22px 22px,
    var(--sheet);
}
.ult__plan svg{display:block;width:100%;height:auto;overflow:visible}
.ult__over{position:absolute;inset:12px;pointer-events:none}
@media (min-width:900px){
  .ult__body{grid-template-columns:236px minmax(0,1fr)}
  .ult__plan{order:0;padding:24px 26px}
  .ult__over{inset:24px 26px}
  .ult__tray{border-top:0;border-right:1px solid var(--u-rule);padding:18px 16px;background:linear-gradient(90deg,#f8f6f0,var(--sheet))}
  .ult__chips{flex-direction:column;flex-wrap:nowrap;gap:5px;margin-top:14px}
  .ult__chip,.ult__chip:nth-child(n+7){display:flex;height:31px;border-radius:7px;padding:0 10px}
  .ult__chip em{display:block}
  .ult__more{height:31px;border-radius:7px;padding:0 10px;justify-content:flex-start}
  .ult__done{margin-top:16px}
}
@media (min-width:1200px){ .ult__body{grid-template-columns:252px minmax(0,1fr)} }

.ult__plan .wall{fill:none;stroke:var(--ink);stroke-width:4;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.6,.05,.25,1)}
.ult__plan .win{fill:var(--sheet);stroke:var(--ink);stroke-width:1.2}
.ult__plan .door{fill:none;stroke:rgba(27,42,68,.5);stroke-width:1.2;stroke-dasharray:3 3}
.ult__plan .it{fill:rgba(27,42,68,.035);stroke:rgba(27,42,68,.42);stroke-width:1.2}
.ult__plan .it--in{fill:#fff}
.ult__plan .it--dance{fill:url(#ultParq);stroke:rgba(27,42,68,.38)}
.ult__plan .it--stage{fill:url(#ultHatch)}
.ult__plan .tb{fill:#eee9dd;stroke:var(--ink);stroke-width:1.4}
.ult__plan .st{fill:#fff;stroke:rgba(27,42,68,.4);stroke-width:1.3;transform-box:fill-box;transform-origin:center;transition:fill .35s ease,stroke .35s ease}
.ult__plan .st.pop{animation:ultPop .5s var(--ease)}
.ult__plan .warn{fill:none;stroke:var(--wine);stroke-width:2;stroke-dasharray:3.5 2.5;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .25s}
.ult__plan .warn.on{opacity:1;animation:ultWarn .9s ease-in-out infinite alternate}
.ult__plan .sel{fill:rgba(107,30,42,.05);stroke:var(--wine);stroke-width:1.8;stroke-dasharray:6 5;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.94);transition:opacity .3s ease,transform .45s var(--ease)}
.ult__plan .sel.on{opacity:1;transform:none}
.ult__plan .tg{transform-box:fill-box;transform-origin:center;transition:opacity .6s ease var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}

/* első megjelenés: a falak megrajzolódnak, a bútorok a helyükre kerülnek */
.ult__stage.is-live .ult__plan:not(.is-drawn) .wall{stroke-dashoffset:1}
.ult__stage.is-live .ult__plan:not(.is-drawn) .tg{opacity:0;transform:scale(.9)}
.ult__stage.is-live .ult__plan:not(.is-drawn) .ult__lbl,
.ult__stage.is-live .ult__plan:not(.is-drawn) .ult__no{opacity:0}
.ult__lbl,.ult__no{transition:opacity .6s ease .9s}

.ult__lbl{
  position:absolute;transform:translate(-50%,-50%);
  font:500 clamp(8px,calc(var(--s,1) * 12.5px),11px)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
}
.ult__lbl--v{transform:translate(-50%,-50%) rotate(-90deg)}
.ult__lbl--big{font-size:clamp(9px,calc(var(--s,1) * 15px),13px);letter-spacing:.2em;color:rgba(27,42,68,.62)}
.ult__lbl--head{font-size:clamp(7.5px,calc(var(--s,1) * 12px),10.5px)}
.ult__no{
  position:absolute;transform:translate(-50%,-52%);
  font:italic 380 clamp(12px,calc(var(--s,1) * 30px),26px)/1 var(--f-display);font-variation-settings:"opsz" 48,"SOFT" 100;
  color:var(--ink);white-space:nowrap;
}

/* értesítő a terem tetején */
.ult__toast{
  position:absolute;left:50%;top:6px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 11px;
  border-radius:999px;background:var(--ink);color:#f3f0e8;
  font-size:12.5px;line-height:1;white-space:nowrap;
  box-shadow:0 12px 24px -12px rgba(27,42,68,.7);
  opacity:0;transform:translate(-50%,-8px);transition:opacity .25s ease,transform .35s var(--ease);
}
.ult__toast.is-on{opacity:1;transform:translate(-50%,0)}
.ult__toast svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ult__toast.is-warn{background:var(--wine)}
.ult__toast.is-ok{background:var(--u-fr)}

/* QR-kártya a kijelölt asztal mellett */
.ult__card{
  position:absolute;left:0;top:0;z-index:3;width:212px;padding:12px 13px 11px;
  background:#fff;border:1px solid var(--u-rule);border-radius:9px;
  box-shadow:0 1px 1px rgba(27,42,68,.06),0 22px 44px -18px rgba(27,42,68,.55);
  opacity:0;visibility:hidden;
}
.ult__card.is-on{opacity:1;visibility:visible}
.ult__card-top{display:flex;align-items:center;gap:12px}
.ult__qr{position:relative;flex:none;width:58px;height:58px;overflow:hidden;border-radius:3px;outline:1px solid var(--u-rule)}
.ult__qr svg{display:block;width:100%;height:100%;fill:var(--ink)}
.ult__scan{position:absolute;left:-2px;right:-2px;top:0;height:2px;background:var(--wine);box-shadow:0 0 8px 1px rgba(107,30,42,.55);opacity:0}
.ult__card.is-on .ult__scan{animation:ultScan 1.4s ease-in-out .35s 1 both}
.ult__card-id{display:grid;gap:3px;min-width:0}
.ult__card-id b{font:italic 400 1.2rem/1.05 var(--f-display);font-variation-settings:"opsz" 36,"SOFT" 100;white-space:nowrap}
.ult__card-id span{font-size:12px;color:var(--ink-2);white-space:nowrap}
.ult__card-k{margin-top:11px;padding-top:9px;border-top:1px solid var(--u-rule);font:500 10px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ult__card-list{list-style:none;margin:7px 0 0;padding:0;display:grid;gap:5px}
.ult__card-list li{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.2;white-space:nowrap}
.ult__card-list i{width:7px;height:7px;border-radius:50%;background:var(--u-fr);flex:none}
.ult__card-list em{margin-left:auto;font:500 9.5px/1 var(--f-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ult__card-more{margin-top:6px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.ult__stage[data-lay="tall"] .ult__card{width:164px;padding:9px 10px 9px}
.ult__stage[data-lay="tall"] .ult__qr{width:42px;height:42px}
.ult__stage[data-lay="tall"] .ult__card-top{gap:9px}
.ult__stage[data-lay="tall"] .ult__card-id b{font-size:1.02rem}
.ult__stage[data-lay="tall"] .ult__card-id span,.ult__stage[data-lay="tall"] .ult__card-list li{font-size:11.5px}
.ult__stage[data-lay="tall"] .ult__card-k{margin-top:8px;padding-top:7px;font-size:9px}
.ult__stage[data-lay="tall"] .ult__card-list{gap:3px}
.ult__stage[data-lay="tall"] .ult__card-more{font-size:11px;margin-top:4px}
.ult__stage[data-lay="tall"] .ult__toast{height:28px;font-size:11.5px;padding:0 12px 0 9px;top:4px}

/* ---------- jelmagyarázat + újrajátszás ---------- */
.ult__cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:18px}
.ult__legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:14.5px;color:var(--ink-2)}
.ult__legend li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ult__legend li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.ult__replay{
  display:inline-flex;align-items:center;gap:8px;padding:6px 0;margin:0;border:0;border-bottom:1.5px solid currentColor;background:none;cursor:pointer;
  font:500 12px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  transition:color .2s;
}
.ult__replay svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.ult__replay:hover{color:var(--wine)}
.ult__replay:hover svg{transform:rotate(-200deg)}
.ult__replay:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------- funkciórács ---------- */
.ult__feats{list-style:none;margin:76px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--ink)}
.ult__feats li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;align-content:start;column-gap:14px;row-gap:6px;padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.ult__feats svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ult__feats h3{margin:0;font-family:var(--f-display);font-variation-settings:"opsz" 36,"SOFT" 100;font-weight:420;font-size:1.22rem;line-height:1.25;white-space:nowrap}
.ult__feats p{grid-column:2;margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
@media (min-width:620px){ .ult__feats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px} }
@media (min-width:960px){ .ult__feats{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:44px;margin-top:96px} .ult__feats li{padding:22px 0 26px} }
@media (min-width:1220px){ .ult__feats{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px} }

/* ---------- gombok ---------- */
.ult__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;margin-top:52px}
.ult__cta .btn:hover .btn__ic{transform:translateX(3px)}
.ult__incl{white-space:nowrap;transform:rotate(-2deg)}
@media (max-width:519px){ .ult__cta .btn--ink{flex:1 1 100%} }

@keyframes ultPop{0%{transform:scale(.3)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes ultBlink{to{opacity:.3}}
@keyframes ultWarn{to{transform:scale(1.18)}}
@keyframes ultBack{0%{transform:scale(.85);opacity:.3}60%{transform:scale(1.04);opacity:1}100%{transform:none}}
@keyframes ultIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ultScan{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .ult__plan .warn.on,.ult__card.is-on .ult__scan{animation:none}
  .ult__stage.is-live .ult__plan .wall{stroke-dashoffset:0}
}