* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html,
body {
   height: 100%;
}
body {
   font-family:
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif;
   background: #f4f3f1;
   color: #222;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}
.screen {
   display: none;
   width: 100%;
   max-width: 420px;
   padding: 24px;
   text-align: center;
}
.screen.active {
   display: block;
}
.ad-label {
   font-size: 13px;
   color: #847e73;
   margin-bottom: 10px;
   text-align: center;
}
.ad-box {
   position: relative;
   background: #fbfaf9;
   border: 1px solid #ddd9d3;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ad-link {
   display: block;
   line-height: 0;
}
.ad-image {
   width: 100%;
   height: auto;
   display: block;
}
.ad-count {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 96px;
   font-weight: bold;
   color: rgba(255, 255, 255, 0.85);
   text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.8),
      0 0 24px rgba(0, 0, 0, 0.6);
   font-variant-numeric: tabular-nums;
   pointer-events: none;
}
.ad-count.pulse {
   animation: adPulse 1s ease-out;
}
@keyframes adPulse {
   0% {
      transform: scale(1.6);
      opacity: 0;
   }
   30% {
      transform: scale(1);
      opacity: 1;
   }
   100% {
      transform: scale(1);
      opacity: 1;
   }
}
.pay-card {
   background: #fbfaf9;
   border: 1px solid #ddd9d3;
   border-radius: 16px;
   padding: 32px 24px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.pay-title {
   font-size: 20px;
   font-weight: bold;
   margin-bottom: 24px;
   color: #222;
}
.price-tag {
   font-size: 48px;
   font-weight: bold;
   background: linear-gradient(90deg, #d81b8f, #e8a400);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   margin-bottom: 24px;
}
.pay-btn {
   width: 100%;
   background: linear-gradient(90deg, #d81b8f, #8020c0);
   color: #fff;
   border: none;
   padding: 16px;
   border-radius: 10px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
}
.pay-btn:active {
   transform: scale(0.98);
}
.country-label {
   display: block;
   font-size: 13px;
   color: #847e73;
   margin-bottom: 8px;
   text-align: left;
}
.country-select {
   width: 100%;
   padding: 14px 12px;
   border-radius: 10px;
   border: 1px solid #ddd9d3;
   background: #fff;
   font-size: 16px;
   color: #222;
   margin-bottom: 14px;
   appearance: none;
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23847e73' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
   background-repeat: no-repeat;
   background-position: right 12px center;
}
#pay-notice {
   font-size: 14px;
   color: #a0700a;
   background: #fdf3e0;
   border: 1px solid #f0d9a8;
   border-radius: 10px;
   padding: 12px;
   margin-bottom: 14px;
}
.crypto-support-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   box-sizing: border-box;
   margin-top: 14px;
   padding: 12px;
   text-align: center;
   font-size: 14px;
   font-weight: 600;
   color: #c98a2c;
   border: 1.5px solid #e8a400;
   border-radius: 10px;
   text-decoration: none;
}
.crypto-icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}
.processing {
   display: none;
   font-size: 14px;
   color: #a0700a;
   margin-top: 16px;
}

#screen-result.active {
   display: flex !important;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: fixed;
   inset: 0;
   width: 100vw;
   height: 100vh;
   max-width: none;
   text-align: center;
   padding: 24px;
   background: #000;
   overflow: hidden;
   z-index: 10;
}

#matrix-canvas {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
}

.clock-wrap {
   position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   z-index: 1;
}

.clock-digits {
   display: flex;
   align-items: center;
   gap: clamp(6px, 1.6vw, 14px);
   flex-wrap: nowrap;
}

.clock-digits svg {
   width: clamp(28px, 8vw, 56px);
   height: auto;
   overflow: visible;
}

.clock-sep {
   width: clamp(6px, 1.4vw, 10px);
   height: clamp(6px, 1.4vw, 10px);
   border-radius: 50%;
   background: #ff2d2d;
   box-shadow: 0 0 10px rgba(255, 45, 45, 0.9);
   flex-shrink: 0;
}

.clock-sep-col {
   display: flex;
   flex-direction: column;
   gap: clamp(10px, 3vw, 20px);
   align-self: center;
}

.seg {
   fill: #ff2d2d;
   transition: opacity 0.5s ease;
}

/* ===== Сообщения ===== */

@keyframes msgIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}
@keyframes msgOut {
   from {
      opacity: 1;
   }
   to {
      opacity: 0;
   }
}
.msg-in {
   animation: msgIn 0.6s ease forwards;
}
.msg-out {
   animation: msgOut 0.4s ease forwards;
}

#msg-track {
   position: relative;
   margin-top: 32px;
   width: 100%;
   max-width: 420px;
   height: 54px;
   text-align: center;
}

.msg-bubble {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   background: #000;
   padding: 8px 14px;
   border-radius: 6px;
}

.msg-nick {
   font-size: 18px;
   color: #ffcc33;
   font-weight: 700;
   margin-bottom: 4px;
}

.msg-nick.donate {
   color: #00ff9d;
}

.msg-text {
   font-size: 21px;
   color: #fff;
   font-weight: 600;
}

#screen-result .counter-block {
   position: relative;
   z-index: 1;
   margin-top: auto;
   padding-bottom: 30px;
   color: #ff9ec8 !important;
}

.pay-footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   font-size: 12px;
   color: #999;
   text-align: center;
   padding: 15px;
   background: #f4f3f1;
   border-top: 1px solid #eee;
}
.msg-text.donate {
   color: #00ff9d;
}