:root {
  --prim-color: rgb(3, 165, 253); 
  --prim-bg: black;                     /* page background (and text on primary buttons) */
  --disabled-color: rgb(28, 74, 102);   /* darker prim-color for inputs that are locked */
  --error-color: rgb(230, 40, 40);      /* failed create, invalid input */
  --max-width: 1200px;                  /* widest the content column gets */

  --font-scale: 0.85;                 /* every font size below is multiplied by this */
  --font-xl: calc(clamp(40px, 6vw, 96px) * var(--font-scale));    /* hero / headings */
  --font-lg: calc(clamp(24px, 3.4vw, 54px) * var(--font-scale));  /* server name + label */
  --font-md: calc(clamp(16px, 2vw, 30px) * var(--font-scale));    /* inputs */
  --font-sm: calc(clamp(12px, 1.5vw, 22.5px) * var(--font-scale));  /* small text: always 0.75x --font-md */
}

html {
    scrollbar-width: none;
}

::selection {
    color: var(--prim-bg);
    background: white;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    background-color:var(--prim-bg);
    margin: 0;
}

form {
    margin: 0 30px;
    min-height: 100vh;
    border: solid 8px var(--prim-color);
    border-top-width: 0px;
    border-bottom-width: 0px;
}

div#content {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    min-height: 1600px;
    max-width: var(--max-width);
}

p#heading {
    color: var(--prim-color);
      font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: var(--font-xl);

}

div#z {
    display: flex;
    flex-wrap: wrap;
}

div#left {
    flex: 1 1 320px;
    min-width: 0;
    display: block;
}

div#distances {
    display: flex;
    flex-wrap: wrap;
    column-gap: 60px;
}

/* side by side while each gets ~200px (labels wrap inside), stacked below that */
div#distances > div.option {
    flex: 1 1 200px;
}

div.option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

div.option label {
    color: grey;
    font-family: "Silkscreen";
    font-size: var(--font-md);
}

select {
    appearance: none;
    background-color: #000A;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 0.65em) 55%, calc(100% - 0.35em) 55%;
    background-size: 0.3em 0.3em;
    background-repeat: no-repeat;
    border: 0 solid var(--prim-color);
    border-bottom-width: 4px;
    border-radius: 2px;
    padding: 0 1.4em 0 4px;
    color: var(--prim-color);
    font-family: "Silkscreen";
    font-size: var(--font-md);
    cursor: pointer;
}

select option {
    background: var(--prim-bg);
}

div#motdrow {
    margin-top: 30px;
}

input#smotd {
    flex: 1; 
    min-width: 0;
}

div#left input[type="number"] {
    width: 5ch;
    text-align: right;
    appearance: textfield;
    -moz-appearance: textfield;
}

div#left input[type="number"]::-webkit-inner-spin-button,
div#left input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.toggle {
    appearance: none;
    position: relative;
    width: 2.4em;
    height: 1.2em;
    margin: 0;
    border: 3px solid grey;     /* blue when on; fades with the knob (input transition below) */
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

input.toggle:checked {
    border-color: var(--prim-color);
}

input.toggle::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.2em - 10px);
    height: calc(1.2em - 10px);
    background: grey;
    transition: transform 0.15s, background 0.15s;
}

input.toggle:checked::before {
    background: var(--prim-color);
    transform: translateX(1.2em);
}


div#right {
    flex: none;
    width: 40%;
    min-width: max-content;     /* never narrower than the map + its margin */
    position:relative;
}

div#right canvas {
    display: block;
    flex: none;                 /* keep its real size; #mapframe crops it */
}

div#mapframe {
    height: 350px;
    /*overflow: hidden;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 371px;
}

div#mapbox {
    display: inline-block;
    margin-left: 30px;          /* 30px right from the left edge of the parent */
    margin-top: 20px;           /* 20px down from the top edge of the parent */
}

