/* BET X RUN Sevens — 1:1 cabinet (1280×720 ref from video) */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000}
.hs-body{
  font-family:Arial,Helvetica,"Segoe UI",sans-serif;
  color:#fff;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;user-select:none;
}

/* Viewport scales fixed cabinet */
.hs-viewport{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  overflow:hidden;
}
.hs-cabinet{
  width:1280px;height:720px;flex-shrink:0;
  display:grid;
  grid-template-rows:489px 22px 158px 51px;
  background:#0a0204;
  transform-origin:center center;
}

/* ═══ LOADING (from video frame 25s) ═══ */
.hs-loader{
  position:fixed;inset:0;z-index:300;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  gap:24px;padding:20px;
}
.hs-loader-bg{
  position:absolute;inset:0;
  background:#000;
  opacity:1;
}
.hs-loader-splash{
  position:relative;z-index:2;
  max-width:min(92vw,720px);
}
.hs-loader-splash-img{
  width:100%;height:auto;display:block;
  border-radius:4px;
  box-shadow:0 0 40px rgba(239,68,68,.35);
}
.hs-loader-ring-wrap{
  position:relative;z-index:3;
  width:100px;height:100px;flex-shrink:0;
}
.hs-loader-ring{width:100%;height:100%}
#hsLoaderArc{transition:stroke-dashoffset .15s linear}
.hs-loader-pct{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* ═══ REELS STAGE ═══ */
.hs-stage{
  display:flex;align-items:stretch;
  min-height:0;background:#0a0204;
  border-bottom:1px solid #1a0810;
}
.hs-lines-col{
  width:56px;position:relative;flex-shrink:0;
  background:linear-gradient(90deg,#0a0204,#120204);
}
.hs-lines-right{background:linear-gradient(270deg,#0a0204,#120204)}
.hs-line-badge{
  position:absolute;left:3px;right:3px;
  height:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.35);
  opacity:.3;
  transform:translateY(-50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.6);
  transition:opacity .2s,box-shadow .2s;
}
.hs-line-badge.on{
  opacity:1;
  box-shadow:0 0 8px currentColor,inset 0 1px 0 rgba(255,255,255,.4);
}

.hs-stage-center{flex:1;min-width:0;position:relative}
.hs-logo{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  z-index:6;pointer-events:none;width:68px;
}
.hs-logo-img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 8px rgba(249,115,22,.5));
}
.hs-logo-hot,.hs-logo-run,.hs-logo-sevens{display:none}

.hs-reels-outer{
  position:absolute;inset:4px 4px 4px 72px;
  border:3px solid;border-color:#e8ecf0 #687888 #384858 #c8d0d8;
  border-radius:2px;
  background:#060102;
  box-shadow:inset 0 0 50px rgba(0,0,0,.95);
  padding:2px;
}
.hs-reels{
  display:grid;grid-template-columns:repeat(5,1fr);
  height:100%;background:#100204;
}
.hs-reel{
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.hs-reel:not(:last-child)::after{
  content:"";position:absolute;top:0;right:-1px;bottom:0;width:4px;z-index:3;
  background:linear-gradient(180deg,#fde047 0%,#f97316 50%,#ef4444 100%);
  box-shadow:0 0 10px rgba(249,115,22,.9),0 0 20px rgba(239,68,68,.5);
}

.hs-cell{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:url("../games/assets/cell_bg.jpg") center/cover no-repeat,
    radial-gradient(ellipse 90% 80% at 50% 45%,#280810,#0a0204);
  border-bottom:1px solid rgba(0,0,0,.4);
  overflow:hidden;
}
.hs-cell.win{
  box-shadow:inset 0 0 24px rgba(253,224,71,.5);
  animation:hsWin .4s ease-in-out infinite alternate;
}
@keyframes hsWin{to{box-shadow:inset 0 0 32px rgba(253,224,71,.75)}}
.hs-cell-inner{width:90%;height:90%;display:flex;align-items:center;justify-content:center}

/* Symbols — generated PNG assets */
.hs-sym{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.hs-sym-img{
  width:94%;height:94%;
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7));
  pointer-events:none;
  will-change:transform;
}
.hs-reel.spinning .hs-sym-img{
  animation:hsSpinMove .14s linear infinite!important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
@keyframes hsSpinMove{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.sym-fruit-bob .hs-sym-img{animation:hsBob 2.6s ease-in-out infinite}
.sym-star-spin .hs-sym-img{animation:hsStar 3.5s ease-in-out infinite}
.sym-seven-glow .hs-sym-img{animation:hsSevenGlowWrap 2.4s ease-in-out infinite}
.sym-joker-pulse .hs-sym-img{animation:hsPulse 2s ease-in-out infinite}
.hs-reel.spinning .sym-fruit-bob .hs-sym-img,
.hs-reel.spinning .sym-star-spin .hs-sym-img,
.hs-reel.spinning .sym-seven-glow .hs-sym-img,
.hs-reel.spinning .sym-joker-pulse .hs-sym-img{
  animation:hsSpinMove .14s linear infinite!important;
}
@keyframes hsBob{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-5px) scale(1.05)}
}
@keyframes hsStar{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(12deg) scale(1.06)}
}
@keyframes hsSevenGlowWrap{
  0%,100%{filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(239,68,68,.35))}
  50%{filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(253,224,71,.65))}
}
@keyframes hsPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(99,102,241,.45))}
  50%{transform:scale(1.07);filter:drop-shadow(0 0 20px rgba(253,224,71,.65))}
}
.hs-cell.win .hs-sym-img{
  animation:hsWinSym .4s ease-in-out infinite alternate!important;
}
@keyframes hsWinSym{
  from{transform:scale(1);filter:drop-shadow(0 0 10px rgba(253,224,71,.5))}
  to{transform:scale(1.12);filter:drop-shadow(0 0 22px rgba(253,224,71,.9))}
}
.hs-pay-sym .hs-sym-img{width:80px;height:80px}

