/* ═══════════════════════════════════════════════════════════ КАБИНЕТ v3 — таб-бар + 11 ТЕМ (пластика через переменные). Тема ставится классом на (th-jade, th-samovar, …), без класса — «ночная чайная». Выбор — в Профиле, картинками. ═══════════════════════════════════════════════════════════ */ :root{ /* ночная чайная (дефолт) */ --page-bg: radial-gradient(90px 120px at 84% 6%, rgba(255,170,70,.22), transparent 70%), radial-gradient(64px 84px at 8% 22%, rgba(255,150,60,.14), transparent 70%), radial-gradient(80px 110px at 92% 55%, rgba(255,190,90,.10), transparent 70%), linear-gradient(#241a12, #0d0805); --ink:#f0e2c2; --mut:#a89574; --line:rgba(255,183,94,.16); --accent:#ffb75e; --num-ink:#ffc069; --pos:#7fb96a; --neg:#d98a5e; --av-bg:#7a4a22; --av-ink:#ffe9c2; --card-bg:rgba(255,190,90,.09); --card-sh:inset 0 0 0 1px rgba(255,190,90,.32); --card-bd:0 solid transparent; --r-card:15px; --card-ink:inherit; --card-mut:var(--mut); --card-line:var(--line); --btn-bg:#ffb75e; --btn-ink:#3a2408; --btn-sh:0 6px 16px rgba(255,160,60,.25); --btn-bd:0 solid transparent; --r-btn:12px; --chip-bg:rgba(255,190,90,.13); --chip-ink:#ffc069; --chip-sh:inset 0 0 0 1px rgba(255,190,90,.32); --chip-bd:0 solid transparent; --r-chip:10px; --tabs-bg:linear-gradient(rgba(47,33,20,.6),rgba(28,18,10,.62)); --tabs-sh:0 10px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,150,.14); --tabs-bd:0 solid transparent; --r-tabs:18px; --tabs-ink:var(--mut); --tabon-bg:#ffb75e; --tabon-ink:#3a2408; --r-tabon:13px; --tabon-glow:none; --num-glow:none; --hand:'Caveat',cursive; --serif:'Spectral',serif; } *{margin:0;box-sizing:border-box} html,body{height:100%} body{font-family:var(--serif);color:var(--ink);overflow:hidden;background:var(--page-bg)} .wrap{height:100vh;height:100svh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;position:relative} /* ── верхняя строка ── */ .topline{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 4px;font-size:.86rem; padding-top:calc(14px + env(safe-area-inset-top,0px))} /* iPhone: не заезжаем под статус-бар */ .topline a,.topline button{color:var(--mut);text-decoration:none;background:none;border:0;font-family:inherit;font-size:inherit;cursor:pointer;transition:color .2s} .topline a:hover,.topline button:hover{color:var(--ink)} /* ── шапка ── */ .me{display:flex;align-items:center;gap:12px;padding:10px 18px 12px} .me .av{width:52px;height:52px;border-radius:50%;flex:0 0 auto;background:var(--av-bg);color:var(--av-ink); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;overflow:hidden} .me .av img{width:100%;height:100%;object-fit:cover;border-radius:50%} .me .nm{font-size:1.14rem;font-weight:600;line-height:1.15} .me .tg{font-size:.8rem;color:var(--mut)} .me .chip{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--chip-ink); padding:5px 12px;border-radius:var(--r-chip);background:var(--chip-bg);box-shadow:var(--chip-sh);border:var(--chip-bd);white-space:nowrap} /* ── тело ── */ .body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding:4px 18px calc(96px + env(safe-area-inset-bottom,0px));scrollbar-width:none} .body::-webkit-scrollbar{display:none} .sec{display:none;flex-direction:column;gap:12px;animation:secIn .25s ease} .sec.is-on{display:flex} @keyframes secIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .card{background:var(--card-bg);box-shadow:var(--card-sh);border:var(--card-bd);border-radius:var(--r-card);padding:15px 16px;color:var(--card-ink)} .h3{font-size:.74rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--card-mut);margin-bottom:9px} /* коины */ .balrow{display:flex;align-items:center;gap:12px} .balrow .coinimg{flex:0 0 auto;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))} .balrow .num{font-size:2rem;font-weight:800;color:var(--num-ink);line-height:1;text-shadow:var(--num-glow)} .balrow .u{font-size:.78rem;color:var(--card-mut)} .qrbtn{margin-left:auto;border:var(--btn-bd);border-radius:var(--r-btn);padding:12px 16px;font-family:inherit;font-weight:700;font-size:.95rem; background:var(--btn-bg);color:var(--btn-ink);cursor:pointer;box-shadow:var(--btn-sh);transition:transform .15s;position:relative} .qrbtn:active{transform:scale(.96)} .rows{display:flex;flex-direction:column} .row{display:flex;align-items:baseline;gap:10px;padding:9px 2px;border-bottom:1px solid var(--card-line)} .row:last-child{border-bottom:0} .row .d{font-size:.76rem;color:var(--card-mut);flex:0 0 auto;min-width:52px} .row .t{flex:1;font-size:.92rem} .row .v{font-weight:700;font-size:.94rem} .row .v.pos{color:var(--pos)}.row .v.neg{color:var(--neg)} .empty{color:var(--card-mut);text-align:center;padding:14px 0;font-size:.9rem} /* клуб */ .tier-now{display:flex;align-items:center;gap:12px} .tier-now .medal{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#f4dc9a,#c99e4a 62%,#8a6a26); color:#4a3608;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:0 0 auto} .tier-now .big{font-size:1.25rem;font-weight:700} .bar{height:7px;border-radius:4px;background:rgba(0,0,0,.28);overflow:hidden;margin:10px 0 6px} .bar i{display:block;height:100%;border-radius:4px;background:var(--accent);width:0%;transition:width .6s ease} .next{font-size:.82rem;color:var(--card-mut)} .scale{margin-top:12px} .scale-end{text-align:right;font-size:.78rem;color:var(--card-mut);margin-top:4px} .nx-name{font-size:1.05rem;font-weight:700;margin-bottom:9px} .perks{display:flex;flex-wrap:wrap;gap:7px} .pill{font-size:.8rem;padding:6px 11px;border-radius:var(--r-chip);background:var(--chip-bg);box-shadow:var(--chip-sh);border:var(--chip-bd);color:var(--chip-ink)} .lockrow .v,.lockrow .t{color:var(--card-mut)} .lockrow .v{display:flex;align-items:center} /* покупки */ .osum{font-weight:700;color:var(--num-ink)} /* игра */ .game-stub{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 16px} .game-stub svg{width:120px;height:auto;opacity:.9} .game-stub .gname{font-family:var(--hand);font-size:1.9rem;color:var(--num-ink)} .game-stub .gnote{font-size:.9rem;color:var(--card-mut)} /* профиль */ .pf{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px} .pf-photo{width:128px;height:128px;border-radius:50%;position:relative;cursor:pointer;background:var(--av-bg);display:flex;align-items:center;justify-content:center} .pf-photo>span#pfPhotoInner{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:2.6rem;color:var(--av-ink)} .pf-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%} .pf-cam{position:absolute;right:2px;bottom:2px;width:36px;height:36px;border-radius:50%;background:var(--btn-bg);color:var(--btn-ink);border:var(--btn-bd);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.4)} .pf-cam svg{width:19px;height:19px} .pf-name{display:flex;align-items:center;gap:8px;font-size:1.3rem;font-weight:700;margin-top:6px} .pf-pen{border:0;background:none;color:var(--card-mut);cursor:pointer;padding:4px} .pf-pen svg{width:17px;height:17px} .pf-pen:hover{color:var(--card-ink)} .pf-input{font-family:inherit;font-size:1.2rem;font-weight:700;color:var(--card-ink);background:rgba(0,0,0,.18);border:1px solid var(--card-line);border-radius:9px;padding:5px 10px;max-width:230px;text-align:center} .pf-nick{font-size:.9rem;color:var(--card-mut)} .pf-since{font-size:.8rem;color:var(--card-mut);opacity:.85} /* выбор темы — картинки-образцы */ .themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} /* плитка темы = мини-страница её же цветами (переменные висят на .sw.th-*) */ .sw{border-radius:12px;overflow:hidden;cursor:pointer;background:var(--page-bg);box-shadow:0 3px 9px rgba(0,0,0,.35)} .sw.on{outline:3px solid var(--accent);outline-offset:2px} .sw .pv{height:84px;padding:8px 9px;display:flex;flex-direction:column;gap:5px;overflow:hidden} .sw .c{background:var(--card-bg);box-shadow:var(--card-sh);border:var(--card-bd,0);border-radius:calc(var(--r-card,14px)*.45)} .sw .c1{height:30px}.sw .c2{height:19px;width:78%} .sw .brow{display:flex;gap:5px;align-items:center} .sw .b{width:40%;height:13px;background:var(--btn-bg);box-shadow:var(--btn-sh);border:var(--btn-bd,0);border-radius:calc(var(--r-btn,12px)*.55)} .sw .ch{width:26%;height:11px;background:var(--chip-bg);box-shadow:var(--chip-sh);border:var(--chip-bd,0);border-radius:calc(var(--r-chip,12px)*.55)} .sw .nm{padding:6px 6px 8px;text-align:center;font-family:var(--hand);font-size:1.05rem;line-height:1;color:var(--ink)} /* ── страница гостя (директорская): чипы-разделы ── */ /* кнопка «назад» — круглая таблетка, как в макете, в любой теме */ #admGBack{width:36px;height:36px;border:0;border-radius:50%;background:rgba(128,116,96,.22);color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} /* шкала накоплений — всегда зелёная, как в макете */ #agBar{background:linear-gradient(90deg,#7fb04a,#a8d06a)!important;border-radius:5px} #admGuestCard .scale .bar{height:9px;border-radius:6px;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 3px rgba(0,0,0,.35);overflow:hidden} #admGuestCard .scale .bar i{display:block;height:100%} .ag-chips{display:flex;gap:7px;margin-top:13px;padding-bottom:11px;overflow-x:auto;scrollbar-width:none} .ag-chips::-webkit-scrollbar{display:none} .ag-chip{border:1px solid var(--line);border-radius:11px;padding:6px 13px;font-size:.8rem;color:var(--mut);cursor:pointer;white-space:nowrap;flex:0 0 auto} .ag-chip.is-on{background:var(--tabon-bg);color:var(--tabon-ink);border-color:transparent;font-weight:600} .ag-frozen{display:inline-block;margin-left:8px;font-size:.68rem;color:#7ec8e8;border:1px solid rgba(126,200,232,.4);border-radius:7px;padding:1px 6px;vertical-align:middle} .ag-act{width:100%;border:1px solid var(--line);border-radius:11px;background:none;color:var(--ink);font-family:inherit;font-size:.88rem;padding:11px;margin-top:8px;cursor:pointer;display:block;text-align:center;text-decoration:none} .ag-act.warn{color:#d98a5e;border-color:rgba(217,138,94,.4)} /* «домашняя» (дефолт): переменные :root перебиваются активной темой, дублируем для плитки */ .sw.th-base{ --page-bg:radial-gradient(90px 120px at 84% 6%,rgba(255,170,70,.22),transparent 70%),radial-gradient(64px 84px at 8% 22%,rgba(255,150,60,.14),transparent 70%),linear-gradient(#241a12,#0d0805); --ink:#f0e2c2;--accent:#ffb75e; --card-bg:rgba(255,190,90,.09);--card-sh:inset 0 0 0 1px rgba(255,190,90,.32);--card-bd:0 solid transparent;--r-card:15px; --btn-bg:#ffb75e;--btn-sh:0 6px 16px rgba(255,160,60,.25);--btn-bd:0 solid transparent;--r-btn:12px; --chip-bg:rgba(255,190,90,.13);--chip-sh:inset 0 0 0 1px rgba(255,190,90,.32);--chip-bd:0 solid transparent;--r-chip:10px; } /* ── таб-бар ── */ .tabs{position:absolute;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:62px;z-index:5; border-radius:var(--r-tabs);background:var(--tabs-bg);box-shadow:var(--tabs-sh);border:var(--tabs-bd); -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5); display:flex;align-items:stretch;padding:6px} .tab{flex:1;border:0;background:none;color:var(--tabs-ink);font-family:inherit;cursor:pointer;border-radius:var(--r-tabon); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.64rem;font-weight:600;letter-spacing:.3px;transition:background .2s,color .2s} .tab svg{width:21px;height:21px} .tab.is-on{background:var(--tabon-bg);color:var(--tabon-ink);text-shadow:var(--tabon-glow)} /* ── QR-модалка (одинакова во всех темах) ── */ .qrm{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(8,5,2,.72)} .qrm.on{display:flex} .qrm .box{background:linear-gradient(#f2e7cb,#e5d4ae);border-radius:18px;padding:22px 22px 16px;display:flex;flex-direction:column;align-items:center;gap:10px; box-shadow:0 24px 60px rgba(0,0,0,.6);animation:secIn .22s ease} .qrm .box svg{display:block;border-radius:8px} .qrm .who{font-family:var(--hand);font-size:1.5rem;color:#3a2c18} .qrm .ttl{font-size:.82rem;color:#8a6a3e;font-variant-numeric:tabular-nums} .qrm .x{position:absolute;top:18px;right:18px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#f0e2c2;font-size:1.3rem;cursor:pointer} /* ── редактор аватара ── */ .avm .box{padding:20px 20px 16px;gap:16px;width:min(342px,92vw)} .avm-crop{position:relative;width:min(280px,74vw);aspect-ratio:1;border-radius:50%;overflow:hidden; background:#0a0603;touch-action:none;cursor:grab; box-shadow:0 0 0 3px rgba(58,44,24,.55),0 0 0 10px rgba(242,231,203,.9),0 0 0 12px rgba(58,44,24,.25)} .avm-crop.drag{cursor:grabbing} .avm-crop img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none} .avm-zoom{display:flex;align-items:center;gap:11px;width:100%;color:#7a5220} .avm-zoom svg{width:20px;height:20px;flex:0 0 auto} .avm-zoom input[type=range]{flex:1;height:4px;accent-color:#a86a2a} .avm-btns{display:flex;gap:10px;width:100%} .avm-btns button{flex:1;border:0;border-radius:12px;padding:12px 0;font:600 1rem var(--serif);cursor:pointer} .avm-save{background:#ffb75e;color:#3a2408;box-shadow:0 6px 16px rgba(255,160,60,.28)} .avm-cancel{background:rgba(58,44,24,.12);color:#6a4a22} @media(min-width:760px){.wrap{max-width:560px}.body{padding-left:22px;padding-right:22px}} .gearframe{position:fixed;inset:0;pointer-events:none} /* ═══════════════ ТЕМЫ ═══════════════ */ /* нефрит */ html.th-jade,.sw.th-jade{ --page-bg:linear-gradient(150deg,#dfe9d5,#a9c49a); --ink:#2c3a26;--mut:#5a7050;--line:rgba(60,90,50,.2); --accent:#4e7a52;--num-ink:#3c6a40;--av-bg:#4e7a52;--av-ink:#eef5e4; --card-bg:linear-gradient(#f2f7ea,#d9e6cb);--card-sh:inset 0 -3px 0 rgba(78,122,82,.25),0 4px 12px rgba(60,90,50,.2);--r-card:26px; --btn-bg:linear-gradient(#6a9a6e,#48704c);--btn-ink:#eef5e4;--btn-sh:inset 0 2px 0 rgba(255,255,255,.35);--r-btn:22px; --chip-bg:#fff;--chip-ink:#3c6a40;--chip-sh:0 2px 6px rgba(60,90,50,.3);--r-chip:20px; --tabs-bg:rgba(240,246,230,.55);--tabs-sh:0 8px 20px rgba(60,90,50,.25);--r-tabs:24px;--tabs-ink:#5a7050; --tabon-bg:#4e7a52;--tabon-ink:#eef5e4;--r-tabon:18px; } /* самовар-медь */ html.th-samovar,.sw.th-samovar{ --page-bg:linear-gradient(#3a2a1c,#1c130c); --ink:#f4dcc0;--mut:#b09678;--line:rgba(224,173,120,.18); --accent:#e0ad78;--num-ink:#e0ad78;--av-bg:radial-gradient(circle at 35% 30%,#e0ad78,#8a5a34);--av-ink:#3a2414; --card-bg:linear-gradient(#4a3524,#2c1d12);--card-sh:inset 0 0 0 2px #8a5a34,inset 0 0 0 4px #2c1d12,0 4px 10px rgba(0,0,0,.5);--r-card:8px; --btn-bg:radial-gradient(circle at 35% 30%,#e0ad78,#96683a);--btn-ink:#2a1808;--btn-sh:inset 0 -2.4px 0 rgba(0,0,0,.35),0 2px 5px rgba(0,0,0,.5);--r-btn:6px; --chip-bg:linear-gradient(#e0ad78,#a06a3c);--chip-ink:#3a2414;--chip-sh:none;--r-chip:3px; --tabs-bg:rgba(44,29,18,.58);--tabs-sh:inset 0 0 0 2px #8a5a34;--r-tabs:8px; --tabon-bg:#e0ad78;--tabon-ink:#2a1808;--r-tabon:5px; } /* терракота */ html.th-clay,.sw.th-clay{ --page-bg:linear-gradient(#c9825a,#9c5a38); --ink:#3a2014;--mut:#6a3c24;--line:rgba(90,44,24,.25); --accent:#5a2c18;--num-ink:#4a2412;--av-bg:#f2d9be;--av-ink:#9c5a38; --card-bg:#e8bd97;--card-sh:inset 0 4px 8px rgba(255,236,210,.55),inset 0 -5px 9px rgba(90,40,20,.3);--r-card:30px; --btn-bg:#5a2c18;--btn-ink:#f2d9be;--btn-sh:none;--r-btn:30px; --chip-bg:rgba(58,32,20,.75);--chip-ink:#f2d9be;--chip-sh:none;--r-chip:30px; --tabs-bg:rgba(232,189,151,.55);--tabs-sh:inset 0 4px 8px rgba(255,236,210,.5),inset 0 -4px 8px rgba(90,40,20,.25);--r-tabs:30px;--tabs-ink:#6a3c24; --tabon-bg:#5a2c18;--tabon-ink:#f2d9be;--r-tabon:24px; } /* индиго-батик */ html.th-indigo,.sw.th-indigo{ --page-bg:linear-gradient(#2c3a5e,#141d34); --ink:#dfe6f2;--mut:#93a5c8;--line:rgba(157,180,221,.25); --accent:#a9c4ee;--num-ink:#a9c4ee;--av-bg:#dfe6f2;--av-ink:#2c3a5e; --card-bg:rgba(255,255,255,.06);--card-sh:none;--card-bd:1.6px dashed rgba(157,180,221,.6);--r-card:14px; --btn-bg:#dfe6f2;--btn-ink:#20304e;--btn-sh:none;--r-btn:11px; --chip-bg:transparent;--chip-ink:#c9d8f2;--chip-sh:none;--chip-bd:1.6px dashed #9db4dd;--r-chip:9px; --tabs-bg:rgba(30,44,74,.55);--tabs-sh:none;--tabs-bd:1.6px dashed rgba(157,180,221,.5);--r-tabs:14px; --tabon-bg:#dfe6f2;--tabon-ink:#20304e;--r-tabon:9px; --pos:#9fd08a; } /* неон-чайхана */ html.th-neon,.sw.th-neon{ --page-bg:#0c0a12; --ink:#e8e2f4;--mut:#9a92b4;--line:rgba(255,183,94,.2); --accent:#ffb75e;--num-ink:#ffb75e;--num-glow:0 0 12px rgba(255,183,94,.8); --av-bg:#181328;--av-ink:#ffb75e; --card-bg:#131022;--card-sh:0 0 0 1px rgba(255,183,94,.5),0 0 16px rgba(255,183,94,.25);--r-card:14px; --btn-bg:transparent;--btn-ink:#ffb75e;--btn-bd:1.4px solid #ffb75e;--btn-sh:0 0 12px rgba(255,183,94,.5),inset 0 0 8px rgba(255,183,94,.15);--r-btn:10px; --chip-bg:transparent;--chip-ink:#ffb75e;--chip-bd:1px solid #ffb75e;--chip-sh:0 0 9px rgba(255,183,94,.5);--r-chip:10px; --tabs-bg:rgba(19,16,34,.55);--tabs-sh:0 0 0 1px rgba(255,183,94,.35);--r-tabs:14px; --tabon-bg:transparent;--tabon-ink:#ffb75e;--tabon-glow:0 0 8px rgba(255,183,94,.8);--r-tabon:10px; } /* аптека травника */ html.th-herb,.sw.th-herb{ --page-bg:linear-gradient(#5a4a30,#3a2e1c); --ink:#f0e6cc;--mut:#c4b490;--line:rgba(240,230,204,.15); --accent:#4a6a3c;--num-ink:#4a6a3c;--av-bg:#f0e6cc;--av-ink:#5a4a30; --card-bg:#e8dcbe;--card-ink:#3a2e18;--card-mut:#7a6a46;--card-line:rgba(74,58,34,.25); --card-sh:0 2px 0 #2a2010,0 6px 10px rgba(0,0,0,.4);--r-card:4px; --btn-bg:#4a6a3c;--btn-ink:#eef2dc;--btn-sh:none;--r-btn:4px; --chip-bg:#e8dcbe;--chip-ink:#4a3a22;--chip-sh:0 2px 0 #2a2010;--r-chip:3px; --tabs-bg:rgba(232,220,190,.55);--tabs-sh:0 2px 0 #2a2010,0 6px 10px rgba(0,0,0,.35);--r-tabs:4px;--tabs-ink:#7a6a46; --tabon-bg:#4a6a3c;--tabon-ink:#eef2dc;--r-tabon:3px; } html.th-herb .card{position:relative} html.th-herb .card::before{content:"";position:absolute;top:-4px;left:15px;width:7px;height:7px;border-radius:50%;background:#3a2e1c;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)} /* акварель */ html.th-aqua,.sw.th-aqua{ --page-bg:radial-gradient(90% 50% at 18% 0%,#dfeae2 0%,transparent 60%),radial-gradient(80% 50% at 92% 14%,#e9e2d2 0%,transparent 55%),#f6f2e6; --ink:#3c3a30;--mut:#8a8672;--line:rgba(120,130,90,.2); --accent:#9dbb86;--num-ink:#5a8a5e;--av-bg:radial-gradient(circle at 40% 30%,#b7cf9e,#8aa878);--av-ink:#fff; --card-bg:rgba(255,255,255,.78);--card-sh:0 10px 24px rgba(120,130,90,.18);--r-card:20px; --btn-bg:radial-gradient(circle at 40% 30%,#9dbb86,#6f9460);--btn-ink:#fff;--btn-sh:0 6px 14px rgba(110,148,96,.4);--r-btn:18px; --chip-bg:rgba(183,207,158,.4);--chip-ink:#4e6a3e;--chip-sh:none;--r-chip:16px; --tabs-bg:rgba(255,253,246,.5);--tabs-sh:0 8px 18px rgba(120,130,90,.18);--r-tabs:20px;--tabs-ink:#8a8672; --tabon-bg:#9dbb86;--tabon-ink:#fff;--r-tabon:15px; --pos:#5a8a4a; } /* доски бара */ html.th-planks,.sw.th-planks{ --page-bg:repeating-linear-gradient(90deg,#8a5e34 0 26px,#7a5230 26px 27px,#96683a 27px 54px,#503620 54px 55px); --ink:#f4e6c4;--mut:#d9c9a0;--line:rgba(244,230,196,.2); --accent:#6a4626;--num-ink:#6a4626;--av-bg:#f4e6c4;--av-ink:#6a4626; --card-bg:linear-gradient(#e9d6a8,#d9c28c);--card-ink:#3a2614;--card-mut:#7a5a34;--card-line:rgba(74,48,24,.25); --card-sh:0 3px 0 #4a3018,0 7px 12px rgba(0,0,0,.4);--r-card:6px; --btn-bg:#6a4626;--btn-ink:#f4e6c4;--btn-sh:0 3px 0 #33200f;--r-btn:5px; --chip-bg:#3a2614;--chip-ink:#ffd76e;--chip-sh:0 2px 0 #241208;--r-chip:4px; --tabs-bg:rgba(58,38,20,.58);--tabs-sh:0 3px 0 #241208,0 8px 14px rgba(0,0,0,.4);--r-tabs:7px;--tabs-ink:#d9c9a0; --tabon-bg:#e9d6a8;--tabon-ink:#4a3018;--r-tabon:5px; } html.th-planks .card{position:relative} html.th-planks .card::before,html.th-planks .card::after{content:"";position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:#6a4626;box-shadow:inset 0 1px 1.5px rgba(0,0,0,.9)} html.th-planks .card::before{left:9px} html.th-planks .card::after{right:9px} /* шёлк с кистями */ html.th-silk,.sw.th-silk{ --page-bg:linear-gradient(150deg,#5a1e2e,#320e1a); --ink:#f2ddc8;--mut:#c9a48e;--line:rgba(232,200,104,.2); --accent:#e8c868;--num-ink:#e8c868;--av-bg:#f2ddc8;--av-ink:#5a1e2e; --card-bg:linear-gradient(120deg,#6e2438,#481226);--card-sh:inset 0 0 0 1px rgba(232,200,104,.5),inset 0 14px 24px rgba(255,220,190,.08);--r-card:14px; --btn-bg:#e8c868;--btn-ink:#481226;--btn-sh:none;--r-btn:12px; --chip-bg:transparent;--chip-ink:#e8c868;--chip-bd:1px solid #e8c868;--chip-sh:none;--r-chip:12px; --tabs-bg:rgba(72,18,38,.55);--tabs-sh:inset 0 0 0 1px rgba(232,200,104,.35);--r-tabs:14px; --tabon-bg:#e8c868;--tabon-ink:#481226;--r-tabon:10px; } html.th-silk .qrbtn::after{content:"";position:absolute;left:50%;bottom:-11px;width:2px;height:9px;background:#e8c868} /* свеча в тумане */ html.th-candle,.sw.th-candle{ --page-bg:radial-gradient(140px 180px at 50% 30%,rgba(255,190,110,.22),rgba(255,190,110,.05) 55%,transparent 75%),linear-gradient(#171310,#070503); --ink:#e8d9bc;--mut:#a4937a;--line:rgba(232,217,188,.14); --accent:#ffd9a0;--num-ink:#ffd9a0;--num-glow:0 0 18px rgba(255,190,110,.6); --av-bg:rgba(255,200,120,.14);--av-ink:#ffd9a0; --card-bg:rgba(255,240,210,.05);--card-sh:none;--r-card:16px; --btn-bg:rgba(255,217,160,.92);--btn-ink:#3a2408;--btn-sh:0 0 22px rgba(255,190,110,.55);--r-btn:14px; --chip-bg:rgba(255,255,255,.05);--chip-ink:#c9b490;--chip-sh:none;--r-chip:12px; --tabs-bg:rgba(36,28,19,.5);--tabs-sh:0 8px 20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,200,120,.1);--r-tabs:16px; --tabon-bg:transparent;--tabon-ink:#ffd9a0;--tabon-glow:0 0 10px rgba(255,190,110,.8);--r-tabon:12px; } html.th-candle #sec-coins .card:first-child{box-shadow:0 0 34px rgba(255,190,110,.22)} /* покупки: чек с составом */ .buy{padding:10px 2px;border-bottom:1px solid var(--card-line)} .buy:last-child{border-bottom:0} .buy-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .buy-h .d{font-size:.78rem;color:var(--card-mut)} .bi{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;color:var(--card-mut);padding:2.5px 0} .bi span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .buy.ref{opacity:.55} /* тост «+N» после покупки */ .ctoast{position:fixed;left:50%;top:16px;transform:translate(-50%,-160%);z-index:80; background:radial-gradient(circle at 35% 30%,#f4dc9a,#c99e4a 62%,#8a6a26);color:#4a3608; font-weight:800;font-size:1.2rem;padding:10px 22px;border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)} .ctoast.on{transform:translate(-50%,0)} /* подарок коинов */ .giftlink{margin-top:12px;width:100%;background:none;border:1px solid var(--card-line);border-radius:var(--r-btn);padding:9px;color:var(--card-mut);font-family:inherit;font-size:.9rem;cursor:pointer;transition:color .2s,border-color .2s} .giftlink:hover{color:var(--card-ink);border-color:var(--card-mut)} .gbox{min-width:250px} .gbox input{width:100%;font-family:inherit;font-size:1.05rem;text-align:center;background:rgba(0,0,0,.1);border:1px solid #b59a68;border-radius:10px;padding:10px;color:#3a2c18;margin-bottom:4px} .gbox input::placeholder{color:#a8926a} .gbox .gerr{color:#a8452a;font-size:.85rem;min-height:1.1em;text-align:center} .gbox .qrbtn{margin-left:0;width:100%} /* админ: гости */ .adm-search{width:100%;font-family:inherit;font-size:.95rem;background:rgba(0,0,0,.16);border:1px solid var(--card-line);border-radius:9px;padding:9px 11px;color:var(--card-ink)} .adm-search::placeholder{color:var(--card-mut)} .adm-u{border-bottom:1px solid var(--card-line)} .adm-u:last-child{border-bottom:0} .adm-row{display:flex;align-items:baseline;gap:10px;padding:10px 2px;cursor:pointer} .adm-nm{flex:1;font-size:.95rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adm-nm i{font-style:normal;font-size:.76rem;color:var(--card-mut);margin-left:6px} .adm-tier{font-size:.76rem;color:var(--card-mut)} .adm-coins{font-weight:800;color:var(--num-ink);min-width:44px;text-align:right} .adm-panel{display:none;padding:2px 2px 12px} .adm-u.open .adm-panel{display:block} .adm-line{display:flex;gap:8px;margin-bottom:9px} .adm-amt{flex:1;font-family:inherit;font-size:1rem;text-align:center;background:rgba(0,0,0,.16);border:1px solid var(--card-line);border-radius:9px;padding:8px;color:var(--card-ink)} .adm-b{width:52px;border:0;border-radius:9px;background:var(--btn-bg);color:var(--btn-ink);font-size:1.2rem;font-weight:800;cursor:pointer} .adm-tiers{display:flex;flex-wrap:wrap;gap:6px} .adm-t{border:1px solid var(--card-line);background:none;color:var(--card-mut);border-radius:9px;padding:6px 10px;font-family:inherit;font-size:.8rem;cursor:pointer} .adm-t.on{background:var(--btn-bg);color:var(--btn-ink);border-color:transparent;font-weight:700} /* сводка директора */ .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center;padding:4px 0} .statgrid b{display:block;font-size:1.5rem;font-weight:800;color:var(--num-ink)} .statgrid b.pos{color:var(--pos)}.statgrid b.neg{color:var(--neg)} .statgrid span{font-size:.74rem;color:var(--card-mut)} /* очередь объявлений (админ) */ .nbadm{width:100%;background:none;border:0;padding:15px 16px;color:var(--card-ink);font-family:inherit;font-size:1rem;font-weight:700;text-align:left;cursor:pointer} .nbadm span{color:var(--num-ink)} .nbq{position:relative;border-radius:6px;padding:12px 12px 10px;margin-bottom:12px;color:#5a3a1e;font-family:'Spectral',Georgia,serif;box-shadow:0 5px 12px rgba(0,0,0,.3)} .nbq b{display:block;font-size:1.02rem} .nbq p{color:#6a5638;font-size:.88rem;line-height:1.4;margin-top:3px} .nbq-st{position:absolute;right:8px;top:8px;width:46px;height:46px;border:2.2px solid #a8331c;border-radius:50%;color:#a8331c;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;transform:rotate(12deg);font-family:system-ui} .nbq-ph{display:block;height:100px;border-radius:3px;margin-top:8px;background-size:cover;background-position:center} .nbq-meta{margin-top:8px;font-size:.74rem;color:#a8926a;font-family:system-ui} .nbq-btns{display:flex;gap:8px;margin-top:9px;font-family:system-ui} .nbq-ok{flex:1;border:0;border-radius:8px;background:#4a6a3c;color:#eef2dc;font-weight:700;padding:9px;cursor:pointer} .nbq-no{flex:1;border:1px solid #a8331c;border-radius:8px;background:none;color:#a8331c;font-weight:700;padding:9px;cursor:pointer} .nbq-ed{flex:1;border:1px dashed #8a6a3e;border-radius:8px;background:none;color:#6a5638;font-weight:700;padding:9px;cursor:pointer} .nbq-phs{display:flex;gap:6px;margin-top:8px} .nbq-phs i{flex:1;height:64px;border-radius:3px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:rgba(0,0,0,.06)} /* ── шнурок «на улицу» (правый верх) ── */ .street-cord{position:fixed;right:16px;top:0;z-index:90;cursor:grab;user-select:none;-webkit-user-select:none; touch-action:none;-webkit-tap-highlight-color:transparent;padding:0 12px} /* широкая зона хвата */ .street-cord:active{cursor:grabbing} .street-cord .drop{transition:transform .45s cubic-bezier(.24,1.6,.36,1)} .street-cord.drag .drop{transition:none} /* нить: 80px запаса спрятано над экраном — при рывке конец не показывается */ .street-cord .str{width:1.5px;margin:-80px auto 0;height:calc(116px + env(safe-area-inset-top,0px)); background:linear-gradient(rgba(255,183,94,0),rgba(255,183,94,.3) 45%,rgba(255,183,94,.68))} .street-cord .fr{width:14px;height:5px;margin:0 auto;border-radius:0 0 5px 5px;background:#8a6a26;opacity:.85} .street-cord .knob{width:14px;height:21px;border-radius:7px 7px 10px 10px;margin:0 auto; background:radial-gradient(circle at 35% 30%,#f4dc9a,#c99e4a 62%,#8a6a26);box-shadow:0 4px 12px rgba(255,160,60,.35)} .street-cord .lbl{font-size:9.5px;color:var(--mut);margin-top:5px;text-align:center;letter-spacing:.1em} /* затемнение при уходе на улицу */ #streetFade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .38s ease;z-index:9999} #streetFade.on{opacity:1;pointer-events:auto} /* шапка профиля: отступ под статус-бар (верхняя строка удалена) */ .me{padding-top:calc(16px + env(safe-area-inset-top,0px))} /* выход из кабинета (в Профиле) */ .outbtn{width:100%;background:none;border:1px solid var(--card-line);border-radius:var(--r-btn);padding:11px; color:var(--card-mut);font-family:inherit;font-size:.92rem;cursor:pointer;transition:color .2s,border-color .2s} .outbtn:hover{color:#d98a5e;border-color:#d98a5e} /* ═══ ДЕСКТОП: правая ПОЛОСА — личное пространство выключателя «улица» ═══ Никаких досок: просто пустая вертикаль справа от колонки, отданная лампе. Колонка ужимается влево (padding-right у body) ровно на ширину полосы. ВАЖНО: блок держим В КОНЦЕ файла — правила .street-cord объявлены ниже базовых и перебивали эти переопределения, когда блок стоял выше (шнур не удлинялся). */ /* Полоса делится ПО ВЕРТИКАЛИ: верхняя половина — лампа «улица», нижняя — шестерёнка. Выше лампы шестерёнку не утащить (это её потолок), ниже таб-бара — тоже. */ .gearframe{top:calc(50vh + 34px);bottom:calc(84px + env(safe-area-inset-bottom,0px))} /* ТЕЛЕФОН: полоса уже (экран дорог), лампа прижата к правому краю. Отступ шапки под лампу больше не нужен — её держит сама полоса. */ @media(max-width:759px){ body{padding-right:56px} .street-cord{left:auto;right:28px;width:54px;transform:translateX(50%)} .street-cord .str{height:calc(50vh + 54px)} .gearframe{left:0;right:0} /* шестерёнка — к краю экрана */ .tabs{position:fixed;left:12px;right:12px} /* нижняя панель — во всю ширину, мимо полосы */ } @media(min-width:760px){ body{padding-right:120px} /* полоса лампы */ /* ширина ЯВНО: с left+right:auto бокс разъезжался на пол-экрана и глотал клики */ .street-cord{left:calc(50% + 280px);right:auto;width:54px;transform:translateX(-50%)} .street-cord .str{height:calc(50vh + 54px)} /* грузик — до середины экрана */ /* правый край рамки = край полосы лампы: шестерёнка садится ПОД лампу, а не на край монитора (туда её и не надо — с этого начинали) */ .gearframe{left:calc(50% - 340px);right:calc(50% - 307px)} } /* ═══ УДАЛЕНИЕ АККАУНТА ═══ Кнопка приглушённая — её не нажимают случайно, но и не прячем: право человека. Окно говорит прямо, что вернуть нельзя, и «Остаться» стоит первой. */ .outbtn.delbtn{color:rgba(200,120,100,.72);border-color:rgba(200,120,100,.28)} .outbtn.delbtn:hover{color:#e07a5f;border-color:#e07a5f} #delAsk{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:20px; background:rgba(8,6,4,.72);backdrop-filter:blur(4px)} #delAsk.show{display:grid;animation:delFade .35s ease} @keyframes delFade{from{opacity:0}} #delAsk .da{width:100%;max-width:390px;background:var(--card-bg,#221a12); border:1px solid var(--card-line);border-left:3px solid #b5623f;border-radius:16px; padding:22px 21px 18px;box-shadow:0 20px 50px rgba(0,0,0,.6); animation:delPop .4s cubic-bezier(.2,.9,.3,1)} @keyframes delPop{from{opacity:0;transform:scale(.95) translateY(12px)}} #delAsk .dah{display:block;font-size:1.12rem;color:var(--card-ink);margin-bottom:11px} #delAsk p{font-size:.94rem;line-height:1.7;color:var(--card-mut);margin:0 0 10px} #delAsk p.dawarn{color:#e0a08f} #delAsk p.daq{font-size:.88rem;opacity:.85} #delAsk .darow{display:flex;gap:9px;margin-top:16px} #delAsk button{flex:1;font-family:inherit;font-size:.93rem;padding:11px 8px; border-radius:var(--r-btn);cursor:pointer;border:1px solid var(--card-line); background:none;color:var(--card-ink)} #delAsk .dacancel{background:rgba(255,255,255,.06)} #delAsk .dago{border-color:#b5623f;color:#e07a5f} #delAsk .dago:hover{background:#b5623f;color:#fdf3ec} #delAsk .danote{font-size:.85rem;color:var(--card-mut);margin-top:10px;min-height:1em;text-align:center}