/* CasinoBurada: Betgross layout, logo-matched yellow/white accents. */
:root{--cb-gold:#d7b654;--cb-cream:#fff5cc;--cb-gradient:linear-gradient(110deg,#c59d36 0%,#f1d674 28%,#fff5cc 52%,#fff 100%)}
.card button[data-bonus-key],.bonus-navigation button[aria-pressed="true"]{background:var(--cb-gradient);color:#171717}
.bonus-navigation button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #fff5cc}
.player-brand{border-bottom-color:var(--cb-gold)}
.card button[data-bonus-key]:focus-visible{outline-color:#fff5cc}
@media(hover:hover) and (pointer:fine){
 .card:hover{box-shadow:0 0 0 1px #e4c86955,0 0 24px #d7b65455,0 10px 24px #0006}
 .bonus-navigation button:hover{box-shadow:0 0 0 1px #e4c86955,0 0 20px #d7b65466}
 .bonus-navigation button[aria-pressed="true"]:hover{box-shadow:inset 0 0 0 2px #fff5cc,0 0 20px #d7b65466}
}
#history-dialog th,#history-dialog header button{background:var(--cb-gradient);color:#171717}
#history-dialog button:focus-visible{outline-color:var(--cb-cream)}
#login.login{background-image:url('/static/admin/login-background.svg')}
#login button:not(#mfa-back),#login button:not(#mfa-back):hover{background:var(--cb-gradient);border-color:var(--cb-gold);color:#171717}
#login button:focus-visible,#login input:focus-visible{outline-color:#fff5cc}
.brand{color:var(--cb-gold)}
nav button.active,[data-theme='dark'] nav button.active{background:var(--cb-gradient);color:#171717}
@media(max-width:850px){#login.login{background-image:linear-gradient(to bottom,#09090bcc 0%,#09090bcc 28%,transparent 46%),url('/static/admin/login-background.svg')}}

#history-dialog th,#history-dialog button{border-color:var(--cb-gold)}
#history-dialog header button:hover{background:var(--cb-gradient);color:#171717}

/* Solid gold login action. */
#login #login-form button{background:linear-gradient(110deg,#f6cc62 0%,#fee2a7 45%,#fef4c4 75%,#fefefe 100%);border-color:#fee2a7;color:#171717;box-shadow:none}
#login #login-form button:hover{background:linear-gradient(110deg,#f6cc62 0%,#fee2a7 45%,#fef4c4 75%,#fefefe 100%);border-color:#fee2a7;color:#171717;box-shadow:none}

#login #login-form button:disabled{opacity:1;cursor:default}

/* Compact player header and first three card rows on mobile. */
@media (max-width: 767px) {
  .player-brand { height: 96px; padding: 16px; }
  .player-brand img { width: 220px; height: 30px; max-width: 76%; }
  .shell { width: calc(100% - 20px); padding-top: 10px; }
  .bonus-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; gap: 4px; margin-bottom: 12px; }
  .bonus-navigation button, .bonus-navigation #history-open { min-height: 40px; padding: 6px 8px; font-size: 11px; line-height: 1.3; }
  .grid { gap: 8px; }
  .card img { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: contain; background: #171614; }
  .card button[data-bonus-key] { min-height: 44px; padding: 8px 4px; }
}
/* Telegram channel action: one entrance, complete in 1.95 seconds. */
.player-brand { justify-content: space-between; gap: 16px; }
.telegram-channel { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; width: auto; min-height: 44px; margin: 0; padding: 11px 18px; border: 1px solid #43b7ef; border-radius: 14px; background: linear-gradient(135deg,#229ed9,#087eb7); color: #fff; font: 700 16px/1.2 Arial,sans-serif; overflow: hidden; text-decoration: none; isolation: isolate; }
.telegram-channel:disabled { opacity: 1; cursor: default; }
.telegram-symbol { width: 24px; height: 24px; flex-shrink: 0; animation: telegram-icon-drop 1.1s cubic-bezier(.2,.75,.3,1) both; }
.telegram-word { display: inline-flex; white-space: nowrap; }
.telegram-word span { display: inline-block; animation: telegram-letter-drop .85s cubic-bezier(.2,.75,.3,1) calc(var(--letter) * .06s) both; }
.telegram-channel::after { content: ''; position: absolute; inset: -40% -30%; pointer-events: none; background: linear-gradient(110deg,transparent 35%,#ffffff80 50%,transparent 65%); transform: translateX(-150%); animation: telegram-shine .6s ease-in-out 1.35s both; }
@keyframes telegram-icon-drop { 0% { opacity: 0; transform: translateY(-45px) rotate(-360deg); } 75% { opacity: 1; transform: translateY(3px) rotate(8deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes telegram-letter-drop { 0% { opacity: 0; transform: translateY(-35px); } 75% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes telegram-shine { from { transform: translateX(-150%); } to { transform: translateX(150%); } }
@media(max-width:767px) {
 .player-brand { gap: 10px; }
 .player-brand img { width: clamp(128px,42vw,220px); max-width: 48%; }
 .telegram-channel { gap: 7px; padding: 10px 12px; font-size: 14px; border-radius: 12px; }
 .telegram-symbol { width: 21px; height: 21px; }
}
@media(prefers-reduced-motion:reduce) {
 .telegram-symbol,.telegram-word span { animation: none; }
 .telegram-channel::after { display: none; animation: none; }
}

/* Repeating Telegram entrance followed by a winding light trail. */
.telegram-symbol { animation: telegram-icon-loop 2s cubic-bezier(.2,.75,.3,1) infinite; position: relative; z-index: 1; }
.telegram-word { position: relative; z-index: 1; }
.telegram-word span { animation: telegram-letter-loop 2s ease-in-out infinite; animation-delay: calc(var(--letter) * .04s); }
.telegram-channel::after { inset: 0; width: 48px; height: 100%; background: radial-gradient(ellipse at center,#fff9 0%,#b8eeff80 25%,transparent 68%); filter: blur(2px); opacity: 0; z-index: 0; animation: telegram-snake-loop 2s linear infinite; }
@keyframes telegram-icon-loop {
  0% { opacity: 0; transform: translateY(-40px) rotate(-360deg); }
  28% { opacity: 1; transform: translateY(3px) rotate(8deg); }
  36%,95% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(0) rotate(0); }
}
@keyframes telegram-letter-loop {
  0% { opacity: 0; transform: translateY(-32px); }
  22% { opacity: 1; transform: translateY(3px); }
  30%,82% { opacity: 1; transform: translateY(0); }
  88%,100% { opacity: 0; transform: translateY(0); }
}
@keyframes telegram-snake-loop {
  0%,54% { opacity: 0; left: -48px; transform: translateY(0) rotate(-25deg); }
  58% { opacity: .8; left: -24px; transform: translateY(-8px) rotate(-25deg); }
  65% { opacity: 1; left: 15%; transform: translateY(8px) rotate(25deg); }
  72% { opacity: 1; left: 38%; transform: translateY(-8px) rotate(-25deg); }
  79% { opacity: 1; left: 62%; transform: translateY(8px) rotate(25deg); }
  86% { opacity: .8; left: 85%; transform: translateY(-8px) rotate(-25deg); }
  93%,100% { opacity: 0; left: 110%; transform: translateY(0) rotate(25deg); }
}
@media(prefers-reduced-motion:reduce) {
 .telegram-symbol,.telegram-word span { animation: none; }
 .telegram-channel::after { display: none; animation: none; }
}
/* Desktop: centered site logo with Telegram aligned to the right. */
@media (min-width: 768px) {
  .player-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: normal;
    gap: 16px;
  }
  .player-brand > img {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    max-width: 100%;
  }
  .player-brand > .telegram-channel {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

/* Desktop Telegram keeps its requested continuous animation. */
@media (min-width: 768px) {
  .player-brand .telegram-channel .telegram-symbol {
    animation: telegram-icon-loop 2s cubic-bezier(.2,.75,.3,1) infinite;
  }
  .player-brand .telegram-channel .telegram-word span {
    animation: telegram-letter-loop 2s ease-in-out infinite;
    animation-delay: calc(var(--letter) * .04s);
  }
  .player-brand .telegram-channel::after {
    display: block;
    animation: telegram-snake-loop 2s linear infinite;
  }
}