/* Mobil-first styly pro svatební oznámení */
:root{
  --bg1:#F6F0E6; /* béžová */
  --bg2:#E9F3EA; /* světle zelená */
  --accent:#6AA96A; /* zelená akcent */
  --muted:#6B6B5E; /* tmavší text */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{
  background: #ffffff;
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden; /* skrýt posuv při modal */
  min-height:100vh;
}
/* overlay / modal */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,8,23,0.6);z-index:1000}
.pw-dialog{background:white;padding:18px;border-radius:12px;max-width:360px;width:92%;box-shadow:0 12px 30px rgba(2,8,23,0.45);text-align:center}
.pw-dialog h2{margin:0 0 8px;font-size:18px}
.pw-dialog p{margin:0 0 12px;color:#333}
#pw-form{display:flex;gap:8px;align-items:center}
#pw-input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #ddd;font-size:16px}
#pw-form button{padding:10px 12px;border-radius:10px;border:none;background:var(--accent);color:#222;font-weight:600}
.hint{font-size:12px;color:#666;margin-top:8px}

/* Stránka */
.page{display:flex;align-items:center;justify-content:center;padding:18px 12px;height:100vh}
/* Card removed: transparent container (image is hlavní) */
.card{background:transparent;border-radius:0;padding:0;max-width:420px;width:100%;box-shadow:none;text-align:center}
/* Image as the main element */
#invite, .card img#invite, .invite-img{width:100%;height:auto;border-radius:0;display:block;background:transparent;box-shadow:none;object-fit:contain;cursor:pointer;transition:opacity 600ms ease, transform 600ms ease}

/* Delayed image that will be inserted after a timeout */
.delayed-insert{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.98);max-width:420px;width:90%;opacity:0;pointer-events:none;transition:opacity 600ms ease, transform 600ms ease;z-index:50}
.delayed-insert.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Draggable styles for pozvanka-oslava */
.draggable{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:420px;width:90%;cursor:grab;touch-action:none;pointer-events:auto;z-index:60;transition:box-shadow 160ms ease, transform 160ms ease}
.draggable.dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.02);box-shadow:0 24px 46px rgba(12,18,30,0.25);transition:none}
.draggable img, .draggable svg{display:block;max-width:100%;height:auto}

/* Prevent accidental selection while dragging */
.draggable, .draggable *{user-select:none;-webkit-user-drag:none}
#invite{width:100%;height:auto;border-radius:0;display:block}

/* Click hearts (větší srdíčka na kliknutí) */
.click-heart{position:absolute;pointer-events:none;z-index:9999;width:72px;height:72px;transform:translate(-50%,-50%) scale(0.95);display:block}
@keyframes clickHeartRise{0%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(0.9)}100%{opacity:0;transform:translate(-50%,-200%) translateY(-160px) scale(1.2)}}
.click-heart{animation:clickHeartRise 1200ms cubic-bezier(.2,.9,.3,1) forwards}

/* Inline SVG tuning (fallback) */
.card svg{width:100%;height:auto;border-radius:0;display:block;box-shadow:none;overflow:visible}
.caption{margin-top:10px;color:var(--accent);font-size:14px;text-align:center}
.click-count{margin-top:8px;font-size:13px;color:var(--muted);opacity:0.95;text-align:center}
.click-count .click-label{font-size:13px;color:var(--muted)}
.click-count .click-number{font-weight:800;display:block;font-size:28px;color:var(--accent);margin-top:6px}
.count-pop{animation:countPop .34s ease}
@keyframes countPop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}

/* canvas pro ohnostroj */
#fireworks-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}

/* malé dekorativní animace */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.card{animation:floaty 6s ease-in-out infinite}

/* shake při chybě hesla */
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}}
.shake{animation:shake .6s}

/* Responsivita */
@media(min-width:600px){body{overflow:auto}}