#main {
    --boardbg: #999;
    --boardbgalt: #888;
    --boardfg: #333;
    --playerfg: #111;
    --playerbg: #eee;
    --goalbg: #9d9;
    --lockgoalbg: #9b9;
    --lockbg: #99d;
    --wall:#555;
    --semi:#666;

    --firefg: #fc8;
    --firebg: #630;
    --keybg: #99d;
    --shardfg: #424;
    --toolused: #909;

    --triggerfg: #600;
    --triggerbg: #ec7;
    --specialbg: #e7c;

    --waterfg: #9bd;
    --waterbg: #346;
    --watercrest:#346;/*#457;*/
    --watertrough:#283858;

    --stalagfg:#440;
    --stalagbg:#887;
    --stalagfall:#665;

    user-select: none;
}

#main {
    background: #333;
    line-height: 1;
}

#main #title {
    background: #000;
    color: #999;
}
#header, #playerinfo {
    background: #888;
}

#helptext {
    background: #222;
    color: #eee;
    position: absolute;
    z-index: 10;
    margin: .5em;
}

.shard, .shardbar {
    color: var(--shardfg);
}
.powers .sel {
    color: var(--boardbg);
    background: var(--boardfg);
}
.powers .shard.sel {
    color: var(--boardbg);
    background: var(--shardfg);
}

#score, .clovers {
    float:right;
}

