@font-face {
    font-family: 'BloopRetro';
    src: url('PIXY.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

html {
    min-height:100%;
}

body {
    background-color: #120500;
    font-family: 'BloopRetro', sans-serif;
    width:100%;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 28px;
    overflow: none;
    margin: 0;
    margin-top: 6;
}

.hidden {
    visibility: hidden;
}

.invisible {
    display: none;
}

span {
    line-height: 1;
}

.rounded-cyan-border {
    border: 2px solid cyan;
    border-radius: 8px;
    padding: 10px;
    width: 66%;
}

.retro-input {
    background-color: #120500;
    caret-color: cyan;
    color: white;
    font-size: 20px;
}

.center-horizontally {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%; 
}

.center-vertically {
    display: flex;
    align-items: center;
}

.center-vertically > *{
    margin-block: auto;
}

a {
    color: #00ffff;
}

.selected {
    background-color: #00ffff;
    color:#120500
}

.day {
    background-color: #aaffff;
}

.night {
    background-color: #120500;
}

.twilight {
    background-color: #ff6a5c;
}

#page {
    min-height: 100dvh;
    width:100%;
    justify-content: center;
}

#main_view {
    width:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
}

/* Screen */

#screen {
    display: grid;
    place-items: center; /* centers vertically + horizontally */
}

#game {
    position: relative;
    width: 480px;
    height: 480px;
}

#game canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

#g1  { z-index: 1; }
#g2  { z-index: 2; }
#f1  { z-index: 3; }
#f2  { z-index: 4; }
#p   { z-index: 5; }
#i   { z-index: 6; }
#s   { z-index: 7; }
#c1  { z-index: 8; }
#c2  { z-index: 9; }
#w   { z-index: 10; }
#top { z-index: 11; }

#bottom_text {
    z-index: 100;
    pointer-events: none; 
}

#hearts {
    display: inline-block;
}

#power {
    display: inline-block;
}

#logo {
    width:100%;
    text-align: center;
}

.large-font {
    font-size: 35px;
}

#landing {
    text-align: center;
    padding: 2rem 0;
}

#social {
    text-align: center;
    text-decoration: none;
    padding-top: 16px;
}

#highscore {
    text-align: center;
}

.highscore-list {
    display: inline-block;
    border-radius: 22%;
    width: clamp(60%, 80%, 100%);
}

.hiscore-container {    
    overflow-x: auto;
}

.highscore-table{
    display: inline-block;
}

.gradient-bg {
  background: linear-gradient(
    135deg,
    rgba(48, 152, 240, 0.5),
    rgba(253, 52, 172, 0.5)
  );
}

#social a {
    text-decoration: none;
}

#about {
    width: 70%;
    margin: 0 auto;
}

#notice {
    width: 92%;
    margin: 0 auto;
}

/* color select */

.left-float {
    float: left;
    padding: 15px;
}


/* Modal */

.modal_bg {
    display: block; 
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: none;
    background-color: rgba(0,0,0,0.6);
}

.modal_content {
    background-color: rgba(0,0,0,0.4);
    border-radius: 8px;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 75%;
    position: relative;
    top: 10%;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

img {
    image-rendering: pixelated; 
}

.player-accomplishments {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;   
}

@media (orientation: landscape) {
  #screen {
     width: 40%
  }

  .logo-img {
    width: 40%
  }

  .modal_content {
    width: 60%;
  }
}

@media (orientation: portrait) {
  #screen {
     width: 87%
  }

  .logo-img {
    width: 87%
  }
}
  
/* these colors are needed by the game itself */

  .dark-green {
    background-color: rgb(32, 155, 60);
  }

  .red {
    background-color: rgb(255, 32, 60);
  }

  .dark-red {
    background-color: rgb(155, 16, 30);
  }

  .blue {
    background-color: rgb(72, 52, 238);
  }

  .fuchsia {
    background-color: rgb(253, 52, 172);
  }

  .sky-blue {
    background-color: rgba(48, 152, 240);
  }

  .dim-fuchsia {
    background-color: rgb(89, 18, 60); /* 60% darker */
  }

  .dim-sky-blue {
    background-color: rgb(17, 53, 84); /* 60% darker */
  }

