.goal{left:15%;right:15%;top:12.5%;height:9%;padding:.5% 8%;border:clamp(3px,.45vw,5px) solid #3d83dd;border-radius:clamp(18px,2.2vw,28px);background:linear-gradient(180deg,#123c84 0%,#071a4b 70%);box-shadow:0 .65vw 0 #02091f,0 1.1vw 2vw #0008,inset 0 .25vw .4vw #8fc8ff55;color:#fff;font-size:clamp(.9rem,2.8vw,1.85rem);line-height:1.05;text-shadow:0 3px 0 #001132;letter-spacing:.01em}
.goal::before,.goal::after{position:absolute;top:50%;translate:0 -50%;color:#ffd72d;font-size:clamp(1rem,3vw,2rem);filter:drop-shadow(0 2px 0 #6f3900)}
.goal::before{content:"★";left:4%}.goal::after{content:"★";right:4%}.goal strong{color:#ffe236;text-shadow:0 3px 0 #7a3d00}
.time-value,.move-value{bottom:2.9%;height:12%;display:flex;flex-direction:column;justify-content:center;gap:1%;border:clamp(2px,.32vw,4px) solid #2c68ad;border-radius:clamp(8px,1.2vw,14px);background:linear-gradient(180deg,#0d3878,#061c4d);box-shadow:inset 0 .25vw .45vw #7cb7ff33,0 .35vw 0 #020c28;color:#fff;font-size:clamp(1.05rem,3.25vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #00102e}
.time-value{left:64.8%;width:15.8%}.move-value{left:81.8%;width:15.5%}
.time-value::before,.move-value::before{font-size:clamp(.58rem,1.35vw,.95rem);line-height:1;color:#b9d9ff;letter-spacing:.12em;text-shadow:none}
.time-value::before{content:"TIME"}.move-value::before{content:"MOVES"}
@media(max-width:650px){.goal{left:12%;right:12%;padding-inline:9%;font-size:clamp(.8rem,4vw,1.35rem)}.time-value,.move-value{border-width:2px}}
html, body {
  margin: 0;
  overflow: hidden;
}
/* Keep child crossing-time numbers black on all devices */
.piece .badge,
.piece.selected .badge {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}