* { font-family:sans-serif; }
.chart tr { background: #bcb; }
.chart tr:nth-child(2n) { background: #ded; }
body {margin: 0 auto; width: 1200px;}
*:target {background:#ff0;}
.buffer {height:800px;}
.hi {font-weight:bold;}
.p1 {background-color:#dc8;}
.p2 {background-color:#ccc;}
.p3 {background-color:#da8;}
.p4 {background-color:#bbd;}
.no {text-decoration: line-through;}
.hand {height: 70px; transform-origin:0 70px; width:1000px;}
.dora {height: 52px;}
.hand .tile {width: 50px; height:70px; float: left; background-size: 100% 100%; margin-right: 2px;}
.hand .vert {margin: 10px 12px 0 10px; transform:rotate(-90deg);}
.hand .mink {margin: 0 -25px; transform:translate(35px, -42px) rotate(-90deg);}
.wall .tile {width: 50px; height:70px; float: left; background-size: 100% 100%; margin: 0 2px 2px 0;}
.hand .sep {float:left;width:20px; height: 70px;}
.wall .sep {float:left;width:8px; height: 70px;}
.slp {float:clear;width:8px; height: 72px;}
.t1m {background-image: url('img/1m.png');}
.t1p {background-image: url('img/1p.png');}
.t1s {background-image: url('img/1s.png');}
.t1z {background-image: url('img/1z.png');}
.t2m {background-image: url('img/2m.png');}
.t2p {background-image: url('img/2p.png');}
.t2s {background-image: url('img/2s.png');}
.t2z {background-image: url('img/2z.png');}
.t3m {background-image: url('img/3m.png');}
.t3p {background-image: url('img/3p.png');}
.t3s {background-image: url('img/3s.png');}
.t3z {background-image: url('img/3z.png');}
.t4m {background-image: url('img/4m.png');}
.t4p {background-image: url('img/4p.png');}
.t4s {background-image: url('img/4s.png');}
.t4z {background-image: url('img/4z.png');}
.t5m {background-image: url('img/5m.png');}
.t5p {background-image: url('img/5p.png');}
.t5s {background-image: url('img/5s.png');}
.t5z {background-image: url('img/5z.png');}
.t6m {background-image: url('img/6m.png');}
.t6p {background-image: url('img/6p.png');}
.t6s {background-image: url('img/6s.png');}
.t6z {background-image: url('img/6z.png');}
.t7m {background-image: url('img/7m.png');}
.t7p {background-image: url('img/7p.png');}
.t7s {background-image: url('img/7s.png');}
.t7z {background-image: url('img/7z.png');}
.t8m {background-image: url('img/8m.png');}
.t8p {background-image: url('img/8p.png');}
.t8s {background-image: url('img/8s.png');}
.t9m {background-image: url('img/9m.png');}
.t9p {background-image: url('img/9p.png');}
.t9s {background-image: url('img/9s.png');}
.t0m {background-image: url('img/0m.png');}
.t0p {background-image: url('img/0p.png');}
.t0s {background-image: url('img/0s.png');}
.tb {background-image: url('img/back.png');}
.disc {transform:translatey(-20px); filter:brightness(90%);}
.tdo, .hand .t0m, .hand .t0p, .hand .t0s {filter: sepia(50%);}
svg {transform:scaley(-100%);}
svg .gh {fill: none; stroke: #eee; stroke-width: 4px;}
svg .gm {stroke-width: 10px;}
svg .gz {stroke: #fcc;}
svg .gv {fill:none; stroke: #ddd; stroke-width: 2px;}
svg .gb {stroke: #aaa;}
svg .gf {stroke: #fd8;}
svg .p1 {stroke: #dc8; stroke-width: 6px; fill:none;}
svg .p2 {stroke: #ccc; stroke-width: 6px; fill:none;}
svg .p3 {stroke: #da8; stroke-width: 6px; fill:none;}
svg .p4 {stroke: #bbd; stroke-width: 6px; fill:none;}
svg .f1 {fill: #dc8; stroke-width: 0px;}
svg .f2 {fill: #ccc; stroke-width: 0px;}
svg .f3 {fill: #da8; stroke-width: 0px;}
svg .f4 {fill: #bbd; stroke-width: 0px;}
svg .f1:nth-child(2n) {fill: #cb7;}
svg .f2:nth-child(2n) {fill: #bbb;}
svg .f3:nth-child(2n) {fill: #c97;}
svg .f4:nth-child(2n) {fill: #aac;}
svg text {transform:scaley(-100%); font-size:0.8em;}
svg .gt {stroke: #555; stroke-width: 10px;}
svg .pd {stroke-dasharray: 10;}
.draws {width: 3400px;}
.draws th {width: 25%;}
.draws td {height: 74px; vertical-align:top; padding:32px 0 0 24px;}
.draws .hand {position:absolute; }
.call {float:left;height:0;position:relative;text-align:middle;}
.call.riichi {top:-40px; left:8px;}
.call.ckan {left:10px; top:-20px;}
.call.chii {left:20px;}
.call.pon {left:20px;}
.call.ron {top:50px; left:14px;}
.call.tsumo {top:-20px; left:4px;}
.call.draw {left:10px; top:-20px;}
.draws *:link, .draws *:hover, .draws *:active, .draws *:visited {color:inherit; text-decoration:none;}