/* css/firstday.css — «первый день» (лист 32, js/firstday.js):
   A · экран «как назовём доску?» · B · карта-подсказка 112 маркером + строки
   48 · C · лендинг приглашения /j/<code>. Одно золото на экран; всё временное
   уходит само (height/opacity 240, transform/opacity — §1). */

/* ── A · полноэкранный вопрос имени (без «назад») ── */
#fd-name{
  position:fixed; inset:0; z-index:70; background:var(--paper);
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:24px 16px calc(24px + var(--safe-bottom,0px));
}
#fd-name[hidden]{display:none;}
/* пока открыт вопрос имени — док и маскот не торчат из-под экрана (32·1 A) */
body.fd-ask #sk-dock, body.fd-ask #mascot{display:none;}
.fd-card{width:min(375px,100%); display:flex; flex-direction:column;}
.fd-hi{font-family:'Caveat',cursive; font-weight:700; font-size:24px; margin:8px 0 0;
  border-bottom:2px solid var(--graphite); padding-bottom:12px;}
.fd-ask{font-family:'Caveat',cursive; font-weight:700; font-size:20px; margin-top:16px;}
.fd-lbl{font-size:11px; letter-spacing:1.5px; color:var(--graphite-soft);
  text-transform:uppercase; margin-top:16px;}
.fd-inp{position:relative; display:flex; align-items:center; gap:8px;
  min-height:48px; padding:0 16px; margin-top:8px; border-radius:12px;
  background:var(--paper2);}
:root[data-theme="dark"] .fd-inp{background:var(--card);}
.fd-inp::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.fd-inp input{flex:1; min-width:0; border:none; background:none; font:inherit;
  font-size:16px; color:var(--graphite); outline:none;}
.fd-inp input::placeholder{color:var(--pencil); font-style:italic;}
.fd-inp svg{width:24px; height:24px; flex:none; color:var(--graphite-soft);}
.fd-hint{font-size:11px; line-height:1.35; color:var(--graphite-soft); margin-top:6px;}
.fd-gold{min-height:48px; margin-top:12px; width:100%;}
.fd-or{display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--pencil);
  font-size:13px;}
.fd-or i{flex:1; border-top:1.4px dashed var(--pencil-faint);}
.fd-ghost{width:100%; margin-top:8px;}

/* ── B · карта-подсказка 112 R16 маркером + чипы-примеры 32 ── */
#fd-hint[hidden],#fd-rows[hidden]{display:none;}
.fd-card112{
  position:relative; height:112px; margin:12px 0; padding:12px 16px;
  border-radius:16px; background:var(--marker); overflow:hidden;
  transition:height .24s ease, margin .24s ease, opacity .24s ease, padding .24s ease;
}
.fd-card112::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}
.fd-card112.bye{height:0; margin:0; padding-top:0; padding-bottom:0; opacity:0;}
.fd-card112 .fd-h{font-family:'Caveat',cursive; font-weight:700; font-size:20px;
  line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fd-card112 .fd-s{font-size:13px; color:var(--graphite-soft); margin:2px 0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fd-chips{display:flex; gap:8px; overflow:hidden;}
.fd-ex{position:relative; min-height:32px; padding:0 12px; border:none;
  background:var(--paper2); cursor:pointer; border-radius:8px;
  font-family:'Neucha',cursive; font-size:13px; color:var(--graphite);
  white-space:nowrap;}
:root[data-theme="dark"] .fd-ex{background:var(--card);}
.fd-ex::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);}
.fd-ex::after{content:""; position:absolute; inset:-4px;}   /* мишень 40 */

/* временные строки 48 (уходят сами: 2+ человека / экскурсия пройдена) */
#fd-rows{display:flex; flex-direction:column; gap:8px; margin:12px 0;}
.fd-row48{
  position:relative; display:flex; align-items:center; gap:12px; min-height:48px;
  padding:0 12px; border:none; background:var(--paper2); cursor:pointer;
  border-radius:12px; font:inherit; font-size:15px; color:var(--graphite);
  text-align:left;
}
:root[data-theme="dark"] .fd-row48{background:var(--card);}
.fd-row48::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.fd-row48 > svg{width:24px; height:24px; flex:none; color:var(--graphite-soft);}
.fd-row48 .tx{flex:1; min-width:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.fd-row48 .rt{flex:none; font-size:12px; color:var(--meta);}
.fd-row48 .chev{width:20px; height:20px; color:var(--pencil);}

/* ── C · лендинг приглашения ── */
#join-land{
  position:fixed; inset:0; z-index:75; background:var(--paper);
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:0 16px calc(24px + var(--safe-bottom,0px));
}
#join-land[hidden]{display:none;}
.jl-card{width:min(375px,100%); display:flex; flex-direction:column;}
.jl-head{display:flex; align-items:baseline; justify-content:space-between;
  min-height:56px; padding-top:16px; border-bottom:2px solid var(--graphite);}
.jl-logo{font-family:'Caveat',cursive; font-weight:700; font-size:24px;}
.jl-sub{font-size:12px; color:var(--graphite-soft);}
#jl-body{display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:24px;}
.jl-ava{
  position:relative; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:'Caveat',cursive; font-weight:700;
  font-size:22px; color:#fff; overflow:hidden; flex:none;
}
.jl-ava::after{content:""; position:absolute; inset:-4px; border:2px solid var(--gold);
  border-radius:50%; filter:url(#squiggle);}
.jl-ava.sm::after{inset:-2px; border-width:1.5px; border-color:var(--pencil-faint);}
.jl-ava img{width:100%; height:100%; object-fit:cover; display:block;}
.jl-ava.sm{font-size:14px;}
.jl-nm{font-family:'Caveat',cursive; font-weight:700; font-size:24px; line-height:28px;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.jl-ava + .jl-nm{margin-top:12px;}
.jl-meta{font-size:13px; color:var(--graphite-soft); margin:8px 0 16px;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.jl-avs{display:flex; height:32px;}
.jl-avs .jl-ava{margin-left:-6px;}
.jl-avs .jl-ava:first-child{margin-left:0;}
.jl-join{width:100%; min-height:48px; margin-top:24px;}
.jl-later{width:100%; margin-top:8px;}
.jl-hint{font-size:12px; color:var(--graphite-soft); margin-top:16px;}
.jl-hint + .jl-hint{margin-top:4px;}
.jl-legal{font-size:11px; color:var(--pencil); margin-top:24px;}
/* состояние «ссылка устарела»: red dashed (32·2) */
.jl-gone{position:relative; width:100%; margin-top:24px; padding:16px;
  border-radius:16px; display:flex; flex-direction:column; gap:8px;
  align-items:center;}
.jl-gone::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:16px; filter:url(#squiggle);}
.jl-gone-t{font-family:'Caveat',cursive; font-weight:700; font-size:17px;
  color:var(--red-t);}
.jl-gone-s{font-size:11px; color:var(--graphite-soft);}