/* Match format popup — reference design */
body dialog#format-modal.format-dialog{
  box-sizing:border-box;
  width:min(720px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:none!important;
  margin:auto;
  padding:22px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  color:#fff;
  font-family:'Manrope',Arial,sans-serif;
  animation:formatIn .28s ease both;
}
body dialog#format-modal::backdrop{
  background:#020b14d4;
  backdrop-filter:blur(10px);
}
@keyframes formatIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}

body dialog#format-modal .format-shell{
  position:relative;
  box-sizing:border-box;
  width:100%;
  padding:28px 28px 26px;
  border-radius:18px;
  border:3px solid transparent;
  background:
    linear-gradient(160deg,#0a2f52f2 0%,#071f38f5 48%,#041528fa 100%) padding-box,
    linear-gradient(135deg,#ffe9a0 0%,#f0c145 22%,#c9972a 48%,#ffe07a 72%,#d4a63a 100%) border-box;
  box-shadow:
    0 28px 70px #000c,
    inset 0 1px 0 #ffffff22,
    inset 0 -20px 40px #0004,
    -10px 0 28px #2ad0ff33,
    10px 0 28px #2ad0ff33;
}
body dialog#format-modal .format-shell:before,
body dialog#format-modal .format-shell:after{
  content:"";
  position:absolute;
  top:18%;
  bottom:18%;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg,transparent,#5ce8ff,transparent);
  box-shadow:0 0 14px 4px #3ad7ff88;
  pointer-events:none;
}
body dialog#format-modal .format-shell:before{left:-2px}
body dialog#format-modal .format-shell:after{right:-2px}

body dialog#format-modal .format-tab{
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  min-width:148px;
  padding:7px 28px 8px;
  text-align:center;
  font:800 11px/1 'Manrope',Arial,sans-serif;
  letter-spacing:.18em;
  color:#f4f8ff;
  text-transform:uppercase;
  background:
    linear-gradient(180deg,#0d2744 0%,#071a30 100%) padding-box,
    linear-gradient(90deg,#e8c35a,#ffd86a 40%,#c9962e 100%) border-box;
  border:2px solid transparent;
  clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
  box-shadow:0 4px 12px #0007;
}

body dialog#format-modal .format-close{
  position:absolute!important;
  top:-14px!important;
  right:-10px!important;
  float:none!important;
  margin:0!important;
  z-index:4;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  border:2.5px solid #f6d76a!important;
  background:
    radial-gradient(circle at 35% 28%,#fff1a8,#ffd24a 55%,#c99628 100%)!important;
  color:#1a1204!important;
  font:900 20px/1 Arial,sans-serif!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  cursor:pointer;
  box-shadow:0 4px 14px #0008,0 0 0 3px #f0c84a33,inset 0 1px 0 #fff8;
}
body dialog#format-modal .format-close:hover{
  filter:brightness(1.06);
  color:#000!important;
}

body dialog#format-modal .format-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding-top:4px;
}

body dialog#format-modal .format-title{
  position:relative;
  margin:8px 0 0;
  padding:0 72px;
  text-align:center;
  font:800 italic clamp(28px,4.2vw,40px)/1 Impact,'Arial Black','Bebas Neue',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 0 #03101fcc,0 0 24px #5ecfff44;
}
body dialog#format-modal .format-title:before,
body dialog#format-modal .format-title:after{
  content:"";
  position:absolute;
  top:50%;
  width:min(88px,12vw);
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#9fe9ffaa,#fff8);
  box-shadow:0 0 10px #6de8ff88;
  transform:translateY(-50%);
}
body dialog#format-modal .format-title:before{right:calc(100% - 56px);background:linear-gradient(90deg,transparent,#9fe9ffaa,#fff)}
body dialog#format-modal .format-title:after{left:calc(100% - 56px);background:linear-gradient(90deg,#fff,#9fe9ffaa,transparent)}
body dialog#format-modal .format-title em{
  font-style:italic;
  color:#ffe34a;
  text-shadow:0 0 18px #ffd43a88,0 2px 0 #3a2808aa;
}

body dialog#format-modal .format-hint{
  margin:0!important;
  padding:0 16px;
  max-width:520px;
  text-align:center;
  font:600 13px/1.45 'Manrope',Arial,sans-serif!important;
  color:#e8f4ff!important;
  letter-spacing:.01em;
}
body dialog#format-modal .format-hint b{color:#ffe34a;font-weight:800}

body dialog#format-modal .overs-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%;
  margin-top:8px;
  padding:4px 2px 2px!important;
  box-sizing:border-box;
}

