/* Blackjack table styles. Based on blackjack-free (MIT, see LICENSE), reskinned to green felt for FindOnlineCasino.com. */
.bj{--ink-950:#04140c;--ink-900:#0b2a1a;--ink-850:#0a2216;--ink-800:#123a26;--ink-750:#1a4a31;
  --line:rgba(245,214,123,.16);--line-2:rgba(245,214,123,.3);--white:#fff;--muted:rgba(255,255,255,.78);
  --muted-2:rgba(255,255,255,.55);--nav-idle:#b9cdbf;--accent:#e0b04a;--accent-2:#f5d67b;--ok:#7be0a6;--r-lg:18px;
  font-family:var(--sans);line-height:1.5;color:#fff}
.bj{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-850)}

.bj [hidden]{display:none!important}

.bj-stagewrap{position:relative;padding:8px 10px 4px;background:var(--ink-900)}
.bj-stage{position:relative;width:100%;aspect-ratio:1000/525}
.bj-stage canvas{display:block;width:100%!important;height:auto!important;background:transparent}

.bj-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  width:100%;aspect-ratio:1000/525}
.bj-loader__logo{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.035em;color:#fff;
  opacity:.9;animation:bj-pulse 1.6s ease-in-out infinite}
.bj-loader__track{position:relative;width:min(260px,60%);height:5px;border-radius:99px;
  background:rgba(255,255,255,.1);overflow:hidden}
.bj-loader__track span{position:absolute;inset-inline-start:0;top:0;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s ease}
.bj-loader__hint{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--nav-idle)}
.bj-loader__err{padding:0 20px;text-align:center;font-size:13.5px;font-weight:600;color:#ff8a99}
@keyframes bj-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bj-loader__logo{animation:none}}

