@font-face{font-family:'CPMono_v07Bold';src:url('fonts/CPMono_v07_Bold-webfont.woff') format('woff');}
@font-face{font-family:'MolotRegular';src:url('fonts/Molot-webfont.woff') format('woff');}
@font-face{font-family:'RadiolandRegular';src:url('fonts/RADIOLAND-webfont.woff') format('woff');}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{background:black;height:100%;text-align:center;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-family:Arial,sans-serif;}
a#fork_me{position:absolute;top:0;right:0;z-index:499}
a#fork_me img{border:0}
a#debug{display:block;opacity:.8;background:black;top:0;font-family:monospace;font-size:15px;margin:5px;padding:10px;position:fixed;right:0;z-index:500;text-decoration:none}a#debug:visited,a#debug:active,a#debug:link{color:#fff}a#debug:hover{text-decoration:underline}
#error{margin-top:100px;padding:30px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.4);background:white}
.hidden{display:none}
#vignette{background-image:url('images/wood.jpg');background-repeat:repeat;position:absolute;width:100%;height:100%;left:0;top:0}
#vignetteimg{position:absolute;width:100%;height:100%;left:0;top:0;margin:0;margin-bottom:-5px;padding:0;border:0}
#font-preload{position:fixed;font-size:50px;color:black;display:block}
#font-preload #CPMono_v07Bold{font-family:CPMono_v07Bold}
#font-preload #MolotRegular{font-family:MolotRegular}
#font-preload #RadiolandRegular{font-family:RadiolandRegular}
#loadingbg{position:absolute;width:100%;height:100%;left:0;top:0;background-image:url('images/loadingbg.png');background-repeat:repeat;display:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
#loadingbg img{position:absolute;width:100%;height:100%;left:0;top:0}
#loadingbg #loading{z-index:400;width:295px;height:283px;background-image:url('images/loading.jpg');background-repeat:no-repeat;margin-left:auto;margin-right:auto;margin-top:200px;position:relative}
#loadingbg #loading #loadingpg{width:0;height:10px;background-image:url('images/loadingpg.png');background-repeat:no-repeat;position:absolute;margin-top:270px;margin-left:36px}
#gamecontrolsdisplay,#gamecontrolsclick,#game,#messageoverlay{width:860px;top:50px;margin-left:auto;margin-right:auto;position:relative}
#gamecontrolsdisplay{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:none}
#game{display:none}
#tableborder{background-image:url('images/tableborder.png');background-repeat:no-repeat;width:1113px;height:497px;position:absolute;top:100px;left:-130px}
#tableborder #table{background-image:url('images/table.jpg');background-repeat:no-repeat;width:847px;height:438px;position:absolute;top:19px;left:137px}
#tableborder #table #boom{background-image:url('images/boom.png');position:absolute;width:277px;height:226px;display:none;margin-left:-98px;margin-top:-105px}
#tableborder #table #demo_canvas{left:7px;top:6px;position:absolute}
#timers{background-image:url('images/timerbg.png');background-repeat:no-repeat;font:30px 'RadiolandRegular',Arial,sans-serif;color:#b23711;letter-spacing:0;width:452px;height:67px;position:absolute;left:10px;top:20px}
#timers .digit{text-align:right;position:absolute;top:26px;font-size:30px;line-height:36px;height:36px}
#minutesremaining{left:28px}
#bombsecondstens{left:398px;color:#d8850d;display:none}
#bombsecondsones{left:418px;color:#d8850d;display:none}
#secondsremainingtens{left:58px}
#secondsremainingones{left:78px}
#bombicon{background-image:url('images/bombicon.png');background-repeat:no-repeat;width:39px;height:19px;left:360px;top:33px;position:absolute;display:none}
#score{background-image:url('images/score.png');background-repeat:no-repeat;text-align:center;font-family:'MolotRegular',Arial,sans-serif;font-size:30px;color:#c34414;letter-spacing:0;width:81px;height:71px;padding-top:28px;padding-left:0;position:absolute;top:17px;left:759px}
#progress{background-image:url('images/progressunit.png');background-repeat:repeat-x;position:absolute;top:33px;left:113px;width:210px;height:34px}
#bestscore{-webkit-user-select:none;-moz-user-select:none;user-select:none;background-image:url('images/bestscore.png');background-repeat:no-repeat;text-align:center;font-family:'MolotRegular',Arial,sans-serif;font-size:22px;color:#47341d;letter-spacing:0;width:135px;height:118px;padding-top:56px;padding-left:2px;position:absolute;top:-6px;left:653px}
#soundclick{left:640px;top:583px;position:absolute;width:210px;height:58px;background:transparent}
#musicbuttonclick{position:absolute;height:20px;width:65px;top:20px;cursor:pointer}
#soundsbuttonclick{position:absolute;height:20px;width:80px;top:20px;left:120px;cursor:pointer}
#sounds{left:640px;top:583px;position:absolute;background-image:url('images/speaker.png');background-position:center;background-repeat:no-repeat;width:210px;height:58px}
#sounds #musicbutton{position:absolute;height:20px;width:65px;top:20px;left:0;cursor:pointer}
#sounds #soundsbutton{position:absolute;height:20px;width:90px;top:20px;right:0;cursor:pointer}
#sounds .on,#sounds .off{width:19px;height:19px;top:0;left:0;background-image:url('images/lights.png');position:absolute}
#sounds #soundsbutton .on,#sounds #soundsbutton .off{left:auto;right:0}
#sounds .off{background-position:0 19px}
#smalllogo{left:5px;top:595px;position:absolute;background-image:url('images/smalllogo.png');background-repeat:no-repeat;width:237px;height:42px}
#instructions{left:274px;top:598px;position:absolute;background-image:url('images/instructions.png');background-repeat:no-repeat;width:96px;height:30px}
#instructionsclick{left:274px;top:598px;position:absolute;background:transparent;width:96px;height:30px;cursor:pointer}
#pause{left:380px;top:579px;position:absolute;background-image:url('images/pause.png');background-repeat:no-repeat;width:89px;height:71px}
#pauseclick{left:380px;top:579px;position:absolute;background:transparent;width:89px;height:71px;cursor:pointer}
#messageoverlay{top:-200px}
#startover{left:492px;top:598px;position:absolute;background-image:url('images/startover.png');background-repeat:no-repeat;width:83px;height:30px}
#startoverclick{left:492px;top:598px;position:absolute;background:transparent;width:83px;height:30px;cursor:pointer}
#bottombar{background:url('images/bottombar-bg.jpg');height:38px;width:100%;z-index:1000;position:fixed;bottom:0;display:none;left:0}
#bottombar #browsermessage{margin-top:1px;margin-right:20px;margin-left:10px;height:32px;width:100%;background:url('images/bottombar-logo.jpg') no-repeat 0 1px;text-align:left;padding-left:38px;padding-top:8px;padding-right:20px;font-family:arial,helvetica,sans-serif;color:#d6a866;font-size:13px;line-height:17px}
#bottombar #browsermessage a{color:#da7532;text-decoration:none}
#bottombar #browsermessage a:visited,#bottombar #browsermessage a:active{color:#da7532;text-decoration:none}
#bottombar #browsermessage a:hover{color:#ffe2b5;text-decoration:none}
#bottombar-close{background:url('images/bottombar-close.jpg') no-repeat;width:32px;height:32px;cursor:pointer;margin-top:2px;margin-right:2px;float:right;position:relative}
#overlay{position:absolute;width:100%;height:100%;left:0;top:0;display:none}
#messageoverlay,#gamecontrolsclick,#gamecontrolsdisplay,#game{z-index:10}
#cue_canvas{position:absolute;left:0;top:0;z-index:11}
#pixellab,#pixellabclick{display:block;position:absolute;left:0;top:0;width:0;height:0;overflow:hidden}

