.pattern-puzzle-game{max-width:1050px;margin:24px auto;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#172033}.pattern-puzzle-game *{box-sizing:border-box}.pattern-puzzle-game .ykgs-game-panel{position:relative;overflow:hidden;padding:0!important;border:1px solid rgb(86 68 180 / .14);border-radius:32px!important;background:radial-gradient(circle at 0 0,rgb(118 87 232 / .18),transparent 27%),radial-gradient(circle at 100% 5%,rgb(45 142 245 / .15),transparent 28%),linear-gradient(145deg,#fff,#f8f7ff 52%,#f1f7ff);box-shadow:0 28px 80px rgb(39 33 91 / .16)!important}.pattern-puzzle-game .ykgs-game-panel:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#7354e8,#3d82ef,#1eb276,#f4b33c)}.pp-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:25px 30px 18px}.pp-title-wrap{display:flex;align-items:center;gap:15px}.pp-logo{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#eeeaff,#e7f2ff);font-size:29px;box-shadow:0 9px 24px rgb(71 59 145 / .11)}.pp-kicker{font-size:10px;letter-spacing:.18em;font-weight:1000;color:#7056ce;margin-bottom:6px}.pp-header h2{margin:0!important;font-size:clamp(28px,4vw,38px)!important;line-height:1!important;letter-spacing:-.045em!important;color:#15203a!important}.pp-header p{margin:7px 0 0!important;color:#64748b!important;font-size:14px!important;font-weight:700!important}.pp-header-actions{display:flex;gap:8px}.pp-icon-btn{width:43px;height:43px;border:1px solid #dfe5f0!important;border-radius:13px!important;background:rgb(255 255 255 / .88)!important;color:#263248!important;cursor:pointer;font-size:17px!important;box-shadow:0 7px 18px rgb(31 41 55 / .06)!important}.pp-icon-btn:hover{transform:translateY(-2px)}.pp-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;padding:0 30px 16px}.pp-stats>div{min-height:66px;padding:9px 8px;display:flex;flex-direction:column;justify-content:center;text-align:center;border:1px solid rgb(100 116 139 / .13);border-radius:15px;background:rgb(255 255 255 / .78);box-shadow:0 5px 15px rgb(31 41 55 / .045)}.pp-stats span{font-size:9px;letter-spacing:.12em;color:#7b879a;font-weight:1000}.pp-stats strong{margin-top:3px;font-size:17px;color:#182237}.pp-stats>div:nth-child(4){background:#fff9e9}.pp-progress-wrap{padding:0 30px 11px}.pp-progress-label{display:flex;justify-content:space-between;margin-bottom:5px;color:#718096;font-size:10px;font-weight:1000;letter-spacing:.09em}.pp-progress{height:9px;border-radius:999px;background:#e6eaf2;overflow:hidden}.pp-progress span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#7657e8,#3d82ef,#20b273);transition:width .2s linear}.pp-instruction{margin:5px 30px 13px!important;min-height:44px;display:grid;place-items:center;padding:9px 15px;border:1px solid rgb(118 87 232 / .11);border-radius:14px;background:rgb(255 255 255 / .72);color:#403967;font-size:15px!important;font-weight:900!important;text-align:center}.pp-stage{position:relative;min-height:410px;margin:0 18px;padding:36px 25px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid rgb(118 87 232 / .14);border-radius:25px;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgb(255 255 255 / .99),rgb(247 246 255 / .82) 58%,rgb(237 246 255 / .82));box-shadow:inset 0 1px 0 #fff}.pp-stage:before,.pp-stage:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.pp-stage:before{width:250px;height:250px;top:-150px;left:-110px;background:radial-gradient(circle,rgb(118 87 232 / .16),transparent 68%)}.pp-stage:after{width:250px;height:250px;right:-130px;bottom:-150px;background:radial-gradient(circle,rgb(59 130 246 / .15),transparent 68%)}.pp-pattern{position:relative;z-index:1;width:100%;min-height:110px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px 10px;border-radius:22px;color:#15203a;font-size:clamp(26px,5vw,48px);font-weight:1000;letter-spacing:.07em;word-break:break-word;text-shadow:0 2px 0 rgb(255 255 255 / .7)}.pp-hint{position:relative;z-index:2;min-height:10px;margin:0 0 16px;color:#68758a;font-size:12px;font-weight:800;text-align:center}.pp-options{position:relative;z-index:2;width:min(760px,100%);display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.pp-option{position:relative;display:flex;align-items:center;min-height:67px;padding:11px 18px 11px 57px!important;border:2px solid #dfe5ef!important;border-radius:18px!important;background:#fff!important;color:#172033!important;font-size:20px!important;font-weight:1000!important;cursor:pointer;box-shadow:0 9px 22px rgb(31 41 55 / .065)!important;transition:.16s ease!important}.pp-option:hover{transform:translateY(-3px);border-color:#b7a9ef!important;box-shadow:0 14px 27px rgb(74 61 144 / .12)!important}.pp-option:focus-visible{outline:3px solid rgb(118 87 232 / .27)!important;outline-offset:3px}.pp-option:disabled{cursor:default;opacity:.97}.pp-option-key{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#f0edff;color:#654bc7;font-size:12px;font-weight:1000}.pp-option-value{width:100%;text-align:center}.pp-option.correct{background:#eafaf1!important;border-color:#37b778!important;color:#08663d!important}.pp-option.correct .pp-option-key{background:#d1f5e0;color:#087443}.pp-option.wrong{background:#fff0f1!important;border-color:#ed6b76!important;color:#a61d2b!important;animation:pp-shake .25s ease}.pp-option.reveal{background:#eafaf1!important;border-color:#37b778!important;color:#08663d!important}.pp-feedback{position:relative;z-index:2;min-height:50px;padding:12px 10px 0;text-align:center;color:#5e6a7d;font-size:14px;font-weight:800}.pp-pause-card{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgb(247 248 255 / .95);backdrop-filter:blur(8px)}.pp-pause-icon{font-size:44px}.pp-pause-card h3{margin:7px 0 3px;color:#172033;font-size:26px}.pp-pause-card p{margin:0 0 18px;color:#718096;font-weight:700}.pp-primary-btn,.pp-secondary-btn{border:0!important;border-radius:14px!important;padding:12px 21px!important;font-weight:1000!important;cursor:pointer}.pp-primary-btn{background:linear-gradient(135deg,#7657e8,#4d78e9)!important;color:#fff!important;box-shadow:0 10px 24px rgb(91 73 190 / .23)!important}.pp-secondary-btn{background:#172033!important;color:#fff!important}.pp-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 30px 21px}.pp-tip{color:#68758a;font-size:12px;font-weight:700;line-height:1.4}.pp-tip:first-letter{font-size:15px}.pp-secondary-btn:hover,.pp-primary-btn:hover{transform:translateY(-2px)}@keyframes pp-shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}@media(max-width:800px){.pp-stats{grid-template-columns:repeat(3,1fr)}.pp-bottom{flex-direction:column;text-align:center}}@media(max-width:560px){.pp-header{padding:21px 16px 15px}.pp-logo{width:47px;height:47px;font-size:24px}.pp-kicker{font-size:8px}.pp-header h2{font-size:27px!important}.pp-header p{font-size:12px!important}.pp-stats{grid-template-columns:repeat(2,1fr);padding-inline:15px}.pp-progress-wrap{padding-inline:15px}.pp-instruction{margin-inline:15px!important}.pp-stage{margin-inline:8px;padding:27px 13px;min-height:370px;border-radius:21px}.pp-pattern{font-size:clamp(23px,8vw,36px);letter-spacing:.035em}.pp-options{grid-template-columns:1fr}.pp-option{min-height:61px}.pp-bottom{padding-inline:15px}}@media(prefers-reduced-motion:reduce){.pp-option,.pp-progress span{transition:none!important}.pp-option.wrong{animation:none}}