@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes markPop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}60%{opacity:1;transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes winGlow{0%,100%{box-shadow:0 0 0 3px rgba(249,115,22,.55)}50%{box-shadow:0 0 0 6px rgba(249,115,22,.3)}}
@keyframes softBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes resultCardIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

.card-enter{animation:cardIn .5s cubic-bezier(.22,1,.36,1) both}
.fade-swap{animation:cardIn .35s ease both}
.mark-pop{animation:markPop .35s cubic-bezier(.34,1.56,.64,1) both}
.cell-win{animation:winGlow 1.1s ease-in-out infinite;background-color:#fff7ed !important}
.thinking-dot{animation:softBounce .9s ease-in-out infinite}
.thinking-dot:nth-child(2){animation-delay:.15s}
.thinking-dot:nth-child(3){animation-delay:.3s}

.cell{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,background-color .18s ease}
.cell:hover:not(:disabled){transform:translateY(-2px) rotate(-.5deg)}
.cell:active:not(:disabled){transform:scale(.94)}

.symbol-card{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}
.symbol-card:hover{transform:translateY(-4px) rotate(-1deg)}

#resultOverlay{animation:overlayIn .2s ease both}
#resultCard{animation:resultCardIn .3s cubic-bezier(.34,1.56,.64,1) both}
#symbolModal{animation:overlayIn .2s ease both}
.modal-pop{animation:resultCardIn .3s cubic-bezier(.34,1.56,.64,1) both}

/* Desktop: layout horizontal, bukan card sempit yang cuma diperbesar */
@media (min-width:768px){
  #gameScreen{display:grid;grid-template-columns:18rem 1fr;grid-template-areas:"score board" "status board" "controls board";align-items:center;column-gap:3rem;row-gap:1rem}
  #gameScreen>#scoreRow{grid-area:score;margin-bottom:0}
  #gameScreen>#status{grid-area:status;text-align:left;margin-bottom:0}
  #gameScreen>#board{grid-area:board;max-width:26rem;margin-left:auto;margin-right:auto;margin-bottom:0}
  #gameScreen>#controls{grid-area:controls;justify-content:flex-start}
}

/*
 * Sembunyikan iklan footer bawaan hosting gratis (ads.css & #server-footer-ad)
 * SEBELUM sempat kerender sama sekali, apapun urutan penyisipannya oleh
 * server. Penghapusan node-nya sendiri dilakukan di script.js.
 */
link[rel="stylesheet"][href*="ads.css"],
link[href*="ads.css"],
#server-footer-ad{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}