@media (max-width: 900px), (max-height: 720px){
  body{overflow:auto}
  #loadingbg #loading{margin-top:80px}
}

/* Yandex draft patch */
html, body { width:100%; height:100%; overflow:hidden; margin:0; background:#120d08; touch-action:none; }
#bottombar, #pixellab, #pixellabclick, #gameoverfacebook, #gameovertwitter { display:none !important; }
#gamecontrolsdisplay, #gamecontrolsclick, #game, #messageoverlay { will-change: transform; }
@media (max-width: 700px) {
  #font-preload { display:none; }
}

/* Yandex draft cleanup */
#startmessage,
#bottombar,
#pixellab,
#pixellabclick,
#gameoverfacebook,
#gameovertwitter {
  display: none !important;
}

/* v4 fixes */
#gameover { display:none; position:absolute; width:390px; height:402px; left:237px; top:200px; background:url('images/gameover.png') no-repeat; cursor:pointer; }
#gameoverscore { position:absolute; width:180px; left:104px; top:150px; text-align:center; font-family:'MolotRegular',Arial,sans-serif; font-size:42px; line-height:42px; color:#c34414; }
#startmessage { display:none !important; }
#messageoverlay #gameover:not([style*="display: block"]) { display:none; }

/* Agent8Ball Yandex polish */
#gameover {
  top: 145px !important;
  z-index: 9999 !important;
}

/* Language-specific UI assets. Yandex SDK sets html.agent8ball-lang-ru when lang=ru. */
html.agent8ball-lang-ru #bestscore { background-image:url('images/bestscore_ru.png') !important; }
html.agent8ball-lang-ru #score { background-image:url('images/score_ru.png') !important; }
html.agent8ball-lang-ru #instructions { background-image:url('images/instructions_ru.png') !important; }
html.agent8ball-lang-ru #startover { background-image:url('images/startover_ru.png') !important; }
html.agent8ball-lang-ru #sounds { background-image:url('images/speaker_ru.png') !important; }
html.agent8ball-lang-ru #gameover { background-image:url('images/gameover_ru.png') !important; }
html.agent8ball-lang-en #bestscore { background-image:url('images/bestscore.png') !important; }
html.agent8ball-lang-en #score { background-image:url('images/score.png') !important; }
html.agent8ball-lang-en #instructions { background-image:url('images/instructions.png') !important; }
html.agent8ball-lang-en #startover { background-image:url('images/startover.png') !important; }
html.agent8ball-lang-en #sounds { background-image:url('images/speaker.png') !important; }
html.agent8ball-lang-en #gameover { background-image:url('images/gameover.png') !important; }



/* v20: reward button image + cooldown timer */
#rewardtime {
  position:absolute;
  left:502px;
  top:20px;
  width:135px;
  height:60px;
  background:url('images/reward.png') no-repeat center center;
  background-size:135px 60px;
  pointer-events:none;
  z-index:20;
}
#rewardtime .reward-main,
#rewardtime .reward-sub{
  display:none !important;
}
#rewardtime.a8-disabled{
  opacity:1;
  filter:none;
}
#rewardtime.a8-cooldown{
  background-image:url('images/reward_timer.png') !important;
}
#rewardtime .a8-reward-countdown{
  position:absolute;
  left:0;
  top:0;
  width:135px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'MolotRegular',Arial,sans-serif;
  font-size:24px;
  line-height:1;
  color:#c34414;
  text-shadow:0 2px 3px rgba(0,0,0,.85);
  letter-spacing:1px;
}
#rewardtimeclick{
  position:absolute;
  left:502px;
  top:20px;
  width:135px;
  height:60px;
  background:transparent;
  cursor:pointer;
  z-index:9999;
}


/* Yandex Games compliance: prevent selection, dragging, context-menu artifacts and native media UI. */
html, body, body *, body *::before, body *::after {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

canvas { touch-action: none; }

/* Align the digital glyphs with the timer screen on touch/landscape devices. */
html.agent8ball-mobile-landscape #timers .digit { top: 32px; }

img, canvas, a, div {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

#audios, #_audios, audio, video {
  display: none !important;
  visibility: hidden !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Responsive landscape controls. The whole legacy scene is scaled as one
   surface, while these hit areas stay large enough for coarse pointers. */
html.agent8ball-mobile-landscape #smalllogo {
  left: 8px;
  width: 205px;
  background-size: contain;
  background-position: left center;
}
html.agent8ball-mobile-landscape #instructions,
html.agent8ball-mobile-landscape #instructionsclick {
  left: 230px;
  top: 565px;
  width: 140px;
  height: 90px;
}
html.agent8ball-mobile-landscape #instructions {
  background-position: center;
  background-size: 125px auto;
}
html.agent8ball-mobile-landscape #pause,
html.agent8ball-mobile-landscape #pauseclick {
  left: 375px;
  top: 565px;
  width: 110px;
  height: 90px;
}
html.agent8ball-mobile-landscape #pause {
  background-position: center;
  background-size: 105px auto;
}
html.agent8ball-mobile-landscape #startover,
html.agent8ball-mobile-landscape #startoverclick {
  left: 490px;
  top: 565px;
  width: 130px;
  height: 90px;
}
html.agent8ball-mobile-landscape #startover {
  background-position: center;
  background-size: 115px auto;
}
html.agent8ball-mobile-landscape #sounds,
html.agent8ball-mobile-landscape #soundclick {
  left: 625px;
  top: 565px;
  width: 225px;
  height: 90px;
  background-position: center;
  background-size: 210px auto;
}
html.agent8ball-mobile-landscape #musicbuttonclick {
  left: 0;
  top: 0;
  width: 105px;
  height: 90px;
}
html.agent8ball-mobile-landscape #soundsbuttonclick {
  left: 115px;
  top: 0;
  width: 110px;
  height: 90px;
}
html.agent8ball-mobile-landscape #rewardtimeclick {
  left: 492px;
  top: 8px;
  width: 155px;
  height: 84px;
}

#rotate-device {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at center, rgba(76,53,31,.97), rgba(18,13,8,.99));
  color: #f5d39b;
  text-align: center;
}
.rotate-device-card {
  max-width: 330px;
  padding: 24px 28px;
  border: 2px solid rgba(245,211,155,.5);
  border-radius: 20px;
  background: rgba(20,12,7,.58);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}
