/* The iPhone app's sign-in: a night porthole (owner's pick of 17.09.2026 from four looks, designs/w5_window_src.html).
   Only html.app uses it (app.js appGateHtml); the Telegram gate stays wow.css .gate. Sizes follow the screen height, so an
   iPhone SE does not push the button over the text. */
.pgate { position:fixed; inset:0; z-index:120; overflow:hidden; color:#fff; text-align:center; -webkit-user-select:none; user-select:none;
  --wall1:#1A2233; --wall2:#070A12; --acc1:#FFFFFF; --acc2:#B9CCF5; --ink:#0B1222; --glow:rgba(150,185,255,.35);
  --sky:linear-gradient(#01030B 0%, #06102A 45%, #0F2350 78%, #1B3A6E 100%); --bez:#2A3244; --cloud:rgba(170,190,230,.55); --cloud2:rgba(120,140,190,.25);
  --wing:#1E2433; --shade1:#DCE3F0; --shade2:#AEB9CF; --fin:radial-gradient(circle at 50% 42%, #1B3A6E, #050814 70%); --sign:#05070D;
  background:radial-gradient(95% 62% at 50% 33%, var(--wall1) 0%, var(--wall2) 100%); font-family:-apple-system, "SF Pro Display", "Segoe UI", Roboto, sans-serif; }
.pgate::before { content:""; position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(90deg, transparent 0 14%, rgba(160,190,255,.05) 14% calc(14% + 1px), transparent calc(14% + 1px) 86%, rgba(160,190,255,.05) 86% calc(86% + 1px), transparent calc(86% + 1px)),
  repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px); }
.pg-col { position:relative; height:100%; overflow:hidden; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;
  padding:calc(env(safe-area-inset-top, 0px) + 12px) 22px calc(env(safe-area-inset-bottom, 0px) + 22px); }
.pg-halo { position:absolute; left:50%; top:30%; width:520px; height:520px; margin:-260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--glow), transparent 62%); animation:pgHalo 5s ease-in-out infinite alternate; }
@keyframes pgHalo { from { opacity:.55; transform:scale(.92); } to { opacity:1; transform:scale(1.04); } }
.pg-sign { position:relative; display:flex; gap:14px; padding:7px 14px; border-radius:12px; background:var(--sign); border:1px solid rgba(255,255,255,.06);
  font-size:12px; color:rgba(255,255,255,.4); white-space:nowrap; }
.pg-sign b { font-weight:600; transition:all .4s; } .pg-sign b.lit { color:var(--acc2); text-shadow:0 0 10px var(--acc2); }

