html {
	background-image:repeating-linear-gradient(0deg, #eee 5px, #ddd 10px);
	color:#666;
}
body {
	max-width:800px;
	box-shadow:0 0 20px #888;
	background:#fff; background-size:20px 20px; background-repeat:repeat; background-position:center center;
	background-image:linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
	                 linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
}
button {
	background:#fff; border:1px solid #888; border-radius:4px;
	-webkit-tap-highlight-color:#aaf1;
	@media (hover: hover) { &:hover  { background:#eef !important; color:#008 !important; border-color:#008 !important; } }
	@media (hover: none) {  &:active { background:#eef !important; color:#008 !important; border-color:#008 !important; } }
}
input[type="radio"] + label {
	-webkit-tap-highlight-color:#aaf1;
}
input[type="text"] {
	color:#000;
}

/* *************************************  */
header {
	> button {
		&[data-cmd="personal_area"] {  }
		&[data-cmd="personal_roll"] {  }
		&[data-cmd="dialog_closer"] { border-color:#aaa; background:#aaa; color:#fff; }
	}
}

/* ************************************* ロール情報 */

/* ************************************* ロール表示 */
#drum_area {
	> div {
		background-color:#fff;
		box-shadow:0px 0px 4px 0px #bbb inset;
		border:1px solid #ccc;
	}
}

/* ************************************* ロール操作説明 */

/* ************************************* ロール結果 */
#res_area {
	> div {
		> *:nth-child(1) {
			border:solid 1px #eee;
			background:linear-gradient(90deg, #ccc 5%, #fff0 5% 6%, #ccc 8% 9%, #fff0 9% 91%, #ccc 91% 92%, #fff0 94% 95%, #ccc 95%);
			
			@media (hover: hover) { &:hover  {
				background:linear-gradient(90deg, #bbf 5%, #eef5 5% 6%, #bbf 8% 9%, #eef5 9% 91%, #bbf 91% 92%, #eef5 94% 95%, #bbf 95%) !important;
			}}
			@media (hover: none) {  &:active {
				background:linear-gradient(90deg, #bbf 5%, #eef5 5% 6%, #bbf 8% 9%, #eef5 9% 91%, #bbf 91% 92%, #eef5 94% 95%, #bbf 95%) !important;
			}}
		}
		> *:nth-child(3) {
			background:#88e; color:#fff;
			border:6px solid #fff; box-shadow:0 0 10px #666;
		}
	}
	> button {
		&[data-res="hash"] {
			color:#bbb; border-style:dotted; border-color:#fff;
		}
	}
}

/* ************************************* ロールエリア */
#roll_area {
	border:3px dotted #ccc4;
}

/* ************************************* UPKヘルプ */
#upk_help {
	background:#fff; border:double #aaa; border-width:5px 0;
}

/* ************************************* ロール選択 */
#personal_roll {
	border:solid #aaa;
	background:#fff;
}
#rollset > button{
	border:solid #ccc;
	
	&[name="rollset_edit"] {
		background:#eee;
		color:#eee;
		@media (hover: hover) {
			&:hover + button { background:#337; border-color:#008; color:#fff; }
			&:has(+ :hover) { border-color:#008; background:#eef }
		}
		@media (hover: none) {
			&:active + button { background:#337; border-color:#008; color:#fff; }
			&:has(+ :active) { border-color:#008; background:#eef }
		}
	}
	&[name="rollset_select"] {
		background:#fff;
	}
}
#rolledit {
	background:#fff;
	> label {
		&:has(+ :disabled) { color:#aaa; }
	}
	> input[type="text"] {
		background:transparent;
		border:1px solid; border-color:#fff #fff #ccc #fff;
	}
	> input[type="number"] {
		background:transparent;
		border:1px solid; border-color:#fff #fff #ccc #fff;
		&:disabled { color:#aaa; background:#ccc2; }
	}
	> input[name="rad_type"] {
		&:checked + label { border-color:#000; color:#000; }
		& + label {
			border:1px solid #ccc;
			&:hover { background:#eef; color:#008; border-color:#008; }
		}
	}
	> button {
		border:1px solid #ccc;
		background:transparent;
	}
	> button[name="tmpl_dice"] > * {
		background:#666;
		color:#fff;
	}
}

/* ************************************* 個人設定 */
#personal_area {
	border:solid #aaa; border-width:4px 4px 4px 0;
	background:#fff;
	> label  { color:#666; }
	> legend { color:#666; }
	> div {
		border:1px solid; border-color:#fff #fff #ccc #fff;
	}
	> input[type="text"] {
		background:transparent;
		border:1px solid; border-color:#fff #fff #ccc #fff;
	}
	& input[type="radio"] + label {
		@media (hover: hover) { &:hover  { border-color:#ccf; } }
		@media (hover: none) {  &:active { border-color:#ccf; } }
	}
	& input[type="radio"]:checked + label { border-color:#00a; }
}

/* ************************************* tweet */
button[data-res="tweet"] {
}