/* Video Poker: a calm night-blue table, paper-white cards, warm amber for what pays. */
:root{
  --lacquer:#16213A;--lacquer-hi:#1F2C4C;--ink:#F4F6FB;--ink-soft:#C4CCE0;--ink-dim:#8C97B4;
  --hair:rgba(255,200,87,.34);--brass:#FFC857;--brass-lo:#E39B2D;--brass-hi:#FFE6A8;--jade:#2FA37A;
  --serif:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --red:#C8323C;--black:#1D2433;--cw:80px;
}
body{background:radial-gradient(120% 90% at 50% 0%,#24345E 0%,#16213A 55%,#0E1528 100%) fixed #16213A;font-size:19px}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}

/* home */
.home{align-items:center;justify-content:center;gap:.8em;padding:1.2em;text-align:center}
.home .title{font-family:var(--serif);font-size:clamp(2.6em,12vw,4.6em);font-weight:900;color:var(--brass);letter-spacing:.01em;
  text-shadow:0 3px 0 #7A4B0E,0 8px 22px rgba(0,0,0,.45)}
.fan{display:flex;justify-content:center;height:3.2em;margin:.1em 0 .2em}
.fan span{width:2.3em;height:3.1em;border-radius:.3em;background:#fff;color:var(--black);font:900 1em/1 var(--serif);display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.4);margin:0 -.35em;border:1px solid #d9dce6}
.fan span.r{color:var(--red)}
.fan span:nth-child(1){transform:rotate(-16deg) translateY(.35em)}.fan span:nth-child(2){transform:rotate(-8deg) translateY(.08em)}
.fan span:nth-child(4){transform:rotate(8deg) translateY(.08em)}.fan span:nth-child(5){transform:rotate(16deg) translateY(.35em)}
.tagline{margin:0;color:var(--ink);font-size:1.15em;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.free{margin:0;color:var(--brass-hi);font-size:.9em;font-weight:700;background:rgba(255,200,87,.1);border:1px solid var(--hair);border-radius:999px;padding:.35em 1em}
.lead{display:flex;flex-direction:column;align-items:center;gap:.45em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.6em;width:min(23em,100%)}
.levels{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:100%}
.levels .choice{min-height:50px;min-width:44px;padding:.2em;font:800 1.3em/1 var(--serif);color:var(--ink);background:rgba(14,21,40,.78);border:2px solid rgba(196,204,224,.25);border-radius:14px}
.levels .choice[aria-pressed=true]{background:var(--brass);border-color:#fff;color:#3B2606}
.levels .choice:disabled{opacity:.45}
.lvl-note{margin:0;color:var(--ink);font-weight:700;font-size:.95em;min-height:1.4em;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.pill{font-family:var(--serif)}
.menu-col .pill{min-width:12em;min-height:52px}
.pill.alt{background:rgba(244,246,251,.92);color:#16213A;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home .link{min-height:44px;font-size:1em;color:var(--brass-hi);font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (max-width:420px){.levels{grid-template-columns:repeat(4,1fr)}}
@media (max-height:600px){.home .fan{display:none}}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:nowrap;gap:1.5em;padding:.5em 1em}
  .home .lead{flex:1 1 0;min-width:0}
  .home .menu-col{flex:none;width:min(23em,max(392px,56%))}
  .home .title{font-size:2.6em}
  .lvl-note{font-size:.85em}
  .menu-col{gap:.35em}
  .menu-col .pill{min-height:46px}
  .levels .choice{min-height:46px}
  .tagline{font-size:1em}
  .free{font-size:.8em}
}
@media (max-height:480px) and (max-width:700px){.home .title{font-size:2.1em}.home .tagline{font-size:.88em}.home{gap:.8em}}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}}

/* the table */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#game .bar{padding:max(.35em,env(safe-area-inset-top)) max(.7em,env(safe-area-inset-right)) .3em max(.7em,env(safe-area-inset-left));gap:.6em}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:44px;min-height:44px;border-color:var(--brass);background:radial-gradient(circle at 35% 30%,#33467a,var(--lacquer) 70%)}
.hud{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.15;color:var(--ink)}
.hud b{font:900 1em/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--ink-soft)}
.hud span{font:900 1.4em/1.15 var(--serif);white-space:nowrap;color:var(--brass);font-variant-numeric:tabular-nums;transition:transform .15s}
.hud span.pop{transform:scale(1.15)}
.goal{flex:none;min-width:4.6em;display:flex;flex-direction:column;align-items:center;background:rgba(244,246,251,.1);border:1px solid rgba(196,204,224,.3);border-radius:14px;padding:.2em .6em;color:var(--ink);line-height:1.1}
.goal small{font-size:.7em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.goal b{font:900 1.25em/1.1 var(--serif)}
.meter{height:8px;margin:0 max(.9em,env(safe-area-inset-left));background:rgba(14,21,40,.7);border-radius:4px;overflow:hidden;border:1px solid rgba(196,204,224,.25);flex:none}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7CC6FF,var(--brass));transition:width .35s}

.area{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--gap,10px);padding:var(--gap,10px) max(var(--gap,10px),env(safe-area-inset-right)) max(var(--gap,10px),env(safe-area-inset-bottom)) max(var(--gap,10px),env(safe-area-inset-left))}
.area.wide{flex-direction:row;align-items:center}
.side{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap,10px)}

