/* game-single.css — Single-hand video poker game UI (classic machine layout)
   Shared by all 120 base/variant game pages. */

*{margin:0;padding:0;box-sizing:border-box}

/* ── Body ── */
body{background:#002D8A;min-height:100vh;font-family:'Arial Black',Arial,sans-serif;color:#fff;display:flex;flex-direction:column;align-items:center}

/* ── Site header ── */
.site-header{width:100%;background:rgba(0,20,80,.95);border-bottom:1px solid rgba(255,215,0,.2);position:sticky;top:0;z-index:50}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1200px;margin:0 auto}
.site-brand{font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:900;letter-spacing:3px;color:#ffe033;text-decoration:none;text-transform:uppercase}
.site-brand:hover{color:#fff}
.site-nav{display:flex;gap:24px}
.site-nav a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.82rem;font-weight:600;letter-spacing:.5px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;transition:color .15s}
.site-nav a:hover{color:#ffe033}

/* ── Game title bar ── */
.game-title-bar{width:100%;text-align:center;padding:10px 0 6px;background:linear-gradient(180deg,#002266 0%,#002D8A 100%);border-bottom:1px solid rgba(255,215,0,.15)}
.game-title{font-family:'Luckiest Guy',cursive;font-size:1.3rem;text-transform:uppercase;color:#FFD700;font-weight:400;letter-spacing:1px;text-shadow:0 -2px 0 #000,0 2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-1.4px -1.4px 0 #000,1.4px -1.4px 0 #000,-1.4px 1.4px 0 #000,1.4px 1.4px 0 #000}

/* ── Hand count switcher ── */
.hands-sw{display:flex;justify-content:center;gap:4px;padding:6px 12px 2px;max-width:620px;margin:0 auto}
.hands-sw a,.hands-sw span{display:inline-block;padding:3px 10px;font-size:.62rem;font-weight:700;letter-spacing:.8px;border-radius:4px;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;transition:all .15s;border:1px solid transparent}
.hands-sw a{color:rgba(255,255,255,.5);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.hands-sw a:hover{color:#ffe033;background:rgba(255,215,0,.08);border-color:rgba(255,215,0,.25)}
.hands-sw .active{color:#ffe033;background:linear-gradient(180deg,rgba(255,215,0,.15),rgba(255,180,0,.08));border-color:rgba(255,215,0,.35);font-weight:900;cursor:default}
.hands-sw .soon{color:rgba(255,255,255,.2);background:transparent;border-color:rgba(255,255,255,.04);cursor:default}

/* ── Variant switcher ── */
.var-sw{display:flex;justify-content:center;align-items:center;gap:3px;padding:2px 12px 4px;max-width:620px;margin:0 auto}
.var-sw a,.var-sw span.active{display:inline-block;padding:2px 7px;font-size:.56rem;font-weight:700;letter-spacing:.4px;border-radius:3px;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;transition:all .15s;border:1px solid transparent}
.var-sw a{color:rgba(255,255,255,.4);background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}
.var-sw a:hover{color:#7dd3fc;background:rgba(125,211,252,.08);border-color:rgba(125,211,252,.25)}
.var-sw .active{color:#7dd3fc;background:linear-gradient(180deg,rgba(125,211,252,.12),rgba(56,189,248,.06));border-color:rgba(125,211,252,.3);font-weight:900;cursor:default}

/* ── Game wrapper ── */
#game{width:100%;max-width:620px;margin:0 auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px;min-height:calc(100vh - 56px);justify-content:flex-start;background:radial-gradient(ellipse at 50% 40%,rgba(20,50,140,.3) 0%,rgba(10,30,100,.1) 50%,transparent 80%)}

/* ══════════════════════════════════════════════
   CLASSIC MACHINE LAYOUT ORDER
   DOM:  payout → cbar → cards → msg → btns
   Show: payout → msg → cards → cbar → btns
   ══════════════════════════════════════════════ */
#payout-table{order:1}
#coach-bar{order:2}
#coach-meta{order:3;display:none!important}
#msg{order:4}
#cards{order:5}
#cbar{order:6}
#btns{order:7}
#ad-slot{order:8}
#coach-advice{font-size:1rem!important;line-height:1.4!important}
#coach-advice .ev{font-size:1.15rem!important;font-weight:900!important;color:#4cff7c!important;text-shadow:0 0 8px rgba(76,255,124,.4)}

/* ── PAY TABLE (CSS Grid — consistent column widths across all rows) ── */
#payout-table{display:grid;grid-template-columns:auto repeat(5,1fr);background:#002570;border:2px solid #FFD700;border-radius:3px;overflow:hidden;margin-bottom:4px;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.pr{display:contents}
.pr .hn,.pr .pv{border-bottom:1px solid rgba(255,215,0,.15)}
.pr:last-child .hn,.pr:last-child .pv{border-bottom:none}
.pr .hn{white-space:nowrap;padding:2px 12px;color:#FFD700;text-transform:uppercase;letter-spacing:.3px;font-size:.78rem;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.2;display:flex;align-items:center}
.pr .pv{position:relative;transition:all 0.25s ease-in-out;padding:1px 6px;color:#FFD700;font-weight:600;font-size:.78rem;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1;display:flex;align-items:center;justify-content:flex-end}
.pr .pv::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,215,0,.35)}
.pr .ch{background:#E03030!important;color:#FFD700!important;font-weight:900;text-shadow:none;border-bottom-color:#E03030!important}
.pr .ch::before{background:#E03030}
.pr:last-child .ch{border-bottom:none!important}
.pr.win .hn,.pr.win .pv{background:linear-gradient(90deg,rgba(255,215,0,.25),rgba(255,215,0,.12))!important;animation:wp .4s ease}
.pr.win .hn{color:#fff!important;font-weight:900;text-shadow:0 0 8px rgba(255,215,0,.6)}
.pr.win .pv{color:#ffd700!important}
.pr.win .ch{background:#CC0000!important;color:#fff!important;border-bottom-color:#CC0000!important}
@keyframes wp{0%{background:rgba(255,215,0,0)}40%{background:rgba(255,215,0,.35)}100%{background:rgba(255,215,0,.18)}}

/* ── MESSAGE — prominent winning hand display (between pay table and cards) ── */
#msg{display:none}

/* ── CARDS ── */
#cards{display:flex;gap:6px;justify-content:center;padding:0 2px;perspective:1000px;height:178px;align-items:flex-start;user-select:none;-webkit-user-select:none}
.cs{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:180px;position:relative;padding-top:22px}
.card{container-type:size;width:112px;aspect-ratio:5/7;background:#fff;border-radius:6px;border:1px solid rgba(0,0,0,0.08);display:flex;flex-direction:column;justify-content:space-between;padding:6px;cursor:pointer;position:relative;transition:transform .15s,box-shadow .15s;user-select:none;transform-style:preserve-3d;backface-visibility:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.card.held{border-color:#ffe033;box-shadow:0 0 18px rgba(255,224,0,.9);transform:translateY(-8px)}
.card.wc{border-color:#ffe033;box-shadow:0 0 20px rgba(255,224,51,.8);animation:cardWin 1.6s ease-in-out infinite;transform:translateY(-8px)}
@keyframes cardWin{0%,100%{box-shadow:0 0 12px rgba(255,224,51,.5)}50%{box-shadow:0 0 28px rgba(255,224,51,1),0 0 48px rgba(255,180,0,.3)}}
.card.fd{background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(255,215,0,.1) 7px,rgba(255,215,0,.1) 8px),repeating-linear-gradient(-45deg,transparent,transparent 7px,rgba(255,215,0,.1) 7px,rgba(255,215,0,.1) 8px),linear-gradient(180deg,#001C6E 0%,#001450 50%,#000D3A 100%);border-color:#FFD700;box-shadow:inset 0 0 12px rgba(0,16,72,.4),0 2px 8px rgba(0,0,0,.3)}
.card.dealing{animation:di .32s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes di{from{opacity:0;transform:translateX(-100px) rotate(-8deg)}to{opacity:1;transform:translateX(0) rotate(0deg)}}

/* Card face content */
.cc{font-family:'Fredoka One',cursive;position:absolute;top:2%;left:8%;width:25%;display:flex;flex-direction:column;align-items:center}
.cc .cr{font-size:40cqi;line-height:0.9;margin-bottom:1cqi}
.cc .csuit{font-size:28cqi;line-height:1;font-variant-emoji:text;font-family:sans-serif}
.cc.bot{display:none}
.cm{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);font-family:'Fredoka One',cursive;font-size:75cqi;line-height:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15));display:flex;justify-content:center;align-items:center;font-variant-emoji:text;font-family:sans-serif}
.cp{position:absolute;top:4%;right:4%;width:64cqi;height:64cqi;border-radius:3cqi;pointer-events:none;object-fit:contain}
.cm-img{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);width:70cqi;height:70cqi;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
.red{color:#FF0000}.black{color:#000000}

/* Wild card watermark (deuces/joker games) */
.cw{position:absolute;top:3%;right:5%;text-align:right;pointer-events:none;z-index:1}
.w1,.w2,.w3{display:block;font-weight:900;line-height:1.1;letter-spacing:.5px;text-transform:uppercase;font-family:'Fredoka One',cursive}
.w1{font-size:16cqi;opacity:.3}
.w2{font-size:12cqi;opacity:.22}
.w3{font-size:9cqi;opacity:.15}

/* HOLD label */
.hl{position:absolute;top:0;left:0;width:100%;text-align:center;font-size:.85rem;font-weight:900;color:#ffe033;letter-spacing:3px;text-transform:uppercase;height:22px;line-height:22px;text-shadow:0 0 10px rgba(255,224,0,.8)}

/* Full-width card layout (all devices) */
#game > #payout-table,
#game > #cbar,
#game > #cards,
#game > #msg,
#game > #btns,
#game > #ad-slot{width:100%;margin-left:auto;margin-right:auto}
#cards{width:100%!important;padding:0 2.5%!important;justify-content:space-between!important;gap:clamp(3px,1vw,8px)!important;height:auto!important;align-items:flex-start!important;margin-bottom:2px}
.cs{flex:1 1 0!important;min-width:0!important;height:auto!important}
.card{width:100%!important;height:auto!important;aspect-ratio:5/7!important;max-width:none!important}

/* ── CREDITS BAR (below cards, classic machine order: WIN | BET | CREDITS) ── */
#cbar{display:flex;background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none;padding:10px 0 6px}
.ci{flex:1;text-align:center;padding:6px 8px}
.ci+.ci{border-left:none}
.ci:nth-child(1){order:3}
.ci:nth-child(2){order:2}
.ci:nth-child(3){order:1}
.cl{font-size:.7rem;color:#FFD700;text-transform:uppercase;letter-spacing:2px;margin-bottom:2px;font-family:'Arial Black',Arial,sans-serif;font-weight:900}
.cv{font-size:1.6rem;font-weight:900;color:#fff;font-family:'Arial Black',Arial,sans-serif;line-height:1;font-variant-numeric:tabular-nums;transition:color .3s;text-shadow:0 0 8px rgba(255,255,255,.2)}
#wv{color:rgba(255,255,255,.25);font-size:1.8rem;font-weight:900;font-family:'Arial Black',Arial,sans-serif}
#wv.active{color:#4cff7c;text-shadow:0 0 16px rgba(76,255,124,.5)}

/* ── BUTTONS — classic machine control panel ── */
#btns{display:flex;justify-content:space-between;align-items:center;gap:8px}
#btns-left{display:flex;gap:8px}
#btns-right{display:flex;gap:8px}

@media (min-width:769px){
  #btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center}
  #btns-left,#btns-right{display:contents}
  .btn{width:100%!important;min-width:0}
}

.btn{border:none;border-radius:8px;padding:12px 0;height:50px;font-weight:900;cursor:pointer;text-transform:uppercase;font-family:'Arial Black',Arial,sans-serif;font-size:0.85rem;display:inline-flex;align-items:center;justify-content:center;transition:all .12s ease;letter-spacing:1px;background:linear-gradient(180deg,#FFE44D 0%,#F0C800 35%,#D4A800 65%,#B89000 100%);color:#111;border:3px solid #A07800;box-shadow:0 4px 0 #705000,inset 0 2px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 rgba(255,255,255,.15)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 #705000,inset 0 2px 4px rgba(0,0,0,.3);filter:brightness(.85)}
.btn:disabled{opacity:.3;filter:grayscale(.6) brightness(.5);box-shadow:none;cursor:not-allowed;transform:none}

.b1btn,.clearbtn,.holdallbtn,.dealbtn,.drawbtn,.b5btn,.mbtn{background:linear-gradient(180deg,#FFE44D 0%,#F0C800 35%,#D4A800 65%,#B89000 100%);color:#111;border:3px solid #A07800;box-shadow:0 4px 0 #705000,inset 0 2px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 rgba(255,255,255,.15)}
.btn:hover:not(:disabled){background:linear-gradient(180deg,#FFEA66 0%,#F8D400 35%,#DDBB00 65%,#C49800 100%);box-shadow:0 4px 0 #705000,inset 0 2px 0 rgba(255,255,255,.4),0 0 12px rgba(255,215,0,.3)}

@keyframes btnAppear{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.dealbtn,.drawbtn{animation:btnAppear .25s ease-out}

/* ── Ad slot ── */
#ad-slot{display:none!important;width:100%;height:56px;align-items:center;justify-content:center;background:linear-gradient(180deg,#111 0%,#050505 100%);border:1px solid #2f2f2f;border-radius:5px;color:#9aa4bf;font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* ── Confetti ── */
#cel{display:none;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:100;overflow:hidden}
.cf{position:absolute;width:10px;height:10px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

@media(max-width:768px){
  body{overflow-x:hidden}
  #game{max-width:100%;padding:6px 6px 6px;gap:4px;min-height:auto;max-height:none;overflow:visible}
  .site-brand{font-size:.9rem;letter-spacing:2px}
  .site-header-inner{padding:10px 12px}
  .site-nav{gap:16px}
  .site-nav a{font-size:.75rem}
  .game-title{font-size:1.05rem;letter-spacing:1px}
  .game-title-bar{padding:8px 0 4px}

  .hands-sw{gap:3px;padding:5px 6px 2px}
  .hands-sw a,.hands-sw span{font-size:.50rem;padding:3px 6px;letter-spacing:.3px}

  #payout-table{border-radius:3px;margin-bottom:4px}
  #cbar{margin-bottom:2px}
  #cards{margin-bottom:1px}
  .pr .hn{font-size:.60rem;letter-spacing:.2px}
  .pr .pv{font-size:.66rem}
  .pr .ch{font-size:.72rem}

  .ci{padding:5px 4px}
  .cl{font-size:.6rem;letter-spacing:1.5px}
  .cv,#wv{font-size:1.4rem}

  #cards{height:114px;gap:3px;padding:0}
  .cs{height:114px;padding-top:22px;justify-content:flex-end}
  .card{padding:3px;border-radius:6px}

  .hl{top:0;font-size:.6rem;letter-spacing:1.5px;height:20px;line-height:20px}

  #msg{height:24px}
  #rm{font-size:.78rem;letter-spacing:1.2px}
  #rm.nw{font-size:.68rem}

  #btns{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  #btns-left,#btns-right{display:contents}
  .btn{height:44px;min-width:0;width:100%;padding:0 8px;font-size:.72rem;letter-spacing:.5px;border-radius:6px}
  .clearbtn{grid-column:1;grid-row:1;width:100%}
  .holdallbtn{grid-column:2;grid-row:1}
  .b1btn{grid-column:1;grid-row:2}
  .dealbtn,.drawbtn{grid-column:2;grid-row:2;font-size:.78rem;letter-spacing:.8px}

  #ad-slot{position:fixed;left:0;right:0;bottom:0;z-index:40;height:48px;padding-bottom:env(safe-area-inset-bottom);border-radius:0;border-left:none;border-right:none;border-bottom:none;font-size:.66rem;letter-spacing:1px}
}

@media(max-width:430px){
  #game{padding:5px 5px 5px}
  .hands-sw{gap:2px;padding:4px 4px 2px}
  .hands-sw a,.hands-sw span{font-size:.46rem;padding:2px 5px;letter-spacing:.2px}
  .pr .hn{font-size:.56rem}
  .pr .pv{font-size:.62rem}
  .pr .ch{font-size:.68rem}

  #cards{height:100px;gap:2px}
  .cs{height:100px;padding-top:20px;justify-content:flex-end}
  .card{padding:2px}

  .btn{height:40px;font-size:.64rem}
  .cl{font-size:.55rem}
  .cv,#wv{font-size:1.3rem}
  #rm{font-size:.7rem}
  #ad-slot{height:44px;font-size:.60rem;padding-bottom:env(safe-area-inset-bottom)}
}

/* iPhone 12/13 mini */
@media (min-width:370px) and (max-width:380px) and (min-height:780px){
  #cards{height:110px}
  .cs{height:110px;padding-top:22px;justify-content:flex-end}
  .card{padding:3px}
  .btn{height:40px;font-size:.66rem}
}

/* Medium+ phones */
@media (min-width:390px) and (max-width:430px){
  #cards{height:132px}
  .cs{height:132px;padding-top:24px;justify-content:flex-end}
  .card{padding:3px}
}

@media (min-width:431px){
  #cards{height:138px}
  .cs{height:138px;padding-top:26px;justify-content:flex-end}
  .card{padding:3px}
}

/* iPhone SE */
@media (min-width:370px) and (max-width:380px) and (max-height:700px){
  header h1{font-size:1.00rem;letter-spacing:1.4px}
  #game{padding:5px 5px 4px;gap:4px}
  .pr .hn{font-size:.62rem}
  .pr .pv{font-size:.58rem}
  .pr .ch{font-size:.64rem}
  .ci{padding:5px 3px}
  .cl{font-size:.5rem;letter-spacing:1px}
  .cv,#wv{font-size:1.15rem}
  #cards{height:92px;gap:2px}
  .cs{height:92px;padding-top:18px;justify-content:flex-end}
  .card{padding:2px}
  #msg{height:22px}
  #rm{font-size:.68rem;letter-spacing:.8px}
  .btn{height:37px;font-size:.60rem;padding:0 5px}
  #ad-slot{height:40px;font-size:.56rem;letter-spacing:.6px;padding-bottom:env(safe-area-inset-bottom)}
}