/* =====================================================================
   contracts.css — ЭКРАН «КОНТРАКТЫ» И БАННЕР ПОД ВИТРИНОЙ
   ---------------------------------------------------------------------
   Экран устроен как апгрейдер (css/upgrader.css): корень в потоке
   страницы, главная спрятана body.ct-open, шапка на месте, подложка без
   наклона (в середине лист с гнёздами — skew его бы перекосил).
   Разметку строит js/contracts.ui.js.
   ===================================================================== */
.ct-backdrop{position:relative;z-index:1;color:#fff;font-family:"Manrope",system-ui,sans-serif;opacity:0;transition:opacity .28s ease}
.ct-backdrop.show{opacity:1}
body.ct-open > main,
body.ct-open > footer{display:none}
.ct-screen{
  position:relative;z-index:2;width:min(1240px,100%);margin:0 auto;
  padding:calc(var(--head-h) * 2.64) clamp(14px,4vw,40px) 90px;
  display:flex;flex-direction:column;gap:16px;
  transform:translateY(14px);transition:transform .35s cubic-bezier(.2,.9,.25,1.05);
}
.ct-backdrop.show .ct-screen{transform:none}
.ct-topbar{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--head-h) * .42) calc(var(--head-h) * 1.07)}
.ct-title{
  margin:0;font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;
  font-size:clamp(1.5rem,4vw,2.3rem);letter-spacing:.04em;text-transform:uppercase;
  color:#fff;text-shadow:var(--so),var(--extrude);
}
.ct-sub{margin:0;font-size:.95rem;color:#BBD6F5;font-weight:600;max-width:820px}
.ct-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:18px;align-items:start}
.ct-col{
  border:3px solid rgba(0,30,170,.40);border-radius:20px;background:rgba(21,27,243,.328);
  padding:14px clamp(12px,2vw,20px) 18px;min-width:0;
}
.ct-col-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ct-col-head b{font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;text-shadow:var(--so),var(--extrude)}
.ct-col-head span{font-size:.82rem;color:#BBD6F5;font-weight:700}
.ct-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ct-chip{
  padding:7px 12px;border-radius:999px;border:2px solid rgba(255,255,255,.2);
  background:rgba(5,29,72,.5);color:#EAF4FF;font-weight:800;font-size:.8rem;cursor:pointer;font-family:inherit;
}
.ct-chip[disabled]{opacity:.5;cursor:default}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:62vh;overflow:auto;padding:2px;scrollbar-width:thin}
.ct-tile{
  --rc:#9B92C4;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px 7px;
  border-radius:12px;background:rgba(5,29,72,.45);border:2px solid rgba(255,255,255,.12);border-top:3px solid var(--rc);
  color:#fff;font-family:inherit;cursor:pointer;text-align:center;min-width:0;transition:transform .15s,border-color .15s,box-shadow .15s;
}
.ct-tile:hover{transform:translateY(-2px)}
.ct-tile.is-on{border-color:#FFE45C;box-shadow:0 0 0 2px rgba(255,228,92,.35),0 0 18px 2px rgba(255,228,92,.25);background:rgba(255,228,92,.12)}
.ct-tile-thumb{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;background:rgba(0,14,60,.5)}
.ct-tile-thumb .lt-inner{width:100%;height:100%}
.ct-tile-qty{position:absolute;right:3px;bottom:3px;padding:1px 5px;border-radius:6px;background:rgba(0,14,60,.85);font-size:.66rem;font-weight:800;color:#FFE45C}
.ct-tile-check{
  position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;display:none;place-items:center;
  background:#FFE45C;color:#000E3C;font-weight:900;font-size:.8rem;border:2px solid #000E3C;
}
.ct-tile.is-on .ct-tile-check{display:grid}
.ct-tile-name{font-size:.72rem;font-weight:800;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-tile-value{font-size:.7rem;color:#FFE45C;font-weight:800}
.ct-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 10px;text-align:center;color:#BBD6F5}
.ct-empty p{margin:0;font-weight:600}
.ct-empty-art img{width:120px;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.ct-btn,.ct-go{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 0 #000E3C;border:2px solid #000E3C;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#8CF07A,#3DBE3B);box-shadow:0 5px 0 #0a3d12;padding:12px 18px;font-size:.95rem;
}
.ct-btn:active,.ct-go:active{transform:translateY(3px);box-shadow:0 2px 0 #0a3d12}
.ct-go{width:100%;font-size:1.05rem;padding:14px 18px;margin-top:12px}
.ct-go[disabled]{background:linear-gradient(180deg,#6b7597,#3f4761);box-shadow:0 5px 0 #1d2236;cursor:default;opacity:.85}
.ct-go.is-busy{animation:ct-busy 1s ease-in-out infinite}
@keyframes ct-busy{0%,100%{opacity:.85}50%{opacity:.6}}

/* ---------- лист контракта ---------- */
.ct-paper{
  position:relative;overflow:hidden;
  padding:14px 14px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,250,232,.97),rgba(246,236,205,.97));
  color:#1a2141;border:3px solid #d9c58a;box-shadow:0 8px 0 rgba(4,20,66,.55),0 0 30px -8px rgba(255,228,92,.5);
}
.ct-paper-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;border-bottom:2px dashed rgba(26,33,65,.25);padding-bottom:8px}
.ct-paper-head b{font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;color:#1a2141}
.ct-seal{font-size:.74rem;font-weight:800;color:#8a6d1d;padding:3px 8px;border:2px solid #d9c58a;border-radius:999px;background:rgba(255,255,255,.5)}
.ct-seal.is-done{color:#fff;background:#3DBE3B;border-color:#2b8f2a}
.ct-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.ct-slot{
  position:relative;aspect-ratio:1;border-radius:10px;display:grid;place-items:center;
  border:2px dashed rgba(26,33,65,.3);background:rgba(255,255,255,.45);color:rgba(26,33,65,.45);font-weight:900;
}
.ct-slot.is-need{border-color:rgba(232,89,12,.55);color:rgba(232,89,12,.7)}
.ct-slot.is-full{border:2px solid var(--rc);background:rgba(0,14,60,.85);cursor:pointer;overflow:hidden;padding:0}
.ct-slot.is-full .lt-inner{width:100%;height:100%}
.ct-slot.is-full i{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:.62rem;font-weight:800;color:#FFE45C;background:rgba(0,14,60,.85);padding:0 4px;border-radius:5px}
.ct-sum,.ct-range{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:.86rem;color:#4a5273;font-weight:700;margin:4px 0}
.ct-sum b,.ct-range b{font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;font-size:1.15rem;color:#1a2141;letter-spacing:.02em}
.ct-sum i{font-style:normal;font-size:.78rem;color:#7a8199}
.ct-why{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:rgba(232,89,12,.12);color:#a2450a;font-weight:700;font-size:.84rem}
.ct-note{margin:10px 0 0;font-size:.74rem;color:#7a8199;font-weight:600}
.ct-odds{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.ct-odds-head{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7a8199;margin-bottom:2px}
.ct-odd{display:grid;grid-template-columns:30px 1fr auto 60px 48px;gap:6px;align-items:center;font-size:.78rem;color:#1a2141}
.ct-odd-thumb{width:30px;height:30px;border-radius:7px;overflow:hidden;background:rgba(0,14,60,.85);border:2px solid var(--rc)}
.ct-odd-thumb .lt-inner{width:100%;height:100%}
.ct-odd-thumb .lt-emoji{font-size:14px}
.ct-odd-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-odd-value{font-weight:800;color:#8a6d1d;white-space:nowrap}
.ct-odd-bar{height:8px;border-radius:5px;background:rgba(26,33,65,.12);overflow:hidden}
.ct-odd-bar i{display:block;height:100%;background:linear-gradient(90deg,#5AB4FF,#2278DE);border-radius:5px}
.ct-odd-pct{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.ct-link{background:none;border:0;color:#2278DE;font-weight:800;font-size:.8rem;cursor:pointer;padding:4px 0;font-family:inherit;text-align:left}
/* печать: появляется при отправке */
.ct-stamp{
  position:absolute;right:14px;bottom:52px;width:92px;height:92px;border-radius:50%;
  border:4px solid rgba(214,40,40,.85);color:rgba(214,40,40,.85);display:grid;place-items:center;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;font-size:.95rem;line-height:1;letter-spacing:.08em;
  text-align:center;transform:rotate(-18deg) scale(2.2);opacity:0;pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),inset 0 0 0 6px rgba(214,40,40,.5);
}
.ct-paper.is-sealing .ct-stamp{animation:ct-stamp .55s cubic-bezier(.2,1.4,.3,1) .35s forwards}
.ct-paper.is-sealing .ct-slot.is-full{animation:ct-burn 1.2s ease .6s forwards}
@keyframes ct-stamp{from{transform:rotate(-18deg) scale(2.2);opacity:0}60%{opacity:1}to{transform:rotate(-14deg) scale(1);opacity:.9}}
@keyframes ct-burn{to{filter:grayscale(1) brightness(.4);opacity:.35}}

/* ---------- результат ---------- */
.ct-result{
  background:linear-gradient(180deg,rgba(9,36,102,.96),rgba(5,22,68,.96));color:#fff;
  border-color:var(--rc);box-shadow:0 8px 0 rgba(4,20,66,.55),0 0 40px -6px var(--rc);
  animation:ct-reveal .6s cubic-bezier(.2,1.2,.3,1);
}
@keyframes ct-reveal{from{transform:rotateY(90deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
.ct-result .ct-paper-head{border-color:rgba(255,255,255,.2)}
.ct-result .ct-paper-head b{color:#fff}
.ct-result-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:6px 0 4px}
.ct-result-thumb{
  width:150px;height:150px;border-radius:20px;overflow:hidden;background:rgba(0,14,60,.6);
  border:3px solid var(--rc);box-shadow:0 0 30px 4px color-mix(in srgb,var(--rc) 55%,transparent);
}
.ct-result-thumb .lt-inner{width:100%;height:100%}
.ct-result-thumb .lt-emoji{font-size:60px}
.ct-result-name{font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;font-size:1.4rem;letter-spacing:.03em;text-shadow:var(--so),var(--extrude)}
.ct-result-rar{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ct-result.is-ultra .ct-result-rar{background:linear-gradient(90deg,#ff3b3b,#ffe01a,#3ee66b,#22d3ee,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.ct-result-value{font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;font-size:1.6rem;color:#FFE45C;text-shadow:var(--so),var(--extrude)}
.ct-result-diff{font-size:.9rem;font-weight:700;color:#EAF4FF;max-width:320px}
.ct-result.is-win .ct-result-diff{color:#8AD9A6}
.ct-result.is-lose .ct-result-diff{color:#FFB3B3}
.ct-result-chance{font-size:.76rem;color:#BBD6F5;font-weight:600}

/* ---------- история ---------- */
.ct-hist{margin-top:14px}
.ct-hist-cap{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#BBD6F5;margin-bottom:6px}
.ct-hist-row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:5px 8px;border-radius:10px;background:rgba(5,29,72,.45);margin-bottom:4px;font-size:.8rem}
.ct-hist-thumb{width:34px;height:34px;border-radius:8px;overflow:hidden;background:rgba(0,14,60,.6);border:2px solid var(--rc)}
.ct-hist-thumb .lt-inner{width:100%;height:100%}
.ct-hist-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-hist-sum{color:#BBD6F5;white-space:nowrap}
.ct-hist-sum b{color:#FFB3B3}
.ct-hist-row.is-win .ct-hist-sum b{color:#8AD9A6}
.ct-hist-empty{margin:0;font-size:.8rem;color:#BBD6F5}

/* ---------- баннер под витриной ---------- */
#contractsBanner{margin:0;min-width:0}
.ct-banner{
  width:100%;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,250,232,.96),rgba(246,236,205,.96));border:3px solid #d9c58a;
  box-shadow:0 6px 0 rgba(4,20,66,.55);color:#1a2141;cursor:pointer;text-align:left;font-family:"Manrope",system-ui,sans-serif;
  transform:skewX(var(--fb-skew,-5.06deg));
}
.ct-banner > *{transform:skewX(var(--fb-unskew,5.06deg))}
.ct-banner:hover{filter:brightness(1.03)}
.ct-banner-ico{width:52px;height:52px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;background:rgba(214,40,40,.1);border:2px solid rgba(214,40,40,.5)}
.ct-banner-ico svg{width:30px;height:30px;fill:none;stroke:#d62828;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ct-banner-txt{display:flex;flex-direction:column;min-width:0;line-height:1.15;flex:1}
.ct-banner-txt b{font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.ct-banner-txt i{font-style:normal;font-size:.84rem;color:#4a5273;font-weight:700;margin-top:3px}
.ct-banner-btn{
  flex:0 0 auto;font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;font-weight:900;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;padding:10px 18px;border-radius:12px;border:2px solid #000E3C;background:linear-gradient(180deg,#8CF07A,#3DBE3B);box-shadow:0 4px 0 #0a3d12;
}

@media (max-width:900px){
  .ct-stage{grid-template-columns:1fr}
  .ct-right{order:-1}
  .ct-grid{max-height:none}
}
@media (max-width:620px){
  .ct-banner{padding:10px 12px;gap:10px}
  .ct-banner-txt i{font-size:.76rem}
  .ct-banner-btn{padding:9px 12px;font-size:.8rem}
  .ct-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
  .ct-tile-thumb{width:60px;height:60px}
  .ct-slots{gap:4px}
  .ct-odd{grid-template-columns:26px 1fr auto 44px 44px;font-size:.72rem}
  .ct-result-thumb{width:120px;height:120px}
}
@media (prefers-reduced-motion:reduce){
  .ct-paper.is-sealing .ct-stamp,.ct-paper.is-sealing .ct-slot.is-full,.ct-result,.ct-go.is-busy{animation:none}
  .ct-paper.is-sealing .ct-stamp{opacity:.9;transform:rotate(-14deg) scale(1)}
}