/* av-gold-rush.css — Gold Rush (scratch-card.html). Loaded after av-bj.css (shared game layout). Own look (an old gold-mining town: wood, brass,
   gold dust): Rye for headings, amounts and prices, Inter for small text. The background picture is the big frame, the card board sits inside it. */
:root{--night:#120A04;--deep:#241407;--wood:#4A2C12;--wood2:#6B4220;--gold:#F2B134;--gold2:#FFE08A;--bone:#F5E6C4;--muted:#A68B63;--serif:'Rye',Georgia,serif;--sans:'Inter',system-ui,sans-serif}
html body.gr, html body.gr *{font-family:var(--sans)!important}
html body.gr .plate,html body.gr .prz b,html body.gr .betc small,html body.gr .betc b,html body.gr .pill,html body.gr .cnts small,html body.gr .win,html body.gr .buy,html body.gr .sheet h3,html body.gr .cele *,html body.gr .stamp,html body.gr .betbox b,html body.gr .betbox .go,html body.gr .pr b,html body.gr .pr span,html body.gr .ptn b{font-family:var(--serif)!important}
#stage:has(#grscene){padding:8px}
#grscene{position:relative;flex:1;width:100%;min-height:0;border-radius:18px;overflow:hidden;display:flex;justify-content:center;align-items:center;background:#120A04;box-shadow:0 0 0 1px rgba(242,177,52,.35),0 0 30px rgba(0,0,0,.6)}
#grscene::before{content:"";position:absolute;inset:0;background:url(../assets/gr/gr-bg.webp?v=3) center/cover no-repeat,radial-gradient(60% 45% at 50% 0%,rgba(255,196,90,.30),rgba(255,196,90,0) 70%),repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 70px,rgba(60,30,8,.55) 70px 82px),linear-gradient(180deg,#3A220E 0%,#22130A 60%,#120A04 100%);filter:brightness(.85)}
#grscene::after{content:"";position:absolute;inset:0;background:radial-gradient(115% 90% at 50% 48%,rgba(18,10,4,0) 0%,rgba(18,10,4,.35) 62%,rgba(18,10,4,.8) 100%);pointer-events:none}
#cab{position:relative;z-index:1;width:min(100%,520px);border-radius:22px;padding:26px 12px 14px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,rgba(24,12,4,.62),rgba(24,12,4,.36) 45%,rgba(24,12,4,.7));box-shadow:0 0 0 1px rgba(242,177,52,.35),inset 0 0 50px rgba(0,0,0,.4)}
#cab::before{content:"";position:absolute;inset:6px;border-radius:18px;border:1px solid rgba(242,177,52,.2);pointer-events:none}
.plate{position:absolute;left:50%;top:-13px;transform:translateX(-50%);z-index:3;padding:6px 26px 7px;font:400 15px var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);white-space:nowrap;background:linear-gradient(180deg,#6B4220,#33200E);border:1px solid rgba(242,177,52,.7);border-radius:3px 3px 12px 12px;text-shadow:0 0 12px rgba(242,177,52,.8);box-shadow:0 0 18px rgba(242,177,52,.35)}
/* the prize strip */
.prizes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:2px}
.prz{border-radius:10px;padding:5px 2px 6px;text-align:center;background:linear-gradient(180deg,#3A220E,#1C0F06);border:1px solid rgba(242,177,52,.28);transition:box-shadow .3s,border-color .3s,transform .3s}
.prz img{width:30px;height:30px;object-fit:contain;display:block;margin:0 auto 2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.prz b{display:block;font:400 12px var(--serif);color:var(--gold2);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.prz.hit{border-color:#FFE08A;box-shadow:0 0 18px rgba(255,224,138,.7);transform:translateY(-2px)}
.prz.pk{border-color:rgba(255,154,60,.55)}
/* the board */
.boardw{position:relative;display:flex;justify-content:center}
.board{--bw:360px;width:var(--bw);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;border-radius:18px;touch-action:none;user-select:none;-webkit-user-select:none;background:linear-gradient(160deg,#7B4C24,#3A2210 55%,#5C3818);box-shadow:0 0 0 2px #140A03,0 0 0 4px rgba(242,177,52,.7),0 10px 26px rgba(0,0,0,.65),inset 0 0 18px rgba(0,0,0,.5);cursor:crosshair}
.gc{position:relative;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#3D2A18,#1A0F07);box-shadow:inset 0 0 14px rgba(0,0,0,.8),inset 0 0 0 1px rgba(242,177,52,.25);display:flex;align-items:center;justify-content:center;transition:opacity .35s,filter .35s,transform .35s}
.gc img.sym{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
.gc canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;transition:opacity .3s}
.gc.gone canvas{opacity:0;pointer-events:none}
.gc.deal{animation:gcDeal .4s cubic-bezier(.2,1.3,.4,1) both}
@keyframes gcDeal{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
.gc.hint{box-shadow:inset 0 0 14px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,224,138,.9),0 0 16px rgba(255,200,80,.75);animation:gcHint .7s ease-in-out infinite alternate}
@keyframes gcHint{from{filter:brightness(1)}to{filter:brightness(1.35)}}
.gc.win{box-shadow:inset 0 0 14px rgba(0,0,0,.6),inset 0 0 0 3px #FFE08A,0 0 22px rgba(255,224,138,.9);animation:gcWin .8s ease-in-out infinite alternate;z-index:2}
@keyframes gcWin{from{transform:scale(1)}to{transform:scale(1.06)}}
.gc.win img.sym{filter:drop-shadow(0 0 14px rgba(255,224,138,.95)) drop-shadow(0 3px 5px rgba(0,0,0,.7))}
.board.done .gc:not(.win){opacity:.4;filter:saturate(.5)}
.gc.pk img.sym{filter:drop-shadow(0 0 12px rgba(255,154,60,.9)) drop-shadow(0 3px 5px rgba(0,0,0,.7))}
.stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);z-index:6;font:400 clamp(54px,16vw,96px) var(--serif);color:#FFE08A;text-shadow:0 0 26px rgba(255,160,40,.95),0 4px 0 #7A3A10,0 8px 18px rgba(0,0,0,.8);pointer-events:none;opacity:0;white-space:nowrap}
.stamp.go{animation:stampIn 1.5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stampIn{0%{transform:translate(-50%,-50%) scale(3);opacity:0}18%{transform:translate(-50%,-50%) scale(1);opacity:1}75%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-66%) scale(.9);opacity:0}}
.win{min-height:22px;text-align:center;font:400 17px var(--serif);letter-spacing:.06em;color:#FFE08A;text-shadow:0 0 12px rgba(242,177,52,.7),0 1px 6px rgba(0,0,0,.9)}
/* controls */
.top{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.cnts{display:flex;gap:5px;align-items:center;flex-wrap:wrap;position:relative}
.cnts small{width:100%;font:400 9.5px var(--serif);letter-spacing:.2em;color:var(--muted);order:-1}
.speeds{display:flex;gap:6px;justify-content:flex-end}
.pill{font:400 12px var(--serif);letter-spacing:.04em;min-height:32px;padding:0 11px;border-radius:999px;border:1px solid rgba(242,177,52,.45);background:linear-gradient(180deg,#4A2C12,#24140A);color:var(--gold2);cursor:pointer;box-shadow:inset 0 0 8px rgba(242,177,52,.12)}
.pill.sp{padding:0 10px}
.pill.on{border-color:#FFE08A;color:#fff;background:linear-gradient(180deg,#9A5C16,#5A3208);box-shadow:0 0 12px rgba(242,177,52,.45)}
.pill:disabled{opacity:.45;cursor:default}
.betc{text-align:center;line-height:1.1;cursor:pointer}
.betc small{display:block;font:400 10px var(--serif);letter-spacing:.2em;color:var(--muted)}
.betc b{font:400 22px var(--serif);color:#fff;font-variant-numeric:tabular-nums}
.dock{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.step{width:50px;height:50px;border-radius:50%;border:1px solid rgba(242,177,52,.5);background:radial-gradient(circle at 35% 30%,#6B4220,#24140A);color:var(--gold2);font:700 26px var(--sans);cursor:pointer;box-shadow:inset 0 0 10px rgba(242,177,52,.18),0 4px 12px rgba(0,0,0,.5)}
.step:active{transform:scale(.94)}
.buy{min-height:56px;border-radius:14px;border:1px solid #FFE08A;background:linear-gradient(180deg,#E09A22,#8A4E0C);color:#fff;font:400 20px var(--serif);letter-spacing:.1em;cursor:pointer;text-shadow:0 2px 0 rgba(90,40,0,.8);box-shadow:0 0 0 2px #140A03,0 0 22px rgba(242,177,52,.45),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .08s,filter .2s}
.buy:active:not(:disabled){transform:scale(.98)}
.buy:disabled{filter:grayscale(.6) brightness(.7);cursor:default}
/* sheets, bet box, celebration */
.scrim{position:fixed;inset:0;background:rgba(10,5,2,.72);display:none;align-items:center;justify-content:center;z-index:100}.scrim.open{display:flex}
.sheet{position:relative;width:min(94%,520px);max-height:92vh;overflow:auto;border-radius:22px;padding:20px 14px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(120% 70% at 50% 0%,#5A3414,#24140A 60%,#140A03);box-shadow:0 0 0 1px #140A03,0 0 0 2px rgba(242,177,52,.6),0 0 40px rgba(242,177,52,.25);animation:up .25s ease-out}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{font:400 18px var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);text-align:center}
.sheet h3 button{position:absolute;right:14px;top:14px;background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.betpop{position:fixed;inset:0;background:rgba(10,5,2,.6);display:none;align-items:center;justify-content:center;z-index:110}.betpop.open{display:flex}
.betbox{width:min(86%,300px);padding:16px;border-radius:16px;background:radial-gradient(120% 80% at 50% 0%,#5A3414,#24140A);box-shadow:0 0 0 1px #140A03,0 0 0 2px rgba(242,177,52,.6);display:flex;flex-direction:column;gap:10px;text-align:center}
.betbox b{font:400 13px var(--serif);letter-spacing:.2em;color:var(--gold2)}
.betbox input{font:800 24px var(--sans);text-align:center;color:#fff;background:#140A03;border:1px solid rgba(242,177,52,.4);border-radius:10px;padding:8px;outline:none;width:100%}
.betbox .go{min-height:40px;border-radius:999px;border:1px solid rgba(242,177,52,.6);background:linear-gradient(180deg,#9A5C16,#5A3208);color:#fff;font:400 13px var(--serif);letter-spacing:.12em;cursor:pointer}
.ptc{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:12px;border:1px solid rgba(242,177,52,.25);background:rgba(0,0,0,.3)}
.pr{display:grid;grid-template-columns:40px 1fr 80px;gap:6px;align-items:center;padding:4px;border-radius:8px}
.pr:nth-child(even){background:rgba(255,255,255,.04)}
.pr img{width:36px;height:36px;object-fit:contain}
.pr b{font:400 14px var(--serif);color:#fff;display:flex;flex-direction:column;gap:1px}
.pr b small{font:600 10.5px var(--sans);color:var(--muted)}
.pr span{font:400 15px var(--serif);color:#FFE08A;text-align:right}
.ptn{font:600 12px var(--sans);color:#D8C7A4;line-height:1.5;padding:4px}
.ptw{display:flex;flex-direction:column;gap:8px;max-height:64vh;overflow:auto}
.cele{position:fixed;inset:0;z-index:130;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle,rgba(60,30,8,.9),rgba(10,5,2,.95));text-align:center;cursor:pointer;overflow:hidden}
.cele.open{display:flex;animation:up .3s ease-out}
.cele .t{font:400 42px var(--serif);letter-spacing:.14em;color:#FFE08A;text-shadow:0 0 30px rgba(255,160,40,.95);animation:tpop .7s cubic-bezier(.2,1.4,.4,1) both}
.cele.mega .t{font-size:50px;color:#fff}.cele.epic .t{font-size:56px;color:#fff}
.cele .a{font:400 46px var(--serif);color:#fff;text-shadow:0 0 24px rgba(242,177,52,.95);font-variant-numeric:tabular-nums}
.cele small{font:400 12px var(--serif);letter-spacing:.3em;color:var(--gold2);opacity:.8}
@keyframes tpop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.nug{position:absolute;top:-30px;width:var(--w,14px);height:var(--w,14px);border-radius:40% 55% 45% 50%;background:radial-gradient(circle at 30% 30%,#FFF1B8,#F2B134 55%,#A8680F);box-shadow:0 0 10px rgba(242,177,52,.8);animation:nugFall var(--d,3s) ease-in var(--dl,0s) forwards}
@keyframes nugFall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(var(--r,540deg))}}
.dust{position:fixed;z-index:60;width:5px;height:5px;border-radius:50%;background:#FFD76A;box-shadow:0 0 6px rgba(255,215,106,.9);pointer-events:none}
@media(max-width:720px){.prizes{gap:4px}.prz img{width:26px;height:26px}.prz b{font-size:11px}#cab{padding-top:24px}}
.gc img.sym:not([src]){display:none}
