.jg {
  --jg-ink: #faf6ec;
  --jg-muted: #bdb3ce;
  --jg-yellow: #f3c75e;
  --jg-dark: #211831;
  --jg-purple: #40324f;
  --jg-progress: 0%;
  position: relative;
  box-sizing: border-box;
  padding: clamp(20px, 3.2vw, 44px);
  color: var(--jg-ink);
  background: #343044 url('/ru-v1-case-jigsaw-deluxe-v1/assets/game-bg.webp') center / cover;
  border: 1px solid #695479;
  border-radius: 28px;
  font-family: inherit;
  isolation: isolate;
}
.jg *, .jg *::before, .jg *::after {box-sizing: border-box}
.jg [hidden] {display: none !important}
.jg button {font: inherit; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent}
.jg button:disabled {cursor: default; opacity: .28}
.jg button:focus-visible, .jg [tabindex]:focus-visible {outline: 3px solid #ffe092; outline-offset: 4px}
.jg-topbar {display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px}
.jg-heading {display:flex; align-items:center; gap:22px}
.jg-game-logo {display:block; width:124px; height:auto; flex-shrink:0}
.jg-kicker {display:block; color:var(--jg-yellow); font-size:10px; font-weight:700; letter-spacing:.18em; line-height:1.6}
.jg-heading h3 {font:inherit; font-size:clamp(24px,3.2vw,42px); font-weight:700; letter-spacing:-.045em; margin:6px 0 0; line-height:1.15}
.jg-counters {display:flex; gap:28px; flex-shrink:0; text-align:right}
.jg-counters strong {display:block; font-size:25px; line-height:1.2; font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.025em}
.jg-counters span span {display:block; margin-top:5px; color:var(--jg-muted); font-size:11px}
.jg-time strong {color:var(--jg-yellow)}
.jg-settings {display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px}
.jg-picture-options {display:flex; gap:12px; min-width:0; flex:1}
.jg-picture {display:grid; grid-template-columns:45px minmax(0,1fr); align-items:center; gap:10px; padding:6px 12px 6px 6px; min-width:0; max-width:190px; background:#20182d; border:1px solid #64516f; border-radius:10px; text-align:left; transition:border-color .18s,background .18s}
.jg-picture img {display:block; width:45px; height:41px; object-fit:cover; border-radius:5px}
.jg-picture span {font-size:11px; font-weight:600; line-height:1.35}
.jg-picture[aria-pressed=true] {border-color:var(--jg-yellow); background:#53413f}
.jg-picture:hover {border-color:#c5a1dc}
.jg-picture[aria-pressed=true]:hover {border-color:var(--jg-yellow)}
.jg-levels {display:flex; gap:4px; border:0; padding:0; margin:0; align-items:center; flex-shrink:0}
.jg-levels legend {float:left; padding:0; margin-right:10px; color:var(--jg-muted); font-size:11px; line-height:36px}
.jg-levels button {min-width:38px; height:36px; border:1px solid #776187; border-radius:8px; background:#352844; font-size:12px; font-weight:700}
.jg-levels button[aria-pressed=true] {background:linear-gradient(#ffdd83,#e4ad3c); border-color:#ffe3a0; color:#382940; box-shadow:0 3px 0 #926522,0 5px 10px #0002; transform:translateY(-2px)}
.jg-toolbar {display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:20px}
.jg-tool-group {display:flex; gap:8px}
.jg-tool {display:flex; align-items:center; gap:7px; border:1px solid #6d587f; border-radius:8px; padding:8px 12px; background:#342641; font-size:11px !important; line-height:1.3}
.jg-tool span {font-size:16px; line-height:1}
.jg-tool[aria-pressed=true] {background:#6a506d; border-color:#a28bae; color:#fff7e7}
.jg-reset {border:0; background:transparent; padding:8px 0 8px 8px; font-size:11px !important; white-space:nowrap; color:var(--jg-muted) !important}
.jg-reset span {font-size:18px; display:inline-block; vertical-align:-1px; margin-right:5px}
.jg-play-area {display:block}
.jg-board-wrap {min-width:0; max-width:820px; margin:0 auto}
.jg-board {position:relative; width:100%; aspect-ratio:4/3; border-radius:7px; background-color:#fff3e3; background-image:radial-gradient(#7964440c 1px,transparent 1px); background-size:5px 5px; box-shadow:0 0 0 7px #4c3b58,0 0 0 8px #80668b,0 13px 24px #100c1d66; isolation:isolate; margin:7px 0; overflow:visible}
.jg-ghost {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.23; border-radius:7px; pointer-events:none; user-select:none}
.jg-contours {position:absolute; inset:0; width:100%; height:100%; pointer-events:none; fill:none; stroke:#ba956e88; stroke-width:1px; filter:drop-shadow(0 1px 0 #fffaf5)}
.jg-grid {display:grid; position:absolute; inset:0; z-index:2}
.jg-cell {min-width:0; min-height:0; border:0; background:transparent; border-radius:0; padding:0; position:relative}
.jg-cell:hover {background:#96725112}
.jg-cell:focus-visible {outline:2px solid #ffe092 !important; outline-offset:-3px !important; z-index:4}
.jg-cell.is-over {background:#f3c75e55; box-shadow:inset 0 0 0 2px #f3c75e}
.jg-cell.is-filled {border-color:transparent; cursor:default; pointer-events:none}
.jg-cell.is-filled:hover {background:transparent}
.jg-board.has-selection .jg-cell:not(.is-filled) {cursor:crosshair}
.jg-placed-layer {position:absolute; inset:0; pointer-events:none; z-index:3}
.jg-board-piece {position:absolute; overflow:visible}
.jg-board-piece svg {position:absolute; display:block; width:var(--jg-piece-svg-w); height:var(--jg-piece-svg-h); left:calc(var(--jg-piece-pad-x) * -1); top:calc(var(--jg-piece-pad-y) * -1); overflow:visible; filter:drop-shadow(0 1px 1px #120b2159)}
.jg-piece-outline {stroke:#23172caa; stroke-width:1.1px; stroke-linejoin:round}
.jg-board-piece.is-new {animation:jg-snap .24s ease-out}
.jg-board-caption {display:flex; align-items:center; justify-content:center; gap:7px; margin-top:23px; font-size:10px; color:var(--jg-muted); letter-spacing:.01em}
.jg-board-caption span {color:var(--jg-yellow); font-size:13px}
.jg-tray-panel {min-width:0; margin-top:24px; padding:20px 0 0; border-top:1px solid #a28dab4d}
.jg-tray-heading {display:flex; align-items:center; justify-content:space-between; gap:12px}
.jg-tray-heading h4 {font:inherit; font-size:14px; font-weight:600; margin:0}
.jg-tray-navigation {display:flex; gap:5px}
.jg-tray-navigation button {border:1px solid #715d82; border-radius:50%; width:27px; height:27px; padding:0; background:#44334f; font-size:15px; line-height:1}
.jg-tray-hint {color:var(--jg-muted); font-size:10px; line-height:1.55; margin:8px 0 16px}
.jg-tray-hint br {display:none}
.jg-tray {display:grid; grid-template-rows:repeat(2,88px); grid-auto-flow:column; grid-auto-columns:88px; gap:12px; overflow-x:auto; overflow-y:hidden; padding:5px 5px 14px; scrollbar-width:thin; scrollbar-color:#92789f #21192e; scroll-padding:10px}
.jg-piece {display:block; width:100%; aspect-ratio:1; min-width:0; padding:3px; border:1px solid #80668c66; border-radius:8px; background:#4b3a5780; touch-action:none; user-select:none; -webkit-user-select:none; transition:background .15s,border-color .15s; cursor:grab !important}
.jg-piece svg {display:block; width:100%; height:100%; overflow:visible; pointer-events:none; filter:drop-shadow(0 3px 2px #100c1f77)}
.jg-piece:hover {background:#6b5478; border-color:#ae8fbd}
.jg-piece.is-selected {background:#98714677; border:2px solid var(--jg-yellow); padding:2px; box-shadow:0 0 0 2px #f3c75e22}
.jg-piece.is-dragging {opacity:.28; cursor:grabbing !important}
.jg-tray-empty {font-size:12px; color:#dcd0e4; line-height:1.6; margin:15px 0}
.jg-bottom {display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #7b5f874d; padding-top:18px; margin-top:20px; position:relative}
.jg-bottom::before {content:""; position:absolute; top:-1px; left:0; width:var(--jg-progress); height:2px; background:var(--jg-yellow); transition:width .2s}
.jg-status {font-size:11px; line-height:1.55; color:#e5d9ea; margin:0; min-height:18px; max-width:67%}
.jg-save-note {font-size:9px; line-height:1.5; color:#b0a1bb; text-align:right; max-width:145px}
.jg-drag-preview {position:fixed; z-index:2147483646; pointer-events:none; padding:0; border:0; border-radius:0; background:none; box-shadow:none; filter:drop-shadow(0 10px 7px #120b2166); isolation:auto}
.jg-drag-preview svg {display:block; width:100%; height:100%; overflow:visible}
.jg-win {position:absolute; inset:auto 0 0; min-height:58%; display:grid; place-items:center; padding:32px; border-radius:0 0 28px 28px; z-index:6; background:linear-gradient(#21183100,#211831ed 23%,#211831fc); pointer-events:none}
.jg-win-card {pointer-events:auto; text-align:center; padding:24px 32px 27px; background:#fbf3de; border:1px solid #fff9e7; border-radius:13px; box-shadow:0 16px 36px #120a244d; color:#3a2845; transform:rotate(-1deg); max-width:100%}
.jg-win-medal {display:block; width:76px; height:auto; margin:0 auto 14px; filter:drop-shadow(0 4px 2px #73552328)}
.jg-win-card .jg-kicker {color:#806632; font-size:8px}
.jg-win-card h4 {font:inherit; font-size:34px; font-weight:700; line-height:1.1; letter-spacing:-.045em; margin:10px 0}
.jg-win-card p {font-size:11px; margin:0 0 20px; line-height:1.5; color:#76687b}
.jg-gold-button {display:inline-flex; justify-content:center; align-items:center; gap:24px; padding:13px 20px; min-height:44px; background:linear-gradient(#ffdf8a,#eeb844); border:1px solid #ffdc88; border-radius:8px; color:#382940 !important; box-shadow:0 4px 0 #996b2a; font-size:12px !important; font-weight:700 !important}
.jg-gold-button:hover {background:#ffe19a}
.jg-confirm {position:fixed; inset:0; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); margin:auto; padding:30px; overflow:auto; border:1px solid #ae92bf; border-radius:18px; color:var(--jg-ink); background:#33273f; box-shadow:0 25px 80px #0c061980; font-family:inherit}
.jg-confirm::backdrop {background:#100a1dcc; backdrop-filter:blur(3px)}
.jg-confirm h4 {margin:12px 0; font:inherit; font-size:28px; font-weight:700; letter-spacing:-.035em; line-height:1.15}
.jg-confirm p {margin:0; color:#d2c4dc; font-size:13px; line-height:1.65}
.jg-confirm-actions {display:flex; flex-direction:column; gap:13px; margin-top:25px}
.jg-confirm-cancel {min-height:44px; padding:12px 16px; border:1px solid #987ca9; border-radius:8px; background:#493652; font-size:12px !important; font-weight:600 !important}
.jg-confirm-cancel:hover {background:#60496c}
.jg-confirm .jg-gold-button {width:100%; margin-bottom:4px}
.jg-view-picture{display:block;margin:16px auto 0;padding:8px 12px;min-height:44px;background:none;border:0;border-bottom:1px solid #82748c;color:#55415e!important;font-size:12px!important}
@media(max-width:720px){.jg-tray-navigation button{min-width:44px;min-height:44px}.jg .jg-levels button,.jg .jg-tool,.jg .jg-reset{min-height:44px}.jg .jg-tool,.jg .jg-reset{font-size:11px!important}.jg .jg-picture span{font-size:11px}.jg .jg-status,.jg .jg-tray-hint{font-size:12px}}
@keyframes jg-snap {from {filter:brightness(1.35); transform:scale(1.025)} to {filter:brightness(1); transform:scale(1)}}
@media(min-width:1001px) {
  .jg-play-area {display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:32px; align-items:start}
  .jg-board-wrap {width:100%; max-width:720px}
  .jg-tray-panel {margin-top:0; padding:7px 0 0; border-top:0}
  .jg-tray-hint br {display:block}
  .jg-tray {grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-flow:row; grid-auto-columns:auto; gap:10px; max-height:min(470px,55vh); overflow-x:hidden; overflow-y:auto; padding:5px 9px 14px 5px}
}
@media(max-width:1000px) {
  .jg-heading {gap:15px}
  .jg-game-logo {width:104px}
  .jg-heading h3 {font-size:30px}
  .jg-settings {gap:15px}
  .jg-picture-options {gap:7px}
  .jg-picture {padding-right:7px; gap:7px; grid-template-columns:36px minmax(0,1fr)}
  .jg-picture img {width:36px; height:36px}
  .jg-picture span {font-size:10px}
  .jg-tray {gap:10px; grid-template-rows:repeat(2,80px); grid-auto-columns:80px}
}
@media(max-width:720px) {
  .jg {padding:22px; border-radius:20px}
  .jg-topbar {align-items:center; gap:15px; margin-bottom:24px}
  .jg-heading {display:block}
  .jg-game-logo {width:102px; margin:0 0 13px}
  .jg-kicker {font-size:8px}
  .jg-heading h3 {font-size:25px; max-width:220px}
  .jg-counters {gap:15px; padding-top:3px}
  .jg-counters strong {font-size:20px}
  .jg-counters span span {font-size:9px; max-width:60px; line-height:1.3}
  .jg-settings {display:block; margin-bottom:18px}
  .jg-picture-options {gap:8px; margin-bottom:19px}
  .jg-picture {display:block; width:33.333%; padding:5px; text-align:left; border-radius:9px}
  .jg-picture img {width:100%; height:auto; aspect-ratio:1.6; margin-bottom:7px}
  .jg-picture span {display:block; padding:0 3px 3px; font-size:10px}
  .jg-levels {gap:7px}
  .jg-levels legend {line-height:38px; font-size:11px}
  .jg-levels button {height:38px; min-width:48px}
  .jg-toolbar {margin-bottom:23px; gap:8px}
  .jg-tool-group {gap:6px}
  .jg-tool {padding:9px; gap:5px; min-height:38px; font-size:10px !important}
  .jg-reset {font-size:10px !important; min-height:38px}
  .jg-reset span {margin-right:2px}
  .jg-play-area {display:block}
  .jg-board {box-shadow:0 0 0 5px #4c3b58,0 0 0 6px #80668b,0 10px 20px #100c1d66}
  .jg-board-caption {font-size:9px; margin-top:19px}
  .jg-tray-panel {padding:17px 0 0; margin-top:23px}
  .jg-tray-heading h4 {font-size:13px}
  .jg-tray-navigation button {width:33px; height:33px}
  .jg-tray-hint {margin:7px 0 12px; font-size:10px}
  .jg-tray-hint br {display:none}
  .jg-tray {grid-template-columns:none; grid-template-rows:repeat(2,76px); grid-auto-flow:column; grid-auto-columns:76px; gap:9px; max-height:none; overflow-x:auto; overflow-y:hidden; padding:5px 5px 13px; scroll-padding:5px}
  .jg-piece {width:76px; height:76px}
  .jg-bottom {display:block; margin-top:14px; padding-top:15px}
  .jg-status {max-width:none; font-size:10px; min-height:30px}
  .jg-save-note {display:block; font-size:8px; text-align:left; max-width:none; margin-top:6px}
  .jg-win {padding:22px; min-height:55%; border-radius:0 0 20px 20px}
  .jg-win-card {padding:25px 20px}
  .jg-win-card h4 {font-size:31px}
}
@media(max-width:390px) {
  .jg {padding:18px 15px}
  .jg-heading h3 {font-size:24px}
  .jg-counters {gap:10px}
  .jg-counters strong {font-size:18px}
  .jg-tool {padding:8px 6px; font-size:9px !important}
  .jg-tool span {font-size:14px}
  .jg-reset {font-size:9px !important}
  .jg-picture-options {gap:6px}
  .jg-picture span {font-size:9px}
}
@media(prefers-reduced-motion:reduce) {
  .jg *, .jg *::before, .jg *::after {animation:none !important; transition:none !important; scroll-behavior:auto !important}
}