/* OnlyYes — pozvánka. Telefon na celou obrazovku (na počítači „telefon“ nad rozmazanou fotkou).
   Nadpisy: Anton verzálky + klíčové slovo v kurzívě Bodoni Moda. Text vlevo, tlačítka dole u palce. */
.oy{
  --bg:#fbe9ef; --card:#fffafb; --ink:#2a0717; --soft:#87606f; --accent:#ec1f5d; --accent-deep:#c8124a;
  --accent-soft:#f9c4d4; --line:#f0d8e0; --chip:#fdf0f4; --paper:#fffdf8;
  --display:"Anton", "Impact", "Arial Narrow", sans-serif;
  --serif:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  position:relative; min-height:100vh; min-height:100svh; box-sizing:border-box; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; display:flex; align-items:center; justify-content:center; padding:24px;
}
.oy[data-theme="wine"]{ --bg:#22070f; --card:#33091c; --ink:#fdeaf1; --soft:#d5a3b6; --accent:#ff4d86; --accent-deep:#ff77a3; --accent-soft:#6d2445; --line:#4f1631; --chip:#41102a; --paper:#fff6f0 }
.oy[data-theme="night"]{ --bg:#0c0f22; --card:#151a36; --ink:#f2eefe; --soft:#aaa3cc; --accent:#ff5d8f; --accent-deep:#ff86ab; --accent-soft:#4a3a6e; --line:#29305a; --chip:#1e2348; --paper:#fffaf3 }
.oy *{box-sizing:border-box}

/* pozadí: rozmazaná fotka (jen mimo vložení) */
.oy-backdrop{position:fixed; inset:0; overflow:hidden; z-index:0}
.oy-backdrop img{width:100%; height:100%; object-fit:cover; filter:blur(28px) saturate(1.15); transform:scale(1.15); opacity:.55}
.oy-backdrop::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 70% at 50% 40%, transparent, var(--bg) 90%), color-mix(in srgb, var(--bg) 35%, transparent)}

/* list = telefon */
.oy-sheet{position:relative; z-index:1; width:100%; max-width:430px; height:min(860px, calc(100svh - 48px)); min-height:620px;
  background:var(--card); border-radius:34px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(60,0,25,.5), 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent)}
.oy-sheet::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply; z-index:0;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .25 0 0 0 0 .33 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.oy[data-theme="wine"] .oy-sheet::before,.oy[data-theme="night"] .oy-sheet::before{mix-blend-mode:screen; opacity:.12}
@media (max-width:520px){
  .oy{padding:0; align-items:stretch}
  .oy-sheet{max-width:none; height:auto; min-height:100svh; border-radius:0; box-shadow:none}
  .oy-backdrop{display:none}
}

.oy-top{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 10px}
.oy-brand{display:flex; align-items:center; gap:7px; font-family:var(--display); font-size:16px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); text-decoration:none}
.oy-brand em{font-style:normal; color:var(--accent)}
.oy-brand svg{width:20px; height:20px}
.oy-count{font-family:var(--display); font-size:14px; letter-spacing:.06em; color:var(--soft); font-variant-numeric:tabular-nums}
.oy-bar{position:relative; z-index:2; height:3px; margin:0 22px; background:var(--line); border-radius:3px; overflow:hidden}
.oy-bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* obsah kroku: text nahoře, akce dole */
.oy-card{position:relative; z-index:1; flex:1; display:flex; flex-direction:column; overflow-x:hidden; overflow-y:auto}
.oy-step{flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:26px 22px 22px; animation:oyIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes oyIn{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}
.oy-body{display:flex; flex-direction:column; gap:14px}
.oy-actions{display:flex; flex-direction:column; align-items:stretch; gap:12px}
.oy-num{position:absolute; right:14px; top:-6px; font-family:var(--display); font-size:150px; line-height:1; color:var(--accent); opacity:.07; pointer-events:none; letter-spacing:-.02em}

.oy-eyebrow{align-self:flex-start; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--accent);
  border:1.5px solid currentColor; border-radius:999px; padding:5px 11px}
