@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css");*{margin:0;padding:0;list-style:none;outline:none;box-sizing:border-box}button{background-color:transparent}button:focus{outline:none}img{vertical-align:top;max-width:100%}a{text-decoration:none}html,body{min-height:100vh}body{display:flex;background-color:#555}#app{width:100%;display:flex}#app,#app *{color:#fff}#app h1{font-weight:600}#app .btn{padding:8px 16px;border-radius:4px;cursor:pointer;box-shadow:none}#app .btn:disabled{cursor:default;pointer-events:none}#app .btn.blue{border:1px solid #35a4ff;background-color:#35a4ff}#app .btn.blue:hover{filter:brightness(1.1)}#app .btn.white{background-color:transparent;border:1px solid #fff}#app .btn.white:hover{box-shadow:0 0 5px #fff}#app .user-count{color:#fff}#initial{width:400px;height:300px;margin:auto;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center}@media screen and (max-width: 575px){#initial{padding:0 10px}}#initial h1{margin:45px 0 40px;font-size:64px}@media screen and (min-width: 576px){#initial h1{margin:0 0 80px;font-size:72px}}#initial input{margin-bottom:20px;padding:8px 16px;width:100%;font-size:22px;color:#fff;border:1px solid #eee;border-radius:4px;background-color:transparent}@media screen and (min-width: 576px){#initial input{font-size:24px}}#initial input:focus{box-shadow:0 0 5px #fff}#initial input::placeholder{color:#bbb}#initial button{font-size:18px}@media screen and (min-width: 576px){#initial button{font-size:20px}}#initial button:nth-child(1){padding:8px 0;margin-right:10px;flex-grow:1}#initial button:nth-child(2){width:172px}#initial .user-count{position:fixed;top:24px;right:15px;font-size:20px}#initial .user-count i{display:none}@media screen and (min-width: 576px){#initial .user-count{right:50px;font-size:22px}}#hall{position:relative;width:100%}#hall h1{padding:20px 0 10px 10px;margin:0 10px;font-size:44px;border-bottom:4px solid #ccc}@media screen and (min-width: 576px){#hall h1{padding:20px 50px 25px;margin:0;font-size:52px;border:none}}#hall .table{margin:0 10px;padding-bottom:60px;width:calc(100% - 20px);font-size:18px;overflow-y:auto}@media screen and (min-width: 576px){#hall .table{margin:0 auto;padding-bottom:80px;width:calc(100% - 100px);font-size:22px}}#hall .thead{display:none;padding-bottom:15px;border-bottom:4px solid #ccc}@media screen and (min-width: 576px){#hall .thead{display:flex}}#hall .thead .field:nth-child(1),#hall .room-item .room-name{padding-bottom:22px;width:100%;font-size:22px}@media screen and (min-width: 576px){#hall .thead .field:nth-child(1),#hall .room-item .room-name{padding:0 30px;width:64%}}#hall .thead .field:nth-child(2)::before,#hall .room-item .player-count::before{content:'\f007';font-family:'Font Awesome 5 Free';font-weight:900;margin-right:8px}@media screen and (min-width: 576px){#hall .thead .field:nth-child(2),#hall .room-item .player-count{text-align:center;width:18%}#hall .thead .field:nth-child(2)::before,#hall .room-item .player-count::before{display:none}}#hall .thead .field:nth-child(3),#hall .room-item .room-status{margin-right:15px;margin-left:auto}@media screen and (min-width: 576px){#hall .thead .field:nth-child(3),#hall .room-item .room-status{order:1;margin:0;width:18%;text-align:center}}#hall .room-item{display:flex;flex-wrap:wrap;align-items:flex-end;padding:10px 15px;margin-top:10px;background-color:#666;border-radius:10px}#hall .room-item:hover{background-color:#777;cursor:pointer}@media screen and (min-width: 576px){#hall .room-item{padding:10px 0;margin:0;background-color:transparent;border-radius:0;border-bottom:2px solid #ccc}}#hall #create-room{position:fixed;bottom:0;padding:8px 16px;width:100%;font-size:22px;border-radius:0}@media screen and (min-width: 576px){#hall #create-room{right:50px;bottom:20px;width:auto;border-radius:4px}}#hall .user-count{position:absolute;top:40px;right:15px;font-size:22px}#hall .user-count span{display:none}@media screen and (min-width: 576px){#hall .user-count{top:24px;right:50px}#hall .user-count span{display:inline}#hall .user-count i{display:none}}#room{width:100%;height:auto;position:relative;display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 1200px){#room{flex-direction:row}}#room #panel{padding:10px 10px;width:100%}@media screen and (min-width: 1200px){#room #panel{padding:33px 0 0 50px;width:0;flex-grow:1}}#room .player-list{margin-bottom:10px}#room .player-list .player{padding:10px 0 10px 15px;display:flex;align-items:center;height:63px;border-bottom:1px solid #fff;font-size:22px;opacity:0.5}@media screen and (min-width: 576px){#room .player-list .player{font-size:28px}}#room .player-list .player,#room .player-list .player *{color:#fff}#room .player-list .player.active{opacity:1}#room .player-list .player .color{width:30px;height:30px;background-color:transparent;border-radius:50%;transform:translateY(2px);box-shadow:0 0 5px #aaa}#room .player-list .player .color.show.black{background-color:#000}#room .player-list .player .color.show.white{background-color:#fff}#room .player-list .player .user-name{margin-left:30px}#room .player-list .player.me .user-name{color:#8f91ff}#room .player-list .player .ready,#room .player-list .player .time-left{margin:0 15px 0 auto}#room .player-list .player .time-left.warn{color:#f32}#room .other{display:flex;align-items:flex-end}#room .other .btn{margin:10px 0 10px;padding:6px 0;width:140px;font-size:20px}#room .other .btn+.btn{margin-left:10px}@media screen and (min-width: 576px){#room .other .btn{font-size:24px}}#room .chat{position:relative}#room .chat .output{margin-bottom:10px;padding:10px;height:343px;border:1px solid #fff;border-radius:4px;overflow-y:auto}#room .chat .output::-webkit-scrollbar{width:8px}#room .chat .output::-webkit-scrollbar-thumb{background:#888;border-radius:8px}#room .chat .output .message{display:flex;flex-direction:column;align-items:flex-start}#room .chat .output .message .user{font-size:15px}#room .chat .output .message .text{--color-me: #777;position:relative;margin-bottom:8px;padding:4px 16px 6px;border-radius:3px 15px 15px 15px;background-color:var(--color-me);box-shadow:0 0 1px var(--color-me);font-size:20px;word-wrap:break-word}#room .chat .output .message.me .text{--color-me: #7f7;margin-left:auto;border-radius:15px 3px 15px 15px;color:#000}#room .chat .sample-group{display:flex;flex-wrap:wrap}#room .chat .sample-group .sample{--color: #aaa;margin:0 10px 10px 0;padding:4px 10px;text-align:center;font-size:18px;color:var(--color);border:1px solid var(--color);border-radius:4px;background-color:#444;user-select:none;cursor:pointer;transition:all .15s}#room .chat .sample-group .sample:hover{--color: #fff}@media screen and (min-width: 576px){#room .chat .sample-group .sample{font-size:20px}}#room .chat .send{display:flex}#room .chat .send *{font-size:18px}@media screen and (min-width: 576px){#room .chat .send *{font-size:22px}}#room .chat .send input{padding:6px 12px;width:0;flex-grow:1;border:1px solid #fff;border-radius:4px;background-color:transparent}#room .chat .send input:focus{box-shadow:0 0 5px #fff}#room .chat .send button{margin-left:10px}#room #board-box{margin-top:15px;display:flex;width:100%}@media screen and (min-width: 1200px){#room #board-box{order:1;width:700px}}@media screen and (min-width: 1400px){#room #board-box{width:780px}}#room #end-game{display:none;flex-direction:column;align-items:center;position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.7)}#room #end-game .text{margin-top:100px}#room #end-game .text *{font-size:60px}@media screen and (min-width: 576px){#room #end-game .text *{font-size:120px}}#room #end-game button{margin-top:180px;padding-left:80px;padding-right:80px;font-size:24px;border:1px solid #000}@media screen and (min-width: 576px){#room #end-game button{font-size:36px}}#room #end-game.show{display:flex}#board{position:relative;margin:auto;width:100%;height:100%;max-width:640px;max-height:640px;border-radius:20px;background-color:#eea74a;pointer-events:none}@media screen and (min-width: 1200px){#board{margin:35px auto auto}}#board.my-turn{pointer-events:auto}#board line{stroke:#754a2d;stroke-width:1.5}.piece{fill:transparent;border-radius:50%}.piece.black:hover{fill:rgba(0,0,0,0.4)}.piece.black.active{fill:#000}.piece.white:hover{fill:rgba(255,255,255,0.4)}.piece.white.active{fill:#fff}.piece.latest{filter:drop-shadow(0 0 5px lime)}#modal-room-name .modal-dialog{margin-top:200px}#modal-room-name .modal-header{border-bottom:none}#modal-room-name .modal-footer{border-top:none}#modal-room-name .modal-title{font-size:32px}#modal-room-name input{font-size:24px;border:1px solid #aaa}#modal-room-name input:focus{border:1px solid #aaa;box-shadow:0 0 5px #aaa}#modal-room-name .btn{box-shadow:none}[v-cloak]{display:none !important}.df{display:flex}#toast-container{margin-top:30px}#toast-container .toast{box-shadow:0 0 5px #ddd}#toast-container .toast:hover{box-shadow:0 0 5px #fff}#toast-container .toast-message{font-family:Arial;font-size:20px}
/*# sourceMappingURL=Gobang.min.css.map */