:root{
  --sky-top:#5d667e;
  --sky-middle:#9ca5b8;
  --sky-bottom:#efe0d5;
  --warm-white:#fff9ee;
  --silver:#edf0f6;
  --silver-soft:rgba(237,240,246,.42);
  --red:#e23b32;
  --text:#fbfbfd;
  --muted:rgba(251,251,253,.72);
  --glass:rgba(250,250,252,.90);
  --ink:#23252d;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 52% 88%,rgba(255,239,216,.82),transparent 28rem),
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.13),transparent 25rem),
    linear-gradient(180deg,var(--sky-top),var(--sky-middle) 56%,var(--sky-bottom));
  overflow-x:hidden;
}
button{font:inherit}
.app{min-height:100vh;position:relative;overflow:hidden}
.hero{
  position:relative;z-index:4;text-align:center;padding:52px 20px 4px;
  opacity:0;transform:translateY(-8px)
}
.hero.visible{animation:heroIn 1s ease forwards}
.hero h1{
  margin:0;font-size:clamp(34px,5.3vw,64px);line-height:1.02;
  font-weight:280;letter-spacing:-.035em
}
.hero p{
  margin:13px 0 0;color:var(--muted);
  font-size:clamp(15px,2vw,20px);font-weight:400
}
.accent-line{display:block;width:70px;height:1px;background:var(--red);margin:20px auto 0}

