:root{
  --sun:#fff7c8;
  --cream:#fffdf5;
  --ink:#17324d;
  --ink2:#31516d;
  --aqua:#23d9c5;
  --blue:#4ba3ff;
  --pink:#ff6fae;
  --coral:#ff8a65;
  --lime:#7bdc65;
  --gold:#ffd76d;
  --purple:#8c7bff;
  --cardShadow:0 14px 28px rgba(32,61,93,.20);
  --softShadow:0 24px 70px rgba(49,81,109,.22);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  color:var(--ink);
  font-family: ui-rounded, "Avenir Next", "Nunito", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 5%, rgba(255, 215, 109, .45), transparent 24rem),
    radial-gradient(circle at 90% 0%, rgba(35, 217, 197, .35), transparent 26rem),
    radial-gradient(circle at 50% 105%, rgba(255, 111, 174, .22), transparent 30rem),
    linear-gradient(145deg,#f7fcff 0%,#fff8e7 42%,#eafff9 100%);
  overflow-x:hidden;
}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{border:0}
.hb-app{
  min-height:100svh;
  width:100%;
  padding: max(8px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
}
.hb-shell{
  max-width:1440px;
  margin:0 auto;
}
.hb-top{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  border-radius:30px;
  padding:14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--softShadow);
  backdrop-filter:blur(18px);
}
.hb-brand b{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#087b76;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:1000;
  font-size:.72rem;
}
.hb-brand h1{
  margin:2px 0 0;
  font-family: ui-rounded, "Avenir Next", system-ui, sans-serif;
  font-size:clamp(2rem,7vw,5.4rem);
  line-height:.92;
  letter-spacing:-.075em;
  color:#17324d;
}
.hb-brand p{margin:8px 0 0;color:var(--ink2);font-weight:750;line-height:1.32}
.hb-pill{
  white-space:nowrap;
  border-radius:999px;
  padding:11px 14px;
  background:linear-gradient(135deg,var(--gold),#fff1a8);
  color:#5b4100;
  font-weight:1000;
  box-shadow:0 12px 24px rgba(255,183,57,.22);
}
.hb-menu{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.hb-tile{
  min-height:205px;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:16px;
  background:
    radial-gradient(circle at 92% 4%, var(--accent), transparent 18rem),
    rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:var(--softShadow);
  transform:translateZ(0);
}
.hb-tile:before{
  content:"";
  position:absolute;
  width:190px;height:190px;
  right:-80px;top:-70px;
  border-radius:42px;
  transform:rotate(18deg);
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.15));
}
.hb-tile h2{
  position:relative;
  margin:8px 0;
  font-size:clamp(1.28rem,3vw,2.15rem);
  line-height:.98;
  letter-spacing:-.05em;
  color:#17324d;
}
.hb-tile p{
  position:relative;
  margin:8px 0 12px;
  color:#48677f;
  line-height:1.38;
  font-weight:720;
}
.hb-badge{
  position:relative;
  display:inline-flex;
  border-radius:999px;
  padding:7px 10px;
  background:linear-gradient(135deg,#23d9c5,#8cf2e8);
  color:#073d41;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.08em;
  font-weight:1000;
}
.hb-meta{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin:10px 0;
}
.hb-meta span{
  border-radius:14px;
  padding:8px;
  color:#34536d;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.85);
  font-weight:900;
  font-size:.78rem;
}
.hb-actions{position:relative;display:flex;gap:8px;flex-wrap:wrap}
.hb-btn{
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  color:#17324d;
  background:linear-gradient(135deg,#ffd76d,#fff0a3);
  padding:11px 15px;
  font-weight:1000;
  box-shadow:0 10px 22px rgba(255,185,57,.28), inset 0 1px 0 rgba(255,255,255,.75);
}
.hb-btn.secondary{
  background:rgba(255,255,255,.72);
  color:#31516d;
  border:1px solid rgba(49,81,109,.12);
  box-shadow:0 10px 22px rgba(49,81,109,.10);
}
.hb-board{
  height:calc(100svh - 16px);
  max-width:1440px;
  margin:0 auto;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:8px;
  padding:10px;
  border-radius:30px;
  background:
    radial-gradient(circle at 12% 5%,rgba(255,215,109,.32),transparent 20rem),
    radial-gradient(circle at 92% 4%,rgba(75,163,255,.18),transparent 24rem),
    rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--softShadow);
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.hb-game-head{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:8px;
}
.hb-game-head h2{
  margin:0;
  font-size:clamp(1.45rem,5vw,3.7rem);
  line-height:.92;
  letter-spacing:-.065em;
  color:#17324d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hb-stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
}
.hb-stat{
  border-radius:17px;
  padding:8px 10px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 18px rgba(32,61,93,.08);
}
.hb-stat b{
  display:block;
  color:#087b76;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:1000;
}
.hb-stat span{
  display:block;
  color:#17324d;
  font-weight:1000;
  font-size:clamp(.95rem,2.7vw,1.45rem);
  overflow:hidden;
  text-overflow:ellipsis;
}
.hb-play-area{
  min-height:0;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:8px;
  overflow:hidden;
}
.hb-piles{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:stretch;
}
.hb-pile{
  min-width:62px;
  min-height:78px;
  border-radius:16px;
  border:2px dashed rgba(49,81,109,.22);
  background:rgba(255,255,255,.52);
  display:grid;
  place-items:center;
  text-align:center;
  color:#31516d;
  font-weight:1000;
  padding:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.hb-scroll-table{
  min-height:0;
  overflow:auto;
  padding:2px 2px 10px;
  overscroll-behavior:contain;
}
.hb-columns{
  min-height:100%;
  display:grid;
  gap:7px;
  align-items:start;
}
.hb-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hb-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.hb-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.hb-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.hb-col{
  display:grid;
  align-content:start;
  gap:0;
  min-height:70px;
  border-radius:18px;
}
.hb-card{
  width:100%;
  aspect-ratio: 5 / 7;
  min-height:58px;
  max-height:152px;
  border-radius:clamp(8px,1.6vw,15px);
  background:#fff;
  color:#17324d;
  display:grid;
  place-items:center;
  font-weight:1000;
  cursor:pointer;
  user-select:none;
  box-shadow:var(--cardShadow);
  overflow:hidden;
  border:1px solid rgba(49,81,109,.14);
  transform:translateZ(0);
  transition:transform .08s ease, box-shadow .08s ease;
}
.hb-col .hb-card + .hb-card{margin-top:clamp(-58px,-7.4vw,-24px)}
.hb-card:hover{transform:translateY(-2px)}
.hb-card.red{color:#c51d3b}
.hb-card.back{background:linear-gradient(135deg,#5dc7ff,#8c7bff)}
.hb-card.selected{
  outline:4px solid var(--pink);
  transform:translateY(-5px) scale(1.015);
  z-index:4;
}
.hb-card.removed{opacity:.18;pointer-events:none}
.hb-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hb-card .txt{
  padding:6px;
  text-align:center;
  font-size:clamp(.78rem,2.2vw,1.15rem);
}
.hb-pyramid{
  display:grid;
  gap:4px;
  justify-items:center;
  padding:3px;
}
.hb-row{
  display:flex;
  gap:5px;
  justify-content:center;
  width:100%;
}
.hb-row .hb-card{
  width:min(11.5vw,82px);
  min-width:42px;
}
.hb-message{
  color:#31516d;
  font-weight:850;
  line-height:1.32;
  margin:0;
  padding:6px 4px 0;
}
.hb-toast{
  position:fixed;
  z-index:50;
  left:50%;
  bottom:max(12px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(135deg,#17324d,#31516d);
  color:white;
  font-weight:1000;
  padding:12px 16px;
  box-shadow:0 18px 42px rgba(23,50,77,.32);
}
.hb-confetti{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:40;
  overflow:hidden;
}
.hb-confetti i{
  position:absolute;
  top:-20px;
  width:10px;height:16px;
  border-radius:3px;
  animation:fall 1.5s linear forwards;
}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.hb-loading{height:100svh;display:grid;place-items:center;text-align:center}
@media(max-width:920px){
  .hb-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-game-head{grid-template-columns:auto 1fr auto}
  .hb-game-head .hide-sm{display:none}
  .hb-stats{grid-template-columns:repeat(5,1fr)}
  .hb-stat{padding:7px}
  .hb-stat b{font-size:.58rem}
}
@media(max-width:680px){
  .hb-app{padding:4px}
  .hb-top{grid-template-columns:1fr;border-radius:22px}
  .hb-menu{grid-template-columns:1fr;gap:9px}
  .hb-tile{min-height:160px;border-radius:22px}
  .hb-meta{grid-template-columns:1fr 1fr 1fr}
  .hb-board{height:100svh;border-radius:0;padding:6px;gap:6px}
  .hb-game-head{gap:5px}
  .hb-game-head h2{font-size:clamp(1.22rem,7vw,2.1rem)}
  .hb-btn{padding:9px 11px;font-size:.86rem}
  .hb-stats{grid-template-columns:repeat(5,1fr);gap:4px}
  .hb-stat{border-radius:12px;padding:5px 4px}
  .hb-stat b{font-size:.48rem}
  .hb-stat span{font-size:.82rem}
  .hb-piles{gap:4px}
  .hb-pile{min-width:42px;min-height:58px;border-radius:11px;font-size:.68rem}
  .hb-columns{gap:4px}
  .hb-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
  .hb-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
  .hb-cols-10{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hb-card{min-height:42px;border-radius:7px}
  .hb-col .hb-card + .hb-card{margin-top:clamp(-42px,-9vw,-18px)}
  .hb-message{font-size:.78rem;padding:3px}
}
@media(max-width:390px){
  .hb-brand h1{font-size:2rem}
  .hb-stats{grid-template-columns:repeat(5,1fr)}
  .hb-stat b{font-size:.43rem}
  .hb-stat span{font-size:.72rem}
  .hb-card{min-height:38px}
  .hb-col .hb-card + .hb-card{margin-top:-30px}
}

/* HBSS 103 drag/drop polish */
.hb-card {
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}
.hb-card.drag-source {
  opacity: .42;
  filter: saturate(.7);
}
.hb-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: var(--ghost-w, 82px);
  height: var(--ghost-h, 116px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(23,50,77,.35), 0 0 0 4px rgba(255,255,255,.75);
  transform: translate(-50%, -50%) rotate(-2deg) scale(1.04);
  background: white;
}
.hb-drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hb-drop-hot {
  outline: 4px solid rgba(255,111,174,.86) !important;
  box-shadow: 0 0 0 8px rgba(255,111,174,.18), var(--cardShadow) !important;
}
.hb-pile.hb-drop-hot,
.hb-col.hb-drop-hot {
  background: rgba(255,255,255,.92);
  border-style: solid;
}
.hb-drag-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.64);
  color: #31516d;
  font-size: .78rem;
  font-weight: 1000;
  border: 1px solid rgba(49,81,109,.10);
}
@media (max-width: 680px) {
  .hb-drag-ghost {
    border-radius: 9px;
  }
}

/* HBSS 105 global stability and mobile gameplay layer */
html, body {
  overflow-anchor: none !important;
  overscroll-behavior: none !important;
}
body.hb-is-dragging {
  overflow: hidden !important;
  touch-action: none !important;
}
.hb-board,
.hb-play-area,
.hb-scroll-table,
.hb-pyramid,
.hb-columns {
  overflow-anchor: none !important;
  overscroll-behavior: contain !important;
}
.hb-card,
.hb-card img {
  -webkit-user-drag: none !important;
  user-select: none !important;
}
.hb-card:not(.selected):not(.drag-source) {
  transform: translate3d(0,0,0);
}
.hb-card.drag-source {
  opacity: .38 !important;
}
.hb-scroll-table {
  scroll-behavior: auto !important;
  will-change: scroll-position;
}
.hb-row .hb-card {
  flex: 0 0 auto;
}
.hb-game-head .hb-mini-action {
  background: rgba(255,255,255,.74);
  color: #31516d;
  border: 1px solid rgba(49,81,109,.12);
  box-shadow: 0 10px 22px rgba(49,81,109,.10);
}
.hb-invalid-shake {
  animation: hbInvalidShake .24s ease;
}
@keyframes hbInvalidShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.hb-card-solved-pop {
  animation: hbSolvedPop .20s ease;
}
@keyframes hbSolvedPop {
  0% { transform: scale(.96); }
  100% { transform: scale(1); }
}
@media(max-width:680px){
  .hb-game-head {
    grid-template-columns: auto 1fr auto auto !important;
  }
  .hb-game-head .hb-drag-help {
    display: none !important;
  }
  .hb-game-head .hb-mini-action {
    padding: 8px 9px;
    font-size: .78rem;
  }
}

/* ============================================================
   HBSS 108 REAL LAUNCH POLISH
   Fixes cropped cards and turns all piles into real card zones.
============================================================ */

:root{
  --hb-card-ratio: 0.7142857;
  --hb-card-w-mobile: clamp(42px, 12.8vw, 74px);
  --hb-card-w-desktop: clamp(58px, 7.8vw, 104px);
}

.hb-card,
.hb-pile-card {
  aspect-ratio: 5 / 7 !important;
  background: linear-gradient(180deg,#ffffff,#f9fbff) !important;
  border: 1px solid rgba(39,72,104,.16) !important;
  box-shadow: 0 12px 26px rgba(31,67,105,.17), inset 0 1px 0 rgba(255,255,255,.9) !important;
  overflow: hidden !important;
}

.hb-card img,
.hb-pile-card img,
.hb-drag-ghost img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #ffffff !important;
  display: block !important;
}

.hb-card.back img,
.hb-pile-card.back img {
  object-fit: cover !important;
}

.hb-piles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)) !important;
  align-items: start !important;
  gap: clamp(5px, 1.5vw, 10px) !important;
}

.hb-pile {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(39,72,104,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 18px rgba(31,67,105,.08) !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 3px !important;
  place-items: center !important;
  color: #274868 !important;
}

.hb-pile-label {
  font-size: clamp(.48rem, 1.5vw, .72rem);
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  opacity: .88;
}

.hb-pile-count {
  font-size: clamp(.48rem, 1.4vw, .68rem);
  font-weight: 1000;
  color: #087b76;
  line-height: 1;
}

.hb-pile-card {
  width: min(100%, var(--hb-card-w-desktop));
  min-width: 38px;
  max-width: 94px;
  border-radius: clamp(7px, 1.5vw, 13px);
  display: grid;
  place-items: center;
  position: relative;
}

.hb-pile-card.empty {
  border: 2px dashed rgba(39,72,104,.20) !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(75,163,255,.16), transparent 48%),
    rgba(255,255,255,.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.hb-pile-card .empty-symbol {
  font-size: clamp(1rem, 4vw, 1.75rem);
  opacity: .55;
}

.hb-pile-card.red { color:#c51d3b; }

.hb-columns {
  align-items: start !important;
}

.hb-col {
  min-width: 0 !important;
}

.hb-col .hb-card {
  width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

.hb-cols-7 .hb-card,
.hb-cols-8 .hb-card,
.hb-cols-10 .hb-card,
.hb-cols-4 .hb-card {
  aspect-ratio: 5 / 7 !important;
}

.hb-row .hb-card {
  width: clamp(38px, 11.8vw, 82px) !important;
  min-width: 0 !important;
  max-height: none !important;
}

.hb-message {
  min-height: 20px;
}

.hb-score-pop {
  position: fixed;
  z-index: 10020;
  left: 50%;
  top: 44%;
  transform: translate(-50%,-50%);
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg,#ffd76d,#ff8a65,#ff6fae);
  color: #17324d;
  font-weight: 1000;
  box-shadow: 0 20px 50px rgba(255,111,174,.28);
  animation: hbScorePop108 .72s ease forwards;
  pointer-events: none;
}

@keyframes hbScorePop108 {
  0% { transform: translate(-50%,-42%) scale(.78); opacity:0; }
  22% { transform: translate(-50%,-50%) scale(1.13); opacity:1; }
  100% { transform: translate(-50%,-78%) scale(.94); opacity:0; }
}

.hb-launch-sheen {
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 10010;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,215,109,.38), transparent 16rem);
  animation: hbSheenOut108 .42s ease forwards;
}

@keyframes hbSheenOut108 { to { opacity:0; } }

.hb-particle108 {
  position: fixed;
  z-index: 10025;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(135deg,#23d9c5,#4ba3ff,#ff6fae);
}

@media(max-width:680px){
  .hb-board {
    padding: 5px !important;
    gap: 5px !important;
  }

  .hb-piles {
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)) !important;
    gap: 4px !important;
  }

  .hb-pile {
    padding: 3px !important;
    border-radius: 10px !important;
  }

  .hb-pile-card {
    width: min(100%, var(--hb-card-w-mobile));
    min-width: 34px;
    border-radius: 7px;
  }

  .hb-columns {
    gap: 4px !important;
  }

  .hb-col .hb-card + .hb-card {
    margin-top: clamp(-36px, -8.8vw, -19px) !important;
  }

  .hb-row {
    gap: 3px !important;
  }

  .hb-row .hb-card {
    width: clamp(34px, 12.2vw, 58px) !important;
  }
}

@media(max-width:390px){
  .hb-pile-label { font-size: .43rem; }
  .hb-pile-count { font-size: .43rem; }
  .hb-row .hb-card { width: clamp(31px, 12vw, 48px) !important; }
}

/* ============================================================
   HBSS 109 REAL APP-STORE BOARD POLISH
   Full-card fit, visible stack tops, premium mobile spacing.
============================================================ */

html, body {
  min-height: 100%;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 12% -4%, rgba(255,215,109,.42), transparent 24rem),
    radial-gradient(circle at 105% 0%, rgba(35,217,197,.30), transparent 28rem),
    linear-gradient(160deg,#f8fdff 0%, #fff9ed 45%, #eefcff 100%) !important;
}

.hb-board {
  max-width: 1380px !important;
  height: 100svh !important;
  border-radius: clamp(0px, 2.1vw, 30px) !important;
  background:
    radial-gradient(circle at 8% 4%, rgba(255,215,109,.26), transparent 20rem),
    radial-gradient(circle at 100% 0%, rgba(75,163,255,.18), transparent 24rem),
    rgba(255,255,255,.78) !important;
}

.hb-play-area {
  min-height: 0 !important;
  overflow: hidden !important;
}

.hb-scroll-table {
  min-height: 0 !important;
  overflow: auto !important;
  padding-bottom: 14px !important;
}

.hb-card,
.hb-pile-card {
  aspect-ratio: 5 / 7 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.hb-card img,
.hb-pile-card img,
.hb-drag-ghost img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #ffffff !important;
  display: block !important;
}

.hb-card.back img,
.hb-pile-card.back img,
.hb-drag-ghost.back img {
  object-fit: cover !important;
}

.hb-columns {
  align-items: start !important;
  gap: clamp(4px, .8vw, 10px) !important;
}

.hb-col {
  min-width: 0 !important;
  align-content: start !important;
}

.hb-col .hb-card {
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: clamp(6px, 1.2vw, 13px) !important;
}

.hb-cols-7 .hb-card { max-width: 118px; }
.hb-cols-8 .hb-card { max-width: 106px; }
.hb-cols-10 .hb-card { max-width: 92px; }
.hb-cols-4 .hb-card { max-width: 138px; }

.hb-piles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)) !important;
  gap: clamp(4px, .9vw, 9px) !important;
  align-items: start !important;
}

.hb-pile {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(44px, 1fr) auto !important;
  gap: 3px !important;
  place-items: center !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(39,72,104,.13) !important;
  color: #274868 !important;
}

.hb-pile-label,
.hb-pile-count {
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

.hb-pile-label {
  font-size: clamp(.46rem, 1.3vw, .72rem) !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
}

.hb-pile-count {
  font-size: clamp(.46rem, 1.2vw, .68rem) !important;
  color: #087b76 !important;
}

.hb-pile-card {
  width: min(100%, clamp(38px, 8.5vw, 86px)) !important;
  min-width: 34px !important;
  border-radius: clamp(6px, 1.2vw, 12px) !important;
  box-shadow: 0 10px 22px rgba(31,67,105,.15), inset 0 1px 0 rgba(255,255,255,.9) !important;
  position: relative !important;
}

.hb-pile-card.empty {
  border: 2px dashed rgba(39,72,104,.22) !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(75,163,255,.14), transparent 48%),
    rgba(255,255,255,.48) !important;
  display: grid !important;
  place-items: center !important;
}

.empty-symbol {
  font-weight: 1000;
  color: rgba(39,72,104,.42);
  font-size: clamp(.92rem, 3vw, 1.7rem);
}

.hb-row .hb-card {
  width: clamp(36px, 11.5vw, 82px) !important;
  min-width: 0 !important;
  max-height: none !important;
}

.hb-game-head {
  grid-template-columns: auto 1fr auto auto auto !important;
}

.hb-premium-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg,#ffd76d,#fff1a8);
  color: #5b4100;
  font-size: .72rem;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(255,190,60,.18);
}

.hb-score-pop,
.hb-combo-pop109 {
  position: fixed;
  z-index: 10020;
  left: 50%;
  top: 42%;
  transform: translate(-50%,-50%);
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg,#ffd76d,#ff8a65,#ff6fae);
  color: #17324d;
  font-weight: 1000;
  box-shadow: 0 20px 50px rgba(255,111,174,.28);
  animation: hbScorePop109 .72s ease forwards;
  pointer-events: none;
}

@keyframes hbScorePop109 {
  0% { transform: translate(-50%,-38%) scale(.78); opacity:0; }
  22% { transform: translate(-50%,-50%) scale(1.12); opacity:1; }
  100% { transform: translate(-50%,-76%) scale(.94); opacity:0; }
}

.hb-particle109 {
  position: fixed;
  z-index: 10025;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(135deg,#23d9c5,#4ba3ff,#ff6fae);
}

@media(max-width:680px){
  .hb-board {
    padding: 5px !important;
    gap: 5px !important;
    border-radius: 0 !important;
  }

  .hb-game-head {
    grid-template-columns: auto 1fr auto auto !important;
    gap: 4px !important;
  }

  .hb-game-head h2 {
    font-size: clamp(1rem, 5.6vw, 1.75rem) !important;
  }

  .hb-premium-ribbon,
  .hb-drag-help,
  .hide-sm {
    display: none !important;
  }

  .hb-piles {
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)) !important;
    gap: 3px !important;
  }

  .hb-pile {
    padding: 2px !important;
    border-radius: 9px !important;
  }

  .hb-pile-card {
    width: min(100%, clamp(32px, 12vw, 54px)) !important;
    min-width: 30px !important;
    border-radius: 6px !important;
  }

  .hb-columns {
    gap: 3px !important;
  }

  .hb-col .hb-card + .hb-card {
    margin-top: clamp(-38px, -8.6vw, -18px) !important;
  }

  .hb-row {
    gap: 2px !important;
  }

  .hb-row .hb-card {
    width: clamp(31px, 12vw, 56px) !important;
  }

  .hb-card {
    border-radius: 6px !important;
  }
}

