/* HOZYYAIN — «Лавка Хозяина»: магазин стримерских штук (скины бойцов арены, награды, только за кряксы, VIP; всё за кряксы).
   Рисованная манера бонго-гуся, как вебка и чат: молочная бумага, толстый чернильный контур, кривые скругления,
   тень-кромка внутри справа-снизу, тёмная «подошва» под карточкой, пастельные наклейки, Nunito. */
:root {
  --ink: #141216;
  --paper: #fbfaf6;
  --shade: #ebe8df;
  --muted: #6b6470;
  --bg: #f3ead6;
  --bg-dot: #e6d9bb;
  --yel: #f6d98f;
  --gold: #f8b73a;
  --pink: #ffc7d6;
  --mint: #bfe3a0;
  --sky: #cfe3ff;
  --lav: #e3d6ff;
  --peach: #ffd9b8;
  --red: #e2574c;
  --line: 4px;
  --sole: 0 6px 0 rgba(20, 18, 22, .42);
  --rim: inset -7px -7px 0 var(--shade);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* скрытое скрыто, даже если у элемента свой display */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-weight: 800;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1.6px, transparent 1.8px);
  background-size: 22px 22px;
  min-height: 100vh;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- the hand-drawn pieces ---------- */
.card {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 26px 20px 28px 18px / 22px 26px 18px 24px;
  box-shadow: var(--rim), var(--sole);
}
.sticker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--yel);
  border: 3px solid var(--ink);
  border-radius: 12px 9px 13px 8px;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .1), 0 3px 0 rgba(20, 18, 22, .4);
  font-weight: 900; font-size: 14px; line-height: 1.2;
  transform: rotate(-2deg);
  white-space: nowrap;
}
.sticker.tilt-r { transform: rotate(2.5deg); }
.sticker.pink { background: var(--pink); } .sticker.mint { background: var(--mint); } .sticker.sky { background: var(--sky); }
.sticker.lav { background: var(--lav); } .sticker.peach { background: var(--peach); } .sticker.paper { background: var(--paper); }
.coin { width: 1.25em; height: 1.25em; border-radius: 50%; border: 2px solid var(--ink); flex: none; object-fit: cover; background: var(--gold); }
/* кряксы: маленькая зелёная бумажка — криво приклеена, как наклейка */
.bill { height: 1.2em; width: 2.4em; flex: none; object-fit: cover; border: 2px solid var(--ink); border-radius: 4px 3px 5px 3px; background: #9fc28c; transform: rotate(-5deg); box-shadow: 1px 2px 0 rgba(20, 18, 22, .45); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  background: var(--gold);
  border: var(--line) solid var(--ink);
  border-radius: 18px 14px 19px 13px;
  box-shadow: inset -5px -5px 0 rgba(0, 0, 0, .12), 0 5px 0 var(--ink);
  font-weight: 900; font-size: 18px; text-decoration: none; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset -5px -5px 0 rgba(0, 0, 0, .12), 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: inset -5px -5px 0 rgba(0, 0, 0, .12), 0 1px 0 var(--ink); }
.btn.ghost { background: var(--paper); }
.btn.small { padding: 7px 14px; font-size: 15px; border-width: 3px; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .1), 0 4px 0 var(--ink); }
.btn:focus-visible, .seg button:focus-visible, .iconbtn:focus-visible, input:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }

