/* Daily Bonus Map presentation aligned with the VIP Club visual system.
   Functionality remains owned by js/bonus-map.js. */
:root{
  --bmp-bg:#01020b;
  --bmp-panel:#08102a;
  --bmp-panel-2:#0d1734;
  --bmp-ink:#ffffff;
  --bmp-muted:rgba(255,255,255,.68);
  --bmp-soft:rgba(255,255,255,.46);
  --bmp-gold:#FFCC00;
  --bmp-gold-hi:#FFE588;
  --bmp-gold-deep:#D99B14;
  --bmp-cyan:#00C4D2;
  --bmp-red:#ED1B2E;
  --bmp-red-deep:#A80F1D;
  --bmp-line:rgba(255,204,0,.34);
  --bmp-hairline:rgba(255,255,255,.1);
  --bmp-gold-grad:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 42%),
    linear-gradient(180deg,#FFE588 0%,#FFCC00 55%,#D99B14 100%);
}

body:has(.bmp-wrap){
  background:#01020b;
}

body:has(.bmp-wrap) .pv7-bg{
  background:linear-gradient(180deg,#01020b 0%,#030418 42%,#01020b 100%);
}

body:has(.bmp-wrap) .main{
  padding-top:0;
}

@media (min-width:761px){
  body:has(.bmp-wrap) .main{
    padding-bottom:0;
  }

  body:has(.bmp-wrap) .footer{
    margin-top:0;
  }
}

.bmp-wrap{
  position:relative;
  z-index:3;
  width:calc(100% + (var(--gutter,24px) * 2));
  max-width:none;
  margin-inline:calc(var(--gutter,24px) * -1);
  padding-top:0;
  padding-bottom:0;
}

.bmp-crumb{
  display:none;
}

.bmp-frame{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  isolation:isolate;
  overflow:visible;
  border-radius:0;
  border:0;
  background:none;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.bmp-stage{
  position:relative;
  min-height:0;
  --bmp-offer-card-h:258px;
  --bmp-offer-gap:22px;
  --bmp-side-right:1.5%;
  --bmp-side-bottom:5.6%;
}

.bmp-map{
  position:relative;
  width:100%;
  height:max(100svh,56.25vw);
  overflow:hidden;
  border-radius:0;
  border:0;
  background:url("../assets-new/bonus-map/map-tourist-neon-desktop.webp") center center/cover no-repeat, var(--bmp-panel);
  box-shadow:none;
}

.bmp-map::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,3,16,.42), rgba(2,3,16,.02) 28%, rgba(2,3,16,.06) 70%, rgba(2,3,16,.38)),
    linear-gradient(180deg, rgba(2,3,16,.1) 0%, rgba(2,3,16,.08) 18%, rgba(2,3,16,.04) 50%, rgba(2,3,16,.46) 100%);
}

.bmp-map::after{
  content:none;
}

.bmp-top{
  position:absolute;
  top:calc(var(--header-h,72px) + 8px);
  left:18px;
  right:18px;
  z-index:9;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:14px;
  pointer-events:none;
}

.bmp-top > *{
  pointer-events:auto;
}

.bmp-how,
.bmp-month{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  color:#fff;
  background:rgba(5,10,31,.56);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 26px -18px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.bmp-how{
  justify-self:start;
  gap:9px;
  padding:0 18px;
  color:var(--bmp-gold-hi);
  font:900 12px/1 var(--font);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s, border-color .18s, background .18s;
}

.bmp-how .q{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  color:#101049;
  background:var(--bmp-gold-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}

.bmp-how:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.1);
  border-color:rgba(255,229,136,.62);
}

.bmp-plaque{
  position:relative;
  width:min(800px,54vw);
  min-height:136px;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* content anchors to the TOP of the plaque (not centered) so the title's
     offset from the header is a fixed constant, identical to vip + default */
  justify-content:flex-start;
  padding:8px 8px 0;
  background:none;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.78));
  pointer-events:none;
}

@media (min-width:761px){
  .bmp-plaque{
    /* strip top (header+8) + margin 36 + padding 8 = crown mark at header+52,
       the shared fixed offset used by vip.html and default.html */
    margin-top:36px;
    padding-top:8px;
  }
}

