html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	min-width: 400px;
	overflow-y: hidden;
	background-color: #000;
	color: #fff;
	font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 12px;
	touch-action: none;
	-webkit-text-size-adjust: 100%;
}
canvas {
	width: 100%;
	height: 100%;
	vertical-align: bottom;
}
a {
	color: #fff;
	text-decoration: none;
}

/* Layout */
div#wrapper {
	width: 100%;
	height: 100%;
	min-width: 400px;
	min-height: 240px;
	display: flex;
	flex-direction: column;
}
div#top {
	width: 100%;
	height: 120px;
	flex-grow: 0;
	display: flex;
	box-sizing: border-box;
	padding: 4px;
}
div#top div.column {
	/* flex-basis: 0;
	flex-grow: 1; */
	align-self: flex-end;
	width: 33.33%;
}
div#main {
	width: 100%;
	height: 120px;
	flex-grow: 1;
}
div#bottom {
	width: 100%;
	height: 120px;
	flex-grow: 0;
	display: flex;
	box-sizing: border-box;
	padding: 4px;
}
div#bottom div.column {
	/* flex-basis: 0;
	flex-grow: 1; */
	width: 33.33%;
}


/* div#keyboard {
	
} */
div#arrows {
	width: 95px;
}
div#numbers {
	width: 95px;
	margin-top: 1px;
	display: flex;
	justify-content: flex-end;
	gap: 1px;
}

div.arrow-keys {
	margin-top: 1px;
	display: flex;
	justify-content: center;
	gap: 1px;
}
div#enter {
	margin-top: 1px;
	width: 95px;
	display: flex;
	justify-content: flex-end;
}

svg.key {
	height: 13px;
	vertical-align: bottom;
	cursor: pointer;
}
svg.key:hover {
	filter: invert(100%);
}
svg.key text {
	fill: #fff;
}

div#meta {
	display: flex;
	gap: 2px;
}
svg.icon {
	width: 16px;
	height: 16px;
	vertical-align: bottom;
}
rect.center {
	transform-box: fill-box;
	transform-origin: center;
}
div#owner {
	width: 25vw;
	min-width: 100px;
	text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* MetaMask*/
div#metamask, div#wrong-network, div#btn-connect, div#connected, div#collectors-address, div#collectors-decks, div#collectors-balance, div#collectors-eligibility {
	display: none;
}

div#btn-connect {
	cursor: pointer;
}
svg.connect {
	width: 15px;
	height: 15px;
	vertical-align: bottom;
}
text.txt {
	font: normal 11px 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	fill: #fff;
}
div#connected {
	max-width: 100%;
	text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
div#access-status {
	margin: 4px 0 3px;
	width: fit-content;
	padding: 2px 4px;
	border-radius: 3px;
	color: #000;
	background-color: #fff;
}

div#collector {
	width: 33%;
	min-width: 126px;
	position: absolute;
	bottom: 140px;
	left: 4px;
}
div#collectors-address {
	margin: 0 0 4px;
	text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
div#collectors-balance {
	margin: 0 0 6px;
	flex-wrap: wrap;
	gap: 1px;
}
div#collectors-decks {
	margin: 0 0 6px;
	flex-wrap: wrap;
	gap: 1px;
}
div#collectors-eligibility {
	width: fit-content;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;

	padding: 0 2px;
	border: 1px solid #fff;
	border-radius: 2px;
}

span#collector-label {
	padding: 0 2px;
	color: #000;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 2px;
}
a.collector-deck, span#collector-balance {
	padding: 0 2px;
	border: 1px solid #fff;
	border-radius: 2px;
}
a.collector-deck:hover {
	color: #000;
	background-color: #fff;
}

/*
 * Token matrix
 */
div#tokens {
	width: 128px;
	line-height: 4px;
}
svg.token {
	stroke: #fff;
	cursor: pointer;
	vertical-align: top;
}
svg.token rect.selection {
	fill: #000;
}
svg.token.selected rect.selection {
	fill: #fff;
}
svg.token:hover rect.selection {
	filter: invert(100%);
}
div.legend-row {
	display: flex;
	align-items: top;
	gap: 2px;
}

div#colors {
	position: fixed;
	top: 50%;
	left: 0;
	z-index: 10;
	transform: translate(0, -50%);
	width: 4px;
	height: 32px;
	display: flex;
}
div.gradient {
	width: 2px;
	height: 32px;
	flex-grow: 0;
}

div#single-links {
	display: none;
}