.rotate-device-icon {
  margin-bottom: 10px;
  font-size: 64px;
  line-height: 1;
}
.rotate-device-text {
  display: none;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 22px;
  line-height: 1.25;
}
html.agent8ball-lang-ru .rotate-device-text-ru,
html.agent8ball-lang-en .rotate-device-text-en {
  display: block;
}
html.agent8ball-mobile-portrait #rotate-device {
  display: flex;
}

/* Stage 5: live combo feedback and a complete run summary. */
#combohud,
#scoreflash {
  position: absolute;
  z-index: 80;
  left: 280px;
  width: 300px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
#combohud {
  top: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transform: translateY(-5px);
  font-family: 'MolotRegular', Arial, sans-serif;
  color: #f8d89c;
  text-shadow: 0 2px 5px #160902, 0 0 12px rgba(211,91,27,.65);
}
#combohud.a8-visible {
  opacity: 1;
  transform: translateY(0);
}
#combohud-label {
  font-size: 18px;
  letter-spacing: 1px;
}
#combohud-multiplier {
  color: #f06a25;
  font-size: 27px;
  line-height: 1;
}
#scoreflash {
  top: 118px;
  padding: 8px 14px;
  transform: translateY(8px) scale(.96);
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 23px;
  line-height: 1.15;
  color: #fff0c7;
  text-shadow: 0 3px 5px #190700, 0 0 15px rgba(239,88,22,.9);
}
#scoreflash.a8-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

html.agent8ball-lang-ru #gameover,
html.agent8ball-lang-en #gameover,
#gameover {
  left: 170px !important;
  top: 126px !important;
  width: 520px;
  height: 438px;
  padding: 24px 28px 20px;
  overflow: hidden;
  border: 3px solid #b27a3e;
  border-radius: 18px;
  background-color: #241208;
  background-image:
    linear-gradient(145deg, rgba(255,218,157,.10), transparent 38%),
    radial-gradient(circle at 50% 0, rgba(180,69,20,.30), transparent 54%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 7px) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.78), inset 0 0 0 2px rgba(255,216,146,.10), inset 0 -35px 80px rgba(0,0,0,.38);
  color: #f0d4a1;
  text-align: center;
}
#gameover:before,
#gameover:after {
  content: '';
  position: absolute;
  left: 25px;
  right: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237,190,114,.58), transparent);
}
#gameover:before { top: 64px; }
#gameover:after { bottom: 48px; }
#gameover:focus-visible {
  outline: 4px solid #f09242;
  outline-offset: 4px;
}
.a8-copy-ru,
.a8-copy-en { display: none; }
html.agent8ball-lang-ru .a8-copy-ru { display: inline; }
html.agent8ball-lang-en .a8-copy-en { display: inline; }
.a8-results-heading {
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 2px;
  color: #f4d59d;
}
.a8-results-score-label {
  margin-top: 14px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: #b88d5d;
}
#gameoverscore {
  position: static;
  width: auto;
  margin: -1px 0 9px;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 58px;
  line-height: 62px;
  color: #e45c21;
  text-shadow: 0 3px 0 #4d1707, 0 0 18px rgba(217,72,17,.35);
}
.a8-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.a8-result-stat {
  min-width: 0;
  padding: 12px 5px 10px;
  border: 1px solid rgba(219,168,96,.24);
  border-radius: 9px;
  background: rgba(7,3,1,.28);
}
.a8-result-stat strong {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 25px;
  line-height: 28px;
  color: #f1c87e;
  text-overflow: ellipsis;
}
.a8-result-stat > span {
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: .5px;
  color: #b58b5d;
}
.a8-results-extras {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.a8-results-extras > span {
  padding: 7px 11px;
  border-radius: 99px;
  background: rgba(195,68,20,.16);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 10px;
  color: #c7a577;
}
.a8-results-extras strong {
  margin-left: 4px;
  font-size: 15px;
  color: #f07b37;
}
.a8-results-actions {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 10px;
  display: flex;
  gap: 10px;
}
.a8-results-actions button {
  flex: 1;
  height: 35px;
  border: 1px solid rgba(226,173,96,.34);
  border-radius: 7px;
  background: rgba(8,3,1,.36);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: #d2aa72;
  cursor: pointer;
}
.a8-results-actions button:hover,
.a8-results-actions button:focus-visible {
  border-color: #e37a35;
  background: rgba(190,62,17,.22);
  color: #ffe0a7;
  outline: none;
}

/* Stage 6: leaderboard button and in-game ranking dialog. */
#instructions,
#instructionsclick { left: 250px; }
#leaderboardbutton,
#leaderboardclick {
  position: absolute;
  left: 352px;
  top: 590px;
  width: 108px;
  height: 48px;
}
#leaderboardbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(219,168,96,.35);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(69,39,19,.88), rgba(26,12,5,.92));
  box-shadow: inset 0 1px rgba(255,225,165,.14), 0 2px 5px rgba(0,0,0,.4);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .6px;
  color: #d5aa70;
}
#leaderboardbutton > span:first-child {
  display: inline;
  color: #e7772e;
  font-size: 14px;
}
#leaderboardclick {
  z-index: 9999;
  cursor: pointer;
}
#pause,
#pauseclick { left: 468px; }
#startover,
#startoverclick { left: 565px; }
#sounds,
#soundclick { left: 650px; }

