/* ZAHODY — фоторежим (photo-mode.js): темне скло, як колесо емоцій і чат. Комп'ютер і телефон боком — постріл праворуч,
   масштаб і висота ліворуч, фільтри й рамки внизу; телефон вертикально — постріл унизу посередині. Усе — під палець (≥ 44 точки). */
@font-face{font-family:PhNunito;font-style:normal;font-weight:700 900;font-display:swap;src:url(../fonts/nunito-cyr.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:PhNunito;font-style:normal;font-weight:700 900;font-display:swap;src:url(../fonts/nunito-lat.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00AB,U+00B7,U+00BB,U+2013-2014,U+2019,U+201C-201D,U+2026}

/* кнопка 📷 на комп'ютері — у ряду вгорі зліва (місце ставить touch.js); у меню ☰ — пункт «Фото» */
#photobtn{left:12px;top:246px;font-size:22px;padding:0}
body.map #photobtn,body.styling #photobtn,body.acc-open #photobtn{display:none}

/* у фоторежимі ховаємо весь інтерфейс гри (і таблички з іменами); лишаються 3D, фоторежим і колесо емоцій */
body.photo>*:not(#c):not(#ph):not(#ew):not(script):not(style):not(link){visibility:hidden!important;opacity:0!important;pointer-events:none!important;transition:none!important}

#ph{--ph-glass:rgba(24,33,41,.78);--ph-ink:#fff;--ph-acc:#f2c14e;--ph-ok:#38c7a4;--ph-l:max(12px,var(--sl,0px));--ph-r:max(12px,var(--sr,0px));--ph-t:max(12px,var(--st,0px));--ph-b:max(12px,var(--sb,0px));
  position:fixed;inset:0;z-index:21;font:600 14px/1.2 PhNunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ph-ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#ph[hidden]{display:none}
/* :where — без ваги id, щоб класи кнопок нижче (розмір шрифту, колір) не перебивались */
:where(#ph) button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
#ph svg{width:24px;height:24px;flex:none}
.ph-defs{position:absolute;width:0;height:0;overflow:hidden}
.ph-pad{position:absolute;inset:0;touch-action:none;cursor:grab}
.ph-pad:active{cursor:grabbing}

/* кругла скляна кнопка */
.ph-b{width:52px;height:52px;border:0;border-radius:50%;background:var(--ph-glass);box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;transition:transform .12s ease,background .12s}
.ph-b:active{transform:scale(.92)}
.ph-b span{font-size:10.5px;font-weight:800;line-height:1}
#ph .ph-b.on{background:var(--ph-acc);color:#1f2a33}
.ph-b.off{opacity:.5}

/* верх: ✕, «Селфі» / «Загальний» */
.ph-top{position:absolute;left:var(--ph-l);right:var(--ph-r);top:var(--ph-t);display:flex;align-items:center;gap:10px;pointer-events:none}
.ph-top>*{pointer-events:auto}
.ph-sp{width:52px;flex:none}
.ph-seg{margin:0 auto;display:flex;gap:4px;padding:4px;border-radius:26px;background:var(--ph-glass);box-shadow:0 6px 18px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ph-seg button{display:flex;align-items:center;gap:7px;border:0;border-radius:22px;min-height:44px;padding:0 16px;background:none;font-weight:800;font-size:14.5px;white-space:nowrap}
#ph .ph-seg svg{width:20px;height:20px}
.ph-seg button:active{background:rgba(255,255,255,.18)}
.ph-hint{position:absolute;left:50%;top:calc(var(--ph-t) + 64px);transform:translate(-50%,-6px);max-width:calc(100% - 32px);box-sizing:border-box;padding:8px 14px;border-radius:14px;
  background:rgba(24,33,41,.66);font-size:13px;font-weight:700;text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.ph-hint.show{opacity:1;transform:translate(-50%,0)}

/* ліворуч: ближче, висота, далі */
.ph-left{position:absolute;left:var(--ph-l);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.ph-h{width:52px;padding:10px 0 6px;border-radius:26px;background:var(--ph-glass);box-shadow:0 6px 18px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:none;cursor:ns-resize}
.ph-ht{position:relative;width:6px;height:min(150px,22vh);border-radius:3px;background:linear-gradient(#9ad7ff,rgba(255,255,255,.28) 50%,#7bd389)}
.ph-ht i{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ph-h small{font-size:10px;font-weight:800;opacity:.75}

/* праворуч: таймер, постріл, поза */
.ph-right{position:absolute;right:var(--ph-r);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px}
.ph-shoot{position:relative;width:80px;height:80px;border-radius:50%;border:5px solid #fff;background:rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(0,0,0,.35);padding:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .12s ease}
.ph-shoot i{position:absolute;inset:6px;border-radius:50%;background:#fff;transition:transform .15s ease,background .15s}
.ph-shoot:active{transform:scale(.93)}
.ph-shoot:active i{background:var(--ph-acc)}
#ph.counting .ph-shoot i{transform:scale(.55);border-radius:8px;background:#e0503a}
#ph.busy .ph-shoot{opacity:.6;pointer-events:none}
.ph-pose b{font-size:22px;line-height:1}

/* низ: фільтри й рамки — смужки пігулок (прокрутка вбік, якщо не влазять) */
.ph-dock{position:absolute;left:0;right:0;bottom:var(--ph-b);display:flex;flex-direction:column;align-items:stretch;gap:8px;pointer-events:none}
.ph-row{display:flex;gap:8px;overflow-x:auto;padding:2px var(--ph-r) 2px var(--ph-l);scrollbar-width:none;pointer-events:auto;touch-action:pan-x}
.ph-row::-webkit-scrollbar{display:none}
.ph-row>:first-child{margin-left:auto}.ph-row>:last-child{margin-right:auto}
.ph-chip{flex:none;display:flex;align-items:center;gap:7px;min-height:42px;padding:0 15px 0 7px;border:0;border-radius:21px;background:var(--ph-glass);box-shadow:0 4px 12px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:800;font-size:14px;white-space:nowrap;transition:background .12s,color .12s,transform .12s}
.ph-chip:active{transform:scale(.95)}
.ph-chip i{width:28px;height:28px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
#ph .ph-chip.on{background:#fff;color:#1f2a33}
.ph-chip.on i{box-shadow:inset 0 0 0 2px rgba(31,42,51,.15)}
/* значки рамок */
.ph-fr i{border-radius:6px;width:26px;height:26px;box-sizing:border-box}
.ph-fi-none{border:2px dashed rgba(255,255,255,.75);box-shadow:none!important}
.ph-chip.on .ph-fi-none{border-color:rgba(31,42,51,.5)}
.ph-fi-polaroid{background:#5b8def;border:3px solid #fdfcf7;border-bottom-width:8px;box-shadow:0 1px 3px rgba(0,0,0,.3)!important}
.ph-fi-brand{background:#5b8def;border:4px solid #ffb35c;border-bottom-width:8px;border-bottom-color:#ef6f8f;box-shadow:none!important}

/* відлік, спалах, повідомлення */
.ph-count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);font:900 min(36vmin,180px)/1 PhNunito,system-ui,sans-serif;color:#fff;
  text-shadow:0 6px 24px rgba(0,0,0,.45),0 0 2px rgba(0,0,0,.4);opacity:0;pointer-events:none}
.ph-count.show{animation:phcount 1s ease-out forwards}
@keyframes phcount{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
.ph-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.ph-flash.go{animation:phflash .45s ease-out}
@keyframes phflash{0%{opacity:.9}100%{opacity:0}}
.ph-toast{position:absolute;left:50%;bottom:calc(var(--ph-b) + 112px);transform:translate(-50%,8px);max-width:calc(100% - 32px);box-sizing:border-box;padding:9px 16px;border-radius:14px;
  background:#fff;color:#1f2a33;font-weight:800;font-size:14px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:4}
.ph-toast.show{opacity:1;transform:translate(-50%,0)}

/* під час відліку й перегляду — лише головне */
#ph.counting .ph-dock,#ph.counting .ph-left,#ph.counting .ph-top,#ph.counting .ph-tm,#ph.counting .ph-pose{opacity:0;pointer-events:none}
#ph.shot>.ph-top,#ph.shot>.ph-left,#ph.shot>.ph-right,#ph.shot>.ph-dock,#ph.shot>.ph-hint{display:none}
/* колесо емоцій поверх фоторежиму: сховати свої кнопки, щоб не плутались */
body.ew-open #ph>.ph-left,body.ew-open #ph>.ph-right,body.ew-open #ph>.ph-dock,body.ew-open #ph>.ph-top{opacity:0;pointer-events:none}

/* перегляд знімка: фото й кнопки «Поділитися», «Зберегти», «Ще кадр» */
.ph-shot{position:absolute;inset:0;z-index:3;display:flex;flex-direction:row;align-items:stretch;gap:18px;box-sizing:border-box;
  padding:var(--ph-t) var(--ph-r) var(--ph-b) var(--ph-l);background:rgba(14,20,26,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:phin .2s ease-out}
.ph-shot[hidden]{display:none}
@keyframes phin{from{opacity:0}to{opacity:1}}
.ph-pic{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.ph-pic img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.5);transform:rotate(-1deg);animation:phpop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes phpop{from{transform:scale(.9) rotate(-3deg);opacity:.4}to{transform:rotate(-1deg);opacity:1}}
.ph-side{flex:none;width:min(360px,40%);display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:0}
.ph-side .ph-row{flex-wrap:wrap;overflow:visible;padding:0;justify-content:center}
.ph-side .ph-row>:first-child,.ph-side .ph-row>:last-child{margin:0}
.ph-side .ph-chip{min-height:40px;font-size:13.5px;padding-right:13px}
.ph-acts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ph-a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;border:0;border-radius:16px;background:rgba(255,255,255,.14);font-weight:800;font-size:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .12s,background .12s}
.ph-a:active{transform:scale(.97)}
#ph .ph-a1{background:var(--ph-acc);color:#1f2a33;box-shadow:0 6px 18px rgba(242,193,78,.35)}

/* низький екран (телефон боком): усе щільніше, фільтри й рамки — одним рядком */
@media (max-height:520px){
  .ph-b{width:46px;height:46px}
  .ph-sp{width:46px}
  .ph-seg button{min-height:40px;padding:0 13px;font-size:13.5px}
  .ph-shoot{width:70px;height:70px;border-width:4px}
  .ph-right{gap:10px}
  .ph-left{gap:8px}
  .ph-h{width:46px}
  .ph-ht{height:min(110px,24vh)}
  /* один рядок на всю ширину (прокрутка вбік, якщо не влазить); рамки — лише значками */
  .ph-dock{flex-direction:row;gap:8px;overflow-x:auto;padding:2px var(--ph-r) 2px var(--ph-l);pointer-events:auto;scrollbar-width:none;touch-action:pan-x}
  .ph-dock::-webkit-scrollbar{display:none}
  .ph-dock .ph-row{display:contents}
  .ph-dock .ph-row>*{margin:0}
  .ph-dock .ph-row[data-row=f]>:first-child{margin-left:auto}
  .ph-dock .ph-row[data-row=fr]>:first-child{margin-left:10px}
  .ph-dock .ph-row[data-row=fr]>:last-child{margin-right:auto}
  .ph-dock .ph-fr{font-size:0;gap:0;padding:0 9px}
  .ph-chip{min-height:40px;font-size:13px;padding:0 12px 0 6px}
  .ph-chip i{width:24px;height:24px}
  .ph-fr i{width:22px;height:22px}
  .ph-hint{top:calc(var(--ph-t) + 54px)}
  .ph-toast{bottom:calc(var(--ph-b) + 60px)}
  .ph-shot{gap:14px}
  .ph-side{width:min(320px,44%);gap:7px}
  .ph-side .ph-chip{min-height:36px;font-size:12.5px;padding:0 10px 0 5px}
  .ph-side .ph-chip i{width:22px;height:22px}
  .ph-a{min-height:44px;font-size:15px}
  .ph-acts{gap:6px;margin-top:2px}
}
/* вертикальний екран (телефон): постріл — унизу посередині над фільтрами, перегляд — фото згори, кнопки знизу */
@media (max-aspect-ratio:4/5){
  .ph-right{top:auto;transform:none;left:0;right:0;bottom:calc(var(--ph-b) + 112px);flex-direction:row;justify-content:center;gap:34px;pointer-events:none}
  .ph-right>*{pointer-events:auto}
  .ph-left{top:42%}
  .ph-seg button{padding:0 13px}
  .ph-toast{bottom:calc(var(--ph-b) + 212px)}
  .ph-shot{flex-direction:column;gap:12px}
  .ph-side{width:auto;justify-content:flex-end}
  .ph-acts{flex-direction:row}
  .ph-a{flex:1;flex-direction:column;gap:3px;min-height:62px;font-size:13.5px;border-radius:16px}
}
@media (max-width:360px){.ph-seg button{padding:0 10px;font-size:13px}.ph-chip{font-size:13px;padding-right:12px}}
@media (prefers-reduced-motion:reduce){.ph-pic img,.ph-shot{animation:none}.ph-count.show{animation-duration:.01s}}