.bmp-plaque::before,
.bmp-plaque::after{
  content:none;
}

.bmp-plaque-title{
  position:static;
  transform:none;
  margin:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.16em;
  padding:0;
  border-radius:0;
  white-space:nowrap;
  max-width:100%;
  color:#fff;
  background:none;
  border:0;
  box-shadow:none;
  font:1000 clamp(42px,4.15vw,70px)/.9 var(--font);
  letter-spacing:.055em;
  text-transform:uppercase;
  text-shadow:0 4px 30px rgba(0,0,0,.92), 0 0 34px rgba(255,204,0,.14);
}

.bmp-plaque-title span{
  display:inline-block;
  min-height:0;
  padding:0;
  border-radius:0;
  color:#fff;
  background:none;
  -webkit-text-fill-color:currentColor;
  font:inherit;
  letter-spacing:inherit;
  text-align:center;
}

.bmp-title-mark{
  display:grid;
  grid-template-columns:minmax(92px,1fr) 26px minmax(92px,1fr);
  align-items:center;
  gap:18px;
  width:min(560px,86%);
  margin-bottom:10px;
}

.bmp-title-mark span{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,204,0,.74));
}

.bmp-title-mark span:last-child{
  background:linear-gradient(90deg, rgba(255,204,0,.74), transparent);
}

.bmp-title-mark svg{
  width:26px;
  height:26px;
  fill:var(--bmp-gold);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.65));
}

.bmp-plaque-title .bmp-title-daily{
  color:#fff;
}

.bmp-plaque-title .bmp-title-main{
  color:var(--bmp-gold);
}

.bmp-plaque-sub{
  margin:7px 0 0;
  color:rgba(255,255,255,.9);
  font:700 clamp(13px,1.05vw,17px)/1.35 var(--font);
  text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}

.bmp-month{
  justify-self:end;
  gap:6px;
  padding:0 8px;
}

.bmp-month span{
  min-width:116px;
  text-align:center;
  color:var(--bmp-gold-hi);
  font:900 12px/1 var(--font);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.bmp-mn{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  color:var(--bmp-gold-hi);
  background:rgba(255,204,0,.13);
  border:1px solid rgba(255,204,0,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 14px rgba(255,204,0,.12);
  opacity:.74;
  cursor:default;
}

.bmp-mn:disabled{
  opacity:.78;
  color:var(--bmp-gold-hi);
  -webkit-text-fill-color:var(--bmp-gold-hi);
}

.bmp-path{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.bmp-nodes{
  position:absolute;
  inset:0;
  z-index:7;
}

.bmp-mascot{
  position:absolute;
  right:1.8%;
  bottom:calc(var(--bmp-side-bottom) + var(--bmp-offer-card-h) - 28px);
  z-index:6;
  width:clamp(220px,20vw,320px);
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.68));
}

.bmp-node{
  position:absolute;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  font:900 clamp(13px,1.4vw,19px)/1 var(--font);
  transition:transform .18s var(--ease-out), filter .18s var(--ease-out);
}

.bmp-node .bn-num{
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.bmp-node.is-claimed{
  width:clamp(34px,3.6vw,52px);
  aspect-ratio:186/220;
  color:var(--bmp-gold);
  background:url("../assets-new/bonus-map/node-claimed.webp") center/contain no-repeat;
  transform:translate(-50%,-64%);
  filter:drop-shadow(0 0 8px rgba(255,204,0,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.5));
}

.bmp-node.is-claimed .bn-num{
  top:58%;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

.bmp-node.is-claimed:hover{
  z-index:6;
  transform:translate(-50%,-64%) scale(1.14);
}

.bmp-node.is-today{
  width:clamp(46px,4.8vw,68px);
  aspect-ratio:204/260;
  color:#fff;
  font-size:clamp(16px,1.8vw,24px);
  background:url("../assets-new/bonus-map/node-today.webp") center/contain no-repeat;
  transform:translate(-50%,-65%);
  animation:bmpPulse 1.6s ease-in-out infinite;
}

.bmp-node.is-today .bn-num{
  top:59%;
  text-shadow:0 2px 5px rgba(80,0,0,.85);
}

.bmp-node.is-today:hover{
  z-index:6;
  transform:translate(-50%,-65%) scale(1.1);
}

.bmp-node.is-today.is-done{
  animation:none;
  filter:drop-shadow(0 0 10px rgba(255,204,0,.6)) drop-shadow(0 3px 6px rgba(0,0,0,.5));
}

@keyframes bmpPulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,90,60,.75)) drop-shadow(0 0 18px rgba(255,204,0,.5)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
  50%{filter:drop-shadow(0 0 14px rgba(255,90,60,1)) drop-shadow(0 0 34px rgba(255,204,0,.85)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
}

.bmp-node.is-locked{
  width:clamp(32px,3.4vw,48px);
  aspect-ratio:215/220;
  color:#d7d9ee;
  font-size:clamp(10px,1vw,14px);
  background:url("../assets-new/bonus-map/node-locked.webp") center/contain no-repeat;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) saturate(.92);
}

.bmp-node.is-locked .bn-num{
  top:26%;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}

.bmp-node.is-locked:hover{
  z-index:6;
  transform:translate(-50%,-50%) scale(1.08);
}

.bmp-node.is-locked.bmp-shake{
  animation:bmpShake .4s;
}

@keyframes bmpShake{
  0%,100%{transform:translate(-50%,-50%)}
  25%{transform:translate(calc(-50% - 3px),-50%) rotate(-4deg)}
  75%{transform:translate(calc(-50% + 3px),-50%) rotate(4deg)}
}

.bmp-node::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  z-index:9;
  padding:7px 12px;
  border-radius:9px;
  white-space:nowrap;
  color:var(--bmp-gold-hi);
  background:rgba(3,8,25,.92);
  border:1px solid rgba(255,204,0,.36);
  box-shadow:0 12px 24px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1);
  font:800 11px/1 var(--font);
  letter-spacing:.04em;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) scale(.9);
  transition:.16s var(--ease-out);
}