#leaderboardmodal {
  display: none;
  position: absolute;
  z-index: 10020;
  left: 150px;
  top: 88px;
  width: 560px;
  height: 520px;
  padding: 0;
  color: #f0d4a1;
}
.a8-leaderboard-panel {
  position: absolute;
  inset: 0;
  padding: 24px 28px 20px;
  overflow: hidden;
  border: 3px solid #b27a3e;
  border-radius: 18px;
  background-color: #241208;
  background-image:
    linear-gradient(145deg, rgba(255,218,157,.10), transparent 38%),
    radial-gradient(circle at 50% 0, rgba(180,69,20,.30), transparent 54%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 7px);
  box-shadow: 0 24px 70px rgba(0,0,0,.78), inset 0 0 0 2px rgba(255,216,146,.10), inset 0 -35px 80px rgba(0,0,0,.38);
}
.a8-leaderboard-title {
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 23px;
  line-height: 30px;
  letter-spacing: 2px;
  color: #f4d59d;
}
.a8-leaderboard-subtitle {
  margin-top: 1px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  color: #a67c50;
}
.a8-leaderboard-close {
  position: absolute;
  z-index: 2;
  right: 15px;
  top: 13px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(221,168,93,.28);
  border-radius: 50%;
  background: rgba(8,3,1,.35);
  font: 30px/40px Arial, sans-serif;
  color: #d5aa70;
  cursor: pointer;
}
.a8-leaderboard-close:hover,
.a8-leaderboard-close:focus-visible {
  border-color: #e37a35;
  color: #ffe0a7;
  outline: none;
}
.a8-leaderboard-status {
  min-height: 27px;
  padding-top: 9px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 11px;
  color: #c39c6b;
}
.a8-leaderboard-list {
  height: 304px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(219,168,96,.22);
  border-radius: 10px;
  background: rgba(7,3,1,.27);
  scrollbar-color: #9a582e rgba(0,0,0,.18);
  scrollbar-width: thin;
}
.a8-leaderboard-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 105px;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(219,168,96,.12);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 12px;
  text-align: left;
}
.a8-leaderboard-row:last-child { border-bottom: 0; }
.a8-leaderboard-row.a8-current-player {
  background: rgba(211,83,26,.20);
  color: #ffe0a7;
}
.a8-leaderboard-rank { color: #d87332; }
.a8-leaderboard-name {
  overflow: hidden;
  padding-right: 8px;
  color: #d8bd91;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a8-leaderboard-score {
  color: #f1c87e;
  text-align: right;
}
.a8-leaderboard-local-best {
  min-height: 26px;
  padding-top: 8px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 11px;
  color: #d8bd91;
}
.a8-leaderboard-auth {
  display: none;
  align-items: center;
  min-height: 57px;
  margin-top: 5px;
  padding-top: 8px;
  border-top: 1px solid rgba(219,168,96,.18);
}
.a8-leaderboard-auth.a8-visible { display: flex; }
.a8-leaderboard-auth p {
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #b89568;
  text-align: left;
}
html.agent8ball-mobile-landscape #smalllogo {
  width: 175px;
}
html.agent8ball-mobile-landscape #instructions,
html.agent8ball-mobile-landscape #instructionsclick {
  left: 185px;
  width: 120px;
}
html.agent8ball-mobile-landscape #leaderboardbutton,
html.agent8ball-mobile-landscape #leaderboardclick {
  left: 310px;
  top: 565px;
  width: 125px;
  height: 90px;
}
html.agent8ball-mobile-landscape #leaderboardbutton {
  font-size: 11px;
}
html.agent8ball-mobile-landscape #pause,
html.agent8ball-mobile-landscape #pauseclick {
  left: 440px;
  width: 100px;
}
html.agent8ball-mobile-landscape #startover,
html.agent8ball-mobile-landscape #startoverclick {
  left: 545px;
  width: 105px;
}
html.agent8ball-mobile-landscape #sounds,
html.agent8ball-mobile-landscape #soundclick {
  left: 650px;
  width: 200px;
}
html.agent8ball-mobile-landscape #musicbuttonclick { width: 90px; }
html.agent8ball-mobile-landscape #soundsbuttonclick { left: 95px; width: 105px; }
html.agent8ball-mobile-landscape #leaderboardmodal {
  left: 50px;
  top: 25px;
  width: 760px;
  height: 640px;
}
html.agent8ball-mobile-landscape .a8-leaderboard-panel {
  padding: 28px 38px 22px;
}
html.agent8ball-mobile-landscape .a8-leaderboard-title { font-size: 29px; line-height: 36px; }
html.agent8ball-mobile-landscape .a8-leaderboard-subtitle { font-size: 13px; }
html.agent8ball-mobile-landscape .a8-leaderboard-status { min-height: 38px; font-size: 14px; }
html.agent8ball-mobile-landscape .a8-leaderboard-list { height: 405px; }
html.agent8ball-mobile-landscape .a8-leaderboard-row { min-height: 40px; font-size: 16px; }
html.agent8ball-mobile-landscape .a8-leaderboard-local-best { font-size: 14px; }
html.agent8ball-mobile-landscape .a8-leaderboard-auth p { font-size: 14px; }
html.agent8ball-mobile-landscape .a8-leaderboard-close { width: 70px; height: 70px; font-size: 42px; }

/* Stage 7: game modes, ranked time bonus and first-shot guidance. */
#gamecontrolsdisplay { z-index: 12; pointer-events: none; }
#modebadge {
  display: none;
  position: absolute;
  z-index: 28;
  left: 24px;
  top: 91px;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 27px;
  padding: 0 12px;
  border: 1px solid rgba(235,183,108,.35);
  border-radius: 99px;
  background: rgba(20,9,3,.78);
  box-shadow: 0 3px 10px rgba(0,0,0,.42);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .7px;
  color: #d9b57e;
  pointer-events: none;
}
#modebadge[data-mode="ranked"] { color: #f0bc72; }
#modebadge[data-mode="practice"] { color: #b9d79f; }

#timers.a8-practice #minutesremaining {
  left: 37px;
  top: 13px;
  font-size: 40px;
  line-height: 42px;
}
#timers.a8-practice #progress { opacity: .42; }

#first-shot-hint {
  display: flex;
  position: absolute;
  z-index: 35;
  left: 168px;
  top: 492px;
  width: 330px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid rgba(240,164,79,.55);
  border-radius: 10px;
  background: rgba(28,12,4,.90);
  box-shadow: 0 8px 24px rgba(0,0,0,.58), inset 0 1px rgba(255,229,174,.12);
  transform: translateY(8px);
  opacity: 0;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: .5px;
  color: #f4d49b;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#first-shot-hint.a8-visible { transform: translateY(0); opacity: 1; }
.a8-first-shot-hand {
  display: inline-block;
  color: #ed762e;
  font: 27px/1 Arial, sans-serif;
  animation: a8-first-shot-pull 1.15s ease-in-out infinite;
}
@keyframes a8-first-shot-pull {
  0%, 100% { transform: translateX(5px); }
  50% { transform: translateX(-8px); }
}