/* ---------- the header ---------- */
.top { max-width: 1240px; margin: 18px auto 0; padding: 0 16px; }
.top > .card { display: flex; align-items: center; gap: 18px; padding: 12px 18px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* логотип: гусь с вебки (кадр со stable-2026-11-03) в круглой наклейке. Два одинаковых слоя картинки:
   .in — голова и тело, обрезаны ровно по кругу; .top — только корона (верх картинки), ей можно чуть выйти за край */
.logo .mark { position: relative; width: 62px; height: 62px; flex: none; border: 3px solid var(--ink); border-radius: 50%; background: var(--sky); box-shadow: 0 3px 0 rgba(20, 18, 22, .45); transform: rotate(-4deg); transition: transform .25s ease; }
.logo .mark .in, .logo .mark .top { position: absolute; inset: 0; }
.logo .mark .in { border-radius: 50%; overflow: hidden; }
.logo .mark img { position: absolute; left: 50%; bottom: 5px; width: 57px; max-width: none; transform: translateX(-50%); }   /* гусь приподнят — корона выше */
.logo .mark .in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: #fbfaf6; }   /* дорисованная шея: тело продолжается до низа круга */
.logo .mark .top img { clip-path: inset(0 0 62.5% 0); }   /* только корона: голова начинается ниже */
.logo:hover .mark { transform: rotate(3deg); }
.logo b { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -.3px; white-space: nowrap; }
.logo small { display: block; font-size: 13px; color: var(--muted); }
.top .grow { flex: 1; }
.balance { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); font-size: 17px; }
.balance small { color: var(--muted); font-size: 13px; }
.cartlink { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 15px 12px 16px 11px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); text-decoration: none; }
.cartlink svg { width: 28px; height: 28px; }

main { max-width: 1240px; margin: 0 auto; padding: 22px 16px 60px; }
.crumbs { font-size: 14px; color: var(--muted); margin: 4px 4px 16px; }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }

/* ---------- the catalog ---------- */
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 26px; }
.cat-head h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 46px; font-weight: 900; line-height: 1.05; margin: 0 0 8px; letter-spacing: -.5px; }
.cat-head p { margin: 0; max-width: 560px; font-size: 17px; font-weight: 700; color: #3d3842; line-height: 1.45; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { padding: 7px 14px; border: 3px solid var(--ink); border-radius: 13px 10px 14px 9px; background: var(--paper); font-weight: 900; font-size: 15px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.chips button:hover { background: var(--shade); }
.chips button[aria-pressed="true"] { background: var(--yel); transform: rotate(-1.5deg); }
.chips button:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px 22px; }
/* карточка скина целиком — кнопка: нажал — открылась модалка */
.skin { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease; }
.skin:nth-child(2n) { transform: rotate(.6deg); }
.skin:nth-child(2n+1) { transform: rotate(-.5deg); }
.skin:hover { transform: translateY(-5px) rotate(0); box-shadow: var(--rim), 0 11px 0 rgba(20, 18, 22, .42); }
.skin:active { transform: translateY(2px) rotate(0); box-shadow: var(--rim), 0 3px 0 rgba(20, 18, 22, .42); }
.skin:focus-visible { outline: 3px dashed var(--ink); outline-offset: 5px; }
.skin .pic { position: relative; display: block; aspect-ratio: 3 / 4; margin-bottom: 6px; border: 3px solid var(--ink); border-radius: 15px 12px 16px 11px; overflow: hidden; background: #151826; }
.skin .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.skin:hover .pic img { transform: scale(1.04); }
.skin .pic .sticker { position: absolute; top: 8px; left: 8px; font-size: 12px; }
.skin .pic .incart { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--mint); font-size: 15px; font-weight: 900; box-shadow: 0 2px 0 rgba(20, 18, 22, .45); transform: rotate(8deg); }
.skin .name { font-size: 22px; font-weight: 900; line-height: 1.1; }
.skin .about { font-size: 14px; font-weight: 700; color: var(--muted); line-height: 1.35; min-height: 2.7em; }
.skin .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.skin .cost { display: flex; align-items: center; gap: 7px; font-size: 19px; font-weight: 900; white-space: nowrap; }
.skin .cost.free { font-size: 16px; color: var(--muted); }
.skin .look { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 3px 0 var(--ink); transition: background .12s ease, transform .16s ease; }
.skin .look svg { width: 18px; height: 18px; }
.skin:hover .look { background: var(--gold); transform: translateX(3px); }

