/* One Casino NZ — skin (non-critical). Tokens inline in . Namespace: oc-* */ /* trust strip */ .oc-trust{border-bottom:1px solid var(--oc-hair);background:var(--oc-void-1)} .oc-trust__in{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:center;padding:10px 0;font-size:12.5px;color:var(--oc-fog);font-weight:500} .oc-trust__in b{color:var(--oc-mist);font-weight:700} .oc-trust__in span{display:inline-flex;align-items:center;gap:7px} .oc-trust__in i{width:6px;height:6px;border-radius:50%;background:var(--oc-lime);flex:none} /* bands */ .oc-band{padding:74px 0} .oc-band--alt{background:var(--oc-void-1)} .oc-band__h{font-size:clamp(26px,3.4vw,40px);margin-bottom:18px} .oc-band .oc-lede{color:var(--oc-mist);font-size:17px;max-width:70ch;margin:0 0 22px} .oc-band p{color:var(--oc-mist);margin:0 0 15px;max-width:78ch} .oc-band p a{color:var(--oc-lime);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .oc-band strong{color:var(--oc-snow);font-weight:700} h3.oc-sub{font-family:Sora,sans-serif;font-weight:700;font-size:clamp(18px,2.1vw,23px);color:var(--oc-lime);margin:28px 0 10px;letter-spacing:-.01em} .oc-band__cta{margin:26px 0 2px} .oc-band__cta .oc-cta{height:54px;padding:0 30px;font-size:16px} .oc-fineprint{font-size:12px;color:var(--oc-fog);margin:12px 0 0} /* lobby */ .oc-lobby{padding-top:58px} .oc-lobby__head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px} .oc-lobby__head .oc-band__h{margin:0} .oc-filters{display:flex;gap:8px;flex-wrap:wrap} .oc-chip{appearance:none;border:1px solid var(--oc-hair-2);background:var(--oc-panel);color:var(--oc-mist);font:600 13.5px Figtree,sans-serif;padding:9px 17px;border-radius:var(--oc-rad);cursor:pointer;transition:color .2s,background .2s,border-color .2s} .oc-chip:hover{color:var(--oc-snow);border-color:var(--oc-fog)} .oc-chip.is-live{background:var(--oc-grape);color:#fff;border-color:var(--oc-grape)} .oc-chip:focus-visible{outline:2px solid var(--oc-grape-2);outline-offset:2px} .oc-reel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .oc-tile{position:relative;aspect-ratio:600/442;border-radius:14px;overflow:hidden;border:1px solid var(--oc-hair);background:var(--oc-panel-2);display:flex;align-items:flex-end;padding:12px;text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s} .oc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .oc-tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.36) 68%,rgba(0,0,0,.86));pointer-events:none} .oc-tile:hover{transform:translateY(-4px);border-color:var(--oc-lime);box-shadow:0 16px 34px -12px rgba(0,0,0,.7)} .oc-tile__studio{position:absolute;top:9px;left:9px;z-index:2;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--oc-snow);background:rgba(24,26,29,.66);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 7px;backdrop-filter:blur(4px)} .oc-tile__cap{position:relative;z-index:2;font-family:Sora,sans-serif;font-weight:700;font-size:15px;line-height:1.05;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9)} .oc-tile__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%) scale(.6);z-index:2;width:50px;height:50px;border-radius:50%;background:var(--oc-lime);color:var(--oc-on-lime);display:grid;place-items:center;font-size:15px;padding-left:2px;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 8px 22px rgba(0,0,0,.5)} .oc-tile:hover .oc-tile__play{opacity:1;transform:translate(-50%,-50%) scale(1)} .oc-tile.is-off{display:none} .oc-reel__more{display:flex;justify-content:center;margin-top:24px} .oc-reel__more .oc-cta{min-width:260px;height:50px} @media(max-width:1000px){.oc-reel{grid-template-columns:repeat(3,1fr)}} @media(max-width:620px){.oc-reel{grid-template-columns:repeat(2,1fr);gap:11px}.oc-tile__cap{font-size:13.5px}} /* duo panels (bonuses) */ .oc-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0} .oc-panel{background:var(--oc-panel);border:1px solid var(--oc-hair);border-radius:var(--oc-card);padding:22px 24px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 28px rgba(0,0,0,.4)} .oc-panel h3{font-family:Sora,sans-serif;font-weight:700;font-size:20px;color:var(--oc-lime);margin-bottom:10px} .oc-panel p{margin:0;font-size:15px} @media(max-width:768px){.oc-duo{grid-template-columns:1fr}} /* flag callout */ .oc-flag{background:var(--oc-void);border:1px solid var(--oc-hair);border-left:3px solid var(--oc-flame);border-radius:0 12px 12px 0;padding:14px 18px;font-size:14.5px;color:var(--oc-mist);margin:20px 0} /* fact grid */ .oc-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--oc-hair);border:1px solid var(--oc-hair);border-radius:var(--oc-card);overflow:hidden;margin-top:6px} .oc-fact{display:flex;flex-direction:column;gap:3px;background:var(--oc-panel);padding:14px 18px} .oc-fact .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--oc-fog)} .oc-fact .val{font-size:15.5px;color:var(--oc-snow);font-weight:600} @media(max-width:640px){.oc-facts{grid-template-columns:1fr}} /* ledger tables */ .oc-tablewrap{overflow-x:auto;margin:18px 0;border:1px solid var(--oc-hair);border-radius:var(--oc-card)} .oc-ledger{width:100%;border-collapse:collapse;font-size:15px;min-width:440px} .oc-ledger th,.oc-ledger td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--oc-hair)} .oc-ledger thead th{background:var(--oc-panel-2);color:var(--oc-lime);font-family:Sora,sans-serif;font-weight:700;font-size:13.5px} .oc-ledger tbody td{color:var(--oc-mist)} .oc-ledger tbody td:first-child{color:var(--oc-snow);font-weight:600} .oc-ledger tr:last-child td{border-bottom:none} .oc-ledger .hot{color:var(--oc-flame);font-weight:800} .oc-ledger--wager thead th,.oc-ledger--wager tbody td{text-align:center} /* numbered steps */ .oc-steps{list-style:none;counter-reset:s;padding:0;margin:16px 0;display:grid;gap:12px} .oc-steps li{position:relative;counter-increment:s;padding-left:46px;color:var(--oc-mist);font-size:15.5px;min-height:32px;display:flex;align-items:center} .oc-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:10px;background:var(--oc-lime);color:var(--oc-on-lime);font-family:Sora,sans-serif;font-weight:800;font-size:16px;display:grid;place-items:center} /* studios / payments chips */ .oc-studios{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:8px 0 4px} .oc-studio{display:grid;place-items:center;background:var(--oc-panel);border:1px solid var(--oc-hair);border-radius:12px;padding:14px 16px;min-height:80px;transition:border-color .2s,transform .2s} .oc-studio img{max-height:50px;max-width:94%;width:auto;height:auto;object-fit:contain;opacity:1} .oc-studio:hover{border-color:var(--oc-hair-2);transform:translateY(-2px)} .oc-pay{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 4px} .oc-method{background:var(--oc-panel);border:1px solid var(--oc-hair);border-radius:var(--oc-rad);padding:10px 18px;font-weight:600;font-size:14px;color:var(--oc-mist);transition:color .2s,border-color .2s} .oc-method:hover{color:var(--oc-lime);border-color:var(--oc-hair-2)} @media(max-width:900px){.oc-studios{grid-template-columns:repeat(4,1fr)}} @media(max-width:520px){.oc-studios{grid-template-columns:repeat(3,1fr)}} /* checks */ .oc-checks{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px} .oc-checks li{position:relative;padding-left:30px;color:var(--oc-mist);font-size:15px;max-width:80ch} .oc-checks li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:6px;background:var(--oc-lime-soft);border:1px solid var(--oc-lime)} .oc-checks li::after{content:"";position:absolute;left:6px;top:6px;width:7px;height:4px;border-left:2px solid var(--oc-lime);border-bottom:2px solid var(--oc-lime);transform:rotate(-45deg)} /* voices / reviews */ .oc-voices__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px} .oc-voices__head .oc-band__h{margin:0} .oc-score{display:flex;align-items:center;gap:12px} .oc-score__n{font-family:Sora,sans-serif;font-weight:800;font-size:40px;line-height:1;color:var(--oc-lime)} .oc-score__stars{color:var(--oc-lime);font-size:20px;letter-spacing:2px} .oc-score__stars .half{color:var(--oc-hair-2)} .oc-score__cap{color:var(--oc-fog);font-size:13px;max-width:16ch} .oc-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .oc-voice{background:var(--oc-panel);border:1px solid var(--oc-hair);border-radius:var(--oc-card);padding:20px 22px;box-shadow:0 10px 28px rgba(0,0,0,.35)} .oc-voice__top{display:flex;align-items:center;gap:12px;margin-bottom:14px} .oc-voice__av{flex:none;width:40px;height:40px;border-radius:11px;background:var(--oc-lime);color:var(--oc-on-lime);display:grid;place-items:center;font-family:Sora,sans-serif;font-weight:800;font-size:19px} .oc-voice__name{font-weight:700;color:var(--oc-snow);font-size:15px} .oc-voice__date{font-size:12.5px;color:var(--oc-fog)} .oc-voice__stars{margin-left:auto;color:var(--oc-lime);font-size:13px;letter-spacing:1px;white-space:nowrap} .oc-voice__stars .off{color:var(--oc-hair-2)} .oc-voice p{margin:0;color:var(--oc-mist);font-size:14.5px;line-height:1.55} @media(max-width:900px){.oc-voices{grid-template-columns:1fr}} /* faq accordion */ .oc-qa{display:grid;gap:10px;margin-top:8px} .oc-qa details{background:var(--oc-panel);border:1px solid var(--oc-hair);border-radius:12px;overflow:hidden} .oc-qa summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;position:relative;font-family:Sora,sans-serif;font-weight:600;font-size:16px;color:var(--oc-snow)} .oc-qa summary::-webkit-details-marker{display:none} .oc-qa summary::after{content:"";position:absolute;right:18px;top:50%;width:11px;height:11px;border-right:2px solid var(--oc-lime);border-bottom:2px solid var(--oc-lime);transform:translateY(-70%) rotate(45deg);transition:transform .2s} .oc-qa details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .oc-qa summary:hover{color:var(--oc-lime)} .oc-qa summary:focus-visible{outline:2px solid var(--oc-lime);outline-offset:-2px} .oc-qa__b{padding:0 18px 16px} .oc-qa__b p{margin:0;color:var(--oc-mist);font-size:15px;max-width:80ch} /* responsible */ .oc-rg{background:linear-gradient(180deg,rgba(124,58,237,.08),var(--oc-void-1));border-top:1px solid var(--oc-hair);border-bottom:1px solid var(--oc-hair)} .oc-contact{margin-top:26px;padding-top:22px;border-top:1px solid var(--oc-hair)} /* footer */ .oc-foot{border-top:1px solid var(--oc-hair);background:var(--oc-void-1)} .oc-foot__wrap{padding:40px 0 120px;text-align:center} .oc-foot__top{display:flex;flex-direction:column;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--oc-hair);margin-bottom:20px} .oc-foot__top .oc-brand img{height:24px} .oc-foot__nav{display:flex;flex-wrap:wrap;gap:18px;justify-content:center} .oc-foot__nav a{color:var(--oc-mist);text-decoration:none;font-size:14px;font-weight:600} .oc-foot__nav a:hover{color:var(--oc-lime)} .oc-foot__rg{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--oc-snow);font-weight:600;font-size:15px;margin:0 0 8px} .oc-foot__help{color:var(--oc-mist);font-size:13.5px;margin:0 0 12px} .oc-foot__help a{color:var(--oc-lime)} .oc-foot__legal{color:var(--oc-fog);font-size:12.5px;line-height:1.6;max-width:88ch;margin:0 auto} /* sticky dock */ .oc-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:none;align-items:center;justify-content:center;height:54px;background:var(--oc-lime);color:var(--oc-on-lime);font:700 16px/1 Figtree,sans-serif;border-radius:14px;text-decoration:none;box-shadow:0 10px 30px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1) inset} .oc-dock:active{transform:translateY(1px)} @media(max-width:768px){.oc-dock{display:flex}.oc-foot__wrap{padding-bottom:96px}} /* responsive */ @media(max-width:768px){ .oc-shell{padding:0 18px} .oc-band{padding:52px 0} .oc-band p,.oc-checks li,.oc-qa__b p{max-width:none} } @media(prefers-reduced-motion:reduce){*{transition:none !important}.oc-tile:hover{transform:none}}