.account-level-dialog {
  width: min(560px, calc(100vw - 16px)); max-width: none; height: min(700px, 85dvh);
  max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border: 2px solid #9094d3;
  border-radius: 6px; color: #fff; background: #4a4b69;
  box-shadow: 0 7px 0 #29293c, inset 0 0 0 4px #65668b, 0 20px 90px #0009;
}
.account-level-dialog::backdrop { background: #090b18b8; }
.account-level-dialog .account-level-ribbon {
  position: relative; isolation: isolate; display: grid; place-items: center;
  min-height: clamp(92px, 15dvh, 140px); padding: 10px 28px; margin: 8px 0 0;
  filter: drop-shadow(0 6px 3px #1b214b88);
  justify-content: center; border: 0;
}
.account-level-ribbon::before {
  content: ''; position: absolute; z-index: -2; inset: 15% 0 0;
  background: linear-gradient(100deg, #102f93, #2d60cf 12%, #13307e 25%, #204daf 75%, #306bd4 90%, #182e75);
  clip-path: polygon(0 3%, 13% 13%, 13% 0, 87% 0, 87% 13%, 100% 3%, 96% 48%, 100% 96%, 86% 100%, 80% 83%, 20% 83%, 14% 100%, 0 96%, 4% 48%);
}
.account-level-ribbon::after {
  content: ''; position: absolute; z-index: -1; inset: 4% 5% 13%; border-radius: 24% / 16%;
  border-top: 7px solid #f3d87b; border-bottom: 7px solid #f3d87b;
  background: linear-gradient(90deg, #1557c2, #5488e6 10%, #2d69d4 22%, #3677dd 78%, #6397ed 91%, #1d4cae);
  box-shadow: inset 0 5px 0 #ffedb7, inset 0 -4px 0 #a87f30, 0 3px 0 #15276c;
}
.account-level-dialog .account-level-ribbon h2 { margin: 0 0 8px; font-family: inherit; font-size: clamp(26px, 6vw, 36px); font-weight: 900; text-align: center; text-shadow: 0 3px #18213f, 1px 0 #253459, -1px 0 #253459; }
.account-level-content {
  height: calc(100% - clamp(92px, 15dvh, 140px) - 8px); padding: 12px 16px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center; overflow-y: auto;
  background: linear-gradient(135deg, transparent 49.7%, #77729a15 50%, transparent 75%), linear-gradient(225deg, transparent 45%, #282e501a 45%, transparent 80%);
}
.account-level-description { color: #dddef4; font-size: 14px; margin: 8px 0; max-width: 34ch; }
.account-level-prizes { margin: auto 0; padding: 20px 0; width: 100%; }
.account-level-prizes h3 { color: #fff391; font-size: 20px; margin: 0 0 18px; text-shadow: 0 2px #2c2543; }
.account-level-prizes > p { font-size: 12px; color: #c5c7e4; margin: 20px 0 0; }
.account-level-rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vw, 18px); }
.account-level-rewards figure { margin: 0; width: 80px; flex: 0 0 80px; min-width: 0; }
.account-level-rewards figure > div { position: relative; aspect-ratio: 1; border: 2px solid #e7e7f5; background: radial-gradient(circle at 50% 40%, #466581, #13202c 78%); box-shadow: 0 3px 0 #27263e, inset 0 0 0 2px #7f82a9; }
.account-level-rewards img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.account-level-rewards b { position: absolute; right: 3px; bottom: 1px; font-size: clamp(13px, 3vw, 17px); text-shadow: 0 2px 2px #000, 1px 0 #000, -1px 0 #000; }
.account-level-rewards figcaption { margin-top: 9px; font-size: 12px; color: #edeefd; }
.account-level-content footer { width: 100%; padding-top: 20px; }
.account-level-content .hero-gold-button { width: min(220px, 75%); min-height: 50px; font-size: 20px; }
#account-level-status { font-size: 12px; min-height: 14px; margin: 8px 0 0; }
.account-level-dialog :focus-visible { outline: 3px solid white; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .account-level-dialog[open] .account-level-ribbon { animation: level-ribbon-arrive .45s ease-out both; }
  .account-level-dialog[open] .account-level-rewards { animation: level-prizes-arrive .4s .15s ease-out both; }
  @keyframes level-ribbon-arrive { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes level-prizes-arrive { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}
@media (max-height: 480px) { .account-level-dialog { height: calc(100dvh - 24px); } .account-level-prizes { padding: 10px 0; } .account-level-content footer { padding-top: 8px; } }
@media (max-width: 600px) {
  .account-level-rewards figure { flex-basis: 72px; width: 72px; }
}