/* C4 — the game screen (slot-v4.js). One scene: the field in the middle, three
   C4s with their codes on the right, the title and the bonus on the left, the
   controls at the bottom. Nothing else (the owner's partner's brief, 2026-10-07).
   fit() sets --top (the site header), --fs (the field's side) and data-layout.
   With 3D on (.is-gl) the canvas draws every .c4-art and the field; the HTML
   keeps the places and the buttons. */
.c4{--blue:#2f6bff;--red:#e2412a;--gold:#f0c21c;--lcd:#e9e74e;--lcd-ink:#26250c;--txt:#f3f1ea;--mute:#b9b4a6;
  --fs:520px;--top:68px;--gap:clamp(10px,1.6vw,26px);
  position:relative;isolation:isolate;min-height:calc(100svh - var(--top));margin:0;color:var(--txt);
  font-family:"Roboto Condensed",Roboto,Arial,sans-serif;overflow:hidden;background:#141210;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.c4 *,.c4 *::before,.c4 *::after{box-sizing:border-box}
.c4 :where(button){font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
.c4 :where(button:disabled){cursor:default}
.c4 img{display:block;max-width:100%}

/* The site's own live feed has no place on the game screen. */
body:has(#c4-slot) .aside-content{display:none}
body:has(#c4-slot) .main-content{padding-left:0}

/* The scene behind: bombsite A in the sun, pushed back so the game reads first. */
.c4-bg{position:absolute;inset:0;z-index:-1;background:url(/img/slot/bg-site.webp) center 30%/cover no-repeat;filter:saturate(1.08) brightness(.97) blur(1px);transform:scale(1.04)}
.c4-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 78% 78% at 50% 45%,rgba(10,10,12,0),rgba(10,10,12,.3)),linear-gradient(180deg,rgba(10,10,12,.1),rgba(10,10,12,0) 30%,rgba(10,10,12,.28))}

/* ------------------------------------------------------------------ layout */
.c4-scene{position:relative;display:grid;min-height:calc(100svh - var(--top));padding:clamp(10px,1.4vw,22px) clamp(12px,2vw,34px) clamp(10px,1.4vw,20px);
  grid-template-columns:minmax(150px,1fr) var(--fs) minmax(170px,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"logo field rack" "buy field rack" "bar bar rack";
  column-gap:var(--gap);row-gap:clamp(8px,1.2vw,18px);align-items:center}
.c4-logo{grid-area:logo;margin:0;align-self:start;justify-self:center;width:min(100%,calc(var(--fs)*.34))}
.c4-buy{grid-area:buy;align-self:end;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100%,calc(var(--fs)*.42));transition:transform .2s,filter .2s}
.c4-buy-bomb{width:50%}
.c4-buy-word{width:100%;margin-top:-4%}
.c4-buy:hover:not(:disabled){transform:scale(1.04);filter:drop-shadow(0 0 18px rgba(196,104,255,.55))}
.c4-buy:active:not(:disabled){transform:scale(.97)}
.c4-buy:disabled{filter:grayscale(.6) brightness(.7)}
.c4-field{grid-area:field;position:relative;width:var(--fs);height:var(--fs);justify-self:center}
.c4-rack{grid-area:rack;align-self:stretch;justify-self:center;position:relative;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;gap:6px;width:min(100%,calc(var(--fs)*.3))}
.c4-bar{grid-area:bar;display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,22px);min-height:calc(var(--fs)*.17)}
.c4-art{width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}

/* ------------------------------------------------------------------ field */
.c4-grid{position:absolute;inset:0;overflow:hidden;border-radius:14px;--cell:calc(var(--fs) / 3)}
.c4-field::before{content:"";position:absolute;inset:-3%;z-index:-1;border-radius:24px;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));filter:blur(14px)}
.c4-cell{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);padding:calc(var(--cell)*.035);will-change:transform}
.c4-tile{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.12);transition:filter .25s,transform .25s}
.c4-tile img{width:100%;height:100%;object-fit:cover}
.c4-cell.is-dim .c4-tile{filter:brightness(.4) saturate(.6)}
.c4-cell.is-win{z-index:2}
.c4-cell.is-win .c4-tile{transform:scale(1.07);box-shadow:0 0 0 3px var(--c,#fff),0 0 34px var(--c,#fff),0 10px 20px rgba(0,0,0,.5);animation:c4-glow .45s ease-in-out infinite alternate}
@keyframes c4-glow{to{filter:brightness(1.3)}}
.c4-cell[data-color=b]{--c:var(--blue)}.c4-cell[data-color=r]{--c:var(--red)}.c4-cell[data-color=g]{--c:var(--gold)}
.c4-cell[data-code=S]{--c:#ff5338}
.c4-cell[data-code=S] .c4-tile{animation:c4-scatter 1.1s ease-in-out infinite alternate}
@keyframes c4-scatter{from{box-shadow:0 0 0 2px rgba(255,83,56,.55),0 0 18px rgba(255,83,56,.5),0 6px 14px rgba(0,0,0,.45)}to{box-shadow:0 0 0 3px #ff5338,0 0 38px #ff5338,0 6px 14px rgba(0,0,0,.45);filter:brightness(1.18)}}
.c4-cell.is-tease .c4-tile{animation:c4-tease .5s ease-in-out infinite alternate}
@keyframes c4-tease{to{box-shadow:0 0 0 3px #ff5338,0 0 30px #ff5338;filter:brightness(1.25)}}

.c4-spins[hidden]{display:none}
.c4-spins{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px 10px;background:linear-gradient(180deg,rgba(20,18,14,.92),rgba(20,18,14,.78));border:1px solid rgba(240,194,28,.55);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 24px rgba(240,194,28,.25);white-space:nowrap}
.c4-spins small{font-family:Oswald,sans-serif;font-size:clamp(11px,calc(var(--fs)*.026),15px);letter-spacing:.16em;color:var(--mute)}
.c4-spins b{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(26px,calc(var(--fs)*.075),46px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;min-width:1.4ch;text-align:center}
.c4-spins.is-bump b{animation:c4-bump .5s}
@keyframes c4-bump{40%{transform:scale(1.6);color:#fff;text-shadow:0 0 16px var(--gold)}}

/* ------------------------------------------------------------------ the C4s */
.c4-bomb{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--fs)*.012);width:100%;flex:0 1 auto}
.c4-bomb-art{display:block;width:64%;transition:transform .3s,filter .3s;transform-origin:50% 60%}
.c4-bomb.is-hit .c4-bomb-art{animation:c4-hit .35s}
.c4-bomb .c4-bomb-art{filter:drop-shadow(0 0 calc(var(--glow,0) * 5px) var(--c)) brightness(calc(1 + var(--glow,0) * .045))}
@keyframes c4-hit{25%{transform:scale(1.08) rotate(-2deg)}55%{transform:scale(.98) rotate(1.5deg)}}
.c4-bomb.is-complete .c4-bomb-art{animation:c4-shake .08s linear infinite;filter:drop-shadow(0 0 22px var(--c)) brightness(1.15)}
@keyframes c4-shake{0%{transform:translate(1px,-1px) rotate(.6deg)}50%{transform:translate(-1px,1px) rotate(-.6deg)}100%{transform:translate(1px,1px) rotate(.4deg)}}
.c4-bomb.is-gone .c4-bomb-art{opacity:0;transform:scale(.6)}
.c4-bomb[data-c4-bomb=b]{--c:var(--blue)}.c4-bomb[data-c4-bomb=r]{--c:var(--red)}.c4-bomb[data-c4-bomb=g]{--c:var(--gold)}
/* The code: a yellow LCD strip of five places under each C4. */
.c4-code{display:grid;grid-template-columns:repeat(5,1fr);gap:4%;width:100%;padding:3% 5%;aspect-ratio:5/1;
  background:linear-gradient(180deg,#f3f16a,var(--lcd) 45%,#c9c637);border:3px solid #1d1d1b;border-radius:6px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.45),0 0 18px rgba(233,231,78,.25)}
.c4-code i{display:grid;place-items:center;font-style:normal;font-family:"Share Tech Mono",monospace;font-weight:700;font-size:clamp(14px,calc(var(--fs)*.042),30px);line-height:1;color:var(--lcd-ink);border-bottom:2px solid rgba(38,37,12,.35);transition:background .3s}
.c4-code i:empty::after{content:"_";opacity:.28}
.c4-code i.is-new{animation:c4-digit .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes c4-digit{0%{transform:scale(2.2);color:#fff;text-shadow:0 0 12px #fff}60%{background:rgba(255,255,255,.55)}100%{transform:scale(1)}}
.c4-bomb.is-complete .c4-code{animation:c4-lcd .16s steps(2) infinite}
@keyframes c4-lcd{50%{background:#fffde0;box-shadow:0 0 30px #fff7a0,inset 0 0 12px #fff}}
.c4-code.is-reset i{transition:opacity .4s;opacity:0}

/* Bonus: the C4s step aside for the stash of collected ones. */
.c4-stash{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
.c4-stash[hidden]{display:none}
.c4-stack{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.c4-stack-art{display:block;width:50%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.c4-stack b{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(20px,calc(var(--fs)*.07),40px);line-height:1;color:var(--c);text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.c4-stack[data-c4-stack=b]{--c:#6f9bff}.c4-stack[data-c4-stack=r]{--c:#ff6a50}.c4-stack[data-c4-stack=g]{--c:var(--gold)}
.c4-stack.is-empty{opacity:.35}
.c4-stack.is-bump b{animation:c4-bump .45s}
.c4-rack.is-bonus .c4-bomb{visibility:hidden}

/* ------------------------------------------------------------------ controls */
.c4-plate{background:linear-gradient(180deg,#2c2a26,#171614);clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}
.c4-balance{display:flex;align-items:center;gap:10px}
.c4-coin{display:grid;place-items:center;width:calc(var(--fs)*.11);height:calc(var(--fs)*.11);min-width:44px;min-height:44px;border-radius:50%;font-style:normal;font-family:Oswald,sans-serif;font-weight:700;font-size:calc(var(--fs)*.07);color:#2a0f63;
  background:radial-gradient(circle at 35% 30%,#f1e6ff,#b892ff 45%,#6e3bd6 80%);box-shadow:inset 0 0 0 3px rgba(42,15,99,.6),inset 0 -4px 6px rgba(0,0,0,.25),0 6px 14px rgba(0,0,0,.5)}
.c4-balance b{display:block;min-width:9.5ch;padding:calc(var(--fs)*.018) calc(var(--fs)*.03);font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(18px,calc(var(--fs)*.058),34px);line-height:1;color:#fff;text-align:center;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#2c2a26,#151412);clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);text-shadow:0 2px 0 rgba(0,0,0,.6)}
/* «?» by the balance: a tap shows the rate (Стасян, 2026-10-18: 1 B = 10 ₽). */
.c4-rate{position:relative;flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;margin-left:-4px;border-radius:50%;
  font-family:Oswald,sans-serif;font-weight:700;font-size:14px;line-height:1;color:#e2d4ff;background:rgba(20,18,16,.55);
  box-shadow:inset 0 0 0 2px rgba(184,146,255,.65);transition:background .15s}
.c4-rate:hover,.c4-rate.is-open{background:rgba(143,99,232,.45)}
.c4-rate.is-open::after{content:attr(data-rate);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:40;transform:translateX(-50%);
  padding:7px 11px;white-space:nowrap;font-family:"Roboto Condensed",Roboto,Arial,sans-serif;font-weight:700;font-size:15px;color:#fff;
  background:#1d1430;border:1px solid #8f63e8;border-radius:7px;box-shadow:0 8px 20px rgba(0,0,0,.55)}
.c4-bet{display:flex;align-items:center;gap:6px}
.c4-arrow{display:grid;place-items:center;width:calc(var(--fs)*.1);height:calc(var(--fs)*.11);min-width:44px;min-height:44px;font-family:Oswald,sans-serif;font-size:clamp(20px,calc(var(--fs)*.06),32px);color:#fff;background:linear-gradient(180deg,#34312c,#171614);clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);transition:filter .15s,transform .15s}
.c4-arrow:hover:not(:disabled){filter:brightness(1.4)}
.c4-arrow:active:not(:disabled){transform:scale(.93)}
.c4-arrow:disabled{opacity:.35}
.c4-bet-value{display:grid;place-items:center;min-width:calc(var(--fs)*.15);height:calc(var(--fs)*.11);min-height:44px;padding:0 10px;font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(17px,calc(var(--fs)*.05),28px);color:#fff;background:linear-gradient(180deg,#2c2a26,#151412);clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);white-space:nowrap;font-variant-numeric:tabular-nums}
.c4-spin{position:relative;display:flex;align-items:center;gap:calc(var(--fs)*.02);height:calc(var(--fs)*.15);min-height:56px;padding:0 calc(var(--fs)*.045) 0 calc(var(--fs)*.015);color:#1b1608;
  background:linear-gradient(180deg,#ffd75a,#e8b01e 55%,#b9850c);border:3px solid #2a2109;border-radius:4px;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.5);transition:transform .15s,filter .2s,box-shadow .2s}
.c4-spin-icon{display:block;height:84%;aspect-ratio:290/440;padding:2px;background:#1e1a10;border-radius:3px;overflow:hidden}
.c4-spin-icon .c4-art{height:100%;width:auto;margin:auto}
.c4-spin-text{display:flex;flex-direction:column;align-items:center;line-height:1}
.c4-spin-text b{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(22px,calc(var(--fs)*.075),46px);letter-spacing:.12em}
.c4-spin-text small{margin-top:3px;min-width:8ch;text-align:center;font-family:Oswald,sans-serif;font-weight:600;font-size:clamp(10px,calc(var(--fs)*.024),14px);letter-spacing:.35em;opacity:.75}
/* READY, •••, BONUS: the label changes, the button and the bar around it must not move. */
.c4-spin-text{min-width:calc(var(--fs)*.34)}
.c4-spin:hover:not(:disabled){transform:scale(1.03);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.5),0 0 30px rgba(255,205,60,.55)}
.c4-spin:active:not(:disabled){transform:scale(.96)}
.c4-spin:disabled{filter:grayscale(.55) brightness(.8)}
.c4-spin.is-busy .c4-spin-text small{animation:c4-dots 1s steps(4) infinite}
@keyframes c4-dots{50%{opacity:.3}}
.c4-auto{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;font-family:Oswald,sans-serif;font-size:clamp(12px,calc(var(--fs)*.03),16px);letter-spacing:.12em;color:#e9e4d6;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.6)}
.c4-auto i{position:relative;width:38px;height:22px;border-radius:11px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background .2s}
.c4-auto i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#d8d4c8;transition:transform .2s,background .2s}
.c4-auto[aria-checked=true]{color:#fff}
.c4-auto[aria-checked=true] i{background:#c48a10}
.c4-auto[aria-checked=true] i::after{transform:translateX(16px);background:#fff}
.c4-help{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;margin-right:auto;border-radius:50%;font-family:Oswald,sans-serif;font-weight:700;font-size:22px;color:#fff;background:rgba(20,18,16,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);backdrop-filter:blur(4px);transition:background .2s}
.c4-help:hover{background:rgba(255,255,255,.18)}
.c4-toggles{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-left:4px;flex-shrink:0}
.c4-toggles .c4-auto{min-height:40px}
.c4-bar::after{content:"";flex-shrink:0;width:44px;margin-left:auto}
.c4[data-tight] .c4-bar::after{display:none}
.c4[data-tight="2"] .c4-scene{grid-template-areas:"logo field rack" "buy field rack" "bar bar bar"}
.c4[data-tight="2"] .c4-rack{width:min(100%,calc(var(--fs)*.26))}
/* Under the C4s the row ends where the site's round support button begins. */
.c4[data-tight="2"] .c4-bar{padding-right:84px}
.c4[data-tight="2"] .c4-toggles{margin-right:auto}

/* Scaled whole (fit(): every wide window, so that browser zoom changes
   nothing but the scale). The scene is laid out at --sw x --sh, drawn at
   --zs and centred by --sx/--sy; what was in vw is in --sw. */
.c4[data-zoomed]{--gap:clamp(10px,calc(var(--sw)*.016),26px);height:var(--rh);min-height:0}
.c4[data-zoomed] .c4-scene{width:var(--sw);height:var(--sh);min-height:0;transform:translate(var(--sx),var(--sy)) scale(var(--zs));transform-origin:0 0;
  padding:clamp(10px,calc(var(--sw)*.014),22px) clamp(12px,calc(var(--sw)*.02),34px) clamp(10px,calc(var(--sw)*.014),20px);
  row-gap:clamp(8px,calc(var(--sw)*.012),18px)}
.c4[data-zoomed] .c4-bar{gap:clamp(10px,calc(var(--sw)*.014),22px)}

/* ------------------------------------------------------------------ 3D */
.c4-gl{position:absolute;left:0;top:0;z-index:20;pointer-events:none;display:block}
.c4-gl.is-full{position:fixed;z-index:980}
.c4.is-gl .c4-art,.c4.is-gl .c4-cell,.c4.is-gl .c4-code{visibility:hidden}
.c4.is-gl .c4-coin{color:transparent;background:none;box-shadow:none}
.c4.is-gl .c4-spin-icon{background:none}
.c4.is-cinema .c4-scene{pointer-events:none}
/* The 3D cinematic lets clicks through its canvas: this catches them (they
   skip the defuse) instead of the site's header under it. */
.c4.is-cinema::after{content:"";position:fixed;inset:0;z-index:979;cursor:pointer}

/* A flying digit and the 2D cinematic (no WebGL). */
.c4-fly{position:fixed;z-index:50;pointer-events:none;display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;font-family:"Share Tech Mono",monospace;font-weight:700;font-size:24px;color:#fff;background:radial-gradient(circle,var(--c) 0,transparent 70%);text-shadow:0 0 10px #fff,0 0 20px var(--c)}
.c4-cine{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:radial-gradient(circle,rgba(10,10,12,.55),rgba(6,6,8,.92));animation:c4-fade .25s}
.c4-cine-bomb{position:relative;width:min(44vh,70vw)}
.c4-cine-bomb img{width:100%}
.c4-cine-lcd{position:absolute;display:flex;align-items:center;justify-content:center;font-family:"Share Tech Mono",monospace;font-weight:700;color:var(--lcd-ink);background:var(--lcd);border-radius:3px;box-shadow:0 0 18px rgba(233,231,78,.7)}
.c4-cine-count{position:absolute;top:6vh;left:50%;transform:translateX(-50%);font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(22px,4vh,40px);letter-spacing:.1em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.c4-cine-hint{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.c4-shard{position:fixed;z-index:910;pointer-events:none;background-size:cover}
.c4-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(360px,80vw);padding:22px 18px 18px;border-radius:14px;
  background:radial-gradient(90% 70% at 50% 40%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),linear-gradient(180deg,#2b2925,#141311);box-shadow:0 0 0 2px var(--c),0 0 60px color-mix(in srgb,var(--c) 55%,transparent),0 30px 60px rgba(0,0,0,.6);animation:c4-pop .5s cubic-bezier(.2,1.4,.4,1)}
.c4-card[data-color=b]{--c:var(--blue)}.c4-card[data-color=r]{--c:var(--red)}.c4-card[data-color=g]{--c:var(--gold)}
.c4-card img{width:86%;aspect-ratio:4/3;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.c4-card h3{margin:0;font-family:Oswald,sans-serif;font-weight:600;font-size:20px;line-height:1.15;text-align:center;color:#fff}
.c4-card h3 small{display:block;font-family:"Roboto Condensed",sans-serif;font-weight:500;font-size:14px;color:var(--mute)}
.c4-flash{position:fixed;inset:0;z-index:990;pointer-events:none;background:#fff;animation:c4-flash .5s ease-out forwards}
.c4-flash.is-soft{background:radial-gradient(circle,rgba(255,255,255,.85),rgba(220,235,255,.35) 35%,transparent 70%);animation-duration:.6s}
@keyframes c4-flash{from{opacity:.9}to{opacity:0}}

/* ------------------------------------------------------------------ overlays */
.c4-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:calc(var(--top) + 12px) 16px 16px;background:rgba(6,6,8,.72);backdrop-filter:blur(4px);animation:c4-fade .2s}
.c4-overlay[hidden]{display:none}
@keyframes c4-fade{from{opacity:0}}
@keyframes c4-pop{from{opacity:0;transform:scale(.85)}}
.c4-dialog{position:relative;width:min(520px,100%);max-height:calc(100svh - var(--top) - 28px);overflow:auto;padding:24px 22px 20px;text-align:center;color:var(--txt);background:linear-gradient(180deg,#24221e,#141311);border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.7);animation:c4-pop .3s cubic-bezier(.2,1.3,.4,1);font-family:"Roboto Condensed",Roboto,Arial,sans-serif}
.c4-dialog h2{margin:0 0 10px;font-family:Oswald,sans-serif;font-weight:700;font-size:28px;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.c4-dialog p{margin:6px 0 12px;font-size:15px;line-height:1.4;color:var(--mute)}
.c4-close{position:absolute;right:8px;top:8px;width:40px;height:40px;font-size:26px;line-height:1;color:var(--mute);background:none;border:0;cursor:pointer}
.c4-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.c4-btn{min-height:46px;padding:0 24px;font-family:Oswald,sans-serif;font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:#1b1608;background:linear-gradient(180deg,#ffd75a,#e8b01e 55%,#b9850c);border:2px solid #2a2109;border-radius:4px;cursor:pointer;transition:transform .15s,filter .15s}
.c4-btn:hover{filter:brightness(1.08)}
.c4-btn:active{transform:scale(.97)}
.c4-btn.is-ghost{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.c4-btn.is-purple{color:#fff;background:linear-gradient(180deg,#a45cff,#6b2ad1);border-color:#2b0e57}
.c4-btn:disabled{opacity:.5;cursor:default}

/* Help: one card of small blocks with pictures. */
.c4-help-card{width:min(620px,100%)}
.c4-help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 6px;text-align:left}
.c4-help-item{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;padding:10px;background:rgba(255,255,255,.04);border-radius:10px}
.c4-help-item p{margin:0;font-size:14px;color:var(--txt)}
.c4-help-item p b{color:#fff}
/* Real skins, out to Steam (owner, 2026-10-18): first, across the grid, in Steam's blue. */
.c4-help-real{grid-column:1/-1;background:rgba(102,192,244,.1);box-shadow:inset 0 0 0 1px rgba(102,192,244,.4)}
.c4-help-real p a{color:#66c0f4;text-decoration:underline}
.c4-help-steam{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;background:#1b2838;box-shadow:0 0 0 2px #66c0f4}
.c4-help-steam svg{width:34px;height:34px}
.c4-help-pic{display:grid;place-items:center;width:64px;height:64px}
.c4-help-pic img{width:auto;height:auto;max-width:64px;max-height:64px}
.c4-help-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:60px}
/* Each mini tile is a third of the 60px square: the 64px cap above would
   make three of them 192px wide and spill them over the text beside. */
.c4-help-pic .c4-help-mini img{width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:1;object-fit:cover;border-radius:3px}
.c4-help-code{white-space:nowrap;font-family:"Share Tech Mono",monospace;font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--lcd-ink);background:var(--lcd);border:2px solid #1d1d1b;border-radius:4px;padding:2px 3px 2px 5px;max-width:64px;overflow:hidden}
.c4-help-dots{display:flex;gap:4px}.c4-help-dots i{width:16px;height:16px;border-radius:4px}
.c4-help-set{display:flex;justify-content:center;gap:10px;margin-top:10px}
.c4-switch{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-family:Oswald,sans-serif;letter-spacing:.08em;color:var(--mute);background:rgba(255,255,255,.05);border-radius:8px;border:0;cursor:pointer}
.c4-switch.is-on{color:#fff;background:rgba(240,194,28,.2)}
@media (max-width:560px){.c4-help-grid{grid-template-columns:1fr}}

/* The inventory covers the game: no blur to work out under it. */
.c4-overlay:has(.c4-inv){background:none;backdrop-filter:none}
/* Rewards: CS2's inventory, 1:1 (owner, 2026-10-09). Sizes are the game's at
   720p, where a tile is ~122 px and nine fit across: the tab bar on its contour map, the black bar
   under it, tiles grey going dark to the top with the rarity under the
   picture, the weapon in bold and its finish under it. */
.c4-inv{--tw:clamp(96px,min(9.5vw,17.2vh),190px);position:fixed;inset:var(--top,0px) 0 0;isolation:isolate;display:flex;flex-direction:column;text-align:left;color:#fff;background:#0b0d11;font-family:"Roboto Condensed",Roboto,Arial,sans-serif;animation:c4-fade .25s}
.c4-inv::before{content:"";position:absolute;inset:-80px;z-index:-1;background:url(/img/slot/bg-site.webp) center/cover;filter:blur(40px) brightness(.3) saturate(.7)}
.c4-inv::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,30,48,.35),rgba(8,10,14,.15) 60%,rgba(8,10,14,.5))}
.c4-inv-top{display:grid;grid-template-columns:1fr auto 1fr;height:calc(var(--tw)*.4);min-height:44px;background:#0b0e12 url(/img/slot/v4/inv-topo.svg) center/640px auto;box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
.c4-inv-tab{display:flex;align-items:center;gap:.25em;padding:0 .3em 0 .45em;font-family:Oswald,sans-serif;font-weight:500;font-size:calc(var(--tw)*.24);text-transform:uppercase;color:#77d5f8;text-shadow:0 0 10px rgba(90,200,255,.55);
  background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(0,0,0,.16) 11px 12px),repeating-linear-gradient(0deg,transparent 0 9px,rgba(0,0,0,.12) 9px 10px),linear-gradient(180deg,rgba(84,170,200,.3),rgba(40,96,118,.2));box-shadow:inset 0 -2px 0 rgba(119,213,248,.55)}
.c4-inv-tab::after{content:"";width:.95em;height:.6em;background:linear-gradient(90deg,rgba(119,213,248,.32) 0 30%,transparent 30% 40%,rgba(119,213,248,.22) 40% 70%,transparent 70% 80%,rgba(119,213,248,.4) 80%)}
.c4-inv-ticks{display:flex;align-items:center;gap:calc(var(--tw)*.3);padding-left:calc(var(--tw)*.25);overflow:hidden}
.c4-inv-ticks i{flex-shrink:0;width:1px;height:32%;background:rgba(255,255,255,.4)}
.c4-inv-bar{display:flex;align-items:center;gap:10px;min-height:calc(var(--tw)*.36);padding:5px 12px;background:rgba(0,0,0,.9)}
.c4-inv-count{margin-right:auto;font-size:max(12px,calc(var(--tw)*.1));letter-spacing:.12em;text-transform:uppercase;color:#8d969f}
.c4-inv-btn{min-height:max(36px,calc(var(--tw)*.27));padding:0 1.2em;font-family:Oswald,sans-serif;font-weight:500;font-size:max(15px,calc(var(--tw)*.11));letter-spacing:.08em;text-transform:uppercase;color:#e8eaec;background:linear-gradient(180deg,#3d4146,#2a2d31);border:1px solid rgba(255,255,255,.1);border-radius:2px;transition:filter .15s}
.c4-inv-btn:hover:not(:disabled){filter:brightness(1.18)}
.c4-inv-btn:disabled{opacity:.55}
.c4-inv-btn.is-main{color:#fff;background:linear-gradient(180deg,#5e9a3a,#3d7023);border-color:rgba(160,230,110,.3)}
.c4-inv-grid{flex:1;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,var(--tw));gap:calc(var(--tw)*.12) calc(var(--tw)*.16);align-content:start;padding:calc(var(--tw)*.02) 12px 24px}
.c4-item{display:flex;flex-direction:column;min-width:0;text-align:left;animation:c4-item .35s backwards}
.c4-item-pic{position:relative;display:grid;place-items:center;height:calc(var(--tw)*.73);overflow:hidden;background:linear-gradient(180deg,#3a3a3a,#959595);border-bottom:max(3px,calc(var(--tw)*.03)) solid var(--r);transition:filter .15s}
/* The catalogue's pictures are squares with the skin across all the width
   and the middle ~70% of the height (2026-10-09: at 96% the weapons touched
   the tile's sides and looked cut): 86% of the tile leaves CS2's margin at the
   sides, and only the empty top and bottom go. */
.c4-item-pic img{position:absolute;left:7%;top:50%;width:86%;max-width:none;height:auto;aspect-ratio:1;transform:translateY(-50%)}
.c4-item:hover .c4-item-pic{filter:brightness(1.15)}
.c4-item:focus-visible{outline:2px solid #77d5f8;outline-offset:2px}
.c4-item b,.c4-item small{display:block;font-size:max(11px,calc(var(--tw)*.088));line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c4-item b{margin-top:calc(var(--tw)*.05);font-weight:700}
.c4-item small{color:#d4d4d4}
.c4-item.is-sold{cursor:default}
.c4-item.is-sold .c4-item-pic{filter:none}
.c4-item.is-sold img{opacity:.3;filter:grayscale(1)}
.c4-item-pic em{position:absolute;font-style:normal;font-family:Oswald,sans-serif;font-weight:600;font-size:max(13px,calc(var(--tw)*.12));color:#b4f08c;text-shadow:0 1px 3px rgba(0,0,0,.8)}
@keyframes c4-item{from{opacity:0;transform:translateY(8px)}}
.c4-inv-menu{position:fixed;z-index:2;min-width:210px;max-width:min(320px,calc(100vw - 16px));padding:4px 0;background:#1c1e21;border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 30px rgba(0,0,0,.65);animation:c4-fade .12s}
.c4-inv-menu[hidden]{display:none}
.c4-inv-menu p{margin:0;padding:8px 14px 7px;font-weight:700;font-size:13px;color:var(--r);border-bottom:1px solid rgba(255,255,255,.08)}
.c4-inv-menu button{display:block;width:100%;min-height:40px;padding:0 14px;font-size:15px;text-align:left;color:#e6e6e6}
.c4-inv-menu button:hover,.c4-inv-menu button:focus-visible{color:#fff;background:#30343a;outline:0}
@media (max-width:600px){
  .c4-inv{--tw:calc((100vw - 48px)/3)}
  .c4-inv-grid{gap:14px 12px}
  .c4-inv-bar{flex-wrap:wrap;padding:6px 12px 8px}
  .c4-inv-count{flex-basis:100%}
  .c4-inv-btn{flex:1;min-height:44px;padding:0 10px;font-size:14px}
}
/* An ordinary round's skins: a card on the field in the inventory's tiles,
   the buttons under them; the controls stay free. */
.c4-got{--tw:clamp(70px,calc(var(--fs)*.26),160px);position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:8px;border-radius:14px;background:rgba(5,7,10,.5);animation:c4-fade .15s;transition:opacity .18s}
.c4-got.is-one{--tw:clamp(110px,calc(var(--fs)*.34),210px)}
.c4-got.is-gone{opacity:0;pointer-events:none}
.c4-got-card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;padding:12px;text-align:left;color:#fff;background:rgba(14,16,20,.96);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 50px rgba(0,0,0,.7);font-family:"Roboto Condensed",Roboto,Arial,sans-serif;animation:c4-pop .2s cubic-bezier(.2,1.3,.4,1)}
.c4-got-items{display:flex;justify-content:center;gap:8px}
.c4-got .c4-item{width:var(--tw)}
.c4-got .c4-item:hover .c4-item-pic{filter:none}
.c4-got-one{width:100%;min-height:30px;margin-top:6px;padding:3px 4px;font-size:max(12px,calc(var(--tw)*.085));line-height:1.15;text-wrap:balance;color:#e8eaec;background:#2a2d31;border:1px solid rgba(255,255,255,.1)}
.c4-got-one:hover:not(:disabled){background:#3a3e44}
.c4-got-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.c4-got-btns .c4-inv-btn{flex:1 1 auto;min-height:44px;white-space:nowrap}
.c4-buy-dlg{width:min(340px,100%);padding-top:28px}
.c4-buy-img{width:140px;margin:0 auto 4px;filter:drop-shadow(0 0 24px rgba(180,92,255,.55))}

.c4-low h2{display:flex;align-items:center;justify-content:center;gap:.35em;flex-wrap:wrap}
.c4-low h2 .c4-coin{width:1.5em;height:1.5em;min-width:0;min-height:0;font-size:.75em;box-shadow:inset 0 0 0 2px rgba(42,15,99,.6),0 3px 8px rgba(0,0,0,.45)}
.c4-low p{margin:6px 0 14px;color:var(--mute)}
.c4-toast{position:fixed;left:50%;bottom:24px;z-index:1010;display:flex;align-items:center;gap:12px;transform:translateX(-50%);padding:10px 16px;font-size:15px;color:#fff;background:rgba(20,18,16,.95);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.6);animation:c4-pop .25s;max-width:calc(100vw - 24px)}
.c4-toast[hidden]{display:none}
.c4-toast button{padding:6px 12px;font-family:Oswald,sans-serif;letter-spacing:.06em;color:#1b1608;background:var(--gold);border-radius:4px}

/* ------------------------------------------------------------------ phones */
/* The C4s go on top beside the title, the field under them, then the money,
   DEFUSE across the width, and ? · AUTO · КУПИТЬ at the bottom. The bar's
   parts become cells of the scene's grid. */
.c4[data-layout=narrow] .c4-scene{grid-template-columns:22% 1fr 1fr 1fr;grid-template-rows:auto auto auto auto auto;
  grid-template-areas:"logo rack rack rack" "field field field field" "bal bal bet bet" "spin spin spin spin" "help auto buy buy";
  padding:8px 8px 16px;row-gap:9px;column-gap:8px;align-content:start;min-height:0;max-width:620px;margin:0 auto}
.c4[data-layout=narrow] .c4-bar{display:contents}
.c4[data-layout=narrow] .c4-bar::after{display:none}
.c4[data-layout=narrow] .c4-logo{width:100%;align-self:center}
.c4[data-layout=narrow] .c4-rack{flex-direction:row;align-self:center;width:100%;justify-content:space-between;gap:6px}
.c4[data-layout=narrow] .c4-bomb{width:31.5%}
.c4[data-layout=narrow] .c4-bomb-art{width:66%}
.c4[data-layout=narrow] .c4-code{border-width:2px;padding:2px 4px}
.c4[data-layout=narrow] .c4-code i{font-size:clamp(12px,3.8vw,20px)}
.c4[data-layout=narrow] .c4-stash{flex-direction:row}
.c4[data-layout=narrow] .c4-stack-art{width:44%}
.c4[data-layout=narrow] .c4-balance{grid-area:bal;justify-self:start}
.c4[data-layout=narrow] .c4-bet{grid-area:bet;justify-self:end}
.c4[data-layout=narrow] .c4-spin{grid-area:spin;justify-content:center;height:64px}
.c4[data-layout=narrow] .c4-help{grid-area:help;margin:0;justify-self:start}
.c4[data-layout=narrow] .c4-toggles{grid-area:auto;flex-direction:column;align-items:flex-start;gap:0;margin:0;justify-self:start}
.c4[data-layout=narrow] .c4-auto{min-height:36px}
.c4[data-layout=narrow] .c4-buy{grid-area:buy;flex-direction:row;width:100%;gap:6px;justify-content:flex-end;align-self:center}
.c4[data-layout=narrow] .c4-buy-bomb{width:24%}
.c4[data-layout=narrow] .c4-buy-word{width:70%;margin:0}
.c4[data-layout=narrow] .c4-spins{padding:4px 8px 6px}
.c4[data-layout=narrow] .c4-spins b{font-size:22px}
.c4[data-layout=narrow] .c4-coin{width:44px;height:44px;font-size:24px}
.c4[data-layout=narrow] .c4-balance b{font-size:20px;padding:10px 12px}
.c4[data-layout=narrow] .c4-arrow{width:44px;height:44px}
.c4[data-layout=narrow] .c4-bet-value{height:44px;min-width:64px;font-size:18px}
@media (prefers-reduced-motion:reduce){.c4 *{animation-duration:.01s!important}}
.c4-fx2d{position:fixed;inset:0;z-index:960;pointer-events:none;width:100vw;height:100vh}
.c4-cine-count.is-gl{position:fixed;z-index:995;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
/* The bonus's last run: what is still to defuse, right of the card; under it
   where the screen is taller than wide. */
.c4-left{position:fixed;z-index:996;left:calc(50% + min(24vh,36vw) + 8vw);top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;color:#fff;font-family:Oswald,sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.6);animation:c4-fade .3s}
.c4-left small{font-family:"Roboto Condensed",sans-serif;font-size:clamp(12px,1.6vh,16px);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.c4-left b{font-weight:700;font-size:clamp(44px,10vh,110px);line-height:1}
.c4-left b:empty{display:none}
.c4-left-rows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.c4-left-rows span{display:flex;align-items:center;gap:10px;font-weight:600;font-size:clamp(18px,3vh,30px)}
.c4-left-rows span[hidden]{display:none}
.c4-left-rows img{width:auto;height:clamp(36px,6.5vh,64px);filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
@media (max-aspect-ratio:5/4){
  .c4-left{left:50%;top:auto;bottom:11vh;transform:translateX(-50%);flex-direction:row;gap:12px}
  .c4-left b{font-size:clamp(30px,5vh,48px)}
  .c4-left-rows{flex-direction:row;gap:12px;margin:0}
  .c4-left-rows span{gap:4px;font-size:18px}
  .c4-left-rows img{height:34px}
}
.c4-cine-count.is-gl small{font-family:"Roboto Condensed",sans-serif;font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.c4-banner{position:fixed;left:50%;top:42%;z-index:995;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-50%);pointer-events:none;animation:c4-banner 1.5s cubic-bezier(.2,1,.3,1) forwards;white-space:nowrap}
.c4-banner b{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(54px,11vw,150px);line-height:.9;letter-spacing:.06em;color:#fff;-webkit-text-stroke:2px #3a1f00;text-shadow:0 0 30px rgba(240,194,28,.9),0 0 80px rgba(240,120,20,.6),0 6px 0 #6b3c00}
.c4-banner small{font-family:Oswald,sans-serif;font-weight:600;font-size:clamp(16px,2.4vw,28px);letter-spacing:.18em;text-transform:uppercase;color:#ffe9a8;text-shadow:0 2px 0 rgba(0,0,0,.6)}
@keyframes c4-banner{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
.c4-credits{margin:12px 0 0;font-size:11px;color:rgba(185,180,166,.7)}
.c4-credits a{color:inherit}
/* A C4 left part-typed at the end of a round (slot-v4.js missedCodes): which,
   and by how many digits -- what the round really drew. */
.c4-miss{position:absolute;left:50%;top:44%;z-index:45;display:grid;gap:8px;justify-items:center;transform:translate(-50%,-50%);pointer-events:none;animation:c4-miss-in .32s cubic-bezier(.2,1.5,.4,1);transition:opacity .35s,transform .35s}
.c4-miss p{margin:0;display:flex;align-items:center;gap:14px;padding:12px 22px 12px 16px;border-radius:12px;background:rgba(10,9,8,.92);border:1px solid rgba(255,255,255,.14);border-left:6px solid var(--c,#fff);box-shadow:0 16px 40px rgba(0,0,0,.7),0 0 40px color-mix(in srgb,var(--c,#fff) 35%,transparent);font-size:clamp(16px,1.7vw,26px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:#fff}
.c4-miss p b{font-family:Oswald,sans-serif;font-weight:700;color:var(--c,#fff)}
.c4-miss p span{color:#e8e2d4}
.c4-miss p[data-c=b]{--c:#5d95ff}.c4-miss p[data-c=r]{--c:#ff5a43}.c4-miss p[data-c=g]{--c:#ffcc33}
.c4-miss.is-out{opacity:0;transform:translate(-50%,-56%)}
@keyframes c4-miss-in{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.c4-code.is-miss{animation:c4-miss-shake .5s}
.c4-code.is-miss i:empty::after{color:#d8321f;opacity:1}
@keyframes c4-miss-shake{0%,100%{transform:translateX(0)}15%,55%{transform:translateX(-4px)}35%,75%{transform:translateX(4px)}}