/* the pay table */
.pays{flex:none;display:grid;grid-template-columns:1fr repeat(5,auto);background:rgba(14,21,40,.72);border:1px solid rgba(196,204,224,.22);border-radius:14px;
  padding:.25em .4em;font-size:var(--pf,15px);line-height:1;align-content:center;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.area.wide .pays{width:auto;max-width:var(--pw,40%);align-self:center;overflow:hidden}
.pays > div{display:contents}
.pays span{padding:var(--pr,4px) .45em;text-align:right;white-space:nowrap;border-radius:6px}
.pays span:first-child{text-align:left;font-weight:800;color:var(--ink)}
.pays span.on{color:var(--brass-hi);background:rgba(255,200,87,.12);font-weight:800}
.pays.one{grid-template-columns:1fr auto}.pays.one span.col{display:none}
.pays.one span.col.on{display:block}
.pays .head span{font-size:.78em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.pays .hit span{background:var(--brass);color:#3B2606!important;animation:hit .5s ease-in-out 3}
.pays .hit span:first-child{border-radius:6px 0 0 6px}
@keyframes hit{50%{filter:brightness(1.25)}}

/* the message over the cards */
.msg{margin:0;min-height:1.3em;font:900 1.25em/1.3 var(--serif);color:var(--ink);text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.msg.win{color:var(--brass);animation:pop .35s}
.msg.quiet{color:var(--ink-soft);font-weight:700;font-size:1.05em}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1)}}

/* the cards */
.hand{display:flex;gap:calc(var(--cw)*.1);justify-content:center;padding-top:calc(var(--cw)*.24)}
.pc{position:relative;width:var(--cw);height:calc(var(--cw)*1.4);padding:0;border:0;background:none;perspective:600px;flex:none;border-radius:calc(var(--cw)*.1);
  transition:transform .14s ease-out}
.pc .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .2s ease-in-out}
.pc.down .in{transform:rotateY(180deg)}
.pc .face,.pc .back{position:absolute;inset:0;border-radius:calc(var(--cw)*.1);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pc .face{background:linear-gradient(170deg,#FFFFFF,#F3F1EA);box-shadow:0 0 0 1px rgba(0,0,0,.14),0 calc(var(--cw)*.05) calc(var(--cw)*.14) rgba(0,0,0,.4);color:var(--black);overflow:hidden}
.pc.red .face{color:var(--red)}
.pc .back{transform:rotateY(180deg);background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 2px,transparent 2px 11px),repeating-linear-gradient(-45deg,rgba(255,255,255,.13) 0 2px,transparent 2px 11px),
  linear-gradient(160deg,#3F6FD8,#2A4AA3);box-shadow:inset 0 0 0 calc(var(--cw)*.05) #fff,0 0 0 1px rgba(0,0,0,.2),0 calc(var(--cw)*.05) calc(var(--cw)*.14) rgba(0,0,0,.4)}
.pc .ix{position:absolute;left:.12em;top:.1em;font:900 calc(var(--cw)*.3)/1 var(--serif);text-align:center;width:1.2em;letter-spacing:-.04em}
.pc .ix i{display:block;font-style:normal;font-size:.8em;margin-top:.05em}
.pc .ix.bot{left:auto;top:auto;right:.12em;bottom:.1em;transform:rotate(180deg)}
.pc .pip{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:400 calc(var(--cw)*.62)/1 Arial,"Segoe UI Symbol",sans-serif}
.pc .pip.face-card{font:900 calc(var(--cw)*.5)/1 var(--serif)}
.pc .tag{position:absolute;left:50%;top:calc(var(--cw)*-.25);transform:translateX(-50%) scale(.6);opacity:0;font:900 calc(max(13px,var(--cw)*.17))/1 var(--serif);letter-spacing:.08em;
  color:#3B2606;background:var(--brass);border-radius:999px;padding:.18em .55em;transition:opacity .12s,transform .12s;pointer-events:none;white-space:nowrap}
.pc.held{transform:translateY(calc(var(--cw)*-.12))}
.pc.held .tag{opacity:1;transform:translateX(-50%) scale(1)}
.pc.held .face{box-shadow:0 0 0 calc(max(3px,var(--cw)*.035)) var(--brass),0 calc(var(--cw)*.08) calc(var(--cw)*.2) rgba(0,0,0,.5)}
.pc.tip::after{content:"";position:absolute;inset:calc(var(--cw)*-.06);border-radius:calc(var(--cw)*.14);border:3px dashed #7CC6FF;animation:tip 1s ease-in-out infinite;pointer-events:none}
@keyframes tip{50%{opacity:.4}}
.pc.dim .face{filter:brightness(.62) saturate(.7)}
.pc.lit .face{box-shadow:0 0 0 calc(max(3px,var(--cw)*.035)) #fff,0 0 calc(var(--cw)*.3) var(--brass),0 calc(var(--cw)*.05) calc(var(--cw)*.14) rgba(0,0,0,.4)}
.pc.lit{animation:lift .4s ease-out}
@keyframes lift{40%{transform:translateY(calc(var(--cw)*-.12)) scale(1.05)}}
.pc:focus-visible{outline:3px solid #7CC6FF;outline-offset:4px}
.pc.cur{outline:3px solid #7CC6FF;outline-offset:4px}

/* the buttons under the cards */
.controls{display:flex;align-items:center;justify-content:center;gap:.5em;flex-wrap:nowrap;width:100%}
.bet{display:flex;align-items:center;gap:.15em;background:rgba(14,21,40,.72);border:1px solid rgba(196,204,224,.22);border-radius:999px;padding:3px}
.bet b{font:900 1.05em/1 var(--serif);min-width:3.4em;text-align:center;color:var(--ink);white-space:nowrap}
.step{width:44px;height:44px;border-radius:50%;border:0;background:rgba(244,246,251,.12);font:900 1.4em/1 var(--serif);color:var(--ink);padding:0}
.step:disabled,.soft:disabled{opacity:.35}
.soft{min-height:50px;min-width:50px;border-radius:999px;border:2px solid #7CC6FF;background:rgba(124,198,255,.12);color:#CFE8FF;font:800 1em/1 var(--serif);display:inline-flex;align-items:center;gap:.35em;padding:0 .9em}
.soft svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#deal{min-width:6.2em;min-height:52px;padding:.5em 1.4em;font-size:1.25em}
#deal:disabled{filter:saturate(.4) brightness(.8)}
.step:active,.soft:active{transform:scale(.94)}
@media (max-width:440px){.soft .w{display:none}.soft{padding:0 .7em}#deal{min-width:5em;padding:.5em 1em}.controls{gap:.35em}.bet b{min-width:3em}}
@media (max-height:480px){#game .bar{padding-top:max(.2em,env(safe-area-inset-top));padding-bottom:.15em}#game .bar .jewel{width:44px;height:44px}
  .hud{flex-direction:row;gap:.6em;align-items:baseline;justify-content:center}.msg{font-size:1.05em}#deal{min-height:46px}.soft{min-height:46px}}

.card .big{font:900 1.35em/1.3 var(--serif);text-align:center;margin:0 0 .4em;color:var(--brass-hi)}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .pill,.card .row,.card .choice{min-height:44px}
.card .row{color:var(--ink);font-weight:700}
@media (max-height:420px){.card{font-size:.9em}.card .big{margin:0 0 .2em}}
.card{background:var(--lacquer-hi)}
.card .actions{background:var(--lacquer-hi)}
.toast{pointer-events:none;max-width:calc(100% - 2em);text-align:center;bottom:max(5.5em,calc(env(safe-area-inset-bottom) + 5em))}
html.fast .pc .in,html.fast .pc,html.fast .pc .tag{transition-duration:.04s}
html.fast .msg.win,html.fast .pc.lit{animation-duration:.08s}
#game.tight .soft .w{display:none}#game.tight .soft{padding:0 .7em}#game.tight #deal{min-width:4.6em;padding:.5em .9em}#game.tight .controls{gap:.35em}#game.tight .bet b{min-width:2.9em}
.pays.two{grid-template-columns:1fr auto 1fr auto}.pays.two .head span{display:none!important}