/* ALITEO — estilos activos. Orden de cascada y condiciones responsive conservados. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  color: var(--white);
  font-family: 'DM Sans',Arial,sans-serif;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #C7C7C7;
  outline-offset: 3px;
}

button,
a {
  touch-action: manipulation;
}

#gameShell {
  position: fixed;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: linear-gradient(#0F0F0Fdb,#0F0F0F9c),url('street-background-opt79.webp') center/cover no-repeat;
  isolation: isolate;
}

header {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 5;
}

.brand,
.brand img {
  display: block;
}

.pause {
  justify-self: start;
  font-size: 19px;
}

.pause:disabled {
  visibility: hidden;
}

.iconbtn {
  justify-self: end;
  letter-spacing: 1px;
  font-weight: 700;
}

main {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.arcade {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.hud {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  height: 48px;
  padding: 0 max(25px,5vw);
  z-index: 2;
}

.hud strong {
  font: 800 30px 'Barlow Condensed',Impact,sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.hud>strong:nth-child(2) {
  text-align: center;
}

.hud>strong:last-child {
  text-align: right;
}

.hud small {
  font: 13px 'DM Sans',sans-serif;
}

.idle .hud,
.finished .hud {
  display: none;
}

.playfield {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  z-index: 2;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
  overflow: auto;
}

.startbadge {
  color: #E1001E;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 10px;
}

h2 {
  font: 900 italic clamp(48px,6vw,80px)/.91 'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  letter-spacing: -1px;
  margin: 8px 0 17px;
}

.overlay p {
  font-size: 15px;
  line-height: 1.5;
  color: #FDFDFD;
  max-width: 380px;
  margin: 0 0 20px;
}

.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  min-height: 54px;
  padding: 15px 20px;
  border: 1px solid #E1001E;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  transform: skew(-3deg);
  box-shadow: 4px 4px 0 #00000055;
}

.primary:active {
  transform: translateY(2px) skew(-3deg);
}

.hint {
  font-size: 11px;
  margin-top: 18px;
  max-width: 320px;
  line-height: 1.5;
}

.touchpad {
  user-select: none;
  -webkit-user-select: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}

.dragging .touch-track span {
  background: #E1001E;
  box-shadow: 0 0 14px #F100197a;
}

.countdown {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font: 900 italic clamp(100px,17vw,190px) 'Barlow Condensed',Impact,sans-serif;
  color: #FDFDFD;
  text-shadow: 5px 5px 0 #BC001A;
  pointer-events: none;
}

.pulse {
  animation: count-pop .6s both;
}

.final-seconds {
  box-shadow: inset 0 0 48px #E1001E45;
}

.final-seconds .countdown {
  color: #E1001E;
}

.shake {
  animation: shake .22s;
}

.hit {
  animation: shake .3s;
}

.mascot {
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px #00000088);
}

.finished .mascot {
  left: calc(50% - 385px);
  top: 50%;
}

.results {
  display: flex;
  justify-content: center;
  gap: 55px;
  margin: 6px 0 24px;
}

.results div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.results b {
  font: 900 44px 'Barlow Condensed',Impact,sans-serif;
}

.results span {
  font-size: 11px;
  letter-spacing: 1.5px;
}

.order {
  display: block;
  width: 300px;
  max-width: 100%;
  text-decoration: none;
  text-align: center;
  border: 1px solid #8A8A8A;
  color: #FDFDFD;
  padding: 13px;
  font-size: 12px;
  font-weight: 800;
  margin-top: 12px;
}

.order:hover {
  background: #BC001A;
  border-color: #E1001E;
}

.finished #overlayHint {
  display: none;
}

@keyframes count-pop {
  0% {
    opacity: 1;
    transform: scale(1.2);
  }

  25% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.9);
  }

}

@keyframes shake {
  0%,100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }

}

@media (max-width:800px) {
  .hud {
    height: 42px;
    padding: 0 24px;
  }

  .hud strong {
    font-size: 28px;
  }

  .finished .overlay {
    padding: 16px;
  }

  .results {
    gap: 50px;
    margin: 3px 0 18px;
  }

  .results b {
    font-size: 36px;
  }

  .results span {
    font-size: 10px;
  }

}

@media (max-height:740px) and (max-width:650px) {
  .primary {
    min-height: 48px;
    padding: 12px;
  }

  .overlay {
    padding: 14px;
  }

}

@media (max-height:500px) {
  .hud {
    height: 34px;
  }

  .hud strong {
    font-size: 23px;
  }

  .touchpad {
    gap: 7px;
  }

  .idle .hint {
    margin-top: 12px;
  }

  .finished .overlay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    padding: 10px 5% 10px 28%;
  }

  .finished .mascot {
    left: 4%;
    top: 50%;
  }

  .finished #badge {
    grid-column: 1/-1;
  }

  .finished .primary,
.finished .order {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 10px;
  }

}

@media (prefers-reduced-motion:reduce) {
  .shake,
.hit {
    animation: none;
  }

  .pulse {
    animation: fade .6s both;
  }

  @keyframes fade {
    0%,50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }

  }

}

header {
  height: 84px;
  position: relative;
  isolation: isolate;
  padding: 7px 25px 13px;
  border: 0;
}

header:before,
header:after {
  content: '';
  position: absolute;
  pointer-events: none;
  clip-path: var(--bezel-cut);
  z-index: -1;
}

header:before {
  background: linear-gradient(135deg,#555555,#252525 16%,#131313 70%,#555555);
  box-shadow: inset 0 1px #8A8A8A;
}

header:after {
  background: radial-gradient(#FDFDFD09 .65px,transparent .85px) 0 0/3px 3px,linear-gradient(125deg,#252525,#191919 45%,#252525);
  box-shadow: inset 0 1px #FDFDFD20;
}

.brand {
  justify-self: center;
  padding: 0 20px 7px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.brand img {
  width: 116px;
  height: 58px;
  background: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #000000);
}

.brand:after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 5px;
  border: 2px solid #0F0F0F;
  box-sizing: content-box;
  border-radius: 5px;
  background: linear-gradient(#F10019,#BC001A);
  box-shadow: 0 1px #555555,inset 0 1px #E1001E80,0 -1px 2px #000000;
}

.pause,
.iconbtn {
  position: relative;
  border-radius: 8px;
  border: 1px solid #000000;
  background: linear-gradient(145deg,#252525,#131313);
  box-shadow: 0 1px #555555,inset 0 1px 3px #000000;
  min-height: 40px;
  color: #C7C7C7;
}

.pause {
  width: 40px;
}

.iconbtn {
  padding: 0 12px;
  font-size: 10px;
}

main {
  border-left: 5px solid #131313;
  border-right: 5px solid #131313;
}

.touchpad {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  cursor: grab;
  border: 0;
}

.touchpad:before,
.touchpad:after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.touchpad:before {
  background: linear-gradient(#555555,#252525 22%,#131313);
  box-shadow: inset 0 1px #8A8A8A;
}

.touchpad:after {
  background: radial-gradient(#FDFDFD09 .65px,transparent .85px) 0 0/3px 3px,linear-gradient(135deg,#252525,#191919 65%,#252525);
}

.touch-track {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
}

.touch-track:before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 20px;
  height: 27px;
  border-radius: 8px;
  background: linear-gradient(#000000,#0F0F0F);
  border: 1px solid #000000;
  box-shadow: 0 1px #555555,0 -1px #000000,inset 0 3px 6px #000000;
}

.touch-track:after {
  content: '';
  position: absolute;
  left: calc(50% - 38px);
  bottom: 5px;
  width: 76px;
  height: 3px;
  background: #000000;
  border-radius: 3px;
  box-shadow: 0 1px #555555;
}

.touch-track span {
  position: absolute;
  top: 33px;
  left: 50%;
  width: 90px;
  height: 33px;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(#8A8A8A,#252525 12%,#000000 88%,#555555);
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow: none;
  isolation: isolate;
}

.touch-track span:before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: -1;
  border: 1px solid #BC001A;
  clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  box-shadow: inset 0 1px #E1001E66;
}

.grip {
  display: flex;
  gap: 3px;
  align-items: center;
}

.grip i {
  width: 2px;
  height: 10px;
  border-radius: 1px;
}

.steer-arrow {
  display: block;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid #FDFDFDaa;
  border-right: 1.5px solid #FDFDFDaa;
}

.steer-arrow.left {
  transform: rotate(-135deg);
}

.steer-arrow.right {
  transform: rotate(45deg);
}

.touchpad.dragging {
  cursor: grabbing;
}

.idle .touchpad,
.finished .touchpad {
  display: block;
  pointer-events: none;
}

.idle .touch-track,
.finished .touch-track {
  opacity: .7;
}

.countdown {
  font-size: clamp(62px,13vw,150px);
}

@media (max-width:800px) {
  header {
    height: 74px;
    padding: 4px 15px 12px;
  }

  .brand {
    padding: 0 12px 7px;
  }

  .brand img {
    width: 105px;
    height: 52px;
  }

  .brand:after {
    width: 55px;
    height: 4px;
  }

  .touch-track span {
    width: 86px;
    top: 32px;
    height: 32px;
  }

  .touch-track:before {
    top: 19px;
  }

  .iconbtn {
    font-size: 9px;
    padding: 0 9px;
  }

}

@media (max-height:740px) and (max-width:650px) {
  header {
    height: 65px;
  }

  .brand img {
    height: 44px;
    width: 93px;
  }

  .touch-track span {
    top: 29px;
    height: 30px;
  }

  .touch-track:before {
    top: 17px;
    height: 24px;
  }

  .touch-track:after {
    bottom: 4px;
  }

}

@media (max-height:500px) {
  header {
    height: 53px;
    padding-top: 2px;
    padding-bottom: 9px;
  }

  .brand img {
    height: 35px;
    width: 76px;
  }

  .brand:after {
    height: 3px;
    width: 42px;
  }

  .pause,
.iconbtn {
    min-height: 34px;
  }

  .touch-track span {
    top: 24px;
    height: 28px;
  }

  .touch-track:before {
    top: 12px;
    height: 24px;
  }

  .touch-track:after {
    display: none;
  }

}

:root {
  --bezel-cut: polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 15px));
}

.brand:before,
.brand:after {
  display: none !important;
}

.brand {
  padding-bottom: 0;
}

main {
  border: 0;
  box-shadow: none;
}

header {
  clip-path: none;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 5px 5px #00000099);
}

header:before {
  inset: 0 0 1px;
}

header:after {
  inset: 3px 3px 4px;
}

.touchpad {
  clip-path: none;
  box-shadow: 0 -5px 10px #00000088;
}

.touchpad:before,
.touchpad:after {
  clip-path: polygon(0 11px,12px 0,calc(100% - 12px) 0,100% 11px,100% 100%,0 100%);
}

.touchpad:before {
  inset: 0 0 0;
}

.touchpad:after {
  inset: 3px 3px 0;
}

.finished canvas {
  visibility: hidden;
}

@media (max-width:800px) {
  .brand {
    padding-bottom: 0;
  }

}

.touchpad,
.playfield {
  touch-action: none;
  overscroll-behavior: none;
}

.touch-track span {
  transition: none;
}

.order {
  background: transparent;
  cursor: pointer;
}

.finished .mascot {
  max-height: 210px;
}

.finished #share {
  margin-top: 12px;
}

.pulse {
  pointer-events: none;
}

@media (max-height:500px) {
  .finished .results {
    grid-row: 3;
    grid-column: 1;
  }

  .finished #start {
    grid-row: 3;
    grid-column: 2;
  }

  .finished #share {
    grid-column: 2;
    margin-top: 0;
  }

}

@media (max-height:500px) {
  .finished #overlayTitle {
    grid-column: 1/-1;
    grid-row: 2;
  }

  .finished #overlayText {
    grid-column: 1;
    grid-row: 4;
  }

  .finished .mascot {
    max-height: 180px;
  }

  .finished #share {
    grid-row: 4;
  }

}

:root {
  --red: #E1001E;
  --white: #FDFDFD;
  --red-dark: #BC001A;
  --highlight: #F10019;
  --info: #006EFD;
  --background: #0F0F0F;
  --surface: #131313;
  --raised: #191919;
  --border: #252525;
  --muted: #8A8A8A;
  --positive: #00FC3C;
  --bonus: #FACD00;
  --control-height: 64px;
}

html,
body {
  background: var(--surface);
}

#gameShell {
  height: 100dvh;
  padding-bottom: 0;
  background-color: var(--background);
}

.touchpad {
  height: calc(var(--control-height) + env(safe-area-inset-bottom,0px));
  padding-bottom: env(safe-area-inset-bottom,0px);
  background: var(--surface);
  flex-shrink: 0;
}

.touch-track {
  height: var(--control-height);
  bottom: auto;
}

.touchpad:before,
.touchpad:after {
  bottom: 0;
}

.primary {
  background: var(--red);
  border-color: var(--highlight);
  color: var(--white);
}

.primary:hover {
  background: var(--highlight);
}

.primary:active {
  background: var(--red-dark);
}

.iconbtn[aria-pressed=true] {
  color: var(--white);
  border-color: var(--red-dark);
}

.hud small,
.hint {
  color: #C7C7C7;
}

.hot {
  color: var(--bonus);
}

.clock.urgent {
  color: var(--highlight);
}

.results b {
  color: var(--white);
}

.results div:last-child b,
.finished #badge {
  color: var(--bonus);
}

.results span {
  color: #C7C7C7;
}

.touch-track span:before {
  border-color: var(--highlight);
  background: linear-gradient(var(--highlight),var(--red),var(--red-dark));
}

.dragging .touch-track span:before {
  background: var(--highlight);
  border-color: var(--white);
}

.steer-arrow {
  border-color: #FDFDFD;
}

.grip i {
  background: #C7C7C7;
  box-shadow: 1px 0 #BC001A;
}

@media (max-width:800px) {
  :root {
    --control-height: 61px;
  }

}

@media (max-height:740px) and (max-width:650px) {
  :root {
    --control-height: 55px;
  }

}

@media (max-height:500px) {
  :root {
    --control-height: 44px;
  }

}

.help-button {
  position: relative;
  background: #131313;
  border: 1px solid #252525;
  box-shadow: 0 1px #555555;
  border-radius: 8px;
  color: #C7C7C7;
  font-weight: 800;
}

.help-button:hover {
  border-color: #006EFD;
  color: #FDFDFD;
}

.audience {
  bottom: 4px;
  left: 50%;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
}

.audience i {
  border-radius: 50%;
  background: #00FC3C;
}

.audience span {
  font-variant-numeric: tabular-nums;
}

.hud #streakHud {
  font-size: 26px;
}

.hud #streakHud small {
  font-size: 10px;
  letter-spacing: .5px;
}

.rules {
  overflow: auto;
  color: #FDFDFD;
  border-top: 2px solid #E1001E;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.rules-heading {
  justify-content: space-between;
  align-items: center;
}

.rules h3 {
  font: 900 26px 'Barlow Condensed',Impact,sans-serif;
  margin: 0;
  letter-spacing: .5px;
}

.rules-list>div {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
}

.rule-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rule-art img {
  object-fit: contain;
}

.rules-list b {
  display: block;
  font-size: 14px;
}

.rules-list small {
  display: block;
  font-size: 12px;
  color: #C7C7C7;
  margin-top: 3px;
  line-height: 1.35;
}

.rules-foot {
  line-height: 1.5;
}

@media (max-height:500px) {
  .rules-list>div {
    grid-template-columns: 45px 1fr;
    gap: 5px;
  }

  .audience {
    bottom: 3px;
  }

}

.console-actions {
  position: relative;
  width: 40px;
  min-height: 40px;
}

.help-button {
  width: 40px;
  min-height: 40px;
  font-size: 20px;
}

.start-scene {
  display: none;
}

.idle .start-scene {
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.start-mascot {
  display: block;
  width: clamp(105px,16vh,160px);
  height: clamp(120px,19vh,185px);
  object-fit: contain;
  filter: drop-shadow(0 8px 14px #00000080);
}

.start-scene .audience {
  position: static;
  transform: none;
  display: flex;
  font-size: 12px;
  line-height: 16px;
  gap: 6px;
  color: #8A8A8A;
}

.start-scene .audience i {
  width: 5px;
  height: 5px;
}

.idle #badge {
  margin-bottom: 22px;
}

.idle #overlayHint {
  order: 4;
  margin-top: 14px;
}

@media (max-height:650px) {
  .idle .start-scene {
    margin-bottom: 10px;
    gap: 5px;
  }

  .start-mascot {
    height: 100px;
    width: 90px;
  }

  .idle #overlayTitle {
    margin-bottom: 10px;
  }

  .idle #badge {
    margin-bottom: 16px;
  }

}

@media (max-height:500px) {
  .console-actions,
.help-button {
    min-height: 34px;
  }

  .idle .start-scene {
    margin-bottom: 7px;
    gap: 3px;
  }

  .start-mascot {
    height: 72px;
    width: 65px;
  }

  .idle #overlayTitle {
    margin-bottom: 7px;
  }

  .idle #badge {
    margin-bottom: 12px;
  }

  .idle #overlayHint {
    margin-top: 9px;
  }

}

.idle #overlayTitle {
  max-width: 100%;
}

.idle #overlayHint {
  display: none;
}

.audience {
  display: none;
  position: static;
  transform: none;
  font-size: 12px;
  line-height: 16px;
  gap: 6px;
  margin-top: 15px;
  color: #8A8A8A;
}

.idle .audience {
  display: flex;
}

.audience i {
  width: 5px;
  height: 5px;
}

.pause-restart {
  width: 260px;
  max-width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid #555555;
  border-radius: 3px;
  background: #131313cc;
  color: #C7C7C7;
  font-size: 12px;
}

.pause-restart:hover {
  border-color: #E1001E;
  color: #FDFDFD;
}

.pause-restart:active {
  background: #191919;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 300px;
  max-width: 100%;
  margin-top: 12px;
}

.result-actions .order {
  width: 100%;
  margin: 0;
  min-height: 48px;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #252525;
  background: #191919;
  font-size: 12px;
  line-height: 1.25;
}

.result-actions #order {
  border-color: #BC001A;
}

.result-actions .order:hover {
  background: #BC001A;
  border-color: #E1001E;
}

.menu-dialog {
  max-width: none;
  max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 20px);
  padding: 0;
  border: 1px solid #252525;
  border-top: 2px solid #E1001E;
  border-radius: 10px;
  color: #FDFDFD;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}

.menu-dialog::backdrop {
  background: #000000d9;
}

.menu-pages a+ a {
  border-top: 2px solid #252525;
}

.rules {
  max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);
  background: linear-gradient(155deg,#191919 0%,#0F0F0F 72%);
  border: 2px solid #E1001E;
  border-radius: 15px;
  box-shadow: 0 20px 65px #000,0 0 22px #E1001E1f;
  scrollbar-width: thin;
  scrollbar-color: #555555 transparent;
}

.rules::backdrop {
  background: #000000dc;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.rules-heading {
  position: relative;
  display: block;
  text-align: center;
  margin: 0 0 14px;
  padding: 2px 42px 0;
}

.rules-heading h3 {
  margin: 0;
}

.rules-heading h3:before,
.rules-heading h3:after {
  display: inline-block;
  margin: 0 8px;
  color: #E1001E;
  font-style: normal;
}

.rules-heading p {
  margin: 8px -35px 0;
  line-height: 1.35;
}

.rules-heading button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 25px;
  line-height: 1;
}

.rule-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 5px 0;
}

.rule-row:first-of-type {
  margin-top: 8px;
}

.rule-art {
  width: 82px;
  height: 58px;
}

.rule-art img {
  max-width: 72px;
  max-height: 58px;
  filter: drop-shadow(0 5px 5px #000);
}

.rule-art.pair img {
  max-width: 50px;
  max-height: 50px;
}

.rule-art.pair img+img {
  margin-left: -17px;
}

.rule-row b {
  display: block;
  font-size: 15px;
  line-height: 1.15;
}

.rule-row small {
  display: block;
  margin-top: 4px;
  color: #C7C7C7;
  font-size: 13px;
  line-height: 1.35;
}

.rules em {
  color: #F10019;
  font-style: normal;
  font-weight: 900;
  font-size: 1.2em;
}

.rules-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid #353535;
  color: #C7C7C7;
  text-align: center;
  font-size: 12px;
}

.rules-foot strong {
  color: #F10019;
}

@media (max-width:390px) {
  .rule-row {
    grid-template-columns: 70px 1fr;
    min-height: 60px;
    gap: 8px;
  }

  .rule-art {
    width: 70px;
    height: 52px;
  }

  .rule-art img {
    max-width: 64px;
    max-height: 52px;
  }

  .rule-row b {
    font-size: 14px;
  }

  .rule-row small {
    font-size: 12px;
  }

}

@media (max-height:700px) {
  .rules {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .rule-row {
    min-height: 52px;
    padding: 2px 0;
  }

  .rule-art {
    height: 47px;
  }

  .rule-art img {
    max-height: 47px;
  }

}

.playfield:after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 1px transparent;
  transition: opacity .18s;
}

.playfield.buffalo-active:after {
  opacity: 1;
  animation: buffalo-edge-pulse .34s ease-in-out infinite alternate;
}

.playfield.buffalo-active canvas {
  filter: saturate(1.08) contrast(1.03);
}

@keyframes buffalo-edge-pulse {
  from {
    box-shadow: inset 0 0 24px #E1001E70,inset 0 0 65px #BC001A35;
  }

  to {
    box-shadow: inset 0 0 34px #F10019aa,inset 0 0 90px #ff78004a,inset 0 0 0 1px #FACD0055;
  }

}

@media (prefers-reduced-motion:reduce) {
  .playfield.buffalo-active:after {
    animation: none;
    box-shadow: inset 0 0 30px #F1001980;
  }

}

.clock.clock-tick {
  animation: clock-zoom .58s cubic-bezier(.2,.9,.25,1);
}

@keyframes clock-zoom {
  0%,100% {transform: scale(1);filter: brightness(1);text-shadow: none;}
  28% {transform: scale(2.15);filter: brightness(1.65);text-shadow: 0 0 5px #ff3154,0 0 18px #e1001e,0 0 30px #bc001a;}
  45% {transform: scale(1.85);filter: brightness(1);text-shadow: 0 0 6px #e1001e;}
  62% {transform: scale(2.05);filter: brightness(1.65);text-shadow: 0 0 5px #ff3154,0 0 18px #e1001e,0 0 30px #bc001a;}
}

@media (prefers-reduced-motion:reduce) {
  .clock.clock-tick {
    animation: none;
  }

}

@media (max-height:600px) {
  .idle .audience {
    margin-top: 12px;
  }

}

@media (max-height:500px) {
  .finished .result-actions {
    grid-column: 2;
  }

  .result-actions .order {
    min-height: 40px;
    font-size: 12px;
  }

}

.intro-actions {
  display: none;
}

.idle .intro-actions {
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.intro-actions button,
.intro-actions a {
  border: 0;
  background: transparent;
  color: #8A8A8A;
  font: 800 10px 'DM Sans',Arial,sans-serif;
  letter-spacing: .7px;
  text-decoration: none;
  padding: 7px 4px;
  min-height: 30px;
}

.intro-actions button:hover,
.intro-actions a:hover {
  color: #FDFDFD;
}

.menu-pages {
  display: flex;
  gap: 0;
  width: 100%;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.menu-pages::-webkit-scrollbar {
  display: none;
}

.menu-pages a {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  margin: 0;
  padding: 0;
}

.menu-pages a+a {
  border: 0;
}

.menu-pages img {
  display: block;
  margin: 0;
  padding: 0;
}

@media (max-height:500px) {

  .idle .intro-actions {
    margin-top: 5px;
  }

}

.menu-dialog {
  position: relative;
  overflow: hidden;
}

.menu-pages {
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
}

.menu-pages a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.menu-pages img {
  width: 100%;
  height: 100%;
}

.menu-swipe {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(12px,env(safe-area-inset-bottom,0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #006EFD80;
  border-radius: 20px;
  pointer-events: none;
  transition: opacity .25s;
}

.menu-swipe span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.menu-swipe i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.menu-swipe b {
  font-size: 18px;
  line-height: 10px;
  margin-left: 1px;
}

.menu-pages img {
  object-fit: fill;
}

.menu-dialog {
  width: min(680px,calc(100vw - 20px),calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 20px)*.5625));
}

.menu-close {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 1px solid #FDFDFD66;
  border-radius: 50%;
  background: #000000b8;
  color: #FDFDFD;
  font-size: 26px;
  line-height: 32px;
  box-shadow: 0 3px 12px #00000099;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.menu-pages {
  height: auto;
  aspect-ratio: 9/16;
}

.menu-swipe,
.menu-swipe.seen {
  opacity: 1;
  border-color: #FDFDFD55;
  background: #000000b8;
  color: #FDFDFD;
  box-shadow: 0 3px 12px #00000080;
}

.menu-swipe i {
  background: #8A8A8A;
}

.menu-swipe i.active {
  background: #FDFDFD;
  box-shadow: 0 0 6px #FDFDFD99;
}

.menu-swipe b {
  color: #FDFDFD;
}

@media (max-height:500px) {
  .menu-dialog {
    width: min(calc(100vw - 20px),calc((100dvh - 20px)*.5625));
  }

  .menu-pages {
    height: auto;
  }

  .menu-close {
    top: 7px;
    right: 7px;
    width: 34px;
    height: 34px;
    font-size: 23px;
  }

}

.menu-pages .menu-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
  margin: 0;
  padding: 0;
}

.menu-pages .menu-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.menu-pages .menu-page {
  cursor: grab;
}

.menu-pages:active .menu-page {
  cursor: grabbing;
}

.pause-end {
  width: 260px;
  max-width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #8A8A8A;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.pause-end:hover {
  color: #E1001E;
}

.pause-end:active {
  color: #F10019;
}

.rules {
  width: min(390px,calc(100vw - 24px));
  padding: 17px;
}

.rules-heading {
  margin-bottom: 10px;
}

.rules-heading h3 {
  font-size: clamp(32px,9vw,40px);
}

.rules-heading p {
  margin-top: 6px;
  font-size: 12px;
}

.rules-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  padding: 6px 10px;
  border: 1px solid #353535;
  border-radius: 10px;
  background: #131313b8;
}

.rules-list .rule-row {
  grid-template-columns: 58px 1fr;
  gap: 7px;
  min-height: 64px;
  padding: 4px 0;
  margin: 0;
}

.rules-list .rule-art {
  width: 58px;
  height: 50px;
}

.rules-list .rule-art img {
  max-width: 54px;
  max-height: 48px;
}

.rules-list .rule-art.pair img {
  max-width: 37px;
  max-height: 39px;
}

.rules-list .rule-art.pair img+img {
  margin-left: -14px;
}

.rules-list .rule-row b {
  font-size: 14px;
}

.rules-list .rule-row small {
  font-size: 11px;
  line-height: 1.25;
}

.rules-summary {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.rules-summary p {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-left: 2px solid #E1001E;
  color: #C7C7C7;
  font-size: 11px;
  line-height: 1.3;
}

.rules-summary strong {
  color: #FDFDFD;
  font: 900 13px 'Barlow Condensed',Impact,sans-serif;
  letter-spacing: .4px;
}

.rules-foot {
  margin-top: 9px;
  padding-top: 8px;
}

.rules-foot strong {
  font-size: 17px;
}

@media (max-width:370px) {
  .rules {
    padding: 13px;
  }

  .rules-list {
    gap: 0 7px;
    padding: 5px 7px;
  }

  .rules-list .rule-row {
    grid-template-columns: 50px 1fr;
    gap: 5px;
  }

  .rules-list .rule-art {
    width: 50px;
  }

  .rules-list .rule-art img {
    max-width: 48px;
  }

  .rules-summary p {
    grid-template-columns: 75px 1fr;
    padding: 7px 8px;
  }

  .rules-summary strong {
    font-size: 12px;
  }

}

@media (max-height:620px) {
  .rules-heading {
    margin-bottom: 6px;
  }

  .rules-heading h3 {
    font-size: 30px;
  }

  .rules-list .rule-row {
    min-height: 52px;
  }

  .rules-list .rule-art {
    height: 43px;
  }

  .rules-list .rule-art img {
    max-height: 42px;
  }

  .rules-summary {
    margin-top: 7px;
    gap: 5px;
  }

  .rules-summary p {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .rules-foot {
    margin-top: 6px;
    padding-top: 5px;
  }

}

.rules-heading h3:before,
.rules-heading h3:after {
  content: none;
}

.rules:focus,
.menu-dialog:focus {
  outline: none;
}

.result-actions .share-result {
  grid-column: 1/-1;
  border-color: #E1001E;
  background: #E1001E;
  color: #FDFDFD;
}

.result-actions .share-result:hover {
  background: #F10019;
  border-color: #F10019;
}

.result-actions .share-result[aria-busy=true],
.result-actions .share-result:disabled {
  opacity: .72;
  cursor: wait;
}

@media (max-height:500px) {
  .finished .result-actions {
    grid-row: 4;
  }

  .result-actions .share-result {
    min-height: 38px;
  }

}

.ranking-dialog {
  position: relative;
  width: min(410px,calc(100vw - 24px));
  max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);
  padding: 22px 18px 18px;
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 3px solid #E1001E;
  color: #FDFDFD;
}

.ranking-dialog:not([open]) {
  display: none;
}

.ranking-dialog::backdrop {
  background: #000000df;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ranking-dialog:focus {
  outline: none;
}

.ranking-close {
  position: absolute;
  right: 11px;
  top: 11px;
  font-size: 25px;
  line-height: 1;
}

.ranking-heading {
  text-align: center;
}

.ranking-heading>span {
  display: block;
  font-size: 30px;
}

.ranking-heading p {
  margin: 6px 0 0;
  color: #8A8A8A;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}

.ranking-qualify {
  margin: 0 0 15px;
  padding: 13px;
  border: 1px solid #E1001E;
  border-radius: 9px;
  background: #191919;
  box-shadow: inset 0 0 18px #E1001E16;
  text-align: center;
}

.ranking-qualify>strong {
  display: block;
  color: #FACD00;
  font: italic 900 22px 'Barlow Condensed',Impact,sans-serif;
}

.ranking-qualify>p {
  margin: 5px 0 11px;
  color: #C7C7C7;
  font-size: 12px;
}

.ranking-qualify label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

.ranking-qualify input {
  min-width: 0;
  height: 44px;
  padding: 0 11px;
  border: 1px solid #555555;
  border-radius: 5px;
  background: #0F0F0F;
  color: #FDFDFD;
  font-weight: 900;
  text-transform: uppercase;
}

.ranking-qualify input:focus {
  border-color: #E1001E;
  outline: 2px solid #E1001E40;
}

.ranking-qualify button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #F10019;
  border-radius: 5px;
  background: #E1001E;
  color: #FDFDFD;
  font-size: 10px;
}

.ranking-qualify button:disabled {
  opacity: .65;
  cursor: wait;
}

.podium-row {
  grid-template-columns: 42px 1fr auto;
  border-left: 4px solid #555555;
}

.podium-row.place-1 {
  border-left-color: #FACD00;
}

.podium-row.place-2 {
  border-left-color: #C7C7C7;
}

.podium-row.place-3 {
  border-left-color: #BC6D38;
}

.podium-medal {
  font-size: 27px;
  text-align: center;
}

.podium-copy {
  min-width: 0;
}

.podium-copy small {
  font-weight: 900;
}

.podium-copy strong {
  display: block;
  overflow: hidden;
  color: #FDFDFD;
  font: 900 21px/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing: .6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-empty {
  margin: 12px 0 0;
  color: #C7C7C7;
  text-align: center;
  font-size: 12px;
}

.ranking-status {
  min-height: 17px;
  margin: 11px 0 0;
  color: #C7C7C7;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
}

@media (max-width:370px) {
  .ranking-dialog {
    padding: 18px 13px 14px;
  }

  .podium-row {
    grid-template-columns: 37px 1fr auto;
  }

  .podium-medal {
    font-size: 24px;
  }

  .podium-row>b {
    font-size: 27px;
  }

  .ranking-qualify button {
    width: 100%;
  }

}

@media (max-height:610px) {
  .ranking-dialog {
    padding-top: 14px;
  }

  .ranking-heading>span {
    font-size: 23px;
  }

  .ranking-qualify {
    padding: 9px;
    margin-bottom: 9px;
  }

  .podium-row {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .ranking-close {
    top: 7px;
    right: 7px;
  }

  .ranking-status {
    margin-top: 7px;
  }

}

@media (max-height:500px) {
  .ranking-dialog {
    width: min(620px,calc(100vw - 24px));
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px 15px;
  }

  .ranking-heading {
    align-self: center;
    margin: 0;
  }

  .ranking-qualify {
    grid-column: 1;
    margin: 0;
  }

  .ranking-podium {
    grid-column: 2;
    grid-row: 1/4;
  }

  .ranking-status,
.ranking-empty {
    grid-column: 1;
  }

  .ranking-close {
    position: fixed;
  }

}

.idle .overlay,
.finished .overlay {
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
}

.idle .overlay {
  justify-content: safe center;
  padding-top: 12px;
  padding-bottom: 18px;
}

.idle .start-scene {
  order: 1;
  display: grid;
  place-items: end center;
  flex: 0 0 auto;
}

.idle .start-mascot {
  object-fit: contain;
  filter: drop-shadow(0 14px 18px #000);
}

.idle #overlayTitle {
  order: 2;
  margin: 0 0 5px;
  font-size: clamp(52px,10vw,82px);
  line-height: .93;
  white-space: nowrap;
}

.idle #badge {
  order: 3;
  margin: 0 0 20px;
  font-size: 16px;
  letter-spacing: 0;
}

.idle #start {
  order: 4;
  box-shadow: 0 0 20px #E1001E2e,5px 5px 0 #00000077;
}

.idle #start:before {
  margin-right: 14px;
  font-size: 17px;
}

.idle .intro-actions {
  order: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 13px 0 0;
}

.idle .intro-actions>button:not(.ranking-cta),
.idle .intro-actions>a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: 5px;
  color: #FDFDFD;
  letter-spacing: .65px;
}

.idle .intro-actions>button:not(.ranking-cta):hover,
.idle .intro-actions>a:hover {
  border-color: #F10019;
  background: #252525;
}

.idle .audience {
  order: 6;
  margin: 11px 0 0;
  color: #8A8A8A;
  font-size: 12px;
}

.idle .audience i {
  background: #00FC3C;
  box-shadow: 0 0 7px #00FC3C;
}

.finished .overlay {
  justify-content: safe center;
  overflow-y: auto;
}

.finished .mascot {
  order: 2;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 12px #000);
}

.finished #badge {
  order: 1;
  margin: 0 0 4px;
  font-size: 11px;
}

.finished #overlayTitle {
  order: 3;
  margin: 0 0 8px;
  line-height: .91;
}

.finished #overlayText {
  order: 4;
  display: block;
  max-width: 500px;
  margin: 0 0 12px;
  color: #FDFDFD;
  font-weight: 700;
  line-height: 1.25;
}

.finished .results {
  order: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 12px;
  gap: 0;
}

.finished .results div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.finished .results div+div {
  border-left: 1px solid #555555;
}

.finished .results b {
  line-height: .95;
  color: #FDFDFD;
}

.finished #start {
  order: 7;
  margin: 0;
}

.finished #start:before {
  margin-right: 13px;
  font-size: 23px;
  line-height: 0;
}

.finished .result-actions {
  order: 8;
  display: grid;
  gap: 10px 12px;
  margin-top: 11px;
}

.finished .result-actions .order {
  min-height: 48px;
  border-radius: 5px;
  background: #191919;
  color: #FDFDFD;
  font-size: 11px;
}

.finished .result-actions .share-result {
  grid-column: 1/-1;
  color: #FDFDFD;
}

.finished .result-actions .share-result:before {
  content: '↗';
  margin-right: 9px;
  font-size: 17px;
}

.finished .result-actions #order {
  border-color: #E1001E;
}

@media (max-width:800px) {
  .idle #overlayTitle {
    font-size: clamp(48px,13vw,66px);
  }

}

@media (max-height:760px) and (max-width:650px) {
  .idle .overlay {
    padding-top: 7px;
    padding-bottom: 10px;
  }

  .idle #overlayTitle {
    font-size: 49px;
    margin-bottom: 3px;
  }

  .idle #badge {
    margin-bottom: 13px;
    font-size: 14px;
  }

  .idle .intro-actions {
    margin-top: 9px;
    gap: 7px 10px;
  }

  .idle .audience {
    margin-top: 7px;
  }

  .finished .result-actions {
    margin-top: 8px;
    gap: 7px 9px;
  }

  .finished .result-actions .order {
    min-height: 42px;
  }

}

@media (max-height:600px) and (max-width:650px) {
  .idle #overlayTitle {
    font-size: 40px;
  }

  .idle #badge {
    font-size: 12px;
  }

  .finished .overlay {
    grid-template-columns: 1fr 1fr;
    align-content: center;
  }

  .finished .mascot {
    left: 3%;
    top: 50%;
  }

  .finished #badge {
    grid-column: 1/-1;
    margin: 0;
  }

  .finished #overlayTitle {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .finished #overlayText {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
  }

  .finished .results {
    grid-column: 1;
    grid-row: 4;
    margin: 0;
  }

  .finished #start {
    grid-column: 2;
    grid-row: 3;
  }

  .finished .result-actions {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
    gap: 6px;
  }

  .finished .result-actions .order {
    min-height: 38px;
  }

  .finished .result-actions .share-result {
    grid-column: 1/-1;
  }

}

.idle .overlay,
.finished .overlay {
  gap: 0;
}

.idle #overlayTitle,
.finished #overlayTitle {
  font-style: normal;
  letter-spacing: .5px;
  text-shadow: none;
}

.idle #badge {
  color: #C7C7C7;
  font-weight: 400;
}

.idle #start,
.finished #start,
.intro-actions>button,
.intro-actions>a,
.result-actions .order,
.ranking-qualify button,
.pause-restart {
  transform: none;
  background-image: none !important;
  letter-spacing: .4px;
  font-family: 'DM Sans',Arial,sans-serif;
  font-style: normal;
  font-weight: 600;
}

.idle #start,
.finished #start {
  border: 1px solid #F10019;
  color: white;
  font-size: 16px;
  min-height: 52px;
}

.idle #start:before,
.finished #start:before,
.finished .share-result:before {
  content: none;
}

.primary:after,
.order:after,
.intro-actions>button:after,
.intro-actions>a:after {
  content: none !important;
}

.idle .intro-actions>button:not(.ranking-cta),
.idle .intro-actions>a {
  border: 1px solid #ffffff18;
  background: #19191999;
  font-size: 12px;
  font-weight: 500;
  min-height: 44px;
}

.finished .results {
  border: 1px solid #ffffff12;
  background: #19191999;
  border-radius: 14px;
  box-shadow: none;
}

.finished .results div+div {
  border-color: #ffffff14;
}

.finished .results span {
  color: #C7C7C7;
  letter-spacing: .7px;
}

.finished .result-actions {
  grid-template-columns: 1fr;
}

.finished .result-actions .share-result {
  background: #ffffff08;
  border: 1px solid #ffffff20;
  min-height: 48px;
  font-size: 14px;
}

.ranking-dialog {
  background: #131313;
  border: 1px solid #ffffff20;
  box-shadow: 0 20px 70px #0008;
  border-radius: 18px;
}

.ranking-heading>span {
  font: 600 12px 'DM Sans',sans-serif;
  letter-spacing: 2px;
  color: #E1001E;
  filter: none;
}

button:hover,
.intro-actions a:hover {
  filter: brightness(1.08);
}

button:active,
.intro-actions a:active {
  filter: brightness(.94);
}

@media (max-width:650px) {
  .idle #overlayTitle {
    font-size: clamp(38px,11vw,54px);
  }

  .idle .start-scene {
    margin-bottom: 12px;
  }

  .idle #badge {
    margin-bottom: 18px;
  }

}

@media (max-height:600px) and (max-width:650px) {
  .finished .overlay {
    display: flex;
    padding: 12px 18px;
    justify-content: flex-start;
  }

  .finished .results,
.finished #start,
.finished .result-actions {
    flex-shrink: 0;
  }

  .idle .start-scene {
    margin-bottom: 0;
  }

  .idle #badge {
    margin-bottom: 10px;
  }

}

#gameShell.idle,
#gameShell.finished {
  background: #0F0F0F url('aliteo-graffiti-v38-opt79.webp') center/cover no-repeat;
}

.idle #start,
.idle .intro-actions,
.finished #start,
.finished .result-actions {
  width: min(300px,80vw);
  max-width: 100%;
}

.idle #start,
.finished #start {
  background: #E1001E;
  border-color: #F10019;
}

.idle .intro-actions>a {
  border-color: #E1001E55;
}

.finished .results {
  width: min(280px,76vw);
  min-height: 64px;
  padding: 9px 0;
  margin-bottom: 12px;
}

.finished .results b {
  font-size: 34px;
}

.finished .results span {
  font-size: 10px;
}

.finished #overlayTitle {
  font-size: 30px;
  margin-bottom: 6px;
}

.finished #overlayText {
  font-size: 14px;
  margin-bottom: 10px;
}

.idle .start-scene {
  width: 240px;
  height: 220px;
  margin: 0 0 8px;
}

.idle .start-mascot {
  width: 230px;
  height: 230px;
}

.game-tips {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: 1px solid #555555;
  border-top: 2px solid #E1001E;
  box-shadow: inset 0 1px #C7C7C71a;
  color: #FDFDFD;
}

.idle .game-tips {
  display: flex;
}

.game-tips strong {
  font: 800 14px 'DM Sans',Arial,sans-serif;
  letter-spacing: 1px;
  color: #E1001E;
  border-right: 1px solid #555555;
  padding-right: 14px;
}

.game-tips span {
  font-size: 14px;
  line-height: 1.4;
}

@media (max-height:760px) and (max-width:650px) {
  .idle .start-scene {
    height: 170px;
    width: 185px;
  }

  .idle .start-mascot {
    width: 180px;
    height: 180px;
  }

  .finished #overlayTitle {
    font-size: 28px;
  }

  .finished .results b {
    font-size: 30px;
  }

  .game-tips {
    margin-bottom: 10px;
    padding: 10px 14px;
  }

}

@media (max-height:600px) {
  .idle .start-scene {
    height: 110px;
  }

  .idle .start-mascot {
    width: 125px;
    height: 125px;
  }

  .finished .overlay {
    display: flex;
    justify-content: flex-start;
    padding: 10px 18px;
  }

  .finished #start,
.finished .result-actions {
    width: min(300px,80vw);
  }

  .finished .results {
    width: min(280px,76vw);
  }

}

.idle #start,
.finished #start,
.paused #start,
.intro-actions>button,
.intro-actions>a,
.result-actions .order,
.pause-restart,
.pause-end,
.ranking-qualify button {
  border-radius: 3px !important;
  clip-path: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.paused #start {
  width: min(300px,80vw);
  min-height: 48px;
  margin: 8px 0 0;
  padding: 12px 18px;
  font: 600 14px 'DM Sans',Arial,sans-serif;
  letter-spacing: .4px;
  border: 1px solid #555555;
  color: #FDFDFD;
}

.paused .pause-restart {
  width: min(300px,80vw);
  min-height: 48px;
  margin: 8px 0 0;
  padding: 12px 18px;
  font: 600 14px 'DM Sans',Arial,sans-serif;
  letter-spacing: .4px;
  border: 1px solid #555555;
  background: #191919;
  color: #FDFDFD;
}

.paused .pause-end {
  margin: 8px 0 0;
  font: 600 14px 'DM Sans',Arial,sans-serif;
  letter-spacing: .4px;
  border: 1px solid #555555;
  background: #191919;
}

.paused #start {
  background: #E1001E;
  border-color: #F10019;
}

.paused .pause-end {
  color: #C7C7C7;
}

.ranking-header {
  display: grid;
  place-items: center;
  padding: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  color: #FDFDFD;
  flex-shrink: 0;
}

.console-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.console-actions .pause,
.console-actions .help-button {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 3px;
  background: #131313;
  border: 1px solid #555555;
  color: #FDFDFD;
}

header {
  padding-left: 14px;
  padding-right: 14px;
}

.brand {
  padding-left: 5px;
  padding-right: 5px;
}

.finished .result-actions .exit-result {
  grid-column: 1/-1;
  background: transparent;
  border: 1px solid #555555;
  color: #C7C7C7;
}

.game-tips {
  margin: 0 !important;
  width: 100%;
  border-radius: 0;
  border-width: 1px 0 0;
  border-top-color: #555555;
  min-height: 66px;
  padding-bottom: max(12px,env(safe-area-inset-bottom));
  background: linear-gradient(#252525,#131313);
}

@media (max-width:370px) {
  header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .console-actions {
    gap: 5px;
  }

  .console-actions .pause,
.console-actions .help-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .iconbtn {
    padding: 0 8px;
  }

}

.idle .playfield,
.finished .playfield {
  background: transparent;
}

.idle .overlay,
.finished .overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(#0F0F0F12,#0F0F0F44);
}

.finished .results div:last-child b {
  color: #FACD00;
}

.finished .result-actions .share-result:before,
.finished .result-actions .share-result:after,
.paused #start:before,
.paused #start:after {
  content: none !important;
}

.finished .result-actions .exit-result {
  width: min(220px,65vw);
  justify-self: center;
  min-height: 38px;
  padding: 9px 14px;
  font-size: 12px;
  margin-top: 4px;
}

.paused .pause-end {
  width: min(220px,65vw);
  min-height: 38px;
  padding: 9px 14px;
  font-size: 12px;
}

.header-right {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 8px;
}

.header-right .ranking-header {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  min-width: 38px;
  border: 1px solid #555555;
  border-radius: 3px;
  background: #131313;
  color: #FDFDFD;
  padding: 0;
}

.header-right .iconbtn {
  min-height: 38px;
  font-size: 9px;
  padding: 0 9px;
}

.console-actions {
  justify-self: start;
}

.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) !important;
}

@media (max-width:370px) {
  .header-right {
    gap: 6px;
  }

  .header-right .ranking-header {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .header-right .iconbtn {
    font-size: 8px;
    padding: 0 7px;
  }

  .brand img {
    width: 75px;
  }

}

header>.console-actions {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

header>.header-right {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.finished .overlay {
  padding-top: 14px;
  padding-bottom: 84px;
}

@media (max-height:760px) {
  .finished .overlay {
    padding-top: 10px;
    padding-bottom: 60px;
  }

}

@media (max-height:600px) {
  .finished .overlay {
    padding-top: 10px;
    padding-bottom: 12px;
  }

}

header .console-actions {
  width: auto;
}

header .console-actions .help-button,
header .console-actions .pause {
  position: relative;
  border: 1px solid #BC001A;
  border-radius: 8px;
  background: linear-gradient(145deg,#252525,#131313);
  box-shadow: 0 1px #555555,inset 0 1px 3px #000000;
  min-height: 38px;
  height: 38px;
}

header .header-right .iconbtn {
  position: relative;
  border: 1px solid #BC001A;
  border-radius: 8px;
  background: linear-gradient(145deg,#252525,#131313);
  box-shadow: 0 1px #555555,inset 0 1px 3px #000000;
  color: #FDFDFD;
  min-height: 38px;
  height: 38px;
}

header .header-right .iconbtn:hover {
  border-color: #E1001E;
  color: #FDFDFD;
}

@media (max-width:370px) {
  header .console-actions .help-button,
header .console-actions .pause,
header .header-right .iconbtn {
    min-height: 34px;
    height: 34px;
  }

}

header .console-actions .help-button,
header .console-actions .pause {
  border-color: #000000;
  color: #C7C7C7;
}

header .console-actions .help-button:hover,
header .console-actions .pause:hover {
  border-color: #000000;
  color: #FDFDFD;
}

body:has(#rules[open]) #help,
body:has(#rankingDialog[open]) #headerRanking,
#gameShell.paused #pause {
  border-color: #BC001A;
  color: #FDFDFD;
}

header .header-right #sound,
header .header-right #sound:hover {
  border-color: #000000;
  color: #C7C7C7;
  background: linear-gradient(145deg,#252525,#131313);
  box-shadow: 0 1px #555555,inset 0 1px 3px #000000;
}

header .header-right #sound[aria-pressed=true],
header .header-right #sound[aria-pressed=true]:hover,
header #sound .audio-state {
  color: #C7C7C7;
}

header #sound[aria-pressed=true] .audio-state {
  color: #E1001E;
}

#rules::backdrop,
#rankingDialog::backdrop {
  -webkit-backdrop-filter: blur(6px);
}

#menuDialog::backdrop {
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#gameShell.paused::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.paused .overlay {
  z-index: 7;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.paused canvas {
  filter: none;
  opacity: 1;
}

.paused .hud,
.paused .touchpad {
  opacity: 1;
}

body:has(dialog[open]) #gameShell.paused::after {
  display: none;
}

header .console-actions #pause {
  display: grid;
  place-items: center;
  padding: 0;
}

.paused .overlay {
  justify-content: safe center;
  padding: 16px;
  overflow-y: auto;
}

.pause-card {
  width: min(410px,calc(100vw - 32px));
  max-width: 100%;
  padding: 28px 22px 24px;
  border: 1px solid #ffffff20;
  border-radius: 18px;
  background: #131313;
  box-shadow: 0 20px 70px #0008;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.paused .pause-card #badge {
  margin: 0 0 14px;
  font-size: 11px;
}

.paused .pause-card #overlayTitle {
  margin: 0 0 14px;
  font-size: 44px;
  line-height: 1;
}

.paused .pause-card #overlayText {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
}

.paused .pause-card #overlayHint {
  margin: 18px 0 0;
  font-size: 10px;
}

@media (max-height:600px) {
  .pause-card {
    padding: 20px 18px;
  }

  .paused .pause-card #badge {
    margin-bottom: 10px;
  }

  .paused .pause-card #overlayTitle {
    font-size: 36px;
  }

  .paused .pause-card #overlayText {
    margin-bottom: 10px;
  }

  .paused .pause-card #overlayHint {
    margin-top: 12px;
  }

}

#rankingName,
#rankingContact {
  font-size: 16px;
  font-family: inherit;
  line-height: 1.25;
}

.ranking-qualify form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  text-align: left;
}

.ranking-field {
  display: grid;
  gap: 5px;
}

.ranking-field[hidden] {
  display: none;
}

.ranking-qualify .ranking-field>label,
.ranking-contact>legend,
.ranking-contact>#rankingContactLabel {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  color: #C7C7C7;
  font: 800 10px 'DM Sans',Arial,sans-serif;
  letter-spacing: .75px;
}

.ranking-qualify #rankingName,
.ranking-qualify #rankingContact {
  width: 100%;
  height: 44px;
  padding: 0 11px;
  border: 1px solid #555555;
  border-radius: 3px;
  background: #0F0F0F;
  color: #FDFDFD;
  font-weight: 800;
}

.ranking-qualify #rankingContact {
  text-transform: none;
}

.ranking-contact {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px;
  border: 1px solid #ffffff20;
  border-radius: 5px;
  background: #0b0b0b80;
}

.ranking-contact[hidden] {
  display: none;
}

.ranking-contact>legend {
  padding: 0 5px;
}

.ranking-contact-help {
  display: block;
  color: #969696;
  font: 500 10px/1.35 'DM Sans',Arial,sans-serif;
}

.ranking-qualify #saveRanking {
  width: 100%;
  min-height: 44px;
}

.paused .pause-card {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rush-title {
  color: var(--red);
}

.ranking-reset {
  font-size: 11px !important;
  line-height: 1.5;
  color: #C7C7C7 !important;
  margin: 16px 0 0 !important;
  text-align: center;
}

.previous-winner {
  border-top: 1px solid #FDFDFD20;
}

.previous-winner strong {
  font-size: 16px;
}

.previous-winner span {
  font-size: 16px;
  font-weight: 700;
}

.ranking-retry {
  display: block;
  margin: 12px auto 0;
  padding: 10px 20px;
  background: #1A1A1A;
  color: #FDFDFD;
  border: 1px solid #FDFDFD33;
  border-radius: 2px;
  font: 700 12px 'DM Sans',sans-serif;
}

.share-dialog {
  width: min(390px,calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 24px 22px 20px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #131313;
  color: #FDFDFD;
  border: 1px solid #ffffff20;
  border-radius: 18px;
  box-shadow: 0 20px 70px #0008;
  text-align: center;
}

.share-dialog::backdrop {
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.share-dialog:focus {
  outline: none;
}

.share-dialog h3 {
  margin: 8px 28px 18px;
}

.share-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}

#shareForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#shareForm label {
  font-size: 11px;
  letter-spacing: 1px;
  color: #C7C7C7;
}

#shareName {
  width: min(260px,100%);
  padding: 11px 12px;
  background: #0F0F0F;
  color: #FDFDFD;
  border: 1px solid #ffffff30;
  border-radius: 3px;
  font: 500 16px 'DM Sans',Arial,sans-serif;
  text-align: center;
}

#sharePreview {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(180px,38dvh,340px);
  object-fit: contain;
  border: 1px solid #ffffff18;
}

#shareStatus {
  margin: 0;
  min-height: 16px;
  font-size: 12px;
  color: #C7C7C7;
}

#shareSubmit {
  width: min(230px,100%);
  padding: 13px 18px;
  border-radius: 2px;
  color: #FDFDFD;
  font-size: 12px;
  letter-spacing: .6px;
}

#retryShare {
  width: min(230px,100%);
  padding: 13px 18px;
  border: 1px solid #E1001E;
  border-radius: 2px;
  color: #FDFDFD;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
}

#retryShare {
  background: #191919;
  border-color: #ffffff30;
}

#shareSubmit:disabled {
  opacity: .45;
  cursor: default;
}

.ranking-dialog.ranking-entry-mode {
  width: min(350px,calc(100vw - 24px));
}

.ranking-dialog.ranking-entry-mode[open] {
  display: block;
}

.ranking-entry-mode .ranking-heading,
.ranking-entry-mode .ranking-podium,
.ranking-entry-mode .ranking-empty,
.ranking-entry-mode .previous-winner,
.ranking-entry-mode .ranking-reset {
  display: none !important;
}

.ranking-entry-mode .ranking-qualify {
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ranking-entry-mode .ranking-qualify>strong {
  color: #FDFDFD;
}

.ranking-entry-mode .ranking-qualify>p {
  max-width: 270px;
  margin: 9px auto 18px;
  color: #C7C7C7;
  font: 500 13px/1.4 'DM Sans',Arial,sans-serif;
}

.ranking-entry-mode .ranking-qualify form {
  gap: 12px;
}

.ranking-entry-mode .ranking-contact {
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ranking-entry-mode .ranking-qualify .ranking-field>label,
.ranking-entry-mode .ranking-contact>#rankingContactLabel {
  color: #8F8F8F;
  font-size: 9px;
  letter-spacing: 1px;
}

.ranking-entry-mode .ranking-qualify #rankingName,
.ranking-entry-mode .ranking-qualify #rankingContact {
  height: 48px;
  border-color: #3D3D3D;
  background: #101010;
  text-align: center;
}

.ranking-entry-mode .ranking-contact-help {
  margin-top: 1px;
  text-align: center;
  color: #777;
  font-size: 9px;
}

.ranking-entry-mode .ranking-qualify #saveRanking {
  min-height: 48px;
  margin-top: 2px;
  font-size: 12px;
}

.ranking-entry-mode .ranking-status {
  margin: 10px 4px 0;
  min-height: 0;
  font-size: 10px;
  line-height: 1.4;
}

.ranking-entry-mode .ranking-status:empty,
.ranking-entry-mode .ranking-retry[hidden] {
  display: none;
}

@media (max-height:500px) {
  .ranking-dialog.ranking-entry-mode {
    width: min(350px,calc(100vw - 24px));
    grid-template-columns: none;
  }

  .ranking-entry-mode .ranking-qualify {
    grid-column: auto;
  }

}

.ranking-heading h3 {
  font-size: 44px;
  line-height: 1;
}

.ranking-heading p {
  margin-top: 7px;
}

.ranking-reset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ranking-reset span {
  color: #8F8F8F;
  font: 600 10px/1.2 'DM Sans',Arial,sans-serif;
  letter-spacing: .35px;
  text-transform: none;
}

.ranking-reset strong {
  color: #E1001E;
  font: 900 20px/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
}

.previous-winner {
  position: relative;
  isolation: isolate;
}

.previous-winner::after {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -42px;
  width: 150px;
  height: 110px;
  transform: translateX(-50%);
  border-radius: 50%;
}

.previous-winner::before {
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
  border: 1px solid #FACD0075;
  border-radius: 50%;
  background: #FACD0014;
  color: #FACD00;
  font-size: 18px;
  box-shadow: 0 0 16px #FACD0026;
}

.previous-winner small {
  grid-column: auto;
  color: #AFAFAF;
  font-size: 9px;
  letter-spacing: 1.4px;
}

.previous-winner strong {
  max-width: 100%;
  color: #FDFDFD;
  font: 900 28px/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing: .6px;
  overflow-wrap: anywhere;
}

.previous-winner span {
  padding: 4px 10px;
  border-radius: 999px;
  background: #FACD0015;
  color: #FACD00;
  font: 800 13px/1 'DM Sans',Arial,sans-serif;
}

.ranking-heading .ranking-reset {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
}

.ranking-heading .ranking-reset span {
  padding: 0;
  border-radius: 0;
  background: none;
  text-transform: none;
}

.ranking-heading .ranking-reset strong {
  font-variant-numeric: tabular-nums;
}

.previous-winner {
  justify-items: stretch;
  text-align: left;
}

.previous-winner>.previous-winner-cup {
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #FACD0068;
  border-radius: 50%;
}

.previous-winner-cup svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.previous-winner>.previous-winner-copy {
  display: grid;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.previous-winner-copy small {
  line-height: 1;
}

.previous-winner-copy strong {
  overflow: hidden;
  font: 900 22px/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing: .5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.previous-winner-copy>#previousWinnerScore,
.ranking-heading h3 {
  margin: 0;
}

.ranking-heading .ranking-reset {
  margin: 6px 0 0 !important;
  color: #C7C7C7 !important;
}

.ranking-heading .ranking-reset span {
  color: #C7C7C7;
  font: 500 12px/1.35 'DM Sans',Arial,sans-serif;
  letter-spacing: 0;
}

.ranking-heading .ranking-reset strong {
  font: 900 12px/1.35 'DM Sans',Arial,sans-serif;
  letter-spacing: 0;
}

.previous-winner-copy strong {
  min-width: 0;
}

.podium-row {
  border-left-width: 1px;
  background: linear-gradient(145deg,#1C1C1C,#121212);
  box-shadow: inset 0 1px #FFFFFF0A,0 8px 20px #0004;
}

.podium-row.place-1 {
  grid-template-columns: 50px minmax(0,1fr) auto;
  border-color: #FACD0058;
  background: linear-gradient(110deg,#292414 0,#191919 52%,#121212 100%);
  box-shadow: inset 0 1px #FFF2,0 9px 24px #0005,0 0 18px #FACD000D;
}

.podium-row.place-2,
.podium-row.place-3 {
  grid-template-columns: 34px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
}

.podium-row.place-2 {
  border-color: #C7C7C733;
  background: linear-gradient(145deg,#202020,#121212);
}

.podium-row.place-3 {
  border-color: #BC6D3838;
  background: linear-gradient(145deg,#211A17,#121212);
}

.podium-medal {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #FFFFFF20;
  border-radius: 9px;
  background: #0D0D0D;
  color: #C7C7C7;
  font: 800 15px/1 'DM Sans',Arial,sans-serif;
}

.place-1 .podium-medal {
  width: 42px;
  height: 42px;
  border-color: #FACD0068;
  background: #FACD0012;
  color: #FACD00;
}

.place-2 .podium-medal,
.place-3 .podium-medal {
  grid-column: 1;
  grid-row: 1/3;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.place-2 .podium-medal {
  color: #D8D8D8;
}

.place-3 .podium-medal {
  color: #C9895D;
}

.podium-copy small {
  color: #777;
  font-size: 8px;
  letter-spacing: 1px;
}

.podium-copy strong {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.05;
}

.place-1 .podium-copy strong {
  font-size: 25px;
}

.place-2 .podium-copy,
.place-3 .podium-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.place-2 .podium-copy strong,
.place-3 .podium-copy strong {
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.podium-row>b {
  position: relative;
  font-variant-numeric: tabular-nums;
}

.podium-row>b::after {
  content: ' PTS';
  letter-spacing: .5px;
}

.podium-row.is-empty>b::after {
  content: '';
}

.place-1>b {
  font-size: 34px;
}

.place-2>b,
.place-3>b {
  font-size: 24px;
}

.podium-row.is-player {
  box-shadow: inset 0 0 0 1px #E1001E80,0 0 16px #E1001E20;
}

@media (max-width:350px) {
  .podium-row.place-2,
.podium-row.place-3 {
    grid-template-columns: 28px minmax(0,1fr);
  }

  .place-2 .podium-medal,
.place-3 .podium-medal {
    width: 27px;
    height: 27px;
    font-size: 12px;
  }

  .place-2 .podium-copy strong,
.place-3 .podium-copy strong {
    font-size: 16px;
  }

}

.rules-heading h3,
.ranking-heading h3,
.share-dialog h3,
.paused .pause-card #overlayTitle {
  color: #FDFDFD;
}

.rules-heading p,
.ranking-heading .ranking-reset,
.paused .pause-card #overlayText {
  color: #C7C7C7;
  font: 500 12px/1.35 'DM Sans',Arial,sans-serif;
  letter-spacing: 0;
}

.share-dialog h3 {
  margin-top: 8px;
}

.podium-row.place-1.is-player {
  border-color: #FACD0068;
  box-shadow: inset 0 1px #FFF2,0 9px 24px #0005,0 0 18px #FACD0018;
}

.podium-row.place-2.is-player {
  border-color: #C7C7C755;
  box-shadow: inset 0 1px #FFF2,0 8px 20px #0005,0 0 14px #C7C7C710;
}

.podium-row.place-3.is-player {
  border-color: #BC6D385C;
  box-shadow: inset 0 1px #FFF1,0 8px 20px #0005,0 0 14px #BC6D3810;
}

.previous-winner {
  border-color: #F1001975;
}

.previous-winner::after {
  background: radial-gradient(circle,#FDFDFD18 0,#FDFDFD00 70%);
}

.previous-winner>.previous-winner-cup {
  border-color: #FFFFFF78;
  background: #FFFFFF14;
  color: #FDFDFD;
  box-shadow: 0 0 15px #FFFFFF20;
}

.previous-winner-copy strong {
  color: #FDFDFD;
}

@media (max-height:550px) {
  #sharePreview {
    height: 140px;
  }

  .share-dialog {
    padding-top: 14px;
  }

  .share-dialog h3 {
    margin-top: 4px;
  }

  #shareForm {
    gap: 7px;
  }

}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('barlow-condensed-900-v61.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('dm-sans-700-v61.ttf') format('truetype');
}

.finished #overlayTitle {
  display: none;
}

.finished .mascot {
  position: static;
  transform: none;
  flex-shrink: 0;
  object-fit: contain;
  width: 230px;
  height: 230px;
  margin: 0 0 10px;
}

@media (max-height:760px) {
  .finished .mascot {
    width: 190px;
    height: 190px;
  }

}

@media (max-height:600px) {
  .finished .mascot {
    width: 150px;
    height: 150px;
  }

}

@media (min-width:900px) and (hover:hover) and (pointer:fine) {
  body {
    background: radial-gradient(ellipse at center,#242020 0,#111 55%,#090909 100%);
  }

  #gameShell {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 480px;
    height: min(900px,calc(100dvh - 32px));
    border: 1px solid #242424;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 70px #0009;
  }

  .hud {
    padding-left: 25px;
    padding-right: 25px;
  }

  .idle #overlayTitle {
    font-size: 76px;
  }

  .idle #start,
.idle .intro-actions {
    width: calc(100% - 36px);
  }

  .countdown {
    font-size: 100px;
  }

}

#resultOrderBar {
  display: none;
}

.finished #resultOrderBar {
  display: flex;
}

.result-order-bar {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  white-space: nowrap;
  padding: 8px 10px max(12px,env(safe-area-inset-bottom));
}

.result-order-bar .order-message {
  margin: 0;
  color: #c7c7c7;
  font: 700 13px 'DM Sans',Arial,sans-serif;
}

.result-order-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  width: auto;
  padding: 8px 5px;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 700 13px 'DM Sans',Arial,sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.result-order-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  width: auto;
  padding: 8px 5px;
  color: #fdfdfd;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 700 13px 'DM Sans',Arial,sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.result-order-bar a {
  color: #ff123b;
  font-weight: 800;
}

.result-order-bar a:hover,
.result-order-bar button:hover {
  text-decoration: underline;
}

.result-order-bar a:focus-visible,
.result-order-bar button:focus-visible {
  outline: 2px solid #ff123b;
  outline-offset: 2px;
}

.result-order-bar .order-divider {
  flex: none;
  color: #666;
  font-size: 14px;
  line-height: 1;
}

#gameTips {
  justify-content: center;
  text-align: center;
}

#gameTips .bar-highlight {
  color: #ff123b;
  font-weight: 800;
}

.portrait-guard {
  position: fixed;
  inset: 0;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 24px;
  background: #111;
  color: #fff;
  text-align: center;
}

.portrait-guard[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.portrait-guard::backdrop {
  background: #111;
}

.portrait-guard svg {
  color: #ff123b;
  flex: none;
}

.portrait-guard h2 {
  margin: 0;
  font: 900 30px 'Barlow Condensed',Arial,sans-serif;
}

.portrait-guard p {
  margin: 0;
  color: #bbb;
  font-size: 15px;
}

#gameTips #tipText {
  min-width: 0;
  overflow-wrap: anywhere;
}

#shareNameField {
  display: grid;
  gap: 6px;
  width: min(260px,100%);
  text-align: center;
}

.share-identity {
  margin: 0;
  color: #fff;
  text-align: center;
  font: 900 23px 'Barlow Condensed',Impact,sans-serif;
  text-transform: uppercase;
}

.share-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#editShareName {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #aaa;
}

#editShareName:hover {
  background: #252525;
  color: #fff;
}

.share-name-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 3px 0;
}

.share-name-actions button {
  padding: 8px 10px;
  border: 1px solid #444;
  border-radius: 5px;
  background: #202020;
  color: #ddd;
  font: 700 10px 'DM Sans',Arial,sans-serif;
}

#saveShareName {
  background: #e1001e;
  border-color: #e1001e;
  color: #fff;
}

.share-name-actions button:disabled {
  opacity: .5;
}

#rules,
#rankingDialog,
#shareDialog {
  position: relative;
  border: 1px solid #686868;
  border-radius: 18px;
  color: #fff;
}

.paused .pause-card {
  border: 1px solid #686868;
  border-radius: 18px;
  color: #fff;
}

#rules::backdrop,
#rankingDialog::backdrop,
#shareDialog::backdrop {
  background: #0007;
  backdrop-filter: blur(8px);
}

.paused .pause-card {
  position: fixed;
}

.rules-heading h3,
.ranking-heading h3,
.share-dialog h3,
.paused .pause-card #overlayTitle,
.ranking-entry-mode .ranking-qualify>strong {
  position: relative;
  isolation: isolate;
  font: italic 900 clamp(36px,10vw,48px)/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing: .3px;
  text-shadow: 2px 3px #000;
  margin-bottom: 20px;
}

.rules-heading h3::after,
.ranking-heading h3::after,
.share-dialog h3::after,
.paused .pause-card #overlayTitle::after,
.ranking-entry-mode .ranking-qualify>strong::after {
  content: '';
  position: absolute;
  bottom: -19px;
  left: 14%;
  width: 72%;
  height: 20px;
  background: url('street-brush-v73-opt79.png') center/100% 100% no-repeat;
  transform: rotate(-3deg);
}

.ranking-heading h3::before {
  position: absolute;
  width: 34px;
  height: 26px;
  left: calc(50% - 64px);
  top: -28px;
  background: url('street-crown-v73-opt79.png') center/contain no-repeat;
  transform: rotate(-10deg);
}

.ranking-close,
.share-close,
.rules-heading button {
  border: 1px solid #666;
  border-radius: 8px;
  background: #090909aa;
  color: #fff;
  width: 34px;
  height: 34px;
  z-index: 3;
}

#rankingDialog {
  display: block;
  width: min(460px,calc(100vw - 24px));
  padding: 48px 16px 18px;
}

#rankingDialog:not([open]) {
  display: none;
}

.ranking-heading {
  margin-bottom: 20px;
}

.ranking-heading .ranking-reset {
  flex-wrap: wrap;
  margin-top: 20px !important;
  gap: 4px;
}

.ranking-heading .ranking-reset strong {
  color: #ff123b;
}

.ranking-podium {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
  align-items: end;
  padding-top: 27px;
}

.podium-row {
  --metal: #d2d2d2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 235px;
  margin: 0;
  padding: 12px 6px 15px;
  grid-column: auto;
  grid-row: 1;
  border: 1px solid var(--metal);
  border-radius: 14px 14px 8px 8px;
  background: url('street-texture-v73-opt79.webp'),linear-gradient(145deg,color-mix(in srgb,var(--metal) 19%,#0c0c0c),#111 65%);
  box-shadow: inset 0 1px #fff3,0 12px 20px #0008,0 0 14px color-mix(in srgb,var(--metal) 12%,transparent);
}

.podium-row.place-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 12px 6px 15px;
  grid-row: 1;
  border: 1px solid var(--metal);
  border-radius: 14px 14px 8px 8px;
  background: url('street-texture-v73-opt79.webp'),linear-gradient(145deg,color-mix(in srgb,var(--metal) 19%,#0c0c0c),#111 65%);
  box-shadow: inset 0 1px #fff3,0 12px 20px #0008,0 0 14px color-mix(in srgb,var(--metal) 12%,transparent);
}

.podium-row.place-2 {
  --metal: #d2d2d2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 235px;
  margin: 0;
  padding: 12px 6px 15px;
  grid-row: 1;
  border: 1px solid var(--metal);
  border-radius: 14px 14px 8px 8px;
  background: url('street-texture-v73-opt79.webp'),linear-gradient(145deg,color-mix(in srgb,var(--metal) 19%,#0c0c0c),#111 65%);
  box-shadow: inset 0 1px #fff3,0 12px 20px #0008,0 0 14px color-mix(in srgb,var(--metal) 12%,transparent);
}

.podium-row.place-3 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 235px;
  margin: 0;
  padding: 12px 6px 15px;
  grid-row: 1;
  border: 1px solid var(--metal);
  border-radius: 14px 14px 8px 8px;
  background: url('street-texture-v73-opt79.webp'),linear-gradient(145deg,color-mix(in srgb,var(--metal) 19%,#0c0c0c),#111 65%);
  box-shadow: inset 0 1px #fff3,0 12px 20px #0008,0 0 14px color-mix(in srgb,var(--metal) 12%,transparent);
}

.podium-row.place-1 {
  --metal: #facd00;
  grid-column: 2;
  min-height: 275px;
}

.podium-row.place-2 {
  grid-column: 1;
}

.podium-row.place-3 {
  --metal: #ce8656;
  grid-column: 3;
}

.podium-row.is-player {
  border-color: var(--metal);
  box-shadow: inset 0 1px #fff3,0 12px 20px #0008,0 0 17px color-mix(in srgb,var(--metal) 22%,transparent);
}

.teo-avatar {
  display: block;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border: 3px solid var(--metal,#ff123b);
  border-radius: 50%;
  background-color: #181818;
  background-image: url('teo-avatars-v150.webp?v=top-v4-20261014');
  background-size: 600% var(--avatar-height,100%);
  background-position: var(--avatar-x,0%) var(--avatar-y,0%);
  background-repeat: no-repeat;
  box-shadow: 0 0 15px color-mix(in srgb,var(--metal,#ff123b) 28%,transparent);
}

.place-1 .teo-avatar {
  width: 92px;
  height: 92px;
  margin-top: -26px;
}

.place-1::before {
  content: '';
  position: absolute;
  left: calc(50% - 21px);
  width: 42px;
  height: 34px;
}

.podium-row .podium-medal {
  grid-column: auto;
  grid-row: auto;
  color: var(--metal);
  font: 900 23px/1 'Barlow Condensed',sans-serif;
}

.podium-row .podium-copy {
  grid-column: auto;
  grid-row: auto;
  align-self: stretch;
  text-align: center;
}

.podium-copy small {
  display: none;
}

.podium-row .podium-copy strong {
  font: 900 23px/1.1 'Barlow Condensed',sans-serif;
  margin: 0;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
}

.podium-row>b,
.place-1>b,
.place-2>b,
.place-3>b {
  grid-column: auto;
  grid-row: auto;
  align-self: stretch;
  margin-top: auto;
  padding: 8px 2px;
  border: 1px solid color-mix(in srgb,var(--metal) 65%,transparent);
  border-radius: 8px;
  background: #0505059e;
  color: var(--metal);
  font: 900 40px/1 'Barlow Condensed',sans-serif;
  text-align: center;
}

.podium-row>b::after {
  font: 700 8px 'DM Sans',sans-serif;
  color: #aaa;
}

.previous-winner {
  display: grid;
  width: 100%;
  grid-template-columns: 60px minmax(0,1fr);
  margin: 16px 0 0;
  border-radius: 12px;
  overflow: hidden;
}

.previous-winner[hidden] {
  display: none;
}

.previous-winner>.previous-avatar {
  --metal: #ff123b;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: 2px solid #ff123b;
  border-radius: 50%;
  background-color: #160006;
}

.previous-winner>.previous-winner-cup {
  display: none;
}

.previous-winner>.previous-winner-copy {
  min-width: 0;
  gap: 8px;
}

.previous-winner-copy small {
  font-size: 8px;
}

.ranking-status:empty {
  display: none;
}

.ranking-dialog.ranking-entry-mode {
  padding: 28px 20px 20px;
}

.ranking-entry-mode .ranking-qualify {
  margin: 0;
  padding: 20px 0 0;
}

.ranking-entry-mode .ranking-qualify>strong {
  font-size: 36px;
}

.ranking-entry-mode .ranking-qualify>p {
  margin-top: 26px;
}

#saveRanking,
#shareSubmit,
.paused .pause-card #start {
  background: linear-gradient(110deg,#e1001e,#bc001a);
  border: 1px solid #ff3154;
  font-weight: 700;
  min-height: 48px;
}

#rules .rules-list,
.rules-summary p {
  background: #0b0b0ba6;
  border-color: #ffffff20;
}

.menu-dialog {
  border-color: #686868;
  background: #0c0c0c;
  box-shadow: 0 24px 80px #000b;
}

@media (max-width:360px) {
  #rankingDialog {
    padding-left: 10px;
    padding-right: 10px;
  }

  .ranking-podium {
    gap: 6px;
  }

  .teo-avatar {
    width: 64px;
    height: 64px;
  }

  .place-1 .teo-avatar {
    width: 78px;
    height: 78px;
  }

  .podium-row,
.podium-row.place-2,
.podium-row.place-3 {
    min-height: 218px;
  }

  .podium-row.place-1 {
    min-height: 250px;
  }

  .podium-row .podium-copy strong {
    font-size: 20px;
  }

  .podium-row>b {
    font-size: 34px;
  }

}

@media (max-height:650px) {
  .ranking-heading {
    margin-bottom: 12px;
  }

  .ranking-heading h3 {
    font-size: 38px;
  }

  .ranking-podium {
    padding-top: 24px;
  }

  .podium-row,
.podium-row.place-2,
.podium-row.place-3 {
    min-height: 205px;
    gap: 7px;
  }

  .podium-row.place-1 {
    min-height: 237px;
  }

  .teo-avatar {
    width: 64px;
    height: 64px;
  }

  .place-1 .teo-avatar {
    width: 78px;
    height: 78px;
  }

  .previous-winner {
    margin-top: 12px;
  }

}

@media (prefers-reduced-motion:reduce) {
  dialog *,
.pause-card * {
    animation: none !important;
    transition: none !important;
  }

}

.podium-row,
.podium-row.place-1,
.podium-row.place-2,
.podium-row.place-3,
.previous-winner {
  background-size: cover,auto;
}

.teo-avatar.is-incognito {
  background-size: 100% 100%;
  background-position: center;
  box-shadow: 0 0 10px #0008;
}

.podium-row.is-empty {
  opacity: 1;
  border-color: color-mix(in srgb,var(--metal) 42%,#333);
}

.podium-row.is-empty .teo-avatar {
  border-color: color-mix(in srgb,var(--metal) 55%,#222);
}

.podium-row.is-empty .podium-copy strong {
  color: #888;
  font-size: 18px;
}

.podium-row.is-empty>b {
  color: #777;
}

.pause-confirm-dialog {
  position: relative;
  width: min(350px,calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 28px 20px 20px;
  overflow: auto;
  border: 1px solid #686868;
  border-radius: 18px;
  color: #fff;
  text-align: center;
}

.pause-confirm-dialog:not([open]) {
  display: none;
}

.pause-confirm-dialog::backdrop {
  background: #0009;
  backdrop-filter: blur(8px);
}

.pause-confirm-dialog:focus {
  outline: none;
}

.pause-confirm-dialog h3 {
  position: relative;
  margin: 0 0 30px;
  font: italic 900 36px/1 'Barlow Condensed',Impact,sans-serif;
}

.pause-confirm-dialog h3::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 14%;
  width: 72%;
  height: 20px;
  background: url('street-brush-v73-opt79.png') center/100% 100% no-repeat;
}

.pause-confirm-dialog p {
  margin: 0 0 22px;
  color: #c7c7c7;
  font: 500 13px/1.4 'DM Sans',Arial,sans-serif;
}

.pause-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.pause-confirm-actions button {
  min-height: 48px;
  padding: 10px 8px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #141414;
  color: #fff;
  font: 700 11px 'DM Sans',Arial,sans-serif;
}

.pause-confirm-actions #confirmPauseAction {
  background: #e1001e;
  border-color: #ff3154;
}

.pause-confirm-actions button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion:reduce) {
  .pause-confirm-dialog * {
    animation: none !important;
    transition: none !important;
  }

}

#rules,
#rankingDialog,
#shareDialog,
.paused .pause-card,
.pause-confirm-dialog {
  background-image: url('street-texture-v73-opt79.webp'),radial-gradient(ellipse at 50% 0,#303030,#222222 75%);
  background-size: cover,auto;
  background-position: center;
}

.podium-row,
.podium-row.place-1,
.podium-row.place-2,
.podium-row.place-3 {
  background-blend-mode: screen,normal;
}

.teo-avatar.is-incognito {
  position: relative;
  isolation: isolate;
  background-image: none;
  background-color: #141414;
  overflow: hidden;
}

.teo-avatar.is-incognito::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('teo-incognito-v74-opt79.webp') center/100% 100% no-repeat;
  opacity: .42;
  pointer-events: none;
  border-radius: inherit;
}

#rules,
#rankingDialog,
#shareDialog,
.paused .pause-card,
.pause-confirm-dialog {
  isolation: isolate;
}

#rules::before,
#rankingDialog::before,
#shareDialog::before,
.paused .pause-card::before,
.pause-confirm-dialog::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url('street-texture-v73-opt79.webp') center/cover no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ranking-heading h3::before {
  content: none;
  display: none;
}

#rankingDialog {
  padding-top: 24px;
}

.place-1::before {
  top: -40px;
  filter: none;
  background: #facd00;
  -webkit-mask: url('street-crown-v73-opt79.png') center/contain no-repeat;
  mask: url('street-crown-v73-opt79.png') center/contain no-repeat;
}

.previous-winner>.previous-avatar {
  background-repeat: no-repeat;
}

@media (max-height:650px) {
  #rankingDialog {
    padding-top: 20px;
  }

}

.ranking-dialog.ranking-entry-mode {
  padding-top: 28px;
}

#rules::before,
#rankingDialog::before,
#shareDialog::before,
.paused .pause-card::before,
.pause-confirm-dialog::before {
  opacity: .16;
}

.previous-winner>.previous-avatar {
  background-image: url('teo-champions-v112.webp?v=top-v4-20261014');
  background-size: 300% 100%;
  background-position: var(--champion-x,0%) center;
}

.podium-row .podium-medal {
  display: block;
  object-fit: contain;
  width: 36px;
  height: 43px;
  min-height: 43px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.podium-row.place-1 .podium-medal {
  width: 40px;
  height: 48px;
  min-height: 48px;
}

.podium-row.is-empty .podium-medal {
  opacity: .65;
}

@media (max-height:650px) {
  .podium-row .podium-medal {
    width: 32px;
    height: 38px;
    min-height: 38px;
  }

  .podium-row.place-1 .podium-medal {
    width: 36px;
    height: 43px;
    min-height: 43px;
  }

}

#rules,
#rankingDialog,
#shareDialog,
.paused .pause-card,
.pause-confirm-dialog {
  background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url('modal-background-v79.webp') center/cover no-repeat;
  background-color: #000;
  background-blend-mode: normal;
}

#rules::before,
#rankingDialog::before,
#shareDialog::before,
.paused .pause-card::before,
.pause-confirm-dialog::before {
  content: none;
  display: none;
}

.previous-winner {
  background: transparent url('winner-background-v79.webp') center/100% 100% no-repeat;
  background-blend-mode: normal;
  border: 0;
  box-shadow: none;
}

.previous-winner::before,
.previous-winner::after {
  content: none;
  display: none;
}

#rules,
#rankingDialog,
#shareDialog,
.paused .pause-card,
.pause-confirm-dialog {
  border-color: #191919;
  box-shadow: inset 0 0 0 1px #ffffff03,0 24px 80px #000b;
}

.previous-winner {
  align-items: center;
  min-height: 94px;
  padding: 16px 17px;
  gap: 12px;
}

.previous-winner>.previous-winner-copy {
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  align-content: center;
}

.previous-winner-copy small {
  grid-column: 1;
  grid-row: 1;
  font: 700 11px/1.25 'DM Sans',Arial,sans-serif;
  color: #ffb3bf;
  align-self: end;
}

.previous-winner-copy strong {
  grid-column: 1;
  grid-row: 2;
  font-size: 28px;
  line-height: 1.05;
  align-self: start;
}

.previous-winner-copy>#previousWinnerScore {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  justify-self: end;
  padding: 9px 8px;
  color: #fff;
  font: 900 25px/1 'Barlow Condensed',Impact,sans-serif;
  background: #110005b3;
  border: 1px solid #a51931;
  border-radius: 7px;
  white-space: nowrap;
}

@media (max-width:360px) {
  .previous-winner {
    padding: 15px 12px;
    gap: 9px;
  }

  .previous-winner-copy strong {
    font-size: 24px;
  }

  .previous-winner-copy>#previousWinnerScore {
    font-size: 22px;
    padding: 8px 6px;
  }

}

#rankingDialog .ranking-qualify #saveRanking {
  display: block;
  background: #e1001e;
  background-image: none;
  border: 1px solid #e1001e;
  color: #fff;
  border-radius: 7px;
  font: 700 13px/1.2 'DM Sans',Arial,sans-serif;
  box-shadow: none;
}

#rankingDialog .ranking-qualify #saveRanking:disabled {
  opacity: .6;
}

#rankingDialog .ranking-qualify #saveRanking:hover:not(:disabled) {
  background: #c9001b;
}

#rankingDialog.ranking-entry-mode .ranking-qualify>strong {
  display: block;
  font-size: 34px;
  line-height: 1.05;
}

#rankingDialog.ranking-entry-mode #rankingPrompt {
  max-width: none;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 20px;
}

#rankingDialog #rankingContactPrivacy {
  margin: 0;
  padding: 0 6px;
  color: #929292;
  font: 500 10px/1.5 'DM Sans',Arial,sans-serif;
  text-align: center;
}

#rankingDialog #rankingContactPrivacy[hidden] {
  display: none;
}

#rankingDialog .ranking-qualify #saveRanking {
  width: min(220px,100%);
  justify-self: center;
  margin: 2px auto 0;
  min-height: 46px;
  padding: 12px 20px;
}

.paused .pause-card #pauseEnd {
  border: 1px solid #7a1726;
  width: min(220px,100%);
}

.finished .result-actions #exitResult {
  background: #151515;
  border: 1px solid #303030;
  color: #bbb;
  width: min(220px,100%);
  min-height: 40px;
}

.finished .result-actions #exitResult:hover {
  background: #202020;
  color: #fff;
}

.paused .pause-card #pauseEnd {
  background: #151515;
  border-color: #303030;
  color: #bbb;
  min-height: 40px;
}

.paused .pause-card #pauseEnd:hover {
  background: #202020;
  border-color: #303030;
  color: #fff;
}

#rankingDialog #rankingStatus:empty {
  display: none;
}

#rankingDialog #rankingStatus {
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

#rankingDialog #retryRanking[hidden] {
  display: none;
}

#updateRankingData {
  display: block;
  width: min(220px,100%);
  margin: 12px auto 0;
  padding: 10px 14px;
  min-height: 40px;
  border: 1px solid #303030;
  border-radius: 7px;
  background: #151515;
  color: #bbb;
  font: 700 11px 'DM Sans',Arial,sans-serif;
}

#updateRankingData:hover {
  background: #202020;
  color: #fff;
}

#updateRankingData:disabled {
  opacity: .6;
}

#updateRankingData[hidden],
.ranking-entry-mode #updateRankingData {
  display: none;
}

.ranking-edit-choice {
  padding: 20px 0 4px;
  text-align: center;
}

.ranking-edit-choice>strong {
  display: block;
  font: italic 900 34px/1.05 'Barlow Condensed',Impact,sans-serif;
  color: #fff;
}

.ranking-edit-choice>p {
  margin: 18px 0;
  color: #c7c7c7;
  font-size: 13px;
}

.ranking-edit-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ranking-edit-options button {
  width: min(220px,100%);
  min-height: 46px;
  padding: 12px 20px;
  background: #e1001e;
  border: 1px solid #e1001e;
  border-radius: 7px;
  color: #fff;
  font: 700 13px 'DM Sans',Arial,sans-serif;
}

#cancelRankingEdit {
  display: block;
  width: min(220px,100%);
  margin: 14px auto 0;
  padding: 10px;
  border: 1px solid #303030;
  border-radius: 7px;
  background: #151515;
  color: #bbb;
  font: 700 11px 'DM Sans',Arial,sans-serif;
  min-height: 40px;
}

#rankingEditChoice[hidden],
#cancelRankingEdit[hidden] {
  display: none;
}

#rankingDialog .ranking-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  margin: 12px 0 0;
  grid-column: 1/-1;
}

#rankingDialog .ranking-actions>#updateRankingData {
  width: auto;
  max-width: 220px;
  min-height: 40px;
  margin: 0;
  padding: 10px 12px;
  font-size: 10px;
  white-space: nowrap;
}

#rankingDialog #rankingNoticeButton {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #5b3438;
  border-radius: 7px;
  background: #211316;
  color: #fff;
  font: 700 10px 'DM Sans',Arial,sans-serif;
  white-space: nowrap;
}

#rankingDialog #rankingNoticeButton:hover {
  background: #32171c;
}

#rankingDialog #rankingNoticeButton[hidden],
#rankingDialog #rankingNotice[hidden] {
  display: none;
}

#rankingDialog .ranking-notice {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 160px;
  overflow: auto;
  box-sizing: border-box;
  padding: 16px 32px 14px 14px;
  border: 1px solid #3c282b;
  border-radius: 10px;
  background: #151012;
  box-shadow: 0 8px 28px #000b;
  text-align: center;
}

#rankingDialog #rankingNotice #rankingStatus {
  display: block;
  height: auto;
  min-height: 0;
  margin: 0;
  color: #eee;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0;
}

#rankingDialog #closeRankingNotice {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #bbb;
  font-size: 22px;
}

#rankingDialog #rankingNotice #retryRanking {
  width: auto;
  min-height: 32px;
  margin: 10px auto 0;
  padding: 7px 14px;
  border: 1px solid #71343b;
  border-radius: 5px;
  background: #2b1519;
  color: #fff;
  font: 700 10px 'DM Sans',Arial,sans-serif;
}

#menuDialog .menu-swipe {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: calc(5.6% - 15px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 30px;
  height: 30px;
  width: auto;
  margin: 0;
  padding: 4px 12px;
  box-sizing: border-box;
  border: 1px solid #555;
  border-radius: 18px;
  background: #0b0b0bcc;
  color: #fff;
  box-shadow: 0 3px 12px #0008;
  pointer-events: auto;
  cursor: pointer;
  font-family: 'DM Sans',Arial,sans-serif;
}

#menuDialog .menu-swipe span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

#menuDialog .menu-swipe b {
  margin: 0;
  font-size: 22px;
  line-height: 1;
  color: #555;
}

#menuDialog .menu-swipe b.available {
  color: #ff123b;
}

#menuDialog .menu-swipe:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

#gameTips .record-share {
  display: inline;
  padding: 4px 2px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: #ff123b;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-underline-offset: 3px;
  box-shadow: none;
}

#gameTips .record-share:focus-visible {
  outline: 2px solid #ff123b;
  outline-offset: 3px;
}

#gameTips,
#resultOrderBar {
  box-sizing: border-box;
  min-height: calc(55px + max(12px,env(safe-area-inset-bottom)));
  height: auto;
  padding: 10px 14px max(12px,env(safe-area-inset-bottom));
}

#gameTips .record-share {
  min-height: 44px;
  margin-block: -8px;
}

#resultOrderBar #resultMenu {
  color: #ff123b;
  font-weight: 800;
}

#gameTips .record-share {
  text-decoration: none;
}

.podium-row .podium-copy {
  min-width: 0;
  height: 26px;
  flex: 0 0 26px;
}

.podium-row .podium-copy strong {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 26px;
  min-height: 26px;
  line-height: 26px;
  -webkit-line-clamp: unset;
  max-width: 100%;
}

#previousWinnerName {
  display: block;
  min-width: 0;
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

#rankingNameLimit,
#shareNameLimit {
  display: block;
  color: #999;
  font: 700 11px/1.4 'DM Sans',sans-serif;
  margin-top: 6px;
}

.previous-winner-copy small {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: .5px;
}

@media (max-width:420px) {
  .previous-winner-copy small {
    font-size: 9px;
    letter-spacing: 0;
  }

}

@media (max-width:360px) {
  .previous-winner-copy small {
    font-size: 8px;
  }

}

.game-load-status {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 16px;
  right: 16px;
  margin: 0;
  padding: 9px 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  background: rgba(0,0,0,.9);
  border: 1px solid #610b18;
  border-radius: 10px;
  pointer-events: none;
}


/* Aviso de cierre: el reloj existente conserva el conteo. */
.clock.urgent {
  position: relative;
  z-index: 6;
  transform-origin: center;
}