/* ============================================================
   HBSS 111 SAFE COMPLETION
   Bottom Draw Deck + Flip Lane, Draw 3, premium per-game page polish.
============================================================ */

body {
  --hb111-g1: #4ba3ff;
  --hb111-g2: #23d9c5;
  --hb111-g3: #ffd76d;
}

.hb-app {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--hb111-g1) 24%, transparent), transparent 25rem),
    radial-gradient(circle at 100% 4%, color-mix(in srgb, var(--hb111-g2) 20%, transparent), transparent 25rem),
    linear-gradient(160deg,#faffff,#fff9ed 52%,#eefcff) !important;
}

.hb-play-area {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.hb-play-area > .hb-scroll-table {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.hb-play-area > .hb-piles {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-top: 6px !important;
}

.hb-piles {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  padding: 6px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.88)),
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--hb111-g3) 18%, transparent), transparent 14rem) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 -10px 28px rgba(31,67,105,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter: blur(14px);
}

.hb-pile.hb-draw-deck111 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hb111-g1) 20%, #fff), #fff) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--hb111-g1) 22%, transparent) !important;
}

.hb-pile.hb-flip-lane111 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hb111-g2) 18%, #fff), #fff) !important;
}

.hb-fast-actions111 {
  order: 3 !important;
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.hb-action111 {
  border: 0;
  border-radius: 14px;
  padding: 10px 9px;
  font-weight: 1000;
  color: #17324d;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(31,67,105,.10);
}

.hb-action111.primary {
  color: white;
  background: linear-gradient(135deg, var(--hb111-g1), var(--hb111-g2));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--hb111-g1) 28%, transparent);
}

