/* ============================================================
   JESUS INSIDE — меловая доска, бумажные стикеры, рисованные кнопки
   ============================================================ */

@font-face{font-family:'Caveat';src:url(/assets/fonts/Caveat-500.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Caveat';src:url(/assets/fonts/Caveat-700.ttf) format('truetype');font-weight:700;font-display:swap}
/* Neucha — печатный рукописный шрифт для стикеров и листа (как на макете) */
@font-face{font-family:'Neucha';src:url(/assets/fonts/neucha-cyrillic-400-normal.woff2) format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Neucha';src:url(/assets/fonts/neucha-latin-400-normal.woff2) format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url(/assets/fonts/Manrope-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url(/assets/fonts/Manrope-600.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url(/assets/fonts/Manrope-800.ttf) format('truetype');font-weight:800;font-display:swap}

:root{
  --bg:#131110;
  --bg2:#191614;
  --ink:#f2ede4;
  --muted:#9b948a;
  --dim:#6d6760;
  --yellow:#e9b32e;
  --yellow2:#f6cd5b;
  --paper:#f2e7cc;
  --paper2:#e8dcbe;
  --paper-ink:#2b2620;
  --lilac:#c8a5ec;
  --lilac-ink:#2a1c3a;
  --mint:#9ed9b6;
  --mint-ink:#12301f;
  --blue:#93bde9;
  --blue-ink:#122436;
  --danger:#e0736b;
  --chalk:rgba(255,255,255,.85);
  --chalk-dim:rgba(255,255,255,.28);
  --radius:18px;
  --shadow:0 18px 40px rgba(0,0,0,.55);
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hand:'Neucha','Caveat','Manrope',cursive;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font);background-color:var(--bg);color:var(--ink);
  background-image:url('/assets/chalk/bg/chalkboard.jpg?v=d1');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  overflow:hidden;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}

/* нарисованная меловая доска — фон всего приложения */
.chalk{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:#131110;
  background-image:url('/assets/chalk/bg/chalkboard.jpg?v=d1');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.chalk:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.35) 100%);
}

/* ---------------------------------------------------- каркас */

#app{height:100%;display:flex;justify-content:center}
.screen{
  width:100%;max-width:440px;height:100%;display:flex;flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom));
  position:relative;overflow:hidden;
}
.screen.wide{max-width:100%}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding-bottom:12px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grow{flex:1;min-width:0}
.center{display:flex;align-items:center;justify-content:center}
.col{display:flex;flex-direction:column}
.hidden{display:none!important}

/* ---------------------------------------------------- типографика */

h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em}
h1{font-size:30px;line-height:1.1}
h2{font-size:22px;line-height:1.2}
h3{font-size:16px}
.small{font-size:12.5px;color:var(--muted)}
.tiny{font-size:11px;color:var(--dim)}
.mute{color:var(--muted)}
.hand{font-family:var(--hand);font-size:22px;line-height:1.15}
.eyebrow{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}

.chalk-text{
  font-family:var(--hand);color:#fff;
  text-shadow:0 0 1px rgba(255,255,255,.5),0 0 12px rgba(255,255,255,.08);
}

/* меловое подчёркивание заголовков экранов */
.chalk-under{position:relative;display:inline-block;padding-bottom:4px}
.chalk-under:after{
  content:'';position:absolute;left:-2px;right:-2px;bottom:-1px;height:6px;
  background:var(--u,url('/assets/chalk/chalk/underline-2.png')) center / 100% 100% no-repeat;
  opacity:.8;pointer-events:none;
}

/* меловой разделитель секций */
.chalk-sep{
  height:16px;margin:16px 0;flex:0 0 auto;
  background:var(--sep,url('/assets/chalk/chalk/separator-1.png')) center / 100% 100% no-repeat;
  opacity:.65;pointer-events:none;
}

/* ---------------------------------------------------- иконки */

.icon-img{
  width:22px;height:22px;display:inline-block;flex:0 0 auto;object-fit:contain;
  vertical-align:middle;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.12));
}
.icon-img.sm{width:16px;height:16px}
.icon-img.lg{width:30px;height:30px}
.icon-img.xl{width:64px;height:64px}

/* ---------------------------------------------------- кнопки */

/* картинка-кнопка режется на 9 частей: углы и меловой край не тянутся,
   растягивается только середина — поэтому кнопка не превращается в овал */
.btn{
  --btn-img:url('/assets/chalk/buttons/btn-yellow-2.png');
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;padding:14px 22px;margin:0;
  border:0 solid transparent;border-radius:0;box-shadow:none;background:none;
  border-image:var(--btn-img) 56 fill / 16px stretch;
  color:#241a06;font:inherit;font-weight:800;font-size:16px;line-height:1.15;
  cursor:pointer;overflow:visible;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,200,60,.3));
  transition:transform .14s ease, filter .14s ease;
}
.btn:active{transform:scale(.97) rotate(-.5deg)}
.btn:disabled{filter:grayscale(.75) brightness(.65);cursor:default}
.btn:focus-visible{outline:2px dashed rgba(255,255,255,.4);outline-offset:2px}
.btn .icon-img{filter:brightness(.25)}
.btn.ghost .icon-img,.btn.dark .icon-img,.btn.icon .icon-img{
  filter:drop-shadow(0 0 6px rgba(255,255,255,.16));
}

/* пробегающий блик */
.btn::after{
  content:'';position:absolute;inset:3px;border-radius:9px;pointer-events:none;
  background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.6) 50%,transparent 57%) no-repeat;
  background-size:250% 100%;background-position:100% 0;
  animation:shine 4.6s ease-in-out infinite;
}
.btn.ghost::after,.btn.dark::after{opacity:.28;animation-duration:6.4s}
.btn.icon::after,.btn:disabled::after{display:none}
@keyframes shine{0%,68%{background-position:100% 0}100%{background-position:0 0}}

/* лёгкая тряска у кнопки, на которую сейчас показывает зайчик */
.btn[data-bunny]{animation:nudge 3.8s ease-in-out infinite}
@keyframes nudge{
  0%,84%,100%{transform:none}
  87%{transform:rotate(-1.3deg) translateX(-1.5px)}
  90%{transform:rotate(1.3deg) translateX(1.5px)}
  93%{transform:rotate(-.9deg) translateX(-1px)}
  96%{transform:rotate(.5deg)}
}

