*{margin:0;padding:0;box-sizing:border-box;overflow-wrap:break-word;word-wrap:break-word}html{background-color:hsl(0,0%,5%);color:hsl(0,0%,95%)}body{display:flex;flex-direction:column;min-height:100vh;hyphens:none;font-family:neue,sans-serif;font-size:max(1vmin,1rem)}html,body{font-size:100%}main{padding:1vmin}h1{font-size:max(2.2vmin,1.7rem);line-height:max(3.5vmin,2.5rem);color:#c7954d}h2{font-size:max(1.9vmin,1.4rem);line-height:max(3vmin,2rem)}h3{font-size:max(1.7vmin,1.3rem);line-height:max(2.8vmin,1.8rem)}h4{font-size:max(1.5vmin,1.2rem);line-height:max(2.6vmin,1.6rem);color:#b64662}h1,h2,h3,h5,h6{color:#c7954d}p,ol,ul{font-size:max(1vmin,1.2rem);line-height:max(2.6vmin,1.6rem);hyphens:auto}ol,ul{padding-left:1.2rem}ul{list-style-type:none}li{break-inside:avoid;margin-left:1rem}a{color:hsl(0,0%,95%)}* a,* a:link,* a:visited,* a:hover{color:inherit;text-decoration:none}img{max-width:100% !important;max-height:100%;height:auto}img:not([alt]){outline:#b64662 4px dashed !important}hr{border:0;height:1px;background-color:hsl(0,0%,15%);margin:1rem 0}router-outlet{flex-grow:1}@font-face{font-family:neue;font-style:normal;font-weight:normal;src:local("Helvetica Neue Regular"),local("Helvetica Regular");font-display:swap}@font-face{font-family:neue-italic;font-style:italic;font-weight:normal;src:local("Helvetica Neue Italic"),local("Helvetica Oblique");font-display:swap}@font-face{font-family:neue-bold;font-style:normal;font-weight:bold;src:local("Helvetica Neue Bold"),local("Helvetica Bold");font-display:swap}@font-face{font-family:neue-bolditalic;font-style:italic;font-weight:bold;src:local("Helvetica Neue Bold Italic"),local("Helvetica Bold Oblique");font-display:swap}body{font-family:neue,sans-serif}h1,h2,h3,h4,h5,h6{font-family:neue-bold,sans-serif}em,figcaption{font-family:neue-italic,sans-serif;color:#c7954d}strong,th{font-family:neue-bold,sans-serif;color:#c7954d}em strong,strong em{font-family:neue-bolditalic,sans-serif}button{color:#fff;background-color:#510014;text-decoration:none;font-size:max(1.4vw,1.1rem);border:medium solid #000;border-radius:.5rem;padding:1rem;font-family:neue-bold,sans-serif;cursor:pointer}button:hover{background-color:hsl(0,0%,35%)}button:active{background-color:hsl(0,0%,85%)}button:disabled,button:disabled:hover,button:disabled:active{display:none}.new-game{font-size:max(2vw,1.4rem)}.home{background-image:url("img/bg/majiang-750.avif");background-size:cover;background-repeat:no-repeat;background-position:center;height:calc(100vh - max(10vmin,100px));background-color:rgba(0,0,0,.3);background-blend-mode:darken}@media only screen{@media((min-width: 325px) and (max-width: 500px))or ((min-height: 325px) and (max-height: 500px)){.home{background-image:url("img/bg/majiang-500.avif")}}@media((min-width: 500px) and (max-width: 750px))or ((min-height: 500px) and (max-height: 750px)){.home{background-image:url("img/bg/majiang-750.avif")}}@media((min-width: 750px) and (max-width: 1000px))or ((min-height: 750px) and (max-height: 1000px)){.home{background-image:url("img/bg/majiang-1000.avif")}}@media((min-width: 1000px) and (max-width: 1250px))or ((min-height: 1000px) and (max-height: 1250px)){.home{background-image:url("img/bg/majiang-1250.avif")}}@media((min-width: 1250px) and (max-width: 1500px))or ((min-height: 1250px) and (max-height: 1500px)){.home{background-image:url("img/bg/majiang-1500.avif")}}@media((min-width: 1500px) and (max-width: 100000px))or ((min-height: 1500px) and (max-height: 100000px)){.home{background-image:url("img/bg/majiang-100000.avif")}}}header{position:sticky;top:0;z-index:2000;height:max(5vmin,50px);width:100%;color:#c7954d;background:url("img/tiles/zipai-fengpai-1-dong.svg");background-color:#002216;background-size:max(2.8vmin,25px);background-repeat:no-repeat;background-position:left 7px top 7px;display:flex;flex-flow:row nowrap;justify-content:space-evenly;padding:.5rem .2rem}footer{position:sticky;bottom:0;z-index:2000;height:max(5vmin,50px);width:100%;background-color:#000;color:#fff}navigation-outlet nav{display:flex;flex-flow:row nowrap;justify-content:space-evenly;width:100%;line-height:1rem;padding:.3rem;color:#c7954d}navigation-outlet nav a,navigation-outlet nav a:link,navigation-outlet nav a:visited,navigation-outlet nav a:hover{text-decoration:none}navigation-outlet nav .navtext{display:inline;color:#000}navigation-outlet nav .navicon{display:none;text-align:center}navigation-outlet nav img{padding:0;width:max(2vmin,20px)}@media(max-width: 325px){navigation-outlet nav .navtext{display:none}navigation-outlet nav .navicon{display:inline}}.active{filter:invert(41%) sepia(50%) saturate(447%) hue-rotate(108deg) brightness(98%) contrast(91%)}.inactive{filter:invert(95%) sepia(48%) saturate(0%) hue-rotate(176deg) brightness(105%) contrast(106%)}.center{text-align:center}.right{text-align:right}.left{text-align:left}.justify{float:right}.small{font-size:max(.8vmin,.8rem);line-height:max(1.4vmin,1rem)}.middle{display:grid;place-items:center}.columns{columns:auto 30rem;column-gap:2rem;border-bottom:medium dotted #750b26;column-rule:medium dotted #750b26;padding:1rem}.columns p,.columns h2,.columns h3,.columns h4,.columns h5,.columns h6,.columns ol,.columns ul{padding-bottom:1rem}.columns:nth-child(2n+1){background-color:hsl(0,0%,7%)}.fanzhong{cursor:pointer;text-decoration:wavy underline #338669}.fanzhong::after{content:" 🔈"}.winds{display:inline-grid;margin:.5rem;grid-template-columns:repeat(3, 33.33333%);grid-template-rows:repeat(4, 33.33333%);grid-template-areas:".		south	." "west	.		east" ".		north	.";align-items:center;justify-content:center;break-inside:avoid;width:8rem;height:8rem;background-color:hsl(0,0%,10%)}.wind1{grid-area:east;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.wind2{grid-area:south;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.wind3{grid-area:west;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.wind4{grid-area:north;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.east{background-color:#002216}.south{background-color:#331e00}.west{background-color:#2e000c}.north{background-color:#000}.exclude{font-size:max(.8vmin,1rem);line-height:max(1.4vmin,1rem);color:hsl(0,0%,65%)}.term{font-variant:small-caps;color:#c7954d}.table{overflow:hidden}@media only screen and (width <= calc(325px + 0.8rem)){.table{padding:0}}.table-grid{position:relative;display:grid;grid-template-columns:20% 60% 20%;grid-template-rows:20% 60% 20%;grid-template-areas:"user3		player2		user2" "player3	control		player1" "user4		player4		user1";grid-gap:0;align-content:space-between;justify-content:space-around;background-color:#08563a;color:#fff;width:min(96vh - max(8vmin,6rem),96vw - max(8vmin,6rem));height:min(96vh - max(8vmin,6rem),96vw - max(8vmin,6rem));min-width:325px;min-height:325px;margin:0 auto}.grid-player1{grid-area:player1;display:grid;grid-template-rows:repeat(3, 33.3333%);grid-template-areas:"p1-flowers" "p1-melds" "p1-door";transform:rotate(270deg) translate(-33.3333%, -100%);width:300%;height:33.3333%}.grid-player1 .grid-p1-flowers{grid-area:p1-flowers;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:flex-start}.grid-player1 .grid-p1-door{grid-area:p1-door;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:center}.grid-player1 .grid-p1-melds{grid-area:p1-melds;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:flex-end}.grid-player2{grid-area:player2;display:grid;grid-template-rows:repeat(3, 33.3333%);grid-template-areas:"p2-flowers" "p2-melds" "p2-door";transform:rotate(180deg);height:100%}.grid-player2 .grid-p2-flowers{grid-area:p2-flowers;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:flex-start}.grid-player2 .grid-p2-door{grid-area:p2-door;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:center}.grid-player2 .grid-p2-melds{grid-area:p2-melds;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:flex-end}.grid-player3{grid-area:player3;display:grid;grid-template-rows:repeat(3, 33.3333%);grid-template-areas:"p3-flowers" "p3-melds" "p3-door";transform:rotate(90deg) translate(33.3333%, 100%);width:300%;height:33.3333%}.grid-player3 .grid-p3-flowers{grid-area:p3-flowers;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:flex-start}.grid-player3 .grid-p3-door{grid-area:p3-door;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:center}.grid-player3 .grid-p3-melds{grid-area:p3-melds;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:flex-end}.grid-player4{grid-area:player4;display:grid;grid-template-rows:repeat(3, 33.3333%);grid-template-areas:"p4-flowers" "p4-melds" "p4-door";align-content:flex-start;height:100%}.grid-player4 .grid-p4-flowers{grid-area:p4-flowers;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:flex-start}.grid-player4 .grid-p4-door{grid-area:p4-door;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:center}.grid-player4 .grid-p4-melds{grid-area:p4-melds;display:flex;flex-flow:wrap;align-content:flex-start;justify-content:flex-end}.grid-control{grid-area:control;aspect-ratio:1/1;display:grid;grid-template-columns:repeat(3, 33.33333%);grid-template-rows:repeat(3, 33.33333%);grid-template-areas:"discard3	discard3	discard2" "discard4	counter		discard2" "discard4	discard1	discard1"}.control-player4{grid-area:discard1;display:flex;flex-wrap:wrap;align-content:flex-start;padding:.1rem}.control-player1{grid-area:discard2;display:flex;flex-wrap:wrap;align-content:flex-start;padding:.1rem;transform:translate(-25%, 50%) rotate(270deg);width:200%;height:50%}.control-player2{grid-area:discard3;display:flex;flex-wrap:wrap;align-content:flex-start;padding:.1rem;transform:rotate(180deg)}.control-player3{grid-area:discard4;display:flex;flex-wrap:wrap;align-content:flex-start;padding:.1rem;transform:translate(-25%, 50%) rotate(90deg);width:200%;height:50%}.control-counter{grid-area:counter;display:grid;grid-template-columns:repeat(3, 33.33333%);grid-template-rows:repeat(3, 33.33333%);grid-template-areas:"wind2	drop2	wind1" "drop3	tiles	drop1" "wind3	drop4	wind4";align-items:center;justify-content:center;justify-items:center;font-size:max(2vmin,10px);color:hsl(0,0%,90%);border:1px solid hsl(0,0%,15%);text-shadow:1px 1px 2px #750b26}.control-wind1{grid-area:wind1;transform:rotate(270deg)}.control-wind2{grid-area:wind2;transform:rotate(180deg)}.control-wind3{grid-area:wind3;transform:rotate(90deg)}.control-wind4{grid-area:wind4}.control-drop1{grid-area:drop1;transform:rotate(270deg)}.control-drop2{grid-area:drop2;transform:rotate(180deg)}.control-drop3{grid-area:drop3;transform:rotate(90deg)}.control-drop4{grid-area:drop4}.control-tiles{grid-area:tiles}.wind{width:max(4vmin,1.5rem);filter:drop-shadow(1px 1px 3px hsl(0, 0%, 100%))}.prevailing{filter:invert(1) drop-shadow(1px 1px 5px hsl(0, 0%, 0%))}.grid-user1{grid-area:user1;display:grid;grid-template-columns:repeat(2, 50%);grid-template-areas:"user1-points user1-seatwind";transform:rotate(270deg);padding:.3rem}.grid-user1 .grid-user1-points{grid-area:user1-points;display:flex;flex-flow:wrap;align-content:flex-end;justify-content:flex-start}.grid-user1 .grid-user1-seatwind{grid-area:user1-seatwind;display:flex;flex-flow:wrap;align-content:flex-end;justify-content:flex-end}.grid-user2{grid-area:user2;display:grid;grid-template-columns:repeat(2, 50%);grid-template-areas:"user2-points user2-seatwind";transform:rotate(180deg);padding:.3rem}.grid-user2 .grid-user2-points{grid-area:user2-points;display:flex;flex-flow:wrap;align-content:flex-end;justify-content:flex-start}.grid-user2 .grid-user2-seatwind{grid-area:user2-seatwind;display:flex;flex-flow:wrap;align-content:flex-end;justify-content:flex-end}.grid-user3{grid-area:user3;display:grid;grid-template-columns:repeat(2, 50%);grid-template-areas:"user3-points user3-seatwind";transform:rotate(90deg);padding:.3rem}.grid-user3 .grid-user3-points{grid-area:user3-points;display:flex;flex-flow:wrap;align-content:flex-end;justify-content:flex-start}.grid-user3 .grid-user3-seatwind{grid-area:user3-seatwind;display:flex;flex-flow:wrap;align-content:flex-end;justify-content:flex-end}.grid-user4{grid-area:user4;display:grid;grid-template-columns:repeat(2, 50%);grid-template-areas:"user4-points user4-seatwind";transform:rotate(0);padding:.3rem}.grid-user4 .grid-user4-points{grid-area:user4-points;display:flex;flex-flow:wrap;align-content:flex-end;justify-content:flex-start}.grid-user4 .grid-user4-seatwind{grid-area:user4-seatwind;display:flex;flex-flow:wrap;align-content:flex-end;justify-content:flex-end}.points{font-size:max(2vmin,20px);color:hsl(0,0%,90%);text-shadow:1px 1px 2px #000;opacity:.75}.tile>img{height:max(4.2vmin,1rem);width:auto}.break{content:"";height:0;flex-basis:100%}.meld-end{margin-right:1vmin}.wrap{display:flex;flex-flow:wrap;align-items:flex-end}.hilite{filter:drop-shadow(2px 2px 3px #750b26) drop-shadow(-2px -2px 3px #750b26)}.pick{transform-origin:bottom;transform:scale(2);display:flex;align-self:flex-start}.new-tile{margin-left:1vmin;animation:come-down .5s ease-in;transition:transform}@keyframes come-down{0%{transform:translateY(-4rem) scale(5)}100%{transform:translateY(0) scale(1)}}