@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap&text=○●△■□◎－');

:root {
	--header-font: "BIZ UDPGothic", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, Arial, sans-serif;
	--normal-font: "ヒラギノ角ゴ Pro W3", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック";
}

nav { margin: 0 4px; font-size: 0.95rem; text-align: right; }
.uptime { margin-top: 1em; text-align: right; font-size: 80%; }
.tb_navi { margin-bottom: 1em; background: #999; font-size: 80%; }
.tb_navi tr { background: #fff; text-align: center; }

.sc-nav {
  margin-bottom: 1rem;
  overflow-x: auto;
}
.mode {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 4px 0;
  padding: 0;
  border: 1px solid #999;
  font-family: var(--header-font);
  font-size: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mode::-webkit-scrollbar { display: none; }
.mode li:not(:last-child) {
  border-right: 1px solid #999;
}
.mode li.act:not(:has(a)), .mode a {
  padding: 8px;
  text-align: center;
  white-space: nowrap;
}
.mode li.act {
  font-weight: bold;
  background: #fc9 url(../img/act.gif) left top no-repeat;
  color: #600;
}
.mode li a {
  display: block;
  padding: 8px;
  color: #222;
  text-decoration: none;
  transition: .2s
}
.mode li a:hover {
  background: #fec;
  text-decoration: underline;
  color: #933;
}
.col20 {
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
}
.col20 {
  grid-template-columns: repeat(10, 1fr);
}
.col20 li:nth-child(-n+10) { border-bottom: 1px solid #999; }
.col20 li:nth-child(10) { border-right: none; }

h3 {
	margin: 1.5rem 0 2px;
	font-family: var(--header-font);
	font-size: 1.1rem;
	font-weight: bold;
}
.amount {
	padding-left: 1rem;
	font-family: var(--normal-font);
	font-size: 0.85rem;
	font-weight: normal;
}

.tb {
	width: 100%;
	border-collpapse: separate;
	border-spacing: 1px;
	font-size: 0.9rem;
	line-height: 1;
}
.tb th {
	padding: 4px 2px 3px;
	font-weight: normal; 
	background: #e5d5d0;
	border-right: 1px solid #ccb0b0;
	border-bottom: 1px solid #ccb0b0;
	white-space: nowrap;
}
.tb td { padding: 5px 2px; text-align: right; }
.tb tr:nth-child(odd) { background: #f8f0f0; }

td.rank, td.c { text-align: center; }
td.name { text-align: left; }
td.rank a, td.fp a { padding: 0px 4px; color: inherit; text-decoration: none; white-space: nowrap; }
td.team, td.score { text-align: left; white-space: nowrap; }
.mark { font-family: 'Kosugi', Roboto, sans-serif; }
.act { font-weight: bold; background: #fc9 url(../img/act.gif) left top no-repeat; }

.usage {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.usage .bar {
  width: 150px;
  height: 8px;
  background: #ddd;
  position: relative;
  border-radius: 4px;
}
.usage .bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--rate) * 1%);
  background: #2f8f6b;
  border-radius: 4px;
}

.up, .dn, .ti { margin: 0px auto; }
.up { background: url(../img/up.gif) no-repeat; width:12px; height:12px;}
.dn { background: url(../img/down.gif) no-repeat; width:12px; height:12px;}
.ti { background: url(../img/tie.gif) no-repeat; width:12px; height:12px;}
.detail { margin: 4px 0 1em; text-align: right; }
.ad { font-size: 80%; text-align: center; }
.leg { font-size: 0.9rem; text-align: right; }
td.add { padding: 0; text-align: center; }
td.add img { border: 0; }
#bottom_link {
	clear: both;
	margin: 1em 0em; padding: 4px;
	border-top: 1px dashed #999;
	text-align: center;
	font-size: 80%;
	line-height: 1.8;
}
@media screen and (max-width:679px) {

	.bar { display: none; }
	.usage { display: inline-block; }
	.mode { grid-auto-columns: auto; width: max-content; }
	.col5, .col8, .col20 {
	  width: auto;
	  font-size: 0.95rem;
	}
	.col8 {
	  grid-auto-flow: row;
	  grid-template-columns: repeat(4, 1fr);
	}
	.col20 {
	  grid-template-columns: repeat(5, 1fr);
	}
	.col8 li:nth-child(-n+4) { border-bottom: 1px solid #999; }
	.col8 li:nth-child(4) { border-right: none; }
	.col20 li:nth-child(-n+15) { border-bottom: 1px solid #999; }
	.col20 li:nth-child(5n) { border-right: none; }
}
@media screen and (max-width:499px) {
	.player {
		font-size: 100%;
		border-top: 1px solid #999;
	}
	.player tr {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px dashed #999;
		padding: 3px 0px;
	}
	.player tr::after {
		content: '';
		width: 100%;
	}
	.player tr.thd { display: none; }
	.player td:nth-child(n+5) {
		order: 2;
		font-size: 90%;
	}
	.player td:nth-child(1) {
		padding-top: 7px;
	}
	.player td:nth-child(4) {
		max-width: calc(100% - 4em);
	}
	.player td:nth-child(5) {
		margin-left: 5em;
	}
	.player td:nth-child(n+6)::before {
		content: " / ";
	}
	.add img { position: relative; top: 4px; }
}