div#seedbox {
    position: relative;
    z-index: 2;                 /* in front of the canvas */
    width: 0;                   /* don't widen #mapbox... */
    min-width: 100%;            /* ...but fill it, i.e. match the canvas */
}

div#seedbox input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 48px;
}

button.reroll {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: none;
    color: var(--prim-color);
    cursor: pointer;
}

button.reroll svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.2s;
}

button.reroll:not(:disabled):hover svg {
    transform: rotate(90deg);
}

section#hero {
    position: relative;         /* anchors the scroll hint to its bottom */
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

p#subheading {
    margin: 0;
    color: var(--prim-color);
    font-family: "Bitcount Grid Double", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: calc(var(--font-xl) / var(--font-scale));   /* the hero keeps its full size */

}
input {
    background-color: #000A;
    border: 0px solid var(--prim-color);
    color: var(--prim-color); 
    font-weight: 400;
    font-size: var(--font-md);
    border-radius: 2px;
    font-family: "Silkscreen";
    border-bottom-width:4px;
    
}

canvas {
    position: relative;
    z-index: 1;             /* above #content so it can be dragged */
    image-rendering: pixelated;
}
input {
    transition: box-shadow 0.15s, border-color 0.15s;
}

input:focus, select:focus {
    outline: none;
}

select:focus-visible, input.toggle:focus-visible {
    border-color: white;
    box-shadow: 0 12px 12px -8px var(--prim-color);
}

input:focus-visible {
    border-color: white;
    /* pushed down with a negative spread so the glow only shows under the input */
    box-shadow: 0 12px 12px -8px var(--prim-color);
}

button.reroll:focus {
    outline: none;
}

button.reroll:focus-visible svg {
    filter: drop-shadow(0 0 4px var(--prim-color));
    color: white;
}

label#snamelabel {
    display: block;
    width: 100%;                /* same box as input#sname so their left edges match */
    max-width: var(--max-width);
    margin: 0 auto 6px;
    padding: 0 4px;
    box-sizing: border-box;
    color: grey;
    font-family: "Silkscreen";
    font-size: var(--font-lg);
}

span#optionsheading{

    display: block;
    width: 100%;                /* same box as input#sname so their left edges match */
    max-width: var(--max-width);
    margin: 0 auto 6px;
    margin-top:100px;
    padding: 0 4px;
    box-sizing: border-box;
    color: grey;
    font-family: "Silkscreen";
    font-size: var(--font-lg);
}

div#namebox {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

input#sname {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 calc(0.9em + 20px) 0 4px;   /* right padding keeps text clear of the reroll icon */
    font-size: var(--font-lg);
}

button#rname {
    font-size: var(--font-lg);  /* icon scales with the name text */
    width: 0.9em;
    height: 0.9em;
}

label#seedlabel {
    display: block;
    margin-top: 6px;
    padding: 0 2px;             /* same as the input's text inset, so they line up */
    color: grey;
    font-family: "Silkscreen";
    font-size: var(--font-md);  /* same size as the seed text */
}

span.optlabel {
    display: flex;
    align-items: center;
    gap: 8px;
}

span.info {
    position: relative;
    display: inline-flex;
    width: calc(var(--font-md) * 0.9);
    height: calc(var(--font-md) * 0.9);
    color: grey;
    cursor: help;
}

span.info svg {
    width: 100%;
    height: 100%;
}

span.info:hover, span.info:focus-visible {
    color: var(--prim-color);
    outline: none;
}

span.tip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;                /* above the map canvas */
    width: max-content;
    max-width: min(400px, calc(100vw - 32px - 34px));     /* 34px: padding + border */
    padding: 10px 14px;
    background: var(--prim-bg);
    border: 3px solid var(--prim-color);
    border-radius: 2px;
    color: white;
    font-family: "Nunito", sans-serif;
    font-size: calc(var(--font-md) * 0.8);
    line-height: 1.35;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
}

span.tip.wide {
    max-width: min(800px, calc(100vw - 32px - 34px));      /* long text: twice as wide */
}