.oy h1{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(40px,11vw,54px); line-height:1.04; letter-spacing:.005em; margin:0; color:var(--ink); text-wrap:balance; overflow-wrap:anywhere}
.oy h1 em{font-family:var(--serif); font-style:italic; font-weight:500; text-transform:none; color:var(--accent); font-size:1.05em; letter-spacing:-.01em; line-height:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 30 2, 60 9, 118 3' fill='none' stroke='%23ec1f5d' stroke-width='2.4' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") left 92%/100% .22em no-repeat; padding-bottom:.08em}
.oy-sub{color:var(--soft); margin:0; font-size:16px; line-height:1.5; max-width:34ch}

/* tlačítka */
.oy-btn{font:inherit; font-weight:800; font-size:14px; letter-spacing:.08em; text-transform:uppercase; border:0; cursor:pointer; border-radius:999px;
  padding:17px 26px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  box-shadow:0 14px 26px -14px var(--accent); transition:transform .25s, background .2s}
.oy-btn:hover{background:var(--accent-deep)}
.oy-btn:active{transform:scale(.98)}
.oy-btn svg{width:17px; height:17px; flex:none}
.oy-btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
.oy-btn.wide{width:100%}
.oy-btn[disabled]{background:var(--accent-soft); color:color-mix(in srgb, var(--card) 85%, var(--accent)); box-shadow:none; cursor:not-allowed}
.oy-btn:focus-visible,.oy-chip:focus-visible,.oy-day:focus-visible,.oy-time:focus-visible,.oy-link:focus-visible{outline:3px solid var(--accent-soft); outline-offset:3px}

/* otázka s utíkajícím Ne */
.oy-choice{display:flex; gap:12px; align-items:center; min-height:58px}
.oy-yes{flex:1; transform-origin:center; font-size:16px; padding-block:19px}
.oy-no{min-width:110px; touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; z-index:5; white-space:nowrap; background:var(--card);
  transition:left .28s cubic-bezier(.3,1.4,.5,1), top .28s cubic-bezier(.3,1.4,.5,1)}
.oy-no.free{position:absolute; margin:0}
.oy-sticker{align-self:center; font-size:12.5px; font-weight:700; color:var(--ink); background:var(--paper); border:1px dashed var(--accent-soft); padding:7px 12px; border-radius:10px; transform:rotate(-2deg); box-shadow:0 6px 14px -10px rgba(60,0,25,.4)}
.oy[data-theme="wine"] .oy-sticker,.oy[data-theme="night"] .oy-sticker{color:#2a1a20}
.oy-link{align-self:center; font:inherit; font-size:12px; color:var(--soft); background:none; border:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px}

/* obálka */
.oy-stamp{align-self:flex-start; font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--accent); border:2px solid var(--accent); padding:6px 10px; border-radius:6px; transform:rotate(-4deg); opacity:.85}
.oy-envwrap{align-self:center; margin:6px 0 4px; animation:oyBob 3.2s ease-in-out infinite}
.oy-env{width:190px; height:178px; display:block; overflow:visible; filter:drop-shadow(0 18px 22px rgba(90,10,40,.18))}
@keyframes oyBob{50%{transform:translateY(-5px) rotate(-2deg)}}
.oy-flap{transform-box:fill-box; transform-origin:50% 0; transition:transform .22s ease-in}
.oy-flap-open{transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0); transition:transform .28s .2s cubic-bezier(.2,.9,.3,1.2)}
.oy-letter{transition:transform .55s .42s cubic-bezier(.2,.9,.25,1.1)}
.oy-envwrap.open{animation:none}
.oy-envwrap.open .oy-flap{transform:scaleY(0)}
.oy-envwrap.open .oy-flap-open{transform:scaleY(1)}
.oy-envwrap.open .oy-letter{transform:translateY(-46px)}

/* polaroid v otázce */
.oy-polaroid{align-self:center; margin:14px 0 0; width:min(200px,58%); background:#fff; padding:9px 9px 0; border-radius:3px; transform:rotate(-4deg);
  box-shadow:0 18px 30px -18px rgba(60,0,25,.55), 0 0 0 1px rgba(0,0,0,.04)}