.bmp-node:not([data-tip])::after{
  content:none;
}

.bmp-node:hover::after,
.bmp-node:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) scale(1);
}

.bmp-node.bmp-tip-below::after{
  top:calc(100% + 8px);
  bottom:auto;
}

.bmp-node.bmp-tip-l::after{
  left:-4px;
  transform:scale(.9);
  transform-origin:left center;
}

.bmp-node.bmp-tip-l:hover::after,
.bmp-node.bmp-tip-l:focus-visible::after{
  transform:scale(1);
}

.bmp-node.bmp-tip-r::after{
  left:auto;
  right:-4px;
  transform:scale(.9);
  transform-origin:right center;
}

.bmp-node.bmp-tip-r:hover::after,
.bmp-node.bmp-tip-r:focus-visible::after{
  transform:scale(1);
}

.bmp-node.bmp-burst{
  animation:bmpBurst .55s var(--ease-out);
}

@keyframes bmpBurst{
  0%{transform:translate(-50%,-65%) scale(1)}
  40%{transform:translate(-50%,-65%) scale(1.5)}
  100%{transform:translate(-50%,-65%) scale(1)}
}

.bmp-legend{
  position:absolute;
  left:2%;
  bottom:7.4%;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:152px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,204,0,.22);
  background:rgba(3,8,25,.68);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.bmp-legend .lg{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--bmp-muted);
  font:900 11px/1 var(--font);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.bmp-legend .lg img{
  width:24px;
  height:auto;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
}

.bmp-card{
  border-radius:16px;
  border:1px solid rgba(255,204,0,.34);
  background:
    radial-gradient(circle at 8% 0%, rgba(255,204,0,.1), transparent 38%),
    linear-gradient(135deg, rgba(12,22,54,.82), rgba(4,10,30,.86));
  box-shadow:0 22px 52px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  padding:16px;
  text-align:left;
}

.bmp-today{
  position:absolute;
  right:var(--bmp-side-right);
  bottom:var(--bmp-side-bottom);
  z-index:5;
  width:min(342px,24%);
  min-height:var(--bmp-offer-card-h);
}