span.info:hover span.tip, span.info:focus-visible span.tip {
    visibility: visible;
    opacity: 1;
}

select#sworldtype {
    display: block;
    width: 0;                   /* don't widen #mapbox... */
    min-width: 100%;            /* ...but fill it, i.e. match the canvas */
    box-sizing: border-box;
    margin-top: 16px;
}

label#worldtypelabel {
    display: block;
    margin-top: 6px;
    padding: 0 4px;             /* same as the select's text inset, so they line up */
    color: grey;
    font-family: "Silkscreen";
    font-size: var(--font-md);
}

input:disabled, select:disabled {
    color: var(--disabled-color);
    border-color: var(--disabled-color);
    cursor: not-allowed;
}

button.reroll:disabled {
    color: var(--disabled-color);
    cursor: not-allowed;
}

div#submitrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-bottom: 60px;
}

div#turnstile {
    min-height: 65px;               /* the widget's height, so the page doesn't jump when it loads */
}

div#turnstile[hidden] {
    display: none;
}

span#createerror {
    color: var(--error-color);
    font-family: "Silkscreen";
    font-size: var(--font-sm);
    line-height: 1.4;
    text-align: center;
    max-width: 40ch;
    overflow-wrap: anywhere;   /* long words in server errors still wrap inside the column */
}

/* Top of the page, inside the form's side borders: absolutely placed in #hero (the form's full
   inner width), so left: 0 and right: 0 put both ends right against the borders */
header#topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

span#brand {
    padding-left: 0.5em;
    color: white;                   /* the MC */
    font-family: "Silkscreen";
    font-size: calc(var(--font-lg) * 0.75);
}

span#brand .prim {
    color: var(--prim-color);
}

/* The Dashboard button looks like Create Server (the rules below cover both) */
button#createbtn, button#dashbtn {
    padding: 0.4em 1.6em;
    border: none;
    border-radius: 2px;
    background: var(--prim-color);
    color: var(--prim-bg);
    font-family: "Silkscreen";
    font-size: calc(var(--font-lg) * 0.75);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

button#createbtn:hover {
    background: rgb(80, 195, 255);
}

/* Dashboard: the other way round (prim-color on black) until hovered, when it flips to
   Create Server's colours; no brightening. Square in the page's top-right corner. */
button#dashbtn {
    border-top-right-radius: 0;
    background: var(--prim-bg);
    color: var(--prim-color);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

button#dashbtn:hover {
    background: var(--prim-color);
    color: var(--prim-bg);
}

button#createbtn:focus, button#dashbtn:focus {
    outline: none;
}

button#createbtn:focus-visible, button#dashbtn:focus-visible {
    box-shadow: 0 0 0 3px white, 0 12px 16px -6px var(--prim-color);
}

button#createbtn.failed {
    animation: wiggle 0.5s ease-in-out, fail-fade 1.5s ease-in;
}

@keyframes wiggle {
    0%, 100% { transform: translateX(0) rotate(0); }
    15%      { transform: translateX(-8px) rotate(-2deg); }
    30%      { transform: translateX(7px) rotate(2deg); }
    45%      { transform: translateX(-5px) rotate(-1.5deg); }
    60%      { transform: translateX(4px) rotate(1deg); }
    75%      { transform: translateX(-2px) rotate(-0.5deg); }
}

@keyframes fail-fade {
    0%, 30% { background: var(--error-color); }
    100%    { background: var(--prim-color); }
}

button#createbtn:disabled {
    background: var(--disabled-color);
    cursor: not-allowed;
}

div#scrollhint {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.3s;
}

div#scrollhint.gone {
    opacity: 0;
}

div#scrollhint .appear {
    position: relative;
    animation: hint-appear 0.8s ease-out 1s both, hint-bob 3s infinite 1s;
}

