.wallet-mini { display: inline-flex; align-items: stretch; flex: none; height: 34px; border: 1px solid #c9ae6c; border-radius: 10px; background: #fff7e2; overflow: visible; letter-spacing: 0; }
.wallet-mini button { appearance: none; cursor: pointer; background: transparent; color: #715018; border: 0; font: 700 12px 'DM Sans', sans-serif; height: 32px; min-height: 32px; margin: 0; }
.wallet-mini .wallet-mini-balance { display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 9px 0 0 9px; }
.wallet-mini-balance i { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #b28e41; border-radius: 50%; background: linear-gradient(140deg,#ffe9a5,#d4a449); color: #725018; font-size: 12px; font-style: normal; }
.wallet-mini-balance b { font-variant-numeric: tabular-nums; }
.wallet-mini .wallet-mini-gift { width: 32px; padding: 0; border-left: 1px solid #c9ae6c66; display: grid; place-items: center; border-radius: 0 9px 9px 0; position: relative; }
.wallet-mini-gift.is-ready::after { content: ''; position: absolute; width: 7px; height: 7px; top: -3px; right: -2px; background: #4b7850; border: 2px solid #fffdf3; border-radius: 50%; }
.wallet-mini button:hover { background: #ead39b55; }
.wallet-mini button:focus-visible { outline: 2px solid #a67925; outline-offset: 3px; }
.wallet-bonus-link { border: 0; background: transparent; color: #38664c; text-decoration: underline; font: 600 10px 'DM Sans',sans-serif; cursor: pointer; padding: 3px 0; display: block; }
#token-bonus-backdrop { z-index: 36; padding: 12px; background: #071e1be8; backdrop-filter: blur(8px); }
#token-bonus-backdrop .token-bonus-modal { width: min(530px,100%); max-width: 530px; max-height: calc(100dvh - var(--toast-space,0px) - var(--waiting-space,0px) - 24px); padding: 26px 32px 22px; border-radius: 24px; border: 1px solid #ccac6660; overflow: hidden; background: radial-gradient(ellipse at 50% 35%,#224a3e,#112f29 65%); box-shadow: 0 30px 100px #0008,inset 0 1px #f2dca42b; color: #faf0d7; text-align: center; display: flex; flex-direction: column; gap: 12px; }
#token-bonus-backdrop .modal-close { z-index: 3; color: #dbc99b; right: 15px; top: 10px; }
.bonus-eyebrow { font-size: 9px; letter-spacing: 2.4px; color: #c5aa6c; font-weight: 600; }
#token-bonus-title { font: 500 34px/1.12 'Playfair Display',serif; color: #fff1cf; margin: 9px 0 8px; }
.bonus-heading p { font-size: 12px; color: #b9c9b7; margin: 0; }
#bonus-wallet-summary:not(:empty) { display: block; font-size: 10px; margin-top: 5px; color: #dfc78c; }
.bonus-stage { height: 200px; position: relative; display: grid; place-items: center; flex: none; perspective: 700px; isolation: isolate; }
.bonus-halo { position: absolute; width: 210px; height: 180px; border-radius: 50%; background: radial-gradient(ellipse,#edc97628,transparent 67%); }
.bonus-orbit { position: absolute; width: 220px; height: 100px; border-radius: 50%; border: 1px solid #cfb16b55; transform: rotate(-24deg); }
.orbit-two { transform: rotate(35deg); width: 190px; height: 140px; border-color: #cfb16b25; }
.bonus-orbit::after { content: ''; width: 5px; height: 5px; position: absolute; left: 29px; top: 10px; background: #eed7a0; border-radius: 50%; box-shadow: 0 0 12px #eed7a0; }
.bonus-core { z-index: 1; transform-style: preserve-3d; }
.bonus-coin { width: 142px; height: 142px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #624013; border: 6px double #aa7f35; background: linear-gradient(135deg,#fff1bd 0%,#ddba67 42%,#b98935 65%,#f4da91 100%); box-shadow: 0 6px 0 #795621,0 12px 0 #36280f,0 22px 40px #0006,inset 0 0 0 4px #ffecb950; }
.bonus-coin::after { content: ''; position: absolute; inset: 8px; border: 1px solid #9e753b66; border-radius: 50%; }
.bonus-coin-mark { position: absolute; top: 9px; font-size: 15px; }
.bonus-coin strong { font: 600 50px 'Playfair Display',serif; line-height: 1; margin-top: 6px; }
.bonus-coin small { font-size: 7px; letter-spacing: 1.3px; margin-top: 8px; font-weight: 800; }
.bonus-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bonus-sparks i { position: absolute; left: 50%; top: 50%; width: 5px; height: 8px; background: #f2d59a; border-radius: 2px; opacity: 0; }
.bonus-message { min-height: 40px; }
.bonus-message strong { display: block; color: #f4dfaa; font-size: 16px; }
.bonus-message p { color: #a8c0b1; font-size: 11px; margin: 5px 0 0; line-height: 1.4; }
.bonus-prizes { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.bonus-prize { border: 1px solid #bca36b40; border-radius: 8px; padding: 8px 2px; background: #ffffff04; }
.bonus-prize b { display: block; font-size: 16px; color: #ead29b; }
.bonus-prize small { display: block; color: #b0bda3; font-size: 10px; margin-top: 3px; }
.bonus-prize.is-awarded { border-color: #efd18d; background: #e0bc6b20; box-shadow: 0 0 18px #d0ab4c18; }
#token-bonus-backdrop .bonus-status { margin: 0; min-height: 15px; font: 11px/1.4 'DM Sans',sans-serif; color: #becbb6; }
#token-bonus-backdrop .bonus-status.is-error { color: #ffc6a7; }
.bonus-claim { flex: none; min-height: 44px; border: 1px solid #ffdf98; border-radius: 10px; background: linear-gradient(110deg,#e6c77e,#f6e3ad,#cfaa58); color: #493914; box-shadow: 0 5px 18px #030d0844; cursor: pointer; font: 700 13px 'DM Sans',sans-serif; padding: 10px; }
.bonus-claim:disabled { cursor: default; background: #ffffff07; color: #c6cfb9; border-color: #b8c3a838; box-shadow: none; }
.bonus-skip { border: 0; background: transparent; color: #d7c597; text-decoration: underline; font-size: 11px; cursor: pointer; padding: 0; }
.bonus-fineprint { color: #93ad9d; font-size: 9px; line-height: 1.5; }
.bonus-stage[data-phase="requesting"] .bonus-halo { animation: bonus-breathe 1s ease-in-out infinite alternate; }
.bonus-stage[data-phase="revealing"] .bonus-core { animation: bonus-turn 1.9s cubic-bezier(.16,.6,.25,1) both; }
.bonus-stage[data-phase="revealing"] .orbit-one { animation: bonus-orbit-turn 1.9s ease-out both; }
.bonus-stage[data-phase="revealing"] .bonus-halo { animation: bonus-charge 1.9s ease-in-out both; }
.bonus-stage[data-phase="revealed"] .bonus-core { animation: bonus-land .6s cubic-bezier(.16,1.5,.35,1) both; }
.bonus-stage[data-phase="revealed"] .bonus-sparks i { animation: bonus-spark .9s ease-out var(--delay) both; }
@keyframes bonus-breathe { to { opacity: .4; transform: scale(.8); } }
@keyframes bonus-turn { 0% { transform: scale(1) rotateY(0); } 35% { transform: translateY(-12px) scale(.9) rotateY(540deg); } 78% { transform: translateY(-6px) scale(1.07) rotateY(1080deg); } 100% { transform: scale(1) rotateY(1440deg); } }
@keyframes bonus-orbit-turn { to { transform: rotate(336deg) scale(1.1); } }
@keyframes bonus-charge { 60% { transform: scale(1.8); opacity: 1; } to { transform: scale(1.3); } }
@keyframes bonus-land { from { transform: scale(.85); } to { transform: scale(1); } }
@keyframes bonus-spark { 0% { opacity: 0; transform: rotate(var(--angle)) translateY(-40px); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--angle)) translateY(calc(-1 * var(--distance))) rotate(120deg); } }
@media (max-width: 700px) {
  .training-home .welcome-brand { flex-wrap: nowrap; }
  .training-home .welcome-audio-controls { flex: 1; justify-content: flex-end; }
  .training-home .welcome-audio-controls .wallet-mini { margin-right: auto; }
  .topbar .brand { display: none; }
  .topbar .top-actions { flex: 1; justify-content: space-between; gap: 3px; }
  .topbar .wallet-mini { height: 30px; }
  .topbar .wallet-mini button { min-height: 28px; height: 28px; }
  .topbar .wallet-mini-balance { gap: 4px; padding: 0 6px; }
  .topbar .wallet-mini-gift { width: 27px; }
  .topbar .wallet-mini-balance i { width: 16px; height: 16px; font-size: 10px; }
  .topbar .wallet-mini-balance b { font-size: 11px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .topbar .brand > span:last-child { display: none; }
}
@media (max-width: 480px) {
  .training-home .welcome-brand > span:nth-child(2) { display: none; }
  .training-home .welcome-audio-controls { gap: 5px; }
  .training-home .welcome-audio-controls > :is(.welcome-music-toggle,.welcome-settings-open,.messenger-home-button) { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; }
  .training-home .welcome-audio-controls > .music-next-button { width: 22px; }
}
@media (max-width: 480px) {
  .topbar .top-actions { gap: 2px; }
  .topbar .wallet-mini-balance { padding: 0 5px; }
  .topbar .wallet-mini-balance i { width: 13px; height: 13px; }
  .topbar #game-music-next { width: 23px; min-width: 23px; }
  .topbar .table-leave-button { padding: 4px 6px; font-size: 10px; }
  .topbar .table-tools > summary { padding: 5px; font-size: 10px; gap: 3px; }
  .topbar .table-leave-button > [aria-hidden] { display: none; }
}
@media (max-width: 480px) and (max-height: 650px) {
  .training-home .welcome-start { padding: 10px; }
  .training-home .save-mode-note { display: none; }
  .training-home .welcome-start-heading > span { display: none; }
  .training-home .welcome-start-heading h2 { font-size: 20px; margin: 0 0 6px; }
  .training-home .welcome-training h3 { font-size: 22px; margin: 0 0 6px; }
  .training-home .welcome-options { margin: 7px 0; }
}
@media (max-height: 720px) {
  #token-bonus-backdrop .token-bonus-modal { padding: 18px 24px; gap: 9px; }
  #token-bonus-title { font-size: 28px; margin: 7px 0; }
  .bonus-stage { height: 160px; }
  .bonus-coin { width: 116px; height: 116px; }.bonus-coin strong { font-size: 40px; }
}
@media (max-width: 400px) and (max-height: 650px) {
  #token-bonus-backdrop .token-bonus-modal { padding: 16px; gap: 8px; }
  #token-bonus-title { font-size: 25px; }.bonus-heading p { font-size: 10px; }
  .bonus-stage { height: 128px; }.bonus-coin { width: 100px; height: 100px; }.bonus-coin strong { font-size: 33px; }.bonus-coin small { font-size: 5px; }
  .bonus-orbit { width: 175px; height: 85px; }.orbit-two { width: 150px; height: 110px; }
  .bonus-message strong { font-size: 13px; }.bonus-message p { font-size: 10px; }
  .bonus-prizes { gap: 4px; }.bonus-prize { padding: 7px 1px; }.bonus-prize b { font-size: 14px; }.bonus-prize small { font-size: 8px; }
  .bonus-fineprint { font-size: 8px; }.bonus-claim { min-height: 38px; font-size: 11px; }
}
@media (max-height: 450px) and (min-width: 581px) {
  #token-bonus-backdrop .token-bonus-modal { width: min(740px,100%); max-width: 740px; display: grid; grid-template-columns: 220px 1fr; gap: 8px 20px; padding: 18px 24px; }
  .bonus-heading { grid-column: 1; grid-row: 1 / 3; }.bonus-eyebrow { font-size: 7px; }#token-bonus-title { font-size: 24px; }
  .bonus-stage { grid-column: 1; grid-row: 3 / 7; height: 135px; }
  .bonus-message, .bonus-prizes, #token-bonus-backdrop .bonus-status, .bonus-claim, .bonus-skip { grid-column: 2; }
  .bonus-message { grid-row: 1; padding-top: 10px; }.bonus-fineprint { grid-column: 2; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { #token-bonus-backdrop * { animation: none !important; transition: none !important; } }
body.reduced-motion #token-bonus-backdrop * { animation: none !important; transition: none !important; }