.hb-goal-strip111 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(31,67,105,.08);
  color: #17324d;
}

.hb-goal-strip111 b {
  font-size: clamp(.62rem, 2vw, .86rem);
  line-height: 1.1;
}

.hb-goal-strip111 span {
  font-size: .62rem;
  font-weight: 1000;
  text-transform: uppercase;
  padding: 5px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hb111-g3) 70%, #fff), #fff);
}

.hb-card,
.hb-pile-card {
  aspect-ratio: 5 / 7 !important;
  overflow: hidden !important;
}

.hb-card img,
.hb-pile-card img,
.hb-drag-ghost img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  background: white !important;
}

.hb-card.back img,
.hb-pile-card.back img {
  object-fit: cover !important;
}

.hb-pile-label {
  font-size: clamp(.48rem, 1.45vw, .72rem) !important;
  line-height: 1 !important;
}

.hb-pile-count {
  font-size: clamp(.48rem, 1.3vw, .68rem) !important;
  line-height: 1 !important;
}

.hb-toast111 {
  position: fixed;
  z-index: 25000;
  left: 50%;
  top: 38%;
  transform: translate(-50%,-50%);
  padding: 12px 17px;
  border-radius: 999px;
  font-weight: 1000;
  color: #17324d;
  background: linear-gradient(135deg,#ffd76d,#fff1a8);
  box-shadow: 0 20px 50px rgba(31,67,105,.18);
  animation: hb111Pop .62s ease forwards;
  pointer-events: none;
}

@keyframes hb111Pop {
  0% { transform: translate(-50%,-38%) scale(.8); opacity:0; }
  22% { transform: translate(-50%,-50%) scale(1.12); opacity:1; }
  100% { transform: translate(-50%,-75%) scale(.95); opacity:0; }
}

@media(max-width:680px){
  .hb-piles {
    padding: 4px !important;
    gap: 3px !important;
  }

  .hb-fast-actions111 {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .hb-fast-actions111 .hide-mobile111 {
    display: none !important;
  }

  .hb-action111 {
    padding: 9px 7px;
    font-size: .78rem;
  }

  .hb-goal-strip111 {
    grid-template-columns: 1fr;
    padding: 6px 8px;
  }

  .hb-goal-strip111 span {
    display: none;
  }

  .hb-pile-card {
    width: min(100%, clamp(31px, 12vw, 56px)) !important;
  }
}

/* ============================================================
   HBSS 112 MOBILE FIT ALL GAMES
   Purpose: no phone page scroll and no gameboard scroll.
============================================================ */

html.hbss-fit112,
html.hbss-fit112 body {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: manipulation;
}

body.hbss-fit112 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

body.hbss-fit112 .hb-app {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.hbss-fit112 .hb-board {
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  gap: var(--hb112-board-gap, 4px) !important;
  padding: var(--hb112-board-pad, 5px) !important;
  border-radius: 0 !important;
}

body.hbss-fit112 .hb-game-head {
  min-height: 0 !important;
  padding: var(--hb112-head-pad, 5px) !important;
  gap: 4px !important;
}

body.hbss-fit112 .hb-game-head h2 {
  font-size: clamp(.92rem, 5vw, 1.6rem) !important;
  line-height: .9 !important;
}

body.hbss-fit112 .hb-game-subtitle,
body.hbss-fit112 .hb-premium-ribbon,
body.hbss-fit112 .hb-drag-help,
body.hbss-fit112 .hide-sm {
  display: none !important;
}

body.hbss-fit112 .hb-btn,
body.hbss-fit112 .hb-mini-action {
  padding: var(--hb112-btn-pad, 7px 8px) !important;
  font-size: clamp(.66rem, 2.7vw, .86rem) !important;
  line-height: 1 !important;
  min-height: 0 !important;
}

body.hbss-fit112 .hb-stats {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px !important;
}

body.hbss-fit112 .hb-stat {
  padding: 4px 3px !important;
  min-width: 0 !important;
  border-radius: 10px !important;
}

body.hbss-fit112 .hb-stat b,
body.hbss-fit112 .hb-stat strong {
  font-size: clamp(.54rem, 2.2vw, .72rem) !important;
  line-height: 1 !important;
}

body.hbss-fit112 .hb-stat span,
body.hbss-fit112 .hb-stat small {
  font-size: clamp(.48rem, 1.8vw, .62rem) !important;
  line-height: 1 !important;
}

body.hbss-fit112 .hb-goal-strip111 {
  padding: 4px 6px !important;
  border-radius: 10px !important;
  grid-template-columns: 1fr !important;
}

body.hbss-fit112 .hb-goal-strip111 b {
  font-size: clamp(.54rem, 2.3vw, .72rem) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.hbss-fit112 .hb-goal-strip111 span {
  display: none !important;
}

body.hbss-fit112 .hb-play-area {
  min-height: 0 !important;
  height: var(--hb112-play-h, auto) !important;
  max-height: var(--hb112-play-h, none) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 3px !important;
  padding: var(--hb112-play-pad, 4px) !important;
  border-radius: 12px !important;
}

body.hbss-fit112 .hb-scroll-table {
  min-height: 0 !important;
  height: var(--hb112-table-h, auto) !important;
  max-height: var(--hb112-table-h, none) !important;
  overflow: hidden !important;
  padding: 0 !important;
  overscroll-behavior: none !important;
}

body.hbss-fit112 .hb-piles {
  position: static !important;
  order: initial !important;
  margin: 0 !important;
  padding: 3px !important;
  gap: 3px !important;
  border-radius: 11px !important;
  grid-template-columns: repeat(auto-fit, minmax(37px, 1fr)) !important;
  max-height: var(--hb112-piles-h, 76px) !important;
  overflow: hidden !important;
}

body.hbss-fit112 .hb-pile {
  padding: 2px !important;
  border-radius: 8px !important;
  grid-template-rows: auto minmax(24px, 1fr) auto !important;
  gap: 1px !important;
  min-height: 0 !important;
}

body.hbss-fit112 .hb-pile-label,
body.hbss-fit112 .hb-pile-count {
  font-size: clamp(.38rem, 1.8vw, .54rem) !important;
  line-height: .9 !important;
}

body.hbss-fit112 .hb-pile-card {
  width: min(100%, var(--hb112-pile-card-w, 42px)) !important;
  min-width: 25px !important;
  border-radius: 5px !important;
}

body.hbss-fit112 .hb-fast-actions111 {
  margin: 0 !important;
  gap: 3px !important;
  grid-template-columns: 1fr 1fr !important;
  max-height: 38px !important;
  overflow: hidden !important;
}

body.hbss-fit112 .hb-fast-actions111 .hide-mobile111 {
  display: none !important;
}

body.hbss-fit112 .hb-action111 {
  padding: 7px 5px !important;
  font-size: clamp(.62rem, 2.5vw, .8rem) !important;
  border-radius: 9px !important;
  line-height: 1 !important;
}

body.hbss-fit112 .hb-columns {
  height: 100% !important;
  max-height: 100% !important;
  align-items: start !important;
  gap: var(--hb112-col-gap, 3px) !important;
}

body.hbss-fit112 .hb-col {
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
}

body.hbss-fit112 .hb-col .hb-card {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 5 / 7 !important;
  border-radius: var(--hb112-card-radius, 5px) !important;
}

body.hbss-fit112 .hb-col .hb-card + .hb-card {
  margin-top: var(--hb112-stack-gap, -32px) !important;
}

body.hbss-fit112 .hb-row {
  gap: var(--hb112-row-gap, 2px) !important;
  margin-bottom: var(--hb112-row-gap, 2px) !important;
}

body.hbss-fit112 .hb-row .hb-card {
  width: var(--hb112-row-card-w, 44px) !important;
  max-width: var(--hb112-row-card-w, 44px) !important;
  min-width: 0 !important;
  aspect-ratio: 5 / 7 !important;
}

body.hbss-fit112 .hb-pyramid {
  max-height: 100% !important;
  overflow: hidden !important;
}

body.hbss-fit112 .hb-message {
  min-height: 0 !important;
  max-height: 20px !important;
  padding: 2px 5px !important;
  margin: 0 !important;
  font-size: clamp(.55rem, 2.1vw, .7rem) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.hbss-fit112.hb112-ultra .hb-message {
  display: none !important;
}

body.hbss-fit112.hb112-ultra .hb-goal-strip111 {
  display: none !important;
}

body.hbss-fit112.hb112-ultra .hb-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.hbss-fit112.hb112-ultra .hb-stat:nth-child(n+5) {
  display: none !important;
}

body.hbss-fit112 .hb-card img,
body.hbss-fit112 .hb-pile-card img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

body.hbss-fit112 .hb-card.back img,
body.hbss-fit112 .hb-pile-card.back img {
  object-fit: cover !important;
}

@media(min-width:700px){
  body.hbss-fit112 .hb-board {
    width: min(100vw, 1280px) !important;
    border-radius: 24px !important;
  }
}

/* ============================================================
   HBSS 112B FIT REPAIR — hard final no-scroll reinforcement
============================================================ */
html.hbss-fit112,
html.hbss-fit112 body,
body.hbss-fit112,
body.hbss-fit112 .hb-app,
body.hbss-fit112 .hb-board,
body.hbss-fit112 .hb-play-area,
body.hbss-fit112 .hb-scroll-table {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.hbss-fit112 {
  touch-action: manipulation !important;
}

body.hbss-fit112 .hb-scroll-table {
  scrollbar-width: none !important;
}

body.hbss-fit112 .hb-scroll-table::-webkit-scrollbar {
  display: none !important;
}

body.hbss-fit112 .hb-board {
  max-height: 100dvh !important;
}

body.hbss-fit112 .hb-play-area {
  min-height: 0 !important;
}

/* ============================================================
   HBSS 113 STANDALONE GAME UPGRADE
   Each game gets its own app-like mission panel and quick-use controls.
============================================================ */

.hb113-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.62)),
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--hb111-g1,#4ba3ff) 18%, transparent), transparent 12rem);
  border: 1px solid rgba(255,255,255,.80);
  box-shadow: 0 8px 20px rgba(31,67,105,.09);
  color: #17324d;
}

.hb113-panel b {
  display: block;
  font-size: clamp(.66rem, 2.1vw, .9rem);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb113-panel small {
  display: block;
  margin-top: 2px;
  font-weight: 850;
  color: rgba(25,50,74,.66);
  font-size: clamp(.52rem, 1.75vw, .68rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb113-badge {
  padding: 6px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hb111-g3,#ffd76d) 78%, #fff), #fff);
  color: #4b3900;
  font-size: clamp(.52rem, 1.7vw, .66rem);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.hb113-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 5px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 8px 18px rgba(31,67,105,.08);
}

.hb113-action {
  border: 0;
  border-radius: 12px;
  padding: 9px 7px;
  font-weight: 1000;
  font-size: clamp(.62rem, 2.35vw, .82rem);
  line-height: 1;
  color: #17324d;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 16px rgba(31,67,105,.08);
}

.hb113-action.primary {
  color: white;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--hb111-g1,#4ba3ff) 28%, transparent);
}

.hb113-action:active {
  transform: scale(.96);
}

.hb113-playable {
  position: relative !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--hb111-g1,#4ba3ff) 46%, white),
    0 14px 30px color-mix(in srgb, var(--hb111-g1,#4ba3ff) 24%, transparent) !important;
}

.hb113-playable::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.25), transparent 44%);
  animation: hb113Pulse 1.6s ease-in-out infinite;
}

@keyframes hb113Pulse {
  0%,100% { opacity:.25; }
  50% { opacity:.75; }
}

.hb113-modal {
  position: fixed;
  inset: 0;
  z-index: 26000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(246,251,255,.72);
  backdrop-filter: blur(16px);
}

.hb113-modal-card {
  width: min(560px, 94vw);
  border-radius: 28px;
  padding: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 32px 80px rgba(31,67,105,.23);
  color: #17324d;
}

.hb113-modal-card h2 {
  margin: 0 0 7px;
  font-size: clamp(1.7rem, 6vw, 3rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.hb113-modal-card p,
.hb113-modal-card li {
  font-weight: 850;
  color: rgba(25,50,74,.78);
}

.hb113-modal-card ul {
  padding-left: 20px;
}

.hb113-close {
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: white;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

.hb113-toast {
  position: fixed;
  z-index: 27000;
  left: 50%;
  top: 35%;
  transform: translate(-50%,-50%);
  padding: 12px 17px;
  border-radius: 999px;
  font-weight: 1000;
  color: #17324d;
  background: linear-gradient(135deg,#ffd76d,#fff1a8);
  box-shadow: 0 20px 50px rgba(31,67,105,.18);
  animation: hb113Toast .62s ease forwards;
  pointer-events: none;
}

@keyframes hb113Toast {
  0% { transform: translate(-50%,-35%) scale(.82); opacity:0; }
  22% { transform: translate(-50%,-50%) scale(1.12); opacity:1; }
  100% { transform: translate(-50%,-75%) scale(.95); opacity:0; }
}

.hb-pile.hb113-draw-ready {
  outline: 3px solid color-mix(in srgb, var(--hb111-g1,#4ba3ff) 42%, white) !important;
}

body.hbss-fit112 .hb113-panel {
  padding: 4px 6px;
  border-radius: 11px;
}

body.hbss-fit112 .hb113-panel small {
  display: none;
}

body.hbss-fit112 .hb113-badge {
  display: none;
}

body.hbss-fit112 .hb113-actions {
  padding: 3px;
  gap: 3px;
  grid-template-columns: 1fr 1fr;
}

body.hbss-fit112 .hb113-action {
  padding: 7px 5px;
  border-radius: 9px;
  font-size: clamp(.58rem, 2.3vw, .76rem);
}

body.hbss-fit112 .hb113-action:nth-child(3) {
  display: none;
}

/* ============================================================
   HBSS 114 STANDALONE DEPTH UPGRADE
   21 unique standalone-like game experiences.
============================================================ */

.hb114-shell {
  display: grid;
  gap: 5px;
  padding: 6px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.56)),
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--hb111-g1,#4ba3ff) 24%, transparent), transparent 14rem),
    radial-gradient(circle at 100% 20%, color-mix(in srgb, var(--hb111-g2,#23d9c5) 18%, transparent), transparent 14rem);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 10px 25px rgba(31,67,105,.10);
}

.hb114-titleline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.hb114-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  font-size: 1.18rem;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--hb111-g1,#4ba3ff) 28%, transparent);
}

.hb114-maincopy {
  min-width: 0;
}

.hb114-maincopy b {
  display: block;
  color: #17324d;
  font-size: clamp(.72rem, 2.35vw, .96rem);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb114-maincopy span {
  display: block;
  margin-top: 2px;
  color: rgba(25,50,74,.70);
  font-size: clamp(.54rem, 1.85vw, .7rem);
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb114-chip {
  padding: 6px 8px;
  border-radius: 999px;
  color: #4b3900;
  font-size: clamp(.5rem, 1.6vw, .64rem);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hb111-g3,#ffd76d) 78%, #fff), #fff);
  white-space: nowrap;
}

.hb114-microhud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 4px;
}

.hb114-meter {
  min-width: 0;
  padding: 5px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 6px 14px rgba(31,67,105,.08);
}

.hb114-meter small {
  display: block;
  color: rgba(25,50,74,.62);
  font-size: .48rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hb114-meter b {
  display: block;
  color: #17324d;
  font-size: clamp(.62rem, 2.1vw, .84rem);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb114-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 5px;
}

.hb114-action {
  min-width: 0;
  border: 0;
  border-radius: 13px;
  padding: 9px 7px;
  font-weight: 1000;
  font-size: clamp(.58rem, 2.25vw, .8rem);
  line-height: 1;
  color: #17324d;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 18px rgba(31,67,105,.09);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb114-action.primary {
  color: white;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--hb111-g1,#4ba3ff) 28%, transparent);
}

.hb114-action.gold {
  color: #4b3900;
  background: linear-gradient(135deg, var(--hb111-g3,#ffd76d), #fff1a8);
}

.hb114-action:active {
  transform: scale(.965);
}

.hb114-helper-on .hb114-partner,
.hb114-partner {
  position: relative !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--hb111-g3,#ffd76d) 75%, white),
    0 16px 34px color-mix(in srgb, var(--hb111-g3,#ffd76d) 34%, transparent) !important;
}

.hb114-primary-play {
  position: relative !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--hb111-g1,#4ba3ff) 55%, white),
    0 15px 32px color-mix(in srgb, var(--hb111-g1,#4ba3ff) 27%, transparent) !important;
}

.hb114-secondary-play {
  position: relative !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--hb111-g2,#23d9c5) 48%, white),
    0 12px 28px color-mix(in srgb, var(--hb111-g2,#23d9c5) 20%, transparent) !important;
}

.hb114-primary-play::after,
.hb114-secondary-play::after,
.hb114-partner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 44%);
  animation: hb114Pulse 1.45s ease-in-out infinite;
}

@keyframes hb114Pulse {
  0%,100% { opacity:.20; }
  50% { opacity:.85; }
}

.hb114-toast {
  position: fixed;
  z-index: 28000;
  left: 50%;
  top: 34%;
  transform: translate(-50%,-50%);
  padding: 12px 17px;
  border-radius: 999px;
  font-weight: 1000;
  color: #17324d;
  background: linear-gradient(135deg,#ffd76d,#fff1a8);
  box-shadow: 0 20px 50px rgba(31,67,105,.20);
  animation: hb114Toast .72s ease forwards;
  pointer-events: none;
  max-width: 92vw;
  text-align: center;
}

@keyframes hb114Toast {
  0% { transform: translate(-50%,-35%) scale(.82); opacity:0; }
  22% { transform: translate(-50%,-50%) scale(1.10); opacity:1; }
  100% { transform: translate(-50%,-75%) scale(.96); opacity:0; }
}

.hb114-modal {
  position: fixed;
  inset: 0;
  z-index: 28500;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(246,251,255,.72);
  backdrop-filter: blur(16px);
}

.hb114-card {
  width: min(620px, 94vw);
  border-radius: 28px;
  padding: 20px;
  color: #17324d;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--hb111-g1,#4ba3ff) 18%, transparent), transparent 18rem),
    rgba(255,255,255,.93);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 32px 80px rgba(31,67,105,.24);
}

.hb114-card h2 {
  margin: 0 0 7px;
  font-size: clamp(1.75rem, 7vw, 3.2rem);
  line-height: .92;
  letter-spacing: -.06em;
}

.hb114-card p,
.hb114-card li {
  font-weight: 850;
  color: rgba(25,50,74,.78);
}

.hb114-card ul {
  padding-left: 20px;
}

.hb114-close {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

.hb114-result {
  position: fixed;
  inset: 0;
  z-index: 29000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(246,251,255,.76);
  backdrop-filter: blur(18px);
}

.hb114-result-card {
  width: min(560px, 94vw);
  border-radius: 30px;
  padding: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--hb111-g3,#ffd76d) 30%, transparent), transparent 18rem),
    rgba(255,255,255,.94);
  box-shadow: 0 34px 90px rgba(31,67,105,.24);
  color: #17324d;
}

.hb114-result-card h2 {
  margin: 0;
  font-size: clamp(2.1rem, 9vw, 4.2rem);
  letter-spacing: -.07em;
}

.hb114-result-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
  margin: 14px 0;
}

.hb114-result-stat {
  padding: 10px 6px;
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 8px 16px rgba(31,67,105,.08);
}

.hb114-result-stat small {
  display:block;
  font-weight:1000;
  font-size:.58rem;
  color:rgba(25,50,74,.62);
  text-transform:uppercase;
}

.hb114-result-stat b {
  display:block;
  font-size:1.05rem;
}

body.hbss-fit112 .hb114-shell {
  padding: 4px;
  gap: 3px;
  border-radius: 12px;
}

body.hbss-fit112 .hb114-titleline {
  gap: 5px;
}

body.hbss-fit112 .hb114-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: .92rem;
}

body.hbss-fit112 .hb114-maincopy span,
body.hbss-fit112 .hb114-chip {
  display: none;
}

body.hbss-fit112 .hb114-microhud {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 2px;
}

body.hbss-fit112 .hb114-meter {
  padding: 3px 4px;
  border-radius: 8px;
}

body.hbss-fit112 .hb114-meter small {
  display: none;
}

body.hbss-fit112 .hb114-meter b {
  font-size: clamp(.52rem, 2vw, .68rem);
}

body.hbss-fit112 .hb114-actions {
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

body.hbss-fit112 .hb114-action {
  padding: 6px 4px;
  border-radius: 8px;
  font-size: clamp(.52rem, 2.15vw, .7rem);
}

body.hbss-fit112 .hb114-action:nth-child(n+3) {
  display: none;
}

@media(max-width:360px) {
  .hb114-microhud {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* ============================================================
   HBSS 115 SPLASH + TUTORIAL + LOGO SYSTEM
   Standalone app-like onboarding for each Solitaire Stadium game.
============================================================ */

.hb115-overlay {
  position: fixed;
  inset: 0;
  z-index: 31000;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--hb115-g1,#4ba3ff) 30%, transparent), transparent 24rem),
    radial-gradient(circle at 100% 10%, color-mix(in srgb, var(--hb115-g2,#23d9c5) 24%, transparent), transparent 26rem),
    linear-gradient(160deg,#faffff,#fff9ed 50%,#eefcff);
  color: #17324d;
  overflow: hidden;
}

.hb115-overlay::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.42), transparent 12rem),
    radial-gradient(circle at 70% 72%, color-mix(in srgb, var(--hb115-g3,#ffd76d) 22%, transparent), transparent 18rem);
  animation: hb115Aura 4.2s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hb115Aura {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity:.72; }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); opacity:1; }
}

.hb115-card {
  position: relative;
  z-index: 1;
  width: min(560px, 94vw);
  max-height: min(760px, 94dvh);
  display: grid;
  gap: 14px;
  border-radius: 34px;
  padding: clamp(18px, 5vw, 28px);
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 38px 100px rgba(31,67,105,.24);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.hb115-logo-wrap {
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
}

.hb115-logo {
  width: clamp(92px, 28vw, 150px);
  height: clamp(92px, 28vw, 150px);
  border-radius: 32px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--hb115-g1,#4ba3ff), var(--hb115-g2,#23d9c5)),
    #fff;
  color: #fff;
  box-shadow:
    0 24px 55px color-mix(in srgb, var(--hb115-g1,#4ba3ff) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.hb115-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hb115-logo span {
  font-size: clamp(2.8rem, 13vw, 5.6rem);
  font-weight: 1000;
  line-height: 1;
}

.hb115-logo::after {
  content: "";
  position: absolute;
  inset: -55%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.52) 50%, transparent 60%);
  animation: hb115Shine 2.3s ease-in-out infinite;
}

@keyframes hb115Shine {
  from { transform: translateX(-55%) rotate(12deg); }
  to { transform: translateX(55%) rotate(12deg); }
}

.hb115-title {
  margin: 0;
  font-size: clamp(2rem, 8vw, 4.25rem);
  line-height: .88;
  letter-spacing: -.075em;
  color: #17324d;
}

.hb115-subtitle {
  margin: 0;
  color: rgba(25,50,74,.74);
  font-weight: 900;
  font-size: clamp(.82rem, 3.2vw, 1.08rem);
}

.hb115-loader {
  display: grid;
  gap: 8px;
}

.hb115-loader-line {
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(25,50,74,.10);
  box-shadow: inset 0 2px 8px rgba(25,50,74,.08);
}

.hb115-loader-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hb115-g1,#4ba3ff), var(--hb115-g2,#23d9c5), var(--hb115-g3,#ffd76d));
  transition: width .08s linear;
  position: relative;
  overflow: hidden;
}

.hb115-loader-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.55), transparent);
  animation: hb115Bar 1.1s linear infinite;
}

@keyframes hb115Bar {
  from { transform: translateX(-80%); }
  to { transform: translateX(80%); }
}

.hb115-loader-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(25,50,74,.78);
  font-weight: 1000;
  font-size: .78rem;
}

.hb115-tutorial-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--hb115-g3,#ffd76d) 28%, transparent), transparent 12rem),
    linear-gradient(135deg, color-mix(in srgb, var(--hb115-g1,#4ba3ff) 22%, white), color-mix(in srgb, var(--hb115-g2,#23d9c5) 18%, white));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 18px 40px rgba(31,67,105,.12);
  position: relative;
}

.hb115-tutorial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hb115-fallback-art {
  display: grid;
  gap: 10px;
  place-items: center;
  text-align: center;
  padding: 18px;
  color: #17324d;
}

.hb115-fallback-art .big {
  width: clamp(72px, 22vw, 118px);
  height: clamp(72px, 22vw, 118px);
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--hb115-g1,#4ba3ff), var(--hb115-g2,#23d9c5));
  color: white;
  font-size: clamp(2.6rem, 10vw, 4.5rem);
  font-weight: 1000;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--hb115-g1,#4ba3ff) 32%, transparent);
}

.hb115-page-title {
  margin: 0;
  color: #17324d;
  font-size: clamp(1.45rem, 6vw, 2.6rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.hb115-page-body {
  margin: 0;
  color: rgba(25,50,74,.76);
  font-weight: 850;
  font-size: clamp(.82rem, 3vw, 1.03rem);
}

.hb115-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.hb115-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(25,50,74,.18);
}

.hb115-dot.active {
  width: 24px;
  background: linear-gradient(90deg, var(--hb115-g1,#4ba3ff), var(--hb115-g2,#23d9c5));
}

.hb115-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hb115-btn {
  border: 0;
  border-radius: 18px;
  padding: 13px 12px;
  font-weight: 1000;
  color: #17324d;
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 22px rgba(31,67,105,.10);
}

.hb115-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--hb115-g1,#4ba3ff), var(--hb115-g2,#23d9c5));
  box-shadow: 0 16px 32px color-mix(in srgb, var(--hb115-g1,#4ba3ff) 30%, transparent);
}

.hb115-btn:active {
  transform: scale(.965);
}

.hb115-replay {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 15000;
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  color: #17324d;
  font-size: .7rem;
  font-weight: 1000;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(31,67,105,.16);
  backdrop-filter: blur(12px);
}

body.hbss-fit112 .hb115-card {
  max-height: 94dvh;
  padding: 14px;
  border-radius: 24px;
  gap: 9px;
}

body.hbss-fit112 .hb115-tutorial-img {
  aspect-ratio: 16 / 8.5;
  border-radius: 18px;
}

@media(max-width:420px) {
  .hb115-actions {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .hb115-replay {
    bottom: 6px;
    right: 6px;
    padding: 7px 9px;
    font-size: .62rem;
  }
}

/* ============================================================
   HBSS 116 STANDALONE APP PACK
   Settings, onboarding guard, app identity polish, tutorial controls.
============================================================ */

.hb116-tools {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 15010;
  display: flex;
  gap: 7px;
  pointer-events: auto;
}

.hb116-tool {
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  color: #17324d;
  font-size: .68rem;
  font-weight: 1000;
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 24px rgba(31,67,105,.16);
  backdrop-filter: blur(12px);
}

.hb116-drawer {
  position: fixed;
  inset: 0;
  z-index: 32000;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(246,251,255,.58);
  backdrop-filter: blur(12px);
}

.hb116-drawer-card {
  width: min(560px, 96vw);
  border-radius: 28px;
  padding: 18px;
  color: #17324d;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--hb111-g1,#4ba3ff) 18%, transparent), transparent 16rem),
    rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 32px 90px rgba(31,67,105,.24);
}

.hb116-drawer-card h2 {
  margin: 0 0 6px;
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  line-height: .92;
  letter-spacing: -.06em;
}

.hb116-drawer-card p {
  margin: 0 0 12px;
  color: rgba(25,50,74,.72);
  font-weight: 850;
}

.hb116-setting-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(25,50,74,.09);
}

.hb116-setting-row b {
  display: block;
  font-size: .95rem;
}

.hb116-setting-row span {
  display: block;
  margin-top: 2px;
  color: rgba(25,50,74,.66);
  font-size: .76rem;
  font-weight: 800;
}

.hb116-switch {
  border: 0;
  min-width: 76px;
  border-radius: 999px;
  padding: 9px 11px;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

.hb116-switch.off {
  color: #17324d;
  background: rgba(25,50,74,.10);
}

.hb116-close {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: white;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

.hb116-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  color: #4b3900;
  font-size: .56rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hb111-g3,#ffd76d) 78%, #fff), #fff);
  box-shadow: 0 8px 16px rgba(31,67,105,.08);
}

body.hb116-reduced-motion *,
body.hb116-reduced-motion *::before,
body.hb116-reduced-motion *::after {
  animation-duration: .001s !important;
  transition-duration: .001s !important;
  scroll-behavior: auto !important;
}

body.hb116-muted .hb114-toast,
body.hb116-muted .hb113-toast,
body.hb116-muted .hb115-loader-fill::after {
  filter: saturate(.85);
}

body.hbss-fit112 .hb116-tools {
  left: 6px;
  bottom: 6px;
  gap: 4px;
}

body.hbss-fit112 .hb116-tool {
  padding: 7px 9px;
  font-size: .6rem;
}

@media(max-width:420px){
  .hb116-tools {
    left: 6px;
    bottom: 6px;
  }

  .hb116-tool {
    padding: 7px 9px;
    font-size: .6rem;
  }
}

/* ============================================================
   HBSS 117 MENU SCROLL REPAIR
   Game pages must not scroll; main game menu must scroll.
============================================================ */

html.hbss-menu-scroll117,
html.hbss-menu-scroll117 body,
body.hbss-menu-scroll117 {
  position: static !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

body.hbss-menu-scroll117 .hb-app,
body.hbss-menu-scroll117 .hb-board,
body.hbss-menu-scroll117 .hb-menu,
body.hbss-menu-scroll117 .hb-games,
body.hbss-menu-scroll117 .hb-game-list,
body.hbss-menu-scroll117 main {
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}

body.hbss-menu-scroll117 .hb-game-card,
body.hbss-menu-scroll117 .hb-menu-card {
  flex-shrink: 0 !important;
}

body.hbss-game-noscreen-scroll117,
body.hbss-game-noscreen-scroll117 .hb-app,
body.hbss-game-noscreen-scroll117 .hb-board,
body.hbss-game-noscreen-scroll117 .hb-play-area,
body.hbss-game-noscreen-scroll117 .hb-scroll-table {
  overflow: hidden !important;
}

body.hbss-game-noscreen-scroll117 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* ============================================================
   HBSS 118 PLAYER HAPPINESS UPGRADE
   Daily challenge feel, achievements, coach panel, comfort actions.
============================================================ */

.hb118-coach {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 18px;
  color: #17324d;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.62)),
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--hb111-g1,#4ba3ff) 18%, transparent), transparent 14rem);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 10px 24px rgba(31,67,105,.10);
}

.hb118-coach-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.hb118-coach b {
  display: block;
  font-size: clamp(.66rem, 2.2vw, .9rem);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb118-coach small {
  display: block;
  margin-top: 2px;
  color: rgba(25,50,74,.70);
  font-size: clamp(.52rem, 1.8vw, .68rem);
  font-weight: 850;
  line-height: 1.05;
}

.hb118-daily-pill {
  padding: 6px 8px;
  border-radius: 999px;
  font-size: .56rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4b3900;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hb111-g3,#ffd76d) 76%, #fff), #fff);
  box-shadow: 0 8px 16px rgba(31,67,105,.08);
}

.hb118-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 5px;
}

.hb118-action {
  border: 0;
  border-radius: 13px;
  padding: 8px 6px;
  font-size: clamp(.56rem, 2.15vw, .76rem);
  line-height: 1;
  font-weight: 1000;
  color: #17324d;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 18px rgba(31,67,105,.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb118-action.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

.hb118-action.gold {
  color: #4b3900;
  background: linear-gradient(135deg, var(--hb111-g3,#ffd76d), #fff1a8);
}

.hb118-toast {
  position: fixed;
  z-index: 33000;
  left: 50%;
  top: 33%;
  transform: translate(-50%,-50%);
  max-width: 92vw;
  padding: 13px 18px;
  border-radius: 999px;
  color: #17324d;
  font-weight: 1000;
  text-align: center;
  background: linear-gradient(135deg,#ffd76d,#fff1a8);
  box-shadow: 0 22px 55px rgba(31,67,105,.22);
  pointer-events: none;
  animation: hb118Toast .8s ease forwards;
}

@keyframes hb118Toast {
  0% { transform: translate(-50%,-35%) scale(.82); opacity:0; }
  20% { transform: translate(-50%,-50%) scale(1.10); opacity:1; }
  100% { transform: translate(-50%,-75%) scale(.96); opacity:0; }
}

.hb118-achievement {
  position: fixed;
  left: 50%;
  bottom: 78px;
  z-index: 33010;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  width: min(430px, 92vw);
  padding: 12px 14px;
  border-radius: 22px;
  color: #17324d;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 22px 60px rgba(31,67,105,.24);
  animation: hb118Achieve 3.2s ease forwards;
}

.hb118-achievement .icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
  font-size: 1.35rem;
}

.hb118-achievement b {
  display:block;
  line-height:1.05;
}

.hb118-achievement span {
  display:block;
  margin-top:2px;
  color:rgba(25,50,74,.68);
  font-size:.74rem;
  font-weight:850;
}

@keyframes hb118Achieve {
  0% { transform: translate(-50%,24px); opacity:0; }
  12% { transform: translate(-50%,0); opacity:1; }
  82% { transform: translate(-50%,0); opacity:1; }
  100% { transform: translate(-50%,24px); opacity:0; }
}

.hb118-recap {
  position: fixed;
  inset: 0;
  z-index: 34000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(246,251,255,.74);
  backdrop-filter: blur(18px);
}

.hb118-recap-card {
  width: min(590px, 94vw);
  border-radius: 30px;
  padding: 22px;
  color: #17324d;
  text-align: center;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--hb111-g3,#ffd76d) 30%, transparent), transparent 18rem),
    rgba(255,255,255,.94);
  box-shadow: 0 34px 90px rgba(31,67,105,.24);
}

.hb118-recap-card h2 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.hb118-recap-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin: 14px 0;
}

.hb118-recap-stat {
  padding: 10px 7px;
  border-radius: 16px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 8px 16px rgba(31,67,105,.08);
}

.hb118-recap-stat small {
  display:block;
  font-size:.58rem;
  font-weight:1000;
  text-transform:uppercase;
  color:rgba(25,50,74,.62);
}

.hb118-recap-stat b {
  display:block;
  font-size:1.05rem;
}

.hb118-close {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

body.hbss-fit112 .hb118-coach {
  padding: 4px 6px;
  border-radius: 11px;
  gap: 3px;
}

body.hbss-fit112 .hb118-coach small,
body.hbss-fit112 .hb118-daily-pill {
  display: none;
}

body.hbss-fit112 .hb118-actions {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 3px;
}

body.hbss-fit112 .hb118-action {
  padding: 6px 4px;
  border-radius: 8px;
  font-size: clamp(.52rem, 2.05vw, .68rem);
}

body.hbss-fit112 .hb118-action:nth-child(n+3) {
  display: none;
}

/* ============================================================
   HBSS 119 CORE GAMEPLAY LAYOUT REPAIR
   Fixes:
   - Home/Foundation piles show card faces
   - Draw Deck / Flip Lane / Home piles stay bottom under main board
   - Header/add-on panels stop smushing the gameplay board
============================================================ */

body.hbss-game-core119 .hb-board {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: 4px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

body.hbss-game-core119 .hb-game-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 5px !important;
  min-height: 0 !important;
  max-height: 46px !important;
  overflow: hidden !important;
}

body.hbss-game-core119 .hb-game-head h1,
body.hbss-game-core119 .hb-game-head h2,
body.hbss-game-core119 .hb-game-title {
  font-size: clamp(.92rem, 4vw, 1.3rem) !important;
  line-height: .95 !important;
  margin: 0 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.hbss-game-core119 .hb-game-subtitle,
body.hbss-game-core119 .hb-premium-ribbon,
body.hbss-game-core119 .hb-drag-help,
body.hbss-game-core119 .hb116-app-badge {
  display: none !important;
}

body.hbss-game-core119 .hb-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
  max-height: 27px !important;
  overflow: hidden !important;
}

body.hbss-game-core119 .hb-stat {
  padding: 3px 4px !important;
  border-radius: 8px !important;
  min-height: 0 !important;
}

body.hbss-game-core119 .hb-stat:nth-child(n+5) {
  display: none !important;
}

body.hbss-game-core119 .hb-stat small,
body.hbss-game-core119 .hb-stat span {
  display: none !important;
}

body.hbss-game-core119 .hb-stat b,
body.hbss-game-core119 .hb-stat strong {
  font-size: clamp(.56rem, 2.2vw, .72rem) !important;
  line-height: 1 !important;
}

body.hbss-game-core119 .hb-play-area {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 4px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 3px !important;
  overflow: hidden !important;
}

body.hbss-game-core119 .hb-scroll-table {
  grid-row: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.hbss-game-core119 .hb-piles {
  grid-row: 2 !important;
  position: static !important;
  order: 999 !important;
  margin: 0 !important;
  padding: 4px !important;
  gap: 4px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)) !important;
  max-height: clamp(76px, 18dvh, 108px) !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.92)),
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--hb111-g1,#4ba3ff) 12%, transparent), transparent 12rem) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 -8px 22px rgba(31,67,105,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.hbss-game-core119 .hb-pile {
  display: grid !important;
  grid-template-rows: auto minmax(34px, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 1px !important;
  min-height: 0 !important;
  padding: 2px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

body.hbss-game-core119 .hb-pile-label {
  font-size: clamp(.42rem, 1.9vw, .58rem) !important;
  line-height: .9 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

body.hbss-game-core119 .hb-pile-count {
  font-size: clamp(.38rem, 1.6vw, .52rem) !important;
  line-height: .9 !important;
  font-weight: 900 !important;
  opacity: .8 !important;
}

body.hbss-game-core119 .hb-foundation-card119,
body.hbss-game-core119 .hb-pile-card,
body.hbss-game-core119 .hb-pile .hb-card {
  width: min(100%, clamp(34px, 11.4vw, 62px)) !important;
  max-width: 62px !important;
  aspect-ratio: 5 / 7 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

.hb-foundation-card119 {
  position: relative;
  background: #fff;
  color: #17324d;
  border: 1px solid rgba(25,50,74,.18);
  box-shadow: 0 8px 18px rgba(31,67,105,.14);
  font-weight: 1000;
}

.hb-foundation-card119.red {
  color: #c62842;
}

.hb-foundation-card119 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}

.hb-foundation-card119 .fallback-rank {
  position: absolute;
  top: 5%;
  left: 7%;
  font-size: 42%;
  line-height: .85;
  text-align: center;
}

.hb-foundation-card119 .fallback-suit {
  font-size: 150%;
  line-height: 1;
}

.hb-foundation-empty119 {
  width: min(100%, clamp(34px, 11.4vw, 62px));
  max-width: 62px;
  aspect-ratio: 5 / 7;
  border-radius: 7px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(25,50,74,.28);
  color: rgba(25,50,74,.38);
  font-weight: 1000;
  background: rgba(255,255,255,.46);
}

body.hbss-game-core119 .hb113-panel,
body.hbss-game-core119 .hb114-shell,
body.hbss-game-core119 .hb118-coach,
body.hbss-game-core119 .hb-goal-strip111 {
  display: none !important;
}

body.hbss-game-core119 .hb-fast-actions111,
body.hbss-game-core119 .hb113-actions,
body.hbss-game-core119 .hb114-actions,
body.hbss-game-core119 .hb118-actions {
  display: none !important;
}

body.hbss-game-core119 .hb-message {
  max-height: 18px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 5px !important;
  font-size: clamp(.52rem, 2vw, .68rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Compact but visible gameplay helper dock. It replaces stacked top panels. */
.hb119-dock {
  position: fixed;
  z-index: 15050;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 5px;
  pointer-events: auto;
}

.hb119-dock button {
  border: 0;
  border-radius: 999px;
  padding: 7px 9px;
  color: #17324d;
  font-size: .58rem;
  font-weight: 1000;
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 22px rgba(31,67,105,.14);
  backdrop-filter: blur(12px);
}

.hb119-dock button.primary {
  color: white;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

@media(max-height:640px) {
  body.hbss-game-core119 .hb-game-head {
    max-height: 38px !important;
    padding: 3px 4px !important;
  }

  body.hbss-game-core119 .hb-stats {
    max-height: 23px !important;
  }

  body.hbss-game-core119 .hb-message {
    display: none !important;
  }

  body.hbss-game-core119 .hb-piles {
    max-height: 78px !important;
  }
}

/* ============================================================
   HBSS 120 PREMIUM GAME FEEL + PLAYER HAPPINESS
   Progression, collection, pause protection, proof lite, animations.
============================================================ */

.hb120-hud {
  position: fixed;
  z-index: 15100;
  left: 8px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  display: grid;
  gap: 5px;
  width: min(330px, calc(100vw - 16px));
  pointer-events: none;
}

.hb120-scorebar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 5px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 16px;
  color: #17324d;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 30px rgba(31,67,105,.16);
  border: 1px solid rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.hb120-scorebig {
  font-size: clamp(.82rem, 3vw, 1.1rem);
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}

.hb120-scorebig b {
  font-size: clamp(1rem, 4.2vw, 1.5rem);
  letter-spacing: -.045em;
}

.hb120-chip {
  padding: 5px 7px;
  border-radius: 999px;
  color: #4b3900;
  font-size: .54rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #ffd76d, #fff1a8);
  white-space: nowrap;
}

.hb120-progression {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  pointer-events: auto;
}

.hb120-progress-card {
  min-width: 0;
  padding: 6px;
  border-radius: 14px;
  color: #17324d;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 8px 22px rgba(31,67,105,.12);
  backdrop-filter: blur(12px);
}

.hb120-progress-card small {
  display: block;
  font-size: .46rem;
  font-weight: 1000;
  text-transform: uppercase;
  color: rgba(25,50,74,.64);
  line-height: 1;
}

.hb120-progress-card b {
  display: block;
  margin-top: 2px;
  font-size: .66rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb120-meter {
  height: 5px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(25,50,74,.10);
  overflow: hidden;
}

.hb120-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5), #ffd76d);
}

.hb120-tools {
  position: fixed;
  z-index: 15110;
  right: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  display: flex;
  gap: 5px;
  pointer-events: auto;
}

.hb120-tools button {
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  color: #17324d;
  font-size: .58rem;
  font-weight: 1000;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 24px rgba(31,67,105,.16);
  backdrop-filter: blur(12px);
}

.hb120-tools button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

.hb120-drawer {
  position: fixed;
  inset: 0;
  z-index: 36000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(246,251,255,.72);
  backdrop-filter: blur(16px);
}

.hb120-panel {
  width: min(620px, 94vw);
  max-height: 88dvh;
  overflow: auto;
  border-radius: 30px;
  padding: 18px;
  color: #17324d;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--hb111-g1,#4ba3ff) 20%, transparent), transparent 18rem),
    rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 34px 90px rgba(31,67,105,.24);
}

.hb120-panel h2 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 7vw, 3.4rem);
  line-height: .92;
  letter-spacing: -.07em;
}

.hb120-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}

.hb120-piece {
  min-height: 106px;
  border-radius: 18px;
  padding: 10px;
  display: grid;
  align-content: space-between;
  color: #17324d;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  border: 1px solid rgba(25,50,74,.08);
  box-shadow: 0 10px 22px rgba(31,67,105,.10);
}

.hb120-piece.locked {
  opacity: .52;
  filter: grayscale(.25);
}

.hb120-piece-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-weight: 1000;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

.hb120-piece b {
  display: block;
  margin-top: 7px;
  font-size: .78rem;
  line-height: 1;
}

.hb120-piece small {
  display: block;
  margin-top: 3px;
  font-weight: 900;
  color: rgba(25,50,74,.64);
  font-size: .58rem;
  text-transform: uppercase;
}

.hb120-close,
.hb120-export {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
}

.hb120-export {
  color: #17324d;
  background: rgba(25,50,74,.10);
}

.hb120-pause {
  position: fixed;
  inset: 0;
  z-index: 37000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(246,251,255,.66);
  backdrop-filter: blur(16px);
}

body.hb120-paused .hb-board,
body.hb120-paused .hb-play-area {
  filter: blur(8px) saturate(.75);
  pointer-events: none !important;
}

.hb120-pause-card {
  width: min(520px, 94vw);
  border-radius: 30px;
  padding: 22px;
  text-align: center;
  color: #17324d;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 34px 90px rgba(31,67,105,.26);
}

.hb120-pause-card h2 {
  margin: 0;
  font-size: clamp(2.2rem, 9vw, 4rem);
  letter-spacing: -.07em;
}

.hb120-countdown {
  margin: 14px auto;
  width: min(260px, 70vw);
  border-radius: 24px;
  padding: 15px;
  color: #fff;
  font-size: clamp(2.2rem, 10vw, 4rem);
  line-height: .9;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--hb111-g1,#4ba3ff), var(--hb111-g2,#23d9c5));
  box-shadow: 0 22px 56px color-mix(in srgb, var(--hb111-g1,#4ba3ff) 30%, transparent);
}

.hb120-toast {
  position: fixed;
  z-index: 38000;
  left: 50%;
  top: 34%;
  transform: translate(-50%,-50%);
  max-width: 92vw;
  padding: 13px 18px;
  border-radius: 999px;
  color: #17324d;
  font-weight: 1000;
  text-align: center;
  background: linear-gradient(135deg,#ffd76d,#fff1a8);
  box-shadow: 0 22px 55px rgba(31,67,105,.22);
  pointer-events: none;
  animation: hb120Toast .9s ease forwards;
}

@keyframes hb120Toast {
  0% { transform: translate(-50%,-35%) scale(.82); opacity:0; }
  20% { transform: translate(-50%,-50%) scale(1.10); opacity:1; }
  100% { transform: translate(-50%,-80%) scale(.96); opacity:0; }
}

.hb120-sparkle {
  position: fixed;
  z-index: 35000;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  pointer-events: none;
  background: #ffd76d;
  box-shadow: 0 0 14px #ffd76d;
  animation: hb120Sparkle .75s ease-out forwards;
}

@keyframes hb120Sparkle {
  from { transform: translate(0,0) scale(1); opacity:1; }
  to { transform: translate(var(--x), var(--y)) scale(.15); opacity:0; }
}

.hb-card.hb120-placed,
.hb-foundation-card119.hb120-placed {
  animation: hb120Place .44s cubic-bezier(.18,1.35,.24,1) both;
}

@keyframes hb120Place {
  0% { transform: translateY(-6px) scale(.96); filter: brightness(1); }
  50% { transform: translateY(0) scale(1.055); filter: brightness(1.18); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.hb-card.hb120-deal {
  animation: hb120Deal .42s cubic-bezier(.18,1.1,.3,1) both;
}

@keyframes hb120Deal {
  from { transform: translateX(-36px) rotate(-4deg) scale(.94); opacity:.65; }
  to { transform: translateX(0) rotate(0) scale(1); opacity:1; }
}

.hb120-fan {
  position: fixed;
  z-index: 35500;
  right: 18px;
  bottom: 86px;
  width: 120px;
  height: 86px;
  pointer-events: none;
}

.hb120-fan-card {
  position: absolute;
  width: 46px;
  aspect-ratio: 5/7;
  border-radius: 7px;
  background: linear-gradient(135deg,#fff,#eaf7ff);
  border: 1px solid rgba(25,50,74,.18);
  box-shadow: 0 10px 24px rgba(31,67,105,.18);
  animation: hb120Fan .72s ease forwards;
}

.hb120-fan-card:nth-child(1){ left:16px; transform:rotate(-16deg); }
.hb120-fan-card:nth-child(2){ left:40px; transform:rotate(0deg); }
.hb120-fan-card:nth-child(3){ left:64px; transform:rotate(16deg); }

@keyframes hb120Fan {
  0% { opacity:0; transform: translateY(24px) scale(.8) rotate(0deg); }
  20% { opacity:1; }
  100% { opacity:0; transform: translateY(-18px) scale(1.04) rotate(var(--r,0deg)); }
}

body.hbss-fit112 .hb120-hud {
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  left: 4px;
  width: min(300px, calc(100vw - 8px));
  gap: 3px;
}

body.hbss-fit112 .hb120-progression {
  display: none;
}

body.hbss-fit112 .hb120-scorebar {
  padding: 5px 6px;
  border-radius: 12px;
}

body.hbss-fit112 .hb120-tools {
  right: 6px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
}

body.hbss-fit112 .hb120-tools button {
  padding: 7px 8px;
  font-size: .54rem;
}



/* HBSS127_INSTANT_DRAG_DRAW3_CSS_START */

/*
  127 is gameplay-first.
  No premium art here.
  Fix:
  - instant local drag feel
  - waste/draw 3 visible fan
  - no hidden second/third card when draw count is 3
*/

html.hbss127-dragging,
html.hbss127-dragging body,
body.hbss127-dragging {
  overscroll-behavior: none !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

body[data-hbss-instant-drag-127="true"] img,
body[data-hbss-instant-drag-127="true"] .card,
body[data-hbss-instant-drag-127="true"] [class*="card"],
body[data-hbss-instant-drag-127="true"] [data-card],
body[data-hbss-instant-drag-127="true"] [data-rank][data-suit] {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  backface-visibility: hidden !important;
}

.hbss127-lifted-card {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  margin: 0 !important;
  transform-origin: center center !important;
  will-change: transform !important;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.36)) !important;
  transition: none !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

.hbss127-source-dragging {
  opacity: .18 !important;
}

.hbss127-drop-target {
  outline: 3px solid rgba(255, 215, 70, .92) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(255, 215, 70, .18), 0 0 22px rgba(255, 215, 70, .34) !important;
}

.hbss127-drag-return {
  transition: transform 130ms cubic-bezier(.2,.95,.2,1), opacity 90ms linear !important;
}

/* True draw-3 waste fan. These selectors intentionally cover several likely DOM names. */
body[data-hbss-draw3-fan-127="true"] .hbss127-waste-zone,
body[data-hbss-draw3-fan-127="true"] [data-pile="waste"],
body[data-hbss-draw3-fan-127="true"] [data-zone="waste"],
body[data-hbss-draw3-fan-127="true"] [data-stack="waste"],
body[data-hbss-draw3-fan-127="true"] .waste,
body[data-hbss-draw3-fan-127="true"] .waste-pile,
body[data-hbss-draw3-fan-127="true"] .draw-waste,
body[data-hbss-draw3-fan-127="true"] .discard,
body[data-hbss-draw3-fan-127="true"] .discard-pile {
  overflow: visible !important;
  min-width: calc(var(--hbss-card-w, 74px) + 76px) !important;
  width: auto !important;
  isolation: isolate !important;
}

body[data-hbss-draw3-fan-127="true"] .hbss127-waste-card {
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform-origin: center center !important;
  transition: transform 120ms cubic-bezier(.2,.95,.2,1), opacity 80ms linear !important;
  will-change: transform !important;
}

/* left, middle, right/top card — screenshot style: all 3 visible */
body[data-hbss-draw3-fan-127="true"] .hbss127-waste-card[data-hbss127-fan-index="0"] {
  transform: translate3d(-44px, 0, 0) scale(.985) !important;
  z-index: 10 !important;
}

body[data-hbss-draw3-fan-127="true"] .hbss127-waste-card[data-hbss127-fan-index="1"] {
  transform: translate3d(0px, 0, 0) scale(.992) !important;
  z-index: 20 !important;
}

body[data-hbss-draw3-fan-127="true"] .hbss127-waste-card[data-hbss127-fan-index="2"] {
  transform: translate3d(44px, 0, 0) scale(1) !important;
  z-index: 30 !important;
}

/* Only the rightmost/top waste card should receive normal play drag when rules require top-waste-only. */
body[data-hbss-draw3-fan-127="true"] .hbss127-waste-card[data-hbss127-playable="false"] {
  pointer-events: none !important;
}

/* Keep faces crisp and stop the app from visually downgrading card art during this gameplay pass. */
body[data-hbss-instant-drag-127="true"] .hbss127-card-face,
body[data-hbss-instant-drag-127="true"] .hbss127-lifted-card img,
body[data-hbss-instant-drag-127="true"] img[src*="cards"],
body[data-hbss-instant-drag-127="true"] img[src*="card"] {
  image-rendering: auto !important;
  transform: translateZ(0) !important;
}

/* Stop big invisible wrappers from eating touch events around the waste cards. */
body[data-hbss-instant-drag-127="true"] .hbss127-hit-card {
  touch-action: none !important;
  cursor: grab !important;
}

body[data-hbss-instant-drag-127="true"] .hbss127-hit-card:active {
  cursor: grabbing !important;
}

/* Mobile-specific: prioritize game interaction over page scrolling while card zones are active. */
@media (pointer: coarse), (max-width: 900px) {
  body[data-hbss-instant-drag-127="true"] {
    overscroll-behavior: none !important;
  }

  body[data-hbss-instant-drag-127="true"] .game,
  body[data-hbss-instant-drag-127="true"] .board,
  body[data-hbss-instant-drag-127="true"] .game-board,
  body[data-hbss-instant-drag-127="true"] [class*="board"],
  body[data-hbss-instant-drag-127="true"] [data-board] {
    touch-action: none !important;
  }
}

/* HBSS127_INSTANT_DRAG_DRAW3_CSS_END */