/* hillbillycardgames.com - THE GAME'S OWN ART (his order 2026-09-28 night: "use the actual one from the game"). Cards: the table card rules from the game, class .card renamed .gc so it cannot collide with the site's game tiles. Chips: the table chip exactly as HBdressChip paints it. Slot: hbSlotCss, no red line. Ticket: hbScratchCss. */ /* ---------- the playing card (game: .card) ---------- */ .gcs{display:inline-flex;gap:6px;flex-wrap:wrap;--cs:.72;--hb-card-w:calc(70px*var(--cs,1));--hb-rad:calc(13px*var(--cs,1));--hb-card-ratio:1.414;font-family:Inter,'Segoe UI',Helvetica,Arial,sans-serif} .gc{border-radius:var(--hb-rad);position:relative;flex-shrink:0;display:inline-block;overflow:hidden;width:var(--hb-card-w)!important;height:calc(var(--hb-card-w)*var(--hb-card-ratio))!important;box-sizing:border-box!important} .gc.blk,.gc.red{background:#fff;border:1px solid #c8c4bc;box-shadow:0 1px 4px rgba(0,0,0,.2),0 4px 9px rgba(0,0,0,.18)} .gc .tl{position:absolute;top:calc(5px*var(--cs));left:calc(6px*var(--cs));display:flex;flex-direction:column;align-items:center;line-height:1} .gc .br{position:absolute;bottom:calc(5px*var(--cs));right:calc(6px*var(--cs));display:flex;flex-direction:column;align-items:center;line-height:1;transform:rotate(180deg)} .gc .pip{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);opacity:.9} .gc.red .br,.gc.red .pip,.gc.red .tl{color:#c0392b} .gc.blk .br,.gc.blk .pip,.gc.blk .tl{color:#1a1a2e} .gc .br .cr,.gc .tl .cr{font-size:calc(var(--hb-card-w)*.2353)!important;font-weight:800!important} .gc .br .cs,.gc .tl .cs{font-size:calc(var(--hb-card-w)*.1618)!important} .gc .pip{font-size:calc(var(--hb-card-w)*.4706)!important} .gc.fd{background:#661a1a;border:1.5px solid #9a4a4a;box-shadow:0 1px 2px rgba(0,0,0,.3)} .gc.fd::before{content:'';position:absolute;inset:3px;border:1.5px solid rgba(255,255,255,.08);border-radius:7px} .gc.fd::after{content:'';position:absolute;inset:6px;border-radius:5px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(-45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 2px,transparent 2px,transparent 6px)} /* ---------- the table chip (game: HBdressChip) ---------- */ .hbpc{display:inline-block;width:64px;height:64px;border-radius:50%;position:relative;overflow:hidden;background:repeating-conic-gradient(var(--hbwc,#c9971f) 0 20deg,var(--hbsc,#fff) 20deg 32deg);box-shadow:0 1px 0 rgba(0,0,0,.34),0 2px 0 rgba(0,0,0,.26),0 3px 1px rgba(0,0,0,.30),0 5px 7px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.22),inset 0 3px 4px rgba(255,255,255,.30),inset 0 -3px 5px rgba(0,0,0,.30)} .hbpc .hbface-disc{position:absolute;inset:20%;border-radius:50%;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 35%,var(--hbfa,#f7e2a0),var(--hbfb,#8a6414))} .hbpc .hbface-ring{position:absolute;inset:31%;border-radius:50%;z-index:3;pointer-events:none;border:1.5px solid var(--hbrg,rgba(255,255,255,.85))} .hbpc.hbc-purple{--hbwc:#8a4fd0;--hbfa:#dcc2ff;--hbfb:#5b2a92} .hbpc.hbc-gold{--hbwc:#e0b352;--hbfa:#f7e2a0;--hbfb:#8a6414} .chips{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin:8px 0 14px} .chip{display:flex;align-items:center;gap:16px;font:800 15px/1.3 system-ui;color:#e9eef7} .chip b{display:block;font:900 26px/1 Georgia,serif;color:#f3c95a} .chip small{display:block;font:600 12px/1.3 system-ui;color:#a9b7cc;margin-top:3px} .rack{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 4px} .rack .hbpc{width:34px;height:34px} /* ---------- machines on the home page ---------- */ .machines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px} .machines .panel{margin:0;display:flex;flex-direction:column;align-items:center} .machines .panel h2{text-align:center} .machines .sub{margin:0 0 14px;font-size:15px;min-height:46px} /* ONE SHAPE FOR BOTH PANELS (his order 2026-09-28: "perfectly level"): the same rows at the same heights */ .mach{width:100%;height:420px;display:flex;align-items:center;justify-content:center} .mach>*{max-width:100%} .mrow{height:70px;display:flex;align-items:center;justify-content:center;margin-top:6px} .mplay.static{cursor:default} .mbank{margin-top:10px;height:16px} .mnote{min-height:44px;margin:12px 0 0!important;font-size:13px!important} .pays div{min-height:64px;display:flex;flex-direction:column;justify-content:center} .mplay{display:inline-flex;align-items:center;gap:10px;margin-top:0;border:0;cursor:pointer;background:linear-gradient(180deg,#ffe07a,#dcab3c 55%,#b8860b);color:#1a1200;font:900 15px/1 system-ui;letter-spacing:1.4px;text-transform:uppercase;padding:14px 22px;border-radius:999px;box-shadow:0 6px 0 #7a5a12,0 10px 22px rgba(0,0,0,.5)} .mplay:disabled{opacity:.55;cursor:default} .mbank{margin-top:12px;font:800 13px/1 system-ui;letter-spacing:1px;color:#a9b7cc;text-transform:uppercase}.mbank b{color:#f3c95a;margin-left:6px} .pays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin:14px 0 0;font-size:13px;color:#dfe7f4} .pays div{background:rgba(255,255,255,.04);border:1px solid rgba(243,201,90,.25);border-radius:10px;padding:8px 6px;text-align:center;line-height:1.3}.pays b{display:block;color:#f3c95a;font-size:14px;margin-top:3px} @media(max-width:760px){.machines{grid-template-columns:1fr}} .hb7{display:inline-block;width:1.05em;height:1.18em;vertical-align:-.16em;background:url("data:image/svg+xml;utf8,77") center/contain no-repeat} /* ================= the slot machine ================= */ .hbSlotWrap{position:relative;width:min(46vw,min(76vh,340px));flex:0 0 auto; display:flex;flex-direction:column;align-items:center} .hbSlotCab{position:relative;width:100%;box-sizing:border-box;border-radius:20px 20px 14px 14px; padding:0 0 12px;overflow:visible; background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 16%), linear-gradient(180deg,#a32633 0,#7d1a26 34%,#5d121d 70%,#3a0b13 100%); border:3px solid #2a1d06; box-shadow:inset 0 2px 0 rgba(255,220,190,.28),inset 0 -4px 12px rgba(0,0,0,.6), inset 3px 0 0 rgba(0,0,0,.28),inset -3px 0 0 rgba(0,0,0,.28), 0 16px 34px rgba(0,0,0,.6)} /* --- the crown --- */ .hbSlotCrown{position:relative;border-radius:16px 16px 0 0;padding:9px 10px 8px;text-align:center; background:linear-gradient(180deg,#f7e6a8 0,#daa520 40%,#a97c14 78%,#6b4d15 100%); border-bottom:3px solid #2a1d06; box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(0,0,0,.35)} .hbSlotName{position:relative;z-index:2;display:block; font:900 clamp(11px,2.1vh,16px)/1 Georgia,serif;letter-spacing:.2em;color:#4a0f18; text-shadow:0 1px 0 rgba(255,255,255,.55)} .mqSub{display:block;font-size:.78em;letter-spacing:.42em;margin-top:1px;color:#6b1420} .mqRing{position:absolute;inset:3px;border-radius:13px 13px 0 0;pointer-events:none; filter:drop-shadow(0 0 4px rgba(255,240,190,.9))} .mqRing::before,.mqRing::after{content:'';position:absolute;inset:0;border-radius:inherit; background-repeat:repeat-x,repeat-x;background-size:15px 7px,15px 7px; will-change:opacity; background-image: radial-gradient(circle at 4px 3px,#fff8dd 0 2.4px,rgba(255,248,221,0) 3px), radial-gradient(circle at 4px 4px,#fff8dd 0 2.4px,rgba(255,248,221,0) 3px); animation:mqBlink .9s steps(1,end) infinite} .mqRing::before{background-position:0 0,0 100%} .mqRing::after{background-position:7.5px 0,7.5px 100%;animation-delay:.45s} @keyframes mqBlink{50%,100%{opacity:0}} /* --- body: pillars either side of the glass --- */ .hbSlotBody{display:flex;align-items:stretch;gap:6px;padding:10px 8px 8px} .slPillar{flex:0 0 13px;border-radius:6px;display:flex;flex-direction:column; align-items:center;justify-content:space-around;padding:5px 0; background:linear-gradient(90deg,#4d0f18,#8b1f2c 45%,#4d0f18); box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)} .slPillar i{width:7px;height:7px;border-radius:50%;background:#ffe9a2; box-shadow:0 0 7px rgba(255,235,160,.95);animation:hbBulbBlink 1.05s steps(1,end) infinite} .slPillar i:nth-child(2n){animation-delay:.52s} .slPillar.r i:nth-child(odd){animation-delay:.52s} @keyframes hbBulbBlink{0%,49%{opacity:1}50%,100%{opacity:.22}} .slGlass{position:relative;flex:1 1 auto;min-width:0;border-radius:11px;padding:9px; background:linear-gradient(180deg,#121a28,#0a1220); border:2px solid #2a1d06; box-shadow:inset 0 4px 14px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.08)} .slScrew{position:absolute;width:7px;height:7px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#e8eef6,#8c96a4 60%,#4a525c); box-shadow:0 1px 1px rgba(0,0,0,.6)} .slScrew.tl{left:4px;top:4px}.slScrew.tr{right:4px;top:4px} .slScrew.bl{left:4px;bottom:4px}.slScrew.br{right:4px;bottom:4px} .hbSlotWin{position:relative;display:flex;gap:0;justify-content:center;align-items:stretch} .slDiv{flex:0 0 6px;border-radius:2px; background:linear-gradient(90deg,rgba(0,0,0,.5),#c9d2dd 45%,#8f99a6 55%,rgba(0,0,0,.5))} .slReel{position:relative;flex:1 1 0;min-width:0;height:var(--slh,84px);overflow:hidden;border-radius:7px; contain:paint;isolation:isolate; background:linear-gradient(180deg,#fffdf6 0,#f1ead8 48%,#d6ccb4 100%); border:2px solid #2a1d06; box-shadow:inset 0 7px 11px rgba(0,0,0,.26),inset 0 -7px 11px rgba(0,0,0,.26)} .slStrip{position:absolute;left:0;right:0;top:0;will-change:transform; transform:translateZ(0);backface-visibility:hidden;contain:layout paint} .slCell{height:var(--slh,84px);display:flex;align-items:center;justify-content:center; font-size:calc(var(--slh,84px) * .56);line-height:1;user-select:none} .slReel::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:5px; background:linear-gradient(180deg,rgba(12,18,30,.42),rgba(0,0,0,0) 30%,rgba(255,255,255,.16) 50%, rgba(0,0,0,0) 70%,rgba(12,18,30,.42))} .hbSlotWin.hit .slReel{border-color:#ffd54a;box-shadow:inset 0 0 0 2px rgba(255,213,74,.55),0 0 18px rgba(255,213,74,.6)} .hbSlotWin.bad .slReel{border-color:#8f2020;box-shadow:inset 0 0 0 2px rgba(255,90,90,.4)} /* --- belly: the LED readout and the coin tray --- */ .slBelly{display:flex;flex-direction:column;gap:7px;padding:0 12px} .slLed{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 9px; border-radius:7px;background:#0a1508;border:2px solid #2a1d06; box-shadow:inset 0 2px 8px rgba(0,0,0,.9)} .slLedT{font:900 8px/1 system-ui;letter-spacing:.18em;color:#3f7a3a} .slLedV{font:900 clamp(10px,1.9vh,14px)/1 ui-monospace,monospace;letter-spacing:.06em; color:#7dff8a;text-shadow:0 0 8px rgba(125,255,138,.75)} .slTray{position:relative;height:16px;border-radius:0 0 9px 9px; background:linear-gradient(180deg,#2a0a11,#14050a); box-shadow:inset 0 3px 7px rgba(0,0,0,.85)} .slTrayLip{position:absolute;left:14%;right:14%;top:-2px;height:3px;border-radius:2px; background:linear-gradient(180deg,#c9a961,#7a5a12);box-shadow:0 1px 2px rgba(0,0,0,.6)} .slTrayMouth{position:absolute;left:16%;right:16%;top:6px;height:6px;border-radius:3px;background:#050103} /* --- the arm --- */ .slArm{position:absolute;right:-11px;top:36%;width:16px;height:96px;z-index:4;pointer-events:none} .armMount{position:absolute;right:2px;top:0;width:13px;height:13px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#e8eef6,#8c96a4 60%,#4a525c); box-shadow:0 2px 3px rgba(0,0,0,.6)} .armRod{position:absolute;right:7px;top:8px;width:4px;height:44px;border-radius:2px; background:linear-gradient(90deg,#7a838f,#e2e8f0 45%,#7a838f); transform-origin:50% 0;transition:transform .18s cubic-bezier(.3,1.4,.5,1)} .armBall{position:absolute;right:1px;top:48px;width:16px;height:16px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#ff9a9a,#d0202a 58%,#7d0f16); box-shadow:0 3px 5px rgba(0,0,0,.55),inset 0 -2px 4px rgba(0,0,0,.4); transition:transform .18s cubic-bezier(.3,1.4,.5,1)} .slArm.pull .armRod{transform:scaleY(1.5)} .slArm.pull .armBall{transform:translateY(22px)} /* --- the pay glass --- */ #hbSlotPrize{min-height:1.3em;font:900 15px/1.25 system-ui;text-align:center;color:#ffe39a; opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s} #hbSlotPrize.show{opacity:1;transform:none} #hbSlotPrize.bad{color:#ff9b8a} /* the site's own sizing for the cabinet: the game sizes it to a phone screen */ .hbSlotWrap{width:min(100%,340px);--slh:96px} #hbSlotPrize{margin-top:10px} /* ---------- the lottery ticket ---------- */ .hbTicket{position:relative;width:min(52vw,min(62vh,560px));aspect-ratio:1.46; flex:0 0 auto;box-sizing:border-box;border-radius:12px;overflow:hidden; display:flex;flex-direction:column; background:linear-gradient(180deg,var(--tkF1,#f6a13a) 0,var(--tkF2,#ef8a22) 46%,var(--tkF3,#d9700f) 100%); border:4px solid var(--tkEdge,#12203a);box-shadow:0 12px 26px rgba(0,0,0,.55)} @media (orientation:portrait){.hbTicket{width:min(94vw,500px);aspect-ratio:1.24}} /* checkered tear strips */ .hbTicket::before,/* A TICKET EDGE, NOT A FILM STRIP (his note 2026-09-19). The top and bottom were solid blocks of alternating colour, which reads as sprocket holes on movie stock. A real ticket tears along a PERFORATION: a run of punched holes on a narrow stub band, with a faint tear line through it. */ .hbTicket::after{content:'';position:absolute;left:0;right:0;height:14px;z-index:4; background: radial-gradient(circle 3px at 11px 50%, var(--tkEdge,#12203a) 96%, transparent 98%) 0 0/22px 100% repeat-x, linear-gradient(90deg, rgba(18,32,58,.30) 0 50%, transparent 50% 100%) 0 50%/8px 1px repeat-x, linear-gradient(180deg, var(--tkStub1,#f7c86b) 0, var(--tkStub2,#eda93c) 100%); border-block:2px solid rgba(18,32,58,.55)} .hbTicket::before{top:0}.hbTicket::after{bottom:0} .tkHead{position:relative;z-index:2;margin-top:19px;text-align:center;pointer-events:none;flex:0 0 auto} .tkH1{display:inline-block;font:900 clamp(15px,3.4vh,26px)/1 'DejaVu Serif',Georgia,serif; letter-spacing:.02em;color:var(--tkH,#39d3c1);transform:rotate(-2deg); text-shadow:2.5px 2.5px 0 var(--tkEdge,#12203a),-1.5px -1.5px 0 var(--tkEdge,#12203a), 1.5px -1.5px 0 var(--tkEdge,#12203a),-1.5px 1.5px 0 var(--tkEdge,#12203a)} .tkH2{font:800 clamp(7px,1.4vh,11px)/1 system-ui;letter-spacing:.24em;color:var(--tkEdge,#12203a);margin-top:2px} .tkBody{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;gap:8px;padding:8px 12px 30px} /* the play area: everything under one sheet of foil */ .tkPlay{position:relative;flex:1 1 auto;min-width:0;border-radius:6px;overflow:hidden; border:3px solid var(--tkEdge,#12203a);display:flex;gap:8px;padding:8px 8px 22px; background: radial-gradient(circle at 22% 18%,rgba(255,255,255,.16),transparent 46%), repeating-linear-gradient(58deg,rgba(255,255,255,.05) 0 9px,transparent 9px 18px), repeating-linear-gradient(-58deg,rgba(0,0,0,.10) 0 9px,transparent 9px 18px), linear-gradient(165deg,var(--tkB1,#4b2c8f) 0,var(--tkB2,#33206b) 48%,var(--tkB3,#1b1140) 100%)} .tkLeft{flex:0 0 29%;display:flex;flex-direction:column;gap:8px;min-width:0} .tkPad{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 3px;box-sizing:border-box;border-radius:5px;background:rgba(0,0,0,.30);border:2px dashed rgba(255,235,170,.5)} .tkPadT{font:900 clamp(6px,1.1vh,9px)/1.15 system-ui;letter-spacing:.04em;color:#ffe08a;text-transform:uppercase;text-align:center;padding:0 2px;white-space:nowrap} .tkPadV{font-size:clamp(20px,4.6vh,40px);line-height:1} .tkPadV.mult{font:900 clamp(17px,3.8vh,32px)/1 'DejaVu Serif',Georgia,serif;color:#ffe08a; text-shadow:0 2px 6px rgba(0,0,0,.7)} .tkGrid{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr);gap:2px} .tkCell{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;font-size:clamp(14px,2.9vh,26px);line-height:1;padding:3px;box-sizing:border-box;overflow:hidden; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))} .tkCell.win{animation:tkPulse 1s ease-in-out infinite} @keyframes tkPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,213,74,0))} 50%{transform:scale(1.18);filter:drop-shadow(0 0 10px rgba(255,213,74,.95))}} #hbTixCv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;display:block;z-index:5} .tkScratched{position:absolute;left:0;right:0;bottom:6px;text-align:center;z-index:6;pointer-events:none; font:900 clamp(6px,1.2vh,9px)/1 system-ui;letter-spacing:.1em;color:rgba(255,255,255,.75); text-shadow:0 1px 3px rgba(0,0,0,.9)} .tkResult{position:absolute;left:0;right:0;bottom:13px;z-index:6;padding:5px 8px;text-align:center; background:rgba(10,16,32,.9);border-top:2px solid rgba(255,213,74,.55); font:900 clamp(10px,2.2vh,17px)/1.2 system-ui;color:#ffe39a;display:none} .tkResult.show{display:block} .tkNo{position:absolute;z-index:4;left:14px;bottom:18px; font:800 clamp(6px,1.15vh,9px)/1 ui-monospace,monospace;color:var(--tkEdge,#12203a);letter-spacing:.10em} .tkBar{position:absolute;z-index:4;right:14px;bottom:17px;height:10px;width:20%; background:repeating-linear-gradient(90deg,var(--tkEdge,#12203a) 0 2px,transparent 2px 4px,var(--tkEdge,#12203a) 4px 5px,transparent 5px 9px)} .tkPop{position:absolute;inset:0;z-index:7;display:none;flex-direction:column;align-items:center;justify-content:center;gap:7px;pointer-events:none;background:rgba(6,14,28,.55);padding:0 12px} .tkPop.on{display:flex;animation:tkPopIn .5s cubic-bezier(.2,1.5,.4,1)} @keyframes tkPopIn{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}} .tkPopT{font:900 clamp(19px,4.8vh,40px)/1.05 system-ui;text-align:center} .tkPop.win .tkPopT{color:#fff6d0;text-shadow:0 0 24px rgba(255,213,74,.95),0 3px 0 #7a5a12} .tkPop.lose .tkPopT{color:#ffd0c8;text-shadow:0 0 18px rgba(255,90,90,.7),0 3px 0 #5a1414} .tkPopS{font:800 clamp(10px,1.9vh,14px)/1.3 system-ui;color:#eef4ff;text-align:center} .tkPadArrow{display:none} /* the site's own sizing for the ticket: the game sizes it to a phone screen */ .hbTicket{width:min(100%,520px);max-height:420px;aspect-ratio:1.46} @media (orientation:portrait){.hbTicket{width:min(100%,520px);aspect-ratio:1.24}}