#w{ display:grid; grid-template-columns: repeat(7, 1fr); grid-gap: 1px; letter-spacing: .15rem; margin: 1rem 0; } .g>div{padding: .2rem 0;} .g>div:nth-child(1){background: #eee;box-shadow: 0 0 1px #111;} .g.in{box-shadow: 0 0 1px rgb(214, 48, 49);background: rgb(214, 48, 49, 0.1);} .g>div.s{background:rgb(116, 185, 255, 0.5);} .g>div.h{background:rgb(255, 118, 117, 0.5);} .g>div>span{ display: block; max-width: calc(100vw / 7 - 1vw); line-height: 1.2rem; } .g em{ margin: .5vw; font-size: 1rem; text-decoration: underline green; -webkit-text-decoration:underline green; } #w em{display: block;} div.non{padding: 1.5rem 0;} .cm.q { background: green; color: #fff; font-weight: 700; } .btn-yosou { display: block; font-size: 10px; color: #007bff; text-decoration: underline; margin-top: 2px; } div[data-href] { cursor: pointer; } #m{ display:grid; grid-template-columns: repeat(10,1fr); text-align:center; font-size: min(3.5vw, 16px); margin:1rem 0; } #m div{ border-bottom: .2em solid var(--main); color: var(--main); } #m div.in{ background: var(--main); color: #fff; } #m div:hover{background: var(--main);color: #fff;} .detail{display:none;} .detail.in{ grid-column: span 7; display:block;animation: fadein 2s; margin: 1rem 0; text-shadow: 0.5px 0.5px #fff; text-align: center; } .detail.in #board{ background: green; color: #fff; padding: .5rem .2rem; } .win,.lose,.save{ padding: 0.1rem; padding-left: .2rem; margin: .2rem; } .win{background: orangered;} .lose{background: navy;} .save{background: orange;} #board table{ width:100%; border-collapse: collapse; background: #666; margin: .7rem 0; table-layout: fixed; } #board thead th{ background: black; } #board table td,#board table th{ border: solid .5px #ccc; padding:min(.4rem) min(.1rem); } #board tbody th{ background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); color: black; box-shadow: 0 0 1px #000; } #board td:nth-last-child(3){ background: #fff; color: black; box-shadow: 0 0 1px #000; } #board .u{ text-decoration: underline; text-underline-position: under; } #board .u:hover{background: skyblue;} #stats .b{font-weight: bold;} #stats .r{color: red;} #stats span:not(.sd){ display: block; border-bottom: solid .5px #ccc; overflow:hidden; } #stats td{vertical-align: top;} #tt{width: 100%;} #tt caption{ background: orange; padding: .5rem; font-size: 1.4rem; } #tt th{ background: #666; color: #fff; text-shadow:initial; } #tt th:nth-child(2){width: 10%;} #tt .o,#tt .a{background: wheat;} .sd img{ box-shadow: 0 0 5px gray; border-radius: 50%; background: #f0f8ff; padding: .2rem; width: min(calc(100vw/20), 1.6rem); vertical-align: text-bottom; margin: 0 .5rem; } .sd img:hover{background: #fff;} .wt{ width:16px; margin: 2px; } .f-red{filter: brightness(0) saturate(100%) invert(28%) sepia(97%) saturate(7027%) hue-rotate(356deg) brightness(102%) contrast(117%);} .f-gray{filter: brightness(0) saturate(100%) invert(50%) sepia(8%) saturate(8%) hue-rotate(351deg) brightness(91%) contrast(81%);} .f-blue{filter: brightness(0) saturate(100%) invert(29%) sepia(56%) saturate(2304%) hue-rotate(189deg) brightness(91%) contrast(103%);} .u,.sd img{cursor: pointer;} @media screen and (min-width: 600px){ .g>div>span.a, .g>div:not(:nth-child(1)), #w em, .g>div:nth-child(1)>span{ display: inline-block; } .non,.cm{font-size: .8rem;} .vs:hover,.vs.in:hover{cursor: pointer; background: green;color: #fff;} .stt-link:hover { background: rgba(0, 128, 0, 0.15); box-shadow: inset 0 0 4px rgba(0, 128, 0, 0.3); } }