/* soft glow behind the arrows */
div#scrollhint .appear::before {
    content: "";
    position: absolute;
    inset: -60%;
    background: radial-gradient(closest-side, rgb(3 165 253 / 0.45), transparent);
    filter: blur(8px);
    z-index: -1;
}

div#scrollhint svg {
    display: block;
    width: 44px;
    height: auto;
    color: var(--prim-color);
}

@keyframes hint-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* slow rise, back down, then a fast drop past the rest point that eases back up to stop */
@keyframes hint-bob {
    0%   { transform: translateY(0); animation-timing-function: ease-in-out; }
    40%  { transform: translateY(-12px); animation-timing-function: ease-in; }
    55%  { transform: translateY(0); animation-timing-function: ease-in; }
    62%  { transform: translateY(14px); animation-timing-function: ease-out; }
    90%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    div#scrollhint .appear { animation: hint-appear 0.8s ease-out 1s both; }
}

div#ownerbox {
    width: 80%;
    margin: 80px auto 0;
}

input#sowner {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px;
}

input::placeholder {
    color: grey;
    opacity: 1;
}

label#ownerlabel {
    display: block;
    margin-top: 6px;
    padding: 0 4px;             /* same as the input's text inset, so they line up */
    color: grey;
    font-family: "Silkscreen";
    font-size: var(--font-md);
}

input#sowner.error {
    color: var(--error-color);
    border-color: var(--error-color);
}

input#sowner.error:focus-visible {
    box-shadow: 0 12px 12px -8px var(--error-color);
}

label#ownerlabel.error {
    color: var(--error-color);
}


/* Shown after a server is created (index.js). The page behind it can't be clicked. */
body.verifying form {
    pointer-events: none;
    user-select: none;
}

div#verify-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 84%;
    max-width: 960px;
    min-height: 50%;
    padding: 30px 20px;
    border: 4px solid var(--prim-color);
    border-radius: 2px;
    isolation: isolate;         /* keeps the ::before backdrop behind the text, inside the popup */
    color: var(--prim-color);
    font-family: "Silkscreen";
    font-size: var(--font-md);
    text-align: center;
}

div#verify-popup[hidden] {
    display: none;
}

/* The popup's background: the page behind it blurred 16px, darkened (60% see-through), then
   pixelated into 24x24px blocks (#pixelate in index.html). Only the text stays sharp. */
div#verify-popup::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(0 0 0 / 0.4);
    backdrop-filter: blur(16px);
    filter: url(#pixelate);
}

span#popup-heading {
    font-size: var(--font-lg);
}

span#code {
    color: white;
}

/* Ok, with the wait bar attached underneath (same width) */
div#verify-okwrap {
    margin-top: auto;           /* at the bottom of the popup */
    display: flex;
    flex-direction: column;
}

button#verify-ok {
    padding: 0.4em 1.6em;
    border: none;
    border-radius: 2px;
    background: var(--prim-color);
    color: var(--prim-bg);
    font-family: "Silkscreen";
    font-size: calc(var(--font-lg) * 0.75);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

button#verify-ok:hover:not(:disabled) {
    background: rgb(80, 195, 255);
}

/* Disabled while the wait bar fills: 60% blue, 40% black */
button#verify-ok:disabled {
    background: color-mix(in srgb, var(--prim-color) 60%, black);
    cursor: not-allowed;
}

/* Fills left to right over 3s once the popup shows; index.js enables Ok when it's full
   (animationend) and fades the bar out */
div#verify-wait {
    height: 4px;
    background: var(--prim-color);
    transform-origin: left;
    transition: opacity 0.5s;
}

div#verify-popup:not([hidden]) div#verify-wait {
    animation: verify-wait 3s linear both;
}

div#verify-wait.done {
    opacity: 0;
}

@keyframes verify-wait {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

button#verify-ok:focus {
    outline: none;
}

button#verify-ok:focus-visible {
    box-shadow: 0 0 0 3px white, 0 12px 16px -6px var(--prim-color);
}

svg#filters {
    position: absolute;
    width: 0;
    height: 0;
}