html,
body {
    margin: 10px;
    padding: 0;
    text-align: center;
    /* background-color: #2c2a29; */
    /* touch-action:none; */
    font-family: monospace;
}
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--bg-color);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, #2c2a29 80%, white);
    border-radius: 4px;

  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, #2c2a29 50%, white);
  }

:root{
    --block-dim: min(calc(100vh/30),calc(100vw/20));
    --side-block-dim: min(var(--block-dim),calc(100vw/36));
    /* --color: grey; */
}

hr{
    /* height:1px; */
    border: 2px solid color-mix(in hsl, var(--bg-color) 90%, var(--accent-target));
    border-radius: 2px;
    /* border-color: var(--accent-target); */
    /* border-color: color-mix(in hsl, var(--bg-color) 50%, var(--accent-target)); */
}

p {
    color: var(--text-color);
}

.inline-block p{
    font-size: calc(var(--side-block-dim)*0.6);
}

.notouch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    touch-action: none;
}

.no-touch-move{
    touch-action:none;
}

h1 {
    /* color: #ccc; */
    color: var(--text-color);
    position: relative;
    min-height: 0px;
    display: inline-block;
}

.tile{
    width: var(--block-dim);
    height: var(--block-dim);
    display:inline-grid;
    box-sizing: border-box;
}

.sidebar-tile{
    width: var(--side-block-dim);
    height: var(--side-block-dim);
    display:inline-grid;
    box-sizing: border-box;
}

.filled{
    background-color:var(--color);
    /* border: 2px solid darkgray; */
    /* border: 2px solid hsl(from yellow h s calc(l/2)); */
    border: 2px solid oklch(from blue calc(l-20) c h);
}

.I-color{
    /* border: 2px solid oklch(from var(--Icolor) calc(l-20) c h); */
    /* border: 2px solid oklch(from var(--Icolor) calc(l-20) c h); */
    background-color:var(--Icolor);
    border: 2px solid color-mix(in srgb, var(--Icolor) var(--outline-opacity), var(--piece-outline-target));
}
.drop-indicator.I-color{
    border: 2px solid color-mix(in srgb, var(--Icolor) var(--drop-outline-opacity), var(--drop-outline-target));
}
.T-color{
    background-color:var(--Tcolor);
    border: 2px solid color-mix(in srgb, var(--Tcolor) var(--outline-opacity), var(--piece-outline-target));
}
.drop-indicator.T-color{
    border: 2px solid color-mix(in srgb, var(--Tcolor) var(--drop-outline-opacity), var(--drop-outline-target));
}
.O-color{
    background-color:var(--Ocolor);
    border: 2px solid color-mix(in srgb, var(--Ocolor) var(--outline-opacity), var(--piece-outline-target));
}
.drop-indicator.O-color{
    border: 2px solid color-mix(in srgb, var(--Ocolor) var(--drop-outline-opacity), var(--drop-outline-target));
}
.S-color{
    background-color:var(--Scolor);
    border: 2px solid color-mix(in srgb, var(--Scolor) var(--outline-opacity), var(--piece-outline-target));
}
.drop-indicator.S-color{
    border: 2px solid color-mix(in srgb, var(--Scolor) var(--drop-outline-opacity), var(--drop-outline-target));
}
.Z-color{
    background-color:var(--Zcolor);
    border: 2px solid color-mix(in srgb, var(--Zcolor) var(--outline-opacity), var(--piece-outline-target));
}
.drop-indicator.Z-color{
    border: 2px solid color-mix(in srgb, var(--Zcolor) var(--drop-outline-opacity), var(--drop-outline-target));
}
.J-color{
    background-color:var(--Jcolor);
    border: 2px solid color-mix(in srgb, var(--Jcolor) var(--outline-opacity), var(--piece-outline-target));
}
.drop-indicator.J-color{
    border: 2px solid color-mix(in srgb, var(--Jcolor) var(--drop-outline-opacity), var(--drop-outline-target));
}
.L-color{
    background-color:var(--Lcolor);
    border: 2px solid color-mix(in srgb, var(--Lcolor) var(--outline-opacity), var(--piece-outline-target));
}
.drop-indicator.L-color{
    border: 2px solid color-mix(in srgb, var(--Lcolor) var(--drop-outline-opacity), var(--drop-outline-target));
}