/* ---------- the skin modal ---------- */
html:has(.modal[open]) { overflow: hidden; }
.modal { width: min(1060px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; }
.modal::backdrop { background: rgba(20, 18, 22, .55); }
.modal[open] { animation: pop .22s ease-out; }
.modal[open]::backdrop { animation: fade .22s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes fade { from { opacity: 0; } }
.sheet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: start; max-height: calc(100dvh - 32px); overflow: auto; }
/* листание: новый скин мягко въезжает с той стороны, куда листали (без вспышек) */
.sheet.from-r .stage img, .sheet.from-r .info > * { animation: inR .24s ease-out; }
.sheet.from-l .stage img, .sheet.from-l .info > * { animation: inL .24s ease-out; }
@keyframes inR { from { opacity: .25; transform: translateX(26px); } }
@keyframes inL { from { opacity: .25; transform: translateX(-26px); } }
.close { position: absolute; top: 14px; right: 14px; z-index: 3; }
.stage { padding: 22px 8px 16px 22px; position: relative; }
.stage .screen { position: relative; aspect-ratio: 1 / 1; border: var(--line) solid var(--ink); border-radius: 18px 14px 20px 13px; overflow: hidden; background: #151826; touch-action: pan-y; }
.stage .screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.stage .label { position: absolute; top: 8px; left: 38px; z-index: 2; }
.arrow { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 4px 0 var(--ink); cursor: pointer; transition: transform .08s ease, background .12s ease; }
.arrow svg { width: 24px; height: 24px; }
.arrow.prev { left: 12px; }
.arrow.next { right: 12px; }
.arrow:hover { background: var(--gold); transform: translateY(-2px); }
.arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.arrow:focus-visible { outline: 3px dashed var(--paper); outline-offset: 3px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.dots { display: flex; gap: 8px; }
.dots button { width: 14px; height: 14px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; transition: width .2s ease; }
.dots button[aria-current="true"] { width: 34px; border-radius: 8px; background: var(--gold); }
.counter { font-size: 14px; color: var(--muted); }

.info { padding: 30px 30px 26px 18px; }
.info .tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 50px 12px 0; }
.info h2 { font-size: 44px; font-weight: 900; line-height: 1.02; margin: 0 0 8px; letter-spacing: -.5px; }
.info .lead { font-size: 17px; color: #3d3842; margin: 0 0 16px; font-weight: 700; line-height: 1.45; }
.feats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 700; line-height: 1.4; }
.feats li i { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 11px; background: var(--mint); font-style: normal; font-size: 16px; font-weight: 900; }
.feats li:nth-child(2) i { background: var(--lav); }
.feats li:nth-child(3) i { background: var(--peach); }
.feats b { font-weight: 900; }
.price { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 3px dashed var(--ink); border-radius: 18px; background: #fff6df; margin-bottom: 16px; }
.price .amount { display: flex; align-items: center; gap: 10px; font-size: 38px; font-weight: 900; line-height: 1; }
.price .amount.free { font-size: 30px; }
.price .amount .bill { height: 38px; width: 76px; border-width: 3px; border-radius: 6px 5px 7px 4px; }
.price .unit { font-size: 18px; color: var(--muted); }
.price .or { margin-left: auto; font-size: 14px; color: var(--muted); text-align: right; line-height: 1.3; }
.price .or b { color: var(--ink); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.actions .btn { flex: 1 1 180px; }
.btn.off { opacity: .6; cursor: default; pointer-events: none; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 16px; background: var(--sky); font-size: 14px; font-weight: 700; line-height: 1.4; }
.note b { font-weight: 900; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); flex: none; margin-top: 1px; background: conic-gradient(#ff6b6b, #ffb34d, #e0c341, #7ad37a, #4fd1c5, #6bb8ff, #b98cff, #ff8fc7, #ff6b6b); }
/* ---------- sections (one page) ---------- */
.jump { position: sticky; top: 0; z-index: 5; margin: -6px -16px 22px; padding: 10px 16px; background: linear-gradient(var(--bg) 70%, rgba(243, 234, 214, 0)); }
.jump .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
.jump .chips::-webkit-scrollbar { display: none; }
.jump .chips a { white-space: nowrap; }
.chips a { padding: 7px 14px; border: 3px solid var(--ink); border-radius: 13px 10px 14px 9px; background: var(--paper); font-weight: 900; font-size: 15px; text-decoration: none; box-shadow: 0 3px 0 var(--ink); }
.chips a b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yel); font-size: 12px; }
.chips a:hover { background: var(--shade); }
.sec { margin-bottom: 38px; scroll-margin-top: 78px; }
.sec h2 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 30px; font-weight: 900; margin: 0 0 18px; }
.sec h2 .num { align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yel); font-size: 20px; box-shadow: 0 3px 0 var(--ink); transform: rotate(-4deg); }
.sec h2 small { font-size: 16px; color: var(--muted); font-weight: 800; }
.rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 24px 20px; }
.skin .pic.sq { aspect-ratio: 1 / 1; }
.skin .pic .no { position: absolute; right: 8px; bottom: 8px; padding: 1px 8px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); font-size: 12px; font-weight: 900; }
.skin .pic .sticker.pink { left: 8px; }
/* плитка награды: пастельная бумага в точку, крупный эмодзи чуть набок */
.tile { position: absolute; inset: 0; display: grid; place-items: center; background-color: var(--yel); background-image: radial-gradient(rgba(20, 18, 22, .12) 1.5px, transparent 1.7px); background-size: 14px 14px; }
.tile.peach { background-color: var(--peach); } .tile.pink { background-color: var(--pink); } .tile.sky { background-color: var(--sky); }
.tile.lav { background-color: var(--lav); } .tile.mint { background-color: var(--mint); } .tile.yel { background-color: var(--yel); }
.tile span { font-size: 78px; line-height: 1; transform: rotate(-7deg); filter: drop-shadow(3px 4px 0 rgba(20, 18, 22, .28)); transition: transform .2s ease; }
.skin:hover .tile span { transform: rotate(0) scale(1.08); }
.stage .shot { position: absolute; inset: 0; }
.stage .shot .tile span { font-size: min(190px, 34vw); }
.cost .from, .amount .from { font-size: .62em; color: var(--muted); font-weight: 900; margin-right: -2px; }
.seg { display: inline-flex; border: 3px solid var(--ink); border-radius: 13px 10px 14px 9px; overflow: hidden; background: var(--paper); box-shadow: 0 3px 0 var(--ink); }
.seg button { border: 0; background: transparent; padding: 7px 14px; font-weight: 900; font-size: 15px; cursor: pointer; }
.seg button + button { border-left: 3px solid var(--ink); }
.seg button:hover { background: var(--shade); }
.seg button[aria-pressed="true"] { background: var(--yel); }
.seg button:focus-visible { outline: 3px dashed var(--ink); outline-offset: -5px; }
.to { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.to-label { font-size: 15px; font-weight: 900; }
.nick { flex: 1 1 160px; min-width: 0; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 12px 10px 13px 9px; background: var(--paper); font-size: 15px; font-weight: 800; box-shadow: inset 3px 3px 0 var(--shade); }
.note + .note, .note + .cmd { margin-top: 10px; }
.note.warm { background: #fff1d6; }
.note .ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 13px; font-weight: 900; margin-top: 1px; }
.cmd { font-size: 14px; font-weight: 800; color: var(--muted); }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; font-weight: 700; color: var(--ink); padding: 1px 6px; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); white-space: nowrap; }
.howto { position: relative; padding: 26px 24px 18px; margin-top: 6px; }
.howto > .sticker { position: absolute; top: -16px; left: 22px; font-size: 16px; }
.howto ul { margin: 6px 0 10px; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.7; }
.howto p { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- rules page ---------- */
.docpage { max-width: 900px; }
.docpage h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 44px; font-weight: 900; margin: 0; }
.check a { font-weight: 900; }
.doc-short { position: relative; padding: 28px 24px 18px; margin-bottom: 30px; background: #fff6df; }
.doc-short > .sticker { position: absolute; top: -16px; left: 22px; font-size: 17px; }
.doc-short ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.doc-short li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 700; line-height: 1.45; }
.doc-short li i { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 11px; background: var(--mint); font-style: normal; font-weight: 900; }
.doc-short li:nth-child(2) i { background: var(--sky); } .doc-short li:nth-child(3) i { background: var(--lav); } .doc-short li:nth-child(4) i { background: var(--pink); }
.doc-short li i.b { background: #fff6df; }
.doc-short li i.b .bill { height: 15px; width: 26px; border-width: 2px; }
.doc-short b, .doc b { font-weight: 900; }
.doc { padding: 10px 30px 26px; }
.doc section { padding: 18px 0 4px; border-bottom: 3px dashed var(--shade); }
.doc section:last-child { border-bottom: 0; }
.doc h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 24px; font-weight: 900; }
.doc h2 .num { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 3px solid var(--ink); border-radius: 50%; background: var(--yel); font-size: 16px; transform: rotate(-4deg); }
.doc p, .doc li { font-size: 16px; font-weight: 700; line-height: 1.55; color: #3d3842; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 6px; }
.doc li::marker { color: var(--gold); }
/* ---------- вход через Twitch, игрок, уведомления ---------- */
.acct { display: flex; align-items: center; gap: 14px; }
.btn.twitch { background: #9146ff; color: #fff; padding: 10px 18px; font-size: 16px; }
.btn.twitch .tw { width: 22px; height: 22px; flex: none; }
.btn.twitch.big { width: 100%; font-size: 19px; padding: 14px 20px; margin-top: 4px; }
.btn.twitch:hover { background: #a065ff; }
.bell { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 15px 12px 16px 11px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); text-decoration: none; }
.bell svg { width: 26px; height: 26px; }
.bell:hover svg { transform: rotate(-12deg); transition: transform .15s ease; }
.bell .count, .cartlink .count { position: absolute; top: -10px; right: -10px; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; background: var(--pink); border: 3px solid var(--ink); border-radius: 13px; font-size: 14px; font-weight: 900; transform: rotate(8deg); }
.bell .count { background: var(--gold); }
.ava { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; color: #fff; font-weight: 900; font-size: 16px; }
details.me { position: relative; }
details.me summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); cursor: pointer; font-size: 16px; font-weight: 900; }
details.me summary::-webkit-details-marker { display: none; }
details.me summary:hover { background: var(--shade); }
details.me .caret { width: 16px; height: 16px; transition: transform .15s ease; }
details.me[open] .caret { transform: rotate(180deg); }
details.me summary:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.top .menu.card { display: grid; gap: 2px; padding: 10px; flex-wrap: nowrap; }
.menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; min-width: 220px; padding: 10px; display: grid; gap: 2px; }
.menu a, .menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left; text-decoration: none; font-weight: 900; font-size: 15px; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--yel); }
.menu button { color: var(--red); }
.menu .via { display: flex; align-items: center; gap: 6px; padding: 4px 12px 8px; margin-bottom: 4px; border-bottom: 3px dashed var(--shade); font-size: 13px; color: var(--muted); }
.menu .via .tw { width: 16px; height: 16px; color: #9146ff; }

/* корзина: кто покупает, для кого, подарок */
.buyer { display: flex; align-items: center; gap: 10px; margin: -4px 0 8px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--lav); font-size: 15px; font-weight: 700; }
.buyer b { font-weight: 900; }
.buyer.out { background: #fff1d6; line-height: 1.4; }
.label { font-size: 15px; font-weight: 900; }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; padding: 10px 12px; }
.giftbox { margin: -4px 0 4px; padding: 4px 14px 2px; border: 3px dashed var(--ink); border-radius: 16px; background: #ffe9ef; }
.field label small { font-weight: 700; color: var(--muted); }
.at { display: flex; align-items: stretch; }
.at span { display: grid; place-items: center; padding: 0 12px; border: 3px solid var(--ink); border-right: 0; border-radius: 14px 0 0 10px; background: var(--yel); font-weight: 900; font-size: 18px; }
.at input { border-radius: 0 11px 15px 0 !important; }
.err { margin: 4px 0 12px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--pink); font-size: 14px; font-weight: 800; }
.summary .btn[disabled] { opacity: .55; cursor: default; }
.done { padding: 34px 26px 30px; text-align: center; }
.done .big { display: inline-grid; place-items: center; width: 84px; height: 84px; border: 4px solid var(--ink); border-radius: 50%; background: var(--mint); font-size: 40px; font-weight: 900; box-shadow: 0 5px 0 var(--ink); transform: rotate(-6deg); }
.done h2 { margin: 18px 0 6px; font-size: 30px; font-weight: 900; }
.done p { margin: 0 auto 20px; max-width: 460px; font-size: 16px; font-weight: 700; color: #3d3842; line-height: 1.5; }
.done .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.item .ctl { display: flex; gap: 8px; align-items: center; }

/* уведомления */
.notes-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.chips button em { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 4px; border: 2px solid var(--ink); border-radius: 10px; background: var(--gold); font-size: 12px; }
.linkbtn { border: 0; background: none; font-weight: 900; font-size: 15px; text-decoration: underline; cursor: pointer; padding: 6px 4px; }
.notes { display: grid; gap: 16px; }
.note-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; cursor: default; }
.note-item.new { background: #fffaf0; cursor: pointer; }
.nico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 15px 12px 16px 11px; font-size: 22px; font-weight: 900; transform: rotate(-4deg); }
.nico.mint { background: var(--mint); } .nico.pink { background: var(--pink); } .nico.sky { background: var(--sky); } .nico.yel { background: var(--yel); }
.nbody { flex: 1; min-width: 0; }
.ntop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ntop b { font-size: 18px; font-weight: 900; }
.ntop .dot { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--gold); }
.ntop .when { margin-left: auto; font-size: 13px; color: var(--muted); }
.nbody p { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: #3d3842; line-height: 1.45; }
.nbody blockquote { margin: 8px 0 0; padding: 6px 12px; border-left: 4px solid var(--ink); border-radius: 0 10px 10px 0; background: var(--pink); font-size: 15px; font-weight: 800; }
.nbody .btn { margin-top: 10px; }
.empty .btn.twitch { width: auto; margin-top: 18px; }

/* ---------- плавность: никаких рывков на странице ---------- */
/* переключатель с подложкой, которая переезжает к выбранной кнопке (--n кнопок, --i выбранная) */
.seg.slide { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; isolation: isolate; }
.seg.slide::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n, 2)); background: var(--yel);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .36s cubic-bezier(.45, 0, .2, 1); }
.seg.slide button + button { border-left: 0; }
.seg.slide button, .seg.slide button[aria-pressed="true"] { background: transparent; transition: color .2s ease; }
.seg.slide button:not([aria-pressed="true"]):hover { background: rgba(20, 18, 22, .05); }
.seg.slide button:not([aria-pressed="true"]) { color: #4a4450; }
/* раскрывашка: высота едет плавно (0fr → 1fr), содержимое проявляется */
/* раскрывашка: высота едет плавно (0fr → 1fr). Содержимое гаснет раньше, чем схлопывается высота,
   и проявляется, когда место уже почти готово, — поэтому при частых кликах не видно «срезанной» рамки, только мягкий отступ */
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.45, 0, .2, 1); }
.fold.open { grid-template-rows: 1fr; }
.fold > div { min-height: 0; overflow: hidden; }
.fold > div > * { opacity: 0; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease; }
.fold.open > div > * { opacity: 1; transform: none; transition: opacity .26s ease .14s, transform .26s ease .14s; }
.fold.open.settled > div { overflow: visible; }
.fold .giftbox { margin: 2px 0 6px; }
.fold .err { margin: 2px 0 14px; }
.to .fold { flex: 1 1 100%; }
.to .fold > div { padding: 6px; margin: -6px; }
.to .fold .nick { width: 100%; }

