.tcell { width: 14px; height: 14px; border: solid 1px #ddd; padding: 0px; background: white; }
.u- { border-top: solid 3px black; }
.d- { border-bottom: solid 3px black; }
.l- { border-left: solid 3px black; }
.r- { border-right: solid 3px black; }
.u-- { border-top: dashed 2px black; }
.d-- { border-bottom: dashed 2px black; }
.l-- { border-left: dashed 2px black; }
.r-- { border-right: dashed 2px black; }

.I { background: red; }
.T { background: cyan; }
.L { background: orange; }
.J { background: #55f; }
.S { background: magenta; }
.Z { background: green; }
.O { background: yellow; }
.G { background: #89e; }

@media (min-width: 980px) {
	.tcell { width: 24px; height: 24px; }
}