.oy-polaroid img{width:100%; aspect-ratio:1; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02)}
.oy-polaroid figcaption{font-family:var(--serif); font-style:italic; font-size:20px; color:#3b2430; text-align:center; padding:8px 0 10px}
@media (max-height:700px){ .oy-polaroid{display:none} }

/* termín: dny a časy jako dlaždice */
.oy-label{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-top:6px}
.oy-days{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; margin:0 -22px; padding:2px 22px 6px; scrollbar-width:none}
.oy-days::-webkit-scrollbar{display:none}
.oy-day{position:relative; flex:none; scroll-snap-align:start; font:inherit; cursor:pointer; width:64px; padding:10px 0 11px; border-radius:16px; border:1.5px solid var(--line); background:var(--chip); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:2px}
.oy-day small{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.oy-day b{font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.02em}
.oy-day[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.oy-day[aria-pressed="true"] small{color:#ffe1ea}
.oy-day.other{width:auto; min-width:64px; padding-inline:12px}
.oy-day.other input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.oy-times{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.oy-time{font:inherit; font-family:var(--display); font-size:19px; letter-spacing:.02em; cursor:pointer; padding:12px 6px; border-radius:14px; border:1.5px solid var(--line); background:var(--chip); color:var(--ink)}
.oy-time.any{grid-column:1/-1; font-family:var(--serif); font-style:italic; font-size:17px; letter-spacing:0}
.oy-time[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}

/* jídlo */
.oy-chips{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px}
.oy-chip{font:inherit; text-align:left; display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0; background:var(--chip); border:1.5px solid var(--line); border-radius:16px; padding:13px 12px; color:var(--ink); transition:border-color .15s, background .15s}
.oy-chip span{font-size:22px; line-height:1}
.oy-chip b{font-weight:700; font-size:14.5px; line-height:1.25}
.oy-chip[aria-pressed="true"]{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow:inset 0 0 0 1px var(--accent)}

/* potvrzení */
.oy-s-confirm h1{font-size:clamp(34px,9vw,44px)}
.oy-s-confirm h1 em{display:inline; font-size:.9em; line-height:1.15}
.oy-pickup{display:flex; gap:8px; align-items:center}
.oy-pickup svg{width:20px; height:20px; color:var(--accent); flex:none}
.oy-note{align-self:flex-start; max-width:92%; background:var(--paper); color:#3b2430; font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.45; padding:14px 16px; border-radius:4px;
  transform:rotate(-1.5deg); box-shadow:0 10px 20px -14px rgba(60,0,25,.5); border-left:3px solid var(--accent)}
.oy-note b{font-family:var(--display); font-style:normal; font-weight:400; color:var(--accent); letter-spacing:.04em; margin-right:4px}

/* účtenka */
.oy-receipt{align-self:center; width:100%; max-width:330px; background:var(--paper); color:#2a1a20; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:13px;
  padding:18px 18px 24px; border-radius:6px 6px 0 0; box-shadow:0 14px 28px -18px rgba(40,0,15,.55); transform:rotate(.6deg);
  -webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/14px 100%; mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/14px 100%}
.oy-rhead{text-align:center; font-weight:700; letter-spacing:.12em; border-bottom:1px dashed #c9b7be; padding-bottom:10px; margin-bottom:10px}
.oy-receipt dl{margin:0; display:flex; flex-direction:column; gap:7px}
.oy-receipt dl div{display:flex; gap:12px; align-items:baseline; justify-content:space-between}
.oy-receipt dt{white-space:nowrap}
.oy-receipt dd{margin:0; text-align:right; font-weight:700; overflow-wrap:anywhere}
.oy-receipt .total{border-top:1px dashed #c9b7be; padding-top:10px; margin-top:4px; font-size:15px}
.oy-receipt .total dd{color:#c8124a}
.oy-barcode{height:34px; margin:14px auto 6px; width:80%; background:repeating-linear-gradient(90deg, #2a1a20 0 2px, transparent 2px 4px, #2a1a20 4px 5px, transparent 5px 8px, #2a1a20 8px 11px, transparent 11px 12px)}
.oy-rfoot{text-align:center; font-size:11.5px; color:#7b6870}

/* hotovo */
.oy-bigheart{color:var(--accent); width:84px; height:84px; animation:oyBeat 1.4s ease-in-out infinite}
.oy-bigheart svg{width:100%; height:100%}
@keyframes oyBeat{0%,100%{transform:scale(1)} 15%{transform:scale(1.15)} 30%{transform:scale(1)} 45%{transform:scale(1.1)}}

.oy-foot{position:relative; z-index:2; text-align:center; font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); padding:0 0 14px}
.oy-foot a{color:inherit; text-decoration:none}
.oy-foot b{color:var(--accent)}
.oy-fx{position:fixed; inset:0; pointer-events:none; z-index:50; width:100%; height:100%}

/* vložení na webu (náhledy v telefonech) */
.oy-embed{padding:0; align-items:stretch; min-height:100vh}
.oy-embed .oy-sheet{max-width:none; height:auto; min-height:100vh; border-radius:0; box-shadow:none}
.oy-embed .oy-top .oy-brand,.oy-embed .oy-foot{visibility:hidden}

@media (prefers-reduced-motion: reduce){ .oy-step,.oy-envwrap,.oy-bigheart{animation:none} .oy-no,.oy-flap,.oy-flap-open,.oy-letter{transition:none} }
.oy-s-env .oy-body{flex:1; justify-content:center}
.oy-s-env .oy-env{width:230px; height:215px}
.oy-s-done .oy-body{flex:1; justify-content:center}
.oy-s-decline .oy-body{flex:1; justify-content:center}

/* lehčí typografie pozvánky (Karel 7. 10.: Anton je v pozvánce těžkopádný) — Anton zůstává jen v logu */
.oy h1{font-family:var(--serif); font-weight:500; text-transform:none; font-size:clamp(38px,10.4vw,50px); line-height:1.06; letter-spacing:-.018em}
.oy h1 em{font-size:1em; font-weight:400; letter-spacing:-.01em}
.oy-s-confirm h1{font-size:clamp(32px,8.6vw,42px)}
.oy-num{font-family:var(--serif); font-style:italic; font-weight:400; font-size:130px; top:4px; opacity:.08}
.oy-count{font-family:var(--body); font-weight:800; font-size:12px; letter-spacing:.14em}
.oy-stamp{font-family:var(--body); font-weight:800; font-size:11px; letter-spacing:.18em}
.oy-day b{font-family:var(--body); font-weight:800; font-size:16px; letter-spacing:0}
.oy-time{font-family:var(--body); font-weight:700; font-size:16px; letter-spacing:0; font-variant-numeric:tabular-nums}
.oy-note b{font-family:var(--body); font-weight:800; font-size:13px; letter-spacing:.1em}
.oy [hidden]{display:none!important}

.oy-brand{font-family:var(--serif); text-transform:none; font-size:18px; font-weight:600; letter-spacing:-.01em}
.oy-brand em{font-style:italic; font-weight:500}

/* Ne drží bílou výplň (ne průhlednou); Ano se raduje při každém uskočení Ne */
.oy-btn.oy-no{background:#fff; color:#2a0d1b; box-shadow:inset 0 0 0 1.5px var(--accent-soft), 0 10px 22px -14px rgba(60,0,25,.5)}
.oy-yes{position:relative; overflow:visible; transform:scale(var(--s,1)); transition:transform .35s cubic-bezier(.3,1.5,.5,1), background .2s}
.oy-yes::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 var(--accent); opacity:0}
.oy-yes.cheer{animation:oyCheer .6s cubic-bezier(.3,1.5,.5,1)}
.oy-yes.cheer::after{animation:oyRing .7s ease-out}
.oy-pop{position:absolute; left:50%; top:0; font-size:20px; color:var(--accent); pointer-events:none; animation:oyPop .95s ease-out forwards}
@keyframes oyCheer{0%{transform:scale(var(--s,1))} 30%{transform:scale(calc(var(--s,1) * 1.16)) rotate(-4deg)} 60%{transform:scale(calc(var(--s,1) * .97)) rotate(3deg)} 100%{transform:scale(var(--s,1))}}
@keyframes oyRing{0%{opacity:.55; box-shadow:0 0 0 0 var(--accent)} 100%{opacity:0; box-shadow:0 0 0 16px var(--accent)}}
@keyframes oyPop{0%{transform:translate(-50%,0) scale(.4); opacity:0} 20%{opacity:1} 100%{transform:translate(calc(-50% + var(--dx,0px)),-56px) scale(1.2); opacity:0}}
@media (prefers-reduced-motion:reduce){ .oy-yes.cheer,.oy-yes.cheer::after,.oy-pop{animation:none} }
/* ikony jídel (kreslené SVG místo emoji) */
.oy-fi{display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:12px; background:var(--accent-soft); color:var(--accent)}
.oy-fi svg{width:22px; height:22px}
.oy-chip[aria-pressed="true"] .oy-fi{background:var(--accent); color:#fff}
/* P.S. lísteček níž a víc doprava */
.oy-s-confirm .oy-note{align-self:flex-end; margin-top:28px; margin-right:-4px; transform:rotate(2deg)}