/* Игровые режимы: отдельные поверхности и читаемый выбор на телефоне. */
.mode-upgrade, .mode-play-upgrade { --mode-accent: #f6bb76; --mode-glow: #d4763138; }
.mode-contract, .mode-play-contract { --mode-accent: #c8a8ff; --mode-glow: #8759d341; }
.mode-plinko, .mode-play-plinko { --mode-accent: #81d8fb; --mode-glow: #258bc348; }
.mode-mines, .mode-play-mines { --mode-accent: #8ce4cf; --mode-glow: #39a38c3e; }
.mode-aviator, .mode-play-aviator { --mode-accent: #ffa7a0; --mode-glow: #c8576a45; }
.mode-coinflip, .mode-play-coinflip { --mode-accent: #ffdb8a; --mode-glow: #b9873845; }
.mode-darts, .mode-play-darts { --mode-accent: #ff8e91; --mode-glow: #bd4e623f; }

.modes-page .modes-title { padding: 20px 0 7px; }
.modes-page .modes-title h1 { max-width: 750px; margin: 9px 0; font-size: clamp(35px, 6vw, 58px); line-height: 1.03; }
.modes-page .modes-title p { max-width: 580px; color: #b5b9c5; font-size: 13px; line-height: 1.5; }
.modes-page .modes-grid { gap: 13px; margin-top: 19px; }
.modes-page .mode-banner {
  position: relative; display: flex; min-width: 0; min-height: 214px; padding: 20px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 37%, #ffffff18);
  border-radius: 15px; background: linear-gradient(132deg, #232734, #141821 65%);
  box-shadow: inset 0 1px 0 #ffffff1c, 0 13px 24px #0003;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.modes-page .mode-banner::before {
  z-index: 0; opacity: 1; background: radial-gradient(circle at 80% 47%, var(--mode-glow), transparent 45%),
    repeating-linear-gradient(135deg, transparent 0 17px, #ffffff06 18px 19px);
}
.modes-page .mode-banner::after { content: ''; position: absolute; right: 19px; bottom: 0; left: 19px; height: 2px; background: linear-gradient(90deg, var(--mode-accent), transparent 72%); }
.modes-page .mode-banner:hover, .modes-page .mode-banner:focus-visible { border-color: var(--mode-accent); transform: translateY(-2px); box-shadow: 0 16px 32px #0005, 0 0 20px var(--mode-glow); }
.modes-page .mode-no { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 70px); color: var(--mode-accent); font-size: 10px; line-height: 1.3; letter-spacing: .09em; white-space: normal; }
.modes-page .mode-no i { width: 18px; height: 1px; flex: none; background: currentColor; opacity: .6; }
.mode-banner-icon { position: absolute; top: 42%; right: 14px; z-index: 1; display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid color-mix(in srgb, var(--mode-accent) 50%, transparent); border-radius: 22px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--mode-accent) 23%, #252b36), #151923 72%); color: var(--mode-accent); font: 600 61px/1 var(--display); transform: translateY(-50%) rotate(-11deg); box-shadow: 0 18px 23px #0006, 0 0 29px var(--mode-glow), inset 0 1px 0 #ffffff42; }
.mode-banner-icon::after { content: ''; position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--mode-accent) 22%, transparent); border-radius: 16px; }
.modes-page .mode-banner-copy { z-index: 2; width: 100%; max-width: calc(100% - 100px); gap: 6px; }
.modes-page .mode-banner-copy strong { max-width: 100%; color: #fff; font: 400 clamp(28px, 3.1vw, 39px)/1.05 RushHero, var(--display); overflow-wrap: normal; word-break: normal; }
.modes-page .mode-banner-copy small { color: #c4c8d0; font-size: 11px; line-height: 1.4; }
.modes-page .mode-banner-copy em { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; color: var(--mode-accent); font-size: 11px; }
.modes-page .mode-banner-copy em span { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid currentColor; border-radius: 5px; font-size: 14px; }

.mode-page .mode-cover { display: flex; justify-content: space-between; min-height: 182px; margin-top: 8px; padding: 19px 21px; border: 1px solid color-mix(in srgb, var(--mode-accent) 40%, #ffffff19); border-radius: 15px; background: linear-gradient(120deg, #282a37, #121720 67%); }
.mode-page .mode-cover::before { z-index: 0; background: radial-gradient(circle at 85% 50%, var(--mode-glow), transparent 46%), repeating-linear-gradient(135deg, transparent 0 23px, #ffffff05 24px 25px); }
.mode-page .mode-cover::after { content: ''; position: absolute; right: 21px; bottom: 0; left: 21px; height: 2px; background: linear-gradient(90deg, var(--mode-accent), transparent 72%); }
.mode-cover-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.mode-page .mode-cover-top .rush-eyebrow, .mode-cover-top > span:last-child { color: var(--mode-accent); font-size: 10px; letter-spacing: .08em; }
.mode-cover-top > span:last-child { white-space: nowrap; }
.mode-cover-icon { position: absolute; top: 58%; right: 24px; z-index: 1; display: grid; place-items: center; width: 114px; height: 114px; border: 1px solid color-mix(in srgb, var(--mode-accent) 55%, transparent); border-radius: 26px; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--mode-accent) 29%, #222733), #151923 72%); box-shadow: 0 22px 28px #0007, 0 0 35px var(--mode-glow), inset 0 1px 0 #ffffff48; color: var(--mode-accent); font: 600 74px/1 var(--display); transform: translateY(-50%) rotate(-10deg); }
.mode-cover-copy { position: relative; z-index: 2; max-width: calc(100% - 140px); }
.mode-page .mode-cover h1 { margin: 0 0 6px; font: 400 clamp(34px, 5vw, 52px)/1.04 RushHero, var(--display); overflow-wrap: normal; }
.mode-page .mode-cover p { margin: 0; color: #d5d7e0; font-size: 12px; line-height: 1.4; }
.mode-page .mode-explain { margin: 15px 0 22px; padding: 12px 15px; border: 1px solid color-mix(in srgb, var(--mode-accent) 28%, #ffffff13); border-radius: 9px; background: color-mix(in srgb, var(--mode-accent) 8%, #171a22); color: #d7d9e0; font-size: 12px; line-height: 1.5; }
.mode-section-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 19px 0 11px; }
.mode-section-head > span { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border: 1px solid color-mix(in srgb, var(--mode-accent) 55%, transparent); border-radius: 7px; background: var(--mode-glow); color: var(--mode-accent); font: 800 11px var(--display); }
.mode-section-head h3 { min-width: 0; margin: 0; color: #f6f6f8; font-size: 15px; line-height: 1.25; }
.mode-section-head small { margin-left: auto; color: #aeb4c0; font-size: 11px; white-space: nowrap; }
.mode-page .mode-options { gap: 8px; margin: 0 0 14px; }
.mode-page .mode-options .chip { min-height: 37px; padding: 8px 12px; border: 1px solid #ffffff25; border-radius: 7px; background: #1c212b; color: #c9cdd5; font-size: 12px; font-weight: 750; }
.mode-page .mode-options .chip.on { border-color: var(--mode-accent); background: color-mix(in srgb, var(--mode-accent) 19%, #1a1e27); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-accent) 25%, transparent); }

.mode-page .game-stage { min-height: 0; margin: 12px 0; border-color: color-mix(in srgb, var(--mode-accent) 35%, #ffffff1d); border-radius: 13px; box-shadow: inset 0 1px 0 #ffffff14, 0 15px 30px #0004; }
.mode-page .game-stage-title { min-height: 46px; padding: 11px 15px; gap: 12px; }
.mode-page .game-stage-title b { font: 800 12px/1.2 var(--display); letter-spacing: .04em; }
.mode-page .game-stage-title small { color: var(--mode-accent); font-size: 10px; }
.mode-page .game-stage-title span { max-width: 52%; color: #bfc3ce; font-size: 10px; line-height: 1.3; }
.game-stage-foot { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 10px 15px; border-top: 1px solid #ffffff17; background: #0d1219a8; color: #aeb4c1; font-size: 11px; }
.game-stage-foot b { color: var(--mode-accent); font-size: 11px; text-align: right; }
.mode-page .plinko-board { height: 214px; }
.mode-page .plinko-slots span { min-width: 0; padding: 8px 3px; font: 800 10px/1.1 Manrope, sans-serif; }
.mode-page .game-stage-mines .mines-board { width: min(calc(100% - 34px), 288px); margin: 16px auto 20px; }
.mode-page .game-stage-mines .mines-board button { min-width: 0; }
.mode-page .aviator-sky, .mode-page .darts-arena { height: 215px; }
.mode-page .coin-scene { height: 188px; }
.mode-page .coin-floor { bottom: 46px; }

.contract-board { width: min(100%, 470px); margin: 0 auto; padding: 17px 17px 18px; }
.contract-board-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.contract-board-head > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.contract-board-head small { color: #aba6bd; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.contract-board-head strong { color: #fff; font: 800 31px/1 var(--display); }
.contract-board-head strong span:first-child { color: var(--mode-accent); }
.contract-board-seal { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #c8a8ff9e; border-radius: 11px; background: #5847784d; box-shadow: inset 0 1px 0 #ffffff47, 0 0 20px #9c73dd30; color: #d8c3ff; font-size: 27px; transform: rotate(-9deg); }
.contract-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.contract-slot { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px dashed #a99bb269; border-radius: 8px; background: linear-gradient(145deg, #272434, #181a26); color: #716c81; font: 800 12px var(--display); }
.contract-slot.filled { border-style: solid; border-color: #c8a8ff9e; background: radial-gradient(circle at center, #7c62a55b, #242235 70%); box-shadow: inset 0 1px 0 #ffffff2d; }
.contract-slot img { width: 94%; height: 94%; object-fit: contain; filter: drop-shadow(0 5px 5px #0008); }
.contract-board-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff1a; color: #aeb2c0; font-size: 11px; }
.contract-board-foot b { color: #fff; font: 800 17px var(--display); }
.game-stage-contract.playing .contract-slot.filled { animation: contract-seal .7s ease-in-out both; animation-delay: calc(var(--slot) * 42ms); }
.game-stage-contract.playing .contract-board-seal { animation: contract-stamp 1.4s ease-in-out both; }
@keyframes contract-seal { 50% { transform: scale(.89); box-shadow: 0 0 16px #c8a8ff80; } }
@keyframes contract-stamp { 50% { transform: rotate(16deg) scale(1.2); box-shadow: 0 0 32px #c8a8ff8c; } }

.mode-page .mode-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 365px; padding: 2px 3px 5px; }
.mode-page .mode-item { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 9px; min-height: 69px; padding: 7px 10px 7px 6px; border: 1px solid #ffffff24; border-radius: 9px; background: linear-gradient(125deg, #222733, #181c25); }
.mode-page .mode-item.selected { border-color: var(--mode-accent); background: color-mix(in srgb, var(--mode-accent) 13%, #1b2028); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-accent) 29%, transparent); }
.mode-page .mode-item img { grid-column: 1; width: 58px; height: 53px; object-fit: contain; }
.mode-page .mode-item > span { grid-column: 2; min-width: 0; }
.mode-page .mode-item span b { color: #f5f5f7; font-size: 12px; }
.mode-page .mode-item span small { margin-top: 4px; color: #aeb3bf; font-size: 10px; }
.mode-page .mode-item em { grid-column: 3; width: auto; margin: 0; color: var(--mode-accent); font-size: 11px; font-weight: 800; }
.mode-page .mode-item:disabled { opacity: .38; }
.mode-page .mode-quote { margin: 0 0 12px; padding: 15px; border-color: #ffffff23; border-radius: 10px; background: #171c25; }
.mode-page .mode-quote-head { align-items: end; gap: 10px; margin-bottom: 14px; }
.mode-quote-head > div { display: flex; flex-direction: column; gap: 4px; }
.mode-quote-head > div small { color: #aaafbb; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.mode-page .mode-quote-head b { color: #fff; font: 800 20px/1.1 var(--display); }
.mode-page .mode-quote-head > span { color: #aeb3be; font-size: 11px; text-align: right; }
.mode-page .mode-outcomes { gap: 8px; }
.mode-page .mode-outcome { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 9px; min-height: 76px; padding: 8px; border: 1px solid #ffffff1c; border-radius: 8px; background: #232936; }
.mode-page .mode-outcome.empty-slot { background: #30232c; }
.mode-page .mode-outcome img { width: 54px; height: 56px; object-fit: contain; }
.mode-page .mode-outcome b { font-size: 11px; }
.mode-page .mode-outcome small { margin-top: 3px; font-size: 10px; }
.mode-page .mode-outcome em { margin-top: 4px; color: var(--mode-accent); font-size: 10px; font-style: normal; font-weight: 800; }
.mode-page .mode-outcome-chance { display: inline-flex; width: fit-content; height: auto; margin-top: 7px; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--mode-accent) 35%, transparent); background: var(--mode-glow); color: var(--mode-accent); font: 800 9px/1.3 Manrope, sans-serif; white-space: nowrap; }
.mode-page .mode-play-button { min-height: 48px; margin: 0 0 12px; }
.mode-page .mode-result-card { gap: 8px; border-color: color-mix(in srgb, var(--mode-accent) 70%, transparent); background: radial-gradient(circle at top, var(--mode-glow), #191d27 72%); }
.mode-page .mode-result-card > small { color: var(--mode-accent); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.mode-page .mode-result-card strong { font-size: clamp(23px, 5vw, 32px); }

.upgrade-page .upgrade-stage { position: relative; overflow: hidden; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--mode-accent) 38%, #ffffff1d); border-radius: 13px; background: radial-gradient(circle at 50% 50%, #70442230, #121821 66%), repeating-linear-gradient(135deg, transparent 0 24px, #ffffff05 25px 26px); box-shadow: inset 0 1px 0 #ffffff18, 0 15px 30px #0004; }
.upgrade-page .upgrade-stage .game-stage-title { border-bottom: 1px solid #ffffff19; }
.upgrade-page .dial-wrap { width: min(250px, 78vw); height: auto; aspect-ratio: 1; margin: 10px auto 15px; }
.upgrade-page .dial-track { stroke: #393541; }
.upgrade-page .dial-chance { fill: none; stroke: var(--mode-accent); stroke-width: 16; }
.upgrade-page .dial-ticks { stroke: #e6b98275; }
.upgrade-page .dial-needle path { fill: var(--mode-accent); }
.upgrade-page .dial-status { color: #fff; font: 800 32px/1 var(--display); }
.upgrade-page .dial-sub { margin-top: 7px; color: #c2bdba; font-size: 12px; }
.upgrade-selection-head { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0 0 7px; color: var(--mode-accent); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-align: center; }
.upgrade-page .slots { margin: 0 0 13px; }
.upgrade-page .slot { min-height: 142px; border: 1px dashed color-mix(in srgb, var(--mode-accent) 46%, #ffffff24); border-radius: 10px; background: linear-gradient(135deg, #292630, #181d27); }
.upgrade-page .slot:has(.slot-thumb) { border-style: solid; border-color: color-mix(in srgb, var(--mode-accent) 45%, #ffffff1a); }
.upgrade-page .slot-empty { color: #fff; font: 800 16px/1.2 var(--display); }
.upgrade-page .slot-label { color: #c1c3cc; }
.upgrade-page .slot-price { color: var(--mode-accent); }
.upgrade-page .slot-arrow { border: 1px solid #efbc8173; background: #493b32; color: #ffca8b; }
.upgrade-page #do-upgrade { min-height: 48px; }
.upgrade-page .tabs2 { margin-top: 0; }

@media (max-width: 650px) {
  .modes-page .modes-grid { grid-template-columns: 1fr; gap: 9px; }
  .modes-page .mode-banner { min-height: 142px; padding: 15px 17px; }
  .modes-page .mode-banner-copy { max-width: calc(100% - 78px); }
  .modes-page .mode-banner-copy strong { font-size: clamp(25px, 7vw, 32px); }
  .modes-page .mode-banner-icon { right: 18px; width: 72px; height: 72px; border-radius: 17px; font-size: 47px; }
  .mode-page .mode-inventory { grid-template-columns: 1fr; }
  .mode-page .mode-cover { min-height: 164px; padding: 16px; }
  .mode-cover-icon { right: 15px; width: 83px; height: 83px; border-radius: 18px; font-size: 53px; }
  .mode-cover-copy { max-width: calc(100% - 92px); }
  .mode-page .mode-cover h1 { font-size: clamp(27px, 8vw, 39px); }
}
@media (max-width: 380px) {
  .modes-page .mode-banner-copy strong { font-size: 25px; }
  .modes-page .mode-contract .mode-banner-copy strong { font-size: 23px; }
  .mode-page .mode-cover h1 { font-size: 28px; }
  .mode-page .mode-outcomes { grid-template-columns: 1fr; }
  .mode-page .game-stage-title span { max-width: 48%; }
  .contract-board { padding: 14px 12px 15px; }
  .contract-slots { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-stage-contract.playing .contract-slot.filled, .game-stage-contract.playing .contract-board-seal { animation: none; }
}