*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;background-color:#d0d5bf;display:flex;flex-direction:column;min-height:100vh}.game_box{width:100%;max-width:640px;align-self:center}.interaction-block{position:fixed;inset:0;z-index:999;pointer-events:none}.interaction-block.active{pointer-events:all}.scoreboard{padding:5px;display:flex;justify-content:space-around;align-items:center;gap:0}.player{display:flex;align-items:center;gap:8px}.player-info{flex:0 0 auto;width:110px}.player-info h2{font-size:22px;margin-bottom:2px}.not_turn{opacity:.4}.player-info p{font-size:18px;color:#666}.you{padding-left:6px}.icon-and-total{display:flex;flex-direction:column;align-items:center}.total{font-size:14px;text-align:center;color:#333;height:20px}.getting-close{color:#941919;font-weight:700}.player-icon{background-image:url(../images/player0.svg);background-repeat:no-repeat;background-position:center;background-size:34px auto;width:34px;height:50px}.player-white{background-image:url(../images/playerw.svg);background-repeat:no-repeat;background-position:center;background-size:34px auto}.player-black{background-image:url(../images/playerb.svg);background-repeat:no-repeat;background-position:center;background-size:34px auto}.bot-icon{background-image:url(../images/bot0.svg);background-repeat:no-repeat;background-position:center;background-size:34px auto;width:34px;height:50px}.bot-white{background-image:url(../images/botw.svg);background-repeat:no-repeat;background-position:center;background-size:34px auto}.bot-black{background-image:url(../images/botb.svg);background-repeat:no-repeat;background-position:center;background-size:34px auto}.score-display{display:flex;flex:1;flex-direction:column;gap:4px;align-items:center;justify-content:center}.scoredot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}.scoredot.black{background:#000;color:#fff}.scoredot.white{background:#fff;color:#000;border:2px solid #333}.board-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px;gap:20px}#game_grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;margin:auto;padding:0;clear:both}.cell{width:50px;height:50px;border:1px solid #666;background:#c9c89a}.tile-action-button{width:120px;height:40px;margin-top:-2px;border:none;background-color:#476138;color:#fff;font-size:1.2rem;border-radius:20px;cursor:pointer}.tile-selection{display:flex;gap:12px;justify-content:flex-start;width:98%;max-width:900px;margin:0 auto 5px;overflow-x:auto;box-sizing:border-box}@keyframes messageFadeIn{0%{opacity:0}to{opacity:1}}.message-fade-in{animation:messageFadeIn .25s ease}#message{clear:both;margin:5px;width:100%;text-align:center;font-size:1rem;font-weight:200;padding:6px;flex:1 1 0;align-self:stretch;min-width:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.pick-tile-button{width:120px;height:40px;margin-top:-2px;border:none;background-color:#476138;color:#fff;font-size:1.2rem;border-radius:8px;cursor:pointer}.tile-set{border-radius:12px;padding:12px;flex:0 0 auto;min-width:100px;max-width:120px;min-height:100px;box-sizing:border-box}.tile-pick{border-radius:12px;padding:8px;flex:0 0 120px;width:118px;height:120px;max-width:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent}.tile-wrapper{display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;user-select:none}.tile-wrapper:active{cursor:grabbing}.tile-wrapper img{pointer-events:none;display:block}.tile-wrapper.dragging{visibility:hidden;opacity:0}#little_tiles_box{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.little_tile{width:10px;height:25px;border-radius:3px;cursor:pointer;transition:transform .2s;background:#5a5a3d}.little_tile:hover{transform:scale(1.05)}.tile-set:last-child{display:flex;align-items:center;justify-content:center}.chosen_tile{background:#fff;border:1px solid #333;border-radius:4px}.chosen_tile circle{pointer-events:none}.drag-ghost{position:fixed;left:0;top:0;pointer-events:none;z-index:1000;opacity:.85;background:transparent;border:none;padding:0;display:block}.drag-ghost .tile-wrapper{cursor:default}.drag-ghost img{display:block;width:112px;height:28px}.tall-tile{width:50px;height:200px;background:#fff;border:3px solid #333;border-radius:8px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:10px}.off{cursor:default}.used{opacity:.4}.color_dot{display:inline-block;padding:0;margin:0;float:left;border:1px solid #666}#dots{cursor:pointer}.tile{display:block;width:96px;height:24px;margin:4px;padding:0;position:relative;float:left;border:1px solid #999}.grid_square{box-sizing:border-box;display:block;width:28px;height:28px;margin:0;padding:0;line-height:.1;position:relative;float:left;border:.5px solid #999}.grid_square_button{display:block;width:28px;height:28px;margin:0;padding:0;position:relative;cursor:pointer;opacity:.01}.tiledot-white{background:#c9c89a url(../images/whitedot.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black{background:#c9c89a url(../images/blackdot.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-e{background:#c9c89a url(../images/lines/whitedot-e.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-w{background:#c9c89a url(../images/lines/whitedot-w.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-n{background:#c9c89a url(../images/lines/whitedot-n.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-s{background:#c9c89a url(../images/lines/whitedot-s.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-en{background:#c9c89a url(../images/lines/whitedot-en.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-es{background:#c9c89a url(../images/lines/whitedot-es.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-ew{background:#c9c89a url(../images/lines/whitedot-ew.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-ns{background:#c9c89a url(../images/lines/whitedot-ns.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-wn{background:#c9c89a url(../images/lines/whitedot-wn.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-white-ws{background:#c9c89a url(../images/lines/whitedot-ws.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-e{background:#c9c89a url(../images/lines/blackdot-e.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-w{background:#c9c89a url(../images/lines/blackdot-w.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-n{background:#c9c89a url(../images/lines/blackdot-n.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-s{background:#c9c89a url(../images/lines/blackdot-s.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-en{background:#c9c89a url(../images/lines/blackdot-en.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-es{background:#c9c89a url(../images/lines/blackdot-es.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-ew{background:#c9c89a url(../images/lines/blackdot-ew.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-ns{background:#c9c89a url(../images/lines/blackdot-ns.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-wn{background:#c9c89a url(../images/lines/blackdot-wn.svg) no-repeat 50% 50%;background-origin:border-box}.tiledot-black-ws{background:#c9c89a url(../images/lines/blackdot-ws.svg) no-repeat 50% 50%;background-origin:border-box}.hi_sqr,.free_to_slide{background-color:#5a5a3d}.slide-preview{background-color:#9db536;outline:2px solid #c9c89a}@keyframes fadeBg{0%{background-color:#9db536}to{background-color:#c9c89a}}.h_0{border-width:.5px;border-color:#333;border-right-style:hidden}.tile-new{animation:fadeBg 5s forwards}.h_1,.h_2{border-width:.5px;border-color:#333;border-left-style:hidden;border-right-style:hidden}.h_3{border-width:.5px;border-color:#333;border-left-style:hidden}.v_0{border-width:.5px;border-color:#333;border-bottom-style:hidden}.v_1,.v_2{border-width:.5px;border-color:#333;border-top-style:hidden;border-bottom-style:hidden}.v_3{border-width:.5px;border-color:#333;border-top-style:hidden}@keyframes botRotation0-90{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes botRotation0-180{0%{transform:rotate(0)}to{transform:rotate(180deg)}}@keyframes botRotation0-270{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.animate-bot-tile90{animation:botRotation0-90 .3s ease-in-out forwards}.animate-bot-tile180{animation:botRotation0-180 .5s ease-in-out forwards}.animate-bot-tile270{animation:botRotation0-270 .7s ease-in-out forwards}@keyframes tileRotation0{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes tileRotation90{0%{transform:rotate(90deg)}to{transform:rotate(180deg)}}@keyframes tileRotation180{0%{transform:rotate(180deg)}to{transform:rotate(270deg)}}@keyframes tileRotation270{0%{transform:rotate(270deg)}to{transform:rotate(360deg)}}.animate-tile0{animation:tileRotation0 .3s ease-in-out}.animate-tile90{animation:tileRotation90 .3s ease-in-out}.animate-tile180{animation:tileRotation180 .3s ease-in-out}.animate-tile270{animation:tileRotation270 .3s ease-in-out}.rotated0{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg)}.rotated90{transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg)}.rotated180{transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg)}.rotated270{transform:rotate(270deg);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg)}