#ttt {width:310px;margin:0 auto;}
#ttt-board {display:grid;grid-template-columns:repeat(3, 100px);grid-template-rows:repeat(3, 100px);gap:5px;}
#ttt-board .cell {
    width:100px;height:100px;background:#eee;font-size:72px;display:flex;justify-content:center;align-items:center;
    cursor:pointer;user-select:none;border-radius:8px;transition:background-color 0.3s ease;
}
#ttt-board .cell:hover{background-color:#ddd;}

.birds{text-align:center;}
.bird{display:inline-block;max-width:20%;vertical-align:bottom;cursor:pointer;}
.bird img{width:100%; animation: jump 2s ease-in-out infinite;}
.bird:nth-child(1) img{animation-delay: 0.5s;}
.bird:nth-child(2) img{animation-delay: 1s;}
.bird:nth-child(3) img{animation-delay: 2s;}
.bird:nth-child(4) img{animation-delay: 1.5s;}
.bird-sad img{width:80%;max-width:350px;}

.abgame-target{position:absolute;bottom:0;left:50%;margin-left:-4%;width:8%;}
.abgame-white{position:absolute;top:0;left:0;margin-left:-5%;width:10%;}
.abgame-egg{position:absolute;top:30px;left:-500px;margin-left:-2.5%;width:5%;transition:top 2s ease 0s;}
.abgame-target img, .abgame-white img, .abgame-egg img{width:100%;}
.abgame-egg.drop{top:100%;}

.ldice{background:url(assets/dice.png) no-repeat 0 0;}
.ldice.d1{background-position-y:-60px;}
.ldice.d2{background-position-y:-120px;}
.ldice.d3{background-position-y:-180px;}
.ldice.d4{background-position-y:-240px;}
.ldice.d5{background-position-y:-300px;}
.ldice.d6{background-position-y:-360px;}

#ctr-board .cell{background-repeat:no-repeat;background-size:contain;}
.cell.wk{background-image:url(assets/wk.png);}
.cell.wq{background-image:url(assets/wq.png);}
.cell.we{background-image:url(assets/we.png);}
.cell.wp{background-image:url(assets/wp.png);}
.cell.be{background-image:url(assets/be.png);}
.cell.bk{background-image:url(assets/bk.png);}
#frame-ctrgame .msg{text-align:center;max-width:472px;margin:0 auto;}
#ctrgame .frame_actions{display:none;}
#ctr-board{
	width:480px;margin:0 auto;display:grid;border:2px solid #333;
	grid-template-columns: repeat(8, 60px);grid-template-rows: repeat(8, 60px);
}
#ctr-board .cell {width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer;}
#ctr-board .light { background-color: #f0d9b5; }
#ctr-board .dark { background-color: #b58863; }
#ctr-board .selected, #ctr-board .available{border:5px solid #66bb6a;box-sizing:border-box; }

#rdrgame{background:black;}
#rdrgame .frame_picture{z-index:10;pointer-events:none;}
#rdrgame-win{z-index:9;position:absolute;bottom:0;left:35%;width:15%;height:60%;max-height:370px;}
#rdrgame-door{z-index:11;position:absolute;bottom:10%;right:4%;width:17%;height:67%;max-height:370px;}
#rdrgame-win > div, #rdrgame-win img, #rdrgame-door > div, #rdrgame-door img{height:100%;}
#rdrgame .ca,#rdrgame .cb,#rdrgame .cc,#rdrgame .cd{display:none;}
.char-a .ca, .char-b .cb, .char-c .cc, .char-d .cd{display:block !important;}

#wordle {display: flex;align-items: center;flex-direction: column; }
#wordle .letter-box {
  border:2px solid gray;border-radius:3px;margin:2px;font-size:2rem;font-weight:700;height:3rem;width:3rem;
  display:flex;justify-content:center;align-items:center;text-transform:uppercase;
}
#wordle .filled-box {border: 2px solid black;}
#wordle .letter-row {display: flex;}

.old-building-block {
  background: linear-gradient(#e8d7bf, #e2caac);border: 4px solid #f7e0c8;border-radius: 6px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4), 2px 4px 8px rgb(99 81 38 / 60%);
  color: #2d2b28;text-shadow: 1px 1px 0 #d8d4cf;padding:10px;margin-bottom:20px;
}

#spellbee{}
.hive {position:relative;height:300px;}
.hex {
	position:absolute;left:50%;top:0;width: 100px;height: 100px;line-height:100px;background: #ffeb3b;
	clip-path: polygon(0% 50%, 25% 93%, 75% 93%, 100% 50%, 75%  7%, 25% 7%);
	text-align:center;font-size: 24px;font-weight: bold;box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: background 0.3s;
}
.hex:nth-child(1){margin:95px 0 0 -50px;background: #fbc02d;}
.hex:nth-child(2){margin:0 0 0 -50px;}
.hex:nth-child(3){margin:47px 0 0 33px;}
.hex:nth-child(4){margin:142px 0 0 33px;}
.hex:nth-child(5){margin:188px 0 0 -50px;}
.hex:nth-child(6){margin:140px 0 0 -132px;}
.hex:nth-child(7){margin:47px 0 0 -132px;}

.words{text-align:center;}
.words div{display:inline-block;padding:5px 15px;margin:5px;background:#eeeeee;}

.ff-enemy{position:absolute;top:0;left:0;height:100%;width:100%;text-align:center;}
.ff-enemy img{height:100%;}
#ffgame-spattack{width:80%;margin:0 auto;text-align:center;display:none;}
#ffgame-logs{display:none;}
#ffgame-logs p{text-align:center;}
.ffgame_hp{width:80%;margin:0 auto;}
.ffgame_hp p{text-align:center;}

.ldplayer, #ldTurn, #ldActionError{width:80%;margin:0 auto;}
.ldplayer > *{text-align:center;}
#ldTurn{margin-top:20px !important;text-align:center;vertical-align:middle;}
#ldTurn *{vertical-align:middle;}
#ldgame p{padding:10px 0;}
#ldgame .dices{}
#ldgame .ldice{border:2px solid #333;display:inline-block;width:60px;height:60px;line-height:60px;margin:0 5px;border-radius:5px;font-weight:bold;}
#ldgame .eyes, #ldgame .amount{text-align:center;}
#ldgame .bet .ldice{margin:0 2px;cursor:pointer;}
#ldBet > div > div.selected{background-color:#cfedd0;}
#ldActionError{color:#e01313;text-align:center;margin-top:20px;display:none;}

#keyboard{display:flex;flex-direction:column;align-items:center;}
#keyboard div {display:flex;}
#keyboard > div:first-child {margin:0;}
#keyboard > div {margin: 0.5rem 0 0; }
#keyboard button{font-size: 1rem;font-weight: 700;padding: 0.5rem;margin: 0 2px;cursor: pointer;text-transform: uppercase;}

@media (max-width: 768px){
	#ttt{padding:15px 0}
	#frame-spellbee{padding:10px;}
	#frame-wordle{padding:10px;}
	#frame-ctrgame{padding-top:20px;padding-bottom:20px;}
}

@media (max-width: 670px){
	#frame-ctrgame .msg{width:280px;}
	#ctr-board{width:288px;grid-template-columns: repeat(8, 36px);grid-template-rows: repeat(8, 36px);border:2px solid #333;}
	#ctr-board .cell {width:36px;height:36px;}
}

@keyframes jump {
  0%, 100% {transform: translateY(0); }
  10%{ transform: translateY(-50px); }
  20%{ transform: translateY(0); }
}