#cp-game{--cp-cyan:#77e8f1;--cp-gold:#f2cb8b;position:relative;isolation:isolate;max-width:980px;margin:24px auto 30px;border:1px solid #354255;border-radius:22px;background:#101b2c;color:#edf2fa;overflow:hidden;box-shadow:0 20px 60px #05152644;text-align:left;font-family:inherit}#cp-game *{box-sizing:border-box}#cp-game [hidden]{display:none!important}#cp-game button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#cp-game button:disabled{opacity:.5;cursor:default}#cp-game button:focus-visible,#cp-stage:focus-visible{outline:3px solid #9af3ff;outline-offset:-3px}.cp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 20px;height:66px;border-bottom:1px solid #ffffff13;background:#162233}.cp-brand{display:flex;gap:10px;align-items:center;white-space:nowrap;font-size:13px;font-weight:900;letter-spacing:1.7px;line-height:1.3}.cp-brand>span{color:var(--cp-cyan);font-size:36px;line-height:1}.cp-brand small{display:block;font-size:10px;letter-spacing:1px;font-weight:500;color:#9aaec1;margin-top:3px}.cp-tools{display:flex;gap:5px}.cp-tools button{border:1px solid #475267;border-radius:9px;background:#203147;color:#dae4ec;height:34px;min-width:34px;padding:0 9px;font-size:10px;white-space:nowrap}.cp-tools button:nth-last-child(-n+2){font-size:18px}.cp-hud{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:14px 25px;gap:12px;background:linear-gradient(120deg,#1d3042,#152132)}.cp-hud small{display:block;font-size:9px;letter-spacing:2px;color:#9fb2c9;line-height:1.6}.cp-score strong{display:block;font-size:35px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-1px;color:#fff2d9}.cp-level{text-align:center}.cp-level small b{font-size:19px;color:var(--cp-cyan);letter-spacing:0}.cp-level>span{display:block;font-size:10px;color:#aabbd0;margin-top:5px}.cp-life{text-align:right}.cp-life>div{display:flex;justify-content:flex-end;gap:7px;padding:7px 0}.cp-life i{display:block;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff 0,#cfe3ef 20%,#506680 45%,#e3eef7 60%,#627184 80%,#1b2a3d);box-shadow:0 1px 5px #0008}.cp-life i.cp-empty{background:#324053;box-shadow:inset 0 1px 3px #0006}
.cp-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;min-height:0}.cp-play{min-width:0;display:flex;flex-direction:column;background:#06121f}.cp-stage{position:relative;height:630px;min-height:320px;outline:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:radial-gradient(ellipse at 50% 35%,#192e49,#061321 78%);cursor:pointer}.cp-stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none}.cp-topline{position:absolute;left:17px;right:17px;top:13px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;font-weight:700;color:#95adbc;pointer-events:none}.cp-toast{position:absolute;left:8%;width:84%;top:43%;text-align:center;color:#a5f8ff;font-weight:900;font-size:26px;line-height:1.3;text-shadow:0 2px 10px #071423,0 0 25px #071423;opacity:0;transform:translateY(5px);transition:opacity .13s,transform .13s;pointer-events:none}.cp-toast.cp-show{opacity:1;transform:translateY(0)}.cp-toast small{display:block;color:#f5e2b8;font-size:11px;font-weight:600;letter-spacing:.5px;margin-top:7px}.cp-launch-hint{position:absolute;bottom:40px;left:0;width:100%;text-align:center;pointer-events:none;color:#eddbad;font-size:12px;line-height:1.5;text-shadow:0 2px 6px #001020}.cp-launch-hint span{display:block;font-size:28px}
.cp-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#071322df;padding:28px;z-index:5;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;cursor:default}.cp-overlay.cp-is-intro{background:linear-gradient(0deg,#06101df5 0%,#091827c7 43%,#0c1a2744 100%),url('/img/jiraksil/crystalpin-cover.webp') 60% center/cover}.cp-panel{width:100%;max-width:400px;margin:auto;text-align:center}.cp-intro{text-align:left;align-self:flex-end;margin-bottom:14px}.cp-eyebrow{font-size:9px;letter-spacing:2px;font-weight:800;color:#efc785}.cp-panel h2{font-size:31px!important;color:#f2f5f5!important;font-weight:900!important;line-height:1.3!important;letter-spacing:-1.3px!important;margin:15px 0!important;word-break:keep-all}.cp-intro h2{font-size:44px!important;letter-spacing:-2.3px!important;line-height:1.2!important}.cp-intro h2 em{font-style:normal;color:#a4edfa}.cp-panel p{font-size:13px;line-height:1.8;color:#bbcadd;word-break:keep-all;margin:14px 0 22px}.cp-intro-tags{display:flex;gap:7px;margin:20px 0 22px}.cp-intro-tags span{font-size:10px;color:#e6d8be;padding:5px 10px;border:1px solid #b9aa8855;border-radius:20px;background:#18283780}.cp-primary{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(115deg,#aff6f5,#77c6f6);border:0;border-radius:12px;color:#123044;font-weight:900;font-size:15px;width:100%;min-height:53px;padding:16px 20px;box-shadow:0 7px 24px #61d8e929}.cp-primary:hover{filter:brightness(1.08)}.cp-primary span{font-size:23px;line-height:1}.cp-secondary{width:100%;margin-top:10px;border:1px solid #5a697f;border-radius:11px;background:#ffffff07;color:#d2e1ee;padding:12px;font-size:12px}.cp-note{display:block;font-size:9px;color:#9aafc3;line-height:1.6;margin-top:13px}.cp-countdown{text-align:center}.cp-countdown b{display:block;font-size:95px;font-weight:900;color:var(--cp-cyan);line-height:1.1}.cp-countdown span{display:block;font-size:12px;letter-spacing:1px;color:#c4d6e2;margin-top:13px}.cp-final{margin:4px 0;color:#9eebf7}.cp-final b{font-size:58px;font-weight:900;line-height:1.1;letter-spacing:-1.8px;font-variant-numeric:tabular-nums}.cp-final span{font-size:13px;margin-left:7px}.cp-result h2{font-size:23px!important;letter-spacing:-.6px!important;margin:10px 0!important}.cp-result p{font-size:12px;margin:12px 0 18px}.cp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:16px 0;margin:12px 0 21px;border-top:1px solid #425269;border-bottom:1px solid #425269}.cp-stats b{font-size:21px;line-height:1.3;color:#f5e3c1;display:block}.cp-stats span{display:block;font-size:9px;color:#aabbd2;margin-top:5px}
.cp-controls{display:grid;grid-template-columns:1fr 140px 1fr;gap:10px;padding:12px 16px;background:#17283d;border-top:1px solid #40506a55;flex-shrink:0}.cp-flip{display:flex;align-items:center;justify-content:center;gap:8px;min-height:47px;color:#c9eaf5;border:1px solid #516b86;border-radius:11px;background:linear-gradient(#304760,#1b2d46);box-shadow:0 3px 0 #091623;touch-action:none!important;user-select:none;-webkit-user-select:none}.cp-flip>span{font-size:25px;line-height:1}.cp-flip b{font-size:12px}.cp-flip small{font-size:9px;opacity:.65}.cp-flip.cp-down{background:linear-gradient(#477186,#26546d);box-shadow:0 0 18px #67d4ed44;transform:translateY(2px)}.cp-action{position:relative;overflow:hidden;border:1px solid #816f50;border-radius:11px;background:#2a3040;color:#cab894;font-size:10px;min-height:47px;padding:6px 8px}.cp-action span{display:block;font-size:9px;position:relative;z-index:1}.cp-action b{display:block;font-size:15px;line-height:1.4;position:relative;z-index:1}.cp-action>i{display:block;position:absolute;bottom:0;left:0;width:0;height:3px;background:#f5d58c;transition:width .1s}.cp-action.cp-ready{background:linear-gradient(115deg,#f0d79b,#d9b976);color:#2a2b32;box-shadow:0 0 20px #eecf9533;border-color:#ffe6b1}.cp-action:disabled{opacity:.8!important}
.cp-sidebar{padding:25px 22px;border-left:1px solid #ffffff0d;background:linear-gradient(155deg,#1b2a3d,#111c2f);display:flex;flex-direction:column;gap:26px}.cp-side-label{font-size:8px;letter-spacing:2px;color:#9bb4ca;display:flex;justify-content:space-between;align-items:center}.cp-side-label i{font-size:8px;color:#6bdcbb}.cp-mission>small{font-size:9px;letter-spacing:1.8px;color:#d5b884}.cp-mission h3{font-size:18px!important;line-height:1.5;color:#edf1f2!important;letter-spacing:-.6px;margin:8px 0 15px!important}.cp-target-lights{display:flex;gap:6px}.cp-target-lights i{display:grid;place-items:center;width:33px;height:34px;border:1px solid #5c626d;border-radius:8px;color:#8091a5;background:#293546;font-style:normal;font-size:11px;box-shadow:inset 0 1px 2px #0005}.cp-target-lights i.cp-lit{background:#f7d998;color:#433823;border-color:#ffeece;box-shadow:0 0 18px #edc17b45}.cp-sidebar p{font-size:11px;color:#95aec6;line-height:1.9;margin:12px 0 0;word-break:keep-all}.cp-sidebar p b{font-weight:700;color:#b8daea}.cp-meter>div:first-child{display:flex;justify-content:space-between;font-size:10px;color:#a9bad2}.cp-meter b{color:#81d4e4;font-size:10px}.cp-meter-track{height:4px;border-radius:6px;overflow:hidden;background:#43526b;margin-top:11px}.cp-meter-track i{display:block;height:100%;width:0;background:#85e5ec;transition:width .15s}.cp-side-stats{display:grid;gap:12px;padding:20px 0;border-top:1px solid #46556a;border-bottom:1px solid #46556a}.cp-side-stats div{display:flex;justify-content:space-between;font-size:10px;color:#9cafc7;gap:8px}.cp-side-stats b{font-size:14px;font-variant-numeric:tabular-nums;color:#ecdbc0;line-height:1.1}.cp-tip>span{font-size:10px;color:#bfdbeb;font-weight:800}.cp-tip p{font-size:11px;margin-top:7px}.cp-side-bottom{margin-top:auto;font-size:9px;color:#889fb9;display:flex;justify-content:space-between}.cp-side-bottom span{color:#e3c788}.cp-footer{display:flex;justify-content:space-between;gap:10px;padding:10px 20px;border-top:1px solid #344457;background:#142237;color:#8fa8c0;font-size:9px;line-height:1.5}.cp-footer b{font-weight:500;color:#bed0e0;margin-left:5px}
.cp-guide{max-width:980px;padding:24px!important;text-align:left!important;margin:22px auto!important;line-height:1.7}.cp-guide h3{font-size:1rem;line-height:1.5}.cp-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 25px;margin-top:21px}.cp-guide-grid b{font-size:13px}.cp-guide-grid p{font-size:.88rem;line-height:1.85;opacity:.78;margin:7px 0 0}.cp-guide-foot{font-size:11px!important;opacity:.68;margin:20px 0 0!important}#cp-ranking{max-width:980px;margin-left:auto;margin-right:auto}#cp-challenge{max-width:980px;margin:0 auto}#cp-challenge:empty{display:none}#cp-challenge .bk-toast{position:relative!important;inset:auto!important;max-width:none!important;width:100%;box-sizing:border-box;margin:0 0 20px;animation:none!important;z-index:auto!important;box-shadow:none!important;background:#142237!important}#cp-challenge .bk-t-btn{max-width:280px}
body.cp-noscroll{overflow:hidden!important}#cp-game.cp-full{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;z-index:2147483000!important;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;flex-direction:column}#cp-game:fullscreen{width:100%;height:100%;max-width:none;border:0;border-radius:0;margin:0;display:flex;flex-direction:column}#cp-game.cp-full .cp-body,#cp-game:fullscreen .cp-body{flex:1;min-height:0}#cp-game.cp-full .cp-stage,#cp-game:fullscreen .cp-stage{height:auto;min-height:0;flex:1}#cp-game.cp-full .cp-play,#cp-game:fullscreen .cp-play{min-height:0}#cp-game.cp-full .cp-toolbar,#cp-game.cp-full .cp-hud,#cp-game.cp-full .cp-footer{flex-shrink:0}
@media(max-width:760px){.cp-body{grid-template-columns:minmax(0,1fr)}.cp-sidebar{display:none}.cp-stage{height:600px;height:clamp(320px,calc(100svh - 224px),680px)}.cp-controls{grid-template-columns:1fr 115px 1fr}}
@media(max-width:480px){#cp-game{margin:16px auto 24px;border-radius:16px}.cp-toolbar{height:55px;padding:10px 11px;gap:4px}.cp-brand{font-size:9px;letter-spacing:1px;gap:5px}.cp-brand>span{font-size:26px}.cp-brand small{font-size:8px;letter-spacing:.5px}.cp-tools{gap:4px}.cp-tools button{height:30px;min-width:28px;font-size:8px;padding:0 6px}.cp-tools button:nth-last-child(-n+2){font-size:16px}.cp-hud{padding:10px 15px;gap:7px}.cp-score strong{font-size:29px}.cp-hud small{font-size:8px}.cp-level small b{font-size:16px}.cp-level>span{font-size:8px;line-height:1.4}.cp-life>div{gap:5px}.cp-life i{width:13px;height:13px}.cp-stage{height:clamp(320px,calc(100svh - 212px),660px)}.cp-controls{padding:10px;gap:7px;grid-template-columns:1fr 96px 1fr}.cp-flip{gap:5px;min-height:46px}.cp-flip b{font-size:11px}.cp-flip small{display:none}.cp-flip>span{font-size:24px}.cp-action{min-height:46px}.cp-topline{font-size:8px;top:10px;left:12px;right:12px}.cp-footer{padding:8px 12px;font-size:8px}.cp-footer>span:last-child{display:none}.cp-overlay{padding:24px 20px}.cp-intro h2{font-size:35px!important;letter-spacing:-1.8px!important}.cp-intro{margin-bottom:3px}.cp-eyebrow{font-size:8px;letter-spacing:1.5px}.cp-panel p{font-size:12px}.cp-intro-tags{margin:16px 0 20px;gap:5px}.cp-intro-tags span{font-size:9px;padding:5px 9px}.cp-primary{min-height:48px;padding:14px 17px;font-size:13px}.cp-note{font-size:8px;margin-top:10px}.cp-toast{font-size:22px}.cp-toast small{font-size:9px}.cp-result h2{font-size:21px!important}.cp-final b{font-size:49px}.cp-result p{font-size:10px;margin:10px 0 15px}.cp-stats{padding:13px 0;margin:10px 0 17px}.cp-stats b{font-size:19px}.cp-stats span{font-size:8px}.cp-guide{padding:20px!important}.cp-guide-grid{grid-template-columns:1fr}}
@media(max-height:650px) and (max-width:480px){.cp-overlay{padding:17px}.cp-intro h2{font-size:30px!important;margin:9px 0!important}.cp-intro p{margin:10px 0;font-size:11px;line-height:1.6}.cp-intro-tags{margin:12px 0}.cp-primary{min-height:44px;padding:11px 16px}.cp-result h2{margin:7px 0!important;font-size:19px!important}.cp-final b{font-size:39px}.cp-result p{margin:8px 0;font-size:9px}.cp-stats{padding:8px 0;margin:8px 0 12px}.cp-stats b{font-size:17px}.cp-secondary{padding:9px;font-size:11px;margin-top:8px}.cp-note{font-size:8px;margin-top:8px}}
@media(orientation:landscape) and (max-height:540px){.cp-toolbar{height:42px;padding:5px 15px}.cp-brand{font-size:10px}.cp-brand>span{font-size:25px}.cp-brand small{font-size:8px}.cp-hud{padding:6px 18px}.cp-hud small{font-size:8px}.cp-score strong{font-size:24px}.cp-level>span{display:none}.cp-level small b{font-size:16px}.cp-body{grid-template-columns:minmax(0,1fr) 205px}.cp-stage{height:380px;min-height:200px}.cp-sidebar{display:flex;padding:14px;gap:13px;overflow-y:auto}.cp-side-label,.cp-side-stats,.cp-tip,.cp-side-bottom{display:none}.cp-mission h3{font-size:14px!important;margin:5px 0 9px!important}.cp-sidebar p{font-size:9px;line-height:1.6;margin-top:8px}.cp-target-lights{gap:4px}.cp-target-lights i{width:29px;height:28px;font-size:9px}.cp-meter p{display:none}.cp-mission>small{font-size:8px}.cp-controls{padding:6px 12px;gap:8px;grid-template-columns:1fr 110px 1fr}.cp-flip,.cp-action{min-height:37px}.cp-flip>span{font-size:22px}.cp-flip small{display:none}.cp-action span{font-size:8px}.cp-action b{font-size:12px}.cp-footer{display:none}.cp-overlay{padding:12px 20px}.cp-intro{max-width:390px;margin:auto}.cp-intro h2{font-size:27px!important;line-height:1.15!important;margin:7px 0!important}.cp-intro h2 br{display:none}.cp-intro h2 em{margin-left:7px}.cp-intro p{font-size:10px;line-height:1.5;margin:7px 0}.cp-intro p br{display:none}.cp-intro-tags{margin:8px 0 10px}.cp-intro-tags span{font-size:8px;padding:3px 8px}.cp-eyebrow{font-size:7px}.cp-primary{padding:9px 15px;min-height:38px;font-size:12px}.cp-note{font-size:7px;margin-top:7px}.cp-panel h2{font-size:23px!important;margin:6px 0!important}.cp-panel p{font-size:11px;line-height:1.5;margin:7px 0 10px}.cp-secondary{padding:8px;font-size:10px;margin-top:7px}.cp-countdown b{font-size:58px}.cp-countdown span{font-size:10px}.cp-result{display:grid;grid-template-columns:1fr 1fr;column-gap:17px}.cp-result .cp-eyebrow{grid-column:1}.cp-result h2{font-size:17px!important;grid-column:1;margin:3px 0!important}.cp-result .cp-final{grid-column:1}.cp-result .cp-final b{font-size:34px}.cp-result p{grid-column:1;font-size:9px;line-height:1.4;margin:5px 0}.cp-result .cp-stats{grid-column:2;grid-row:1/4;margin:0;padding:8px 0;gap:3px}.cp-result .cp-stats b{font-size:15px}.cp-result .cp-stats span{font-size:7px}.cp-result .cp-primary{grid-column:2;grid-row:4;font-size:10px;min-height:32px;padding:7px 10px}.cp-result .cp-secondary{grid-column:2;grid-row:5;padding:6px;font-size:9px;margin:3px 0}.cp-result .cp-note{grid-column:1;grid-row:5;margin:5px 0}.cp-topline{font-size:7px;top:7px}.cp-toast{font-size:19px}}
@media(prefers-reduced-motion:reduce){#cp-game *{transition:none!important;animation:none!important}}