/* Страницы купона (/c/…) и «Мой профиль» (/me): купон-билет, вкладки, списки, плашки.
   Сначала телефон: содержимое прокручивается, главные кнопки прижаты к низу под большим пальцем, нажатия ≥ 44 px.
   Зависит от tokens.css, base.css и game.css (кнопки, шапка, окна, шторки, строки .it). Вид — макеты docs/screens/win.html, profile.html. */
body.pg{padding:0}
.page{max-width:520px;margin:0 auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.page .gtop{position:sticky;top:0;z-index:5;background:var(--bg);padding-left:4px}
.gtop h1{flex:1;margin:0;text-align:center;font-size:16.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtop .ghost{width:var(--tap);flex:none}
.scroll{flex:1;padding-bottom:12px}
.page .bottom{position:sticky;bottom:0;background:linear-gradient(rgba(255,255,255,0),var(--bg) 14px)}

/* купон-билет */
.coupon{margin:14px 16px 0;border-radius:20px;background:var(--bg);box-shadow:0 0 0 1px var(--pill) inset;overflow:hidden}
.coupon.dim{opacity:.8}
.coupon .hd{display:flex;align-items:center;gap:10px;padding:14px}
.coupon .hd .t{flex:1;min-width:0}
.coupon .hd b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coupon .hd span.s{display:block;font-size:13px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coupon .cut{position:relative;border-top:1.5px dashed var(--pill);margin:0 14px}
.coupon .cut::before,.coupon .cut::after{content:"";position:absolute;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--pill) inset}
.coupon .cut::before{left:-25px}.coupon .cut::after{right:-25px}
.coupon .body{padding:16px 14px 18px;text-align:center}
.coupon .what{font-size:19px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.coupon .ai{font-size:12px;color:var(--gray);margin-top:4px}
.coupon .ai button{color:var(--you);font-size:12px;min-height:44px;margin:-14px 0;padding:0 6px}
.code{display:inline-flex;align-items:center;gap:10px;min-height:52px;margin-top:12px;padding:0 16px;border-radius:12px;background:var(--box);
  font:700 26px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.code .i{color:var(--gray)}
.code:active{background:var(--press)}
.code.off{text-decoration:line-through;color:var(--gray)}
.coupon .till{margin-top:10px;font-size:13.5px;color:var(--gray)}
.state{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;flex:none}
.state.ok{background:#E3F6EA;color:#0B6B33}.state.used{background:var(--press);color:#555}.state.exp{background:#FDE7E9;color:#A1202D}

/* как получить приз */
.howto{margin:16px 16px 0;padding:0;list-style:none;display:grid;gap:10px}
.howto li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:14.5px;align-items:start}
.howto b.n{width:26px;height:26px;border-radius:50%;background:var(--press);display:flex;align-items:center;justify-content:center;font-size:13px}
.warnbox{margin:16px 16px 0;border-radius:14px;background:var(--note);padding:12px 14px;font-size:14px;color:#4A3B00}

/* профиль: плашка гостя, вкладки, список купонов */
.pad{padding:14px 16px 0}
.pad .box b{font-size:17px}
.pad .box p{margin:6px 0 0;font-size:14px;color:#333}
.cap{font-size:12.5px;color:var(--gray);margin:18px 16px 8px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--press);margin:0 16px}
.seg button{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:13.5px;font-weight:600;color:#555;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button[aria-selected=true]{background:#fff;color:#000;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.list{margin:12px 16px 0;border-radius:16px;box-shadow:0 0 0 1px var(--line) inset;overflow:hidden}
.list .it{border-radius:0;border-top:1px solid var(--line);padding:0 14px}
.list>:first-child{border-top:0}
.mini{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border-top:1px solid var(--line)}
.mini:active{background:var(--press)}
.mini .t{flex:1;min-width:0}
.mini .t b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .t span{display:block;font-size:13px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .code{margin:0;min-height:32px;padding:0 8px;font-size:14px;border-radius:8px;letter-spacing:.03em}
.hint{margin:12px 16px 0;font-size:13.5px;color:var(--gray)}
.empty{margin:12px 16px 0;padding:22px 16px;border-radius:16px;background:var(--box);text-align:center;color:#333;font-size:14.5px}
.empty .btn{margin-top:12px}
.ske{height:64px;margin:12px 16px 0;border-radius:16px;background:linear-gradient(90deg,var(--box),#fff,var(--box));background-size:200% 100%;animation:ske 1.2s infinite linear}
@keyframes ske{to{background-position:-200% 0}}
.it .r .i{color:var(--gray)}
@media (prefers-reduced-motion:reduce){.ske{animation:none}}
/* узкие телефоны (320 px): кнопка WhatsApp — в одну строку, вкладки не слипаются */
@media (max-width:360px){
  .page .bottom .btn{font-size:15px;padding:0 10px;gap:6px}
  .seg button{font-size:12.5px;padding:0 2px}
  .coupon .what{font-size:18px}
}

/* ---- вход через Telegram и профиль вошедшего (шаг 14а: js/login.js, js/me.js) ---- */
.btn.tg{background:#2AABEE;color:#fff}
.btn.tg.off{opacity:.5;pointer-events:none}
.btn.ghost{background:var(--bg);color:var(--gray);font-weight:600}
.sheet .btn{margin:10px 8px 0;width:calc(100% - 16px)}
.lgmsg{margin:6px 14px 0;color:var(--bad);font-size:14px;min-height:0}
.lgmsg:empty{display:none}
.lgfail{margin:14px 8px 0;padding:12px 6px 4px;border-radius:14px;background:var(--box)}
.lgfail>b{display:block;margin:0 8px;font-size:15px}
.lgfail>p{margin:6px 8px 4px;color:#333;font-size:14px}
.pad .box .btn{margin-top:12px}
.mehd{display:flex;align-items:center;gap:14px;margin:14px 16px 0}
.mehd .ava{width:60px;height:60px;border-radius:50%;background:var(--text);color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.mehd b{display:block;font-size:20px;word-break:break-word}
.mehd span{color:var(--gray);font-size:14px}
.it.red{color:var(--bad)}
.it .sw{margin-left:auto;flex:none;width:46px;height:28px;border-radius:14px;background:var(--pill);position:relative;transition:background .2s}
.it .sw::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.it[aria-checked=true] .sw{background:var(--good)}
.it[aria-checked=true] .sw::after{transform:translateX(18px)}
.it .two{display:flex;flex-direction:column;min-width:0}
.it .two small{color:var(--gray);font-size:13px}
.warnbox a{color:inherit;font-weight:700;text-decoration:underline}
.delbox{margin:14px 16px 0;padding:16px;border-radius:16px;background:var(--box)}
.delbox b{display:block;font-size:19px;margin-bottom:8px}
.delbox p{margin:0 0 8px;font-size:14.5px;color:#333}
.delbox .btn{margin-top:10px}
.btn.bad{background:var(--bad);color:#fff}