/* Experimental WindowBlinds artwork skin; game canvases retain their colors. */
.panel,.board-panel,dialog{background:#c0c0c0;color:#000;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:1px 1px 0 #000;padding:2px}
.panel h2,.panel h3{background:#000080 url('./win98/titlebar.png') 0 0/100% 200% no-repeat;color:#fff;border:0;min-height:24px;padding:4px 7px;font-weight:bold;text-shadow:1px 1px #000;image-rendering:pixelated}
.empty-board{background-color:#000;color:#fff;margin:2px;border:1px solid;border-color:#808080 #fff #fff #808080}
.board-wrap{border:2px solid;border-color:#808080 #fff #fff #808080}
.stats{background:#c0c0c0;color:#000;border:1px solid;border-color:#808080 #fff #fff #808080;margin-top:2px}
button{position:relative;isolation:isolate;background:transparent;border:0;border-radius:0;color:#000;min-height:25px;padding:5px 12px;box-shadow:none}
button::before{content:"";position:absolute;inset:0;z-index:-1;background:#c0c0c0 url('./win98/buttons.png') 0 0/500% 100% no-repeat;image-rendering:pixelated}
button:hover:not(:disabled){color:#000;filter:brightness(1.04)}
button:active:not(:disabled)::before{background-position:25% 0}
button:active:not(:disabled){transform:translate(1px,1px)}
button:disabled{opacity:1;color:#808080;text-shadow:1px 1px #fff}
button:disabled::before{background-position:75% 0}
button:focus-visible{outline:1px dotted #000;outline-offset:-5px}
dialog h2{background:#000080 url('./win98/titlebar.png') 0 0/100% 200% no-repeat;color:white;padding:5px 9px;min-height:26px;margin:0 0 14px}
dialog form{padding:8px}dialog p{margin:8px 0}dialog input{background:#fff;color:#000;border:2px solid;border-color:#808080 #fff #fff #808080}
#settings-error{color:#800000}#overlay{background:#000;color:#fff}.next-panel canvas,.left-rail canvas{background:#000}

/* Practice-mode chrome. Game canvases and tetromino colours stay unchanged. */
body[data-syntris-mode="lst"] .play-area .panel,
body[data-syntris-mode="lst"] .play-area .board-panel,
body[data-syntris-mode="lst"] .play-area .stats{background:#cabeb2}
body[data-syntris-mode="lst"] .play-area .panel h2{background-color:#a94700}
body[data-syntris-mode="lst"] .play-area button::before{background-color:#cabeb2;background-blend-mode:luminosity}
body[data-syntris-mode="lst"] .suggestions .panel{background:#b9c3b7}
body[data-syntris-mode="lst"] .suggestions .panel h3{background-color:#176b2c}

body[data-syntris-mode="blitz"] .play-area .panel,
body[data-syntris-mode="blitz"] .play-area .board-panel,
body[data-syntris-mode="blitz"] .play-area .stats{background:#c9b0b2}
body[data-syntris-mode="blitz"] .play-area .panel h2{background-color:#9d1111}
body[data-syntris-mode="blitz"] .play-area button::before{background-color:#c9b0b2;background-blend-mode:luminosity}
body[data-syntris-mode="blitz"] .suggestions .panel{background:#cbc4ab}
body[data-syntris-mode="blitz"] .suggestions .panel h3{background-color:#8a7000}

/* Each selector previews its mode using the matching tetromino hues. */
.mode-selector button[data-mode="normal"]::before{background:#c0c0c0}
.mode-selector button[data-mode="lst"]::before{background:linear-gradient(90deg,#cabeb2 0 50%,#b9c3b7 50%)}
.mode-selector button[data-mode="blitz"]::before{background:linear-gradient(90deg,#c9b0b2 0 50%,#cbc4ab 50%)}