.bmp-pop{
  position:absolute;
  z-index:8;
  width:272px;
}

.bmp-pop[hidden]{
  display:none;
}

.btc-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.btc-date{
  display:block;
  color:#fff;
  font:900 15px/1.2 var(--font);
}

.btc-cur{
  display:block;
  margin-top:4px;
  color:var(--bmp-gold);
  font:900 11px/1 var(--font);
  letter-spacing:.14em;
  text-transform:uppercase;
}

.btc-tc{
  color:var(--bmp-gold-hi);
  font:900 12px/1.4 var(--font);
  text-decoration:underline;
  text-underline-offset:3px;
}

.btc-prize{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:9px;
}

.btc-prize img{
  height:52px;
  filter:drop-shadow(0 0 14px rgba(255,204,0,.45));
}

.btc-title{
  display:block;
  color:var(--bmp-gold);
  font:1000 13px/1.2 var(--font);
  letter-spacing:.11em;
  text-transform:uppercase;
}

.btc-name{
  display:block;
  color:#fff;
  font:1000 20px/1.12 var(--font);
}

.btc-game{
  color:var(--bmp-muted);
  font:700 13px/1.45 var(--font);
}

.btc-game a{
  color:var(--bmp-gold-hi);
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:2px;
}

.btc-prov{
  margin-bottom:13px;
  color:var(--bmp-soft);
  font:800 11.5px/1.4 var(--font);
}

.bmp-claim{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:48px;
  padding:6px 16px;
  border:1px solid rgba(255,236,150,.72);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#101049;
  background:var(--bmp-gold-grad);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.46), inset 0 -6px 14px rgba(160,98,0,.32), 0 12px 24px -12px rgba(255,204,0,.82);
  font:900 13px/1 var(--font);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s, filter .18s;
}

.bmp-claim svg{
  display:inline-block;
  width:18px;
  height:18px;
  margin-right:7px;
  vertical-align:-3.5px;
  fill:#101049;
}

.bmp-claim span{
  position:relative;
  z-index:1;
  text-align:center;
  line-height:1.25;
}

.bmp-claim:hover{
  transform:translateY(-2px);
  filter:saturate(1.08) brightness(1.04);
}

.bmp-claim:disabled{
  color:rgba(255,255,255,.62);
  cursor:default;
  background:rgba(5,10,31,.62);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transform:none;
  filter:none;
}

.bmp-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(2,3,16,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.bmp-modal.open{
  display:grid;
}

.bmp-modal-card{
  position:relative;
  width:min(660px,100%);
  border-radius:18px;
  border:1px solid rgba(255,204,0,.38);
  background:
    radial-gradient(circle at 8% 0%, rgba(255,204,0,.12), transparent 38%),
    linear-gradient(135deg, rgba(12,22,54,.95), rgba(4,10,30,.96));
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  filter:none;
}

.bmp-modal-face{
  position:static;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-height:min(72vh,620px);
  overflow:auto;
  padding:30px 32px 28px;
}

.bmp-modal-card h3{
  margin:0 0 16px;
  color:#fff;
  font:1000 24px/1.1 var(--font);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.bmp-modal-card ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bmp-modal-card li{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--bmp-muted);
  font:700 14px/1.5 var(--font);
}

.bmp-modal-card li b{
  color:#fff;
}

.mi{
  flex:0 0 38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,204,0,.08);
  border:1px solid rgba(255,204,0,.3);
}

.mi svg{
  width:21px;
  height:21px;
}

.bmp-modal-cta{
  margin-top:18px;
  height:48px;
}

.bmp-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:34px;
  height:34px;
  border-radius:50%;
  color:var(--bmp-gold);
  background:rgba(3,8,25,.7);
  border:1px solid rgba(255,204,0,.34);
  font:900 15px/1 var(--font);
  cursor:pointer;
}

@media (max-width:1180px){
  .bmp-frame{width:100%}
  .bmp-top{top:calc(var(--header-h,72px) + 20px);left:14px;right:14px}
  .bmp-plaque{margin-top:24px}   /* 20 + 24 + 8 = header + 52, same as wider screens */
  .bmp-today{width:min(290px,31%)}
}

