@charset 'utf-8';

:root {
	--note-width: 1rem;
	--note-height: 1rem;
	--note-color: #666;
	--note-border: #000;
	--note-line-height: calc( 3 * var(--note-height) );
}

#roll {
	position:relative;
	border: 1px solid black;
	margin-block: .5rem;
}

#clear { 
	display:inline-block;
	width: 2rem; 
}

.wrap-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	padding: 0.2rem 0.6rem;
	background: var(--bs-light);
	cursor: pointer;
	user-select: none;
}

.wrap-toggle::before {
	content: '\21BB'; /* ↻ */
	line-height: 1;
}

#wrap:checked + .wrap-toggle::before {
	content: '\2195'; /* ↕ */
}

.note {
	--key: 0;
	--column: 0;
	--base-x: calc( 8 * var(--note-width) );
	--base-y: var(--note-height);
				
	--shift-x: calc( 1.25 * var(--note-width) );
	--shift-y: var(--note-height);
	
	--x: calc( var(--column) * var(--shift-x) );
	--y: calc( var(--key) * var(--shift-y) );
	
	position:absolute;
	background-color: var(--note-color);
	border:1px solid var(--note-border);
	border-radius: 50%;
	
	width: calc( 1 * var(--note-width) );
	height: var(--note-height);
	
	top: calc( 100% - var(--base-y) - var(--y) );
	left: calc( var(--base-x) + var(--x) );
}

.note[note="0"] { --key:0 }
.note[note="1"] { --key:1 }
.note[note="2"] { --key:2 }
.note[note="3"] { --key:3 }
.note[note="4"] { --key:4 }
.note[note="5"] { --key:5 }
.note[note="6"] { --key:6 }
.note[note="7"] { --key:7 }
.note[note="8"] { --key:8 }
.note[note="9"] { --key:9 }
.note[note="10"] { --key:10 }
.note[note="11"] { --key:11 }
.note[note="12"] { --key:12 }
.note[note="13"] { --key:13 }
.note[note="14"] { --key:14 }
.note[note="15"] { --key:15 }
.note[note="16"] { --key:16 }
.note[note="17"] { --key:17 }
.note[note="18"] { --key:18 }
.note[note="19"] { --key:19 }
.note[note="20"] { --key:20 }
.note[note="21"] { --key:21 }
.note[note="22"] { --key:22 }
.note[note="23"] { --key:23 }
.note[note="24"] { --key:24 }
.note[note="25"] { --key:25 }
.note[note="26"] { --key:26 }
.note[note="27"] { --key:27 }
.note[note="28"] { --key:28 }
.note[note="29"] { --key:29 }
.note[note="30"] { --key:30 }
.note[note="31"] { --key:31 }
.note[note="32"] { --key:32 }

.note[column="0"] { --column:0 }
.note[column="1"] { --column:1 }
.note[column="2"] { --column:2 }
.note[column="3"] { --column:3 }
.note[column="4"] { --column:4 }
.note[column="5"] { --column:5 }
.note[column="6"] { --column:6 }
.note[column="7"] { --column:7 }
.note[column="8"] { --column:8 }
.note[column="9"] { --column:9 }
.note[column="10"] { --column:10 }
.note[column="11"] { --column:11 }
.note[column="12"] { --column:12 }