/* A red-and-white game UI, with the selected island still visible beside it. */
body{--yellow:#ff4656}
#menu{width:min(650px,calc(49vw - 28px));gap:16px}
#menu .home-heading{width:min(450px,100%);max-width:100%;align-self:center}
#menu h1 img{image-rendering:auto;filter:drop-shadow(0 8px 0 #050b1466)}
#menu .home-play{border:1px solid #687587;background:#111a26ee;box-shadow:0 8px 0 #080d17b3}
#menu .home-panel-title{background:#263343;border-bottom:3px solid #ff3348;padding:12px 20px}
#menu .home-panel-title>span{color:#fff;font-size:27px;letter-spacing:2px}
#menu .home-panel-title small{color:#b2bfce;font-size:17px}
#menu .home-columns{grid-template-columns:1fr 1fr}
#menu .match-setup,#menu .menu-actions{padding:20px}
#menu .match-setup{border-color:#334255}
#menu label,#menu .name-label{color:#aebfce;font-size:18px;letter-spacing:1px}
#menu select,#menu input{background:#0c1420;border:1px solid #596d82;color:#fff;min-height:46px;box-shadow:inset 0 -3px #060b13;font-size:22px}
#menu select:focus-visible,#menu input:focus-visible{outline-color:#ff6572;border-color:#ff6572}
#menu .primary{background:#f52c43;border:2px solid #ff8490;color:#fff;box-shadow:inset 0 -5px #a8142a,0 4px 0 #070d17;padding:13px 16px;font-size:29px;letter-spacing:3px}
#menu .primary:hover{background:#ff495d}
#menu .secondary{background:#28384a;color:#fff;border:1px solid #69829a;box-shadow:inset 0 -3px #152031,0 3px 0 #070d17}
#menu .secondary:hover{background:#3b5169}
#menu .mode-description strong,#menu .online-heading strong{color:#fff;font-size:24px}
#menu .mode-description span,#menu .online-heading span,#menu #match-description{color:#aebfce;font-size:18px;line-height:1.2}
#menu .practice-hint{font-size:16px;color:#aebfce}
#menu .online-heading{margin-top:24px;border-color:#334255}
#menu #menu-status{background:#0b131e;border-color:#334255;color:#aebfce;font-size:17px}
body:not(.playing) header .brand{font-size:0!important}
.brand .brand-mark{width:94px;height:42px;object-fit:contain;image-rendering:auto}
body:not(.playing) header button{border:1px solid #75889b;background:#142031dd;box-shadow:0 3px 0 #070d17;color:#eef5ff}
body:not(.playing) #vignette{background:linear-gradient(90deg,#08101de0,#08101d50 47%,#08101d00 76%)}
#map-showcase{position:fixed;right:5vw;bottom:8vh;max-width:39vw;text-align:right;pointer-events:none;text-shadow:0 3px 0 #08101d,0 2px 15px #08101d;font-family:BedwarsPixel,monospace;color:#fff}
#map-showcase span{display:block;font-size:19px;letter-spacing:3px;color:#d2deee}
#map-showcase strong{display:block;font-size:clamp(32px,3.6vw,62px);font-weight:400;line-height:1.05;margin-top:8px}
#map-showcase small{display:block;font-size:21px;margin-top:10px}
body.playing #map-showcase{display:none}
dialog:not(#layout-editor){border-color:#8092a6;background:#142031;color:#f4f7fc;box-shadow:0 10px 0 #060b13a6}
dialog:not(#layout-editor)::backdrop{background:#050c17cc}
#match-queue{width:min(500px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:25px;text-align:center;overflow:auto;font-family:BedwarsPixel,monospace;border:2px solid #70839a;border-top:4px solid #ff3b50;border-radius:0}
#match-queue .queue-logo{display:block;width:min(300px,85%);height:auto;margin:0 auto 4px}
#match-queue h2{font-size:36px;line-height:1;margin:18px 0 6px;letter-spacing:1px;color:#fff}
#queue-kind{font-size:18px;color:#fba6af;margin:8px 0}
#queue-details{font-size:21px;color:#bccbd9;line-height:1.2;margin:10px 0}
#queue-status{font-size:24px;color:#fff;margin:15px 0 7px}
#queue-clock{display:block;font-size:22px;color:#aebfd1;letter-spacing:3px}
#queue-progress{width:100%;height:6px;display:block;margin:16px 0;accent-color:#ff3b50}
#queue-cancel{min-height:46px;padding:9px 28px;background:#293e53;color:#fff;border:1px solid #8196ab;font:22px BedwarsPixel,monospace;border-radius:0}
#queue-cancel:hover{background:#3f5670}
.queue-scanner{height:112px;position:relative;width:180px;margin:18px auto 5px;perspective:400px}
.queue-platform{position:absolute;inset:12px 22px;border:2px solid #526980;transform:rotateX(52deg) rotateZ(45deg);background:repeating-linear-gradient(0deg,transparent 0 22px,#42566c40 22px 24px),repeating-linear-gradient(90deg,#152638 0 22px,#42566c40 22px 24px);box-shadow:7px 7px 0 #08111e}
.queue-platform::after{content:'';position:absolute;inset:-6px;border:2px solid #ff475d;animation:queue-scan 1.8s ease-out infinite}
.queue-cube{position:absolute;width:24px;height:24px;top:38px;background:#ff455a;border:2px solid #ffacb5;box-shadow:5px 5px 0 #ae192e;transform:rotate(-12deg);animation:queue-hop 1.3s ease-in-out infinite}
.queue-cube:nth-child(2){left:34px}.queue-cube:nth-child(3){left:78px;animation-delay:.18s;background:#f3f7ff;border-color:#fff;box-shadow:5px 5px 0 #9faec0}.queue-cube:nth-child(4){left:122px;animation-delay:.36s}
@keyframes queue-hop{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-22px) rotate(12deg)}}
@keyframes queue-scan{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.queue-cube,.queue-platform::after{animation:none}.queue-platform::after{opacity:.5}}
@media(max-width:1100px) and (min-width:651px){#menu .home-columns{grid-template-columns:1fr}#menu .match-setup{border-right:0;border-bottom:1px solid #334255}#menu .home-heading{width:min(340px,95%)}}
@media(max-width:650px){#menu{inset:30% 10px 28px;width:auto;gap:14px}#menu .home-heading{width:min(310px,86%)}#menu .home-columns{grid-template-columns:1fr}#menu .match-setup,#menu .menu-actions{padding:16px}#menu .match-setup{border-right:0;border-bottom:1px solid #334255}#map-showcase{right:18px;bottom:auto;top:85px;max-width:72vw}#map-showcase strong{font-size:30px}#map-showcase span,#map-showcase small{display:none}body:not(.playing) #vignette{background:linear-gradient(0deg,#08101dd9,#08101d25 80%)}.brand .brand-mark{width:74px;height:34px}}
@media(max-height:550px) and (min-width:651px){#menu .home-heading{width:240px}#map-showcase{bottom:7vh}#match-queue{padding:16px;display:grid;grid-template-columns:135px 1fr;gap:6px 16px;align-items:center}#match-queue:not([open]){display:none}#match-queue .queue-logo{grid-column:1;grid-row:1/3;width:135px}#match-queue .queue-scanner{grid-column:1;grid-row:3/6;transform:scale(.72);transform-origin:left center;width:135px;margin:0}#match-queue h2{font-size:29px;margin:6px 0}#match-queue #queue-kind,#match-queue #queue-details,#match-queue #queue-status{margin:4px 0}#queue-progress,#queue-cancel{grid-column:2}#queue-clock{grid-column:2}}
@media(max-width:650px){#menu .match-options{grid-template-columns:1fr 1fr;gap:10px}#menu .match-options label:last-child{grid-column:auto}#menu #match-description{font-size:16px;margin-top:8px}#menu .match-team-choice{margin-top:8px}#menu .home-heading{width:240px}#menu select{font-size:19px;min-width:0}}