/* обводка поля: штрих рисуется по кругу, когда поле в фокусе, и так же стирается, когда фокус ушёл */
/* обводка поля рисуется SVG-штрихом (см. SHOP.rings в shop.js): из пустоты, по одной чёрточке, по часовой из левого верхнего угла */
.ring { position: relative; }
span.ring { display: block; }
.field:has(.ring) { gap: 11px; }   /* обводка не наезжает на подпись поля */
.ring > svg.rg { position: absolute; left: -6px; top: -6px; z-index: 2; pointer-events: none; overflow: visible; }
.ring > svg.rg rect { fill: none; stroke-width: 3; }
.ring > svg.rg .rg-line { stroke: var(--ink); stroke-linecap: round; }
.ring > svg.rg .rg-mask { stroke: #fff; stroke-width: 7; }
.ring input:focus-visible { outline: none; }
.promo .ring { flex: 1; min-width: 0; }
.promo .ring input { width: 100%; }

/* товар уходит из корзины: схлопывается, остальные мягко подъезжают */
.item { transition: opacity .28s ease, transform .28s ease, height .32s cubic-bezier(.3, .8, .25, 1), padding .32s cubic-bezier(.3, .8, .25, 1), margin .32s cubic-bezier(.3, .8, .25, 1), border-width .32s ease; }
.item.leaving { opacity: 0; transform: translateX(24px) scale(.98); height: 0 !important; padding-top: 0; padding-bottom: 0; margin-bottom: -18px; border-width: 0; overflow: hidden; }
.fadeout { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.done, .note-item.enter { animation: rise .32s cubic-bezier(.3, .8, .25, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.note-item { transition: background-color .35s ease; }
.ntop .dot { transition: opacity .25s ease, transform .25s ease; }
.ntop .dot.gone { opacity: 0; transform: scale(.4); }

@media (prefers-reduced-motion: reduce) {
  .seg.slide::before, .fold, .fold > div > *, .item, .done, .note-item.enter, .fadeout, .ntop .dot { transition: none !important; animation: none !important; }
  .modal[open], .modal[open]::backdrop, .sheet .stage img, .sheet .info > * { animation: none !important; }
  .skin, .skin .pic img { transition: none; }
}

/* ---------- the cart ---------- */
.cartpage h1 { display: flex; align-items: center; gap: 14px; font-size: 44px; font-weight: 900; margin: 0; }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0 0 22px; }
/* обратно к товарам — заметная кнопка рядом с заголовком */
.btn.back { font-size: 17px; padding: 10px 20px; }
.btn.back svg { width: 22px; height: 22px; flex: none; transition: transform .15s ease; }
.btn.back:hover svg { transform: translateX(-3px); }
.cartgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.items { display: grid; gap: 18px; }
.item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 16px; }
.item .pic { position: relative; width: 96px; height: 96px; border: 3px solid var(--ink); border-radius: 15px 12px 16px 11px; overflow: hidden; display: grid; place-items: center; background: #151826; font-size: 44px; }
.item .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.item .tile span { font-size: 46px; }
.to-who { font-size: 15px; font-weight: 900; padding: 1px 8px; border: 2px solid var(--ink); border-radius: 9px; background: var(--yel); white-space: nowrap; }
.item h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 6px; font-size: 22px; font-weight: 900; line-height: 1.15; }   /* отступ сверху — чтобы наклейка типа не наползала на название */
.item p { margin: 6px 0 0; font-size: 14px; color: var(--muted); font-weight: 700; }
.item .right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.item .cost { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 900; white-space: nowrap; }
.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.iconbtn:hover { background: var(--pink); }
.iconbtn svg { width: 18px; height: 18px; }
.qty { display: inline-flex; align-items: center; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--paper); }
.qty button { width: 32px; height: 32px; border: 0; background: transparent; font-weight: 900; font-size: 18px; cursor: pointer; }
.qty button:hover { background: var(--yel); }
.qty span { min-width: 28px; text-align: center; font-weight: 900; }

.summary { padding: 24px; position: sticky; top: 18px; }
.summary h2 { margin: 0 0 16px; font-size: 26px; font-weight: 900; }
.line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 3px dashed var(--shade); font-size: 17px; }
.line .val { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 20px; white-space: nowrap; }
.line.total { border-bottom: 0; padding-top: 14px; }
.line.total .val { font-size: 28px; }
.wallet { margin: 14px 0; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 16px; font-size: 15px; font-weight: 700; line-height: 1.4; display: flex; gap: 10px; align-items: flex-start; }
.wallet.ok { background: var(--mint); } .wallet.low { background: var(--pink); }
.wallet b { font-weight: 900; }
.field { display: grid; gap: 6px; margin: 14px 0; }
.field label { font-size: 15px; font-weight: 900; }
.field input { width: 100%; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 14px 11px 15px 10px; background: var(--paper); font-size: 17px; font-weight: 800; box-shadow: inset 3px 3px 0 var(--shade); }
.field small { font-size: 13px; color: var(--muted); font-weight: 700; }
.promo { display: flex; gap: 8px; }
.promo input { flex: 1; min-width: 0; }
.summary .promo .btn { width: auto; flex: none; font-size: 16px; padding: 8px 18px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 700; margin: 12px 0 18px; line-height: 1.4; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; margin: 0; }
.summary .btn { width: 100%; font-size: 20px; padding: 15px 22px; }
.empty { padding: 40px 24px; text-align: center; font-size: 20px; }
.empty .btn { margin-top: 18px; }

