/* ==========================================================================
   JwakK Casino — faithful ~2013 browser-game skin (single-page app)
   Reuses the original assets: topLine.png (hazard stripe), pryskalka.png
   (header splatter), logo.png, BB.png (grunge bg).
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; outline: none; }

body, html {
  font-family: Tahoma, Arial, "Helvetica Neue", sans-serif;
  font-size: 12px;
  color: #c9c4bd;
  background: #060404 url('../img/BB.png') no-repeat center 6px;
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,4,4,0.10), rgba(6,4,4,0.55) 58%, #060404);
}
a { color: #ff9900; text-decoration: none; }
a:hover { color: #ffbf40; }

.limiter { width: 985px; margin: 0 auto; position: relative; z-index: 1; }

/* ---- yellow/black hazard stripe (original topLine.png) ------------------ */
.hazard-top {
  height: 7px; background: url('../img/topLine.png') repeat-x;
  border-bottom: 1px solid #000; position: relative; z-index: 3;
}

/* ---- header bar -------------------------------------------------------- */
.header-bar {
  background: #212121 url('../img/pryskalka.png') no-repeat center center;
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.6);
  position: relative; z-index: 2;
}
.hdr { display: flex; align-items: center; gap: 12px; height: 74px; }
.logo-link { display: block; cursor: pointer; }
.logo-link .logo { height: 46px; display: block; }