#modemenu {
  display: none;
  position: absolute;
  z-index: 10030;
  left: 120px;
  top: 136px;
  width: 620px;
  height: 426px;
  color: #f0d4a1;
}
.a8-mode-panel {
  position: absolute;
  inset: 0;
  padding: 27px 30px 30px;
  overflow: hidden;
  border: 3px solid #b27a3e;
  border-radius: 18px;
  background-color: #241208;
  background-image:
    linear-gradient(145deg, rgba(255,218,157,.10), transparent 38%),
    radial-gradient(circle at 50% 0, rgba(180,69,20,.32), transparent 54%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 7px);
  box-shadow: 0 24px 70px rgba(0,0,0,.82), inset 0 0 0 2px rgba(255,216,146,.10), inset 0 -35px 80px rgba(0,0,0,.38);
}
.a8-mode-title {
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 27px;
  line-height: 34px;
  letter-spacing: 2px;
  color: #f4d59d;
}
.a8-mode-subtitle {
  margin-top: 2px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  color: #a67c50;
}
.a8-mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin-top: 24px;
}
.a8-mode-option {
  display: flex;
  height: 276px;
  min-width: 0;
  padding: 17px 18px 15px;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(219,168,96,.30);
  border-radius: 13px;
  background: rgba(7,3,1,.34);
  box-shadow: inset 0 1px rgba(255,225,165,.08);
  color: #e7c792;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.a8-mode-option:hover,
.a8-mode-option:focus-visible {
  border-color: #e37a35;
  background: rgba(190,62,17,.20);
  transform: translateY(-3px);
  outline: none;
}
.a8-mode-option .a8-mode-icon {
  height: 61px;
  font: 50px/58px 'MolotRegular', Arial, sans-serif;
  color: #e86d27;
  text-shadow: 0 0 18px rgba(226,86,26,.34);
}
#mode-practice .a8-mode-icon { color: #a7c78b; }
.a8-mode-option strong {
  margin-top: 7px;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 21px;
  line-height: 27px;
  letter-spacing: 1px;
  color: #f2d39d;
}
.a8-mode-option em {
  margin-top: 5px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 1.4px;
  color: #e17a39;
}
#mode-practice em { color: #a7c78b; }
.a8-mode-option small {
  display: block;
  margin-top: 16px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: #b99569;
}

.a8-result-mode {
  min-height: 16px;
  margin-top: 1px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 9px;
  line-height: 15px;
  letter-spacing: 1.3px;
  color: #d1783e;
}
#gameover .a8-results-score-label { margin-top: 6px; }
#gameover .a8-results-extras { flex-wrap: wrap; gap: 7px; margin-top: 9px; }
#gameover .a8-results-extras > span { padding: 5px 9px; }

html.agent8ball-mobile-landscape #modebadge {
  min-width: 160px;
  height: 36px;
  font-size: 12px;
}
html.agent8ball-mobile-landscape #first-shot-hint {
  left: 125px;
  top: 470px;
  width: 430px;
  min-height: 66px;
  font-size: 15px;
  line-height: 20px;
}
html.agent8ball-mobile-landscape #modemenu {
  left: 50px;
  top: 24px;
  width: 760px;
  height: 640px;
}
html.agent8ball-mobile-landscape .a8-mode-panel { padding: 31px 38px 34px; }
html.agent8ball-mobile-landscape .a8-mode-title { font-size: 31px; line-height: 39px; }
html.agent8ball-mobile-landscape .a8-mode-subtitle { font-size: 12px; }
html.agent8ball-mobile-landscape .a8-mode-options { gap: 22px; margin-top: 28px; }
html.agent8ball-mobile-landscape .a8-mode-option { height: 475px; padding: 32px 25px 24px; }
html.agent8ball-mobile-landscape .a8-mode-option .a8-mode-icon { height: 100px; font-size: 80px; line-height: 95px; }
html.agent8ball-mobile-landscape .a8-mode-option strong { margin-top: 14px; font-size: 28px; line-height: 35px; }
html.agent8ball-mobile-landscape .a8-mode-option em { margin-top: 9px; font-size: 15px; }
html.agent8ball-mobile-landscape .a8-mode-option small { margin-top: 27px; font-size: 17px; line-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .a8-first-shot-hand { animation: none; }
  #first-shot-hint, .a8-mode-option { transition: none; }
}

