/* Authentic round previews shared by the marketing site and game launch pages. */
.jgp-scene{--jgp-accent:#7047df;--jgp-hot:#ff5b8f;position:relative;min-width:0;padding:0 72px 34px 0;color:#fff;font-family:"JOKO Nunito",Nunito,"Trebuchet MS",sans-serif}
.jgp-scene[data-preview-game="doodle-heist"]{--jgp-accent:#ef6b5f;--jgp-hot:#ffd65a}.jgp-scene[data-preview-game="faker-fox"]{--jgp-accent:#e7603f;--jgp-hot:#f5c84c}.jgp-scene[data-preview-game="family-forecast"]{--jgp-accent:#7758e8;--jgp-hot:#ffd35c}.jgp-scene[data-preview-game="caption-chaos"]{--jgp-accent:#d92f83;--jgp-hot:#ff5b8f}.jgp-scene[data-preview-game="verdict"]{--jgp-accent:#b83238;--jgp-hot:#f1c14e}.jgp-scene[data-preview-game="bluff-royale"]{--jgp-accent:#7547da;--jgp-hot:#f3c84f}.jgp-scene[data-preview-game="excuse-factory"]{--jgp-accent:#e96c34;--jgp-hot:#ffd14a}.jgp-scene[data-preview-game="emoji-detective"]{--jgp-accent:#138c8c;--jgp-hot:#f2b84b}.jgp-scene[data-preview-game="silly-solutions"]{--jgp-accent:#0c8a70;--jgp-hot:#ffd05e}.jgp-scene[data-preview-game="family-spotlight"]{--jgp-accent:#cc5d55;--jgp-hot:#f0c64f}.jgp-scene[data-preview-game="echo-parade"]{--jgp-accent:#287fb9;--jgp-hot:#ef6d62}.jgp-scene[data-preview-game="wire-panic"]{--jgp-accent:#d84a37;--jgp-hot:#f4bd45}.jgp-scene[data-preview-game="clue-chase"]{--jgp-accent:#b06b26;--jgp-hot:#e9b947}.jgp-scene[data-preview-game="shadow-maze"]{--jgp-accent:#5541a8;--jgp-hot:#68d5ad}.jgp-scene[data-preview-game="mind-meld"]{--jgp-accent:#7554db;--jgp-hot:#71d8c0}.jgp-scene[data-preview-game="word-tangle"]{--jgp-accent:#2479b7;--jgp-hot:#f3bd45}.jgp-scene[data-preview-game="quiz-sprint"]{--jgp-accent:#d64a4d;--jgp-hot:#f5c54d}.jgp-scene[data-preview-game="buddy-match"]{--jgp-accent:#147d74;--jgp-hot:#f0b84b}.jgp-scene[data-preview-game="opinion-orbit"]{--jgp-accent:#7650d5;--jgp-hot:#59d0c0}.jgp-scene[data-preview-game="linkstorm"]{--jgp-accent:#236e9f;--jgp-hot:#eead3e}.jgp-scene[data-preview-game="mayday-matrix"]{--jgp-accent:#b43d37;--jgp-hot:#f1b947}
.jgp-tv{position:relative;z-index:1;min-width:0;padding:8px;border-radius:18px;background:#0a0920;box-shadow:0 22px 54px rgba(7,5,30,.34),0 8px 16px rgba(7,5,30,.22)}
.jgp-tv>header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;padding:0 9px;color:#e9e4f5;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.jgp-tv>header>span{display:flex;align-items:center;gap:6px}.jgp-tv>header i{width:7px;height:7px;border-radius:50%;background:#6fe0b2;box-shadow:0 0 14px rgba(111,224,178,.65)}.jgp-tv>header time{color:#fff0a8;font-variant-numeric:tabular-nums}
.jgp-tv__screen{position:relative;display:grid;align-content:center;justify-items:center;min-height:236px;padding:26px 28px;overflow:hidden;border-radius:12px;background:radial-gradient(circle at 78% 12%,color-mix(in srgb,var(--jgp-accent) 30%,transparent),transparent 42%),linear-gradient(145deg,color-mix(in srgb,var(--jgp-accent) 30%,#14102d),#0d0b24 66%);text-align:center}
.jgp-tv__screen::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 30%);pointer-events:none}
.jgp-tv__screen>small{position:relative;color:#fff1a9;font-size:.69rem;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}
.jgp-prompt,.jgp-result{position:relative;max-width:30ch;margin:12px auto 10px;color:#fff;font-size:clamp(1.18rem,3vw,1.78rem);font-weight:1000;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}.jgp-result{color:#fff7d3}
.jgp-tokens{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:7px}.jgp-tokens span{display:grid;min-height:34px;place-items:center;padding:7px 10px;border-radius:10px;background:color-mix(in srgb,var(--jgp-accent) 76%,#fff);color:#fff;font-size:.72rem;font-weight:1000;letter-spacing:.045em;box-shadow:0 8px 18px rgba(4,3,22,.22);transform:translateY(calc(var(--token) * -1px))}
.jgp-locks{position:relative;display:flex;gap:8px;margin-top:14px}.jgp-locks span{display:grid;min-width:62px;min-height:36px;place-items:center;border-radius:10px;background:rgba(255,255,255,.1);color:#d9d3ec;font-size:.72rem;font-weight:900}.jgp-locks span::after{content:"…";margin-left:4px}.jgp-locks .is-ready{background:#dff7eb;color:#11382c}.jgp-locks .is-ready::after{content:"✓"}
.jgp-phone{position:absolute;z-index:3;right:0;bottom:0;display:grid;align-content:start;width:142px;min-height:214px;padding:23px 12px 13px;border:7px solid #f7f3ea;border-radius:24px;background:#fffdf8;color:#17142e;box-shadow:0 22px 50px rgba(6,4,25,.34);text-align:left}.jgp-phone__speaker{position:absolute;top:8px;left:50%;width:34px;height:4px;border-radius:4px;background:#c8c3cb;transform:translateX(-50%)}
.jgp-phone>span{margin-top:8px;color:var(--jgp-accent);font-size:.61rem;font-weight:1000;letter-spacing:.1em;text-transform:uppercase}.jgp-phone>strong{margin-top:8px;font-size:.81rem;line-height:1.25}.jgp-phone>i{height:45px;margin-top:14px;border:2px solid #ddd7e6;border-radius:11px;background:linear-gradient(#fff,#f7f4fb)}.jgp-phone>em{display:grid;min-height:42px;margin-top:13px;place-items:center;border-radius:11px;background:var(--jgp-accent);color:#fff;font-size:.68rem;font-style:normal;font-weight:1000;text-align:center;text-transform:uppercase}.jgp-reactions{display:flex;gap:5px;margin-top:12px}.jgp-reactions b{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:var(--jgp-hot);color:#201331;font-size:.67rem}
.jgp-scene[data-phase="move"] .jgp-phone{animation:jgp-phone-focus .45s cubic-bezier(.16,1,.3,1)}.jgp-scene[data-phase="payoff"] .jgp-tv__screen{animation:jgp-payoff .55s cubic-bezier(.16,1,.3,1)}
@keyframes jgp-phone-focus{from{transform:translateY(12px) rotate(1deg);filter:brightness(.86)}to{transform:none;filter:none}}@keyframes jgp-payoff{from{clip-path:inset(0 50% 0 50% round 12px)}to{clip-path:inset(0 round 12px)}}
.jgp-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.jgp-beats button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:44px;padding:8px 10px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.07);color:inherit;font:inherit;font-size:.73rem;font-weight:950;cursor:pointer}.jgp-beats button span{display:grid;width:21px;height:21px;flex:0 0 auto;place-items:center;border-radius:7px;background:rgba(255,255,255,.12);font-size:.65rem}.jgp-beats button[aria-pressed="true"]{border-color:#f4cd55;background:#fff4c7;color:#241744}.jgp-beats button:focus-visible,.jgp-game-tabs button:focus-visible{outline:3px solid #ffd85c;outline-offset:2px}

/* Homepage hero */
#joko-hero-preview{position:relative;width:min(100%,620px);padding:18px;border-radius:26px;background:#17132e;color:#fff;box-shadow:0 28px 70px rgba(25,14,66,.26),0 9px 24px rgba(25,14,66,.2)}
.jgp-hero-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.jgp-hero-head>span{color:#fff0a5;font-size:.72rem;font-weight:1000;letter-spacing:.1em;text-transform:uppercase}.jgp-hero-head button{min-height:42px;padding:8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:11px;background:#262042;color:#fff;font:inherit;font-size:.72rem;font-weight:900;cursor:pointer}
#joko-hero-preview>.jgp-beats{margin-top:12px}
.hero #joko-hero-preview .jgp-tv__screen{justify-items:start;padding-right:76px;text-align:left}.hero #joko-hero-preview .jgp-prompt,.hero #joko-hero-preview .jgp-result{max-width:18ch;margin-inline:0;font-size:clamp(1.08rem,2.3vw,1.35rem)}.hero #joko-hero-preview .jgp-tokens{max-width:185px;justify-content:flex-start}

/* Homepage experience showcase */
.joko-experience-section{position:relative;overflow:hidden;padding:72px 0 78px;background:#0d0a22;color:#fff}.joko-experience-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 8%,rgba(115,78,221,.2),transparent 32%),radial-gradient(circle at 90% 75%,rgba(238,89,126,.13),transparent 35%);pointer-events:none}.joko-experience-section .section-shell{position:relative}.joko-experience-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.7fr);align-items:end;gap:42px;margin-bottom:30px}.joko-experience-heading h2{max-width:15ch;margin:0;color:#fff;font-size:clamp(2.2rem,5vw,4.6rem);line-height:.96;letter-spacing:-.04em;text-wrap:balance}.joko-experience-heading p{max-width:48ch;margin:0;color:#cbc3df;font-size:1.05rem;line-height:1.55}
.jgp-game-tabs{display:flex;gap:8px;padding-bottom:14px;overflow-x:auto;scrollbar-width:thin}.jgp-game-tabs button{flex:0 0 auto;min-height:44px;padding:10px 15px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#19152f;color:#d7d0e8;font:inherit;font-size:.8rem;font-weight:950;cursor:pointer}.jgp-game-tabs button[aria-pressed="true"]{border-color:#f1ca55;background:#fff3bf;color:#25173f}
.jgp-showcase-stage{display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);align-items:center;gap:46px;padding:34px;border-radius:24px;background:#15112d;box-shadow:0 28px 70px rgba(0,0,0,.25)}.jgp-showcase-copy h3{margin:0 0 22px;color:#fff;font-size:clamp(1.55rem,3vw,2.55rem);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}.jgp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.jgp-tags span{padding:7px 10px;border-radius:9px;background:#262040;color:#f5d86f;font-size:.7rem;font-weight:950;text-transform:uppercase;letter-spacing:.07em}.jgp-showcase-copy .jgp-beats{grid-template-columns:1fr}.jgp-showcase-copy .jgp-beats button{justify-content:flex-start}

/* How it works uses an actual shared-screen round rather than abstract icons. */
.how-live-layout{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);align-items:center;gap:44px;margin-top:36px}.jgp-how-visual{padding:22px;border-radius:24px;background:#17132e;box-shadow:0 24px 58px rgba(36,18,92,.18)}.how-live-layout figcaption{display:grid;gap:14px}.how-live-layout figcaption span,.how-live-layout figcaption strong,.how-live-layout figcaption b{display:block;padding:16px 18px;border-radius:13px;background:#fff;color:#17142e;box-shadow:0 12px 30px rgba(37,23,75,.1)}.how-live-layout figcaption strong::before,.how-live-layout figcaption span::before,.how-live-layout figcaption b::before{display:block;margin-bottom:5px;color:#6940cc;font-size:.67rem;font-weight:1000;letter-spacing:.11em;text-transform:uppercase}.how-live-layout figcaption strong::before{content:"1 · Alle sehen"}.how-live-layout figcaption span::before{content:"2 · Du antwortest privat"}.how-live-layout figcaption b::before{content:"3 · Die Runde erlebt die Auflösung"}.how-live-layout figcaption b{background:#fff1bb}

/* Catalog preview actions and inline real-round sheet. */
.games-grid .game{position:relative;overflow:hidden}.game-main-link{display:block;color:inherit;text-decoration:none}.game-main-link:focus-visible{outline:3px solid #5c2ac4;outline-offset:-4px}.game-experience{margin:0;color:#342b4d;font-size:.9rem;font-weight:850;line-height:1.42}.game-experience::before{content:"So geht’s";display:block;margin-bottom:4px;color:#6a3bc9;font-size:.63rem;font-weight:1000;letter-spacing:.1em;text-transform:uppercase}.game-card-actions{display:grid;grid-template-columns:1fr;margin-top:12px}.game-card-actions .game-open{display:flex;align-items:center;justify-content:center;min-height:46px;padding:11px 12px;border-radius:12px;background:var(--game-accent,#6938d3);color:#fff;font:inherit;font-size:.78rem;font-weight:1000;text-decoration:none;cursor:pointer}.game-card-actions .game-open svg{width:18px;height:18px;margin-left:7px;fill:none;stroke:currentColor;stroke-width:2}
html[lang="en"] .game-experience::before{content:"How it works"}
html[lang^="sr"] .game-experience::before{content:"Kako se igra"}
.game--compact .game-card-actions{grid-template-columns:1fr;padding:0 12px 12px}.game--compact .game-open{min-height:44px;font-size:.72rem}

@media(max-width:900px){
  .joko-experience-heading,.jgp-showcase-stage,.how-live-layout{grid-template-columns:1fr}.joko-experience-heading{gap:14px}.jgp-showcase-stage{gap:28px}.jgp-showcase-copy .jgp-beats{grid-template-columns:repeat(3,1fr)}.jgp-showcase-copy .jgp-beats button{justify-content:center}.how-live-layout{gap:22px}
}
@media(max-width:620px){
  #joko-hero-preview{padding:12px;border-radius:20px}.jgp-hero-head{margin-bottom:8px}.jgp-hero-head>span{font-size:.62rem}.jgp-scene{padding:0 42px 26px 0}.jgp-tv{border-radius:14px}.jgp-tv__screen{min-height:184px;padding:20px 16px}.jgp-tv>header{font-size:.55rem}.jgp-prompt,.jgp-result{font-size:1.14rem}.jgp-phone{width:112px;min-height:166px;padding:20px 9px 10px;border-width:5px;border-radius:19px}.jgp-phone>strong{font-size:.68rem}.jgp-phone>i{height:34px;margin-top:9px}.jgp-phone>button{min-height:36px;margin-top:8px;font-size:.56rem}.jgp-reactions b{width:24px;height:24px}.jgp-tokens span{font-size:.58rem}.jgp-beats button{font-size:.63rem;padding:7px 5px}.jgp-beats button span{display:none}
  .joko-experience-section{padding:54px 0 58px}.joko-experience-heading{margin-bottom:22px}.jgp-showcase-stage{padding:18px;border-radius:18px}.jgp-showcase-copy .jgp-beats{grid-template-columns:1fr}.jgp-showcase-copy .jgp-beats button{justify-content:flex-start;padding-inline:12px}.jgp-showcase-copy .jgp-beats button span{display:grid}.jgp-tags{margin-bottom:16px}
  .jgp-how-visual{padding:12px;border-radius:18px}.how-live-layout figcaption{gap:8px}.how-live-layout figcaption span,.how-live-layout figcaption strong,.how-live-layout figcaption b{padding:12px 14px;font-size:.84rem}
  .game-card-actions{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.jgp-scene[data-phase] .jgp-phone,.jgp-scene[data-phase] .jgp-tv__screen{animation:none}.jgp-scene *{scroll-behavior:auto!important}}

/* Final preview clarity pass: keep the payoff visible beside the phone and localize labels in markup. */
.how-live-layout figcaption strong::before,.how-live-layout figcaption span::before,.how-live-layout figcaption b::before{content:none}
.how-live-layout figcaption small{display:block;margin-bottom:5px;color:#6940cc;font-size:.67rem;font-weight:1000;letter-spacing:.11em;text-transform:uppercase}
.game{scroll-margin-top:110px}

@media(max-width:620px){
  .jgp-phone>em{min-height:36px;margin-top:8px;font-size:.56rem}
  .jgp-showcase-stage .jgp-tv__screen{padding-right:78px;justify-items:start;text-align:left}
  .jgp-showcase-stage .jgp-prompt,.jgp-showcase-stage .jgp-result{max-width:17ch;margin-inline:0;font-size:1rem;text-align:left}
  .jgp-showcase-stage .jgp-tokens{max-width:180px;justify-content:flex-start}
}

/* Reset the browser's default figure gutters and keep illustrative phone copy inside its shell. */
.how-live-layout{margin:36px 0 0}
.jgp-phone>span,.jgp-phone>strong,.jgp-phone>em{min-width:0;overflow-wrap:anywhere}

/* "So geht's" is three actual game states, not a second prose explanation. */
.how-section{scroll-margin-top:96px}
.how-live-layout{display:block;margin:30px 0 0}
.jgp-situation-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-width:760px;margin:0 auto 14px}.jgp-situation-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:9px 14px;border:1px solid #d9d0eb;border-radius:13px;background:#fff;color:#4f4564;font:inherit;font-size:.82rem;font-weight:1000;cursor:pointer}.jgp-situation-tabs button span{display:grid;width:25px;height:25px;flex:0 0 auto;place-items:center;border-radius:8px;background:#eee8fa;color:#6035be;font-size:.68rem}.jgp-situation-tabs button[aria-selected="true"]{border-color:#17132e;background:#17132e;color:#fff;box-shadow:0 12px 26px rgba(30,18,66,.2)}.jgp-situation-tabs button[aria-selected="true"] span{background:#f3d15e;color:#251941}.jgp-situation-tabs button:focus-visible{outline:3px solid #6840cf;outline-offset:3px}
.jgp-situation-strip{display:block}
.jgp-situation{position:relative;min-width:0;overflow:hidden;border-radius:24px;background:#0d0b21;box-shadow:0 24px 56px rgba(25,14,56,.22);isolation:isolate}.jgp-situation[hidden]{display:none}
.jgp-situation::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(9,7,24,.08),transparent 48%,rgba(9,7,24,.3));pointer-events:none}
.jgp-situation>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.jgp-room-tv,.jgp-room-phone{position:absolute;z-index:2;display:grid;color:#fff;text-align:left}
.jgp-room-tv{align-content:center;min-height:34%;padding:18px 20px;border:7px solid #0c0a16;border-radius:15px;background:radial-gradient(circle at 85% 12%,rgba(117,76,224,.38),transparent 40%),linear-gradient(145deg,#252046,#0d0a24 70%);box-shadow:0 18px 34px rgba(6,4,18,.35),inset 0 0 0 1px rgba(255,255,255,.12)}.jgp-room-tv::after{content:"";position:absolute;right:9px;bottom:-5px;width:4px;height:4px;border-radius:50%;background:#67e2b1;box-shadow:0 0 8px rgba(103,226,177,.8)}
.jgp-room-tv small,.jgp-room-phone small{color:#f4d35e;font-size:clamp(.55rem,1vw,.72rem);font-weight:1000;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}.jgp-situation[data-tone="correct"] .jgp-room-tv small,.jgp-situation[data-tone="correct"] .jgp-room-phone small{color:#6ce1b3}.jgp-situation[data-tone="wrong"] .jgp-room-tv small,.jgp-situation[data-tone="wrong"] .jgp-room-phone small{color:#ff8da5}
.jgp-room-tv strong{margin-top:10px;font-size:clamp(1rem,2.25vw,1.8rem);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}.jgp-room-tv b{margin-top:11px;color:#fff4bd;font-size:clamp(.72rem,1.35vw,1rem);line-height:1.2}.jgp-situation[data-tone="correct"] .jgp-room-tv b{color:#8ff0c9}.jgp-situation[data-tone="wrong"] .jgp-room-tv b{color:#ffb3c2}
.jgp-room-phone{right:3.5%;bottom:5%;width:22%;min-height:18%;align-content:center;padding:14px 16px 14px 20px;border:5px solid #f7f2ec;border-radius:18px;background:#17132e;box-shadow:0 16px 32px rgba(9,6,25,.34)}.jgp-room-phone::before{content:"";position:absolute;top:8px;left:50%;width:24px;height:3px;border-radius:3px;background:#8d869d;transform:translateX(-50%)}.jgp-room-phone strong{margin-top:7px;font-size:clamp(.72rem,1.35vw,1rem);line-height:1.15;text-wrap:balance}
.jgp-situation[data-tone="question"] .jgp-room-tv{top:4.5%;left:2.5%;width:30%;min-height:40%;transform:perspective(700px) rotateY(2deg)}
.jgp-situation[data-tone="correct"] .jgp-room-tv{top:4%;left:3.5%;width:34%;min-height:31%}
.jgp-situation[data-tone="wrong"] .jgp-room-tv{top:5%;right:3.5%;width:40%;min-height:36%}
.how-live-layout figcaption.jgp-situation-disclosure{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 9px;margin-top:12px;color:#6a6377;font-size:.72rem;text-align:center}.jgp-situation-disclosure a{color:#5630b4;font-weight:900;text-underline-offset:3px}.jgp-situation-disclosure a+a::before{content:"·";margin-right:9px;color:#a29aac}.how-live-layout .jgp-situation-disclosure span{display:inline;padding:0;border-radius:0;background:transparent;color:inherit;box-shadow:none;font-weight:inherit}.jgp-situation-disclosure span:last-child::before{content:"·";margin-right:9px}
@media(max-width:520px){.how-live-layout figcaption.jgp-situation-disclosure{gap:4px 8px;font-size:.68rem}.jgp-situation-disclosure span:last-child{flex-basis:100%}.jgp-situation-disclosure span:last-child::before{content:none}}
@media(max-width:620px){.jgp-situation-tabs{gap:5px;margin-bottom:9px}.jgp-situation-tabs button{gap:5px;min-height:46px;padding:7px 5px;font-size:.67rem}.jgp-situation-tabs button span{width:21px;height:21px;border-radius:7px;font-size:.58rem}.jgp-situation{border-radius:17px}.jgp-situation>img{aspect-ratio:4/3}.jgp-situation[data-tone="question"]>img{object-position:48% center}.jgp-situation[data-tone="correct"]>img{object-position:center}.jgp-situation[data-tone="wrong"]>img{object-position:42% center}.jgp-room-tv{min-height:41%;padding:10px 11px;border-width:5px;border-radius:11px}.jgp-room-tv strong{margin-top:6px;font-size:clamp(.74rem,3.6vw,.92rem)}.jgp-room-tv b{margin-top:6px;font-size:clamp(.6rem,2.8vw,.72rem)}.jgp-room-tv small,.jgp-room-phone small{font-size:.48rem}.jgp-situation[data-tone="question"] .jgp-room-tv{top:4%;left:3%;width:43%;min-height:43%;transform:none}.jgp-situation[data-tone="correct"] .jgp-room-tv{top:4%;left:3%;width:40%;min-height:39%}.jgp-situation[data-tone="wrong"] .jgp-room-tv{top:4%;right:3%;width:46%;min-height:42%}.jgp-room-phone{right:3%;bottom:4%;width:34%;min-height:22%;padding:10px 9px 9px 13px;border-width:4px;border-radius:13px}.jgp-room-phone::before{top:5px;width:18px}.jgp-room-phone strong{margin-top:5px;font-size:clamp(.58rem,3vw,.72rem)}}
@media(max-width:360px){.jgp-room-phone{width:39%}}

/* Image-led catalog: a Steam-like merchandising rhythm translated into the
   warm JOKO world. Comfortable view is one wide editorial shelf; compact view
   remains the fast scanning grid selected by the visitor. */
.games-grid:not(.is-compact){grid-template-columns:1fr;gap:18px}
.games-grid:not(.is-compact) .game:not(.game--compact){
  --card-accent:var(--purple);
  --card-tint:#f6f1ff;
  min-height:0;
  border-color:color-mix(in srgb,var(--card-accent) 18%,#e8e1ef);
  border-radius:24px;
  background:linear-gradient(112deg,#fff 0 46%,var(--card-tint) 100%);
  box-shadow:0 16px 42px rgba(35,22,58,.09);
  transform:none;
}
.games-grid:not(.is-compact) .game[data-slug^="bluff-royale"]{--card-accent:#a87408;--card-tint:#fff6d8}
.games-grid:not(.is-compact) .game[data-slug^="emoji-detective"]{--card-accent:#147c92;--card-tint:#e8f9fb}
.games-grid:not(.is-compact) .game[data-slug^="echo-parade"]{--card-accent:#b95030;--card-tint:#fff0df}
.games-grid:not(.is-compact) .game[data-slug^="wire-panic"]{--card-accent:#8f4c10;--card-tint:#fff0d8}
.games-grid:not(.is-compact) .game[data-slug^="clue-chase"]{--card-accent:#875019;--card-tint:#fff4dd}
.games-grid:not(.is-compact) .game[data-slug^="shadow-maze"]{--card-accent:#5940aa;--card-tint:#f0edff}
.games-grid:not(.is-compact) .game[data-slug^="mind-meld"]{--card-accent:#28766e;--card-tint:#eaf9f5}
.games-grid:not(.is-compact) .game[data-slug^="buddy-match"]{--card-accent:#a84f3d;--card-tint:#fff0eb}
.games-grid:not(.is-compact) .game:not(.game--compact)::before{
  inset:0 auto 0 0;
  width:6px;
  height:auto;
  background:var(--card-accent);
}
.games-grid:not(.is-compact) .game:not(.game--compact):hover{
  border-color:color-mix(in srgb,var(--card-accent) 36%,#d9d0e4);
  box-shadow:0 22px 54px rgba(35,22,58,.14);
  transform:translateY(-3px);
}
.games-grid:not(.is-compact) .game-main-link{display:flex;min-height:0;flex-direction:column}
.games-grid:not(.is-compact) .game-art{
  min-height:0;
  aspect-ratio:3/2;
  padding:0;
  background:#17132e;
}
.games-grid:not(.is-compact) .game-art::before,
.games-grid:not(.is-compact) .game-art::after{display:none}
.games-grid:not(.is-compact) .game-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  border-radius:0;
  object-fit:cover;
  opacity:1;
}
.games-grid:not(.is-compact) .game-content{padding:20px 20px 18px}
.games-grid:not(.is-compact) .game h3{margin-bottom:8px;font-size:clamp(1.55rem,4.8vw,2rem);line-height:1.02}
.games-grid:not(.is-compact) .game-experience{max-width:62ch;margin-bottom:16px;font-size:.9rem;line-height:1.5}
.games-grid:not(.is-compact) .game-experience::before{display:none}
.games-grid:not(.is-compact) .game-facts{margin-top:0;gap:8px}
.games-grid:not(.is-compact) .game-facts>span{min-height:44px;background:rgba(255,255,255,.72)}
.games-grid:not(.is-compact) .game-fit-row{margin-top:10px}
.games-grid:not(.is-compact) .game-card-actions{margin:0;padding:0 18px 18px}
.games-grid:not(.is-compact) .game-card-actions .game-open{
  min-height:50px;
  border-radius:14px;
  background:var(--purple);
  box-shadow:0 9px 22px rgba(84,40,180,.2);
  font-size:.86rem;
}

@media(min-width:900px){
  .games-grid:not(.is-compact){gap:20px}
  .games-grid:not(.is-compact) .game:not(.game--compact){position:relative;min-height:338px}
  .games-grid:not(.is-compact) .game-main-link{
    display:grid;
    min-height:338px;
    grid-template-columns:minmax(360px,46%) minmax(0,54%);
    grid-template-rows:minmax(0,1fr) auto;
  }
  .games-grid:not(.is-compact) .game-art{grid-column:1;grid-row:1/3;height:100%;min-height:338px;aspect-ratio:auto;padding:0}
  .games-grid:not(.is-compact) .game-art img{inset:0;width:100%;height:100%;max-width:none;max-height:none}
  .games-grid:not(.is-compact) .game-content{grid-column:2;grid-row:1;min-height:0;padding:24px 28px 18px}
  .games-grid:not(.is-compact) .game h3{font-size:2rem}
  .games-grid:not(.is-compact) .game-experience{font-size:.96rem}
  .games-grid:not(.is-compact) .game-card-actions{
    position:static;
    z-index:auto;
    grid-column:2;
    grid-row:2;
    margin:0;
    padding:0 28px 23px;
  }
}

@media(max-width:899px) and (min-width:621px){
  .games-grid:not(.is-compact) .game-art{max-height:none;aspect-ratio:3/2}
}
@media(max-width:620px){
  .games-grid:not(.is-compact) .game-art{aspect-ratio:3/2}
}