/* Вішлист. Один екран, великі цілі для пальця: головний сценарій — гість
   відкрив посилання з телефона й тиснув одну галочку. */
:root{
  --bg:#f6f6f4; --card:#fff; --ink:#15181c; --muted:#6b7280; --line:#e6e6e2;
  --accent:#1f7a4d; --accent-ink:#fff; --busy:#f3f4f6;
  --radius:16px; --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.05);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#101214; --card:#191c1f; --ink:#eceef0; --muted:#9aa2ab; --line:#272b2f;
         --busy:#202427; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); }
}
*{box-sizing:border-box}
/* display:flex у .row перебиває атрибут hidden, і прихований рядок усе одно
   видно. Це та сама пастка, через яку «прихований» блок фото стирчав у формі. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  padding:24px 16px 64px; max-width:760px; margin-inline:auto;
  -webkit-text-size-adjust:100%;
}
h1{font-size:30px; margin:0 0 6px; letter-spacing:-.02em}
.sub{margin:0 0 10px; font-size:17px; font-weight:600; line-height:1.35}
.lead{margin:0 0 14px; color:var(--muted); font-size:15px}
.top{margin-bottom:20px}
/* Фото господаря свята. Кругле й не на всю ширину: це підпис до списку,
   а не банер — список має лишатись головним на екрані. */
.ava{width:92px; height:92px; border-radius:50%; object-fit:cover; object-position:center;
     display:block; margin:0 0 12px; border:3px solid var(--card); box-shadow:var(--shadow)}

button{font:inherit; cursor:pointer; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:11px 16px}
button:active{transform:translateY(1px)}
.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; width:100%; padding:14px}
.ghost{white-space:nowrap}
.share{font-size:14px; padding:9px 14px}

input{
  font:inherit; width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
}
input:focus{outline:2px solid var(--accent); outline-offset:1px}

.delivery{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
          padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow)}
.delivery h3{margin:0 0 8px; font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.dline{display:flex; align-items:center; gap:10px; padding:4px 0}
.dline span{flex:1; min-width:0; overflow-wrap:anywhere}
.dline button{padding:5px 10px; font-size:13px; flex:none}
.dname{font-weight:600}

.add{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
     padding:14px; margin-bottom:22px; box-shadow:var(--shadow)}
.row{display:flex; gap:8px; margin-bottom:8px}
.row.two{flex-wrap:wrap}
.row.two input{flex:1 1 150px}
.offscreen{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.pickfile{display:inline-flex; align-items:center; white-space:nowrap; cursor:pointer}
/* Велика зона фото: власник додає речі з телефона, і дрібне посилання «фото»
   він просто не помічає — так уже й сталось. */
.drop{display:flex; align-items:center; justify-content:center; gap:10px;
      min-height:104px; margin-bottom:8px; padding:12px; cursor:pointer;
      border:2px dashed var(--line); border-radius:14px; background:var(--busy);
      color:var(--muted); text-align:center}
.drop.over{border-color:var(--accent); color:var(--accent)}
.drop .dropText{display:flex; flex-direction:column; align-items:center; gap:2px}
.drop b{color:var(--ink); font-size:15px}
.drop small{font-size:12px}
.drop img{max-height:150px; max-width:100%; border-radius:10px; object-fit:contain}
.preview img{width:64px; height:64px; object-fit:cover; border-radius:10px; background:var(--busy)}
.hint{margin:8px 0 0; font-size:13px; color:var(--muted); min-height:18px}

.list{display:flex; flex-direction:column; gap:12px}

.item{
  display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow);
}
.item.taken{opacity:.62}
.item .pic{width:84px; height:84px; border-radius:12px; object-fit:cover; background:var(--busy)}
.item .pic.none{display:flex; align-items:center; justify-content:center; color:var(--muted)}
.item h2{font-size:17px; margin:0 0 4px; font-weight:600; line-height:1.3}
.item .price{font-weight:700; margin:0 0 2px}
.item .note{color:var(--muted); font-size:14px; margin:0 0 8px}
.item a.shop{font-size:14px; color:var(--accent); text-decoration:none; font-weight:600}
.item a.shop:hover{text-decoration:underline}

/* Галочка — справжній <input type=checkbox> усередині <label>. Програмний клік
   по прихованому полю у вбудованих браузерах (Telegram, Instagram) мовчки
   ігнорується — на цих граблях уже постояли в CRM. */
.pick{display:flex; align-items:center; gap:10px; margin-top:10px; cursor:pointer;
      font-weight:600; user-select:none}
.pick input{width:24px; height:24px; accent-color:var(--accent); flex:none; cursor:pointer}
.pick.off{cursor:default; color:var(--muted); font-weight:500}
.pick.off input{cursor:not-allowed}
.badge{display:inline-block; font-size:13px; font-weight:600; color:var(--muted);
       background:var(--busy); border-radius:999px; padding:3px 10px}

.tools{display:flex; gap:6px; margin-top:10px}
.tools button{padding:6px 10px; font-size:13px; color:var(--muted)}
.empty{text-align:center; color:var(--muted); padding:40px 0}

@media (max-width:420px){
  .item{grid-template-columns:64px 1fr; gap:10px}
  .item .pic{width:64px; height:64px}
  h1{font-size:26px}
}

/* ── Святковий вигляд ─────────────────────────────────────────────────────
   Темне тло, золото й конфеті: сторінка живе рівно один день народження,
   і має читатись як запрошення, а не як форма. */
:root{ --bg:#140f1d; --card:#1e1830; --ink:#f6f1ff; --muted:#a79cc0; --line:#2e2645;
       --accent:#ffc14d; --accent-ink:#2a1c05; --accent-2:#ff6fa5; --busy:#261f3b;
       --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.45);
       /* Без цього рядка браузер малює власні контроли світлими, і порожня
          галочка світиться білим квадратом на темній картці. */
       color-scheme:dark; }