/* Status + gamble hint */
.hs-gamble-hint{
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;letter-spacing:.12em;
  color:#cbd5e1;text-transform:uppercase;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.5),transparent);
  visibility:hidden;
}
.hs-status{
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.16em;
  color:#93c5fd;text-transform:uppercase;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.25),transparent);
}

/* Panel (from video panel_area.jpg) */
.hs-panel{
  display:grid;grid-template-columns:220px 1fr 280px;
  gap:6px;padding:6px 10px 4px;
  background:linear-gradient(180deg,#788898 0%,#586878 12%,#404858 45%,#283038 100%);
  border-top:2px solid #98a8b8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.hs-credit-tag{
  font-size:9px;color:#fde047;background:#000;
  padding:2px 5px;border-radius:2px;margin-bottom:4px;display:inline-block;
}
.hs-credit-box{
  background:#080808;border:2px solid #687888;border-radius:3px;padding:5px 8px;font-size:10px;
}
.hs-credit-row{display:flex;justify-content:space-between;align-items:center}
.hs-credit-row b{color:#fde047;font-size:18px;font-weight:900}
.hs-credit-rub{color:#fde047;font-size:11px;margin:2px 0}
.hs-insurance{color:#a0aec0;font-size:9px}
.hs-insurance b{color:#fff}

.hs-panel-mid{display:flex;align-items:center;gap:8px;justify-content:center}
.hs-step{display:flex;align-items:center;gap:3px}
.hs-step-lbl{
  font-size:9px;font-weight:700;writing-mode:vertical-rl;
  transform:rotate(180deg);color:#d0d8e0;margin-right:2px;
}
.hs-step-min,.hs-step-plus{
  width:28px;height:28px;border:none;border-radius:3px;
  background:linear-gradient(180deg,#4080e0,#2060c0);
  color:#fff;font-size:18px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 0 #103878,inset 0 1px 0 rgba(255,255,255,.25);
}
.hs-step-val{
  min-width:44px;height:34px;border:2px solid #687888;border-radius:3px;
  color:#fff;font-weight:900;font-size:15px;cursor:pointer;padding:0 6px;
}
.hs-step-lines .hs-step-val{background:linear-gradient(180deg,#9040e0,#6020a0)}
.hs-step-bet .hs-step-val{background:linear-gradient(180deg,#3070d0,#1848a8)}

.hs-betwin{display:flex;gap:6px}
.hs-bet-box,.hs-win-box{
  min-width:76px;padding:5px 8px;border-radius:3px;text-align:center;
  border:2px solid #485868;
}
.hs-bet-box{background:linear-gradient(180deg,#2860b0,#183878)}
.hs-win-box{background:linear-gradient(180deg,#208848,#186030)}
.hs-bet-box span,.hs-win-box span{display:block;font-size:9px;font-weight:700}
.hs-bet-box b,.hs-win-box b{display:block;font-size:18px;font-weight:900}
.hs-bet-box small,.hs-win-box small{display:block;font-size:9px;opacity:.92}

.hs-panel-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.hs-util-row{display:flex;gap:4px}
.hs-util{
  width:36px;height:36px;border:2px solid #8898a8;border-radius:5px;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 rgba(0,0,0,.3);
}
.hs-start.is-take{
  border-color:#fde047;
  box-shadow:0 0 28px rgba(253,224,71,.7),0 4px 0 #104818;
}
.hs-start.is-stop{
  border-color:#f87171;
  background:radial-gradient(circle at 38% 32%,#f87171,#dc2626 55%,#7f1d1d);
}

/* ORCA gamble overlay */
.hs-gamble-screen{
  position:absolute;left:56px;right:56px;top:0;bottom:180px;z-index:20;
  background:linear-gradient(180deg,#1a2848 0%,#0f172a 50%,#1e1b4b 100%);
  border:2px solid #475569;
  display:flex;flex-direction:column;align-items:center;padding:12px 16px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.6);
}
.hs-gamble-screen[hidden]{display:none!important}
.hs-gb-top{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:8px}
.hs-gb-col,.hs-gb-amt{text-align:center;color:#86efac}
.hs-gb-col b,.hs-gb-amt b{display:block;font-size:22px;color:#4ade80}
.hs-gb-col small,.hs-gb-amt small{display:block;font-size:8px;color:#94a3b8;letter-spacing:.05em}
.hs-gb-x{font-size:14px;color:#fde047;font-weight:900}
.hs-gb-prompt{font-size:10px;letter-spacing:.1em;color:#e2e8f0;margin:4px 0 12px}
.hs-gb-card-area{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.hs-gb-card{
  width:120px;height:168px;border-radius:8px;
  background:linear-gradient(145deg,#1e40af,#1e3a8a);
  border:3px solid #fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:36px;font-weight:900;box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.hs-gb-card.back{
  background:repeating-linear-gradient(45deg,#1e3a8a,#2563eb 8px,#1e40af 8px,#1e40af 16px);
}
.hs-gb-card.red{color:#dc2626}
.hs-gb-card.black{color:#1e293b}
.hs-gb-card .suit{font-size:28px}
.hs-gb-history{display:flex;flex-direction:column;gap:4px;min-width:100px}
.hs-gb-history small{font-size:8px;color:#94a3b8}
.hs-gb-mini{
  padding:4px 8px;border-radius:4px;font-size:11px;font-weight:700;
  background:#334155;color:#fff;
}
.hs-gb-mini.red{background:#7f1d1d}
.hs-gb-mini.black{background:#0f172a}
.hs-gb-actions{display:flex;gap:20px;width:100%;justify-content:center}
.hs-gb-red,.hs-gb-black{
  flex:1;max-width:200px;padding:14px 24px;border-radius:999px;
  font-weight:900;font-size:16px;letter-spacing:.08em;cursor:pointer;
  border:3px solid rgba(255,255,255,.4);
  box-shadow:0 4px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2);
}
.hs-gb-red{background:linear-gradient(180deg,#ef4444,#b91c1c);color:#fff}
.hs-gb-black{background:linear-gradient(180deg,#334155,#0f172a);color:#fff}
.hs-home,.hs-info{background:linear-gradient(180deg,#4080e0,#2060c0)}
.hs-sound{background:linear-gradient(180deg,#4080e0,#2060c0);font-size:14px;line-height:1}
.hs-denom{background:linear-gradient(180deg,#30a848,#208030)}

.hs-gamble{
  padding:5px 16px;border-radius:3px;border:2px solid #687888;
  background:linear-gradient(180deg,#687888,#485868);
  color:#8898a8;font-weight:800;font-size:11px;letter-spacing:.1em;cursor:not-allowed;
}
.hs-gamble.on{
  background:linear-gradient(180deg,#4080e0,#2060c0);color:#fff;cursor:pointer;
  box-shadow:0 0 10px rgba(64,128,224,.5);
}

.hs-spin-wrap{position:relative;display:flex;align-items:center}
.hs-auto{
  position:absolute;top:-10px;right:78px;
  width:46px;height:26px;border-radius:13px;
  border:2px solid #687888;
  background:linear-gradient(180deg,#687888,#485868);
  color:#d0d8e0;font-size:9px;font-weight:800;cursor:pointer;z-index:2;
}
.hs-auto.on{background:linear-gradient(180deg,#30a848,#208030);color:#fff}
.hs-start{
  width:72px;height:72px;border-radius:50%;
  border:4px solid #90e8a0;
  background:radial-gradient(circle at 38% 32%,#58e878,#28a848 55%,#186028);
  color:#fff;font-weight:900;font-size:13px;letter-spacing:.08em;cursor:pointer;
  box-shadow:0 0 24px rgba(40,168,72,.6),0 4px 0 #104818,inset 0 2px 0 rgba(255,255,255,.25);
}
.hs-start:active{transform:scale(.96)}
.hs-start:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}

/* Footer */
.hs-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 14px;background:#000;font-size:12px;font-weight:700;
}
.hs-jackpot{color:#ef4444;text-shadow:0 0 8px rgba(239,68,68,.4)}
.hs-bonus{color:#4ade80;text-shadow:0 0 8px rgba(74,222,128,.3)}

/* Modals */
.hs-modal{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:12px;
}
.hs-modal[hidden]{display:none!important}
.hs-modal-box{
  background:linear-gradient(180deg,#1e3a8a,#1e293b);
  border:3px solid #687888;border-radius:8px;
  min-width:320px;max-width:420px;
  box-shadow:0 0 40px rgba(59,130,246,.4);
}
.hs-modal-wide{max-width:360px}
.hs-modal-head{
  background:linear-gradient(180deg,#404858,#283038);
  padding:10px;text-align:center;font-weight:800;font-size:14px;
  letter-spacing:.1em;border-bottom:2px solid #687888;
}
.hs-modal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px}
.hs-modal-wide .hs-modal-grid{grid-template-columns:repeat(5,1fr)}
.hs-modal-grid button{
  padding:10px 4px;border:2px solid #93c5fd;border-radius:6px;
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  color:#fff;font-weight:800;font-size:13px;cursor:pointer;
}
.hs-modal-grid button.active{background:linear-gradient(180deg,#22c55e,#16a34a);border-color:#86efac}

.hs-modal-pay{align-items:center;padding:12px;overflow-y:auto}
.hs-paytable{
  width:100%;max-width:640px;
  background:#3a0810 url("../games/assets/cell_bg.jpg") center/cover;
  border:3px solid #dc2626;border-radius:4px;padding:16px 20px;
  box-shadow:inset 0 0 80px rgba(0,0,0,.6),0 0 30px rgba(239,68,68,.3);
}
.hs-pay-head{display:none}
.hs-pay-grid{display:flex;flex-direction:column;gap:10px}
.hs-pay-row{
  display:flex;align-items:center;gap:16px;
  padding:10px 14px;
  background:linear-gradient(90deg,rgba(120,20,30,.9),rgba(60,8,15,.95));
  border:2px solid rgba(239,68,68,.55);
  border-radius:4px;
  box-shadow:0 0 12px rgba(239,68,68,.25),inset 0 0 20px rgba(249,115,22,.08);
}
.hs-pay-row.featured{border-color:#fde047;box-shadow:0 0 16px rgba(253,224,71,.35)}
.hs-pay-row .hs-pay-sym{flex:0 0 100px;display:flex;justify-content:center}
.hs-pay-row .hs-pay-sym-img{width:88px;height:88px}
.hs-pay-pays{
  flex:1;display:flex;flex-wrap:wrap;gap:8px 20px;
  font-size:15px;font-weight:700;color:#fde047;
}
.hs-pay-pays span{white-space:nowrap}
.hs-pay-lbl{width:100%;font-size:12px;color:#fbbf24;margin-bottom:2px}
.hs-pay-back{
  display:block;width:100%;max-width:280px;margin:16px auto 0;padding:12px;
  border:2px solid #fde047;border-radius:4px;
  background:linear-gradient(180deg,#991b1b,#450a0a);
  color:#fde047;font-weight:800;font-size:14px;cursor:pointer;
  letter-spacing:.06em;
}
.hs-gamble-box{text-align:center;padding-bottom:12px}
.hs-gamble-btns{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}
.hs-gb-red{padding:12px;border:none;border-radius:8px;background:#dc2626;color:#fff;font-weight:800;cursor:pointer}
.hs-gb-black{padding:12px;border:none;border-radius:8px;background:#1e293b;color:#fff;font-weight:800;cursor:pointer;border:2px solid #64748b!important}
.hs-gb-take{padding:12px;border:none;border-radius:8px;background:#22c55e;color:#052e16;font-weight:800;cursor:pointer}

/* Catalog card styles */
.game-card-link{display:block;color:inherit;text-decoration:none}
.bxrun-sevens-thumb,.game-card-link .thumb{
  background:radial-gradient(circle at 30% 25%,rgba(239,68,68,.35),transparent 45%),linear-gradient(135deg,#1a1424,#0f121c);
}
.bxrun-sevens-thumb::after,.game-card-link .thumb::after{
  content:"7";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:4rem;font-weight:800;color:rgba(239,68,68,.85);font-family:Georgia,serif;
}