@font-face {
  font-family: "Font"; 
  src: url("../shared/KreativeSquare.ttf") format("truetype");
}

body {
    background-color: #000;
}

body, pre, button, textarea, input {
    font-family: "Font", monospace; 	
}

#ui {
    width: fit-content;
    margin:auto;
}

#intro {
    font-size: 12px;
    color: #ccc;
    background: #111;
    font-family: "Courier New";
    text-align:center;
}
#intro summary {
    font-size:200%;
    list-style:none;
}

input, textarea {
    background-color: #222;
    color:#fff;
}

textarea {
    overflow:hidden;
    line-height:1;
    margin: auto;
    display:block;
}

.debug p {
    text-align: center;
}

.editor p {
    text-align:center;
}
.editor button {
    padding: .5ch;
    margin: .25ch;
}

details {
    color:#ddd;
    background: #111;
    border: .2ch solid #222;
    max-width:90%;
    width: fit-content;
    margin:auto;
    padding: .3ch;
}

summary {
    background: #222;
    padding: .2ch;
}

button {
    border-radius: 0px;
    border: .1ch #444 solid;
    color: #ddd;
    background-color: #333;
    line-height: 1;
}
button:disabled {
    opacity:50%;
}

.controls, .main {
    touch-action: manipulation;
}

#controls button, .slotOps button, .slots button, #revisions button {
    font-size:30px;
    padding: .1ch;
    margin: 0px;
}
.slotsOps {
    height: 2.5em
}
#controls, #revisions {
    margin-left: auto;
    margin-right: auto;
}

#reset {text-align:center}
#eject {float:right;}

#arrows button {
    font-size: 42px;
}

#arrows, #specials {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50% 50%;
    place-items: center;
    gap: .5ch;
}

.slotOps, .slots { max-width: 15em;}
.slotOps button { font-size:125%;}
.slotOps .save {float: left;}
.slotOps .delete, .slotOps .load {float:right}
.delete { margin-left: .5em;}
.slots {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    clear: left;
    gap: .25ch;
    padding-top: .5ch;
}
.slots button {
    text-align:center;
}


#arrows button:nth-child(1) {
    grid-column: 2 / span 1;
}
#arrows button:nth-child(2), #arrows button:nth-child(3), #arrows button:nth-child(4) {
    grid-row: 2 / span 1;
}
#specials button:nth-child(1), #specials button:nth-child(2), #specials button:nth-child(3) {
    grid-row: 1 / span 1;
}
#specials button:nth-child(4) {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
}


#main {
	background-color: #999;
	margin-left: auto;
	margin-right: auto;
	width:fit-content;
	border:.2em solid #333;
}

#main p {
	margin-left: 0;
}

.powers .sel {
	color: #999;
	background-color: #333;
}

.score {
    float:right;
}