.translucent{
    opacity: 0.5;
    pointer-events: none;
}

.tile.outline{
    background-color: var(--board-bg);
}

.outline-only{
    background-color: none;
    pointer-events: none;
}

.empty{
    background-color:var(--board-bg);
    border: 2px solid var(--board-outline);
}

.board{
    width: calc(var(--block-dim)*10);
    /* margin:auto; */
    display:grid;
    /* grid-template-columns: 24px 24px 24px 24px 24px 24px 24px 24px 24px 24px; */
    grid-template-columns: var(--block-dim) var(--block-dim) var(--block-dim) var(--block-dim) var(--block-dim) var(--block-dim) var(--block-dim) var(--block-dim) var(--block-dim) var(--block-dim);
    gap:0px;
}

.piece-display{
    width: calc(var(--side-block-dim)*4);
    /* margin:auto; */
    display:grid;
    grid-template-columns: var(--side-block-dim) var(--side-block-dim) var(--side-block-dim) var(--side-block-dim);
    gap:0px;
    /* position:relative; */
}
.inline-block{
    display:inline-block;
    width:fit-content;
    vertical-align:top;
    margin:8px;
}

.game{
    width: fit-content;
    margin: auto;
    display: inline-block;
    outline:none;
}

button.settings{
    position:absolute;
    top:2px;
    right:2px;
    font-family: monospace;
}

button{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 5%);
    color:var(--text-color);
    border: none;
    border-radius:4px;
    margin: 1px;
    padding:4px;
    font-family: monospace;
}
button:hover{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 7%);
}
button:active{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 9%);
}

.sidebar-num-display{
    width: 85%;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left:auto;
    margin-right: auto;
    /* background-color: grey; */
    /* opacity: 0.1; */
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 3%);
    border-radius:4px;
}
.sidebar-num-display h1{
    font-size: calc(var(--side-block-dim)*0.7);
    margin:2px;
    color: var(--text-color);
}
.sidebar-num-display p{
    font-size: calc(var(--side-block-dim)*0.65);
    margin:1px;
}
input[type="color"]{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 8%);
    border-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 8%);
    border-radius: 5px;
}
input[type="range"]{
    -webkit-appearance: none;
    /* appearance: none; */
    /* background: transparent; */
    cursor: pointer;
    overflow:hidden;
    height:1.3em;
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 8%);
    border-radius: 0.7em;
    /* padding:0px; */
}
input[type="range"]:hover + h2{
    /* display:block; */
    visibility: visible;
    color: color-mix(in hsl, var(--bg-color), var(--accent-target) 36%);
    pointer-events: none;
    margin: auto;
    opacity: 0.9;
}
input[type="range"]::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    /* appearance: none; */
    height:1.3em;
    color: color-mix(in hsl, var(--bg-color), var(--accent-target) 32%);
    /* border-radius: 1.4em; */
} 
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    background: var(--text-color);
    /* box-shadow: -256px 0 0 244px color-mix(in hsl, var(--bg-color), white 32%); */
    height: 1.3em;
    width: 1.3em;
    border-radius: 1.3em;
}

.horiz-section input, .horiz-section button{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 8%);
    border-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 8%);
    border-radius: 0.7em;
    color:var(--text-color);
    border:none;
    outline:none;
    font-family: monospace;
    margin:2px;
    font-size:1.4em;
    line-height:1.25em;
    padding:0.3em 0.6em 0.3em 0.6em;
    box-sizing: border-box; 
    grid-area: inputs;
}
input:focus{
    border: 2px solid var(--text-color);
    padding-left: calc(0.6em - 1.7px);
}
label{
    color:var(--text-color);
}

