img,iframe{max-width:100%;height:auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{font-family:sans;font-size:20px;background:radial-gradient(hsl(0,100%,27%) 4%,hsl(0,100%,18%) 9%,hsla(0,100%,20%,0) 9%) 0 0,radial-gradient(hsl(0,100%,27%) 4%,hsl(0,100%,18%) 8%,hsla(0,100%,20%,0) 10%) 50px 50px,radial-gradient(hsla(0,100%,30%,0.8) 20%,hsla(0,100%,20%,0)) 50px 0,radial-gradient(hsla(0,100%,30%,0.8) 20%,hsla(0,100%,20%,0)) 0 50px,radial-gradient(hsla(0,100%,20%,1) 35%,hsla(0,100%,20%,0) 60%) 50px 0,radial-gradient(hsla(0,100%,20%,1) 35%,hsla(0,100%,20%,0) 60%) 100px 50px,radial-gradient(hsla(0,100%,15%,0.7),hsla(0,100%,20%,0)) 0 0,radial-gradient(hsla(0,100%,15%,0.7),hsla(0,100%,20%,0)) 50px 50px,linear-gradient(45deg,hsla(0,100%,20%,0) 49%,hsla(0,100%,1%,1) 50%,hsla(0,100%,20%,0) 70%) 0 0,linear-gradient(-45deg,hsla(0,100%,20%,0) 49%,hsla(0,100%,1%,1) 50%,hsla(0,100%,20%,0) 70%) 0 0;background-color:#300;background-size:100px 100px;-webkit-user-select:none;margin:8px auto;width:calc(40em + 40px + 1em);} .tile{font-weight:bold;font-family:serif;display:inline-block;width:1.5em;height:2em;background:#eee;border:1px solid #ddd;border-radius:0.25em;text-align:center;box-shadow:1px 1px 4px #999;padding:0.25em;background:linear-gradient(135deg,#eee 0%,#eed 100%);} .tile b{box-shadow:inset -2px -2px 6px #fff;border-radius:1em;display:inline-block;width:1em;height:1em;text-align:center;vertical-align:center;padding:0.25em;text-shadow:0 0 1px #333;} .blue{color:#36c;} .yellow{color:#cb0;} .black{color:#222;} .red{color:#c33;} .joker{color:#c90;} #grid{display:inline-block;width:calc(40em + 40px);height:calc(20em + 16px);border:2px solid #393;box-shadow:0 0 8px #000;border-radius:0.5em;background:radial-gradient(ellipse at center,rgba(255,255,255,0) 0%,rgba(0,0,0,0.6) 100%),repeating-radial-gradient(ellipse at 0 84%,rgba(255,255,255,0) 0%,rgba(128,192,64,0.05) 0.25%),repeating-radial-gradient(ellipse at 100% 6%,rgba(255,255,255,0) 0%,rgba(128,192,64,0.05) 0.25%),repeating-radial-gradient(ellipse at 12% 0,rgba(255,255,255,0) 0%,rgba(128,192,64,0.05) 0.25%),repeating-radial-gradient(ellipse at 67% 100%,rgba(255,255,255,0) 0%,rgba(192,192,64,0.05) 0.25%),#008800;} .cell{display:inline-block;width:2em;height:2.5em;border:1px solid rgba(220,220,220,0.1);vertical-align:top;} #tileStack{color:#3e3;font-weight:bold;text-shadow:0 0 1px #060;display:inline-block;} ul{display:inline-block;vertical-align:top;margin:0;list-style-type:none;padding:0;} section{color:#fff;border:2px solid #393;background:#060;box-shadow:0 0 8px #000;padding:0.5em;display:inline-block;vertical-align:top;border-radius:0.5em;} button{border:0;border-radius:0.5em;padding:0.5em 1em;background:linear-gradient(to bottom,#bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);color:white;text-shadow:0 0 8px #000;box-shadow:0 0 4px rgba(0,0,0,0.5);margin-right:2em;} p{margin:0.5em 0;} input[type='text']{padding:0.25em;border:1px solid #999;border-radius:0.5em;} #players{margin:0.5em 0;} #rack{margin:0.5em 2px;width:calc(40em + 40px);background:rgba(0,0,0,0.1);} #chat,#info{width:calc(20em - 20px);margin-right:1em;} #logs{font-size:80%;} #name{width:6em;border-top-right-radius:0;border-bottom-right-radius:0;} #say{width:calc(100% - 7.5em);border-top-left-radius:0;border-bottom-left-radius:0;} #newGame{visibility:hidden;} #draw{width:calc(40em + 40px);} #undo{display:none;} .selected .tile{box-shadow:#9cf 0 0 4px 4px;} #info p{display:inline-block;margin:0 0 0 1em;vertical-align:middle;} #sayForm button{display:none;}