body dialog#format-modal .overs-btn{
  position:relative;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:96px;
  padding:16px 8px 14px!important;
  border-radius:14px!important;
  border:2px solid #3db7e8!important;
  background:
    radial-gradient(circle at 88% 92%,#ffffff14 0 18%,transparent 19%),
    linear-gradient(165deg,#0d3a5e 0%,#082744 55%,#041a30 100%)!important;
  color:#fff;
  cursor:pointer;
  overflow:hidden;
  box-shadow:inset 0 1px 0 #ffffff1a,0 8px 18px #0006;
  transition:border-color .15s,box-shadow .15s,transform .12s,filter .12s;
}
body dialog#format-modal .overs-btn:after{
  content:"";
  position:absolute;
  right:8px;
  bottom:6px;
  width:34px;
  height:34px;
  opacity:.28;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%23e8f6ff'/%3E%3Cpath d='M18 14c8 6 12 18 10 30M46 14c-8 6-12 18-10 30M12 34h40' fill='none' stroke='%23071a30' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events:none;
}
body dialog#format-modal .overs-btn b{
  position:relative;
  z-index:1;
  font:900 clamp(28px,3.6vw,36px)/1 Impact,'Arial Black',sans-serif!important;
  color:#ffe34a!important;
  text-shadow:0 2px 0 #041628;
}
body dialog#format-modal .overs-btn span{
  position:relative;
  z-index:1;
  font:800 11px/1.2 'Manrope',Arial,sans-serif!important;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#f2f8ff!important;
  font-style:italic;
}
body dialog#format-modal .overs-btn small{
  position:relative;
  z-index:1;
  display:block;
  margin-top:6px;
  font:600 10px/1.2 'Manrope',Arial,sans-serif;
  color:#9fd3ea;
  letter-spacing:0;
  text-transform:none;
  font-style:normal;
}
body dialog#format-modal .overs-btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  border-color:#7adfff!important;
}
body dialog#format-modal .overs-btn.is-selected,
body dialog#format-modal .overs-btn[aria-pressed="true"]{
  border-color:#ffd24a!important;
  box-shadow:
    0 0 0 1px #ffef9a88,
    0 0 18px #ffd43a66,
    inset 0 0 20px #ffd43a18,
    0 8px 18px #0006!important;
  background:
    radial-gradient(circle at 88% 92%,#ffffff18 0 18%,transparent 19%),
    linear-gradient(165deg,#1a4d72 0%,#0c3050 55%,#071f36 100%)!important;
}
body dialog#format-modal .overs-btn:focus-visible{
  outline:2px solid #ffe34a;
  outline-offset:3px;
}

@media(max-width:560px){
  body dialog#format-modal.format-dialog{width:min(96vw,calc(100vw - 16px))!important;padding-top:20px!important}
  body dialog#format-modal .format-shell{padding:24px 14px 18px;border-radius:14px;border-width:2.5px}
  body dialog#format-modal .format-tab{min-width:120px;padding:6px 18px 7px;font-size:9px;letter-spacing:.14em}
  body dialog#format-modal .format-title{padding:0 28px;font-size:clamp(22px,7vw,30px)}
  body dialog#format-modal .format-title:before,
  body dialog#format-modal .format-title:after{width:36px}
  body dialog#format-modal .format-hint{font-size:11px!important}
  body dialog#format-modal .overs-grid{gap:8px!important}
  body dialog#format-modal .overs-btn{min-height:78px;padding:12px 4px 10px!important;border-radius:10px!important}
  body dialog#format-modal .overs-btn b{font-size:24px!important}
  body dialog#format-modal .overs-btn span{font-size:8px!important;letter-spacing:.1em}
  body dialog#format-modal .overs-btn:after{width:24px;height:24px;right:4px;bottom:4px}
  body dialog#format-modal .format-close{width:32px!important;height:32px!important;top:-12px!important;right:-6px!important;font-size:18px!important}
}

@media(orientation:landscape) and (max-height:430px){
  body dialog#format-modal .format-shell{padding:16px 18px 14px}
  body dialog#format-modal .format-title{margin-top:2px;font-size:22px}
  body dialog#format-modal .format-hint{font-size:11px!important}
  body dialog#format-modal .overs-btn{min-height:64px;padding:8px 4px!important}
  body dialog#format-modal .overs-btn b{font-size:22px!important}
  body dialog#format-modal .overs-grid{margin-top:2px;gap:10px!important}
}