.stats { display:flex; justify-content: space-between;}
.lives { color: #622; }
.coins { color: #450; }
.bombs { color: #ddd; background-color: #222 }

.map {
    white-space: pre;
    border: .1em solid #444;
    color:#222;
    margin-left: auto;
    margin-right: auto;
    width:fit-content;
    line-height:1;
    user-select: none;
}

.row {
    height:1ch;
}

.tile span {
    left:0;
    position:absolute;
}
.thing {
    z-index: 5;

}
.tile {
    position:relative;
    display:inline-block;
    width: 1ch;
    height: 1ch;
}

.subscript {
	opacity:75%;
	font-size: 50%;
	/*background:#aaa;*/
	left:-.25em;
	top:-.25em;
}

.player {
	color:#000;
	background-color: #9c9;
}

.map {
    --player:#9c9; 
    --wall:#555;
    --semi:#666;
}

[data-error="true"] {
    color: #b0f;
    background: #000
}

[data-player='true'] {
    background: var(--player);
}
[data-player='true'][data-stuck='true'],
[data-tool='true'][data-wield='true'][data-stuck='true'] {
    background: var(--wall);
}
[data-detonator], [data-tool="true"][data-wield="true"][data-blastcap="true"] {
    background: #ec7;
}

.tile span[data-float='true'] {
    filter: drop-shadow(.25em .25em 3px #2228);
    left: -.25em;
    top: -.25em;
}


[data-ghost='true'] {
    opacity:50%;
}
/* tool */
[data-tool='true']{
  background-color: #9cc;
}
[data-tool='true'][data-wield='true']{
  background-color: #9c9;
}

/* ground */
[data-ground='true'] {
    color: #222;
    background: #7770;
    z-index: 1;
}
.chessblack  {
    background-color: #7e7e7e;
}
.chesswhite {
    background-color: #888;
}
[data-piece='true'], [data-player='true'], [data-image='true'] {
    z-index: 7;
}
[data-tool='true'] {
    z-index: 6;
}
/* goal */
[data-goal='true'] {
	color:#000;
	background-color: #9c9;
}
[data-goal='true'].closed {
	background-color: #aba;
}
/* lock */
[data-lock='true'] {
	color:#000;
	background-color: #99c;
}
/* block */
[data-block='true'][data-wall='true'] {
    color:#333;
    background-color: revert;
    z-index:6;
    
}
[data-block='true'].open {
	color:#111;
	background-color:#9ba;
}
[data-crate='true'] {
    font-size: 75%;
  margin-left: 12.5%;
  margin-top: 12.5%;
}
/* wall */
[data-wall='true'] {
    background-color:var(--wall);
}
/* stalag */
[data-stalag='true'] {
    background-color: #887;
    color:#440;
}
[data-stalag='true'][data-falling='true'] {
    background-color: #665;
    color:revert;
}
/* crack */
[data-crack='true'] {
    background-color: #877;
    color:#622;
}
[data-crack='true'][data-falling='true'] {
    background-color: #655;
}

/* level & flip */
[data-unflip='true'] {
    background-color: #88a;
}
[data-flip='true'][data-wall="true"] {
    background-color: #667;
}
[data-lever='true'] {
    background-color: #77b;
}

/* coin */
[data-coin='true'] {
	background-color:#cc9;
}
/* hole */
[data-hole='true']{
    background-color: #666;
    color: #444;
}
/* piece */
[data-piece='true']{
  background-color: #a66;
}
[data-piece='true'][data-stuck='true']{
  background-color: #755;
}
/* power */
[data-power='true']{
  background-color: #c9c;
}
[data-scoop='true'] {
    z-index: 4;
}
[data-scoop='true'] {
    z-index: 4;
}
/* bomb */
[data-bomb='true'] {
    color: #400;
    background-color: #988;
}
[data-bomb='true'][data-fuse] {
    color: #600;
    background-color: #ec7;
}
/* fire */
[data-fire='true'] {
    color: #fc8;
    background-color: #630
}
/* smoke */
[data-smoke='true'] {
    z-index:10;
    opacity:60%
}
[data-smoke='true'][data-rank='1'] {
}
[data-smoke='true'][data-rank='2'] {
}
[data-smoke='true'][data-rank='3'] {
}

/* water */
[data-water='true'], [data-water='true'] .arrow {
    z-index: 3;
    color: #9bc;
    background-color: #346;
}
[data-drift='true'] {
    color: #876 !important; 
    background-color: #346 !important;
}
/* ice */
[data-ice='true'] {
    color: #445;
    background-color: #cce;
}
/* choice */
[data-choice='true'] {
    color: #c9c;
    background-color: #333
}
/* cost */
[data-shop] {
    background-color: #333
}

[data-cost] {
    color: #dd9;
}
[data-clovershop] {
    color: #9d9;
    background-color: #333
}
[data-foeshop] {
    color: #d55;
    background-color: #333
}
/* portal */
[data-teleport='true'] {
    background-color: #69f;
}
[data-teleport='true'][data-left='true'] {
    background-color: #e97
}
[data-image='true'] {
    z-index: 5;
    background-color: #787;
}

/* lightning */
.bolt {
    background-color: #ffb;
    color:#222;
    z-index:9;
}
.cross {
    background-color: #c44;
    color:#222;
    z-index:9;
    opacity:75%;
}

/* effects */
[data-flat='true'] { /* what the fuck was this? */
    opacity: 75%;
}

@keyframes move { from { offset-distance:0%; } to { offset-distance:100%; } }
@keyframes blink {
    50% {opacity: 50%}
}

@keyframes tramble { from {opacity: 100%} to {opacity: 0%} }
.tramble { animation: tramble .2s 1 forwards ease-out }

@keyframes untrod { from {opacity: 0%} to {opacity: 100%} }
.untrod { animation: untrod .2s 1 forwards ease-out }