/* Gamer Store: scratch cards. Sizes use --u (about 10px on desktop) so a whole card scales with the screen. */
@font-face{font-family:'Russo One';src:url(../fonts/russo-one.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Saira Stencil One';src:url(../fonts/saira-stencil-one.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Teko';font-weight:700;src:url(../fonts/teko-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Rubik Glitch';src:url(../fonts/rubik-glitch.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Chakra Petch';font-weight:700;src:url(../fonts/chakra-petch-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Anton';src:url(../fonts/anton.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Orbitron';font-weight:900;src:url(../fonts/orbitron-900.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Audiowide';src:url(../fonts/audiowide.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Black Ops One';src:url(../fonts/black-ops-one.woff2) format('woff2');font-display:swap}

.gsx-scratch{--u:min(10px,calc((100vw - 36px)/44));--hatch:repeating-linear-gradient(135deg,#aeb8b4 0 3px,#c3ccc8 3px 6px);display:flex;flex-direction:column;gap:22px}
.gsx-sprite{position:absolute;width:0;height:0;overflow:hidden}
.gsx-sc-title{margin:0;font-size:26px;font-weight:800}
.gsx-sc-cards{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:calc(var(--u)*4.4)}
.gsx-sc-card{display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u)*1.2);cursor:pointer;max-width:100%}

/* ---------- the card ---------- */
.gsx-sc-face{position:relative;box-sizing:border-box;max-width:100%;display:flex;flex-direction:column;align-items:center;background:#0b100e;border:2px solid #2ee66b;border-radius:0;box-shadow:0 0 0 1px #000,0 0 28px rgba(46,230,107,.35),0 18px 36px rgba(0,0,0,.7);overflow:hidden;color:#fff;font-family:'Russo One',Impact,sans-serif;text-transform:uppercase;text-align:center;line-height:1.2;letter-spacing:0}
.gsx-sc-face--coins{width:calc(var(--u)*25);min-height:calc(var(--u)*49)}
.gsx-sc-face--grid{width:calc(var(--u)*29)}
.gsx-sc-face--lucky{width:calc(var(--u)*44);min-height:calc(var(--u)*35.8)}
.gsx-sc-face *{box-sizing:border-box}
.gsx-ic{display:block;width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);color:#2ee66b}

.gsx-sc-hd{position:relative;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#030504,#0f1a14);padding:calc(var(--u)*.8) calc(var(--u)*.8) calc(var(--u)*1.8);z-index:2;clip-path:polygon(0 0,100% 0,100% 88%,92% 100%,84% 90%,75% 100%,66% 91%,57% 100%,47% 90%,38% 100%,28% 91%,19% 100%,9% 90%,0 98%)}
.gsx-sc-face--coins .gsx-sc-hd{min-height:0;background-color:#050a08;background-image:repeating-conic-gradient(from 0deg at 50% 62%,rgba(46,230,107,.55) 0 7deg,rgba(5,10,8,.2) 7deg 15deg)}
.gsx-sc-face--lucky .gsx-sc-hd{min-height:0;justify-content:space-between;gap:calc(var(--u)*1);padding-left:calc(var(--u)*1.2);padding-right:calc(var(--u)*1.4);background-color:#050a08;background-size:140px 90px,auto;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%2290%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232ee66b%22%20stroke-opacity%3D%22.5%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M0%2020h40l12%2012h50l10-10h28M0%2062h30l10-10h40l12%2012h58M70%200v32M100%2090V64%22/%3E%3C/g%3E%3Cg%20fill%3D%22%232ee66b%22%20fill-opacity%3D%22.8%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2220%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22102%22%20cy%3D%2232%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2252%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2232%22%20r%3D%224%22/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#041009,#0c3a20)}
.gsx-sc-face--grid .gsx-sc-hd{min-height:0;padding-top:calc(var(--u)*.6);padding-bottom:calc(var(--u)*1.6)}
.gsx-sc-hd .sl{position:absolute;top:-20%;height:150%;transform:skewX(-24deg);background:linear-gradient(180deg,#2ee66b,#0b7a32)}
.gsx-sc-hd .s1{left:-10%;width:38%}.gsx-sc-hd .s2{left:32%;width:4%;background:#2ee66b}.gsx-sc-hd .s3{left:40%;width:1.5%;background:#fff;opacity:.8}
.gsx-sc-hd .cl{position:absolute;top:-20%;height:150%;width:.5%;transform:skewX(-24deg);background:#fff}
.gsx-sc-hd .c1{left:66%;opacity:.8}.gsx-sc-hd .c2{left:72%;opacity:.5}.gsx-sc-hd .c3{left:78%;opacity:.3}
.gsx-sc-hd .spk{position:absolute;right:0;top:0;width:calc(var(--u)*6);height:calc(var(--u)*6);background:#2ee66b;clip-path:polygon(100% 0,0 0,100% 100%);opacity:.9}
.gsx-sc-tt{position:relative;display:flex;justify-content:center;flex:1;min-width:0}
.gsx-sc-face--lucky .gsx-sc-tt{justify-content:flex-start;flex:1;min-width:0}
.gsx-sc-face--lucky .gsx-sc-ttsvg{max-width:none}
.gsx-sc-ttsvg{display:block;max-width:100%;height:auto;flex:none;overflow:visible;filter:drop-shadow(0 0 calc(var(--u)*1) rgba(46,230,107,.5))}
.gsx-sc-ttsvg text{stroke-linejoin:miter;stroke-miterlimit:8;paint-order:stroke}
.gsx-sc-ttsvg .tt-k{fill:#000;stroke:#000}
.gsx-sc-ttsvg .tt-g{fill:#0b7a32;stroke:#0b7a32}
.gsx-sc-ttsvg .tt-w{fill:#fff;stroke:#000}
.gsx-sc-ttsvg .tt-s{fill:#2ee66b;stroke:#000}
.gsx-sc-ttsvg .tt-rule{fill:#2ee66b}
.gsx-sc-badge{flex:none;width:calc(var(--u)*14.5);position:relative;z-index:1;filter:drop-shadow(0 0 calc(var(--u)*.8) rgba(46,230,107,.6))}
.gsx-sc-badgesvg{display:block;width:100%;height:auto}
.gsx-sc-badgesvg text{font-family:'Saira Stencil One',Impact,sans-serif}

/* prize blocks */
.gsx-sc-w1{position:relative;z-index:3;margin:calc(var(--u)*-.2) 0 calc(var(--u)*1.2);display:flex;align-items:stretch;filter:drop-shadow(0 0 calc(var(--u)*.8) rgba(46,230,107,.6))}
.gsx-sc-w1 .a{background:#fff;color:#050807;font-size:calc(var(--u)*1.1);letter-spacing:.14em;padding:calc(var(--u)*.6) calc(var(--u)*.8) calc(var(--u)*.6) calc(var(--u)*1.2);display:flex;align-items:center}
.gsx-sc-w1 .b{background:#2ee66b;color:#050807;font-family:'Saira Stencil One',Impact,sans-serif;font-size:calc(var(--u)*2.2);letter-spacing:.04em;padding:calc(var(--u)*.2) calc(var(--u)*2.6) calc(var(--u)*.2) calc(var(--u)*1.2);clip-path:polygon(0 0,calc(100% - calc(var(--u)*1.6)) 0,100% 50%,calc(100% - calc(var(--u)*1.6)) 100%,0 100%);display:flex;align-items:center;white-space:nowrap}
.gsx-sc-w2{position:relative;z-index:3;margin:calc(var(--u)*-1.6) 0 calc(var(--u)*1);padding:calc(var(--u)*.2) calc(var(--u)*2.2) 0;background:linear-gradient(90deg,transparent,rgba(46,230,107,.18),transparent)}
.gsx-sc-w2::before,.gsx-sc-w2::after{content:"";position:absolute;width:calc(var(--u)*1.4);height:calc(var(--u)*1.4);border:3px solid #2ee66b}
.gsx-sc-w2::before{left:0;top:0;border-right:0;border-bottom:0}.gsx-sc-w2::after{right:0;bottom:0;border-left:0;border-top:0}
.gsx-sc-w2 small{display:block;font-size:calc(var(--u)*1);letter-spacing:.3em;margin-bottom:calc(var(--u)*-.6)}
.gsx-sc-w2 b{display:inline-block;font-family:'Teko',Impact,sans-serif;font-weight:700;font-size:calc(var(--u)*5.4);line-height:1.05;color:#2ee66b;text-shadow:3px 3px 0 #0b7a32;transform:skewX(-14deg)}
.gsx-sc-w2 b i{font-style:normal;font-size:calc(var(--u)*2.4);color:#fff;margin-left:calc(var(--u)*.5)}
.gsx-sc-w4{position:relative;z-index:3;margin:calc(var(--u)*.8) 0 calc(var(--u)*2);width:112%;flex:none;height:calc(var(--u)*4);background:repeating-linear-gradient(135deg,#2ee66b 0 14px,#050807 14px 28px);display:flex;align-items:center;justify-content:center;transform:rotate(-2deg);box-shadow:0 0 calc(var(--u)*1.2) rgba(46,230,107,.5)}
.gsx-sc-face--lucky .gsx-sc-w4{margin-top:calc(var(--u)*-1.4)}
.gsx-sc-w4 span{background:#050807;border:2px solid #2ee66b;padding:calc(var(--u)*.1) calc(var(--u)*2);font-family:'Saira Stencil One',Impact,sans-serif;font-size:calc(var(--u)*1.9);letter-spacing:.08em;color:#fff;white-space:nowrap}
.gsx-sc-w4 em{font-style:normal;color:#2ee66b}

/* legend */
.gsx-sc-leg{position:relative;width:calc(100% - calc(var(--u)*2.8));margin:0 0 calc(var(--u)*.9)}
.gsx-sc-leg .lh{font-size:calc(var(--u)*1);letter-spacing:.24em;color:#2ee66b;margin-bottom:calc(var(--u)*.4)}
.gsx-sc-leg .li{display:flex;justify-content:space-around;background:#050807;border:1px solid #1f3a2a;border-left:3px solid #2ee66b;padding:calc(var(--u)*.5) calc(var(--u)*.8)}
.gsx-sc-leg .li div{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.2);min-width:0}
.gsx-sc-leg .li b{font-weight:400;font-size:calc(var(--u)*1.2);color:#fff}

/* bonus multipliers (grid cards only) */
.gsx-sc-bon{width:calc(100% - calc(var(--u)*2.8));margin:0 0 calc(var(--u)*.9)}
.gsx-sc-bon .bh{font-size:calc(var(--u)*1);letter-spacing:.24em;color:#fff;margin-bottom:calc(var(--u)*.4)}
.gsx-sc-bon .bb{display:flex;justify-content:space-between;gap:calc(var(--u)*.5)}
.gsx-sc-bon .bd{flex:1;height:calc(var(--u)*3.6);display:flex;align-items:center;justify-content:center;background:var(--hatch);clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%);font-family:'Teko',Impact,sans-serif;font-weight:700;font-size:calc(var(--u)*2.2);color:#3f4a46}
.gsx-sc-bon .bd.open{background:#2ee66b;color:#050807}
.gsx-sc-bon .bd b{font-weight:700}

/* scratch panel + hexagon spots */
.gsx-sc-live{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;margin:0 0 calc(var(--u)*1.2)}
.gsx-sc-pan{position:relative;display:grid;justify-content:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*1.4);background:#0b100e;box-shadow:inset 0 0 0 2px #1f3a2a,inset 0 0 22px rgba(0,0,0,.6)}
.gsx-sc-face--coins .gsx-sc-pan{grid-template-columns:repeat(3,calc(var(--u)*5.4));grid-auto-rows:calc(var(--u)*6)}
.gsx-sc-face--grid .gsx-sc-pan{grid-template-columns:repeat(4,calc(var(--u)*4.2));grid-auto-rows:calc(var(--u)*4.8)}
.gsx-sc-face--lucky .gsx-sc-pan{grid-template-columns:repeat(5,calc(var(--u)*5.8));grid-auto-rows:calc(var(--u)*6.4);gap:calc(var(--u)*.8)}
.gsx-sc-cell{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;background:#2ee66b;color:#2ee66b;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.gsx-sc-cell::before{content:"";position:absolute;inset:3px;z-index:-1;background:var(--hatch);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.gsx-sc-cell.open::before,.gsx-sc-cell--live::before{background:#030504}
.gsx-sc-cell .gsx-ic{width:68%;height:68%;filter:drop-shadow(0 0 3px #2ee66b)}
.gsx-sc-face--grid .gsx-sc-cell .gsx-ic{width:72%;height:72%}
.gsx-sc-cell.is-win{background:#fff}
.gsx-sc-cell.is-win .gsx-ic{animation:gsx-sc-pulse .7s ease-in-out infinite alternate}
@keyframes gsx-sc-pulse{from{transform:scale(1)}to{transform:scale(1.18)}}

.gsx-sc-hintline{font-size:calc(var(--u)*1);letter-spacing:.22em;color:#6f857a;margin:calc(var(--u)*-.2) 0 calc(var(--u)*1.2)}
.gsx-sc-ft{margin-top:auto;width:100%;display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.6) calc(var(--u)*1.2);background:#030504;border-top:3px solid #2ee66b;font-size:calc(var(--u)*1.1);letter-spacing:.14em;color:#9fb3a9}
.gsx-sc-ft b{flex:1;font-weight:400;text-align:left}
.gsx-sc-ft .pt{background:#fff;color:#050807;font-size:calc(var(--u)*1.3);padding:calc(var(--u)*.3) calc(var(--u)*1.4);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);white-space:nowrap}
.gsx-sc-ft .bars{width:calc(var(--u)*5.6);height:calc(var(--u)*2);background:repeating-linear-gradient(90deg,#dfe7e2 0 2px,transparent 2px 4px,#dfe7e2 4px 5px,transparent 5px 8px)}

/* play button under each card */
.gsx-sc-play{display:flex;align-items:center;justify-content:center;align-self:stretch;box-sizing:border-box;margin:0;min-height:3.6em;padding:.5em 1em;border:0;border-radius:0;background:#2ee66b;color:#04140a;font-size:1.1em;line-height:1.1;font-weight:900;text-align:center;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 1.6em rgba(46,230,107,.35);cursor:pointer;transition:background .15s;text-decoration:none;clip-path:polygon(1em 0,100% 0,100% calc(100% - 1em),calc(100% - 1em) 100%,0 100%,0 1em)}
.gsx-sc-card:hover .gsx-sc-play:not(:disabled){background:#7dffa6}
.gsx-sc-play:disabled{background:#2a302d;color:#8b958f;box-shadow:none;cursor:default}
.gsx-sc-card:has(.gsx-sc-play:disabled){cursor:default}

/* ---------- play window ---------- */
.gsx-sc-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:12px}
.gsx-sc-modal[hidden],.gsx-sc-result[hidden],.gsx-sc-hint[hidden],.gsx-sc-prog[hidden]{display:none}
.gsx-sc-box{position:relative;width:fit-content;max-width:100%;max-height:calc(100vh - 24px);overflow:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 16px 16px;background:#0b0f0d;border:1px solid var(--border,#2a312d);border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.7)}
.gsx-sc-box>*{position:relative;z-index:1}
.gsx-sc-box>.gsx-sc-fx{position:absolute;z-index:5;inset:0;width:100%;height:100%;pointer-events:none}
.gsx-sc-x{position:absolute;top:4px;right:10px;z-index:6;background:none;border:0;color:inherit;font-size:28px;cursor:pointer;line-height:1}
.gsx-sc-ticketwrap{display:flex;justify-content:center;max-width:100%}
.gsx-sc-ticketwrap .gsx-sc-face{box-shadow:0 0 0 1px #000,0 0 28px rgba(46,230,107,.35)}
.gsx-sc-ticketwrap.is-win .gsx-sc-face{animation:gsx-sc-flash .9s ease-out}
@keyframes gsx-sc-flash{0%{box-shadow:0 0 0 1px #000,0 0 0 0 #2ee66b}40%{box-shadow:0 0 0 1px #000,0 0 60px 14px #2ee66b}100%{box-shadow:0 0 0 1px #000,0 0 28px rgba(46,230,107,.35)}}
.gsx-sc-ticketwrap.is-lose .gsx-sc-face{filter:saturate(.7)}
.gsx-sc-cv{position:absolute;left:0;top:0;z-index:4;touch-action:none;cursor:crosshair}
.gsx-sc-cell--live .gsx-ic{display:block}
.gsx-sc-bon .bd.live{background:#030504;color:#6f857a;position:relative}
.gsx-sc-bon .bd.live.is-win{background:#2ee66b;color:#050807;animation:gsx-sc-pulse .7s ease-in-out infinite alternate}
.gsx-sc-prog{width:100%;height:6px;background:rgba(255,255,255,.1);overflow:hidden}
.gsx-sc-prog i{display:block;height:100%;width:0;background:#2ee66b;transition:width .15s}
.gsx-sc-hint{margin:0;font-size:13px;opacity:.8;text-align:center;max-width:100%}
.gsx-sc-hint .gsx-sc-reveal{background:none;border:0;padding:0 0 0 6px;color:#2ee66b;text-decoration:underline;cursor:pointer;font:inherit}
.gsx-sc-result{width:100%;text-align:center;font-size:14px;display:flex;flex-direction:column;gap:8px}
.gsx-sc-result code{display:block;padding:10px;background:rgba(255,255,255,.08);font-size:18px;letter-spacing:.12em;user-select:all}
.gsx-sc-won{font-size:20px;font-weight:900;color:#ffc83d;text-shadow:0 0 16px rgba(255,200,61,.5);animation:gsx-sc-rise .5s both}
.gsx-sc-lose{opacity:.85;font-weight:700}
@keyframes gsx-sc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* history */
.gsx-sc-hist h4{margin:0 0 8px}
.gsx-sc-hist ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gsx-sc-hist li{display:flex;gap:12px;align-items:center;padding:8px 12px;background:rgba(255,255,255,.04);font-size:14px}
.gsx-sc-hist li strong{margin-left:auto;color:#2ee66b}
.gsx-sc-hist li em{font-style:normal;opacity:.6;font-size:12px}

@media (prefers-reduced-motion:reduce){.gsx-sc-cell.is-win .gsx-ic,.gsx-sc-ticketwrap.is-win .gsx-sc-face,.gsx-sc-won{animation:none}}

/* ---------- homepage teaser: the same cards, a bit smaller, sticking out of their box ---------- */
.gs-sct__box:has(.gsx-sct){overflow:visible!important}
.gs-sct:has(.gsx-sct){overflow:visible!important;padding-top:calc(var(--gs-sct-pad,0px) + 56px);padding-bottom:56px}
.gsx-sct{--u:min(6.2px,calc((100vw - 48px)/62));display:block;width:100%;height:calc(var(--u)*32);pointer-events:none;justify-self:center;position:relative;z-index:2}
.gsx-sct__row{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;gap:calc(var(--u)*2.4)}
.gsx-sct .gsx-sc-card{cursor:default}
.gsx-sct .gsx-sc-card:nth-child(1){transform:rotate(-4deg)}
.gsx-sct .gsx-sc-card:nth-child(2){transform:rotate(2.5deg) translateY(calc(var(--u)*1.5))}
.gsx-sct .gsx-sc-card:nth-child(3){transform:rotate(4deg) translateY(calc(var(--u)*-2))}
.gsx-sct .gsx-sc-face{box-shadow:0 0 0 1px #000,0 0 22px rgba(46,230,107,.4),0 14px 30px rgba(0,0,0,.7)}
@media (max-width:760px){.gsx-sct{--u:min(6.2px,calc((100vw - 64px)/50));margin:30px 0}}