.sky{
  position:relative;z-index:2;width:min(1120px,100vw);
  height:calc(100vh - 155px);min-height:620px;margin:0 auto;
}
#skyCanvas,#constellation{position:absolute;inset:0;width:100%;height:100%}
#skyCanvas{opacity:.78}
.const-line{
  fill:none;stroke:var(--silver);stroke-width:1.2;
  stroke-linecap:round;opacity:.88
}
.const-line.secondary{stroke:var(--silver-soft)}
.star-hit{cursor:pointer;outline:none}
.star-core{
  fill:var(--warm-white);
  filter:drop-shadow(0 0 4px rgba(255,251,239,.95))
         drop-shadow(0 0 11px rgba(255,251,239,.45));
  transition:fill .22s ease,filter .22s ease,transform .22s ease;
  transform-box:fill-box;transform-origin:center
}
.star-hit:hover .star-core,.star-hit:focus-visible .star-core{transform:scale(1.35)}
.star-hit.active .star-core{
  fill:var(--red);
  filter:drop-shadow(0 0 5px rgba(226,59,50,.95))
         drop-shadow(0 0 14px rgba(226,59,50,.45))
}
.star-hit.opened .star-ring{opacity:.76}
.star-ring{
  fill:none;stroke:rgba(255,255,255,.52);stroke-width:1;opacity:0;
  transition:opacity .25s ease
}
.star-label{
  fill:rgba(255,255,255,.92);
  font-size:18px;
  font-weight:440;
  letter-spacing:.005em;
  cursor:pointer
}
.label-dot{fill:var(--red)}
.hint{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  color:rgba(255,255,255,.66);font-size:13px;letter-spacing:.05em;
  opacity:0;transition:opacity .6s
}
.hint.visible{opacity:1}
.replay{
  position:absolute;right:20px;bottom:18px;border:1px solid rgba(255,255,255,.36);
  background:rgba(255,255,255,.09);color:white;border-radius:999px;
  padding:10px 14px;cursor:pointer;backdrop-filter:blur(10px)
}
.progress{
  position:absolute;left:20px;bottom:20px;color:rgba(255,255,255,.62);
  font-size:12px;letter-spacing:.04em
}
.shade{
  position:fixed;z-index:15;inset:0;background:rgba(33,36,48,.18);
  opacity:0;pointer-events:none;transition:.35s
}
.shade.visible{opacity:1;pointer-events:auto}
.wish-panel{
  position:fixed;z-index:20;top:0;right:0;height:100vh;width:min(400px,92vw);
  background:var(--glass);backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
  color:var(--ink);padding:38px 30px 30px;
  transform:translateX(105%);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow:-24px 0 70px rgba(30,35,50,.18)
}
.wish-panel.open{transform:translateX(0)}
.close{
  position:absolute;right:20px;top:20px;width:38px;height:38px;border:0;
  border-radius:50%;background:rgba(32,35,44,.07);font-size:23px;color:#555;cursor:pointer
}
.panel-star{margin-top:68px;color:var(--red);font-size:19px}
.wish-panel h2{font-size:32px;font-weight:510;margin:12px 0 26px}
.wish-panel #wishText{font-size:19px;line-height:1.58;color:#30333b;margin:0;white-space:pre-line}
.panel-rule{width:54px;height:1px;background:var(--red);margin-top:28px}
.signature{color:#7b7e87;font-size:15px;margin-top:14px}
.all-wishes{
  position:fixed;z-index:30;inset:0;display:grid;place-items:center;
  background:rgba(67,75,95,.38);backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:.5s
}
.all-wishes.visible{opacity:1;pointer-events:auto}
.all-wishes-card{
  width:min(560px,calc(100vw - 36px));padding:42px 38px;
  text-align:center;border-radius:30px;background:rgba(252,251,250,.93);
  color:var(--ink);box-shadow:0 30px 90px rgba(34,39,52,.22)
}
.all-wishes-star{color:var(--red);font-size:26px}
.all-wishes h2{font-size:31px;font-weight:520;margin:15px 0 15px}
.all-wishes p{font-size:18px;line-height:1.55;color:#555963}
.all-wishes button{
  border:0;background:#262932;color:white;border-radius:999px;
  padding:13px 20px;margin-top:10px;cursor:pointer
}
@keyframes heroIn{to{opacity:1;transform:none}}
@media(max-width:720px){
  .hero{padding-top:34px}
  .sky{height:calc(100vh - 135px);min-height:620px}
  .star-label{font-size:15px}
  .wish-panel{
    top:auto;bottom:0;width:100%;height:auto;max-height:76vh;
    border-radius:28px 28px 0 0;transform:translateY(105%)
  }
  .wish-panel.open{transform:translateY(0)}
  .panel-star{margin-top:34px}
  .replay{right:12px;bottom:13px;padding:9px 12px}
  .progress{left:12px;bottom:15px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}


/* Экран ввода секретного слова */
body.gate-open{overflow:hidden}
.access-gate{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 50% 78%,rgba(255,239,216,.86),transparent 30rem),
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.14),transparent 24rem),
    linear-gradient(180deg,var(--sky-top),var(--sky-middle) 56%,var(--sky-bottom));
  transition:opacity .55s ease,visibility .55s ease;
}
.access-gate::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.62;
  background-image:
    radial-gradient(circle at 14% 18%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 26% 56%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 74% 22%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 88% 52%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 62% 72%,#fff 0 1px,transparent 1.8px);
}
.access-gate.unlocked{opacity:0;visibility:hidden;pointer-events:none}
.gate-card{
  position:relative;z-index:1;width:min(470px,100%);padding:42px 38px 38px;
  text-align:center;border:1px solid rgba(255,255,255,.34);border-radius:30px;
  background:rgba(248,249,252,.20);box-shadow:0 28px 85px rgba(39,44,60,.20);
  backdrop-filter:blur(24px) saturate(118%);-webkit-backdrop-filter:blur(24px) saturate(118%);
}
.gate-mark{color:var(--red);font-size:24px;text-shadow:0 0 14px rgba(226,59,50,.24)}
.gate-card h1{margin:14px 0 12px;font-size:clamp(31px,7vw,46px);line-height:1.04;font-weight:300;letter-spacing:-.035em}
.gate-card>p{margin:0 auto 26px;max-width:340px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.5}
.gate-form{display:flex;gap:10px}
.gate-form input{
  min-width:0;flex:1;height:50px;border:1px solid rgba(255,255,255,.46);border-radius:16px;
  padding:0 16px;background:rgba(255,255,255,.88);color:#252832;font-size:16px;outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70)
}
.gate-form input:focus{border-color:rgba(226,59,50,.72);box-shadow:0 0 0 4px rgba(226,59,50,.12)}
.gate-form button{
  height:50px;border:0;border-radius:16px;padding:0 20px;background:var(--red);color:#fff;
  font-weight:600;cursor:pointer;box-shadow:0 10px 24px rgba(226,59,50,.20)
}
.gate-error{min-height:22px;margin:13px 0 0!important;color:#fff!important;font-size:14px!important;font-weight:600}
.gate-line{display:block;width:62px;height:1px;margin:19px auto 0;background:rgba(255,255,255,.66)}
.locked-content{visibility:hidden}
.locked-content.unlocked{visibility:visible}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Более крупные подписи имён */
.star-label{font-size:22px;font-weight:520}

/* Контрастные подписи внизу на светлой части фона */
.hint,.progress{
  color:rgba(38,43,57,.92);background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.54);border-radius:999px;padding:8px 12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(45,50,65,.10)
}
.hint{bottom:3%;white-space:nowrap}
.progress{bottom:15px}

@media(max-width:720px){
  .gate-card{padding:34px 22px 30px}
  .gate-form{flex-direction:column}
  .gate-form button{width:100%}
  .star-label{font-size:19px}
  .hint{bottom:54px}
  .progress{bottom:12px}
}


/* Длинная подпись с именами коллег */
.hint{
  width:max-content;
  max-width:min(820px,calc(100vw - 190px));
  white-space:normal;
  text-align:center;
  line-height:1.4;
  letter-spacing:0;
}
@media(max-width:720px){
  .hint{
    max-width:calc(100vw - 28px);
    width:auto;
    left:14px;
    right:14px;
    transform:none;
    font-size:12px;
  }
}