.stats span + span { float: right }
.lives, .dead { color: #622; }
.coins { color: #450; }
.bombs { color: #ddd; background-color: #222; }
.keys  { color: #000; background-color: #66c; }

#status { color: #555; }
#status.focus { color: #000; }

#map {
    white-space: pre;
    color:#222;
    width:fit-content;
    line-height:1;
}

.num {
    background: #333;
    color: #999;
    display: none !important;
}
.row:first-of-type { display:none;}
.row {
    height:1ch;
}

.tile span, .num span {
    position:absolute;
}
.tile, .num {
    position:relative;
    display:inline-block;
    width: 1ch;
    height: 1ch;
}
.animated {
    z-index: 1;
}

.chesswhite { background: var(--boardbg); }
.chessblack { background: var(--boardbgalt); }

.destination {
    border: 1px solid #ddd;
    margin: -1px;
    z-index:1;
}

.viewing {
    border: 2px solid white;
    margin: -2px;
    z-index:1;
}

#viewprops {
    font-size: .5em;
}

[data-ground], [data-ice] {
    opacity: 75%;
}

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

[data-player] {
    color: var(--playerfg);
    background: var(--playerbg);
}
[data-player][data-hurt] {
    background: #eaa;
}

[data-player][data-stuck],
[data-tool][data-wield][data-stuck] {
    background: var(--wall);
}
[data-tool][data-used], [data-tool][data-used] + [data-player] {
    color: var(--toolused);
}
[data-facing] + [data-player]:after {
    background:inherit;
    position: absolute;
    left:0;
}
[data-facing="W"] + [data-player]:after { content: "→"}
[data-facing="S"] + [data-player]:after { content: "↓"}
[data-facing="E"] + [data-player]:after { content: "←"}
[data-facing="N"] + [data-player]:after { content: "↑"}
[data-facing="NW"] + [data-player]:after { content: "↗"}
[data-facing="SW"] + [data-player]:after { content: "↘"}
[data-facing="SE"] + [data-player]:after { content: "↙"}
[data-facing="NE"] + [data-player]:after { content: "↖"}
[data-facing][data-tool] + [data-player]:after { content: ""}

/* power stuff */
[data-focus][data-trigger] {
    background: #c7e;
}

[data-trigger], [data-bomb] + [data-piece],
[data-tool][data-wield][data-blastcap] {
    background: var(--triggerbg);
}

[data-bomb][data='special'], [data-trigger][data-mirror] {
    background: var(--specialbg);
    color: var(--boardfg);
}

[data-player][data-mining] {
    background: var(--stalagbg);
}
[data-player][data-gravity] {
    background: #84e;
}
[data-player][data-rotate] {
    transform: rotate(45deg);
}
[data-sticky][data-player], .tile [data-sticky][data-heavy] {
    background: #ee8;
}
[data-firewalker][data-player] {
    background: #e44;
}

.tile span[data-float] {
    filter: drop-shadow(.25em .25em 3px #2228);
    left: -.25em;
    top: -.25em;
}
[data-ghost] {
    opacity:50%;
}

[data-fireball][data-ghost]:has(+[data-fireball][data-ghost]) {
    opacity: 0%;
}
[data-snowcone] {
    color: #66d;
    background: #ddf;
}

.malevolence {
    color: #833;
    transform: scale(3,3);
}

[data-bolt] {
    background-color: #ffb;
    color:#222;
}

[data-bolt][data-facing="N"],
[data-bolt][data-facing="S"] {
    transform: rotate(90deg);
}
/* tool */
[data-tool], [data-arrow]{
  background-color: #9cc;
}
[data-tool][data-wield] {
  background-color: var(--playerbg);
}
[data-guardian][data-wield]:not([data-used]) {
}

/* ground */
[data-ground] {
    color: #222;
}

[data-player][data-lift] + [data-lifted] {
    background-color: var(--playerbg);
}
/* goal */
[data-goal], [data-goal][data-locks='0'] {
        color:#000;
        background-color: var(--goalbg);
}
[data-goal][data-locks] {
        background-color: var(--lockgoalbg);
}
/* lock */
[data-plate] {
        color:#000;
        background-color: var(--keybg);
}
/* block */
[data-block] {
    color:#333;
}
[data-block][data-stairs] {
  color: #444;
}
[data-crate], [data-vase] {
    font-size: 75%;
  margin-left: 12.5%;
  margin-top: 12.5%;
}
[data-urn], [data-vase] {
    background: var(--boardbg);
}
[data-urn] > .thing, [data-vase] > .thing {
    font-size: .75em;
    left: .125rem;
    top: .25em;
}
[data-urn] > .thing {
    border-radius: 1em;
}

/* wall */
[data-wall] {
    background-color:var(--wall);
}
/* stalag */
[data-stalag] {
    background-color: var(--stalagbg);
    color: var(--stalagfg);
}
[data-stalag][data-falling] {
    background-color: var(--stalagfall);
    color:revert;
}
/* crack */
[data-crack] {
    background-color: #988;
    color:#622;
}
[data-crack][data-unstable] {
    background-color: #877;
}

[data-crack][data-falling] {
    background-color: #655;
}

/* sand */

[data-vine] {background: #6b64;}

[data-player][data-snared] {
    background: #aea;
}
[data-snared] {
    color: #411;
}

[data-sand] { color: #432; background: #aa9; }
[data-sand][data-height="1"] { background: #887; }
[data-sand][data-height="2"] { background: #665; }
[data-sand][data-height="3"] { background: #443; }

[data-log] {
    color: #332;
    background: #ab9;
}
[data-piston] {
    background: #bbc;
}

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

/* coin */
[data-coin] {
        background-color:#cc9;
}
/* hole */
[data-hole]{
    background-color: #666;
    color: #444;
}
/* piece */
[data-piece]{
  background-color: #c66;
}
[data-piece][data-stuck]{
  background-color: #755;
}
[data-piece][data-dazed] {
  background: #b77;
} 
[data-piece][data-stun] {
  color: #444;
  background: #a88;
} 
.tile [data-player][data-stun] {
  background: #999;
}
[data-piece][data-boss], [data-bane] {
    background: #200;
    color: #f66;
}
[data-wolf][data-weak] {
    color: #866;
}

/* power */
[data-power]{
  background-color: #c9c;
}
/* bomb */
[data-bomb] {
    color: #400;
    background-color: #988;
}
[data-player] + [data-bomb] {
    color: var(--playerfg);
    background-color: var(--playerbg);
}
[data-bomb][data-fuse] {
    color: var(--triggerfg);
    background-color: var(--triggerbg);
}
/* fire */
[data-fire], [data-block][data-fire] {
    color: var(--firefg);
    background-color: var(--firebg);
}
.tile [data-alight] {
    color: var(--firebg);
}

/* smoke */
[data-smoke] {
    opacity:60%
}
[data-smoke][data-rank='1'] {
}
[data-smoke][data-rank='2'] {
}
[data-smoke][data-rank='3'] {
}

/* water */
[data-water], [data-water] .arrow,
[data-swim][data-player] {
    color: var(--waterfg);
    background-color: var(--waterbg);
}
[data-water][data-trough] {
    background: var(--watertrough);
}
/*[data-water][data-wave] {
    background: var(--watercrest);
}*/
[data-water][data-charged]:not([data-trough]) {
    color: #ffb;
}
[data-drip][data-player] {
    background: #68b;
}
[data-drift] {
    color: #876 !important; 
    background-color: #346 !important;
}
/* ice */
[data-ice] {
    color: #445;
    background-color: #cce;
}
[data-ice][data-alight]{
    color: var(--boardfg);
    background: #aac;
}
[data-ice][data-crack] {
    color: var(--boardfg);
    background: #68b;
}
[data-ice][data-crack][data-unstable] {
    color: var(--waterfg);
    background: var(--waterbg);
}
[data-ice][data-crack][data-falling] {
    color: var(--waterfg);
    background: var(--watertrough);
}

/* choice */
/* cost */
[data-shop] { background-color: #333; }
[data-choice] { color: #c9c; }
[data-coinshop] { color: #dd9; }
[data-clovershop] { color: #9d9; }
[data-foeshop] { color: #d55; }
[data-keyshop] { color: #88f; }

/* portal */
[data-teleport] {
    background-color: #69f;
}
[data-teleport][data-left] {
    background-color: #e97
}
[data-mirror] {
    background-color: #787;
}