/*
VOICE   Šilta, žaisminga, tikroviška – kaip Kalėdų vakaras trobelėje.
IDEA    Tikra nuotrauka + gyvos smulkmenos: kibirkštys, garai, ugnies šviesa, oro pašto juostelė.
PICTURE Senelio nuotrauka per visą ekraną; kompiuterio ekranas – pagrindinis mygtukas.
COLOUR  Gili naktis ir žvakių auksas; oro pašto raudona ir mėlyna kaip akcentas.
TYPE    Fredoka antraštėms ir burbului, Nunito tekstui.
*/
:root{
  --night:#120b06; --gold:#ffcf6e; --cream:#fff6e4; --ink:#12244a;
  --red:#e2403f; --blue:#4f86e0; --glass:rgba(18,11,6,.55);
  --screen-x:50%; --screen-y:62%; --screen-w:46%; --screen-h:15%;
  --steam-x:78%; --steam-y:63%;
}
*{box-sizing:border-box;min-width:0}
html,body{margin:0;height:100%;background:var(--night);color:var(--cream);
  font:16px/1.4 Nunito,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}
button,a{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.backdrop{position:fixed;inset:0;background:radial-gradient(circle at 30% 40%,#3a1d0c,#120b06 70%);filter:blur(30px);transform:scale(1.1)}
.app{position:relative;margin:0 auto;width:100%;max-width:480px;height:100dvh;overflow:hidden;
  box-shadow:0 0 80px rgba(0,0,0,.6)}

/* ---------- Scena ---------- */
.scene{position:absolute;inset:0;transition:filter 1.6s ease}
.photo-blur{position:absolute;inset:-40px;background-size:cover;background-position:center 80%;filter:blur(26px) brightness(.4) saturate(1.1)}
.photo{position:absolute;left:0;right:0;top:0;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:
    radial-gradient(circle at 50% 66%,rgba(255,240,210,.55) 0 9%,transparent 22%),
    radial-gradient(circle at 8% 70%,rgba(255,120,40,.55),transparent 38%),
    radial-gradient(circle at 88% 42%,rgba(255,200,110,.45),transparent 26%),
    radial-gradient(circle at 82% 30%,#ffd27a 0 .5%,transparent 1.2%),
    radial-gradient(circle at 90% 36%,#ff8a7a 0 .5%,transparent 1.2%),
    radial-gradient(circle at 78% 46%,#fff0a8 0 .5%,transparent 1.2%),
    radial-gradient(circle at 92% 52%,#ffd27a 0 .5%,transparent 1.2%),
    radial-gradient(circle at 20% 22%,rgba(170,200,255,.25),transparent 18%),
    radial-gradient(circle at 50% 110%,#5a3015,transparent 50%),
    linear-gradient(#2a170b,#1a0e07 60%,#3a2010)}
.placeholder .ph-title{font:600 18px Fredoka,sans-serif;color:rgba(255,246,228,.75);margin-top:-30%}
.placeholder .ph-sub{font-size:13px;color:rgba(255,246,228,.5)}
.has-photo .placeholder{display:none}
.firelight{position:absolute;inset:0;background:radial-gradient(circle at 0% 72%,rgba(255,110,30,.35),transparent 45%);
  mix-blend-mode:screen;animation:flicker 3.2s infinite}
@keyframes flicker{0%,100%{opacity:.8}18%{opacity:.55}35%{opacity:.95}60%{opacity:.65}80%{opacity:.9}}
.sparkles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(10,6,3,.75),transparent 26%,transparent 62%,rgba(10,6,3,.88))}
.steam{position:absolute;left:var(--steam-x);top:var(--steam-y);width:7%;transform:translate(-50%,-100%);
  fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-linecap:round;filter:blur(1.5px)}
.steam path{stroke-dasharray:20 120;animation:steam 3.4s linear infinite}
.steam path+path{animation-delay:-1.7s}
@keyframes steam{from{stroke-dashoffset:140;opacity:0}20%{opacity:1}to{stroke-dashoffset:0;opacity:0}}

/* Vokas įskrenda į kompiuterį */
.envelope{position:absolute;left:var(--hand-x);top:var(--hand-y);width:58px;opacity:0;pointer-events:none;transform-origin:50% 50%;
  filter:drop-shadow(0 3px 4px rgba(40,20,5,.45)) drop-shadow(0 0 6px rgba(255,230,170,.35))}
.envelope svg{display:block;width:100%}
/* Vokas atskrenda ir nusileidžia tiesiai Seneliui į rankas – to paties dydžio ir kampo kaip lapas,
   pabūna rankose, tada „atsiskleidžia“ į lapą su užrašu */
/* Laiškas atskrenda ir „įsigeria“ į popierių Senelio rankose */
.envelope.go{animation:fly 1.5s cubic-bezier(.25,.7,.35,1) forwards}
@keyframes fly{
  0%{transform:translate(160%,-420%) rotate(26deg) scale(.6);opacity:0}
  12%{opacity:1}
  55%{transform:translate(0%,-160%) rotate(4deg) scale(.9)}
  80%{transform:translate(-50%,-50%) rotate(var(--hand-rot,0deg)) scale(.75);opacity:1}
  100%{transform:translate(-50%,-50%) rotate(var(--hand-rot,0deg)) scale(.15);opacity:0}}
.glint{position:absolute;left:var(--hand-x);top:var(--hand-y);width:120px;height:120px;transform:translate(-50%,-50%) scale(.2);
  border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,.95),rgba(255,207,110,.35) 40%,transparent 70%);opacity:0;pointer-events:none}
.glint.go{animation:glint 1.5s ease forwards}
@keyframes glint{0%,75%{opacity:0;transform:translate(-50%,-50%) scale(.2)}88%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}

/* ---------- Viršus ---------- */
.top{position:absolute;left:0;right:0;top:0;padding-top:env(safe-area-inset-top);z-index:5}
.airmail{height:8px;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,transparent 14px 20px,var(--blue) 20px 34px,transparent 34px 40px)}
.bar{display:flex;align-items:center;gap:10px;padding:12px 16px 0}
.brand{flex:1;font:600 17px Fredoka,sans-serif;color:var(--gold);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.lang{display:flex;padding:3px;border-radius:22px;background:var(--glass);backdrop-filter:blur(8px)}
.lang button{min-width:44px;height:38px;border:0;border-radius:19px;background:transparent;color:#d8cbb3;font-weight:800;font-size:14px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.round{width:44px;height:44px;border:0;border-radius:22px;background:var(--glass);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer}
.round svg{width:22px;height:22px;fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.round .off{display:none}.round[aria-pressed="false"] .on{display:none}.round[aria-pressed="false"] .off{display:block}

.bubble{position:relative;margin:14px 18px 0;padding:14px 18px;border-radius:22px;background:var(--cream);color:var(--ink);
  font:600 clamp(19px,5.6vw,24px)/1.15 Fredoka,sans-serif;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35);
  text-wrap:balance}
.bubble::after{content:"";position:absolute;left:50%;bottom:-10px;width:20px;height:20px;background:var(--cream);transform:translateX(-50%) rotate(45deg);border-radius:4px}
.bubble.pop{animation:pop .4s ease}
.app.can-write .bubble{cursor:pointer}
@keyframes pop{0%{transform:scale(.7)}70%{transform:scale(1.04)}100%{transform:none}}
.app[data-phase="sleep"] .bubble{animation:none}

/* ---------- Popierius Senelio rankose = mygtukas ---------- */
.paper-tap{position:absolute;z-index:2;left:var(--hand-x);top:var(--hand-y);width:var(--hand-w);height:var(--hand-h);
  transform:translate(-50%,-50%) rotate(var(--hand-rot,0deg));border-radius:6px;opacity:0;pointer-events:none;
  transition:opacity .8s}
.app.can-write .paper-tap{opacity:1;pointer-events:auto}
@keyframes beckon{0%,100%{box-shadow:0 0 0 0 rgba(255,214,130,0),inset 0 0 0 0 rgba(255,214,130,0)}
  50%{box-shadow:0 0 26px 6px rgba(255,214,130,.55),inset 0 0 18px 2px rgba(255,236,180,.35)}}
.paper-tap:active{background:rgba(255,236,180,.18)}

/* ---------- Apačia ---------- */
.bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 16px calc(16px + env(safe-area-inset-bottom))}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pill{position:relative;min-height:60px;border-radius:18px;background:var(--glass);backdrop-filter:blur(10px);
  border:1px solid rgba(255,207,110,.25);display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;font-weight:800;font-size:16px}
.pill svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.badge{min-width:22px;padding:1px 7px;border-radius:11px;background:var(--red);color:#fff;font-size:13px;text-align:center}
.count{margin:12px 0 0;text-align:center;font-size:15px;color:#e8dcc6;text-shadow:0 1px 6px #000}
.count b{color:var(--gold)}

/* ---------- Snaudžiantis Senelis ---------- */
.wake{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0 20px calc(28px + env(safe-area-inset-bottom));transition:opacity .6s}
.app:not([data-phase="sleep"]) .wake{opacity:0;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.zzz{position:absolute;left:var(--zzz-x,58%);top:var(--zzz-y,34%);font:700 28px Fredoka,sans-serif;color:#d9e3ff}
.zzz span{position:absolute;opacity:0;animation:zzz 3s ease-out infinite}
.zzz span:nth-child(2){animation-delay:1s;font-size:36px}.zzz span:nth-child(3){animation-delay:2s}
@keyframes zzz{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(40px,-90px);opacity:0}}
.bottom{transition:opacity .6s}

.app[data-phase="sleep"] .bottom{opacity:0;pointer-events:none}
/* Atsidarius – jokių užrašų: tik kylančios „z Z“ raidelės ir „Pažadink Senelį“ */
.brand,.bubble{transition:opacity .5s}
.app[data-phase="sleep"] .brand,.app[data-phase="sleep"] .bubble{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .app[data-phase="letter"] .envelope{opacity:0}
}

/* ---------- Pažadinimas: auksinis varpelis ---------- */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.night{position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(6,3,1,.62);
  --bx:50%;--by:calc(100% - 130px);
  -webkit-mask-image:radial-gradient(circle at var(--bx) var(--by),transparent var(--r),#000 calc(var(--r) + 120px));
  mask-image:radial-gradient(circle at var(--bx) var(--by),transparent var(--r),#000 calc(var(--r) + 120px))}
.app:not([data-phase="sleep"]) .night{animation:dawn 1.8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes dawn{from{--r:0px;opacity:1}85%{opacity:1}to{--r:1300px;opacity:0}}
.wake{justify-content:flex-end;padding-bottom:calc(36px + env(safe-area-inset-bottom))}
.bell-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;cursor:pointer;padding:0;color:var(--gold)}
.bell{position:relative;width:112px;height:auto;transform-origin:50% 18%;animation:sway 3.2s ease-in-out infinite;
  opacity:.62;filter:brightness(.92) saturate(.6) drop-shadow(0 8px 14px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(215,228,255,.16))}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.clapper{transform-box:fill-box;transform-origin:50% -300%}
/* Šviesa krenta į tą pusę, į kurią pasviręs varpelis (sinchronizuota su supimusi) */
.halo{position:absolute;top:46px;left:50%;width:150px;height:150px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(215,228,255,.26),rgba(215,228,255,0) 62%);animation:haloSway 3.2s ease-in-out infinite;pointer-events:none}
.spill{position:absolute;top:118px;left:50%;width:150px;height:46px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(215,228,255,.24),rgba(215,228,255,0) 70%);animation:spillSway 3.2s ease-in-out infinite;pointer-events:none}
@keyframes haloSway{0%,100%{transform:translateX(calc(-50% + 18px));opacity:1}25%,75%{opacity:.55}50%{transform:translateX(calc(-50% - 18px));opacity:1}}
@keyframes spillSway{0%,100%{transform:translateX(calc(-50% + 34px));opacity:1}25%,75%{opacity:.4}50%{transform:translateX(calc(-50% - 34px));opacity:1}}
.ringing .spill{opacity:0;transition:opacity .3s}
.ripple{position:absolute;top:58px;left:50%;width:120px;height:120px;margin-left:-60px;border-radius:50%;border:1px solid rgba(215,228,255,.25);opacity:0;pointer-events:none}
.bell-label{font:600 19px Fredoka,sans-serif;color:#959ca6;text-shadow:0 2px 10px rgba(0,0,0,.85)}
.ringing .bell{animation:ring 1s cubic-bezier(.36,.07,.19,.97)}
@keyframes ring{0%{transform:rotate(0)}10%{transform:rotate(28deg)}25%{transform:rotate(-24deg)}40%{transform:rotate(18deg)}55%{transform:rotate(-12deg)}70%{transform:rotate(7deg)}85%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.ringing .ripple{animation:ripple 1.2s ease-out}
.ringing .ripple.r2{animation-delay:.25s}
@keyframes ripple{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(3.2)}}
.ringing .halo{animation:flash .8s ease-out}
@keyframes flash{0%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(2.6)}}
.ringing .bell-label{opacity:0;transition:opacity .4s}

/* ---------- Laiško rašymas ---------- */
.compose{position:absolute;inset:0;z-index:8;background:rgba(8,5,2,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.compose[hidden]{display:none}
.compose-scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(64px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:40px}
/* Pergamento ritinys */
.scroll{position:relative;width:100%;max-width:400px;transform:rotate(-1.6deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.parch{position:relative;margin:-12px 16px;padding:30px 22px 26px 26px;color:#3a2414;
  background:
    linear-gradient(118deg,transparent 31%,rgba(110,70,30,.10) 31.3%,rgba(255,245,215,.18) 31.8%,transparent 32.4%),
    linear-gradient(64deg,transparent 58%,rgba(110,70,30,.09) 58.3%,rgba(255,245,215,.16) 58.8%,transparent 59.4%),
    linear-gradient(170deg,transparent 72%,rgba(110,70,30,.08) 72.3%,rgba(255,245,215,.14) 72.7%,transparent 73.2%),
    radial-gradient(ellipse at 20% 15%,rgba(150,95,40,.18),transparent 45%),
    radial-gradient(ellipse at 85% 70%,rgba(150,95,40,.22),transparent 50%),
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(120,70,25,.35) 100%),
    repeating-linear-gradient(transparent 0 33px,rgba(110,70,30,.16) 33px 34px),
    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='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg,#f1dcae,#e3c58c 55%,#d6b277);
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 70px,0 0,0 0;clip-path:var(--tear,none)}
.roll{position:relative;z-index:2;height:36px;margin:0 10px;border-radius:5px 9px 7px 4px/18px 16px 20px 17px;
  background:linear-gradient(90deg,transparent 9%,rgba(110,70,30,.08) 10%,transparent 12%,transparent 27%,rgba(255,240,205,.12) 28.5%,transparent 30%,transparent 46%,rgba(110,70,30,.06) 47%,transparent 49.5%,transparent 66%,rgba(255,240,205,.1) 67%,transparent 68%,transparent 83%,rgba(110,70,30,.07) 84.5%,transparent 86%),linear-gradient(#9c6d34,#e9cf9c 30%,#f6e3b8 45%,#d9b77c 70%,#9c6d34);
  box-shadow:inset 0 -3px 4px rgba(80,50,20,.3),inset 0 2px 2px rgba(255,246,220,.35)}
.roll::before,.roll::after{content:"";position:absolute;top:-7px;width:32px;height:50px;background:center/contain no-repeat}
.roll::after{right:-23px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 50'%3E %3Cdefs%3E%3CradialGradient id='g' cx='.45' cy='.4' r='.75'%3E%3Cstop offset='0' stop-color='%23f6e3b8'/%3E%3Cstop offset='.55' stop-color='%23ddbb7e'/%3E%3Cstop offset='1' stop-color='%23946530'/%3E%3C/radialGradient%3E %3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23d4b073'/%3E%3Cstop offset='1' stop-color='%237d5426'/%3E%3C/linearGradient%3E %3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='4.5'/%3E%3C/filter%3E%3C/defs%3E %3Cg filter='url(%23w)'%3E %3Cpath d='M1 7 C10 2 22 2 29 8 C35 16 34 34 28 42 C22 48 11 48 1 44 L4 38 L0 32 L3 25 L0 18 L4 12Z' fill='url(%23t)'/%3E %3Cpath d='M18 5 C29 6 30 22 28 34 C27 43 22 46 16 45 C8 43 6 34 7 24 C8 12 11 5 18 5Z' fill='url(%23g)'/%3E %3Cpath d='M18 8 C27 10 27 38 17 41 C10 39 10 15 18 14 C24 16 23 34 17 35 C13 33 13 21 18 20 C21 22 20 30 17 30' fill='none' stroke='%237d5426' stroke-width='1.3' stroke-linecap='round' opacity='.8'/%3E %3Cpath d='M10 12 C8 20 8 30 10 37' fill='none' stroke='%23fff6dc' stroke-width='1.4' opacity='.5' stroke-linecap='round'/%3E %3C/g%3E%3C/svg%3E")}
.roll::before{left:-23px;transform:scaleX(-1) rotate(4deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 50'%3E %3Cdefs%3E%3CradialGradient id='g' cx='.45' cy='.4' r='.75'%3E%3Cstop offset='0' stop-color='%23f6e3b8'/%3E%3Cstop offset='.55' stop-color='%23ddbb7e'/%3E%3Cstop offset='1' stop-color='%23946530'/%3E%3C/radialGradient%3E %3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23d4b073'/%3E%3Cstop offset='1' stop-color='%237d5426'/%3E%3C/linearGradient%3E %3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='4.5'/%3E%3C/filter%3E%3C/defs%3E %3Cg filter='url(%23w)'%3E %3Cpath d='M1 6 C12 1 23 3 30 10 C35 19 33 35 27 43 C21 49 9 47 1 43 L3 36 L0 30 L4 22 L1 15Z' fill='url(%23t)'/%3E %3Cpath d='M18 5 C29 6 30 22 28 34 C27 43 22 46 16 45 C8 43 6 34 7 24 C8 12 11 5 18 5Z' fill='url(%23g)'/%3E %3Cpath d='M17 9 C26 12 25 37 16 40 C9 37 11 16 18 15 C23 18 22 33 16 34 C13 31 14 22 18 22' fill='none' stroke='%237d5426' stroke-width='1.3' stroke-linecap='round' opacity='.8'/%3E %3Cpath d='M10 12 C8 20 8 30 10 37' fill='none' stroke='%23fff6dc' stroke-width='1.4' opacity='.5' stroke-linecap='round'/%3E %3C/g%3E%3C/svg%3E")}
.roll.top{transform:rotate(-.6deg)}.roll.bottom{transform-origin:50% 50%}
.seal{position:absolute;left:50%;top:-30px;width:86px;transform:translateX(-50%) rotate(-6deg);z-index:3;
  filter:drop-shadow(0 4px 5px rgba(40,10,5,.5))}
.compose.open .scroll{animation:scrollIn .45s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes scrollIn{from{transform:translateY(60%) rotate(-10deg);opacity:0}to{transform:rotate(-1.6deg);opacity:1}}
.x{position:absolute;top:14px;right:4px;z-index:2;width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.x svg{width:20px;height:20px;fill:none;stroke:#7a5a38;stroke-width:2.4;stroke-linecap:round}
.dear{margin:0 0 6px;font:700 31px/34px Caveat,cursive;color:#7a1218}
#letterText{display:block;width:100%;min-height:272px;border:0;background:transparent;resize:none;padding:0;margin:0;
  font:700 26px/34px Caveat,cursive;color:#1e1007;outline:none;text-shadow:0 0 .4px rgba(30,16,7,.6)}
#letterText::placeholder{color:rgba(80,50,20,.4)}
.links{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.links li{display:flex;align-items:center;gap:5px;max-width:100%;padding:2px 2px 2px 9px;border-radius:999px;background:rgba(255,248,230,.55);border:1px dashed rgba(122,80,40,.45);font:700 13px Nunito,sans-serif;color:#3b2a18}
.links li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.links li svg{width:14px;height:14px;flex:none;fill:none;stroke:#a3252b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.links li button{width:30px;height:30px;border:0;background:none;cursor:pointer;color:#7a5a38;font-size:17px;line-height:1}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.add{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;border:1.5px dashed rgba(142,31,38,.5);background:rgba(255,248,230,.25);color:#8e1f26;font:700 15px Nunito,sans-serif;cursor:pointer}
.add svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.counter{font:700 13px Nunito,sans-serif;color:#7a5a38;white-space:nowrap}
.counter.near{color:#a3252b}
.send{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;min-height:62px;border-radius:20px;
  border:1px solid rgba(215,228,255,.35);background:rgba(20,14,10,.6);backdrop-filter:blur(10px);color:#d8dde4;
  font:600 22px Fredoka,sans-serif;cursor:pointer}
.send svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.send:active{background:rgba(215,228,255,.12)}
.compose.open .send{animation:fadeUp .5s .25s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.linkbox{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,5,2,.55)}
.linkbox[hidden]{display:none}
.linkcard{width:100%;max-width:380px;padding:20px;border-radius:18px;background:#f8f2e4;color:#2b2016;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lt-title{margin:0;font:600 20px Fredoka,sans-serif}
.lt-sub{margin:4px 0 12px;font:600 14px Nunito,sans-serif;color:#7a6a58}
#linkInput{width:100%;min-height:48px;padding:0 14px;border-radius:12px;border:1.5px solid #d6c8ad;background:#fff;font:600 16px Nunito,sans-serif;color:#2b2016}
#linkInput:focus{outline:2px solid #a3252b;outline-offset:1px}
.lt-err{min-height:18px;margin:6px 0 4px;font:700 13px Nunito,sans-serif;color:#a3252b}
.lt-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.ghost,.solid{min-height:44px;padding:0 14px;border-radius:12px;font:700 15px Nunito,sans-serif;cursor:pointer}
.ghost{border:1.5px solid #d6c8ad;background:transparent;color:#5a4a38}
.solid{border:0;background:#2b2016;color:#f8f2e4}

/* Neryškios apvalios bangelės ten, kur įkrenta laiškas – rodo, kur spausti */
.ripples{position:absolute;inset:0;pointer-events:none;z-index:2}
.rip{position:absolute;left:var(--hand-x);top:var(--hand-y);width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;
  border:2px solid rgba(236,196,110,.5);box-shadow:0 0 8px rgba(255,220,150,.25),inset 0 0 6px rgba(255,220,150,.15),0 0 0 1px rgba(80,45,10,.12);opacity:0;animation:rip 2.2s ease-out forwards}
@keyframes rip{0%{transform:scale(.25);opacity:0}15%{opacity:.9}100%{transform:scale(3.2);opacity:0}}

/* ---------- „Laiškas išsiųstas“ kortelė ---------- */
.sentcard{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,5,2,0);cursor:pointer}
.sentcard[hidden]{display:none}
.note{position:relative;width:100%;max-width:320px;padding:50px 26px 24px;text-align:center;color:#3a2414;transform:rotate(-2deg);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
.note::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;clip-path:var(--tear,none);
  background:
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(120,70,25,.35) 100%),
    linear-gradient(170deg,#f3e0b4,#e3c58c 60%,#d6b277)}
@keyframes noteIn{from{transform:translateY(30px) rotate(-8deg) scale(.85);opacity:0}to{transform:rotate(-2deg);opacity:1}}
.note-seal{position:absolute;left:50%;top:-40px;z-index:1;width:78px;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 4px 5px rgba(40,10,5,.5))}
.note-seal svg{display:block;width:100%}
.note-t{margin:0 0 6px;font:700 34px/1 Caveat,cursive;color:#7a1218}
.note-b{margin:0;font:700 25px/1.25 Caveat,cursive;color:#1e1007;white-space:pre-line}
.note-hint{margin:14px 0 0;font:600 12px Nunito,sans-serif;color:#8a6a48}
.app.sent .bubble{opacity:0;pointer-events:none}

/* ---------- Mano dėžutė ---------- */
.badge[hidden]{display:none}
.pill.glow{animation:pillGlow 1.2s ease-out}
@keyframes pillGlow{0%{box-shadow:0 0 0 0 rgba(255,214,130,.0)}30%{box-shadow:0 0 22px 6px rgba(255,214,130,.55)}100%{box-shadow:0 0 0 0 rgba(255,214,130,0)}}
.fly-env{position:absolute;z-index:6;width:54px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(40,20,5,.45)) drop-shadow(0 0 8px rgba(255,230,170,.45))}
.fly-env svg{display:block;width:100%}
.box{position:absolute;inset:0;z-index:8;background:rgba(8,5,2,.55);display:flex;align-items:flex-end}
.box[hidden]{display:none}
.box-panel{width:100%;max-height:88%;overflow-y:auto;padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;
  background:linear-gradient(#24170d,#160e07);border-top:1px solid rgba(255,207,110,.25);box-shadow:0 -20px 40px rgba(0,0,0,.5);animation:panelUp .4s cubic-bezier(.2,.9,.3,1) both}
@keyframes panelUp{from{transform:translateY(100%)}to{transform:none}}
.box-head{display:flex;align-items:center;justify-content:space-between}
.box-head h2{margin:0;font:600 22px Fredoka,sans-serif;color:var(--gold)}
.x2{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.x2 svg{width:20px;height:20px;fill:none;stroke:#c9bba3;stroke-width:2.4;stroke-linecap:round}
.track{display:flex;align-items:center;margin:14px 4px 0}
.track i{flex:none;width:14px;height:14px;border-radius:50%;background:#3a2a1a;border:2px solid #5a4630}
.track i.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(255,207,110,.6)}
.track b{flex:1;height:2px;background:#3a2a1a}
.track b.on{background:linear-gradient(90deg,var(--gold),#c99a3e)}
.track-now{margin:10px 0 4px;font:700 15px Nunito,sans-serif;color:#f1e4c8}
.msgs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.msgs button{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;border-radius:16px;cursor:pointer;text-align:left;
  background:linear-gradient(160deg,#f3e0b4,#e2c48b);border:0;color:#3a2414;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.msgs .ic{flex:none;width:40px}
.msgs .ic svg{display:block;width:100%}
.msgs .tx{flex:1;min-width:0}
.msgs .tt{display:block;font:700 22px/1.05 Caveat,cursive;color:#1e1007}
.msgs .tm{display:block;font:600 12.5px Nunito,sans-serif;color:#7a5a38}
.msgs .nw{flex:none;padding:2px 8px;border-radius:10px;background:#7a1218;color:#fff2e0;font:800 12px Nunito,sans-serif}
.msgs .santa button{background:linear-gradient(160deg,#fff1c9,#e9c779 60%,#d8ad55);box-shadow:0 0 16px rgba(255,214,130,.45),0 4px 10px rgba(0,0,0,.35)}
.box-empty{margin:14px 0 0;font:600 15px Nunito,sans-serif;color:#b9a888}
.box-empty[hidden]{display:none}
.box-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ghost2{flex:1 1 140px;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,207,110,.3);background:rgba(255,255,255,.04);color:#e8dcc6;font:700 15px Nunito,sans-serif;cursor:pointer}
.demo-note{margin:14px 0 0;font:600 12.5px Nunito,sans-serif;color:#8a7a62;text-align:center}
/* Skaitymas */
.reader{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:56px 18px 24px;background:rgba(8,5,2,.6);overflow-y:auto}
.reader[hidden]{display:none}
.rd{position:relative;width:100%;max-width:380px;margin:auto;padding:54px 24px 26px 26px;color:#1e1007;transform:rotate(-1.5deg);filter:drop-shadow(0 20px 30px rgba(0,0,0,.55));animation:noteIn2 .5s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes noteIn2{from{transform:translateY(40px) rotate(-7deg) scale(.9);opacity:0}to{transform:rotate(-1.5deg);opacity:1}}
.rd::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--tear,none);
  background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(120,70,25,.35) 100%),repeating-linear-gradient(transparent 0 33px,rgba(110,70,30,.14) 33px 34px),linear-gradient(170deg,#f3e0b4,#e3c58c 60%,#d6b277);background-position:0 0,0 92px,0 0}
.rd-seal{position:absolute;left:50%;top:-38px;width:82px;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 4px 5px rgba(40,10,5,.5))}
.rd-seal svg{display:block;width:100%}
.rd .x{top:8px;right:4px}
.rd-from{margin:0 0 6px;font:700 31px/34px Caveat,cursive;color:#7a1218}
.rd-body{margin:0;font:700 25px/34px Caveat,cursive;white-space:pre-line;overflow-wrap:anywhere}
.rd-sign{margin:14px 0 0;text-align:right;font:700 27px/1.1 Caveat,cursive;color:#7a1218}
.rd-links{margin-top:10px}

/* ---------- Bandomasis vaidmuo ---------- */
.role{flex:none;min-height:38px;padding:0 10px;border-radius:19px;border:1px dashed rgba(255,207,110,.45);background:rgba(18,11,6,.5);color:#e8d6b0;font:700 13px Nunito,sans-serif;cursor:pointer;white-space:nowrap}
.app[data-phase="sleep"] .role{opacity:0;pointer-events:none}
.bar{flex-wrap:nowrap}
.brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.desk-btn{width:100%;margin-bottom:12px;border-color:rgba(255,207,110,.45)}
.desk-btn[hidden],#wishBtn[hidden]{display:none}
.row.single{grid-template-columns:minmax(0,1fr)}
.box.top{z-index:9}
.panel-sub{margin:6px 0 0;font:600 14px Nunito,sans-serif;color:#b9a888}
/* Norai */
.wgroup{margin-top:16px}
.wgroup h3{margin:0 0 8px;font:600 17px Fredoka,sans-serif;color:#f1e4c8}
.wcard{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border-radius:14px;background:linear-gradient(160deg,#f3e0b4,#e2c48b);color:#3a2414;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.wcard .wt{flex:1;min-width:0}
.wcard .wn{display:block;font:700 21px/1.1 Caveat,cursive;color:#1e1007;overflow-wrap:anywhere}
.wcard .wl{display:block;font:600 12.5px Nunito,sans-serif;color:#7a5a38;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcard .wl a{color:inherit}
.wbtn{flex:none;min-height:40px;padding:0 12px;border-radius:12px;border:0;font:800 13px Nunito,sans-serif;cursor:pointer;white-space:nowrap}
.wbtn.res{background:#2b2016;color:#f8f2e4}
.wbtn.mine{background:#7a1218;color:#fff2e0}
.wtag{flex:none;padding:4px 10px;border-radius:10px;font:800 12.5px Nunito,sans-serif;white-space:nowrap}
.wtag.taken{background:rgba(43,32,22,.15);color:#5a4630}
.wtag.own{background:rgba(255,255,255,.45);color:#7a5a38}
.wmine{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wmine label{display:flex;align-items:center;gap:6px;font:800 12.5px Nunito,sans-serif;color:#3a2414;cursor:pointer}
.wmine input{width:20px;height:20px;accent-color:#7a1218}
.wmine button{border:0;background:none;color:#7a5a38;font:700 12px Nunito,sans-serif;text-decoration:underline;cursor:pointer;min-height:28px}
/* Darbo stalas */
.tabs{display:flex;gap:6px;margin:14px 0 6px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05)}
.tab{flex:1;min-height:42px;border:0;border-radius:10px;background:transparent;color:#c9bba3;font:800 14px Nunito,sans-serif;cursor:pointer}
.tab[aria-selected="true"]{background:var(--gold);color:var(--ink)}
.dl{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;margin-top:10px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,207,110,.18);background:rgba(255,255,255,.05);color:#f1e4c8;text-align:left;cursor:pointer}
.dl .who{flex:1;min-width:0}
.dl b{display:block;font:700 16px Nunito,sans-serif}
.dl small{display:block;font:600 13px Nunito,sans-serif;color:#b9a888}
.dl .st{flex:none;padding:3px 9px;border-radius:10px;font:800 12px Nunito,sans-serif;background:rgba(255,207,110,.15);color:var(--gold);white-space:nowrap}
.dl .st.new{background:#7a1218;color:#fff2e0}
.mem{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);color:#f1e4c8}
.mem .who{flex:1;min-width:0}
.mem b{display:block;font:700 15px Nunito,sans-serif}
.mem small{display:block;font:600 12.5px Nunito,sans-serif;color:#b9a888}
.mem label{display:flex;align-items:center;gap:6px;font:700 12.5px Nunito,sans-serif;color:#d9cbb0;white-space:nowrap}
.mem input{width:20px;height:20px;accent-color:#e3a43a}
.inv{margin-top:16px;padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,207,110,.25)}
.inv h3{margin:0 0 8px;font:600 17px Fredoka,sans-serif;color:#f1e4c8}
.inv input{width:100%;min-height:46px;margin-top:8px;padding:0 12px;border-radius:12px;border:1px solid #5a4630;background:#1d130b;color:#f1e4c8;font:600 16px Nunito,sans-serif}
.inv .chk{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font:600 13px Nunito,sans-serif;color:#d9cbb0}
.inv .chk input{width:20px;min-height:20px;margin:0;flex:none}
.inv-out{margin-top:10px;padding:10px 12px;border-radius:12px;background:#f8f2e4;color:#2b2016;font:600 14px Nunito,sans-serif;white-space:pre-line}
.inv-out[hidden]{display:none}
.lbl{display:block;margin:16px 0 6px;font:800 13px Nunito,sans-serif;color:#d9cbb0}
.la-letter{margin-top:12px;padding:16px 18px;border-radius:6px;background:linear-gradient(170deg,#f3e0b4,#e3c58c 60%,#d6b277);color:#1e1007}
.la-text{margin:0;font:700 23px/1.3 Caveat,cursive;white-space:pre-line;overflow-wrap:anywhere}
.reply-ta{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #5a4630;background:#f8f2e4;color:#1e1007;font:700 21px/1.3 Caveat,cursive;resize:vertical}
.seg{display:flex;gap:6px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05)}
.seg button{flex:1;min-height:44px;border:0;border-radius:10px;background:transparent;color:#c9bba3;font:800 13.5px Nunito,sans-serif;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.ghost2.wide{width:100%;margin-top:12px}
#laReplyBox .send{margin-top:14px;max-width:none}
.la-done{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,207,110,.12);color:#f1e4c8;font:700 14px Nunito,sans-serif}
.la-done[hidden],#laReplyBox[hidden],#laNext[hidden]{display:none}
.toast{position:absolute;left:50%;top:calc(70px + env(safe-area-inset-top));z-index:20;max-width:90%;padding:12px 16px;border-radius:14px;background:#f8f2e4;color:#2b2016;font:700 15px Nunito,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateX(-50%)}
.mem .wbtn{min-height:36px}

/* P.S. režimas: išsiųstas tekstas tik skaitomas */
.orig{font:700 25px/34px Caveat,cursive;color:#1e1007;opacity:.62;white-space:pre-line;overflow-wrap:anywhere}
.orig[hidden],.ps-label[hidden]{display:none}
.orig .ps-old{display:block}
.ps-label{margin:0;font:700 27px/34px Caveat,cursive;color:#7a1218}
.compose.ps #letterText{min-height:136px}
.links li.locked{opacity:.65}
.rd-ps{margin:12px 0 0;font:700 24px/32px Caveat,cursive;white-space:pre-line;overflow-wrap:anywhere}
.rd-ps b{color:#7a1218}
.msgs .out button{background:linear-gradient(160deg,#d9c39a,#c9ad78);opacity:.92}
.msgs .out .tt{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs .nw.sent{background:rgba(43,32,22,.18);color:#4a3622}

/* ---------- Gerumo eglutė ---------- */
.row.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.row.three .pill{flex-direction:column;gap:3px;min-height:66px;font-size:14px;padding:6px 4px;text-align:center}
.row.three .badge{position:absolute;top:6px;right:8px}
.tree{position:absolute;inset:0;z-index:8;overflow-y:auto;padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 35%,#1d2f4a,#0b1424 70%);animation:fadeIn .35s ease both}
.tree[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tree-head{display:flex;align-items:center;justify-content:space-between}
.tree-head h2{margin:0;font:600 22px Fredoka,sans-serif;color:var(--gold)}
.tree-sub{margin:2px 0 0;font:600 14px Nunito,sans-serif;color:#b9c4d6}
.tree-fig{position:relative;max-width:440px;margin:8px auto 0;aspect-ratio:530/700;border-radius:18px;overflow:hidden;
  background:url("../assets/tree.jpg") 27.06% 0/260.4% auto no-repeat;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.tree-fig svg{position:absolute;inset:0;width:100%;height:100%}
.tree{background:radial-gradient(ellipse at 50% 30%,#2a1c10,#0e0905 75%)}
.star-dark{transition:opacity 1.2s ease}
.star-on .star-dark{opacity:0}
.star-glow{opacity:0;transition:opacity 1.4s ease}
.star-on .star-glow{opacity:1}
.star-rays{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity 1.4s ease}
.star-on .star-rays{opacity:.85;animation:spin 14s linear infinite}
.star-on .star-pulse{animation:twinkle 2.4s ease-in-out infinite}
.demo-fill{margin-top:12px}
.orn{cursor:pointer}
.orn.locked{cursor:default}
.orn .tag{opacity:.6}
.orn .tag circle{fill:rgba(30,20,8,.45);stroke:rgba(255,217,122,.35);stroke-width:.6}
.orn .tag text{font:700 8.5px Nunito,sans-serif;fill:#f3d488;pointer-events:none}
.orn.lit .tag{opacity:.8}.orn.lit .tag circle{fill:rgba(60,40,12,.5);stroke:rgba(255,224,150,.6)}.orn.lit .tag text{fill:#ffe39a}
.orn.today .tag{opacity:.9}
.orn .glowc,.orn .shine{mix-blend-mode:screen;pointer-events:none}
.orn.lit .glowc{animation:twinkle 2.6s ease-in-out infinite}
.orn .dim{pointer-events:none}
.orn .spark{pointer-events:none;transform-box:fill-box;transform-origin:center;animation:spark 2.8s ease-in-out infinite}
@keyframes spark{0%,100%{opacity:.15;transform:scale(.5) rotate(0)}45%{opacity:1;transform:scale(1) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.orn .spark{animation:none;opacity:.8}}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:1}}
.orn.today .ring{animation:spin 6s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.legend{display:none!important;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.legend span{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.06);font:700 13px Nunito,sans-serif;color:#dfe6f0}
.legend i{width:12px;height:12px;border-radius:50%}
.daycard{position:fixed;inset:0;z-index:2;display:flex;align-items:flex-end;background:rgba(5,8,15,.55)}
.tree .daycard{position:absolute}
.daycard[hidden]{display:none}
.dc{width:100%;max-height:85%;overflow-y:auto;padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:linear-gradient(#24170d,#160e07);border-top:1px solid rgba(255,207,110,.25);animation:panelUp .35s cubic-bezier(.2,.9,.3,1) both}
.dc h3{margin:0;font:600 20px Fredoka,sans-serif;color:var(--gold)}
.dc-idea{margin:8px 0 0;padding:12px 14px;border-radius:12px;background:linear-gradient(170deg,#f3e0b4,#e3c58c);color:#1e1007;font:700 22px/1.25 Caveat,cursive}
.dc-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dc-list li{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);color:#f1e4c8;font:600 14px Nunito,sans-serif}
.dc-list i{flex:none;width:14px;height:14px;margin-top:3px;border-radius:50%}
.dc-list b{display:block;font-weight:800}
.dc-list small{display:block;color:#b9a888;font-size:13px}
#dcInput{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #5a4630;background:#f8f2e4;color:#1e1007;font:700 20px/1.3 Caveat,cursive;resize:none}
#dcMine .send{margin-top:12px;max-width:none}
#dcMine[hidden]{display:none}
.orn:focus{outline:none}.orn:focus-visible .tag circle{stroke:#fff;stroke-width:2}
.app.no-hand .paper-tap,.app.no-hand .ripples{display:none}

/* Elfai dirbtuvėse */
.elves{position:absolute;inset:0;z-index:2;pointer-events:none}
.elf-hit{position:absolute;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto}
.elf-hit:active{background:radial-gradient(circle,rgba(255,236,180,.25),transparent 70%)}
.app[data-phase="sleep"] .elves,.app[data-phase="wake"] .elves{display:none}
.elf-say{position:absolute;z-index:7;padding:10px 14px;border-radius:16px;background:#fff6e4;color:#1e3a1e;
  font:600 15px/1.25 Fredoka,sans-serif;text-align:center;box-shadow:0 8px 22px rgba(0,0,0,.4);transform:translateY(-100%);
  animation:elfPop .35s cubic-bezier(.2,.9,.3,1.3) both;pointer-events:none}
.elf-say::after{content:"";position:absolute;left:var(--tail,50%);bottom:-7px;width:14px;height:14px;margin-left:-7px;background:#fff6e4;transform:rotate(45deg);border-radius:3px}
.elf-say.out{transition:opacity .35s;opacity:0}
@keyframes elfPop{from{transform:translateY(-100%) scale(.6);opacity:0}to{transform:translateY(-100%) scale(1);opacity:1}}

/* Kūčios: lėtas „skrydžio“ judesys ir daugiau kibirkščių */
.app.eve .photo{animation:fly-kb 16s ease-in-out infinite alternate;transform-origin:40% 45%}
@keyframes fly-kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(-2.5%,-1.5%)}}
.count{cursor:pointer}
@media (prefers-reduced-motion:reduce){.app.eve .photo{animation:none}}

/* Pranešimai kūrėjui */
#deskDev[hidden]{display:none}
.dev-note{margin:10px 0 12px;font:600 13.5px/1.4 Nunito,sans-serif;color:#cdbfa6}
.fb-ta{display:block;width:100%;margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid #5a4630;background:rgba(255,255,255,.06);color:#f6efe0;font:600 16px/1.4 Nunito,sans-serif;resize:vertical}
.fb-ta:focus{outline:none;border-color:var(--gold)}
.fb-count{margin:4px 2px 0;text-align:right;font:700 12px Nunito,sans-serif;color:#a8977c}
#fbSend{margin-top:10px;max-width:none}
.fb-h{margin:18px 0 8px;font:800 14px Nunito,sans-serif;color:#d9cbb0}
.fb-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fb-list li{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.fb-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font:800 13px Nunito,sans-serif;color:#f1e4c8}
.fb-st{padding:2px 8px;border-radius:999px;font:800 11.5px Nunito,sans-serif;background:rgba(255,255,255,.1);color:#cdbfa6}
.fb-st.read{background:rgba(120,200,140,.18);color:#a9e3b6}.fb-st.done{background:var(--gold);color:var(--ink)}
.fb-list p{margin:6px 0 4px;font:600 14px/1.4 Nunito,sans-serif;color:#e9dfcc;white-space:pre-wrap;word-break:break-word}
.fb-list small{font:600 12px Nunito,sans-serif;color:#9c8b70}

/* Kūčių diena ir stebuklas */
.eve-box{margin-top:12px;padding:14px;border-radius:16px;background:linear-gradient(170deg,rgba(255,217,122,.14),rgba(255,217,122,.05));border:1px solid rgba(255,217,122,.35)}
.eve-box[hidden]{display:none}
.eve-t{margin:0 0 10px;font:700 14.5px/1.4 Nunito,sans-serif;color:#f6e7c4}
#eveInput{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #5a4630;background:#f8f2e4;color:#1e1007;font:700 20px/1.3 Caveat,cursive;resize:none}
#eveDone{margin-top:10px;max-width:none}
.demo-row{display:flex;gap:8px;margin-top:8px}.demo-row .ghost2{flex:1;font-size:13px}
.dc-list li.dc-magic{background:rgba(255,217,122,.14);color:#ffe7a8;font-weight:700}

/* PIN langas */
.pin{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 20%,#3a2412,#120a05 70%);animation:fadeIn .3s both}
.pin[hidden]{display:none}
.pin-in{width:100%;max-width:340px;text-align:center}
.pin-seal{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:36px;background:radial-gradient(circle at 35% 30%,#c0392b,#7a1a10);box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 -4px 8px rgba(0,0,0,.3)}
.pin h2{margin:0;font:600 26px Fredoka,sans-serif;color:var(--gold)}
.pin-sub{margin:6px 0 0;font:600 14.5px/1.4 Nunito,sans-serif;color:#d6c8ae}
.pin-dots{display:flex;justify-content:center;gap:16px;margin:22px 0 6px}
.pin-dots[hidden],.pin-pad[hidden],.pin-act[hidden],.pin-link[hidden],.pin-code[hidden]{display:none}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,217,122,.7);transition:background .15s,transform .15s}
.pin-dots i.on{background:var(--gold);transform:scale(1.1)}
.pin-err{min-height:20px;margin:4px 0 8px;font:700 13.5px/1.35 Nunito,sans-serif;color:#ff9b8a}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:290px;margin:0 auto}
.pin-pad button{height:66px;border-radius:50%;width:66px;justify-self:center;border:1px solid rgba(255,217,122,.3);background:rgba(255,255,255,.06);color:#f6efe0;font:700 26px Nunito,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pin-pad button:active{background:rgba(255,217,122,.3)}
.pin-pad .blank{visibility:hidden}
.pin-pad .del{border:0;background:transparent}.pin-pad .del svg{width:28px;height:28px;fill:none;stroke:#e8d6b0;stroke-width:1.8;stroke-linejoin:round}
.pin-pad.off{opacity:.35;pointer-events:none}
.pin-code{display:block;width:180px;margin:18px auto 4px;padding:12px;border-radius:12px;border:1px solid #5a4630;background:#f8f2e4;color:#1e1007;text-align:center;letter-spacing:8px;font:800 24px Nunito,sans-serif}
.pin-act{margin:16px auto 0;max-width:none}
.pin-link{display:block;margin:16px auto 0;padding:8px 12px;border:0;background:none;color:#e8c77a;font:700 14px Nunito,sans-serif;text-decoration:underline;cursor:pointer}
.reset-req{margin:10px 0 14px;padding:14px;border-radius:14px;background:rgba(255,217,122,.12);border:1px solid rgba(255,217,122,.4)}
.reset-req p{margin:0 0 10px;font:700 14.5px Nunito,sans-serif;color:#f6e7c4}.reset-req .send{max-width:none}
#lockBtn svg{fill:none;stroke:currentColor;stroke-width:1.8}
.app[data-phase="sleep"] #lockBtn{opacity:0;pointer-events:none}
.pin-lang{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px}

/* Pagalba ir kūrėjo skydelis */
#creatorBtn[hidden]{display:none}
.faq details{margin-bottom:8px;border-radius:12px;background:rgba(255,255,255,.05);overflow:hidden}
.faq summary{padding:12px 14px;font:800 14.5px Nunito,sans-serif;color:#f1e4c8;cursor:pointer;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:14px;top:9px;font:700 20px Nunito,sans-serif;color:var(--gold)}
.faq details[open] summary::after{content:'–'}
.faq details p,.faq .doc{margin:0;padding:0 14px 12px;font:600 14px/1.45 Nunito,sans-serif;color:#d9ccb3}
.faq .doc ul,.faq .doc ol{margin:4px 0;padding-left:18px}.faq .doc li{margin:3px 0}.faq .doc p{padding:0;margin:4px 0}
.faq .doc b{color:#f6e7c4}
.cr-tabs .ctab{flex:1;min-height:42px;border:0;border-radius:10px;background:transparent;color:#c9bba3;font:800 13px Nunito,sans-serif;cursor:pointer}
.cr-tabs .ctab[aria-selected="true"]{background:var(--gold);color:var(--ink)}
.cr-card{margin:8px 0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05)}
.cr-card > b{display:block;font:800 15px Nunito,sans-serif;color:#f6e7c4}
.cr-card small{display:block;margin-top:2px;font:600 12.5px Nunito,sans-serif;color:#a8977c}
.cr-card p{margin:8px 0 0;font:600 14px/1.4 Nunito,sans-serif;color:#e9dfcc}
.cr-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.cr-row .send{flex:1;min-height:46px;max-width:none;font-size:15px}.cr-row .ghost2{flex:1;min-height:42px}
.ghost2.danger{border-color:rgba(255,120,100,.5);color:#ffb3a6}
.cr-in{display:block;width:100%;margin-top:8px;padding:11px 12px;border-radius:12px;border:1px solid #5a4630;background:rgba(255,255,255,.06);color:#f6efe0;font:600 15px Nunito,sans-serif;color-scheme:dark}
.cr-card .send{margin-top:10px;max-width:none}
.fb-st.active{background:rgba(120,200,140,.18);color:#a9e3b6}.fb-st.pending{background:rgba(255,217,122,.18);color:#ffe08a}.fb-st.suspended{background:rgba(255,120,100,.18);color:#ffb3a6}
.app[data-phase="sleep"] #helpBtn{opacity:0;pointer-events:none}
@media (max-width:430px){.top .brand{display:none}}
@media (max-width:430px){.top .bar{justify-content:space-between}}
/* Kai atidarytas apatinis langas, viršutinė juosta lieka paspaudžiama (pvz., kalbos keitimas neuždaro lango) */
.app:has(.box:not([hidden])) .top{z-index:11}
.app:has(.box:not([hidden])) .top .bubble{visibility:hidden}
.rd-deed{margin:14px auto 0;max-width:none}.rd-deed[hidden]{display:none}
.rd-para{display:block;margin:0 0 6px}
.say-btn{display:inline-grid;place-items:center;width:34px;height:34px;margin:0 0 -6px 6px;padding:0;border:0;border-radius:50%;background:rgba(125,22,28,.12);color:#7d161c;cursor:pointer;vertical-align:baseline}
.say-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.say-btn svg path:first-child{fill:currentColor}
.say-btn.playing{background:#7d161c;color:#fbe7c0}
.say-btn.playing .w1{animation:wave 1s ease-in-out infinite}.say-btn.playing .w2{animation:wave 1s .25s ease-in-out infinite}
@keyframes wave{0%,100%{opacity:.25}50%{opacity:1}}
.vp{margin:8px 0 0;padding-left:22px}.vp li{margin:4px 0;font-size:13.5px}.vp code{font:700 11px ui-monospace,monospace;color:#ffd97a;background:rgba(255,217,122,.1);padding:1px 5px;border-radius:5px}
.vp-copy{margin-top:6px;min-height:40px;padding:0 14px}
.mem-say{margin:0;background:rgba(255,217,122,.14);color:#ffd97a}.mem-say.playing{background:#ffd97a;color:#2b1a08}
.pron{flex-basis:100%;margin-top:-4px}
.pron-link{padding:2px 0;border:0;background:none;color:#e8c77a;font:700 12.5px Nunito,sans-serif;text-decoration:underline;cursor:pointer}
.pron-row{display:flex;gap:8px;margin-top:6px}.pron-row[hidden]{display:none}
.pron-row input{flex:1;min-width:0;width:auto;height:auto;padding:9px 11px;border-radius:10px;border:1px solid #5a4630;background:rgba(255,255,255,.06);color:#f6efe0;font:600 14px Nunito,sans-serif;accent-color:auto}
.pron-row .ghost2{flex:none;width:auto;min-height:40px;padding:0 14px}

/* Dovanų keitimasis */
#deskGx[hidden]{display:none}
.gx-form input,.gx-form textarea{display:block;width:100%;margin-top:8px;padding:11px 12px;border-radius:12px;border:1px solid #5a4630;background:rgba(255,255,255,.06);color:#f6efe0;font:600 15px Nunito,sans-serif;color-scheme:dark;box-sizing:border-box}
.gx-form textarea{resize:vertical;line-height:1.4}
.gx-row{display:flex;gap:10px}.gx-row label{flex:1;min-width:0}
.gx-form label span{display:block;margin-top:12px;font:700 13px/1.3 Nunito,sans-serif;color:#d9cbb0}
.gx-form .send{margin-top:14px;max-width:none}
.gx-p-row .who{flex:1}.gx-ok{font:700 12.5px Nunito,sans-serif;color:#a9e3b6;white-space:nowrap}
.gx-p-row a.wbtn{display:inline-grid;place-items:center;text-decoration:none;padding:0 12px}
.gx-p-row .pron-link{flex-basis:100%;text-align:left;margin-top:-4px}
.ghost2.wide{width:100%;margin-top:12px}
.gx-view{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,6,3,.72);animation:fadeIn .25s both}
.gx-view[hidden]{display:none}
.gx-card{position:relative;width:100%;max-width:360px;padding:28px 22px 24px;border-radius:20px;text-align:center;color:#2b1a08;
  background:radial-gradient(circle at 50% 0,#fff6dc,#f1d99c 70%);box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 0 0 3px rgba(160,40,30,.35);animation:fadeUp .6s both}
.gx-card .x{position:absolute;top:10px;right:10px;color:#7a3a1a}
.gx-gift{font-size:56px;line-height:1;animation:pop .8s both}
.gx-t{margin:8px 0 0;font:600 28px Fredoka,sans-serif;color:#8e1c1c}
.gx-p{margin:10px 0 0;font:700 16px/1.4 Nunito,sans-serif}
.gx-name{margin:14px 0 4px;font:700 40px/1.1 Caveat,cursive;color:#8e1c1c}
.gx-sh{margin:14px 0 0;font:800 15px Nunito,sans-serif;color:#7a3a1a}
.cr-kind{margin-top:8px}