.userbox { display: flex; align-items: center; gap: 8px; }
.ub-avatar {
  width: 44px; height: 44px; flex: none;
  background: linear-gradient(180deg, #3a2a1a, #140d07);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  display: grid; place-items: center; font-size: 20px; font-weight: bold;
  color: #ffcc55; text-shadow: 1px 1px 0 #000; cursor: pointer;
}
.ub-main { display: flex; flex-direction: column; gap: 3px; }
.ub-name { color: #fff; font-weight: bold; font-size: 12px; text-shadow: 1px 1px 0 #000; }
.ub-name .caret { color: #ff9900; font-size: 9px; }
.ub-bar { display: flex; align-items: center; gap: 5px; }
.ub-bar .micon { font-size: 10px; width: 12px; }
.ub-track {
  width: 118px; height: 8px; background: #000; border: 1px solid #2c2c2c;
  overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.ub-track i { display: block; height: 100%; background: linear-gradient(180deg, #7fb3e6, #2f6ea8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.ub-track.green i { background: linear-gradient(180deg, #9fd85a, #4e8a1e); }
.ub-bar em { font-style: normal; font-size: 10px; color: #8a8a8a; }

.statcluster {
  display: flex; align-items: center; gap: 10px; margin-left: 4px;
  padding: 6px 10px; background: rgba(0,0,0,0.35); border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.statcluster .sc { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #cfcabf; white-space: nowrap; }
.statcluster .sc i { font-style: normal; font-size: 13px; }
.statcluster .sc b { color: #ffcc55; font-size: 12px; }

.hdr-spacer { flex: 1; }
.hdr-tabs { display: flex; gap: 5px; }
.info-tab {
  min-width: 70px; text-align: center; padding: 6px 10px 7px; cursor: default;
  background: linear-gradient(180deg, #56a0e4, #1f4f80);
  border: 1px solid #0d2c4c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.6);
  color: #eaf2fb;
}
.info-tab b { display: block; font-size: 10px; opacity: 0.9; text-transform: uppercase; letter-spacing: .3px; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.info-tab span { font-size: 14px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.info-tab.gold { background: linear-gradient(180deg, #ffcf5a, #d98a00); border-color: #7a4d00; color: #3a1e00; }
.info-tab.gold b, .info-tab.gold span { color: #3a1e00; text-shadow: 0 1px 0 rgba(255,255,255,0.3); }

/* ---- layout ------------------------------------------------------------ */
.stage { padding: 14px 0 6px; position: relative; z-index: 1; }
.layout { display: flex; gap: 14px; align-items: flex-start; }
.sidebar { width: 186px; flex: none; }
.content { flex: 1; min-width: 0; }

/* ---- sidebar menu (original "Button 1 »" look) ------------------------- */
.menu-title {
  background: linear-gradient(180deg, #ff9e08, #d97400);
  color: #3a1e00; font-weight: bold; text-transform: uppercase; font-size: 11px;
  padding: 7px 12px; border: 1px solid #7a4d00; letter-spacing: .5px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.menu-btn {
  display: block; position: relative; cursor: pointer;
  padding: 11px 26px 11px 13px; margin-bottom: -1px;
  background: linear-gradient(180deg, #2b2b2b, #131313);
  border: 1px solid #000; border-top-color: #383838;
  color: #cfcabf; font-size: 12px; font-weight: bold;
  text-shadow: 1px 1px 0 #000; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.menu-btn::after { content: "\00BB"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: #ff9900; font-size: 14px; }
.menu-btn:hover { background: linear-gradient(180deg, #3c3c3c, #1c1c1c); color: #fff; }
.menu-btn.active { background: linear-gradient(180deg, #3a2a10, #1c1408); color: #ffcc55; border-left: 3px solid #ff9900; padding-left: 11px; }
.menu-btn.active::after { color: #ffcc55; }
.promo {
  margin-top: 12px; padding: 12px; text-align: center;
  background: linear-gradient(180deg, #191919, #0d0d0d);
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  color: #9a948c; font-size: 11px; line-height: 1.6;
}
.promo b { color: #ffcc55; }
.promo .big { display: block; font-size: 22px; color: #ffcc55; font-weight: bold; text-shadow: 0 0 8px rgba(255,153,0,0.5), 1px 1px 0 #000; margin: 4px 0; }

/* ---- content boxes ----------------------------------------------------- */
.box {
  background: linear-gradient(180deg, #181818, #0e0e0e);
  border: 1px solid #000; margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 5px rgba(0,0,0,0.5);
}
.box-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: linear-gradient(180deg, #2a2a2a, #151515);
  border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.box-head .tag {
  background: linear-gradient(180deg, #ffcf5a, #e07000); color: #3a1e00;
  font-weight: bold; text-transform: uppercase; font-size: 11px;
  padding: 5px 11px; border: 1px solid #7a4d00; text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.box-head h2 { font-size: 15px; color: #fff; text-shadow: 1px 1px 0 #000; font-weight: bold; }
.box-head .search { margin-left: auto; display: flex; }
.box-head .search input {
  width: 170px; font-family: inherit; font-size: 12px; color: #ccc; padding: 6px 9px;
  background: #0a0a0a; border: 1px solid #000; border-top-color: #2a2a2a;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
.box-head .search button {
  cursor: pointer; padding: 0 12px; border: 1px solid #7a4d00; border-left: none;
  background: linear-gradient(180deg, #ffcf5a, #e07000); color: #3a1e00; font-size: 14px; font-weight: bold;
}
.box-body { padding: 14px; }
.box-body.pad0 { padding: 0; }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: inline-block; cursor: pointer; font-family: inherit;
  font-weight: bold; font-size: 13px; color: #3a1e00;
  padding: 9px 18px; border: 1px solid #7a3d00;
  background: linear-gradient(180deg, #ffc24d, #ff9900 48%, #e06b00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.6);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35); text-decoration: none;
  text-transform: uppercase; letter-spacing: .3px;
}
.btn:hover { background: linear-gradient(180deg, #ffcf66, #ffa60d 48%, #f07600); color: #3a1e00; text-decoration: none; }
.btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); }
.btn:disabled, .btn.dis { background: linear-gradient(180deg, #5a5a5a, #333); border-color: #222; color: #999; cursor: not-allowed; box-shadow: none; text-shadow: none; }
.btn.big { font-size: 15px; padding: 12px 26px; }
.btn.block { display: block; width: 100%; text-align: center; }
.btn.blue { color: #fff; border-color: #0d2c4c; text-shadow: 0 1px 1px rgba(0,0,0,0.5); background: linear-gradient(180deg, #56a0e4, #1f4f80); }
.btn.blue:hover { background: linear-gradient(180deg, #6ab0f0, #2a5e94); color: #fff; text-decoration: none; }
.btn.grey { color: #ddd; border-color: #000; text-shadow: 1px 1px 0 #000; background: linear-gradient(180deg, #3a3a3a, #1a1a1a); }
.btn.grey:hover { background: linear-gradient(180deg, #464646, #222); color: #fff; text-decoration: none; }
.btn.sm { font-size: 11px; padding: 6px 12px; }

/* ---- inputs ------------------------------------------------------------ */
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 11px; color: #9a948c; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .3px; }
.inp {
  width: 100%; font-family: inherit; font-size: 13px; color: #fff; padding: 9px 10px;
  background: #0a0a0a; border: 1px solid #000; border-top-color: #2a2a2a;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
.inp:focus { border-color: #ff9900; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 0 4px rgba(255,153,0,0.4); }
.error { color: #ff6a4d; font-size: 12px; min-height: 16px; margin: 4px 0; text-shadow: 1px 1px 0 #000; }

/* ---- tables ------------------------------------------------------------ */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th { background: linear-gradient(180deg, #262626, #161616); color: #999; text-align: left; padding: 8px 12px; border-bottom: 1px solid #000; text-transform: uppercase; font-size: 11px; text-shadow: 1px 1px 0 #000; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); color: #c9c4bd; }
.tbl tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
.tbl tr:hover td { background: rgba(255,153,0,0.07); }
.tbl tr.me td { color: #ffcc55; font-weight: bold; background: rgba(255,153,0,0.10); }
.tbl .rank { color: #6a6a6a; width: 36px; text-align: center; font-weight: bold; }
.tbl .right { text-align: right; }
.tbl .amt.pos { color: #7fd34a; font-weight: bold; }
.tbl .amt.neg { color: #d9776a; }
.tbl .amt.dep { color: #ffcc55; font-weight: bold; }
.tbl .when { color: #6a6a6a; font-size: 11px; }
.empty { color: #6a6a6a; padding: 14px; text-align: center; }

/* pagination (image style) */
.pager { display: flex; align-items: center; gap: 5px; padding: 12px; }
.pager .lbl { color: #8a8a8a; margin-right: 4px; }
.pager .pg {
  min-width: 24px; text-align: center; padding: 4px 6px; font-size: 12px; color: #cfcabf;
  background: linear-gradient(180deg, #2a2a2a, #151515); border: 1px solid #000; cursor: default;
}
.pager .pg.on { background: linear-gradient(180deg, #ffc24d, #e06b00); border-color: #7a4d00; color: #3a1e00; font-weight: bold; }

/* ---- stat tiles / xp / badges ----------------------------------------- */
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: linear-gradient(180deg, #1e1e1e, #101010); border: 1px solid #000; padding: 10px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.stat .v { font-size: 19px; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 #000; }
.stat .v.gold { color: #ffcc55; }
.stat .k { font-size: 10px; color: #8a8a8a; text-transform: uppercase; margin-top: 3px; letter-spacing: .3px; }

.xp-track { height: 14px; background: #000; border: 1px solid #2c2c2c; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8); }
.xp-fill { height: 100%; background: linear-gradient(180deg, #ffc24d, #e06b00); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.xp-meta { display: flex; justify-content: space-between; font-size: 11px; color: #8a8a8a; margin-top: 4px; }

.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.badge { display: flex; gap: 9px; align-items: center; padding: 9px; background: linear-gradient(180deg, #1c1c1c, #101010); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.badge.earned { border-color: #7a4d00; background: linear-gradient(180deg, #2a2010, #16110a); }
.badge.locked { opacity: 0.42; }
.badge .ic { font-size: 24px; line-height: 1; width: 28px; text-align: center; }
.badge .bt { font-size: 12px; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 #000; }
.badge .bd { font-size: 10px; color: #8a8a8a; }

/* ---- login ------------------------------------------------------------- */
.login-wrap { padding: 54px 0 30px; }
.login-box { width: 380px; margin: 0 auto; }
.login-box .logo-big { display: block; margin: 0 auto 4px; width: 240px; }
.login-box .tagline { text-align: center; color: #8a8a8a; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.login-box .welcome-note { margin-top: 14px; font-size: 11px; color: #8a8a8a; line-height: 1.6; text-align: center; }
.login-box .welcome-note b { color: #ffcc55; }

/* ---- slot machine ------------------------------------------------------ */
.two-col { display: flex; gap: 14px; align-items: flex-start; }
.two-col .col-main { flex: 1; min-width: 0; }
.two-col .col-side { width: 250px; flex: none; }

.slot-cabinet { background: linear-gradient(180deg, #241608, #0c0805); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.6); padding: 14px; }
.marquee { text-align: center; font-weight: bold; font-size: 15px; letter-spacing: 3px; color: #ffcc55; text-transform: uppercase; text-shadow: 0 0 8px rgba(255,153,0,0.7), 1px 1px 0 #000; padding: 8px; margin-bottom: 12px; background: linear-gradient(180deg, #1a1008, #0a0604); border: 1px solid #000; border-top-color: #3a2a10; }
/* --- mechanical vertical reels --- */
.slot-flex { display: flex; gap: 10px; align-items: stretch; }
.slot-flex .cab { flex: 1; min-width: 0; }
.reels { display: flex; gap: 6px; background: #000; padding: 9px; border: 3px solid #6a4a12; box-shadow: inset 0 0 24px rgba(0,0,0,0.9), 0 0 0 1px #000; position: relative; }
.reel-window { flex: 1; height: 258px; overflow: hidden; position: relative; background: linear-gradient(180deg, #1a140d, #0a0705); border: 1px solid #000; border-top-color: #3a3128; box-shadow: inset 0 0 18px rgba(0,0,0,0.85); }
.reel-window::before, .reel-window::after { content: ""; position: absolute; left: 0; right: 0; height: 64px; z-index: 2; pointer-events: none; }
.reel-window::before { top: 0; background: linear-gradient(180deg, rgba(0,0,0,0.8), transparent); }
.reel-window::after { bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,0.8), transparent); }
.reel-strip { display: block; will-change: transform; }
.reel-strip.spinning { filter: blur(1px); }
.tile { height: 86px; display: grid; place-items: center; font-size: 46px; line-height: 1; background: linear-gradient(180deg, #262019, #14100b); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); user-select: none; }
.tile.win { background: linear-gradient(180deg, #5a3d10, #3a2708); box-shadow: inset 0 0 14px rgba(255,153,0,0.7); animation: winblink 0.5s steps(2) infinite; position: relative; z-index: 1; }
.reel-strip.thunk { animation: thunk 0.2s ease; }
@keyframes thunk { 0% { transform: translateY(var(--fy)); } 45% { transform: translateY(calc(var(--fy) + 7px)); } 100% { transform: translateY(var(--fy)); } }
@keyframes winblink { 50% { filter: brightness(1.6); } }
/* center payline marker */
.reels .payline { position: absolute; left: 9px; right: 9px; top: 50%; transform: translateY(-50%); height: 86px; border-top: 2px solid rgba(255,153,0,0.45); border-bottom: 2px solid rgba(255,153,0,0.45); pointer-events: none; z-index: 3; }
.reels .payline::before, .reels .payline::after { content: "▶"; position: absolute; top: 50%; transform: translateY(-50%); color: #ff9900; font-size: 12px; text-shadow: 0 0 6px rgba(255,153,0,0.8); }
.reels .payline::before { left: -8px; }
.reels .payline::after { right: -8px; content: "◀"; }
/* pull lever */
.lever { width: 30px; flex: none; position: relative; cursor: pointer; }
.lever .track { position: absolute; left: 50%; transform: translateX(-50%); top: 14px; bottom: 24px; width: 7px; background: linear-gradient(90deg, #444, #111, #444); border: 1px solid #000; border-radius: 3px; }
.lever .knob { position: absolute; left: 50%; transform: translateX(-50%); top: 6px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a5a, #b0180a); border: 1px solid #6a0a04; box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 2px 3px rgba(255,255,255,0.4); transition: top 0.15s ease; }
.lever.pull .knob { top: calc(100% - 34px); }
.lever:hover .knob { filter: brightness(1.1); }
/* LED displays */
.led-row { display: flex; gap: 8px; margin: 12px 0 4px; }
.led { flex: 1; background: #0a0705; border: 1px solid #000; border-top-color: #2a2620; box-shadow: inset 0 2px 6px rgba(0,0,0,0.85); padding: 6px 10px; text-align: center; }
.led .lk { font-size: 9px; color: #8a7a5a; text-transform: uppercase; letter-spacing: 1px; }
.led .lv { font-family: "Courier New", monospace; font-size: 20px; font-weight: bold; color: #ff9c1a; text-shadow: 0 0 8px rgba(255,140,0,0.7); }
.led.win .lv { color: #6a5a3a; text-shadow: none; }
.led.win.flash .lv { color: #7fd34a; text-shadow: 0 0 8px rgba(127,211,74,0.8); animation: winblink 0.5s steps(2) 4; }

/* --- constant-height result screen (no layout jump) --- */
.result { display: flex; align-items: center; justify-content: center; text-align: center; height: 46px; margin: 12px 0 8px; padding: 0 10px; font-weight: bold; font-size: 15px; text-shadow: 1px 1px 0 #000; background: linear-gradient(180deg, #120f0a, #070503); border: 1px solid #000; box-shadow: inset 0 2px 8px rgba(0,0,0,0.8); overflow: hidden; }
.result.win { color: #ffcc55; text-shadow: 0 0 8px rgba(255,153,0,0.6), 1px 1px 0 #000; }
.result.lose { color: #9a9083; font-weight: normal; }
.result.bonus { color: #7fd34a; text-shadow: 0 0 8px rgba(127,211,74,0.6), 1px 1px 0 #000; }

.controls { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bet-box { display: flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #1a1a1a, #0d0d0d); border: 1px solid #000; padding: 6px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.bet-box .lbl { font-size: 10px; color: #8a8a8a; text-transform: uppercase; padding: 0 4px; }
.step { width: 30px; height: 30px; cursor: pointer; font-size: 18px; font-weight: bold; color: #ffcc55; background: linear-gradient(180deg, #3a3a3a, #1a1a1a); border: 1px solid #000; border-top-color: #4a4a4a; display: grid; place-items: center; text-shadow: 1px 1px 0 #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.step:hover { background: linear-gradient(180deg, #464646, #222); }
.step:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.bet-val { min-width: 78px; text-align: center; font-size: 18px; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 #000; }
.presets { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.preset { font-size: 11px; padding: 5px 10px; cursor: pointer; color: #cfcabf; background: linear-gradient(180deg, #2a2a2a, #161616); border: 1px solid #000; border-top-color: #3a3a3a; text-shadow: 1px 1px 0 #000; }
.preset:hover { background: linear-gradient(180deg, #3a3a3a, #1c1c1c); color: #fff; }
.freespin-flag { display: none; text-align: center; margin-top: 12px; padding: 9px; font-weight: bold; text-transform: uppercase; color: #113a1a; letter-spacing: 1px; background: linear-gradient(180deg, #a6e86a, #4e8a1e); border: 1px solid #2e5410; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.freespin-flag.on { display: block; animation: winblink 0.7s steps(2) infinite; }

.paytable .pt-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); font-size: 12px; }
.paytable .pt-row:nth-child(even) { background: rgba(255,255,255,0.025); }
.pt-row .sym { font-size: 17px; letter-spacing: -2px; margin-right: 6px; }
.pt-row .mult { color: #ffcc55; font-weight: bold; }
.pt-note { font-size: 11px; color: #8a8a8a; margin-top: 8px; line-height: 1.6; padding: 8px; background: rgba(0,0,0,0.3); border: 1px solid #000; }
.pt-note b { color: #ffcc55; }

/* ---- clicker (rustic worn bronze medallion, bgmafia-style) ------------- */
.clicker-top { text-align: center; padding: 6px 0 14px; position: relative; }
.coin-btn {
  width: 150px; height: 150px; border-radius: 50%; margin: 14px auto; cursor: pointer;
  position: relative; user-select: none;
  background-color: #3a1e08;
  /* real grunge texture from the site asset, blended over dark bronze -> matte + worn */
  background-image: url('../img/BB.png'), radial-gradient(circle at 50% 40%, rgba(128,64,20,0.55), rgba(18,9,4,0.9) 66%);
  background-size: 220px auto, cover;
  background-position: center, center;
  background-blend-mode: overlay, normal;
  border: 5px solid #140a04;
  box-shadow:
    inset 0 0 0 2px #6f4a15,
    inset 0 0 20px rgba(0,0,0,0.85),
    0 3px 6px rgba(0,0,0,0.6);
  transition: transform 0.06s ease;
}
/* distressed inner ring */
.coin-btn::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed rgba(0,0,0,0.45); box-shadow: inset 0 0 10px rgba(0,0,0,0.6); pointer-events: none; }
.coin-btn .coin-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: Georgia, "Times New Roman", serif; font-size: 74px; font-weight: bold;
  color: #b9832a; /* tarnished gold */
  text-shadow: 0 -2px 1px rgba(0,0,0,0.9), 0 1px 0 rgba(255,190,90,0.18); /* engraved */
}
.coin-btn.earning { box-shadow: inset 0 0 0 2px #6f4a15, inset 0 0 20px rgba(0,0,0,0.85), 0 0 15px rgba(200,90,20,0.5), 0 3px 6px rgba(0,0,0,0.6); }
.coin-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #6f4a15, inset 0 0 24px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.6); }
.coin-btn.pop { animation: coinpop 0.12s ease; }
@keyframes coinpop { 50% { transform: scale(0.95); } }
.coin-hint { color: #8a8a8a; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }
.click-stats { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.click-stats .cs { padding: 8px 14px; background: linear-gradient(180deg, #1e1e1e, #101010); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); text-align: center; }
.click-stats .cs .v { font-size: 16px; font-weight: bold; color: #ffcc55; text-shadow: 1px 1px 0 #000; }
.click-stats .cs .k { font-size: 10px; color: #8a8a8a; text-transform: uppercase; }
.floatnum { position: fixed; pointer-events: none; z-index: 95; color: #fff; font-weight: bold; font-size: 20px; text-shadow: 0 1px 3px #000, 0 0 6px rgba(255,153,0,0.6); animation: floatup 0.9s ease-out forwards; }
@keyframes floatup { to { transform: translateY(-70px); opacity: 0; } }

.shop-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: -1px; background: linear-gradient(180deg, #1e1e1e, #101010); border: 1px solid #000; border-top-color: #2c2c2c; }
.shop-item.owned { border-left: 3px solid #ff9900; }
.shop-item.cant { opacity: 0.8; }
.shop-item .ic { font-size: 26px; width: 34px; text-align: center; }
.shop-item .si-name { color: #fff; font-weight: bold; font-size: 12px; text-shadow: 1px 1px 0 #000; }
.shop-item .si-desc { color: #8a8a8a; font-size: 11px; }
.shop-item .si-right { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.shop-item .si-own { color: #8a8a8a; font-size: 11px; }
.shop-item .si-own b { color: #ffcc55; }

/* ---- footer (metallic gray bar, hazard stripes top & bottom) ----------- */
.footlinks { text-align: right; padding: 8px 4px 8px; font-size: 11px; color: #6a6a6a; }
.footlinks a { color: #8a8a8a; margin: 0 3px; }
.footlinks a:hover { color: #ff9900; }
.hazard-foot {
  position: relative; z-index: 2; margin: 10px 0 30px;
  border: 1px solid #000;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
}
.hazard-foot .strip { height: 8px; background: url('../img/topLine.png') repeat-x; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); }
.hazard-foot .cr {
  text-align: center; padding: 15px 12px; font-size: 11px; color: #d0ccc4;
  text-shadow: 1px 1px 0 #000; letter-spacing: 0.3px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #454545, #2c2c2c 55%, #232323);
}
.hazard-foot .cr b { color: #ff9900; }
.hazard-foot .cr a { color: #b8b2a8; text-decoration: underline; }
.hazard-foot .cr a:hover { color: #ff9900; }

/* ---- toasts / burst ---------------------------------------------------- */
#toaster { position: fixed; top: 14px; right: 14px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 230px; max-width: 300px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; background: linear-gradient(180deg, #262626, #131313); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.6); animation: toastin 0.25s ease; }
.toast.badge-toast { border-color: #7a4d00; box-shadow: inset 0 1px 0 rgba(255,204,85,0.2), 0 0 10px rgba(255,153,0,0.35); }
.toast .tic { font-size: 26px; }
.toast .tt { font-weight: bold; color: #fff; font-size: 12px; text-shadow: 1px 1px 0 #000; }
.toast .td { font-size: 11px; color: #9a948c; }
@keyframes toastin { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast.fade { animation: toastout 0.35s ease forwards; }
@keyframes toastout { to { transform: translateX(20px); opacity: 0; } }
.burst { position: fixed; pointer-events: none; font-size: 24px; z-index: 90; animation: burst 1s ease forwards; }
@keyframes burst { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-110px) scale(1.3); opacity: 0; } }

.muted { color: #8a8a8a; }
.gold { color: #ffcc55; }
.center { text-align: center; }
.mt10 { margin-top: 10px; }

/* ---- functional bits: clickable chrome --------------------------------- */
.info-tab[data-nav], .logo-link, .ub-avatar[data-nav] { cursor: pointer; }
.info-tab[data-nav]:hover { filter: brightness(1.12); }
.footlinks a { cursor: pointer; }

/* ---- casino lobby table ------------------------------------------------ */
#casTable tr[data-casino] { cursor: pointer; }
#casTable .ctype { color: #cfcabf; }
#casTable .visited { color: #7fd34a; font-size: 11px; }
.ranknote { padding: 9px 12px; font-size: 12px; color: #cfcabf; border-bottom: 1px solid #000; background: rgba(0,0,0,0.28); text-shadow: 1px 1px 0 #000; }
.ranknote b { color: #ffcc55; }

/* ---- clicker balance --------------------------------------------------- */
.cbal { font-size: 13px; color: #cfcabf; margin-bottom: 6px; }
.cbal b { font-size: 15px; }

/* ---- shared game stage ------------------------------------------------- */
.game-stage { background: linear-gradient(180deg, #1a120b, #0a0705); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); padding: 16px; text-align: center; }
.betbar { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; background: linear-gradient(180deg, #1a1a1a, #0d0d0d); border: 1px solid #000; padding: 8px; }
.betbar .lbl { font-size: 10px; color: #8a8a8a; text-transform: uppercase; padding: 0 4px; }
.bet-inp { width: 84px; text-align: center; font-family: inherit; font-size: 16px; font-weight: bold; color: #fff; padding: 6px; background: #0a0a0a; border: 1px solid #000; border-top-color: #2a2a2a; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8); }
.rbets { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.rbet { cursor: pointer; padding: 8px 12px; font-size: 12px; font-weight: bold; color: #cfcabf; background: linear-gradient(180deg, #2a2a2a, #161616); border: 1px solid #000; border-top-color: #3a3a3a; text-shadow: 1px 1px 0 #000; }
.rbet em { font-style: normal; color: #ffcc55; margin-left: 4px; }
.rbet:hover { background: linear-gradient(180deg, #3a3a3a, #1c1c1c); color: #fff; }
.rbet.on { background: linear-gradient(180deg, #3a2a10, #1c1408); border-color: #7a4d00; color: #ffcc55; box-shadow: 0 0 8px rgba(255,153,0,0.3); }
.rstraight { margin-top: 12px; font-size: 12px; color: #8a8a8a; }
.rstraight .lbl { margin-right: 6px; }
.rstraight .bet-inp { width: 70px; }

/* roulette */
.roulette-wheel { width: 150px; height: 150px; margin: 4px auto 10px; border-radius: 50%; position: relative; border: 6px solid #2a1a0a; box-shadow: 0 0 0 3px #6a4a12, inset 0 0 24px rgba(0,0,0,0.8); background: repeating-conic-gradient(#8a1008 0deg 18deg, #111 18deg 36deg); }
.roulette-wheel .rw-hub { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; }
.rlabel { margin-bottom: 6px; }
.rnum { font-family: "Courier New", monospace; font-size: 40px; font-weight: bold; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.4); }
.rnum.red { color: #ff5a44; text-shadow: 0 0 10px rgba(226,58,18,0.7); }
.rnum.black { color: #cfcabf; }
.rnum.green { color: #7fd34a; text-shadow: 0 0 10px rgba(127,211,74,0.7); }
.rcolor { font-size: 11px; color: #8a8a8a; text-transform: uppercase; letter-spacing: 2px; }

/* dice */
.dice-row { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0 6px; }
.die { font-size: 66px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6)); }
.die.tumble { animation: tumble 0.3s linear infinite; }
@keyframes tumble { 50% { transform: rotate(20deg) scale(1.08); } }
.dsum { font-family: "Courier New", monospace; font-size: 40px; font-weight: bold; color: #ffcc55; text-shadow: 0 0 10px rgba(255,153,0,0.6); min-width: 60px; }

/* coin flip */
.coin-flip { width: 130px; height: 130px; margin: 6px auto 10px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 30%, #ffe9a0, #ffb42e 48%, #c77a00 78%, #7f4e00); border: 4px solid #6a4200; box-shadow: inset 0 3px 8px rgba(255,255,255,0.5), inset 0 -6px 12px rgba(0,0,0,0.3), 0 6px 14px rgba(0,0,0,0.5); }
.coin-flip .cf-face { font-size: 56px; }
.coin-flip.flipping { animation: coinflip 0.35s linear infinite; }
@keyframes coinflip { 50% { transform: rotateX(180deg) scale(0.9); } }

/* scratch */
.scratch-card { display: flex; gap: 10px; justify-content: center; padding: 10px 0; }
.sc-cell { width: 92px; height: 92px; display: grid; place-items: center; font-size: 46px; background: linear-gradient(180deg, #3a3a3a, #1c1c1c); border: 1px solid #000; border-top-color: #4a4a4a; box-shadow: inset 0 2px 6px rgba(0,0,0,0.6); color: #777; }
.sc-cell.rev { background: linear-gradient(180deg, #262019, #14100b); color: #fff; animation: reveal 0.3s ease; }
.sc-cell.hit { background: linear-gradient(180deg, #5a3d10, #3a2708); border-color: #ffcc55; box-shadow: inset 0 0 14px rgba(255,153,0,0.7); animation: winblink 0.5s steps(2) infinite; }
@keyframes reveal { from { transform: scale(0.6) rotateY(90deg); opacity: 0.3; } to { transform: none; opacity: 1; } }

/* ---- modal ------------------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.7); display: grid; place-items: center; animation: toastin 0.2s ease; }
.modal { width: 440px; max-width: 92%; background: linear-gradient(180deg, #181818, #0e0e0e); border: 1px solid #000; box-shadow: 0 10px 40px rgba(0,0,0,0.7); }
.modal .box-head .right { margin-left: auto; }
.modal-x { cursor: pointer; color: #cfcabf; font-weight: bold; padding: 2px 8px; border: 1px solid #000; background: linear-gradient(180deg, #3a3a3a, #1a1a1a); }
.modal-x:hover { color: #fff; background: linear-gradient(180deg, #464646, #222); }
.modal .box-body { color: #c9c4bd; }