/* Zona única de avisos de la partida. */
.game-notice {
  position: absolute;
  z-index: 3;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(270px,calc(100% - 32px));
  text-align: center;
  pointer-events: none;
}
.game-notice strong {
  display: block;
  color: var(--notice-color,#fdfdfd);
  font: 900 italic 24px/1.05 'Barlow Condensed',Impact,sans-serif;
  text-shadow: 0 2px 2px #000,0 0 8px #000,0 0 16px #000;
}
.game-load-status:not([hidden]) ~ .game-notice {top: max(12%,74px);}

.game-notice[data-tone="buffalo"] {--notice-color: #ff861e;}
.game-notice[data-tone="streak"] {--notice-color: #006efd;}
.game-notice[data-tone="danger"] {--notice-color: #e1001e;}

/* FIN permanece visible hasta mostrar el resultado. */
.countdown.finish-count {animation: finish-arrive .18s ease-out both;}
@keyframes finish-arrive {
  from {opacity: 0;transform: scale(1.08);}
  to {opacity: 1;transform: scale(1);}
}
@media (prefers-reduced-motion:reduce) {
  .countdown.finish-count {animation: none;opacity: 1;transform: none;}
}

/* Resumen compacto y duración Buffalo, v155. */
.buffalo-timer {display:block;width:140px;height:4px;margin:8px auto 0;border-radius:4px;background:rgba(255,134,30,.2);overflow:hidden;box-shadow:0 1px 5px #000;}
.buffalo-timer i {display:block;height:100%;width:100%;background:#ff861e;transform-origin:left center;}
.buffalo-timer[hidden] {display:none;}
/* Ficha lateral compacta: puntaje, estadísticas y acceso al ranking. */
.finished .results.result-card {display:block;width:var(--action-width);min-height:0;padding:0;margin:0 0 12px;background:rgba(22,22,22,.9);border:1px solid #303030;border-radius:12px;overflow:hidden;flex:none;}
.result-card-main {position:relative;display:grid;grid-template-columns:34% minmax(0,1fr);align-items:center;gap:12px;padding:6px 14px;}
.result-card-score {margin:0;padding-right:12px;border-right:1px solid #303030;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.finished .results .result-card-score span {display:block;color:#bbb;font:700 10px/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.6px;}
.result-card-score strong {display:block;color:#fdfdfd;font:900 52px/1 'Barlow Condensed',Impact,sans-serif;margin-top:2px;letter-spacing:0;}
.result-card-stats {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:5px;margin:0;text-align:left;}
.result-card-stats dt {color:#aaa;font:700 11px/1.2 'DM Sans',Arial,sans-serif;white-space:nowrap;}
.result-card-stats dd {margin:0;color:#fdfdfd;font:700 12px/1.2 'DM Sans',Arial,sans-serif;text-align:right;}
.result-card-ranking {display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:30px;padding:5px 10px;margin:0;border:0;border-top:1px solid #303030;border-radius:0;background:#171717;color:#fdfdfd;text-transform:none;letter-spacing:0;box-shadow:none;font:700 11px/1.3 'DM Sans',Arial,sans-serif;}
.finished .results .result-card-ranking span {color:inherit;font:inherit;}
.result-card-ranking:hover {background:#222;}
.result-card-ranking:focus-visible {outline:2px solid #e1001e;outline-offset:-3px;}

@media(max-width:360px){.result-card-main{gap:10px;padding:6px 12px;}.result-card-score strong{font-size:48px;}.result-card-score{padding-right:10px;}}
@media(max-height:650px){.finished #overlayText{margin-bottom:5px;}.finished .mascot{max-height:110px;}.finished .results.result-card{margin-bottom:8px;}}

/* Ancho común de acciones en inicio, resultado y pausa. */
#gameShell {--action-width:min(280px,82vw);}
.idle #start,.idle .intro-actions,.finished #start,.finished .result-actions {width:var(--action-width);max-width:100%;box-sizing:border-box;align-self:center;}
.finished .result-actions .order,.finished .result-actions #exitResult {width:100%;max-width:100%;box-sizing:border-box;justify-self:stretch;}
.paused .pause-card #start,.paused .pause-card #pauseRestart,.paused .pause-card #pauseEnd {width:min(280px,100%);max-width:100%;box-sizing:border-box;align-self:center;}

/* Acceso al ranking visible, con respuesta al pulsar. */
.finished .result-actions #exitResult {width:85%;justify-self:center;}
.result-card-ranking {display:flex;justify-content:center;align-items:center;gap:7px;padding-left:12px;padding-right:12px;transition:background-color .15s ease;cursor:pointer;}
.finished .results .result-card-ranking .ranking-chevron {color:#e1001e;font:700 22px/1 Arial,sans-serif;transition:transform .15s ease;}
.result-card-ranking:hover {background:#23191b;}
.result-card-ranking:active {background:#381a20;}
@media(hover:hover){.result-card-ranking:hover .ranking-chevron{transform:translateX(2px);}}
@media(prefers-reduced-motion:reduce){.result-card-ranking,.finished .results .result-card-ranking .ranking-chevron{transition:none;}.result-card-ranking:hover .ranking-chevron{transform:none;}}

/* Divisor extendido y mensajes del ranking en una sola línea. */
.result-card-score {position:relative;border-right:0;}
.result-card-main::after {content:'';position:absolute;left:calc(34% + 4.48px);top:50%;height:calc(100% - 12px);width:1px;background:#303030;transform:translateY(-50%);pointer-events:none;}
.result-card-score strong {transform:translateY(6px);}
.finished .results .result-card-ranking #resultTopGap {white-space:nowrap;letter-spacing:0;min-width:0;}

/* Mismos botones principales y acción de terminar más angosta. */
.idle #start,.finished #start {width:var(--action-width);min-height:52px;padding:15px 20px;border:1px solid #f10019;border-radius:3px;color:#fdfdfd;background:#e1001e;font:700 16px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.4px;}
.paused .pause-card #pauseEnd {width:min(238px,85%);align-self:center;justify-self:center;margin-left:auto;margin-right:auto;}
@media(max-width:360px){.result-card-main::after{left:calc(34% + 3.84px);}}

/* Flecha junto al mensaje; etiqueta con margen superior moderado. */
.finished .results .result-card-score span {transform:translateY(3px);}
.finished .results .result-card-ranking .ranking-chevron {flex:none;}

/* Puntaje principal: separación mínima y brillo suave. */
.result-card-score strong {letter-spacing:.7px;text-shadow:0 0 10px rgba(255,255,255,.18),0 0 22px rgba(225,0,30,.16);}

/* Récord personal: misma alineación y divisor que la barra final. */
#gameTips #tipText.record-layout {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;}
#gameTips .record-message {color:#c7c7c7;font:700 13px/1.4 'DM Sans',Arial,sans-serif;}
#gameTips .record-points {font:inherit;font-weight:900;white-space:nowrap;letter-spacing:normal;color:#ff123b;border:0;padding:0;margin:0;}
#gameTips .record-divider {display:inline-flex;align-items:center;justify-content:center;flex:none;color:#666;font-size:14px;line-height:1;}
#gameTips .record-share {display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:44px;width:auto;padding:8px 0;margin:0;border:0;border-radius:6px;background:transparent;color:#ff123b;font:800 13px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:0;}

/* Reglas compactas con una explicación independiente de las rachas. */
#rules .rules-bag-guide {padding-top:10px;}
#rules .rules-play-hint {margin:4px 0 20px;color:#c7c7c7;text-align:center;font:500 12px/1.5 'DM Sans',Arial,sans-serif;}
#rules .rules-play-hint strong {color:#fdfdfd;font-weight:700;}
#rules .rules-bag-items {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0;}
#rules .rules-bag-items>div {display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-align:center;}
#rules .rules-bag-items img {width:min(56px,100%);height:54px;object-fit:contain;}
#rules .rules-bag-items span {color:#c7c7c7;font:700 11px/1.4 'DM Sans',Arial,sans-serif;}
#rules .rules-bag-items strong {font:900 30px/1.1 'Barlow Condensed',Impact,sans-serif;color:#fdfdfd;}
#rules .rules-bag-items .rules-bag-burnt strong {color:#ff123b;}
#rules .rules-bag-power {margin:18px 0;font:500 12px/1.5 'DM Sans',Arial,sans-serif;color:#c7c7c7;text-align:center;}
#rules .rules-bag-power strong {color:#fdfdfd;font-weight:700;}
#rules .rules-bag-items>div:nth-child(1) strong {color:#00FC3C;}
#rules .rules-bag-items>div:nth-child(2) strong {color:#FACD00;}
#rules .rules-bag-items>div:nth-child(3) strong {color:#FF861E;}
#rules .rules-bag-items .rules-bag-burnt strong {color:#E1001E;}
#rules .rules-compact-columns {display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:16px;border-top:1px solid #ffffff20;}
#rules .rules-compact-columns h4 {margin:0 0 14px;color:#fdfdfd;font:700 11px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.5px;}
#rules .rules-streak-guide {min-width:0;}
#rules .rules-streak-bonuses {display:grid;gap:12px;}
#rules .rules-streak-bonuses p {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:3px 6px;margin:0;color:#c7c7c7;font:500 12px/1.5 'DM Sans',Arial,sans-serif;}
#rules .rules-streak-bonuses strong {color:#006EFD;font-weight:700;white-space:nowrap;}
#rules .rules-streak-explanation {margin:16px 0 0;color:#c7c7c7;font:500 11px/1.6 'DM Sans',Arial,sans-serif;}
#rules .rules-short-notes {min-width:0;padding-left:16px;border-left:1px solid #ffffff20;}
#rules .rules-short-notes p {margin:0 0 12px;color:#c7c7c7;font:500 11px/1.6 'DM Sans',Arial,sans-serif;}
#rules .rules-short-notes p:last-child {margin-bottom:0;}
#rules .rules-short-notes strong {color:#fdfdfd;font-weight:700;}
#rules .rules-heading {margin-bottom:6px;}
@media(max-width:360px){#rules .rules-bag-items{gap:4px;}#rules .rules-compact-columns{gap:12px;}#rules .rules-short-notes{padding-left:12px;}#rules .rules-streak-bonuses p{font-size:11px;}}
@media(max-height:650px){#rules .rules-bag-guide{padding-top:6px;}#rules .rules-play-hint{margin-bottom:14px;}#rules .rules-bag-items img{height:44px;}#rules .rules-bag-power{margin:12px 0;}#rules .rules-compact-columns{padding-top:12px;}}

/* Calendario de competencias. */


/* Premios del cierre vigente */
#rankingDialog #rankingPrizes {width:auto;min-height:40px;margin:0;padding:10px 14px;border:1px solid #e1001e;border-radius:7px;background:#e1001e;color:#fff;font:700 10px 'DM Sans',Arial,sans-serif;white-space:nowrap;}
#prizesDialog {position:fixed;width:min(390px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px 20px;border:1px solid #686868;border-radius:18px;color:#fff;background:linear-gradient(#000b,#000b),url('modal-background-v79.webp') center/cover;box-sizing:border-box;}
#prizesDialog::backdrop {background:#0007;backdrop-filter:blur(8px);}
#prizesDialog .rules-heading {position:relative;text-align:center;}
#prizesDialog .rules-heading h3 {margin:0 0 30px;}
#prizesDialog #closePrizes {position:absolute;top:0;right:0;}
#prizesDescription {margin:0 0 20px;text-align:center;font:400 13px/1.5 'DM Sans',Arial,sans-serif;color:#ccc;}
.prizes-list {display:grid;gap:10px;}
.prize-row {display:flex;align-items:center;gap:14px;padding:16px 14px;border:1px solid #414141;border-radius:10px;background:#151515cc;}
.prize-position {flex:0 0 40px;width:40px;height:48px;object-fit:contain;}
.prize-copy {min-width:0;display:grid;gap:5px;}
.prize-copy small {font:700 10px/1.3 'DM Sans',Arial,sans-serif;color:#aaa;letter-spacing:1px;}
.prize-copy strong {font:600 15px/1.4 'DM Sans',Arial,sans-serif;overflow-wrap:anywhere;}
#prizesStatus {font:400 13px/1.5 'DM Sans',Arial,sans-serif;text-align:center;color:#ccc;margin:14px 0 0;}
#prizesStatus:empty {display:none;}
#retryPrizes {display:block;margin:16px auto 0;}
#retryPrizes[hidden] {display:none;}

/* Premios con los tonos y números del podio. */
.prize-place-1 {--prize-metal:#facd00;}
.prize-place-2 {--prize-metal:#d2d2d2;}
.prize-place-3 {--prize-metal:#ce8656;}
.prize-row {border-color:var(--prize-metal);background:linear-gradient(115deg,color-mix(in srgb,var(--prize-metal) 13%,#111),#151515e6 75%);box-shadow:inset 0 1px #ffffff14;}
.prize-copy strong {color:var(--prize-metal);}
#rankingDialog.ranking-entry-mode #rankingActions {display:none;}
#rankingDialog #rankingPrizes:hover {background:#bd0019;}

/* Sin rebordes de preselección en pantallas ni modales. */
*:focus, *:focus-visible {outline:none !important;}