/* Stage 8: turn-based duel against a computer opponent. */
html[data-agent8ball-mode-menu-open="1"] #gamecontrolsdisplay { z-index: 9; }
#duelhud {
  display: none;
  position: absolute;
  z-index: 34;
  left: 237px;
  top: 15px;
  width: 386px;
  height: 73px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border: 2px solid rgba(190,126,62,.68);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(68,37,18,.95), rgba(22,10,4,.97)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 7px);
  box-shadow: 0 7px 18px rgba(0,0,0,.55), inset 0 1px rgba(255,224,166,.13);
  pointer-events: none;
}
.a8-duel-side {
  display: flex;
  width: 92px;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: #b99364;
}
.a8-duel-side strong {
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 32px;
  line-height: 1;
  color: #f0c17d;
}
.a8-duel-bot strong { color: #bcce9a; }
.a8-duel-turn {
  display: flex;
  height: 100%;
  min-width: 175px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(218,164,94,.20);
  border-left: 1px solid rgba(218,164,94,.20);
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: #e68039;
}
.a8-duel-turn.a8-bot-turn { color: #b8d398; }

#modemenu {
  left: 50px;
  top: 68px;
  width: 760px;
  height: 566px;
}
.a8-mode-panel { padding: 24px 28px 27px; }
.a8-mode-options { gap: 15px; margin-top: 16px; }
.a8-mode-option { height: 205px; padding: 10px 18px 12px; }
.a8-mode-option .a8-mode-icon { height: 45px; font-size: 39px; line-height: 43px; }
.a8-mode-option strong { margin-top: 3px; font-size: 19px; line-height: 24px; }
.a8-mode-option em { margin-top: 3px; font-size: 10px; }
.a8-mode-option small { margin-top: 9px; font-size: 11px; line-height: 15px; }
.a8-duel-option {
  display: flex;
  min-height: 172px;
  margin-top: 14px;
  padding: 17px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 19px;
  border: 1px solid rgba(173,200,136,.27);
  border-radius: 13px;
  background: linear-gradient(100deg, rgba(81,104,53,.15), rgba(7,3,1,.34) 55%);
  box-shadow: inset 0 1px rgba(233,255,200,.06);
}
.a8-duel-option-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.a8-duel-option-copy > .a8-mode-icon {
  flex: 0 0 68px;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 38px;
  line-height: 1;
  color: #aecb8d;
  text-align: center;
  text-shadow: 0 0 18px rgba(136,181,101,.25);
}
.a8-duel-option-copy strong {
  display: block;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 1px;
  color: #e2d1a9;
}
.a8-duel-option-copy small {
  display: block;
  max-width: 360px;
  margin-top: 7px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 15px;
  color: #a78d69;
}
.a8-difficulty-options {
  display: flex;
  width: 152px;
  flex: 0 0 152px;
  flex-direction: column;
  gap: 6px;
}
.a8-difficulty-options button {
  height: 37px;
  border: 1px solid rgba(172,202,132,.30);
  border-radius: 7px;
  background: rgba(59,79,38,.18);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .8px;
  color: #b9ce9d;
  cursor: pointer;
}
.a8-difficulty-options button:hover,
.a8-difficulty-options button:focus-visible {
  border-color: #b8d38f;
  background: rgba(93,125,59,.34);
  color: #e4f1d1;
  outline: none;
}

.a8-result-duel-summary { display: none; }
#gameover.a8-duel-result .a8-results-score-label,
#gameover.a8-duel-result #gameoverscore,
#gameover.a8-duel-result .a8-results-grid,
#gameover.a8-duel-result .a8-results-extras { display: none; }
#gameover.a8-duel-result .a8-result-duel-summary { display: block; }
.a8-duel-verdict {
  margin-top: 27px;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 29px;
  line-height: 36px;
  letter-spacing: 2px;
  color: #e87532;
  text-shadow: 0 3px 12px rgba(223,81,24,.30);
}
.a8-duel-final-score {
  display: flex;
  margin-top: 17px;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.a8-duel-final-score > div {
  display: flex;
  min-width: 118px;
  flex-direction: column;
  align-items: center;
}
.a8-duel-final-score span {
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #a98a63;
}
.a8-duel-final-score strong {
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 66px;
  line-height: 72px;
  color: #f0bd73;
}
.a8-duel-final-score > div:last-child strong { color: #b8cf97; }
.a8-duel-final-score b {
  font: 42px/1 'MolotRegular', Arial, sans-serif;
  color: #75472c;
}
.a8-duel-result-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.a8-duel-result-meta > span {
  padding: 7px 11px;
  border-radius: 99px;
  background: rgba(99,122,69,.15);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 9px;
  color: #af9a77;
}
.a8-duel-result-meta strong { margin-left: 4px; color: #c7d7a9; }

html.agent8ball-mobile-landscape #duelhud {
  left: 175px;
  top: 10px;
  width: 510px;
  height: 86px;
}
html.agent8ball-mobile-landscape .a8-duel-side { width: 125px; font-size: 13px; }
html.agent8ball-mobile-landscape .a8-duel-side strong { font-size: 42px; }
html.agent8ball-mobile-landscape .a8-duel-turn { min-width: 255px; font-size: 20px; }
html.agent8ball-mobile-landscape #modemenu {
  left: 20px;
  top: 14px;
  width: 820px;
  height: 672px;
}
html.agent8ball-mobile-landscape .a8-mode-panel { padding: 25px 30px 26px; }
html.agent8ball-mobile-landscape .a8-mode-options { gap: 20px; margin-top: 19px; }
html.agent8ball-mobile-landscape .a8-mode-option { height: 248px; padding: 13px 23px 15px; }
html.agent8ball-mobile-landscape .a8-mode-option .a8-mode-icon { height: 58px; font-size: 51px; line-height: 56px; }
html.agent8ball-mobile-landscape .a8-mode-option strong { margin-top: 4px; font-size: 25px; line-height: 31px; }
html.agent8ball-mobile-landscape .a8-mode-option em { margin-top: 4px; font-size: 13px; }
html.agent8ball-mobile-landscape .a8-mode-option small { margin-top: 12px; font-size: 15px; line-height: 20px; }
html.agent8ball-mobile-landscape .a8-duel-option { min-height: 237px; margin-top: 17px; padding: 22px 23px; gap: 23px; }
html.agent8ball-mobile-landscape .a8-duel-option-copy { gap: 20px; }
html.agent8ball-mobile-landscape .a8-duel-option-copy > .a8-mode-icon { flex-basis: 85px; font-size: 50px; }
html.agent8ball-mobile-landscape .a8-duel-option-copy strong { font-size: 25px; line-height: 31px; }
html.agent8ball-mobile-landscape .a8-duel-option-copy small { max-width: 430px; margin-top: 10px; font-size: 15px; line-height: 20px; }
html.agent8ball-mobile-landscape .a8-difficulty-options { width: 185px; flex-basis: 185px; gap: 8px; }
html.agent8ball-mobile-landscape .a8-difficulty-options button { height: 51px; font-size: 13px; }

/* Stage 9: earned coins and cosmetic loadouts. */
.a8-coin {
  display: inline-flex !important;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  border: 2px solid #f0b94e;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff0a1, #d7891f 48%, #8b4712 100%);
  box-shadow: inset 0 0 0 2px rgba(102,47,6,.35), 0 1px 5px rgba(0,0,0,.45);
  font: 11px/1 'MolotRegular', Arial, sans-serif;
  color: #6f340c;
  text-shadow: 0 1px rgba(255,236,159,.5);
}

#wallet,
#shopclick {
  position: absolute;
  left: 665px;
  top: 112px;
  width: 172px;
  height: 42px;
}
#wallet {
  z-index: 36;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(224,172,95,.38);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(72,41,20,.92), rgba(24,11,5,.94));
  box-shadow: inset 0 1px rgba(255,226,166,.12), 0 4px 11px rgba(0,0,0,.43);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  color: #e8c183;
  pointer-events: none;
}
#wallet strong {
  min-width: 28px;
  font-size: 15px;
  color: #f4cf85;
  text-align: left;
}
.a8-wallet-shop {
  padding-left: 5px;
  border-left: 1px solid rgba(225,177,103,.22);
  font-size: 9px;
  letter-spacing: .7px;
  color: #bb9566;
}
#shopclick {
  z-index: 10000;
  cursor: pointer;
}

#tableborder #table:before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 29px;
  right: 29px;
  top: 28px;
  bottom: 29px;
  border-radius: 9px;
  opacity: 0;
  pointer-events: none;
}
html[data-agent8ball-table-style="emerald"] #tableborder #table:before {
  opacity: .63;
  background: rgba(4,105,60,.72);
  mix-blend-mode: color;
}
html[data-agent8ball-table-style="midnight"] #tableborder #table:before {
  opacity: .72;
  background: rgba(13,55,112,.82);
  mix-blend-mode: color;
}
html[data-agent8ball-table-style="burgundy"] #tableborder #table:before {
  opacity: .73;
  background: rgba(126,22,35,.78);
  mix-blend-mode: color;
}