.bj-badges{position:absolute;inset:0;pointer-events:none}
.bj-badge{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;border-radius:99px;background:rgba(6,24,15,.92);border:1px solid var(--line-2);
  font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.bj-badge--dealer{transform:translate(0,-50%)}
.bj-badge b{font-size:13.5px}
.bj-badge em{font-style:normal;font-weight:700;color:var(--nav-idle);font-size:11.5px}
.bj-badge em::before{content:"●";margin-inline-end:3px;color:var(--accent-2)}
.bj-badge i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.03em}
.bj-badge.is-active{border-color:rgba(245,214,123,.85);box-shadow:0 0 0 3px rgba(224,176,74,.25)}
.bj-badge.is-bust b{color:#ff8a99}
.bj-badge.is-win,.bj-badge.is-bj{border-color:rgba(61,220,151,.6)}
.bj-badge.is-win i,.bj-badge.is-bj i{color:var(--ok)}
.bj-badge.is-lose i{color:#ff8a99}
.bj-badge.is-push i{color:var(--nav-idle)}

.bj-msg{min-height:24px;margin:6px 0 2px;text-align:center;font-size:14.5px;font-weight:700;color:#fff}

.bj-modal{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(4,16,10,.72);backdrop-filter:blur(3px);animation:bj-fade .18s ease-out}
.bj-modal__card{position:relative;width:min(400px,100%);border-radius:22px;padding:26px 22px 20px;
  text-align:center;background:var(--ink-850);border:1px solid var(--line-2);
  box-shadow:0 28px 70px rgba(0,0,0,.6);animation:bj-rise .24s cubic-bezier(.2,.9,.3,1.2)}
.bj-modal__x{position:absolute;inset-inline-end:12px;top:12px;width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--nav-idle);cursor:pointer}
.bj-modal__x svg{width:17px;height:17px}
.bj-modal__x:hover{background:rgba(255,255,255,.11);color:#fff}
.bj-modal__title{font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}
.bj-modal__title.is-win,.bj-modal__title.is-bj{color:var(--ok)}
.bj-modal__title.is-lose{color:#ff8a99}
.bj-modal__delta{margin-top:4px;font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--muted)}
.bj-modal__delta.is-up{color:var(--ok)}
.bj-modal__delta.is-down{color:#ff8a99}
.bj-modal__delta::before{content:"●";margin-inline-end:7px;font-size:18px;color:var(--accent-2);vertical-align:2px}
.bj-modal__sub{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--nav-idle)}
.bj-modal .bj-btn{width:100%;margin-top:12px}
.bj-modal__demo{min-height:48px;font-size:13.5px}
.bj-modal__note{margin-top:14px;font-size:11px;line-height:1.5;color:var(--muted-2)}
@keyframes bj-fade{from{opacity:0}to{opacity:1}}
@keyframes bj-rise{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bj-modal,.bj-modal__card{animation:none}
}

.bj-panel{padding:14px 14px 16px;background:var(--ink-850);border-top:1px solid var(--line)}
.bj-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bj-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:56px;padding:0 14px;
  border-radius:14px;border:1px solid rgba(255,255,255,.07);background:#174a30;color:#fff;
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:background .16s,transform .16s,opacity .16s,border-color .16s}
.bj-btn:hover:not(:disabled){background:#1f5e3d;transform:translateY(-1px)}
.bj-btn:active:not(:disabled){transform:translateY(0)}
.bj-btn:disabled{opacity:.34;cursor:not-allowed}
.bj-btn i{display:inline-flex;width:19px;height:19px;flex:none}
.bj-btn i svg{width:100%;height:100%}
.bj-btn--hit i{color:#3ddc97}
.bj-btn--stand i{color:#ff6b7d}
.bj-btn--split i{color:#8fa8ff}
.bj-btn--double i{color:#ffb545}
.bj-btn--go{background:var(--accent);border-color:transparent;box-shadow:0 12px 26px rgba(224,176,74,.3)}
.bj-btn--go:hover:not(:disabled){background:#f5d67b}
.bj-btn--ghost{background:transparent;border-color:var(--line-2)}

.bj-betbar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:stretch}
.bj-field{display:flex;flex-direction:column;justify-content:center;gap:8px;
  border-radius:14px;border:1px solid rgba(255,255,255,.07);background:#0f3a25;padding:10px 12px}
.bj-field__top{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:var(--nav-idle)}
.bj-field__bal b{color:#fff}
.bj-field__row{display:flex;align-items:center;gap:7px}
.bj-cur{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:50%;background:var(--accent);color:#fff;font-size:11px}
.bj-input{flex:1;min-width:0;border:none;background:none;color:#fff;font:inherit;font-size:18px;
  font-weight:800;outline:none;padding:2px 0}
.bj-input::-webkit-outer-spin-button,.bj-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bj-input[type=number]{-moz-appearance:textfield;appearance:textfield}
.bj-chip{border:none;border-radius:9px;background:#1f5e3d;color:#fff;font:inherit;font-size:12px;
  font-weight:800;padding:8px 12px;cursor:pointer;transition:background .16s}
.bj-chip:hover{background:#27704a}
.bj-place{min-width:180px}

.bj-rules{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bj-rule{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:11px;
  font-weight:700;color:var(--muted);background:rgba(255,255,255,.04)}
.bj-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;
  font-size:11.5px;font-weight:600;color:var(--nav-idle)}
.bj-meta button{border:none;background:none;color:var(--accent-2);font:inherit;font-size:11.5px;
  font-weight:700;cursor:pointer;text-decoration:underline;padding:0}

.strat{margin-top:34px}
.strat__sub{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--nav-idle)}
.strat__figure{margin:18px 0 0;padding:0}
.strat__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--ink-850);
  -webkit-overflow-scrolling:touch}
.strat__table{border-collapse:separate;border-spacing:2px;width:100%;min-width:760px;padding:8px}
.strat__caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.strat__table th,.strat__table td{text-align:center;font-size:12px;font-weight:800;border-radius:5px;
  padding:7px 2px;white-space:nowrap}
.strat__table thead th{background:rgba(255,255,255,.05);color:var(--muted);font-weight:700}
.strat__table tbody th{background:rgba(255,255,255,.07);color:#fff;min-width:34px}
.st-corner{min-width:92px;background:transparent!important;padding:6px 8px!important;text-align:start!important}
.st-corner__in{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.st-corner i,.st-corner b{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--nav-idle);line-height:1.15;white-space:nowrap}
.st-corner i::before{content:"↑ "}
.st-corner b::before{content:"← "}
.strat__table td{color:#08110c}
.st-h{background:#37c26b}
.st-s{background:#e2495c;color:#fff0f2}
.st-d{background:#f2d24b}
.st-ds{background:#f2b134}
.strat__table td:hover{outline:2px solid #fff;outline-offset:-2px}

.strat__legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding:0}
.st-key{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.st-key b{color:#fff;font-weight:700}
.st-chip{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;
  border-radius:6px;font-size:11.5px;font-weight:800;color:#08110c;flex:none}
.st-chip.st-s{color:#fff0f2}
.article__p--note{font-size:13.5px;color:var(--nav-idle)}

@media (max-width:700px){
  .strat__table{min-width:700px}
  .strat__table th,.strat__table td{font-size:11px;padding:6px 1px}
  .st-corner{min-width:72px}
  .bj-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bj-betbar{grid-template-columns:1fr}
  .bj-place{width:100%}
  .bj-badge{height:25px;font-size:11.5px;padding:0 8px;gap:4px}
  .bj-btn{min-height:52px;font-size:14px}
}
@media (max-width:430px){
  .bj-badge em{display:none}
  .bj-stagewrap{padding:6px 6px 2px}
}

.bj-btn--go{color:#1b1204}
.bj-stagewrap{background:radial-gradient(ellipse at 50% 0%,#14402a 0%,#0b2a1a 70%)}
.bj-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.bj-chipbtn{width:52px;height:52px;padding:0;border:none;border-radius:50%;background:transparent center/contain no-repeat;
  cursor:pointer;color:#fff;font:800 13px/1 var(--sans);text-shadow:0 1px 2px #000;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
  transition:transform .15s}
.bj-chipbtn:hover{transform:translateY(-3px)}
.bj-chipbtn[data-bet="1"]{background-image:url(/play/assets/chips/chip-1.webp)}
.bj-chipbtn[data-bet="5"]{background-image:url(/play/assets/chips/chip-5.webp)}
.bj-chipbtn[data-bet="10"]{background-image:url(/play/assets/chips/chip-10.webp)}
.bj-chipbtn[data-bet="25"]{background-image:url(/play/assets/chips/chip-25.webp)}
.bj-chipbtn[data-bet="100"]{background-image:url(/play/assets/chips/chip-100.webp)}
.bj-meta button{color:var(--accent-2)}
.bj-modal__delta::before{content:"";}
@media (max-width:700px){.bj-chipbtn{width:46px;height:46px}}
.bj-input{width:auto;min-width:3rem}
@media (max-width:700px){.bj-field__row{flex-wrap:wrap}.bj-chip{padding:8px 10px}.bj{margin-inline:-0.4rem}}
