/* WIND GAME «Джекпот» (2026-10-21). Layered on coinflip-w.css (shell, header, panel).
   Sharp art: avatars are drawn at their CSS size from 1x/2x sources with object-fit:contain,
   the ribbon moves on the GPU and snaps to whole pixels when it stops. */
:root{--jp-gold:#f4ce73;--jp-gold2:#ffb84a;--jp-ink:var(--wg-text-tint);--jp-mute:var(--wg-text-tint);--jp-card:var(--wg-s3);--jp-card2:var(--wg-s2);--jp-line:var(--wg-accent-lo);--jp-tile:112px;--jp-face-bg:var(--wg-s2)}
.jp-main{display:grid;gap:18px}
.jp-page [hidden]{display:none!important}
.jp-intro h1 em{color:var(--jp-gold);font-style:normal}
/* rooms */
.jp-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.jp-room{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto auto;column-gap:12px;align-items:center;text-align:left;
  padding:14px 16px;border-radius:18px;border:1px solid var(--jp-line);background:linear-gradient(160deg,var(--wg-s4),var(--wg-s2));color:var(--jp-ink);
  cursor:pointer;font:inherit;transition:transform .15s,border-color .2s,box-shadow .2s;min-width:0}
.jp-room:hover{transform:translateY(-2px)}
.jp-room.is-active{border-color:var(--jp-gold);box-shadow:0 0 0 2px #f4ce7340,0 14px 34px #0008}
.jp-room-ico{grid-row:1/4;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:#ffffff0d}
.jp-room-ico svg{width:44px;height:44px;display:block;shape-rendering:geometricPrecision}
.jp-room-text b{display:block;font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-room-text small{color:var(--jp-mute);font-size:12px;font-weight:700}
.jp-room-pot{font-size:20px;font-weight:900;color:var(--jp-gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.jp-room-meta{font-size:12px;color:var(--jp-mute);font-variant-numeric:tabular-nums}
.jp-room-vip.is-active{background:linear-gradient(160deg,#3a2c0d,#1c1606 60%,var(--wg-s2))}
.jp-room-low.is-active{background:linear-gradient(160deg,#3a230f,#1a1208 60%,var(--wg-s2))}
/* stage */
.jp-stage{position:relative;border-radius:24px;border:1px solid var(--jp-line);overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 0,var(--wg-accent-deep) 0,var(--wg-s3) 42%,var(--wg-s2) 100%);padding:18px 18px 20px}
.jp-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from 0deg at 50% -10%,#ffffff0c 0 5deg,#0000 5deg 15deg)}
.jp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 18px}
.jp-pot-box span{display:block;font-size:12px;letter-spacing:.14em;font-weight:900;color:var(--jp-mute)}
.jp-pot-box strong{display:block;font-size:clamp(34px,6vw,54px);line-height:1;font-weight:950;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px #f4ce7366,0 3px 0 #0006}
.jp-pot-box .jp-bonus{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 12px;border-radius:999px;background:linear-gradient(90deg,var(--wg-accent),var(--wg-accent));
  color:#fff;font-size:13px;letter-spacing:0;font-weight:900;box-shadow:0 6px 16px #0006}
.jp-pot-box .jp-bonus::before{content:"";width:16px;height:16px;background:url(/assets/brand-emblem.svg) center/contain no-repeat}
.jp-prize{margin:6px 0 0;color:var(--jp-mute);font-size:13px;font-weight:700}
.jp-time{text-align:right;min-width:150px}
.jp-time span{display:block;font-size:12px;letter-spacing:.12em;font-weight:900;color:var(--jp-mute);text-transform:uppercase}
.jp-time strong{display:block;font-size:34px;font-weight:950;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.jp-timeline{height:6px;border-radius:6px;background:#ffffff14;margin:14px 0 16px;overflow:hidden}
.jp-timeline i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--wg-accent),#f4ce73);transition:transform .25s linear}
.jp-timeline i.is-hot{background:linear-gradient(90deg,#ff6b6b,#ffb84a)}
/* ribbon (case) */
.jp-window{position:relative;height:150px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--wg-s1),var(--wg-s2) 50%,var(--wg-s1));
  border:1px solid var(--wg-accent-lo);box-shadow:inset 0 0 40px #000a}
.jp-window::before,.jp-window::after{content:"";position:absolute;top:0;bottom:0;width:18%;z-index:2;pointer-events:none}
.jp-window::before{left:0;background:linear-gradient(90deg,var(--wg-s1),color-mix(in srgb,var(--wg-s1) 0%,transparent))}
.jp-window::after{right:0;background:linear-gradient(270deg,var(--wg-s1),color-mix(in srgb,var(--wg-s1) 0%,transparent))}
.jp-marker{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;z-index:3;background:linear-gradient(#f4ce73,#ffb84a);
  box-shadow:0 0 12px #f4ce73cc;pointer-events:none}
.jp-marker::before,.jp-marker::after{content:"";position:absolute;left:50%;width:0;height:0;margin-left:-9px;border:9px solid transparent}
.jp-marker::before{top:-1px;border-top-color:#f4ce73}
.jp-marker::after{bottom:-1px;border-bottom-color:#f4ce73}
.jp-track{position:absolute;left:0;top:13px;display:flex;gap:8px;will-change:transform;backface-visibility:hidden}
.jp-window.is-done .jp-track{will-change:auto}
.jp-window.is-near .jp-marker{box-shadow:0 0 20px #ffd76a,0 0 40px #ffb84a99;animation:jp-beat .9s ease-in-out infinite}
@keyframes jp-beat{50%{opacity:.75}}
.jp-tile{flex:0 0 auto;width:calc(var(--jp-tile) - 8px);height:124px;display:grid;justify-items:center;align-content:center;gap:6px;border-radius:14px;
  background:linear-gradient(180deg,var(--wg-s4),var(--wg-s2));border:1px solid var(--wg-accent-lo);border-bottom:4px solid var(--jp-c);box-sizing:border-box}
.jp-tile-name{max-width:92%;font-size:11.5px;font-weight:800;color:var(--wg-text-tint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-tile.is-win{border-color:var(--jp-gold);box-shadow:0 0 0 2px var(--jp-gold),0 0 26px #f4ce73aa;background:linear-gradient(180deg,#3b2f0c,#1c1606);
  animation:jp-pulse 1.4s ease-in-out 3}
.jp-tile{transition:box-shadow .6s,border-color .6s,background .6s}
@keyframes jp-pulse{50%{transform:scale(1.06)}}
.jp-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--jp-mute);font-weight:800;padding:0 20px;z-index:1}
/* faces: crisp avatars */
.jp-face{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--jp-face);height:var(--jp-face);border-radius:50%;
  background:var(--jp-face-bg);box-shadow:0 0 0 2px var(--jp-ring,var(--wg-accent));overflow:hidden}
.jp-face img{width:86%;height:86%;object-fit:contain;image-rendering:auto;-webkit-user-drag:none;user-select:none;transform:translateZ(0)}
.jp-face.is-letter{background:var(--jp-bg,var(--wg-s4))}
.jp-face.is-letter b{font-size:calc(var(--jp-face) * .44);font-weight:900;color:#fff;line-height:1}
.jp-banner{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 16px;border-radius:16px;background:linear-gradient(120deg,var(--wg-s5),var(--wg-s3));
  border:1px solid var(--wg-accent);animation:jp-in .8s ease-out}
.jp-banner.is-me{background:linear-gradient(120deg,#4a3a0c,#1c1606);border-color:var(--jp-gold)}
.jp-banner div>span{display:block;font-size:12px;letter-spacing:.12em;font-weight:900;color:var(--jp-mute);text-transform:uppercase}
.jp-banner b{display:block;font-size:20px;font-weight:950;color:#fff}
.jp-banner em{display:block;font-style:normal;font-weight:800;color:var(--jp-gold)}
@keyframes jp-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.jp-share{display:flex;height:10px;border-radius:6px;overflow:hidden;margin-top:14px;background:#ffffff10;gap:2px}
.jp-share i{display:block;min-width:3px}
/* lower grid */
.jp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.jp-card{border-radius:20px;border:1px solid var(--jp-line);background:linear-gradient(170deg,var(--jp-card),var(--jp-card2));padding:16px;color:var(--jp-ink);min-width:0}
.jp-card h2{margin:0 0 12px;font-size:16px;font-weight:900;display:flex;justify-content:space-between;gap:8px}
.jp-card h2 small{color:var(--jp-mute);font-weight:800;font-variant-numeric:tabular-nums}
.jp-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:10px}
.jp-quick button{min-height:40px;border-radius:12px;border:1px solid var(--wg-accent);background:var(--wg-s4);color:#fff;font:800 13px/1 inherit;font-family:inherit;cursor:pointer;
  font-variant-numeric:tabular-nums;padding:0 2px}
.jp-quick button:hover{border-color:var(--jp-gold)}
.jp-input{display:flex;align-items:center;gap:8px;border:1px solid var(--wg-accent);border-radius:14px;background:var(--wg-s2);padding:0 12px}
.jp-input input{flex:1;min-width:0;height:48px;border:0;background:none;color:#fff;font:900 20px/1 inherit;font-family:inherit;outline:none;font-variant-numeric:tabular-nums}
.jp-input span{color:var(--jp-mute);font-weight:900}
.jp-play{width:100%;min-height:54px;margin-top:10px;border-radius:14px;border:1px solid var(--wg-accent-pale);background:linear-gradient(140deg,var(--wg-accent),var(--wg-accent));color:#fff;
  font:900 17px/1.1 inherit;font-family:inherit;cursor:pointer;box-shadow:0 10px 26px #0006}
.jp-play:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}
.jp-mine,.jp-limits,.jp-msg{margin:10px 0 0;font-size:13px;color:var(--jp-mute);font-weight:700}
.jp-mine b{color:#fff}
.jp-msg{color:var(--wg-text-tint);min-height:1.2em}
.jp-bal{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px;font-weight:800;color:var(--jp-mute)}
.jp-bal strong{color:#fff;font-variant-numeric:tabular-nums}
.jp-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:420px;overflow:auto}
.jp-list li{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:auto auto;column-gap:10px;row-gap:5px;align-items:center;
  padding:8px 10px;border-radius:14px;background:#ffffff08;border-left:3px solid var(--jp-c,var(--wg-accent))}
.jp-list li .jp-face{grid-row:1/3}
.jp-list li.is-me{background:color-mix(in srgb,var(--wg-accent) 7.8%,transparent)}
.jp-list li.is-winner{background:#f4ce7322}
.jp-pl-name,.jp-h-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.jp-pl-name{display:flex;align-items:center;gap:6px}.jp-pl-name b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.jp-pl-name small{flex:0 0 auto;padding:1px 6px;border-radius:6px;background:var(--wg-accent);color:#fff;font-size:10px;font-weight:900}
.jp-pl-stake,.jp-h-win{font-weight:900;font-variant-numeric:tabular-nums;color:#fff}
.jp-pl-pct,.jp-h-chance{font-weight:900;color:var(--jp-gold);font-variant-numeric:tabular-nums;font-size:13px}
.jp-pl-bar{grid-column:2/5;height:5px;border-radius:4px;background:#ffffff12;overflow:hidden}
.jp-pl-bar i{display:block;height:100%;background:var(--jp-c)}
#jp-history li{grid-template-columns:auto 1fr auto}
#jp-history li .jp-h-chance{grid-column:2/4;grid-row:2}
.jp-list li.jp-none{display:block;color:var(--jp-mute);border-left-color:transparent}
.jp-proof{margin-top:4px;border-radius:16px;border:1px solid var(--jp-line);background:var(--wg-s2);padding:10px 14px;color:var(--jp-ink)}
.jp-proof summary{cursor:pointer;font-weight:900}
.jp-proof dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:10px 0 0;font-size:12px}
.jp-proof dt{color:var(--jp-mute);font-weight:800}
.jp-proof dd{margin:0;word-break:break-all;font-family:ui-monospace,Menlo,monospace}
#jp-p-status.ok{color:#9ff27a}#jp-p-status.bad{color:#ff8a8a}
.jp-rules{color:var(--jp-ink)}
.jp-rules ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--wg-text-tint);font-size:14px}
.jp-rules b{color:#fff}
@media (max-width:1100px){.jp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.jp-grid .jp-card-bet{grid-column:1/-1}}
@media (max-width:720px){
  :root{--jp-tile:92px}
  .jp-rooms{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .jp-room{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;text-align:center;padding:10px 6px;row-gap:3px;border-radius:14px}
  .jp-room-ico{grid-row:auto;width:40px;height:40px}.jp-room-ico svg{width:34px;height:34px}
  .jp-room-text b{font-size:12.5px;white-space:normal;line-height:1.15}
  .jp-room-text small{font-size:10.5px}
  .jp-room-pot{font-size:15px}.jp-room-meta{font-size:10.5px}
  .jp-stage{padding:14px 12px 16px;border-radius:18px}
  .jp-time{min-width:0}.jp-time strong{font-size:26px}
  .jp-window{height:128px}.jp-track{top:10px}.jp-tile{height:108px}
  .jp-grid{grid-template-columns:minmax(0,1fr)}
  .jp-quick button{font-size:12px}
}
/* light theme */
html[data-theme="light"]{--jp-ink:var(--wg-accent-deep);--jp-mute:var(--wg-accent-hi);--jp-card:#ffffff;--jp-card2:var(--wg-pale);--jp-line:var(--wg-pale-2);--jp-face-bg:var(--wg-pale)}
html[data-theme="light"] .jp-room{background:linear-gradient(160deg,#ffffff,var(--wg-pale));color:var(--jp-ink)}
html[data-theme="light"] .jp-room-pot{color:#a06a00}
html[data-theme="light"] .jp-room-vip.is-active{background:linear-gradient(160deg,#fff4d6,#ffffff)}
html[data-theme="light"] .jp-room-low.is-active{background:linear-gradient(160deg,#ffe9d6,#ffffff)}
html[data-theme="light"] .jp-card h2,html[data-theme="light"] .jp-pl-stake,html[data-theme="light"] .jp-h-win,
html[data-theme="light"] .jp-mine b,html[data-theme="light"] .jp-bal strong,html[data-theme="light"] .jp-rules b{color:var(--wg-accent-deep)}
html[data-theme="light"] .jp-pl-pct,html[data-theme="light"] .jp-h-chance{color:#a06a00}
html[data-theme="light"] .jp-list li{background:var(--wg-pale)}
html[data-theme="light"] .jp-rules ul{color:var(--wg-accent-lo)}
html[data-theme="light"] .jp-msg{color:var(--wg-accent-lo)}
html[data-theme="light"] .jp-quick button{background:var(--wg-pale);color:var(--wg-accent-deep);border-color:var(--wg-pale-2)}
html[data-theme="light"] .jp-input{background:#fff;border-color:var(--wg-pale-2)}
html[data-theme="light"] .jp-input input{color:var(--wg-accent-deep)}
html[data-theme="light"] .jp-proof{background:var(--wg-pale)}
@media (prefers-reduced-motion:reduce){.jp-tile.is-win{animation:none}.jp-timeline i{transition:none}}