/* ═══════════════ ПЕРЕМЕННЫЕ ═══════════════ */
:root {
  --r: 22px;
  --gold-100: #f4e4b8;
  --gold-300: #e8c878;
  --gold-500: #c9a04a;
  --gold-700: #8a6628;
  --gold-900: #4a3210;
  --shadow-s: 0 1px 2px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-m: 0 2px 4px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.10);
  --shadow-l: 0 4px 8px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.12), 0 40px 80px rgba(0,0,0,.18);
}

body {
  --page-bg: #ede6d5;
  --panel-bg: #fff; --panel-border: #e6dcc3;
  --text: #2b2b2b; --text-muted: #7a6a4f;
  --accent: #c9a04a;
  --accent-text: #fff;
  --btn2-bg: #e0d4b8; --btn2-text: #2b2b2b;
  --modal-bg: #fffdf7; --input-bg: #fffdf7; --input-border: #e0d4b8;
  --tab-active-bg: #c9a04a; --tab-active-text: #fff;
  --tab-inactive: #7a6a4f; --tab-hover: #f3ead6;
  --overlay: rgba(0,0,0,.6);
  --shadow-s: 0 1px 2px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-l: 0 4px 8px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.12), 0 40px 80px rgba(0,0,0,.18);
}
body[data-r="uncommon"] {
  --page-bg: linear-gradient(160deg,#d8e8c0,#b8d098);
  --panel-bg:#f5faef; --panel-border:#b8d09a;
  --text:#24360f; --text-muted:#4a6a2a;
  --accent:#4a7c2e;
  --btn2-bg:#c8dcae; --btn2-text:#24360f;
  --modal-bg:#f5faef; --input-bg:#fff; --input-border:#b8d09a;
  --tab-active-bg:#4a7c2e; --tab-inactive:#4a6a2a; --tab-hover:#e0f0c8;
  --overlay: rgba(30,50,10,.65);
}
body[data-r="rare"] {
  --page-bg: linear-gradient(160deg,#cfdff5,#a8c4e8);
  --panel-bg:#f0f6ff; --panel-border:#a8c0e0;
  --text:#10224a; --text-muted:#4a6a98;
  --accent:#2c5aa8;
  --btn2-bg:#c0d4ee; --btn2-text:#10224a;
  --modal-bg:#f0f6ff; --input-bg:#fff; --input-border:#a8c0e0;
  --tab-active-bg:#2c5aa8; --tab-inactive:#4a6a98; --tab-hover:#dceafc;
  --overlay: rgba(10,30,60,.7);
}
body[data-r="epic"] {
  --page-bg: radial-gradient(circle at 50% 0%,#2a1450 0%,#150826 100%);
  --panel-bg:rgba(255,255,255,.06); --panel-border:rgba(200,160,255,.3);
  --text:#f0e0ff; --text-muted:#b090d0;
  --accent:#a878e0; --accent-text:#1a0030;
  --btn2-bg:rgba(255,255,255,.12); --btn2-text:#f0e0ff;
  --modal-bg:#241442; --input-bg:rgba(255,255,255,.08); --input-border:rgba(200,160,255,.4);
  --tab-active-bg:#a878e0; --tab-active-text:#1a0030; --tab-inactive:#b090d0; --tab-hover:rgba(200,160,255,.15);
  --overlay: rgba(10,0,30,.85);
}
body[data-r="legendary"] {
  --page-bg: radial-gradient(circle at 50% 0%,#6a3a00 0%,#2a1400 100%);
  --panel-bg:rgba(255,220,150,.08); --panel-border:rgba(255,200,80,.4);
  --text:#fff0c0; --text-muted:#d0a860;
  --accent:#ffcc40; --accent-text:#3a1800;
  --btn2-bg:rgba(255,220,150,.15); --btn2-text:#fff0c0;
  --modal-bg:#4a2800; --input-bg:rgba(255,220,150,.1); --input-border:rgba(255,200,80,.5);
  --tab-active-bg:#ffcc40; --tab-active-text:#3a1800; --tab-inactive:#d0a860; --tab-hover:rgba(255,220,150,.15);
  --overlay: rgba(30,10,0,.85);
}
body[data-r="mythic"] {
  --page-bg: radial-gradient(circle at 50% 100%,#4a0000 0%,#0a0000 100%);
  --panel-bg:rgba(255,80,80,.08); --panel-border:rgba(255,80,80,.4);
  --text:#ffe0e0; --text-muted:#e08080;
  --accent:#ff4040; --accent-text:#1a0000;
  --btn2-bg:rgba(255,80,80,.15); --btn2-text:#ffe0e0;
  --modal-bg:#2a0505; --input-bg:rgba(255,80,80,.1); --input-border:rgba(255,80,80,.5);
  --tab-active-bg:#ff4040; --tab-active-text:#1a0000; --tab-inactive:#e08080; --tab-hover:rgba(255,80,80,.15);
  --overlay: rgba(20,0,0,.9);
}

/* ═══════════════ БАЗА ═══════════════ */
* { box-sizing: border-box; }
html, body { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; /* базовый размер: меньше на телефоне читать тяжело */
  line-height: 1.6;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text);
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  min-height: 100vh;
  transition: background .6s, color .6s;
  overscroll-behavior-y: none;
}
.app { width: min(100%, 900px); margin: 0 auto; }

h1, h2, h3,
.ob-title, .tk-title h2, .st,
.certificate h1, .certificate .sub,
.t-name, .t-s-name, .r-title, .mdl h2 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: .01em;
}
.cnt, .t-prog, .r-line span:last-child, .case-chances {
  font-feature-settings: 'tnum';
}

/* ═══════════════ ОНБОРДИНГ ═══════════════ */
.onboard {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg,#1a1408,#2a1f10,#1a1408);
  overflow: hidden;
  transition: opacity .7s, transform .7s;
}
.onboard.hidden { opacity: 0; transform: scale(1.08); pointer-events: none; }
.onboard-bg {
  position: absolute; inset: -50%;
  background: conic-gradient(from 0deg,
    transparent, rgba(255,215,120,.2) 60deg, transparent 120deg,
    rgba(180,120,255,.15) 200deg, transparent 260deg,
    rgba(255,215,120,.2) 320deg, transparent);
  animation: rot 20s linear infinite;
  filter: blur(60px);
}
@keyframes rot { to { transform: rotate(360deg); } }
.onboard-clovers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.onboard-clover {
  position: absolute; font-size: 28px; opacity: .35;
  filter: drop-shadow(0 0 12px rgba(255,215,120,.7));
  animation: fl linear infinite;
}
@keyframes fl {
  0%   { transform: translateY(110vh) rotate(0); opacity: 0; }
  10%,90% { opacity: .45; }
  100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
}
.onboard-card {
  position: relative; width: 100%; max-width: 520px;
  border-radius: 28px; padding: 2px;
  background: linear-gradient(135deg, #f4e4b8, #c9a04a 40%, #f4e4b8 70%, #8a6628);
  background-size: 200% 200%;
  animation: bsh 6s linear infinite;
  z-index: 2;
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 80px rgba(255,200,0,.3);
}
@keyframes bsh { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } }
.onboard-inner {
  background: linear-gradient(160deg,#fffdf7 0%,#f5ecd0 100%);
  border-radius: 26px; padding: 40px 32px 32px;
  color: #2b2b2b; position: relative; overflow: hidden;
  min-height: 520px; display: flex;
}
.onboard-inner::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,215,120,.25) 0, transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(180,120,255,.15) 0, transparent 45%);
  pointer-events: none;
}
.step {
  position: absolute; inset: 0; padding: 40px 32px 32px;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateX(40px); pointer-events: none;
  transition: opacity .5s, transform .5s;
  z-index: 1;
}
.step.active {
  opacity: 1; transform: translateX(0); pointer-events: auto;
  position: relative; z-index: 2;
}
.step.leaving { opacity: 0; transform: translateX(-40px); }
.logo {
  font-size: 76px; line-height: 1; margin-bottom: 12px;
  filter: drop-shadow(0 12px 32px rgba(255,200,0,.5));
  animation: lp 3s ease-in-out infinite;
}
@keyframes lp {
  0%,100% { transform: scale(1) rotate(-3deg); }
  50% { transform: scale(1.08) rotate(3deg); }
}
.ob-title {
  font-size: clamp(2rem, 6vw, 2.6rem);
  margin: 0 0 8px; text-align: center;
  letter-spacing: .04em;
  font-weight: 800;
  background: radial-gradient(circle at 30% 30%, #f4d47a, #b8860b 55%, #6a4a10);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ob-sub {
  text-align: center; color: #8a7a5a;
  font-size: .95rem; margin: 0 0 24px;
  line-height: 1.55; font-style: italic;
}
.agr {
  width: 100%; flex: 1; min-height: 0;
  background: rgba(255,255,255,.65);
  border: 1.5px solid rgba(184,134,11,.2);
  border-radius: 16px; padding: 20px 22px;
  overflow-y: auto; margin-bottom: 20px;
  font-size: .82rem; line-height: 1.7; color: #4a3d20;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}
.agr::-webkit-scrollbar { width: 6px; }
.agr::-webkit-scrollbar-thumb { background: #c9a04a; border-radius: 3px; }
.agr h3 { margin: 0 0 12px; color: #8a5a10; font-size: 1.05rem; letter-spacing: .02em; }
.agr h4 { margin: 16px 0 6px; color: #6a4a10; font-size: .9rem; letter-spacing: .02em; }
.agr p { margin: 0 0 8px; }
.agr ul { margin: 6px 0 10px; padding-left: 20px; }
.agr li { margin-bottom: 3px; }
.agr-end { text-align:center; margin-top:20px; font-style:italic; color:#8a7a5a; }
.check-label {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; margin-bottom: 18px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(244,228,184,.4);
  border: 1.5px solid rgba(184,134,11,.2);
  transition: all .25s; width: 100%; user-select: none;
}
.check-label:hover { background: rgba(244,228,184,.6); }
.check-label input { display: none; }
.check-box {
  width: 24px; height: 24px; min-width: 24px; border-radius: 8px;
  background: #fff; border: 2px solid #c9a04a;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.check-box::after {
  content: '✓'; color: #fff; font-weight: 900; font-size: .9rem;
  transform: scale(0) rotate(-90deg);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  line-height: 1;
}
.check-label input:checked + .check-box {
  background: linear-gradient(135deg, #e8c878, #c9a04a);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(201,160,74,.6);
  border-color: transparent;
}
.check-label input:checked + .check-box::after { transform: scale(1) rotate(0); }
.check-label span:last-child { font-size: .9rem; color: #4a3d20; line-height: 1.4; }
.input-wrap { width: 100%; position: relative; margin-bottom: 22px; }
.input-wrap::before {
  content: '👤'; position: absolute; left: 20px; top: 50%;
  transform: translateY(-50%); font-size: 1.3rem;
  z-index: 2; pointer-events: none; opacity: .6;
}
#onboardName {
  width: 100%; padding: 20px 20px 20px 56px;
  border: 2px solid rgba(184,134,11,.3);
  border-radius: 18px; font-size: 1.1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  background: rgba(255,255,255,.85); color: #2b2b2b;
  outline: none; transition: all .3s;
}
#onboardName:focus {
  border-color: #c9a04a;
  box-shadow: 0 0 0 5px rgba(201,160,74,.15), 0 8px 32px rgba(201,160,74,.2);
  background: #fff; transform: translateY(-2px);
}
.ob-btn {
  width: 100%; padding: 18px 28px; border: none; border-radius: 16px;
  font-size: 1rem; font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  background: linear-gradient(135deg, #e8c878, #c9a04a 50%, #8a6628);
  background-size: 200% 100%;
  color: #fff;
  box-shadow: 0 8px 24px rgba(201,160,74,.4), inset 0 1px 0 rgba(255,255,255,.3);
  transition: all .3s;
  position: relative; overflow: hidden;
}
.ob-btn:hover:not(:disabled) {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(201,160,74,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.ob-btn:active:not(:disabled) { transform: translateY(-1px) scale(.99); transition-duration: .05s; }
.ob-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.ob-hint { font-size: .78rem; color: #a89878; margin-top: 14px; text-align: center; font-style: italic; }
.dots { display: flex; gap: 8px; justify-content: center; margin-top: auto; padding-top: 20px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(184,134,11,.25); transition: all .4s; }
.dot.active {
  width: 32px; border-radius: 4px;
  background: linear-gradient(90deg,#f4d47a,#c9a04a);
  box-shadow: 0 0 12px rgba(201,160,74,.5);
}
@media (max-width: 480px) {
  .onboard-inner { padding: 32px 22px 24px; min-height: 480px; }
  .step { padding: 32px 22px 24px; }
  .logo { font-size: 64px; }
  .agr { font-size: .78rem; padding: 16px 18px; max-height: 200px; }
}

/* ═══════════════ ВКЛАДКИ ═══════════════ */
.tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: var(--panel-bg); padding: 6px; border-radius: 16px;
  box-shadow: var(--shadow-s);
  overflow-x: auto;
  border: 1px solid var(--panel-border);
  transition: all .5s;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1; min-width: 80px;
  padding: 12px 10px;
  border: none; background: transparent;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: .85rem;
  cursor: pointer; color: var(--tab-inactive);
  white-space: nowrap;
  transition: all .25s;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.tab svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.tab:hover { background: var(--tab-hover); }
.tab:hover svg { transform: translateY(-2px); }
.tab.active {
  background: linear-gradient(135deg, var(--tab-active-bg), color-mix(in srgb, var(--tab-active-bg) 70%, black));
  color: var(--tab-active-text);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tab-active-bg) 40%, transparent);
}
.tab.active svg { transform: scale(1.05); }
.page { display: none; }
.page.active { display: block; animation: fadein .4s ease-out; }
@keyframes fadein {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; }
}

/* ═══════════════ РАБОЧИЙ СТОЛ ═══════════════ */
.greeting {
  text-align: center; margin-bottom: 24px; padding: 16px 20px;
  border-radius: 16px; background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-s); font-size: .95rem;
  line-height: 1.5;
}
.greeting strong {
  color: var(--accent); font-weight: 800;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  letter-spacing: .02em;
}
.st {
  font-size: 1.3rem;
  margin: 32px 0 16px; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: .02em;
}
.st:first-of-type { margin-top: 8px; }
.st-shop { margin-top: 36px; }
.cnt {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; font-weight: 700;
  background: linear-gradient(135deg, #e8c878, #c9a04a);
  color: #fff;
  border-radius: 999px; padding: 3px 11px;
  box-shadow: 0 2px 6px rgba(201,160,74,.4);
}
.my-tickets { display: grid; gap: 14px; }
.t-owned {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: 20px;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--shadow-s);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  overflow: hidden; cursor: pointer;
  animation: tin .55s cubic-bezier(.34,1.56,.64,1) backwards;
}
.t-owned::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #f4e4b8, #c9a04a, #8a6628);
  transition: width .3s;
}
.t-owned:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-l); }
.t-owned:hover::before { width: 10px; }
.t-owned.done { opacity: .7; }
.t-owned.done::before { background: linear-gradient(180deg, #7da65a, #4a7c2e); }
@keyframes tin { from { opacity: 0; transform: translateY(24px) scale(.95); } }
.t-ico { font-size: 2.6rem; line-height: 1; flex-shrink: 0; }
.t-body { flex: 1; min-width: 0; }
.t-name {
  font-weight: 700; font-size: 1.2rem;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  letter-spacing: .01em;
}
.t-badge {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem; font-weight: 700; padding: 3px 10px;
  border-radius: 999px;
  background: rgba(201,160,74,.15);
  color: var(--accent);
  letter-spacing: .08em; text-transform: uppercase;
}
.t-owned.done .t-badge { background: rgba(74,124,46,.15); color: #4a7c2e; }
.t-prog {
  font-size: .82rem; color: var(--text-muted);
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}
.t-bar { height: 8px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; }
.t-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #e8c878, #c9a04a);
  border-radius: 999px; transition: width .6s;
}
.t-arr { font-size: 1.4rem; color: var(--accent); opacity: .5; transition: all .25s; }
.t-owned:hover .t-arr { opacity: 1; transform: translateX(6px); }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.t-shop {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 24px 16px 18px;
  border-radius: 20px; background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  animation: tin .55s cubic-bezier(.34,1.56,.64,1) backwards;
}
.t-shop:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-l); }
.t-shop:active { transform: translateY(-2px) scale(.98); }
.t-s-ico {
  font-size: 3rem; line-height: 1; margin-bottom: 12px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.t-shop:hover .t-s-ico { transform: scale(1.15) rotate(-6deg); }
.t-s-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; letter-spacing: .01em; }
.t-s-desc { font-size: .78rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.45; min-height: 2.7em; }
.t-s-price { font-family: 'Cormorant Garamond', serif; font-weight: 900; font-size: 1.6rem; color: var(--accent); margin-bottom: 14px; letter-spacing: .02em; }
.t-s-btn {
  width: 100%; padding: 12px 16px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, #e8c878, #c9a04a);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: .85rem;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(201,160,74,.3);
  transition: all .2s;
}
.t-s-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,160,74,.5); }
/* ═══════════════ ПРОСМОТР БИЛЕТА ═══════════════ */
.t-view { display: none; }
.t-view.active { display: block; animation: fadein .4s; }
.t-vh {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--shadow-s);
}
.back {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1.5px solid var(--panel-border);
  background: transparent; color: var(--text);
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
  transition: all .2s;
}
.back:hover { background: var(--tab-hover); border-color: var(--accent); transform: translateX(-3px); }
.t-vt { flex: 1; min-width: 0; }
.t-vt h2 { margin: 0 0 3px; font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 700; letter-spacing: .01em; }
.t-vt p { margin: 0; font-size: .82rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.t-vi { font-size: 2.2rem; flex-shrink: 0; }
.buy-another-wrap { text-align: center; margin-top: 24px; }

/* ═══════════════ ТИКЕТ ═══════════════ */
.ticket {
  --tb: #fffdf7; --tbo: #d8d0c0; --ta: #8a8a8a;
  --tt: #2b2b2b; --tm: #8a8a8a; --tcb: #fff; --tce: #e0d4b8;
  position: relative; background: var(--tb);
  border: 2px solid var(--tbo); border-radius: var(--r);
  padding: 32px 26px; color: var(--tt);
  transition: all .6s;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
.ticket[data-r="common"]   { --tb:#fffdf7; --tbo:#d8d0c0; --ta:#8a8a8a; --tt:#2b2b2b; --tm:#8a8a8a; --tcb:#fff; --tce:#e0d4b8; }
.ticket[data-r="uncommon"] { --tb:linear-gradient(160deg,#f0f5e5,#e0ebd0); --tbo:#7da65a; --ta:#4a7c2e; --tt:#2a3e1a; --tm:#5a7a4a; --tcb:#fff; --tce:#b8d09a; }
.ticket[data-r="rare"]     { --tb:linear-gradient(160deg,#e8f0fa,#cfdff5); --tbo:#4a7ac4; --ta:#2c5aa8; --tt:#1a2e5a; --tm:#5a7aa8; --tcb:#fff; --tce:#a8c0e0; }
.ticket[data-r="epic"]     { --tb:radial-gradient(circle at 50% 0%,#3a1f5c,#1e1030); --tbo:#a878e0; --ta:#d0a0ff; --tt:#f0e0ff; --tm:#b090d0; --tcb:rgba(255,255,255,.07); --tce:rgba(200,160,255,.3); }
.ticket[data-r="legendary"]{ --tb:linear-gradient(160deg,#8a5a10,#4a2800); --tbo:#ffd060; --ta:#ffcc40; --tt:#fff0c0; --tm:#d0a860; --tcb:rgba(255,220,150,.1); --tce:rgba(255,200,80,.4); }
.ticket[data-r="mythic"]   { --tb:radial-gradient(circle at 50% 100%,#5a0a0a,#1a0000); --tbo:#ff3030; --ta:#ff4040; --tt:#ffe0e0; --tm:#e08080; --tcb:rgba(255,80,80,.12); --tce:rgba(255,80,80,.4); }
.ticket[data-r="common-white"]    { --tb:linear-gradient(160deg, #ffffff, #f0f0f0); --tbo:#d0d0d0; --ta:#a0a0a0; --tt:#1a1a1a; --tm:#8a8a8a; --tcb:#fafafa; --tce:#e0e0e0; }
.ticket[data-r="uncommon-lime"]   { --tb:linear-gradient(160deg, #f0f8d8, #c8e088); --tbo:#7ab020; --ta:#5a9010; --tt:#2a3a0a; --tm:#5a7a1a; --tcb:#fff; --tce:#b8d870; }
.ticket[data-r="rare-azure"]      { --tb:linear-gradient(160deg, #d8f0f8, #90d4e8); --tbo:#0891b8; --ta:#056a90; --tt:#082030; --tm:#2a7898; --tcb:#fff; --tce:#88d0e0; }
.ticket[data-r="epic-violet"]     { --tb:radial-gradient(circle at 50% 0%, #5a2068, #2a0a38); --tbo:#e878d8; --ta:#ff90e8; --tt:#ffe0ff; --tm:#d0a0d8; --tcb:rgba(255,255,255,.07); --tce:rgba(255,160,240,.35); }
.ticket[data-r="legendary-amber"] { --tb:linear-gradient(160deg, #a04818, #4a1800); --tbo:#ffa040; --ta:#ffb860; --tt:#ffe8c0; --tm:#e0a060; --tcb:rgba(255,180,90,.12); --tce:rgba(255,160,60,.45); }
.ticket[data-r="mythic-void"]     { --tb:radial-gradient(circle at 50% 100%, #3a0810, #0a0000); --tbo:#c82038; --ta:#e83050; --tt:#e8d0d0; --tm:#a06060; --tcb:rgba(200,32,56,.1); --tce:rgba(200,32,56,.4); }

.tk-title { text-align: center; margin: 4px 0 8px; }
.tk-title h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: .03em; }
.tk-title p { margin: 4px 0 0; font-size: clamp(.85rem, 2vw, 1rem); color: var(--tm); font-style: italic; letter-spacing: .03em; }
.tk-badge {
  position: absolute; top: 18px; right: 18px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--ta); color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.ticket[data-r="epic"] .tk-badge,
.ticket[data-r="mythic"] .tk-badge { color: #1a0000; }
.ticket[data-r="epic-violet"] .tk-badge,
.ticket[data-r="mythic-void"] .tk-badge { color: #1a0000; }
.tk-corner {
  position: absolute; width: 48px; height: 48px;
  pointer-events: none; color: var(--ta);
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  opacity: .7;
}
.tk-corner.tl { top: 12px; left: 12px; }
.tk-corner.tr { top: 12px; right: 12px; }
.tk-corner.bl { bottom: 12px; left: 12px; }
.tk-corner.br { bottom: 12px; right: 12px; }
.tk-corner.tr > span { transform: scaleX(-1); display: inline-block; }
.tk-corner.bl > span { transform: scaleY(-1); display: inline-block; }
.tk-corner.br > span { transform: scale(-1); display: inline-block; }
.ticket[data-r="common"] .tk-corner,
.ticket[data-r="common-white"] .tk-corner { display: none; }
.ticket[data-r="uncommon"] .tk-corner span::before,
.ticket[data-r="uncommon-lime"] .tk-corner span::before { content: '❦'; }
.ticket[data-r="rare"]     .tk-corner span::before,
.ticket[data-r="rare-azure"] .tk-corner span::before { content: '◆'; }
.ticket[data-r="epic"]     .tk-corner span::before,
.ticket[data-r="epic-violet"] .tk-corner span::before { content: '✦'; }
.ticket[data-r="legendary"].tk-corner span::before,
.ticket[data-r="legendary-amber"].tk-corner span::before { content: '✵'; }
.ticket[data-r="mythic"]   .tk-corner span::before,
.ticket[data-r="mythic-void"].tk-corner span::before { content: '✷'; }

.grid { display: grid; gap: 8px; margin-top: 24px; }
.wish {
  aspect-ratio: 1;
  border: 2px solid var(--tce);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  cursor: pointer; user-select: none;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.8), transparent 60%), var(--tcb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.wish:hover:not(.done) {
  border-color: var(--ta);
  transform: translateY(-4px) scale(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px rgba(0,0,0,.15);
  z-index: 5;
}
.wish.done {
  background: var(--ta); border-color: var(--ta);
  opacity: .6;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}
.wish.done::after {
  content: '✓';
  position: absolute; bottom: 2px; right: 4px;
  font-size: .75rem; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.wish.done:hover { opacity: .9; transform: scale(1.08); }
.wish.pop { animation: wp .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes wp {
  0% { transform: scale(1); }
  40% { transform: scale(1.6) rotate(15deg); }
  100% { transform: scale(1); }
}
.progress { height: 10px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; margin-top: 22px; }
.ticket[data-r="epic"] .progress,
.ticket[data-r="legendary"] .progress,
.ticket[data-r="mythic"] .progress,
.ticket[data-r="epic-violet"] .progress,
.ticket[data-r="legendary-amber"] .progress,
.ticket[data-r="mythic-void"] .progress { background: rgba(255,255,255,.15); }
.progress > div { height: 100%; background: var(--ta); transition: width .6s cubic-bezier(.4,0,.2,1); }

/* ═══════════════ КНОПКИ ═══════════════ */
button {
  padding: 14px 22px;
  border: none; border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: .95rem;
  cursor: pointer;
  background: var(--accent); color: var(--accent-text);
  position: relative; overflow: hidden;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, filter .15s;
}
button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
button:active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: .05s; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.secondary { background: var(--btn2-bg); color: var(--btn2-text); }
button.big { padding: 20px 32px; font-size: 1.05rem; border-radius: 16px; letter-spacing: .02em; }
button.pulse { animation: pls 1.8s infinite; }
@keyframes pls {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,160,74,.5); }
  50% { box-shadow: 0 0 0 16px rgba(201,160,74,0); }
}
.ripple {
  position: absolute;
  width: 20px; height: 20px;
  background: rgba(255,255,255,.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: rippleAnim .6s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: translate(-50%, -50%) scale(15); opacity: 0; } }

/* ═══════════════ МОДАЛКИ ═══════════════ */
.ovl {
  position: fixed; inset: 0;
  background: var(--overlay);
  display: none; align-items: center; justify-content: center;
  padding: 20px; z-index: 1000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ovl.active { display: flex; }
.mdl {
  background: var(--modal-bg);
  border-radius: 24px;
  padding: 32px 26px;
  max-width: 480px; width: 100%;
  text-align: center;
  box-shadow: var(--shadow-l);
  animation: mp .4s cubic-bezier(.34,1.56,.64,1);
  max-height: 92vh; overflow-y: auto;
  color: var(--text);
  border: 1px solid var(--panel-border);
}
@keyframes mp { from { transform: scale(.85); opacity: 0; } }
.mdl h2 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
.mdl > p { margin: 0 0 22px; color: var(--text-muted); font-size: .9rem; line-height: 1.5; }
.mdl .btns { display: flex; gap: 12px; margin-top: 22px; }
.mdl .btns button { flex: 1; }
.mdl button.cancel { background: var(--btn2-bg); color: var(--btn2-text); }
.mdl label {
  display: block; text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .75rem; font-weight: 700;
  color: var(--text-muted);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mdl input, .mdl textarea {
  width: 100%; padding: 14px 16px;
  border: 2px solid var(--input-border);
  border-radius: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  background: var(--input-bg); color: var(--text);
  transition: border-color .2s;
}
.mdl textarea { min-height: 80px; resize: vertical; }
.mdl input:focus, .mdl textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.view-text {
  font-size: 1.1rem; color: var(--text);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.5;
}
.receipt {
  background: linear-gradient(180deg,#fefcf5,#f5ecd0);
  border-radius: 16px; padding: 26px 22px;
  text-align: center; color: #2b2b2b;
  margin-bottom: 20px;
}
.r-ico { font-size: 3.2rem; line-height: 1; margin-bottom: 12px; animation: lp 3s ease-in-out infinite; }
.r-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 6px; letter-spacing: .02em; }
.r-sub { font-size: .8rem; color: #8a7a5a; margin-bottom: 20px; font-style: italic; }
.r-line {
  display: flex; justify-content: space-between;
  font-size: .88rem; padding: 10px 0;
  border-bottom: 1px dashed rgba(184,134,11,.25);
  color: #4a3d20;
}
.r-line.total {
  font-weight: 900; font-size: 1.3rem; color: #8a5a10;
  padding-top: 16px;
  border-top: 2px solid rgba(184,134,11,.4);
  border-bottom: none; margin-top: 10px;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: .02em;
}
.r-note { font-size: .75rem; color: #a89878; margin-top: 16px; font-style: italic; }

/* ═══════════════ КОНФЕТТИ ═══════════════ */
.cf {
  position: fixed; top: -20px;
  width: 10px; height: 10px;
  z-index: 9999; pointer-events: none; border-radius: 2px;
  animation: cff linear forwards;
}
@keyframes cff {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ═══════════════ КЕЙСЫ ═══════════════ */
.case-viewport {
  position: relative; width: 100%; height: 160px;
  border-radius: 18px;
  background: linear-gradient(180deg,#0d0d0d,#1a1a1a,#0d0d0d);
  overflow: hidden; margin-bottom: 22px;
}
.case-viewport::before, .case-viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px;
  pointer-events: none; z-index: 3;
}
.case-viewport::before { left: 0; background: linear-gradient(90deg,#0d0d0d,transparent); }
.case-viewport::after { right: 0; background: linear-gradient(270deg,#0d0d0d,transparent); }
.case-track {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; align-items: center;
  will-change: transform;
}
.case-item {
  flex: 0 0 auto;
  width: 128px; height: 128px; margin: 0 6px;
  border-radius: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 2px solid;
  padding: 8px; text-align: center;
}
.case-item .ci-i { font-size: 2rem; line-height: 1; }
.ci-common    { background: linear-gradient(180deg,#f5f0e0,#d8d0c0); border-color: #a8a098; color: #3a3a3a; }
.ci-uncommon  { background: linear-gradient(180deg,#d0e8b0,#7da65a); border-color: #4a7c2e; color: #1e3010; }
.ci-rare      { background: linear-gradient(180deg,#a8c8f0,#4a7ac4); border-color: #2c5aa8; color: #0e1c3a; }
.ci-epic      { background: linear-gradient(180deg,#6a3fa0,#3a1f5c); border-color: #d0a0ff; color: #f0e0ff; }
.ci-legendary { background: linear-gradient(180deg,#e0a030,#8a5a10); border-color: #ffd060; color: #3a1800; }
.ci-mythic    { background: linear-gradient(180deg,#a02020,#4a0000); border-color: #ff4040; color: #ffe0e0; }
.ci-common-white    { background: linear-gradient(180deg,#ffffff,#f0f0f0); border-color: #c0c0c0; color: #2b2b2b; }
.ci-uncommon-lime   { background: linear-gradient(180deg,#e8f8c0,#a8d040); border-color: #7ab020; color: #1e2a08; }
.ci-rare-azure      { background: linear-gradient(180deg,#c8ecf4,#40a8c8); border-color: #0891b8; color: #041a2a; }
.ci-epic-violet     { background: linear-gradient(180deg,#5a2068,#2a0a38); border-color: #e878d8; color: #ffd0f8; }
.ci-legendary-amber { background: linear-gradient(180deg,#a04818,#4a1800); border-color: #ffa040; color: #ffd090; }
.ci-mythic-void     { background: linear-gradient(180deg,#3a0810,#000); border-color: #c82038; color: #e0a0a0; }

.case-marker {
  position: absolute; top: -8px; bottom: -8px; left: 50%;
  transform: translateX(-50%); width: 3px;
  background: linear-gradient(180deg,#fff,#ffd060,#fff);
  z-index: 4;
  box-shadow: 0 0 16px #ffd060, 0 0 6px #fff;
  border-radius: 2px;
}
.case-marker::before, .case-marker::after {
  content: ''; position: absolute; left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.case-marker::before { top: -3px; border-top: 14px solid #ffd060; }
.case-marker::after { bottom: -3px; border-bottom: 14px solid #ffd060; }
.case-banner {
  text-align: center; padding: 16px;
  border-radius: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 20px;
  min-height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid;
  transition: all .3s;
}
.case-banner[data-r="common"]    { background: #f5f0e0; color: #2b2b2b; border-color: #a8a098; }
.case-banner[data-r="uncommon"]  { background: #e0f0c8; color: #2a3e1a; border-color: #4a7c2e; }
.case-banner[data-r="rare"]      { background: #d8e8fa; color: #10224a; border-color: #2c5aa8; }
.case-banner[data-r="epic"]      { background: #3a1f5c; color: #f0e0ff; border-color: #d0a0ff; box-shadow: 0 0 40px rgba(180,120,255,.6); }
.case-banner[data-r="legendary"] { background: #8a5a10; color: #fff0c0; border-color: #ffd060; box-shadow: 0 0 40px rgba(255,200,0,.7); }
.case-banner[data-r="mythic"]    { background: #4a0000; color: #ffe0e0; border-color: #ff4040; box-shadow: 0 0 40px rgba(255,50,50,.8); }
.case-banner[data-r="common-white"]    { background: #f5f5f5; color: #1a1a1a; border-color: #c0c0c0; }
.case-banner[data-r="uncommon-lime"]   { background: #e8f8c0; color: #1e2a08; border-color: #7ab020; }
.case-banner[data-r="rare-azure"]      { background: #d8f0f8; color: #041a2a; border-color: #0891b8; }
.case-banner[data-r="epic-violet"]     { background: #5a2068; color: #ffd0f8; border-color: #e878d8; box-shadow: 0 0 40px rgba(232,120,216,.6); }
.case-banner[data-r="legendary-amber"] { background: #a04818; color: #ffd090; border-color: #ffa040; box-shadow: 0 0 40px rgba(255,160,64,.7); }
.case-banner[data-r="mythic-void"]     { background: #1a0205; color: #e0a0a0; border-color: #c82038; box-shadow: 0 0 40px rgba(200,32,56,.8); }

.case-btn-wrap { text-align: center; padding: 8px 0; }
.case-equip-wrap { text-align: center; margin-top: 12px; }
.case-chances {
  text-align: center; margin-top: 24px;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-family: 'JetBrains Mono', monospace;
}

/* ═══════════════ СТИЛИ (карточки инвентаря) ═══════════════ */
.skins-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.skin-card {
  border-radius: 14px; padding: 20px 12px;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase; border: 2px solid;
  cursor: pointer; transition: all .3s;
  position: relative;
}
.skin-card:hover:not(.locked) { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.skin-card.eq { box-shadow: 0 0 0 3px rgba(255,255,255,.4), 0 0 20px rgba(201,160,74,.4); }
.skin-card.eq::after { content: '✓'; position: absolute; top: 8px; right: 10px; font-size: 1.1rem; font-weight: 900; }
.skin-card.locked { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.skin-card.locked::before { content: '🔒'; display: block; font-size: 1.3rem; margin-bottom: 6px; }
.skin-common          { background: #fffdf7; color: #2b2b2b; border-color: #d8d0c0; }
.skin-uncommon        { background: linear-gradient(160deg,#f0f5e5,#e0ebd0); color: #2a3e1a; border-color: #7da65a; }
.skin-rare            { background: linear-gradient(160deg,#e8f0fa,#cfdff5); color: #1a2e5a; border-color: #4a7ac4; }
.skin-epic            { background: linear-gradient(160deg,#3a1f5c,#1e1030); color: #e0c8ff; border-color: #a878e0; }
.skin-legendary       { background: linear-gradient(160deg,#8a5a10,#4a2800); color: #ffe0a0; border-color: #ffd060; }
.skin-mythic          { background: linear-gradient(160deg,#5a0a0a,#1a0000); color: #ffb0b0; border-color: #ff3030; }
.skin-common-white    { background: linear-gradient(160deg,#ffffff,#f0f0f0); color: #1a1a1a; border-color: #d0d0d0; }
.skin-uncommon-lime   { background: linear-gradient(160deg,#e8f8c0,#a8d040); color: #1e2a08; border-color: #7ab020; }
.skin-rare-azure      { background: linear-gradient(160deg,#c8ecf4,#40a8c8); color: #041a2a; border-color: #0891b8; }
.skin-epic-violet     { background: linear-gradient(160deg,#5a2068,#2a0a38); color: #ffd0f8; border-color: #e878d8; }
.skin-legendary-amber { background: linear-gradient(160deg,#a04818,#4a1800); color: #ffd090; border-color: #ffa040; }
.skin-mythic-void     { background: linear-gradient(160deg,#3a0810,#000); color: #e0a0a0; border-color: #c82038; }
/* ═══════════════ СЕРТИФИКАТ ═══════════════ */
.cert-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .cert-layout { grid-template-columns: 1fr; } }
.form-panel {
  background: var(--panel-bg);
  border-radius: 20px; padding: 22px;
  box-shadow: var(--shadow-s);
  border: 1px solid var(--panel-border);
}
.form-panel h3 { margin: 0 0 12px; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; }
.form-panel label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .75rem; font-weight: 700;
  color: var(--text-muted);
  margin: 14px 0 6px;
  text-transform: uppercase; letter-spacing: .08em;
}
.form-panel input {
  width: 100%; padding: 13px 15px;
  border: 2px solid var(--input-border); border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem; /* ≥16px — иначе iOS зумит при фокусе */
  background: var(--input-bg); color: var(--text);
  transition: all .2s;
}
.form-panel input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.form-panel button { width: 100%; margin-top: 14px; }
.cert-preview { display: flex; justify-content: center; padding: 14px; }
.certificate {
  position: relative; width: 100%; max-width: 520px;
  aspect-ratio: 1 / 1.414;
  border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-l);
}
.certificate[data-r="common"]    { --cb: linear-gradient(135deg,#fdfbf3,#f0e8d0); --ca: #8a8a8a; --ct: #2b2b2b; --cm: #8a8a8a; }
.certificate[data-r="uncommon"]  { --cb: linear-gradient(135deg,#f8fce8,#d0e8b0,#a8cc80); --ca: #4a7c2e; --ct: #1e3010; --cm: #4a6a2a; }
.certificate[data-r="rare"]      { --cb: linear-gradient(135deg,#eaf2ff,#b8d0f0,#7aa0d8); --ca: #2c5aa8; --ct: #0e1c3a; --cm: #4a6a98; }
.certificate[data-r="epic"]      { --cb: radial-gradient(ellipse at 50% 30%,#4a2478,#2a1450 50%,#150826); --ca: #d0a0ff; --ct: #f0e0ff; --cm: #b090d0; }
.certificate[data-r="legendary"] { --cb: linear-gradient(135deg,#b07820,#8a5a10,#4a2800); --ca: #ffd060; --ct: #fff0c0; --cm: #d0a860; }
.certificate[data-r="mythic"]    { --cb: linear-gradient(135deg,#5a0a0a,#1a0000); --ca: #ff4040; --ct: #ffe0e0; --cm: #e08080; }
.certificate[data-r="common-white"]    { --cb: linear-gradient(135deg,#ffffff,#f2f2f2); --ca: #b8b8b8; --ct: #1a1a1a; --cm: #7a7a7a; }
.certificate[data-r="uncommon-lime"]   { --cb: linear-gradient(135deg,#f8fce8,#d0ec88,#a8d040); --ca: #5a9010; --ct: #1e2a08; --cm: #4a6a10; }
.certificate[data-r="rare-azure"]      { --cb: linear-gradient(135deg,#d8f4fc,#88d0e8,#40a8c8); --ca: #056a90; --ct: #041a2a; --cm: #2a7898; }
.certificate[data-r="epic-violet"]     { --cb: radial-gradient(ellipse at 50% 30%,#6a2880,#3a1050 50%,#1a0524); --ca: #ff90e8; --ct: #ffe0ff; --cm: #d0a0d8; }
.certificate[data-r="legendary-amber"] { --cb: linear-gradient(135deg,#c86820,#a04818,#4a1800); --ca: #ffa040; --ct: #ffe8c0; --cm: #e0a060; }
.certificate[data-r="mythic-void"]     { --cb: linear-gradient(135deg,#3a0810,#0a0000); --ca: #e83050; --ct: #e8d0d0; --cm: #a06060; }

.cert-inner {
  position: relative; width: 100%; height: 100%;
  background: var(--cb, #fffdf7);
  border-radius: inherit;
  padding: 9% 8%;
  color: var(--ct, #2b2b2b);
  display: flex; flex-direction: column;
  border: 2px solid var(--ca, #b8860b);
}
.cert-content { display: flex; flex-direction: column; flex: 1; position: relative; }
.certificate h1 {
  text-align: center;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  margin: 0 0 2%;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct, #2b2b2b);
  position: relative; z-index: 3;
}
.certificate .sub {
  text-align: center;
  font-size: clamp(.85rem, 2.2vw, 1.1rem);
  color: var(--cm, #8a8a8a);
  margin: 0 0 4%;
  letter-spacing: .06em;
  font-style: italic;
}
.certificate .div {
  text-align: center; color: var(--ca, #b8860b);
  margin: 0 0 8%; font-size: 1.1rem;
  letter-spacing: 10px;
}
.cert-field {
  display: flex; align-items: flex-end; gap: 12px;
  margin-bottom: 6%;
  font-size: clamp(.85rem, 2.2vw, 1.05rem);
}
.cert-field .lbl { color: var(--ct, #2b2b2b); white-space: nowrap; min-width: 80px; font-weight: 600; letter-spacing: .04em; }
.cert-field .ln {
  flex: 1;
  border-bottom: 1.5px solid var(--ca, #b8860b);
  min-height: 1.5em;
  padding: 0 6px 4px;
  color: var(--ct, #2b2b2b);
  word-break: break-word;
  font-size: clamp(.85rem, 2.2vw, 1.05rem);
  font-style: italic;
  transition: text-shadow .3s, border-color .3s;
}
.cert-field .ln:not(:empty) { animation: fieldBreath 6s ease-in-out infinite; }
@keyframes fieldBreath {
  0%, 100% { border-bottom-color: var(--ca, #b8860b); }
  50%      { border-bottom-color: color-mix(in srgb, var(--ca, #b8860b) 40%, transparent); }
}
.cert-badge-wrap { margin-top: auto; display: flex; justify-content: flex-end; }
.cert-badge {
  padding: 8px 18px;
  border: 2px solid var(--ca, #b8860b);
  border-radius: 999px;
  color: var(--ca, #b8860b);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900; letter-spacing: .25em;
  font-size: .7rem; text-transform: uppercase;
}

/* ═══════════════ АНИМАЦИИ СЕРТИФИКАТА ═══════════════ */
.cert-content::before {
  content: '';
  position: absolute;
  bottom: 10%; left: 6%;
  width: 82px; height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    color-mix(in srgb, var(--ca, #b8860b) 75%, white),
    var(--ca, #b8860b));
  border: 2px solid color-mix(in srgb, var(--ca, #b8860b) 60%, black);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--ca, #b8860b) 55%, transparent),
    inset 0 -4px 8px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.4);
  opacity: .55;
  z-index: 1;
  pointer-events: none;
  animation: sealSpin 22s linear infinite;
}
.cert-content::after {
  content: '✦';
  position: absolute;
  bottom: 10%; left: 6%;
  width: 82px; height: 82px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  color: color-mix(in srgb, var(--ca, #b8860b) 50%, black);
  z-index: 2;
  pointer-events: none;
  animation: sealSpin 22s linear infinite reverse;
}
@keyframes sealSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.certificate h1 { animation: titlePulse 4s ease-in-out infinite; }
@keyframes titlePulse {
  0%, 100% { letter-spacing: .12em; }
  50%      { letter-spacing: .16em; }
}
.certificate .div { animation: dividerGlow 3s ease-in-out infinite; }
@keyframes dividerGlow {
  0%, 100% { opacity: .55; letter-spacing: 10px; text-shadow: 0 0 4px var(--ca, #b8860b); }
  50%      { opacity: 1;   letter-spacing: 14px; text-shadow: 0 0 18px var(--ca, #b8860b); }
}

/* ═══════════════ АНИМИРОВАННЫЕ ЧАСТИЦЫ ═══════════════ */
.cert-particles {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.cp-leaf {
  position: absolute; top: -40px;
  font-size: 16px; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(74,124,46,.7));
  animation: cpLeafFall linear infinite;
  will-change: transform, opacity;
}
@keyframes cpLeafFall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .85; }
  100% { transform: translate(40px, 750px) rotate(360deg); opacity: 0; }
}
.cp-crystal {
  position: absolute; top: -30px;
  font-size: 14px; color: #a8c8f0; opacity: 0;
  filter: drop-shadow(0 0 8px #4a7ac4);
  animation: cpCrystal linear infinite;
  will-change: transform, opacity;
}
@keyframes cpCrystal {
  0%      { transform: translate(0, 0) rotate(0); opacity: 0; }
  20%,80% { opacity: .95; }
  100%    { transform: translate(30px, 750px) rotate(180deg); opacity: 0; }
}
.cp-star {
  position: absolute;
  width: 4px; height: 4px;
  background: #d0a0ff;
  border-radius: 50%;
  box-shadow: 0 0 10px 3px rgba(208,160,255,.9), 0 0 20px 6px rgba(208,160,255,.4);
  opacity: 0;
  animation: cpStar 3s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes cpStar {
  0%, 100% { opacity: 0; transform: scale(.3); }
  50%      { opacity: 1; transform: scale(1.6); }
}
.cp-spark {
  position: absolute; bottom: -20px;
  width: 3px; height: 3px;
  background: #ffd060;
  border-radius: 50%;
  box-shadow: 0 0 10px 3px rgba(255,208,96,.9), 0 0 18px 5px rgba(255,140,0,.5);
  opacity: 0;
  animation: cpSpark linear infinite;
  will-change: transform, opacity;
}
@keyframes cpSpark {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(20px, -750px) scale(1.4); opacity: 0; }
}
.cp-flame {
  position: absolute; bottom: -20px;
  width: 6px; height: 14px;
  background: radial-gradient(ellipse at 50% 80%, #ffd060 0%, #ff8c00 30%, #ff4040 60%, transparent 90%);
  border-radius: 50% 50% 30% 30% / 60% 60% 30% 30%;
  filter: blur(1px); opacity: 0;
  animation: cpFlame linear infinite;
  will-change: transform, opacity;
}
@keyframes cpFlame {
  0%   { transform: translate(0, 0) scaleY(.4); opacity: 0; }
  20%  { opacity: .95; }
  80%  { opacity: .9; }
  100% { transform: translate(15px, -750px) scaleY(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-leaf, .cp-crystal, .cp-star, .cp-spark, .cp-flame,
  .certificate[data-r], .certificate[data-r]::after,
  .certificate[data-r] .cert-inner,
  .cert-content::before, .cert-content::after,
  .certificate h1, .certificate .div {
    animation: none !important;
  }
}

/* ═══════════════ ПЕЧАТЬ ═══════════════ */
@media print {
  @page { size: A4 portrait; margin: 0; }

  body {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body > *:not(#printRoot) {
    display: none !important;
  }

  #printRoot {
    display: block !important;
    position: static !important;
    width: 100% !important;
  }

  /* Каждая сторона — на отдельной A4-странице */
  #printRoot .print-page {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    page-break-after: always;
    break-after: page;
    display: flex !important;
    transform: none !important;
    backface-visibility: visible !important;
  }

  /* Последняя страница не создаёт пустой лист */
  #printRoot .print-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Внутренняя часть сертификата тянется на всю страницу */
  #printRoot .print-page .cert-inner {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
}

#printRoot { display: none; }
/* ═══════════════ КНОПКА ЗВУКА ═══════════════ */
.sound-btn {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  z-index: 900;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-s);
  transition: all .25s;
}
.sound-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }
.sound-btn.muted .sound-waves { opacity: 0; }
.sound-btn.muted::after {
  content: '';
  position: absolute;
  width: 22px; height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
  border-radius: 2px;
}

/* ═══════════════ ШИКАРНЫЕ РАМКИ ПО РЕДКОСТИ ═══════════════ */
.cert-inner::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 3px;
  border: 1px solid var(--ca, #b8860b);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
  background-image:
    var(--frame-corner, none), var(--frame-corner, none),
    var(--frame-corner, none), var(--frame-corner, none);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: -1px -1px, 100% -1px, -1px 100%, 100% 100%;
  background-size: 68px 68px, 68px 68px, 68px 68px, 68px 68px;
}
.certificate[data-r="common"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 L6 34 M6 6 L34 6' stroke='%238a8a8a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M14 14 L14 26 M14 14 L26 14' stroke='%238a8a8a' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}
.certificate[data-r="common-white"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 L6 34 M6 6 L34 6' stroke='%23b8b8b8' stroke-width='1.5' fill='none'/%3E%3Cpath d='M14 14 L14 26 M14 14 L26 14' stroke='%23b8b8b8' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}
.certificate[data-r="uncommon"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 Q6 30 30 30 Q6 30 6 54' stroke='%234a7c2e' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 6 Q30 6 30 30 Q30 6 54 6' stroke='%234a7c2e' stroke-width='1.5' fill='none'/%3E%3Ctext x='30' y='38' font-size='22' font-family='serif' fill='%234a7c2e'%3E%E2%9D%A6%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="uncommon-lime"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 Q6 30 30 30 Q6 30 6 54' stroke='%235a9010' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 6 Q30 6 30 30 Q30 6 54 6' stroke='%235a9010' stroke-width='1.5' fill='none'/%3E%3Ctext x='30' y='38' font-size='22' font-family='serif' fill='%235a9010'%3E%F0%9F%8C%BF%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="rare"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 L6 40 L20 30 L6 6' fill='none' stroke='%232c5aa8' stroke-width='1.5'/%3E%3Cpath d='M6 6 L40 6 L30 20 L6 6' fill='none' stroke='%232c5aa8' stroke-width='1.5'/%3E%3Ctext x='30' y='40' font-size='22' font-family='serif' fill='%232c5aa8'%3E%E2%97%86%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="rare-azure"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 L6 40 L20 30 L6 6' fill='none' stroke='%23056a90' stroke-width='1.5'/%3E%3Cpath d='M6 6 L40 6 L30 20 L6 6' fill='none' stroke='%23056a90' stroke-width='1.5'/%3E%3Ctext x='30' y='40' font-size='22' font-family='serif' fill='%23056a90'%3E%E2%9D%84%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="epic"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 Q6 20 16 24 Q26 28 24 42' stroke='%23d0a0ff' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 6 Q20 6 24 16 Q28 26 42 24' stroke='%23d0a0ff' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='14' cy='14' r='3' fill='%23d0a0ff'/%3E%3Ctext x='34' y='44' font-size='20' font-family='serif' fill='%23d0a0ff'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="epic-violet"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 Q6 20 16 24 Q26 28 24 42' stroke='%23ff90e8' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 6 Q20 6 24 16 Q28 26 42 24' stroke='%23ff90e8' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='14' cy='14' r='3' fill='%23ff90e8'/%3E%3Ctext x='34' y='44' font-size='20' font-family='serif' fill='%23ff90e8'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="legendary"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 Q6 22 18 26 Q30 30 28 44' stroke='%23ffd060' stroke-width='1.8' fill='none'/%3E%3Cpath d='M6 6 Q22 6 26 18 Q30 30 44 28' stroke='%23ffd060' stroke-width='1.8' fill='none'/%3E%3Cpath d='M6 6 L14 2 L18 10 L22 2 L26 10 L30 2 L34 6' stroke='%23ffd060' stroke-width='1.5' fill='none'/%3E%3Ctext x='34' y='46' font-size='20' font-family='serif' fill='%23ffd060'%3E%E2%9C%B5%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="legendary-amber"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 Q6 22 18 26 Q30 30 28 44' stroke='%23ffa040' stroke-width='1.8' fill='none'/%3E%3Cpath d='M6 6 Q22 6 26 18 Q30 30 44 28' stroke='%23ffa040' stroke-width='1.8' fill='none'/%3E%3Cpath d='M6 6 L14 2 L18 10 L22 2 L26 10 L30 2 L34 6' stroke='%23ffa040' stroke-width='1.5' fill='none'/%3E%3Ctext x='34' y='46' font-size='20' font-family='serif' fill='%23ffa040'%3E%E2%9C%B5%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="mythic"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 Q6 18 14 22 Q26 28 24 44' stroke='%23ff4040' stroke-width='2' fill='none'/%3E%3Cpath d='M6 6 Q18 6 22 14 Q28 26 44 24' stroke='%23ff4040' stroke-width='2' fill='none'/%3E%3Cpath d='M6 6 L6 2 L10 6 L14 2 L18 6 L22 2 L26 6' stroke='%23ff4040' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 6 L2 6 L6 10 L2 14 L6 18 L2 22 L6 26' stroke='%23ff4040' stroke-width='1.5' fill='none'/%3E%3Ctext x='34' y='46' font-size='22' font-family='serif' fill='%23ff4040'%3E%E2%9C%B7%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="mythic-void"] {
  --frame-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M6 6 Q6 18 14 22 Q26 28 24 44' stroke='%23e83050' stroke-width='2' fill='none'/%3E%3Cpath d='M6 6 Q18 6 22 14 Q28 26 44 24' stroke='%23e83050' stroke-width='2' fill='none'/%3E%3Cpath d='M6 6 L6 2 L10 6 L14 2 L18 6 L22 2 L26 6' stroke='%23e83050' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 6 L2 6 L6 10 L2 14 L6 18 L2 22 L6 26' stroke='%23e83050' stroke-width='1.5' fill='none'/%3E%3Ctext x='34' y='46' font-size='22' font-family='serif' fill='%23e83050'%3E%E2%9C%B7%3C/text%3E%3C/svg%3E");
}
.certificate[data-r="legendary"] .cert-inner,
.certificate[data-r="legendary-amber"] .cert-inner,
.certificate[data-r="mythic"] .cert-inner,
.certificate[data-r="mythic-void"] .cert-inner {
  box-shadow:
    inset 0 0 0 2px var(--ca, #b8860b),
    inset 0 0 0 8px transparent,
    inset 0 0 0 9px var(--ca, #b8860b);
}
.certificate[data-r="epic"] .cert-inner,
.certificate[data-r="epic-violet"] .cert-inner {
  box-shadow: inset 0 0 0 2px var(--ca, #b8860b), inset 0 0 0 6px transparent, inset 0 0 0 7px var(--ca, #b8860b);
}

/* ═══════════════ ДОП. ТЕМЫ (skins) ═══════════════ */
body[data-r="common-white"] {
  --page-bg: #f5f5f5;
  --panel-bg: #fff; --panel-border: #e5e5e5;
  --text: #1a1a1a; --text-muted: #7a7a7a;
  --accent: #a0a0a0; --accent-text: #fff;
  --btn2-bg: #e8e8e8; --btn2-text: #1a1a1a;
  --modal-bg: #fff; --input-bg: #fff; --input-border: #e0e0e0;
  --tab-active-bg: #a0a0a0; --tab-active-text: #fff;
  --tab-inactive: #7a7a7a; --tab-hover: #f0f0f0;
  --overlay: rgba(0,0,0,.5);
}
body[data-r="uncommon-lime"] {
  --page-bg: linear-gradient(160deg, #e0f0a0, #b8d860);
  --panel-bg: #f8fce8; --panel-border: #c0d888;
  --text: #2a3a0a; --text-muted: #5a7a1a;
  --accent: #7ab020;
  --btn2-bg: #d8ecb0; --btn2-text: #2a3a0a;
  --modal-bg: #f8fce8; --input-bg: #fff; --input-border: #c0d888;
  --tab-active-bg: #7ab020; --tab-inactive: #5a7a1a; --tab-hover: #e8f4c0;
  --overlay: rgba(30,50,10,.6);
}
body[data-r="rare-azure"] {
  --page-bg: linear-gradient(160deg, #b8e8f0, #60c0d8);
  --panel-bg: #e8f8fc; --panel-border: #88d0e0;
  --text: #0a2838; --text-muted: #2a7898;
  --accent: #0891b8;
  --btn2-bg: #a8dce8; --btn2-text: #0a2838;
  --modal-bg: #e8f8fc; --input-bg: #fff; --input-border: #88d0e0;
  --tab-active-bg: #0891b8; --tab-inactive: #2a7898; --tab-hover: #c0e8f0;
  --overlay: rgba(0,30,50,.7);
}
body[data-r="epic-violet"] {
  --page-bg: radial-gradient(circle at 50% 0%, #4a1858 0%, #1a0524 100%);
  --panel-bg: rgba(255,200,255,.08); --panel-border: rgba(255,160,240,.35);
  --text: #ffe0ff; --text-muted: #d0a0d8;
  --accent: #e878d8; --accent-text: #2a0530;
  --btn2-bg: rgba(255,180,240,.15); --btn2-text: #ffe0ff;
  --modal-bg: #3a1048; --input-bg: rgba(255,180,240,.08); --input-border: rgba(255,160,240,.4);
  --tab-active-bg: #e878d8; --tab-active-text: #2a0530; --tab-inactive: #d0a0d8; --tab-hover: rgba(255,180,240,.15);
  --overlay: rgba(20,0,25,.85);
}
body[data-r="legendary-amber"] {
  --page-bg: radial-gradient(circle at 50% 0%, #7a3010 0%, #2a0a00 100%);
  --panel-bg: rgba(255,180,90,.1); --panel-border: rgba(255,140,40,.45);
  --text: #ffe8c0; --text-muted: #e0a060;
  --accent: #ff9020; --accent-text: #301000;
  --btn2-bg: rgba(255,180,90,.18); --btn2-text: #ffe8c0;
  --modal-bg: #4a1800; --input-bg: rgba(255,180,90,.1); --input-border: rgba(255,140,40,.5);
  --tab-active-bg: #ff9020; --tab-active-text: #301000; --tab-inactive: #e0a060; --tab-hover: rgba(255,180,90,.18);
  --overlay: rgba(30,5,0,.85);
}
body[data-r="mythic-void"] {
  --page-bg: radial-gradient(circle at 50% 100%, #300000 0%, #000 100%);
  --panel-bg: rgba(255,40,60,.06); --panel-border: rgba(180,20,40,.4);
  --text: #e8d0d0; --text-muted: #a06060;
  --accent: #c82038; --accent-text: #fff;
  --btn2-bg: rgba(255,60,80,.12); --btn2-text: #e8d0d0;
  --modal-bg: #1a0205; --input-bg: rgba(255,60,80,.08); --input-border: rgba(180,20,40,.5);
  --tab-active-bg: #c82038; --tab-active-text: #fff; --tab-inactive: #a06060; --tab-hover: rgba(255,60,80,.15);
  --overlay: rgba(0,0,0,.92);
}
.certificate[data-r="uncommon-lime"] .cp-leaf { color: #a0e040; filter: drop-shadow(0 0 6px rgba(160,224,64,.9)); }
.certificate[data-r="uncommon-lime"] { animation: certGlowLime 5s ease-in-out infinite; }
@keyframes certGlowLime {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 25px rgba(122,176,32,.3); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 65px rgba(160,224,64,.7); }
}
.certificate[data-r="rare-azure"] .cp-crystal { color: #60e0ff; filter: drop-shadow(0 0 10px #0891b8); }
.certificate[data-r="rare-azure"] { animation: certGlowAzure 4.5s ease-in-out infinite; }
@keyframes certGlowAzure {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 30px rgba(8,145,184,.35); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 80px rgba(96,224,255,.85); }
}
.certificate[data-r="epic-violet"] .cp-star {
  background: #ff90e8;
  box-shadow: 0 0 10px 3px rgba(255,144,232,.9), 0 0 22px 7px rgba(255,144,232,.4);
}
.certificate[data-r="epic-violet"] { animation: certGlowViolet 3.8s ease-in-out infinite; }
@keyframes certGlowViolet {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 40px rgba(255,120,216,.4); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 95px rgba(255,120,216,.9); }
}
.certificate[data-r="epic-violet"]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255,200,240,.4) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: certShine 5s linear infinite;
  pointer-events: none; z-index: 4;
}
.certificate[data-r="legendary-amber"] .cp-spark {
  background: #ffb040;
  box-shadow: 0 0 10px 3px rgba(255,176,64,.9), 0 0 20px 6px rgba(255,80,0,.6);
}
.certificate[data-r="legendary-amber"] { animation: certGlowAmber 2.6s ease-in-out infinite; }
@keyframes certGlowAmber {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 50px rgba(255,140,40,.5); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 115px rgba(255,140,40,.95); }
}
.certificate[data-r="legendary-amber"]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255,220,180,.4) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: certShine 5s linear infinite;
  pointer-events: none; z-index: 4;
}
.certificate[data-r="mythic-void"] .cp-flame {
  background: radial-gradient(ellipse at 50% 80%, #ff4060 0%, #c82038 40%, #500010 80%, transparent 95%);
}
.certificate[data-r="mythic-void"] { animation: certGlowVoid 2s ease-in-out infinite; }
@keyframes certGlowVoid {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 60px rgba(200,32,56,.5); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 135px rgba(255,20,60,1); }
}
.certificate[data-r="mythic-void"]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 42%, rgba(255,180,180,.3) 50%, transparent 58%);
  background-size: 250% 250%;
  animation: certShine 4s linear infinite;
  pointer-events: none; z-index: 4;
}
.certificate[data-r="epic"]::after,
.certificate[data-r="legendary"]::after,
.certificate[data-r="mythic"]::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: certShine 5s linear infinite;
  pointer-events: none; z-index: 4;
}
@keyframes certShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
.certificate[data-r="uncommon"] { animation: certGlowUnc 5s ease-in-out infinite; }
@keyframes certGlowUnc {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 25px rgba(74,124,46,.25); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 55px rgba(74,124,46,.55); }
}
.certificate[data-r="rare"] { animation: certGlowRare 5s ease-in-out infinite; }
@keyframes certGlowRare {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 30px rgba(100,150,255,.25); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 65px rgba(100,150,255,.6); }
}
.certificate[data-r="epic"] { animation: certGlowEpic 4s ease-in-out infinite; }
@keyframes certGlowEpic {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 40px rgba(180,120,255,.35); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 80px rgba(180,120,255,.75); }
}
.certificate[data-r="legendary"] { animation: certGlowLeg 3s ease-in-out infinite; }
@keyframes certGlowLeg {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 45px rgba(255,200,0,.45); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 100px rgba(255,200,0,.9); }
}
.certificate[data-r="mythic"] { animation: certGlowMyth 2.4s ease-in-out infinite; }
@keyframes certGlowMyth {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 50px rgba(255,50,50,.5); }
  50%     { box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 120px rgba(255,0,0,1); }
}
.certificate[data-r="legendary"] .cert-inner,
.certificate[data-r="mythic"] .cert-inner {
  animation: certFloatSoft 6s ease-in-out infinite;
}
@keyframes certFloatSoft {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* ═══════════════ 3D-ПЕРЕВОРОТ СЕРТИФИКАТА ═══════════════ */
.cert-preview { position: relative; perspective: 1800px; }
.cert-flip-btn {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ca, #b8860b);
  background: rgba(255,255,255,.9);
  color: var(--ca, #b8860b);
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.cert-flip-btn:hover { transform: scale(1.1) rotate(-15deg); background: #fff; }
.cert-flip-btn.flipped { transform: rotate(180deg); }
.cert-flip-btn.flipped:hover { transform: rotate(180deg) scale(1.1) rotate(-15deg); }
.cert-flip {
  width: 100%; max-width: 520px; margin: 0 auto;
  aspect-ratio: 1 / 1.414;
}
.cert-flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.cert-flip.flipped .cert-flip-inner { transform: rotateY(180deg); }
.certificate.cert-front,
.certificate.cert-back {
  position: absolute !important; inset: 0 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100% !important; height: 100% !important;
  max-width: none !important; aspect-ratio: auto !important;
}
.certificate.cert-back { transform: rotateY(180deg); }
.cert-number {
  position: absolute; top: 14px; left: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .15em;
  color: var(--ca, #b8860b);
  opacity: .75; z-index: 3;
}
.cert-back-content {
  padding: 4% 2%; justify-content: space-between;
  height: 100%; position: relative; z-index: 2;
}
.cert-back-title {
  text-align: center; font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ct, #2b2b2b); margin: 0 0 2%;
}
.cert-back-sub {
  text-align: center; font-size: clamp(.7rem, 1.7vw, .85rem);
  color: var(--cm, #8a8a8a); font-style: italic;
  margin: 0 0 4%; letter-spacing: .04em;
}
.cert-back-id {
  display: flex; align-items: baseline; gap: 8px;
  font-size: clamp(.65rem, 1.6vw, .78rem);
  margin-bottom: 1.5%; padding: 0 4%;
}
.cert-back-id-lbl {
  color: var(--cm, #8a8a8a); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; flex-shrink: 0;
}
.cert-back-id-val {
  color: var(--ct, #2b2b2b);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600; letter-spacing: .05em; word-break: break-all;
}
.cert-back-hash { font-size: .85em; opacity: .8; }
.cert-back-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; margin: 4% 4% 3%; }
.cert-back-party { text-align: center; }
.cert-back-party-role {
  font-size: clamp(.6rem, 1.5vw, .72rem);
  color: var(--cm, #8a8a8a);
  text-transform: uppercase; letter-spacing: .15em;
  font-weight: 700; margin-bottom: 6px;
}
.cert-back-party-line {
  border-bottom: 1px solid var(--ca, #b8860b);
  min-height: 1.6em; padding: 2px 6px 4px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(.75rem, 1.8vw, .9rem);
  color: var(--ct, #2b2b2b); margin-bottom: 4px;
}
.cert-back-party-sign {
  font-size: clamp(.55rem, 1.3vw, .65rem);
  color: var(--cm, #8a8a8a); font-style: italic; letter-spacing: .1em;
}
.cert-back-terms {
  margin: 0 4%;
  border-top: 1px dashed var(--ca, #b8860b);
  border-bottom: 1px dashed var(--ca, #b8860b);
  padding: 3% 0;
}
.cert-back-term {
  display: flex; justify-content: space-between;
  font-size: clamp(.65rem, 1.6vw, .78rem);
  padding: 2.5% 0; color: var(--ct, #2b2b2b);
}
.cert-back-term > span:first-child {
  color: var(--cm, #8a8a8a);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.cert-back-term > span:last-child {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
}
.cert-back-status { color: #2e7d32 !important; }
.cert-back-qr {
  display: flex; align-items: center; gap: 4%;
  margin: 4%; padding: 3%;
  border: 1px solid var(--ca, #b8860b);
  border-radius: 12px;
  background: rgba(255,255,255,.35);
}
.cert-back-qr-code {
  width: 68px; height: 68px; flex-shrink: 0;
  background: #fff; border-radius: 6px; padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.cert-back-qr-code svg,
.cert-back-qr-code img { width: 100%; height: 100%; display: block; }
.cert-back-qr-note {
  font-size: clamp(.6rem, 1.4vw, .72rem);
  color: var(--cm, #8a8a8a); line-height: 1.4; font-style: italic;
}
.cert-back-legal {
  font-size: clamp(.55rem, 1.3vw, .65rem);
  color: var(--cm, #8a8a8a); line-height: 1.5;
  text-align: justify; margin: 2% 4% 0;
  padding-top: 3%; border-top: 1px solid var(--ca, #b8860b);
  opacity: .85;
}
.certificate.cert-back[data-r="epic"] .cert-back-legal,
.certificate.cert-back[data-r="epic-violet"] .cert-back-legal,
.certificate.cert-back[data-r="legendary"] .cert-back-legal,
.certificate.cert-back[data-r="legendary-amber"] .cert-back-legal,
.certificate.cert-back[data-r="mythic"] .cert-back-legal,
.certificate.cert-back[data-r="mythic-void"] .cert-back-legal {
  color: var(--ct, #2b2b2b); opacity: .75;
}
@media (max-width: 480px) {
  .cert-flip-btn { width: 38px; height: 38px; font-size: 1.1rem; }
  .cert-back-qr-code { width: 56px; height: 56px; }
  .cert-back-parties { gap: 4%; }
}
@media print {
  .cert-flip-btn { display: none !important; }
  .certificate.cert-back { display: none !important; }
  #printRoot .certificate.cert-back { display: none !important; }
}

/* ═══════════════ АДАПТИВ ═══════════════ */
@media (max-width: 480px) {
  body { padding: 16px; }
  .shop { grid-template-columns: repeat(2, 1fr); }
  .case-item { width: 100px; height: 100px; }
  .case-viewport { height: 140px; }
  .tabs { gap: 2px; padding: 4px; }
  .tab { min-width: 70px; padding: 10px 6px; font-size: .75rem; }
  .tab svg { width: 18px; height: 18px; }
  .ticket { padding: 24px 18px; }
  .st { font-size: 1.15rem; }
}
/* ═══════════════ СИНХРОНИЗАЦИЯ ═══════════════ */
.sync-btn {
  display: block;
  margin: 12px auto 0;
  padding: 8px 16px;
  font-size: .82rem;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
}
.sync-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-text);
  transform: translateY(-2px);
}
.sync-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--accent);
  text-align: center;
  padding: 16px;
  margin: 10px 0;
  background: rgba(201,160,74,.1);
  border: 2px dashed var(--accent);
  border-radius: 12px;
  user-select: all;
}
/* ═══════════════ ФИКС ОБРАТНОЙ СТОРОНЫ ═══════════════ */

/* 1. Убираем круглую печать-штамп с оборота */
.certificate.cert-back .cert-content::before,
.certificate.cert-back .cert-content::after {
  display: none;
}

/* 2. Убираем разброс блоков по высоте */
.cert-back-content {
  justify-content: flex-start;
  gap: 1.2%;
  padding: 6% 4% 4%;
}

/* 3. Даём титулу воздух от угловых рамок */
.cert-back-title {
  margin: 5% 0 1.5% 0;
}
.cert-back-sub {
  margin: 0 0 3%;
}

/* 4. Сжимаем вертикальные отступы, чтобы всё влезло */
.cert-back-id {
  margin-bottom: 0.8%;
}
.cert-back-parties {
  margin: 2.5% 4% 2%;
}
.cert-back-terms {
  padding: 2% 0;
}
.cert-back-term {
  padding: 1.5% 0;
}
.cert-back-qr {
  margin: 2.5% 4% 2%;
  position: relative;
  z-index: 6;   /* на всякий случай, выше любых декоров */
}
.cert-back-legal {
  font-size: clamp(.5rem, 1.2vw, .6rem);
  margin: 1.5% 4% 0;
  padding-top: 2%;
  line-height: 1.4;
}
/* ═══════════════ СОВМЕСТНЫЙ БИЛЕТ ═══════════════ */

.pair-create {
  display: block;
  width: 100%;
  padding: 22px 20px;
  margin-bottom: 8px;
  border-radius: 18px;
  border: 2px dashed var(--accent);
  background: transparent;
  color: var(--accent);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
  cursor: pointer;
  transition: all .25s;
}
.pair-create span {
  display: inline-block;
  font-weight: 500;
  font-size: .8rem;
  opacity: .75;
  margin-top: 4px;
}
.pair-create:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-2px);
}

.pair-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: all .35s;
  position: relative;
  overflow: hidden;
}
.pair-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #f4d47a, #c9a04a, #6a3a00);
  transition: width .3s;
}
.pair-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-l);
}
.pair-card:hover::before { width: 10px; }
.pair-ico { font-size: 2.4rem; line-height: 1; }
.pair-body { flex: 1; min-width: 0; }
.pair-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.pair-prog {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.wish.shared { position: relative; }
.wish.filled {  /* загаданное, но не исполненное — и в личном, и в совместном билете */
  background: radial-gradient(circle at 50% 30%, rgba(255,240,200,.9), transparent 60%),
              var(--tcb);
  border-color: var(--ta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2px rgba(201,160,74,.15);
  animation: wishFilledPulse 3s ease-in-out infinite;
}

@keyframes wishFilledPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2px rgba(201,160,74,.15); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 4px rgba(201,160,74,.35); }
}
.wish.shared .wish-by {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .75;
  white-space: nowrap;
  pointer-events: none;
}
.wish.shared.done .wish-by {
  color: #fff;
  opacity: .9;
}
/* ═══════════════ БИЛЕТЫ ПАРЫ (v3) ═══════════════ */
.pair-card + .pair-card { margin-top: 10px; }
.pair-card.done { opacity: .75; }
.pair-empty {
  text-align: center;
  padding: 26px 20px;
  border-radius: 16px;
  border: 1px dashed var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-muted);
}

/* ═══════════════ ОБМЕН (v4) ═══════════════ */
.tab { position: relative; }
.tab-badge {
  position: absolute; top: 4px; right: 8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #c0392b; color: #fff;
  font-size: .65rem; font-weight: 800;
  align-items: center; justify-content: center;
}
.case-left {
  text-align: center; margin-top: 10px;
  font-size: .8rem; color: var(--text-muted);
}
.skin-count {
  position: absolute; top: 6px; left: 8px;
  font-size: .7rem; font-weight: 900; opacity: .85;
}

.trade-mycode { text-align: center; margin: 18px 0 8px; }
.trade-mycode .secondary { margin-top: 10px; }
.trade-h { font-size: 1.05rem; margin: 26px 0 10px; }
.trade-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 12px 0 6px;
}
.trade-find { display: flex; gap: 8px; }
.trade-find input {
  flex: 1; min-width: 0;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--panel-border); background: var(--panel-bg); color: var(--text);
  font-size: 1rem; text-transform: uppercase; font-family: 'JetBrains Mono', monospace;
}
.trade-with { margin: 14px 0 0; }

.trade-items { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-item.skin-card {
  padding: 8px 10px; font-size: .62rem; letter-spacing: .03em;
  border-radius: 10px; border-width: 1.5px;
}
button.trade-item.picked {
  outline: 3px solid var(--accent); outline-offset: 2px;
  transform: translateY(-2px);
}
.trade-none, .trade-empty { font-size: .85rem; color: var(--text-muted); }
.trade-empty {
  text-align: center; padding: 16px;
  border: 1px dashed var(--panel-border); border-radius: 14px;
}

.trade-list { display: flex; flex-direction: column; gap: 10px; }
.trade-card {
  padding: 14px 16px; border-radius: 16px;
  background: var(--panel-bg); border: 1.5px solid var(--panel-border);
}
.trade-card:not(.trade-pending) { opacity: .7; }
.trade-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.trade-code { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--text-muted); }
.trade-status { margin-left: auto; font-size: .75rem; color: var(--text-muted); }
.trade-card .btns { display: flex; gap: 10px; margin-top: 12px; }
.trade-card .btns button { flex: 1; }
.trade-card button.cancel { background: var(--btn2-bg); color: var(--btn2-text); }

/* Телефоны: 5 вкладок должны влезать, кнопка звука не должна их перекрывать */
@media (max-width: 480px) {
  .tab {
    flex: 1 1 0; min-width: 0;
    padding: 9px 2px;
    font-size: .64rem; letter-spacing: 0;
  }
  .tab span { white-space: nowrap; }
  .tab[data-page="cert"] { flex-grow: 1.45; } /* самая длинная подпись */
  .tab-badge { right: 2px; top: 2px; }
  .sound-btn {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════ ДОСТУПНОСТЬ И ВЁРСТКА (v5) ═══════════════
 * Правило: ни одной значимой надписи мельче 11px, всё нажимаемое видно в фокусе,
 * ничто не наезжает друг на друга на экране от 360px. */

/* Фокус с клавиатуры виден всегда (мышью и пальцем — без рамки) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wish:focus-visible, .skin-card:focus-visible, .pair-card:focus-visible {
  outline: 3px solid var(--ta, var(--accent)); outline-offset: 2px;
}

/* Мелкие надписи — до читаемого размера */
.t-badge  { font-size: .75rem; }
.tk-badge { font-size: .75rem; letter-spacing: .08em; }
.cert-number { font-size: .75rem; }
.trade-code  { font-size: .8rem; }
.tab-badge   { font-size: .72rem; }

/* Метки «чьё желание»: цветная точка вместо текста, расшифровка — под сеткой */
.wish.shared .wish-by {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  font-size: 0; opacity: 1;
}
.wish-by.mine, .wish-by-sample.mine { background: var(--ta, var(--accent)); }
.wish-by.partner, .wish-by-sample.partner { background: transparent; box-shadow: inset 0 0 0 2px var(--ta, var(--accent)); }
.wish.done .wish-by.mine { background: #fff; }
.wish.done .wish-by.partner { box-shadow: inset 0 0 0 2px #fff; }
.wish-legend {
  display: flex; justify-content: center; gap: 18px;
  margin: 14px 0 0; font-size: .875rem; color: var(--tm, var(--text-muted));
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.wish-by-sample { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }

/* Обмен: подписи обычным регистром, плашки предметов крупнее */
.trade-label { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 600; }
.trade-item.skin-card {
  min-height: 0; padding: 7px 12px;
  font-size: .8rem; letter-spacing: 0; text-transform: none;
  flex-direction: row;
}

/* ─── Сертификат ───
 * Обе стороны лежат в одной ячейке сетки: высота — по более длинной стороне,
 * поэтому оборот больше не обрезается на узком экране. */
.cert-flip { aspect-ratio: auto; }
.cert-flip-inner { display: grid; height: auto; }
.certificate.cert-front,
.certificate.cert-back {
  position: relative !important; inset: auto !important;
  grid-area: 1 / 1;
  height: auto !important;
}
.certificate.cert-front { aspect-ratio: 1 / 1.414 !important; align-self: stretch; }
/* Внутренний блок растёт по содержимому, а не режет его по высоте */
.certificate.cert-back .cert-inner { height: auto; min-height: 100%; }
.certificate.cert-back .cert-back-content { height: auto; }

/* Видимость сторон меняется ровно на середине поворота (.9s / 2).
 * Не полагаемся на backface-visibility: Safari на iPhone иногда показывает изнанку зеркально. */
.cert-flip .certificate.cert-back,
.cert-flip .certificate.cert-front { transition: visibility 0s linear .45s; }
.cert-flip .certificate.cert-back { visibility: hidden; }
.cert-flip.flipped .certificate.cert-back { visibility: visible; }
.cert-flip.flipped .certificate.cert-front { visibility: hidden; }

/* Оборот: читаемые размеры */
.cert-back-id          { font-size: max(.75rem, min(1.6vw, .85rem)); }
.cert-back-party-role  { font-size: .72rem; letter-spacing: .08em; }
.cert-back-party-line  { font-size: max(.85rem, min(1.8vw, .95rem)); }
.cert-back-party-sign  { font-size: .72rem; }
.cert-back-term        { font-size: max(.78rem, min(1.6vw, .85rem)); }
.cert-back-qr-note     { font-size: .78rem; }
.cert-back-legal       { font-size: .72rem; line-height: 1.5; text-align: left; }

@media (max-width: 480px) {
  /* Кнопка звука внизу справа не должна закрывать последние карточки */
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  .tab { font-size: .7rem; }

  /* Бейдж стиля над заголовком, а не поверх него */
  .ticket .tk-badge { position: static; display: table; margin: 0 auto 10px; }
}