.btn.ghost,.btn.dark{
  --btn-img:url('/assets/chalk/buttons/btn-dark-1.png');
  color:var(--ink);
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.55));
}
.btn.ghost.d2,.btn.dark.d2{--btn-img:url('/assets/chalk/buttons/btn-dark-3.png')}
.btn.ghost.d3,.btn.dark.d3{--btn-img:url('/assets/chalk/buttons/btn-dark-5.png')}
.btn.ghost.d4,.btn.dark.d4{--btn-img:url('/assets/chalk/buttons/btn-dark-6.png')}

.btn.sm{width:auto;min-height:38px;padding:9px 15px;font-size:13.5px;gap:6px;border-image-width:12px}
.btn.icon{
  width:46px;height:46px;min-height:46px;padding:0;flex:0 0 auto;color:var(--ink);
  border-image:none;
  background:url('/assets/chalk/buttons/square-dark-1.png') center / 100% 100% no-repeat;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
.btn.icon.sq2{background-image:url('/assets/chalk/buttons/square-dark-2.png')}
.btn.icon.sq3{background-image:url('/assets/chalk/buttons/square-dark-3.png')}
.btn.icon .icon-img{width:20px;height:20px}
.btn.icon.slim{width:30px;height:40px;min-height:40px;background:none;filter:none}

/* меловая обводка — как на доске */
.chalk-border{position:relative}
.chalk-border:before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1.4px solid rgba(255,255,255,.16);
}

/* ---------------------------------------------------- карточки */

.card{
  background:rgba(0,0,0,.22);
  border:1.4px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;
}
.card.flat{background:rgba(0,0,0,.14)}

/* ---------------------------------------------------- чипы и плашки */

