.ft-root { position:relative; flex:0 0 auto; margin:0 auto; width:486px; max-width:100%; height:859px; font-family:'Noto Sans TC',sans-serif; font-size:16px; line-height:normal; color:#14181f; text-align:left; -webkit-tap-highlight-color:transparent; }
.ft-root, .ft-root * { box-sizing:border-box; }
.ft-root button { font-family:inherit; margin:0; }
.ft-stage { width:480px; height:853px; transform-origin:0 0; }
.ft-county { cursor:pointer; transform-box: fill-box; transform-origin: center; }
.ft-flipping { animation: ftFlipTile 360ms ease-in-out; }
@keyframes ftFlipTile {
  0% { transform: scale(1, 1); }
  40% { transform: scale(0.06, 1.04); }
  52% { transform: scale(0.06, 1.04); }
  76% { transform: scale(1, 0.86); }
  90% { transform: scale(1, 0.97); }
  100% { transform: scale(1, 1); }
}
.ft-shaking { animation: ftShake 280ms steps(2, end); }
@keyframes ftShake {
  0% { transform: translate(0,0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 1px); }
  100% { transform: translate(0,0); }
}
.ft-slap { position:fixed; pointer-events:none; font-size:30px; line-height:1; z-index:9999; animation: ftSlap 420ms ease-out forwards; }
@keyframes ftSlap {
  0% { transform: translate(-42%, -95%) scale(0.7) rotate(-12deg); opacity:0; }
  25% { transform: translate(-42%, -60%) scale(1.15) rotate(-4deg); opacity:1; }
  55% { transform: translate(-42%, -45%) scale(0.95) rotate(0deg); opacity:1; }
  100% { transform: translate(-42%, -70%) scale(0.9) rotate(0deg); opacity:0; }
}
#ftCombo { animation: ftComboIn 240ms ease-out; transform-origin:left center; }
@keyframes ftComboIn {
  0% { transform: translate(0,-50%) scale(0.4) rotate(-10deg); opacity:0; }
  60% { transform: translate(0,-50%) scale(1.15) rotate(3deg); opacity:1; }
  100% { transform: translate(0,-50%) scale(1) rotate(0deg); opacity:1; }
}
#ftComboNum { animation: ftNumSpin 420ms ease-out; }
@keyframes ftNumSpin {
  0% { transform: rotateX(0deg) scale(1); }
  50% { transform: rotateX(180deg) scale(1.3); }
  100% { transform: rotateX(360deg) scale(1); }
}
.ft-burst { position:fixed; pointer-events:none; z-index:9998; animation: ftBurst 380ms steps(4, end) forwards; }
@keyframes ftBurst {
  0% { transform: translate(-50%,-50%) scale(0.25) rotate(-8deg); opacity:1; }
  45% { transform: translate(-50%,-50%) scale(1.05) rotate(4deg); opacity:1; }
  100% { transform: translate(-50%,-50%) scale(1.25) rotate(8deg); opacity:0; }
}
.ft-clabel { pointer-events:none; user-select:none; }

.ft-quake { animation: ftQuake 420ms steps(3, end); }      
@keyframes ftQuake {
  0% { box-shadow: 6px 6px 0 #1d2533; }
  20% { box-shadow: 18px 18px 0 #d92b2b; }
  45% { box-shadow: 13px 13px 0 #1d2533; }
  70% { box-shadow: 9px 9px 0 #1d2533; }
  100% { box-shadow: 6px 6px 0 #1d2533; }
}
.ft-banner { position:absolute; left:50%; top:47%; z-index:8; pointer-events:none; white-space:nowrap; padding:10px 20px 12px; background:#f2c14e; color:#d92b2b; border:4px solid #14181f; box-shadow:6px 6px 0 #14181f; font-size:34px; font-weight:900; letter-spacing:3px; line-height:1.1; text-shadow:2px 2px 0 #fff; animation: ftBanner 1100ms linear forwards; }
@keyframes ftBanner {
  0% { transform: translate(-50%,-50%) rotate(-6deg) scale(2.6); opacity:0; }
  10% { transform: translate(-50%,-50%) rotate(-6deg) scale(0.9); opacity:1; }
  17% { transform: translate(-50%,-50%) rotate(-6deg) scale(1.08); opacity:1; }
  24% { transform: translate(-50%,-50%) rotate(-6deg) scale(1); opacity:1; }
  82% { transform: translate(-50%,-50%) rotate(-6deg) scale(1); opacity:1; }
  100% { transform: translate(-50%,-50%) rotate(-6deg) scale(1.15); opacity:0; }
}
.ft-flash { position:absolute; inset:0; z-index:7; pointer-events:none; background:#fff; animation: ftFlash 280ms steps(3, end) forwards; }
@keyframes ftFlash { 0% { opacity:0.75; } 100% { opacity:0; } }
.ft-bump { animation: ftBump 420ms steps(4, end); }
@keyframes ftBump { 0% { transform: scale(1); } 30% { transform: scale(1.75); } 65% { transform: scale(0.9); } 100% { transform: scale(1); } }
.ft-beat { animation: ftBeat 420ms steps(3, end); }
@keyframes ftBeat { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } }
.ft-float { position:absolute; pointer-events:none; font-size:14px; font-weight:900; line-height:1; animation: ftFloat 760ms steps(6, end) forwards; }
@keyframes ftFloat { 0% { transform: translate(0, 4px); opacity:0; } 20% { transform: translate(0, -6px); opacity:1; } 100% { transform: translate(0, -26px); opacity:0; } }
.ft-hot { animation: ftHot 360ms steps(1, end) infinite; }
@keyframes ftHot { 0% { color:#d92b2b; } 50% { color:#14181f; } }
.ft-bit { position:fixed; pointer-events:none; z-index:9997; }
.ft-ring { pointer-events:none; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .ft-flipping, .ft-shaking, .ft-quake, #ftCombo, #ftComboNum, .ft-bump, .ft-beat, .ft-hot { animation: none !important; }
}