footer { max-width: 1240px; margin: 0 auto; padding: 0 16px 40px; color: var(--muted); font-size: 14px; display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .cartgrid { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 820px) {
  .modal { width: 100vw; max-height: 100dvh; margin: auto 0 0; }
  .sheet { grid-template-columns: 1fr; gap: 0; max-height: 92dvh; border-radius: 26px 22px 0 0 / 22px 26px 0 0; border-bottom: 0; }
  .stage { padding: 18px 16px 6px; }
  .stage .label { top: 4px; left: 30px; }
  .info { padding: 14px 18px 26px; }
  .info h2 { font-size: 34px; }
  .arrow { width: 44px; height: 44px; margin-top: -22px; }
  .close { top: 26px; right: 26px; }
}
@media (max-width: 640px) {
  .footer, footer { flex-direction: column; gap: 6px; }
  .top .grow { display: none; }
  .top > .card { gap: 10px; }
  /* телефон: строка 1 — логотип и корзина, строка 2 — вход или баланс, колокольчик и игрок */
  .top > .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo cart" "acct acct"; }
  .top .logo { grid-area: logo; } .top .cartlink { grid-area: cart; } .top .acct { grid-area: acct; }
  .top .balance { flex: 1 1 0; min-width: 0; justify-content: center; }
  .btn.twitch:not(.big) { width: 100%; }
  .menu { right: -6px; }
  details.me .nk { display: none; }
  .bell, .cartlink { width: 46px; height: 46px; }
  .ntop .when { margin-left: 0; width: 100%; }
  .note-item { gap: 12px; padding: 14px; }
  .nico { width: 40px; height: 40px; font-size: 18px; }
  .item { grid-template-columns: 72px minmax(0, 1fr); }
  .item .pic { width: 72px; height: 72px; }
  .item .right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .cartpage h1, .cat-head h1, .docpage h1 { font-size: 34px; }
  .doc-short ul { grid-template-columns: 1fr; }
  .doc { padding: 6px 18px 20px; }
  .doc h2 { font-size: 20px; }
  .btn.back { width: 100%; }
  .skins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .skin { padding: 9px 9px 11px; }
  .skin .name { font-size: 18px; }
  .skin .about { display: none; }
  .skin .look { display: none; }   /* на телефоне нажимается вся карточка — стрелку убираем, чтобы цена влезала */
  .rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .tile span { font-size: 58px; }
  .sec h2 { font-size: 24px; }
  .chips a { font-size: 14px; padding: 6px 10px; }
}