.a8-mode-shop-button {
  position: absolute;
  z-index: 3;
  right: 24px;
  top: 18px;
  display: flex;
  height: 42px;
  min-width: 142px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(224,172,95,.36);
  border-radius: 8px;
  background: rgba(12,5,2,.38);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .6px;
  color: #caa575;
  cursor: pointer;
}
.a8-mode-shop-button > strong { color: #f3ca7c; }
.a8-mode-shop-button:hover,
.a8-mode-shop-button:focus-visible {
  border-color: #e37a35;
  background: rgba(190,62,17,.20);
  color: #ffe0a7;
  outline: none;
}

.a8-result-coin-reward {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 54px;
  display: flex;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: #ae8b60;
}
.a8-result-coin-reward .a8-coin { width: 18px; height: 18px; font-size: 9px; }
.a8-result-coin-reward strong { font-size: 15px; color: #f1c879; }
.a8-results-actions button { min-width: 0; padding: 0 5px; }

#shopmodal {
  display: none;
  position: absolute;
  z-index: 10040;
  left: 50px;
  top: 66px;
  width: 760px;
  height: 570px;
  color: #f0d4a1;
}
.a8-shop-panel {
  position: absolute;
  inset: 0;
  padding: 23px 27px 18px;
  overflow: hidden;
  border: 3px solid #b27a3e;
  border-radius: 18px;
  background-color: #241208;
  background-image:
    linear-gradient(145deg, rgba(255,218,157,.10), transparent 38%),
    radial-gradient(circle at 50% 0, rgba(180,69,20,.30), transparent 54%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 7px);
  box-shadow: 0 24px 70px rgba(0,0,0,.82), inset 0 0 0 2px rgba(255,216,146,.10), inset 0 -35px 80px rgba(0,0,0,.38);
}
.a8-shop-heading {
  display: flex;
  height: 54px;
  align-items: flex-start;
  justify-content: space-between;
  padding-right: 52px;
  text-align: left;
}
.a8-shop-title {
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 25px;
  line-height: 31px;
  letter-spacing: 2px;
  color: #f4d59d;
}
.a8-shop-subtitle {
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #a67c50;
}
.a8-shop-wallet {
  display: flex;
  min-width: 105px;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(227,177,101,.28);
  border-radius: 8px;
  background: rgba(8,3,1,.31);
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 19px;
  color: #f3ca7d;
}
.a8-shop-wallet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.a8-shop-reward-ad {
  display: flex;
  min-width: 116px;
  height: 38px;
  padding: 3px 11px 2px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230,143,61,.55);
  border-radius: 8px;
  background: linear-gradient(#6f2d0d, #3c1607);
  box-shadow: inset 0 1px rgba(255,218,151,.14), 0 2px 8px rgba(0,0,0,.28);
  font-family: Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #f2c77e;
  cursor: pointer;
}
.a8-shop-reward-ad strong {
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: .15px;
  color: #fff0c2;
  text-shadow: 0 1px 1px rgba(0,0,0,.75);
}
.a8-shop-reward-ad > span {
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: .75px;
  color: #e6a866;
}
.a8-shop-reward-ad:hover,
.a8-shop-reward-ad:focus-visible {
  border-color: #f08a3e;
  background: linear-gradient(#843912, #4a1b08);
  outline: none;
}
.a8-shop-reward-ad:disabled,
.a8-shop-reward-ad.a8-busy {
  opacity: .55;
  cursor: default;
}
.a8-shop-close {
  position: absolute;
  z-index: 4;
  right: 14px;
  top: 12px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(221,168,93,.28);
  border-radius: 50%;
  background: rgba(8,3,1,.35);
  font: 30px/40px Arial, sans-serif;
  color: #d5aa70;
  cursor: pointer;
}
.a8-shop-close:hover,
.a8-shop-close:focus-visible {
  border-color: #e37a35;
  color: #ffe0a7;
  outline: none;
}
.a8-shop-section { margin-top: 11px; }
.a8-shop-section h2 {
  margin: 0 0 7px;
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 10px;
  line-height: 17px;
  letter-spacing: 1.5px;
  color: #cf9d65;
  text-align: left;
}
.a8-shop-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.a8-shop-item {
  display: flex;
  min-width: 0;
  height: 163px;
  padding: 9px 9px 8px;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(218,164,94,.23);
  border-radius: 10px;
  background: rgba(7,3,1,.28);
  box-shadow: inset 0 1px rgba(255,227,171,.06);
  color: #d4b484;
  cursor: pointer;
}
.a8-shop-item:hover,
.a8-shop-item:focus-visible {
  border-color: #dd7635;
  background: rgba(174,57,18,.17);
  outline: none;
}
.a8-shop-item.a8-equipped {
  border-color: rgba(139,184,105,.62);
  background: rgba(70,101,45,.20);
  box-shadow: inset 0 0 0 1px rgba(190,226,148,.08);
}
.a8-shop-item.a8-unaffordable:not(:hover) { opacity: .67; }
.a8-shop-item > strong {
  display: block;
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: .5px;
  color: #e7c792;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a8-shop-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 71px;
  overflow: hidden;
  border: 1px solid rgba(242,213,161,.18);
  border-radius: 7px;
  background-color: #18100b;
  box-shadow: inset 0 0 14px rgba(0,0,0,.42);
}
.a8-table-preview:after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 5px solid #885c32;
  border-radius: 5px;
  background: #999661;
  box-shadow: inset 0 0 12px rgba(0,0,0,.28), 0 0 0 2px #3a2414;
}
.a8-table-preview[data-style="emerald"]:after { background: #23764d; }
.a8-table-preview[data-style="midnight"]:after { background: #234c7c; }
.a8-table-preview[data-style="burgundy"]:after { background: #7f2838; }
.a8-cue-preview:before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 32px;
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, #eee3c2 0 7%, #cba773 8% 62%, #dc7734 63% 78%, #38241a 79% 93%, #d1a96d 94%);
  box-shadow: 0 2px 3px rgba(0,0,0,.7);
  transform: rotate(-7deg);
}
.a8-cue-preview[data-style="carbon"]:before { filter: grayscale(1) brightness(.58) contrast(1.65); }
.a8-cue-preview[data-style="ruby"]:before { filter: sepia(1) saturate(3.2) hue-rotate(312deg) brightness(.84); }
.a8-cue-preview[data-style="frost"]:before { filter: sepia(1) saturate(2.4) hue-rotate(148deg) brightness(1.16); }
.a8-shop-item-action {
  display: flex;
  width: 100%;
  height: 27px;
  margin-top: 7px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(194,70,22,.15);
  font-family: 'CPMono_v07Bold', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .6px;
  color: #df9e5b;
}
.a8-equipped .a8-shop-item-action {
  background: rgba(107,145,73,.22);
  color: #c4dda6;
}
.a8-shop-status {
  height: 24px;
  padding-top: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .25px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  color: #c9aa7d;
}
.a8-shop-status[data-state="success"] { color: #d8efad; }
.a8-shop-status[data-state="error"] { color: #ff9a6a; }

html.agent8ball-mobile-landscape #wallet,
html.agent8ball-mobile-landscape #shopclick {
  left: 650px;
  top: 108px;
  width: 190px;
  height: 52px;
}
html.agent8ball-mobile-landscape #wallet strong { font-size: 18px; }
html.agent8ball-mobile-landscape .a8-wallet-shop { font-size: 11px; }
html.agent8ball-mobile-landscape #shopmodal {
  left: 20px;
  top: 14px;
  width: 820px;
  height: 672px;
}
html.agent8ball-mobile-landscape .a8-shop-panel { padding: 27px 31px 20px; }
html.agent8ball-mobile-landscape .a8-shop-heading { height: 65px; padding-right: 76px; }
html.agent8ball-mobile-landscape .a8-shop-title { font-size: 30px; line-height: 37px; }
html.agent8ball-mobile-landscape .a8-shop-subtitle { font-size: 11px; }
html.agent8ball-mobile-landscape .a8-shop-wallet { min-width: 130px; height: 49px; font-size: 24px; }
html.agent8ball-mobile-landscape .a8-shop-wallet-actions { gap: 10px; }
html.agent8ball-mobile-landscape .a8-shop-reward-ad { min-width: 148px; height: 49px; padding: 4px 13px 3px; }
html.agent8ball-mobile-landscape .a8-shop-reward-ad strong { font-size: 14px; line-height: 18px; }
html.agent8ball-mobile-landscape .a8-shop-reward-ad > span { font-size: 10px; line-height: 13px; }
html.agent8ball-mobile-landscape .a8-shop-close { width: 64px; height: 64px; font-size: 39px; }
html.agent8ball-mobile-landscape .a8-shop-section { margin-top: 14px; }
html.agent8ball-mobile-landscape .a8-shop-section h2 { margin-bottom: 9px; font-size: 13px; line-height: 20px; }
html.agent8ball-mobile-landscape .a8-shop-items { gap: 12px; }
html.agent8ball-mobile-landscape .a8-shop-item { height: 198px; padding: 11px; }
html.agent8ball-mobile-landscape .a8-shop-preview { height: 88px; }
html.agent8ball-mobile-landscape .a8-shop-item > strong { margin-top: 9px; font-size: 18px; line-height: 23px; }
html.agent8ball-mobile-landscape .a8-shop-item-action { height: 35px; margin-top: 8px; font-size: 11px; }
html.agent8ball-mobile-landscape .a8-shop-status { padding-top: 10px; font-size: 14px; line-height: 18px; }
html.agent8ball-mobile-landscape .a8-mode-shop-button { right: 28px; top: 20px; height: 50px; min-width: 168px; font-size: 11px; }

/* UI polish: simplify the playfield and keep dialogs above every HUD layer. */
#overlay {
  z-index: 20000 !important;
}
#messageoverlay {
  z-index: 20001 !important;
}
#leaderboardmodal,
#shopmodal {
  z-index: 20010 !important;
}