.pg-stage { position:relative; flex:none; width:min(236px, 28vh); aspect-ratio:236 / 330; margin:clamp(28px, 4.6vh, 44px) 0 0; transform-origin:50% 50%; transition:transform 1.8s cubic-bezier(.7,0,.2,1); }
.pg-bezel { position:absolute; inset:-10%; border-radius:999px; background:linear-gradient(160deg, var(--bez), var(--wall2) 70%);
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 2px 1px rgba(255,255,255,.14), inset 0 -10px 24px rgba(0,0,0,.35); }
.pg-bezel::after { content:""; position:absolute; inset:4%; border-radius:999px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08); }
.pg-win { position:absolute; inset:0; border-radius:999px; overflow:hidden; background:#01030B; box-shadow:inset 0 0 0 5px rgba(0,0,0,.55); isolation:isolate; }
.pg-win > * { position:absolute; }
.pg-sky { inset:-15%; background:var(--sky); }
.pg-stars { inset:0; width:100%; height:100%; }
.pg-moon { left:62%; top:24%; width:20%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; background:radial-gradient(circle at 38% 38%, #FFFFFF, #DCE6FF 60%, #A8B8E0);
  box-shadow:0 0 30px 10px rgba(200,215,255,.35); }
.pg-city { left:-10%; right:-10%; bottom:0; height:38%; background:
  radial-gradient(1.6px 1.6px at 12% 60%, #FFD58A 99%, transparent), radial-gradient(1.4px 1.4px at 22% 72%, #FFE7B8 99%, transparent), radial-gradient(1.8px 1.8px at 31% 55%, #FFC870 99%, transparent),
  radial-gradient(1.2px 1.2px at 40% 80%, #FFF 99%, transparent), radial-gradient(1.6px 1.6px at 48% 66%, #FFD58A 99%, transparent), radial-gradient(1.3px 1.3px at 57% 58%, #FFE7B8 99%, transparent),
  radial-gradient(1.7px 1.7px at 66% 76%, #FFC870 99%, transparent), radial-gradient(1.2px 1.2px at 74% 62%, #FFF 99%, transparent), radial-gradient(1.6px 1.6px at 83% 70%, #FFD58A 99%, transparent),
  radial-gradient(1.4px 1.4px at 91% 57%, #FFE7B8 99%, transparent), radial-gradient(60% 50% at 50% 100%, rgba(255,170,80,.28), transparent);
  background-size:200px 100%; -webkit-mask:linear-gradient(transparent, #000 35%); mask:linear-gradient(transparent, #000 35%); animation:pgCity 22s linear infinite; }
@keyframes pgCity { to { background-position:-400px 0; } }
.pg-clouds { left:0; width:300%; height:30%; display:flex; }
.pg-clouds i { flex:none; border-radius:50%; background:radial-gradient(closest-side, var(--cloud), transparent); filter:blur(4px); margin-right:24px; }
.pg-c3 { top:42%; opacity:.5; animation:pgDrift 18s linear infinite; } .pg-c3 i { background:radial-gradient(closest-side, var(--cloud2), transparent); }
.pg-c1 { top:64%; opacity:.5; animation:pgDrift 10s linear infinite; } .pg-c2 { top:77%; animation:pgDrift 6s linear infinite; }
@keyframes pgDrift { from { transform:translateX(0); } to { transform:translateX(-66.66%); } }
.pg-wing { left:-10%; bottom:-3%; width:119%; animation:pgBob 4s ease-in-out infinite alternate; filter:drop-shadow(0 -1px 0 rgba(160,190,255,.25)); }
@keyframes pgBob { to { transform:translateY(-5px) rotate(-.7deg); } }
.pg-glare { inset:0; border-radius:999px; z-index:5; pointer-events:none; background:linear-gradient(125deg, rgba(255,255,255,.22) 0%, transparent 28%, transparent 72%, rgba(255,255,255,.07)); }
.pg-shade { inset:0; z-index:4; background:linear-gradient(var(--shade1), var(--shade2)); transition:transform 1.5s cubic-bezier(.7,0,.2,1); border-bottom:3px solid rgba(0,0,0,.12); box-shadow:inset 0 -12px 18px rgba(0,0,0,.12); }
.pg-shade::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 3px, transparent 3px 7px); }
.pg-shade::after { content:""; position:absolute; left:50%; bottom:4%; width:24%; height:9px; transform:translateX(-50%); border-radius:5px; background:rgba(0,0,0,.18); }
.pg-shade img { position:absolute; left:50%; top:45%; width:36%; transform:translate(-50%, -50%); filter:brightness(0) invert(1) drop-shadow(0 -1px 0 rgba(0,0,0,.18)) drop-shadow(0 1px 1px rgba(255,255,255,.8)); }
.pg-shade .edge { position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--acc2); box-shadow:0 0 16px 4px var(--acc2); opacity:0; }
.pg-shade.up { transform:translateY(-101%); }
.pg-shade.up .edge { animation:pgEdge 1.5s ease-out; }
@keyframes pgEdge { 0%, 70% { opacity:1; } 100% { opacity:0; } }

.pg-copy { position:relative; margin-top:clamp(30px, 5.4vh, 52px); }
.pg-copy .word { width:168px; filter:brightness(0) invert(1); margin:0 auto 16px; display:block; opacity:0; transform:translateY(12px); transition:all 1s cubic-bezier(.2,.9,.2,1); }
.pg-copy h1 { margin:0; color:#FFFFFF; font-size:clamp(25px, 7.6vw, 32px); line-height:1.1; font-weight:780; letter-spacing:-.02em; }
.pg-copy h1 span { display:inline-block; opacity:0; transform:translateY(18px); filter:blur(6px); }
.pg-copy p { margin:10px auto 0; max-width:300px; font-size:clamp(14.5px, 4.1vw, 16px); line-height:1.4; color:rgba(255,255,255,.66); opacity:0; transition:opacity 1s .5s; }
.pg-copy.on .word { opacity:1; transform:none; } .pg-copy.on h1 span { animation:pgWord .8s cubic-bezier(.2,.9,.2,1) forwards; } .pg-copy.on p { opacity:1; }
@keyframes pgWord { to { opacity:1; transform:none; filter:none; } }
.pg-foot { position:relative; width:100%; margin-top:auto; padding-top:16px; opacity:0; transform:translateY(30px); transition:all 1s .2s cubic-bezier(.2,.9,.2,1); }
.pg-foot.on { opacity:1; transform:none; }
.pg-btn { position:relative; width:100%; min-height:58px; border:0; border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px;
  font:inherit; font-weight:720; font-size:17px; line-height:1.2; color:var(--ink); background:linear-gradient(135deg, var(--acc1), var(--acc2)); box-shadow:0 12px 40px var(--glow), inset 0 1px 0 rgba(255,255,255,.8); }
.pg-btn::after { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent); transform:skewX(-20deg); animation:pgShine 3.4s 1.4s ease-in-out infinite; }
@keyframes pgShine { 0% { left:-60%; } 45%, 100% { left:130%; } }
.pg-btn svg { width:22px; height:22px; flex:none; } .pg-btn svg circle { fill:var(--ink); } .pg-btn svg path { fill:var(--acc1); }
.pg-link { display:block; width:100%; min-height:46px; margin-top:6px; background:none; border:0; font:inherit; font-size:15px; color:rgba(255,255,255,.62); }
.pg-status { display:flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:8px 16px; box-sizing:border-box; border-radius:20px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); font-size:16px; line-height:1.3; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.pg-status i { flex:none; width:10px; height:10px; border-radius:50%; background:var(--acc2); box-shadow:0 0 12px var(--acc2); animation:pgDot 1.2s infinite; }
@keyframes pgDot { 50% { transform:scale(.45); opacity:.5; } }
.pg-credit { margin-top:6px; font-size:11px; color:rgba(255,255,255,.28); }

.pg-fx, .pg-fin, .pg-welcome, .pg-ring { position:absolute; inset:0; pointer-events:none; }
.pg-fx { width:100%; height:100%; opacity:0; transition:opacity .6s; }
.pg-fin { opacity:0; transition:opacity 1s; background:var(--fin); }
.pg-welcome { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; opacity:0; }
.pg-welcome .m { width:104px; filter:brightness(0) invert(1) drop-shadow(0 0 30px rgba(255,255,255,.6)); transform:scale(.6); opacity:0; }
.pg-welcome .w { width:190px; filter:brightness(0) invert(1); opacity:0; clip-path:inset(0 100% 0 0); }
.pg-welcome b { font-size:30px; letter-spacing:-.02em; margin-top:10px; opacity:0; transform:translateY(12px); }
.pg-welcome span { font-size:16px; opacity:0; }
.pg-welcome.on { opacity:1; }
.pg-welcome.on .m { animation:pgPop 1s cubic-bezier(.2,1.4,.3,1) forwards; } .pg-welcome.on .w { animation:pgReveal 1s .45s cubic-bezier(.6,0,.2,1) forwards; }
.pg-welcome.on b { animation:pgUp .8s .9s forwards; } .pg-welcome.on span { animation:pgFade .8s 1.2s forwards; }
@keyframes pgPop { to { transform:none; opacity:1; } } @keyframes pgReveal { to { opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes pgUp { to { opacity:1; transform:none; } } @keyframes pgFade { to { opacity:.75; } }
.pg-ring { left:50%; top:42%; width:10px; height:10px; margin:-5px; border-radius:50%; border:2px solid rgba(255,255,255,.8); opacity:0; }
.pg-ring.on { animation:pgRing 1.4s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes pgRing { 0% { opacity:.9; transform:scale(1); } 55% { opacity:0; } 100% { opacity:0; transform:scale(70); } }
.pgate [hidden] { display:none !important; }
@media (prefers-reduced-motion: reduce) {
  .pgate *, .pgate *::before, .pgate *::after { animation-duration:.01s !important; animation-iteration-count:1 !important; transition-duration:.2s !important; }
}
/* short screens (iPhone SE, 667 px): after every other rule, so it wins */
@media (max-height: 740px) {
  .pg-stage { width:min(200px, 24vh); margin-top:22px; }
  .pg-copy { margin-top:26px; } .pg-copy .word { width:140px; margin-bottom:10px; }
  .pg-copy p { margin-top:6px; } .pg-credit { display:none; } .pg-foot { padding-top:10px; }
}

/* the time of day (app.js pgTheme, Tashkent time): dawn 05-08, day 08-17, dusk 17-20, night 20-05 */
.pg-sun { left:55%; top:62%; width:52%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, #FFFBEA 0 18%, rgba(255,226,160,.85) 34%, rgba(255,170,110,.25) 55%, transparent 70%); animation:pgSun 5s ease-in-out infinite alternate; }
@keyframes pgSun { to { transform:translate(-50%, -50%) scale(1.12); } }
.pgate:not(.pg-night) .pg-moon, .pgate:not(.pg-night):not(.pg-dusk) .pg-city { display:none; }
.pg-night .pg-sun { display:none; }
.pg-dusk .pg-city { opacity:.6; }
.pg-day { --wall1:#5C93D1; --wall2:#1F4E8A; --acc2:#DCEBFF; --ink:#0A2A4A; --glow:rgba(160,205,255,.5); --bez:#6E9FD6; --sign:rgba(10,40,80,.4);
  --sky:linear-gradient(#1E6FD9 0%, #4C9BF0 40%, #9CCBFA 75%, #DDF0FF 100%); --cloud:rgba(255,255,255,1); --cloud2:rgba(255,255,255,.75);
  --wing:#C9CED6; --shade1:#FFFFFF; --shade2:#DCE6F2; --fin:linear-gradient(#2F86E8, #9CCBFA); }
.pg-day .pg-sun { left:74%; top:20%; width:62%; background:radial-gradient(circle, #FFFFFF 0 14%, rgba(255,255,240,.8) 26%, rgba(255,255,255,.2) 48%, transparent 66%); }
.pg-day .pg-sign b.lit { color:#FFFFFF; text-shadow:0 0 10px #BFE0FF; }
.pg-dawn { --wall1:#2C2222; --wall2:#0E0A0B; --acc1:#FFF4EC; --acc2:#FFB38A; --ink:#2A1210; --glow:rgba(255,160,110,.35); --bez:#3A2E2C; --sign:#0A0707;
  --sky:linear-gradient(#1B1B4A 0%, #5B3B7A 26%, #E0708A 52%, #FFA56B 70%, #FFE1A8 86%, #FFF2D6 100%); --cloud:rgba(255,236,225,.95); --cloud2:rgba(255,200,190,.55);
  --wing:#B9B3B6; --shade1:#F1E6DE; --shade2:#D9C4B8; --fin:radial-gradient(circle at 50% 110%, #FFD29A 0%, #F08A6A 35%, #7A3A6E 75%, #2A1840 100%); }
.pg-dawn .pg-sun { animation:pgRise 3.2s .6s cubic-bezier(.2,.7,.2,1) both, pgSun 5s 4s ease-in-out infinite alternate; }
@keyframes pgRise { from { transform:translate(-50%, 40%) scale(.8); } to { transform:translate(-50%, -50%); } }
.pg-dusk { --wall1:#2A1F2E; --wall2:#0C080F; --acc1:#FFF1E6; --acc2:#FF9E7A; --ink:#2A0F14; --glow:rgba(255,130,110,.32); --bez:#382A3C; --sign:#09060B;
  --sky:linear-gradient(#0E1233 0%, #3A2A63 30%, #A0487A 55%, #F0745A 74%, #FFB067 90%, #FFD49A 100%); --cloud:rgba(255,190,170,.8); --cloud2:rgba(200,120,150,.45);
  --wing:#4A3E4C; --shade1:#EFE3E6; --shade2:#CDB9C2; --fin:radial-gradient(circle at 50% 100%, #FFB067 0%, #D8586A 38%, #4A2A5E 75%, #120C24 100%); }
.pg-dusk .pg-sun { top:80%; animation:pgSet 3.2s .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pgSet { from { transform:translate(-50%, -90%); } to { transform:translate(-50%, -50%); } }

/* the app's splash in the icon's silver (owner, 17.09.2026: icon variant 8); the Telegram mini app keeps the gold */
html.app .splash .logo-anim .mark { animation:markInS 1s .15s cubic-bezier(.2,.8,.2,1) forwards, markGlowS 3s 1.2s ease-in-out infinite alternate; }
@keyframes markInS { to { opacity:1; transform:none; filter:grayscale(1) brightness(1.75) blur(0) drop-shadow(0 0 18px rgba(220,228,240,.35)); } }
@keyframes markGlowS { from { filter:grayscale(1) brightness(1.75) drop-shadow(0 0 12px rgba(220,228,240,.25)); } to { filter:grayscale(1) brightness(1.75) drop-shadow(0 0 30px rgba(220,228,240,.55)); } }
html.app .splash .wordimg { filter:grayscale(1) brightness(1.75); }
html.app .splash .eq b { background:linear-gradient(180deg, #FFFFFF, #8A919C); }
html.app .splash .glow { background:radial-gradient(circle, rgba(220,228,240,.16) 0, rgba(220,228,240,.05) 28%, transparent 55%); }
html.app .splash .rings i { border-color:rgba(220,228,240,.3); }
html.app .splash .trail path { stroke:#DCE4F0; }
html.app .splash { background:#08080A; }