/* Unimplemented in canvas css effects */
.s-hoz {
    height : 50%;
    top: 25%;
}

.s-vert {
    width : 50%;
    left: 25%;
}

.no-lr   { border-left:0; border-right:0; }
.no-tb   { border-top:0;  border-bottom:0; }

/* Buttons */
.container {
    display: none;
}

@media (hover:none), (hover:on-demand) { 
    /* Controls and style for non-desktop e.g mobile, touch */
    .container {
        display: grid;
        grid-template-columns: 2fr 1fr 2fr;
        gap: 6px;
        position: fixed;
        z-index: 10;
        left: 0;
        bottom: 10%;
        width: 100%;
    }
    .dpad-container {
        display: grid;
        grid-template-areas: 
            "x0 up x1"
            "left middle right"
            "x2 down x3";
        gap: 5px;
    }
    .button {
        background-color: #333;
        color: #fff;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        height: 100%;
        aspect-ratio: 1;
    }
    .shift {
        border-color: rgb(170, 255, 255);
        border-style: solid;
        border-width: 2px;
    }
    .borderless {
        border: none;
    }
    .half-button {
        background-color: #333;
        color: #fff;
        border: none;
        border-radius: 5px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .up { grid-area: up; }
    .down { grid-area: down; }
    .left { grid-area: left; }
    .right { grid-area: right; }
    .middle { grid-area: middle; visibility: hidden; }
    .a-b-container {
        display: grid;
        grid-template-areas: 
            "x0 a"
            "b x1";
        gap: 10px;
        float: right;
    }

    .A { grid-area: a; }
    .B { grid-area: b; }
    
    #dpad button,
    #dpad-shift button {
    touch-action: none;          /* kills long-press context menu / drag-scroll */
    user-select: none;           /* no text highlight */
    -webkit-user-select: none;   /* Safari / older Chrome */
    }

    /* Remove the default long-tap highlight on iOS/Android */
    #dpad button:active,
    #dpad-shift button:active {
    background: inherit;
    }
}

/* Make touch controls adapt to device orientation.
   Portrait: keep controls along the bottom (default above).
   Landscape: move controls to the left and right sides so they
   don't overlap the game canvas and keep the menu at the bottom.
*/
@media (hover:none) and (orientation: landscape) {
    .container {
        /* occupy full viewport but split into left (dpad), center (screen), right (actions) */
        position: fixed;
        z-index: 10;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 22% 1fr 22%;
        grid-template-rows: 1fr;
        gap: 12px;
        align-items: center;
        pointer-events: none; /* allow clicks to pass through center by default */
        padding: 8px;
    }

    /* Each immediate container column should allow interaction */
    .container > .dpad-container,
    .container > .a-b-container,
    .container > .center-container {
        pointer-events: auto;
        height: auto;
    }

    .dpad-container {
        justify-self: start;
        align-self: center;
        display: grid;
        grid-auto-rows: min-content;
    }

    .a-b-container {
        justify-self: end;
        align-self: center;
    }

    /* ⬇️ move menu (center-container / half-button) to the bottom */
    .center-container {
        justify-self: center;
        align-self: end;       /* stick menu to the bottom of the viewport */
        margin-bottom: 12px;   /* bit of space from the screen edge */
    }

    /* Slightly increase button size for landscape reachability */
    .button {
        width: 64px;
        height: 64px;
        aspect-ratio: unset;
    }
    .half-button {
        width: 96px;
        height: 40px;
    }

    /* Keep invisible middle placeholders small */
    .middle { visibility: hidden; width: 1px; }
}


/* New Player */

form {
    background-color: #2b2b2b;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    width: 100%;
}

b {
    font-size: 1em;
    display: block;
    margin-bottom: 15px;
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.left-float {
    flex: 1;
    margin-right: 10px;
}

input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
}

input[type="submit"] {
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    background-color: #7a8add;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #8a9add;
}

input[type="radio"] {
    margin-right: 5px;
}

.grid-square-example {
    width: 40px;
    height: 40px;
    border-radius: 25%
}

p {
    margin: 0;
}

#color-window-0,
#color-window-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
}

.color-selection {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}