:root {
--noa-ink: #11110f;
--noa-paper: #efefec;
--noa-paper-2: #f6f6f3;
--noa-gold: #9f772b;
--noa-line: #d8d8d2;
}
html.noa-bj-lock,
html.noa-bj-lock body {
overflow: hidden !important;
}
.noa-bj-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: contain;
overscroll-behavior-x: none;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
padding: max(14px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
background: rgba(15, 15, 13, .68);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
font-family: Arial, Helvetica, sans-serif;
}
.noa-bj-overlay.is-open {
opacity: 1;
visibility: visible;
}
.noa-bj-modal {
position: relative;
flex: 0 0 auto;
width: min(430px, calc(100vw - 24px));
margin: auto 0;
overflow: visible;
max-width: 100%;
touch-action: pan-y;
overscroll-behavior-x: none;
background: var(--noa-paper);
color: var(--noa-ink);
border: 1px solid rgba(17,17,15,.08);
border-radius: 18px;
box-shadow: 0 28px 90px rgba(0,0,0,.35);
transform: translateY(10px) scale(.985);
transition: transform .22s ease;
}
.noa-bj-overlay.is-open .noa-bj-modal {
transform: translateY(0) scale(1);
}
.noa-bj-close {
position: sticky;
top: 10px;
z-index: 10;
display: block;
margin: 10px 14px 0 auto;
width: 38px;
height: 38px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(239, 239, 236, .96);
color: #6d685f;
font-size: 31px;
line-height: 1;
cursor: pointer;
backdrop-filter: blur(2px);
pointer-events: auto !important;
touch-action: manipulation;
}
.noa-bj-modal .noa-bj-close,
.noa-bj-modal .noa-bj-close:hover,
.noa-bj-modal .noa-bj-close:focus,
.noa-bj-modal .noa-bj-close:focus-visible,
.noa-bj-modal .noa-bj-close:active {
border: 0 !important;
background: rgba(239, 239, 236, .96) !important;
color: #6d685f !important;
box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
.noa-bj-modal .noa-bj-close:hover {
color: #11110f !important;
}
.noa-bj-modal h2 {
margin: 10px 58px 6px;
text-align: center;
font-size: 28px;
line-height: 1.05;
letter-spacing: -.035em;
}
.noa-bj-intro {
margin: 8px 28px 18px;
text-align: center;
color: #57544e;
font-size: 13px;
line-height: 1.45;
}
.noa-bj-table {
margin: 0 20px;
padding: 16px;
background: #121210;
border: 2px solid #24231f;
border-radius: 16px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
transition: box-shadow .22s ease, border-color .22s ease, filter .22s ease, opacity .22s ease;
}
.noa-bj-hand-block {
position: relative;
transition: opacity .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.noa-bj-hand-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 30px;
margin-bottom: 12px;
color: #f3eee2;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
letter-spacing: .08em;
}
.noa-bj-hand-label strong {
font-size: 14px;
font-weight: 900;
letter-spacing: .09em;
}
.noa-bj-score-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: #c0b9aa;
font-family: 'Courier New', Courier, monospace;
font-size: 10px;
letter-spacing: .08em;
}
.noa-bj-score-label b {
display: inline-grid;
place-items: center;
min-width: 42px;
height: 30px;
padding: 0 8px;
border: 1px solid #655027;
border-radius: 7px;
background: #1b1811;
color: #e2b65d;
font-size: 16px;
font-weight: 800;
}
.noa-bj-hand-divider {
height: 1px;
margin: 18px 0;
background: rgba(255,255,255,.12);
}
.noa-bj-cards {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-height: 70px;
}
.noa-bj-card {
position: relative;
width: 50px;
height: 70px;
border-radius: 8px;
background: #fffefa;
box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 10px 18px rgba(0,0,0,.16);
color: #171713;
font-family: Georgia, 'Times New Roman', serif;
}
.noa-bj-card-warm {
color: var(--noa-gold);
}
.noa-bj-rank {
position: absolute;
top: 8px;
left: 8px;
font-size: 17px;
font-weight: 700;
}
.noa-bj-suit {
position: absolute;
left: 50%;
bottom: 9px;
transform: translateX(-50%);
font-size: 21px;
}
.noa-bj-card-back {
display: grid;
place-items: center;
border: 1px solid #5a4924;
background:
linear-gradient(135deg, rgba(159,119,43,.16) 25%, transparent 25%) -6px 0/12px 12px,
linear-gradient(225deg, rgba(159,119,43,.16) 25%, transparent 25%) -6px 0/12px 12px,
#181713;
color: #d3a14b;
}
.noa-bj-card-back span {
width: 15px;
height: 15px;
padding: 0;
border: 1px solid #6b5425;
border-radius: 50%;
background: rgba(159,119,43,.08);
}
.noa-bj-card.is-dealing {
animation: noaDealIn .52s cubic-bezier(.2,.9,.22,1) both;
transform-origin: 80% -30%;
}
@keyframes noaDealIn {
0% {
opacity: 0;
transform: translate(20px, -18px) scale(.82) rotate(-7deg);
}
100% {
opacity: 1;
transform: translate(0, 0) scale(1) rotate(0deg);
}
}
.noa-bj-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 14px 30px 0;
}
.noa-bj-btn {
min-height: 44px;
padding: 0 18px;
border-radius: 8px;
font-weight: 900;
font-size: 13px;
letter-spacing: .08em;
cursor: pointer;
transition: transform .12s ease, opacity .12s ease;
-webkit-tap-highlight-color: transparent;
}
.noa-bj-modal .noa-bj-btn,
.noa-bj-modal .noa-bj-btn:hover,
.noa-bj-modal .noa-bj-btn:focus,
.noa-bj-modal .noa-bj-btn:focus-visible,
.noa-bj-modal .noa-bj-btn:active {
box-shadow: none !important;
outline: none !important;
}
.noa-bj-modal .noa-bj-btn-primary,
.noa-bj-modal .noa-bj-btn-primary:hover,
.noa-bj-modal .noa-bj-btn-primary:focus,
.noa-bj-modal .noa-bj-btn-primary:focus-visible,
.noa-bj-modal .noa-bj-btn-primary:active {
border: 1px solid var(--noa-ink) !important;
background: var(--noa-ink) !important;
color: #fff !important;
}
.noa-bj-modal .noa-bj-btn-secondary,
.noa-bj-modal .noa-bj-btn-secondary:hover,
.noa-bj-modal .noa-bj-btn-secondary:focus,
.noa-bj-modal .noa-bj-btn-secondary:focus-visible,
.noa-bj-modal .noa-bj-btn-secondary:active {
border: 1px solid #a9a294 !important;
background: transparent !important;
color: var(--noa-ink) !important;
}
@media (hover: hover) and (pointer: fine) {
.noa-bj-btn:hover:not(:disabled) {
transform: translateY(-1px);
}
}
.noa-bj-btn:active:not(:disabled) {
transform: translateY(0) scale(.99);
}
.noa-bj-btn:disabled {
opacity: .42;
cursor: default;
}
.noa-bj-hint {
margin: 12px 20px 22px;
text-align: center;
color: #6f6b64;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
}
.noa-bj-card.is-revealing-card {
animation: noaRevealCard .95s cubic-bezier(.2,.85,.25,1) both;
transform-origin: center;
}
.noa-bj-card.is-dealer-draw {
animation-duration: .58s;
}
@keyframes noaRevealCard {
0% { opacity: .2; transform: scaleX(.72) translateY(-3px); }
100% { opacity: 1; transform: scaleX(1) translateY(0); }
}
.noa-bj-result,
.noa-bj-success {
padding: 24px 24px 24px;
text-align: center;
}
.noa-bj-result {
margin-top: 8px;
opacity: 0;
transform: translateY(10px);
transition: opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
.noa-bj-result.is-visible {
opacity: 1;
transform: translateY(0);
}
.noa-bj-result-kicker {
min-height: 18px;
color: var(--noa-gold);
font-family: Georgia, 'Times New Roman', serif;
font-size: 13px;
font-style: italic;
}
.noa-bj-result-kicker:empty {
min-height: 18px;
}
.noa-bj-result h3,
.noa-bj-success h3 {
margin: 7px 0 5px;
font-size: 24px;
line-height: 1.08;
letter-spacing: -.03em;
}
.noa-bj-table.is-player-win ~ .noa-bj-result #noa-bj-result-title {
white-space: pre-line;
}
.noa-bj-result > p,
.noa-bj-success > p {
margin: 8px 0 14px;
color: #625e56;
font-size: 13px;
line-height: 1.5;
}
#noa-bj-claim-form input[type="email"] {
width: 100%;
height: 50px;
box-sizing: border-box;
margin: 0;
padding: 0 14px;
border: 1px solid #aaa397;
border-radius: 9px;
outline: 0;
background: #fff;
color: var(--noa-ink);
font-size: 15px;
}
#noa-bj-claim-form input[type="email"]:focus {
border-color: var(--noa-gold);
box-shadow: 0 0 0 3px rgba(159,119,43,.14);
}
.noa-bj-claim,
.noa-bj-retry-primary {
width: 100%;
margin-top: 9px;
}
.noa-bj-retry-primary[hidden] {
display: none !important;
}
.noa-bj-form-note {
margin: 9px 6px 0 !important;
color: #777168 !important;
font-size: 10px !important;
line-height: 1.4 !important;
}
.noa-bj-form-message {
min-height: 19px;
margin-top: 7px;
color: #8f2d22;
font-size: 12px;
}
.noa-bj-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
.noa-bj-success-mark {
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin: 0 auto;
border-radius: 50%;
background: var(--noa-ink);
color: #fff;
font-size: 20px;
}
.noa-bj-code-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 14px 0 4px;
padding: 11px 12px;
border: 1px dashed #9e9688;
border-radius: 9px;
background: #fff;
}
#noa-bj-code {
overflow-wrap: normal;
white-space: nowrap;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
font-weight: 900;
letter-spacing: .05em;
}
.noa-bj-copy {
border: 0;
background: transparent;
color: var(--noa-gold);
font-size: 11px;
font-weight: 900;
cursor: pointer;
white-space: nowrap;
}
.noa-bj-dealer-hand .noa-bj-hand-label strong {
color: #d7aa52;
}
.noa-bj-player-hand {
padding: 12px;
margin: -2px -4px -4px;
border-radius: 10px;
background: rgba(255,255,255,.045);
}
.noa-bj-player-hand .noa-bj-hand-label strong {
color: #fff;
}
.noa-bj-table.is-player-win .noa-bj-player-hand,
.noa-bj-table.is-dealer-win .noa-bj-dealer-hand,
.noa-bj-table.is-push .noa-bj-player-hand,
.noa-bj-table.is-push .noa-bj-dealer-hand {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 0 24px rgba(255,255,255,.10);
transform: translateY(-1px);
}
.noa-bj-table.is-player-win .noa-bj-dealer-hand,
.noa-bj-table.is-dealer-win .noa-bj-player-hand {
opacity: .45;
filter: saturate(.75);
}
.noa-bj-replay {
margin-top: 12px;
padding: 5px 4px;
border: 0 !important;
border-bottom: 1px solid #8f8778 !important;
border-radius: 0 !important;
background: transparent !important;
color: #5f5a51 !important;
box-shadow: none !important;
outline: none;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.noa-bj-replay[hidden] {
display: none !important;
}
.noa-bj-replay:hover,
.noa-bj-replay:focus,
.noa-bj-replay:focus-visible,
.noa-bj-replay:active {
border: 0 !important;
border-bottom: 1px solid var(--noa-ink) !important;
background: transparent !important;
color: var(--noa-ink) !important;
box-shadow: none !important;
}
.noa-bj-replay:focus-visible {
outline: 2px solid #7d6330 !important;
outline-offset: 3px !important;
}
.noa-bj-launcher {
position: fixed;
right: 0;
top: 50%;
z-index: 999998;
transform: translateY(-50%) rotate(-90deg) translateY(-100%);
transform-origin: top right;
padding: 10px 15px;
border: 1px solid #26251f;
border-radius: 7px 7px 0 0;
background: var(--noa-ink);
color: #fff;
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
cursor: pointer;
}
.noa-bj-launcher,
.noa-bj-launcher:hover,
.noa-bj-launcher:focus,
.noa-bj-launcher:focus-visible,
.noa-bj-launcher:active {
border-color: #26251f !important;
background: var(--noa-ink) !important;
color: #fff !important;
box-shadow: none !important;
outline: none !important;
}
.noa-bj-launcher-close {
position: fixed;
right: 8px;
top: calc(50% - 58px);
z-index: 999999;
display: grid;
place-items: center;
width: 27px;
height: 27px;
padding: 0;
border: 1px solid rgba(255,255,255,.32);
border-radius: 50%;
background: var(--noa-ink);
color: #fff;
font-size: 19px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.20);
-webkit-tap-highlight-color: transparent;
}
.noa-bj-launcher-close,
.noa-bj-launcher-close:hover,
.noa-bj-launcher-close:focus,
.noa-bj-launcher-close:focus-visible,
.noa-bj-launcher-close:active {
background: var(--noa-ink) !important;
color: #fff !important;
border-color: rgba(255,255,255,.32) !important;
box-shadow: 0 4px 14px rgba(0,0,0,.20) !important;
outline: none !important;
}
.noa-bj-launcher-close:focus-visible {
outline: 2px solid #fff !important;
outline-offset: 2px !important;
}
.noa-bj-modal .noa-bj-btn:focus-visible,
.noa-bj-modal .noa-bj-close:focus-visible {
outline: 2px solid #7d6330 !important;
outline-offset: 2px !important;
}
.noa-bj-modal .noa-bj-copy,
.noa-bj-modal .noa-bj-copy:hover,
.noa-bj-modal .noa-bj-copy:focus,
.noa-bj-modal .noa-bj-copy:focus-visible,
.noa-bj-modal .noa-bj-copy:active {
border: 0 !important;
background: transparent !important;
color: var(--noa-gold) !important;
box-shadow: none !important;
}
.screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (max-width: 480px) {
.noa-bj-overlay {
padding: max(8px, env(safe-area-inset-top)) 8px max(22px, env(safe-area-inset-bottom));
}
.noa-bj-modal {
width: min(430px, calc(100vw - 8px));
max-height: none;
border-radius: 16px;
}
.noa-bj-modal h2 {
margin: 8px 44px 6px;
font-size: 26px;
}
.noa-bj-table {
margin: 0 14px;
padding: 14px;
}
.noa-bj-actions {
margin: 14px 20px 0;
}
.noa-bj-result,
.noa-bj-success {
padding-left: 20px;
padding-right: 20px;
}
} .noa-bj-dealer-hand {
padding: 12px;
margin: -2px -4px -4px;
border-radius: 12px;
overflow: hidden;
}
.noa-bj-table.is-dealer-win .noa-bj-dealer-hand,
.noa-bj-table.is-push .noa-bj-dealer-hand {
border-radius: 12px;
}
.noa-bj-launcher-close[hidden] {
display: none !important;
}