.pill{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border:0 solid transparent;border-radius:0;box-shadow:none;background:none;
  border-image:url('/assets/chalk/buttons/btn-dark-1.png') 56 fill / 11px stretch;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;
}
button.pill{cursor:pointer}
.pill.yellow{border-image-source:url('/assets/chalk/buttons/btn-yellow-2.png');color:#2b1e05}
.pill.lilac{color:#dcc6f5}
.pill.mint{color:#c8ecd8}
.pill.blue{color:#c5dcf6}
.pill .icon-img{width:15px;height:15px}
.pill.yellow .icon-img{filter:brightness(.25)}
.pill.dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------------------------------------------------- аватары */

.ava{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(0,0,0,.28);border:0;color:var(--yellow2);
  overflow:hidden;position:relative;
}
.ava>img.avatar-img{width:88%;height:88%;object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.2))}
.ava>img:not(.avatar-img){width:100%;height:100%;object-fit:cover;border-radius:50%}
.ava .icon-img{width:26px;height:26px}
.ava.lg{width:64px;height:64px}
.ava.lg .icon-img{width:38px;height:38px}
.ava.sm{width:32px;height:32px}
.ava.ring{box-shadow:0 0 0 3px rgba(233,179,46,.18), 0 0 20px rgba(233,179,46,.15)}
.ava.pick{cursor:pointer;transition:transform .15s}
.ava.pick:active{transform:scale(.93)}
.ava.pick.on{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(233,179,46,.28)}

/* ---------------------------------------------------- поле ввода */

.input,.textarea{
  width:100%;background:none;
  border:0 solid transparent;border-radius:0;box-shadow:none;
  border-image:url('/assets/chalk/buttons/btn-dark-6.png') 56 fill / 14px stretch;
  color:var(--ink);padding:14px 18px;font:inherit;font-size:15px;outline:none;
  transition:filter .15s ease;color-scheme:dark;
}
.input:focus,.textarea:focus{filter:drop-shadow(0 0 9px rgba(255,200,60,.35))}
.textarea{resize:none;min-height:120px;line-height:1.4}
select.input{appearance:none}
select.input option,select option{background:#1d1b18;color:#f3ead7}
::placeholder{color:#8d857a}
.search-field{position:relative}
.search-field>.icon-img{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:2;opacity:.8}
.search-field .input{padding-left:48px}

/* ---------------------------------------------------- стикеры */

.sticker{
  position:relative;width:100%;aspect-ratio:296 / 272;
  padding:12% 12% 11%;
  border:0;border-radius:0;box-shadow:none;
  background:var(--paper,url('/assets/chalk/stickers/cream-2.png')) center / 100% 100% no-repeat;
  color:var(--paper-ink);
  font-family:var(--hand);font-size:clamp(17px,4.6vw,22px);line-height:1.12;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));
  transform:rotate(var(--tilt,0deg)) translate(var(--dx,0px),var(--dy,0px));
  transform-origin:center;
  animation:stickIn .42s cubic-bezier(.2,1.4,.45,1) both;
  word-break:break-word;overflow-wrap:anywhere;
}
.sticker:after{display:none}
.sticker.taped:before{
  content:'';position:absolute;top:-7%;left:calc(50% + var(--tape-x,0px));
  width:38%;aspect-ratio:500 / 215;z-index:5;pointer-events:none;
  transform:translateX(-50%) rotate(var(--tape-rot,-2deg));
  background:var(--tape,url('/assets/chalk/tape/tape-1.png')) center / 100% 100% no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.sticker.lilac{color:var(--lilac-ink)}
.sticker.blue{color:var(--blue-ink)}
.sticker.mint{color:var(--mint-ink)}
.sticker.ghost{
  aspect-ratio:auto;padding:18px;background:rgba(0,0,0,.16);
  border:1.5px dashed rgba(255,255,255,.18);color:rgba(255,255,255,.5);
  filter:none;transform:none;animation:none;
}
.sticker.ghost:before{display:none}
.sticker-text{position:relative;z-index:2;height:100%;overflow:hidden}
.sticker.has-ref{display:flex;flex-direction:column}
.sticker.has-ref .sticker-text{height:auto;flex:0 1 auto;min-height:0}
.sticker-ref{
  position:relative;z-index:2;flex:0 0 auto;margin-top:7px;
  font-family:Manrope,sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.03em;
  opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sticker.stacked{filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.sticker.stacked,.board .sticker.stacked{padding-right:17%;padding-bottom:19%}
.sticker.stacked .sticker-ref{margin-right:30%}
.sticker.stacked .page-badge{right:19%;bottom:9%}
.sticker.stacked .edit-btn{right:8%;bottom:8%}
/* маленький стикер на старте */
.sticker.mini{width:70%;margin:16px 0 8px 4%;font-size:21px}

.page-badge{
  position:absolute;right:16%;bottom:4%;z-index:6;padding:2px 7px;
  border:0;border-radius:8px;background:rgba(43,38,32,.78);color:#f6ecd2;
  font:800 10px Manrope,sans-serif;letter-spacing:.04em;cursor:pointer;
}
.edit-btn{
  position:absolute;right:5%;bottom:3%;z-index:6;width:24px;height:24px;padding:0;
  border:0;border-radius:50%;background:rgba(43,38,32,.12);cursor:pointer;
  display:grid;place-items:center;
}
.edit-btn .icon-img{width:13px;height:13px;filter:brightness(.25)}
.star-btn{
  position:absolute;left:5%;top:5%;width:26px;height:26px;padding:0;z-index:7;
  border:0;border-radius:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.star-btn .icon-img{width:19px;height:19px;opacity:.3;filter:brightness(.2)}
.star-btn.on .icon-img{opacity:1;filter:drop-shadow(0 0 6px rgba(233,179,46,.7))}
.star-btn.on{animation:pop .35s}
/* крестик «снять наклейку» */
.del-btn{
  position:absolute;right:4%;top:4%;width:26px;height:26px;padding:0;z-index:7;
  border:0;border-radius:50%;background:rgba(43,38,32,.1);cursor:pointer;
  display:grid;place-items:center;
}
.del-btn .icon-img{width:12px;height:12px;opacity:.55;filter:brightness(.2)}
.del-btn:active{background:rgba(224,115,107,.5)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

@keyframes stickIn{
  0%{opacity:0;transform:rotate(calc(var(--tilt,0deg) - 4deg)) translate(var(--dx,0px),var(--dy,0px)) scale(.84)}
  60%{opacity:1;transform:rotate(calc(var(--tilt,0deg) + 1deg)) translate(var(--dx,0px),var(--dy,0px)) scale(1.02)}
  100%{opacity:1;transform:rotate(var(--tilt,0deg)) translate(var(--dx,0px),var(--dy,0px)) scale(1)}
}

/* лист для записи мысли: стопка бумаги в верхней части экрана, кнопки сразу под ней */
.pad-stack{
  position:relative;flex:0 0 auto;width:calc(100% - 20px);margin:14px 10px 0;
  aspect-ratio:336 / 306;max-height:46vh;
}
.pad-stack .paper{display:none}
.pad-stack .paper.top{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:20% 17% 19% 16%;
  background:url('/assets/chalk/stickers/cream-stack-1.png') center / 100% 100% no-repeat;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.55));
  transform:rotate(-1.2deg);
}
.pad-stack .paper.top:before{
  content:'';position:absolute;left:-9%;top:6%;width:30%;aspect-ratio:500 / 191;z-index:3;
  background:url('/assets/chalk/tape/tape-2.png') center / 100% 100% no-repeat;
  transform:rotate(-38deg);pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.pad-input{
  flex:1;width:100%;min-height:0;border:0;outline:none;background:transparent;resize:none;
  font-family:var(--hand);font-weight:700;font-size:30px;line-height:1.14;color:#2b2620;padding:0;
  overflow:hidden;
}
.pad-input::placeholder{color:rgba(43,38,32,.34)}
.pad-page{
  position:absolute;right:19%;bottom:17%;z-index:4;
  font:800 10px Manrope,sans-serif;color:rgba(43,38,32,.55);
}

/* панель кнопок под листом и под доской */
.tools{display:flex;align-items:center;gap:10px;padding:16px 6px 8px;flex:0 0 auto}
.tools .btn{width:auto}
.btn.glue{min-height:46px;padding:12px 20px;font-size:15px}

/* ---------------------------------------------------- доска */

.board{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;padding:18px 6px 22px}
.board .sticker{font-size:18px;font-weight:700;line-height:1.08;padding:21% 12% 13%}
.board .sticker-text{height:100%}
.board .sticker-ref{font-size:11px;margin-top:6px}

/* ---------------------------------------------------- шапка */

.topbar{display:flex;align-items:center;gap:10px;padding:2px 0 10px;flex:0 0 auto}
.topbar .title{font-weight:800;font-size:15px}
.topbar .sub{font-size:11.5px;color:var(--muted)}
.topbar.big{padding:10px 6px 4px}
.topbar.big .title{font-size:28px;letter-spacing:-.02em}
.topbar.big .sub{font-size:13px;margin-top:4px}
.pill.counter{cursor:pointer;font-size:15px;padding:10px 18px;color:#fff;border-image-width:14px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}

/* сигнал «есть новое от лидера»: синий кружок с восклицательным знаком */
.alert-btn{
  position:relative;width:40px;height:40px;flex:0 0 auto;margin-right:4px;
  display:grid;place-items:center;cursor:pointer;padding:0;
  border:2px solid rgba(255,255,255,.92);border-radius:50%;color:#fff;
  background:radial-gradient(circle at 35% 30%,#8ecbff,#3f97e6 72%);
  box-shadow:0 0 14px rgba(90,170,255,.55),0 4px 8px rgba(0,0,0,.4);
}
.alert-btn b{font:800 22px/1 var(--font)}
.alert-btn:active{transform:scale(.95)}
.alert-btn.wiggle{animation:wiggle 2.6s ease-in-out infinite}
.alert-btn .dot{
  position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:9px;
  background:var(--yellow);color:#1a1408;font-size:10px;font-weight:800;
  display:grid;place-items:center;padding:0 4px;border:2px solid #14120f;
}
@keyframes wiggle{
  0%,80%,100%{transform:rotate(0) scale(1)}
  84%{transform:rotate(-9deg) scale(1.06)}
  88%{transform:rotate(8deg) scale(1.06)}
  92%{transform:rotate(-6deg) scale(1.04)}
  96%{transform:rotate(3deg) scale(1)}
}
.shake-lines{position:absolute;inset:-9px;pointer-events:none;opacity:.75}
.shake-lines i{position:absolute;width:6px;height:1.6px;background:#fff;border-radius:2px}
.shake-lines i:nth-child(1){top:2px;left:-2px;transform:rotate(-40deg)}
.shake-lines i:nth-child(2){top:-3px;left:calc(50% - 3px);transform:rotate(90deg)}
.shake-lines i:nth-child(3){top:2px;right:-2px;transform:rotate(40deg)}
.shake-lines i:nth-child(4){bottom:2px;left:-2px;transform:rotate(40deg)}
.shake-lines i:nth-child(5){top:calc(50% - 1px);left:-7px}
.shake-lines i:nth-child(6){top:calc(50% - 1px);right:-7px}

/* кнопка Библия с бейджем */
.bible-btn{
  position:relative;display:flex;align-items:center;gap:8px;flex:0 0 auto;
  min-height:46px;padding:11px 18px;
  border:0 solid transparent;border-radius:0;box-shadow:none;background:none;
  border-image:url('/assets/chalk/buttons/btn-dark-3.png') 56 fill / 14px stretch;
  color:var(--ink);font:inherit;font-weight:700;font-size:15px;cursor:pointer;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.55));
}
.bible-btn:active{transform:scale(.97) rotate(-.5deg)}
.bible-btn.has-new{filter:drop-shadow(0 6px 7px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(200,165,236,.55))}
.bible-btn .badge{
  position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;border-radius:10px;
  background:var(--lilac);color:#231533;font-size:11px;font-weight:800;
  display:grid;place-items:center;padding:0 4px;border:2px solid #14120f;
  animation:bump 2.4s ease-in-out infinite;
}
@keyframes bump{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.22)}86%{transform:scale(1)}}

/* ---------------------------------------------------- модалка / лист */

.sheet-mask{
  position:fixed;inset:0;background:rgba(6,5,4,.62);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;z-index:60;
  animation:fade .2s ease both;
}
.sheet{
  width:100%;max-width:440px;max-height:88%;overflow-y:auto;
  background:#1b1714;
  border-radius:20px 20px 0 0;border-top:1.4px solid rgba(255,255,255,.12);
  padding:14px 16px max(18px,env(safe-area-inset-bottom));
  animation:sheetUp .28s cubic-bezier(.2,.9,.3,1) both;
}
.sheet.grab:before{content:'';display:block;width:44px;height:4px;border-radius:3px;
  background:rgba(255,255,255,.2);margin:0 auto 12px}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.modal{
  position:fixed;inset:0;display:grid;place-items:center;padding:18px;z-index:70;
  background:rgba(6,5,4,.68);backdrop-filter:blur(4px);animation:fade .18s both;
}
.modal .box{
  width:100%;max-width:380px;background:#1d1916;
  border-radius:18px;border:1.4px solid rgba(255,255,255,.12);padding:20px;
  animation:boxIn .3s cubic-bezier(.2,1.3,.4,1) both;box-shadow:var(--shadow);
}
@keyframes boxIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------------------------------------------------- старт */

.greet{display:flex;align-items:flex-start;gap:12px;padding:6px 4px 0}
.greet h1{font-size:34px;margin:3px 0 10px}
.greet .pill{font-size:14px;padding:8px 14px}
.greet .small{font-size:14px}
.ava-link{cursor:pointer;flex:0 0 auto}

/* проповедник: меловая рамка; с портретом — имя поверх фото, без портрета — имя мелом */
.preacher-card{
  position:relative;margin:16px 8px 0;overflow:hidden;
  border:2px solid rgba(255,255,255,.8);border-radius:4px;background:rgba(0,0,0,.3);
  box-shadow:4px 5px 0 -1px rgba(255,255,255,.14),0 16px 30px rgba(0,0,0,.5);
  transform:rotate(-.8deg);
  animation:fade .45s ease both;
}
.preacher-card .photo{height:220px;background:#171412;overflow:hidden}
.preacher-card .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.preacher-card .meta{
  position:absolute;left:0;right:0;bottom:0;padding:38px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
}
.preacher-card .eyebrow{text-transform:none;letter-spacing:0;font-size:16px;font-weight:600;color:#d8d2c8}
.preacher-card .pname{font-size:30px;font-weight:800;line-height:1.05}
.preacher-card.plain .meta{position:relative;padding:20px 20px 26px;background:none}
.preacher-card.plain .pname{
  font-family:var(--hand);font-weight:700;font-size:60px;line-height:1;color:#fff;margin-top:6px;
  text-shadow:0 0 1px rgba(255,255,255,.5),0 0 14px rgba(255,255,255,.12);
}

.mission{display:flex;flex-direction:column;gap:0;margin:24px 8px 0}
.mission-title{font-size:20px;font-weight:800;margin-bottom:8px}
/* цели написаны мелом — тем же почерком, что и стикеры */
.mission .item{
  display:flex;align-items:center;gap:13px;padding:8px 0;min-width:0;
  font-family:var(--hand);font-size:26px;line-height:1.1;color:#fff;
  text-shadow:0 0 1px rgba(255,255,255,.4);
}
.mission .item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mission .item .tiny{flex:0 0 auto;font-family:var(--font);font-size:14px;color:var(--muted);font-weight:700;text-shadow:none}
.mission .marker{
  position:relative;width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,.8);display:grid;place-items:center;
}
.mission .marker.on{border-color:var(--yellow2);background:rgba(233,179,46,.22)}
.mission .marker .icon-img{width:16px;height:16px}
.mission .item.done .tiny{color:var(--yellow2)}

.chalk-face{display:flex;flex-direction:column;align-items:center;gap:6px}
.chalk-face .icon-img{width:108px;height:108px;opacity:.85}
.chalk-face-initials{font-family:var(--hand);font-size:18px;color:rgba(233,179,46,.9)}

/* ---------------------------------------------------- чек-ин */

.moods{display:flex;justify-content:space-between;gap:2px;margin:10px 0 14px}
.mood{
  width:64px;height:64px;padding:0;cursor:pointer;
  border:0;border-radius:0;background:none;box-shadow:none;
  display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.2,1.5,.4,1), filter .18s;
}
.mood .icon-img{width:100%;height:100%}
.mood-stat{width:36px;height:36px}
.mood:active{transform:scale(.9)}
.mood.on{transform:translateY(-4px) scale(1.06);
  filter:drop-shadow(0 0 12px rgba(255,200,60,.5))}

.song-list{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.song{
  display:flex;align-items:center;gap:11px;padding:13px 16px;min-height:50px;cursor:pointer;
  border:0 solid transparent;background:none;
  border-image:url('/assets/chalk/buttons/btn-dark-5.png') 56 fill / 14px stretch;
  transition:transform .18s, filter .18s;position:relative;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.4));
}
.song:nth-child(2n){border-image-source:url('/assets/chalk/buttons/btn-dark-1.png')}
.song:active{transform:scale(.985)}
.song.on{border-image-source:url('/assets/chalk/buttons/btn-yellow-2.png');color:#241a06;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.4)) drop-shadow(0 0 9px rgba(255,200,60,.4))}
.song.on .eq i{background:#241a06}
.song .eq{display:flex;gap:2px;align-items:flex-end;height:14px;width:14px}
.song .eq i{width:3px;background:var(--yellow);border-radius:2px;height:4px}
.song.on .eq i{animation:eq .9s ease-in-out infinite alternate}
.song.on .eq i:nth-child(2){animation-delay:.15s}
.song.on .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{from{height:3px}to{height:14px}}
.song .name{font-weight:600;font-size:14.5px}

/* ---------------------------------------------------- прогресс */

.dots{display:flex;gap:6px;justify-content:center;margin:4px 0 14px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14);transition:.3s}
.dots i.on{background:var(--yellow);box-shadow:0 0 10px rgba(233,179,46,.5)}
.dots i.cur{background:var(--yellow);transform:scale(1.5)}

.bar{
  height:14px;border:0 solid transparent;border-radius:0;overflow:visible;background:none;
  border-image:url('/assets/chalk/buttons/bar-track-1.png') 26 fill / 7px stretch;
  display:flex;align-items:center;padding:0 4px;
}
.bar>i{
  display:block;height:5px;border-radius:0;
  background:var(--yellow2);
  box-shadow:0 0 8px rgba(233,179,46,.55);
  transition:width .6s cubic-bezier(.2,.9,.3,1);
}

/* ---------------------------------------------------- квиз */

.q-card{
  position:relative;padding:30px 24px 26px;margin:4px 4px 16px;
  border:0 solid transparent;border-radius:0;box-shadow:none;background:none;
  border-image:url('/assets/chalk/stickers/cream-2.png') 68 fill / 12px stretch;
  color:#2b2620;
  font-family:var(--hand);font-weight:700;font-size:25px;line-height:1.12;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.45));
  transform:rotate(-.7deg);
}
.q-card:before{
  content:'';position:absolute;left:50%;top:-14px;width:96px;aspect-ratio:500 / 159;pointer-events:none;
  background:url('/assets/chalk/tape/tape-5.png') center / 100% 100% no-repeat;transform:translateX(-50%) rotate(-3deg);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.q-card.verse{border-image-source:url('/assets/chalk/stickers/lavender-1.png');color:#241636}
.opt{
  display:flex;align-items:center;gap:11px;padding:14px 16px;cursor:pointer;min-height:54px;
  border:0 solid transparent;border-radius:0;box-shadow:none;background:none;
  border-image:url('/assets/chalk/buttons/btn-dark-5.png') 56 fill / 15px stretch;
  font-size:15px;font-weight:600;transition:transform .18s, filter .18s, opacity .18s;margin-bottom:10px;position:relative;
  color:var(--ink);filter:drop-shadow(0 5px 6px rgba(0,0,0,.45));
}
.opt:nth-child(3n+2){border-image-source:url('/assets/chalk/buttons/btn-dark-1.png')}
.opt:nth-child(3n){border-image-source:url('/assets/chalk/buttons/btn-dark-6.png')}
.opt:active{transform:scale(.99)}
.opt .k{
  width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;
  border:1.4px solid rgba(255,255,255,.25);border-radius:50%;
  font-size:11.5px;font-weight:800;color:var(--muted);
}
.opt.right{
  border-image:url('/assets/chalk/stickers/mint-1.png') 68 fill / 10px stretch;
  color:var(--mint-ink);filter:drop-shadow(0 5px 6px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(158,217,182,.4));
}
.opt.right .k{background:rgba(18,48,31,.14);border-color:rgba(18,48,31,.3);color:#12301f}
.opt.wrong{filter:drop-shadow(0 0 8px rgba(224,115,107,.55))}
.opt.wrong .k{background:rgba(224,115,107,.3);border-color:transparent;color:#f3c0bb}
.opt.dim{opacity:.45}
.opt .plus{margin-left:auto;font-weight:800;color:var(--mint)}
.opt.right .plus{color:#12301f}
.opt.right:not(.dim) .plus{animation:pop .4s}

.why{
  margin-top:2px;margin-bottom:14px;padding:12px 14px;border-radius:12px;font-size:13.5px;
  background:rgba(0,0,0,.28);border-left:3px solid var(--yellow);color:#ded8ce;
  animation:fadeUp .3s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------- результат */

.score-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:6px 0}
.big-score{
  font-family:var(--hand);font-size:96px;line-height:.9;color:var(--yellow);
  text-shadow:0 0 30px rgba(233,179,46,.35);text-align:center;letter-spacing:-2px;
}
.sparkle{
  position:absolute;width:38px;height:38px;object-fit:contain;pointer-events:none;
  opacity:.85;filter:drop-shadow(0 0 7px rgba(255,255,255,.28));
}
.sparkle.s1{left:14%;top:-4px;transform:rotate(-12deg)}
.sparkle.s2{right:13%;bottom:0;width:28px;height:28px;transform:rotate(16deg)}
.count{display:inline-block}
.medal{
  width:100px;height:100px;display:grid;place-items:center;margin:16px auto 12px;
  border:0;border-radius:0;background:none;color:var(--yellow2);position:relative;
  animation:spinIn .8s cubic-bezier(.2,1.2,.4,1) both;
}
.medal .icon-img{width:96px;height:96px}
.medal.glow .icon-img{filter:drop-shadow(0 0 26px rgba(233,179,46,.6))}
@keyframes spinIn{from{transform:rotate(-40deg) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ---------------------------------------------------- профиль */

.hero-points{font-size:44px;font-weight:800;color:var(--yellow);letter-spacing:-1.5px;line-height:1}
.lb{display:flex;flex-direction:column;gap:6px}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;font-size:14px}
.lb-row.me{background:rgba(233,179,46,.1);border:1px solid rgba(233,179,46,.35)}
.lb-row .place{width:22px;text-align:center;font-weight:800;color:var(--muted);font-size:12.5px}
.lb-row.me .place{color:var(--yellow)}
.lb-row .pts{margin-left:auto;font-weight:800;font-size:13.5px}

.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.badge .disc{
  width:58px;height:58px;display:grid;place-items:center;position:relative;
  border:0;border-radius:0;background:none;
}
.badge .disc .icon-img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 9px rgba(233,179,46,.35))}
.badge.off .disc .icon-img{opacity:.72;filter:grayscale(.75) brightness(.9)}
.badge .lbl{font-size:10.5px;color:var(--muted);line-height:1.15}
.badge.on .disc{animation:glowPulse 3.4s ease-in-out infinite}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(233,179,46,0))}
  50%{filter:drop-shadow(0 0 10px rgba(233,179,46,.4))}}

/* прогресс до приза */
.prize-bar{position:relative;margin-top:12px}
.prize-bar .lbl{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.prize-bar .lbl b{color:var(--yellow2)}

/* ---------------------------------------------------- графики */

.chart{display:flex;align-items:flex-end;gap:8px;height:96px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.chart .col i{
  display:block;width:100%;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--yellow2),rgba(233,179,46,.4));
  min-height:4px;transition:height .8s cubic-bezier(.2,.9,.3,1);
  animation:growUp .8s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes growUp{from{height:0!important;opacity:.2}}
.chart .col span{font-size:9.5px;color:var(--dim);white-space:nowrap}
.chart .col b{font-size:10.5px;color:var(--muted);font-weight:700}

.spark{width:100%;height:70px;overflow:visible}
.spark polyline{fill:none;stroke:var(--yellow);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(233,179,46,.35))}
.spark circle{fill:var(--yellow);stroke:#14120f;stroke-width:1.5}
.spark .area{fill:url(#sparkGrad);stroke:none;opacity:.35}

/* ---------------------------------------------------- книги Библии */

.book-tile,.chapter-tile{
  --sq:url('/assets/chalk/buttons/square-dark-1.png');
  border:0;border-radius:0;box-shadow:none;cursor:pointer;color:var(--ink);
  background:var(--sq) center / 100% 100% no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8% 6%;text-align:center;font-weight:600;line-height:1.15;
}
.book-tile{aspect-ratio:1 / 1;font-size:11.5px;overflow:hidden}
.book-tile:nth-child(3n+2),.chapter-tile:nth-child(3n+2){--sq:url('/assets/chalk/buttons/square-dark-2.png')}
.book-tile:nth-child(3n),.chapter-tile:nth-child(3n){--sq:url('/assets/chalk/buttons/square-dark-3.png')}
.book-tile .icon-img{width:30px;height:30px}
.chapter-tile{aspect-ratio:1 / 1;font-size:15px;font-weight:700;padding:0}
.book-tile:active,.chapter-tile:active{transform:scale(.97)}

/* ---------------------------------------------------- админ */

.tabs{display:flex;gap:6px;padding:0;border:0;border-radius:0;background:none;
  margin-bottom:14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  flex:1 1 auto;border:0 solid transparent;border-radius:0;box-shadow:none;background:none;
  border-image:url('/assets/chalk/buttons/btn-dark-1.png') 56 fill / 11px stretch;
  color:var(--muted);font:inherit;font-size:12px;font-weight:700;
  padding:10px 7px;cursor:pointer;transition:.18s;white-space:nowrap;min-width:0;
}
@media (max-width:360px){
  .tabs button{font-size:11px;padding:9px 7px}
}
.tabs button.on{
  border-image-source:url('/assets/chalk/buttons/btn-yellow-2.png');color:#2b1e05;
}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.stat{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:12px 10px;text-align:center}
.stat b{display:block;font-size:21px;font-weight:800;color:var(--yellow2)}
.stat span{font-size:10.5px;color:var(--muted);line-height:1.2;display:block;margin-top:2px}

.attention{display:flex;flex-direction:column;gap:8px}
.att{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  background:rgba(224,115,107,.08);border:1px solid rgba(224,115,107,.25);font-size:13px}
.att .icon-img{width:16px;height:16px;color:#e5a09a}

/* список */
.list{display:flex;flex-direction:column;gap:8px}
.li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.07);font-size:14px}
.li .grow{min-width:0}
.li .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .s{font-size:11.5px;color:var(--muted)}

/* ---------------------------------------------------- админ: поля, теги, карточки */

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.input.num{text-align:center;padding:10px 6px;touch-action:none;cursor:ns-resize;font-weight:800}
.input.num.scrub{filter:drop-shadow(0 0 10px rgba(255,200,60,.6));color:var(--yellow2)}

/* облако тегов */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{
  display:inline-flex;align-items:center;gap:6px;padding:7px 6px 7px 13px;
  border:0 solid transparent;background:none;
  border-image:url('/assets/chalk/buttons/btn-yellow-2.png') 56 fill / 10px stretch;
  color:#2b1e05;font-size:13px;font-weight:700;
}
.tag button{
  width:22px;height:22px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(43,30,5,.16);color:#2b1e05;font:800 14px/1 var(--font);
}
.tag.dark{border-image-source:url('/assets/chalk/buttons/btn-dark-1.png');color:var(--ink)}
.tag.dark button{background:rgba(255,255,255,.14);color:var(--ink)}

/* переключатель */
.sw{display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer;font-size:14.5px;font-weight:600}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw i{
  position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:14px;
  border:1.6px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);transition:.18s;
}
.sw i:after{
  content:'';position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;
  background:#cfc8bc;transition:.18s;
}
.sw input:checked + i{background:rgba(233,179,46,.3);border-color:var(--yellow2)}
.sw input:checked + i:after{left:23px;background:var(--yellow2);box-shadow:0 0 10px rgba(255,200,60,.7)}

/* ползунок */
.range{width:100%;height:30px;accent-color:#f6cd5b;touch-action:pan-y}
.range-row{display:flex;align-items:center;gap:12px}
.range-row b{flex:0 0 34px;text-align:center;font-size:20px;color:var(--yellow2)}

.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.sheet.tall{max-height:95%;min-height:82%}
.li .inline-name{
  width:100%;border:0;border-bottom:1.5px dashed rgba(255,255,255,.22);background:none;outline:none;
  color:var(--ink);font:inherit;font-weight:700;font-size:15px;padding:2px 0 3px;
}
.li .inline-name:focus{border-bottom-color:var(--yellow2)}
.obs{padding:11px 12px;border-radius:12px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08)}
.obs.warn{border-color:rgba(224,115,107,.45);background:rgba(224,115,107,.08)}
.obs .icon-img{width:26px;height:26px}
.kinds{display:flex;flex-wrap:wrap;gap:8px}
.person-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;padding:14px 2px}
.person-board .sticker{font-size:17px;padding:17% 11% 14%}
.big-pass{font-family:var(--hand);font-size:34px;color:var(--yellow2);text-align:center;letter-spacing:1px;user-select:all}

/* ---------------------------------------------------- зайчик */

/* солнечный зайчик: сидит на главной кнопке экрана и подпрыгивает при прокрутке,
   а если кнопка ушла за край — скачет у края и показывает, куда листать */
.bunny{
  position:fixed;left:0;top:0;width:0;height:0;z-index:85;pointer-events:none;
  transition:opacity .25s;
}
.bunny.off{opacity:0}
/* след на лету: светлые точки, тающие за зайчиком */
.bunny-dot{
  position:fixed;border-radius:50%;pointer-events:none;z-index:84;
  background:radial-gradient(circle,rgba(255,244,190,.95),rgba(255,200,60,.5) 55%,rgba(255,200,60,0) 75%);
  filter:drop-shadow(0 0 5px rgba(255,200,60,.8));
  animation:dotFade .5s ease-out forwards;
}
@keyframes dotFade{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
.bunny i{
  position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle,#fffbe0 0 16%,#ffd655 32%,rgba(255,190,40,.55) 52%,rgba(255,190,40,0) 72%);
  filter:drop-shadow(0 0 8px rgba(255,200,60,.95));
  will-change:transform,opacity;
}
@media (prefers-reduced-motion:reduce){
  .btn::after,.btn[data-bunny]{animation:none!important}
}

/* ---------------------------------------------------- тост и эффекты */

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:rgba(30,26,23,.96);border:1px solid rgba(255,255,255,.12);
  color:var(--ink);padding:12px 16px;border-radius:14px;font-size:14px;font-weight:600;
  opacity:0;pointer-events:none;transition:.28s;z-index:100;max-width:88vw;text-align:center;
  box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(224,115,107,.5);color:#f3c0bb}
.toast.ok{border-color:rgba(158,217,182,.45);color:#c8ecd8}

.fx{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti{position:absolute;width:9px;height:14px;border-radius:2px;opacity:.95;
  animation:fall 1.5s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{
  0%{transform:translate(0,-20px) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),105vh) rotate(var(--rot));opacity:0}
}
.float-plus{
  position:absolute;font-weight:800;font-size:22px;color:var(--yellow);pointer-events:none;
  text-shadow:0 2px 12px rgba(233,179,46,.6);animation:floatUp 1.1s ease-out forwards;
}
@keyframes floatUp{from{opacity:0;transform:translateY(6px) scale(.8)}
  to{opacity:0;transform:translateY(-60px) scale(1.15)}}
@keyframes floatUp2{0%{opacity:0;transform:translateY(8px) scale(.8)}
  25%{opacity:1;transform:translateY(-6px) scale(1.1)}
  100%{opacity:0;transform:translateY(-58px) scale(1.05)}}
.float-plus{animation-name:floatUp2}

.press{animation:press .18s}
@keyframes press{50%{transform:scale(.968)}}
.bounce-in{animation:bounceIn .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bounceIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:none;opacity:1}}

.view-enter{animation:viewIn .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* мелкие утилиты */
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mt20{margin-top:20px}.mt24{margin-top:24px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.mb16{margin-bottom:16px}
.spacer{flex:1}
.sticky-bottom{position:sticky;bottom:0;padding-top:10px;background:linear-gradient(180deg,transparent,#131110 40%)}

/* клавиатура: поджимаем низ и оставляем место под текст */
body.kbd .topbar{padding:0 0 4px}
body.kbd .topbar .sub{display:none}
body.kbd .pad-stack{margin-top:6px;max-height:38vh}
body.kbd .tools{padding:10px 6px 4px}

@media (max-height:680px){
  h1{font-size:24px}
  .preacher-card .photo{height:150px}
  .big-score{font-size:76px}
  .pad-input{font-size:26px}
}


/* ---------------------------------------------------- правки 14.11 */
.btn.given{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,200,60,.4))}
.btn.dark.sm:not(.given){color:#cfc6b6}
.tag.auto{border-image-source:url('/assets/chalk/buttons/btn-dark-1.png');color:var(--ink);padding-right:12px}
.tag.auto .tag-mark{font-style:normal;color:var(--yellow2);font-weight:800}
.prize-list{display:flex;flex-direction:column;gap:8px}
.prize-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;
  background:rgba(0,0,0,.28);border:1.4px solid rgba(255,255,255,.08)}
.prize-row .pt{font-weight:700}
.prize-row .ps{font-size:12px;color:var(--muted);margin-top:2px}
.prize-row.on{border-color:rgba(233,179,46,.6);background:rgba(233,179,46,.1)}
.prize-row.on .pt{color:var(--yellow2)}
.prize-row .icon-img{width:18px;height:18px;opacity:.7}

/* полосы прокрутки не показываем нигде */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

/* миссия на экране записи */
.mstrip{display:flex;gap:8px;padding:2px 6px 14px;flex:0 0 auto}
.mchip{flex:1;display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:12px;cursor:pointer;
  background:rgba(0,0,0,.3);border:1.4px solid rgba(255,255,255,.1);color:var(--ink);font:inherit;text-align:left}
.mchip .icon-img{width:24px;height:24px;flex:0 0 auto;opacity:.38;filter:grayscale(1) brightness(1.1)}
.mchip b{display:block;font-size:15px;font-weight:800;line-height:1.1}
.mchip span{display:block;font-size:10.5px;color:var(--muted);line-height:1.2}
.mchip.done{border-color:rgba(233,179,46,.6);background:rgba(233,179,46,.1)}
.mchip.done .icon-img{opacity:1;filter:drop-shadow(0 0 6px rgba(233,179,46,.6))}
.mchip.done b{color:var(--yellow2)}

.card-name{width:100%;border:0;border-bottom:1.5px dashed rgba(255,255,255,.28);background:none;outline:none;
  color:var(--ink);font:inherit;font-weight:800;font-size:19px;padding:2px 0 3px}
.card-name:focus{border-bottom-color:var(--yellow2)}

/* итоги: монеты-звёзды и кубки */
.coins{display:flex;justify-content:center;gap:12px;margin:18px 0 6px}
.coin{width:84px;height:84px;display:grid;place-items:center}
.coin .icon-img{width:84px;height:84px}
.coin:not(.off){opacity:0;animation:coinIn .75s cubic-bezier(.2,1.5,.4,1) forwards}
.coin.c1 .icon-img,.coin.c0 .icon-img,.coin.c2 .icon-img{filter:drop-shadow(0 0 16px rgba(233,179,46,.65))}
.coin.c1{margin-top:-10px}
.coin.off{opacity:.4}
@keyframes coinIn{
  0%{opacity:0;transform:translateY(-60px) rotateY(180deg) scale(.4)}
  60%{opacity:1;transform:translateY(6px) rotateY(0) scale(1.15)}
  80%{transform:translateY(-3px) scale(.96)}
  100%{opacity:1;transform:none}
}
.trophies{display:flex;gap:10px;margin:10px 0 4px}
.tslot{flex:1;min-height:108px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:10px 6px;border:1.5px dashed rgba(255,255,255,.18);background:rgba(0,0,0,.2);color:var(--muted)}
.tslot .icon-img{width:38px;height:38px;opacity:.4}
.tslot span{font-size:10.5px;line-height:1.2}
.tslot b{font-size:13px;line-height:1.15;color:var(--yellow2)}
.tslot.on{border:1.5px solid rgba(233,179,46,.6);background:rgba(233,179,46,.1);color:var(--ink);
  opacity:0;animation:dropIn .6s cubic-bezier(.2,1.5,.4,1) forwards}
.tslot.on .icon-img{opacity:1;width:46px;height:46px;filter:drop-shadow(0 0 10px rgba(233,179,46,.6))}
@keyframes dropIn{0%{opacity:0;transform:translateY(-40px) scale(.7)}100%{opacity:1;transform:none}}

/* окно значка и окно нового достижения */
.badge-big{width:104px;height:104px;display:grid;place-items:center}
.badge-big .icon-img{width:100%;height:100%;object-fit:contain}
.badge-big:not(.on) .icon-img{opacity:.7;filter:grayscale(.75) brightness(.9)}
.badge-big.on .icon-img{filter:drop-shadow(0 0 18px rgba(233,179,46,.55))}
.ach{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:8px 0 2px;overflow:hidden}
.ach>.ach-rays{position:absolute;left:50%;top:-80px;width:420px;height:420px;margin-left:-210px;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,85,.28) 0 9deg,rgba(255,214,85,0) 9deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 62%);mask-image:radial-gradient(circle,#000 0,transparent 62%);
  animation:raysSpin 14s linear infinite}
@keyframes raysSpin{to{transform:rotate(360deg)}}
.ach>*{position:relative;z-index:1}
.ach-title{font-family:var(--hand);font-size:30px;color:var(--yellow);text-shadow:0 0 22px rgba(233,179,46,.5);
  animation:achTitle .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes achTitle{from{opacity:0;transform:translateY(-14px) scale(.8)}to{opacity:1;transform:none}}
.ach-medal{width:132px;height:132px;display:grid;place-items:center;margin:6px 0;
  animation:achMedal 1s cubic-bezier(.2,1.4,.35,1) .15s both}
.ach-medal .icon-img{width:132px;height:132px;filter:drop-shadow(0 0 28px rgba(233,179,46,.75))}
@keyframes achMedal{
  0%{opacity:0;transform:scale(.1) rotate(-200deg)}
  55%{opacity:1;transform:scale(1.25) rotate(14deg)}
  75%{transform:scale(.92) rotate(-6deg)}
  100%{opacity:1;transform:none}
}
.ach-name{font-weight:800;font-size:20px;animation:achTitle .5s .5s both}
.ach-desc{font-size:14px;color:var(--muted);line-height:1.35;margin-bottom:6px;animation:achTitle .5s .65s both}

/* без рамки фокуса на кнопках и плашках */
button,.btn,.song,.opt,.mood,.pill,.tag,[role=button]{outline:none!important;-webkit-tap-highlight-color:transparent}
button:focus,button:focus-visible,.btn:focus,.btn:focus-visible{outline:none!important;box-shadow:none}

.weak-note{margin:2px 4px 14px;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.4;color:var(--ink);
  background:rgba(233,179,46,.1);border:1.4px solid rgba(233,179,46,.35)}

.sheet.bible{height:92%;max-height:92%;overflow:hidden;display:flex;flex-direction:column}
.sheet.bible>.col{display:flex;flex-direction:column}
.sheet.bible .search-field,.sheet.bible .tiny{flex:none}
.sheet.bible>.col>*{flex-shrink:0}
.sheet.bible>.col>.bible-out{flex:1 1 0;min-height:0}