/* Fix: BeTheme applies transform/filter/perspective to body/html which breaks position:fixed. Neutralize ALL properties that create a new containing block while game overlay is active. */ html.jrq-game-overlay, html.jrq-game-overlay > body { transform: none !important; -webkit-transform: none !important; perspective: none !important; filter: none !important; -webkit-filter: none !important; will-change: auto !important; contain: none !important; } /* Game overlay is appended to to bypass all body-level transforms */ html > #jrq-game-wrapper-fixed { position: fixed !important; left: 0 !important; top: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } :root{--jrq-primary:#667eea;--jrq-secondary:#764ba2;--jrq-success:#4CAF50;--jrq-text:#1a1a2e;--jrq-bg:#f8f9fa;--jrq-card:#fff;--jrq-title:#1a1a2e;--jrq-question:#1a1a2e;--jrq-ans-bg:#f0f0f0;--jrq-ans-text:#1a1a2e;--jrq-ans-sel-bg:#667eea;--jrq-ans-sel-text:#fff;--jrq-btn-text:#fff;--jrq-r:12px;--jrq-fs:16px;--jrq-br:8px;--jrq-mw:700px} .jrq{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;max-width:var(--jrq-mw);margin:0 auto;padding:20px;font-size:var(--jrq-fs);color:var(--jrq-text);-webkit-tap-highlight-color:transparent;background:transparent !important} .jrq *{box-sizing:border-box} .jrq-s{background:var(--jrq-card);border-radius:var(--jrq-r);padding:40px 30px;text-align:center;box-shadow:none} .jrq-s h2,.jrq-s h3{margin:0 0 15px;color:var(--jrq-title)} .jrq-s p{color:#666;margin-bottom:20px;line-height:1.6} #jrq-intro{position:relative;overflow:hidden} .jrq-badge{position:absolute;top:20px;right:20px;color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase} .jrq-intro-icon{font-size:var(--jrq-intro-icon-size,60px);width:calc(var(--jrq-intro-icon-size,60px) + 30px);height:calc(var(--jrq-intro-icon-size,60px) + 30px);background:linear-gradient(135deg,var(--jrq-intro-icon-bg),var(--jrq-intro-icon-bg2));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;box-shadow:0 10px 30px rgba(0,0,0,.15)} .jrq-intro-title{font-size:var(--jrq-intro-title-size,28px);font-weight:700;margin-bottom:10px} .jrq-intro-subtitle{margin-bottom:15px;font-weight:500} .jrq-intro-text{font-size:var(--jrq-intro-text-size,16px)} .jrq-feat{display:flex;justify-content:center;gap:20px;margin-bottom:20px;flex-wrap:wrap} .jrq-feat span{font-size:14px;color:#666;background:var(--jrq-bg);padding:8px 14px;border-radius:20px} .jrq-feat i{margin-right:5px} .jrq-counter-box{background:var(--jrq-counter-bg);padding:var(--jrq-counter-padding);border-radius:var(--jrq-counter-radius);margin-bottom:25px;display:block;max-width:fit-content;margin-left:auto;margin-right:auto} .jrq-counter-num{font-family:var(--jrq-counter-font,'Righteous',cursive);font-size:var(--jrq-counter-num-size);color:var(--jrq-counter-num-color);line-height:1;margin-bottom:5px} .jrq-counter-text{font-size:var(--jrq-counter-text-size);color:var(--jrq-counter-color)} .jrq-intro-buttons{display:flex;flex-direction:column;gap:12px;align-items:center} #jrq-direct-games{margin-top:5px} .jrq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border:none;border-radius:var(--jrq-br);font-size:var(--jrq-fs);font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-decoration:none !important;transition:none !important} .jrq-btn,.jrq-btn:link,.jrq-btn:visited,.jrq-btn:hover,.jrq-btn:focus,.jrq-btn:active,.jrq-btn *,.jrq-btn:hover *,.jrq-btn:focus *{text-decoration:none !important;outline:none !important;box-shadow:none !important;transition:none !important;transform:none !important} .jrq-btn:hover,.jrq-btn:focus{color:inherit !important;background-color:inherit !important;background:inherit !important;transform:none !important;opacity:1 !important;border-color:inherit !important} .jrq-btn:hover i,.jrq-btn:focus i,.jrq-btn:hover span,.jrq-btn:focus span{color:inherit !important;transform:none !important;transition:none !important} .jrq-btn:active{transform:scale(.97) !important;opacity:.9 !important} .jrq-btn-p{background:linear-gradient(135deg,var(--jrq-primary),var(--jrq-secondary)) !important;color:var(--jrq-btn-text) !important} .jrq-btn-p:hover,.jrq-btn-p:focus{background:linear-gradient(135deg,var(--jrq-primary),var(--jrq-secondary)) !important;color:var(--jrq-btn-text) !important} .jrq-btn-p i,.jrq-btn-p:hover i{background:transparent !important;color:var(--jrq-btn-text) !important} .jrq-btn-s{background:var(--jrq-bg) !important;color:var(--jrq-text) !important;border:1px solid #ddd !important} .jrq-btn-s:hover,.jrq-btn-s:focus{background:var(--jrq-bg) !important;color:var(--jrq-text) !important} .jrq-btn-lg{padding:var(--jrq-intro-btn-padding-v,18px) var(--jrq-intro-btn-padding-h,36px);font-size:var(--jrq-intro-btn-size,18px)} .jrq-btn:disabled{opacity:.6 !important;cursor:not-allowed} .jrq-prog{margin-bottom:25px;text-align:left} .jrq-prog span{font-size:14px;color:#666} .jrq-prog-bar{height:8px;background:#e0e0e0;border-radius:4px;margin-top:8px;overflow:hidden} #jrq-prog-fill{height:100%;background:linear-gradient(90deg,var(--jrq-primary),var(--jrq-secondary));border-radius:4px;transition:width .3s} #jrq-q{text-align:left} #jrq-qtxt{font-size:20px;margin-bottom:20px;color:var(--jrq-question)} #jrq-ans{display:flex;flex-direction:column;gap:12px;margin-bottom:20px} .jrq-a{width:100%;text-align:left;padding:18px 20px;background:var(--jrq-ans-bg);color:var(--jrq-ans-text);border:2px solid transparent;border-radius:var(--jrq-br);font-size:var(--jrq-fs);cursor:pointer;touch-action:manipulation;transition:none !important} .jrq-a:hover,.jrq-a:focus{background:var(--jrq-ans-bg) !important;color:var(--jrq-ans-text) !important;transform:none !important;border-color:transparent !important;box-shadow:none !important} .jrq-a:active{transform:scale(.98) !important;border-color:var(--jrq-primary) !important} .jrq-a.sel{background:var(--jrq-ans-sel-bg) !important;color:var(--jrq-ans-sel-text) !important;border-color:var(--jrq-ans-sel-bg) !important} .jrq-a.sel:hover{background:var(--jrq-ans-sel-bg) !important;color:var(--jrq-ans-sel-text) !important} .jrq-spin{width:40px;height:40px;border:4px solid #e0e0e0;border-top-color:var(--jrq-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px} .jrq-spin-lg{width:60px;height:60px} @keyframes spin{to{transform:rotate(360deg)}} #jrq-res-list{display:flex;flex-direction:column;gap:15px;margin:25px 0;text-align:left} .jrq-r{background:var(--jrq-bg);border-radius:var(--jrq-r);padding:20px;border:3px solid;cursor:pointer;touch-action:manipulation;position:relative;transition:none !important} .jrq-r:hover,.jrq-r:focus{transform:none !important;box-shadow:none !important;background:var(--jrq-bg) !important} .jrq-r:active{transform:scale(.98) !important} .jrq-r-logo{position:absolute;top:15px;right:15px;width:50px;height:50px} .jrq-r-logo img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px} .jrq-r-title{font-size:18px;font-weight:700;margin:0 0 12px;padding-right:60px} .jrq-r-bar{height:28px;background:#e0e0e0;border-radius:14px;overflow:hidden;margin-bottom:8px} .jrq-r-bar-fill{height:100%;border-radius:14px;display:flex;align-items:center;justify-content:flex-end;padding-right:12px;transition:width 1s} .jrq-r-bar-fill span{font-size:13px;font-weight:700;color:#fff} .jrq-r-label{font-size:12px;font-weight:600} .jrq-r-cta{margin-top:12px;padding-top:12px;border-top:1px dashed #ddd;font-size:14px;font-weight:600;text-align:center} .jrq-r-cta i{margin-right:5px} .jrq-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;display:flex;align-items:center;justify-content:center} .jrq-modal-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6)} .jrq-modal-box{position:relative;background:#fff;border-radius:var(--jrq-r);padding:30px;max-width:400px;width:90%;max-height:90vh;overflow-y:auto;animation:modalIn .2s} @keyframes modalIn{from{opacity:0;transform:scale(.9)}} .jrq-modal-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:none;background:var(--jrq-bg);border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:none !important} .jrq-modal-x:hover,.jrq-modal-x:focus{background:var(--jrq-bg) !important;transform:none !important;box-shadow:none !important} .jrq-modal-x:active{background:#ddd !important} .jrq-modal-body,.jrq-modal-ok{text-align:center} #jrq-modal-job{font-weight:600;color:var(--jrq-primary);margin-bottom:20px} .jrq-fg{text-align:left;margin-bottom:15px} .jrq-fg label{display:block;font-size:13px;font-weight:600;margin-bottom:5px} .jrq-fg input{width:100%;padding:14px;border:2px solid #e0e0e0;border-radius:var(--jrq-br);font-size:16px} .jrq-fg input:focus{outline:none;border-color:var(--jrq-primary)} #jrq-m-msg{margin-top:15px;padding:10px;border-radius:6px;font-size:14px} .jrq-succ-icon{padding:20px;color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 8px 25px rgba(0,0,0,.15)} .jrq-succ-extra{background:var(--jrq-bg);padding:20px;border-radius:var(--jrq-r);margin:20px 0;text-align:left} .jrq-social{margin:25px 0} .jrq-social p{font-size:14px;margin-bottom:10px} .jrq-social-btns{display:flex;justify-content:center;gap:10px} .jrq-social-btn{width:44px;height:44px;border:none;border-radius:50%;font-size:18px;cursor:pointer;background:var(--jrq-bg);color:var(--jrq-text);display:flex;align-items:center;justify-content:center;transition:none !important} .jrq-social-btn:hover,.jrq-social-btn:focus{background:var(--jrq-bg) !important;color:var(--jrq-text) !important;transform:none !important;box-shadow:none !important} .jrq-social-btn:active{transform:scale(.95) !important;background:#ddd !important} .jrq-countdown{font-size:13px;color:#888;margin-top:15px} .jrq-confetti{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;overflow:hidden;z-index:999999} .jrq-confetti span{position:absolute;width:12px;height:12px;top:-20px;border-radius:2px;animation:confettiFall 3s ease-out forwards} @keyframes confettiFall{0%{top:-20px;transform:rotate(0deg);opacity:1}100%{top:110vh;transform:rotate(720deg);opacity:0}} /* GAME SELECTION */ #jrq-game{padding:30px} .jrq-game-header{text-align:center;margin-bottom:30px} .jrq-game-header h2{margin-bottom:10px;font-size:var(--jrq-game-header-size,24px);color:var(--jrq-game-header-color,#1a1a2e)} .jrq-game-header p{color:var(--jrq-game-text-color,#666)} #jrq-game-selection{margin-bottom:30px;text-align:center} .jrq-game-select-grid{display:inline-grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px;max-width:600px} .jrq-game-select-btn{background:var(--jrq-game-select-bg,#f8f9fa);border:3px solid transparent;border-radius:var(--jrq-game-select-radius,16px);padding:var(--jrq-game-select-padding,20px) 15px;cursor:pointer;touch-action:manipulation;text-align:center;transition:none !important} .jrq-game-select-btn:hover,.jrq-game-select-btn:focus{background:var(--jrq-game-select-bg,#f8f9fa) !important;transform:none !important;box-shadow:none !important;border-color:transparent !important} .jrq-game-select-btn:active{transform:scale(.97) !important} .jrq-game-select-btn.selected{border-color:var(--jrq-game-select-border,#667eea) !important;background:var(--jrq-game-select-active-bg,#eef1ff) !important} .jrq-game-select-btn.selected:hover{border-color:var(--jrq-game-select-border,#667eea) !important;background:var(--jrq-game-select-active-bg,#eef1ff) !important} .jrq-game-select-btn i{font-size:var(--jrq-game-select-icon-size,32px);display:block;margin-bottom:10px;background:linear-gradient(135deg,var(--jrq-game-select-icon1,#667eea),var(--jrq-game-select-icon2,#764ba2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .jrq-game-select-btn span{font-size:var(--jrq-game-select-text-size,14px);font-weight:600;color:var(--jrq-game-select-text,#1a1a2e)} #jrq-game-desc{min-height:40px;color:var(--jrq-game-text-color,#666);font-size:14px;margin-bottom:20px} #jrq-game-play-area{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center} #jrq-game-stats{display:flex;justify-content:center;gap:40px;margin-bottom:20px} .jrq-game-stat{text-align:center} .jrq-game-stat span{display:block;font-size:var(--jrq-game-score-size,36px);font-weight:700;font-family:var(--jrq-game-score-font,'Righteous',cursive);color:var(--jrq-game-score-color,#667eea)} .jrq-game-stat small{font-size:var(--jrq-game-score-label-size,12px);color:var(--jrq-game-score-label-color,#888);text-transform:uppercase} #jrq-game-area-content{margin:20px 0} /* REACTION GAME */ #jrq-reaction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--jrq-reaction-gap,max(10px,1.5vmin));max-width:min(90vw,70vh);margin:0 auto 20px} .jrq-reaction-cell{aspect-ratio:1;background:var(--jrq-reaction-cell-bg,#f0f0f0);border-radius:var(--jrq-reaction-radius,max(12px,1.5vmin));cursor:pointer;touch-action:manipulation} .jrq-reaction-cell.active{background:linear-gradient(135deg,var(--jrq-reaction-active1,#667eea),var(--jrq-reaction-active2,#764ba2));transform:scale(1.08);box-shadow:0 0 var(--jrq-reaction-glow,max(25px,3vmin)) rgba(102,126,234,.6);animation:pulse .3s ease} .jrq-reaction-cell.hit{background:var(--jrq-reaction-hit,#4CAF50);transform:scale(.9)} .jrq-reaction-cell:active{transform:scale(.85)} @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1.08)}} #jrq-reaction-stats{text-align:center;margin-top:15px} #jrq-reaction-stats .stat span{font-size:28px;font-weight:700;font-family:var(--jrq-game-score-font,'Righteous',cursive);color:var(--jrq-game-score-color,#667eea)} #jrq-reaction-stats .stat small{display:block;font-size:11px;color:#888;text-transform:uppercase} /* SNAKE GAME */ #jrq-snake-container{text-align:center} #jrq-snake-canvas{border-radius:var(--jrq-snake-radius,12px);box-shadow:0 4px 20px rgba(0,0,0,.1);max-width:100%;touch-action:none} .jrq-snake-hint{font-size:12px;color:#888;margin:10px 0 5px} #jrq-snake-controls{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:15px} .jrq-snake-lr{display:flex;gap:40px} .jrq-snake-btn{width:var(--jrq-snake-btn-size,50px);height:var(--jrq-snake-btn-size,50px);border:none;border-radius:var(--jrq-snake-btn-radius,12px);background:linear-gradient(135deg,var(--jrq-snake-btn1,#667eea),var(--jrq-snake-btn2,#764ba2));color:var(--jrq-snake-btn-icon,#fff);font-size:20px;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:center;transition:none !important} .jrq-snake-btn:hover,.jrq-snake-btn:focus{background:linear-gradient(135deg,var(--jrq-snake-btn1,#667eea),var(--jrq-snake-btn2,#764ba2)) !important;transform:none !important;box-shadow:none !important} .jrq-snake-btn:active{transform:scale(.9) !important;opacity:.8 !important} /* MEMORY GAME */ #jrq-memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--jrq-memory-gap,max(10px,1.5vmin));max-width:min(90vw,70vh);margin:0 auto} .jrq-memory-card{aspect-ratio:1;perspective:1000px;cursor:pointer;touch-action:manipulation} .jrq-memory-inner{position:relative;width:100%;height:100%;transition:transform var(--jrq-memory-flip,.5s);transform-style:preserve-3d} .jrq-memory-card.flipped .jrq-memory-inner{transform:rotateY(180deg)} .jrq-memory-front,.jrq-memory-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--jrq-memory-radius,max(12px,1.5vmin));display:flex;align-items:center;justify-content:center;font-size:max(24px,3vmin);font-weight:700} /* Back = Fragezeichen, sichtbar am Anfang */ .jrq-memory-back{background:linear-gradient(135deg,var(--jrq-memory-front1,#667eea),var(--jrq-memory-front2,#764ba2));color:var(--jrq-memory-front-text,#fff)} .jrq-memory-back i{font-size:var(--jrq-memory-icon-size,max(28px,4vmin))} /* Front = Symbol, versteckt am Anfang, sichtbar nach flip */ .jrq-memory-front{background:var(--jrq-memory-back,#f8f9fa);color:var(--jrq-memory-icon,#667eea);transform:rotateY(180deg)} .jrq-memory-front i{font-size:var(--jrq-memory-icon-size,max(28px,4vmin))} #jrq-memory-stats{text-align:center;margin-top:15px;font-size:14px;color:#666;width:fit-content;margin-left:auto;margin-right:auto} #jrq-memory-stats b{color:var(--jrq-game-score-color,#667eea);font-family:var(--jrq-game-score-font,'Righteous',cursive)} /* GAME RESULT */ #jrq-game-result{text-align:center} .jrq-game-final-score{margin-bottom:25px} .jrq-game-final-score i{font-size:var(--jrq-result-trophy-size,48px);color:var(--jrq-result-trophy,#FFD700);display:block;margin-bottom:var(--jrq-result-icon-margin,10px)} .jrq-game-final-score span{display:block;font-size:var(--jrq-result-score-size,64px);font-weight:700;font-family:var(--jrq-game-score-font,'Righteous',cursive);color:var(--jrq-result-score-color,#667eea);margin-bottom:var(--jrq-result-score-margin,5px)} .jrq-game-final-score small{font-size:16px;color:var(--jrq-result-label,#888)} .jrq-game-name-input{margin-bottom:20px} .jrq-game-name-input label{display:block;margin-bottom:12px;font-size:16px;color:var(--jrq-name-label-color,#666)} .jrq-game-input-row{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;max-width:600px;margin:0 auto} .jrq-game-input-row input{flex:1;min-width:200px;max-width:280px;padding:14px 18px;border:2px solid var(--jrq-name-input-border,#e0e0e0);border-radius:var(--jrq-br);font-size:16px;text-align:center;background:var(--jrq-name-input-bg,#fff);color:var(--jrq-name-input-text,#1a1a2e)} .jrq-game-input-row input:focus{outline:none;border-color:var(--jrq-primary)} .jrq-game-buttons{display:flex;gap:15px;justify-content:center;margin-top:20px} #jrq-game-highscores{margin-top:25px;text-align:left;max-width:320px;margin-left:auto;margin-right:auto} #jrq-game-highscores h3{font-size:var(--jrq-hs-title-size,18px);color:var(--jrq-hs-title-color,#1a1a2e);margin-bottom:15px;text-align:center} #jrq-game-hs-list{list-style:none;padding:0;margin:0} #jrq-game-hs-list li{display:flex;align-items:center;padding:var(--jrq-hs-padding,10px) 15px;background:var(--jrq-hs-row-bg,#f8f9fa);border-radius:var(--jrq-hs-radius,8px);margin-bottom:8px;font-size:14px;color:var(--jrq-hs-row-text,#1a1a2e)} #jrq-game-hs-list li.highlight{background:linear-gradient(135deg,var(--jrq-hs-highlight1,#667eea),var(--jrq-hs-highlight2,#764ba2));color:var(--jrq-hs-highlight-text,#fff)} #jrq-game-hs-list .hs-rank{width:30px;font-weight:700} #jrq-game-hs-list .hs-icon{width:25px;font-size:16px} #jrq-game-hs-list .hs-name{flex:1} #jrq-game-hs-list .hs-score{font-weight:700;font-family:var(--jrq-game-score-font,'Righteous',cursive)} /* APPLE LAYOUT */ .jrq-layout-apple .jrq-s{background:transparent;box-shadow:none;padding:60px 20px} .jrq-layout-apple .jrq-intro-icon{background:transparent;box-shadow:none;font-size:calc(var(--jrq-intro-icon-size) * 1.2);width:auto;height:auto} .jrq-layout-apple .jrq-intro-title{background:linear-gradient(135deg,var(--jrq-primary),var(--jrq-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent} .jrq-layout-apple .jrq-btn-p{border-radius:50px;box-shadow:0 4px 15px rgba(102,126,234,.4)} .jrq-layout-apple .jrq-a{text-align:center;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);border-radius:14px} .jrq-layout-apple .jrq-r{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-radius:16px} /* ═══════════════════════════════════════════════════════════════ KIOSK MODE STYLES ═══════════════════════════════════════════════════════════════ */ /* Branding & Controls */ .jrq-branding{position:absolute;top:15px;right:15px;display:flex;gap:10px;z-index:100} .jrq-kiosk-btn{width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--jrq-text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:none !important} .jrq-kiosk-btn:hover,.jrq-kiosk-btn:focus{background:rgba(255,255,255,.9) !important;transform:none !important} .jrq-kiosk-btn:active{transform:scale(.95) !important} .jrq{position:relative} /* Slide Animations */ .jrq-slide-out{animation:jrqSlideOut .15s ease-in forwards} .jrq-slide-in{animation:jrqSlideIn .3s ease-out forwards} @keyframes jrqSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-30px)}} @keyframes jrqSlideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}} /* Inactivity Warning Overlay */ .jrq-inactivity-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(5px)} .jrq-inactivity-box{background:#fff;padding:50px;border-radius:20px;text-align:center;max-width:400px;animation:jrqPulse 2s ease-in-out infinite} .jrq-inactivity-box h3{margin:0 0 10px;font-size:24px;color:var(--jrq-text)} .jrq-inactivity-box p{margin:0 0 25px;color:#666;font-size:18px} #jrq-inactivity-countdown{font-size:28px;font-weight:700;color:var(--jrq-primary)} @keyframes jrqPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}} /* Larger Touch Targets for Kiosk */ @media(min-width:1024px){ .jrq-a{padding:22px 25px;font-size:18px;min-height:70px} .jrq-btn{padding:18px 36px;font-size:18px;min-height:60px} .jrq-btn-lg{padding:22px 44px;font-size:20px} .jrq-r{padding:25px;min-height:120px} .jrq-r-title{font-size:20px} .jrq-r-cta{font-size:16px;padding:12px 0} .jrq-game-select-btn{padding:30px 20px} .jrq-game-select-btn i{font-size:48px} .jrq-reaction-cell{min-height:80px} .jrq-snake-btn{width:70px !important;height:70px !important;font-size:28px} .jrq-memory-card{min-height:80px} #jrq-qtxt{font-size:24px} .jrq-prog span{font-size:16px} } /* Progress Bar Enhancement */ .jrq-prog-bar{height:12px;border-radius:6px} #jrq-prog-fill{transition:width .4s ease-out} /* Mini Confetti for Results */ .jrq-mini-confetti{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1} .jrq-mini-confetti span{position:absolute;top:-10px;border-radius:50%;animation:jrqConfettiFall linear forwards} @keyframes jrqConfettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(400px) rotate(720deg);opacity:0}} /* Result Cards Enhancement */ #jrq-res{position:relative;overflow:hidden} .jrq-r{position:relative;z-index:2} /* ═══════════════════════════════════════════════════════════════ GLOBAL CONTROLS (outside card) ═══════════════════════════════════════════════════════════════ */ #jrq-global-controls{position:fixed;top:20px;right:20px;display:flex;gap:10px;z-index:9999} .jrq-global-btn{width:50px;height:50px;border:none;border-radius:50%;background:rgba(255,255,255,.95);color:#333;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,.15);transition:transform .2s} .jrq-global-btn:active{transform:scale(.9)} /* ═══════════════════════════════════════════════════════════════ BUBBLE POP GAME ═══════════════════════════════════════════════════════════════ */ #jrq-bubble-area{position:relative;width:100%;max-width:600px;height:400px;margin:10px auto;background:var(--jrq-bubble-bg,linear-gradient(180deg,#e3f2fd 0%,#bbdefb 100%));border-radius:var(--jrq-br,12px);overflow:hidden} .jrq-bubble{position:absolute;border-radius:50%;cursor:pointer;transition:transform .2s,opacity .2s;box-shadow:inset -5px -5px max(15px,2vmin) rgba(0,0,0,.1),0 max(5px,0.5vmin) max(15px,2vmin) rgba(0,0,0,.15)} .jrq-bubble:active{transform:scale(0.9)} .jrq-bubble.popped{pointer-events:none} /* ═══════════════════════════════════════════════════════════════ SCREENSAVER - Center Zoom Effect (no repeat) ═══════════════════════════════════════════════════════════════ */ #jrq-screensaver{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:999999;display:none;overflow:hidden} .jrq-ss-img{ position:absolute;top:50%;left:50%; width:100%;height:100%; transform:translate(-50%,-50%) scale(var(--ss-zoom-start,0.8)); background-size:cover;background-position:center;background-repeat:no-repeat; opacity:0;transition:opacity 1.5s ease-in-out } .jrq-ss-img.ss-active{opacity:1} /* Center Zoom Animation - scales from center, no repeat */ .jrq-ss-img.ss-zooming{ animation:jrqSSCenterZoom var(--ss-duration,5s) ease-out forwards } @keyframes jrqSSCenterZoom{ 0%{transform:translate(-50%,-50%) scale(var(--ss-zoom-start,0.8))} 100%{transform:translate(-50%,-50%) scale(var(--ss-zoom-end,1.2))} } .jrq-ss-hint{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);color:#fff;font-size:24px;font-weight:600;text-shadow:0 2px 15px rgba(0,0,0,.7);animation:jrqPulse 2s ease-in-out infinite} /* ═══════════════════════════════════════════════════════════════ QR CODE MODAL (Kiosk Mode) ═══════════════════════════════════════════════════════════════ */ .jrq-modal-qr{text-align:center;padding:20px} .jrq-modal-qr p{margin:0 0 20px;font-size:18px;color:#333} #jrq-qr-code{display:flex;justify-content:center;margin:20px 0} #jrq-qr-code img,#jrq-qr-code canvas{border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.1)} .jrq-qr-hint{font-size:14px !important;color:#888 !important} /* ═══════════════════════════════════════════════════════════════ DIRECT GAMES BUTTON ═══════════════════════════════════════════════════════════════ */ #jrq-direct-games{margin-top:15px} /* RESPONSIVE */ @media(max-width:600px){ .jrq-s{padding:30px 20px} #jrq-qtxt{font-size:18px} .jrq-game-select-grid{grid-template-columns:1fr;gap:10px} .jrq-game-select-btn{padding:15px;display:flex;align-items:center;gap:15px;text-align:left} .jrq-game-select-btn i{font-size:28px;margin-bottom:0} .jrq-game-final-score span{font-size:48px} #jrq-global-controls{top:10px;right:10px} .jrq-global-btn{width:40px;height:40px;font-size:16px} #jrq-catch-container{height:300px} #jrq-catch-area{height:250px} } /* ═══════════════════════════════════════════════════════════════ KIOSK MODE - Responsive for 55" 4K Portrait (2160×3840) 1vw ≈ 21.6px, 1vh ≈ 38.4px, 1vmin ≈ 21.6px at native res ═══════════════════════════════════════════════════════════════ */ /* Base Quiz Container */ .jrq-kiosk-mode .jrq{max-width:90vw;font-size:max(24px,2.2vmin);padding:max(20px,3vmin)} .jrq-kiosk-mode .jrq-s{padding:max(60px,5vmin) max(50px,4vmin);border-radius:max(30px,2.5vmin)} /* Intro Screen */ .jrq-kiosk-mode .jrq-intro-icon{width:max(150px,12vmin);height:max(150px,12vmin);font-size:max(80px,7vmin)} .jrq-kiosk-mode .jrq-intro-title{font-size:max(56px,5vmin);margin-bottom:max(20px,2vmin)} .jrq-kiosk-mode .jrq-intro-subtitle{font-size:max(28px,2.6vmin)} .jrq-kiosk-mode .jrq-intro-text{font-size:max(22px,2vmin)} .jrq-kiosk-mode .jrq-feat{gap:max(30px,2.5vmin);margin-bottom:max(40px,3.5vmin)} .jrq-kiosk-mode .jrq-feat span{font-size:max(20px,1.8vmin);padding:max(15px,1.2vmin) max(25px,2vmin)} .jrq-kiosk-mode .jrq-counter-box{padding:max(20px,2.5vmin);border-radius:max(12px,1.5vmin)} .jrq-kiosk-mode .jrq-counter-num{font-size:max(120px,10vmin)} .jrq-kiosk-mode .jrq-counter-text{font-size:max(20px,1.8vmin)} /* Buttons */ .jrq-kiosk-mode .jrq-btn{padding:max(25px,2.2vmin) max(50px,4.5vmin);font-size:max(24px,2.2vmin);border-radius:max(15px,1.2vmin);min-height:max(80px,6vmin)} .jrq-kiosk-mode .jrq-btn-lg{padding:max(30px,2.8vmin) max(60px,5.5vmin);font-size:max(28px,2.6vmin)} /* Questions */ .jrq-kiosk-mode #jrq-qtxt{font-size:max(36px,3.3vmin);line-height:1.4;margin-bottom:max(30px,2.8vmin)} .jrq-kiosk-mode .jrq-prog{margin-bottom:max(25px,2.5vmin)} .jrq-kiosk-mode .jrq-prog span{font-size:max(20px,1.8vmin)} .jrq-kiosk-mode .jrq-prog-bar{height:max(16px,1.2vmin);border-radius:max(8px,0.6vmin)} .jrq-kiosk-mode #jrq-ans{gap:max(20px,1.8vmin)} .jrq-kiosk-mode .jrq-a{padding:max(30px,2.8vmin) max(35px,3.2vmin);font-size:max(24px,2.2vmin);border-radius:max(15px,1.2vmin);min-height:max(90px,6.5vmin)} .jrq-kiosk-mode #jrq-back{font-size:max(18px,1.6vmin);margin-top:max(15px,1.5vmin)} /* Results */ .jrq-kiosk-mode #jrq-res h2{font-size:max(42px,3.8vmin)} .jrq-kiosk-mode #jrq-res>p{font-size:max(24px,2.2vmin)} .jrq-kiosk-mode .jrq-r{padding:max(35px,3vmin);border-radius:max(20px,1.8vmin);margin-bottom:max(25px,2vmin)} .jrq-kiosk-mode .jrq-r-title{font-size:max(28px,2.6vmin);padding-right:max(60px,6vmin)} .jrq-kiosk-mode .jrq-r p{font-size:max(20px,1.8vmin)} .jrq-kiosk-mode .jrq-r-bar{height:max(20px,1.6vmin);border-radius:max(10px,0.8vmin);margin:max(20px,1.8vmin) 0} .jrq-kiosk-mode .jrq-r-bar-fill span{font-size:max(13px,1.2vmin)} .jrq-kiosk-mode .jrq-r-cta{font-size:max(22px,2vmin);padding:max(18px,1.6vmin) 0} .jrq-kiosk-mode .jrq-r-label{font-size:max(16px,1.4vmin);padding:max(8px,0.7vmin) max(16px,1.4vmin)} .jrq-kiosk-mode .jrq-r-logo{width:max(50px,5vmin);height:max(50px,5vmin);top:max(15px,1.5vmin);right:max(15px,1.5vmin)} /* Kiosk Game Selection */ .jrq-kiosk-mode #jrq-game h2,.jrq-kiosk-mode .jrq-game-header h2{font-size:max(42px,3.8vmin)} .jrq-kiosk-mode #jrq-game>p,.jrq-kiosk-mode .jrq-game-header p{font-size:max(24px,2.2vmin)} .jrq-kiosk-mode .jrq-game-select-grid{gap:max(30px,2.5vmin);max-width:max(900px,80vw)} .jrq-kiosk-mode .jrq-game-select-btn{padding:max(40px,3.5vmin) max(30px,2.5vmin);border-radius:max(20px,1.8vmin)} .jrq-kiosk-mode .jrq-game-select-btn i{font-size:max(64px,5.5vmin)} .jrq-kiosk-mode .jrq-game-select-btn span{font-size:max(24px,2.2vmin)} .jrq-kiosk-mode #jrq-game-desc{font-size:max(22px,2vmin)} .jrq-kiosk-mode .jrq-game-stat span{font-size:max(64px,5.5vmin)} .jrq-kiosk-mode .jrq-game-stat small{font-size:max(18px,1.6vmin)} /* Kiosk Game Grids */ .jrq-kiosk-mode #jrq-reaction-grid{max-width:min(90vw,70vh) !important;gap:max(15px,1.5vmin)} .jrq-kiosk-mode .jrq-reaction-cell{min-height:max(120px,8vmin);border-radius:max(20px,1.8vmin)} .jrq-kiosk-mode #jrq-memory-grid{max-width:min(90vw,70vh) !important;gap:max(15px,1.5vmin)} .jrq-kiosk-mode .jrq-memory-card{min-height:max(120px,8vmin)} .jrq-kiosk-mode .jrq-memory-front,.jrq-kiosk-mode .jrq-memory-back{border-radius:max(20px,1.8vmin)} .jrq-kiosk-mode .jrq-memory-front i,.jrq-kiosk-mode .jrq-memory-back i{font-size:max(var(--jrq-memory-icon-size-kiosk,48px),5vmin)} .jrq-kiosk-mode #jrq-bubble-area{width:90vw !important;max-width:none !important;height:60vh !important;min-height:500px} .jrq-kiosk-mode .jrq-bubble{min-width:max(60px,5vmin);min-height:max(60px,5vmin)} /* Kiosk Game Results */ .jrq-kiosk-mode .jrq-game-final-score i{font-size:max(80px,7vmin)} .jrq-kiosk-mode .jrq-game-final-score span{font-size:max(100px,9vmin)} .jrq-kiosk-mode .jrq-game-final-score small{font-size:max(28px,2.6vmin)} .jrq-kiosk-mode .jrq-game-name-input label{font-size:max(22px,2vmin)} .jrq-kiosk-mode .jrq-game-name-input input{font-size:max(24px,2.2vmin);padding:max(18px,1.6vmin) max(25px,2.2vmin);border-radius:max(12px,1vmin)} .jrq-kiosk-mode #jrq-game-highscores{max-width:max(320px,35vmin)} .jrq-kiosk-mode #jrq-game-highscores h3{font-size:max(28px,2.6vmin)} .jrq-kiosk-mode #jrq-game-hs-list li{font-size:max(22px,2vmin);padding:max(15px,1.4vmin) max(20px,1.8vmin);border-radius:max(8px,0.8vmin);margin-bottom:max(8px,0.7vmin)} /* Kiosk Modal */ .jrq-kiosk-mode .jrq-modal-box{max-width:max(700px,60vmin);padding:max(50px,4.5vmin);border-radius:max(30px,2.5vmin)} .jrq-kiosk-mode .jrq-modal-box h3{font-size:max(28px,2.6vmin)} .jrq-kiosk-mode .jrq-modal-box p{font-size:max(18px,1.6vmin)} .jrq-kiosk-mode .jrq-modal-qr h3{font-size:max(32px,3vmin)} .jrq-kiosk-mode .jrq-modal-qr p{font-size:max(22px,2vmin)} .jrq-kiosk-mode .jrq-modal-qr img{width:max(280px,20vmin);height:max(280px,20vmin)} .jrq-kiosk-mode .jrq-fg label{font-size:max(16px,1.5vmin)} .jrq-kiosk-mode .jrq-fg input{font-size:max(18px,1.6vmin);padding:max(14px,1.3vmin)} .jrq-kiosk-mode .jrq-modal-x{width:max(36px,3.5vmin);height:max(36px,3.5vmin);font-size:max(18px,1.6vmin)} .jrq-kiosk-mode .jrq-global-btn{width:max(70px,5vmin);height:max(70px,5vmin);font-size:max(28px,2.5vmin)} /* Kiosk Screensaver */ .jrq-kiosk-mode .jrq-ss-hint{font-size:max(36px,3vmin);bottom:max(80px,6vmin)} /* Kiosk Inactivity */ .jrq-kiosk-mode .jrq-inactivity-box{padding:max(50px,4.5vmin);border-radius:max(20px,1.8vmin)} .jrq-kiosk-mode .jrq-inactivity-box h3{font-size:max(24px,2.8vmin)} .jrq-kiosk-mode .jrq-inactivity-box p{font-size:max(18px,2vmin)} .jrq-kiosk-mode #jrq-inactivity-countdown{font-size:max(28px,3vmin)} /* Kiosk Loading/Calculating */ .jrq-kiosk-mode .jrq-spin{width:max(40px,4vmin);height:max(40px,4vmin);border-width:max(4px,0.4vmin)} .jrq-kiosk-mode .jrq-spin-lg{width:max(60px,6vmin);height:max(60px,6vmin)} .jrq-kiosk-mode #jrq-calc h3,.jrq-kiosk-mode #jrq-load p{font-size:max(20px,2.2vmin)} /* ═══════════════════════════════════════════════════════════════ GAME FULLSCREEN MODE - Perfect centering on all devices ═══════════════════════════════════════════════════════════════ */ /* Reset ALL parent containers in fullscreen mode */ .jrq-game-fullscreen, .jrq-game-fullscreen #jrq, .jrq-game-fullscreen .jrq{ position:static !important;width:auto !important;max-width:none !important; margin:0 !important;padding:0 !important } .jrq-game-fullscreen #jrq-game{ position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important; width:100vw !important;height:100vh !important;z-index:99998 !important; display:flex !important;align-items:center !important;justify-content:center !important; background:rgba(248,249,250,.98) !important;padding:0 !important;margin:0 !important; box-sizing:border-box !important;overflow:hidden !important } .jrq-game-fullscreen #jrq-game .jrq-s{ width:100% !important;height:100% !important;max-width:none !important;max-height:none !important; box-shadow:none !important;background:transparent !important;padding:0 !important;margin:0 !important; display:flex !important;align-items:center !important;justify-content:center !important } .jrq-game-fullscreen #jrq-game-play-area{ width:100% !important;padding:20px !important;box-sizing:border-box !important } /* Unified Stats Bar - NEVER WRAP */ .jrq-game-fullscreen #jrq-game-stats{display:none} .jrq-game-stats-inline{ display:flex;flex-direction:row;flex-wrap:nowrap; gap:25px;background:rgba(255,255,255,.95);padding:12px 25px; border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.1); margin-bottom:25px;white-space:nowrap; position:relative;width:fit-content;margin-left:auto;margin-right:auto } .jrq-game-stats-inline .jrq-game-stat{ text-align:center;flex-shrink:0;min-width:65px } .jrq-game-stats-inline .jrq-game-stat span{ font-size:var(--jrq-game-score-size,28px);font-weight:700;line-height:1.1; font-family:var(--jrq-game-score-font,'Righteous',cursive); color:var(--jrq-game-score-color,#667eea);display:block } .jrq-game-stats-inline .jrq-game-stat small{ font-size:var(--jrq-game-score-label-size,9px);color:var(--jrq-game-score-label-color,#888);text-transform:uppercase; display:block;white-space:nowrap;letter-spacing:0.3px } /* Game Content Container */ .jrq-game-fullscreen #jrq-game-area-content{ width:100% !important;padding:20px !important;box-sizing:border-box !important } /* ══════════════════════════════════════════════════════════════ REACTION GAME - Centered via flexbox parent + margin:auto ══════════════════════════════════════════════════════════════ */ .jrq-reaction-wrapper{ width:100% !important;padding:20px !important;box-sizing:border-box !important } .jrq-game-fullscreen #jrq-reaction-grid{ max-width:min(90vw,70vh) !important;width:min(90vw,70vh) !important } .jrq-game-fullscreen .jrq-reaction-cell{min-height:18vmin} /* ══════════════════════════════════════════════════════════════ MEMORY GAME - Centered via flexbox parent + margin:auto ══════════════════════════════════════════════════════════════ */ .jrq-memory-wrapper{ width:100% !important;padding:20px !important;box-sizing:border-box !important } .jrq-game-fullscreen #jrq-memory-grid{ max-width:min(90vw,70vh) !important;width:min(90vw,70vh) !important } .jrq-game-fullscreen .jrq-memory-card{min-height:18vmin} .jrq-game-fullscreen #jrq-memory-stats{ margin-top:max(20px,2.5vmin);font-size:max(16px,2vmin); background:rgba(255,255,255,.9);padding:max(10px,1.5vmin) max(25px,3vmin); border-radius:max(12px,1.5vmin);box-shadow:0 4px 15px rgba(0,0,0,.08) } .jrq-game-fullscreen #jrq-memory-stats b{font-size:max(22px,3vmin)} /* ══════════════════════════════════════════════════════════════ BUBBLE POP - True fullscreen with background ══════════════════════════════════════════════════════════════ */ .jrq-bubble-fullscreen #jrq-game{ background:linear-gradient(180deg,#e3f2fd 0%,#bbdefb 100%) !important } .jrq-bubble-fullscreen #jrq-game-play-area{padding:0} .jrq-bubble-wrapper{ position:relative;width:100%;height:100% } .jrq-bubble-fullscreen .jrq-game-stats-inline{ position:absolute;top:25px;left:50%;transform:translateX(-50%); z-index:100;background:rgba(255,255,255,.95); padding:12px 30px;border-radius:16px;margin-bottom:0; box-shadow:0 4px 25px rgba(0,0,0,.12) } .jrq-bubble-fullscreen #jrq-bubble-area{ position:absolute;top:0;left:0;width:100% !important;height:100% !important; max-width:none !important;max-height:none !important; border-radius:0;margin:0;background:transparent !important } /* ══════════════════════════════════════════════════════════════ MOBILE OPTIMIZATIONS - Stats never break ══════════════════════════════════════════════════════════════ */ @media(max-width:400px){ .jrq-game-stats-inline{ gap:20px;padding:10px 20px } .jrq-game-stats-inline .jrq-game-stat{min-width:60px} .jrq-game-stats-inline .jrq-game-stat span{font-size:28px} .jrq-game-stats-inline .jrq-game-stat small{font-size:9px} .jrq-game-fullscreen #jrq-reaction-grid, .jrq-game-fullscreen #jrq-memory-grid{ max-width:92vw;width:92vw } } /* ═══════════════════════════════════════════════════════════════ GAME QR CODE ENTRY (Kiosk Mode) ═══════════════════════════════════════════════════════════════ */ .jrq-game-qr-box{text-align:center;padding:20px;background:#f8f9fa;border-radius:15px;margin:20px 0} .jrq-game-qr-box h4{font-size:20px;color:#333;margin:0 0 15px} .jrq-game-qr-box h4 i{margin-right:10px;color:var(--jrq-primary)} .jrq-game-qr-box img{display:block;margin:0 auto 15px;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,.1)} .jrq-game-qr-box p{font-size:14px;color:#666;margin:0} #jrq-game-qr-area{display:none} /* ═══════════════════════════════════════════════════════════════ PHONE ENTRY OVERLAY (for QR scanned users) ═══════════════════════════════════════════════════════════════ */ .jrq-phone-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);z-index:999999;display:flex;align-items:center;justify-content:center;padding:15px;box-sizing:border-box} .jrq-phone-box{background:#fff;border-radius:20px;padding:30px 25px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto} .jrq-phone-icon{font-size:50px;color:#FFD700;margin-bottom:15px} .jrq-phone-icon i{display:block} .jrq-phone-box h2{font-size:22px;margin:0 0 8px;color:#333} .jrq-phone-score{font-size:16px;color:#666;margin:0 0 20px} .jrq-phone-score strong{color:var(--jrq-primary,#667eea);font-size:20px} .jrq-phone-form{display:flex;flex-direction:column;gap:12px} .jrq-phone-form input{padding:14px 18px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box} .jrq-phone-form input:focus{border-color:#667eea} .jrq-phone-form .jrq-btn{width:100%;justify-content:center} .jrq-phone-hint{font-size:11px;color:#999;margin-top:12px;line-height:1.4} /* ═══════════════════════════════════════════════════════════════ INACTIVITY WARNING ═══════════════════════════════════════════════════════════════ */ .jrq-inactivity-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);z-index:999998;display:none;align-items:center;justify-content:center} .jrq-inactivity-box{background:#fff;border-radius:20px;padding:40px;text-align:center;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.4)} .jrq-inactivity-box h3{font-size:24px;margin:0 0 10px} .jrq-inactivity-box p{font-size:16px;color:#666;margin:0 0 20px} #jrq-inactivity-countdown{font-size:24px;font-weight:700;color:#e74c3c}