/* These full-screen images are decoration. Ignoring pointer input prevents
   browser image-search/drag overlays without touching cue controls. */
#vignette,
#vignetteimg,
#loadingbg > img {
  pointer-events: none !important;
}

/* The record folder was stale. Keep the node for score bookkeeping, but do
   not render it; the leaderboard now occupies that useful top slot. */
#bestscore,
#wallet,
#shopclick {
  display: none !important;
}

#leaderboardbutton,
#leaderboardclick {
  left: 648px;
  top: 9px;
  width: 105px;
  height: 76px;
}
#leaderboardbutton {
  flex-direction: column;
  gap: 2px;
  border-radius: 11px;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .8px;
}
#leaderboardbutton > span:first-child {
  font-size: 20px;
  line-height: 22px;
}

/* Ranked and practice no longer repeat their mode below the timer. */
#modebadge[data-mode="ranked"],
#modebadge[data-mode="practice"] {
  display: none !important;
}
#modebadge[data-mode="duel"] {
  left: 50%;
  top: 96px;
  min-width: 168px;
  transform: translateX(-50%);
}

/* The old artwork said “restart”, while this control actually opens the menu. */
html.agent8ball-lang-ru #startover,
html.agent8ball-lang-en #startover,
#startover {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none !important;
  font-family: 'MolotRegular', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: .9px;
  color: #d2ad79;
  text-shadow: 0 2px 2px rgba(0,0,0,.72);
}

/* Use a neutral numeric face so the coin balance remains readable. */
#shop-wallet-coins {
  min-width: 32px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  color: #ffe2a1;
}

html.agent8ball-mobile-landscape #leaderboardbutton,
html.agent8ball-mobile-landscape #leaderboardclick {
  left: 633px;
  top: 7px;
  width: 120px;
  height: 84px;
}
html.agent8ball-mobile-landscape #leaderboardbutton {
  font-size: 12px;
}
html.agent8ball-mobile-landscape #leaderboardbutton > span:first-child {
  font-size: 25px;
}
html.agent8ball-mobile-landscape.agent8ball-duel #leaderboardbutton,
html.agent8ball-mobile-landscape.agent8ball-duel #leaderboardclick {
  left: 700px;
  width: 150px;
}
html.agent8ball-mobile-landscape #modebadge[data-mode="duel"] {
  top: 102px;
  min-width: 195px;
}
html.agent8ball-mobile-landscape #startover {
  background-image: none !important;
  font-size: 19px;
}
html.agent8ball-mobile-landscape #shop-wallet-coins {
  min-width: 42px;
  font-size: 23px;
}

/* Compact HUD pass: the leaderboard no longer reserves a bottom slot. */
#leaderboardbutton {
  left: 648px;
  top: 26px;
  width: 100px;
  height: 48px;
  flex-direction: row;
  gap: 5px;
  border-radius: 9px;
  font-size: 9px;
  line-height: 12px;
}
#leaderboardbutton > span:first-child {
  font-size: 16px;
  line-height: 18px;
}
#leaderboardclick {
  left: 648px;
  top: 26px;
  width: 100px;
  height: 48px;
}

#instructions,
#instructionsclick { left: 274px; }
#pause,
#pauseclick { left: 380px; }
#startover,
#startoverclick { left: 492px; }
#sounds,
#soundclick { left: 620px; width: 230px; }
#soundsbuttonclick { left: 140px; width: 90px; }

html.agent8ball-mobile-landscape #smalllogo {
  left: 8px;
  width: 205px;
}
html.agent8ball-mobile-landscape #instructions,
html.agent8ball-mobile-landscape #instructionsclick {
  left: 230px;
  top: 565px;
  width: 140px;
  height: 90px;
}
html.agent8ball-mobile-landscape #pause,
html.agent8ball-mobile-landscape #pauseclick {
  left: 375px;
  top: 565px;
  width: 110px;
  height: 90px;
}
html.agent8ball-mobile-landscape #startover,
html.agent8ball-mobile-landscape #startoverclick {
  left: 490px;
  top: 565px;
  width: 130px;
  height: 90px;
}
html.agent8ball-mobile-landscape #sounds,
html.agent8ball-mobile-landscape #soundclick {
  left: 610px;
  top: 565px;
  width: 240px;
  height: 90px;
}
html.agent8ball-mobile-landscape #sounds { background-size: 200px auto; }
html.agent8ball-mobile-landscape #sounds #musicbutton,
html.agent8ball-mobile-landscape #sounds #soundsbutton {
  top: 36px;
}
html.agent8ball-mobile-landscape #musicbuttonclick {
  left: 0;
  top: 0;
  width: 110px;
  height: 90px;
}
html.agent8ball-mobile-landscape #soundsbuttonclick {
  left: 130px;
  top: 0;
  width: 110px;
  height: 90px;
}
html.agent8ball-mobile-landscape #startoverclick { width: 120px; }
html.agent8ball-mobile-landscape #leaderboardbutton {
  left: 648px;
  top: 26px;
  width: 100px;
  height: 48px;
  flex-direction: row;
  font-size: 9px;
}
html.agent8ball-mobile-landscape #leaderboardbutton > span:first-child {
  font-size: 16px;
}
html.agent8ball-mobile-landscape #leaderboardclick {
  left: 648px;
  top: 14px;
  width: 110px;
  height: 72px;
}
html.agent8ball-mobile-landscape.agent8ball-duel #leaderboardbutton {
  left: 746px;
  width: 100px;
}
html.agent8ball-mobile-landscape.agent8ball-duel #leaderboardclick {
  left: 730px;
  width: 120px;
}

/* The cue is drawn above every visible HUD element. Invisible click targets
   remain above it, so controls still work wherever the cue is. */
#bottomcontrolsdisplay {
  display: none;
  position: relative;
  z-index: 11;
  top: 50px;
  width: 860px;
  margin-right: auto;
  margin-left: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  will-change: transform;
}
#game { z-index: 10; }
#cue_canvas { z-index: 12; }
#gamecontrolsdisplay { z-index: 11; }
#gamecontrolsclick { z-index: 14; }