/* Світла тема сюди не лізе: свято темне в будь-якому випадку, інакше половина
   гостей побачила б зовсім іншу сторінку, ніж решта. */
@media (prefers-color-scheme:light){
  :root{ --bg:#140f1d; --card:#1e1830; --ink:#f6f1ff; --muted:#a79cc0; --line:#2e2645;
         --accent:#ffc14d; --accent-ink:#2a1c05; --accent-2:#ff6fa5; --busy:#261f3b; } }

body{ color:var(--ink); background:var(--bg) }
/* Сяйво окремим нерухомим шаром. Раніше це був background-attachment:fixed на
   body — на телефоні він змушує перемальовувати весь фон на кожну прокрутку,
   і сторінка з грою помітно тупила. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 380px at 10% -6%, rgba(255,110,170,.22), transparent 60%),
    radial-gradient(760px 420px at 96% 4%, rgba(255,193,77,.20), transparent 62%);
}

/* Фото збоку від заголовка, а не медальйоном по центру: по центру сторінка
   читалась як профіль у соцмережі. */
.top{ display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:center; text-align:left }
.ava{ width:84px; height:84px; margin:0; border:0;
      box-shadow:0 0 0 3px var(--accent), 0 0 28px rgba(255,193,77,.45) }
.top h1{ grid-column:2; margin:0; font-size:27px; line-height:1.2 }
.top .sub{ grid-column:2; color:var(--accent); margin:4px 0 0; font-size:15px }
.top .lead{ grid-column:1 / -1; margin:12px 0 0; max-width:none }
.top .share{ grid-column:1 / -1; justify-self:start; margin-top:10px }

.delivery h3{ color:var(--accent) }
.primary{ background:linear-gradient(135deg, var(--accent), #ffa033); color:var(--accent-ink);
          border-color:transparent; box-shadow:0 6px 20px rgba(255,160,51,.3) }
.pick input{ accent-color:var(--accent) }
.item a.shop{ color:var(--accent) }

/* Конфеті. Десяток клаптиків на CSS — не картинка й не бібліотека: сторінку
   відкривають з телефона, і зайвий кілобайт тут дорожчий за красу. */
.confetti{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.confetti i{ position:absolute; top:-24px; width:9px; height:14px; border-radius:2px;
             opacity:.85; animation:падати linear infinite;
             /* Підказка браузеру тримати клаптик окремим шаром — тоді падіння
                рахує відеокарта, а не процесор разом із рештою сторінки. */
             will-change:transform }
@keyframes падати{
  0%   { transform:translate3d(0,-12vh,0) rotate(0) }
  100% { transform:translate3d(var(--зсув,20px),110vh,0) rotate(720deg) }
}
body > *:not(.confetti){ position:relative; z-index:1 }
/* Кому анімація заважає — системне налаштування вимикає її повністю. */
@media (prefers-reduced-motion:reduce){ .confetti{ display:none } }


/* ── Динозаврик ───────────────────────────────────────────────────────────
   Поле фіксованої висоти: інакше при повороті телефона гра стрибає разом із
   розміткою, а полотно доводиться перемальовувати на кожен кадр розтягування. */
.game{ margin-top:28px; background:var(--card); border:1px solid var(--line);
       border-radius:var(--radius); padding:12px 14px 10px; box-shadow:var(--shadow) }
.gameTop{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
          margin-bottom:6px }
.gameName{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.score{ font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums }
#archer{ display:block; width:100%; height:200px; cursor:pointer; touch-action:none; border-radius:10px }
#dino{ display:block; width:100%; height:230px; cursor:pointer;
       /* Тап по полотну не має гортати сторінку — інакше стрибок прокручує екран. */
       touch-action:none; border-radius:10px }
.game .hint{ margin:4px 0 0; text-align:center }

.speeds{ display:flex; gap:6px; margin-bottom:8px }
.speeds button{ flex:1; padding:7px 4px; font-size:13px; color:var(--muted) }
.speeds button.on{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:600 }