@media (max-width:900px){
  .bmp-top{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .bmp-how,
  .bmp-month{
    justify-self:center;
  }
  .bmp-plaque{
    order:-1;
  }
}

@media (max-width:760px){
  .bmp-wrap{
    width:100vw;
    margin-inline:calc(50% - 50vw);
    padding-top:0;
  }
  .bmp-frame{
    width:100%;
    margin-bottom:28px;
    padding:0;
    border-radius:0;
  }
  .bmp-top{
    position:absolute;
    top:calc(var(--header-h,64px) + 8px);
    left:8px;
    right:8px;
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    gap:10px;
    padding:6px 4px 12px;
    pointer-events:auto;
  }
  .bmp-plaque{
    width:100%;
    min-height:174px;
    margin:37px 0 0;   /* strip 8 + pad 6 + 37 + 46 = header + 97, same as vip + default mobile */
    padding:46px 0 0;
    background:none;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.72));
  }
  .bmp-plaque::before,
  .bmp-plaque::after{
    content:none;
  }
  .bmp-plaque-title{
    max-width:calc(100vw - 32px);
    gap:.14em;
    font-size:clamp(28px,8.9vw,40px);
    line-height:.9;
    letter-spacing:.035em;
  }
  .bmp-title-mark{
    grid-template-columns:minmax(52px,1fr) 22px minmax(52px,1fr);
    gap:12px;
    width:min(320px,78vw);
    margin-bottom:8px;
  }
  .bmp-title-mark svg{
    width:22px;
    height:22px;
  }
  .bmp-plaque-sub{
    max-width:30ch;
    margin-top:7px;
    font-size:13px;
  }
  .bmp-how,
  .bmp-month{
    min-height:40px;
  }
  .bmp-how{
    padding-inline:16px;
    font-size:11px;
  }
  .bmp-month{
    display:none;
  }
  .bmp-map{
    height:auto;
    min-height:clamp(1240px,314vw,1900px);
    background-image:url("../assets-new/bonus-map/map-tourist-neon-mobile.webp");
    background-position:center top;
  }
  .bmp-map::before{
    background:
      linear-gradient(90deg, rgba(1,8,32,.16), rgba(2,10,36,.02) 38%, rgba(1,8,32,.18)),
      linear-gradient(180deg, rgba(1,13,42,.14) 0%, rgba(2,13,42,.02) 34%, rgba(1,8,32,.24) 100%);
  }
  .bmp-map::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(circle at 48% 34%, rgba(190,220,255,.09), transparent 43%),
      linear-gradient(180deg, rgba(120,170,230,.07) 0%, rgba(135,190,245,.04) 48%, rgba(20,116,180,.05) 100%);
    mix-blend-mode:screen;
    opacity:.44;
  }
  .bmp-node{font-size:14px}
  .bmp-node.is-claimed{width:38px}
  .bmp-node.is-today{width:50px;font-size:18px}
  .bmp-node.is-locked{width:34px;font-size:9.5px}
  .bmp-mascot{display:none}
  .bmp-legend{
    position:static;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    min-width:0;
    margin:10px 0;
    padding:12px;
  }
  .bmp-legend .lg{
    font-size:10px;
  }
  .bmp-today{
    position:static;
    width:auto;
    margin:0;
  }
  .bmp-card{
    border-radius:15px;
  }
  .bmp-pop{
    width:min(272px,82vw);
  }
  .btc-name{
    font-size:19px;
  }
  .bmp-modal-card{
    width:min(560px,100%);
  }
  .bmp-modal-face{
    max-height:76vh;
    padding:28px 22px 22px;
  }
  .bmp-modal-card h3{
    font-size:22px;
  }
  .bmp-modal-card li{
    font-size:13px;
  }
}

@media (max-width:420px){
  .bmp-frame{
    margin-inline:0;
    padding:0;
  }
  .bmp-month span{
    min-width:96px;
    font-size:11px;
  }
  .btc-head{
    align-items:flex-start;
  }
  .btc-prize img{
    height:46px;
  }
}