.horiz-section{
    align-items: center;
    column-gap:2rem;
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr;
    row-gap:0.3rem;
    grid-template-areas: 
    "title inputs" 
    "text inputs";
    text-align: left;
    margin-top:2.5rem;
}

@media only screen and (max-width: 40.625rem) {
    .horiz-section {
        grid-template-areas:
            "title"
            "text"
            "inputs";
        grid-template-columns: 1fr;
    }
    .horiz-section input[type="range"] + h2{
        /* display:block; */
        visibility: visible;
        color: color-mix(in hsl, var(--bg-color), var(--accent-target) 36%);
        pointer-events: none;
        margin: auto;
        opacity: 0.9;
    }
}

.horiz-section button:hover{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 11%);
}
.horiz-section button:active{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 14%);
}

.horiz-section h1{
    font-size:1.3em;
    color:color-mix(in hsl, var(--bg-color), var(--accent-target) 20%);
    grid-area: title;
    margin:2px 0px 2px 0px;
}

div.text{
    color: var(--text-color);
    font-size: 1.4em;
    grid-area:text;
}

.horiz-section h2{
    grid-area: inputs;
    opacity: 0;
    /* display:none; */
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s, opacity 50ms linear;
    margin:0px;
}

.colors-section{
    text-align: left;
    margin-top: 2.5rem;
}
.colors-holder{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(18rem,1fr))!important;
    gap:0.5rem;
}
.colors-section h1{
    font-size:1.3em;
    color:color-mix(in hsl, var(--bg-color), var(--accent-target) 20%);
    margin:2px 0px 2px 0px;
}
.color-tab{
    /* display:grid; */
    /* display: block; */
    position: relative;
    /* align-items: center; */
}

.color-tab .color-tab-text{
    font-family: monospace;
    color: var(--text-color);
    position:absolute;
    display:flex;
    top:0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    pointer-events: none;
}

.color-tab input{
    width:99%;
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 16%);
    border-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 16%);
    border-radius: 0.7em;
    border:none;
    outline:none;
    font-family: monospace;
    padding:0px;
    margin:2px;
    font-size:1.4em;
    line-height:1.25em;
    box-sizing: border-box; 
}
.color-tab input[type="color"]::-webkit-color-swatch-wrapper{
    padding:0.1em;
    outline:none;
    border:none;
}
.color-tab input[type="color"]::-webkit-color-swatch{
    border-radius:0.7em;
    outline:none;
    border:none;
}

.settings-footer button{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 8%);
    border-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 8%);
    border-radius: 0.7em;
    color:var(--text-color);
    border:none;
    outline:none;
    font-family: monospace;
    margin:2px;
    font-size:1.4em;
    line-height:1.25em;
    padding:0.3em 0.6em 0.3em 0.6em;
    box-sizing: border-box; 
    margin-left:2rem;
    margin-right:2rem;
}
.settings-footer button:hover{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 11%);
}
.settings-footer button:active{
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 14%);
}
.settings-footer{
    margin-top:2.5rem;
}

.game-end-menu{
    position:absolute;
    width:200px;
    height:100px;
    top:50vh;
    left:50vw;
    transform: translate(-100px,-200px);
    background-color: color-mix(in hsl, var(--board-bg), var(--accent-target) 2%);
    border-radius: 16px;
    border: 4px solid color-mix(in hsl, var(--board-outline), var(--accent-target) 2%);
    color: var(--text-color);
    font-family: monospace;
    cursor: default;
}
.game-end-menu h1{
    margin:0;
}
.game-end-menu h2{
    margin:8px;
}

.cookie-menu{
    position:fixed;
    width:fit-content;
    height:fit-content;
    top:50vh;
    left:50vw;
    transform: translate(-25vw,-50px);
    background-color: color-mix(in hsl, var(--bg-color), var(--accent-target) 8%);
    border-radius: 16px;
    color: var(--text-color);
    font-family: monospace;
    cursor: default;
    font-size:1.3em;
    padding:6px;
}

.cookie-menu button{
    font-family: monospace;
    margin:4px;
    font-size:1em;
}